Kết hợp công nghệ AJAX với ứng dụng web JavaEE theo mô hình MVC2 sử dụng Filter làm controller để xây dựng ứng dụng web

Kết hợp công nghệ AJAX với ứng dụng web JavaEE theo mô hình MVC2 sử dụng Filter làm controller để xây dựng ứng dụng web

Tác giả: Trần Tiến Đạt

 

Mục đích: Chủ đề này mô tả cách xây dựng một ứng dụng MVC2 có tích hợp  AJAX để xử lý dữ liệu mà không cần phải load lại trang trong mỗi thao tác của người sử dụng ở phía browser (client). Qua bài viết này, chúng ta sẽ thấy được ưu điểm và tính linh hoạt khi xác định dữ liệu hay chức năng nào cần xử lý ở client hay ở server. Hơn thế nữa, chúng ta biết cách áp dụng javascript trong quá trình xây dựng ứng dụng web. Song song với việc trình bày lý thuyết, chúng tôi sẽ hướng dẫn xây dựng ứng dụng web (với các chức năng cơ bản trong việc khai thác dữ liệu từ bộ lưu trữ) sử dụng mô hình MVC2 với Filter làm controller kết hợp với AJAX cùng javascript

 

Yêu cầu:

-          Nắm vững nền tảng ngôn ngữ lập trình Java, lập trình hướng đối tượng OOP.

-          Nắm vững các khái niệm về MVC2 và cách áp dụng mô hình này trên JavaEE , cách thức chia các module và các mô hình business của các chức năng web cơ bản. (tham khảo tại địa chỉ https://www.facebook.com/TrongKhanh.Kieu/posts/264210740618306 )

-          Nắm vững khái niệm DataSource và cách áp dụng ( tham khảo tại địa chỉ http://www.kieutrongkhanh.net/2016/08/tao-ket-noi-ong-en-db-trong-mo-hinh-mvc.html)

-          Nắm vững các khái niệm Filter và cách sử dụng Filter làm Controller trong mô hình MVC2 với ứng dụng web JavaEE ( tham khảo tại địa chỉ http://www.kieutrongkhanh.net/2017/06/topic-su-dung-filter-nhu-la-controller.html )

-          Có kiến thức nền tảng về html, css, javascript và jquery, JSON, ES6  (tham khảo tại https://www.w3schools.com )

 

Một số khái niệm có liên quan

AJAX là gì ?

·         AJAX (Asynchronous JavaScript And XML) là tập hợp của một nhóm các công nghệ được sử dụng để phát triển ứng dụng web.

·         AJAX được kết hợp từ các công nghệ như sau

o   XHTML và CSS để hiển trình bày thông tin trên trang.

o   Document Object Model (DOM) sử dụng cho những tương tác động và hiển thị thông tin trên web page.

o   XMLHttpRequest Object được sử dụng cho việc xử lý dữ liệu bất đồng bộ (data asynchronously) và giao tiếp với server.

o   XML, HTML, và XSLT được sử dụng cho việc chuyển đổi data giữa client và server.

o   JavaScript giúp binding data request và hiển thi dữ liệu ở phía client.

·         Với các công nghệ được kết hợp, AJAX mở ra một cách thức mới giúp cho client giao tiếp với server không cần phải load lại trang.

·         Cơ chế hoạt động

o   Trong ứng dụng web truyền thống, client gửi Request Message thông qua giao thức HTTP. Tại server, Request Object được hình thành khi có message đến để Web Server xử lí và trả về một Response Message chứa HTML thể hiện nội dung trang web sẽ trình bày ở client.

o   Với nội dung nêu trên, chúng ta nhận thấy có một vấn đề

§  Trong suốt quá trình hệ điều hành ở client gửi message thông qua HTTP đến Server và Server thực hiện xử lý để gửi kết quả trả về, người dùng không thể tương tác với Server được.

 

 

o   Tuy nhiên, với lý thuyết của AJAX, người dùng có thể tương tác với server kể cả khi Response Message chưa được trả về (xử lý bât đồng bộ).

§  Client gọi hàm JavaScript.

§  Ngay sau đó, Ajax Engine bản chất là bộ thông dịch của Javascript (Javascript interpreter) xử lý request và gửi HTTP Request đến Server.

§  Tại Server, request được xử lý và gửi data đến client theo định dạng XML hoặc JSON hoặc định dạng message mà người dùng mong muốn.

o   Cơ chế của AJAX Engine xử lý dữ liệu được gửi từ server và kết hợp chúng với HTML và CSS trên Client để người dùng có thể nhìn thấy mà không làm postback làm trang web trình bày ở phí client.

o   Tóm lại, Server không gửi  lại cách thức hay nội dung cả trang web (HTML và CSS) đến client nữa, mà chỉ có gửi dữ liệu (JSON, XML,... ). Điều này giúp tăng tốc độ xử lý và trình bày kết quả hiệu quả hơn ở phía client

 

 

 

Các yêu cầu về kiến thức và tool lập trình

 

❏       Nắm vững các kiến thức đã nêu trên bao gồm các nội dung trong phần nội dung yêu cầu

❏       Tool sử dụng ở đây là Netbeans và Sublime Text

❏       JDK 7 hay JDK 8.

❏       Server: Tomcat 7.0.42

❏       DBMS: SQL Server 2005, 2008, 2012, 2014, 2015.

❏       Thư viện hỗ trợ:

❏       JSTL (một trong các phiên bản sau đều được, cụ thể 1.1, hay 1.2.1, hay 1.2.2);

❏       Driver kết nối Database SQLServer (sqljdbc4.jar),

❏       GSON (https://repo1.maven.org/maven2/com/google/code/gson/gson/2.6.2/) ,

❏       Jquery 3.2.1 (https://code.jquery.com/)

❏       Browser hỗ trợ AJAX và javaScript: Microsoft Edge, Chrome, Mozilla Firefox 1.0 and above, Safari 1.2 and above

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

Tạo DB có cấu trúc như sau:

Tạo project của ứng dụng Web, sử dụng JavaEE 6 với Tomcat Server

Tạo filter có tên là DispatchFilter để làm Controller và có url-pattern là /*

Cài đặt Filter để xử lý như controller.

Lưu ý: chúng ta sẽ có tùy chỉnh css và javascript nên trong filter chúng ta phải chặn resource chứa đuôi là .css và .js.

Cấu hình datasource động trong tập tin context.xml

Mapping resource vừa khai báo ở trên vào tập tin web.xml, tắt luôn welcome file vì tất cả request đều phải qua filter

Import jdbc driver và hoàn tất việc tạo connection trong thư viện để hỗ trợ kết nối và sử dụng lại nhiều lần trong quá trình lập trình.

Tiếp Theo, chúng ta tạo các DAO và DTO để hỗ trợ mapping dữ liệu và truy xuất DB

Chúng ta tạo package account chứa Tbl_AccountDAO  với phương thức checkLogin

Tiếp đó, chúng ta thực hiện tạo Tbl_ProductDAO và Tbl_ProductDTO trong package product. Phát sinh constructor, setter ,getter trong class Tbl_ProductDTO

Chúng ta tiến hành tạo trang login.html và bổ sung code javascript window.history.forward() để không cho user bấm nút back trên browser.

 

 

Thực hiện tạo class LoginService trong package service với phương thức doLogin nhằm xác định việc xác thực thành công hay thất bại thông qua giá trị trả về là true hay false.

Thực hiện tạo Servlet với tên LoginServlet.java. Viết code khởi tạo service trong hàm init của servlet, và gọi hàm doLogin của service trong hàm processRequest.

Tiếp theo, chúng ta tiếp tục tạo trang showproduct.jsp.

Ở đây, chúng ta sẽ sử dụng thư viện JQuery 3.2.1 giúp hỗ trợ việc gọi hàm AJAX.

Lưu ý:

·         Bảng bên dưới thể hiện ý nghĩa của các hàm và id được sử dụng trong code javascript trong phần tiếp theo của bài viết này

·         Code javascript nên được đặt bên dưới cùng sau phần body của html. Điều này đảm bảo tất cả DOM được tạo thành công trước khi gọi hàm javascript bên trong

Để tạo  product.css để bố cục đơn giản cho trang web bằng CSS chúng ta tạo tập tin product.css

Để xử lý ở phía client, chúng ta tạo file product.js với các nội dung cơ bản như sau

·         Đầu tiên, chúng ta khởi tạo các biến global trong global scope của javascript.

·         Biến listProduct chứa các product được trả về trong hàm search product

·         Biến listProductFromServer chứa tất cả product được lấy lên từ server

·         Tạo hàm getAllProduct gọi hàm AJAX để lấy Product từ Server.

Lưu ý:

·         Cú pháp $.() là cú pháp của Jquery. (Tham khảo cách dùng hàm AJAX của Jquery tại địa chỉ https://www.w3schools.com/jquery/ajax_ajax.asp)

·         Trong cú pháp của $.ajax, thuộc tính url nhận giá trị “getProduct” (tương đương với action trong form), để được đến web server và được filter đón nhận để chuyển xử lý đến GetProductServlet

 

 

Để lấy toàn bộ danh sách các sản phẩm, chúng ta tạo class GetProductService với phương thực getProduct()

Thực hiện tạo Servlet với tên GetProductServlet (import GSON nhằm hỗ trợ cho việc chuyển đổi từ Object Java sang file JSON và ngược lại). Chúng ta sẽ gửi chuỗi JSON về cho client qua phương phức response.getWriter().write(json);

 

Client nhận được chuỗi json qua hàm success của ajax, tham số results chính là chuỗi json được gửi lên. Việc bây giờ chuyển string theo định dạng JSON sang Object của javascript qua hàm JSON.parse(results)

Chúng ta nhìn lại phần code xử lý trong file product.js đã nêu ở trên

Thực hiện trình bày giao diện thông qua hàm showListProduct. Trong code được trình bày bên dưới, hàm createARowOfProduct sẽ được giới thiệu ngay trong phần tiếp theo

 

Để thuận lợi hơn trong việc tạo ra các elements , chúng ta tạo một file js như là một thư viện hỗ trợ.

Với mỗi dòng trong bảng, hàm createARowOfProduct trả về 1 dòng tương ứng với 1 product để có thể đưa vào table thông qua phương thức appendChild.

Với mỗi button Delete và Update được tạo ở hình bên trên, chúng ta đã kích hoạt event listener click của mỗi button kết hợp với hàm callback của event listener này gọi các chức năng delete và update dữ liệu bằng AJAX.

 

Chúng ta bắt đầu xóa sản phẩm với hàm removeProduct(),  AJAX được gọi trong hàm này sẽ gửi productId về server để xử lý. Nếu xóa thành công, hệ thống sẽ cập nhật lại listProduct trên client.

·         Tham khảo hàm .map .splice  trong cách xử lí array bằng javascript
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map và https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)

Tại Server, Chúng ta thực hiện tạo Service và Servlet tương ứng là DeleteProductService và DeleteProductService

Để validation dữ liệu ở phía client, chúng ta tạo file validation.js với nội dung như sau.

Phần tiếp theo, chúng ta tiếp tục làm chức năng Update cho ứng dụng. Hàm updateProduct được xử lý như sau

·         Thực hiện validation dữ liệu ở client

·         Khi công việc đảm bảo dữ liêu là đúng thì thực hiện gọi hàm AJAX để update dữ liệu.

Trong Server, chúng ta tạo tiếp UpdateProductService và UpdateProductServlet tương thích với hàm AJAX

Chúng ta vừa hoàn tất chức năng update và delete sản phẩm với sự hỗ trợ và kết hợp giữa client và server.

Chúng ta tiếp tục thực hiện chức năng search hoàn toàn xử lý ơ client với mục đích tăng tốc độ xử lý và hạn chế việc liên tục postback về phía server.

 

Tham khảo cách sử dụng filter của javascript tại địa chỉ
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Để search, chúng ta dùng lệnh indexOf(). Nếu kết quả trả về bằng -1 thì không tồn tại.

Tham khảo các lệnh này tại địa chỉ:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

            Nội dung code thực hiện như sau:

Chúng ta vừa hoàn thành xong chức năng search

Tiếp đến, chúng ta tiếp tục thực hiện chức năng Insert một sản phẩm mới vào Database.

Khi người dùng click vào button Add New Product, popup sẽ hiện ra như hình bên dưới. Ở đây, chúng ta tập trung vào cách validation dữ liệu ở phía client. Khi dữ liệu hooàn toàn đúng, chúng ta sẽ gửi thông tin đã được validation từ client về phía server để xử lý.

Chúng ta thực hiện bổ sung code trong tập tin product.js để thực hiện việc hiển thị popup và đóng nó trên trình duyệt.

Tiếp theo, chúng ta xây dựng hàm insertNewProduct với mục đích là validate dữ liệu và gửi nó về Server thông qua cơ chế của AJAX

Ở phía Server, chúng ta tạo InsertProductService và InsertProductServlet với nội dung như sau

 

Chúng ta vừa hoàn tất luôn chức năng Insert

Cây thư mục của project chúng ta sau khi hoàn tất các nội dung trên như sau:

Chúc mừng quí vị, chúng ta đã hoàn thành một ứng dụng web có kết hợp xử lý ở client (sử dụng JavaScript cụ thể là AJAX) kết hợp sử dụng ở server (sử dụng design patter MVC2 với việc áp dụng filter làm controller).

Các nội dung trong bài viết này được tham khảo từ một số nguồn sau:

·         https://www.w3schools.com/

·         https://developer.mozilla.org/en-US/docs/

Rất mong quí vị có các đóng góp về bài viết này. Chân thành cám ơn quí vị.