Scribd
Upload
46 views8 pages

Modul Latihan Website

The document provides instructions for creating a login page and homepage for a website called MyProducts. It includes steps for setting up the login page template with fields for username and password, validating the login credentials, and redirecting to the homepage upon successful login. It also provides instructions for creating the homepage template with sections for navigation bar, profile/about content, and product listings. The templates include placeholders for adding images, text, and other customizable elements.

Uploaded by

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

Modul Latihan Website

The document provides instructions for creating a login page and homepage for a website called MyProducts. It includes steps for setting up the login page template with fields for username and password, validating the login credentials, and redirecting to the homepage upon successful login. It also provides instructions for creating the homepage template with sections for navigation bar, profile/about content, and product listings. The templates include placeholders for adding images, text, and other customizable elements.

Uploaded by

theleaderofenemy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Jobsheet Latihan

Langkah-langkah pekerjaan :
1. Jalankan Visual Code dan buat folder baru penyimpanan,
2. Membuat halaman baru index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Tambahkan Judul WEB -->
<title>MyProducts | LOGIN</title>
<!-- Tambahkan Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
body {
background-color: #f7f7f7;
}
.centered-content {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-box {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
.logo-img {
max-width: 100px;
margin: 0 auto;
display: block;
}
</style>
</head>
</body>
<!--Membuat Tampilan-->
</body>
</html>

<!--Membuat Tampilan-->
<body>
<div class="container centered-content">
<div class="col-md-4">
<div class="login-box">
<!--Tambah Judul-->
<h2 class="text-center">MyProducts Login</h2>
<!--Tambah gambar depan-->
<img src="image/5.png" alt="Logo Frozen Delights" class="logo-img">
<!--Atur Formulir-->
<form id="loginForm">
<div class="mb-3">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="mb-3">
<input type="password" class="form-control" id="password"
placeholder="Password">
</div>
<!--Atur Button-->
<button type="submit" class="btn btn-outline-success w-100">LOGIN</button>
</form>
</div>
</div>
</div>
</body>

<!--Membuat Perintah validasi-->


<script>
// Data pengguna yang tersimpan (contoh sederhana)
const userData = {
username: 'admin',
password: 'admin1234'
};
// Tangani login form
const loginForm = document.getElementById('loginForm');
loginForm.addEventListener('submit', function(event) {
event.preventDefault();

const username = document.getElementById('username').value;


const password = document.getElementById('password').value;

// Validasi
if (username.trim() === '' || password.trim() === '') {
alert('Username dan password harus diisi.');
} else if (username !== userData.username || password !== userData.password) {
alert('Username atau password tidak valid.');
} else {
// Redirect ke halaman utama setelah login jika valid
window.location.href = 'utama.html';
}
});
</script>

Buat halaman utama.html


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOME | MyProducts</title>
<!-- Tautkan Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Tautan ke Font Awesome CSS (untuk ikon) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css">
<!-- Tambahkan Pengaturan Halaman -->
<style>
body {
/*Tambahkan gambar background Anda, ('folder/nama.jpg')*/
background-image: url('image/background1.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

</style>
</head>
<body>
<!-- Navigasi Menu Bar -->
<!--Section Profile-->
<!--Section Produk-->

<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

<!-- Navigasi Menu Bar -->


<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="index.html">My Products</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#produk">Produk</a>
</li>
</ul>
</div>
</nav>

<!-- Section Profile -->

<section id="about" class="container py-5">


<div class="row">
<!-- Bagian kiri carousel -->
<div class="col-md-6 text-left">
<h2>Gallery</h2>
<div class="container text-center">
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<!-- Ubah Nama file gambarnya disini -->
<img src="image/c21.png" class="d-center w-60" alt="Slide 1">
</div>
<div class="carousel-item">
<!-- Ubah Nama file gambarnya disini -->
<img src="image/d5.png" class="d-center w-60" alt="Slide 2">
</div>
<div class="carousel-item">
<!-- Ubah Nama file gambarnya disini -->
<img src="image/d2.png" class="d-center w-60" alt="Slide 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Carousel (Slideshow) -->

<!-- Bagian kanan dengan keterangan video dan caption -->


<div class="col-md-4 text-left">
<!-- Ubah Keterangan Tentang Produk Anda disini -->
<h2>About Us</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis magni modi
eligendi eaque architecto quidem, distinctio quaerat qui illo, repudiandae explicabo quo
obcaecati dolorem optio corrupti error sapiente? Odit ut consequatur ullam iure corporis harum
cupiditate delectus cumque itaque aperiam! Nemo at fuga expedita libero odit autem, placeat
veniam eaque magnam laborum tempore unde non eius architecto obcaecati facere repellendus
sunt velit dolorum consequuntur sapiente voluptatum quam distinctio.
<address>
<!-- Ubah Nama dan Alamat disini -->
<strong>MyProducts</strong><br>
Jalan Contoh No. 123<br>
Kota Contoh, 12345<br>
Telepon: (123) 456-7890<br>
Email: [email protected]
</address>
</p>
</div>
</div>
</section>

<!--Section Produk-->
<section id="produk" class="container py-5">
<h2>Products</h2>
<div class="container text-center">
<div class="row align-items-center">
<div class="col">
<div class="text-center">
<img src="image/bakso ikan.png" class="rounded w-60 img-fluid" alt="...">
<p class="text-center">Produk 1</p>
</div>
</div>
<div class="col">
<div class="text-center">
<img src="image/bakso beku.png" class="rounded w-60 img-fluid" alt="...">
<p class="text-center">Produk 1</p>
</div>
</div>
<div class="col">
<div class="text-center">
<img src="image/ayam beku.png" class="rounded w-60 img-fluid" alt="...">
<p class="text-center">Produk 1</p>
</div>
</div>
<div class="col">
<div class="text-center">
<img src="image/bakso ikan.png" class="rounded w-60 img-fluid" alt="...">
<p class="text-center">Produk 1</p>
</div>
</div>

</div>
<div class="row align-items-center mt-4">
<div class="col">
<div class="text-center">
<img src="image/bakso beku.png" class="rounded w-60 img-fluid" alt="...">
<p class="text-center">Produk 1</p>
</div>
</div>
<div class="col">
<div class="text-center">
<img src="image/ayam beku.png" class="rounded w-60 img-fluid" alt="...">
<p class="text-center">Produk 1</p>
</div>
</div>
<div class="col">
<div class="text-center">
<img src="image/bakso ikan.png" class="rounded w-60 img-fluid" alt="...">
<p class="text-center">Produk 1</p>
</div>
</div>
<div class="col">
<div class="text-center">
<img src="image/bakso beku.png" class="rounded w-60 img-fluid" alt="...">
<p class="text-center">Produk 1</p>
</div>
</div>

</div>
<div class="order mt-4">
<a href="https://wa.me/081275847175?text=kak%20saya%20mau%20Order%20"
class="btn btn-outline-success">Order Now</a>
</div>
</div>
</section>

You might also like