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 6 PBKK - Membuat Profil Sederhana Menggunakan Code Igniter

Tugas 6 PBKK : Membuat Profil Sederhana Menggunakan Code Igniter Sitti Chofifah - 05111840000039 - PBKK B   Cara membuat website sederhana menggunakan CodeIgniter adalah sebagai berikut : 1. Install XAMPP 2. Download CodeIgniter 3. Buat folder di directory xampp/htdocs/[nama project] 4. Masukkan file hasil download CodeIgniter ke dalam directory xampp  5. Buka XAMPP , klik tombol Start dibagian Apache     6. Setelah itu buka browser dan akses localhost/[nama project], maka akan terlihat tampilan seperti ini     7. Edit code agar menampilkan website sesuai desain masing masing 8. Berikut hasil web saya         
Post a Comment
Read more

Tugas 1 PBKK B - Portofolio Aplikasi Menggunakan Framework

Sitti Chofifah 05111840000039 PBKK B   Berikut website yang pernah saya kerjakan Cemal - Cemil adalah website untuk pemesanan snack sehat dengan harga yang murah meriah. Cemal - cemil berlokasi di Sukolilo, Surabaya. Cemal - cemil berfokus untuk memberikan layanan yang terbaik ke pelanggan.  Dalam website tersebut terdapat beberapa fitur seperti pemesanan, login, homepage, profile, dan contacts. Untuk membuat website tersebut, framework yang digunakan adalah laravel dan bootstrap.    
Post a Comment
Read more