Membuat Form Login dengan PHP, Jquery & CSS3 + Download

Membuat halaman login yang elegan dengan menggunakan  CSS3, Jquery + Ajax serta diproses dengan PHP.

Layout untuk halaman login administrator ini sebenarnya saya gunakan untuk project web aplikasi yang sedang saya kerjakan, setelah aplikasi selesai akhirnya terpikir untuk membagikan kepada teman-teman di Wakaka Design. Siapa tau bisa berguna dan membantu mempercepat pekerjaan teman-teman yang sedang membutuhkan sebuah desain halaman login administrator untuk pekerjaan nya.

Konsep.

Konsep desain yang akan dibuat yaitu minimalis dan tetap terlihat modern.

Yang kita butuhkan

Kita membutuhkan sebuah background dengan tekstur kayu, bisa didapatkandisini.

Kita juga membutuhkan sebuah font untuk mempercantik halaman tersebut, kita sertakan font “Oleo Script” yang kita embed dari Google Webfonts.

Jangan lupa Jquery yang bisa didownload dari jquery.com

Oke peralatan sudah lengkap, sekarang kita mulai bagian kode program.

Struktur HTML

Head

<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
 <!-- Javascript code here -->
</script>

Body

<div class="lg-container">
 <h1>Admin Area</h1>
 <form action="waka-login.php" id="lg-form" name="lg-form" method="post">

  <div>
   <label for="username">Username:</label>
   <input type="text" name="username" id="username" placeholder="username"/>
  </div>

  <div>
   <label for="password">Password:</label>
   <input type="password" name="password" id="password" placeholder="password" />
  </div>

  <div>
   <button type="submit" id="login">Login</button>
  </div>

 </form>
 <div id="message"></div>
</div>


Kode html diatas sederhana sekali, yang paling penting yaitu field text username dan password, serta sebuah div dengan id message yang akan menampung pesan/respon.

Kode Javascript/Jquery

$(document).ready(function(){
 $("#login").click(function(){

  var action = $("#lg-form").attr('action');
  var form_data = {
   username: $("#username").val(),
   password: $("#password").val(),
   is_ajax: 1
  };

  $.ajax({
   type: "POST",
   url: action,
   data: form_data,
   success: function(response)
   {
    if(response == "success")
     $("#lg-form").slideUp('slow', function(){
      $("#message").html('<p class="success">You have logged in successfully!</p><p>Redirecting....</p>');
     });
    else
     $("#message").html('<p class="error">ERROR: Invalid username and/or password.</p>');
   }
  });
  return false;
 });
});


Jadi logikanya ketika kita melakukan klik pada tombol Login, maka javascript akan mengirim request Ajax ke file waka-login.php untuk mengetahui user dan password yang dimasukan benar atau tidak.
Jika salah maka menampilkan pesan error, jika benar maka akan terjadi slide, dan muncul pesan redirecting…

* Semua itu bisa anda rubah sesuai dengan keperluan anda nantinya.

Kode CSS

Setelah struktur html selesai kita saat nya kita percantik halaman ini dengan css
body{
 background-image:url(bg.png);
 font-family: 'Oleo Script', cursive;
}

.lg-container{
 width:275px;
 margin:100px auto;
 padding:20px 40px;
 border:1px solid #f4f4f4;
 background:rgba(255,255,255,.5);
 -webkit-border-radius:10px;
 -moz-border-radius:10px;

 -webkit-box-shadow: 0 0 2px #aaa;
 -moz-box-shadow: 0 0 2px #aaa;
}
.lg-container h1{
 font-size:40px;
 text-align:center;
}
#lg-form > div {
 margin:10px 5px;
 padding:5px 0;
}
#lg-form label{
 display: none;
 font-size: 20px;
 line-height: 25px;
}
#lg-form input[type="text"],
#lg-form input[type="password"]{
 border:1px solid rgba(51,51,51,.5);
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
 padding: 5px;
 font-size: 16px;
 line-height: 20px;
 width: 100%;
 font-family: 'Oleo Script', cursive;
 text-align:center;
}
#lg-form div:nth-child(3) {
 text-align:center;
}
#lg-form button{
 font-family: 'Oleo Script', cursive;
 font-size: 18px;
 border:1px solid #000;
 padding:5px 10px;
 border:1px solid rgba(51,51,51,.5);
 -webkit-border-radius:10px;
 -moz-border-radius:10px;

 -webkit-box-shadow: 2px 1px 1px #aaa;
 -moz-box-shadow: 2px 1px 1px #aaa;
 cursor:pointer;
}
#lg-form button:active{
 -webkit-box-shadow: 0px 0px 1px #aaa;
 -moz-box-shadow: 0px 0px 1px #aaa;
}
#lg-form button:hover{
 background:#f4f4f4;
}
#message{width:100%;text-align:center}
.success {
 color: green;
}
.error {
 color: red;
}


PHP

Untuk memproses username dan password yang diinput user, kita membutuhkan PHP, berikut code php yang digunakan, disini tidak melakukan pengecekan pada database, karena ini hanya konsep, query yang diperlukan nantinya bisa diletakan di file PHP itu juga.
<?php

 $is_ajax = $_REQUEST['is_ajax'];
 if(isset($is_ajax) && $is_ajax)
 {
  $username = $_REQUEST['username'];
  $password = $_REQUEST['password'];

  /*
   :: Note to Wakaka Friends
   -----------------------------------------------------------------------------------------
   You can put your MySQL query here to check availability Username & Password from database
  */

  if($username == 'demo' && $password == 'demo')
  {
   echo "success";
  }
 }

?>



DEMO | DOWNLOAD

Username: wakaka
Password: design
Oke sekian tutorial kali ini, semoga berguna untuk anda.
Terima kasih, Salam Wakaka Design :D

sumber