1. Tutorial Membuat Login Form dengan jQuery+PHP

Ni ada tutorial jQuery + PHP, implementasinya pada Form Login user :))

pa sih jQuery, baca ini dlu ya:
http://www.dremi.info/forum/viewtopic.php?f=35&t=402

baca + cobain nyang ini.

YANG DIPERLUKAN:
1. Download jQuery Terakhir
2. Webserver instan (biar gampang)
3. Browser
4. Beberapa Icon gratisan
5. Text Editor
6. CPU dan monitor yang masih bisa kepake :lol: :lol: :D :D :D

beberapa file ini diperlukan untuk form na:


1. Bikin config.php

Code: Select all
if(!defined(''_VALID_ACCESS'')) die(''direct access is not allowed.'');
# config system

define("_HOST", "localhost");
define("_USER", "root");
define("_PASS", "ohyesss");
define("_DBASE", "ujicoba");

define("_PATH", "/dreLogin1/");
define("_ADMIN", "/dreLogin1/");
?>



Penjelasan: _PATH merupakan base path untuk folder dreLogin
sedangkan _ADMIN merupakan path target setelah user berhasil login

2. Bikin class untuk koneksi dan konstruktor database: mydb.php

Code: Select all
if(!defined(''_VALID_ACCESS'')) die(''direct access is not allowed.'');
//DATABASE CLASS
class mydb
{
function connect($host, $user, $pass, $dbase)
{
$conn = mysql_connect($host, $user, $pass) or die(''Could not connect: '' . mysql_error());
if($conn)
{
mysql_select_db($dbase) or die(''Could not select db: '' . mysql_error());
}
return $conn;
}

function query($sql)
{
$query = mysql_query($sql);
return $query;
}

function num_rows($sql)
{
$num_rows = mysql_num_rows(mysql_query($sql));
return $num_rows;
}

function row($qry)
{
$row = mysql_fetch_array($qry);
return $row;
} 
}
?>




3. Bikin file function untuk login: login.php

Code: Select all
if(!defined(''_VALID_ACCESS'')) die(''direct access is not allowed.'');
require_once "config.php";
require_once "class/mydb.php";

function login($username, $password)
{
$db = new mydb;
$db->connect(_HOST, _USER, _PASS, _DBASE);

$username = trim($username);
$password = trim($password);
$num = $db->num_rows("SELECT * FROM users WHERE username = ''".mysql_real_escape_string($username)."''
AND password = ''".mysql_real_escape_string(md5($password))."''");

if($num == 1)
{
return true;
}
else
{
return false;
}
}
?>




4. Bikin file action.php sebagai target form login

Code: Select all
define(''_VALID_ACCESS'', true);
include_once "config.php";
include_once "class/mydb.php";
include_once "function/login.php";

$db = new mydb;
$db->connect(_HOST, _USER, _PASS, _DBASE);

if(empty($_POST[''usern'']) || empty($_POST[''passw'']))
{
$msg = "User or password is empty ";
}
else
{
if(login($_POST[''usern''], $_POST[''passw'']) == true)
{
$msg = "Logged successfully => username: ".$_POST[''usern'']." ( Logout or goto Admin )
";
$usern = $_POST[''usern''];
session_register(''usern'');
sleep(1);
}
else
{
$msg = "User or password is wrong ";
}
}
echo ''

'' . $msg . ''

'';
?>




5. Bikin form standar, dengan nama file: index.php

Code: Select all

Login Form

UserName:

PassWord:

Lu perhatiin dah, ada action.php nah itu adalah target action bwat porm na :)


woke broder, berlanjut ke penggunaan jQuery sebagai media implementasi konsep ajax, atau biasa disebut sebagai Ajax javascript FrameWork.

tambahkan baris ini pada index.php

Code: Select all







baris ini:

Code: Select all





merupakan baris pemanggil js untuk jquery dan jquery.form

Penjelasan jquery.form.js merupakan plugin jQuery yang berfungsi untuk menghandle proses form interface dan action nya, sehingga sekalipun menggunakan methode ajax, kita masih dapat menangkap var $_POST yang dikirim form, untuk di respon dengan HTTP Respon yang ada pada library jQuery.

Lihat info plugin nya disini:

http://malsup.com/jquery/form/

nah kek na udah dulu ah ngetiknya, ngantuk guwe, lu coba coba aja yak :)) mayan bwat ngasah otak

DEMO: http://www.dremi.info/demo/dreLogin1/

DOWNLOAD: http://www.4shared.com/file/82642576/3cb9f4a6/dreLogin1.html


DEMO LOGIN:

Username: dremi
Password: terusberjuang