Project Luarsekolah

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ALshop Book</title>

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="/img/alshop.png" type="image/x-icon">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="index.html">ALshop Book</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="index.html">Beranda</a>
</li>
<li class="nav-item nav-item-dropdown">
<a class="nav-link" href="#">Kategori</a>
<div class="dropdown-content">
<a href="#">Fiksi</a>
<a href="#">Non-Fiksi</a>
<a href="#">Komik</a>
<a class="nav-link" href="#">Tentang</a>
</li>
<a class="nav-link" href="#">Kontak</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search"
placeholder="Cari buku..." aria-label="Search">
<button class="btn btn-outline-success"
type="submit">Cari</button>
</form>
</div>
</div>
</nav>
</header>
<main>
<div class="container mt-5">
<div class="content-container">
<h1>Selamat datang di ALshop Book!</h1>
<p>Temukan berbagai macam buku terbaru dan terlaris di
sini.</p>
</div>


<div class="row">
<div class="col-md-3 mb-4">
<div class="card">
<img src="img/book1.jpg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Orang-Orang Proyek – Ahmad
Tohari</h5>
<p class="card-text">Kabul adalah seorang insinyur
dengan integritas dan idealisme. Namun, ia terpaksa dihadapkan pada kenyataan
bahwa dalam mengerjakan proyek jembatan di Indonesia.</p>
<p class="card-price">Harga: Rp 100.000,-</p>
<form id="beliForm">
<input type="hidden" name="harga"
value="100000">
<button type="button"
onclick="redirectToFormPembelian(this)"
class="btn btn-primary">Beli</button>
</form>
</div>
</div>
</div>
<div class="card">
alt="...">
<h5 class="card-title">Laut Bercerita – Leila.S
Chudori</h5>
<p class="card-text">Novel sejarah ini bercerita
tentang kisah perjuangan Laut, seorang mahasiswa sekaligus aktivis kritis yang
berani menyuarakan isu sosial pada masa orde baru.</p>
<form id="beliForm2">
value="120000">
</form>
</div>
</div>
</div>

<div class="card">
alt="...">
<h5 class="card-title">Gadis Kretek – Ratih
Kumala</h5>
<p class="card-text">Berlatar belakang era
penjajahan Belanda hingga kemerdekaan, Gadis Kretek menceritakan napak tilas
pencarian seorang perempuan misterius bernama Jeng Yah.</p>
value="150000">
</form>
</div>
</div>
</div>

<div class="card">
alt="...">
<h5 class="card-title">Amba – Laksmi
Pamuntjak</h5>
<p class="card-text">Peristiwa G30S sepertinya
akan menjadi catatan gelap negeri ini yang tidak akan pernah terlupakan dan
menyisakan luka bagi banyak pihak.</p>
value="110000">
</form>
</div>
</div>
</div>
<div class="card">
alt="...">
<h5 class="card-title">Tetralogi Buru – Pramoedya
Ananta Toer</h5>
<p class="card-text">Novel sejarah ini ini
menceritakan perjalanan panjang Minke sebagai pencetus pers pribumi dan
pergerakan nasional.</p>
value="130000">
</form>
</div>
</div>
</div>

<div class="card">
alt="...">
<h5 class="card-title">Max Havelaar –
Multatuli</h5>
<p class="card-text">Novel sejarah ini
menceritakan kisah Havelaar seorang asisten residen Lebak Banten yang dicopot
jabatanya karena terbukti menentang sistem tanam paksa.</p>
value="140000">
</form>
</div>
</div>
</div>

<div class="card">
alt="...">
<h5 class="card-title">Ronggeng Dukuh Paruk –
Ahmad Tohari</h5>
<p class="card-text">Srintil adalah seorang gadis
cantik yang dikagumi banyak orang. Berkat parasnya tersebut, ia diangkat
sebagai penari ronggeng Dukuh.</p>
value="160000">
</form>
</div>
</div>
</div>

<div class="card">
alt="...">
<h5 class="card-title">Gadis Pantai – Pramoedya
Ananta Toer</h5>
<p class="card-text">Novel sejarah ini
menceritakan kisah seorang gadis yang dipaksa menikah dengan seorang priyayi
Jawa Dengan status sosialnya yang rendah dan ketidakpastian status.</p>
value="170000">
</form>
</div>
</div>
</div>

<div class="card">
alt="...">
<h5 class="card-title">Tenggelamnya Kapal Van Der
Wijck – Hamka</h5>
<p class="card-text">Diangkat dari peristiwa
nyata, kapal Van Der Wijck yang tenggelam di Lamongan Jawa Timur pada 1936,
menceritakan kisah cinta segitiga antara Zainuddin, Hayati, dan Aziz.</p>
value="180000">
</form>
</div>
</div>
</div>

<div class="card">
alt="...">
<h5 class="card-title">Cantik Itu Luka – Eka
Kurniawan</h5>
<p class="card-text">Seorang perempuan bernama
Dewi Ayu memiliki kecantikan yang bukannya mendatangkan keuntungan, tetapi
kemalangan. Kecantikan itu membuatnya dipaksa menjadi pelacur oleh tentara
Jepang dan Belanda.</p>
value="190000">
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">

<div class="container text-center">
<span class="text-muted">© 2024 Toko Buku Online</span>
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-
alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
function redirectToFormPembelian(button) {
var harga =
button.parentElement.querySelector('input[name="harga"]').value;
window.location.href = "form_pembelian.html?harga=" + harga;
}
window.addEventListener("scroll", function () {
var navbar = document.querySelector(".navbar");
navbar.classList.toggle("sticky", window.scrollY > 0);
navbar.style.opacity = window.scrollY > 0 ? "0.9" : "1";
});
document.querySelector('.nav-item-dropdown').addEventListener('click',
function (event) {
event.preventDefault();
this.classList.toggle('active');
});
document.addEventListener('click', function (event) {

var dropdown = document.querySelector('.nav-item-dropdown');
if (!dropdown.contains(event.target)) {
dropdown.classList.remove('active');
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pembelian</title>

<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
" rel="stylesheet">

<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
.container {
max-width: 500px;
margin: auto;
padding: 30px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
font-weight: bold;
color: #333;
}
.btn-primary {
background-color: #007bff;
border: none;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">Form Pembelian</h1>
<form id="form-pembelian" method="post" action="">
<div class="form-group">
<label for="jumlah">Jumlah Buku:</label>
<input type="number" id="jumlah" name="jumlah" min="1"
class="form-control" required>
</div>
<label for="harga">Harga Buku:</label>
<input type="text" id="harga" name="harga" class="form-
control" readonly>
</div>
<label for="total">Total Harga:</label>
<input type="text" id="total" name="total" class="form-
control" readonly>
</div>
<label for="alamat">Alamat Pengiriman:</label>
<textarea id="alamat" name="alamat" rows="4" class="form-
control" required></textarea>
</div>
<label for="metode_pembayaran">Metode Pembayaran:</label>
<select id="metode_pembayaran" name="metode_pembayaran"
class="form-control" required>
<option value="transfer_bank">Transfer Bank</option>
<option value="cod">Bayar di Tempat (COD)</option>
</select>
</div>
<button type="button" class="btn btn-primary btn-block"
id="konfirmasiBtn">Konfirmasi Pembelian</button>
</form>
<div id="konfirmasiPesanan" class="alert alert-success mt-3"
role="alert" style="display: none;">
Pesanan Anda Berhasil! Terima kasih telah berbelanja.
</div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.mi
n.js"></script>


<script>
const jumlahInput = document.getElementById('jumlah');
const hargaInput = document.getElementById('harga');
const totalInput = document.getElementById('total');
const alamatInput = document.getElementById('alamat');
const konfirmasiBtn = document.getElementById('konfirmasiBtn');
const konfirmasiPesanan =
document.getElementById('konfirmasiPesanan');
function setBookPrice(price) {
hargaInput.value = formatRupiah(price.toString());
hargaInput.dataset.harga = price;
}
function formatRupiah(angka) {
var number_string = angka.toString(),
split = number_string.split(','),
sisa = split[0].length % 3,
rupiah = split[0].substr(0, sisa),
ribuan = split[0].substr(sisa).match(/\d{3}/gi);
if (ribuan) {
separator = sisa ? '.' : '';
rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

return 'Rp ' + rupiah;
}
jumlahInput.addEventListener('input', function() {
const jumlah = parseInt(jumlahInput.value);
const harga = parseInt(hargaInput.dataset.harga);
const total = jumlah * harga;
totalInput.value = formatRupiah(total.toString());
});
konfirmasiBtn.addEventListener('click', function() {
if (jumlahInput.value.trim() === '' || alamatInput.value.trim()
=== '') {
alert('Harap lengkapi semua field sebelum melakukan konfirmasi
pembelian.');
} else {
konfirmasiPesanan.style.display = 'block';
setTimeout(function() {
window.location.href = 'index.html';
}, 2000);
}
});
const urlParams = new URLSearchParams(window.location.search);

const harga = parseInt(urlParams.get('harga'));
if (!isNaN(harga)) {
setBookPrice(harga);
} else {
alert('Terjadi kesalahan. Harap kembali ke halaman sebelumnya.');
}
</script>
</body>
</html>
CSS:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-image: url(img/bg1.jpg);
}
header {
background-color: #656565;
padding: 15px 0;
}
.navbar {
background-color: rgba(255, 255, 255, 0.8);
padding: 15px 0;
}
.navbar.sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.navbar-brand {
font-weight: bold;
color: #343a40;
font-size: 24px;
}
.navbar-nav .nav-link {
color: #343a40;
margin-right: 15px;
font-size: 18px;
}
.navbar-nav .nav-link:hover {
color: #007bff;
}
.form-control {
width: 300px;
}
.btn-outline-success {
color: #28a745;
border-color: #28a745;
}
.btn-outline-success:hover {
background-color: #28a745;
color: #fff;
}
.main {
padding: 50px 0;
text-align: center;
}
.footer {
background-color: #f8f9fa;
padding: 15px 0;
}
.footer span {
color: #6c757d;
font-size: 14px;
}
.card-img-top {
max-width: 100%;
height: auto;
}
.card {
max-width: 280px;
}
.card-price {
color: #b10707;
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.content-container {
padding: 20px;
color: #fff;
margin-bottom: 30px;
}
.card-body {
padding: 20px;
color: #ffffff;
}
.nav-item-dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 5px;
}
.nav-item-dropdown:hover .dropdown-content {
display: block;
opacity: 1;
}
.dropdown-content a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
transition: background-color 0.3s ease;
}
.dropdown-content a:hover {
background-color: #f0f0f0;
color: #007bff;
}
.navbar-brand,
.nav-link,
.dropdown-content a {
font-family: 'Arial', sans-serif;
font-weight: bold;
}

Project Luarsekolah

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project Luarsekolah

Uploaded by

Copyright:

Available Formats

<!

<div class="col-md-3 mb-4">

<div class="col-md-3 mb-4">

<div class="col-md-3 mb-4">

<div class="col-md-3 mb-4">

<div class="col-md-3 mb-4">

<div class="col-md-3 mb-4">

<div class="col-md-3 mb-4">

<footer class="footer mt-auto py-3 bg-light">

document.addEventListener('click', function (event) {

rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

const urlParams = new URLSearchParams(window.location.search);

You might also like