Hai Sobat blogger, kembali lagi dengan saya, kali ini kita akan mengenai Cara mudah membuat halaman login Keren dengan program PHP dan CSS. Namu pembahasan kita kali ini tidak membahas mengenai session, namun lebih kepada tips untuk men-design Halaman Login tersebut dengan Script CSS.
Dengan begini, tampilan Halaman login menjadi lebih menarik. Nah gimana langkah-langkahnya, langsung aja kita mulai.
Jalankan Aplikasi WebServer kamu. Yang fungsinya adalah untuk menjalankan Kode program yang akan kita buat dan ditampilkan di web browser.
misalkan saja kita gunakan XAMPP WebServer. kemudian jalankan Module Apache.
Jangan lupa siapkan telebih dahulu folder penyimpanan file program yang akan kita kerjakan. jalankan windows explorer. kemudian beralih ke partisi C:\xampp\htdocs kemudian buat sebuah folder dengan nama website. dan jangan lupa siapkan 2 buah gambar yangmana nantinya gambar pertama kita buat sebagai backgroup halaman dan gambar kedua sebagai objek yang mewakili user/administrator tersebut seperti tampilan program yang sudah jadi di atas.
Nah selanjutnya jalankan Aplikasi Web Editor kamu terserah web editor apa aja. misalnya saya gunakan Adobe Dreamnweaver CS3. kemudian diantara <body>...</body> ketikkan kode berikut ini :
<div class="judul">
<strong>.:: Login Administrator ::.</strong>
</div>
<div class="container">
<img src="admin.PNG" alt="founder">
<form action="proseslogin.php" method="post">
<div class="form-input">
<input type="text" name="username" id="username" placeholder="Enter Username">
</div>
<div class="form-input">
<input type="password" name="password" id="password" placeholder="Enter Password">
</div>
<input type="submit" value="login" name="submit" class="login">
</form>
</div>
Langkah selanjurnya yaitu, ketikkan Script CSS berikut ini tepat dibawah </title>.
<style>
*{margin:0px;padding:0px;}
body{
background-image:urlundefinedbackground.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.judul{
text-align:center;
font-size:36px;
color:#CC6600;
margin-top:10px;
}
.container{
width:500px;
height:330px;
background-color:#999999;
margin:0px auto;
text-align:center;
margin-top:100px;
border-radius:5px;
opacity:.6;
}
.container img{
width:110px;
height:110px;
border-radius:500px;
background:#fff;
padding:5px;
margin-top:-60px;
margin-bottom:30px;
}
input[type="text"],[type="password"]{
width:300px;
height:45px;
font-size:17px;
margin-bottom:20px;
text-align:center;
background:#fff;
border:none;
border-radius:3px;
}
select{
width:300px;
height:40px;
font-size:17px;
margin-bottom:20px;
text-align:center;
background:#fff;
border:none;
}
.login {border:none;
padding:10px 30px;
background:#0099FF;
border-radius:5px;
font-size:17px;
cursor:pointer;
border-bottom:5px solid #0066CC;
}
</style>
Catatan :
Script yang ditandai dengan warna merah merupakan script untuk menampilkan gambar backgroud dan gambar user. seduaikan dengan nama gambar yang kamu sediakan.
Selanjutnya, simpan file tersebut dengan nama index.php di folder yang telah kita siapkan sebelumnya yaitu C:\xampp\htdocs\website. kemudian jalankan aplikasi Web Browser kamu. terserah web browser apa saja. lalu pada address bar ketikkan localhost/website/index.php.
nah itu dia Cara muda untuk membuat Halaman Login Keren dengan menggunakan Script CSS. Semoga bermanfaat.
0 Comments