Pernah kepikiran untuk bikin toko online sendiri? Pasti seru banget, kan, bisa jualan barang online, entah itu produk fisik atau digital! Nah, di artikel ini, kita bakal belajar cara membangun website e-commerce mini menggunakan PHP dalam satu hari. Gak perlu takut ribet, karena kita bakal pake pendekatan yang gampang banget. Yuk, langsung aja!
Apa yang Kita Butuhkan?
Sebelum kita mulai, pastikan kamu udah siap dengan beberapa hal berikut:
- Server Lokal (XAMPP atau WAMP)
Biar bisa menjalankan PHP di komputer kamu, kita butuh server lokal kayak XAMPP atau WAMP. Kalau belum install, kamu bisa download dan install XAMPP dari sini. - Editor Teks
Pake editor teks yang kamu suka, misalnya Visual Studio Code, Sublime Text, atau Notepad++. - Browser
Tentunya, kita butuh browser buat lihat hasil kerja kita. Chrome atau Firefox sudah cukup!
Langkah 1: Siapkan Server Lokal
- Install XAMPP
Download XAMPP di sini, lalu install di komputer kamu. Setelah itu, jalankan XAMPP dan start Apache dan MySQL. - Folder Project
Buat folder untuk project kamu di dalam folderhtdocsyang ada di dalam direktori XAMPP. Misalnya, namakan foldernyatoko_online.
Langkah 2: Buat Database untuk Toko Kamu
Sebelum bikin website, kita butuh database buat nyimpen data produk, pembeli, dan transaksi. Berikut cara buat database:
- Buka browser dan ketik
http://localhost/phpmyadmin/untuk masuk ke phpMyAdmin. - Klik Databases dan buat database baru dengan nama
toko_online. - Buat tabel untuk produk, misalnya tabel
produkdengan kolom:id(INT, AUTO_INCREMENT, PRIMARY KEY)nama(VARCHAR)deskripsi(TEXT)harga(INT)gambar(VARCHAR)
Contoh SQL buat bikin tabel:
CREATE TABLE produk (
id INT AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR(255) NOT NULL,
deskripsi TEXT,
harga INT NOT NULL,
gambar VARCHAR(255)
);
Langkah 3: Desain Halaman Utama
Sekarang kita mulai buat halaman depan toko online kamu. Buat file index.php di dalam folder toko_online. Ini adalah halaman yang akan menampilkan produk-produk yang kamu jual.
- HTML untuk Layout
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toko Online Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Toko Online Sederhana</h1>
</header>
<div class="produk-container">
<?php
// Koneksi ke database
$conn = new mysqli('localhost', 'root', '', 'toko_online');
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
// Ambil data produk
$result = $conn->query("SELECT * FROM produk");
while ($produk = $result->fetch_assoc()) {
echo "<div class='produk'>";
echo "<img src='images/" . $produk['gambar'] . "' alt='" . $produk['nama'] . "'>";
echo "<h3>" . $produk['nama'] . "</h3>";
echo "<p>" . $produk['deskripsi'] . "</p>";
echo "<p>Rp " . number_format($produk['harga'], 0, ',', '.') . "</p>";
echo "<button>Tambah ke Keranjang</button>";
echo "</div>";
}
$conn->close();
?>
</div>
</body>
</html>
- CSS untuk Styling
Buat file style.css dan tambahkan style untuk tampilan website:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
.produk-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.produk {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
width: 200px;
}
.produk img {
max-width: 100%;
height: auto;
}
button {
background-color: #333;
color: white;
padding: 10px;
border: none;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #555;
}
Langkah 4: Menambahkan Fitur Keranjang Belanja
Keranjang belanja memungkinkan pembeli memilih barang yang ingin dibeli. Kita akan menggunakan session PHP untuk menyimpan data keranjang.
Membuat File keranjang.php
<?php
session_start();
// Menambahkan produk ke keranjang
if (isset($_GET['id'])) {
$id_produk = $_GET['id'];
if (!isset($_SESSION['keranjang'][$id_produk])) {
$_SESSION['keranjang'][$id_produk] = 1;
} else {
$_SESSION['keranjang'][$id_produk]++;
}
}
// Redirect kembali ke halaman utama
header('Location: index.php');
exit;
?>
Langkah 5: Testing dan Selesai!
Sekarang, buka browser dan pergi ke http://localhost/toko_online/index.php. Kamu akan melihat produk yang ditampilkan, dan bisa menambahkannya ke keranjang belanja. Kamu juga bisa melihat keranjang belanja di halaman keranjang.php.
Kesimpulan
Kamu baru saja membangun web e-commerce sederhana menggunakan PHP dalam satu hari! Tentu saja, masih banyak fitur yang bisa ditambah, seperti proses checkout, pembayaran, dan integrasi dengan sistem lainnya, tapi dengan langkah-langkah di atas, kamu sudah bisa mulai menjual produk online. Jadi, selamat mencoba!