Pemwebprakp4 2218004

Pertemuan 4 : Java Script Bagian 2
Tugas 4 : Flash Gym

Nama / Nim : Abizhaki Ramadhan (2218004)
Kelas :C
Pengajar : RADEN ADITYO PRIYO HARJUNO
4.1 Tujuan
1. Praktikan dapat memahami struktur dasar
2. Praktikan dapat memahami fungsi tag – tag dasar HTML
3. Praktikan dapat membuat halaman web menggunakan HTML
4.2 Alat dan Bahan
1. Laptop/pc
2. Modul Praktikum Web 2024
3. TextEditor (Visual Studio Code / Sublime Text)
4.3 Langkah-langkah
1. Menambahkan pop up boxes pada Login.html
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="image tugas/logo flash.png" />
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
background-image: url('login.jpg');
background-size: cover;
background-position: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
background-color: #fff;
padding: 100px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
p {
color: #666;
}
form {
margin-top: 20px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input:focus {
border-color: #007bff;
}
button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
}
nav {
margin-top: 10px;
}
nav span {
color: #333;
}
nav a {
color: #007bff;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
.popup {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border-radius: 5px;
border: 2px solid #007bff;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>LOGIN FLASH GYM</h1>
<p>Sudah Siap Angkat Beban?</p>
<form action="" method="post" onsubmit="return validateForm()">
<input type="text" name="username" id="username"
placeholder="Username" required>
<input type="password" name="password" id="password"
placeholder="Password" required>
<button type="submit">Login</button>
</form>
<p></p>
<nav>
<span> Lupa Password ?</span> <a
onclick="openRecoveryPopup()">Recovery</a>
</nav>
<p></p>
<nav>
<span>Buat Member</span> <a href="Register.html"
class="register">Register</a>
</nav>
</div>
</div>


<div class="popup" id="recoveryPopup">
<div class="popup-content">
<span class="close-btn" onclick="closeRecoveryPopup()">x</span>

<h2>Lupa Password</h2>
<p>Masukkan alamat email Anda untuk mengatur ulang kata
sandi.</p>
<input type="email" placeholder="Alamat Email" required>
<button type="button" onclick="resetPassword()">Kirim</button>

</div>
</div>
<script>
function validateForm() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username === '' || password === '') {

document.getElementById('popup').style.display = 'block';
return false;
}
return true;
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
function openRecoveryPopup() {
document.getElementById('recoveryPopup').style.display =
'block';
}
function closeRecoveryPopup() {
var recoveryPopup = document.getElementById('recoveryPopup');
recoveryPopup.style.animation = 'fadeOut 0.5s ease';
setTimeout(function () {
recoveryPopup.style.display = 'none';
recoveryPopup.style.animation = '';
}, 500);
}
function resetPassword() {
// Logika untuk mengatur ulang kata sandi
alert('Fungsi untuk mengatur ulang kata sandi akan ditambahkan
di sini.');
}
</script>
</body>
</html>
Hasil Tampilan :
Analisa :
Program di atas merupakan sebuah penambahan java script berupa pop-up boxes
pada login.html, pop-up boxes akan muncul apabila user mengklik recovery
menggunakan function openrecoverypopup(). Dan di dalam pop up tersebut berisikan
function resetpassword() yang berfungsi untuk mengatur ulang kata sandi melalui
verifikasi email.
2. Menambahkan pop up boxes pada Register.html
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Register</title>
<style>
body {
margin: 0;
padding: 0;
}
p {
text-align: center;
}
div.container {
margin: 20px auto;
max-width: 60%;
padding: 20px;
border-radius: 5px;
}
h1 {
color: #333;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ccc;
}
th {
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 2px solid #030303;
box-sizing: border-box;
}
input[type="radio"] {
margin-right: 5px;
}
button {
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
display: block;
margin: 20px auto;
}
button:hover {
}
/* animasi Popup box */

.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
border-radius: 5px;
animation: fadeIn 0.3s ease forwards, slideIn 0.3s ease
forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
}
to {
}
}
@media (max-width: 768px) {

div.container {
max-width: 90%;
}
}
</style>
</head>
<body>
<h1>Register</h1>
<p>Silahkan Masukkan Data Diri Anda</p>
<table>
<tbody>
<tr>
<th>Nama Lengkap</th>
<td><input type="text" id="username" name="username"
placeholder="Masukkan Nama" required /></td>
</tr>
<tr>
<th>Umur</th>
<td><input type="text" id="age" name="age"
placeholder="Masukkan Umur" required /></td>
</tr>
<tr>
<th>Jenis Kelamin</th>
<td>
<input type="radio" id="pria" name="Gender"
value="pria">
<label for="pria">Pria</label><br>
<input type="radio" id="wanita" name="Gender"
value="wanita">
<label for="wanita">Wanita</label><br>
</td>
</tr>
<tr>
<th>Alamat</th>
<td><input type="text" id="Address" name="Address"
placeholder="Masukkan Alamat" required /></td>
</tr>
<tr>
<th>Email</th>
<td><input type="text" id="email" name="email"
placeholder="Masukkan Email" required /></td>
</tr>
<tr>
<th>No Telp</th>
<td><input type="text" id="Phone" name="Phone"
placeholder="Masukkan No Telp" required /></td>
</tr>
</tbody>
</table>
<button type="button" onclick="validateForm()">Daftar</button>
</div>


<div id="popup" class="popup">
<p>Semua data formulir harus diisi!</p>
<button onclick="closePopup()">Tutup</button>
</div>
<div id="successPopup" class="popup">
<p>Formulir berhasil diisi! Data Anda akan segera diproses.</p>
<button onclick="closeSuccessPopup()">Tutup</button>
</div>
<script>
var username = document.getElementById("username").value;
var age = document.getElementById("age").value;
var address = document.getElementById("Address").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("Phone").value;
if (username === '' || age === '' || address === '' || email ===
'' || phone === '') {
document.getElementById("popup").style.display = "block";
} else {
showSuccessPopup();
}
}
function showSuccessPopup() {
document.getElementById("successPopup").style.display = "block";
}
function closeSuccessPopup() {
document.getElementById("successPopup").style.display = "none";
}
document.getElementById("popup").style.display = "none";
}
</script>
</body>
</html>
Hasil Tampilan :
Analisa :
Program di atas merupakan sebuah penambahan java script berupa pop-up boxes
pada Register.html, pop-up boxes akan muncul apabila user mengisi atau mengosongkan
formulir. Jika user mengosongkan formular maka program akan menjalankan statement
document.getElementById("popup").style.display = "block";. Dan jika user mengisi
formulir tanpa mengosongkan satu pun maka program akan menjalankan function
ShowSuccessPopup().
3. Menambahkan Web storage (Local Storage) pada Login.html
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<style>
body {
margin: 0;
padding: 0;
background-position: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
padding: 100px;
}
h1 {
color: #333;
}
p {
color: #666;
}
form {
margin-top: 20px;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input:focus {
border-color: #007bff;
}
button {
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
}
nav {
margin-top: 10px;
}
nav span {
color: #333;
}
nav a {
color: #007bff;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
.popup {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
border-radius: 5px;
border: 2px solid #007bff;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="content">
<h1>LOGIN FLASH GYM</h1>
<p>Sudah Siap Angkat Beban?</p>
<form action="" method="post" onsubmit="return validateForm()">
<input type="text" name="username" id="username"
placeholder="Username" required>
<input type="password" name="password" id="password"
placeholder="Password" required>
<button type="submit">Login</button>
</form>
<p></p>
<nav>
<span> Lupa Password ?</span> <a
onclick="openRecoveryPopup()">Recovery</a>
</nav>
<p></p>
<nav>
<span>Buat Member</span> <a href="Register.html"
class="register">Register</a>
</nav>
</div>
</div>

<div class="popup" id="recoveryPopup">
<div class="popup-content">
<span class="close-btn" onclick="closeRecoveryPopup()">x</span>

<h2>Lupa Password</h2>
<p>Masukkan alamat email Anda untuk mengatur ulang kata
sandi.</p>
<input type="email" placeholder="Alamat Email" required>
<button type="button" onclick="resetPassword()">Kirim</button>

</div>
</div>
<script>

return false;
}
return true;
}
document.getElementById('popup').style.display = 'none';
}
function openRecoveryPopup() {
document.getElementById('recoveryPopup').style.display =
'block';
}
function closeRecoveryPopup() {
var recoveryPopup = document.getElementById('recoveryPopup');
recoveryPopup.style.animation = 'fadeOut 0.5s ease';
setTimeout(function () {
recoveryPopup.style.display = 'none';
recoveryPopup.style.animation = '';
}, 500);
}
function resetPassword() {
// Logika untuk mengatur ulang kata sandi
alert();
}
window.onload = function () {
var storedUsername = localStorage.getItem('username');
var storedPassword = localStorage.getItem('password');
if (storedUsername && storedPassword) {
document.getElementById('username').value = storedUsername;
document.getElementById('password').value = storedPassword;
}
};

return false;
}
localStorage.setItem('username', username);
localStorage.setItem('password', password);
return true;
}
</script>
</body>
</html>
Hasil Tampilan :
Analisa :
Program di atas merupakan sebuah penambahan java script berupa webstorage
(local storage) yang berfungsi untuk menyimpan data inputan yang belum di masukan ke
dalam database dan akan di simpan di penyimpanan lokal. local storage dapat di temukan
pada statement window.onload = function(), yang di mana statement tersebut akan
menyimpan data username dan password.

Pemwebprakp4 2218004

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

Pemwebprakp4 2218004

Uploaded by

Copyright:

Available Formats

Pertemuan 4 : Java Script Bagian 2

Tugas 4 : Flash Gym

if (username === '' || password === '') {

/* animasi Popup box */

@media (max-width: 768px) {

if (username === '' || password === '') {

if (username === '' || password === '') {

You might also like