Cài đặt mô hình MVC trong Java

Đăng ngày 11-04-2020

MVC là Design Pattern(mẫu thiết kế) được áp dụng rộng rãi trên hầu hết các ngôn ngữ lập trình hướng đối tượng hiện nay từ Java, C#, PHP, Visual C++ …. Trong bài viết này chúng ta sẽ làm rõ về MVC cũng như cách áp dụng nó từ thiết kế đến cài đặt mô hình MVC với ngôn ngữ lập trình Java. Hy vọng sẽ giúp các bạn rõ hơn về mô hình này.

1. MVC là gì?

Model – View – Controller (MVC) là một mẫu thiết kế nhằm mục tiêu chia tách phần Giao diện và Code để dễ quản lý, phát triển và bảo trì. MVC chia ứng dụng phần mềm ra làm 3 phần có tương tác với nhau là Model(Dữ liệu), View(Giao diện), Controller( Code điều khiển tương tác giữa Model và View cũng như nghiệp vụ (Business)).

Hình 1 – Mô hình MVC

Trong đó:

Model là lớp chứa thông tin đối tượng (Dữ liệu), tương tác với Database. Chịu trách nhiệm chính trong mô hình hóa đối tượng.
View là giao diện của hệ thống tương tác trực tiếp với người dùng.
Controller nhận yêu cầu từ người dùng và sử dụng Model và View để xử lý và trả kết quả cho người dùng.

Vì sao cần có MVC?

Sự nhập nhằng giữa giao diện và code trong các ngôn ngữ lập trình Scripting như JSP, PHP, ASP làm cho code chương trình khó hiểu và khó bảo trì và khó hình dung trong quá trình cài đặt hệ thống từ góc nhìn thiết kế. Ví dụ: trong thiết kế chúng ta mô hình hóa lớp Account nhưng khi cài đặt lại phải có giao diện theo chức năng và một số qui định về Bussiness nên rất khó hình dung. MVC ra đời với mục tiêu khắc phục những vấn đề đó. Bạn sẽ thấy rõ hơn trong các phần tiếp theo khi chúng ta tiến hành cài đặt mô hình MVC để xây dựng ứng dụng.

MVC có thể dùng trên Desktop, tuy nhiên trên mô hình ứng dụng web thì ưu điểm của nó mới được thể hiện rõ ràng hơn.

2. Bài toán và phân tích

Để bạn dễ hiểu MVC và cách sử dụng nó, chúng ta sẽ cài đặt mô hình MVC cho chức năng Login của ứng dụng ATM mà chúng ta đã nói ở bài Học lập trình hướng đối tượng với Java.

Mô tả chức năng Login như sau:

Màn hình Login của ATM sẽ hiển thị thông tin yêu cầu số PIN(AccountNo) và Password.
Hệ thống sẽ nhận thông tin từ người dùng và chuyển cho lớp Account để kiểm tra.
Nếu thông tin số PIN và Password đúng thì trả về Login thành công, Nếu sai thì trả về Login thất bại.

Bản vẽ thiết kế Sequence Diagram cho chức năng này như sau:

Hình 2- Bản vẽ Sequence Diagram của chức năng Login

Trong đó:

Lớp System đại diện cho các giao diện màn hình.
Lớp Account mô tả tài khoản trong hệ thống.

Để hiểu rõ hơn về bản vẽ này bạn đọc thêm bài Bản vẽ Class Diagram

Theo mô hình trên thì phần Code business và tương tác giữa 2 lớp bạn sẽ viết trong lớp giao diện hoặc lớp Account nên hầu hết các ngôn ngữ cho bạn viết code xen lẫn với HTML. Chính điều này gây khó hiểu cho người mới học.

Bây giờ chúng ta sẽ áp dụng thiết kế MVC để thiết kế cho chức năng này. Bằng cách tách lớp Giao diện ra thành View và Controller ta sẽ có bản vẽ Sequence Diagram như sau:

Bản vẽ thiết kế Sequence Diagram sau khi áp dụng MVC:

Lớp login: thể hiện giao diện có thể cài đặt bằng file login.html hoặc login.jsp
loginResult: cũng là file HTML hoặc JSP
loginController: là lớp điều khiển cho ứng dụng này. Sử dụng Sevlet.
Lớp Account: sử dụng Java bình thường.

Hình 3- Chức năng Login sau khi thiết kế theo MVC

Sơ đồ này cho chúng ta thấy gần với quá trình cài đặt mô hình MVC.

Cập nhật các phương thức và lớp mới vào sơ đồ lớp chúng ta sẽ có:

Hình 4- Class Diagram của chức năng MVC

Trong đó:

Login và loginResult: là các file HTML thuần túy đóng vai trò là View.
loginController đóng vai trò là Controller viết bằng Sevlet
Account: đóng vai trò là Model viết bằng Java.

Thoạt nhìn bạn thấy khá phức tạp vì nó phát sinh thêm lớp Control và loginResult nhưng thực ra nó sẽ tách phần code Java ra riêng với code HTML sẽ làm cho ứng dụng của chúng ta sáng sủa hơn và gần với quá trình cài đặt ứng dụng hơn.

Cài đặt ứng dụng ATM trên Java sử dụng MVC

Phần trên chúng ta đã phân tích về mặt thiết kế, bây giờ chúng ta sẽ đi cài đặt ứng dụng trên với Java. Hy vọng sẽ giúp các bạn hiểu sau hơn về mô hình này. Để thực hiện được bài này bạn phải biết cơ bản về lập trình Java và Sevlet.

Chúng ta sử dụng sơ đồ lớp ở trên và cài đặt nó trên ngôn ngữ lập trình Java. Trước tiên để cài đặt ứng dụng này máy tính của bạn phải cài đặt Tomcat và NetBean và cấu hình chúng chạy thành công. Xem cách cài đặt Tomcat và NetBean ở đây.

a. Cài đặt phần View

Trước tiên chúng ta sẽ cài đặt giao diện cho ứng dụng. Phần View là trang login.html như sau:

Hình 5- Trang Login

Hình 6- Đoạn code HTML của trang Login

Hình 7- Đoạn code CSS của trang Login

Tất nhiên bạn cần có kiến thức về HTML, CSS để cài đặt đoạn này. Nếu chưa biết về HTML và CSS bạn có thể xem thêm bài Giới thiệu về HTML.

b. Cài đặt phần Model

Phần model bao gồm 2 lớp như sau:

Account: là lớp mô tả về tài khoản. Chúng ta đã mô tả kỹ ở bài “Học lập trình hướng đối tượng với Java”.
AccountDB: là lớp bổ sung để kết nối với CSDL. Chúng ta sẽ nhận AccountID do người dùng nhập vào, sau đó vào CSDL để lấy thông tin của ID tương ứng và tạo đối tượng của lớp Account. Phần này gọi là Object Relational Mapping(ORM) sẽ được mô tả kỹ ở bài tiếp theo. Bài này chúng ta tạm thời thiết lập cứng giá trị.

Hình 8- Đoạn code lớp Account

Hình 9- Đoạn code lớp AccountDB

c. Cài đặt phần Controller

Như đã giới thiệu ở trên Controller có trách nhiệm kết nối phần View và Model cũng như xử lý các vấn đề nghiệp vụ liên quan. Phần này viết bằng Java. Có nhiều cách cài đặt phần này như sử dụng Sevlet hoặc dùng Spring Framework… ở đây chúng ta sử dụng Servlet để cài đặt. Để tạo ra Controller chúng ta thực hiện các bước sau:

Bước 1: Tạo Servlet

Từ cửa sổ Project của NetBean, kích chuột phải -> New -> Sevlet

Hình 10- Tạo Sevlet

Đặt tên Sevlet và kích Finish để tạo một Servlet

Hình 11- Tạo Sevlet -2

Hình 12- Sevlet khi mới tạo

Trong đó:

@WebServlet(name = “loginServlet1”, urlPatterns = {“/loginServlet1”})

WebServlet annotation: có mục đích cấu hình Sevlet. Khi có annotation này đặt trước class thì trình biên dịch nhận biết đó là một Sevlet class. Bạn có thể dùng cách này hoặc dùng file web.xml để thay thế.

processRequest method: đây là phương thức được sử dụng để viết Code cho Sevlet thực hiện chức năng Controller.

doGet, doPost methods: là 2 phương thức đáp ứng request của người dùng khi người dùng đặt phương thức get hay post trong file login.html. Hai phương thức này đều gọi lại processRequest() nên bạn chỉ cần viết lệnh trong processRequest() là đủ. Chi tiết vì sao sử dụng override doGet(), doPost bạn nên tìm đọc một bài về Sevlet để hiểu rõ hơn.

getServletInfo() method: nhằm mục đích mô tả thông tin về Sevlet.

Bước 2: Viết mã lệnh cho Sevlet

Hình 13- Code cua Sevlet

Trong đó:

Lấy Account Number và Password từ trang Login gửi sang thông qua HTTP Request. Mỗi khi người dùng kích nào nút Submit trên form HTML thì các thông tin từ Form sẽ được gói gửi kèm đến trang xử lý được chỉ định trong phần action của form.
Gọi phương thức getAccount() từ lớp AccountDB để tạo ra đối tượng tương ứng với AccountID đề nghị đăng nhập.
Gọi kiểm tra lấy kết quả và xây dựng trang kết quả trả về. Nếu bạn muốn trả về một trang có sẵn thì sử dụng phương thức .forward() của getSevletContext() để trả về kết quả cho trang đó.

Bước 3: Cấu hình ứng dụng để chạy

Để ứng dụng chạy được, bạn phải khai báo đúng urlPatterns vào thuộc tính action của form login. Lúc đó hệ thống mới chạy được.

@WebServlet(name = “loginServlet1”, urlPatterns = {“/LoginServlet“})

Phần bôi đậm và bôi đen này phải trùng nhau.

Trong trường hợp bạn đã có sẵn trang kết quả như LoginResult.jsp hoặc Thanks.jsp bạn có thể sửa lại đoạn code trên processRequest như sau:

Hình 14- Đoạn Code của Sevlet khi trang kết quả đã có sẵn tên là thanks.jsp

Sau đó bạn dùng jsp để truy cập dữ liệu từ lớp account chuyển sang để hiển thị kết quả.

Như vậy chúng ta đã xây dựng được một ứng dụng nhỏ về MVC trên Java. Bạn có thể lấy đoạn mã lệnh của ứng dụng ở đây để tham khảo thêm. Download.

Kết luận

Trong khuôn khổ một bài viết không thể giải thích hết các khái niện liên quan, bạn cố gắng đọc thêm theo những đường Link đã tham chiếu trong bài hoặc tham gia các buổi Seminar của iViettech hoặc cộng đồng Java Đà Nẵng để được giải thích thêm.

Theo iViettech.vn