Membuat toko online kecil atau menambahkan fitur keranjang belanja ke situs web yang sudah ada seringkali menjadi kebutuhan. Keranjang belanja, atau shopping cart, adalah komponen krusial yang memungkinkan pengunjung mengumpulkan produk pilihan mereka sebelum melanjutkan ke proses pembayaran. Konsepnya sederhana: pilih barang, masukkan ke keranjang, lalu lanjutkan belanja atau checkout.
Kali ini, kita akan fokus pada cara membangun shopping cart yang ringkas menggunakan PHP dan cookies. Pendekatan ini cocok untuk proyek-proyek skala kecil atau sebagai langkah awal memahami bagaimana keranjang belanja bekerja tanpa memerlukan basis data yang kompleks. Kita akan membahas langkah demi langkah, dari persiapan hingga implementasi, dengan bahasa yang mudah kamu pahami.
Dengan memahami dasar-dasar ini, kamu akan memiliki fondasi yang kuat untuk mengembangkan fitur yang lebih canggih di masa mendatang. Mari kita mulai perjalanan kita membangun shopping cart sederhana yang fungsional dan efektif!
Mengapa Memilih PHP dan Cookies untuk Shopping Cart?
Kita sering mendengar tentang keranjang belanja yang canggih dengan fitur-fitur lengkap. Namun, untuk aplikasi yang lebih ringan atau sekadar ingin memahami alur kerja dasarnya, PHP dan cookies menawarkan kombinasi yang menarik. PHP adalah bahasa pemrograman sisi server yang sangat populer dan serbaguna, sementara cookies adalah mekanisme penyimpanan data kecil di sisi klien (browser pengguna).
Kelebihan PHP dalam Pembuatan Keranjang Belanja
PHP unggul dalam kemudahan penggunaan dan ketersediaan hosting. Dengan PHP, kita bisa memproses data formulir, berinteraksi dengan server, dan menghasilkan halaman web secara dinamis. Ini adalah pilihan yang tepat untuk membangun logika bisnis di balik shopping cart kita, seperti menambah barang, menghapus barang, atau menghitung total belanja. PHP juga memiliki komunitas yang besar, artinya banyak sumber daya dan bantuan tersedia jika kamu menemui kendala.
Peran Cookies dalam Menyimpan Barang Belanjaan
Cookies adalah kunci dalam strategi kita kali ini. Mereka memungkinkan kita menyimpan informasi tentang barang-barang yang dipilih pengguna secara sementara di browser mereka. Bayangkan seperti catatan kecil yang ditempelkan di browser pengguna. Ketika pengguna menambahkan item ke keranjang, kita akan menyimpan detail item tersebut (misalnya ID produk dan kuantitas) di dalam cookie. Ketika mereka mengunjungi halaman lain, informasi ini masih tersedia, memungkinkan mereka melihat kembali isi keranjang belanja mereka tanpa perlu login atau interaksi dengan database yang rumit.
Penting untuk diingat bahwa cookies memiliki batasan ukuran dan sebaiknya tidak digunakan untuk menyimpan data yang sangat sensitif atau berjumlah besar. Namun, untuk keranjang belanja sederhana, di mana kita hanya menyimpan ID produk dan kuantitas, cookies sangatlah memadai.
Persiapan Awal: Lingkungan Pengembangan PHP
Sebelum kita mulai menulis kode, pastikan kamu memiliki lingkungan pengembangan PHP yang siap. Ini termasuk web server seperti Apache atau Nginx, dan PHP itu sendiri. Jika kamu belum memiliki ini, ada beberapa paket all-in-one yang bisa kamu gunakan seperti XAMPP atau WAMP (untuk Windows), atau MAMP (untuk macOS). Aplikasi ini menginstal semua yang kamu butuhkan dalam satu paket praktis.
Konfigurasi Dasar Server Web
Setelah menginstal paket yang sesuai, pastikan web server dan PHP sudah berjalan. Kamu bisa mengujinya dengan membuat file PHP sederhana (misalnya info.php) yang berisi kode berikut:
<?php
phpinfo();
?>
Kemudian, akses file tersebut melalui browser (misalnya http://localhost/info.php). Jika kamu melihat halaman informasi PHP, berarti lingkunganmu sudah siap.
Struktur File Proyek Keranjang Belanja
Untuk menjaga proyek kita tetap terorganisir, mari kita buat struktur file yang sederhana. Kita akan membutuhkan beberapa file PHP:
index.php: Halaman utama yang menampilkan daftar produk.cart.php: Halaman yang menampilkan isi keranjang belanja.product.php: (Opsional) Halaman detail produk, jika kamu ingin menambahkannya.process_cart.php: File untuk menangani logika penambahan/penghapusan item dari keranjang.
Kamu bisa menempatkan semua file ini dalam satu folder di web root server lokalmu (misalnya htdocs di XAMPP).
/nama_folder_proyek/
├── index.php
├── cart.php
└── process_cart.php
Membuat Daftar Produk dengan PHP
Langkah pertama adalah membuat daftar produk yang bisa ditambahkan ke keranjang. Untuk kesederhanaan, kita akan menggunakan array PHP untuk menyimpan data produk. Dalam aplikasi nyata, data ini biasanya diambil dari database, tetapi untuk tujuan belajar, array sudah cukup.
Mari kita buat file index.php.
<?php
// Contoh data produk
$products = [
1 => ['id' => 1, 'name' => 'Kemeja Pria', 'price' => 150000, 'image' => 'kemeja.jpg'],
2 => ['id' => 2, 'name' => 'Celana Jeans Wanita', 'price' => 220000, 'image' => 'celana.jpg'],
3 => ['id' => 3, 'name' => 'Sepatu Sneakers', 'price' => 300000, 'image' => 'sepatu.jpg'],
4 => ['id' => 4, 'name' => 'Tas Ransel', 'price' => 180000, 'image' => 'tas.jpg'],
5 => ['id' => 5, 'name' => 'Jam Tangan Digital', 'price' => 95000, 'image' => 'jam.jpg']
];
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Produk</title>
<style>
body { font-family: sans-serif; margin: 20px; }
.product-list { display: flex; flex-wrap: wrap; gap: 20px; }
.product-item { border: 1px solid #ccc; padding: 15px; width: 200px; text-align: center; }
.product-item img { max-width: 100%; height: auto; margin-bottom: 10px; }
.product-item h3 { margin-top: 0; }
.product-item .price { font-weight: bold; color: green; }
.add-to-cart { background-color: #007bff; color: white; padding: 8px 15px; border: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Produk Tersedia</h1>
<a href="cart.php">Lihat Keranjang (<span id="cart-count">0</span>)</a>
<hr>
<div class="product-list">
<?php foreach ($products as $product): ?>
<div class="product-item">
<img src="images/<?php echo htmlspecialchars($product['image']); ?>" alt="<?php echo htmlspecialchars($product['name']); ?>">
<h3><?php echo htmlspecialchars($product['name']); ?></h3>
<p class="price">Rp <?php echo number_format($product['price'], 0, ',', '.'); ?></p>
<form action="process_cart.php" method="post">
<input type="hidden" name="product_id" value="<?php echo htmlspecialchars($product['id']); ?>">
<input type="hidden" name="action" value="add">
<input type="number" name="quantity" value="1" min="1" style="width: 60px; margin-right: 5px;">
<button type="submit" class="add-to-cart">Tambah ke Keranjang</button>
</form>
</div>
<?php endphp ?>
</div>
<script>
// Fungsi untuk memperbarui jumlah item di keranjang (akan diisi nanti)
function updateCartCount() {
// Kita akan mengisi ini nanti setelah membahas cookies
}
updateCartCount();
</script>
</body>
</html>
Jangan lupa untuk membuat folder images dan letakkan gambar-gambar produk di sana agar tampilan lebih menarik. Perhatikan bahwa setiap produk memiliki form terpisah untuk menambahkan ke keranjang, yang akan mengirimkan product_id, action, dan quantity ke process_cart.php.
Mengelola Shopping Cart dengan Cookies dan PHP
Ini adalah bagian inti dari proyek kita. Kita akan menggunakan file process_cart.php untuk menangani logika penambahan dan penghapusan item dari keranjang, dan cart.php untuk menampilkan isi keranjang.
Menambahkan Item ke Keranjang Menggunakan Cookies PHP
Pertama, mari kita buat file process_cart.php. File ini akan menerima data dari form di index.php, memprosesnya, dan menyimpan (atau memperbarui) informasi keranjang di cookie.
<?php
session_start(); // Diperlukan untuk mengakses atau mengatur session (opsional, tapi bagus untuk masa depan)
// Inisialisasi keranjang dari cookie jika ada, atau buat array kosong
$cart = isset($_COOKIE['shopping_cart']) ? json_decode($_COOKIE['shopping_cart'], true) : [];
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$productId = isset($_POST['product_id']) ? (int)$_POST['product_id'] : 0;
$quantity = isset($_POST['quantity']) ? (int)$_POST['quantity'] : 1;
$action = isset($_POST['action']) ? $_POST['action'] : '';
// Pastikan quantity tidak kurang dari 1
if ($quantity < 1) {
$quantity = 1;
}
if ($productId > 0) {
switch ($action) {
case 'add':
if (isset($cart[$productId])) {
// Jika produk sudah ada, tambahkan kuantitasnya
$cart[$productId] += $quantity;
} else {
// Jika produk belum ada, tambahkan ke keranjang
$cart[$productId] = $quantity;
}
break;
case 'remove':
// Hapus produk dari keranjang
unset($cart[$productId]);
break;
case 'update':
// Update kuantitas produk
if ($quantity > 0) {
$cart[$productId] = $quantity;
} else {
unset($cart[$productId]); // Hapus jika kuantitas jadi 0
}
break;
}
}
// Simpan keranjang kembali ke cookie
// json_encode digunakan untuk mengubah array menjadi string JSON agar bisa disimpan di cookie
// time() + (86400 * 30) = 30 hari kadaluarsa cookie
setcookie('shopping_cart', json_encode($cart), time() + (86400 * 30), "/"); // '/' agar cookie tersedia di seluruh situs
// Redirect kembali ke halaman sebelumnya atau halaman keranjang
header('Location: ' . (isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : 'index.php'));
exit;
} else {
// Jika diakses langsung tanpa POST, redirect ke halaman utama
header('Location: index.php');
exit;
}
?>
Beberapa hal penting dari kode di atas:
session_start(): Meskipun kita menggunakan cookies,session_start()seringkali digunakan dalam aplikasi PHP secara umum. Untuk konteks ini, ini tidak secara langsung digunakan, tetapi merupakan praktik yang baik.json_decode($_COOKIE['shopping_cart'], true): Mengambil data keranjang dari cookie dan mengubahnya kembali menjadi array PHP. Parametertruepenting agar menjadi array asosiatif.json_encode($cart): Mengubah array keranjang menjadi format JSON (JavaScript Object Notation) agar bisa disimpan sebagai string di cookie.setcookie('shopping_cart', ..., time() + (86400 * 30), "/"): Ini adalah fungsi kunci untuk mengatur cookie.shopping_cart: Nama cookie.json_encode($cart): Nilai cookie.time() + (86400 * 30): Waktu kadaluarsa cookie (di sini 30 hari).86400adalah jumlah detik dalam sehari./: Path di mana cookie akan tersedia./berarti cookie tersedia di seluruh domain.
header('Location: ...'): Mengarahkan pengguna kembali ke halaman asal setelah operasi selesai. Ini penting untuk pengalaman pengguna yang baik.
Menampilkan Isi Keranjang Belanja
Sekarang, mari kita buat file cart.php untuk menampilkan item-item yang ada di keranjang. Kita akan mengambil data dari cookie dan menampilkannya dalam format yang mudah dibaca. Kita juga akan menambahkan form untuk mengupdate kuantitas atau menghapus item.
<?php
// Kita perlu data produk lagi untuk menampilkan detail produk berdasarkan ID
$products = [
1 => ['id' => 1, 'name' => 'Kemeja Pria', 'price' => 150000, 'image' => 'kemeja.jpg'],
2 => ['id' => 2, 'name' => 'Celana Jeans Wanita', 'price' => 220000, 'image' => 'celana.jpg'],
3 => ['id' => 3, 'name' => 'Sepatu Sneakers', 'price' => 300000, 'image' => 'sepatu.jpg'],
4 => ['id' => 4, 'name' => 'Tas Ransel', 'price' => 180000, 'image' => 'tas.jpg'],
5 => ['id' => 5, 'name' => 'Jam Tangan Digital', 'price' => 95000, 'image' => 'jam.jpg']
];
// Ambil keranjang dari cookie
$cart = isset($_COOKIE['shopping_cart']) ? json_decode($_COOKIE['shopping_cart'], true) : [];
$totalPrice = 0;
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keranjang Belanja Kamu</title>
<style>
body { font-family: sans-serif; margin: 20px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
.total-row { font-weight: bold; }
.action-buttons button { margin-right: 5px; padding: 5px 10px; cursor: pointer; }
.remove-btn { background-color: #dc3545; color: white; border: none; }
.update-btn { background-color: #007bff; color: white; border: none; }
</style>
</head>
<body>
<h1>Keranjang Belanja Kamu</h1>
<p><a href="index.php">Lanjutkan Belanja</a></p>
<?php if (empty($cart)): ?>
<p>Keranjang belanja kamu kosong.</p>
<?php else: ?>
<table>
<thead>
<tr>
<th>Produk</th>
<th>Harga</th>
<th>Kuantitas</th>
<th>Subtotal</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($cart as $productId => $quantity):
if (isset($products[$productId])):
$product = $products[$productId];
$subtotal = $product['price'] * $quantity;
$totalPrice += $subtotal;
?>
<tr>
<td><?php echo htmlspecialchars($product['name']); ?></td>
<td>Rp <?php echo number_format($product['price'], 0, ',', '.'); ?></td>
<td>
<form action="process_cart.php" method="post" style="display: flex; align-items: center;">
<input type="hidden" name="product_id" value="<?php echo htmlspecialchars($productId); ?>">
<input type="hidden" name="action" value="update">
<input type="number" name="quantity" value="<?php echo htmlspecialchars($quantity); ?>" min="1" style="width: 60px; margin-right: 5px;">
<button type="submit" class="update-btn">Update</button>
</form>
</td>
<td>Rp <?php echo number_format($subtotal, 0, ',', '.'); ?></td>
<td class="action-buttons">
<form action="process_cart.php" method="post" style="display: inline-block;">
<input type="hidden" name="product_id" value="<?php echo htmlspecialchars($productId); ?>">
<input type="hidden" name="action" value="remove">
<button type="submit" class="remove-btn">Hapus</button>
</form>
</td>
</tr>
<?php
endif;
endphp ?>
<tr class="total-row">
<td colspan="3" style="text-align: right;">Total:</td>
<td>Rp <?php echo number_format($totalPrice, 0, ',', '.'); ?></td>
<td></td>
</tr>
</tbody>
</table>
<p>
<button style="background-color: #28a745; color: white; padding: 10px 20px; border: none; cursor: pointer;">Lanjutkan ke Pembayaran</button>
</p>
<?php endphp ?>
</body>
</html>
Pada file cart.php, kita kembali memuat data produk untuk bisa menampilkan nama dan harga. Kemudian, kita melakukan perulangan (foreach) pada $cart (yang berisi product_id dan quantity) untuk menampilkan setiap item. Setiap item memiliki form untuk mengupdate kuantitas atau menghapusnya, yang semuanya mengarah ke process_cart.php.
Memperbarui Jumlah Item di Header
Untuk memberikan feedback visual kepada pengguna, kita bisa menampilkan jumlah item di keranjang pada header halaman index.php. Kita perlu sedikit JavaScript untuk membaca cookie dan memperbarui tampilan.
Tambahkan kode JavaScript berikut di dalam tag <script> pada index.php, di bagian updateCartCount():
function updateCartCount() {
const cookieName = 'shopping_cart';
const cookies = document.cookie.split(';');
let cartCount = 0;
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].trim();
// Cari cookie dengan nama 'shopping_cart'
if (cookie.startsWith(cookieName + '=')) {
const cartData = decodeURIComponent(cookie.substring(cookieName.length + 1));
try {
const cart = JSON.parse(cartData);
for (const productId in cart) {
if (cart.hasOwnProperty(productId)) {
cartCount += cart[productId];
}
}
} catch (e) {
console.error("Error parsing cart cookie:", e);
}
break;
}
}
document.getElementById('cart-count').innerText = cartCount;
}
updateCartCount();
Kode JavaScript ini akan mencari cookie bernama shopping_cart, mengurai data JSON-nya, dan menghitung total kuantitas semua item di keranjang, lalu memperbarui teks pada elemen dengan ID cart-count. Pastikan kamu sudah menambahkan <span id="cart-count">0</span> di index.php seperti yang ditunjukkan sebelumnya.
Studi Kasus: Menghindari Duplikasi Produk dalam Keranjang
Salah satu hal yang perlu kita tangani adalah ketika pengguna menambahkan produk yang sama berkali-kali. Alih-alih membuat entri baru setiap kali, kita ingin menambahkan kuantitas produk yang sudah ada di keranjang.
Dalam kode process_cart.php kita sudah menerapkan ini dengan baris:
if (isset($cart[$productId])) {
// Jika produk sudah ada, tambahkan kuantitasnya
$cart[$productId] += $quantity;
} else {
// Jika produk belum ada, tambahkan ke keranjang
$cart[$productId] = $quantity;
}
Ini memastikan bahwa jika product_id sudah ada sebagai kunci dalam array $cart, kita hanya akan menambahkan nilai quantity ke nilai yang sudah ada. Jika belum ada, kita akan membuat entri baru dengan product_id sebagai kunci dan quantity sebagai nilai. Ini adalah cara yang efisien untuk mengelola inventaris dalam keranjang belanja.
Keamanan dan Pertimbangan Tambahan dalam Penggunaan Cookies
Meskipun cookies sangat berguna untuk shopping cart sederhana, ada beberapa hal yang perlu kita perhatikan terkait keamanan dan fungsionalitas.
Batasan Ukuran Cookie
Cookies memiliki batasan ukuran, biasanya sekitar 4KB per domain. Ini berarti kamu tidak bisa menyimpan terlalu banyak informasi di dalamnya. Untuk keranjang belanja, di mana kita hanya menyimpan ID produk dan kuantitas, ini biasanya tidak menjadi masalah kecuali kamu memiliki ribuan item di keranjang (yang jarang terjadi).
Keamanan Data Cookie
Data yang disimpan di cookie di sisi klien berarti dapat diakses dan bahkan dimodifikasi oleh pengguna. Oleh karena itu, jangan pernah menyimpan informasi sensitif seperti harga aktual produk atau informasi pribadi pengguna langsung di cookie. Harga dan informasi penting lainnya harus selalu divalidasi dan diambil dari sisi server (misalnya dari array $products kita, atau lebih baik lagi, dari database) saat memproses checkout. Kode kita sudah menerapkan ini dengan mengambil harga dari array $products saat menampilkan keranjang dan menghitung total.
Cookie Expired dan Persistensi Data
Kita mengatur cookie agar kadaluarsa dalam 30 hari (time() + (86400 * 30)). Ini berarti isi keranjang akan tetap ada di browser pengguna selama 30 hari, bahkan jika mereka menutup browser dan membukanya kembali. Jika kamu ingin keranjang belanja hanya bertahan selama sesi browser (hingga browser ditutup), kamu bisa menghilangkan parameter waktu kadaluarsa (atau set ke 0), dan cookie akan menjadi session cookie.
Alternatif Penyimpanan Data Keranjang
Untuk aplikasi yang lebih kompleks atau membutuhkan keamanan yang lebih tinggi dan penyimpanan data yang lebih besar, session PHP atau database adalah pilihan yang lebih baik.
- Session PHP: Data session disimpan di server, dan hanya ID session yang disimpan di cookie pengguna. Ini lebih aman karena data tidak terekspos di sisi klien. Namun, session biasanya akan hilang ketika browser ditutup, kecuali diatur secara spesifik.
- Database: Untuk toko online profesional, data keranjang belanja dan checkout hampir selalu disimpan di database. Ini memungkinkan persistensi data jangka panjang, fitur multi-device, dan keamanan yang lebih baik.
Meskipun kita fokus pada cookies untuk kesederhanaan, penting untuk mengetahui kapan harus beralih ke solusi yang lebih kuat. Untuk belajar lebih banyak tentang PHP, kamu bisa mulai dengan belajar PHP. Jika kamu tertarik dengan PHP dengan pendekatan objek, ada juga sumber daya untuk belajar PHP OOP. Untuk aplikasi skala besar, kamu mungkin akan membutuhkan PHP Framework.
Mengembangkan Lebih Lanjut Shopping Cart Ini
Setelah berhasil membuat shopping cart dasar ini, ada banyak fitur yang bisa kamu tambahkan untuk membuatnya lebih fungsional:
- Halaman Detail Produk: Tambahkan link dari daftar produk ke halaman
product.phpyang menampilkan detail lengkap setiap produk. - Checkout Sederhana: Buat halaman
checkout.phpyang memungkinkan pengguna memasukkan informasi pengiriman dan metode pembayaran (walaupun tanpa integrasi pembayaran asli). - Pesan Konfirmasi: Setelah berhasil menambahkan ke keranjang atau menghapus item, tampilkan pesan konfirmasi yang ramah.
- Validasi Input: Pastikan input kuantitas selalu berupa angka positif.
- CSS Tambahan: Percantik tampilan dengan CSS yang lebih canggih.
- Menggunakan AJAX: Untuk pengalaman pengguna yang lebih mulus, kamu bisa menggunakan AJAX untuk menambah, menghapus, atau mengupdate item di keranjang tanpa perlu me-reload seluruh halaman.
- Integrasi Database: Jika data produkmu mulai banyak atau kamu ingin menyimpan riwayat keranjang, beralihlah ke database (misalnya MySQL) untuk menyimpan produk dan data keranjang.
Kesimpulan: Keranjang Belanja Sederhana dengan PHP dan Cookies
Kamu telah berhasil membangun keranjang belanja sederhana menggunakan PHP dan cookies. Kita sudah membahas bagaimana menampilkan produk, menambahkan item ke keranjang, memperbarui kuantitas, dan menghapus item, semua dengan memanfaatkan kemampuan PHP untuk memproses permintaan server dan cookies untuk menyimpan data di sisi klien.
Pendekatan ini sangat bagus untuk memahami dasar-dasar web development dan logika di balik fitur shopping cart. Ingat, untuk proyek yang lebih besar dan sensitif, pertimbangkan untuk menggunakan session atau database untuk manajemen data yang lebih aman dan terukur.
Dengan fondasi ini, kamu kini siap untuk menjelajahi fitur-fitur yang lebih kompleks dan membangun aplikasi web yang lebih canggih. Selamat mencoba dan terus berkreasi!