TUGAS PWEB-D Pertemuan - 4 : Bootstrap
TUGAS PWEB-D Pertemuan - 4 Membuat Form Login dengan Bootstrap
Perkenalkan nama saya Andymas Narendra Bagaskara, NRP 05111940000192, Kelas Pemrograman Web D. Pada pertemuan keempat kelas PWEB-D, saya diberi tugas untuk membuat website Form Login dengan menggunakan Bootstrap
Berikut ini hasil dari website Loginnya :
Link Websitenya : https://tugas6pweb.netlify.app/
Dan untuk hosting domainnya saya menggunakan Netlify dengan cara memasukan file html Biodata
ke dalam website netlify tersebut.
Source Code HTML :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>login</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /></head><style>
</style> <section class="vh-100" > <div class="container py-5 h-100"> <div class="row d-flex justify-content-center align-items-center h-100"> <div class="col col-xl-10"> <div class="card" style="border-radius: 1rem;"> <div class="row g-0"> <div class="card-body p-4 p-lg-5 text-black"> <form name="login" onsubmit="return validateForm()"> <div class="d-flex align-items-center mb-3 pb-1"> <i class="fas fa-cubes fa-2x me-3" style="color: #ff6219;"></i> <img class='img-fluid' src="https://seeklogo.com/images/V/valorant-logo-FAB2CA0E55-seeklogo.com.png" alt=""> </div> <h5 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Sign in to your account</h5> <div class="form-outline mb-4"> <input type="email" id="email" name='email' class="form-control form-control-lg" /> <label class="form-label">Email Address</label> </div> <div class="form-outline mb-4"> <input type="password" id="password" name="password" class="form-control form-control-lg" /> <label class="form-label">Password</label> </div> <div class="pt-1 mb-4"> <button class="btn btn-danger btn-lg btn-block" type="submit">Login</button> </div> <p class="mb-5 pb-lg-2" style="color: #393f81;">Don't have an account? <a href="#" style="color: #393f81;">Register here</a></p> <a class="text-black-50 text-muted" href="contact.html">Need Help?</a> </form> </div> </div> </div> </div> </div> </div> </section> <script> let i = 1; function slideShow() { if (i > 3) i = 1; console.log(i) document.body.style.backgroundImage = "url('" + i + ".jpg ')"; i++; setTimeout(slideShow, 10000); } function validateForm() { if (document.forms["login"]["email"].value == "") { alert("Email tidak boleh kosong"); document.forms["login"]["email"].focus(); return false; } else if (document.forms["login"]["password"].value == "") { alert("Password Tidak Boleh Kosong"); document.forms["login"]["password"].focus(); return false; } alert("login successful") } slideShow() </script>
</body></html>
Source Contact.html :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>contact</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /></head>
<body> <section class="vh-100"> <div class="container py-5 h-100"> <div class="row d-flex justify-content-center align-items-center h-100"> <div class="col col-xl-10"> <div class="card" style="border-radius: 1rem;"> <div class="row g-0"> <div class="card-body p-4 p-lg-5 text-black"> <form name ='contact' onsubmit="return validateForm()"> <h2 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Report Your Problem</h2> <div class="d-flex flex-row mx-auto justify-content-between m-auto"> <div> <div class="form-outline mb-4"> <input type="text" id="name" name='name' class="form-control form-control-lg" /> <label class="form-label">Full Name</label> </div> <div class="form-outline mt-4 "> <input type="email" id="email" name='email' class="form-control form-control-lg" /> <label class="form-label">Email address</label> </div> <div class="pt-1 mb-4"> <button class="btn btn-danger btn-lg btn-block" type="submit">Send!</button> </div> </div> <div class="mx-5" style="width: 60%;"> <textarea type="text" rows="6" id="note" name='note' class="form-control form-control-lg"></textarea> <label class="form-label">What do you want to tell us?</label> </div> </div> <a class="small text-muted" href="index.html">Home</a> </form> </div> </div> </div> </div> </div> </div> </section> <script> let i = 1; function slideShow() { if (i == 3) i = 1; document.body.style.backgroundImage = "url('" + i + ".jpg ')"; i++; setTimeout(slideShow, 10000); } function validateForm() { if (document.forms["contact"]["name"].value == "") { alert("Email tidak boleh kosong"); document.forms["contact"]["email"].focus(); return false; } if (document.forms["contact"]["email"].value == "") { alert("Email Tidak Boleh Kosong"); document.forms["contact"]["email"].focus(); return false; } if (document.forms["contact"]["note"].value == "") { alert("Note Tidak Boleh Kosong"); document.forms["contact"]["note"].focus(); return false; } alert("Pesan Dikirimkan"); return true; } slideShow() </script></body></html>
Sekian penjelasan tugas dari saya mohon maaf jika ada kesalahan, sekian terima kasih.
Komentar
Posting Komentar