XÂY DỰNG ỨNG DỤNG TRANG LOGIN KẾT HỢP GIỮA JQUERY VÀ PHP LÀM SAO HIỆU QUẢ NHÂT

Hôm nay Stanford – Dạy kinh nghiệm lập trình xin giới thiệu với các bạn một ứng dụng nhỏ về trang login kết hợp giữa Jquery Easy UI và PHP. Tuy là một ví dụ nhỏ nhưng qua đó các bạn sẽ hiểu và có thể phát triển thêm.

Để làm được bài tập này các bạn phải có kiến thức cơ bản về PHP, ở đây mình viết code theo cách của mình nhưng cũng rất dễ hiểu

Bước 1 : Kết nối csdl class.php

<?php 

class db{

private $servername = "localhost";

private $username = "root";

private $password = "root";

private $database = "test";

private $conn = NULL;

function __construct(){

$this->conn = mysql_connect($this->servername,$this->username,$this->password);

mysql_select_db($this->database);

mysql_query("SET NAMES'UTF8'");

if(!$this->conn)

die("Trang web đang bảo trì, vui lòng quay lại sau(1.1)");

}

}

?>

Bước 2 : Tạo class admin kế thứa từ class db và tạo 1 function KiemTraAdmin truy vấn nều kết quả trả ra true thì login thành công ngược lại thì thất bại

<?php require "db.php";

class admin extends db

{

function KiemTraAdmin($u,$p)

{

$qr="SELECT * FROM users

WHERE HoTen = '$u'

AND Password = '$p'

";

$users = mysql_query($qr);

$n = @(mysql_num_rows($users));

if($n==1)

{

$row = mysql_fetch_array($users);

$_SESSION["kt_login_id"] = $row["idUser"];

$_SESSION["Name"] = $row["username"];

$_SESSION["HoTen"] = $row["HoTen"];

$_SESSION["idGroup"] = $row[idGroup];

return true;

}

else{

return false;

}

}

Bước 3 : Tạo form login

<form name="form1" action="" method="post">

<table>

<tr>

<td>Username:</td>

<td><input type="text" class="easyui-validatebox" required="true" name="un" id="un"  style="width:350px;"/></td>

</tr>

<tr>

<td>Password:</td>

<td><input type="password" class="easyui-validatebox" required="true" name="pa" id="pa" style="width:350px;"/></td>

</tr>

</table>

        <div id="su">

     <input type="submit" name="btnLogin" id="btnLogin" class="easyui-linkbutton" iconCls="icon-ok" value="Login" /></div>

</form>

Ở đây mình gọi class="easyui-validatebox" vào là để kiểm tra khi chưa nhập kí tự mà submit thì sẽ hiện thông báo lỗi ...các bạn có thể tham khảo thêm tại thư viện EasyUI . sau đó gọi các file css va javascript vào

<link rel="stylesheet" type="text/css" href="public/css/css.css">

<link rel="stylesheet" type="text/css" href="easyui/default/easyui.css">

<link rel="stylesheet" type="text/css" href="easyui/icon.css">

<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

Tiếp theo các bạn phải khởi tạo lại class admin ở bước 2 và gọi cái function KiemTraAdmin($u,$p) ra chạy

<?php

require "../models/class.admin.php";

$admin = new admin();

if(isset($_POST["btnLogin"]))

{

$un = $_POST["un"];

$pa = md5($_POST["pa"]);

$kt = $admin->KiemTraAdmin($un,$pa);

if($kt==true) //if bang true

header("location:Home.html");

}

?>

Nếu code trả ra bằng true thì chuyển trang về Home.html còn ngược lại sẽ bắt lỗi và truy vấn lại.

Mọi  khó khăn khi tiếp cận với một ngôn ngữ lập trình mới hay cần sự tư vấn, định hướng theo ngôn ngữ lập trình nào, công nghệ nào, phương pháp học hiệu quả,…? 

Các bạn hãy liên hệ với Stanford qua số hotline: (04) 6275.2212 - 0936.172.315 - 0963.723.236 để được gọi lại tư vấn miễn phí.

Stanford hân hạnh được đồng hành cùng bạn!

Tags: stanford