07Aug 2012
Tìm kiếm dữ liệu với php kết hợp Ajax jQuery - 2Cwebvn

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

Như các bạn đã biết AJAX là một trong những từ ngữ đang rất thời thượng bậc nhất trong vài năm trở lại đây và ngay cả hiện nay cũng thế. AJAX là một kỹ thuật bất đồng bộ, nó chỉ load đúng phần được định nghĩa mà không load lại toàn trang, điều này làm cho người dùng cảm thấy thoải mái và không mất quá nhiều thời gian để chờ đợi việc load trang của bạn. Hôm nay, 2Cwebvn xin giới thiệu đến các bạn cách tạo form tìm kiếm bằng Ajax kết hợp với công nghệ jQuery và được viết bằng ngôn ngữ PHP kết nối với mySQL để lấy dữ liệu từ Database.
 

 

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:

	
	
	
	

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 hướng dẫn 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 thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!
Nguồn: 2Cwebvn

2Cweb line

BÀI VIẾT TƯƠNG TỰ

2Cweb line

13 BÌNH LUẬN

lenghia_itc

bởi lenghia_itc

August 31st, 2012 - 12:39 AM.
Cảm ơn 2cweb.vn em có góp ý như thế này,vấn đề mình khi mình nhập tứ khóa vào nó hiển thị ra kết quả thì ok rồi nhưng mà khi mình xóa từ khóa đi thì mình nên ẩn đi các kết quả cũ đi có vẻ hay hơn ak.Chứ mình xóa từ khóa rồi mà còn hiển thị cái kết quả cũ thì ko hay..
2Cwebvn

bởi 2Cwebvn

August 31st, 2012 - 12:14 PM.
Àh, cài này cũng dễ mà bạn, bạn có thể dùng sự kiện keydown() để xử lý nó. Khi keydown thì bạn có thể ẩn div #searchresultdata hoặc gán cho nó là rỗng. Chúc bạn thành công nhé!
phamluong

bởi phamluong

November 6th, 2012 - 1:34 PM.
cảm ơn về những bài viết của bạn. mình đang tìm hiểu về những bài như thế này, vào mấy trang khác để xem bài viết, ví dụ trang izwebz.com thì thấy hướng dẫn phức tạp quá, cũng may vào đây thấy bạn viết rất dễ hiểu. cố gắng nha, ủng hộ nhiệt tình =))
pham luong

bởi pham luong

November 6th, 2012 - 1:36 PM.
à quên, website của bạn thiết kế rất đẹp, bắt mắt. nếu mình mà làm đc 1 phần thế này thì ... =))
ictmer

bởi ictmer

November 12th, 2012 - 11:41 AM.
Thank bạn nhiều, mình đang tìm hiểu về php kết hợp với ajax. qua bài viết này mình sẽ ứng dụng được rất nhiều trong bài học của mình đây..
2Cwebvn

bởi 2Cwebvn

November 15th, 2012 - 12:49 AM.
 Hii..đa số bài viết của mình là "mì ăn liền", các bạn có thể xem demo và download source code về xem và ứng dụng được vào project của mình, hy vọng những bài viết của mình giúp ích được cho bạn.!
tieungu

bởi tieungu

November 15th, 2012 - 2:31 PM.
mình làm theo cách của bạn có điều mình code bên Codeigniter. Nhưng giá trị trã về lại là tất cả dữ liệu.Khi viết lại bằng PHP thì cũng vậy. Có thể cho mình một lời khuyên. thanks
tieungu

bởi tieungu

November 15th, 2012 - 2:53 PM.
Cách thức mình làm tượng tự giống bạn. Nhưng mình viết bên Codeigniter, dùng loop foreach để lấy hết giá trị trã về, nhưng nó lại trả về hết giá trị có trong bãng. Khi viết lại bằng PHP như bạn thì cũng vậy. Có thể cho mình lời khuyên. Thanks
2Cwebvn

bởi 2Cwebvn

November 21st, 2012 - 12:40 AM.
Mình có gởi kèm file đó bạn, bạn download về xem nha, còn bên CI thì bạn chỉ tách code ra thôi vì nó la MVC mà.
nguyen

bởi nguyen

November 30th, 2012 - 3:40 PM.
bạn có viết sự kiện keydown giúp mình với.thanks
Ga nho

bởi Ga nho

December 10th, 2012 - 11:57 PM.
2Cweb có trả lời phía trên đấy, mà bạn chịu khó làm thử đi, ko được thì đưa lên để mọi người giúp, chứ ko lẻ bạn định suốt đời ko đi làm àh.
Le Toan ffdgd

bởi Le Toan ffdgd

June 7th, 2013 - 1:03 PM.
Bạn ơi. Cho mình hỏi với cách làm như vậy nhưng mình muốn truyền 2 biến đến file search để xử lí thì làm ntn bạn. Mình đã thử nhưng không dc. Bạn có thể giúp mình dc không?
2Cwebvn

bởi 2Cwebvn

June 9th, 2013 - 2:09 PM.
Cái này đơn giản nếu bạn truyền biến nào thì bạn chỉ cần nối chuỗi gắn vào biến dataString là bên file search sẽ nhận dc thui, chúc bạn thành công nhé!

2Cweb line

GỬI BÌNH LUẬN