Membuat Form Login dengan PHP, Jquery & CSS3
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 didapatkan disini.
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<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Login PHP</title>
<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 --> </head>
Body
<body>
<div class="lg-container">
<h1>~Login~</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>
</body>
</html>
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.
$(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 cssbody{
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;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
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;
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;
border-radius:10px;
-webkit-box-shadow: 2px 1px 1px #aaa;
-moz-box-shadow: 2px 1px 1px #aaa;
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;
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 Reader
-----------------------------------------------------------------------------------------
You can put your MySQL query here to check availability Username & Password from database
*/
if($username == 'admin' && $password == 'admin')
{
echo "success";
}
}
?>
Username: admin
Password: admin
Bila berhasil login berikut tampilannya
Oke sekian tutorial kali ini, semoga berguna untuk anda.
0 komentar:
Posting Komentar