Tugas 7 PBKK - Membuat aplikasi CRUD menggunakan Code Igniter

Geizka Wahyu Fahriza

05111840000062

PBKK A

Membuat aplikasi CRUD menggunakan Code Igniter

Deskripsi Aplikasi

Aplikasi 

1. Setting Database dan Model

Untuk database, saya menggunakan mysql. Untuk melakukan manipulasi database menggunakan dbeaver. Setelah membuat database, saya membuat table untuk setiap Project. Berikut merupakan script untuk menambahkan tablenya.

	CREATE TABLE `projects` (
	`id` int NOT NULL AUTO_INCREMENT,
	`name` varchar(100) NOT NULL,
	`status` varchar(20) NOT NULL,
	`types` varchar(20) NOT NULL,
	`deadline` date NOT NULL,
	PRIMARY KEY (`id`)
	)

view raw project.sql hosted with ❤ by GitHub

Setelah menjalankan script tersebut, saatnya mengatur /application/config/database.php

hostname diubah sesuai dengan ip server database 

username diubah sesuai dengan akun user pada mysql 
password diubah sesuai dengan password pada akun user

database diubah sesuai dengan nama database pada mysql

Setelah membuat configurasi database, buatlah sebuah file di direktori application/model. Untuk penugasan ini, saya akan membuat file Project_model.php yang berfungsi sebagai model untuk table Project.

	<?php
	class Project_model extends CI_Model {
	public function __construct(){
	$this->load->database();
	}
	public function get_projects($id = FALSE){
	if($id === FALSE){
	$query = $this->db->get('projects');
	return $query->result_array();
	}
	$query = $this->db->get_where('projects', array('id' => $id));
	return $query->row_array();
	}
	public function set_projects(){
	$data = array(
	'name' => $this->input->post('name'),
	'status' => $this->input->post('status'),
	'types' => $this->input->post('type'),
	'deadline' => $this->input->post('deadline')
	);
	return $this->db->insert('projects', $data);
	}
	public function edit_projects(){
	$id = $this->input->post('id');
	$this->db->set('name', $this->input->post('name'));
	$this->db->set('status', $this->input->post('status'));
	$this->db->set('types', $this->input->post('type'));
	$this->db->set('deadline', $this->input->post('deadline'));
	$this->db->where('id', $id);
	return $this->db->update('projects');
	}
	public function delete_project($id){
	$this->db->where('id', $id);
	$this->db->delete('projects');
	}
	}

view raw Project_model.php hosted with ❤ by GitHub

2. Membuat Controller dan View

Selanjutnya kita membuat controller untuk Project. Pada direktori application/controllers buatlah file Projects.php. Berikut merupakan isi dari controller Projects.

	<?php
	class Project_model extends CI_Model {
	public function __construct(){
	$this->load->database();
	}
	public function get_projects($id = FALSE){
	if($id === FALSE){
	$query = $this->db->get('projects');
	return $query->result_array();
	}
	$query = $this->db->get_where('projects', array('id' => $id));
	return $query->row_array();
	}
	public function set_projects(){
	$data = array(
	'name' => $this->input->post('name'),
	'status' => $this->input->post('status'),
	'types' => $this->input->post('type'),
	'deadline' => $this->input->post('deadline')
	);
	return $this->db->insert('projects', $data);
	}
	public function edit_projects(){
	$id = $this->input->post('id');
	$this->db->set('name', $this->input->post('name'));
	$this->db->set('status', $this->input->post('status'));
	$this->db->set('types', $this->input->post('type'));
	$this->db->set('deadline', $this->input->post('deadline'));
	$this->db->where('id', $id);
	return $this->db->update('projects');
	}
	public function delete_project($id){
	$this->db->where('id', $id);
	$this->db->delete('projects');
	}
	}

view raw Project_model.php hosted with ❤ by GitHub

Selanjutnya kita harus menyambungkan controller tersebut ke routes. Untuk melakukan ini, kita harus mengubah application/config/routes.php

Dengan ini, saat kita mengakses direktori awal, kita akan menggunakan controller Projects.

Selanjutnya saya harus membuat view dari basic CRUD. Saya menggunakan layout dari sini. Untuk menggunakan view tersebut, saya harus mengubah beberapa text dan fungsionalitas. Buatlah file Project_list.php di direktori application/views. Untuk file .css buatlah direktori css di direktori projek, sedangkan untuk file .js buatlah direktori js di direktori projek. Berikut merupakan hasilnya.

	body {
	color: #566787;
	background: #f5f5f5;
	font-family: 'Varela Round', sans-serif;
	font-size: 13px;
	}
	.table-responsive {
	margin: 30px 0;
	}
	.table-wrapper {
	min-width: 1000px;
	background: #fff;
	padding: 20px 25px;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0,0,0,.05);
	}
	.table-title {
	padding-bottom: 15px;
	background: #435d7d;
	color: #fff;
	padding: 16px 30px;
	margin: -20px -25px 10px;
	border-radius: 3px 3px 0 0;
	}
	.table-title h2 {
	margin: 5px 0 0;
	font-size: 24px;
	}
	.table-title .btn-group {
	float: right;
	}
	.table-title .btn {
	color: #fff;
	float: right;
	font-size: 13px;
	border: none;
	min-width: 50px;
	border-radius: 2px;
	border: none;
	outline: none !important;
	margin-left: 10px;
	}
	.table-title .btn i {
	float: left;
	font-size: 21px;
	margin-right: 5px;
	}
	.table-title .btn span {
	float: left;
	margin-top: 2px;
	}
	table.table tr th, table.table tr td {
	border-color: #e9e9e9;
	padding: 12px 15px;
	vertical-align: middle;
	}
	table.table tr th:first-child {
	width: 60px;
	}
	table.table tr th:last-child {
	width: 100px;
	}
	table.table-striped tbody tr:nth-of-type(odd) {
	background-color: #fcfcfc;
	}
	table.table-striped.table-hover tbody tr:hover {
	background: #f5f5f5;
	}
	table.table th i {
	font-size: 13px;
	margin: 0 5px;
	cursor: pointer;
	}
	table.table td:last-child i {
	opacity: 0.9;
	font-size: 22px;
	margin: 0 5px;
	}
	table.table td a {
	font-weight: bold;
	color: #566787;
	display: inline-block;
	text-decoration: none;
	outline: none !important;
	}
	table.table td a:hover {
	color: #2196F3;
	}
	table.table td a.edit {
	color: #FFC107;
	}
	table.table td a.delete {
	color: #F44336;
	}
	table.table td i {
	font-size: 19px;
	}
	table.table .avatar {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 10px;
	}
	.pagination {
	float: right;
	margin: 0 0 5px;
	}
	.pagination li a {
	border: none;
	font-size: 13px;
	min-width: 30px;
	min-height: 30px;
	color: #999;
	margin: 0 2px;
	line-height: 30px;
	border-radius: 2px !important;
	text-align: center;
	padding: 0 6px;
	}
	.pagination li a:hover {
	color: #666;
	}
	.pagination li.active a, .pagination li.active a.page-link {
	background: #03A9F4;
	}
	.pagination li.active a:hover {
	background: #0397d6;
	}
	.pagination li.disabled i {
	color: #ccc;
	}
	.pagination li i {
	font-size: 16px;
	padding-top: 6px
	}
	.hint-text {
	float: left;
	margin-top: 10px;
	font-size: 13px;
	}
	/* Custom checkbox */
	.custom-checkbox {
	position: relative;
	}
	.custom-checkbox input[type="checkbox"] {
	opacity: 0;
	position: absolute;
	margin: 5px 0 0 3px;
	z-index: 9;
	}
	.custom-checkbox label:before{
	width: 18px;
	height: 18px;
	}
	.custom-checkbox label:before {
	content: '';
	margin-right: 10px;
	display: inline-block;
	vertical-align: text-top;
	background: white;
	border: 1px solid #bbb;
	border-radius: 2px;
	box-sizing: border-box;
	z-index: 2;
	}
	.custom-checkbox input[type="checkbox"]:checked + label:after {
	content: '';
	position: absolute;
	left: 6px;
	top: 3px;
	width: 6px;
	height: 11px;
	border: solid #000;
	border-width: 0 3px 3px 0;
	transform: inherit;
	z-index: 3;
	transform: rotateZ(45deg);
	}
	.custom-checkbox input[type="checkbox"]:checked + label:before {
	border-color: #03A9F4;
	background: #03A9F4;
	}
	.custom-checkbox input[type="checkbox"]:checked + label:after {
	border-color: #fff;
	}
	.custom-checkbox input[type="checkbox"]:disabled + label:before {
	color: #b8b8b8;
	cursor: auto;
	box-shadow: none;
	background: #ddd;
	}
	/* Modal styles */
	.modal .modal-dialog {
	max-width: 400px;
	}
	.modal .modal-header, .modal .modal-body, .modal .modal-footer {
	padding: 20px 30px;
	}
	.modal .modal-content {
	border-radius: 3px;
	}
	.modal .modal-footer {
	background: #ecf0f1;
	border-radius: 0 0 3px 3px;
	}
	.modal .modal-title {
	display: inline-block;
	}
	.modal .form-control {
	border-radius: 2px;
	box-shadow: none;
	border-color: #dddddd;
	}
	.modal textarea.form-control {
	resize: vertical;
	}
	.modal .btn {
	border-radius: 2px;
	min-width: 100px;
	}
	.modal form label {
	font-weight: normal;
	}

view raw project_list.css hosted with ❤ by GitHub

	function editProject(id){
	$('#editParam').attr('value', id);
	$.ajax({
	type: "get",
	url: url+"index.php/data/"+id,
	success: function (response) {
	var data = JSON.parse(response);
	$('#editProjectModal input[name="name"]').attr('value', data['name']);
	$('#editProjectModal select[name="status"]').attr('value', data['status']).change();
	$('#editProjectModal select[name="status"]').prop('value', data['status']).change();
	$('#editProjectModal input[name="type"]').attr('value', data['types']);
	$('#editProjectModal input[name="deadline"]').attr('value', data['deadline']);
	}
	});
	}
	function deleteProject(id){
	$('#deleteProjectModal #deleteParam').attr('value', id);
	}

view raw project_list.js hosted with ❤ by GitHub

	<?php
	defined('BASEPATH') OR exit('No direct script access allowed');
	?>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap CRUD Data Table for Database with Modal Form</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="<?php echo base_url(); ?>css/project_list.css">
	<script src="<?php echo base_url(); ?>js/project_list.js"></script>
	<script>
	var url = "<?php echo base_url()?>";
	</script>
	</head>
	<body>
	<div class="container">
	<div class="table-responsive">
	<div class="table-wrapper">
	<div class="table-title">
	<div class="row">
	<div class="col-xs-6">
	<h2>Manage <b>Projects</b></h2>
	</div>
	<div class="col-xs-6">
	<a href="#addProjectModal" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i> <span>Add New Project</span></a>
	</div>
	</div>
	</div>
	<table class="table table-striped table-hover">
	<thead>
	<tr>
	<th>Name</th>
	<th>Status</th>
	<th>Type</th>
	<th>Deadline</th>
	<th>Actions</th>
	</tr>
	</thead>
	<tbody>
	<?php foreach ($projects as $project_item): ?>
	<tr>
	<td><?php echo $project_item['name'];?></td>
	<td><?php echo $project_item['status'];?></td>
	<td><?php echo $project_item['types'];?></td>
	<td><?php echo date("d/m/Y", strtotime($project_item['deadline']));?></td>
	<td>
	<a href="#editProjectModal" onclick="editProject(<?php echo $project_item['id'];?>)" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
	<a href="#deleteProjectModal" onclick="deleteProject(<?php echo $project_item['id'];?>)" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
	</td>
	</tr>
	<?php endforeach; ?>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	<!-- Edit Modal HTML -->
	<div id="addProjectModal" class="modal fade">
	<div class="modal-dialog">
	<div class="modal-content">
	<?php echo form_open('projects/create'); ?>
	<div class="modal-header">
	<h4 class="modal-title">Add Project</h4>
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	</div>
	<div class="modal-body">
	<div class="form-group">
	<label>Name</label>
	<input type="text" name="name" class="form-control" required>
	</div>
	<div class="form-group">
	<label>Status</label>
	<select name="status" class="form-control">
	<option value="Pending">Pending</option>
	<option value="In progress">In Progress</option>
	<option value="Review">Review</option>
	<option value="Done">Done</option>
	</select>
	</div>
	<div class="form-group">
	<label>Type</label>
	<input type="text" name="type" class="form-control" required>
	</div>
	<div class="form-group">
	<label>Deadline</label>
	<input type="date" name="deadline" class="form-control" required>
	</div>
	</div>
	<div class="modal-footer">
	<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
	<input type="submit" class="btn btn-success" value="Add">
	</div>
	</form>
	</div>
	</div>
	</div>
	<!-- Edit Modal HTML -->
	<div id="editProjectModal" class="modal fade">
	<div class="modal-dialog">
	<div class="modal-content">
	<?php echo form_open('projects/edit'); ?>
	<input id="editParam" type="hidden" name="id" value="">
	<div class="modal-header">
	<h4 class="modal-title">Edit Project</h4>
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	</div>
	<div class="modal-body">
	<div class="form-group">
	<label>Name</label>
	<input type="text" name="name" class="form-control" required>
	</div>
	<div class="form-group">
	<label>Status</label>
	<select name="status" class="form-control">
	<option value="Pending">Pending</option>
	<option value="In progress">In Progress</option>
	<option value="Review">Review</option>
	<option value="Done">Done</option>
	</select>
	</div>
	<div class="form-group">
	<label>Type</label>
	<input type="text" name="type" class="form-control" required>
	</div>
	<div class="form-group">
	<label>Deadline</label>
	<input type="date" name="deadline" class="form-control" required>
	</div>
	</div>
	<div class="modal-footer">
	<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
	<input type="submit" class="btn btn-info" value="Save">
	</div>
	</form>
	</div>
	</div>
	</div>
	<!-- Delete Modal HTML -->
	<div id="deleteProjectModal" class="modal fade">
	<div class="modal-dialog">
	<div class="modal-content">
	<?php echo form_open('projects/delete'); ?>
	<div class="modal-header">
	<h4 class="modal-title">Delete Project</h4>
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	</div>
	<div class="modal-body">
	<p>Are you sure you want to delete these Records?</p>
	<p class="text-warning"><small>This action cannot be undone.</small></p>
	</div>
	<div class="modal-footer">
	<input type="hidden" id="deleteParam" name="id" value="">
	<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
	<input type="submit" class="btn btn-danger" value="Delete">
	</div>
	</form>
	</div>
	</div>
	</div>
	</body>
	</html>

view raw Project_list.php hosted with ❤ by GitHub

3. Jalankan Aplikasi