CRUD Paket
AdminLTE,  CodeIgniter4,  MYSQL

Laundry Management Website (Part 11-CRUD Paket Admin)

Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!

Konsep MVC pada Menu Paket sudah dibuat pada pertemuan sebelumnya, maka selanjutnya dalam artikel ini akan membahas bagaimana cara mengaktifkan fitur CRUD agar menu tersebut dapat mengelola data dengan Database.

Pada fitur Menu Paket dalam Aplikasi pengelolaan laundry berbasis website ini memiliki 5 data yang akan dikelola dengan Database MySQL (Create, Read, Update, Delete), yaitu;

  1. Id Paket
  2. Id Outlet
  3. Jenis Paket
  4. Nama Paket
  5. Harga

A. Persiapan Tools

  • Pada aplikasi XAMPP pastikan mengaktifkan Module Apache dan MySQL dengan mengklik tombol Start

  • Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge pastikan sudah membuka url berikut: localhost/ci4_nama_kelas/public untuk website
contoh memanggil url
localhost/ci4_anisa_xiirpl3/public
  • Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya
contoh membuka folder project
ci4_anisa_xiirpl3

B. Langkah-langkah Aktifasi CRUD Paket

1. Fitur Create / Simpan Data (Membuat data baru)

Model
  • Pada VSCode bukalah folder app/Models
  • Ubah file PaketModel.php dengan menambahkan function baru di dalam class PaketModel

Controller
  • Pada VSCode bukalah folder app/Controllers/Admin
  • Ubah file Paket.php dengan mengimpor class OutletModel dan class PaketModel di bagian atas sebelum class Paket

  • Kemudian tambahkan 2 function baru di dalam class Paket

  • Selanjutnya tambahkan 1 variable baru di dalam function index pada class Paket

View
  • Pada VSCode bukalah folder app/Views/Admin
  • Ubah file v_paket.php dengan menambahkan action pada tag <form>

  • Kemudian tambahkan function baru pada kelompok tag <form>, yaitu tag <option>

  • Selanjutnya pada Web Browser buka url berikut: localhost/ci4_nama_kelas/public/admin/paket
  • Pada halaman Data Paket klik tombol +Create New One

  • Isi data (Opsional) pada kolom Nama Outlet, Jenis Paket, Nama Paket, Harga, kemudian klik Save
contoh di atas memasukkan data My Laundry 1, Selimut, Selimut Renda, 25000
  • Jika di sebelah kanan atas muncul notifikasi Check-list Great! seperti di bawah ini, artinya data baru berhasil disimpan ke dalam Database

  • Untuk melihat data baru yang sudah disimpan, buka url berikut: localhost/phpmyadmin, kemudian masuk ke dalam db_laundry_nama_kelas dan pilih tb_paket
contoh di atas berhasil memasukkan data My Laundry 1 (dalam bentuk id dari primary key tb_outlet), Selimut, Selimut Renda, 25000

2. Fitur Read / Mengambil Data (Membaca data yang sudah tersimpan)

Model
  • Pada VSCode bukalah folder app/Models
  • Ubah file PaketModel.php dengan menambahkan 2 function baru di dalam class PaketModel

Controller
  • Pada VSCode bukalah folder app/Controllers/Admin
  • Ubah file Paket.php dengan menambahkan 2 variable baru di dalam function index pada class Paket

View
  • Pada VSCode bukalah folder app/Views/Admin
  • Ubah file v_paket.php dengan menambahkan 3 function baru pada kelompok tag <table>, yaitu tag <tbody> dan tag <td>
1. function awalan inisialisasi table
2. function inisialisasi atribut
3. function akhiran inisialisasi table
  • Kemudian tambahkan function pada tag <div>

  • Selanjutnya pada Web Browser buka url berikut: localhost/ci4_nama_kelas/public/admin/paket, dan data dari Database akan muncul di Tabel Paket
1. contoh di atas berhasil menampilkan data My Laundry 1, Selimut, Selimut Renda, 25000
2. contoh di atas berhasil menampilkan jumlah Total Data

3. Fitur Update / Mengubah Data (Memperbarui data yang sudah tersimpan)

Model
  • Pada VSCode bukalah folder app/Models
  • Ubah file PaketModel.php dengan menambahkan function baru di dalam class PaketModel

Controller
  • Pada VSCode bukalah folder app/Controllers/Admin
  • Ubah file Paket.php dengan menambahkan function baru di dalam class Paket

View
  • Pada VSCode bukalah folder app/Views/Admin
  • Ubah file v_paket.php dengan menambahkan function pada kelompok tag <table>, yaitu tag <button>

  • Ubah file v_homepage.php dengan menambahkan function baru di dalam tag <script> pada kelompok Modal Edit & Delete

  • Kemudian tambahkan function baru pada kelompok tag <form>, yaitu tag <option>

  • Ubah file v_homepage.php dengan menambahkan tag <script> baru

  • Selanjutnya pada Web Browser buka url berikut: localhost/ci4_nama_kelas/public/admin/paket
  • Pada halaman Data Paket klik tombol icon pencil

  • Ubah data (Opsional) pada kolom Nama Outlet, Jenis Paket, Nama Paket, Harga, kemudian klik Update
contoh di atas mengubah data menjadi
My Laundry 2, Kiloan, Baju 1kg, 15000
  • Jika di sebelah kanan atas muncul notifikasi Check-list Great!, dan data di dalam Tabel Paket sudah terganti, artinya data yang diubah berhasil tersimpan ke dalam Database
1. Notifikasi berhasil
2. Data berhasil diubah

4. Fitur Delete / Menghapus Data (Menghilangkan data yang sudah tersimpan)

Model
  • Pada VSCode bukalah folder app/Models
  • Ubah file PaketModel.php dengan menambahkan function baru di dalam class PaketModel

Controller
  • Pada VSCode bukalah folder app/Controllers/Admin
  • Ubah file Paket.php dengan menambahkan function baru di dalam class Paket

View
  • Pada VSCode bukalah folder app/Views/Admin
  • Ubah file v_paket.php dengan menambahkan function pada kelompok tag <table>, yaitu tag <button>

  • Kemudian tambahkan action pada tag <form>

  • Ubah file v_homepage.php dengan menambahkan function baru di dalam tag <script> pada kelompok Modal Edit & Delete

  • Selanjutnya pada Web Browser buka url berikut: localhost/ci4_nama_kelas/public/admin/paket
  • Pada halaman Data Paket klik tombol icon trash bin

  • Jika muncul konfirmasi pertanyaan seperti di bawah ini, klik Yes untuk setuju menghapus data

  • Jika di sebelah kanan atas muncul notifikasi Check-list Great!, dan data di dalam Tabel Paket sudah tidak ada, artinya data yang dihapus berhasil dihilangkan dalam Database
1. Notifikasi berhasil
2. Data terhapus (tidak ada)

a founder of december skies code, a software engineering teacher, and a lifelong learner who just tries her best at whatever she does. let's work together!

Leave a Reply

Your email address will not be published. Required fields are marked *