LAPORAN WEB
Oleh:
Nama : Nisa willita
Kelas : XII TKJ C
Mapel : PILIHAN
SMK NEGERI 1 GUNUNG TALANG
Tp: 2024/2025
“CODING”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>E-Commerce Website</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
nav {
background-color: #444;
color: #fff;
padding: 0.5rem;
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
nav ul li {
margin: 0 10px;
nav ul li a {
color: #fff;
text-decoration: none;
.container {
width: 80%;
margin: auto;
overflow: hidden;
padding: 20px;
.product-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.product {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin: 10px;
width: 250px;
text-align: center;
.product img {
max-width: 100%;
height: auto;
.product h3 {
margin: 10px 0;
.product p {
margin-bottom: 10px;
.btn {
display: inline-block;
background-color: #333;
color: #fff;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
#cart {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin-top: 20px;
#order-form {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin-top: 20px;
#order-form h2 {
margin-bottom: 15px;
#order-form label {
display: block;
margin-bottom: 5px;
#order-form input[type="text"],
#order-form input[type="email"],
#order-form textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 3px;
#order-form input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 3px;
</style>
</head>
<body>
<header>
<h1>Nisa slebeww</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#cart">Cart</a></li>
<li><a href="#order">Order</a></li>
</ul>
</nav>
<div class="container">
<section id="products">
<h2>Our Products</h2>
<div class="product-container" id="product-list"></div>
</section>
<section id="cart">
<h2>Shopping Cart</h2>
<div id="cart-items"></div>
<p>Total: Rp <span id="cart-total">0</span></p>
</section>
<section id="order-form">
<h2>Place Your Order</h2>
<form id="order">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
<input type="submit" value="Place Order">
</form>
</section>
</div>
<script>
const products = [
{ id: 1, name: "haircare", price: 45000, image: "n.jpg" },
{ id: 2, name: "bodycare", price: 299900, image: "i.jpg" },
{ id: 3, name: "skincare", price: 399900, image: "s.jpg" },
{ id: 4, name: "makeup", price: 499900, image: "a.jpg" }
];
const productList = document.getElementById("product-list");
const cartItems = document.getElementById("cart-items");
const cartTotal = document.getElementById("cart-total");
const orderForm = document.getElementById("order");
let cart = [];
function displayProducts() {
productList.innerHTML = products.map(product => `
<div class="product">
<img src="${product.image}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Rp ${product.price.toLocaleString()}</p>
<button class="btn" onclick="addToCart($
{product.id})">Add to Cart</button>
</div>
`).join("");
function addToCart(productId) {
const product = products.find(p => p.id === productId);
cart.push(product);
updateCart();
function updateCart() {
cartItems.innerHTML = cart.map(item => `
<div>
<p>${item.name} - Rp ${item.price.toLocaleString()}</p>
</div>
`).join("");
const total = cart.reduce((sum, item) => sum + item.price, 0);
cartTotal.textContent = total.toLocaleString();
orderForm.addEventListener("submit", function(e) {
e.preventDefault();
cart = [];
updateCart();
orderForm.reset();
alert("Thank you for your order!");
});
displayProducts();
</script>
</body>
</html>
HASIL NYAA :
1.Beranda
2. struk pembelian
3. tampilan pembelian
4.pembelian berhasil
