Scribd
Upload
14 views19 pages

Panduan Kodingan HTML Toko Kerudung

The document contains HTML code for an online scarf store, including login, registration, product listing, and cart functionalities. Users can log in or register, view products with details, and manage their cart for purchases. The JavaScript code handles user authentication, product display, and order confirmation processes.

Uploaded by

jahidjihad33
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views19 pages

Panduan Kodingan HTML Toko Kerudung

The document contains HTML code for an online scarf store, including login, registration, product listing, and cart functionalities. Users can log in or register, view products with details, and manage their cart for purchases. The JavaScript code handles user authentication, product display, and order confirmation processes.

Uploaded by

jahidjihad33
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

KODINGAN HTML

[Link] 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/[Link]">

<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: "zal@[Link]", password: "password123" }

];

// Tampilkan Form Login

function showLogin() {

[Link]("login").[Link] = "block";

[Link]("register").[Link] = "none";

// Tampilkan Form Registrasi


function showRegister() {

[Link]("login").[Link] = "none";

[Link]("register").[Link] = "block";

// Login User

function loginUser() {

const email = [Link]("login-email").[Link]();

const password = [Link]("login-password").[Link]();

const loggedInUser = [Link](user => [Link] === email && [Link] ===
password);

if (!loggedInUser) {

alert("Email atau password salah!");

return;

// Simpan status login di sessionStorage

[Link]("loggedInUser", [Link](loggedInUser));

alert(`Selamat datang, ${[Link]}!`);

// Redirect ke halaman produk

[Link] = "[Link]";

// Registrasi User Baru

function registerUser() {

const name = [Link]("register-name").[Link]();

const email = [Link]("register-email").[Link]();

const password = [Link]("register-password").[Link]();


// Validasi Input

if (!name || !email || !password) {

alert("Semua field harus diisi!");

return;

// Cek Apakah Email Sudah Terdaftar

const isEmailExists = [Link](user => [Link] === email);

if (isEmailExists) {

alert("Email sudah terdaftar!");

return;

// Tambahkan User Baru

[Link]({ name, email, password });

alert("Registrasi berhasil! Silakan login.");

// Pindah ke Form Login

showLogin();

</script>

</body>

</html>
[Link]
<!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/[Link]">

<title>Beranda - Toko Kerudung Online</title>

</head>

<body>

<header>

<h1>Toko Kerudung Online</h1>

<nav>

<a href="[Link]">Beranda</a>

<a href="[Link]">Keranjang</a>

<a href="[Link]">Riwayat Pembelian</a>

<a href="[Link]">logout</a>

</nav>

</header>

<div id="products" class="products"></div>

<script>

// Data Produk

const products = [

{ id: 1, name: "Kerudung Pashmina", price: 50000, image:


"[Link] },
{ id: 2, name: "Kerudung Segi Empat", price: 60000, image:
"[Link] },

{ id: 3, name: "Kerudung Instan", price: 75000, image:


"[Link]
v=1718006406&width=771" },

{ id: 4, name: "Kerudung Bergo ", price: 40000, image:


"[Link]
f5mk5qWLvA&s" },

{ id: 5, name: "Kerudung Motif Bunga", price: 65000, image:


"[Link] },

{ id: 6, name: "Kerudung Anak", price: 30000, image:


"[Link]
q=tbn:ANd9GcS5ctPuYPUtvceHNkkln_YnveDedWPYWWIZdQ&s" },

{ id: 7, name: "Kerudung Sport", price: 100000, image:


"[Link]
q=tbn:ANd9GcTtXjOz0x2FT2nJT5TmIShZ0TPDqIEmK8zvXA&s" },

{ id: 8, name: "Kerudung Bordir", price: 85000, image:


"[Link]
[Link]" }

];

// Cek Status Login

const loggedInUser = [Link]([Link]("loggedInUser"));

if (!loggedInUser) {

alert("Anda harus login terlebih dahulu!");

[Link] = "[Link]";

// Tampilkan Produk

const productList = [Link]("products");

[Link](product => {

const productCard = [Link]("div");

[Link] = "product";

[Link] = `

<img src="${[Link]}" alt="${[Link]}">


<h3>${[Link]}</h3>

<p>Harga: Rp${[Link]()}</p>

<button onclick="viewProduct(${[Link]})">Lihat</button>

`;

[Link](productCard);

});

// Fungsi untuk Mengalihkan ke Halaman Detail Produk

function viewProduct(productId) {

// Redirect ke halaman detail produk

[Link] = `[Link]?id=${productId}`;

// Proses Pembelian

function buyProduct(productId) {

const product = [Link](p => [Link] === productId);

if (!product) return;

const quantity = prompt(`Berapa banyak ${[Link]} yang ingin dibeli?`);

if (!quantity || isNaN(quantity) || quantity <= 0) {

alert("Jumlah tidak valid!");

return;

const total = [Link] * quantity;

alert(`Anda membeli ${quantity} ${[Link]} dengan total Rp${[Link]()}.`);

// Logout

function logout() {

[Link]("loggedInUser");
[Link] = "[Link]";

</script>

</body>

</html>

[Link] 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/[Link]">

<title>Beranda - Toko Kerudung Online</title>

</head>

<body>

<header>

<h1>Toko Kerudung Online</h1>

<nav>

<a href="[Link]">Beranda</a>

<a href="[Link]">Keranjang</a>

<a href="[Link]">Riwayat Pembelian</a>

<a href="[Link]">logout</a>

</nav>

</header>

<div id="products" class="products"></div>

<script>

// Data Produk

const products = [
{ id: 1, name: "Kerudung Pashmina", price: 50000, image:
"[Link] },

{ id: 2, name: "Kerudung Segi Empat", price: 60000, image:


"[Link] },

{ id: 3, name: "Kerudung Instan", price: 75000, image:


"[Link]
v=1718006406&width=771" },

{ id: 4, name: "Kerudung Bergo ", price: 40000, image:


"[Link]
f5mk5qWLvA&s" },

{ id: 5, name: "Kerudung Motif Bunga", price: 65000, image:


"[Link] },

{ id: 6, name: "Kerudung Anak", price: 30000, image:


"[Link]
q=tbn:ANd9GcS5ctPuYPUtvceHNkkln_YnveDedWPYWWIZdQ&s" },

{ id: 7, name: "Kerudung Sport", price: 100000, image:


"[Link]
q=tbn:ANd9GcTtXjOz0x2FT2nJT5TmIShZ0TPDqIEmK8zvXA&s" },

{ id: 8, name: "Kerudung Bordir", price: 85000, image:


"[Link]
[Link]" }

];

// Cek Status Login

const loggedInUser = [Link]([Link]("loggedInUser"));

if (!loggedInUser) {

alert("Anda harus login terlebih dahulu!");

[Link] = "[Link]";

// Tampilkan Produk

const productList = [Link]("products");

[Link](product => {

const productCard = [Link]("div");

[Link] = "product";

[Link] = `
<img src="${[Link]}" alt="${[Link]}">

<h3>${[Link]}</h3>

<p>Harga: Rp${[Link]()}</p>

<button onclick="viewProduct(${[Link]})">Lihat</button>

`;

[Link](productCard);

});

// Fungsi untuk Mengalihkan ke Halaman Detail Produk

function viewProduct(productId) {

// Redirect ke halaman detail produk

[Link] = `[Link]?id=${productId}`;

// Proses Pembelian

function buyProduct(productId) {

const product = [Link](p => [Link] === productId);

if (!product) return;

const quantity = prompt(`Berapa banyak ${[Link]} yang ingin dibeli?`);

if (!quantity || isNaN(quantity) || quantity <= 0) {

alert("Jumlah tidak valid!");

return;

const total = [Link] * quantity;

alert(`Anda membeli ${quantity} ${[Link]} dengan total Rp${[Link]()}.`);

// Logout

function logout() {
[Link]("loggedInUser");

[Link] = "[Link]";

</script>

</body>

</html>

[Link]
<!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/[Link]">

<title>Keranjang Anda</title>

</head>

<body>

<header>

<h1>Keranjang Anda</h1>

<nav>

<a href="[Link]">Beranda</a>

<a href="[Link]">Keranjang</a>

<a href="[Link]">Riwayat Pembelian</a>

<a href="[Link]">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 = [Link]([Link]('cart')) || [];

function updateCart() {

const cartItemsContainer = [Link]("cart-items");

const cartSummaryContainer = [Link]("cart-summary");

[Link] = '';

[Link] = '';

if ([Link] === 0) {

[Link] = '<p class="empty-cart">Keranjang Anda kosong!</p>';

} else {

let total = 0;

[Link]((item, index) => {

const itemTotal = [Link] * [Link];

total += itemTotal;

[Link] += `

<div class="cart-item">

<input type="checkbox" class="cart-checkbox" data-index="${index}">

<img src="${[Link]}" alt="${[Link]}">

<div class="cart-item-info">

<h3>${[Link]}</h3>

<p>Harga: Rp${[Link]()}</p>

<p>Jumlah: ${[Link]}</p>

<p class="p-total">Total: Rp${[Link]()}</p>

</div>

<button onclick="removeItem(${index})">Hapus</button>

</div>
`;

});

[Link] = `

<p>Total Keseluruhan: <span>Rp${[Link]()}</span></p>

`;

function removeItem(index) {

[Link](index, 1);

[Link]('cart', [Link](cart));

updateCart();

function checkoutSelected() {

const selectedItems = [Link]('.cart-checkbox:checked');

if ([Link] === 0) {

alert("Pilih minimal satu item untuk di-checkout!");

return;

const selectedCart = [];

[Link](item => {

const index = [Link]('data-index');

[Link](cart[index]);

});

showOverlay(selectedCart);

}
function showOverlay(selectedCart) {

const overlay = [Link]("order-overlay");

const orderDetails = [Link]("order-details");

[Link] = '';

let orderTotal = 0;

[Link](item => {

const itemTotal = [Link] * [Link];

orderTotal += itemTotal;

[Link] += `

<div>

<p>Produk: ${[Link]}</p>

<p>Jumlah: ${[Link]}</p>

<p>Total: Rp${[Link]()}</p>

</div>

<hr>

`;

});

[Link] += `

<h3>Total Akhir: Rp${[Link]()}</h3>

`;

[Link] = 'flex';

function closeOverlay() {

const overlay = [Link]("order-overlay");

[Link] = 'none';
}

function confirmOrder() {

const name = [Link]("name").[Link]();

const address = [Link]("address").[Link]();

const payment = [Link]("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 = [Link]([Link]('orderHistory')) || [];

[Link](orderData);

[Link]('orderHistory', [Link](orderHistory));

alert(`Pesanan berhasil dikonfirmasi!\n\nNama: ${name}\nAlamat: ${address}\nMetode


Pembayaran: ${payment}`);

[Link]('cart');

closeOverlay();

[Link] = "[Link]"; // Kembali ke halaman produk

}
updateCart();

</script>

</body>

</html>

[Link] 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/[Link]">

<title>Riwayat Pembelian</title>

</head>

<body>

<header>

<h1>Riwayat Pembelian</h1>

<nav>

<a href="[Link]">Beranda</a>

<a href="[Link]">Keranjang</a>

<a href="[Link]">Riwayat Pembelian</a>

<a href="[Link]">Logout</a>

</nav>

</header>

<div id="order-history" class="container">

<!-- Riwayat pembelian akan muncul di sini -->

</div>

<script>

function deleteOrder(index) {
const orderHistory = [Link]([Link]('orderHistory')) || [];

[Link](index, 1); // Hapus pesanan pada index yang ditentukan

[Link]('orderHistory', [Link](orderHistory));

displayOrderHistory(); // Segarkan tampilan riwayat pembelian

function displayOrderHistory() {

const orderHistory = [Link]([Link]('orderHistory')) || [];

const orderHistoryContainer = [Link]('order-history');

// Jika tidak ada riwayat pembelian

if ([Link] === 0) {

[Link] = '<p>Anda belum memiliki riwayat pembelian.</p>';

return;

// Tampilkan riwayat pembelian

[Link] = ''; // Kosongkan kontainer terlebih dahulu

[Link]((order, index) => {

const orderDetails = `

<div class="order">

<h3>Nama Pembeli: ${[Link]}</h3>

<p>Alamat: ${[Link]}</p>

<p>Metode Pembayaran: ${[Link]}</p>

<h4>Daftar Produk:</h4>

<div class="order-items">

${[Link](item => `

<div class="order-item">

<img src="${[Link]}" alt="${[Link]}">

<div>

<p>Nama Produk: ${[Link]}</p>


<p>Jumlah: ${[Link]}</p>

<p>Harga: Rp${[Link]()}</p>

</div>

<p class="item-total">Total: Rp${([Link] *


[Link]).toLocaleString()}</p>

</div>

`).join('')}

</div>

<button onclick="deleteOrder(${index})">Hapus Pesanan</button>

</div>

<hr>

`;

[Link] += orderDetails; // Menambahkan riwayat ke kontainer

});

displayOrderHistory();

</script>

</body>

</html>

Common questions

Powered by AI

If a user attempts to purchase a product with an invalid quantity, such as a non-numeric or zero value, the system immediately provides feedback through an alert, notifying the user that the quantity is invalid, thereby preventing the purchase process from proceeding until corrected .

After a successful login, the system saves the logged-in user details in sessionStorage. This session persistence allows for user-specific interactions across pages by checking for existing session data to verify login status, although it clears upon logging out or session expiration .

User input is validated by checking that all fields (name, email, password) are filled. If any field is empty, an alert prompts the user to complete all fields. Additionally, the system checks if the email is already registered; if it is, the user receives an alert about the email duplication .

To prevent duplicate email registrations, the system includes a validation step that checks whether the email input already exists in the 'users' array. If a match is found, the registration process halts, and the user receives an alert informing them about the email's previous registration, necessitating a change .

The system allows for order deletion by providing a button within each order entry. Upon clicking, it modifies the 'orderHistory' array in localStorage by removing the specified index, then refreshes the display ensuring the deleted order no longer appears in the history list .

When a user adds items to the cart, each item's details, including quantity and total price, are stored in localStorage. During checkout, selected items are verified, and at least one must be chosen before proceeding. The checkout process involves displaying an order confirmation overlay, capturing user information like name, address, and payment method, and confirming the order, which is then saved to the order history and clears the cart from localStorage .

When a user selects a product from the homepage, the system redirects them to a detailed product page. This is achieved by triggering the viewProduct function, which captures the product ID and modifies the window location to a dedicated detail page, using the product ID as a parameter .

The system checks if a 'loggedInUser' is stored in the sessionStorage. If not, it alerts the user that they must log in first and redirects them to the login page to ensure that products are only accessible to authenticated users .

Purchase history is stored using localStorage with each confirmed order appended to 'orderHistory'. When displaying history, the system retrieves entries from localStorage and iteratively displays them, including buyer details and a breakdown of items, utilizing a refresh function to ensure it displays the most current data .

If the credentials do not match any registered users, the system alerts the user that the email or password is incorrect and prevents login. Without a matching user, the process stops, and control returns to the login form without redirecting .

You might also like