Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 1
Biên soạn: Nguyễn Phát Tài
LAB – TẠO PHẢN HỒI TIN TỨC BẰNG AJAX

Trong Database cms hãy thiết kế thêm một bảng phanhoi để lưu các thông tin phản hồi của người
dùng. Cấu trúc bảng như sau:




+ Mở trang newsdetail.php lên, thiết kế thêm 2 mục như sau:
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 2
Biên soạn: Nguyễn Phát Tài

+ Sử dụng đoạn script sau đặt trước thẻ </head>

<script language="javascript">
ShowComment();
CloseMoreImage();
function ShowComment()
{
try
{
document.getElementById("GeneralInfo1_pnlWriteComment").style.display = "none";
document.getElementById("GeneralInfo1_pnlComment").style.display = "block";
}
catch (e)
{}
}
function ShowWrite()
{
try
{
document.getElementById("GeneralInfo1_pnlComment").style.display = "none";
document.getElementById("GeneralInfo1_pnlWriteComment").style.display = "block";
}
catch (e)
{}
}
function ShowMoreImage()
{
try
{

document.getElementById("GeneralInfo1_pnlMoreImage").style.display = "block";
document.getElementById("divMoreImageFlash").style.position = "absolute";
document.getElementById("divMoreImageFlash").innerHTML = CreateFlash();
document.location.href = "#MoreImage";
}
catch (e)
{}
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 3
Biên soạn: Nguyễn Phát Tài
}
</script>

+ Chọn Link Gửi phản hồi, trong hộp Properties tại Link gọi hàm ShowComment()



+ Tương tự chọn mục Xem phản hồi, trong hộp Properties tại Link gọi hàm ShowWrite()



+ Chọn Table đang chứa nội dung chi tiết tin tức, chuyển sang chế độ Code


VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 4
Biên soạn: Nguyễn Phát Tài


+ Đặt con trỏ sau thẻ </table>, chèn 2 thẻ <DIV> sau đây vào



+ File -> Save
+ Mở trang index.php lên Preview, thử click vào một tin tức để xem chi tiết tin.
+ Click thử vào mục Gửi phản hồi hay Xem phản hồi để kiểm tra thử nội dung trong 2 thẻ DIV này
có hiện ra hay không ? Bạn sẽ thấy kết quả như hình bên dưới.



VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 5
Biên soạn: Nguyễn Phát Tài




+ Tạo trang inc_guiphanhoi.php và trang inc_guiphanhoi_ok.php
+ Mở trang inc_guiphanhoi_ok.php thiết kế với nội dung nhu sau:



+ Mở trang inc_guiphanhoi.php lên để thiết kế
+ Thực hiện lệnh Insert Record From Wizard



+ Bước 1: Cấu hình các thông số như hình bên dưới
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn


Lớp: Chuyên Viên Website Lành Nghề Trang 6
Biên soạn: Nguyễn Phát Tài



+ Click nút Next
+ Bước 2: Chọn kiểu hiển thị cho các Form Filed thích hợp

Column Lable Display As Submit As Default Value
hoten Họ tên Text Field Text
email Email Text Field Text
noidung Nội dung Text Area Text
ID_tintuc Hidden Filed Numeric {GET.ID_tintuc}
ngayphanhoi Hidden Filed Date {NOW_DT}

+ Bước 3: Chọn hợp lệ cho các trường hoten,email,noidung
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 7
Biên soạn: Nguyễn Phát Tài


+ Click nút Finish

+ Hãy sửa lại để có giao diện trang phản hồi như sau:


+ File -> Save
+ Mở trang newsdetail.php chuyển qua chế độ Code, chọn dòng chữ

VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 8
Biên soạn: Nguyễn Phát Tài


+ Gọi lệnh Server Side Includes để chèn tập tin inc_guiphanhoi.php vào đây



+ Chọn trang inc_guiphanhoi.php, click nút OK


VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179

Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 9
Biên soạn: Nguyễn Phát Tài
+ Sau đó hãy xóa bỏ nội dung Chèn trang gởi phản hồi vào đây.
+ Đoạn Code Include như sau:

+ File -> Save
+ Mở trang index.php lên Preview, click vào một tin tức để xem chi tiết
+ Click mục Gửi phản hồi
+ Hãy nhập nội dung phản hồi vào thử để test chương trình và click nút Gửi phản hồi



+ Nếu gởi thành công thì bạn sẽ được chuyển tới trang


+ Click Tiếp tục để quay về.
+ Hãy kiểm tra xem trong bảng phanhoi đã có ghi nội dung của tin phản hồi này về hay chưa ? Nếu
thành công thì trong bảng phanhoi phải có được một mẫu tin mới.
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org

– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 10
Biên soạn: Nguyễn Phát Tài


+ Hãy tạo tiếp trang inc_xemphanhoi.php, mở trang này lên thiết kế giao diện như sau:



+ Hãy tạo một Recordset rs_xemphanhoi để xuất ra các tin phản hồi từ bản phanhoi



+ Click nút OK
+ Chèn các trường từ Recordset ra
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 11
Biên soạn: Nguyễn Phát Tài


+ Chọn 2 dòng của bảng sau đó thực hiện lệnh Repeat Region



+ Chọn Recordset, chọn số mẫu tin cần hiện, click OK



+ Chọn tiếp dòng Chưa có phản hồi nào, thực hiện lệnh



+ Chọn Recordset, click nút OK
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 12
Biên soạn: Nguyễn Phát Tài


+ Chọn 2 dòng đầu thực hiện lệnh



+ Chọn Recordset, click nút OK
+ Kết quả sẽ như sau:




+ File -> Save
+ Mở trang newsdetail.php chuyển qua chế độ Code, chọn dòng chữ Chèn trang Xem phản hồi
vào đây
+ Thực hiện lệnh Server Side Include để gọi trang inc_xemphanhoi.php vào
+ Sau đó hãy xóa nội dung Chèn trang Xem phản hồi vào đây

VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 13
Biên soạn: Nguyễn Phát Tài

+ File -> Save
+ Hãy mở lại xem đúng tin tức cũ, sau đó click mục Xem phản hồi để kiểm tra thử
+ Kết quả sẽ như sau:


+ Trong trang inc_xemphanhoi.php này chúng ta phải viết thêm một vài lệnh để ngăn chặn kiểu tấn
công Cross-site-scriptting như sau:
+ Chuyển qua chế độ Code thực hiện sửa Code như sau:
+ Hãy chú ý các đoạn Code màu vàng là đã sửa lại đoạn code gốc




VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 14
Biên soạn: Nguyễn Phát Tài


+ Trong trang inc_xemphanhoi.php hãy thực hiện tiếp các lệnh phân trang Page List Limited,
Next X Page, Previous X Page để cho người dùng xem tiếp các nội dung phản hồi khác nếu có
nhiều mục phản hồi cho tin tức này.



+ Hãy Preview lại phần Xem phản hồi để kiểm tra phần phân trang này có chạy hay không?
+ Ta có nhận xét là khi click vào các số phân trang này thì trang web phải tải lại và ta phải click mục
Xem phản hồi thì mới xem tiếp các phản hồi kế tiếp.
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 15
Biên soạn: Nguyễn Phát Tài


+ Chúng ta hãy cải tiến lại một chút bằng kỹ thuật AJAX như sau:

Bước 1
: Tạo trang inc_xemphanhoiajax.php

+ Trong trang này sử dụng đoạn Code sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vietchuyen.org</title>
<style type="text/css">
<!
body {
margin-left: 0px;
margin-top: 0px;
}
>
</style>
<script type="text/javascript" src="js/ajax_24h_com_vn.js"></script>

</head>
<body>
<! AJAX PHAN HOI >
<div id='phanhoi'></div>
<script language="JavaScript">
AjaxAction2( "phanhoi", "inc_xemphanhoi.php?ID_tintuc=<?php echo $_GET['ID_tintuc']; ?>");
</script>
<! END AJAX PHAN HOI >
</body>
</html>

Bước 2
: Sửa lại đoạn Code phân trang có áp dụng AJAX trong phân trang

+ Mở trang inc_xemphanhoi.php lên chọn đoạn phân trang, chuyển qua chế độ Code

VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 16
Biên soạn: Nguyễn Phát Tài


+ Bạn thấy chương trình đang đánh dấu đoạn Code phân trang như sau:




+ Hãy thay thế đoạn Code này bằng đoạn Code sau:
<?php
// bat dau phan phan trang
$TFM_Previous = $pageNum_rs_xemphanhoi - 5;
if ($TFM_Previous >= 0) {
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 17
Biên soạn: Nguyễn Phát Tài

/*printf(' <a href="'."%s?pageNum_rs_xemphanhoi=%d%s", $currentPage, $TFM_Previous,
$queryString_rs_xemphanhoi.'">');
echo "[Previous "."5"." pages] </a> ";*/
printf(' <a href="javascript:AjaxAction(\'phanhoi\','."'%s?pageNum_rs_xemphanhoi=%d%s",
$currentPage, $TFM_Previous, $queryString_rs_xemphanhoi.'\');">');
echo "[ Xem lùi "."5"." trang ] </a> ";
//Basic-UltraDev Previous X pages SB
}
?>
&nbsp;

<?php
for ($i = $TFM_startLink; $i <= $TFM_endLink; $i++) {
$TFM_LimitPageEndCount = $i -1;
if($TFM_LimitPageEndCount != $pageNum_rs_xemphanhoi) {

/*printf('<a href="'."%s?pageNum_rs_xemphanhoi=%d%s", $currentPage, $TFM_LimitPageEndCount,
$queryString_rs_xemphanhoi.'">');*/

printf('<a href="javascript:AjaxAction(\'phanhoi\','."'%s?pageNum_rs_xemphanhoi=%d%s",
$currentPage, $TFM_LimitPageEndCount, $queryString_rs_xemphanhoi.'\')">');

echo "$i</a>";
}else{
echo "<strong>$i</strong>";
}
if($i != $TFM_endLink) echo(" | ");}
?>
&nbsp;
<?php
$TFM_Next = $pageNum_rs_xemphanhoi + 5;
$TFM_Last = $totalPages_rs_xemphanhoi+1;
if ($TFM_Next - 1 < $totalPages_rs_xemphanhoi) {
/*printf(' <a href="'."%s?pageNum_rs_xemphanhoi=%d%s", $currentPage, $TFM_Next,
$queryString_rs_xemphanhoi.'">');
echo "[Next "."5"." of ".$TFM_Last." pages] </a> ";*/

printf(' <a href="javascript:AjaxAction(\'phanhoi\','."'%s?pageNum_rs_xemphanhoi=%d%s",
$currentPage, $TFM_Next, $queryString_rs_xemphanhoi.'\');">');

echo "[ xem tiếp "." 5"." của ".$TFM_Last." trang ] </a> ";

}
?>

Bạn hãy chú ý đoạn Code màu xanh là đoạn Code phân trang cũ đã được thay thế bằng đoạn Code
màu đỏ có áp dụng hàm AjaxAction vào.

Bước 3
: Mở trang newsdetail.php lên sửa lại chỗ lệnh Server Side Include thay vì tới trang
inc_xemphanhoi.php thì bây giờ ta sửa lại là inc_xemphanhoiajax.php như sau:

VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 18
Biên soạn: Nguyễn Phát Tài


+ File -> Save
+ Hãy kiểm tra lại phần phân trang mới này bạn sẽ thấy khi click vào các số phân trang thì trang web
sẽ không bị tải lại mà chỉ load phần các tin phản hồi mà thôi.



+ Chú ý: Nếu bạn muốn kiểm duyệt các nội dung phản hồi này thì hãy thiết kế thêm trường

kiemduyet kiểu TinyInt có giá trị mặc định là 0 trong bảng phanhoi và trong Recordset
rs_xemphanhoi hãy chuyển qua chế độ recordset nâng cao thêm điều kiện chỉ hiện ra các phản hồi
nếu trường kiemduyet là 1


VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 19
Biên soạn: Nguyễn Phát Tài




VIỆT CHUYÊN