Ứng dụng Shopping Cart sử dụng MVC Pattern trên Web

Ứng dụng Shopping Cart sử dụng MVC Pattern trên Web  

Mục đích: Chủ đề của bài này đề xây dựng ứng dụng Shopping Cart – mua hàng trực tuyến áp dụng mô hình MVC trên Web trong việc hỗ trợ người dùng – user lựa chọn hàng trên trang web, xem lại các hàng đã chọn, cập nhật hay thêm bớt mặt hàng trong giỏ hàng của user. Chủ đề này nhằm mở rộng thêm cho chúng ta cách thức ứng dụng mô hình MVC vào các vấn đề khác nhau trong xây dựng phần mềm

Ứng dụng Shopping Cart sử dụng MVC Pattern trên Web 

Mục đích: Chủ đề của bài này đề xây dựng ứng dụng Shopping Cart – mua hàng trực tuyến áp dụng mô hình MVC trên Web trong việc hỗ trợ người dùng – user lựa chọn hàng trên trang web, xem lại các hàng đã chọn, cập nhật hay thêm bớt mặt hàng trong giỏ hàng của user. Chủ đề này nhằm mở rộng thêm cho chúng ta cách thức ứng dụng mô hình MVC vào các vấn đề khác nhau trong xây dựng phần mềm

Mô tá chức năng của ứng dụng Shopping Cart như sau

• Giao diện đầu tiên của ứng dụng cho phép người dùng chọn các loại sách thông qua combo box chứa thông tin mô tả các loại sách (các bạn có thể áp dụng lưới để trình bày dữ liệu)
• Người dùng chọn một mặt hàng bất kỳ và nhấn nút Add To Cart để đưa hàng vào giỏ hàng của họ
• Thông tin chọn lựa của người dùng được chuyển đến Controller, Controller sẽ xác định Model (ở đây sẽ là CartBean) cần xử lý và cập nhật Model
• Trong quá trình cập nhật Model, hệ thống có nhiệm vụ kiểm tra xem mặt hàng đã có trong giỏ hàng hay chưa. Nếu có thì tăng số lượng của mặt hàng đó lên, ngược lại đưa hàng vào giỏ với số lượng mặc định đầu tiên luôn là 1
• Sau khi cập nhật xong, thông tin cập nhật thành công chuyển lại controller để controller quay lại trang người dùng chọn lựa để họ có thể chọn tiếp (thành công). Nếu không thành công sẽ có báo lỗi tương ứng
• Khi user muốn xem giỏ hàng của mình, user click vào nút View Cart, thông tin một lần nữa chuyển đến Controller, Controller xác định Model tương ứng, gọi phương thức lấy dữ liệu. Đồng thời tại lúc chọn Model, Controller cũng xác định View tương ứng để chuẩn bị đón nhận kết quả từ Model để trình bày dữ liệu
• Khi dữ liệu từ Model được chuyển đến View, hệ thống sẽ render dữ liệu vào View. Khi thành công, Controller sẽ đưa View về phía người dùng hiển thị kết quả
• Trong trang view, người dùng có thể Add thêm hàng bằng cách click vào link Add more. Nội dung yêu cầu người dùng chuyển vào Controller, Controller sẽ đưa trang chọn hàng và trình bày về phía người dùng để người dùng có thể dùng chức năng thêm hàng vào giỏ như đã nêu ở trên
• Ngoài ra trong trang view, người dùng có thể chọn một số mặt hàng để loại bỏ bớt ra khỏi giỏ hàng bằng cách check vào các check box tương ứng của mặt hàng, sau đó, user click nút Remove. Thông tin được đưa về Controller, Controller chọn Model tương ứng, cập nhật Model và lấy thông tin trở về, đồng thời xác định View tương ứng và thực hiện trình bày kết quả thông qua Controller để đưa cho người dùng thông qua chức năng View Cart

Mô hình tổng quát của toàn bộ ứng dụng có thể miêu tả như hình bên dưới

Thực hiện nội dung cài đặt như sau

• Yêu cầu
• Nắm vững các khái niệm và cách thức cài đặt mô hình MVC trên web
• Nắm vững về ngôn ngữ lập trình Java, lập trình thao tác hướng đối tượng
• Cách thức sử dụng JSTL, EL, HTML
• Tools sử dụng ở đây là Netbeans 6.9.1
• JDK 6 update 22
• Server: Tomcat 6.0.26
• Thư viện hỗ trợ: JSTL 1.1
• Các bước thực hiện
• Bước 1: Tạo Web Application tương tư như kết hợp JavaFX với JSP và JDBC
• Tên project: MVCShoppingCart
• Server: Apache Tomcat 6.0.26
• J2EE version: 1.4
• Cấu trúc project trên Netbeans như sau

• Bước 2: Tạo các thành phần Model và các Object liên quan đến việc xử lý
• Tạo Object chứa thông tin của một mặt hàng - ở đây chúng tôi làm với sách. Thông tin bao gồm tựa sách – title, số lượng – quantity
• Tạo Java Class có tên BookDTO chứa trong package sample.mvc và implements từ java.io.Serializable
• BookDTO có chứa các thuộc tính nêu trên và các phương thức get/set tương ứng cho nó như sau

• Tạo Giỏ hàng – Model để chứa các thao tác xử lý thông tin liên quan đến việc chứa các mặt hàng về sách
• Tạo Java Class có tên CartBean – package sample.mvc được kế thừa từ HashMap để có khả năng chứa nhiều mặt hàng, check khóa cho mỗi mặt hàng, cập nhật, update giỏ hàng
• Thông tin CartBean được xây dựng với 02 phương thức chủ yếu là addBook và remove Book (áp dụng đúng mô tả trong phần nội dung chức năng của ứng dụng) như sau

• Bước 3: Tạo giao diện – View và Controller để kết nối xử lý giữa View và Controller
• Tạo giao diện cho lựa sách cho người dùng - cập nhật trang index theo yêu cầu đề bài như sau

• Tạo Controller để thực hiện chức năng thêm hàng vào giỏ hàng với các thao tác tuần tự như sau
• Lấy Session hiện hành, nếu không có tạo session mới
• Lấy giỏ hàng (kiểu CartBean) từ session
• Kiểm tra giỏ hàng, nếu không có tạo giỏ hàng mới
• Sau đó, thực hiện đưa hàng vào giỏ
• Cập nhật giỏ hàng trở lại session
• Quay trở về trang chính của người dùng

• Xử lý chức năng View Cart như sau
• Khi người dùng nhấn nút View Cart, request được chuyển vào Controller
• Controller định vị chuyển sang trang show.jsp để trình bày dữ liệu
• Trong trang show.jsp, chúng ta lấy giỏ hàng từ session xuống, kiểm tra giỏ hàng có tồn tại không (có thể do chưa có giỏ hàng, chưa chọn hàng hay thời gian session đã hết). Nếu có thực hiện duyệt giỏ hàng in ra lưới cho người dùng
• Controller sẽ trả kết quả cho người dùng

• Chúng ta cập nhật Controller như sau

• Tạo trang show.jsp để trình bày dữ liệu. Lưu ý: add thư viện JSTL 1.1 vào project

• Lưu ý:
• Chúng ta đang dùng EL để lấy giá trị trong giỏ hàng của người dùng. Giỏ hàng người dùng là hashMap với cấu trúc chứa key và value, do vậy Object – BookDTO của chúng ta đang dùng sẽ là value add vào trong HashMap.
• Khi chúng ta duyệt phần tử của HashMap bằng forEach, chúng ta mới chỉ trỏ con trỏ đến đầu từng phần tử (gồm 02 thứ đó là key và value). Do vậy, muốn lấy object thực sự chúng ta dùng get(key) – bản chất là getValue, nên EL được biểu diễn là rows.value – mỗi value kiểu BookDTO
• Khi lấy từng property trong BookDTO chúng ta phải biểu diễn biểu thức là ${rows.value.property} ở đây là row.value.title. Tương tự như với quantity
• Cấu trúc project được cập nhật như sau

• Bước 4 : Build, Deploy và Testing ứng dụng để kiểm tra việc cài đặt của chúng ta trước khi hoàn tất các chức năng còn lại

• Chúng ta click chọn Servlet 3 lần, Tomcat 1 lần, JSP 2 lần, Servlet 1 lần. Chúng ta thấy màn hình giựt và vẫn nằm trang hiện hành
• Chúng ta click nút View Cart, kết quả

• Bước 5: Bổ sung hoàn thiện các chức năng còn lại cho ứng dụng
• Bổ sung link Add More trên trang show.jsp để cho user quay về trang chọn hàng

• Bổ sung chức năng cho Controller

• Build Project, Deploy và Test (thực lại các ví dụ trong bước trên)

• Bổ sung chức năng delete, vào trang show bổ sung check box trên từng hàng trong lưới và nút Remove cuối cùng để người dùng chọn check box rồi sau đó nhấn nút Remove
• Lưu ý:
• Giá trị của check box sẽ gắn liền với hàng mà nó hiển thị, do vậy, giá trị thuộc tính value trong check box chính là trên tựa sách lấy ra từ HashMap trong lúc quá trình xử lý in trên trang show.jsp
• Để truyền giá trị về server – controller xử lý, chúng ta cần có form và ở đây chỉ có 1 form vì chúng ta sẽ lấy hết tất cả giá trị sách chọn, không lấy trên từng hàng cụ thể

• Cập nhật chức năng Remove cho Controller như sau
• Lấy giá trị request từ yêu cầu người dùng truyền về server
• Kiểm tra giá trị có khác null hay không? Chỉ làm khi khác null
• Lấy session hiện hành, kiểm tra session khác null thì mới thực hiện nghĩa là session còn tồn tại hay đã timeout sau một khoảng thời gian người dùng không tương tác hay server bị crash
• Lấy giỏ hàng từ session tồn tại, nều giỏ hàng còn tồn tại thì mới thực hiện các bước tiếp theo vì có thể giỏ hàng vẫn chưa tạo hay server bị crash, giỏ hàng bị hủy
• Thực hiện gọi Model để cập nhật giỏ hàng
• Cập nhật giỏ hàng trở lại session.
• Khi thực hiện xong, quay lại Controller và sử dụng chắc năng View để quay lại màn hình show. Điều này sẽ giúp tạo cảm giác trang web refresh cập nhật đối với người dùng

• Clean and Build, Deploy và Testing chương trình
• Áp dụng lại ví dụ trong các bước trên, chọn Servlet và Tomcat Server để check

• Nhấn nút Remove

• Chúng thực hiện checking và remove hết thì trang trở nên trắng vì lúc đó dữ liệu từ Model lấy ra là rỗng nên trang không còn trình bày được lưới nữa
• Do vậy, để làm trang trở nên thân thiện, chúng ta cải thiện trang show.jsp để có một chút tinh tế và tạo cảm giác thuận lợi cho người sử dụng
• Chúng ta đem phần header của table và phần footer của lưới ra khỏi mệnh đề if

• Clean and Build, Deploy và Testing, chúng ta sẽ cảm thấy happy hơn

Chúc mừng các bạn đã hoàn tất được ứng dụng Shopping Cart và nâng cao hơn về khái niệm và cách cài đặt mô hình MVC.

Chúng tôi hy vọng nội dung của bài này giúp ích các bạn hơn nữa trong việc cài đặt mô hình ứng dụng web áp dụng MVC

Rất mong sự góp ý chân thành và chia sẻ của quí vị về vấn đề này. Hẹn gặp lại quý vị ở chủ đề tương tự khi chúng tôi sẽ làm shopping card trên EJB, JSF …