KODINGAN HTML
1.LOGIN DAN RESGISTRASI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/login.css">
<title>Login - Toko Kerudung Online</title>
</head>
<body>
<div class="form-container">
<!-- Login Section -->
<div id="login">
<h1>Login</h1>
<div class="form-group">
<label for="login-email">Email:</label>
<input type="email" id="login-email" placeholder="Masukkan email">
</div>
<div class="form-group">
<label for="login-password">Password:</label>
<input type="password" id="login-password" placeholder="Masukkan password">
</div>
<button onclick="loginUser()">Login</button>
<p>Belum punya akun? <a href="#" onclick="showRegister()">Registrasi</a></p>
</div>
<!-- Register Section -->
<div id="register">
<h1>Registrasi</h1>
<div class="form-group">
<label for="register-name">Nama:</label>
<input type="text" id="register-name" placeholder="Masukkan nama">
</div>
<div class="form-group">
<label for="register-email">Email:</label>
<input type="email" id="register-email" placeholder="Masukkan email">
</div>
<div class="form-group">
<label for="register-password">Password:</label>
<input type="password" id="register-password" placeholder="Masukkan password">
</div>
<button onclick="registerUser()">Daftar</button>
<p>Sudah punya akun? <a href="#" onclick="showLogin()">Login</a></p>
</div>
</div>
<script>
// Data User Sementara
let users = [
{ name: "Zal Abdan", email: "[email protected]", password: "password123" }
];
// Tampilkan Form Login
function showLogin() {
document.getElementById("login").style.display = "block";
document.getElementById("register").style.display = "none";
// Tampilkan Form Registrasi
function showRegister() {
document.getElementById("login").style.display = "none";
document.getElementById("register").style.display = "block";
// Login User
function loginUser() {
const email = document.getElementById("login-email").value.trim();
const password = document.getElementById("login-password").value.trim();
const loggedInUser = users.find(user => user.email === email && user.password ===
password);
if (!loggedInUser) {
alert("Email atau password salah!");
return;
// Simpan status login di sessionStorage
sessionStorage.setItem("loggedInUser", JSON.stringify(loggedInUser));
alert(`Selamat datang, ${loggedInUser.name}!`);
// Redirect ke halaman produk
window.location.href = "beranda.html";
// Registrasi User Baru
function registerUser() {
const name = document.getElementById("register-name").value.trim();
const email = document.getElementById("register-email").value.trim();
const password = document.getElementById("register-password").value.trim();
// Validasi Input
if (!name || !email || !password) {
alert("Semua field harus diisi!");
return;
// Cek Apakah Email Sudah Terdaftar
const isEmailExists = users.some(user => user.email === email);
if (isEmailExists) {
alert("Email sudah terdaftar!");
return;
// Tambahkan User Baru
users.push({ name, email, password });
alert("Registrasi berhasil! Silakan login.");
// Pindah ke Form Login
showLogin();
</script>
</body>
</html>
2.BERANDA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/beranda.css">
<title>Beranda - Toko Kerudung Online</title>
</head>
<body>
<header>
<h1>Toko Kerudung Online</h1>
<nav>
<a href="beranda.html">Beranda</a>
<a href="keranjang.html">Keranjang</a>
<a href="riwayat.html">Riwayat Pembelian</a>
<a href="login.html">logout</a>
</nav>
</header>
<div id="products" class="products"></div>
<script>
// Data Produk
const products = [
{ id: 1, name: "Kerudung Pashmina", price: 50000, image:
"https://img.lazcdn.com/g/p/5b9fa14fe817d99087b915416a2aec14.jpg_720x720q80.jpg" },
{ id: 2, name: "Kerudung Segi Empat", price: 60000, image:
"https://file.1itmedia.co.id/5497f8c25acf481e14ed45ea0021d6ad.jpg" },
{ id: 3, name: "Kerudung Instan", price: 75000, image:
"https://elzatta.com/cdn/shop/files/TERACOTTA_1_bc8a2c14-f21e-43b4-9087-09d6e390c50f.jpg?
v=1718006406&width=771" },
{ id: 4, name: "Kerudung Bergo ", price: 40000, image:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-ALrj05TuywiAVYoD9KYT-2B-
f5mk5qWLvA&s" },
{ id: 5, name: "Kerudung Motif Bunga", price: 65000, image:
"https://s4.bukalapak.com/img/47960224672/s-400-400/data.jpeg.webp" },
{ id: 6, name: "Kerudung Anak", price: 30000, image:
"https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcS5ctPuYPUtvceHNkkln_YnveDedWPYWWIZdQ&s" },
{ id: 7, name: "Kerudung Sport", price: 100000, image:
"https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTtXjOz0x2FT2nJT5TmIShZ0TPDqIEmK8zvXA&s" },
{ id: 8, name: "Kerudung Bordir", price: 85000, image:
"https://images.tokopedia.net/img/cache/700/VqbcmM/2022/2/20/1b070900-ce33-4f8d-90a5-
13a24ea98c0a.jpg" }
];
// Cek Status Login
const loggedInUser = JSON.parse(sessionStorage.getItem("loggedInUser"));
if (!loggedInUser) {
alert("Anda harus login terlebih dahulu!");
window.location.href = "login.html";
// Tampilkan Produk
const productList = document.getElementById("products");
products.forEach(product => {
const productCard = document.createElement("div");
productCard.className = "product";
productCard.innerHTML = `
<img src="${product.image}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Harga: Rp${product.price.toLocaleString()}</p>
<button onclick="viewProduct(${product.id})">Lihat</button>
`;
productList.appendChild(productCard);
});
// Fungsi untuk Mengalihkan ke Halaman Detail Produk
function viewProduct(productId) {
// Redirect ke halaman detail produk
window.location.href = `detailProduk.html?id=${productId}`;
// Proses Pembelian
function buyProduct(productId) {
const product = products.find(p => p.id === productId);
if (!product) return;
const quantity = prompt(`Berapa banyak ${product.name} yang ingin dibeli?`);
if (!quantity || isNaN(quantity) || quantity <= 0) {
alert("Jumlah tidak valid!");
return;
const total = product.price * quantity;
alert(`Anda membeli ${quantity} ${product.name} dengan total Rp${total.toLocaleString()}.`);
// Logout
function logout() {
sessionStorage.removeItem("loggedInUser");
window.location.href = "login.html";
</script>
</body>
</html>
3.DETAIL PRODUK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/beranda.css">
<title>Beranda - Toko Kerudung Online</title>
</head>
<body>
<header>
<h1>Toko Kerudung Online</h1>
<nav>
<a href="beranda.html">Beranda</a>
<a href="keranjang.html">Keranjang</a>
<a href="riwayat.html">Riwayat Pembelian</a>
<a href="login.html">logout</a>
</nav>
</header>
<div id="products" class="products"></div>
<script>
// Data Produk
const products = [
{ id: 1, name: "Kerudung Pashmina", price: 50000, image:
"https://img.lazcdn.com/g/p/5b9fa14fe817d99087b915416a2aec14.jpg_720x720q80.jpg" },
{ id: 2, name: "Kerudung Segi Empat", price: 60000, image:
"https://file.1itmedia.co.id/5497f8c25acf481e14ed45ea0021d6ad.jpg" },
{ id: 3, name: "Kerudung Instan", price: 75000, image:
"https://elzatta.com/cdn/shop/files/TERACOTTA_1_bc8a2c14-f21e-43b4-9087-09d6e390c50f.jpg?
v=1718006406&width=771" },
{ id: 4, name: "Kerudung Bergo ", price: 40000, image:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-ALrj05TuywiAVYoD9KYT-2B-
f5mk5qWLvA&s" },
{ id: 5, name: "Kerudung Motif Bunga", price: 65000, image:
"https://s4.bukalapak.com/img/47960224672/s-400-400/data.jpeg.webp" },
{ id: 6, name: "Kerudung Anak", price: 30000, image:
"https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcS5ctPuYPUtvceHNkkln_YnveDedWPYWWIZdQ&s" },
{ id: 7, name: "Kerudung Sport", price: 100000, image:
"https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTtXjOz0x2FT2nJT5TmIShZ0TPDqIEmK8zvXA&s" },
{ id: 8, name: "Kerudung Bordir", price: 85000, image:
"https://images.tokopedia.net/img/cache/700/VqbcmM/2022/2/20/1b070900-ce33-4f8d-90a5-
13a24ea98c0a.jpg" }
];
// Cek Status Login
const loggedInUser = JSON.parse(sessionStorage.getItem("loggedInUser"));
if (!loggedInUser) {
alert("Anda harus login terlebih dahulu!");
window.location.href = "login.html";
// Tampilkan Produk
const productList = document.getElementById("products");
products.forEach(product => {
const productCard = document.createElement("div");
productCard.className = "product";
productCard.innerHTML = `
<img src="${product.image}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Harga: Rp${product.price.toLocaleString()}</p>
<button onclick="viewProduct(${product.id})">Lihat</button>
`;
productList.appendChild(productCard);
});
// Fungsi untuk Mengalihkan ke Halaman Detail Produk
function viewProduct(productId) {
// Redirect ke halaman detail produk
window.location.href = `detailProduk.html?id=${productId}`;
// Proses Pembelian
function buyProduct(productId) {
const product = products.find(p => p.id === productId);
if (!product) return;
const quantity = prompt(`Berapa banyak ${product.name} yang ingin dibeli?`);
if (!quantity || isNaN(quantity) || quantity <= 0) {
alert("Jumlah tidak valid!");
return;
const total = product.price * quantity;
alert(`Anda membeli ${quantity} ${product.name} dengan total Rp${total.toLocaleString()}.`);
// Logout
function logout() {
sessionStorage.removeItem("loggedInUser");
window.location.href = "login.html";
</script>
</body>
</html>
4.KERANJANG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/keranjang.css">
<title>Keranjang Anda</title>
</head>
<body>
<header>
<h1>Keranjang Anda</h1>
<nav>
<a href="beranda.html">Beranda</a>
<a href="keranjang.html">Keranjang</a>
<a href="riwayat.html">Riwayat Pembelian</a>
<a href="login.html">logout</a>
</nav>
</header>
<div class="container">
<div id="cart-items">
<!-- Produk yang ditambahkan ke keranjang akan muncul di sini -->
</div>
<div class="cart-summary" id="cart-summary">
<!-- Ringkasan keranjang akan muncul di sini -->
</div>
<button class="checkout-button" onclick="checkoutSelected()">Checkout</button>
</div>
<!-- Overlay for Order Confirmation -->
<div id="order-overlay" class="overlay">
<div class="overlay-content">
<button class="close-btn" onclick="closeOverlay()">Tutup</button>
<h2>Konfirmasi Pesanan</h2>
<div id="order-details">
<!-- Detail pesanan akan muncul di sini -->
</div>
<div class="nama_pembeli">
<label for="name">Nama Pembeli:</label>
<input type="text" id="name" placeholder="Masukkan nama" required>
</div>
<label for="address">Alamat:</label>
<input type="text" id="address" placeholder="Masukkan alamat" required>
<label for="payment">Metode Pembayaran:</label>
<select id="payment">
<option value="Transfer-Bank">Transfer Bank</option>
<option value="Kartu-Kredit">Kartu Kredit</option>
<option value="cod">COD</option>
</select>
<button id="confirm-order-btn" onclick="confirmOrder()">Konfirmasi Pesanan</button>
</div>
</div>
<script>
let cart = JSON.parse(localStorage.getItem('cart')) || [];
function updateCart() {
const cartItemsContainer = document.getElementById("cart-items");
const cartSummaryContainer = document.getElementById("cart-summary");
cartItemsContainer.innerHTML = '';
cartSummaryContainer.innerHTML = '';
if (cart.length === 0) {
cartItemsContainer.innerHTML = '<p class="empty-cart">Keranjang Anda kosong!</p>';
} else {
let total = 0;
cart.forEach((item, index) => {
const itemTotal = item.price * item.quantity;
total += itemTotal;
cartItemsContainer.innerHTML += `
<div class="cart-item">
<input type="checkbox" class="cart-checkbox" data-index="${index}">
<img src="${item.image}" alt="${item.name}">
<div class="cart-item-info">
<h3>${item.name}</h3>
<p>Harga: Rp${item.price.toLocaleString()}</p>
<p>Jumlah: ${item.quantity}</p>
<p class="p-total">Total: Rp${itemTotal.toLocaleString()}</p>
</div>
<button onclick="removeItem(${index})">Hapus</button>
</div>
`;
});
cartSummaryContainer.innerHTML = `
<p>Total Keseluruhan: <span>Rp${total.toLocaleString()}</span></p>
`;
function removeItem(index) {
cart.splice(index, 1);
localStorage.setItem('cart', JSON.stringify(cart));
updateCart();
function checkoutSelected() {
const selectedItems = document.querySelectorAll('.cart-checkbox:checked');
if (selectedItems.length === 0) {
alert("Pilih minimal satu item untuk di-checkout!");
return;
const selectedCart = [];
selectedItems.forEach(item => {
const index = item.getAttribute('data-index');
selectedCart.push(cart[index]);
});
showOverlay(selectedCart);
}
function showOverlay(selectedCart) {
const overlay = document.getElementById("order-overlay");
const orderDetails = document.getElementById("order-details");
orderDetails.innerHTML = '';
let orderTotal = 0;
selectedCart.forEach(item => {
const itemTotal = item.price * item.quantity;
orderTotal += itemTotal;
orderDetails.innerHTML += `
<div>
<p>Produk: ${item.name}</p>
<p>Jumlah: ${item.quantity}</p>
<p>Total: Rp${itemTotal.toLocaleString()}</p>
</div>
<hr>
`;
});
orderDetails.innerHTML += `
<h3>Total Akhir: Rp${orderTotal.toLocaleString()}</h3>
`;
overlay.style.display = 'flex';
function closeOverlay() {
const overlay = document.getElementById("order-overlay");
overlay.style.display = 'none';
}
function confirmOrder() {
const name = document.getElementById("name").value.trim();
const address = document.getElementById("address").value.trim();
const payment = document.getElementById("payment").value;
if (!name || !address) {
alert("Harap isi semua data!");
return;
// Menyimpan data pesanan ke dalam localStorage
const orderData = {
name: name,
address: address,
payment: payment,
items: cart // Menggunakan seluruh cart items
};
let orderHistory = JSON.parse(localStorage.getItem('orderHistory')) || [];
orderHistory.push(orderData);
localStorage.setItem('orderHistory', JSON.stringify(orderHistory));
alert(`Pesanan berhasil dikonfirmasi!\n\nNama: ${name}\nAlamat: ${address}\nMetode
Pembayaran: ${payment}`);
localStorage.removeItem('cart');
closeOverlay();
window.location.href = "riwayat.html"; // Kembali ke halaman produk
}
updateCart();
</script>
</body>
</html>
5.RIWAYAT PEMBELIAN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/riwayat.css">
<title>Riwayat Pembelian</title>
</head>
<body>
<header>
<h1>Riwayat Pembelian</h1>
<nav>
<a href="beranda.html">Beranda</a>
<a href="keranjang.html">Keranjang</a>
<a href="riwayat.html">Riwayat Pembelian</a>
<a href="login.html">Logout</a>
</nav>
</header>
<div id="order-history" class="container">
<!-- Riwayat pembelian akan muncul di sini -->
</div>
<script>
function deleteOrder(index) {
const orderHistory = JSON.parse(localStorage.getItem('orderHistory')) || [];
orderHistory.splice(index, 1); // Hapus pesanan pada index yang ditentukan
localStorage.setItem('orderHistory', JSON.stringify(orderHistory));
displayOrderHistory(); // Segarkan tampilan riwayat pembelian
function displayOrderHistory() {
const orderHistory = JSON.parse(localStorage.getItem('orderHistory')) || [];
const orderHistoryContainer = document.getElementById('order-history');
// Jika tidak ada riwayat pembelian
if (orderHistory.length === 0) {
orderHistoryContainer.innerHTML = '<p>Anda belum memiliki riwayat pembelian.</p>';
return;
// Tampilkan riwayat pembelian
orderHistoryContainer.innerHTML = ''; // Kosongkan kontainer terlebih dahulu
orderHistory.forEach((order, index) => {
const orderDetails = `
<div class="order">
<h3>Nama Pembeli: ${order.name}</h3>
<p>Alamat: ${order.address}</p>
<p>Metode Pembayaran: ${order.payment}</p>
<h4>Daftar Produk:</h4>
<div class="order-items">
${order.items.map(item => `
<div class="order-item">
<img src="${item.image}" alt="${item.name}">
<div>
<p>Nama Produk: ${item.name}</p>
<p>Jumlah: ${item.quantity}</p>
<p>Harga: Rp${item.price.toLocaleString()}</p>
</div>
<p class="item-total">Total: Rp${(item.price *
item.quantity).toLocaleString()}</p>
</div>
`).join('')}
</div>
<button onclick="deleteOrder(${index})">Hapus Pesanan</button>
</div>
<hr>
`;
orderHistoryContainer.innerHTML += orderDetails; // Menambahkan riwayat ke kontainer
});
displayOrderHistory();
</script>
</body>
</html>
