Hayu's Blog

March 08, 2020

PBKK - Tugas 5

Membuat Fitur CRUD dengan Template SBAdmin dengan CodeIgniter

Berikut ini adalah langkah-langkah untuk membuat fitur CRUD:

1. Membuat Database untuk Codeigniter

Membuat database dengan menggunakan phpmyadmin dan membuat database baru bernama tokobuah. Setelah itu, membuat tabel baru bernama products, berikut ini adalah kode SQL-nya:

CREATE TABLE `products` (
  `product_id` varchar(64) NOT NULL,
  `name` varchar(255) NOT NULL,
  `price` int(11) NOT NULL,
  `image` varchar(255) NOT NULL DEFAULT 'default.jpg',
  `description` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Berikut ini adalah tabel products pada PHPMyadmin:

2. Konfigurasi Codeigniter

Buka config/database.php, karena saya menggunakan XAMPP maka passwordnya biasanya tidak ada dan user yang digunakan adalah root, seperti ini:

$db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'tokobuah',
 'dbdriver' => 'mysqli',
 'dbprefix' => '',
 'pconnect' => FALSE,
 'db_debug' => (ENVIRONMENT !== 'production'),
 'cache_on' => FALSE,
 'cachedir' => '',
 'char_set' => 'utf8',
 'dbcollat' => 'utf8_general_ci',
 'swap_pre' => '',
 'encrypt' => FALSE,
 'compress' => FALSE,
 'stricton' => FALSE,
 'failover' => array(),
 'save_queries' => TRUE
);

Buka config/autoload.php, lalu tambahkan database dan session menjadi seperti ini:

 $autoload['libraries'] = array('database', 'session');

3. Membuat Model untuk Tabel

<?php defined('BASEPATH') OR exit('No direct script access allowed');  
 class Product_model extends CI_Model  
 {  
   private $_table = "products";  
   public $product_id;  
   public $name;  
   public $price;  
   public $image = "default.jpg";  
   public $description;  
   public function rules()  
   {  
     return [  
       ['field' => 'name',  
       'label' => 'Name',  
       'rules' => 'required'],  
       ['field' => 'price',  
       'label' => 'Price',  
       'rules' => 'numeric'],  
       ['field' => 'description',  
       'label' => 'Description',  
       'rules' => 'required']  
     ];  
   }  
   public function getAll()  
   {  
     return $this->db->get($this->_table)->result();  
   }  
   public function getById($id)  
   {  
     return $this->db->get_where($this->_table, ["product_id" => $id])->row();  
   }  
   public function save()  
   {  
     $post = $this->input->post();  
     $this->product_id = uniqid();  
     $this->name = $post["name"];  
     $this->price = $post["price"];  
     $this->description = $post["description"];  
     return $this->db->insert($this->_table, $this);  
   }  
   public function update()  
   {  
     $post = $this->input->post();  
     $this->product_id = $post["id"];  
     $this->name = $post["name"];  
     $this->price = $post["price"];  
     $this->description = $post["description"];  
     return $this->db->update($this->_table, $this, array('product_id' => $post['id']));  
   }  
   public function delete($id)  
   {  
     return $this->db->delete($this->_table, array("product_id" => $id));  
   }  
 }

4. Membuat Controller

Buat file baru di dalam folder application/controllers/admin/ dengan nama Products.php, lalu isi seperti ini:

<?php  
 defined('BASEPATH') OR exit('No direct script access allowed');  
 class Products extends CI_Controller  
 {  
   public function __construct()  
   {  
     parent::__construct();  
     $this->load->model("product_model");  
     $this->load->library('form_validation');  
   }  
   public function index()  
   {  
     $data["products"] = $this->product_model->getAll();  
     $this->load->view("admin/product/list", $data);  
   }  
   public function add()  
   {  
     $product = $this->product_model;  
     $validation = $this->form_validation;  
     $validation->set_rules($product->rules());  
     if ($validation->run()) {  
       $product->save();  
       $this->session->set_flashdata('success', 'Berhasil disimpan');  
     }  
     $this->load->view("admin/product/new_form");  
   }  
   public function edit($id = null)  
   {  
     if (!isset($id)) redirect('admin/products');  
     $product = $this->product_model;  
     $validation = $this->form_validation;  
     $validation->set_rules($product->rules());  
     if ($validation->run()) {  
       $product->update();  
       $this->session->set_flashdata('success', 'Berhasil disimpan');  
     }  
     $data["product"] = $product->getById($id);  
     if (!$data["product"]) show_404();  
     $this->load->view("admin/product/edit_form", $data);  
   }  
   public function delete($id=null)  
   {  
     if (!isset($id)) show_404();  
     if ($this->product_model->delete($id)) {  
       redirect(site_url('admin/products'));  
     }  
   }  
 }

5. Membuat View

Buat Folder baru pada direktori views/admin bernama product, setelah itu kita akan membuat ketiga view di dalam folder views/admin/product/

View List Data: buat file bernama list.php, lalu isi seperti ini:

<!DOCTYPE html>
<html lang="en">

<head>
 <?php $this->load->view("admin/_partials/head.php") ?>
</head>

<body id="page-top">

 <?php $this->load->view("admin/_partials/navbar.php") ?>
 <div id="wrapper">

  <?php $this->load->view("admin/_partials/sidebar.php") ?>

  <div id="content-wrapper">

   <div class="container-fluid">

    <?php $this->load->view("admin/_partials/breadcrumb.php") ?>

    <!-- DataTables -->
    <div class="card mb-3">
     <div class="card-header">
      <a href="<?php echo site_url('admin/products/add') ?>"><i class="fas fa-plus"></i> Add New</a>
     </div>
     <div class="card-body">

      <div class="table-responsive">
       <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
        <thead>
         <tr>
          <th>Name</th>
          <th>Price</th>
          <th>Photo</th>
          <th>Description</th>
          <th>Action</th>
         </tr>
        </thead>
        <tbody>
         <?php foreach ($products as $product): ?>
         <tr>
          <td width="150">
           <?php echo $product->name ?>
          </td>
          <td>
           <?php echo $product->price ?>
          </td>
          <td>
           <img src="<?php echo base_url('upload/product/'.$product->image) ?>" width="64" />
          </td>
          <td class="small">
           <?php echo substr($product->description, 0, 120) ?>...</td>
          <td width="250">
           <a href="<?php echo site_url('admin/products/edit/'.$product->product_id) ?>"
            class="btn btn-small"><i class="fas fa-edit"></i> Edit</a>
           <a onclick="deleteConfirm('<?php echo site_url('admin/products/delete/'.$product->product_id) ?>')"
            href="#!" class="btn btn-small text-danger"><i class="fas fa-trash"></i> Hapus</a>
          </td>
         </tr>
         <?php endforeach; ?>

        </tbody>
       </table>
      </div>
     </div>
    </div>

   </div>
   <!-- /.container-fluid -->

   <!-- Sticky Footer -->
   <?php $this->load->view("admin/_partials/footer.php") ?>

  </div>
  <!-- /.content-wrapper -->

 </div>
 <!-- /#wrapper -->


 <?php $this->load->view("admin/_partials/scrolltop.php") ?>
 <?php $this->load->view("admin/_partials/modal.php") ?>

 <?php $this->load->view("admin/_partials/js.php") ?>

    <script>
    function deleteConfirm(url){
 $('#btn-delete').attr('href', url);
 $('#deleteModal').modal();
    }
</script>
</body>

</html>

Membuat Form Add: buat file bernama new_form.php, lalu isi seperti ini:

 <!DOCTYPE html>
<html lang="en">

<head>
 <?php $this->load->view("admin/_partials/head.php") ?>
</head>

<body id="page-top">

 <?php $this->load->view("admin/_partials/navbar.php") ?>
 <div id="wrapper">

  <?php $this->load->view("admin/_partials/sidebar.php") ?>

  <div id="content-wrapper">

   <div class="container-fluid">

    <?php $this->load->view("admin/_partials/breadcrumb.php") ?>

    <?php if ($this->session->flashdata('success')): ?>
    <div class="alert alert-success" role="alert">
     <?php echo $this->session->flashdata('success'); ?>
    </div>
    <?php endif; ?>

    <div class="card mb-3">
     <div class="card-header">
      <a href="<?php echo site_url('admin/products/') ?>"><i class="fas fa-arrow-left"></i> Back</a>
     </div>
     <div class="card-body">

      <form action="<?php echo site_url('admin/products/add') ?>" method="post" enctype="multipart/form-data" >
       <div class="form-group">
        <label for="name">Name*</label>
        <input class="form-control <?php echo form_error('name') ? 'is-invalid':'' ?>"
         type="text" name="name" placeholder="Product name" />
        <div class="invalid-feedback">
         <?php echo form_error('name') ?>
        </div>
       </div>

       <div class="form-group">
        <label for="price">Price*</label>
        <input class="form-control <?php echo form_error('price') ? 'is-invalid':'' ?>"
         type="number" name="price" min="0" placeholder="Product price" />
        <div class="invalid-feedback">
         <?php echo form_error('price') ?>
        </div>
       </div>


       <div class="form-group">
        <label for="name">Photo</label>
        <input class="form-control-file <?php echo form_error('price') ? 'is-invalid':'' ?>"
         type="file" name="image" />
        <div class="invalid-feedback">
         <?php echo form_error('image') ?>
        </div>
       </div>

       <div class="form-group">
        <label for="name">Description*</label>
        <textarea class="form-control <?php echo form_error('description') ? 'is-invalid':'' ?>"
         name="description" placeholder="Product description..."></textarea>
        <div class="invalid-feedback">
         <?php echo form_error('description') ?>
        </div>
       </div>

       <input class="btn btn-success" type="submit" name="btn" value="Save" />
      </form>

     </div>

     <div class="card-footer small text-muted">
      * required fields
     </div>


    </div>
    <!-- /.container-fluid -->

    <!-- Sticky Footer -->
    <?php $this->load->view("admin/_partials/footer.php") ?>

   </div>
   <!-- /.content-wrapper -->

  </div>
  <!-- /#wrapper -->


  <?php $this->load->view("admin/_partials/scrolltop.php") ?>

  <?php $this->load->view("admin/_partials/js.php") ?>

</body>

</html>

Membuat Form Edit: buat file baru bernama edit_form.php, lalu isi seperti ini:

<!DOCTYPE html>
<html lang="en">

<head>
 <?php $this->load->view("admin/_partials/head.php") ?>
</head>

<body id="page-top">

 <?php $this->load->view("admin/_partials/navbar.php") ?>
 <div id="wrapper">

  <?php $this->load->view("admin/_partials/sidebar.php") ?>

  <div id="content-wrapper">

   <div class="container-fluid">

    <?php $this->load->view("admin/_partials/breadcrumb.php") ?>

    <?php if ($this->session->flashdata('success')): ?>
    <div class="alert alert-success" role="alert">
     <?php echo $this->session->flashdata('success'); ?>
    </div>
    <?php endif; ?>

    <!-- Card  -->
    <div class="card mb-3">
     <div class="card-header">

      <a href="<?php echo site_url('admin/products/') ?>"><i class="fas fa-arrow-left"></i>
       Back</a>
     </div>
     <div class="card-body">

      <form action="" method="post" enctype="multipart/form-data">
      <!-- Note: atribut action dikosongkan, artinya action-nya akan diproses 
       oleh controller tempat vuew ini digunakan. Yakni index.php/admin/products/edit/ID --->

       <input type="hidden" name="id" value="<?php echo $product->product_id?>" />

       <div class="form-group">
        <label for="name">Name*</label>
        <input class="form-control <?php echo form_error('name') ? 'is-invalid':'' ?>"
         type="text" name="name" placeholder="Product name" value="<?php echo $product->name ?>" />
        <div class="invalid-feedback">
         <?php echo form_error('name') ?>
        </div>
       </div>

       <div class="form-group">
        <label for="price">Price</label>
        <input class="form-control <?php echo form_error('price') ? 'is-invalid':'' ?>"
         type="number" name="price" min="0" placeholder="Product price" value="<?php echo $product->price ?>" />
        <div class="invalid-feedback">
         <?php echo form_error('price') ?>
        </div>
       </div>


       <div class="form-group">
        <label for="name">Photo</label>
        <input class="form-control-file <?php echo form_error('image') ? 'is-invalid':'' ?>"
         type="file" name="image" />
        <input type="hidden" name="old_image" value="<?php echo $product->image ?>" />
        <div class="invalid-feedback">
         <?php echo form_error('image') ?>
        </div>
       </div>

       <div class="form-group">
        <label for="name">Description*</label>
        <textarea class="form-control <?php echo form_error('description') ? 'is-invalid':'' ?>"
         name="description" placeholder="Product description..."><?php echo $product->description ?></textarea>
        <div class="invalid-feedback">
         <?php echo form_error('description') ?>
        </div>
       </div>

       <input class="btn btn-success" type="submit" name="btn" value="Save" />
      </form>

     </div>

     <div class="card-footer small text-muted">
      * required fields
     </div>


    </div>
    <!-- /.container-fluid -->

    <!-- Sticky Footer -->
    <?php $this->load->view("admin/_partials/footer.php") ?>

   </div>
   <!-- /.content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <?php $this->load->view("admin/_partials/scrolltop.php") ?>

  <?php $this->load->view("admin/_partials/js.php") ?>

</body>

</html>

6. Fitur untuk Menghapus Data

Tambahkan kode berikut pada file views/admin/product/list.php sebelum tutup <body>:

 <script>  
 function deleteConfirm(url){  
      $('#btn-delete').attr('href', url);  
      $('#deleteModal').modal();  
 }  
 </script>

Tambahkan sebuah modal untuk delete di dalam file views/admin/_partials/modal.php, seperti ini:

<!-- Logout Delete Confirmation-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">Data yang dihapus tidak akan bisa dikembalikan.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a id="btn-delete" class="btn btn-danger" href="#">Delete</a>
      </div>
    </div>
  </div>
</div>

7. Hasil: