Membuat Form Login Degan PHP Dan MySQL Lengkap Dengan CSS ( Part 3 )
MEMBUAT FORM LOGIN DENGAN PHP DAN MYSQL LENGKAP DENGAN CSS
Setelah sebelumnya kita mempelajari bagaimana alur sebuah form login bekerja sekarang kita akan memberikan pewarnaan pada halaman login ini. Jadi kita akan menanamkan syntax CSS agar halaman login yang kita buat ini memiliki kesan bagus, keren dan enak dipandang. Saya harapkan sobat sudah mengikuti Tutorial PHP sebelumnya yaitu Part 1 dan Part 2 wajib sobat ikuti agar kita tidak tersesat dijalan dan juga sobat juga harus memiliki dasar - dasar PHP dan CSS dan juga sobat harus memiliki alat dan bahan agar form login yang kita buat bisa maksimal. Berikut alat dan bahan yang dibutuhkan
ALAT DAN BAHAN
MEMBUAT LOGIN BERGAYA FLAT DESAIN
Sekarang kita memasuki Tahap Cara Membuat Halaman Login Bergaya Flat Desain , yang pertama sobat sediakan file - file yang dibutuhkan terlebih dahulu seperti background dan font yang sudah saya sediakan tadi, pilih lato-regular lalu copy ke folder kerja sobat yang sudah kita buat pada tutorial sebelumnya.
Jika sudah kita rombak lagi file index.php lalu rubah syntaxnya menjadi seperti ini
index.php
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<h2>Membuat Halaman Login Sederhana<br>
<small>www.script-kiddies.org</small></h2>
</center>
<div class="form-login">
<div class="form-header">
<h3>HALAMAN LOGIN</h3>
</div>
<div class="form-body">
<form method="POST" action="proses.php">
<center>
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" name="submit" value="Login">
</center>
</form>
</div>
</div>
</body>
</html>
 |
| Maka tampilanya akan berubah seperti ini |
style.css
@font-face{
src: url("lato-regular.ttf");
font-family: lato;
}
*{
font-family: lato;
box-sizing: border-box;
}
body{
margin: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("bg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
h2{
color: white;
text-shadow: 2px 3px 5px black;
}
.form-login{
background: white;
width: 35%;
margin: 0 auto;
border: 1px solid #e11616;
}
.form-header{
background: #e11616;
color: white;
padding: 10px 12px;
text-align: center;
}
.form-body{
padding: 8%;
}
input[type=text],
input[type=password]{
background: transparent;
border-radius: 0;
border-bottom: 2px solid #e11616;
border-top: 0;
border-left: 0;
border-right: 0;
width: 80%;
margin-bottom: 10%;
font-weight: bold;
font-size: 13px;
padding-top: 10px;
padding-bottom: 10px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
input[type=text]:focus,
input[type=password]:focus{
width: 85%;
}
input[type=submit]{
background: #e11616;
border-radius: 5px;
width: 80%;
color: white;
border: 1px solid transparent;
padding: 10px 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}
input[type=submit]:hover{
background: crimson;
}
 |
| Nahh tampilan login menjadi lebih bagus |
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("bg.png");Lalu saya mewarnai dan mengatur jarak form login sesuai dengan class nya masing - masing dan saya juga memberikan efek pada form input yaitu hanya ada sebuah garis bawah yang saya wakli border-bottom dan border lain saya hilangkan dan juga saya mengatur ukuran dari font ketika input tersebut terisi
input[type=text]:focus,Berfungsi ketika input tersebut terfokuskan atau ketika input kita klik maka ukuran dari form input akan menjadi lebih lebar
input[type=password]:focus{
width: 85%;
}
input[type=submit]:hover{Hover berguna ketika mouse diarahkan maka element yang dimaksud akan berubah sesuai setting yang kita tetapkan. Pada kasus ini saya merubah background dari button submit menjadi warna dengan kode crimson
background: crimson;
}
 |
| Halaman Login |
 |
| Halaman admin silahkan sobat kembangkan |
Oke kita sudah selesai membuat sebuah form login sekaligus memberikan pewarnaan pada form login tersebut. Jadi seperti inilah alur dari membuat sebuah form login lengkap dengan validasi dan stylenya sobat bisa kembangkan lagi apa yang saya sampaikan dan jika sobat memiliki pertanyaan silahkan berikan komentar. Oh ya untuk tutorial form login akan saya lanjutkan pada kesempatan yang akan datang. Sekian Terima Kasih
Tidak ada komentar :
Posting Komentar