Laundry Management Website (Part 14-CRUD Transaksi Admin)

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

Konsep MVC pada Menu Transaksi 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 Transaksi dalam Aplikasi pengelolaan laundry berbasis website ini memiliki 16 data yang akan dikelola dengan Database MySQL (Create, Read, Update, Delete), yaitu;

1. Id Transaksi
2. Id Outlet
3. Kode Invoice
4. Id Member
5. Tanggal Transaksi
6. Batas Waktu
7. Tanggal Bayar
8. Biaya Tambahan
9. Diskon
10. Pajak
11. Status Transaksi
12. Status Bayar
13. Id User
14. Id Paket
15. Quantity
16. Keterangan

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

• Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya

B. Langkah-langkah Aktifasi CRUD Transaksi

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

Model

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

Controller

• Pada VSCode bukalah folder app/Controllers/Admin
• Ubah file Transaksi.php dengan mengimpor class PenggunaModel, class OutletModel, class PelangganModel, class PaketModel, dan class TransaksiModel di bagian atas sebelum class Transaksi

• Kemudian tambahkan 3 function baru di dalam class Transaksi

• Selanjutnya tambahkan 4 variable baru di dalam function index pada class Transaksi

View

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

• Kemudian tambahkan 2 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/transaksi
• Pada halaman Data Transaksi klik tombol +Create New One

• Isi data (Opsional) pada kolom Tanggal Transaksi, Batas Waktu, Nama Pelanggan, Nama Paket, Keterangan, Quantity, Biaya Tambahan, Diskon, Pajak kemudian klik Save

• 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_transaksi

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

Model

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

Controller

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

View

• Pada VSCode bukalah folder app/Views/Admin
• Ubah file v_transaksi.php dengan menambahkan 3 function baru pada kelompok tag <table> untuk Tabel Transaksi, yaitu tag <tbody> dan tag <td>

• Kemudian tambahkan function pada tag <div>

• Kemudian masih di dalam file v_transaksi.php, tambahkan 3 function baru pada kelompok tag <table> untuk Tabel Status Transaksi, yaitu tag <tbody> dan tag <td>

• Kemudian tambahkan function pada tag <div>

• Selanjutnya pada Web Browser buka url berikut: localhost/ci4_nama_kelas/public/admin/transaksi, dan data dari Database akan muncul di Tabel Transaksi dan Tabel Status Transaksi

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

Model

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

Controller

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

View

• Pada VSCode bukalah folder app/Views/Admin
• Ubah file v_transaksi.php dengan menambahkan function pada kelompok tag <table> untuk Tabel Transaksi, 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/transaksi
• Pada halaman Data Transaksi klik tombol icon pencil di dalam Tabel Transaksi

• Ubah data (Opsional) pada kolom Tanggal Bayar, Status Transaksi, Status Bayar kemudian klik Update

• Jika di sebelah kanan atas muncul notifikasi Check-list Great!, dan data di dalam Tabel Status Transaksi sudah terganti, artinya data yang diubah berhasil tersimpan ke dalam Database

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

Model

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

Controller

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

View

• Pada VSCode bukalah folder app/Views/Admin
• Ubah file v_transaksi.php dengan menambahkan function pada kelompok tag <table> untuk Tabel Transaksi, 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/transaksi
• Pada halaman Data Transaksi klik tombol icon trash bin di dalam Tabel Transaksi

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

• Jika di sebelah kanan atas muncul notifikasi Check-list Great!, kemudian data di dalam Tabel Transaksi dan Tabel Status Transaksi sudah tidak ada, artinya data yang dihapus berhasil dihilangkan dalam Database