Latihan Pertemuan 3: Pemrograman Web
Latihan Pertemuan 3: Pemrograman Web Kelas B
Nama: Moh Akmal Ali Dzikri
NRP: 5025201204
Latihan membuat Login dan Sign Up menggunakan JavaScript, yang dikejakan saat pertemuan ketiga di dalam kelas.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 Basic</title> | |
| </head> | |
| <body align> | |
| <h3>LOGIN</h3> | |
| <form id="Login_form" onsubmit="submit_form()"> | |
| <h4>USERNAME</h4> | |
| <input type="text " placeholder="Enter your email id " /> | |
| <h4>PASSWORD</h4> | |
| <input type="password " placeholder="Enter your password " /> </br></br> | |
| <input type="submit" value="Login "/> | |
| <input type="button" value="SignUp " onClick="create() " /> | |
| </form> | |
| <script type="text/javascript "> | |
| function submit_form() { | |
| alert("Login successful "); | |
| } | |
| function create() { | |
| window.location = "signup.html "; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 Page</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="text" placeholder="Enter your email id" id="e1" /></td> | |
| </tr> | |
| <tr> | |
| <td>Set password</td> | |
| <td> | |
| <input type="password" placeholder="Set your password" id="p1" /> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>Confirm password</td> | |
| <td> | |
| <input type="password" placeholder="Confirm your password" id="p2" /> | |
| </td> | |
| </tr> | |
| </table> | |
| <input type="submit" value="create" onclick="create_acccount()" /> | |
| <script type="text/javascript"> | |
| function create_acccount() { | |
| var n = document.getElementById("n1").value; | |
| var e = document.getElementById("e1").value; | |
| var p = document.getElementById("p1").value; | |
| var cp = document.getElementById("p2").value; | |
| // code for pass validation | |
| var letters = /^[A-Za-z]+$/; | |
| var email_val = | |
| /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; | |
| //other validations required code | |
| if (n == "" || e == "" || p == "" || cp == "") { | |
| alert("Enter each details correctly"); | |
| } else if (!letters.test(n)) { | |
| alert("Name is incorrect must contain 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