THỰC HÀNH LAB – TẠO PHẢN HỒI TIN TỨC BẰNG AJAX

Chia sẻ: Lưu Trần Quang Trung | Ngày: | Loại File: PDF | Số trang:19

Thêm vào BST

Báo xấu

92
lượt xem 21
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

TÀI LIỆU THAM KHẢO - THỰC HÀNH LAB – TẠO PHẢN HỒI TIN TỨC BẰNG AJAX

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: THỰC HÀNH LAB – TẠO PHẢN HỒI TIN TỨC BẰNG AJAX

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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn 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: N YÊ U H C ỆT VI + Mở trang newsdetail.php lên, thiết kế thêm 2 mục như sau: Lớp: Chuyên Viên Website Lành Nghề Trang 1 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn N YÊ + Sử dụng đoạn script sau đặt trước thẻ ShowComment(); CloseMoreImage(); U function ShowComment() { H try { C document.getElementById("GeneralInfo1_pnlWriteComment").style.display = "none"; document.getElementById("GeneralInfo1_pnlComment").style.display = "block"; } catch (e) ỆT {} } function ShowWrite() { VI 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) {} Lớp: Chuyên Viên Website Lành Nghề Trang 2 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn } + Chọn Link Gửi phản hồi, trong hộp Properties tại Link gọi hàm ShowComment() N YÊ U H + Tương tự chọn mục Xem phản hồi, trong hộp Properties tại Link gọi hàm ShowWrite() C ỆT VI + Chọn Table đang chứa nội dung chi tiết tin tức, chuyển sang chế độ Code Lớp: Chuyên Viên Website Lành Nghề Trang 3 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn N + Đặt con trỏ sau thẻ , chèn 2 thẻ sau đây vào YÊ U H C ỆT VI + 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. Lớp: Chuyên Viên Website Lành Nghề Trang 4 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn N + Tạo trang inc_guiphanhoi.php và trang inc_guiphanhoi_ok.php YÊ + Mở trang inc_guiphanhoi_ok.php thiết kế với nội dung nhu sau: U H C ỆT VI + 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 Lớp: Chuyên Viên Website Lành Nghề Trang 5 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn N YÊ U H + Click nút Next C + 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 ỆT hoten Họ tên Text Field Text email Email Text Field Text noidung Nội dung Text Area Text VI 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 Lớp: Chuyên Viên Website Lành Nghề Trang 6 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn N YÊ U H + Click nút Finish + Hãy sửa lại để có giao diện trang phản hồi như sau: C ỆT VI + File -> Save + Mở trang newsdetail.php chuyển qua chế độ Code, chọn dòng chữ Lớp: Chuyên Viên Website Lành Nghề Trang 7 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn + Gọi lệnh Server Side Includes để chèn tập tin inc_guiphanhoi.php vào đây N YÊ U H C ỆT VI + Chọn trang inc_guiphanhoi.php, click nút OK Lớp: Chuyên Viên Website Lành Nghề Trang 8 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn + 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 N + 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 YÊ U H C ỆT + Nếu gởi thành công thì bạn sẽ được chuyển tới trang VI + 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. Lớp: Chuyên Viên Website Lành Nghề Trang 9 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn + Hãy tạo tiếp trang inc_xemphanhoi.php, mở trang này lên thiết kế giao diện như sau: N YÊ + Hãy tạo một Recordset rs_xemphanhoi để xuất ra các tin phản hồi từ bản phanhoi U H C ỆT VI + Click nút OK + Chèn các trường từ Recordset ra Lớp: Chuyên Viên Website Lành Nghề Trang 10 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn + Chọn 2 dòng của bảng sau đó thực hiện lệnh Repeat Region N YÊ + Chọn Recordset, chọn số mẫu tin cần hiện, click OK U H C ỆT + Chọn tiếp dòng Chưa có phản hồi nào, thực hiện lệnh VI + Chọn Recordset, click nút OK Lớp: Chuyên Viên Website Lành Nghề Trang 11 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn + Chọn 2 dòng đầu thực hiện lệnh N YÊ + Chọn Recordset, click nút OK U + Kết quả sẽ như sau: H C ỆT + File -> Save VI + 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 Lớp: Chuyên Viên Website Lành Nghề Trang 12 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn N YÊ + 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: U H C ỆT + 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: VI + Hãy chú ý các đoạn Code màu vàng là đã sửa lại đoạn code gốc Lớp: Chuyên Viên Website Lành Nghề Trang 13 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn N YÊ U H C + 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. ỆT VI + 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. Lớp: Chuyên Viên Website Lành Nghề Trang 14 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn + Chúng ta hãy cải tiến lại một chút bằng kỹ thuật AJAX như sau: N Bước 1: Tạo trang inc_xemphanhoiajax.php YÊ + Trong trang này sử dụng đoạn Code sau: U H vietchuyen.org C VI AjaxAction2( "phanhoi", "inc_xemphanhoi.php?ID_tintuc="); 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 Lớp: Chuyên Viên Website Lành Nghề Trang 15 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn + Bạn thấy chương trình đang đánh dấu đoạn Code phân trang như sau: N YÊ U H C ỆT VI + Hãy thay thế đoạn Code này bằng đoạn Code sau:
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn /*printf('...'); echo "[Previous "."5"." pages] ...";*/ printf('...  
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn N YÊ + File -> Save U + 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. H C ỆT VI + 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 Lớp: Chuyên Viên Website Lành Nghề Trang 18 Biên soạn: Nguyễn Phát Tài
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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn N YÊ U H C ỆT VI Lớp: Chuyên Viên Website Lành Nghề Trang 19 Biên soạn: Nguyễn Phát Tài