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

Evaluasi Tengah Semester PBKK 2021

 Evaluasi Tengah Semester PBKK : Aplikasi Point of Sales Sitti Chofifah - 05111840000039 - PBKK B 1. Sebutkan aplikasi POS yang biasa dipakai di masyarakat           Jawab : iSeller, Majo, Moka POS,Poozol POS, Luna POS 2. Fitur apa saja yang ada di dalam aplikasi tersebut, buatlah screenshotnya dan jelaskan Jawab : iSeller             Majo        Moka POS     Pozool POS             Luna POS     Kelompok : Muhammad Ilham Bayhaqi - 05111840000069 Sitti Chofifah - 05111840000039    3. Buat rancangan UI dan navigasi Aplikasi POS mu sendiri ? Jawab : Rancangan UI awal untuk aplikasi kasir kami yaitu seperti gambar di bawah ini.   Namun dalam implementasinya ternyata ada beberapa perubahan dari rancangan awal yang kami buat. Sehingga hasil akhi dari desain program yang kami buat sebagai berikut.          4. D...
Post a Comment
Read more

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...
Post a Comment
Read more