KONEKSI.PHP
<?php
// Koneksi database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db_kantin";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Ambil database
$menu_items = [];
$sql = "SELECT id, menu_item, price, stock FROM kantin_menu ORDER BY menu_item";
$result = $conn->query($sql);
if ($result && $result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$menu_items[$row['id']] = [
'name' => $row['menu_item'],
'price' => $row['price'],
'stock' => $row['stock']
];
}
} else {
die("Menu belum tersedia di database.");
}
$message = "";
$ordered_items = [];
$total_price = 0.0;
// Proses submit "Pesan Semua"
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_order'])) {
$table_number = isset($_POST['table_number']) ? intval($_POST['table_number']) : 0;
$orders_json = isset($_POST['orders']) ? $_POST['orders'] : '[]';
$orders = json_decode($orders_json, true);
if ($table_number < 1 || $table_number > 10) {
$message = "Silakan pilih nomor meja yang valid.";
} elseif (empty($orders)) {
$message = "Pesanan kosong, silakan tambah pesanan terlebih dahulu.";
} else {
// Cek stok dan update stok
$can_process = true;
foreach ($orders as $order) {
$menu_id = $order['menu_id'];
$quantity = $order['quantity'];
if (!isset($menu_items[$menu_id])) {
$message = "Menu dengan ID $menu_id tidak tersedia.";
$can_process = false;
break;
}
$current_stock = $menu_items[$menu_id]['stock'];
if ($quantity > $current_stock) {
$message = "Stok tidak mencukupi untuk menu {$menu_items[$menu_id]['name']}. Stok tersisa: $current_stock.";
$can_process = false;
break;
}
}
if ($can_process) {
foreach ($orders as $order) {
$menu_id = $order['menu_id'];
$quantity = $order['quantity'];
$current_stock = $menu_items[$menu_id]['stock'];
$new_stock = $current_stock - $quantity;
$update_sql = "UPDATE kantin_menu SET stock = $new_stock WHERE id = $menu_id";
if (!$conn->query($update_sql)) {
$message = "Gagal memperbarui stok untuk menu ID $menu_id.";
$can_process = false;
break;
}
$price = $menu_items[$menu_id]['price'];
$item_total = $price * $quantity;
$total_price += $item_total;
$ordered_items[] = [
'name' => $menu_items[$menu_id]['name'],
'quantity' => $quantity,
'unit_price' => $price,
'total' => $item_total
];
$menu_items[$menu_id]['stock'] = $new_stock;
}
if ($can_process) {
$message = "Pesanan untuk Meja #$table_number berhasil diproses.";
}
}
}
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<title>Form Pemesanan Kantin</title>
<style>
body {
font-family: Arial, sans-serif;
position: center;
margin: 20px auto;
background-color: #f7f7f7;
padding: 20px;
border-radius: 8px;
}
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
select, input[type=number] {
width: 100%;
padding: 8px;
margin-top: 5px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 16px;
}
button {
margin-top: 20px;
background-color:rgb(105, 16, 16);
color: white;
border: none;
padding: 10px 15px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color:rgb(224, 28, 28);
}
.output {
margin-top: 25px;
background: white;
padding: 15px;
border-radius: 6px;
border: 1px solid #ddd;
}
.message {
margin-top: 15px;
font-weight: bold;
color: green;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
padding: 8px 10px;
border-bottom: 1px solid #ddd;
text-align: left;
}
th {
background: #f0f0f0;
}
</style>
</head>
<body>
<h2>Form Pemesanan Kantin</h2>
<form id="orderForm" method="POST" action="">
<label for="table_number">Nomor Meja:</label>
<select name="table_number" id="table_number" required>
<option value="">-- Pilih Nomor Meja --</option>
<?php
$selected_table = $_POST['table_number'] ?? '';
for ($i = 1; $i <= 10; $i++) {
$sel = ($selected_table == $i) ? "selected" : "";
echo "<option value=\"$i\" $sel>Meja $i</option>";
}
?>
</select>
<label for="menu_id">Pilih Menu:</label>
<select id="menu_id">
<option value="">-- Pilih Menu --</option>
<?php
foreach ($menu_items as $id => $item) {
$price_formatted = number_format($item['price'], 0, ",", ".");
echo "<option value=\"$id\">{$item['name']} - Rp {$price_formatted} (Stok: {$item['stock']})</option>";
}
?>
</select>
<label for="quantity">Jumlah:</label>
<input type="number" id="quantity" min="1" value="1" />
<button type="button" id="addItemBtn">Tambah Pesanan</button>
<button type="submit" name="submit_order">Pesan Semua</button>
<input type="hidden" name="orders" id="ordersInput" />
</form>
<?php if ($message): ?>
<div class="message"><?php echo htmlspecialchars($message); ?></div>
<?php endif; ?>
<?php if (!empty($ordered_items)): ?>
<div class="order-list-container">
<h3>Ringkasan Pesanan - Meja #<?php echo htmlspecialchars($selected_table); ?></h3>
<table>
<thead>
<tr>
<th>Menu</th>
<th>Qty</th>
<th>Harga Satuan (Rp)</th>
<th>Total (Rp)</th>
</tr>
</thead>
<tbody>
<?php foreach ($ordered_items as $order): ?>
<tr>
<td><?php echo htmlspecialchars($order['name']); ?></td>
<td><?php echo intval($order['quantity']); ?></td>
<td><?php echo number_format($order['unit_price'], 0, ",", "."); ?></td>
<td><?php echo number_format($order['total'], 0, ",", "."); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot>
<tr>
<th colspan="3" style="text-align:right;">Total Bayar (Rp)</th>
<th><?php echo number_format($total_price, 0, ",", "."); ?></th>
</tr>
</tfoot>
</table>
<div style="margin-top: 20px; text-align: center;">
<h4>QR Code Pembayaran</h4>
<?php
$qr_data = "Pembayaran Meja #$selected_table - Total Rp " . number_format($total_price, 0, ",", ".");
$qr_url = "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=" . urlencode($qr_data);
?>
<img src="<?php echo $qr_url; ?>" alt="QR Code Pembayaran" />
<p>Silakan scan untuk konfirmasi pembayaran</p>
</div>
</div>
<?php endif; ?>
<div class="order-list-container" style="display:none;" id="currentOrderList">
<h3>Daftar Pesanan Saat Ini</h3>
<table id="orderTable">
<thead>
<tr>
<th>Menu</th>
<th>Qty</th>
<th>Harga Satuan (Rp)</th>
<th>Total (Rp)</th>
<th>Aksi</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script>
const menuItems = <?php echo json_encode($menu_items); ?>;
const addItemBtn = document.getElementById('addItemBtn');
const menuSelect = document.getElementById('menu_id');
const quantityInput = document.getElementById('quantity');
const orderTableBody = document.querySelector('#orderTable tbody');
const currentOrderList = document.getElementById('currentOrderList');
const ordersInput = document.getElementById('ordersInput');
let orderList = [];
function renderOrderList() {
if (orderList.length === 0) {
currentOrderList.style.display = 'none';
ordersInput.value = '';
return;
}
currentOrderList.style.display = 'block';
orderTableBody.innerHTML = '';
let totalPrice = 0;
orderList.forEach((item, index) => {
const totalItem = item.unit_price * item.quantity;
totalPrice += totalItem;
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.name}</td>
<td>${item.quantity}</td>
<td>${item.unit_price.toLocaleString('id-ID')}</td>
<td>${totalItem.toLocaleString('id-ID')}</td>
<td><button type="button" data-index="${index}" class="removeBtn">Hapus</button></td>
`;
orderTableBody.appendChild(tr);
});
ordersInput.value = JSON.stringify(orderList);
}
addItemBtn.addEventListener('click', () => {
const menuId = menuSelect.value;
const quantity = parseInt(quantityInput.value);
if (!menuId) {
alert('Silakan pilih menu terlebih dahulu.');
return;
}
if (!quantity || quantity < 1) {
alert('Jumlah pemesanan minimal 1.');
return;
}
const stok = menuItems[menuId].stock;
if (quantity > stok) {
alert(`Stok tidak mencukupi. Stok tersisa: ${stok}`);
return;
}
const existingIndex = orderList.findIndex(item => item.menu_id == menuId);
if (existingIndex >= 0) {
if (orderList[existingIndex].quantity + quantity > stok) {
alert(`Jumlah total melebihi stok (${stok}).`);
return;
}
orderList[existingIndex].quantity += quantity;
} else {
orderList.push({
menu_id: menuId,
name: menuItems[menuId].name,
quantity: quantity,
unit_price: menuItems[menuId].price
});
}
renderOrderList();
});
orderTableBody.addEventListener('click', (e) => {
if (e.target.classList.contains('removeBtn')) {
const index = parseInt(e.target.getAttribute('data-index'));
orderList.splice(index, 1);
renderOrderList();
}
});
</script>
</body>
</html>
<?php $conn->close(); ?>
---------------------------------PHP INDEX
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kantin Sekolah</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
background-color: rgb(54, 9, 9);
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
color: white;
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-danger-subtle fixed-top" data-bs-theme="dark" >
<div class="container-lg">
<a class="navbar-brand" href="#"><i class="bi bi-fork-knife"></i>KanTEL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#About">ABOUT KANTIN</a>
<a class="nav-link" href="#Cafeteria">CAFETARIA LIST</a>
<a class="nav-link" href="#buy">HOW TO BUY</a>
<a class="nav-link" href="#contact">CONTACT US</a>
</div>
</div>
</div>
</nav>
<section class="container-lg mt-5 text-center" id="About">
<img src="assets/logo kantin.jpeg" class="img-fluid rounded" alt="About Kantin Sekolah">
<h1 class="mt-3"><i class="bi bi-fork-knife"></i>KanTEL</h1>
<br>
<div class="row">
<div class="col-md-6">
<img src="assets/foto kantin abt.jpg" class="img-fluid rounded" style="max-width: 500px; height: auto;" alt="fotokantin">
</div>
<div class="col-md-6">
<video controls src="assets/video kantin.mkv" style="max-width: 500px; height: auto;"></video>
</video>
</div>
</div>
<br>
<h3 class="text-justify">KanTEL adalah aplikasi yang dibuat untuk memudahkan siswa dalam melakukan pembelian makanan di kantin sekolah. Dengan KanTEL, siswa dapat melihat daftar menu yang tersedia, melakukan pemesanan, dan melakukan pembayaran secara online.</h3>
</section>
<br>
<section class="container-lg mt-5 text-center" id="Cafeteria">
<h2 class="mb-4 mt-5">Cafeteria List</h2>
<div class="row justify-content-center" style="margin-left: -7rem;">
<div class="col-md-4 mb-4">
<div class="card" style="width: 30rem; margin-bottom: 20px;">
<img src="assets/kantin_rika.jpg" class="card-img-top" alt="rika" height="300px">
<div class="card-body">
<h5 class="card-title">Kantin Bu Rika</h5>
<div class="card-text">
<ul style="list-style-type: none; padding: 0; margin: 0;">
<li>Nasi Goreng : 20.000</li>
<li>Mie Goreng : 15.000</li>
<li>Bihun Goreng : 17.000</li>
<li>Sambel Ijo : 5.000</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card" style="width: 30rem; margin-left: 70px;">
<img src="assets/kantin_batagor.jpg" class="card-img-top" alt="batagor" height="300px">
<div class="card-body">
<h5 class="card-title">Kantin Batagor</h5>
<div class="card-text">
<ul style="list-style-type: none; padding: 0; margin: 0;">
<li>Batagor premium : 16.000</li>
<li>Batagor classic : 5.000</li>
<li>Somay hahay : 10.000</li>
<li>Es kacang hijau : 5.000</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center" style="margin-left: -7rem;">
<div class="col-md-4 mb-4">
<div class="card" style="width: 30rem; margin-bottom: 20px;">
<img src="assets/kantin_eka.jpeg" class="card-img-top" alt="eka" height="300px">
<div class="card-body">
<h5 class="card-title">Kantin Bu Eka</h5>
<div class="card-text">
<ul style="list-style-type: none; padding: 0; margin: 0;">
<li>Roti Kejut : 5.000</li>
<li>Roti Coklat : 5.000</li>
<li>Roti strawberry : 10.000</li>
<li>Bolu pandan : 15.000</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card" style="width: 30rem; margin-left: 70px;">
<img src="assets/Kantin_riki.jpg" class="card-img-top" alt="riki" height="300px">
<div class="card-body">
<h5 class="card-title">Kantin Mas Riki</h5>
<div class="card-text">
<ul style="list-style-type: none; padding: 0; margin: 0;">
<li>Nasi ayam : 15.000</li>
<li>Nasi Ikan : 15.000</li>
<li>Sayur Capcay : 10.000</li>
<li>Es Teh : 5.000</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<br>`
<br>
<section class="container-lg mt-5 text-center" id="buy">
<div class="container mt-4">
<div class="d-flex justify-content-center">
<div class="card" style="width: 300rem; margin-bottom: 20px;">
<div class="card-body">
<?php include 'koneksi.php'; ?>
</div>
</div>
</div>
</div>
</section>
<section class="container mt-5 mb-5" id="contact">
<h2 style="text-align: center;">CONTACT ME</h2>
<div class="d-flex justify-content-center">
<div class="card shadow" style="width: 300rem;">
<div class="card-body">
<h4 class="card-title mb-4 text-center">Hubungi Kami</h4>
<form action="submit_form.php" method="POST">
<div class="mb-3">
<label for="nama" class="form-label">Nama</label>
<input type="text" class="form-control" id="nama" name="nama" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="pesan" class="form-label">Pesan</label>
<textarea class="form-control" id="pesan" name="pesan" rows="4" required></textarea>
</div>
<button type="submit" class="btn w-100" style="background-color: rgb(105, 16, 16); border-color: rgb(105, 16, 16); color: white">
Kirim
</button>
</form>
</div>
</div>
</div>
</section>
<footer>
<p class="mb-0">© 2025 raditya ramzy</p>
</footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
</html>
Komentar
Posting Komentar