Laundry Management Website (Part 5-MVC User Admin)
Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!
Setelah mengikuti langkah-langkah penerapan konsep MVC pada Menu Outlet, di artikel ini akan melanjutkan menjelaskan tahap-tahap dalam mengimplementasikan penerapan konsep MVC pada Menu User dengan pengguna/user yang berperan sebagai Admin.
Di mana Menu User 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 User
1. View
- Pada VSCode buatlah file baru bernama v_pengguna.php di dalam folder app/Views/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file v_pengguna.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 Pengguna</th>
<th>Username</th>
<th>Nama Outlet</th>
<th>Role</th>
<th class="bg-secondary">Option</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anisa</td>
<td>admin</td>
<td>My Laundry</td>
<td>Admin</td>
<td class="text-center">
<button class="btn-warning btn-edit-pengguna" data-id="" data-nama="" data-username="" data-outlet="" data-role="">
<i class="nav-icon fas fa-pen" aria-hidden="true"></i>
</button>
<button class="btn-danger btn-delete-pengguna" 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="namaPengguna" class="col-sm-4 col-form-label">Nama Pengguna</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="namaPengguna" placeholder="Nama Pengguna" name="nama_pengguna" required>
</div>
</div>
<div class="form-group row">
<label for="userName" class="col-sm-4 col-form-label">Username</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="userName" placeholder="Username" name="username" required>
</div>
</div>
<div class="form-group row">
<label for="passWord" class="col-sm-4 col-form-label">Password</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="passWord" placeholder="Password" name="password" required>
</div>
</div>
<div class="form-group row">
<label for="namaOutlet" class="col-sm-4 col-form-label">Nama Outlet</label>
<div class="col-sm-8">
<select class="form-control" id="namaOutlet" name="id_outlet" required>
<option value="">- Pilih Nama Outlet -</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="namaRole" class="col-sm-4 col-form-label">Role</label>
<div class="col-sm-8">
<select class="form-control" id="namaRole" name="role" required>
<option value="">- Pilih Role -</option>
<option value="Admin">Admin</option>
<option value="Kasir">Kasir</option>
<option value="Owner">Owner</option>
</select>
</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="namaPengguna" class="col-sm-4 col-form-label">Nama Pengguna</label>
<div class="col-sm-8">
<input type="text" class="form-control nama_pengguna" id="namaPengguna" placeholder="Nama Pengguna" name="nama_pengguna" required>
</div>
</div>
<div class="form-group row">
<label for="userName" class="col-sm-4 col-form-label">Username</label>
<div class="col-sm-8">
<input type="text" class="form-control username" id="userName" placeholder="Username" name="username" readonly="readonly">
</div>
</div>
<div class="form-group row">
<label for="namaOutlet" class="col-sm-4 col-form-label">Nama Outlet</label>
<div class="col-sm-8">
<select class="form-control id_outlet" id="namaOutlet" name="id_outlet" required>
<option value="">- Pilih Nama Outlet -</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="namaRole" class="col-sm-4 col-form-label">Role</label>
<div class="col-sm-8">
<select class="form-control role" id="namaRole" name="role" required>
<option value="">- Pilih Role -</option>
<option value="Admin">Admin</option>
<option value="Kasir">Kasir</option>
<option value="Owner">Owner</option>
</select>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<div class="modal-footer justify-content-between">
<input type="hidden" name="id_user" class="id_user">
<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_user" class="id_user">
<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 Pengguna.php di dalam folder app/Controllers/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file Pengguna.php
<?php
namespace App\Controllers\Admin;
use App\Controllers\BaseController;
class Pengguna extends BaseController
{
public function index()
{
$data = [
'title' => "Admin Pengguna | My Laundry",
'header' => "Data Pengguna",
'cardtitle' => "Tabel Pengguna",
'inputtitle' => "Form Input Data Pengguna",
'updatetitle' => "Form Update Data Pengguna",
'deletetitle' => "Delete Data Pengguna",
];
$data['page'] = view('admin/v_pengguna', $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/pengguna
localhost/ci4_anisa_xiirpl3/public/admin/pengguna
3. Model
- Pada VSCode buatlah file baru bernama PenggunaModel.php di dalam folder app/Models
- Copy seluruh paragraf script berikut dan Paste ke dalam file PenggunaModel.php
<?php
namespace App\Models;
use CodeIgniter\Model;
class PenggunaModel extends Model
{
protected $table = 'tb_user';
protected $primaryKey = 'id_user';
protected $allowedFields = [
"nama_pengguna",
"username",
"password",
"id_outlet",
"role"
];
}Setelah mengikuti langkah-langkah penerapan konsep MVC pada Menu User 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 6-MVC Paket Admin)
