Belajar Web Development

Project: Toko Online Mini (Bagian 2)

Di bagian ini, kita akan menampilkan produk dari database MySQL ke halaman utama dan membuat fitur inti dari setiap toko online: Keranjang Belanja (Cart) menggunakan PHP Session.

1. Menampilkan Katalog Produk

Buka file index.php dan tulis kode berikut:

<?php
require 'config/database.php';

// Menghitung jumlah item unik di keranjang
$jumlah_keranjang = isset($_SESSION['cart']) ? count($_SESSION['cart']) : 0;

// Query SQL untuk mengambil semua produk
$stmt = $pdo->query("SELECT * FROM produk ORDER BY id DESC");
$semua_produk = $stmt->fetchAll();
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Toko Online Mini</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!-- Navbar -->
    <nav>
        <h2><a href="index.php">🛒 Toko Keren</a></h2>
        <a href="keranjang.php">
            Keranjang Belanja 
            <?php if($jumlah_keranjang > 0): ?>
                <span class="cart-badge"><?= $jumlah_keranjang ?></span>
            <?php endif; ?>
        </a>
    </nav>

    <!-- Konten Utama -->
    <div class="container">
        <h2 style="margin-bottom: 20px;">Daftar Produk Terbaru</h2>

        <?php if(isset($_SESSION['pesan_sukses'])): ?>
            <div style="background: #2ecc71; color: white; padding: 10px; margin-bottom: 20px; border-radius: 4px;">
                <?= $_SESSION['pesan_sukses'] ?>
                <?php unset($_SESSION['pesan_sukses']); // Hapus pesan setelah ditampilkan ?>
            </div>
        <?php endif; ?>

        <!-- Grid Produk -->
        <div class="produk-grid">
            <?php foreach($semua_produk as $produk): ?>
                <div class="card">
                    <h3><?= htmlspecialchars($produk['nama_produk']) ?></h3>
                    <p><?= htmlspecialchars($produk['deskripsi']) ?></p>
                    <div class="harga"><?= rupiah($produk['harga']) ?></div>
                    
                    <!-- Tombol Beli: Mengirim ID produk ke aksi-keranjang.php -->
                    <form action="aksi-keranjang.php" method="POST">
                        <input type="hidden" name="aksi" value="tambah">
                        <input type="hidden" name="produk_id" value="<?= $produk['id'] ?>">
                        <button type="submit" class="btn">Masukan Keranjang</button>
                    </form>
                </div>
            <?php endforeach; ?>
        </div>

    </div>

</body>
</html>

2. Membuat Logika Keranjang (Session)

Keranjang belanja tidak disimpan ke database (MySQL), melainkan disimpan sementara di memori server untuk user tersebut. Fitur ini menggunakan $_SESSION.

Buat file aksi-keranjang.php yang bertugas memproses form (tidak memiliki tampilan):

<?php
require 'config/database.php';

// Pastikan request menggunakan metode POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    
    // Inisialisasi keranjang jika belum ada
    if (!isset($_SESSION['cart'])) {
        $_SESSION['cart'] = []; // Array kosong
    }

    $aksi = $_POST['aksi'] ?? '';
    $id_produk = (int)($_POST['produk_id'] ?? 0);

    if ($id_produk > 0) {
        
        // AKSI: TAMBAH KE KERANJANG
        if ($aksi === 'tambah') {
            
            // Cek apakah produk SUDAH ADA di dalam keranjang
            if (isset($_SESSION['cart'][$id_produk])) {
                // Jika ada, tambah jumlahnya (Quantity) + 1
                $_SESSION['cart'][$id_produk] += 1;
            } else {
                // Jika belum ada, masukkan dengan jumlah 1
                $_SESSION['cart'][$id_produk] = 1;
            }
            
            // Berikan pesan sukses (Flash Message)
            $_SESSION['pesan_sukses'] = "Produk berhasil ditambahkan ke keranjang!";
            header("Location: index.php");
            exit;
            
        } 
        
        // AKSI: HAPUS DARI KERANJANG
        elseif ($aksi === 'hapus') {
            // Hapus item dari array session
            unset($_SESSION['cart'][$id_produk]);
            
            header("Location: keranjang.php");
            exit;
        }
    }
}

// Jika diakses langsung tanpa POST, tendang kembali ke index
header("Location: index.php");
exit;

Konsep Array pada Keranjang (Penting!):

Struktur $_SESSION['cart'] di atas akan terbentuk seperti ini:

Array
(
    // ID Produk => Jumlah (Qty)
    [3] => 1,  // Mouse Wireless: 1 buah
    [1] => 2,  // Kemeja Flanel: 2 buah
    [5] => 1   // Sepatu Sneakers: 1 buah
)

3. Menampilkan Halaman Keranjang

Sekarang kita buat halaman untuk membaca Session tadi dan mencocokkannya dengan harga di Database untuk menghitung Total.

Buka file keranjang.php:

<?php
require 'config/database.php';

// Ambil data keranjang dari session (jika kosong, gunakan array kosong)
$cart = $_SESSION['cart'] ?? [];

$produk_di_keranjang = [];
$total_bayar = 0;

// Jika keranjang tidak kosong, ambil detail produknya dari database
if (!empty($cart)) {
    // Trik SQL IN: "SELECT * FROM produk WHERE id IN (1, 3, 5)"
    $ids = implode(',', array_keys($cart));
    
    // PENTING: Karena ini tutorial dasar, kita membolehkan query ini. 
    // Di aplikasi asli (Laravel), kita selalu pakai Prepared Statement untuk list IN.
    $stmt = $pdo->query("SELECT * FROM produk WHERE id IN ($ids)");
    $produk_di_keranjang = $stmt->fetchAll();
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Keranjang Belanja</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!-- Navbar -->
    <nav>
        <h2><a href="index.php">🛒 Toko Keren</a></h2>
        <a href="index.php">Lanjut Belanja →</a>
    </nav>

    <div class="container">
        <h2>Isi Keranjang Belanja</h2><br>

        <?php if (empty($produk_di_keranjang)): ?>
            <div style="background: white; padding: 40px; text-align: center; border-radius: 8px;">
                <h3>Keranjang Anda masih kosong 😢</h3>
                <p style="margin-top:10px;"><a href="index.php" class="btn" style="width: auto;">Belanja Sekarang</a></p>
            </div>
        <?php else: ?>
            <table>
                <thead>
                    <tr>
                        <th>Produk</th>
                        <th>Harga Satuan</th>
                        <th>Jumlah</th>
                        <th>Subtotal</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($produk_di_keranjang as $p): ?>
                        <?php 
                            // Ambil quantity dari session berdasarkan ID produk
                            $qty = $cart[$p['id']]; 
                            $subtotal = $p['harga'] * $qty;
                            $total_bayar += $subtotal; // Tambahkan ke Grand Total
                        ?>
                        <tr>
                            <td>
                                <strong><?= htmlspecialchars($p['nama_produk']) ?></strong>
                            </td>
                            <td><?= rupiah($p['harga']) ?></td>
                            <td><?= $qty ?></td>
                            <td><?= rupiah($subtotal) ?></td>
                            <td>
                                <!-- Tombol Hapus -->
                                <form action="aksi-keranjang.php" method="POST" onsubmit="return confirm('Hapus produk ini?');">
                                    <input type="hidden" name="aksi" value="hapus">
                                    <input type="hidden" name="produk_id" value="<?= $p['id'] ?>">
                                    <button type="submit" class="btn btn-danger" style="width: auto; padding: 5px 10px;">Hapus</button>
                                </form>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    
                    <tr class="total-row">
                        <td colspan="3" style="text-align: right;">TOTAL PEMBAYARAN:</td>
                        <td colspan="2" style="color: #e67e22;"><?= rupiah($total_bayar) ?></td>
                    </tr>
                </tbody>
            </table>

            <!-- Tombol Checkout -->
            <div style="text-align: right; margin-top: 20px;">
                <a href="checkout.php" class="btn btn-success" style="width: auto;">
                    Lanjut ke Pembayaran 💳
                </a>
            </div>
            
        <?php endif; ?>
    </div>

</body>
</html>

Selanjutnya

Hebat! Fitur keranjang belanjamu (berbasis array session) sudah selesai dan berfungsi sempurna.

Di bagian terakhir, kita akan Membuat Form Checkout dan Membersihkan Keranjang → agar pesanan tersimpan rapi ke Database.