Simple Ajax Login with PHP

Validasi pengguna (user verification) merupakan salah satu fitur keaman sebuah website. Fasilitas ini memungkinkan pembatasan pengguna untuk melakukan perubahan pada database atau struktur web itu sendiri. Nah, kali ini saya akan berbagi tentang halaman Login sederhana yang disisipkan teknik AJAX agar halaman login kita menjadi lebih menarik misalnya dengan menambah efek loading.

Striktur database dan table sebagai berikut :

CREATE DATEBASE LATIHAN_PHP;
USE LATIHAN_PHP;
CREATE TABLE USER(
  ID BIGINT PRIMARY KEY AUTO_INCREMENT,
  NAMA VARCHAR(255);
  USERNAME VARCHAR(255) UNIQUE;
  PASSWORD VARCHAR(255)
);
INSERT INTO USER VALUES(NULL, 'PIZAINI', 'admin', '21232f297a57a5a743894a0e4a801fc3');

Struktur file dan direktori pada posting ini adalah:

• ajax_login(dir)
  • process (dir)
    • class.user.php
    • process.user.php
    • index.html
  • js(dir)
    • ajax_login.js
    • jquery.js
    • index.html
  • img (dir)
    • spinner.gif
    • index.html
  • connection.php
  • globalConfiguration.php
  • login.php
  • index.php

File globalConfiguration.php adalah file konfigurasi database, user dan password untuk MySQL. File connection.php adalah file koneksi ke MySQL. Halaman login yang terletak pada file login.php seperti screenshot di atas.

Proses login dengan menekan button Login. Form tersebut akan menvalidasi textfield apakah kosong atau tidak. Jika kosong, form itu akan memberikan pesan bahwa username atau password kosong. Jika tidak kosong (valid) maka proses validasi ke database dilakukan. Di sinilah kita memenfaatkan teknik AJAX untuk proses login dan validasi pengguna. Jika username dan password benar, maka pengguna akan dibawa ke halaman index.php. Jika salah, akan diberikan pesan kesalahan di bawah form login.

So, what is spinner.gif file ?…

File ini digunakan untuk efek loading untuk proses login. Bisa dilihat pada file login.php, kamu akan melihat sebuah fungsi Javascript yang men-delay selama 2 detik (2000 milisecond) agar kita bisa melihat loading nya.

Validasi Username dan Password tidak boleh kosong.

Pesan Kesalahan jika username dan password tidak benar.

<?php   // File Controller_User.php
/*
 * Copyright 2011
 * by Pizaini
 * blog : pizaini.wordpress.com
 * email : zheiner.taurus@gmail.com
 */
session_start();
//include file(s)
require_once 'class.user.php';
require_once '../conection.php';

$action = isset($_GET['action']) ? $_GET['action'] : '';
switch ($action) {
   case 'login':
      if(!isset ($_GET['u']) || !isset ($_GET['p'])){
          die("No Messege.");
      }
      $username = $_GET['u'];
      $password = $_GET['p'];

      $user = new User();
      $user->setUsername($username);
      $user->setPassword($password);

      $process_login = new Controller_User();
      $process_login->doLogin($user);
    break;

case 'logout':
    $controller_user = new Controller_User();
    $controller_user->doLogout();
   break;
default:
   break;
}

class Controller_User{
  //Login
  function doLogin(User $user){
     $qLogin = "SELECT * FROM USER WHERE USERNAME = '".mysql_real_escape_string($user->getUsername())."' AND PASSWORD  = MD5('".$user->getPassword()."')";
     $rLogin = mysql_query($qLogin) or die(mysql_error());

    if(mysql_num_rows($rLogin) == 1){
      $data = mysql_fetch_object($rLogin);
      $_SESSION['my_session'] = $data->USERNAME;
      $_SESSION['my_name'] = $data->NAMA;
      echo 'OK';
    }else{
      echo "Sorry, Username and Password does'n match.";
    }
  }

  //Logout
  function doLogout(){
    if(isset ($_SESSION['my_session'])){
      unset ($_SESSION['my_session']);
      unset ($_SESSION['my_name']);
    }
    echo 'OK';
   }
}
?>

So, how about preview ? Yaa…Saya juga memberikan link untuk preview dari posting ini.

Klik di sini untuk melihat preview (demo).

Username : admin

Password : admin

Klik di sini untuk download source code nya..

Selamat membaca dan semoga bermanfaat dengan posting yang sederhana ini…dan kamu bisa mendapat inspirasi dari posting ini.

Advertisement