Ngược lại với trường hợp 4.2.1, trong phần này sẽ giả thiết các lập trình viên không thạo về java và sẵn sàng làm việc với các file HTML, viết mã javascript để thực hiện Ajax. Trong trường hợp này, Ligker framework giải quyết như sau:
3.2.2.1.Viết mã HTML
Ligker framework sử dụng Template Engine Smarty để tách riêng mã HTML phía client và code back-end phía server. Thư mục Smarty có cấu trúc như sau:
Trong hình 3.17, mô tả vị trí đặt thư mục Smarty trong hệ thống. Luận văn đang sử dụng Smarty phiên bản 3.1.18.
Để sử dụng Smarty, cần thực hiện cấu hình như nội dung trong file include_smarty.php. Việc cấu hình này là khá đơn giản như trong hình 3.18:
Hình 3.18: Cấu hình Smarty trong Ligker framework
Sau phần khai báo, lập trình viên sẽ xác định nơi đặt các file HTML của toàn hệ thống. Bằng kinh nghiệm thực tế, các nhà thiết kế web khuyên dùng các gói giao diện (template). Đặt tất cả các file HTML, CSS, JS của dự án trong 1 thư mục, mỗi thư mục là một gói giao diện. Một website có thể có nhiều thư mục như vậy, tức là có nhiều gói giao diện. Mỗi gói giao diện sẽ cung cấp cách bố cục giao diện và css khác nhau. Tùy vào việc thiết lập ban đầu, tùy tình huống, các controller của hệ thống sẽ gọi các template cần thiết. Hình 3.19 dưới đây mô tả cấu trúc của một template cụ thể:
Smarty có tác dụng gộp dữ liệu trong phần back-end và các nội dung HTML trong file template. Trong Ligker framework có sử dụng Smarty như sau:
- Các biến Smarty viết trên HTML có dạng: {$ten_bien} - Các Toán tử Smarty trên HTML:
+ Toán tử gán: {$name = "Johny Nguyen"} + Toán tử số học: +, -, *, /, %
+ Toán tử so sánh: eq (==), ne (!=), gt (>), lt (<), gte (>=), lte(<=) - Các Biểu thức Smarty trên HTML:
+ Biểu thức điều kiện: {if}…{else}…{/if}
+ Vòng lặp: vòng lặp {for}…{/for}, vòng lặp {foreach}…{/foreach} - Các hàm Smarty cơ bản trong file PHP:
+ Assign: dùng để gán giá trị một biến PHP cho một biến trên HTML + Fetch: dùng để lưu nội dung của một template một biến trên PHP + Display: dùng để xuất nội dung của một template ra trình duyệt - Các hàm Smarty cơ bản trong file HTML:
+ {include}: để chèn một đoạn mã từ file khác trong hệ thống file HTML + {include_php}: để chèn một đoạn mã từ file khác trong hệ thống file PHP
3.2.2.2. Thực hiện Ajax
Trong trường hợp sử dụng Template Engine, các lập trình viên có thể thực hiện Ajax bằng Javascript. Vị trí đặt file javascript như hình 3.20 dưới đây:
Hàm javascript thực hiện ajax như sau:
function ajax_get(url,show_position){
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera,
Safari
xmlhttp=new XMLHttpRequest(); }
else{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(show_position).innerHTML=xmlhttp.responseText; }
}
xmlhttp.open("GET",url,true); xmlhttp.send();
}
Cách thức hoạt động của hàm ajax_get():
Khi có sự kiện gọi hàm ajax_get(), hàm này sẽ nhận 2 tham số đầu vào: - url: đường dẫn trỏ tới controller&action của Ligker framework (1) - show_position: HTML ID của vị trí chứa nội dung tải Ajax (2)
Kết quả của sự kiện này là: hệ thống gán nội dung trả về của (1) vào (2)