Pemrograman Web Latihan TM 3 - Membuat Form Login dan Signup
Muhammad Lintang Panjerino
5025201045
Pemrograman Web Kelas B
Deskripsi Tugas
Post kali ini adalah latihan pada TM 3 yaitu latihan menerapkan Javascript pada form login dan signup. Source code dari website ini terletak pada sebuah repository di akun Github saya dan sudah di-deploy menggunakan Github Pages.
Link Form Login: https://mlintang20.github.io/pemrograman-web-latihan-tm-3/
Link Form Signup: https://mlintang20.github.io/pemrograman-web-latihan-tm-3/signup.html
Link Repository Github: https://github.com/mlintang20/pemrograman-web-latihan-tm-3
Screenshot website:
index.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 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>
signup.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>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>
Komentar
Posting Komentar