Keranjang Coding : product


?>

Tutorial Crud Codeigniter4 Single Page Dengan Modal Bootstrap





Tutorial Crud Codeigniter4 Dengan Modal Bootstrap

Pada tutorial kali ini saya ingin membahas tentang bagaimana cara crud menggunakan Codeigniter4 dengan modal bootstrap, jika teman teman belum menginstal codeigniter4.

Pada materi kali ini melanjutkan dari materi sebelumnya yakni,

setiap materi akan kita bahas sampai menjadi satu tujuan utama membuat aplikasi inventory barang, kali ini kita akan membuat CRUD Kategori Barang yang dimana tahap awal untuk membuat apklikasi inventory, 

Jika teman teman sudah faham dengan codeignter sebelumnya, yakni codeigniter3 maupun codeigniter4 maka teman teman makin mudah untuk memahami nya.

Pada materi kali ini, teman teman akan belajar bagaimana menggunakan query builder Codeigniter 4, untuk penggunakan query builder crud kita akan mengcustom agak bisa memanggil di fungsi yang lain agar lebih meudah emmbangun suatu sistem aplikasi. saya akan menjelaskan diama perbedaan di codeignter4 pada materi ini.

Step by step mari kita mulai pembahasan nya.

Langkah #1.Persiapan Awal

Untuk penambahan library dari aplikasi sebelumnya yakni ada 

1. JQuery

2. Datatables

Disini saya menggunakan Jquery v3.4.1 dan bootstrap bawaan library dari Admin LTE3.

Langkah #2. Membuat Table Master Kategori Barang

Dari lanjutan pembelajaran Codeigniter4, kita sudah membuat database bernama belajar_ci4, disini kita tinggal menambahkan tabel master kategori, saya namakan tbl_mst_kategori, untuk membuat table kategori barang pada MYSQl dapat dilakukan dengan mengeksekusi query berikut ini:

DROP TABLE IF EXISTS `tbl_mst_kategori`;
CREATE TABLE `tbl_mst_kategori`  (
  `idkategori` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `nama_kategori` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `keterangan` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL,
  `created_at` datetime(0) NULL DEFAULT NULL,
  `updated_at` datetime(0) NULL DEFAULT NULL,
  PRIMARY KEY (`idkategori`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;

Langkah #3. Membuat Controller Master Kategori

Selanjutnya kita buat sebuat controller dengan nama Master_kategori, yang kita buat pada folder api->controller, kemudian new file, kemudian simpan dengan nama Master_kategori.php, untuk detail file seperti gambar dibawah ini

 

Untuk source code nya tema-teman bisa ikuti script dibawah ini :

<?php 
namespace App\Controllers;

use App\Models\M_master;
class Master_kategori extends BaseController {

  function __construct(){
    $this->M_master = new M_master();
        if(!session()->get('username')) {
           session()->setFlashdata('message','Anda Harus Login terkebih Dahulu');
           return redirect()->to(base_url('Login'));
        }

  }

  public function index()
  {
    $data['kategori'] = $this->M_master->getkategori();
    return view('master/kategori/data',$data);
    // return view('master/kategori/data');
  }

  public function create_data(){
    $nama       = $this->request->getPost('nama');
    $keterangan = $this->request->getPost('keterangan');
    $kirimdb = [
        'nama_kategori' => $nama,
        'keterangan'    => $keterangan,
        'created_at'    => date('Y-m-d H:i:s'),
        'updated_at'    => date('Y-m-d H:i:s')
    ];
    $aksi    = $this->M_master->create_data('tbl_mst_kategori',$kirimdb);
     return redirect()->to(base_url('Master_kategori'));
    // echo var_dump($kirimdb);
  }

  public function show_data(){
     $id   = $_POST['id'];
     $data = $this->M_master->show_data($id);
     echo json_encode($data);
  }

  public function update_data(){
    $id         = $this->request->getPost('id');
    $nama       = $this->request->getPost('nama');
    $keterangan = $this->request->getPost('keterangan');
    $kirimdb = [
        'nama_kategori' => $nama,
        'keterangan'    => $keterangan,
        'updated_at'    => date('Y-m-d H:i:s')
    ];
    $aksi    = $this->M_master->update_data('tbl_mst_kategori',['idkategori' => $id],$kirimdb);
    return redirect()->to(base_url('Master_kategori'));
    // echo var_dump($kirimdb);
  }

  public function delete_data(){
    $id = $_GET['id'];
    $data = $this->M_master->delete_data('tbl_mst_kategori',['idkategori' => $id]);
    return redirect()->to(base_url('Master_kategori'));
  }
}

Saya akan jelaskan sedikit untuk fungsi fungsi yang ada di controller Master_kategori, pada function index itu kita mengarahkan ke view dengan membawa master data kategori, selanjutnya untuk function create_data  itu kita melalukan insert data yang dikirm ke model dengan menjalankan eksekusi query builder, disini kita sudah menggunakan transac SQL dimana untuk mengatasi apabila ada data yang tertinggal saat penginputan , kita tidak langsung mengimpan datanya ke database, tetapi merollback data yang sudah dikirim ke database apabila ada terjadi error saat pengiriman data ke database, kemudian ada function update_data dimana sebagai fungsi untuk mengudate data berdasarkan data yang kita pilih dengan menjalan kan query yang ditujukan ke model, dan ada juga function delete_data berguna untuk menghapus data yang mengarah ke model dan model mengeksekusi query hapus data.

Langkah #3. Membuat Model Master

Disini kita masuk ke tahap membuat model Master, dimana beguna menjalankan query yang dikirim dari controller sebelumnya. mari kita buat dengan nama M_master.php yang terletak pada app->Model, untuk detail file seperti gambar dibawah ini.

Untuk script pada file M_master, teman teman bisa copy kan source code dibawah ini :

<?php 
namespace App\Models;

use CodeIgniter\Model;

class M_master extends Model {

    public function getkategori(){
        $query = $this->db->table('tbl_mst_kategori')->get();
        return $query->getResult();
        
    }

    public function show_data($id){
        $query = $this->db->query("SELECT * from tbl_mst_kategori where idkategori='$id'");
        return $query->getRow();        
    }

    public function create_data($table, $data)
    {
        $this->db->transBegin();
        $this->db->table($table)->insert($data);

        if ($this->db->transStatus() === FALSE)
        {
                $this->db->transRollback();
                return false;
        }
        else
        {
                $this->db->transCommit();
                return true;
        }
    }

    public function update_data($table,$id,$data)
    {
        $this->db->transBegin();
        $builder = $this->db->table($table);
        $builder->where($id)->update($data);

        if ($this->db->transStatus() === FALSE)
        {
                $this->db->transRollback();
                return false;
        }
        else
        {
                $this->db->transCommit();
                return true;
        }
    }

    public function delete_data($table,$pk)
    {
        $builder = $this->db->table($table);
        return $builder->where($pk)->delete();
    } 
}

Untuk penjelasan script pada file M_master,  pada function create_data ini sebagai query yang berguna menginsert data ke database, ini kita custom untuk kebutuhan global , jadi kita tinggal gunakan model ini untuk controller insert data lainnya. begitu juga pada function update_data sudah kita custom dan function delete_data juga.

Perhatikan script ini :

$this->db->transBegin();
$this->db->table($table)->insert($data);
if ($this->db->transStatus() === FALSE)
{
   $this->db->transRollback();
   return false;
}
    else
{
    $this->db->transCommit();
    return true
}

Pada bagian ini digunakan untuk melakukan insert data dari controller, untuk penamaan tabel kita sudah namakan pada file controller, jadi di dalam model ini kita hanya mendeklarasikan nya secara ulang agar data yang dikirim dari controller bisa dibaca oleh model.

Kemudia untuk update data teman-teman perhatikan script dibawah ini :

$this->db->transBegin();
$builder = $this->db->table($table);
$builder->where($id)->update($data);

 if ($this->db->transStatus() === FALSE)
 {
     $this->db->transRollback();
     return false;
 }
else
{
      $this->db->transCommit();
      return true;
}

Pada bagian ini, digunakan sebagai untuk mengupdate data, kita gunakan transac SQL untuk menganggulangi kesalahan saat pengiriman data ke database.

Selanjutnya untuk delete data, teman teman perhatikan potongan script dibawah ini :

$builder = $this->db->table($table);
 return $builder->where($pk)->delete();

Disini untuk proses Create,update,dan juga delete kita sudah menggunakan proses buildernya Codeigniter4, jadi lebih dipermudah, kita tinggal mendeklarasikan nya saja di controller.

Langkah #4 Membuat View Data Kategori

Selanjutnya kita buat file view pada folder app->views->master->kategori , buatlah file baru dengan nama data.php, untuk tampilan file pada folder view seperti gambar dibawah ini :

Untuk script pada view, teman - teman bisa copykan script dibawah ini :

<?= $this->extend('template/default') ?>
<?= $this->section('content') ?>
 <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Master Kategori Barang</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Master Kategori</li>
            </ol>
          </div>
        </div>
      </div>
    </section>
    <div class="card">
          <div class="card-header">
            <h3 class="card-title">Management Kategori</h3>
          </div>
          <div class="col-md-2">
             <button type="button" class="btn btn-block bg-gradient-info btn-sm" data-toggle="modal" data-target="#modal-kategori">Tambah Kategori</button>
          </div>           
            <!-- /.card-header -->
            <div class="card-body">
              
              <table id="tabelkategori" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                <thead>
                 <tr role="row">
                    <th>No</th> 
                    <th>Nama</th> 
                    <th>Keterangan</th> 
                    <th>Create</th> 
                    <th>Update</th> 
                    <th>Aksi</th> 
                 </tr>
                </thead>
              <tbody>
                   <?php 
                   $no = 1;
                   foreach ($kategori as $list){ ?>
                   <tr>
                      <td><?php echo $no++;?></td>
                      <td><?php echo $list->nama_kategori;?></td>
                      <td><?php echo $list->keterangan;?></td>
                      <td><?php echo date('d-m-Y H:i:s',strtotime($list->created_at));?></td>
                      <td><?php echo date('d-m-Y H:i:s',strtotime($list->updated_at));?></td>
                      <td>
                         <button type="button" data-toggle="modal" value="<?php echo $list->idkategori;?>"  class="find_id_kategori" data-target="#modal-kategori"><i class="fas fa-edit"></i>Edit</button>
                         <a href="<?php echo base_url('Master_kategori/delete_data?id='.$list->idkategori);?>"><i class="fa fa-trash-alt"></i>Delete</a>
                      </td>
                   </tr>
                 <?php } ?>
              </tbody>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
      </div>

      <script type="text/javascript">
         
      $(document).ready(function() {
        var table = $('#tabelkategori').DataTable( {  
          "paging": true,
      } );
      });
      </script>

      <div class="modal fade" id="modal-kategori">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="header">Form Kategori</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div id="isi_edit_kategori">
              <form role="form" action="Master_kategori/create_data" method="POST" id="form_kategori">
                <div class="card-body">
                  <div class="form-group">
                    <label for="nama">Nama Kategori</label>
                    <input type="text" name="nama" class="form-control" id="nama" placeholder="Nama Kategori">
                    <input type="hidden" name="idkategori" value="" class="form-control" id="idkategori">
                    <small class="help-block"></small>
                  </div>
                  <div class="form-group">
                    <label for="keterangan">Keterangan</label>
                    <input type="text" name="keterangan" class="form-control" id="keterangan" placeholder="Keterangan">
                    <small class="help-block"></small>
                  </div>
                <!-- /.card-body -->
               </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" id="submit" name="create" class="btn btn-primary">Save</button>
            </div>
          </form>
          </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

  <script type="text/javascript">
      $('.find_id_kategori').click(function(event){
         event.preventDefault();
        var id = $(this).val();
        var header = $('#header').text('Edit Kategori');
        // console.log(id);
        $.ajax({
        type: "POST",
        url : "Master_kategori/show_data",
        data: {id:id},
        dataType : "json",
        success: function (data){
          console.log(data);
           var result = '<form role="form" action="Master_kategori/update_data" method="POST" id="form_kategori">\n\
           <div class="card-body">\n\
                  <div class="form-group">\n\
                    <label for="nama">Nama Kategori</label>\n\
                    <input type="text" name="nama" class="form-control" value="'+data.nama_kategori+'" id="nama" placeholder="Nama Kategori">\n\
                    <input type="hidden" name="id" class="form-control" value="'+data.idkategori+'" id="id" placeholder="Nama Kategori">\n\
                    <small class="help-block"></small>\n\
                  </div>\n\
                  <div class="form-group">\n\
                    <label for="keterangan">Keterangan</label>\n\
                    <input type="text" name="keterangan" class="form-control" value="'+data.keterangan+'" id="keterangan" placeholder="Keterangan">\n\
                    <small class="help-block"></small>\n\
                  </div>\n\
                <!-- /.card-body -->\n\
               </div>\n\
            <div class="modal-footer justify-content-between">\n\
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\n\
              <button type="submit" id="submit" class="btn btn-primary">Save</button>\n\
            </div>\n\
            </form>';
          $("#isi_edit_kategori").html(result);            
        }
     });
    });

  </script>
<?= $this->endsection() ?> 

Untuk view nya kita sudah menggunakan datatables, untuk mempermudahkan dalam hal mencari data, teman teman bisa cek pada file di tag javascript :

$(document).ready(function() {
var table = $('#tabelkategori').DataTable( {
"paging": true, } );
});

Pada script ini mengambil id pada table kategori, berguna untuk menampilkan datables di halaman aplikasi web kita , untuk tampilan nya seperti gambar dibawah ini :

 

 

Langkah #5 Testing

Selanjutnya kita akan mencoba melakukan testing aplikasi yang kita buat, Kemudian masuk pada form create data , disini kita menggunakan modal bootstrap untuk menyimpan data kategori, untuk tampilan detail gambar seperti dibawa ini :

kemudian masuk ke tampilan edit kategori, edit kategori ini kita mengambil id tiap masing masing kategori yang akan dikirim ke modal bootstrap agar bisa di edit nantinya, untuk gambar deskripsi dibawah ini :

Saya rasa untuk penjelasan kali ini sudah cukup, untuk penulisan scriptnya sudah saya buat begitu mudah untuk dipahami untuk para pemula , kalau ada yang perlu ditanyakan silahkan comment ataupun bisa contact saya buat belajar lebih lanjut,

Untuk source code lengkap teman-teman bisa unduh di sini

Mungkin itu saja pembahasan materi kita kali ini, kita akan lanjutkan di materi selanjutnya untuk menciptakan 1 product aplikasi secara bertahap, mungkin itu saja semoga bermanfaat dan bisa dipelajari lebih lanjut mengenai materi kali ini, terima kasih ...

Tags : codeigniter php

Sekilas Tentang Penulis


Kharisma Maulana Pasaribu,ST
Software Engineer | Fullstack Developer | Founder of Matadeveloper.com



Prev Post
Membuat Sistem Login Menggunakan Codeign
Next Post
Tutorial Crud Codeigniter4 Single Page D