Xem bài viết Tìm kiếm dữ liệu với php kết hợp Ajax jQuery

Tìm kiếm dữ liệu với php kết hợp Ajax jQuery

Aug 07, 2012Php & MySQL
Thực hiện bài này chùng ta có các file chính sau:
index.php : dùng để hiện form tìm kiếm và xử lý Ajax
ajax-search.php : dùng để kết nối Datatbase, thực hiện truy vấn lấy dữ liệu
dbcon.php : dùng để khai báo các giá trị kết nối database.
mystyle.css : dùng để định dạng cho trang
Thực hiện bài này mình có sử dụng thêm 1 plugin của jQuery là watermark, plugin này cũng rất dễ sử dụng, các bạn có thể tham khảo thêm ở đây.

1. NỘI DUNG Database

Phần Database mình có cấu trúc như sau:
Tìm Kiếm Dữ Liệu Với PHP Kết Hợp Ajax jQuery  - 01 - 2Cwebvn
Nội dung tạo bảng và dữ liệu trong bảng như sau:
CREATE TABLE IF NOT EXISTS `news_search` (
 `id` int(5) NOT NULL AUTO_INCREMENT,
 `title` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
 `description` varchar(500) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
 `link` varchar(250) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM CHARACTER SET utf8 COLLATE utf8_general_ci;

INSERT INTO `news_search` (`id`, `title`, `description`, `link`) VALUES
(1, 'TẠO LOGO TUYỆT ĐẸP BẰNG CSS', '2Cwebvn xin giới thiệu đến các bạn cách tạo logo tuyệt đẹp bằng css.','http://2cweb.vn/news/html-css/tao-logo-tuyet-dep-bang-css-10-44.html'),
(2, 'TẠO FORM LOGIN HOÀN CHỈNH BẰNG KỸ THUẬT AJAX VÀ VALIDATE JQUERY', 'Hôm nay 2Cwebvn sẽ sử dụng công nghệ Ajax kết hợp với plugin Validate của jQuery để làm form login hoàn chỉnh.','http://2cweb.vn/news/php-mysql/tao-form-login-hoan-chinh-bang-ky-thuat-ajax-va-validate-jquery-12-36.html'),
(3, 'TẠO HIỆU ỨNG CHỮ DROP CAP TUYỆT ĐẸP VỚI CSS3', 'Hôm nay 2Cwebvn xin giới thiệu đến các bạn hiệu ứng chữ bằng Drop Cap tuyệt đẹp với CSS3','http://2cweb.vn/news/html-css/tao-hieu-ung-chu-drop-cap-tuyet-dep-voi-css3-10-27.html'),
(4, 'TẠO TOOLTIP ĐƠN GIẢN KHÔNG CẦN JAVASCRIPT', '2Cwebvn sẽ giới thiệu đến các bạn cách làm tooltip đơn giản cho các link mà không cần dùng đến 1 dòng code nào của Javascript hay Jquery, chỉ dùng Css và Css mà thôi','http://2cweb.vn/news/html-css/tao-tooltip-don-gian-khong-can-javascript-10-24.html'),
(5, 'TẠO TRANG BÁO LỖI DATABASE TÙY CHỈNH TRONG WORDPRESS', '2Cwebvn sẽ giới thiệu đến các bạn làm thế nào hiển thị tùy chỉnh trang báo lỗi "Lỗi thiết lập kết nối cơ sở dữ liệu" khi dùng worpress.  ','http://2cweb.vn/news/wordpress-cms/tao-trang-bao-loi-database-tuy-chinh-trong-wordpress-17-9.html'),
(6, 'HƯỚNG DẪN - 10 BƯỚC CÀI ĐẶT JOOMLA 2.5 TRÊN LOCALHOST', '2Cwebvn hôm nay xin giới thiệu đến các bạn cách cài đặt joomla 2.5 trên localhost chỉ với 10 bước đơn giản','http://2cweb.vn/news/joomla-cms/huong-dan-10-buoc-cai-dat-joomla-25-tren-localhost-16-16.html'),
(7, 'HƯỚNG DẪN - PHÓNG TO ẢNH CÙNG VỚI TIÊU ĐỀ VỚI ZOOM THUMNAIL IMAGE JQUERY', '2Cwebvn sẽ giúp bạn tìm hiểu làm thế nào để phóng to hình ảnh thu nhỏ, đồng thời hiện tiêu đề trong hình ảnh thumnail khi người dùng hover vào hình ảnh đó','http://2cweb.vn/news/jquery-javascript/huong-dan-phong-to-anh-cung-voi-tieu-de-voi-zoom-thumnail-image-jquery-11-15.html'),
(8, 'BỘ SƯU TẬP TRANH VẼ CỦA FAN DÀNH CHO GHIBILI', 'Hôm nay, 2Cwebvn xin chia sẽ đến các bạn bộ sưu tập mà các fan hâm mộ trên thế giới dành tặng cho những bộ phim của Ghibli. ','http://2cweb.vn/news/graphic-design/bo-suu-tap-tranh-ve-cua-fan-danh-cho-ghibili-6-42.html'),
(9, 'BỘ SƯU TẬP NHỮNG TÁC PHẨM TUYỆT ĐẸP CỦA CHARIS TSEVIS', 'Charis Tsevis là một nhà thiết kế đồ họa người Hy Lạp. Ông bắt đầu studio của mình với cái tên "Tsevis Visual Design" tại Athens','http://2cweb.vn/news/graphic-design/bo-suu-tap-nhung-tac-pham-tuyet-dep-cua-charis-tsevis-6-11.html');

2. NỘI DUNG TRONG FILE index.php

2.1 Khai báo các file cần thiết

Phần này các bạn include file css, thư viện jquery và plugin watermark:
	<link href="http://2cweb.vn/templates/public/web2c/css/mystyle.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="http://2cweb.vn/templates/public/web2c/js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="http://2cweb.vn/templates/public/web2c/js/jquery.watermark.js"></script>
	

2.2 Phần HTML

Phần HTML các bạn cần chú ý các phần chính như sau: trước hết mình cần có 1 textbox để nhập từ khóa tìm kiếm:
Một thẻ div để hiển thị kết quả tìm kiếm:
Còn lại các phần khác là râu ria, không cần chú ý nhều. Và đây là toàn bộ HTML

Tìm Kiếm Dữ Liệu Với PHP Kết Hợp Ajax jQuery - 2Cwebvn

Trở về trang chủ 2Cwebvn


Gợi Ý: Tìm với từ khóa: Hướng Dẫn, Tạo, Bộ Sưu Tập, 2Cwebvn


Tìm Kiếm Với Từ Khóa : Keyword

2.3 Phần xử lý AJAX

Phần Ajax mình viết như sau:
	$(document).ready(function() {
	$("#faq_search_input").watermark("Nhập Từ Cần Tìm Kiếm");	// Watermart cho khung nhập
	$("#faq_search_input").keyup(function()
	{
		var faq_search_input = $(this).val();   		// Lấy giá trị search của người dùng
		var dataString = 'keyword='+ faq_search_input;	// Lấy giá trị làm tham số đầu vào cho file ajax-search.php
		if(faq_search_input.length>2)					// Kiểm tra giá trị người nhập có > 2 ký tự hay ko
		{
			$.ajax({
				type: "GET",      						// Phương thức gọi là GET
				url: "ajax-search.php",  				// File xử lý
				data: dataString,						// Dữ liệu truyền vào
				beforeSend:  function() {				// add class "loading" cho khung nhập
					$('input#faq_search_input').addClass('loading');
				},
				success: function(server_response)		// Khi xử lý thành công sẽ chạy hàm này
				{
					$('#searchresultdata').html(server_response).show();  	// Hiển thị dữ liệu vào thẻ div #searchresultdata
					$('span#faq_category_title').html(faq_search_input);	// Hiển thị giá trị search của người dùng
					
					if ($('input#faq_search_input').hasClass("loading")) {		// Kiểm tra class "loading"
						$("input#faq_search_input").removeClass("loading");		// Remove class "loading"
					} 
				}
			});
		}return false;		// Không chuyển trang
	});
	});

3. NỘI DUNG TRONG FILE dbcon.php

File này dùng định nghĩ các hằng số kết nối và tạo kết nối như sau:
	/*Định nghĩa các hằng số kết nối đến database */
	DEFINE('DATABASE_USER', 'root');
	DEFINE('DATABASE_PASSWORD', '');
	DEFINE('DATABASE_HOST', 'localhost');
	DEFINE('DATABASE_NAME', '2cwebvn_demo');

	// Tạo chuỗi kết nối và thiết lập hiển thị tiếng việt:
	$dbc = @mysqli_connect(DATABASE_HOST, DATABASE_USER, DATABASE_PASSWORD,DATABASE_NAME);
	@mysqli_query($dbc,'set character set "utf8"'); 

	// Kiểm tra kết nối
	if (!$dbc) {
		trigger_error('Không thể kết nối đến MySQL: ' . mysqli_connect_error());
	}
	

4. NỘI DUNG TRONG FILE ajax-search.php

Phần xử lý khi người dùng nhập từ khóa cần tìm kiếm :
//  Include file kết nối Database
include_once ('dbcon.php');			

// Kiểm tra dữ liệu đầu vào có tồn tại hay không
if(isset($_GET['keyword'])){		
    $keyword = 	trim($_GET['keyword']) ;		// Cắt bỏ khoảng trắng
	$keyword = mysqli_real_escape_string($dbc, $keyword);	// Lọc các ký tự đặc biệt

	// Câu query lấy dữ liệu
	$query = "select title, description, link from news_search where title like '%$keyword%' or description like '%$keyword%'";

	// Kết nối Database, thực hiện câu truy vấn
	$result = mysqli_query($dbc,$query);

	// Kiểm tra kết quả trả về có hay không ?
	if($result){
		// Kiểm tra có dòng record nào hay không?
		if(mysqli_affected_rows($dbc)!=0){  
			// Hiển thị dữ liệu
			while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
			echo '

'.$row['title'].'
'.$row['description'] .'

' ; } }else { echo 'Không có kết quả nào cho từ khóa :"'.$_GET['keyword'].'"'; } } }else { echo 'Không có từ khóa nào được gởi đến.'; }

5. NỘI DUNG TRONG FILE mystyle.css

Phần CSS mình định dạng cho trang như sau:
	*{margin:0px; padding:0px;}
	body{ background:url(../img/bg_2cwebvn.png); }

	/* CSS cho textbox nhập nội dung search, có chứa hình ảnh loading ở bên phải textbox */
	div.faqsearch .faqsearchinputbox input {
		font-size:16px;	color:#6e6e6e;
		padding:10px;   border:1px solid #f8d043; 
		outline: #333;  width:100%;
		background:url(img/loading_static.gif) no-repeat right 50%;	
	}
	div.faqsearch .faqsearchinputbox input.loading {
		background:url(img/loading_animate.gif) no-repeat right 50%;
	}
	#content{	width:700px; margin:70px auto 0px;}
	.faq-articles{margin:20px 0px ;}
	h4{margin:0px 0px 30px;}
	a {	color:#000;text-decoration:none;}
	p { 	color:#888;}
	p.back{	color:#0000FF;	margin-top:5px;	text-align:center;}
	p.goiy{ margin-bottom:-20px;}
	p.title{margin:10px 0px 15px;}
	h2,p.title a{ color:#DB2E66;}
	p.back a,a:hover, a:focus {	color:#00f; }

	#prod-content {
		position:relative;
		width:100%; margin:15px 0px 50px;
		padding:10px; border:1px solid #DB2E66;
		letter-spacing:-0.04em; overflow:hidden;
	}
	*html #prod-content {	margin-top:3px;	}
	*html body#cxpage #prod-content {	margin-top:15px;	}

Vậy đây là kết quả sau khi làm xong.
Tìm Kiếm Dữ Liệu Với PHP Kết Hợp Ajax jQuery  - 02 - 2Cwebvn
Tìm Kiếm Dữ Liệu Với PHP Kết Hợp Ajax jQuery  - 03 - 2Cwebvn
Tìm Kiếm Dữ Liệu Với PHP Kết Hợp Ajax jQuery  - 04 - 2Cwebvn
Tìm Kiếm Dữ Liệu Với PHP Kết Hợp Ajax jQuery  - 05 - 2Cwebvn
Tìm Kiếm Dữ Liệu Với PHP Kết Hợp Ajax jQuery  - 06 - 2Cwebvn
NOTE :Các file mình đã có chú thích hết cho các bạn rất chi tiết, có phần nào không hiểu các bạn để lại comment bên dưới nhé.

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments