LATIHAN TM 3 PWEB : Membuat Website Form & Validasinya dengan Javascript

LATIHAN TM 3

Rahmat Faris Akbar
5025201003
PWEB (B)


        Pada kelas PWEB pertemuan ketiga ini, kita berlatih untuk membuat website form dan validasinya menggunakan javascript. Form ini berupa form sign-up.

Berikut meruapakan kode 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>
view raw index.html hosted with ❤ by GitHub


Berikut meruapakan kode 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>
view raw signup.html hosted with ❤ by GitHub


Link Repository : (Source Code)


Tampilan form :



(Tampilan Form)












Comments

Post a Comment

Popular posts from this blog

TUGAS 7 PPB F : ViewModel and State in Compose

Image
TUGAS 7   ViewModel and State in Compose 5025201003 -  Rahmat Faris Akbar PPB (F)           Pada minggu ke-14 kelas Pemrograman Perangkat Bergerak F, kita ditugaskan membuat  aplikasi game Unscramble menggunakan Jetpack Compose dan ViewModel dari library Android Jetpack mengikuti panduan tutorial ViewModel and State in Compose . Panduan ini akan memandu kita melalui pengaturan proyek, memahami arsitektur, dan mengimplementasikan fungsionalitas game. Gambaran Proyek                Aplikasi Unscramble adalah permainan kata tunggal di mana pemain menebak kata yang diacak. Aplikasi ini menampilkan kata yang diacak, dan pemain menebak kata yang benar menggunakan semua huruf yang disediakan. Poin diberikan untuk tebakan yang benar, dan permainan melacak jumlah kata yang ditebak dengan benar. Setiap permainan terdiri dari 10 kata...
Read more

EVALUASI TENGAH SEMESTER PPB F

Image
Evaluasi Tengah Semester   Studi Kasus Aplikasi "myITS Mahasiswa" 5025201003 -  Rahmat Faris Akbar PPB (F) Link Docs:  jawaban dalam bentuk docs 1. Apa keuntungan menggunakan platform mobile Android dibandingkan dengan platform Propietary seperti Apple? Jawaban: Keterbukaan dan Fleksibilitas :  Android adalah sistem operasi yang bersifat open-source, yang memungkinkan para pengembang dan produsen perangkat untuk mengubah dan menyesuaikan sistem sesuai dengan kebutuhan mereka. Hal ini berbeda dengan iOS dari Apple yang memiliki sistem yang tertutup dan terkontrol ketat. Variasi Perangkat :  Android digunakan oleh berbagai merek dan model smartphone dan tablet, memberikan lebih banyak pilihan perangkat bagi konsumen dalam berbagai segmen harga. Sementara itu, Apple hanya menyediakan beberapa model yang umumnya berada di segmen harga lebih tinggi. Biaya Pengembangan yang Lebih Rendah :  Untuk para pengembang, masuk ke pasar Androi...
Read more

Membuat Website Profil Diri menggunakan HTML & CSS

Image
Tugas 1 Rahmat Faris Akbar 5025201003 PWEB (B)           Pada mata kuliah Pemrograman Web diawali dengan tugas membuat sutu profil diri dalam bentuk website. Pada tugas pertama ini kita baru bisa menggunakan html (sebagai structure language dalam website development dan juga konten dari website ini) & css (sebagai desain yang ditambahkan kedalam HTML untuk membentuk layout style). Tools yang digunakan adalah code editor (visual studio code), browser (chrome), dan github. Konten dari profil diri kali ini saya bagi menjadi 5 section yang terdiri dari: Home - sapaan - deskripsi diri - foto - tombol "Hire Me" yang memiliki referensi ke section contact About - perkenalan (nama dan profesi) - cita-cita - download CV - biodata (alamat, umur, website, status, pendidikan, asal, email, dan kontak) - riwayat pendidikan - pengalaman kepanitiaan Roadmaps (hal-hal yang ingin dikuasai dalam perencanaan ke depan) Portofolio (aplikasi yang pernah dibuat beserta link dan...
Read more