Home »

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

11 thg 9, 2013

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.


 
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.
 
demo download
 
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:
 
 
Nội dung tạo bảng và dữ liệu trong bảng như sau:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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:
 
?
source code
1
2
3
<link href="css/mystyle.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="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:
 
?
source code
1
2
3
<!-- Khung Search  -->
<input name="query" type="text" id="faq_search_input">
<!-- END Khung Search   -->
Một thẻ div để hiển thị kết quả tìm kiếm:
 
?
source code
1
<div id="searchresultdata" class="faq-articles"> </div>
 
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
 
?
source code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="content"><!-- END #content   -->
<center><h2>Tìm Kiếm Dữ Liệu Với PHP Kết Hợp Ajax jQuery - 2Cwebvn</h2></center>
<p class="back"><a href="http://www.2cweb.vn/blog/" target="_blank"><strong>Trở về trang chủ 2Cwebvn</strong></a> </p><br>
<p class="goiy">Gợi Ý: Tìm với từ khóa: Hướng Dẫn, Tạo, Bộ Sưu Tập, 2Cwebvn</p><br>
<div id="prod-content"><!-- #prod-content   -->
<div class="prod-subsubhead">
<h4 id="faq_title"> <strong>Tìm Kiếm Với Từ Khóa : </strong> <span id="faq_category_title">Keyword </span> </h4>
</div>
<div class="prod-subcontent">
<div class="faqsearch">
<div class="faqsearchinputbox">
<!-- Khung Search  -->
<input name="query" type="text" id="faq_search_input">
<!-- END Khung Search   -->
</div>
</div>
<div id="searchresultdata" class="faq-articles"> </div>
</div>
</div><!-- END #prod-content   -->
</div><!-- END #content   -->

2.3 Phần xử lý AJAX

Phần Ajax mình viết như sau:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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:
?
1
2
3
4
5
6
7
8
9
10
11
12
/*Đị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 :
?
source code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//  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 '<p class="title"> <a href="'.$row['link'].'" target="_blank"><b>'.$row['title'].'</b></a><br>'.$row['description'] .'</p>'   ;
}
}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:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
*{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.
 

 

 

 

 

 
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!
Tags:

Comments[ 0 ]


Đăng nhận xét