PWEB - LATIHAN PERTEMUAN 3

LATIHAN PERTEMUAN 3 PWEB


Nama : Dawamul Fikri Aqil

NRP : 5025201025

Kelas : PWEB B

Tahun : 2022


Tugas : Menerapkan Javascript pada Form

DOKUMENTASI LATIHAN


DESKRIPSI LATIHAN

  • Menerapkan Javascript pada form login dan signup

  • Buatlah sebuah form registrasi yang terdiri dari nama mahasiswa, nrp, mata kuliah, dan dosen. Form registrasi ini memiliki aturan sebagai berikut. Ketika pengguna sistem akan mengisikan data nama dengan memasukkan huruf tertentu maka akan muncul rekomendasi tertentu.


SCREENSHOT

  • Form Login


  • Form Signup


  • Form Registrasi

            

SOURCE CODE

  • Form Login

<!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 Form</title>
</head>
<body align="center">
<h3>LOGIN</h3>
<form onsubmit="submit_form()">
<h4>USERNAME</h4>
<input id="username" type="email" placeholder="Enter your email id" required />
<h4>PASSWORD</h4>
<input id="password" type="password" placeholder="Enter your password" required /> <br /><br />
<input type="submit" value="Login" />
<input type="button" value="Signup" onclick="create()" />
</form>
<script type="text/javascript">
function submit_form() {
alert("Login successfully");
}
function create() {
window.location = "signup.html";
}
</script>
</body>
</html>
view raw login.html hosted with ❤ by GitHub


  • Form Signup

<!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>Signup Form</title>
</head>
<body align="center">
<h1>CREATE YOUR ACCOUNT</h1>
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td>Name</td>
<td><input type="text" placeholder="Enter your name" id="n1" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" placeholder="Enter your email id" id="e1" /></td>
</tr>
<tr>
<td>Set Password</td>
<td><input type="password" placeholder="Set a password" id="p1" /></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" placeholder="Confirm your password" id="p2" /></td>
</tr>
<tr>
<td><input type="submit" value="Create" onclick="create_account()" /></td>
</tr>
</table>
<script>
function create_account() {
var n = document.getElementById("n1").value;
var e = document.getElementById("e1").value;
var p = document.getElementById("p1").value;
var cp = document.getElementById("p2").value;
// password validation
var letters = /^[A-Za-z]+$/;
var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9{2, 4}])+$/;
// other validation
if (n == "" || e == "" || p == "" || cp == "") {
alert("Enter each details correctly");
} else if (!letters.test(n)) {
alert("Name is incorrect most contains alphabets only");
} else if (!email_val.test(e)) {
alert("Invalid email format please enter valid email id");
} else if (p != cp) {
alert("Passwords not matching");
} else if (document.getElementById("p1").value.length > 12) {
alert("Password maximum length is 12");
} else if (document.getElementById("p1").value.length < 6) {
alert("Password minimum length is 6");
} else {
alert("Your account has been created succesfully... Redirecting to JavaTpoint.com");
window.location = "https://www.javatpoint.com/";
}
}
</script>
</body>
</html>
view raw signup.html hosted with ❤ by GitHub


  • Form Registrasi

<!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>Formulir Registrasi - 5025201025</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<img src="img/header.png" alt="home" width="50" height= "50" >
<h2> Form Registrasi </h2>
<h2> Mahasiswa ITS </h2>
</div>
<form name="form" onsubmit="return validate()">
<div class="form-group">
<label>Nama</label>
<input type="text" name="nama" placeholder="Nama Lengkap" class="form-control">
</div>
<div class="form-group">
<label>NRP</label>
<input type="text" name="nrp" placeholder="NRP Mahasiswa" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<label>Mata Kuliah</label>
<select id="slct1" name="slct1" class="form-control" onchange="ndosen(this.id,'slct2')">
<option value="">-Pilih Mata Kuliah-</option>
<option value="GRAFKOM">PPL</option>
<option value="JARKOM">MPPL</option>
<option value="KK">PWEB</option>
<option value="MPPL">GRAFKOM</option>
<option value="PPL">JARKOM</option>
<option value="PWEB">KK</option>
</select>
</div>
<div class="form-group">
<label>Dosen</label>
<select id="slct2" name="dosen" class="form-control">
<option value="">-Pilih MK Terlebih Dahulu-</option>
</select>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</body>
</html>
view raw registrasi.html hosted with ❤ by GitHub
function validate() {
if (document.forms["form"]["nama"].value == "") {
alert("Error: Nama Masih Kosong");
document.forms["form"]["nama"].focus();
return false;
}
if (document.forms["form"]["nrp"].value == "") {
alert("Error: NRP Masih Kosong");
document.forms["form"]["nrp"].focus();
return false;
}
if (document.forms["form"]["email"].value == "") {
alert("Error: Email Masih Kosong");
document.forms["form"]["email"].focus();
return false;
}
if(document.forms["form"]["email"].value.indexOf("@") == -1){
alert("Pastikan format email yang dimasukkan sudah benar.");
document.forms["form"]["email"].focus();
return false;
}
if(document.forms["form"]["email"].value.indexOf(".") == -1){
alert("Pastikan format email yang dimasukkan sudah benar.");
document.forms["form"]["email"].focus();
return false;
}
if (document.forms["form"]["departemen"].selectedIndex == "") {
alert("Error: Mata Kuliah Masih Kosong");
document.forms["form"]["mata-kuliah"].focus();
return false;
}
if (document.forms["form"]["vaksin"].selectedIndex == "" ) {
alert("Error: Dosen Masih Kosong");
document.forms["form"]["dosen"].focus();
return false;
}
return true;
}
function ndosen(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "GRAFKOM"){
var optionArray = ["|-Pilih Dosen-","siska|Bu Siska","darlis|Pak Darlis","anny|Bu Anny"];
} else if(s1.value == "JARKOM"){
var optionArray = ["|-Pilih Dosen-","onggo|Pak Onggo","bagus|Pak Bagus","ary|Pak Ary","hudan|Pak Hudan"];
} else if(s1.value == "KK"){
var optionArray = ["|-Pilih Dosen-","chastine|Bu Chastine","dini|Bu Dini","anny|Bu Anny","nanik|Bu Nanik","darlis|Pak Darlis"];
} else if(s1.value == "MPPL"){
var optionArray = ["|-Pilih Dosen-","sarwo|Bu Sarwo","fajar|Pak Fajar","ratih|Bu Ratih","siti|Bu Siti"];
} else if(s1.value == "PPL"){
var optionArray = ["|-Pilih Dosen-","licha|Bu Licha","ratih|Bu Ratih","yuhana|Bu Yuhana"];
} else if(s1.value == "PWEB"){
var optionArray = ["|-Pilih Dosen-","fajar|Pak Fajar","irfan|Pak Irfan","ridho|Pak Ridho"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
view raw registrasi.js hosted with ❤ by GitHub
body {
background-color: #1a0f5d;
font-family: "Open Sans", sans-serif;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
margin: 0;
}
.container {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
width: 460px;
overflow: hidden;
max-width: 100%;
}
.header {
background-color: #ebe300;
border-bottom: 1px solid #6c86ad;
padding: 20px 40px;
}
.header h2 {
margin: 0;
font-size: 26px;
font-weight: 800;
color: #343a40;
text-align: center;
}
img {
display:block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.form{
position: relative;
}
form{
margin-top: 25px;
height: 500px;
}
view raw registrasi.css hosted with ❤ by GitHub


LAMPIRAN

Demo Form Login

Demo Form Signup

Demo Form Registrasi

Link Repository


Komentar

Posting Komentar

Postingan populer dari blog ini

PPB - Pertemuan 14

Gambar
DOKUMENTASI PPB Nama : Dawamul Fikri Aqil NRP : 5025201025 Kelas : PPB F Tahun : 2024 Tugas: Unscramble App DOKUMENTASI PERTEMUAN 14 PENDAHULUAN Pada pertemuan ke 14, penulis diajarkan materi mengenai "ViewModel and State in Compose". ViewModel adalah sebuah kelas yang dirancang untuk menyimpan dan mengelola data yang biasanya berhubungan dengan UI. Sehingga data tersebut dapat digunakan kembali saat terjadi perubahan konfigurasi. Terkadang, terjadi beberapa perubahan konfigurasi pada device yang kita gunakan, entah itu saat rotasi layar, munculnya virtual keyboard, dan lain-lain. Saat perubahan itu terjadi, android akan melakukan restart terhadap activity yang sedang berjalan. Setelah diajarkan materi penulis diberikan tugas untuk membuat aplikasi Uncramble-App dengan referensi  ViewModel and State in Compose . Untuk implementasi tugas ada di bawah ini. IMPLEMENTASI CODE Github:  https://github.com/noldualima/PPB-5025201025-P14.git MainActivity.kt : sebagai inisiali...
Baca selengkapnya