Senin, 20 Mei 2013
Pada tutorial sebelumnya ebsof sudah memberikan update mengenai "Mempercantik Table dengan CSS pada Website Dinamis Ebsofmedia V.2" ... sehingga tampilaan administrator Website lebih cantik dan enak dilihat , dan lebih user friendly..
Nah Pada tutorial ini, ebsof akan mengupdate website dinamis ebsofmedia V.2 , Kali ini kita akan memodifikasi tampilan Login pada website dinamis ebsofmedia V.2 .. dan lebih tepatnya kita akan "Membuat Form Login Keren Dengan CSS"
Nah untuk mengakses halaman admin , silahkan lakukan acces di addres bar browser anda "localhost/ebsof/adminweb"
Maka akan muncul tampilan Form Login Website dinamis Ebsofmedia V.2 seperti gambar dibawah ini :
Pada tampilan Login ebsofmedia V.2 sebelumnya, sangat sederhana , hanya dibuat dengan menggunakan HTML, yang berupa Tag table, Nah, agar website kita kelihatan lebih indah, dan bagus lagi , Kali ini kita akan menedit tampilan Form Login menjadi seperti gambar di bawah ini :
Pada tutorial Membuat Form Login Keren Dengan CSS ini kita hanya akan mengubah file index.php yang berada pada folder "Adminweb"
Berikut akan saya jelaskan secara bertahap agar lebih mudah dimengerti Oleh ebsofmania :
1. Buka file index.php yang ada pada folder adminweb dengan menggunakan editor anda.
2. Hapus Semua code yang ada pada index.php , dan ganti dengan code di bawah ini :
Perhatikan coding di atas.. yang menghubungkan kepada file lain yang bertipe CSS , tepatnya pada script
code di atas merupakan code yang diletakkan di atas code <head> pada html , dan memliki fungsi memanggil file yang bernama stylelogin.css , ,, Ya.. ini merupakan script css yang akan kita buat ..
3. Buat File baru dengan nama stylelogin.css dengan menggunakan editor anda ,dan copylah script css di bawah ini , kemudian simpan di folder Adminweb (sama dengan file index.php ko tempatnya)
Demikianlah Update dari Membuat website dinamis dengan PHP tentang Membuat Form Login dengan CSS pada Ebsofmedia V.2
Nah Pada tutorial ini, ebsof akan mengupdate website dinamis ebsofmedia V.2 , Kali ini kita akan memodifikasi tampilan Login pada website dinamis ebsofmedia V.2 .. dan lebih tepatnya kita akan "Membuat Form Login Keren Dengan CSS"
Nah untuk mengakses halaman admin , silahkan lakukan acces di addres bar browser anda "localhost/ebsof/adminweb"
Maka akan muncul tampilan Form Login Website dinamis Ebsofmedia V.2 seperti gambar dibawah ini :
Pada tutorial Membuat Form Login Keren Dengan CSS ini kita hanya akan mengubah file index.php yang berada pada folder "Adminweb"
Berikut akan saya jelaskan secara bertahap agar lebih mudah dimengerti Oleh ebsofmania :
1. Buka file index.php yang ada pada folder adminweb dengan menggunakan editor anda.
2. Hapus Semua code yang ada pada index.php , dan ganti dengan code di bawah ini :
<head> <title>- LogIn -</title> <link rel="stylesheet" href="stylelogin.css" type="text/css" media="all" /> </head> <form name="form1" method="post" action="cek_login.php"> <label>Username : </label> <input name="username" type="text" id="username" size="10"> <label>Password : </label> <input name="password" type="password" id="password" size="10"> <input type="submit" value="Login" name="submit" class="submit" /> </form>
Perhatikan coding di atas.. yang menghubungkan kepada file lain yang bertipe CSS , tepatnya pada script
<link rel="stylesheet" href="stylelogin.css" type="text/css" media="all" />
code di atas merupakan code yang diletakkan di atas code <head> pada html , dan memliki fungsi memanggil file yang bernama stylelogin.css , ,, Ya.. ini merupakan script css yang akan kita buat ..
3. Buat File baru dengan nama stylelogin.css dengan menggunakan editor anda ,dan copylah script css di bawah ini , kemudian simpan di folder Adminweb (sama dengan file index.php ko tempatnya)
body{
background: #3485fe;
}
form {
width: 201px;
padding: 20px;
margin:150px auto;
border: 2px solid #FFFFFF;
background:url(categories-back.gif) transparent;
/*** Rounded Corners ***/
border-radius:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
/*** Shadow behind the box ***/
-moz-box-shadow:0px -5px 300px #FFFFFF;
-webkit-box-shadow:0px -5px 300px #FFFFFF;
/*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
background:-moz-linear-gradient(19% 75% 90deg,#030615, #3485fe);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#3485fe), to(#030615));
}
input {
width: 200px;
padding: 6px;
margin-bottom: 10px;
border-top: 1px solid #030615;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
background: #ffffff;
border-radius:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
/*** Transition Selectors - What properties to animate and how long ***/
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;
/*** Adding a small shadow ***/
-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
}
input:hover {
-webkit-box-shadow: 0px 0px 4px #000;
background: #317ff3;
}
input.submit {
width: 100px;
color: #fff;
text-transform: uppercase;
text-shadow: #000 1px 1px;
border-top: 1px solid #ad64e0;
margin-top: 10px;
/*** Adding CSS3 Gradients ***/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#030615), to(#3485fe));
background: -moz-linear-gradient(19% 75% 90deg,#030615, #3485fe);
}
input.submit:hover {
-webkit-box-shadow: 0px 0px 2px #000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#317ef2), to(#1f4e9a));
background: -moz-linear-gradient(19% 75% 90deg,#1f4e9a, #317ef2);
}
input.submit:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6));
background: -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9);
}
label {
font-size: 12px;
font-family: arial, sans-serif;
list-style-type: none;
color: #fff;
text-shadow: #000 1px 1px;
margin-bottom: 5px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
}
Demikianlah Update dari Membuat website dinamis dengan PHP tentang Membuat Form Login dengan CSS pada Ebsofmedia V.2