• HTML Cơ bản – Phần 1
• HTML cơ bản – Phần 2

Khi đã hiểu rõ được các tag, element của của HTML rồi thì chuyển qua các bài viết khác về CSS chứ nhỉ? Căn bản nhất vẫn là bài viết

• CSS Selectors (phần 1)
• CSS Selectors (Phần 2)

Trong series 2 bài trên sẽ giúp bạn hiểu rõ nhiều vấn đề, class là gì? id là gì? child selector,….
Nếu như bạn đã rành rành rồi thì chúng ra có thể tham khảo thêm các bài viết như “Những cách trình bày CSS” và “Viết tắt trong CSS” để nâng cao tay nghề của mình.

Phía trên chỉ là các bài viết tiêu biểu, bạn có thể xem thêm rất nhiều video khác tại link bài viết http://www.izwebz.com/category/css/ có hàng chục bài viết và thủ thuật về CSS đang chờ bạn.

Một khi đã tích lũy được kha khá kiến thức về HTML & CSS rồi thì bạn có thể xem qua các series kết hợp, từ photoshop sang html & css. Trong trường hợp này thì các series này sẽ thích hợp cho bạn đấy

• Phần 1: Chuyển PSD thành xHTML
• Phần 2: Xây dựng code xHTML
• Phần 3: Tạo dáng với CSS

Hoặc series

• Từ PSD sang HTML (phần 1/5)
• Từ PSD sang HTML (phần 2/5)
• Từ PSD sang HTML (phần 3/5)
• Từ PSD sang HTML (phần 4/5)
• Từ PSD sang HTML (phần 5/5)

Với các series kết hợp như thế này thì đòi hỏi bạn cần phải biết căn bạn về HTML&CSS và sự tu duy để áp dụng và các dự án khác nhau của riêng mình nữa. Và ngoài ra bạn cũng phải biết chút chút về photoshop căn bản chứ nhỉ

• Basic photoshop: Bài 1 – Làm việc với vùng chọn
• Basic photoshop: Bài 2 – Thao tác Layer
• Basic Photoshop: Bài 3 – Text và layer style
• Basic photoshop: Bài 4 – Brush và Mask
• Basic photoshop: Bài 5 – Chỉnh sửa ảnh – Phần 1/2
• Basic photoshop: Bài 5 – Pen Tool – Phần 2/2
• Photoshop Basic: Phím tắt, Lens Flare vs Knoll Light Factory
• Basic photoshop: Căn bản về Smart Object

Ngoài ra thì cũng phải biết về illustrator để kết hợp với photoshop chứ nhỉ, vậy thì series này sẽ cực kỳ hữu ích cho các bạn đấy

• Adobe Illustrator CS5 – Giới thiệu
• Basic Ai: Bài2 – Thao tác đối tượng
• Basic Ai: Bài 3 – Pen tools và Path
• Basic Ai: Bài 4 – Brush tool (by Devil Grades)
• Basic Ai: Bài 5 – Biến Đổi Đối Tượng – Shape Builder Tool
• Basic Ai: Bài 6 – Kết thúc toolbox
• Basic AI bài 7 : Những lệnh quan trọng

Một khi bạn đã có thể tự chuyển từ photoshop sang html css hoặc là bạn đã cày xong hết các món về photoshop, html css,…. Thì đã tới lúc mình tự design 1 website cho riêng mình chứ nhỉ?
Điều đầu tiên bạn cần biết là các loại bố cục của website như F-Layout hay Z-Layout, rồi tự mình design bằng photoshop với các video hướng dẫn dưới dây sẽ cực hữu ích

• Photoshop Tut – Manbics Layout Day 1
• Photoshop Tut – Manbics Layout Day 2
• Photoshop Tut – Manbics Layout Day 3

Hoặc series bài viết  Vertical Scrolling: Photoshop layout và Vertical Scrolling: Slice & Code

Một khi bạn đã vững các kiến thức cơ bản rồi thì hãy học PHP thôi, còn chờ gì nữa Series về PHP căn bản thì quá tuyệt rồi còn gì nữa
Bạn có thể xem cả list video cần thiết ngay link này http://www.izwebz.com/video/ hoặc bạn hãy nhìn trên izwebz phía menu màu xám, có link Video series, hãy nhấp vào đấy, trang đấy là tổng hợp toàn bộ Video mà mình đã liệt kê ở phía trên này.

• Cơ bản về PHP – Bài 1
• Căn bản PHP – Bài 2
• Căn bản PHP – Bài 3
• Căn bản PHP – Bài 4 – Phần 1
• Căn bản PHP – Bài 4 – Phần 2
• Căn bản PHP – Bài 5
• PHP Căn Bản – Bài 6 – Phần 1
• PHP Căn Bản – Bài 6 – Phần 2
• Thiết lập Mail Server Localhost
• PHP Căn Bản – Bài 7 – Phần 1
• PHP Căn Bản – Bài 7 – Phần 2
• PHP Căn Bản – Bài 8
• PHP Căn Bản – Bài 9
• PHP Căn Bản – Bài 10
• Căn Bản PHP – Bài 11 – Phần 1
• Căn Bản PHP – Bài 11 – Phần 2
• Tạo Mailing list với PHP & MySQL
• Xử lý form với PHP
• Phân trang với PHP & MySQL
• PHP Basic – Type Casting
• Bài 12 : Mô Hình MVC
• Bài 13 : Lập trình hướng đối tượng (OOP)

Ngoài ra, bạn có thể xem thêm các bài viết chia sẽ kiến thức, kinh nghiệm thiết kế & phát triển website tại chuyên mục “Phát triển web” sẽ giúp cho bạn rất nhiều, hay bạn có thể tham khảo tại series bài viết “Nguồn của tôi”.

• Nguồn thiết kế
• Nguồn ý tưởng
• Nguồn lập trình
• Quản lý nguồn

Chà, như thế thì đã quá nhiều cho các newbie rồi đấy nhỉ? Mọi thắc mắc bạn hãy email về support@izwebz.com để được giải đáp nhé, ngoài ra, cộng đồng izwebz tại facebook cũng khá đông đấy, bạn cứ vào đấy mà cùng “chém” Izwebz Group on Facebook

1/ Các series video trên izwebz PHP, HTML & CSS, Photoshop,…..
2/ Nhận email khi có bài viết mới
3/ Kênh RSS
4/ Tìm kiếm bài viết
5/ Các câu hỏi đã được trả lời thường xuyên
6/ Chuyên mục chia sẽ kinh nghiệm thiết kế & phát triển web
7/ Video dành cho các chuyên mục về PHP, HTML CSS, Photoshop,…

Trong video này mình sẽ hướng dẫn các bạn chuyển đổi dạng dữ liệu string sang kiểu dữ liệu JSON trong PHP, sau đó mình sẽ làm một ví dụ nhỏ kết nối tới database để lấy dữ liệu đó và chuyển thành dạng JSON và cuối cùng mình sẽ sử dụng Jquery AJAX để load dữ liệu đó

Nếu bạn nào mới làm quen với Jquery AJAX thì các bạn hãy xem lại các bài viết trước của mình hướng dẫn cách sử dụng Jquery AJAX để load dữ liệu nhé.

Hình ảnh, database được đính kèm trong file download.

Đối với những trang web bán hàng hiện đại nói riêng hay những trang web khác nói chung thì việc áp dụng công nghệ AJAX để tải dữ liệu từ server là rất cần thiết.

Khi bạn làm một trang web bán hàng, bạn có một sidebar hiển danh mục sản phẩm và main chính sẽ hiển thị tất cả sản phẩm của cty mình đang có. Bình thường các bạn làm thì cần phải truyền tham số qua link rồi ở trang sản phẩm mình phải GET tham số đấy rồi SELECT với database…Mà mình GET tham số trên link thì nó cũng không được tốt cho lắm, thay vào nó bây giờ mình sử dụng Jquery AJAX để xử lý nó một cách dễ dàng và đơn giản hơn ^^.

Bởi vì đây là bài hướng dẫn cho nên mình muốn loại bỏ một số hình thức làm sạch, chuyển đổi dạng dữ liệu và tránh hack SQL Injection, cho nên mình có 1 số lưu ý khi các bạn viết code PHP như sau nếu bạn muốn sử dụng vào project của mình:

• Tránh sử dụng SELECT * .. khi mình CSDL mình chỉ có 2 hoặc 3 trường nó sẽ xuất ra những dữ liệu mình không cần dùng đến
• Trong khi phát triển project thì bạn nên thêm các trường hợp bẫy lỗi vào để tiện cho việc tìm kiếm lỗi nhanh hơn
• VALIDATE các hộp thoại input và string để chống SQL Injection

STEP 1 – SETUP HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Jquery AJAX Loading data when requested</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
	<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
	<script type="text/javascript" src="js/AJAX.js"></script> 
</head>
<body>
	<div id="wrapper">
		<div id="container">
			<div id="nav">
				<h1>Loading data when requested</h1>
				<nav role="tab">
					<ul>
						<?php 
						$db = mysqli_connect("localhost","root","","ajax_tab");
						$query_tab = "SELECT * FROM categories";
						$result_tab = mysqli_query($db,$query_tab) 
						or die("mysqli Error: " . mysqli_error($db));
						if(mysqli_num_rows($result_tab) > 0) {
							while($rows = mysqli_fetch_array($result_tab,MYSQLI_ASSOC)) {
								$id_cat = $rows['cat_id'];
								$name_cat = $rows['name'];
								echo "<li id_cat='$id_cat'>$name_cat</li>";
							}   
						}
						?>
					</ul>
				</nav>
			</div><!-- End #nav -->

			<div id="main">
				<div id="loading"></div>
				<div id="data"></div>
			</div>
			
		</div><!-- End #container -->	
	</div><!-- End #wrapper -->
</body>
</html>

Trong phần HTML của mình cũng không có gì nhiều, mình chỉ cho nó hiển thị cái danh mục bài viết ra và ở dưới có 1 div với id là data để load dữ liệu vào đó, nhưng ở đây các bạn chú ý ở đoạn mình echo ra nhé. Trong cái thẻ li mình có truyền cho nó vào một tham số là id_cat và mỗi danh mục của mình trong databse tương ứng nó sẽ có id khác nhau và chút xíu nữa khi mình click vào một danh mục nào đó mình lấy cái id này để SELECT tất cả những bài viết nằm trong danh mục đó.

Code PHP trên mình viết đơn giãn cho các bạn dễ hiểu hơn, khi áp dụng vào project bạn cần làm một số cái mình nói ở trên và mình có thể rút gọn code một chút nữa.

<?php 
	$db = mysqli_connect("localhost","root","","ajax_tab");
	$query_tab = "SELECT cat_id,name FROM categories";
	$result_tab = mysqli_query($db,$query_tab);
	while(list($id_cat,$name_cat) = mysqli_fetch_array($result_tab,MYSQLI_NUM)) {
		echo "<li id_cat='$id_cat'>$name_cat</li>";
	}
?>

Mình có thể dùng hàm list() để gán biến và lấy giá trị luôn cho nó lẹ hì, đỡ mất công phải gán từng cái cho mệt .

Khi mình dùng hàm list() chạy qua từng biến thì biến của mình cần viết theo thứ tự nhé, trong CSDL của mình trường cat_id có row = 0, name_cat có row = 1 và mình phải gán biến theo thứ tự $id_cat = 0 => trường cat_id, $name_cat = 1 => trường name_cat. Khi mình dùng mysqli_fetch_array thì mình thêm một tham số nữa là MYSQLI_NUM để nó chuyển cái mảng này thành dạng số để hàm list() của mình chạy qua từng cái và gán vào biến luôn ha.

STEP 2 – SETUP CSS

*{margin: 0; padding: 0; }

body {
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;  
}

a {
	text-decoration: none;
}

#wrapper {
	width: 1000px;
	margin: 0 auto;
}

#container {
	width: 1000px;
	overflow: hidden;
}

#nav {
	margin: 20px;
	border: 1px solid #d4d4d4;
	background: -moz-linear-gradient(top,#fff,#ebebeb);
	background: -webkit-linear-gradient(top,#fff,#ebebeb);
	background: -o-linear-gradient(top,#fff,#ebebeb);
	background: -ms-linear-gradient(top,#fff,#ebebeb);
	width: 290px;
	padding: 20px;
	float: left;
}

#nav h1{
	font-size: 1.4em;
	border-bottom: 1px solid #d4d4d4;
	padding-bottom: 10px;
	text-align: center;
	color: green;
	text-shadow: 0px 1px 0px #d4d4d4;
}

nav[role="tab"] {
	padding-top: 10px;
}

nav[role="tab"] > ul li {
	font-size: 1.4em;
	border-bottom: 1px solid #d4d4d4;
	padding: 5px 0px;
	color: #ac0202;
	cursor: pointer;
}

nav[role="tab"] > ul li:hover {
	color: #888;
}

nav[role="tab"] > ul li:last-child {
	border-bottom: none;
}

#main {
	border: 1px solid #d4d4d4;
	background: -moz-linear-gradient(top,#fff,#ebebeb);
	background: -webkit-linear-gradient(top,#fff,#ebebeb);
	background: -o-linear-gradient(top,#fff,#ebebeb);
	background: -ms-linear-gradient(top,#fff,#ebebeb);
	width: 540px;
	padding: 20px;
	float: right;
	margin: 20px;
	position: relative;
}

#loading {
	position: absolute;
	top: 10px;
	left: 50%;
}

nav[role="main"] {

}

nav[role="main"] ul li {
	float: left;
	padding: 10px;
}

nav[role="main"] ul li img {
	border: 1px solid #d4d4d4;
	background: #fff;
	padding: 4px;
}

Trong phần này mình cũng không làm CSS gì nhiều nên khi các bạn áp dụng vào trang web của mình thì style thêm nhé. Và bây giờ mình bắt đầu vào công việc chính nào .

STEP 3 – Load Data

<?php 
							$db = mysqli_connect("localhost","root","","ajax_tab");
							$query = "SELECT * FROM thumbnail";
							$result = mysqli_query($db,$query);
							$data = "";
							while($row = mysqli_fetch_array($result)) {
								$id = $row['id'];
								$name = $row['name'];
								$cat_id = $row['cat_id'];
								$images = "images/".$row['images'];
								$images = "<img src='$images' width='150' height='150'>";
								$data .= "<li>$images</li>";
							}
							$data = "<nav role='main'><ul>"
									 .$data."
									 </ul></nav>";
							echo $data;
						?>

Đoạn sau này mình không dùng hàm list() nữa là vì mình phải gán biến biến để lấy hình ra nhé.

Trong file data.php này nó chỉ làm nhiệm vụ là xuất tất cả bài viết trong database ra khi người dùng vào lần đầu tiên.

Trong database của mình có nhiều bài viết khi mình dùng vòng lặp while để xuất dữ liệu ra thì mình cần lưu tất cả nó vào biến $data để khi xuống dưới mình sẽ echo $data ra thì dữ liệu của mình sẽ trả về toàn bộ.

Nhắc lại bài cũ một chút xíu là ” .= ” có nghĩa là nối nhiều chuỗi vào cùng một biến nhé.

Bây giờ mình sẽ sử dụng Jquery AJAX để load dữ liệu này như sau :

$(document).ready(function() {
	
	load_data();
	function load_data() {
		$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast'); 
		$.ajax({
			type: "POST",
			url: "data.php",
			success: function(data_log) {
				$('#loading').fadeOut('fast');
				$("#data").html(data_log);
			}
		})
	}
});

Mình sẽ viết một hàm load dữ liệu của file data.php và sau đó mình sẽ cho chạy hàm này, có nghĩa là khi trang web mình được tải xong thì dữ liệu của mình sẽ bắt đầu load xong. Hàm này mình chỉ dùng để tải dữ liệu nên sẽ không có truyền vào tham số gì nhé.

STEP 4 – Loading data when requested

<?php 

if(isset($_POST['id_cat']) && filter_var($_POST['id_cat'], 
	FILTER_VALIDATE_INT, array('min_range'=>1))) {
	$db = mysqli_connect("localhost","root","","ajax_tab");
	$id_cat = mysqli_real_escape_string($db,trim($_POST['id_cat']));
	$get_data = "";
	$get_query = "SELECT * FROM thumbnail WHERE cat_id={$id_cat}";
	$get_result = mysqli_query($db,$get_query);
	while($rows = mysqli_fetch_array($get_result)) {
		$get_id = $rows['id'];
		$get_name = $rows['name'];
		$get_cat_id = $rows['cat_id'];
		$get_images = "images/".$rows['images'];
		$get_images = "<img src='$get_images' width='150' height='150'>";
		$get_data .= "<li>$get_images</li>";
	}
	$get_data = "<nav role='main'><ul>"
					.$get_data."
				</ul></nav>";
	echo $get_data;
}

?>

Trong file get_data.php này mình sẽ thực hiện nhiệm vụ load dữ liệu khi người dùng click chọn danh mục bài viết.

Mình sẽ kiểm tra xem tham số id_cat mình truyền từ AJAX qua có tồn tại hay không, nếu có mình sẽ thực hiện lấy tham số này và SELECT database với điều kiện là id_cat mình vừa lấy được đồng thời phải VALIDATE cái input luôn nhé.

Hàm filter_var có nhiệm vụ lọc cái biến kiểu số nguyên và giá trị của nó phải lớn hơn 1 và không âm.

Sau đó mình dùng thêm mysqli_real_escape_string loại bỏ các ký tự đặc biệt và ký tự vớ vẫn để chống hack SQL Injection nữa nhé.

Nói thêm một chút xíu là CSDL của mình trong MYSQL các bạn nên chú ý cat_id chính là mối liên hệ giữa bảng categories và thumbnail trong CSDL nhé.

Anh Demon Warlock vừa ra một cái traller Lý thuyết của Relational Database trong DVD thứ 2 sắp phát hành của Izwebz, trong video này anh ấy sẽ nói rõ mối liên hệ giữa 2 bảng trong CSDL thì trong CSDL của mình trong bài này cũng làm y chang như vậy.

Bạn có thể xem video ở dưới.

Bây giờ mình sử dụng Jquery AJAX để xử lý khi người dùng click chọn danh mục như sau :

 
$("nav[role='tab'] ul li").click(function() {
			var id_cat = $(this).attr("id_cat");
			$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
			$("#main").slideUp().delay(400).slideDown();
			$.ajax({
				type: "POST",
				url: "get_data.php",
				data: "id_cat="+ id_cat,
				success: function(get_data) {
					$('#loading').fadeOut('fast');
					$("#data").empty().append(get_data);
				}
			});
		});

 
var id_cat = $(this).attr("id_cat");
// $(this) có nghĩa là mình đang nói tới thẻ li được click
// Khi nó được click mình sẽ dùng hàm attr trong Jquery 
// Để lấy tham số id_cat mà mình truyền cho thẻ li trong phần HTML

Sau đó mình sử dụng Jquery AJAX để load dữ liệu ra thôi Bạn chú ý một xíu là khi trang web của mình được tải xong thì dữ toàn bộ dữ liệu trong MYSQL của mình cũng tải xong và nó được đổ vào thẻ div có id là data, bây giờ trước khi mình load dữ liệu mới cho thẻ div với id là data thì mình cần xóa hết dữ liệu cũ nó được tải lần trước đi.

Mình dùng hàm empty để xóa toàn bộ dữ liệu cũ đó đi và mình sẽ dùng tiếp hàm append để thêm dữ liệu mới mình vừa tải xong vào thẻ div với id là data.

Khi các bạn lướt qua các trang web trên mạng có một số trang khi đăng ký một tài khoản người ta thiết kế một Form để mình vừa đăng ký tài khoản, vừa đăng nhập, quên mật khẩu để bạn có thể thực hiện những công việc này một cách nhanh chóng và bây giờ mình sẽ hướng dẫn các bạn cách tạo một Form đa chức năng với Jquery AJAX + PHP & MYSQL.

Trước khi bắt đầu các bạn nên xem lại các bài cũ của mình và bài của bạn Kytosai vì đây là bài viết nâng cao nên các bạn cũng cần phải có một chút kiến thức về PHP & MYSQL.

Hình ảnh, database được đính kèm tronng file download.

STEP 1 – SETUP HTML

<?php session_start(); ?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Jquery AJAX Supper Form</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
	<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
	<script type="text/javascript" src="js/AJAX.js"></script>
</head>
<body>
	<div id="wrapper">
		<div id="container">
			<div class="title">Jquery AJAX Supper Form</div>
				<div id="signup">
				<div class="loader"></div>
				<div class="success">Successfully !!!</div>
				<div class="error">Error !!! Please try.</div>
				<form action="" method="POST" id="form_signup">
					<p>
						<label for="name">Username</label>
						<input type="text" name="name" placeholder="Please insert your Name" id="name">
						<div class="warning nameError">Vui lòng nhập Username</div>
					</p>

					<p>
						<label for="password">Password</label>
						<input type="password" name="password" placeholder="Please insert your Password" id="password">
						<div class="warning passwordError">Vui lòng nhập Password</div>
					</p>

					<p>
						<label for="email">Email</label>
						<input type="email" name="email" placeholder="Please insert your Email" id="email">
						<div class="warning emailError">Email không hợp lệ</div>
					</p>

					<p>
						<label for="captcha">Security Code</label>
						<input type="text" name="captcha" placeholder="Please insert Captcha" id="captcha">
						<div class="warning captchaError">Vui lòng nhập Captcha</div>
					</p>

					<p>
						<img src="captcha.php" id="img_captcha">
						<img src="images/load.png" id="load_captcha">
					</p>

					<p>
						<input type="submit" id="signup_form" value="Signup">
					</p>
				</form>
			</div><!-- End #signup -->


			<div id="login">
				<div class="loader"></div>
				<form action="" method="POST" id="form_login">
					<p>
						<label for="name">Username</label>
						<input type="text" name="name" placeholder="Please insert your Name" id="user-name">
						<div class="warning nameError">Vui lòng nhập Username</div>
					</p>

					<p>
						<label for="password">Password</label>
						<input type="password" name="password" placeholder="Please insert your Password" id="user-password">
						<div class="warning passwordError">Vui lòng nhập Password</div>
					</p>

					<p>
						<input type="submit" id="login_form" value="Login">
					</p>

					<p>
						<label for="forgot" id="getpass">I forgot your password</label>
					</p>
				</form>
			</div><!-- End #login -->


			<div id="mail">
				<div class="loader"></div>
				<form action="" method="POST" id="get_pass_form">
					<p>
						<label for="name">Username</label>
						<input type="text" name="name" placeholder="Please insert your Name" id="get-name">
						<div class="warning nameError">Vui lòng nhập Username</div>
					</p>

					<p>
						<label for="password">Email</label>
						<input type="email" name="email" placeholder="Please insert your Email" id="get-email">
						<div class="warning emailError">Email không hợp lệ</div>
					</p>

					<p>
						<input type="submit" id="get_pass" value="Submit">
					</p>
				</form>
			</div><!-- End #mail -->

			
		</div><!-- End #container -->
	</div><!-- End #wrapper -->
</body>
</html>

STEP 2 – CSS

*{margin: 0; padding: 0; }

@font-face { 
	font-family: 'UTM Avo';
	src:url('../font/UTM-Avo.ttf') format('truetype')
}

@font-face { 
	font-family: 'UTM DaxMedium';
	src:url('../font/UTM-DaxMedium.ttf') format('truetype')
}

@font-face { 
	font-family: 'Lobster';
	src:url('../font/Lobster.otf') format('truetype')
}

body {
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
}

a {
	text-decoration: none;
}

ol, ul {
	list-style: none;
}

#wrapper {
	width: 1000px;
	margin: 0 auto;
}

#container {
	width: 540px;
	margin-left: 200px;
	margin-top: 50px;
	border: 1px solid #d4d4d4;
	border-top: none;
	background: -moz-linear-gradient(top,#fff,#ebebeb);
	background: -webkit-linear-gradient(top,#fff,#ebebeb);
	background: -o-linear-gradient(top,#fff,#ebebeb);
	background: -ms-linear-gradient(top,#fff,#ebebeb);
	position: relative;
	overflow: hidden;
	padding-bottom: 20px;
}

#container .title {
	width: 100%;
	background: -moz-linear-gradient(top,#FbC3A4,#E65100);
  	background: -webkit-linear-gradient(top,#FbC3A4,#E65100);
  	background: -o-linear-gradient(top,#FbC3A4,#E65100);
  	background: -ms-linear-gradient(top,#FbC3A4,#E65100);
  	font-size: 2.0em;
  	color: #fff;
  	font-family: DaxMedium;
  	padding: 5px 0px;
  	text-align: center;
  	text-transform: uppercase;
  	border-top: 1px solid #E65100;
}

#signup {
	position: relative;
}

#signup .loader {
	position: absolute;
	top: 297px;
	left: 130px;
}

#signup .success {
	border: 1px solid green;
    padding: 5px;
    width: 202px;
    color: green;
    font-size: 1.4em;
    margin-left: 170px;
    margin-bottom: 5px;
    margin-top: 5px;
  	display: none;
}

#signup .error {
	border: 1px solid red;
    padding: 5px;
    width: 202px;
    color: red;
    font-size: 1.4em;
    margin-left: 170px;
    margin-top: 5px;
 	display: none;
}

#login .loader {
	position: absolute;
	top: 175px;
	right: 110px;
}

#mail .loader {
	position: absolute;
	top: 355px;
	right: 110px;
}

#signup form {
	float: left;
	margin-top: 20px;
	margin-left: 20px;
	border-right: 1px solid #777;
	width: 250px;
}

#signup form div.warning {
    border: 1px solid red;
    padding: 5px;
    width: 202px;
    color: red;
    font-size: 1.4em;
    display: none;
}

#signup form p {
	padding-bottom: 5px;
}

#signup form label {
	display: block;
	padding-bottom: 5px;
	font-size: 1.4em;
	color: #999;
}

#signup form input {
	width: 200px;
	height: 25px;
	font-family: UTM Avo;
	padding: 0px 5px;
}

#signup form input[type="submit"] {
	width: 100px;
	height: 30px;
	background-color: #68b12f;
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background: -webkit-linear-gradient(top, #68b12f, #50911e);
	background: -moz-linear-gradient(top, #68b12f, #50911e);
	background: -ms-linear-gradient(top, #68b12f, #50911e);
	background: -o-linear-gradient(top, #68b12f, #50911e);
	background: linear-gradient(top, #68b12f, #50911e);
	border: 1px solid #509111;
	border-bottom: 1px solid #5b992b;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #9fd574;
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
	color: white;
	padding-bottom: 5px;
	font-size: 1.4em;
	text-align: center;
	text-shadow: 0 1px 0 #396715;
}

#signup form input[type="submit"]:hover {
	opacity:.85;
	cursor: pointer; 
}
#signup form input[type="submit"]:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #356b0b inset; 
	-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
	-moz-box-shadow: 0 0 10px 5px #356b0b inset;
	-ms-box-shadow: 0 0 10px 5px #356b0b inset;
	-o-box-shadow: 0 0 10px 5px #356b0b inset;
}

#signup form img#load_captcha {
	background: #fff;
	padding: 3px;  
  	margin-left: 5px;
    cursor: pointer;
}

#login form {
	float: right;
	margin-top: 20px;
	margin-right: 30px;
}

#login form div.warning {
    border: 1px solid red;
    padding: 5px;
    width: 202px;
    color: red;
    font-size: 1.4em;
    display: none;
}

#login form p {
	padding-bottom: 5px;
}

#login form label {
	display: block;
	padding-bottom: 5px;
	font-size: 1.4em;
	color: #999;
}

#login form input {
	width: 200px;
	height: 25px;
	font-family: UTM Avo;
	padding: 0px 5px;
}

#login form input[type="submit"] {
	width: 100px;
	height: 30px;
	background-color: #68b12f;
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background: -webkit-linear-gradient(top, #68b12f, #50911e);
	background: -moz-linear-gradient(top, #68b12f, #50911e);
	background: -ms-linear-gradient(top, #68b12f, #50911e);
	background: -o-linear-gradient(top, #68b12f, #50911e);
	background: linear-gradient(top, #68b12f, #50911e);
	border: 1px solid #509111;
	border-bottom: 1px solid #5b992b;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #9fd574;
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
	color: white;
	padding-bottom: 5px;
	font-size: 1.4em;
	text-align: center;
	text-shadow: 0 1px 0 #396715;
}

#login form input[type="submit"]:hover {
	opacity:.85;
	cursor: pointer; 
}
#login form input[type="submit"]:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #356b0b inset; 
	-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
	-moz-box-shadow: 0 0 10px 5px #356b0b inset;
	-ms-box-shadow: 0 0 10px 5px #356b0b inset;
	-o-box-shadow: 0 0 10px 5px #356b0b inset;
}

#login form label[for="forgot"] {
	padding-top: 5px;
	font-size: 1.4em;
	color: blue;
	cursor: pointer;
}


#mail form {
	float: right;
	margin-right: 30px;
	display: none;
}

#mail form div.warning {
    border: 1px solid red;
    padding: 5px;
    width: 202px;
    color: red;
    font-size: 1.4em;
    display: none;
    
}

#mail form p {
	padding-bottom: 5px;
}

#mail form label {
	display: block;
	padding-bottom: 5px;
	font-size: 1.4em;
	color: #999;
}

#mail form input {
	width: 200px;
	height: 25px;
	font-family: UTM Avo;
	padding: 0px 5px;
}

#mail form input[type="submit"] {
	width: 100px;
	height: 30px;
	background-color: #68b12f;
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background: -webkit-linear-gradient(top, #68b12f, #50911e);
	background: -moz-linear-gradient(top, #68b12f, #50911e);
	background: -ms-linear-gradient(top, #68b12f, #50911e);
	background: -o-linear-gradient(top, #68b12f, #50911e);
	background: linear-gradient(top, #68b12f, #50911e);
	border: 1px solid #509111;
	border-bottom: 1px solid #5b992b;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #9fd574;
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
	color: white;
	padding-bottom: 5px;
	font-size: 1.4em;
	text-align: center;
	text-shadow: 0 1px 0 #396715;
}

#mail form input[type="submit"]:hover {
	opacity:.85;
	cursor: pointer; 
}
#mail form input[type="submit"]:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #356b0b inset; 
	-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
	-moz-box-shadow: 0 0 10px 5px #356b0b inset;
	-ms-box-shadow: 0 0 10px 5px #356b0b inset;
	-o-box-shadow: 0 0 10px 5px #356b0b inset;
	
}

Sau khi xong HTML/CSS cho Form thì các bạn xem demo ở dưới

STEP 3 – SIGNUP FORM + JQUERY AJAX

session_start();

	if($_SESSION['security_code'] == $_POST['captcha']) {

	$db = mysqli_connect("localhost","root","","ajax_form");
		$username = mysqli_real_escape_string($db,$_POST['name']);
		$password = mysqli_real_escape_string($db,$_POST['password']);
		$hash_pass = sha1($password);
		$email = $_POST['email'];

		$query = "INSERT INTO signup(user_name,password,email) VALUES ('".$username."','".$hash_pass."','".$email."')";
		$result = mysqli_query($db,$query);
		echo "true";
	} else {
		echo "false";
	}

Tớ giải thích một chút trong này nhé, Form đăng ký lúc nào cũng có Captcha thì việc đầu tiên mình sẽ kiểm tra xem người dùng đã nhập đúng Captcha hay chưa, nếu đúng thì mình thực hiện nhiệm vụ của Form và ngược lại thì trả về kết quả là “false”.

Các bạn chú ý là ở bài trước mình đã hướng dẫn các bạn dùng Jquery AJAX để xử lý Form thì luôn luôn có kết quả trả về để khi Form được success thì mình gọi hàm truy hồi để so sánh chuỗi trả về thì trong bài này cũng y như vậy. Nếu đúng thì mình thực hiện lấy các giá trị của Form, password của mình lưu trong CSDL là một chuỗi được mã hóa 40 ký tự với hàm sha1 nên mình sẽ mã hóa nó trước khi lưu vào CSDL. Sau đó mình insert vào CSDL và trả về kết quả là “true” thôi.

Do bài này mình sử dụng Jquery AJAX để xử lý nhiều Form nên mình sẽ viết một hàm là ajax_loader để khi mình cần sử dụng thì mình gọi nó ra.

 
function ajax_loader(type,url,data_form) {
	$.ajax({
	type: type,
	url: url,
	data: data_form,
	success: function(data_success) {
		if(data_success == "true") {
			$('.loader').fadeOut('fast');
			$(".success").slideDown('slow').delay(3000).slideUp('slow');
			clear_form();
			change_captcha();
		} else {
			$('.loader').fadeOut('fast');
			$(".error").slideDown('slow').delay(3000).slideUp('slow');
		}
	}
	});
}

• Hàm này của mình sẽ truyền vào cho nó 3 tham số :
• Type => Phương thức truyền dữ liệu
• Url => Đường dẫn tới file xử lý dữ liệu
• Data_form => Dữ liệu của Form

Tiếp theo mình sẽ xử lý Form đăng ký như sau:

 
$(document).ready(function() {   
	$("#signup_form").click(function() {
	var name = $("#name").val();
	var password = $("#password").val();
	var email = $("#email").val();
	var email_regex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
	var captcha = $("#captcha").val();
	var data_signup = 'name=' + name + '&password=' + password + '&email=' + email + '&captcha=' + captcha; 
	var type = "POST";
	var url = "signup.php";
	var form = "#form_signup";
});

Khi Form được click thì mình thực hiện lấy các giá trị của Form thông qua id của input và lưu vào một biến là data_signup, nhắc lại bài cũ một chút là chuỗi trong biến data_signup là thuộc tính name của input nhé.

Sau đó mình sẽ khai báo 3 biến tiếp theo là type, url, form. Form này mình sử dụng phương thức là POST thì gán giá trị là POST, file xử lý dữ liệu của mình là signup.php, còn biến form mình khai báo thêm để khi mình select trong Jquery gọn hơn. Các tham số này các bạn cũng không cần khai báo và viết vào luôn cũng được nhưng mình khai báo biến ra để các bạn thấy rõ hơn.

Tiếp theo mình sẽ kiểm tra dữ liệu được nhập vào.

if(name == "") {
	$(form + " > .nameError").slideDown('slow').delay(2000).slideUp('slow');
	$("#name").focus();
	return false;
}
if(password == "") {
	$(form + " > .passwordError").slideDown('slow').delay(2000).slideUp('slow');
	$("#password").focus();
	return false;
}
if(!email_regex.test(email)) {
	$(form + " > .emailError").slideDown('slow').delay(2000).slideUp('slow');
	$("#email").focus();
	return false;
}
if(captcha == "") {
	$(form + " > .captchaError").slideDown('slow').delay(2000).slideUp('slow');
	$("#captcha").focus();
	return false;
}

Trong bài này mình sử dụng class Error chung cho tất cả các Form nên mình khai báo thêm một biến form để select đúng Form của mình đang được submit, nếu không khi mình submit Form này thì lỗi của các Form khác cũng được show ra. Nhắc lại một chút là nối chuỗi trong Jquery là “ + “ và dấu “ > “ tức là thuộc con của thành phần đứng trước. Vậy Form mình đang submit có id là #signup_form thì mình sẽ select lỗi của Form này và hiển thị ra ngoài.

Tiếp theo mình sẽ gọi hàm ajax_loader mà mình đã viết ở trên ra để xử lý Form

 
$("#signup > .loader").html("<img src='images/loader.gif'/>").fadeIn('fast');
	ajax_loader(type,url,data_signup);
return false;

Hình ảnh loading của mình cũng phải select cho đúng Form của nó nhé, tham số mình truyền vào hàm này thì mình đã khai báo 3 biến ở trên và bây giờ mình truyền 3 biến này vào cho hàm và return false là xong ^^.

Sau khi xong phần này các bạn có thể xem ở dưới, một điều nữa là nếu các bạn muốn test hoàn chỉnh bài này thì khi đăng ký Form các bạn vui lòng điền Email có thật để phần tiếp theo mình phục hồi mật khẩu nó sẽ gửi mật khẩu về đúng Email của bạn nhé.

STEP 4 – LOGIN FORM + JQUERY AJAX

 
session_start();
	$db = mysqli_connect("localhost","root","","ajax_form");
	$username = mysqli_real_escape_string($db,$_POST['name']);
	$password = mysqli_real_escape_string($db,$_POST['password']);
	$hash_pass = sha1($password);

	$query = "SELECT user_name,password FROM signup WHERE user_name='".$username."'";
	$result = mysqli_query($db,$query);
	$row = mysqli_fetch_array($result);

	if(mysqli_num_rows($result) > 0) {
		if(strcmp($row['password'],$hash_pass)==0) {
			echo "true";
			$_SESSION['user_name'] = $username;
		} else {
			echo "false";
		}
	} else {
		echo "false";
	}

Đầu tiên mình kết nối CSDL, lấy giá trị của Form và dùng hàm sha1 để mã hóa password, sau đó mình sẽ SELECT username, password với điều kiện là username đang login vào.

Tiếp theo mình sẽ kiểm tra xem, password họ nhập vào có đúng với password lưu trong CSDL hay không, mình dùng hàm strcmp để so sánh 2 chuỗi này nếu nó == 0 có nghĩa là 2 cái này giống nhau thì mình trả về kết quả là “true” và lưu username này vào SESSION và ngược lại thì trả về kết quả là “false”.

Lưu ý là khi mình so sánh password phải so sánh với cái password mình đã mã hóa nhé, đừng so sánh với password mà họ nhập vào thì sẽ không đúng đâu vì password mình lưu trong CSDL đã được mã hóa nhé.

Tiếp theo mình sẽ sử dụng AJAX để xử lý Form như sau :

 
$("#login_form").click(function() {
	var name = $("#user-name").val();
	var password = $("#user-password").val();
	var data_login = 'name=' + name + '&password=' + password;
	var form = "#form_login";
if(name == "") {
	$(form + " > .nameError").slideDown('slow').delay(2000).slideUp('slow');
	$("#user-name").focus();
	return false;
}
if(password == "") {
	$(form + " > .passwordError").slideDown('slow').delay(2000).slideUp('slow');
	$("#user-password").focus();
	return false;
}
$("#login > .loader").html("<img src='images/loader.gif'/>").fadeIn('fast');
$.ajax({
	type: "POST",
	url: "login.php",
	data: data_login,
	success: function(data_success) {
		if(data_success == "true") {
			$('.loader').fadeOut('fast');
			document.location='page.php';
		} else {
			$('.loader').fadeOut('fast');
			$(".error").slideDown('slow').delay(3000).slideUp('slow');
		}
	}
});
	return false;
});

Khi Form được click thì mình thực hiện lấy giá trị của Form và lưu nó vào biến data_login sau đó kiểm tra lỗi và gọi AJAX để thực hiện xử lý Form. Các bạn thấy ở đây mình không gọi lại hàm ajax_loader mà phải viết lại AJAX vì trong đoạn xử lý của mình sẽ khác đi một chút đó là khi thực hiện thành công thì mình sẽ chuyển nó sang một trang mới mà cấu trúc trong hàm ajax_loader của mình là khác nên mình không thể sử dụng lại nó được.

 
document.location='page.php';  // gọi trang này khi AJAX xử lý trả về kết quả là “true”

Trang page.php của mình chỉ đơn giãn vậy thôi, mình chỉ cần kiểm tra xem nếu không có SESSION thì mình trỏ nó về lại file index.php.

session_start();
if(empty($_SESSION['user_name'])) {
	header("Location: index.php");
}
if(isset($_GET['logout'])){
	session_destroy();
	header("Location:index.php");
}
echo "<a href='page.php?logout'><b>Logout</b></a>";
echo "<div align='center'>Login successfully</div>";

Nếu người dùng thực hiện logout thì mình hủy SESSION và trỏ về index.php, ở dưới mình echo thẻ a ra và truyền cho nó tham số logout để khi họ logout thì mình sẽ GET được tham số này và hủy SESSION và cuối cùng mình xuất ra thông báo thôi.

STEP 5 – FORGOT PASSWORD + JQUERY AJAX

 
$user_name = $_POST['name'];
		$email = $_POST['email'];
		$password = sha1($user_name);
		$db = mysqli_connect("localhost","root","","ajax_form");

		$querys = "SELECT user_name, email FROM signup WHERE user_name='".$user_name."'";
		$results = mysqli_query($db,$querys);
		$row = mysqli_fetch_array($results);

		if(mysqli_num_rows($results) > 0) {
			if(strcmp($row['email'],$email)==0) {
				$query = "UPDATE signup 
						  SET password='".$password."' 
						  WHERE user_name='".$user_name."'";
				$result = mysqli_query($db,$query);

				$to = $_POST['email'];
				$header = "Jquery AJAX Supper Form + PHP & MYSQL";
				$subject = "New Password";

				$body = "Ngày: ". date('d/m/Y')."\n";
				$body .= "Username: ".$user_name . " - Email:" . $email . "\n";
				$body .= "Your password: ".$user_name;
				$headers = "From: $header \n";

				mail($to, $subject, $body, $headers);
				echo "true";
			} else {
				echo "false";
			}
		} else {
			echo "false";
		}

Đầu tiên mình sẽ lấy giá trị của Form sau đó kết nối CSDL và SELECT username, email với điều kiện là username đang thực hiện phục hồi password.

Tiếp theo mình sẽ thực hiện so sánh chuỗi Email từ người dùng nhập vào và Email lưu trong CSDL với hàm strcmp xem có giống nhau không, nếu đúng thì mình thực hiện nhiệm vụ của Form là khôi phục mật khẩu cho họ rồi trả về kết quả là “true” và ngược lại thì trả về kết quả là “false”.

Nếu đúng username và email đó thực hiện lấy lại mật khẩu thì mình thực hiện câu lệnh truy vấn SQL để UPDATE mật khẩu mới cho họ với điều kiện là chính username đang thực hiện phục hồi password, mình sẽ lấy chính tên username đó làm mật khẩu cho họ để họ khỏi bị quên ^^.

Lưu ý là mật khẩu này mình lưu vào CSDL thì phải mã hóa nó với hàm sha1 nhé, ở trên mình đã mã hóa biến $username và lưu nó vào biến $password rồi nhé. Và mình UPDATE password cho họ chính là biến $password mình đã mã hóa nhé, sau đó mình sẽ thực hiện gửi một Email có nội dung là mật khẩu của họ kiểm tra và đăng nhập trở lại thì password của mình gửi đến Email cho họ sẽ là password chưa được mã hóa và khi họ thực hiện đăng nhập vào thì nó sẽ tự động mã hóa và so sánh với CSDL của mình. Sau đó mình thực hiện hàm mail và trả về kết quả là “true”.

Tiếp theo mình sẽ sử dụng AJAX để xử lý Form như sau :

 
$("#get_pass").click(function() {
	var name = $("#get-name").val();
	var email = $("#get-email").val();
	var email_regex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
	var data_get_pass = 'name=' + name + '&email=' + email;
	var type = "POST";
	var url = "get_pass.php";
	var form = "#get_pass_form";
if(name == "") {
	$(form + " > .nameError").slideDown('slow').delay(2000).slideUp('slow');
	$("#get-name").focus();
	return false;
}
if(!email_regex.test(email)) {
	$(form + " > .emailError").slideDown('slow').delay(2000).slideUp('slow');
	$("#get-email").focus();
	return false;
}
$("#mail  > .loader").html("<img src='images/loader.gif'/>").fadeIn('fast');
ajax_loader(type,url,data_get_pass);
return false;
});
$("#getpass").click(function() {
	$("#mail  > form").slideToggle('normal');
});

Khi Form được click thì sẽ thực hiện lấy giá trị của Form và lưu vào biến data_get_pass, sau đó khai báo thêm 2 biến nữa để truyền vào cho hàm ajax_loader và thêm biến form nữa để mình select jquery cho chính xác ^^.

Tiếp theo mình kiểm tra lỗi của Form, nếu có lỗi mình sẽ show nó ra, sau đó mình sẽ gọi hàm ajax_loader để xử lý Form này. Mình nói thêm 1 chút nữa là ở cái Form Login mình có cái label để click hiển thị ra cái Form Forgot password nó có id là #get_pass thì mình thêm một chút Jquery cho nó cho đẹp ^^. Khi nó được click thì nó sẽ kéo lên kéo xuống cái Form khi mình sử dụng Event slideToggle.

Sau khi xong thì bạn có thể xem demo đầy đủ ở dưới.

Tớ hy vọng bài viết này sẽ giúp ích cho các bạn ^^.

• Để tiện cho việc tiếp thu bài này, các bạn nên xem lại bài Phân trang với PHP & MYSQL của anh Demon Warlock.
• Do đây là bài viết nâng cao, nên bạn cần biết một số kiến thức cơ bản về PHP&MySQL để kết nối CSDL.
• Hình ảnh, database được đính kèm trong file download.

STEP 1 – PHÂN TRANG VỚI PHP & MYSQL

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Pagination with Jquery AJAX + PHP</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
	<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
	<script type="text/javascript" src="js/AJAX.js"></script> 
</head>
<body>
	<div id="wrapper">
		<div id="loading"></div>
		<h1>Pagination Jquery AJAX + PHP</h1>
		<div id="data">
			<nav role="list">
				<ul>
			<?php 
				
				$db = mysqli_connect('localhost','root','','pagination_ajax');
				$display = 10;
                if(isset($_GET['page']) && (int)$_GET['page']>=0) {
                   $page = $_GET['page'];
                } else { 
                    $query = "SELECT COUNT(id) FROM data";
                    $result = mysqli_query($db,$query);
                    $rows = mysqli_fetch_array($result,MYSQLI_NUM);
                    $record = $rows[0];
	                if($record > $display) {
	                	$page = ceil($record/$display);
	                } else {
	                	$page = 1;
	                }
                }

				$start = (isset($_GET['start']) && (int)$_GET['start']>=0) ? $_GET['start'] : 0;
				$current = ($start/$display)+1;
				$next = $start + $display;
                $previous = $start - $display;
                $last = ($page - 1)*$display;
                if ($current >= 7) {
				    $start_page = $current - 3;
				    if ($page > $current + 3)
				        $end_page = $current + 3;
				    else if ($current <= $page && $current > $page - 6) {
				        $start_page = $page - 6;
				        $end_page = $page;
				    } else {
				        $end_page = $page;
				    }
				} else {
				    $start_page = 1;
				    if ($page > 7)
				        $end_page = 7;
				    else
				        $end_page = $page;
				}



				$query_data = "SELECT * FROM data
							   ORDER BY id 
	                   		   LIMIT $start, $display";
				$result_data = mysqli_query($db,$query_data);
				while($set = mysqli_fetch_array($result_data,MYSQLI_ASSOC)) {
						$id = $set['id'];
						$content = $set['content'];
					echo "<li><span>$id</span> - $content</li>";
				}
			?>
				</ul>
			</nav>

			<nav role="page">
				<ul>
					<?php 
				if($page > 1) {
					if ($current > 1) {
					    echo "<li><a href='index.php?start=0&page=$page'>First</a></li>";
					    echo "<li><a href='index.php?start=$previous&page=$page'>Previous</a></li>";
					} 

					for ($i = $start_page; $i <= $end_page; $i++) {

					    if ($current == $i)
					        echo "<li class='current'>$i</li>";
					    else
					        echo "<li><a href='index.php?start=".($display*($i-1))."&page=$page'>$i</a></li>";
					}

					if ($current < $page) {
					    echo "<li><a href='index.php?start=$next&page=$page'>Next</a></li>";
					    echo "<li><a href='index.php?start=$last'>Last</a></li>";
					} 
				}
					?>
				</ul>
			</nav>
		<span class='per_page'><?php echo "Trang " . $current . " => ". $page; ?></span>

		</div>
	</div><!-- End #wrapper -->
</body>
</html>

STEP 1.1 – CSS

*{margin:0; padding:0;}

body {
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
}

#wrapper {
	width: 1000px;
	margin: 0 auto;
}

#data {
	position: relative;
}

h1 {
	font-size: 2.0em;
	text-align: center;
	margin-top: 50px;
}

nav[role="list"] {
	position: absolute;
	left: 230px;
	top: 20px;
	font-size: 1.7em;
}

nav[role="list"] ul li {
	padding-bottom: 10px;
}

nav[role="list"] ul li span {
	color: green;
	font-weight: bold;
}

nav[role="page"] {
	position: absolute;
	top: 300px;
	left: 220px;
}

nav[role="page"] ul li {
	float: left;
	margin-left: 10px;
	background: url(../images/pagenavi_bg.jpg) repeat-x top left;
}

nav[role="page"] ul li a {
	color: white;
	text-decoration: none;
	display: block; 
	padding: 8px;
	font-weight: bold;
	font-size: 1.2em;
}

nav[role="page"] ul li a:hover {
	background: url(../images/pagenavi_bg.jpg) repeat-x bottom left;
}

nav[role="page"] ul li.current {
	font-weight: normal;
	font-size: 1.2em; 
	padding: 8px;
	color: white;
	background: url(../images/pagenavi_bg.jpg) repeat-x bottom left 
}

#data >  span.per_page {
	font-weight: bold; 
	padding: 8px 8px 9px 8px;
	color: white;
	background: url(../images/pagenavi_bg.jpg) repeat-x top left;
	position: absolute;
	top: 300px;
	right: 150px;
	font-size: 1.2em;
	width: 88px;
	text-align: center;
}

Công việc mình cần làm ở phần này như sau :

1. Xác định bao nhiêu dòng dữ liệu hiển thị trên một trang

$display = 10; // Mình muốn hiển thị 10 dòng trên một trang

2. Tính tổng số trang

If(isset($_GET[‘page’]) && (int)$_GET[‘page’]>=0) {
	$page = $_GET[‘page’];
}

Đầu tiên mình sẽ kiểm tra xem nếu tổng số trang đã được tính chưa và tổng số trang của mình phải là một số nguyên >=0 thì mình lấy giá trị của nó, nếu chưa có mình sẽ đi tính tổng số trang.

Mình sử dụng hàm COUNT trong câu lệnh truy vấn MYSQL để lấy ra tổng số dòng trong CSDL. Tiếp theo mình tính số trang bằng cách lấy tổng số dòng dữ liệu chia cho tổng số dữ liệu muốn hiển thị và dùng hàm ceil để làm tròn số vì mình không muốn trang của mình có số dư như là 1.4 hay 2.2, số trang của mình phải là một số nguyên không âm.

if($record > $display) {
	$page = ceil($record/$display);
} else {
	$page = 1;
}

Nhưng gặp trường hợp tổng số dòng dữ liệu mình lấy ra nó lại nhỏ hơn số dòng muốn hiển thị thì mình phải kiểm tra nó, nếu tổng số dữ liệu mình lớn hơn tổng số dòng hiển thị thì mình thực hiện tính và ngược lại thì tổng số trang của mình là 1.

3. Xác định dòng bắt đầu trong CSDL

$start = (isset($_GET['start']) && (int)$_GET['start']>=0) ? $_GET['start'] : 0;

Nếu số đã có số dòng bắt đầu và nó là một số nguyên >=0 thì mình lưu nó lại, ngược lại thì dòng bắt đầu của mình là 0.

4. Tính trang hiện tại, trang sau, trang kế tiếp, trang cuối, hiển thị số trang.

$current = ($start/$display)+1;  // Trang hiện tại = ( số dòng bắt đầu / số dòng hiển thị ) + 1
$next = $start + $display;  // Trang tiếp theo =  số dòng bắt đầu + số dòng hiển thị 
$previous = $start - $display; // Trang sau = số dòng bắt đầu  - số dòng hiển thị
$last = ($page - 1)*$display; // Trang cuối = ( tổng số trang – 1 ) * số dòng hiển thị

Hiển thị số link của trang

if ($cur_page >= 7) {
	$start_page = $cur_page - 3;
if ($page > $cur_page + 3)
	$end_page = $cur_page + 3;
else if ($cur_page <= $page && $cur_page > $page - 6) {
	$start_page = $page - 6;
	$end_page = $page;
} else {
	$end_page = $page;
}
} else {
	$start_page = 1;
if ($page > 7)
	$end_page = 7;
else
	$end_page = $page;
}

Mình muốn số link hiển thị là 7 để khi CSDL nó lên đến hàng ngàn dòng thì số link sẽ không hiển thị ra quá nhiều. Nếu trang hiện tại >=7 thì trang bắt đầu bằng trang hiện tại trừ đi 3. Mình muốn ở sau trang hiện tại của mình là 3 trang và phía trước của nó là 3 trang thì mình kiểm tra thêm một lần nữa là nếu tổng số trang lớn hơn trang hiện tại + 3 thì trang kết thúc của mình là trang hiện tại + 3. Ngược lại nếu trang hiện tại mình nhỏ hơn hoặc bằng tổng số trang và trang hiện tại nhỏ hơn tổng số trang – 6 thì trang bắt đầu của mình là tổng số trang – 6 và trang kết thúc của mình là bằng chính tổng số trang. Nếu trường hợp trên không xảy ra thì mình gán trang kết thúc bằng tổng số trang.

Ngược lại của trường hợp trang hiện tại >= 7 thì trang bắt đầu sẽ là 1. Nếu tổng số trang lớn hơn 7 thì trang kết thúc của mình sẽ là 7 và ngược lại thì trang kết thúc bằng tổng số trang. Đoạn hiển thị số link của trang có vẽ hơi khó hiểu, bạn nên xem kỹ nhé.

5. Truy vấn CSDL

Sau khi đã có hai biến $display & $start thì mình bắt đầu SELECT CSDL, LIMIT ở đây được gọi là giới hạn, khi người dùng truy cập vào lần đầu tiên thì biến $start của mình sẽ không sét được có nghĩa là nó là = 0 và biến $display mình đã khai báo trên kia là 10 thì nó sẽ xuất ra cho mình 10 dòng dữ liệu đầu tiên.

6. Hiển thị phân trang

Sau khi mình đã tính toán các bước cần thiết ở trên, bây giờ mình sẽ cho nó hiển thị ra ngoài. Nếu tổng số trang của mình > 1 thì mình sẽ phân trang cho nó còn nhỏ hơn 1 thì chỉ có 1 trang nên mình không cần phân trang làm gì.

Hiển thị trang đầu ( First page ) và trang sau ( Previous page )

if ($current > 1) {
	echo "<li><a href='index.php?start=0&page=$page'>First</a></li>";
if ($current > 1) {
	echo "<li><a href='index.php?start=$previous&page=$page'>Previous</a></li>";
}

Nếu trang hiện tại của mình > 1 thì nó mới xuất hiện, trang đầu của mình thì tham số start của mình chắc chắn nó sẽ = 0 thì mình sẽ gán trực tiếp giá trị vào luôn.

Hiển thị số link của trang ( Link page )

for ($i = $start_page; $i <= $end_page; $i++) {
	if ($current == $i)
	echo "<li class='current'>$i</li>";
else
echo "<li><a href='index.php?start=".($display*($i-1))."&page=$page'>$i</a></li>"; }

Ở phần trên mình đã tính được trang bắt đầu và trang cuối của mình thì bây giờ mình sẽ dùng vòng lặp For để lấy nó ra. Khi người dùng truy cập lần đầu tiên thì trang bắt đầu của mình luôn luôn sẽ là 1 và trang kết thúc của mình sẽ là 7. Khi người dùng di chuyển sang trang 7 thì bước nhảy của mình sẽ được tính như ở trên có nghĩa là trang hiện tại của mình là 7 thì phía sau nó sẽ có 3 trang là 6 5 4 và phía trước của nó sẽ có 3 trang nữa là 8 9 10 và nó sẽ tiếp tục tăng dần cho đến trang cuối cùng.
Hiển thị trang tiếp theo ( Next page ) và trang cuối ( Last page )

if ($current < $page) {
	echo "<li><a href='index.php?start=$next&page=$page'>Next</a></li>";
}
if ($current < $page) {
	echo "<li><a href='index.php?start=$last'>Last</a></li>";
}

Nếu trang hiện tại của mình vẫn nhỏ hơn tổng số trang thì mình cho hiển thị nó ra, các tham số mình đã tính ở trên thì bây giờ chỉ việc thay biến đó vào thôi ^^.

STEP 2 – ÁP DỤNG JQUERY AJAX

<?php 

if($_POST['page']) {
$page = $_POST['page'];
$current_page = $page;
$page -= 1;
$display = 10;
$start = $page * $display;
$db = mysqli_connect('localhost','root','','pagination_ajax');

$data = "";

$query = "SELECT * FROM data
		  ORDER BY id
		  LIMIT $start, $display";
$result = mysqli_query($db,$query);
while($rows = mysqli_fetch_array($result,MYSQLI_ASSOC)) {
	$id = $rows['id'];
	$content = $rows['content'];
	$data .= "<li><span>$id</span> - $content</li>";
}

$data = "<nav role='list'>
			<ul>".$data."</ul>
		</nav>";

$query_page = "SELECT COUNT(*) AS count FROM data";
$result_page = mysqli_query($db,$query_page);
$row = mysqli_fetch_array($result_page);
$count = $row['count'];
$pages = ceil($count / $display);

if ($current_page >= 7) {
	$start_page = $current_page - 3;
		if ($pages > $current_page + 3)
			$end_page = $current_page + 3;
		else if ($current_page <= $pages && $current_page > $pages - 6) {
			$start_page = $pages - 6;
			$end_page = $pages;
		} else {
			$end_page = $pages;
		}
} else {
	$start_page = 1;
if ($pages > 7)
	$end_page = 7;
else
	$end_page = $pages;
}

$data .= "<nav role='page'><ul>";

if ($current_page > 1) {
	$data .= "<li page='1'>First</li>";
	$previous = $current_page - 1;
	$data .= "<li page='$previous'>Previous</li>";
} 

for ($i = $start_page; $i <= $end_page; $i++) {
	if ($current_page == $i)
		$data .= "<li page='$i' class='current'>{$i}</li>";
	else
		$data .= "<li page='$i'>{$i}</li>";
}

if ($current_page < $pages) {
	$next = $current_page + 1;
	$data .= "<li page='$next'>Next</li>";
	$data .= "<li page='$pages'>Last</li>";
} 

$total_page = "<span class='per_page'>Trang ". $current_page ." => $pages </span>";

$data = $data . "</ul></nav>".$total_page;

echo $data;

}
?>

Khi mình bắt đầu chuyển nó sang dạng phân trang với Jquery AJAX thì cấu trúc của nó sẽ có một số thay đổi để phù hợp nên phần này là quan trọng các bạn hãy chú ý thật kỹ nhé.

Khi mình sử dụng Jquery AJAX để load dữ liệu thì mình phải kiểm tra xem nếu có trang nào thì mới thực hiện load dữ liệu và ngược lại sẽ không load gì cả.

Nếu có thì mình sẽ lưu giá trị nó vào một biến $page và biến $page của mình khi được load lần đầu tiên thì nó luôn luôn là trang 1 và nó cũng chính là trang hiện tại.

Các bạn thấy biến $page -= 1 nó có nghĩa là khi truy cập lần đầu tiên thì biến $page của mình là trang 1 thì -=1 là chính nó trừ đi 1 thì lúc này $page của mình sẽ là 0. Sau đó mình có biến $display =10 thì lúc này $page của mình = 0 và $display = 10 thì mình sẽ có $start = 0 vì 0 x 10 thì = 0 chứ nhỉ ^^ .

Trong cuộc gọi AJAX thì dữ liệu của mình trả về là một chuỗi hay một mảng giá trị lưu giữ toàn bộ giá trị đó thì lúc này mình sẽ khởi tạo một biến $data = ” “, có nghĩa là chuỗi này ban đầu sẽ chưa có gì cả. Sau đó mình mới truy vấn CSDL và lấy dữ liệu của nó ra và lưu vào biến này.

Trong đó biến $data .= này có nghĩa là khi vòng lặp while của mình nó lấy dữ liệu từ dòng thứ 1 cho đến dòng cuối cùng thì nó sẽ nối tiếp lại với nhau. Trong PHP muốn nối một chuỗi thì mình dùng dấu “ . “ nhưng ở đây mình muốn nối tiếp nhiều chuỗi vào cùng trong một biến thì mình dùng thêm “ = “ vậy là mình đã nối chúng lại với nhau thành một chuỗi lớn.

Và cuối cùng mình cũng thực hiện các bước phân trang như ở phần 1 và mình sẽ không xuất nó ra mà lưu nó tiếp vào biến $data vì để khi mình echo $data ra thì dữ liệu của mình sẽ trả về toàn bộ.

Nhưng một đặc điểm đáng lưu lý ở đây là các bạn sẽ thấy mình sẽ không còn dùng thẻ a với link là index.php?start=??&page=?? nữa vì bây giờ mình chỉ cần lấy số trang và dùng AJAX để load trang đó nên mình chỉ cần thẻ li là đủ, trong này mình sẽ truyền tham số cho thẻ li qua một chổ tạm là page và khi mình load trang thì chỉ cần sử dụng hàm attr trong Jquery để lấy tham số này và truyền vào để AJAX xử lý thôi.

Bước cuối cùng cũng là bước quan trọng nhất khi dữ liệu mình đã có thì mình dùng AJAX để gọi nó ra.

function pagination(page){
	$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');                 
	$.ajax ({
		type: "POST",
		url: "pagination.php",
		data: "page="+page,
		success: function(data_page) { 
			$('#loading').fadeOut('fast');
			$("#data").html(data_page);  
		}
	});
}

Mình sẽ viết một hàm pagination có tham số là page có nghĩa là tham số mình truyền vào chính là số trang. Mình vẫn sử dụng phương thức là POST và dữ liệu của mình là từ file pagination.php, data của mình là số trang hiển thị, thì page của mình sẽ = tham số page, nhắc lại một xíu là dấu ” + ” có nghĩa là nối chuỗi trong Jquery nhé. Lúc này trong thẻ

<div id="data">

của mình sẽ là rỗng, chưa có gì cả và bây giờ mình dùng AJAX để đổ dữ liệu vào đó.

   pagination(1);  
   $("nav[role='page'] > ul li").live('click',function(){
	var page = $(this).attr('page');
	pagination(page);
});    

Sau khi viết xong hàm pagination để gọi trang thì lúc đầu mình muốn khi người dùng truy cập lần đầu tiên nó sẽ gọi trang 1 thì mình chạy hàm pagination với tham số page=1. Sau đó mình sử dụng Jquery để xử lý khi họ chuyển trang, khi thẻ li được click thì mình sẽ lấy tham số của thẻ li mà mình đã truyền trong file pagination.php đó lưu vào biến page và gọi hàm pagination với tham số là page để gọi trang mà họ di chuyển tới.

Một điểm nữa là khi mình sử dụng sự kiện live() thì sự kiện này sẽ được sử dụng trong suốt quá trình chạy website và khi mình dùng AJAX kết quả trả về là success thì dữ liệu sẽ được append vào document. Những element ( thẻ li ) sau sẽ không nhận được các sự kiện click hay submit nữa, khi đó mình phải sử dụng sự kiện live() để di chuyển sang trang khác.

• [Ajax phần 1] Ajax thuần javascript
• [Ajax phần 2] Ajax thuần javascript – Sử dụng phương thức POST
• [Ajax phần 3] jQuery Ajax cơ bản

Mọi thắc mắc các bạn có thể gửi mail cho mình: mr.nav90@gmail.com hoặc các bạn comment ở dưới mình sẽ support cho các bạn nhanh nhất có thể, nào chúng ta cùng bắt đầu ^^

Step 1 – Setup HTML

<?php session_start(); ?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Jquery AJAX Contact Form With PHP</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
	<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
	<script type="text/javascript" src="js/AJAX.js"></script> 
</head>
<body>
	<div id="wrapper">
		<div id="container">
			<h1>Jquery AJAX Contact Form With PHP<span class="arrow"></span></h1>
			<div id="loading"></div>
			<form action="" method="POST">
				<div id="success">Thanks your contact me !!!</div>
				<div id="error">Error !!! Can not sending Email.</div>
				<p>
				<input type="text" id="name" name="name" placeholder="Please insert your Name" required="">
				<div class="warning" id="nameError">Vui lòng nhập tên của bạn</div>
				</p>

				<p>
				<input type="email" id="email" name="email" placeholder="Please insert your Email" required="">
				<div class="warning" id="emailError">Email không hợp lệ</div>
				</p>

				<p>
				<input type="url" id="website" name="website" placeholder="Please insert your Website" required="">
				<div class="warning" id="websiteError">Vui lòng nhập Website của bạn</div>
				</p>

				<p>
				<input type="text" id="subject" name="subject" placeholder="Please insert your Subject" required="">
				<div class="warning" id="subjectError">Vui lòng nhập tiêu đề</div>
				</p>

				<p>
				<textarea id="content" name="content" placeholder="Please insert your Message" required="" ></textarea>
				<div class="warning" id="contentError">Vui lòng nhập nội dung</div>
				</p>

				<p>
				<input type="text" id="captcha" name="captcha" placeholder="Please insert Captcha" required="" alt="Security Code">
				<img src="captcha.php" id="img_captcha">
				<img src="images/load.png" id="load_captcha">
				<div class="warning" id="captchaError">Vui lòng nhập Captcha</div>
				</p>

				<p>
				<input type="submit" id="SendMail" value="Send Mail">
				</p>

			</form>
		</div><!-- End #container -->
	</div><!-- End #wrapper -->
</body>
</html>

Các thuộc tính HTML5 mình dùng trong bài mình sẽ giới thiệu lại cho các bạn nào mới làm quen với HTML5.

• Required => Bắt buộc bạn nhập vào hộp thoại input trước khi submit
• Placeholder => Tạo một đoạn text mờ trong input
• Type: Email => Định dạng input nhập vào phải là một Email hợp lệ
• Type:Url => Định dạng input nhập vào phải là một đường dẫn hợp lệ

Step 2 – CSS

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{ /* display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0; */}input,select{vertical-align:middle;}

*{margin:0; padding:0;}

@font-face { 
	font-family: 'UTM Avo';
	src:url('../font/UTM-Avo.ttf') format('truetype')
}

#wrapper {
		width: 1000px;
		margin: 0 auto; 
}

#container {
  	width: 450px;
  	background: #ebebeb;
  	border: 1px solid #d4d4d4;
		margin-left: 300px;
    margin-top: 10px;
    position: relative;
}

#container h1 {
		margin-top: 20px;
		background: -moz-linear-gradient(top,#E3654C,#B85140);
    background: -webkit-linear-gradient(top,#E3654C,#B85140);
  	padding: 10px 20px;
  	margin-left: -20px;
  	width: 70%;
  	color: #fff;
		font-family: UTM Avo;
  	position: relative;
  	box-shadow: 1px 1px 1px #292929;
  	-moz-box-shadow: 1px 1px 1px #292929;
  	-webkit-box-shadow: 1px 1px 1px #292929;
    text-shadow: 0px 1px 0px #333;
}

.arrow {
		width: 0; height: 0;
  	line-height: 0;
  	border-left: 20px solid transparent;
  	border-top: 10px solid #ac0202;
  	position: absolute;
  	top: 100%;
  	left: 0px;
}

#container form {
		margin: 20px 20px 0px 20px;  
}

#container div#loading {
    position: absolute;
    top: 130px;
    right: 40px;
}

#container form div#success {
    border: 1px solid green;
    color: green;
    padding: 5px;
    width: 170px;
    margin-bottom: 10px;
    display: none;
}

#container form div#error {
    border: 1px solid red;
    color: #333;
    padding: 5px;
    width: 200px;
    margin-bottom: 10px;
    display: none;
}

#container form p {
		padding-bottom: 10px;  
}

#container form input {
		width: 250px;
		height: 30px;
		font-family: UTM Avo;
  	padding: 0px 10px;
}

#container form div.warning {
    border: 1px solid #777;
    padding: 5px;
    width: 200px;
    color: red;
    display: none;
}

#container form input#captcha {
		width: 205px;
		float: left; 
}

#container form img {
		margin: 0px 10px;
		border: 1px solid #A7A6AA;  
}

#container form img#img_captcha {
		float: left;  
}

#container form img#load_captcha {
		background: #fff;
		padding: 4px;  
  	margin: 0px;
    cursor: pointer;
}

#container form textarea {
		resize: none;
		width: 385px;
		height: 120px; 
  	padding: 10px;
  	font-family: UTM Avo;
  	font-size: 14px;
}

#container form input[type="submit"] {
  	width: 120px;
  	font-weight: bold;
  	font-family: UTM Avo;
 		border: 1px solid #A7A6AA;
  	background: -moz-linear-gradient(top,#fff,#d4d4d4);
  	background: -webkit-linear-gradient(top,#fff,#d4d4d4);
}

Sau khi xong 2 phần HTML & CSS các bạn có thể xem demo bên dưới

Step 3 – Create Captcha

<?php 
	session_start();
	$captcha = imagecreate(125, 32);
	$bg = imagecolorallocate($captcha, 255, 255, 255);
	$font_color = imagecolorallocate($captcha, 106, 189, 197);
	$font = "font/UTM-Avo.ttf";

	$string = md5(microtime() * mktime());
	$text = substr($string,0,7);
	$_SESSION['security_code'] = $text;

	imagettftext($captcha, 20, 0, 5, 25, $font_color, $font, $text);
	header("Content-type: image/png"); 
	imagepng($captcha);
	imagedestroy($captcha);
?>

Nếu các bạn xem chưa hiểu thì các bạn hãy xem lại video của anh Demon Warlock hướng dẫn cách tạo Captcha nhé Cách tạo captcha

Step 4 – Send Mail

<?php 
	session_start();
	if($_SESSION['security_code'] == $_POST['captcha']) {
		$name = $_POST['name'];
		$email = $_POST['email'];
		$website = $_POST['website'];
		$subject = $_POST['subject'];
		$content = $_POST['content'];

		$to = "contact.email.example@gmail.com";

		$body = "Ngày: ". date('d/m/Y')."\n";
		$body .= $name . "- Email:" . $email . "\n";
		$body .= "Website: $website\n";
		$body .= "Send a Email with content:\n".nl2br($content);
		$headers = "From: $email \n";

		mail($to, $subject, $body, $headers);
		echo "true";

	} else {
		echo "false";
	}

?>

Tớ giải thích một chút trong này nhé, ban đầu mình sẽ kiểm tra xem captcha đã nhập đúng hay chưa, đoạn text trong cái hình captcha chúng ta đã lưu nó lại vào một SESSION có tên là: security_code và input của mình sẽ là: captcha. Nếu hai cái này bằng nhau thì mình sẽ thực hiện công việc ở trong này.

- Lấy giá trị các input được nhập, và cho vào nội dung, trong này mình có sử dụng “\n” nghĩa là xuống một hàng và hàm nl2br dùng để tự động xuống hàng khi trong nội dung họ gõ text xuống hàng.

Sau đó chúng ta thực hiện send mail với nội dung trên và lưu ý điểm quan trọng cuối cùng đó là kết quả trả về để chúng ta sử dụng AJAX.

Sau khi send mail xong sẽ echo “true” và ngược lại của hàm If sẽ echo “false”
Chuỗi “true” và “false” chính là kết quả trả về.

Sau khi xong phần PHP cho form chúng ta có thể xem kết quả ở dưới

Step 5 – Jquery

Bây giờ chúng ta sẽ áp dụng jQuery vào cho Form

$(document).ready(function() {
            $("#SendMail").click(function() {
                    var name = $("#name").val();
                    var email = $("#email").val();
                    var website = $("#website").val();
                    var subject = $("#subject").val();
                    var content = $("#content").val();
                    var captcha = $("#captcha").val();
                    var email_regex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                   var data_string = 'name=' + name + '&email=' + email + '&website=' + website + '&subject=' + subject + '&content=' + content + '&captcha=' + captcha;
	});
});

Giải thích đoạn code trên có ý nghĩa thế này, khi Form được submit thì chúng ta sẽ lấy giá trị của Form bằng Jquery, chúng ta lấy giá trị của nó thông qua id của input các bạn có thể xem trong phần HTML.
Sau đó ta có 1 biến kiểm tra Email, thì cái này là một chuỗi check định dạng Email, đoạn này các bạn copy vào luôn cũng được, giải thích thì khó hiểu lắm.

Tiếp đến chúng ta sẽ lưu tất cả các giá trị mà mình lấy được vào biến data_string. Lưu ý ở đây là các chuỗi trong cặp dấu ‘ ‘ là name của input trong Form nhé, trong Jquery muốn nối một chuỗi thì mình dùng dấu ‘+’
Tiếp theo chúng ta sẽ dùng Jquery để kiểm tra giá trị trong Form xem người dùng nhập đầy đủ hay chưa.

if(name == "") {
	$("#nameError").slideDown('slow').delay(1000).slideUp('slow');
	$("#name").focus();
	return false;
       }
        if(!email_regex.test(email) || email == "") {
               $("#emailError").slideDown('slow').delay(1000).slideUp('slow');
              $("#email").focus()
              return false;
        }
       if(website == "") {
               $("#websiteError").slideDown('slow').delay(1000).slideUp('slow');
               $("#website").focus()
              return false;
       }

        if(subject == "") {
               $("#subjectError").slideDown('slow').delay(1000).slideUp('slow');
               $("#subject").focus();
               return false;
        }
        if(content == "") {
                $("#contentError").slideDown('slow').delay(1000).slideUp('slow');
               $("#content").focus()
               return false;
       }
        if(captcha == "") {
                $("#captchaError").slideDown('slow').delay(1000).slideUp('slow');
               $("#captcha").focus()
              return false;
       }        

Trong đoạn Jquery trên, chúng ta sẽ kiểm tra xem nếu các input rỗng thì sẽ dùng Jquery để hiển thị lỗi của nó ra. Ở trong phần HTML mình đã đặt một div ngay ở dưới mỗi input có id tương ứng với mỗi input, trong CSS mình đã cho nó display: none. Mình sử dụng hàm slideDown để show lỗi của input ra, tham số ‘slow’ => chậm, các bạn có thể đổi thành ‘fast’ => nhanh hay các con số 400, 500 hay 800 thì tùy ý các bạn.

Delay(1000) tức là nó sẽ dừng lại trong 1s, nó tính thế này: 1000 => 1s, 60000 => 1p .. thì chúng ta sẽ cho nó slideUp ẩn nó đi và đồng thời trỏ con chuột vào ô input chưa nhập và return false nó luôn.
Tiếp theo chúng ta sẽ viết thêm 2 Function nữa đó là:

Clear Form => Xóa các giá trị vừa nhập khi gửi mail thành công

function clear_form() {
            $("#name").val('');
            $("#email").val('');
            $("#website").val('');
           $("#subject").val('');
           $("#content").val('');
           $("#captcha").val('');
}

Change Captcha => Thay đổi hình ảnh Captcha

function change_captcha() {
	document.getElementById('img_captcha').src="captcha.php?rnd=" + Math.random();
}

Giải thích một chút ở đây có nghĩa là cái hình Captcha của chúng ta sẽ có id là img_captcha mình sẽ hướng tới nó thông qua id và trỏ nó tới đường dẫn file captcha với tham số rnd là ngẫu nhiên nối với hàm Math.random để tạo một chuỗi mới.

Trong Form chúng ta có một cái hình để load Captcha mới với id là #load_captcha thì chúng ta sẽ xử lý nó khi được click thì chúng ta sẽ gọi hàm change_captcha(); mình vừa viết ở trên.

$("#load_captcha").click(function() {
	change_captcha();
});

Step 6 – AJAX

$("#loading").html("<img src='images/loading.gif'/>").fadeIn('fast');
$.ajax({
	type: "POST",
	url: "sendmail.php",
	data: data_string,
	success: function(data_form) {
	         if(data_form == "true") {
	        $('#loading').fadeOut('fast');
                       $("#success").slideDown('slow').delay(3000).slideUp('slow');
                       clear_form();
                       change_captcha();
                       } else {
	        $('#loading').fadeOut('fast');
                      $("#error").slideDown('slow').delay(3000).slideUp('slow');
                     }
               }
 });
return false;

Khi Form được nhập đầy đủ và được submit thì mình sẽ cho hiển thị cái hình dạng load dữ liệu ra. Và sau đó gọi AJAX để thực hiện công việc chính của Form như sau:

• Type: “POST” => Phương thức mình sử dụng ở đây là POST
• Url: “sendmail.php” => Đường dẫn tới file sendmail.php
• Data: data_string => Lúc ở đoạn Jquery ở trên kia chúng ta đã lấy giá trị của Form và lưu vào biến này, bây giờ mình sẽ sử dụng biến này để gửi giá trị tới file sendmail.php để xử lý.
• Success: function(data_form) => Khi Form được gửi thành công thì chúng ta sẽ thực hiện hàm data_form.

Ở đây chính là bước quan trọng, các bạn còn nhớ trong file sendmail.php chúng ta đã trả về kết quả là gì không ? Đó chính là 2 chuỗi “true” và “false”

Bây giờ chúng ta sẽ thực hiện so sánh nó, nếu nó là “true” tức là bạn đã gữi được mail thì chúng ta sẽ ẩn cái trạng thái Loading đi và đồng thời show ra thông báo gửi mail thành công và gọi hàm clear_form(); để xóa dữ liệu trên Form + hàm change_captcha(); để thay đổi captcha cho Form để có thể bắt đầu gửi một Email mới. Và ngược lại thì kết quả trả về của chúng ta chính là “false” thì mình sẽ ẩn trạng thái Loading và show lỗi ra thôi và return false nó luôn.

Các bạn có thể xem Code đầy đủ của file js đầy đủ ở đây.

$(document).ready(function() {
	$("#SendMail").click(function() {
		var name = $("#name").val();
		var email = $("#email").val();
		var website = $("#website").val();
		var subject = $("#subject").val();
		var content = $("#content").val();
		var captcha = $("#captcha").val();
		var email_regex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		var data_string = 'name=' + name + '&email=' + email + '&website=' + website + '&subject=' + subject + '&content=' + content + '&captcha=' + captcha; 
		
		if(name == "") {
           $("#nameError").slideDown('slow').delay(1000).slideUp('slow');
           $("#name").focus();
           return false;
        }

        if(!email_regex.test(email) || email == "") {
           $("#emailError").slideDown('slow').delay(1000).slideUp('slow');
           $("#email").focus()
           return false;
        }

        if(website == "") {
           $("#websiteError").slideDown('slow').delay(1000).slideUp('slow');
           $("#website").focus()
           return false;
        }

        if(subject == "") {
           $("#subjectError").slideDown('slow').delay(1000).slideUp('slow');
           $("#subject").focus();
           return false;
        }

        if(content == "") {
           $("#contentError").slideDown('slow').delay(1000).slideUp('slow');
           $("#content").focus()
           return false;
        }

        if(captcha == "") {
           $("#captchaError").slideDown('slow').delay(1000).slideUp('slow');
           $("#captcha").focus()
           return false;
        }

        $("#loading").html("<img src='images/loading.gif'/>").fadeIn('fast');
            $.ajax({
                type: "POST",
                url: "sendmail.php",
                data: data_string,
                success: function(data_form) {
                    if(data_form == "true") {
                        $('#loading').fadeOut('fast');
                        $("#success").slideDown('slow').delay(3000).slideUp('slow');
                            clear_form();
                            change_captcha();
                    } else {
                        $('#loading').fadeOut('fast');
                        $("#error").slideDown('slow').delay(3000).slideUp('slow');
                        }
                    }
                });
        return false;

	});

	function clear_form() {
        $("#name").val('');
        $("#email").val('');
        $("#website").val('');
        $("#subject").val('');
        $("#content").val('');
        $("#captcha").val('');
    }

    $("#load_captcha").click(function() {
        change_captcha();
    });

    function change_captcha() {
        document.getElementById('img_captcha').src="captcha.php?rnd=" + Math.random();
    }
});

Vậy là chúng ta đã hoàn thành một Contact Form sử dụng Jquery AJAX + PHP rồi ^^. Tớ mong các bạn có thể áp dụng được nó vào project của chính mình.

- Khác nhau cơ bản giữa ajax thuần javascript và ajax với jquery ( chủ yếu là cú pháp của jquery ngắn gọn hơn )

- Giới thiệu bạn 3 cách viết ajax đơn giản bằng jquery ($.ajax,$.get,$.post)

Để tiện cho việc tiếp thu bài hướng dẫn các bạn nên biết PHP căn bản

Mình viết tuts này chủ yếu dựa vào tài liệu trên w3schools. Các bạn có thể vào đó để tham khảo thêm.

Mọi thắc mắc về tuts các bạn gửi vào comment bên dưới mình sẽ cố gắng dành thời gian trả lời cho các bạn. Rất mong các bạn ủng hộ mình sẽ tiếp tục thực hiện tiếp các phần sau của bài này nữa !

Các phần tiếp theo: Phần 2

Video tutorial này sẽ giúp các bạn có thể tạo những hiệu ứng chuyển động đơn giản và xuất ra file Swf (flash player) nhúng trực tiếp lên web, blog hoặc cũng có thể convert thành HTML5. Sử dụng phần mềm Adobe Indesign CS6