Sebagai developer web, kita tentu pernah membuat halaman login untuk membolehkan pengguna mengakses fitur tertentu dalam aplikasi. Sejak diluncurkannya bootstrap, tugas seorang desainer web lebih ringan dalam membuat tampilan web yang enak dipandang. Dengan menggunakan bootstrap, kita tidak perlu lagi membuat style (css) sendiri. Tinggal menggunakan style yang sudah disediakan oleh bootstrap.
Merancang Desain Menggunakan Bootstrap
Untuk dapat menggunakan boostrap, kita perlu menyematkan (embed) bootstrap terlebih dahulu. Contohnya sebagai berikut:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
Kode di atas diletakkan di dalam kode head sebuah dokumen HTML.
Merancang Tampilan Login
Kode html yang digunakan untuk membuat tampilan login menggunakan bootstrap adalah di bawah ini:
<div class="container h-100"> <div class="d-flex justify-content-center h-100"> <div class="user_card"> <div class="d-flex justify-content-center"> <div class="brand_logo_container"> <img src="https://nusagates.com/wp-content/uploads/2016/11/logo-1-300x300.png" class="brand_logo" alt="Logo"> </div> </div> <div class="d-flex justify-content-center form_container"> <form> <div class="input-group mb-3"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> <input type="text" name="" class="form-control input_user" value="" placeholder="username"> </div> <div class="input-group mb-2"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-key"></i></span> </div> <input type="password" name="" class="form-control input_pass" value="" placeholder="password"> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlInline"> <label class="custom-control-label" for="customControlInline">Ingat saya</label> </div> </div> </form> </div> <div class="d-flex justify-content-center mt-3 login_container"> <button type="button" name="button" class="btn login_btn">Login</button> </div> <div class="mt-4"> <div class="d-flex justify-content-center links"> Belum punya akun? <a href="#" class="ml-2">Daftar Sekarang</a> </div> <div class="d-flex justify-content-center links"> <a href="#">Lupa Password?</a> </div> </div> </div> </div> </div>
Simpan kode htmldi atas pada sebuah file dengan nama login.html.
Kode CSS atau style yang digunakan untuk mempercantik tampilan halaman login diatas adalah sebagai berikut.
/* Coded with love by Mutiullah Samim */
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #60a3bc !important;
}
.user_card {
height: 400px;
width: 350px;
margin-top: auto;
margin-bottom: auto;
background: #afbd77;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
}
.brand_logo_container {
position: absolute;
height: 170px;
width: 170px;
top: -75px;
border-radius: 50%;
background: #60a3bc;
padding: 10px;
text-align: center;
}
.brand_logo {
height: 150px;
width: 150px;
border-radius: 50%;
border: 2px solid white;
}
.form_container {
margin-top: 100px;
}
.login_btn {
width: 100%;
background: #1e7e34 !important;
color: white !important;
}
.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}
.login_container {
padding: 0 2rem;
}
.input-group-text {
background: #1e7e34 !important;
color: white !important;
border: 0 !important;
border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
background-color: #1e7e34 !important;
}
a{
color: #1e7e34
}Simpan kode css di atas padasebuah file dengan nama style.css. File style.css ini nanti akan diembed ke login.html.
Kode HTML LengkapHalaman Login
Kode lengkap pembuatan halaman login di atas adalah seperti di bawah ini:
<!DOCTYPE html> <html> <head> <title>Login</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> <link rel="stylesheet" href="style.css"> </head> <!--Coded with love by Mutiullah Samim--> <body> <div class="container h-100"> <div class="d-flex justify-content-center h-100"> <div class="user_card"> <div class="d-flex justify-content-center"> <div class="brand_logo_container"> <img src="https://nusagates.com/wp-content/uploads/2016/11/logo-1-300x300.png" class="brand_logo" alt="Logo"> </div> </div> <div class="d-flex justify-content-center form_container"> <form> <div class="input-group mb-3"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> <input type="text" name="" class="form-control input_user" value="" placeholder="username"> </div> <div class="input-group mb-2"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-key"></i></span> </div> <input type="password" name="" class="form-control input_pass" value="" placeholder="password"> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlInline"> <label class="custom-control-label" for="customControlInline">Ingat saya</label> </div> </div> </form> </div> <div class="d-flex justify-content-center mt-3 login_container"> <button type="button" name="button" class="btn login_btn">Login</button> </div> <div class="mt-4"> <div class="d-flex justify-content-center links"> Belum punya akun? <a href="#" class="ml-2">Daftar Sekarang</a> </div> <div class="d-flex justify-content-center links"> <a href="#">Lupa Password?</a> </div> </div> </div> </div> </div> </body> </html>
