Laundry Management Website (Part 8-MVC Transaksi Admin)
Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!
Setelah mengikuti langkah-langkah penerapan konsep MVC pada Menu Member, di artikel ini akan melanjutkan menjelaskan tahap-tahap dalam mengimplementasikan penerapan konsep MVC pada Menu Transaksi dengan pengguna/user yang berperan sebagai Admin.
Di mana Menu Transaksi ini memiliki fitur yang dapat menambahkan data baru, mengedit data, dan menghapus data yang sudah tersimpan di Database.
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
localhost/ci4_anisa_xiirpl3/public
- Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya
ci4_anisa_xiirpl3
B. Langkah-langkah Pembuatan MVC Transaksi
1. View
- Pada VSCode buatlah file baru bernama v_transaksi.php di dalam folder app/Views/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file v_transaksi.php
<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><?= $header; ?></h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="<?= base_url('admin/dashboard') ?>">Homepage</a></li>
<li class="breadcrumb-item active"><?= $header; ?></li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<!-- Default box -->
<div class="card">
<div class="card-header">
<h3 class="card-title"><?= $cardtitle; ?></h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<div class="mt-4">
<button type="button" class="btn-info btn-sm" data-toggle="modal" data-target="#inputData">
<i class="fa fa-plus" aria-hidden="true"></i> Create New One
</button>
</div>
</div>
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-bordered table-head-fixed text-nowrap">
<thead class="text-center">
<tr>
<th class="bg-secondary">Option</th>
<th>Kode Invoice</th>
<th>Tanggal Transaksi</th>
<th>Batas Waktu</th>
<th>Nama Pelanggan</th>
<th>Nama Paket</th>
<th>Keterangan</th>
<th>Quantity</th>
<th>Biaya Tambahan</th>
<th>Diskon</th>
<th>Pajak</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<button class="btn-warning btn-update-transaksi" data-id="" data-inv="" data-id_member="" data-tglbayar="" data-stattransaksi="" data-statbayar="">
<i class="nav-icon fas fa-pen" aria-hidden="true"></i>
</button>
<button class="btn-danger btn-delete-transaksi" data-id="">
<i class="nav-icon fas fa-trash" aria-hidden="true"></i>
</button>
</td>
<td>INV1408230001</td>
<td>2023-08-14 21:52:00</td>
<td>2023-08-15 21:52:00</td>
<td>Hyunjin</td>
<td>Kiloan</td>
<td>Kaos</td>
<td>3</td>
<td>1000</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
<div class="card-footer">
Total Data
</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
<!-- Default box Update -->
<div class="card">
<div class="card-header">
<h3 class="card-title"><?= $cardtitlestat; ?></h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-bordered table-head-fixed text-nowrap">
<thead class="text-center">
<tr>
<th>No</th>
<th>Kode Invoice</th>
<th>Nama Pelanggan</th>
<th>Tanggal Bayar</th>
<th>Status Transaksi</th>
<th>Status Bayar</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>INV1408230001</td>
<td>Hyunjin</td>
<td>2023-08-15 07:52:00</td>
<td>Selesai</td>
<td>Dibayar</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
<div class="card-footer">
Total Data
</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
<!-- Modal Create Data -->
<form class="form-horizontal" action="" method="post">
<div class="modal fade" id="inputData" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><?= $inputtitle; ?></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Card Body Input -->
<div class="card-body">
<div class="form-group row">
<label for="namaPengguna" class="col-sm-4 col-form-label">Nama Pengguna</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="namaPengguna" name="id_pengguna" value="<?= session()->get('nama_pengguna'); ?>" readonly="readonly">
</div>
</div>
<div class="form-group row">
<label for="namaOutlet" class="col-sm-4 col-form-label">Id Outlet</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="namaOutlet" name="id_outlet" value="<?= session()->get('id_outlet'); ?>" readonly="readonly">
</div>
</div>
<div class="form-group row">
<label for="kdInvoice" class="col-sm-4 col-form-label">Kode Invoice</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="kdInvoice" name="kode_invoice" readonly="readonly">
</div>
</div>
<div class="form-group row">
<label for="tglTransaksi" class="col-sm-4 col-form-label">Tanggal Transaksi</label>
<div class="col-sm-8">
<input type="datetime-local" class="form-control" id="tglTransaksi" placeholder="Tanggal Transaksi" name="tgl_transaksi" required>
</div>
</div>
<div class="form-group row">
<label for="batasWaktu" class="col-sm-4 col-form-label">Batas Waktu</label>
<div class="col-sm-8">
<input type="datetime-local" class="form-control" id="batasWaktu" placeholder="Batas Waktu" name="batas_waktu" required>
</div>
</div>
<div class="form-group row">
<label for="namaPelanggan" class="col-sm-4 col-form-label">Nama Pelanggan</label>
<div class="col-sm-8">
<select class="form-control" id="namaPelanggan" name="id_member" required>
<option value="">- Pilih Nama Pelanggan -</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="namaPaket" class="col-sm-4 col-form-label">Nama Paket</label>
<div class="col-sm-8">
<select class="form-control" id="namaPaket" name="id_paket" required>
<option value="">- Pilih Nama Paket -</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="ketTrans" class="col-sm-4 col-form-label">Keterangan</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ketTrans" placeholder="Keterangan" name="keterangan" required>
</div>
</div>
<div class="form-group row">
<label for="quantityTrans" class="col-sm-4 col-form-label">Quantity</label>
<div class="col-sm-8">
<input type="number" class="form-control" id="quantityTrans" placeholder="Quantity" name="qty" required>
</div>
</div>
<div class="form-group row">
<label for="biayaTambahan" class="col-sm-4 col-form-label">Biaya Tambahan</label>
<div class="col-sm-8 input-group">
<div class="input-group-prepend">
<span class="input-group-text">Rp.</span>
</div>
<input type="number" class="form-control" id="biayaTambahan" placeholder="Biaya Tambahan" name="biaya_tambahan" />
</div>
</div>
<div class="form-group row">
<label for="diskonTransaksi" class="col-sm-4 col-form-label">Diskon</label>
<div class="col-sm-8 input-group">
<input type="number" class="form-control" id="diskonTransaksi" placeholder="Diskon" name="diskon" />
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
</div>
<div class="form-group row">
<label for="pajakTransaksi" class="col-sm-4 col-form-label">Pajak</label>
<div class="col-sm-8 input-group">
<input type="number" class="form-control" id="pajakTransaksi" placeholder="Pajak" name="pajak" />
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</form>
<!-- /.modal -->
<!-- Modal Update Data -->
<form class="form-horizontal" action="" method="post">
<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><?= $updatetitle; ?></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Card Body Input -->
<div class="card-body">
<div class="form-group row">
<label for="kdInvoiceUp" class="col-sm-4 col-form-label">Kode Invoice</label>
<div class="col-sm-8">
<input type="text" class="form-control kode_invoice" id="kdInvoiceUp" name="kode_invoice" readonly="readonly">
</div>
</div>
<div class="form-group row">
<label for="namaPelanggan" class="col-sm-4 col-form-label">Id Pelanggan</label>
<div class="col-sm-8">
<input type="text" class="form-control id_member" id="namaPelanggan" name="id_member" readonly="readonly">
</div>
</div>
<div class="form-group row">
<label for="tglBayar" class="col-sm-4 col-form-label">Tanggal Bayar</label>
<div class="col-sm-8">
<input type="datetime-local" class="form-control tgl_bayar" id="tglBayar" placeholder="Tanggal Bayar" name="tgl_bayar" required>
</div>
</div>
<div class="form-group row">
<label for="statusTransaksi" class="col-sm-4 col-form-label">Status Transaksi</label>
<div class="col-sm-8">
<select class="form-control status_transaksi" id="statusTransaksi" name="status_transaksi" required>
<option value="">- Pilih Status Transaksi -</option>
<option value="Baru">Baru</option>
<option value="Proses">Proses</option>
<option value="Selesai">Selesai</option>
<option value="Diambil">Diambil</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="statusBayar" class="col-sm-4 col-form-label">Status Bayar</label>
<div class="col-sm-8">
<select class="form-control status_bayar" id="statusBayar" name="status_bayar" required>
<option value="">- Pilih Status Bayar -</option>
<option value="Dibayar">Dibayar</option>
<option value="Belum Dibayar">Belum Dibayar</option>
</select>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<div class="modal-footer justify-content-between">
<input type="hidden" name="id_transaksi" class="id_transaksi">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</form>
<!-- /.modal -->
<!-- Modal Delete Data -->
<form class="form-horizontal" action="" method="post">
<div class="modal fade" id="deleteData">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><?= $deletetitle; ?></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Card Body Verification -->
<div class="card-body">
<h6>Are you sure want to delete this data?</h6>
</div>
<!-- /.card-body -->
</div>
<div class="modal-footer justify-content-between">
<input type="hidden" name="id_transaksi" class="id_transaksi">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</form>
<!-- /.modal -->
</section>
<!-- /.content -->
</div>2. Controller
- Pada VSCode buatlah file baru bernama Transaksi.php di dalam folder app/Controllers/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file Transaksi.php
<?php
namespace App\Controllers\Admin;
use App\Controllers\BaseController;
class Transaksi extends BaseController
{
public function index()
{
$data = [
'title' => "Admin Transaksi | My Laundry",
'header' => "Data Transaksi",
'cardtitle' => "Tabel Transaksi",
'cardtitlestat' => "Tabel Status Transaksi",
'inputtitle' => "Form Input Data Transaksi",
'updatetitle' => "Form Update Data Transaksi",
'deletetitle' => "Delete Data Transaksi",
];
$data['page'] = view('admin/v_transaksi', $data);
echo view("admin/v_homepage", $data);
}
}- Selajutnya pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge buka url berikut: localhost/ci4_nama_kelas/public/admin/transaksi
localhost/ci4_anisa_xiirpl3/public/admin/transaksi
3. Model
- Pada VSCode buatlah file baru bernama TransaksiModel.php di dalam folder app/Models
- Copy seluruh paragraf script berikut dan Paste ke dalam file TransaksiModel.php
<?php
namespace App\Models;
use CodeIgniter\Model;
class TransaksiModel extends Model
{
protected $table = 'tb_transaksi';
protected $primaryKey = 'id_transaksi';
protected $allowedFields = [
"id_outlet",
"kode_invoice",
"id_member",
"tgl_transaksi",
"batas_waktu",
"tgl_bayar",
"biaya_tambahan",
"diskon",
"pajak",
"status_transaksi",
"status_bayar",
"id_user",
"id_paket",
"qty",
"keterangan ",
];
}Setelah mengikuti langkah-langkah penerapan konsep MVC pada Menu Transaksi di atas, fitur CRUD belum bisa digunakan karena masih ada tahapan lainnya yang harus dilakukan dalam mengaktifkan fitur CRUD tersebut, dan akan dibahas pada artikel selanjutnya.
Anisa Damayanti
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!
You May Also Like
Laundry Management Website (Part 3-Static and Dynamic Homepage Admin)
Laundry Management Website (Part 7-MVC Member Admin)
