Belajar PHP - Pada artikel kali ini kita akan membuat shopping cart atau keranjang belanja dengan PHP, Bootstrap dan MySQL.
Shopping cart yang akan kita buat memiliki fungsi sebagai berikut:
- Mengambil data produk dari database
- Menampilkan daftar produk
- Mengelola item dikeranjang belanja menggunakan array dan session
- Menambahkan item, ubah jumlah pembelian dan hapus item pada keranjang belanja
- Menghitung total item dan total bayar
- Menyimpan data belanja kedalam database
- Menampilkan laporan dan detail order
Okeh.. Langsung saja kita mulai.
Database
Pertama, buat database dengan nama shopping-cart, lalu pilih menu SQL dan pastekan kode berikut untuk membuat tabel beserta datanya.
Karena kita akan menggunakan Bootstrap jadi kita perlu memanggil librarynya, disini kita akan pisahkan menjadi bagian header dan footer yang masing - masing ditampung dalam file header.php dan footer.php.
Output:
CREATE TABLE `tb_detail_order` (
`id_detail` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`id_order` int(11) NOT NULL,
`id_produk` int(11) NOT NULL,
`pembelian` int(11) NOT NULL
);
-- --------------------------------------------------------
--
-- Table structure for table `tb_order`
--
CREATE TABLE `tb_order` (
`id_order` int(10) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
`total_item` int(11) NOT NULL,
`total_bayar` float NOT NULL,
`tgl_transaksi` date NOT NULL
);
-- --------------------------------------------------------
--
-- Table structure for table `tb_produk`
--
CREATE TABLE `tb_produk` (
`id` int(10) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
`nama_produk` varchar(50) NOT NULL,
`harga` float NOT NULL,
`stok` int(11) NOT NULL
);
--
-- Dumping data for table `tb_produk`
--
INSERT INTO `tb_produk` (`id`, `nama_produk`, `harga`, `stok`) VALUES
(1, 'Sony1', 100000, 2),
(2, 'Apple1', 200000, 3),
(3, 'Samsung1', 300000, 4),
(4, 'Apple2', 400000, 5);
koneksi.php
Kita buat koneksinya difile terpisah.
<?php
$conn = mysqli_connect('localhost', 'root', '', 'shopping-cart');
if (!$conn) {
die ("Koneksi gagal. " . mysqli_connect_error()); // close koneksi
}
Karena kita akan menggunakan Bootstrap jadi kita perlu memanggil librarynya, disini kita akan pisahkan menjadi bagian header dan footer yang masing - masing ditampung dalam file header.php dan footer.php.
header.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Shopping Cart</title>
</head>
<body>
footer.php
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
index.php
Didalam file ini berisi kode untuk menampilkan daftar produk dan kode untuk menambahkan produk kedalam keranjang belanja atau shopping cart.
<?php
session_start();
$conn = mysqli_connect('localhost', 'root', '', 'shopping-cart');
if (!$conn) {
die ("Koneksi gagal. " . mysqli_connect_error()); // close koneksi
}
if (!isset($_GET['cari'])) {
$query = mysqli_query($conn, "SELECT * FROM tb_produk");
} else {
$query = mysqli_query($conn, "SELECT * FROM tb_produk WHERE nama_produk LIKE '%" . $_GET['cari'] . "%'");
}
require_once 'header.php';
if (isset($_SESSION['pesan'])) {
echo '<div class="alert alert-warning alert-dismissible fade show" role="alert">
' . $_SESSION['pesan'] . '
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>';
unset($_SESSION['pesan']);
}
?>
<div class="container mt-5">
<?php require_once 'cart.php'; ?>
<div class="row mb-2">
<div class="col">
<h4>Daftar Produk</h4>
</div>
<div class="col">
<form class="form-inline pull-right" action="" method="GET">
<div class="form-group mx-sm-3 mb-2">
<input type="text" name="cari" class="form-control" placeholder="Cari Produk">
</div>
<button type="submit" class="btn btn-success mb-2">Cari</button>
</form>
</div>
</div>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Nama Produk</th>
<th scope="col">Harga</th>
<th scope="col">Stok</th>
<th scope="col">Pembelian</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
while ($dt = $query->fetch_assoc()) :
?>
<form method="POST" action="<?= $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="id_produk" value="<?= $dt['id']; ?>"></input>
<tr>
<th scope="row"><?= $no++; ?></th>
<td><?= $dt['nama_produk']; ?></td>
<td><?= $dt['harga']; ?></td>
<td><?= $dt['stok']; ?></td>
<td width="106">
<input class="form-control form-control-sm" type="number" name="pembelian" value="1" min="1" max="<?= $dt['stok']; ?>"></td>
<td>
<button class="btn btn-primary btn-sm" type="submit" name="submit">
<i class="fa fa-shopping-cart"></i>
</button>
</td>
</tr>
</form>
<?php endwhile; ?>
</tbody>
</table>
<a href="laporan.php"><button class="btn btn-danger">Lihat Laporan</button></a>
</div>
<?php require_once 'footer.php'; ?>
Output:
cart.php
File ini berisi kode untuk mengelola data produk yang masuk ke keranjang belanja. Kita akan menggunakan session untuk menyimpan dan mengelola item dalam keranjang belanja.
<?php
if (isset($_POST['id_produk'], $_POST['pembelian'])) {
$id = $_POST['id_produk'];
$pembelian = $_POST['pembelian'];
$produk = mysqli_query($conn, "SELECT * FROM tb_produk WHERE id = '$id'");
$dt_produk = $produk->fetch_assoc();
if (!isset($_SESSION['cart'])) $_SESSION['cart'] = [];
$index = -1;
$cart = unserialize(serialize($_SESSION['cart']));
// jika produk sudah ada dalam cart maka pembelian akan diupdate
for ($i=0; $i<count($cart); $i++) {
if ($cart[$i]['id_produk'] == $id) {
$index = $i;
$_SESSION['cart'][$i]['pembelian'] = $pembelian;
break;
}
}
// jika produk belum ada dalam cart
if ($index == -1) {
$_SESSION['cart'][] = [
'id_produk' => $id,
'nama_produk' => $dt_produk['nama_produk'],
'harga' => $dt_produk['harga'],
'pembelian' => $pembelian
];
}
}
if (!empty($_SESSION['cart'])) {
?>
<h4>Daftar Belanja Anda</h4>
<br>
<table class="table table-bordered">
<tr align="center">
<th>#</th>
<th>Nama Produk</th>
<th>Pembelian</th>
<th>Harga</th>
<th>Total</th>
<th>Aksi</th>
</tr>
<?php
if(isset($_SESSION['cart'])) {
$cart = unserialize(serialize($_SESSION['cart']));
$index = 0;
$no = 1;
$total = 0;
$total_bayar = 0;
for ($i=0; $i<count($cart); $i++) {
$total = $_SESSION['cart'][$i]['harga'] * $_SESSION['cart'][$i]['pembelian'];
$total_bayar += $total;
?>
<tr>
<td align="center"><?= $no++; ?></td>
<td><?= $cart[$i]['nama_produk']; ?></td>
<td align="center"><?= $cart[$i]['pembelian']; ?></td>
<td><?= $cart[$i]['harga']; ?></td>
<td><?= $total; ?></td>
<td align="center">
<a href="?index=<?= $index; ?>">
<button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
</a>
</td>
</tr>
<?php
$index++;
}
// hapus produk dalam cart
if(isset($_GET['index'])) {
$cart = unserialize(serialize($_SESSION['cart']));
unset($cart[$_GET['index']]);
$cart = array_values($cart);
$_SESSION['cart'] = $cart;
}
}
?>
<tr>
<td colspan="4" align="right"><strong>Total Bayar</strong></td>
<td><strong><?= $total_bayar; ?></strong></td>
<td align="center">
<a href="transaksi.php">
<button class="btn btn-success btn-sm">Checkout</button>
</a>
</td>
</tr>
</table>
<br><hr>
<?php
}
if (isset($_GET['index'])) {
header('Location: index.php');
}
?>
Output:
transaksi.php
File ini digunakan untuk menyimpan data dari tabel keranjang belanja ke database dan mengakhiri session. Setelah session berakhir, item dikeranjang akan dihapus.<?php
session_start();
require_once 'koneksi.php';
if (!isset($_SESSION['cart'])) {
header('Location: index.php');
}
$cart = unserialize(serialize($_SESSION['cart']));
$total_item = 0;
$total_bayar = 0;
for ($i=0; $i<count($cart); $i++) {
$total_item += $cart[$i]['pembelian'];
$total_bayar += $cart[$i]['pembelian'] * $cart[$i]['harga'];
}
// proses penyimpanan data
$query = mysqli_query($conn, "INSERT INTO tb_order (total_item, total_bayar, tgl_transaksi) VALUES ('$total_item', '$total_bayar', '" . date('Y-m-d') . "')");
$id_order = mysqli_insert_id($conn);
for ($i=0; $i<count($cart); $i++) {
$id_produk = $cart[$i]['id_produk'];
$pembelian = $cart[$i]['pembelian'];
$query = mysqli_query($conn, "INSERT INTO tb_detail_order (id_order, id_produk, pembelian) VALUES ('$id_order', '$id_produk', '$pembelian')");
}
// unset session
unset($_SESSION['cart']);
$_SESSION['pesan'] = "Pembelian sedang diproses, terimakasih.";
header('Location: index.php');
laporan.php
Pada halaman laporan akan menampilkan data transaksi keseluruhan, dan ada link untuk melihat detail barang yang dipesan apabila kita ingin melihatnya.
<?php
require_once 'koneksi.php';
require_once 'header.php';
?>
<div class="container mt-5">
<h4>Laporan Transaksi</h4>
<br>
<a href="index.php">
<button class="btn btn-success btn-sm">
Transaksi
</button>
</a>
<table class="table table-bordered mt-3">
<thead align="center">
<tr>
<th>#</th>
<th>Tgl. Transaksi</th>
<th>Total Item</th>
<th>Total Bayar</th>
<th>Aksi</th>
</tr>
</thead>
<tbody align="center">
<?php
$query = mysqli_query($conn, "SELECT * FROM tb_order");
$no = 1;
while ($dt = $query->fetch_assoc()) :
?>
<tr>
<td><?= $no++; ?></td>
<td><?= $dt['tgl_transaksi']; ?></td>
<td><?= $dt['total_item']; ?></td>
<td><?= $dt['total_bayar']; ?></td>
<td>
<a href="detail_order.php?id_order=<?= $dt['id_order']; ?>">Detail Order</a>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
<?php require_once 'footer.php'; ?>
Output:
detail_order.php
File inilah yang berisi kode untuk menampilkan data detail order.
<?php
require_once 'koneksi.php';
require_once 'header.php';
if (!isset($_GET['id_order'])) {
header('Location: laporan.php');
}
?>
<div class="container mt-5">
<h4>Detail Order</h4>
<br>
<a href="laporan.php">
<button class="btn btn-success btn-sm">
<i class="fa fa-arrow-left"></i> Kembali
</button>
</a>
<table class="table table-bordered mt-3">
<thead align="center">
<tr>
<th>#</th>
<th>Nama Produk</th>
<th>Harga</th>
<th>Pembelian</th>
</tr>
</thead>
<tbody>
<?php
$query = mysqli_query($conn, "SELECT * FROM `tb_detail_order` INNER JOIN tb_produk ON tb_detail_order.id_produk = tb_produk.id WHERE id_order = '$_GET[id_order]'");
$no = 1;
while($detail = $query->fetch_assoc()) :
?>
<tr>
<td align="center"><?= $no++; ?></td>
<td><?= $detail['nama_produk']; ?></td>
<td><?= $detail['harga']; ?></td>
<td align="center"><?= $detail['pembelian']; ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
Output:
Dan itu saja tentang cara membuat shopping cart dengan PHP, Bootstrap dan MySQL. Apabila ada pertanyaan silahkan tulis dikolom komentar dibawah.
Kalian bisa download source codenya disini. Terimakasih.
2 Komentar
checkout nya pake whatsapp bisa ngga ka ?
BalasHapusPermisi ka mw tanya, untuk penjelasan dari cart.php itu apa saja ya? saya baru menggunakan PHP jd masih krg paham. Karena setelah saya terapkan dan saya sesuaikan dengan database saya, malah ngga work
BalasHapus