Laundry Management Website (Part 4-MVC Outlet Admin)
Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!
Setelah memahami pembahasan mengenai Model View Controller (MVC), di artikel ini akan menjelaskan tahap-tahap dalam mengimplementasikan penerapan konsep MVC pada Menu Outlet dengan pengguna/user yang berperan sebagai Admin.
Di mana Menu Outlet 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 Outlet
1. View
- Pada VSCode buatlah file baru bernama v_outlet.php di dalam folder app/Views/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file v_outlet.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>No</th>
<th>Nama Outlet</th>
<th>Alamat Outlet</th>
<th>No Telepon</th>
<th class="bg-secondary">Option</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>My Laundry 1</td>
<td>Karawang</td>
<td>081311107132</td>
<td class="text-center">
<button class="btn-warning btn-edit-outlet" data-id="" data-nama="" data-alamat="" data-tlp="">
<i class="nav-icon fas fa-pen" aria-hidden="true"></i>
</button>
<button class="btn-danger btn-delete-outlet" data-id="">
<i class="nav-icon fas fa-trash" aria-hidden="true"></i>
</button>
</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">
<div class="modal-dialog">
<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="namaOutlet" class="col-sm-4 col-form-label">Nama Outlet</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="namaOutlet" placeholder="Nama Outlet" name="nama_outlet" required>
</div>
</div>
<div class="form-group row">
<label for="alamatOutlet" class="col-sm-4 col-form-label">Alamat Outlet</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="alamatOutlet" placeholder="Alamat Outlet" name="alamat_outlet" required>
</div>
</div>
<div class="form-group row">
<label for="noTlp" class="col-sm-4 col-form-label">No Telepon</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="noTlp" placeholder="No Telepon" name="no_tlp" required>
</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">
<div class="modal-dialog">
<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="namaOutlet" class="col-sm-4 col-form-label">Nama Outlet</label>
<div class="col-sm-8">
<input type="text" class="form-control nama_outlet" id="namaOutlet" placeholder="Nama Outlet" name="nama_outlet" required>
</div>
</div>
<div class="form-group row">
<label for="alamatOutlet" class="col-sm-4 col-form-label">Alamat Outlet</label>
<div class="col-sm-8">
<input type="text" class="form-control alamat_outlet" id="alamatOutlet" placeholder="Alamat Outlet" name="alamat_outlet" required>
</div>
</div>
<div class="form-group row">
<label for="noTlp" class="col-sm-4 col-form-label">No Telepon</label>
<div class="col-sm-8">
<input type="text" class="form-control no_tlp" id="noTlp" placeholder="No Telepon" name="no_tlp" required>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<div class="modal-footer justify-content-between">
<input type="hidden" name="id_outlet" class="id_outlet">
<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_outlet" class="id_outlet">
<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 Outlet.php di dalam folder app/Controllers/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file Outlet.php
<?php
namespace App\Controllers\Admin;
use App\Controllers\BaseController;
class Outlet extends BaseController
{
public function index()
{
$data = [
'title' => "Admin Outlet | My Laundry",
'header' => "Data Outlet",
'cardtitle' => "Tabel Outlet",
'inputtitle' => "Form Input Data Outlet",
'updatetitle' => "Form Update Data Outlet",
'deletetitle' => "Delete Data Outlet",
];
$data['page'] = view('admin/v_outlet', $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/outlet
localhost/ci4_anisa_xiirpl3/public/admin/outlet
3. Model
- Pada VSCode buatlah file baru bernama OutletModel.php di dalam folder app/Models
- Copy seluruh paragraf script berikut dan Paste ke dalam file OutletModel.php
<?php
namespace App\Models;
use CodeIgniter\Model;
class OutletModel extends Model
{
protected $table = 'tb_outlet';
protected $primaryKey = 'id_outlet ';
protected $allowedFields = [
"nama_outlet",
"alamat_outlet",
"no_tlp",
];
}Setelah mengikuti langkah-langkah penerapan konsep MVC pada Menu Outlet 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 5-MVC User Admin)
