Cara Membuat Form Login

Cara Membuat Form Login - Pada kesempatan kali ini saya akan memberiakan tutorial bagaiman cara membuat form login dengan html/php. Disini saya menggunakan sublime text 3 sebagai text editor dan xammp sebagai web server dan tentunya untuk membuat database. Saya saran kalian untuk mendownload kedua aplikasi diatas atau bisa klik disini untuk mendownload sublime text dan disini untuk xampp. Lansung saja kita ke topik utama Pertama jalankan Apace dan Mysql pada xampp.

Form Login

Buatlah sebuah folder baru sebagi contoh disni saya membuat folder dengan nama blog di dalam folder htdocs biasanya terdapat di C://xampp/htdocs

Lalu buka lah folder baru tersebut menggunakan sublime text
Lalu buatlah sebuah file dengan nama login.php atau namanya sobat tentukan sendri juga tidak apa apa. Ekstansi file tersebut bisa html atau php
Kemudian copykan source code d bawah ke file yang telah kalian buat tersebut

<!DOCTYPE html>
<html>
<head>
 <title>Halaman Login</title>
 <link rel="shortcut icon"  href="favicon.ico">
 <link rel="stylesheet" type="text/css" href="css/login.css">
<body>
 <div class="login">
  <div class="utama">
   Halaman Login
  </div>
  <div class="login-btn">
   <form method="post" action="">
    <div>
     <input type="text" name="user" placeholder="Username" class="user">
    </div>
    <div >
     <input type="password" name="pass" placeholder="Password" class="pass" >
    </div>
    <div class="btnkirim">
     <input type="submit" name="login" value="Log In">
     <input type="submit" name="btnregis" value="Daftar" class="regis">
    </div>
   </form>
  </div>
 </div>
</body>
</html>

Pada link diatas tertulis <link rel="stylesheet" type="text/css" href="css/login.css"> . silahkan anda ubah login.css menjadi style.css
lalu copas script css yang ada dibawah ini, sebelum itu buat lah sebuah folder img , dan letakan sebuh gambar dengan nama "bg.jpg" atau d kosongkan juga boleh

body{
 margin: 0;
 padding: 0;
 background-image: url('../img/bg.jpg');
 font-family: 'Droid Serif', serif;
}
.login{
 width: 300px;
 margin: 0 auto;
 margin-top: 12%;
}
.login .utama{
 font-size: 20px;
 padding: 15px;
 text-align: center;
 color: #000;
 background-color: #009900;
 border-top-right-radius: 10px;
 border-top-left-radius: 10px;
 border-bottom: 3px solid #666666;
}
.login-btn{
 background-color: #ccc;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 padding: 20px;

}
.login-btn input{
 border: none;
 padding: 10px;

}
.login-btn .user{
 margin-top: 10px;
 width: 240px;
 border-radius: 5px;
}
.login-btn .pass{
 margin-top: 10px;
 width: 240px;
 border-radius: 5px;
}
.login-btn .btnkirim input{
 margin-top: 10px;
 background-color: #009900;
 border-radius: 5px;
 cursor: pointer;
}
.login-btn .btnkirim input .regis{
 margin-top: 10px;
 background-color: #009900;
 border-radius: 5px;
 cursor: pointer;
 float: right;
}

pada css di atas jika kalian ingn background nya berupa warna slahkan hapus "background-image: url('../img/bg.jpg');" dan ganti mencaji "background-color: 'Isi dengan kode html warna yang di inginkan');"

Setelah itu buka lah browser anda dan ketikan localhost/blog (ganti blog dengan nama folder yang telah anda buat tadi).

Cara Membuat Form Login

1 Response to "Cara Membuat Form Login"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel