Belajar Web Development

Project: Toko Online Mini (Bagian 1)

Setelah mempelajari semua teori dari HTML hingga PHP Lanjutan, sekarang saatnya kita membangun sesuatu yang nyata: Aplikasi Toko Online Mini.

Project ini akan menggabungkan:

  • HTML & CSS: Tampilan daftar produk yang rapi (Grid Layout).
  • Database MySQL: Menyimpan data produk dan kategori.
  • PHP Session: Membuat fitur "Keranjang Belanja" (Add to Cart).
  • CRUD: Mengelola data pesanan (Checkout).

1. Persiapan Database

Buat database baru bernama toko_online dan jalankan script SQL berikut untuk membuat tabel-tabel yang dibutuhkan.

Buka terminal dan masuk ke MySQL:

mysql -u root

Ketikkan perintah berikut:

CREATE DATABASE toko_online;
USE toko_online;

-- Tabel Kategori
CREATE TABLE kategori (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama_kategori VARCHAR(100) NOT NULL
);

-- Tabel Produk
CREATE TABLE produk (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama_produk VARCHAR(150) NOT NULL,
    deskripsi TEXT,
    harga INT NOT NULL,
    gambar VARCHAR(255) DEFAULT 'default.jpg',
    kategori_id INT,
    FOREIGN KEY (kategori_id) REFERENCES kategori(id) ON DELETE SET NULL
);

-- Tabel Pesanan (Checkout)
CREATE TABLE pesanan (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama_pembeli VARCHAR(100) NOT NULL,
    alamat TEXT NOT NULL,
    total_harga INT NOT NULL,
    tanggal_pesan TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Mengisi Data Dummy (Awal)

Agar tidak kosong, mari kita masukkan beberapa kategori dan produk fiktif untuk dites.

-- Insert Kategori
INSERT INTO kategori (nama_kategori) VALUES ('Pakaian'), ('Elektronik'), ('Sepatu');

-- Insert Produk
INSERT INTO produk (nama_produk, deskripsi, harga, kategori_id) VALUES 
('Kemeja Flanel', 'Kemeja flanel pria bahan premium yang nyaman dipakai.', 150000, 1),
('Kaos Polos', 'Kaos cotton combed 30s warna hitam.', 55000, 1),
('Mouse Wireless', 'Mouse wireless Logitech original.', 120000, 2),
('Keyboard Gaming', 'Keyboard mekanikal RGB untuk gamer sejati.', 450000, 2),
('Sepatu Sneakers', 'Sepatu sneakers putih gaya kasual.', 320000, 3);

2. Struktur Folder Project

Buat folder baru bernama toko-online di dalam folder Herd kamu (~/Herd/toko-online).

Buat struktur file berikut:

toko-online/
├── config/
│   └── database.php       <-- Koneksi PDO
├── css/
│   └── style.css          <-- File desain
├── index.php              <-- Halaman Utama (Daftar Produk)
├── keranjang.php          <-- Halaman Keranjang Belanja
├── aksi-keranjang.php     <-- Proses tambah/hapus item keranjang
└── checkout.php           <-- Form Pengiriman & Proses Checkout

3. Membuat Koneksi Database

Di dalam file config/database.php:

<?php
session_start(); // Session SANGAT PENTING untuk Keranjang Belanja!

$host = 'localhost';
$dbname = 'toko_online';
$username = 'root';
$password = ''; // Kosongkan jika pakai default Herd/XAMPP

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    die("Koneksi Error: " . $e->getMessage());
}

// Fungsi Helper Uang (Rupiah)
function rupiah($angka) {
    return "Rp " . number_format($angka, 0, ',', '.');
}

4. Desain Tampilan (CSS)

Di dalam file css/style.css:

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, sans-serif; }
body { background-color: #f4f7f6; color: #333; }

/* Navbar */
nav { background-color: #2c3e50; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; color: white; }
nav a { color: white; text-decoration: none; font-weight: bold; }
.cart-badge { background: #e74c3c; padding: 3px 8px; border-radius: 12px; font-size: 12px; margin-left: 5px; }

/* Container & Grid Layout */
.container { max-width: 1000px; margin: 30px auto; padding: 0 15px; }

/* Produk Card (CSS Grid) */
.produk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 15px; display: flex; flex-direction: column; }
.card h3 { font-size: 18px; margin-bottom: 10px; color: #2c3e50; }
.card p { font-size: 14px; color: #7f8c8d; flex-grow: 1; margin-bottom: 15px; }
.card .harga { font-weight: bold; color: #e67e22; font-size: 18px; margin-bottom: 15px; }

/* Tombol */
.btn { display: inline-block; padding: 8px 15px; background: #3498db; color: white; text-align: center; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; width: 100%; font-size: 14px; transition: 0.3s; }
.btn:hover { background: #2980b9; }
.btn-danger { background: #e74c3c; }
.btn-danger:hover { background: #c0392b; }
.btn-success { background: #2ecc71; padding: 12px 20px; font-size: 16px; }

/* Tabel Keranjang */
table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #ecf0f1; }
th { background-color: #34495e; color: white; }
.total-row { font-weight: bold; font-size: 18px; background-color: #ecf0f1; }

Selanjutnya

Fondasi database dan tampilan sudah siap!

Selanjutnya, kita akan menulis kode PHP untuk menampilkan daftar produk dan membangun sistem Keranjang Belanja → menggunakan Session.