Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Finalisasi Project

A. Finalisasi Fitur Admin

Sebelumnya kita telah melengkapi semua fitur yang ada pada aplikasi sesuai dengan
syarat yang diminta oleh klien pada analisis kebutuhan. Kali ini kita akan melakukan
perubahan pada bagian halaman index dashboard admin, yaitu halaman yang pertama kali
diakses ketika user melakukan login. Perubahan yang dilakukan adalah menambahkan detail
kecil pada navbar menu yaitu informasi mengenai siapa user yang sedang login pada sistem.
Lalu perubahan kedua adalah menambahkan rekap jumlah data yang terdapat dalam aplikasi.
Untuk melakukan perubahan pertama kita akan menggunakan data session yang telah
kita buat sebelumnya saat kita membuat fitur login. Silakan buka file header.php lalu
tambahkan syntax sebagai berikut.

<ul class="nav navbar-nav navbar-right">

<li><p class="navbar-text">Halo, <b><?php echo $_SESSION['nama']; ?></b> !</p></li>
</ul>

Gambar 1. Tampilan Navbar Update

Perhatikan pada gambar 1, detail perubahan yang kita tambahkan terdapat pada
bagian kanan atas. Yaitu pada bagian “Halo, Administrator”, keterangan ini diambil dari
data session[‘nama’] karena nama yang tersimpan dari user tersebut dalam database adalah
Administrator maka pada aplikasi akan tertampil sesuai data tersebut. Ini adalah salah satu
penerapan dari data session yang telah kita buat sebelumnya, untuk pemanfaatan lainnya
silakan kalian lakukan eksplorasi mandiri untuk penggunaannya.
Selanjutnya kita akan masuk pada penambahan kedua yaitu rekap jumlah data yang
terdapat dalam aplikasi. Untuk melakukan hal tersebut silakan buka file index.php dalam
folder admin lalu ubah semua sourcecode yang ada sebelumnya menjadi syntax sebagai
berikut ini.

<?php include 'header.php'; ?>

<?php
// koneksi database
include '../koneksi.php';
?>

<div class="container">
<div class="alert alert-info text-center">
<h4 style="margin-bottom: 0px"><b>Selamat datang!</b> di aplikasi Laundry
LyJo. Anda login Sebagai Admin!</h4>
</div>

Bait Syaiful Rijal, M.Pd | 1

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

<div class="panel">
<div class="panel-heading">
<h4>Dashboard</h4>
</div>
<div class="panel-body">

<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>
<i class="glyphicon glyphicon-
user"></i>
<span class="pull-right">

<?php
$pelanggan =
mysqli_query($koneksi,"select * from tb_pelanggan");
echo
mysqli_num_rows($pelanggan);
?>

</span>
</h1>
Jumlah Pelanggan
</div>
</div>
</div>

<div class="col-md-3">
<div class="panel panel-warning">
<div class="panel-heading">
<h1>
<i class="glyphicon glyphicon-
retweet"></i>
<span class="pull-right">

<?php
$proses =
mysqli_query($koneksi,"select * from tb_transaksi where transaksi_status='proses'");
echo
mysqli_num_rows($proses);
?>

</span>
</h1>
Jumlah Cucian Di Proses
</div>
</div>
</div>

<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h1>

Bait Syaiful Rijal, M.Pd | 2

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

<i class="glyphicon glyphicon-

info-sign"></i>
<span class="pull-right">

<?php
$proses =
mysqli_query($koneksi,"select * from tb_transaksi where transaksi_status='selesai'");
echo
mysqli_num_rows($proses);
?>

</span>
</h1>
Jumlah Cucian Siap Ambil
</div>
</div>
</div>

<div class="col-md-3">
<div class="panel panel-success">
<div class="panel-heading">
<h1>
<i class="glyphicon glyphicon-
ok-circle"></i>
<span class="pull-right">

<?php
$proses =
mysqli_query($koneksi,"select * from tb_transaksi where transaksi_status='diambil'");
echo
mysqli_num_rows($proses);
?>

</span>
</h1>
Jumlah Cucian Selesai
</div>
</div>
</div>
</div>

</div>
</div>

</div>

<?php include 'footer.php'; ?>

Setelah melakukan perubahan pada file index.php maka kita akan mendapati tampilan
halaman index dashboard dari admin terdapat tampilan jumlah rekap data dari aplikasi yang
telah kita kembangkan. Rekap data tersebut antara lain adalah rekap data jumlah pelanggan,
jumlah cucian diproses, jumlah cucian siap diambil, dan jumlah cucian selesai. Untuk
detailya dapat kalian lihat pada gambar 2.

Bait Syaiful Rijal, M.Pd | 3

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Dengan demikian, fitur untuk role admin telah kita selesaikan sepenuhnya. Langkah
selanjutnya adalah finalisasi untuk role user lainnya. Seperti yang sudah sering dibahas pada
modul-modul sebelumnya, untuk fitur user lainnya kita cukup melakukan duplikasi file dari
folder admin lalu disesuaikan pada role user lainnya.

Gambar 2. Tampilan Halaman Dashboard Admin

B. Finalisasi Fitur Role User Kasir

Silakan buka kembali file analisis kebutuhan dari aplikasi topik 1 yang kita kerjakan
ini. Diketahui role user kasir memiliki fitur seperti pada tabel 1.

Table 1. Fitur Role User Kasir

Fitur kasir
Login ✓
Logout ✓
Registrasi Pelanggan ✓
CRUD Outlet
CRUD produk/paket cucian
CRUD pengguna
Entri transaksi ✓
Generate laporan ✓

Setelah mengetahui fitur apasaja yang terdapat untuk role user kasir, selanjutnya buka
folder admin pada project kita lalu copy kan file-file yang berhubungan dengan fitur kasir lalu
paste ke dalam folder kasir. Untuk lebih detailnya dapat diperhatikan pada keterangan
berikut.
Tandai semua file yang berhubungan dengan fitur transaksi yaitu transaksi.php,
transaksi_add.php, transaksi_addAction.php, transaksi_edit.php, transaksi_udpate.php,
transaksi_delete.php, dan transaksi_invoice.php. Jika sudah semua fitur transaksi lalu
dilanjutkan dengan fitur pelanggan yaitu pelanggan.php, pelanggan_add.php,
pelanggan_addAction.php, pelanggan_edit.php, pelanggan_update.php, dan
pelanggan_delete.php. Selanjutnya adalah file yang berhubungan dengan fitur laporan yaitu
laporan.php, laporan_print.php, dan laporan_pdf.php. Jangan lupa file dashboard juga ikut

Bait Syaiful Rijal, M.Pd | 4

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

serta diduplikasikan yaitu file header.php, index.php, footer.php, logout.php, password.php

dan password_update.php. Jika semua ditandai lalu klik copy dan paste kedalam folder kasir.
Dengan demikian struktur yang terdapat dalam folder kasir adalah sebagai berikut.

Gambar 3. Struktur file dalam folder kasir

Jika semua file sudah diduplikasikan selanjutnya kita akan melakukan penyesuaian
pada setting menu dan tampilan untuk role user kasir. Pertama kita akan melakukan update
pada bagian navbar menu, untuk itu silakan buka file header.php yang terdapat dalam folder
kasir lalu ubah menu navbar menjadi sebagai berikut.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">
<li class="active"><a href="index.php"><i
class="glyphicon glyphicon-home"></i> Dashboard</a></li>
<li><a href="pelanggan"><i class="glyphicon glyphicon-sunglasses"></i>
Pelanggan</a></li>

<li><a href="transaksi"><i class="glyphicon glyphicon-

shopping-cart"></i> Transaksi</a></li>
<li><a href="laporan"><i class="glyphicon glyphicon-
usd"></i> Laporan</a></li>
<li><a href="password"><i class="glyphicon glyphicon-eye-open"></i>
Ganti Password</a></li>

Bait Syaiful Rijal, M.Pd | 5

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

<li><a href="logout"><i class="glyphicon glyphicon-

log-out"></i> Log Out</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Halo, <b><?php echo
$_SESSION[nama]; ?></b> !</p></li>
</ul>
</div>

Gambar 4. Halaman dashboard kasir

Jika diperhatikan pada gambar 4, maka tampilan menu pada role user kasir hanya
terdapat fitur yang sesuai dengan rolenya dan tidak selengkap seperti pada role admin.
Setelah itu, kita akan mencoba menambahkan tampilan rekap data transaksi terakhir pada
halaman dashboard kasir. Untuk itu silakan buka pada file index.php pada folder kasir lalu
tambahkan syntax sebagai berikut.

<div class="panel">
<div class="panel-heading">
<h4>Riwayat Transaksi Terakhir</h4>
</div>
<div class="panel-body">
<table class="table table-bordered table-striped">
<tr>
<th width="1%">NO</th>
<th>Nama Outlet</th>
<th>Nama Pelanggan</th>
<th>Nama Paket</th>
<th>Tanggal Masuk</th>
<th>Tanggal Selesai</th>
<th>Berat (KG)</th>
<th>Total Harga</th>
<th>Status Bayar</th>
<th>Status Transaksi</th>
</tr>

<?php
$no=1;

Bait Syaiful Rijal, M.Pd | 6

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

$data = mysqli_query($koneksi,"SELECT * FROM tb_transaksi, tb_user,

tb_outlet, tb_paket, tb_pelanggan where tb_outlet.outlet_id=tb_transaksi.transaksi_outlet
&&
tb_paket.paket_id=tb_transaksi.transaksi_paket &&
tb_pelanggan.pelanggan_id=tb_transaksi.transaksi_pelanggan &&
tb_user.user_id=tb_transaksi.transaksi_user");
while($d = mysqli_fetch_array($data)){
?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $d['outlet_nama']; ?></td>
<!-- <td><?php echo $d['user_nama']; ?></td> -->
<td><?php echo $d['pelanggan_nama']; ?></td>
<td><?php echo $d['paket_jenis']; ?></td>
<td><?php echo $d['transaksi_masuk']; ?></td>
<td><?php echo $d['transaksi_selesai']; ?></td>
<td><?php echo $d['transaksi_berat']; ?></td>
<td><?php echo "Rp.
".number_format($d['transaksi_harga']) .""; ?></td>
<td>
<?php
if($d['transaksi_bayar']=="belum"){
echo "<div class='label label-
danger'>BELUM</div>";
}else if($d['transaksi_bayar']=="lunas"){
echo "<div class='label label-
success'>LUNAS</div>";
}
?>
</td>
<td>
<?php
if($d['transaksi_status']=="proses"){
echo "<div class='label label-
warning'>PROSES</div>";
}else if($d['transaksi_status']=="selesai"){
echo "<div class='label label-
info'>SELESAI</div>";
}else if($d['transaksi_status']=="diambil"){
echo "<div class='label label-
success'>DIAMBIL</div>";
}
?>
</td>
</tr>
<?php
}
?>

</table>
</div>
</div>

Penambahan tampilan rekap data transaksi pada halaman dashboard kasir merupakan
opsional. Kali ini penulis menambahkan fitur tersebut bertujuan untuk memudahkan

Bait Syaiful Rijal, M.Pd | 7

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

pengguna khususnya kasir agar tau apakah ada transaksi yang belum terproses dan lain
sebagainya.

Gambar 5. Hasil update halaman dashboard kasir

Jika semua file sudah selesai disiapkan, silakan lakukan ujicoba pada semua fitur yang
terdapat pada role user kasir. Setelah semua berjalan dengan baik dan sesuai, maka proses
pembuatan fitur untuk role kasir telah kita selesaikan. Kita dapat beralih melanjutkan untuk
mengerjakan fitur dari role user berikutnya, yaitu owner.

C. Finalisasi Fitur Role User Owner

Silakan buka kembali file analisis kebutuhan dari aplikasi topik 1 yang kita kerjakan
ini. Diketahui role user owner memiliki fitur seperti pada tabel 2.

Table 2. Fitur Role User Owner

Fitur owner
Login ✓
Logout ✓
Registrasi Pelanggan
CRUD Outlet
CRUD produk/paket cucian
CRUD pengguna
Entri transaksi
Generate laporan ✓

Setelah mengetahui fitur apasaja yang terdapat untuk role user owner, selanjutnya
buka folder admin pada project kita lalu copy kan file-file yang berhubungan dengan fitur
owner lalu paste ke dalam folder owner. Untuk lebih detailnya dapat diperhatikan pada
keterangan berikut.
Tandai semua file yang berhubungan dengan fitur laporan yaitu laporan.php,
laporan_print.php, dan laporan_pdf.php. Jangan lupa file dashboard juga ikut serta

Bait Syaiful Rijal, M.Pd | 8

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

diduplikasikan yaitu file header.php, index.php, dan footer.php serta logout.php,

password.php dan password_update.php. Jika semua ditandai lalu klik copy dan paste
kedalam folder owner. Dengan demikian struktur yang terdapat dalam folder owner adalah
sebagai berikut.

Gambar 6. Strutur file dalam folder owner

Jika semua file sudah diduplikasikan selanjutnya kita akan melakukan penyesuaian
pada setting menu dan tampilan untuk role user owner. Pertama kita akan melakukan update
pada bagian navbar menu, untuk itu silakan buka file header.php yang terdapat dalam folder
owner lalu ubah menu navbar menjadi sebagai berikut.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">
<li class="active"><a href="index.php"><i
class="glyphicon glyphicon-home"></i> Dashboard</a></li>
<li><a href="laporan"><i class="glyphicon glyphicon-
usd"></i> Laporan</a></li>
<li><a href="password"><i class="glyphicon glyphicon-eye-open"></i>
Ganti Password</a></li>
<li><a href="logout"><i class="glyphicon glyphicon-
log-out"></i> Log Out</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Halo, <b><?php echo
$_SESSION['username']; ?></b> !</p></li>
</ul>
</div>

Setelah itu, kita akan mencoba menambahkan tampilan pesan untuk menggunakan
fitur laporan pada halaman dashboard owner. Untuk itu silakan buka pada file index.php
pada folder owner lalu tambahkan syntax sebagai berikut.

div class="panel">
<div class="panel-heading text-center">
<h4>Silakan Gunakan FItur Laporan Untuk Mendapatkan Laporan</h4>

Bait Syaiful Rijal, M.Pd | 9

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

</div>
</div>

Gambar 7. Halaman Dashboard Role User Owner

Jika semua file sudah selesai disiapkan, silakan lakukan ujicoba pada semua fitur yang
terdapat pada role user owner. Setelah semua berjalan dengan baik dan sesuai, maka proses
pembuatan fitur untuk role owner telah kita selesaikan.
Dengan demikian aplikasi project topik 1 kita yaitu aplikasi Laundry berbasis WEB
telah selesai dikembangkan. Silakan pahami segala sesuatu yang kita kerjakan hingga telah
selesai sampai saat ini. Meskipun project sudah selesai dan dapat digunakan secara offline,
namun akan ditambahkan materi pada modul berikutnya agar aplikasi kita ini bisa diakses
oleh public menggunakan web hosting. Namun sebelum itu, silakan dipahami dan pastikan
project kalian sudah selesai secara utuh sebelum masuk kedalam materi web hosting.

__Selamat Belajar dan Berkarya__

Bait Syaiful Rijal, M.Pd | 10