Kamis, 05 Maret 2020

PBKK A - Tugas 5. Membuat CRUD pada Template SBAdmin dengan CodeIgniter

CRUD adalah singkatan dari Create, Read, Update, dan Delete yang merupakan operasi-operasi dasar dalam sebuah aplikasi, baik aplikasi web maupun aplikasi mobile.

Pada tugas ini, kita akan membuat fitur CRUD pada Template SBAdmin aplikasi web Tokobuah dengan framework CodeIgniter.

Berikut adalah langkah-langkah untuk membuat fitur CRUD :

1. Membuat Database
Pada tugas ini,kita menggunakan XAMPP untuk koneksi dengan Apache dan MySQL.
Hidupkan kedua modul tersebut.
Kemudian, buka localhost/phpmyadmin , dan buat Database baru dengan nama tokobuah.
Kita akan membuat tabel baru dengan nama products dengan 5 kolom, berikut 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;

Setelah mengeksekusi kode diatas, maka tabel products akan terbentuk seperti gambar di bawah ini :




2. Mengatur Konfigurasi Database pada CodeIgniter
Buka ~/config/database.php dan tambahkan kode di bawah 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
);

Kemudian, buka ~/config/autoload.php , dan tambahkan database dan session pada kode $autoload['libraries'] sehingga menjadi

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

Library database akan menyediakan fungsi-fungsi untuk operasi database.
Library session akan menyediakan fungsi-fungsi untuk mengakses variable $_SESSION, ini dibutuhkan saat menampilkan flash message dan membuat login.

3. Membuat Model untuk Tabel Products
Buat file Product_model.php pada direktori ~/application/models/
Isi file dengan kode berikut ini

<?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));
    }
}

Pada method rules(), berisikan array yang berisi rules yang akan digunakan untuk validasi input.
Misalnya untuk field name dan description diberikan rules required yang artinya field tersebut wajib untuk diisi.

Method get() dan getAll() digunakan untuk mengambil data dari database. get() digunakan untuk mengambil data dengan spesifikasi tertentu, sedangkan getAll() digunakan untuk mengambil semua data hasil query.

Method save() digunakan untuk menyimpan data ke tabel products pada database

return $this->db->insert($this->_table, $this);
$this adalah properti yang berisikan data yang akan disimpan.
Pada method ini, product_id diisikan dengan fungsi uniqid() karena kita akan membuat data baru.
Fungsi uniqid() ini akan menghasilkan id yang terdiri dari karakter unik

Method update() digunakan untuk mengupdate/memperbarui data.
Method delete() digunakan untuk menghapus data.

4. Membuat Controller untuk mengakses data pada Database
Buat file Products.php pada direktori ~/application/controllers/admin/ , isikan kode berikut

<?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'));
        }
    }
}

Pada method _construct() , kita meload model product_model dan library form_validation yang digunakan untuk memvalidasi input pada method add() dan edit().

 Method index() digunakan untuk mengambil data dari model dan menampilkannya pada halaman List Product.

 Method add() digunakan untuk menampilkan form add untuk menambahkan data pada database dan memanggil method save() pada model untuk menyimpan data tersebut.

Method edit() digunakan untuk menampilkan form dan mengedit data kemudian memanggil method save() untuk menyimpan data kembali.

Method delete() digunakan untuk menghapus data.

5. Membuat View New Product dan List Product
Buat folder product pada direktori ~/views/admin/ , kemudian buat file-file di bawah ini dalam folder product tersebut
  • Buat file list.php , dan isikan kode dibawah 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") ?>

</body>

</html>
View ini bertugas untuk menampilkan data pada halaman List Product
  • Buat file new_form.php, dan isikan kode di bawah 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>

    View ini bertugas untuk menampilkan form input untuk menambahkan data produk baru.

  • Buat file edit_form.php , dan isikan kode di bawah 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>

    View ini digunakan untuk menampilkan form pengeditan data yang sudah ada.

  • Menambahkan fitur Hapus Data
    • Buka ~/views/admin/products/list.php, dan tambahkan kode berikut di bagian bawah sebelum tag </body>

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

    Setelah itu, buka ~/views/admin/_partial/modal.php dan tambahkan kode berikut di paling bawah

    <!-- 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>

Setelah melakukan seluruh langkah-langkah di atas, kita akan melakukan uji coba.
Project dapat dibuka dengan alamat http://localhost/TugasCRUD_PBKK/index.php/admin

Membuka halaman New Product dan menambahkan produk baru




Membuka halaman List Product



Melakukan edit data 




Melakukan hapus data




Pembuatan CRUD selesai.

Source Code : klik disini
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)