Hallo teman teman semua gimana kabar hari ini?, semoga temen temen semuanya baik baik saja. Pada kesempatan kali ini saya akan berbagi source code Membuat Program Transaksi menggunakan PHP 7 dan JQUERY penjualan sampai dengan kita mencetak struk penjualan setelah transaksi sudah berhasil.
Pada kali ini saya tidak akan meperhatikan tampilan desain pada web, saya rasa teman teman jauh lebih hebat untuk membuat desain pada web, saya harapkan setelah berhasil melakukan program ini bisa memperbaiki tampilanya menjadi bagus.
Oke mari langsung saja kita mulai, Pertama kita buat database terlebih dahulu dengan nama
“kedai_bakso”, ini nama contoh saja ya kalau kalian punya nama yang lain silahkan saja.
Setelah membuat database, kita buat tabel, buat tabel sebagai berikut :
Buat Tabel user isikan fieldnya sebagai berikut :
lalu isikan tabel user sebagai berikut, password isi semabarang saja :
Buat Tabel masakan lalu isikan field sebagai berikut :
Setelah itu isikan apa saja yang kalian suka suka.
Buat Tabel transaksi lalu isikan field sebagai berikut :
Buat Tabel detail_transaksi isikan fieldnya sebagai berikut :
Setelah tabel telah selesai di buat, kita buat Trigger yang otomotasi mengurangi stok kalau berhasil transaksi dan akan menambahkan kembali jika tranasaksi dibatalkan, masukan kode berikut kedalama sql :
[html]
DELIMITER $$
CREATE TRIGGER `batal_transaksi` AFTER DELETE ON `detail_transaksi` FOR EACH ROW BEGIN
UPDATE masakan SET stok = stok + OLD.qty
WHERE id_masakan = OLD.id_masakan;
END
$$
DELIMITER ;
DELIMITER $$
CREATE TRIGGER `tambah_transaksi` AFTER INSERT ON `detail_transaksi` FOR EACH ROW BEGIN
UPDATE masakan SET stok = stok – NEW.qty
WHERE id_masakan = NEW.id_masakan;
END
$$
DELIMITER ;
[/html]
Database semuanya telah selesai mari kita ke bagian yang paling seru, yaitu codingan. Sebelum kita memulai karena kita menggunakan library jquery maka harus kita download terlebih dahulu kalian bisa kunjungi link ini https://code.jquery.com/jquery-3.4.1.min.js setelah itu kalian akan dibawa halaman lain yang banyak code code, jangan panik dulu, tekan CTRL + S, lalu beri nama jquery.js.
Setelah selesai diatas, kita buat folder di htdocs dengan nama “transaksi” kalian boleh beri nama apa saja asalkan nanti kalian bisa mengintanya. Lalu copykan jquery.js kedalam folder transaksi yang sudah dibuat.
Buat file koneksi.php lalu isikan sebagai berikut :
[html]
<?php
$koneksi = mysqli_connect("localhost","root","","kedai_bakso");
?>
[/html]
Buat file index.php lalu isikan sebagai berikut :
[html]
<?php include ‘koneksi.php’;
$sql = "SELECT * FROM transaksi ORDER BY id_transaksi DESC LIMIT 1";
$query = mysqli_query($koneksi, $sql);
$data = mysqli_fetch_array($query);
$no_transaksi = $data[‘id_transaksi’] + 1;
$sql = "SELECT * FROM user WHERE username = ‘kasir’";
$query = mysqli_query($koneksi, $sql);
$data = mysqli_fetch_array($query);
$nama = $data[‘nama_user’];
$id_user = $data[‘id_user’];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transaksi</title>
</head>
<body>
<label for="no_transaksi">No Transaksi :</label>
<input type="text" value="<?= $no_transaksi ?>" name="no_transaksi" id="no_transaksi" disabled>
<label for="nama_user">Nama User</label>
<input type="hidden" name="id_user" id="id_user" value="<?= $id_user ?>">
<input type="text" name="nama_user" id="nama_user" value="<?= $nama; ?>" disabled>
<label for="tanggal">Tanggal</label>
<input type="text" name="tanggal" id="tanggal" value="<?= date(‘Y-m-d’) ?>" disabled>
<p>
<label for="bayar">Total Bayar</label>
<input type="number" id="bayar" disabled>
<button id="bayar_transaksi">Bayar</button>
<button id="batal_transaksi">Batal</button>
</p>
<p>
<label for="tanggal">Pilih Masakan</label>
<select name="nama_masakan" id="nama_masakan">
<option value="0">– Pilih Masakan –</option>
<?php
$no = 1;
$qry = mysqli_query($koneksi, "SELECT * FROM masakan");
while ($data=mysqli_fetch_array($qry)) {
?>
<option data="<?= $data[‘nama_masakan’] ?>" value="<?= $data[‘id_masakan’] ?>">
<?= $data[‘nama_masakan’] ?>
</option>
<?php }
?>
</select>
<label for="jumlah">Jumlah</label>
<input type="number" name="jumlah" id="jumlah">
</p>
<p>
<label for="harga">Harga</label>
<input type="number" name="harga" id="harga" disabled>
<label for="total">Total</label>
<input type="number" name="total" id="total" disabled>
</p>
<p>
<button id="proses">Proses</button>
</p>
<h3>List Pesanan</h3>
<table border="1" width="60%">
<thead>
<tr>
<td>No</td>
<td>Nama Masakan</td>
<td>Harga</td>
<td>Jumlah</td>
<td>Total</td>
</tr>
</thead>
<tbody id="list_pesan">
</tbody>
</table>
<script src="jquery.js"></script>
<script>
$(function () {
$(‘#nama_masakan’).on(‘click’, function () {
let id_masakan = $(‘#nama_masakan option:selected’).attr(‘value’);
let nama_masakan = $(‘#nama_masakan option:selected’).attr(‘data’);
$.ajax({
url: ‘http://localhost/transaksi/getMasakan.php’,
data: {
id: id_masakan,
nama_masakan: nama_masakan
},
type: ‘json’,
method: ‘post’,
success: function (data) {
$(‘#harga’).val(data);
}
})
})
$(‘#jumlah’).on(‘change’, function () {
let harga = $(‘#harga’).val();
let jumlah = $(‘#jumlah’).val();
let total = harga * jumlah;
$(‘#total’).val(total);
})
let bayar_kasir = 0;
let order = [];
let no = 1;
$(‘#proses’).on(‘click’, function () {
let list = [];
// Mengambil nilai input
let id_transaksi = $(‘#no_transaksi’).val();
let id_masakan = $(‘#nama_masakan option:selected’).attr(‘value’);
let nama_masakan = $(‘#nama_masakan option:selected’).attr(‘data’);
let harga = $(‘#harga’).val()
let jumlah = $(‘#jumlah’).val()
let total = parseInt($(‘#total’).val())
if (jumlah == "") {
alert("Isi Terlebih dahulu Pesanan");
} else {
$.ajax({
url: ‘http://localhost/transaksi/tambahDetail.php’,
data: {
id_transaksi: id_transaksi,
id_masakan: id_masakan,
nama_masakan: nama_masakan,
harga: harga,
jumlah: jumlah,
total: total,
},
method: ‘post’,
dataType: ‘json’,
success: function (data) {
console.log(data);
}
})
// Menambahkna ke array list
list.push({
‘id_masakan’: id_masakan,
‘nama_masakan’: nama_masakan,
‘harga’: harga,
‘jumlah’: jumlah,
‘total’: total
});
// Otomotis menjumlahkan total bayar
bayar_kasir += total;
$(‘#bayar’).val(bayar_kasir);
// Melakukan pengulangan di list pesanan
$.each(list, function (i, data) {
$(‘#list_pesan’).append(`
<tr>
<td>` + no++ + `</td>
<td>` + data.nama_masakan + `</td>
<td>` + data.harga + `</td>
<td>` + data.jumlah + `</td>
<td>` + data.total + `</td>
</tr>
`)
})
// Menghapus nilai
$(‘#nama_masakan’).val("")
$(‘#harga’).val("");
$(‘#jumlah’).val("");
$(‘#total’).val("")
}
})
$(‘#batal_transaksi’).on(‘click’, function () {
let id_transaksi = $(‘#no_transaksi’).val();
let total_bayar = $(‘#bayar’).val();
if (total_bayar == "") {
alert("Tambah menu terlebih dahulu");
console.log("oke")
} else {
$.ajax({
url: ‘http://localhost/transaksi/batalTransaksi.php’,
data: {
id_transaksi: id_transaksi
},
method: ‘post’,
dataType: ‘json’,
success: function (data) {
}
})
alert("Transaksi Berhasil dibatalkan");
window.location.reload();
}
})
$(‘#bayar_transaksi’).on(‘click’, function () {
let id_user = $(‘#id_user’).val();
let id = $(‘#no_transaksi’).val();
let total_bayar = $(‘#bayar’).val();
if (total_bayar == "") {
alert("Tambah Menu Terlebih dahulu")
} else {
$.ajax({
url: ‘http://localhost/transaksi/bayarTransaksi.php’,
data: {
id_user: id_user,
total_bayar: total_bayar
},
method: ‘post’,
dataType: ‘json’,
success: function (data) {
}
})
alert("Berhasil Menambahkan Transaksi");
window.location.reload();
window.location.href = ‘http://localhost/transaksi/print.php?id=’ + id
}
})
})
</script>
</body>
</html>
[/html]
Catatan Penting !!!!!!!!!
[html]
$.ajax({
url: ‘http://localhost/transaksi/bayarTransaksi.php’,
data: {
id_user: id_user,
total_bayar: total_bayar
},
method: ‘post’,
dataType: ‘json’,
success: function (data) {
}
})
[/html]
ini.
[html]
<?php
include ‘koneksi.php’;
$id = $_POST[‘id’];
$sql = "SELECT * FROM masakan WHERE id_masakan = $id";
$query = mysqli_query($koneksi, $sql);
$data = mysqli_fetch_array($query);
echo $data[‘harga’];
?>
[/html]
Buat File tambahDetail.php isikan sebagai berikut :
[html]
<?php
include "koneksi.php";
$id_transaksi = $_POST[‘id_transaksi’];
$id_masakan = $_POST[‘id_masakan’];
$jumlah = $_POST[‘jumlah’];
$total = $_POST[‘total’];
$sql = "INSERT INTO `detail_transaksi`(`id_order`, `id_transaksi`, `id_masakan`, `qty`, `total`) VALUES
(NULL, $id_transaksi,$id_masakan,$jumlah,$total)";
$query = mysqli_query($koneksi, $sql);
?>
[/html]
[html]
<?php
include "koneksi.php";
$id_transaksi = $_POST[‘id_transaksi’];
$sql = "DELETE FROM detail_transaksi WHERE id_transaksi = ‘$id_transaksi’";
mysqli_query($koneksi, $sql);
?>
[/html]
[html]
<?php
include "koneksi.php";
$id_user = $_POST[‘id_user’];
$total_bayar = $_POST[‘total_bayar’];
$sql = "INSERT INTO `transaksi`(`id_transaksi`, `id_user`, `tanggal`, `total_bayar`) VALUES (NULL,$id_user, now(), $total_bayar)";
$query = mysqli_query($koneksi, $sql);
?>
[/html]
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2 style="text-align: center;">Bakso Sederhana</h2>
<p style="text-align: center;">Jalan Amburadul No. 123</p>
<?php
include "koneksi.php";
$id = $_GET[‘id’];
$sql = "SELECT * FROM transaksi INNER JOIN user ON transaksi.id_user=user.id_user WHERE transaksi.id_transaksi = ‘$id’";
$query = mysqli_query($koneksi, $sql);
while ($data=mysqli_fetch_array($query)) {
?>
<p style="text-align: center;">Nama Kasir : <?= $data[‘nama_user’]; ?></p>
<p style="text-align: center;">Tanggal : <?= $data[‘tanggal’]; ?></p>
<?php } ?>
<table align="center" width="50%" style="text-align: center;">
<thead>
<tr>
<td>No</td>
<td>Masakan</td>
<td>Harga</td>
<td>Jumlah</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<?php
$id = $_GET[‘id’];
$sql = "SELECT * FROM transaksi INNER JOIN user ON transaksi.id_user=user.id_user JOIN detail_transaksi ON transaksi.id_transaksi=detail_transaksi.id_transaksi JOIN masakan ON detail_transaksi.id_masakan = masakan.id_masakan WHERE transaksi.id_transaksi = ‘$id’";
$query = mysqli_query($koneksi, $sql);
$no = 1;
$jumlah = 0;
while ($data=mysqli_fetch_array($query)) { ?>
<tr>
<td><?= $no; ?></td>
<td><?= $data[‘nama_masakan’] ?></td>
<td><?= number_format($data[‘harga’]) ?></td>
<td><?= $data[‘qty’] ?></td>
<td><?= number_format($data[‘total’]) ?></td>
</tr>
<?php $jumlah += $data[‘total’]; $no++; } ?>
<tr>
<td colspan="4">Total Bayar</td>
<td>Rp. <?= number_format($jumlah); ?></td>
</tr>
</tbody>
</table>
<script>
window.print();
</script>
</body>
</html>
[/html]
kalian bisa dapat source code berikut di sini