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

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 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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 [...]... 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 VI ỆT + 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. ..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 YÊ N + Chọn 2 dòng của bảng sau đó thực hiện lệnh Repeat Region VI ỆT C H U + 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... 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 Lớp: Chuyên Viên Website Lành Nghề Biên soạn: Nguyễn Phát Tài Trang 14 Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN 740/12... 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 Lớp: Chuyên Viên Website Lành... AJAX PHAN HOI > AjaxAction2( "phanhoi", "inc_xemphanhoi.php?ID_tintuc="); AJAX PHAN HOI > 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... đâ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ề Biên soạn: Nguyễn Phát Tài Trang 12 YÊ 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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn... 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 + Chúng ta hãy cải tiến lại một chút bằng kỹ thuật AJAX như sau: + Trong trang này sử dụng đoạn Code sau: YÊ Bước 1: Tạo trang inc_xemphanhoiajax.php VI ỆT C H U 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... Đà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 YÊ N + Chọn 2 dòng đầu thực hiện lệnh VI ỆT C H U + 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... 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 /*printf(' '); echo "[Previous "."5"." pages] ";*/ printf(' . 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ư. 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. 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