Tugas Bootstrap

 Pada tugas ini diminta untuk membuat form login dan contact

Berikut ini websitenya: Link

dan berikut ini codenya:

 

<!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>Form Log In</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<style>
.login {
min-height: 100vh;
}
.bg-image {
background-image: url('learning.jpg');
background-size: cover;
background-position: center;
}
.login-heading {
font-weight: 300;
}
.btn-login {
font-size: 0.9rem;
letter-spacing: 0.05rem;
padding: 0.75rem 1rem;
}
</style>
<body>
<div class="container-fluid ps-md-0">
<div class="row g-0">
<div class="d-none d-md-flex col-md-4 col-lg-7 bg-image"></div>
<div class="col-md-8 col-lg-5">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-8 mx-auto">
<h3 class="login-heading mb-4">Leave us a message!</h3>
<h5>Contact Form</h5>
<!-- contact -->
<form name="formPendaftaran" action="" onsubmit="return validateForm()" id="myForm">
<div class="form-floating mb-3">
<input type="name" name="nama" class="form-control" id="floatingInput" placeholder="nama">
<label for="floatingInput">Name</label>
</div>
<div class="form-floating mb-3">
<input type="email" name="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="phone" name="phone" class="form-control" id="floatingInput" placeholder="phone">
<label for="floatingInput">Phone Number</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" name="komen" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>
<div class="d-grid">
<button class="btn btn-lg btn-primary btn-login text-uppercase fw-bold mb-2" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function validateForm() {
if (document.forms["formPendaftaran"]["nama"].value == "") {
alert("Fill name!");
document.forms["formPendaftaran"]["nama"].focus();
return false;
}
if (document.forms["formPendaftaran"]["email"].value == "") {
alert("Fill email!");
document.forms["formPendaftaran"]["email"].focus();
return false;
}
if (document.forms["formPendaftaran"]["phone"].value == "") {
alert("Fill password!");
document.forms["formPendaftaran"]["phone"].focus();
return false;
}
if (document.forms["formPendaftaran"]["komen"].value == "") {
alert("Fill password!");
document.forms["formPendaftaran"]["komen"].focus();
return false;
}
swal({
title: "Data Berhasil Tersimpan",
text: "Terima kasih telah mengisi form!",
icon: 'success',
}).then(okay => {
if (okay) {
window.location.href = "index.html";
}
});
return false;
}
</script>
</body>
</html>
view raw contact.html hosted with ❤ by GitHub
<!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>Form Log In</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<style>
.login {
min-height: 100vh;
}
.bg-image {
background-image: url('learning.jpg');
background-size: cover;
background-position: center;
}
.login-heading {
font-weight: 300;
}
.btn-login {
font-size: 0.9rem;
letter-spacing: 0.05rem;
padding: 0.75rem 1rem;
}
</style>
<body>
<div class="container-fluid ps-md-0">
<div class="row g-0">
<div class="d-none d-md-flex col-md-4 col-lg-7 bg-image"></div>
<div class="col-md-8 col-lg-5">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-8 mx-auto">
<h3 class="login-heading mb-4">LOGIN FORM</h3>
<!-- Sign In Form -->
<form name="formPendaftaran" action="" onsubmit="return validateForm()" id="myForm">
<div class="form-floating mb-3">
<input type="email" name="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="password" name="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="rememberPasswordCheck">
<label class="form-check-label" for="rememberPasswordCheck">
Remember password
</label>
</div>
<div class="d-grid">
<button class="btn btn-lg btn-primary btn-login text-uppercase fw-bold mb-2" type="submit">Sign in</button>
<div class="text-center">
<a class="small" href="#">Forgot password?</a>
</div>
</div>
<div class="text-center">
<hr style="width: 100%; text-align:center; color: black;" />
<h6>Have a message for us? Please drop <a href="contact.html" class="text-primary">here</a>.</h6>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function validateForm() {
if (document.forms["formPendaftaran"]["email"].value == "") {
alert("Fill email!");
document.forms["formPendaftaran"]["email"].focus();
return false;
}
if (document.forms["formPendaftaran"]["password"].value == "") {
alert("Fill password!");
document.forms["formPendaftaran"]["password"].focus();
return false;
}
swal({
title: "Data Berhasil Tersimpan",
text: "Terima kasih telah mengisi form!",
icon: 'success',
}).then(okay => {
if (okay) {
window.location.href = "index.html";
}
});
return false;
}
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Comments

Post a Comment

Popular posts from this blog

Tugas 1 PWEB - B (2021)

Image
 Abiya Sabitta Ragadani 05111940000166 PWEB - B (2021) Berikut ini adalah hasil dari tugas pembuatan data diri/CV menggunakan HTML.     Berikut ini adalah source code dari cv yang sudah dibuat. Pada html ini menggunakan h2 sampai h5 untuk header sesuai kebutuhan, dan untuk paragraf menggunakan p. Kemudian untuk setiap judul dipisahkan dengan div masing-masing untuk memudahkan mengedit pada cssnya. Dan untuk foto menggunakan img dengan source langsung pada folder yang sama. Dan ini merupakan source code dari cssnya.
Read more

Tugas 8 PWEB B

Image
Nama : Abiya Sabitta NRP : 05111940000166 Pada pertemuan ke-13 & ke-14 kelas PWEB B, kami diberikan tugas untuk mengimplemetasikan penggunaan PHP dan MySQL untuk membuat sebuah program web yang dapat mengatasi pendaftaran siswa baru. Website disusun menggunakan HTML, CSS dan library Bootstrap, kemudian untuk backendnya menggunakan PHP, dan databasenya menggunakan MySQL. Setelah web berhasil di susun secara lokal, web tersebut kemudian perlu di  hosting -  kan. Berikut tampilan websitenya            Code:
Read more