Thứ Năm, 4 tháng 4, 2019

Topic: SỬ DỤNG XMLHTTPREQUEST TRÊN STRUTS2 FRAMEWORK

Tác giả: Lê Hoàng Hiệp

Mục đích: Chủ đề của bài này sẽ đề cập đến 2 vấn đề.

·         Áp dụng XmlHttpRequest trong Struts 2 để xây dựng ứng dụng có khả năng live Search.

·         Bổ sung chỉnh sửa các css (thực hiện override các css) mặc định của Struts2

Các kiến thức yêu cầu

·         Nắm vững các khái niệm về ngôn ngữ lập trình Java, lập trình thao tác hướng đối tượng.

·         Nắm vững các khái niệm về lập trình web sử dụng J2EE hay JavaEE với các kiến thức về Servlet, JSP. http://www.kieutrongkhanh.net/search/label/Servlet%26JSP

·         Nắm vững các khái niệm cơ bản về Struts 2.x Framework, Struts 2.x Validation Framework. http://www.kieutrongkhanh.net/search/label/Struts

·         Nắm vững và sử dụng các kỹ năng để về việc xây dựng hoàn tất ứng dụng với mô hình MVC2 và framework Struts2 sử dụng kết nối DB động (Data-source)

·         Tìm hiểu và nắm vững các khái niệm và ứng dụng XMLHttpRequest trong việc gọi ứng dụng hạn chế postback ở client (behind the scene) tại địa chỉ https://www.w3schools.com/xml/xml_http.asp

Tool sử dụng

·         Tools sử dụng ở đây là Netbeans 6.9.1, Netbeans 7.4, Netbeans 8.x

·         JDK 6 update 22, JDK 7 update 51, JDK 8 update 66

·         Server: Tomcat 6.0.26, Tomcat 7.x, Tomcat 8.x

·         DBMS: SQL Server từ phiên bản 2005 đến 2017

·         Thư viện hỗ trợ

o   Driver kết nối database SQLServer (sqljdbc.jar hay sqljdbc4.jar)

o   Struts2 Framework taglib

·         Công cụ Netbeans nên cài đặt plugin hỗ trợ Struts2

 

Nội dung cơ bản cho việc xây dựng ứng dụng

·         Database sử dụng trong bài viết này

·         Thực hiện tạo kết nối database sử dụng datasource

o   Cấu hình datasource trong context.xml

o   Sử dụng Data Source đã cấu hình để kết nối Database

 

·         Các giao diện trong ứng dụng để thực hiện xử lý

o   Tạo trang home page với 02 nút lệnh: một nút dành để tìm kiếm dữ liệu, nút còn lại dùng để insert dữ liệu

o   Chúng ta viết code trang home page như bên dưới

§  Trong trang này, chúng ta đang sử dụng thể include của taglib trong Struts2 với mục đích chia trang thành 03 thành phần: nút lệnh xử lý, form search và form insert

§  Việc phân chia này, giúp chúng ta sẽ dễ dàng phân chia giao diện thành từng phần có thể module hóa và maintain một cách dễ dàng hơn

§  Bên cạnh đó, việc cấu hình xử lý trên trang chính sẽ dễ dàng tác động đến các trang include, đặt biệt khi ở đây chúng ta áp dụng JavaScript và css trong dụng để hỗ trợ trong việc trình bày giao diên ở phía client

 

o   Chúng ta viết code JavaScript hỗ trợ trình bày giao diên Search hoặc Insert tùy theo việc nhấn nút lệnh nào thông qua tập tin script.js

·         Chúng ta đã hoàn tất các nội dung chuẩn bị để thực hiện project.

Các bước thực hiện

·         Chúng ta bắt đầu xử lý chức năng insert

o   Chúng ta thực hiện tạo ra fragment thể hiện các nội dung nhập liệu cần thiết để insert dữ liệu thông qua trang create.jsp

§  Lưu ý: Trong code này, chúng ta không tạo form lẫn header bởi vì chúng ta include vào trang jsp chính là trang homepage. Điều này có nghĩa là chúng ta được thừa hưởng toàn bộ những nội dung được khai báo trong home page hay nói cách khác chúng là một phần trong trang home page.

§  Giao diện khi chúng ta click vào nút insert có hình dạng như sau

o   Việc nhập liệu để insert xuống DB đòi hỏi phải có kiểm tra tính đúng đắn của dữ liệu trước khi đưa xuống DB. Trong trường hợp dữ liệu không hợp lệ chúng ta phải thông báo cho người nhập liệu biết lỗi sai ngay tại vị trí họ đã nhập dữ liệu. Struts2 hỗ trợ việc trình bày các lỗi thông qua css mặc định. Tuy nhiên, đôi lúc chúng ta cần customized nó theo ý muốn của khách hàng. Do vậy, chúng ta có thể áp dụng một trong 3 cách sau để chỉnh sửa hay override nội dung css mặc định

§  Cách 1: Sử dụng thuộc tính cssStyle trực tiếp trên tag của struts2

§  Cách 2: Sử dụng thuộc tính style trực tiếp trên tag của struts2

§  Cách 3: Bổ sung thuộc tính id hoặc cssClass trên tag của struts2 và sử dụng internal hoặc external css như bình thường

·         Sau khi cập nhật code như hình bên trên, giao diện chúng ta sẽ thay đổi như bên dưới, cụ thể là chữ to màu xanh là cây và khi contrỏ hover trên control thì sẽ thay đổi hình dạng là bàn tay

o   Chúng ta xây dựng hàm bằng JavaScript thực hiện lấy dữ liệu trên giao diện và gửi về phía server thông qua XMLHttpRequest. Protocol này sẽ giúp chúng ta gửi dữ liệu đi thay vì gửi nguyên trang web và không làm refresh trang trong quá trình đang xử lý và trình bày giao diện khi có dữ liệu được trả về và cập nhật trên giao diện

o   Chúng ta cần xây dựng phần xử lý ở server trong việc đón nhận yêu cầu từ client gửi lên. Chúng ta tạo Action để thực hiện xử lý

§  Việc xử lý tương tự như việc đón nhận dữ liệu khi chúng ta tương tác trên form vì dù sao đi nữa việc nhấn nút trên form cũng tạo ra một url với các parameter được hình thành và nối vào url để gửi về phía server (urlRewriting) tương tự như chúng ta truyền urlRewriting về phía server như cách chúng ta viết code ở trên

§  Khi xử lý thành công thì chúng ta gửi message tương ứng và ngược lại

o   Chúng ta tạo DAO để hỗ trợ cho Action xử lý

o   Thực hiện mapping Action trong tập tin struts.xml

o   Trong việc mapping để trình bày kết quả xử lý, chúng ta đã chuyển về trang createPage.jsp thay vì chuyển về trang homepage.jsp. Tại sao chúng ta lại có sự chuyển đổi như vậy?

o   Để hiểu rõ vấn đề này, chúng ta xem xét việc xử lý sẽ cho chúng ta kết quả gì bằng cách chúng ta chèn bổ sung dòng code alert(xhttp.responseText); tại dòng 31 trong hàm ajaxInsert (Sau câu mệnh đề if và trước document.getElementById) để kiểm tra xem khi kết quả thực thi thành công thi nội dung gì sẽ được đưa về trang createPage.jsp.

o   Chúng ta thực clean and build và deploy lại chương trình. Sau đó thực hiện test thử việc insert dữ liệu. Chúng ta sẽ thấy được nội dung trước khi nhấn nút OK như màn hình bên dưới

o   Thông qua màn hình debug phía trên, chúng ta nhận thấy chúng ta nhận được chuỗi html trình bày của trang createPage.jsp.

§  Qua kết quả này, chúng ta đã trả lời được tại sao chúng ta mapping kết quả đến trang createPage thay vì homepage. Điều này quá rõ ràng, nếu chúng ta trả về là trang homepage.jsp thì dòng document.getElementById("tableInsert").innerHTML = xhttp.responseText; sẽ tự return lại chính trang của nó.

o   Chúng ta thử test return lại homepage.jsp thay vì createpage.jsp bằng cách modify code mapping trong struts.xml như hình bên dưới

§  Chúng ta clean and build, deploy và chạy lại chương trình

 

o   Thực hiện nhấn nút insert, chúng ta có kết quả như sau

o   Chúng ta thực hiện trả code lại như ban đầu là trả về trang createpage.jsp trong phần success của struts.xml. Thực hiện clean and build, deploy và chạy lại. Sau khi nhập liệu và nhấn nút insert, màn hình xử lý thông báo chuỗi kết quả thì click nút ok, kết quả insert thành công được thông báo như hình bên dưới

o   Đường dẫn trên thanh địa chỉ browser hoàn toàn không thay đổi

o   Tiếp theo chúng ta sẽ hiện thực việc validate việc nhập liệu trong chức năng insert đã implement trong các bước ở trên bằng ajax

§  Chúng ta bổ sung annotation dùng để validation vào InsertAction cùng với việc extends Action với ActionSupport

§  Chúng ta mapping việc bổ sung xử lý lỗi vào struts.xml

§  Chúng ta Clean and build và deploy lại. Sau đó, thực thi ứng dụng để kiểm tra

§  Chúng ta không nhập gì cả và ấn insert

§  Chúng ta đã nhận được trang kết quả nhưng không có bất kỳ thông báo lỗi nào cả! Câu hỏi đặt ra là chúng ta đã thực hiện sai nội dung gì trong quá trình cấu hình xử lý lỗi như cách thông thường

§  Chúng ta thực hiện bổ sung thêm attribute name tương ứng ở các field với những parameter mà chúng ta đã truyền về phía server

§  Chúng ta thực hiện clean and build và deloy lại ứng dụng. Thực thi ứng dụng, chúng ta sẽ có kết quả như hình bên dưới

§  Qua nội dung nêu trên, chúng ta nhận thấy rằng việc validate trong struts2 thực hiện dựa trên việc mapping thuộc tính trong action với các parameter tương ứng phía giao diện ở client

§  Nhưng việc validate như ở trên gây ra trang web trình bày không được như ý muốn. Chúng ta thử set theme cho nó là css_xhtml (Theme default là xhtml)

§  Chúng ta thực hiện clean and build và deloy lại ứng dụng. Thực thi ứng dụng, chúng ta sẽ có kết quả như hình bên dưới

o   Chúng ta sẽ bổ sung thêm attribute labelposition="" cho từng field như code mô tả có sẵn trong hình bên dưới

§  Chúng ta thực hiện clean and build và deloy lại ứng dụng. Thực thi ứng dụng, chúng ta sẽ có kết quả như hình bên dưới

§  Nếu chúng ta insert đúng thì kết quả sẽ lưu với message Insert Successful. Chúng ta vừa hoàn tất xong chức năng Insert

·         Chúng ta thực hiện chức năng search với tính năng live search

o   Chúng ta tạo trang searchpage.jsp như hình bên dưới

o   Chúng ta sử dụng event onkeyup để bắt sự kiện người dùng input để hiển thị trực tiếp thông tin mà người dùng mong muốn mà không phải thông qua bất kì button submit nào

o   Chúng ta bổ sung tính năng search vào scripts.js như sau

o   Chúng ta tạo ra action để thực hiện chức năng Search như bên dưới

o   Cập nhật tính năng search cho DAO tương ứng

o   Thực hiện mapping action vào trong struts.xml

 

o   Chúng thực hiện Clean and build và deploy. Sau đó thực thi chương trình, chúng ta có kết quả như sau

o   Chúng thực vừa hoàn thành tính năng search với việc không làm postback lại trang và kết quả search được đưa behind the scene để trình bày kết quả

·         Chúng ta thực hiện tính năng Delete cho ứng dụng

o   Việc binding nút lệnh kích hoạt Delete đã được thể hiện trong hình vẽ của trang search.jsp ở trên

o   Chúng ta thực hiện viết code cho hàm delete bổ sung vào tập tin script.js như hình bên dưới

o   Chúng ta thực hiện tạo Action tương ứng cho việc xử lý Delete

o   Chúng ta cập nhật việc xử lý delete trong DAO

o   Chúng ta mapping action vào tập tin struts.xml

o   Clean and build và deploy. Thực thi ứng dụng, chúng ta có kết quả như các hình bên dưới

·         Chúng ta xây dựng chức năng update và validate trên gridview

o   Tham khảo nội dung của tính năng cơ bản này tại địa chỉ: http://www.kieutrongkhanh.net/2018/07/struts-2-framework-validation-on-data.html

o   Chúng ta thực hiện cải tiến nội dung này thông qua việc sử dụng XMLHttpRequest

o   Chúng ta cập nhật chức năng update vào trong script.js

o   Chúng ta bổ sung action để xử lý chức năng update

o   Chúng ta thực hiện bổ sung chức năng xử lý update vào DAO

o   Thực hiện validate trong update Action

o   Chúng ta mapping action vào tập tin struts.xml

 

o   Chúng ta cập nhật việc xử lý và trình bày lỗi update vào Search Action

 

o   Khi update không đúng format, chúng ta sẽ gọi lại chức năng search và hiển thị validate tương ứng lên. Nhưng vì gọi lại chức search, những field chúng ta nhập sai sẽ tự refresh lại từ đầu và ta không biết đã nhập sai những gì. Để tránh được việc đó, ta sẽ tạo ra 1 object chứa những thông tin mà chúng ta đã nhập sai và update lại list

o   Để sử dụng function indexOf của List một cách chính xác, chúng ta cần override lại equal trong dto. Và tại sao phải làm như vậy? Chúng ta cần nắm vững kiến thức về cách hoạt động của equal, hashcode, comparable

o   Clean and build và deploy. Thưc hiện thực thi ứng dụng để có kết quả như hình bên dưới

§  Xóa tên Peter và Franken và ấn update

o   Input sai format và ấn update

Như vậy, qua những nội dung chúng ta đã thực hiện ở bên trên bao gồm cách tiếp cận, cách implement và giải thích cụ thể, quý vị đã có thể nắm rõ cách thức hoạt động của validation bằng anotation, XMLHttpRequest khi sử dụng struts2

Chúng tôi hy vọng bài viết này sẽ giúp ích. Rất mong sự góp ý chân thành và chia sẻ của quý vị về chủ đề này. Hẹn gặp lại quý vị ở những chủ đề sau.

Không có nhận xét nào:

Đăng nhận xét