Membuat Fitur Transaksi

Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul
Membuat Fitur Transaksi
A. Deskripsi
Fitur transaksi pada aplikasi project yang kita kerjakan merupakan fitur utama atau
biasa disebut dengan istilah core dari bisnis yang dikelola oleh aplikasi. Seperti dengan
judulnya aplikasi laundry, berarti transaksi yang akan dikerjakan merupakan fitur transaksi
untuk pekerjaan jasa laundry. Pernahkah kalian menggunakan jasa laundry sebelumnya?
Sebaiknya kalian cari referensi bagaimana jasa laundry itu bekerja. Dengan wawasan
bagaimana sebuah bisnis dijalankan secara manual akan menambah pemahaman kita ketika
ingin mengembangkannya dalam sebuah bentuk aplikasi digital.
Kenapa pada project kali ini bagian fitur transaksi menjadi bagian fitur utama? Hal ini
dikarenakan aplikasi yang kita kembangkan pada dasarnya adalah bagian pencatatan data
transaksi pengelolaan sebuah jasa laundry. Maka dari itu jika diperhatikan secara teknis,
ketika membuat desain database saja terlihat bahwa pada tabel transaksi berhubungan dengan
semua tabel yang ada dalam system database.
Sebagai persiapan sebelum mengembangkan fitur pada bagian transaksi, silakan
diperhatikan kembali mengenai struktur data pada tabel transaksi dalam database. Hal ini
diperlukan karena beberapa data yang terdapat dalam tabel transaksi saling terhubung dengan
data yang ada pada tabel lainnya. Meskipun begitu, secara prinsip konsep CRUD tetap
digunakan sama seperti pada saat membuat pada tabel lainnya.
Dalam materi kali ini kita akan membahas segala sesuatu yang ada dalam alur data
transaksi. Fitur-fitur yang berhubungan dengan transaksi tersebut yaitu, menampilkan data
transaksi, menambahkan data transaksi (input data transaksi dan input data pakaian sesuai
transaksi yang dilakukan), melakukan edit serta update pada tabel transaksi, menghapus atau
membatalkan transaksi, dan mencetak atau membuat invoice dari transaksi yang dilakukan.
Silakan dapat kalian ikuti instruksi untuk membuat semua fitur tersebut pada modul materi
kali ini.
B. Menampilkan Data Transaksi

Sebelum membuat tampilan untuk data transaksi, bagi yang kesulitan untuk membuat
struktur tampilan bisa silakan membuat dummy data terlebih dahulu. Untuk menampilkan
data transaksi kita akan menggunakan cara yang sama seperti materi sebelumnya, silakan
membuat file baru terlebih dahulu yaitu file transaksi.php. Setelah file sudah siap silakan
tuliskan syntax sourcode sebagai berikut.
<?php include 'header.php'; ?>
<div class="container">
<div class="panel">
<div class="panel-heading">
<h4>Data Transaksi</h4>
</div>
<div class="panel-body">
<a href="transaksi_add" class="btn btn-sm btn-info pull-right">Tambah Transaksi</a>
Bait Syaiful Rijal, M.Pd | 1

<br/>
<br/>
<div class="table-responsive">
<table class="table table-bordered table-striped"
id="table-datatable">
<thead>
<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>
<th width="20%">OPSI</th>
</tr>
</thead>
<tbody>
<?php
include '../koneksi.php';
$no=1;
$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['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"){
success'>LUNAS</div>";
}
?>
</td>
<td>

<?php
if($d['transaksi_status']=="proses"){
warning'>PROSES</div>";
}else if($d['transaksi_status']=="selesai"){
info'>SELESAI</div>";
}else if($d['transaksi_status']=="diambil"){
success'>DIAMBIL</div>";
}
?>
</td>
<td>
<a href="transaksi_invoice.php?id=<?php echo
$d['transaksi_id']; ?>" target="_blank" class="btn btn-sm btn-success">Invoice</a>
<a href="transaksi_edit.php?id=<?php echo
$d['transaksi_id']; ?>" class="btn btn-sm btn-warning">Edit</a>
<a href="#" onClick =
"confirm_modal('transaksi_delete.php?id=<?php echo $d['transaksi_id']; ?>');" class="btn
btn-sm btn-danger">Batal</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
Ketika materi ini dibuat, pada database telah berisi data dummy mengenai transaksi
sehingga ketika menjalankan file transaksi.php maka akan kita dapati tampilan sebagai
berikut.
Gambar 1. Tampilan Halaman Transaksi

Perhatikan pada gambar 1, struktur tabel yang ditampilkan cukup banyak dan panjang
dibandingkan data yang telah kita buat sebelumnya pada menu lainnya. Hal ini dikarenakan
memang banyak informasi yang perlu kita tampilkan dari data transaksi itu sendiri. Untuk
memanggil data tersebut kita melakukan sebuah kondisi pada saat memanggil data, hal ini
dikarenakan kita perlu mempresentasikan data yang bisa dibaca oleh user dengan mudah.
Jika kita menggunakan cara biasa seperti saat menampilkan pada data tabel lainnya maka
hasilnya adalah sebagai berikut.
Gambar 2. Hasil tampilan transaksi secara default
Perhatikan gambar 2, jika kita langsung memanggil data hanya menggunakan tabel
transaksi saja maka hasilnya akan seperti pada gambar. Jika diperhatikan ada beberapa data
yang sulit dibaca atau dimengerti oleh pengguna. Oleh karena itu, pada sourcecode diatas kita
memanggil data pada tabel dengan kondisi menggabungkan beberapa tabel menjadi satu
kondisi. Perhatikan pada syntax berikut ini.
$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");
Syntax diatas adalah syntax untuk menampilkan data dengan membuat kondisi
menggabungkan beberapa tabel untuk dijadikan dalam 1 tampilan. Selain dengan cara ini
kalian bisa menggunakan fitur join atau view dari mysql, silakan kalian eksplorasi secara
mandiri untuk penggunaannya.
C. Menambahkan Data Transaksi pada Database

Sebelum kalian melakukan input atau menambahkan data pada tabel transaksi, perlu
dipastikan terlebih dahulu bahwa semua tabel yang terkoneksi atau terhubung dengan tabel
transaksi telah memiliki data. Hal ini dikarenakan tabel transaksi memliki beberapa kolom
yang menjadi foreign key dari kolom tabel lainnya. Ketika semua tabel telah terhubung dan
memiliki data, maka saat membuat proeses tambah data dibagian transaksi kita bisa membuat

pilihan berdasarkan data yang ada dalam database. Untuk lebih detailnya silakan kalian buat
terlebih dahulu file transaksi_add.php. Setelah itu tuliskan sourcecode sebagai berikut.
<div class="col-md-8 col-md-offset-2">
<div class="panel">
<h4>Tambah Transaksi Baru</h4>
<a href="transaksi" class="btn btn-warning btn-sm pull-right"><i class="fa
fa-reply"></i> &nbsp
Kembali</a>
</div>
<?php
// koneksi database
// mengambil data dari database

$user = mysqli_query($koneksi, "select * from tb_user");
$outlet = mysqli_query($koneksi, "select * from tb_outlet");
$pelanggan = mysqli_query($koneksi, "select * from tb_pelanggan");
$paket = mysqli_query($koneksi, "select * from tb_paket");
?>
<form action="transaksi_addAction" method="post" enctype="multipart/form-

data">
<div class="form-group">
<label>Nama Outlet</label>
<select class="form-control" name="outlet" required="required">
<option disabled selected> -- Pilih Outlet --</option>
<?php while ($d = mysqli_fetch_array($outlet)) { ?>
<option value="<?php echo $d['outlet_id'] ?>"><?php echo

$d['outlet_nama'] ?>
</option>
<?php } ?>
</select>
</div>
<label>Nama Petugas</label>
<select class="form-control" name="user" required="required">
<option disabled selected> -- Pilih User --</option>
<?php while ($d = mysqli_fetch_array($user)) { ?>

<option value="<?php echo $d['user_id'] ?>"><?php echo

$d['user_nama'] ?>
</option>
<?php } ?>
</select>
</div>
<label>Nama Pelanggan</label>
<select class="form-control" name="pelanggan" required="required">
<option disabled selected> -- Pilih Pelanggan --</option>
<?php while ($d = mysqli_fetch_array($pelanggan)) { ?>
<option value="<?php echo $d['pelanggan_id'] ?>"><?php echo

$d['pelanggan_nama'] ?>
</option>
<?php } ?>
</select>
</div>
<label>Jenis Paket</label>
<select class="form-control" name="paket" required="required">
<option disabled selected> -- Pilih Jenis Paket --</option>
<?php while ($d = mysqli_fetch_array($paket)) { ?>
<option value="<?php echo $d['paket_id'] ?>"><?php echo

$d['paket_jenis'] ?>
</option>
<?php } ?>
</select>
</div>
<label>Tanggal Selesai</label>
<input type="date" class="form-control" name="tgl_selesai"
required="required"
placeholder="Masukkan Tanggal Selesai ..">
</div>
<label>Total Berat</label>
<input type="text" class="form-control" name="berat"
required="required"
placeholder="Masukkan Total Berat Pakaian ..">
</div>
<div class="col-md-12">
<h4 class="box-title">Detail Transaksi Pakaian</h4>
<table class="table table-hover" id="dinamis">

<thead>
<tr>
<th>Jenis Pakaian</th>
<th>Jumlah</th>
<th><button type="button" class="btn btn-blue add-
row">+</button></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"
name="jenis_pakaian[]"></td>
<td><input type="number" class="form-control"
name="jumlah_pakaian[]"></td>
<td><button type="button" class="btn btn-danger delete-
row">-</button></td>
</tr>
</tbody>
</table>
</div>
<input type="submit" class="btn btn-sm btn-primary" value="Simpan">
</div>
</form>
</div>
</div>
</div>
</div>
Sekarang coba jalankan file tersebut. Setelah dijalankan kita akan mendapati tampilan
transaksi add seperti pada gambar 3 dibawah. Pada transaksi kita akan melakukan 2 proses
input data, pertama adalah data transaksi lalu kedua adalah data detail pakaian. Maka ketika
diperhatikan pada gambar 3 kita memiliki tampilan 2 bagian yang tergabung menjadi 1.
Pada gambar 4 merupakan bentuk multiform dinamis, kita bisa menambahkan dan
mengurangi jumlah form sesuai dengan kebutuhan kita. Form tersebut ditujukan untuk
merekam data dari detail pakaian. Data pakaian akan dimasukan kedalam tabel tb_pakaian
dengan data transaksi sesuai dengan transaksi yang sedang berlangsung atau transaksi
terakhir. Untuk membuat form seperti itu kita menggunakan javascript sebagai berikut.


<script>
$(document).ready(function(){
$('#dinamis .add-row').click(function () {
var template = '<tr><td><input class="form-control" type="text"
name="jenis_pakaian[]"></td><td><input class="form-control" type="text"
name="jumlah_pakaian[]"></td><td><button type="button" class="btn btn-danger delete-row">-
</button></td></tr>';
$('#dinamis tbody').append(template);
});

$('#dinamis').on('click', '.delete-row', function () {

$(this).parent().parent().remove();
});
});
</script>
Gambar 3. Tampilan Halaman Transaksi Add
Function javascript untuk form dinamis tersebut kita panggil kedalam form yang kita
buat pada file transaksi_add.php yaitu pada bagian berikut ini.


<div class="col-md-12">
<h4 class="box-title">Detail Transaksi Pakaian</h4>

<table class="table table-hover" id="dinamis">

<thead>
<tr>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
Dengan memadukan function tersebut kedalam form yang kita buat maka
dihasilkanlah form dinamis seperti pada gambar 4. Hal ini diperlukan karena kita tidak
mengetahui seberapa banyak dan variatifnya data pakaian yang akan diinput pada suatu kali
transaksi.
Gambar 4. Tampilan Multiform Dinamis untuk Daftar Pakaian
Jika form untuk melakukan input data telah siap, selanjutnya kita akan membuat file
untuk mengeksekusi perintah sql input data transaksi. Untuk itu, silakan buat file
transakasi_addAction.php lalu tuliskan syntax berikut ini.
<?php
//mengambil data dari form tansaksi add

$outlet = $_POST['outlet'];
$user = $_POST['user'];
$pelanggan = $_POST['pelanggan'];

$paket = $_POST['paket'];
$tgl_masuk = date('Y-m-d');
$tgl_selesai = $_POST['tgl_selesai'];
$berat = $_POST['berat'];
$status_bayar = 'belum';
$status_transaksi = 'proses';
//membuat perhitungan total bayar

$harga = mysqli_query($koneksi, "select * from tb_paket where paket_id='$paket'");
while ($d = mysqli_fetch_array($harga)) {
$totalbayar = $berat * $d['paket_harga'];
}
//melakukan perintah sql input data transasi pada tabel transaksi

$input_transaksi = "insert into tb_transaksi values (NULL,
'$user','$outlet','$pelanggan','$paket','$tgl_masuk',
'$tgl_selesai','$berat','$totalbayar','$status_bayar','$status_transaksi')";
mysqli_query($koneksi, $input_transaksi);
//mengarahkan kembali ke halaman transaksi dengan pesan berhasil menambahkan data

header("location:transaksi?alert=create");
//membuat aksi input pada data detail pakaian
//membaca id transaksi sesuai record input terakhir

$id_terakhir = mysqli_insert_id($koneksi);
//mengambil data dari form detail transaksi pakaian

$jenis_pakaian = $_POST['jenis_pakaian'];
$jumlah_pakaian = $_POST['jumlah_pakaian'];
// input data cucian berdasarkan id transaksi ke table pakaian

for($x=0;$x<count($jenis_pakaian);$x++){
if($jenis_pakaian[$x] != ""){
mysqli_query($koneksi,"insert into tb_pakaian
values(NULL,'$jenis_pakaian[$x]','$jumlah_pakaian[$x]','$id_terakhir')");
}
}
Perhatikan pada sourcecode diatas, dalam file transaksi_addAction.php kita

mengeksekusi 2 perintah sql untuk melakukan input data pada 2 tabel yang berbeda dalam
database. Tabel pertama adalah tabel transaksi, program mengeksekusi pertama kedalam
tabel transaksi berisi semua inputan yang berasal dari form inputan dan beberapa field
diisikan oleh data default. Data default yang diisikan yaitu data tanggal masuk (menggunakan
fungsi membaca tanggal sesuai kalender aplikasi), data status bayar yang secara default terisi
‘belum’ bayar, dan data proses pekerjaan yang defaultnya adalah ‘proses’.
Setelah melakukan input pada tabel pertama yaitu tabel transaksi, program
selanjutnya melakukan ekskusi untuk tabel kedua yaitu tabel pakaian. Mengapa tabel pakaian
menjadi tabel yang dieksekusi terakhir?Hal ini dikarenakan dibutuhkan data id transaksi
untuk dimasukan kedalam tabel pakaian. Data tersebut bisa diperoleh ketika perintah input
transaksi sudah dilakukan terlebih dahulu. Jika diperhatikan kita menuliskan syntax

$id_terakhir = mysqli_insert_id($koneksi);bertujuan untuk mendapatkan id terakhir yang

diproses oleh database pada tabel transaksi. Selain membutuhkan data tersebut, untuk tabel
pakaian kita membuat sebuah data dalam array untuk membaca sejumlah data yang
diinputkan melalui multiform dinamis. Dengan memanfaatkan array kita bisa merekam
seluruh data sesuai jumlah inputan yang diberikan berapapun jumlahnya. Sebagai catatan
untuk melakukan multiform input perlu tambahan syntax pada bagian form html sebagai
berikut.
<form action="transaksi_addAction" method="post" enctype="multipart/form-data">
Setelah selesai menyiapkan seluruh file untuk melakukan tambah data transaksi,
silakan kalian coba untuk melakukan penambahan data baru untuk transaksi. Perhatikan cara
kerja dan sourcecodenya lalu pahami baik-baik.
D. Membuat Edit dan Update Data Transaksi

Sama dengan ketika membuat fitur input, untuk melakukan edit kita akan melalui
dengan 2 tahapan yaitu membuat tampilan edit dan membuat file untuk melakukan update.
Pada tampilan halaman edit sama dengan cara pada edit menu lainnya, kita perlu memanggil
data yang sudah tersimpan terlebih dahulu sebagai bahan untuk melakukan edit. Lalu, untuk
bagian update kita sama dengan saat melakukan input, akan melakukan 2 proses eksekusi
update pada 2 tabel yang berbeda sekaligus. Sebagai langkah pertama silakan buat file
transaksi_edit.php lalu tuliskan sourcecode sebagai berikut.
<div class="panel">
<h4>Edit Transaksi</h4>
<a href="transaksi" class="btn btn-warning btn-sm pull-right"><i class="fa
fa-reply"></i> &nbsp
Kembali</a>
</div>
<?php
// koneksi database
?>
<form action="transaksi_update" method="post" enctype="multipart/form-

data">
<?php
$id = $_GET['id'];
$data = mysqli_query($koneksi, "select * from tb_transaksi where
transaksi_id='$id'");
$outlet = mysqli_query($koneksi, "select * from tb_outlet");

$pelanggan = mysqli_query($koneksi, "select * from tb_pelanggan");

$paket = mysqli_query($koneksi, "select * from tb_paket");
while($d = mysqli_fetch_array($data)){
?>

<input type="hidden" name="id" value="<?php echo $d['transaksi_id']; ?>">
<label>Nama Outlet</label>
<select class="form-control" name="outlet" required="required">
<?php while ($l = mysqli_fetch_array($outlet)) { ?>
<option <?php if($d['transaksi_outlet'] == $l['outlet_id'])

{echo "selected='selected'";} ?>
value="<?php echo $l['outlet_id'] ?>"><?php echo
$l['outlet_nama'] ?></option>
<?php } ?>
</select>
</div>
<label>Nama Pelanggan</label>
<select class="form-control" name="pelanggan" required="required">
<?php while ($l = mysqli_fetch_array($pelanggan)) { ?>
<option <?php if($d['transaksi_pelanggan'] ==

$l['pelanggan_id']){echo "selected='selected'";} ?>
value="<?php echo $l['pelanggan_id'] ?>"><?php echo
$l['pelanggan_nama'] ?></option>
<?php } ?>
</select>
</div>
<label>Jenis Paket</label>
<select class="form-control" name="paket" required="required">
<?php while ($l = mysqli_fetch_array($paket)) { ?>
<option <?php if($d['transaksi_paket'] == $l['paket_id']){echo

"selected='selected'";} ?>
value="<?php echo $l['paket_id'] ?>"><?php echo
$l['paket_jenis'] ?></option>
<?php } ?>
</select>
</div>
<label>Berat</label>

<input type="number" class="form-control" name="berat"

placeholder="Masukkan berat cucian .." required="required" value="<?php echo
$d['transaksi_berat']; ?>">
</div>
<label>Tgl. Selesai</label>
<input type="date" class="form-control" name="tgl_selesai"
required="required" value="<?php echo $d['transaksi_selesai']; ?>">
</div>
<br/>
<table class="table table-bordered table-striped" id="dinamis">

<tr>
<th width="20%">Jumlah</th>
</tr>
<?php
// menyimpan id transaksi ke variabel id_transaksi
$id_transaksi = $d['transaksi_id'];
// menampilkan pakaian-pakaian dari transaksi yang ber id di atas

$pakaian = mysqli_query($koneksi,"select * from tb_pakaian where
pakaian_transaksi='$id_transaksi'");
while($p=mysqli_fetch_array($pakaian)){
?>
<tr>
name="jenis_pakaian[]" value="<?php echo $p['pakaian_jenis']; ?>"></td>
name="jumlah_pakaian[]" value="<?php echo $p['pakaian_jumlah']; ?>"></td>
</tr>
<?php } ?>
<tr>
</tr>
<tr>
</tr>
</table>
<div class="form-group alert alert-warning">

<label>Bayar</label>
<select class="form-control" name="bayar" required="required">
<option <?php if($d['transaksi_bayar']=="belum"){echo

"selected='selected'";} ?> value="belum">BELUM</option>
<option <?php if($d['transaksi_bayar']=="lunas"){echo

"selected='selected'";} ?> value="lunas">LUNAS</option>
</select>
</div>
<div class="form-group alert alert-info">

<label>Status</label>
<select class="form-control" name="status" required="required">
<option <?php if($d['transaksi_status']=="proses"){echo

"selected='selected'";} ?> value="proses">PROSES</option>
<option <?php if($d['transaksi_status']=="selesai"){echo

"selected='selected'";} ?> value="selesai">SELESAI</option>
<option <?php if($d['transaksi_status']=="diambil"){echo

"selected='selected'";} ?> value="diambil">DIAMBIL</option>
</select>
</div>
<input type="submit" class="btn btn-primary" value="Simpan">

</form>
<?php
}
?>
</div>
</div>
</div>
</div>
Perhatikan pada sourcecode diatas, dengan susunan seperti itu nanti kita akan
menghasilkan sebuah tampilan halaman edit transaksi yang terdiri dari 4 bagian segmen.
Segmen pertama adalah segmen untuk data pelanggan mulai dari nama, total berat, outlet,
jenis paket, dan tanggal selesai nantinya. Segmen kedua berisikan data pakaian yang
dimasukan dalam jasa laundry sesuai data pelanggan tersebut. Segmen ketiga berikan
perubahan untuk detail status pembayaran. Lalu segmen terakhir yaitu keempat berisikan

detail proses pengerjaan dari transaksi yang berlangsung. Cukup banyak hal yang dapat
dilakukan didalam proses transaksi, beberapa pekerjaan perlu dilakukan update sesuai jangka
waktu tertentu. Maka dari itu, untuk menu edit transaksi kita bagi menjadi beberapa segmen
guna memenuhi kebutuhan tersebut. Contoh, ketika pertama kali barang masuk (pakaian)
maka status pengerjaanya adalah ‘proses’ lalu ketika sudah dicuci maka perlu dilakukan
update statusnya menjadi ‘selesai’ dan ketika sudah diambil maka perlu diupdate lagi
menjadi ‘diambil’. Untuk lebih detailnya terkait tampilan edit transaksi dapat dilihat pada
gambar berikut.
Gambar 5. Tampilan Halaman Edit Transaksi

Setelah menyiapkan tampilan halaman edit, langkah berikutnya adalah membuat file
untuk melakukan eksekusi update data transaksi. Untuk itu, silakan buat file
transaksi_update.php lalu tuliskan sourcecode sebagai berikut.
<?php
// menghubungkan dengan koneksi
// menangkap data yang dikirim dari form edit

$id = $_POST['id'];
$outlet = $_POST['outlet'];
$pelanggan = $_POST['pelanggan'];
$paket = $_POST['paket'];
$berat = $_POST['berat'];
$tgl_selesai = $_POST['tgl_selesai'];
$bayar = $_POST['bayar'];
$status = $_POST['status'];
//membuat perhitungan total bayar

$harga = mysqli_query($koneksi, "select * from tb_paket where paket_id='$paket'");
while ($d = mysqli_fetch_array($harga)) {
$totalbayar = $berat * $d['paket_harga'];
}
// update data transaksi

$update_transaksi = "update tb_transaksi set
transaksi_pelanggan='$pelanggan',transaksi_outlet='$outlet',transaksi_paket='$paket',
transaksi_harga='$totalbayar', transaksi_berat='$berat', transaksi_selesai='$tgl_selesai',
transaksi_bayar='$bayar', transaksi_status='$status' where transaksi_id='$id'";
mysqli_query($koneksi, $update_transaksi);
//mysqli_query($koneksi,"update tb_transaksi set

transaksi_pelanggan='$pelanggan',transaksi_outlet='$outlet',transaksi_paket='$paket',
transaksi_harga='$totalbayar', transaksi_berat='$berat', transaksi_selesai='$tgl_selesai',
transaksi_bayar='$bayar', transaksi_status='$status' where transaksi_id='$id'");
// menangkap data form input array (jenis pakaian dan jumlah pakaian)
$jenis_pakaian = $_POST['jenis_pakaian'];
$jumlah_pakaian = $_POST['jumlah_pakaian'];
// menghapus semua pakaian dalam transaksi ini

mysqli_query($koneksi,"delete from tb_pakaian where pakaian_transaksi='$id'");
// input ulang data cucian berdasarkan id transaksi (invoice) ke table pakaian

for($x=0;$x<count($jenis_pakaian);$x++){
if($jenis_pakaian[$x] != ""){
mysqli_query($koneksi,"insert into tb_pakaian
values(NULL,'$jenis_pakaian[$x]','$jumlah_pakaian[$x]', '$id')");
}
}
// echo "$update_transaksi";

header("location:transaksi?alert=update");
?>
Pada proses update data transaksi ini, terdapat 2 rangkaian perintah sql yang harus
dieksekusi oleh program. Perintah pertama adalah melakukan update data pada tabel
transaksi, hal ini sama halnya dengan yang biasa dilakukan pada menu update tabel lainnya.
Lalu perintah kedua adalah melakukan update pada tabel pakaian. Untuk perintah kedua ini,
kita tidak menggunakan update melainkan dengan cara menghapus terlebih dahulu semua
data pakaian yang telah tersimpan sesuai transaksi_id yang akan diedit baru setelah itu
melakukan input ulang data pakaian sesuai inputan saat edit data yang dilakukan. Jika sudah
selesai menyiapkan semua filenya, silakan melakukan ujicoba untuk edit data transaksi.
Pahami alur kerja dan sourcecode yang telah dibuat.
Cara yang dilakukan diatas memang berbeda jika dikatakan update seperti tabel
sebelumnya, akan tetapi hal ini dilakukan dengan tujuan untuk memudahkan kita dalam
melakukan proses pengembangan. Sebagai catatan, seorang programmer bebas melakukan
atau menemukan cara dalam menyelesaikan masalah, dan ini dianggap oleh penulis sebagai
salah satu cara untuk mengeksekusi edit data transaksi pada project kali ini. Bagi para siswa,
diperbolehkan melakukan eksplorasi mandiri dengan cara berbeda. Yang terpenting fitur dari
aplikasi tetap dapat dieksekusi dengan baik.
E. Membuat Hapus Data Transaksi

Dalam fitur hapus data transaksi kita akan menamaiya sebagai menu membatalkan
transaksi. Secara konsep untuk hapus data juga memerlukan cara yang sama seperti saat
menambahkan data maupun merubah data, yaitu melakukan 2 eksekusi pada 2 tabel yang
berbeda. Hanya saja, untuk fitur batalkan ini kita akan memanfaatkan bantuan dari relasi
tabel dalam database. Bagaiamanakah cara kerjanya?Silakan ikuti tahapan sebagai berikut.
Jika kalian ingat saat pertama kita menyiapkan database pada project ini, kita telah
membuat relasi antar tabel. Setiap fitur yang dilakukan pada data transaksi selalu
berhubungan antara tb_transaksi dengan tb_pakaian. Untuk itu kita cek pada relasi kedua
tabel tersebut, lalu pastikan kita menggunakan jenis relasi CASCADE pada relasi tabelnya.
Setting relasi menjadi CASCADE pada bagian ON DELETE. Silakan kalian buka database,
klik pada tb_pakaian lalu masuk ke tab struktur dan klik pada bagian relation view.
Perhatikan gambar berikut ini.
Gambar 6. Tampilan Setting Relasi Tabel

Jika sudah melakukan perubahan seperti pada penjelasan diatas, selanjutnya kita
siapkan file untuk eksekusi perintah hapus/batalkan transaksi. Silakan buat file dengan nama
transaksi_delete.php lalu tuliskan syntax sebagau berikut.
<?php
//menangkap data transaksi_id yang ingin dihapus

$id = $_GET['id'];
//melakukan perintah sql hapus transaksi pada tabel transaksi

mysqli_query($koneksi, "delete from tb_transaksi where transaksi_id='$id'");
//catatan ketika kita menghapus transaksi maka data pakaian yang menggunakan transaksi_id
yang sama akan ikut terhapus otomatis
//mengarahkan kembali ke halaman transaksi denga pesan berhasil hapus data

header("location:transaksi?alert=delete");
Untuk mengaktifkan eksekusi pada fitur batalkan jangan lupa untuk menambahkan
akses link pada file transaksi_delete.php dimenunya. Pastikan dalam file transaksi.php sudah
terdapat syntax sebagai berikut.
<a href="#" onClick = "confirm_modal('transaksi_delete.php?id=<?php echo

$d['transaksi_id']; ?>');" class="btn btn-sm btn-danger">Batal</a>
Setelah semua file telah selesai disiapkan, silakan lakukan percobaan untuk
melakukan pembatalan transaksi. Jika fitur berjalan dengan benar, maka periksa pada tabel
database seharusnya data pada transaksi_id yang dihapus baik didalam tb_transaksi maupun
data pakaian pada tb_pakaian yang menggunakan transaksi_id yang sama seharusnya telah
terhapus semua. Pahami cara kerja dan sourcecode dari fitur ini seteleh semua berjalan, jika
menemui error pada saat penerapan silakan lakukan eksplorasi mandiri untuk perbaikan.
F. Membuat Fitur Cetak Invoice

Hal yang wajar pada saat melakukan sebuah transaksi jual beli baik itu jasa maupun
barang, maka perlu adanya bukti transaksi. Dengan demikian, kita membutuhkan sebuah fitur
untuk melakukan percetakan data transaksi tersebut. Kita akan menyebut fitur ini sebagai
fitur cetak invoice. Untuk melakukan hal tersebut kita akan membuatnya secara sederhana
menggunakan function dari javascript.
Langkah pertama untuk membuat fitur ini, kita mulai dengan membuat link untuk
memproses fitur cetak invoice. Kita akan melakukan eksekusi invoice menggunakan file
dengan nama transaksi_invoice.php. Untuk itu kita setting dulu link pada tombol yang
terdapat pada file transaksi.php sebagai berikut.

<a href="transaksi_invoice.php?id=<?php echo $d['transaksi_id']; ?>" target="_blank"

class="btn btn-sm btn-success">Invoice</a>
Setelah link siap, selanjutnya kita buat file transaksi_invoice.php lalu tuliskan syntax
sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Aplikasi LyJo</title>
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">

<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
</head>
<body>

<?php
session_start();
if($_SESSION['status']!="admin_login"){
header("location:../index.php?pesan=belum_login");
}
?>
<?php
// koneksi database
?>
<?php
// menangkap id yang dikirim melalui url
$id = $_GET['id'];
// megambil data transaksi yang ber id di atas dari tabel transaksi

$transaksi = mysqli_query($koneksi,"select * from
tb_transaksi,tb_pelanggan,tb_outlet,tb_paket
where transaksi_id='$id' and transaksi_pelanggan=pelanggan_id and
transaksi_outlet=outlet_id
and transaksi_paket=paket_id" );
while($t=mysqli_fetch_array($transaksi)){
?>
<center><h2>LyJo " Laundry Jogja "</h2></center>
<h3></h3>

<a href="#" onclick="printPage()" class="btn btn-primary
pull-right hidden-print"><i class="glyphicon glyphicon-print"></i> CETAK</a>
<br/>
<br/>

<table class="table">
<tr>
<th width="20%">No. Invoice</th>
<th>:</th>
<td>INVOICE-<?php echo $t['transaksi_id']; ?
></td>
</tr>
<tr>
<th>Nama Outlet</th>
<th>:</th>
<td><?php echo $t['outlet_nama']; ?></td>
</tr>
<tr>
<th width="20%">Tgl. Laundry</th>
<th>:</th>
<td><?php echo $t['transaksi_masuk']; ?></td>
</tr>
<tr>
<th>Nama Pelanggan</th>
<th>:</th>
<td><?php echo $t['transaksi_pelanggan']; ?
></td>
</tr>
<tr>
<th>HP</th>
<th>:</th>
<td><?php echo $t['pelanggan_telp']; ?></td>
</tr>
<tr>
<th>Alamat</th>
<th>:</th>
<td><?php echo $t['pelanggan_alamat']; ?></td>
</tr>
<tr>
<th>Berat Cucian (Kg)</th>
<th>:</th>
<td><?php echo $t['transaksi_berat']; ?></td>
</tr>
<tr>
<th>Jenis Paket</th>
<th>:</th>
<td><?php echo $t['paket_jenis']; ?></td>
</tr>
<tr>
<th>Tgl. Selesai</th>
<th>:</th>
<td><?php echo $t['transaksi_selesai']; ?></td>
</tr>
<tr>
<th>Total Harga</th>
<th>:</th>
<td><?php echo "Rp.
".number_format($t['transaksi_harga'])." ,-"; ?></td>
</tr>

<tr>
<th>Status Bayar</th>
<th>:</th>
<td>
<?php
if($t['transaksi_bayar']=="belum"){
danger'>BELUM BAYAR</div>";
}else
if($t['transaksi_status']=="lunas"){
success'>SUDAH LUNAS</div>";
}
?>
</td>
</tr>
<tr>
<th>Status Jasa</th>
<th>:</th>
<td>
<?php
if($t['transaksi_status']=="proses"){
warning'>PROSES</div>";
}else
if($t['transaksi_status']=="selesai"){
info'>SELESAI</div>";
}else
if($t['transaksi_status']=="diambil"){
success'>DIAMBIL</div>";
}
?>
</td>
</tr>
</table>
<br/>
<h4 class="text-center">Daftar Cucian</h4>

<table class="table table-bordered table-striped">
<tr>
<th width="20%">Jumlah</th>
</tr>
<?php
// menyimpan id transaksi ke variabel id_transaksi
$id = $t['transaksi_id'];
// menampilkan pakaian-pakaian dari transaksi yang ber

id di atas
$pakaian = mysqli_query($koneksi,"select * from
tb_pakaian where pakaian_transaksi='$id'");
while($p=mysqli_fetch_array($pakaian)){

?>
<tr>
<td><?php echo $p['pakaian_jenis']; ?
></td>
<td width="5%"><?php echo
$p['pakaian_jumlah']; ?></td>
</tr>
<?php } ?>
</table>
<br/>
<p><center><i>" Terima kasih telah mempercayakan
cucian anda pada kami ".</i></center></p>
<?php
}
?>
</div>
</div>


<script type="text/javascript">
function printPage() {
window.print();
}
</script>
</body>
</html>
Perhatikan pada sourcecode transaksi_invoice.php diatas, terlihat jika untuk

melakukan percetakan halaman kita perlu membuat tampilan halaman yang akan dicetak.
Untuk itu maka pada invoice ini kita membuat sebuah file dengan tampilan tertentu. Jika kita
jalankan maka hasilnya adalah sebagai berikut.

Gambar 7. Tampilan Halaman Transaksi Invoice

Ketika mengakses fitur invoice maka aplikasi akan mengarahkan user tampilan
halaman baru (new tab). Halaman baru yang muncul itulah nanti yang akan dicetak. Untuk
melakukan cetak maka bisa dengan cara klik pada tombol cetak yang terdapat pada halaman
invoice. Bagaimana cara kerja dari tombol cetak tersebut?Silakan simak penjelasan berikut
ini.

<a href="#" onclick="printPage()" class="btn btn-primary pull-right hidden-print"><i
class="glyphicon glyphicon-print"></i> CETAK</a>
Pada saat mengakses tombol cetak, sebenarnya kita diarahkan untuk memanggil
function javascript yang terdapat didalam file invoice. Function tersebut adalah sebuah
function untuk menggunakan print dari browser yang digunakan untuk membuka aplikasi
project ini. Jika diperhatikan pada syntax diatas kita mengarahkan tombol untuk mengakses
function “printPage()”. Dimana function tersebut berisikan syntax sebagai berikut.


<script type="text/javascript">
function printPage() {
window.print();
}
</script>
Perhatikan pada syntax diatas, ketika mengakses function printPage() maka program
akan menjalankan perintah javascript yaitu window.print(). Perintah tersebut adalah
menggunakan fitur print pada browser dengan javascript. Jika dijalankan maka hasilnya
adalah sebagai berikut.

Gambar 8. Tampilan Fitur Cetak Invoice
Aplikasi akan menampilkan tampilan default print dari browser yang kita gunakan
untuk mengakses project kita. Dengan cara seperti ini kita telah melakukan pembuatan fitur
print secara sederhana, adapun cara lainnya semisal mengubah cetak menjadi download
dalam file bentuk lain semisal pdf akan kita coba pada materi saat membuat fitur laporan pada
modul berikutnya. Untuk kali ini, jika aplikasi yang kalian buat sudah sampai pada fitur cetak
invoice transaksi maka materi pada modul kali ini sudah selesai dikerjakan semua. Silakan
pahami dan teliti cara kerja dari aplikasi yang dikembangkan beserta sourcecodenya.
__Selamat Belajar dan Berkarya__

Membuat Fitur Transaksi

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Fitur Transaksi

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Membuat Fitur Transaksi

B. Menampilkan Data Transaksi

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

Bait Syaiful Rijal, M.Pd | 1

Bait Syaiful Rijal, M.Pd | 2

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

Gambar 1. Tampilan Halaman Transaksi

Bait Syaiful Rijal, M.Pd | 3

Gambar 2. Hasil tampilan transaksi secara default

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

C. Menambahkan Data Transaksi pada Database

Bait Syaiful Rijal, M.Pd | 4

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

// mengambil data dari database

<form action="transaksi_addAction" method="post" enctype="multipart/form-

<option disabled selected> -- Pilih Outlet --</option>

<?php while ($d = mysqli_fetch_array($outlet)) { ?>

<option value="<?php echo $d['outlet_id'] ?>"><?php echo

<option disabled selected> -- Pilih User --</option>

<?php while ($d = mysqli_fetch_array($user)) { ?>

Bait Syaiful Rijal, M.Pd | 5

<option value="<?php echo $d['user_id'] ?>"><?php echo

<option disabled selected> -- Pilih Pelanggan --</option>

<?php while ($d = mysqli_fetch_array($pelanggan)) { ?>

<option value="<?php echo $d['pelanggan_id'] ?>"><?php echo

<option disabled selected> -- Pilih Jenis Paket --</option>

<?php while ($d = mysqli_fetch_array($paket)) { ?>

<option value="<?php echo $d['paket_id'] ?>"><?php echo

Bait Syaiful Rijal, M.Pd | 6

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

Bait Syaiful Rijal, M.Pd | 7

$('#dinamis').on('click', '.delete-row', function () {

Gambar 3. Tampilan Halaman Transaksi Add

Bait Syaiful Rijal, M.Pd | 8

<table class="table table-hover" id="dinamis">

Gambar 4. Tampilan Multiform Dinamis untuk Daftar Pakaian

//mengambil data dari form tansaksi add

Bait Syaiful Rijal, M.Pd | 9

//membuat perhitungan total bayar

//melakukan perintah sql input data transasi pada tabel transaksi

//mengarahkan kembali ke halaman transaksi dengan pesan berhasil menambahkan data

//membuat aksi input pada data detail pakaian

//membaca id transaksi sesuai record input terakhir

//mengambil data dari form detail transaksi pakaian

// input data cucian berdasarkan id transaksi ke table pakaian

Perhatikan pada sourcecode diatas, dalam file transaksi_addAction.php kita

Bait Syaiful Rijal, M.Pd | 10

$id_terakhir = mysqli_insert_id($koneksi);bertujuan untuk mendapatkan id terakhir yang

<form action="transaksi_addAction" method="post" enctype="multipart/form-data">

D. Membuat Edit dan Update Data Transaksi

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

<div class="col-md-8 col-md-offset-2">

<form action="transaksi_update" method="post" enctype="multipart/form-

Bait Syaiful Rijal, M.Pd | 11

$pelanggan = mysqli_query($koneksi, "select * from tb_pelanggan");

<?php while ($l = mysqli_fetch_array($outlet)) { ?>

<option <?php if($d['transaksi_outlet'] == $l['outlet_id'])

<?php while ($l = mysqli_fetch_array($pelanggan)) { ?>

<option <?php if($d['transaksi_pelanggan'] ==

<?php while ($l = mysqli_fetch_array($paket)) { ?>

Selamat Belajar dan Berkarya