Tugas 6 - Form Login

 Tugas berikut saya membuat website berisi form untuk sign in dan sign up yang menggunakan background carousel. Saya membuat website ini menggunakan html, bootstrap, dan javascript. Untuk link yang dapat diakses adalah sebagai berikut : Link Website

Untuk visualisasi dari website bisa dilihat sebagai berikut : 

Sign In :


Sign Up : 


Source Code : 

index.html

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!--Custom styles-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="d-flex justify-content-center h-100">
<div class="card">
<div class="card-header">
<h3>Sign In</h3>
<div class="d-flex justify-content-end social_icon">
<span><i class="fab fa-facebook-square"></i></span>
<span><i class="fab fa-google-plus-square"></i></span>
<span><i class="fab fa-twitter-square"></i></span>
</div>
</div>
<div class="card-body">
<form name="login" onsubmit="return validateForm()">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" id="username" class="form-control" placeholder="username">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" id="password" class="form-control" placeholder="password">
</div>
<div class="row align-items-center remember">
<input type="checkbox">Remember Me
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn float-right login_btn">
</div>
</form>
</div>
<div class="card-footer">
<div class="d-flex justify-content-center links">
Don't have an account?<a href="sign-up.html">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
<script>
function validateForm() {
if (document.forms["login"]["username"].value == "") {
alert("Username tidak boleh kosong");
document.forms["login"]["username"].focus();
return false;
}
else if (document.forms["login"]["password"].value == "") {
alert("Password Tidak Boleh Kosong");
document.forms["login"]["password"].focus();
return false;
}
alert("login berhasil")
}
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

sign-up.html

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Sign Up Page</title>
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!--Custom styles-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="d-flex justify-content-center h-100">
<div class="card">
<div class="card-header">
<h3>Sign Up</h3>
<div class="d-flex justify-content-end social_icon">
<span><i class="fab fa-facebook-square"></i></span>
<span><i class="fab fa-google-plus-square"></i></span>
<span><i class="fab fa-twitter-square"></i></span>
</div>
</div>
<div class="card-body">
<form name="signup" onsubmit="return validateForm()" action="index.html">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" id="username" name="username" class="form-control" placeholder="Username">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="email" id="email" name='email' class="form-control" placeholder="Email">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" id="password" name="password" class="form-control" placeholder="password">
</div>
<div class="form-group">
<input type="submit" value="Sign Up" class="btn float-right login_btn">
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function validateForm() {
if (document.forms["signup"]["username"].value == "") {
alert("Username tidak boleh kosong");
document.forms["signup"]["username"].focus();
return false;
}
else if (document.forms["signup"]["email"].value == "") {
alert("Email Tidak Boleh Kosong");
document.forms["signup"]["email"].focus();
return false;
}
else if (document.forms["signup"]["password"].value == "") {
alert("Password Tidak Boleh Kosong");
document.forms["signup"]["password"].focus();
return false;
}
alert("Akun Berhasil Dibuat")
}
</script>
</body>
</html>
view raw sign-up.html hosted with ❤ by GitHub

Comments

Post a Comment

Popular Posts