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 2 PBKK - Simple Program .NET Framework

 Tugas 2 PBKK - SIMPLE PROGRAM .NET FRAMEWORK Sitti Chofifah - 05111840000039 - PBKK B Pada kesempatan kali ini, kita akan belajar membuat program sederhana menggunakan .NET Framework. Ada beberapa langkah yang harus dilakukan untuk menyelesaikan tugas ini, yang akan dibahas satu persatu. Mari kita coba... Langkah 1 . Install Microsoft Visual Studio yang dapat dilakukan dengan mengakses link berikut : https://visualstudio.microsoft.com/downloads/ Langkah 2 . Pilih untuk meng-install .NET desktop development  di Microsoft Visual Studio Langkah 3. Tunggu beberapa menit hingga Microsoft Visual Studio berhasil di install pada laptop masing-masing Langkah 4. Membuat project baru dengan klik Create a new project Langkah 5. Pilih Console App (.NET Framework) kemudian klik Next     Langkah 6. Beri nama project yang ingin dibuat. Disini saya memberi nama project ini adalah "Tugas2PBKK". Kemudian selanjutnya dengan memilih tempat untuk menyimpan project ini di laptop masing-...
Post a Comment
Read more