Skip to main content

Tugas 7 PBKK - Membuat CRUD Menggunakan CodeIgniter

 

Tugas 7 PBKK : Membuat CRUD Menggunakan Code Igniter

Sitti Chofifah - 05111840000039 - PBKK B

 

Berikut langkah langkah membuat website CRUD untuk management data mahasiswa :

1. Setting database

Pertama kita harus membuat database, disini saya menggunakan mysql. Berikut script untuk membuat table setelah database sudah dibuat 

-- mahasiswa_db.mahasiswa definition
 
CREATE TABLE `mahasiswa` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `nama` VARCHAR(100) NOT NULL,
  `nrp` VARCHAR(20) NOT NULL,
  `sekolah` VARCHAR(100) NOT NULL,
  `alamat` VARCHAR(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
 

Setelah menjalanan script diatas, atur database di /application/config/database.php 

 
 
3. Buat model sebagai model untuk table project ini
Disini saya membuat mahasiswa_model.php sebagai model
 
<?php
class mahasiswa_model extends CI_Model {
 
    public function __construct(){
        $this->load->database();
    }
 
    public function get_projects($id = FALSE){
        if($id === FALSE){
            $query = $this->db->get('mahasiswa');
            return $query->result_array();
        }
        $query = $this->db->get_where('mahasiswa', array('id' => $id));
        return $query->row_array();
    }
 
    public function set_projects(){
 
        $data = array(
            'nama' => $this->input->post('nama'),
            'nrp' => $this->input->post('nrp'),
            'sekolah' => $this->input->post('sekolah'),
            'alamat' => $this->input->post('alamat')
        );
 
        return $this->db->insert('mahasiswa', $data);
    }
 
    public function edit_projects(){
        $id = $this->input->post('id');
        $this->db->set('nama', $this->input->post('nama'));
        $this->db->set('nrp', $this->input->post('nrp'));
        $this->db->set('sekolah', $this->input->post('sekolah'));
        $this->db->set('alamat', $this->input->post('alamat'));
        $this->db->where('id', $id);
        return $this->db->update('mahasiswa');
    }
 
    public function delete_project($id){
        $this->db->where('id', $id);
        $this->db->delete('mahasiswa');
    }
}
 
4. Selanjutnya membuat controller untuk project ini
 
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
 
class mahasiswa extends CI_Controller {
 
	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see https://codeigniter.com/user_guide/general/urls.html
	 */
	function __construct() {
		parent::__construct();
 
		// Load url helper
        $this->load->model('mahasiswa_model');
		$this->load->helper('url');
		$this->load->helper('form');
		parse_str($_SERVER['QUERY_STRING'], $_GET); 
	}
 
	public function index() {
		$action = $this->input->post('action');
		$this->db->error();
		$data['mahasiswa_db'] = $this->mahasiswa_model->get_projects();
		if($action === 'Delete'){
			$this->load->view('mahasiswa');
		}else{
			$this->load->view('mahasiswa', $data);
		}
	}
 
	public function create(){
		$this->mahasiswa_model->set_projects();
		redirect('/mahasiswa', 'refresh');
	}
 
	public function edit(){
		$this->mahasiswa_model->edit_projects();
		redirect('/mahasiswa', 'refresh');
	}
 
	public function data($id){
		echo json_encode($this->mahasiswa_model->get_projects($id));
	}
 
	public function delete(){
		$id = $this->input->post('id');
		$this->mahasiswa_model->delete_project($id);
		redirect(base_url(), 'refresh');
	}
 
}
 
 
5. Sambungkan controller ke routes
 
 
 
6. Membuat views sesuai design masing-masing
 
Berikut code views untuk website manage data mahasiswa
 
<?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>CRUD Mahasiswa</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/views.css">
<script src="<?php echo base_url(); ?>js/scripts.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 Data <b>Mahasiswa</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>Tambahkan Mahasiswa Baru</span></a>					
						</div>
					</div>
				</div>
				<table class="table table-striped table-hover">
					<thead>
						<tr>
							<th>Nama Lengkap</th>
							<th>NRP</th>
							<th>Asal Sekolah</th>
							<th>Alamat</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
                        <?php foreach ($mahasiswa_db as $project_item): ?>
						<tr>
							<td><?php echo $project_item['nama'];?></td>
							<td><?php echo $project_item['nrp'];?></td>
							<td><?php echo $project_item['sekolah'];?></td>
							<td><?php echo $project_item['alamat'];?></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('mahasiswa/create'); ?>
					<div class="modal-header">						
						<h4 class="modal-title">Tambah Data Mahasiswa</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					</div>
					<div class="modal-body">					
						<div class="form-group">
							<label>Nama</label>
							<input type="text" name="nama" class="form-control" required>
						</div>
						<div class="form-group">
							<label>NRP</label>
                            <input type="text" name="nrp" class="form-control" required>
						</div>
						<div class="form-group">
							<label>Sekolah Asal</label>
							<input type="text" name="sekolah" class="form-control" required>
						</div>
						<div class="form-group">
							<label>Alamat</label>
							<input type="text" name="alamat" class="form-control" required>
						</div>					
					</div>
					<div class="modal-footer">
						<input type="button" class="btn btn-default" data-dismiss="modal" value="Batal">
						<input type="submit" class="btn btn-success" value="Simpan">
					</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('mahasiswa/edit'); ?>
                    <input id="editParam" type="hidden" name="id" value="">
					<div class="modal-header">						
						<h4 class="modal-title">Edit Data Mahasiswa</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					</div>
					<div class="modal-body">					
						<div class="form-group">
							<label>Nama</label>
							<input type="text" name="nama" class="form-control" required>
						</div>
						<div class="form-group">
							<label>NRP</label>
                            <input type="text" name="nrp" class="form-control" required>
						</div>
						<div class="form-group">
							<label>Sekolah Asal</label>
							<input type="text" name="sekolah" class="form-control" required>
						</div>
						<div class="form-group">
							<label>Alamat</label>
							<input type="text" name="alamat" class="form-control" required>
						</div>					
					</div>
					<div class="modal-footer">
						<input type="button" class="btn btn-default" data-dismiss="modal" value="Batal">
						<input type="submit" class="btn btn-info" value="Simpan Perubahan">
					</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('mahasiswa/delete'); ?>
					<div class="modal-header">						
						<h4 class="modal-title">Hapus Data Mahasiswa</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="Batal">
						<input type="submit" class="btn btn-danger" value="Hapus">
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>
 
 
body {
    color: #39A2DB;
    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: #39A2DB;
    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;
}
 

Berikut tampilan untuk website manage data mahasiswa




Berikut tampilan setelah menekan tombol "Tambahkan Mahasiswa Baru"





Berikut tampilan setelah menambahkan data mahasiswa baru



Berikut tampilan setelah menekan tombol edit ( tombol dengan icon pencil )



Berikut tampilan setelah menakan tombol hapus ( tombol dengan icon tempat sampah )



Comments

Post a Comment

Popular posts from this blog

Tugas 3 PBKK - Calculator Program & Currency Converter Program

 Calculator Program and Currency Converter Program Sitti Chofifah - 05111840000039 - PBKK B  Pada kesempatan kali ini, saya akan membuat calculator program menggunakan WinForm dan currency converter program dengan menggunakan API dari Currency Converter API .    Calculator Program           Calculator Program merupakan aplikasi kalkulator sederhana yang dapat melakukan berbagai operasi matematika seperti pertambahan, pengurangan, perkalian dan pembagian dengan cara melakukan input 2 buah angka dan memilih 1 operasi matematika. Berikut code untuk calculator program   Calculator Design Code : namespace Kalkulator { partial class Kalkulator { /// <summary> /// Required designer variable. /// </summary> private System.ComponentModel.IContainer components = null ; /// <summary> /// Clean up any resources being used. /// </summary> /// <param name="disposing">true if managed resources should be disposed; otherwi
Post a Comment
Read more