Laundry Management Website (Part 7-MVC Member Admin)
Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!
Setelah mengikuti langkah-langkah penerapan konsep MVC pada Menu Paket, di artikel ini akan melanjutkan menjelaskan tahap-tahap dalam mengimplementasikan penerapan konsep MVC pada Menu Member dengan pengguna/user yang berperan sebagai Admin.
Di mana Menu Member 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 Member
1. View
- Pada VSCode buatlah file baru bernama v_pelanggan.php di dalam folder app/Views/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file v_pelanggan.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 Pelanggan</th>
<th>Alamat Pelanggan</th>
<th>Jenis Kelamin</th>
<th>No Telepon</th>
<th class="bg-secondary">Option</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hyunjin</td>
<td>Karawang</td>
<td>Laki-laki</td>
<td>081356780091</td>
<td class="text-center">
<button class="btn-warning btn-edit-pelanggan" data-id="" data-nama="" data-alamat="" data-jenis="" data-tlp="">
<i class="nav-icon fas fa-pen" aria-hidden="true"></i>
</button>
<button class="btn-danger btn-delete-pelanggan" 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="namaPelanggan" class="col-sm-4 col-form-label">Nama Pelanggan</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="namaPelanggan" placeholder="Nama Pelanggan" name="nama_pelanggan" required>
</div>
</div>
<div class="form-group row">
<label for="alamatPelanggan" class="col-sm-4 col-form-label">Alamat Pelanggan</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="alamatPelanggan" placeholder="Alamat Pelanggan" name="alamat_pelanggan" required>
</div>
</div>
<div class="form-group row">
<label for="jenisKelamin" class="col-sm-4 col-form-label">Jenis Kelamin</label>
<div class="col-sm-8">
<select class="form-control" id="jenisKelamin" name="jenis_kelamin" required>
<option value="">- Pilih Role -</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</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="namaPelanggan" class="col-sm-4 col-form-label">Nama Pelanggan</label>
<div class="col-sm-8">
<input type="text" class="form-control nama_pelanggan" id="namaPelanggan" placeholder="Nama Pelanggan" name="nama_pelanggan" required>
</div>
</div>
<div class="form-group row">
<label for="alamatPelanggan" class="col-sm-4 col-form-label">Alamat Pelanggan</label>
<div class="col-sm-8">
<input type="text" class="form-control alamat_pelanggan" id="alamatPelanggan" placeholder="Alamat Pelanggan" name="alamat_pelanggan" required>
</div>
</div>
<div class="form-group row">
<label for="jenisKelamin" class="col-sm-4 col-form-label">Jenis Kelamin</label>
<div class="col-sm-8">
<select class="form-control jenis_kelamin" id="jenisKelamin" name="jenis_kelamin" required>
<option value="">- Pilih Jenis Kelamin -</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</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_member" class="id_member">
<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_member" class="id_member">
<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 Pelanggan.php di dalam folder app/Controllers/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file Pelanggan.php
<?php
namespace App\Controllers\Admin;
use App\Controllers\BaseController;
class Pelanggan extends BaseController
{
public function index()
{
$data = [
'title' => "Admin Pelanggan | My Laundry",
'header' => "Data Pelanggan",
'cardtitle' => "Tabel Pelanggan",
'inputtitle' => "Form Input Data Pelanggan",
'updatetitle' => "Form Update Data Pelanggan",
'deletetitle' => "Delete Data Pelanggan",
];
$data['page'] = view('admin/v_pelanggan', $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/pelanggan
localhost/ci4_anisa_xiirpl3/public/admin/pelanggan
3. Model
- Pada VSCode buatlah file baru bernama PelangganModel.php di dalam folder app/Models
- Copy seluruh paragraf script berikut dan Paste ke dalam file PelangganModel.php
<?php
namespace App\Models;
use CodeIgniter\Model;
class PelangganModel extends Model
{
protected $table = 'tb_member';
protected $primaryKey = 'id_member';
protected $allowedFields = [
"nama_pelanggan",
"alamat_pelanggan",
"jenis_kelamin",
"no_tlp"
];
}Setelah mengikuti langkah-langkah penerapan konsep MVC pada Menu Member 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 9-CRUD Outlet Admin)
Laundry Management Website (Part 8-MVC Transaksi Admin)
