Jika Anda ingin membuat sistem transaksi penjualan menggunakan PHP, MySQL, dan AJAX, berikut adalah langkah-langkah utamanya:
1. Struktur Database (MySQL)
Buat database dan tabel untuk menyimpan data penjualan.
sqlSalinEditCREATE DATABASE penjualan_db;
USE penjualan_db;
CREATE TABLE produk (
id INT AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR(100),
harga INT,
stok INT
);
CREATE TABLE transaksi (
id INT AUTO_INCREMENT PRIMARY KEY,
tanggal TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
total INT
);
CREATE TABLE transaksi_detail (
id INT AUTO_INCREMENT PRIMARY KEY,
transaksi_id INT,
produk_id INT,
jumlah INT,
subtotal INT,
FOREIGN KEY (transaksi_id) REFERENCES transaksi(id),
FOREIGN KEY (produk_id) REFERENCES produk(id)
);
2. Tampilan Frontend (HTML + jQuery AJAX)
Buat tampilan sederhana untuk memilih produk dan melakukan transaksi.
htmlSalinEdit<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transaksi Penjualan</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Transaksi Penjualan</h2>
<label>Pilih Produk:</label>
<select id="produk">
<!-- Data produk akan di-load dengan AJAX -->
</select>
<input type="number" id="jumlah" placeholder="Jumlah" min="1">
<button onclick="tambahProduk()">Tambah</button>
<h3>Keranjang</h3>
<table border="1">
<thead>
<tr>
<th>Nama Produk</th>
<th>Harga</th>
<th>Jumlah</th>
<th>Subtotal</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="keranjang">
<!-- Produk yang dipilih akan muncul di sini -->
</tbody>
</table>
<h3>Total: Rp <span id="total">0</span></h3>
<button onclick="simpanTransaksi()">Simpan Transaksi</button>
<script>
$(document).ready(function(){
loadProduk();
});
function loadProduk() {
$.ajax({
url: "get_produk.php",
type: "GET",
success: function(response) {
$("#produk").html(response);
}
});
}
let keranjang = [];
function tambahProduk() {
let idProduk = $("#produk").val();
let jumlah = parseInt($("#jumlah").val());
if (idProduk && jumlah > 0) {
$.ajax({
url: "get_produk.php",
type: "POST",
data: { id: idProduk },
dataType: "json",
success: function(data) {
let subtotal = data.harga * jumlah;
keranjang.push({ id: idProduk, nama: data.nama, harga: data.harga, jumlah, subtotal });
updateKeranjang();
}
});
}
}
function updateKeranjang() {
let html = "";
let total = 0;
keranjang.forEach((item, index) => {
html += `<tr>
<td>${item.nama}</td>
<td>${item.harga}</td>
<td>${item.jumlah}</td>
<td>${item.subtotal}</td>
<td><button onclick="hapusItem(${index})">Hapus</button></td>
</tr>`;
total += item.subtotal;
});
$("#keranjang").html(html);
$("#total").text(total);
}
function hapusItem(index) {
keranjang.splice(index, 1);
updateKeranjang();
}
function simpanTransaksi() {
$.ajax({
url: "simpan_transaksi.php",
type: "POST",
data: { keranjang: JSON.stringify(keranjang) },
success: function(response) {
alert(response);
keranjang = [];
updateKeranjang();
}
});
}
</script>
</body>
</html>
3. Backend (PHP)
Mendapatkan Data Produk (get_produk.php)
phpSalinEdit<?php
$conn = new mysqli("localhost", "root", "", "penjualan_db");
if ($_SERVER['REQUEST_METHOD'] == "GET") {
$result = $conn->query("SELECT * FROM produk");
$output = "";
while ($row = $result->fetch_assoc()) {
$output .= "<option value='".$row['id']."'>".$row['nama']." - Rp".$row['harga']."</option>";
}
echo $output;
}
if ($_SERVER['REQUEST_METHOD'] == "POST") {
$id = $_POST['id'];
$result = $conn->query("SELECT * FROM produk WHERE id = $id");
echo json_encode($result->fetch_assoc());
}
?>
Menyimpan Transaksi (simpan_transaksi.php)
phpSalinEdit<?php
$conn = new mysqli("localhost", "root", "", "penjualan_db");
if ($_SERVER['REQUEST_METHOD'] == "POST") {
$data = json_decode($_POST['keranjang'], true);
$total = array_sum(array_column($data, 'subtotal'));
$conn->query("INSERT INTO transaksi (total) VALUES ($total)");
$transaksi_id = $conn->insert_id;
foreach ($data as $item) {
$conn->query("INSERT INTO transaksi_detail (transaksi_id, produk_id, jumlah, subtotal)
VALUES ($transaksi_id, ".$item['id'].", ".$item['jumlah'].", ".$item['subtotal'].")");
$conn->query("UPDATE produk SET stok = stok - ".$item['jumlah']." WHERE id = ".$item['id']);
}
echo "Transaksi berhasil disimpan!";
}
?>
4. Penjelasan
- Database MySQL:
produkmenyimpan daftar barang.transaksimenyimpan total transaksi.transaksi_detailmencatat produk dalam setiap transaksi.
- Frontend (HTML + AJAX):
- Mengambil data produk (
get_produk.php). - Menambahkan produk ke dalam keranjang (array JavaScript).
- Menghapus produk dari keranjang.
- Menyimpan transaksi (
simpan_transaksi.php).
- Mengambil data produk (
- Backend (PHP):
get_produk.phpmenyediakan data produk.simpan_transaksi.phpmenyimpan transaksi ke database.
Ini adalah sistem transaksi penjualan sederhana dengan PHP, MySQL, dan AJAX. Anda bisa mengembangkannya dengan fitur tambahan seperti autentikasi user, cetak struk, laporan penjualan, dll.
Leave a Reply