Tugas Membuat Website tema “Toko Sepatu”

Nama : Maulana Sandi Samudera

1. Hero page

<section id="hero">
<div class="judul-hero">
<p class="tittle b-Awal">Haii, Welcome to Our Store</p>
<p class="sub-t b-Awal">enjoy yourself with all our products</p>
</div>
<div class="blok-img-hero">
<img class="img-hero" src="image/hero.png" alt="hero">
</div>
</section>
//header
<style>

.badge{
background: #58A399;
}

.icn-sd-bar{
display: none;
max-width: 30px;
margin: 13px 10px 0 0;
cursor: pointer;
}

/* ====================== */
 /* Mobile Responsiveness */
/* ====================== */

.navbar{
display: block;
margin-top: 13px;
}

@media (max-width:725px) {
.icn-sd-bar{
display: block;
}
.navbar{
display: none;
position: fixed;
top: 47px;
width: 100%;
background: white;
min-height: 100vh;
}
.navbar ul{
flex-direction: column;
text-align: center;
width: 100%;
}
}

</style>

<header id="header">
<div>
<img id="header-logo" src="image/logo.png" alt="logo">
</div>

<div class="sd-bar">
<img class="icn-sd-bar" src="image/layout.png" alt="icon">
</div>

<nav class="navbar">
<ul>
<li><a href="?">Home</a></li>
<li><a href="?produk">Produk</a></li>
<li><a href="?keranjang">Keranjang</a> <span class='badge'
id=jumlah_item_keranjang><?=$jumlah_item_keranjang?></span> </li>
<li><a href="?toko_kami">Toko kami</a></li>

<?php
echo $is_login ?
"<li><a href=\"?logout\" onclick=\"return confirm('Yakin mau
keluar?')\">Logout</a></li>" :
'<li><a href="?login">Login</a></li>';
?>

</ul>
</nav>
</header>
<script>
$(function() {
$('.icn-sd-bar').click(function(){
$('.navbar').slideToggle();
})
})
</script>

2. Produk

<section class="section t-white">

<div class="section-tittle">
<p class="tittle2 b-Awal">Our Products</p>
<p class="sub-t2">with a minimalist design but very high quality</p>
</div>

<div class="container">
<?php
include 'tampil_produk.php';
if ($id_role == 2) include 'tambah_produk.php';
?>
</div>
</section>
 3. Toko

<section class="section bg-blue t-white">

<div class="section-tittle">
<p class="tittle2 b-Awal">our Store</p>
<p class="b-Awal sub-t2">a store with all kinds of shoes
available</p>
</div>
<div class="container">
<div class="row">
<div class="col-6">
<img src="image/shop.jpg" class="img-shop" alt="ourshop">
</div>
<div class="col-6 t-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos
ex nemo quibusdam id ratione earum nostrum nam, optio laborum, eveniet
perferendis accusantium praesentium? Blanditiis nostrum accusamus rerum quae,
id numquam, voluptatum et adipisci quisquam vitae nihil officiis amet sunt
inventore perferendis minus quaerat? Veniam, voluptates reiciendis iure ea
necessitatibus temporibus.
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
numquam quis molestias quae aperiam ipsa. Officia laudantium harum velit
doloremque corporis, optio in aliquid necessitatibus sed unde saepe earum.
Cupiditate?
</div>
</div>
<div class="row mt-5">
<div class="col-6 t-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos
ex nemo quibusdam id ratione earum nostrum nam, optio laborum, eveniet
perferendis accusantium praesentium? Blanditiis nostrum accusamus rerum quae,
id numquam, voluptatum et adipisci quisquam vitae nihil officiis amet sunt
inventore perferendis minus quaerat? Veniam, voluptates reiciendis iure ea
necessitatibus temporibus.
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur quaerat eaque corporis aspernatur esse eligendi ipsum
accusantium impedit ipsa soluta.
</div>
<div class="col-6">
<img src="image/shop2.jpg" class="img-shop" alt="ourshop">
</div>
</div>
</div>
<div>

</div>
</section>

4. Login

<section class="section t-white ">

<div class="section-tittle">
<img src="image/logo.png" class="logo" alt="logo">
<h2>Login</h2>
<p>Silahkan masukkan username & password.</p>
</div>
<div>
<div style="max-width:500px; margin:auto">
<?php
if(isset($_POST['btn_login'])){
$s = "SELECT * FROM tb_user WHERE username='$_POST[username]'
AND password='$_POST[password]'";
$q = mysqli_query($conn,$s) or die(mysqli_error($conn));
 if(mysqli_num_rows($q)==0){
echo "Maaf tidak tepat";
}else{
// set session
$_SESSION['lshop_username'] = $_POST['username'];

//redirect ke home
die('<script>location.replace("?")</script>');
}

}
?>
<form method=post>
<div class="b-Awal">username</div>
<input type="text" name="username" class="form-control mb-3"
minlength="3" maxlength="20" required>
<div class="b-Awal">password</div>
<input type="password" name="password" class="form-control
mb-3" minlength="3" maxlength="20" required>
<button class="btn btn-primary w-100"
name="btn_login">Login</button>
</form>
</div>
</div>
</section>

5. Tambah Produk

<?php
$nama_produk ='';
$harga ='';
$gender ='';
$image_produk ='';

if (isset($_POST['btn_simpan'])) {
$nama_produk = $_POST['nama_produk'];
$harga = $_POST['harga'];
$gender = $_POST['gender'];

$image_produk = $_FILES['image_produk']['name'];

$s = "INSERT INTO tb_produk

(nama_produk, harga, gender, image_produk) VALUES
('$nama_produk', '$harga', '$gender', '$image_produk')";

$q = mysqli_query($conn, $s) or die (mysqli_error($conn));

// clear kan kembali

$nama_produk ='';
$harga ='';
$gender ='';

// handler untuk file

$path_folder = 'uploads';

$file_awal = $_FILES['image_produk']['tmp_name'];
$file_tujuan = "$path_folder/$image_produk";
move_uploaded_file($file_awal, $file_tujuan);
}
?>

<div class="card mt-2 fitur-admin">

<form method="post" enctype="multipart/form-data">
<h3 class="m-3 darkblue ">
Tambah Produk
</h3>
<div class="mx-3">
<label for="nama_produk">Nama Produk</label>
<input
id="nama_produk"
name="nama_produk"
type="text"
class="form-control"
required
minlength="10"
maxlength="30"
value="<?=$nama_produk?>"
>
</div>
<div id="nama_produk_ket" class="mx-3 kecil miring abu">
masukkan 10 s.d 30 huruf atau angka, tanpa special karakter
</div>

<script>
$(function(){
$('#nama_produk').keyup(function(){
let nama_produk = $('#nama_produk').val();

if(nama_produk.length>=10){
 $("#nama_produk_ket").html("<div class='mt-2'><img
src='image/simbol/checklist.png' height=25px ></div>");

}else{
// no aksi
$("#nama_produk_ket").text("masukkan 10 s.d 30 huruf
atau angka, tanpa special karakter");
}
});

});
</script>

<div class="m-3">
<label for="harga">Harga Produk</label>
<input
id="harga"
name="harga"
type="number"
class="form-control"
required
min="1000"
max="999000"
value="<?=$harga?>"
>
</div>
<div class="mx-3">
<label>Gender</label>
<div>
<div><input type="radio" name="gender" value="p" required
<?php echo $gender =='p' ? 'checked' : ''?> ><label
for="pria">Pria</label></div>
<div><input type="radio" name="gender" value="w" required
<?php echo $gender =='w' ? 'checked' : ''?> ><label
for="wanita">Wanita</label></div>
</div>
</div>
<div class="m-3">
<label for="image_produk">Image Produk</label>
<input
id="image_produk"
name="image_produk"
type="file"
class="form-control"
accept=".jpg"
required
>
</div>
<div class="mx-3 mb-3">
<button class="btn btn-primary w-100"
name="btn_simpan">Simpan</button>
</div>
</form>
</div>
 6. Keranjang

<section class="section bg-blue t-white">

<div class="section-tittle">
<p class="tittle2 b-Awal">Keranjang</p>
<p class="sub-t2 b-Awal">belanjaan yang anda pilih</p>
</div>
<div class="container">
<div>
<?php
$s = "SELECT
a.id as id_keranjang,
a.qty,
b.nama_produk,
b.harga
FROM tb_keranjang a
JOIN tb_produk b ON a.id_produk = b.id
WHERE id_user = $id_user";
$q = mysqli_query($conn, $s) or die(mysqli_error($conn));

$tr = '';
$no = 0;
while($d=mysqli_fetch_assoc($q)){
$no++;
$id_keranjang = $d['id_keranjang'];

$jumlah = $d['harga'] * $d['qty'];

$input_qty = "<input class='form-control qty' type=number

value='$d[qty]' id=qty__$id_keranjang name=qty__$id_keranjang style='max-
width: 100px'> ";

$tr .= "
 <tr>
<td>$no</td>
<td>$d[nama_produk]</td>
<td id=harga__$id_keranjang>$d[harga]</td>
<td>$input_qty</td>
<td class='kanan'
id=jumlah__$id_keranjang>$jumlah</td>
</tr>
";
}

echo "
<form method='post' action='?checkout'>
<table class=table>
<thead>
<th>No</th>
<th>Nama Produk</th>
<th>Satuan</th>
<th>QTY</th>
<th>Jumlah</th>
<thead>
$tr
<tr class='gradasi-hijau'>
<td colspan=4>TOTAL</td>
<td class='kanan tebal' id=total>0</td>
</tr>
</table>

<input type=hidden name=total_hidden id=total_hidden>

<button class='btn btn-success w-100' onclick=\"return

confirm('Yakin untuk checkout?')\">Checkout</button>
</form>
";
?>
</div>
</div>
</section>

<script>
$(function() {
$('.qty').change(function() {
let tid = $(this).prop('id');
let rid = tid.split('__');
let aksi = rid[0];
let id_keranjang = rid[1];

let harga = parseInt($('#harga__'+id_keranjang).text());

let qty = $('#qty__'+id_keranjang).val();

if (qty == 0) {
$('#qty__'+id_keranjang).val(1);
return;
}

let jumlah = harga * qty;

$('#jumlah__'+id_keranjang).text(jumlah);
 let class_qty = document.getElementsByClassName('qty');
console.log(class_qty);

let total = 0
for (let i = 0; i < class_qty.length; i++){

let arr = class_qty[i].id.split('__');

let id_krj = arr[1];

console.log(id_krj);

satuan = parseInt($('#harga__'+id_krj).text());
qty = class_qty[i].value;
total += satuan * qty;

console.log(satuan, qty);
$('#total').text(total);
$('#total_hidden').val(total);
}
});

$('.qty').change();
})
</script>

7. Checkout

<?php
foreach ($_POST as $key => $qty){
if($qty > 1){
// update tb_keranjang
 $arr = explode('__',$key);
$id_keranjang = $arr[1] ?? '';

$s = "UPDATE tb_keranjang SET qty = '$qty' WHERE id='$id_keranjang'";

$q = mysqli_query($conn, $s)or die(mysqli_error($conn));
}
}

$total = $_POST['total_hidden'] ?? die('Butuh data total keranjang');

?>

<section class="section">
<div class="section-tittle">
<p class="tittle2 t-besar t-white">Checkout</p>
<p class="sub-t2 t-white">Silahkan anda bayar sesuai Invoice</p>
</div>
<div class="wadah tengah" style="max-width: 500px; margin:auto">
<div>Total Bayar:</div>
<div class="tebal">Rp <?=number_format($total,0)?></div>
<hr>
<div class="kiri">
<ul>
<li>Cara Bayar : Transfer</li>
<li>No. Rek : 123123123</li>
<li>Bank : BCA cabang Batu</li>
<li>Atas nama : LShop Batu</li>
<li>Paling lambat tanggal 30 Maret 2024</li>
</ul>
</div>
<hr>
<div class="btn btn-primary w-100" onclick="window.print()">Cetak
Invoice</div>
</div>
</section>
 8. Page Not Found

<div class=" bg-sage">

<div class="container">
<div id="na-page" class="d-flex justify-content-center">
<img src="image/notfound.png" alt="page_not_found">
</div>
</div>
</div>
9. Responsivness