Trang chủ > Java, JSP > Mô hình MVC và 1 ví dụ ứng dụng

Mô hình MVC và 1 ví dụ ứng dụng

1. Thế nào là mô hình 1?

Ngày xưa các bạn lập trình một trang jsp, php hay asp, các bạn thường đan xen các mã html cùng với các mã jsp, php, hay asp. Do vậy, có những khó khăn sau có thể gặp phải:

  • Người thiết kế giao diện cũng cần phải biết các ngôn ngữ lập trình, hoặc bạn phải trực tiếp thiết kế chúng.
  • Việc bảo trì chúng thường rất khó khăn, vì một phần các mã chương trình lẫn lộn với mã html.
  • Khi có lỗi xảy ra, việc tìm ra lỗi và định vị ỗi cũng là một vấn đề khó khăn.
  • Và còn nhiều những khó khăn khác …

Việc lập trình như trên, người ta gọi là mô hình lập trình 1, hay là mô hình lập trình cổ điển.

model1

2. Thế nào là mô hình 2?

Để khắc phục các khó khăn trên, người ta đưa ra mô hình 2 hay còn gọi là mô hình MVC (Model-View-Controllor). Tức là: Tương ứng với một trang JSP ngày xưa, bây giờ người ta tách nó ra làm ba thành phần: Mô hình – Khung nhìn – Bộ điều khiển. Các thành phần trên làm việc như sau:

Mô hình: Mô hình là các lớp java có nhiệm vụ:

  • Nhận các yêu cầu từ khung nhìn
  • Thi hành các yêu cầu đó (tính toán, kết nối CSDL …)
  • Trả về các giá trị tính toán cho View.

Khung nhìn: Bao gồm các mã tương tự như JSP để hiển thị form nhập liệu, các kết quả trả về từ Mô hình…

Bộ điều khiển: Đồng bộ hoá giữa Khung nhìn và Mô hình. Tức là với một trang JSP này thì sẽ tương ứng với lớp java nào để xử lý nó và ngược lại, kết quả sẽ trả về trang jsp nào.

Như vậy, chúng ta có thể tách biệt được các mã java ra khỏi mã html. Do vậy, nó đã giải quyết được các khó khăn đã nêu ra trong Mô hình 1. Người thiết kế giao diện và người lập trình java có thể mang tính chất độc lập tương đối. Việc debug hay bảo trì sẽ dễ dàng hơn, việc thay đổi các theme của trang web cũng dễ dàng hơn …

model1

Một ví dụ dễ thấy nhất của kiến trúc MVC là cách hiện thực của 1 đối tượng GUI của gói swing. Một đối tượng đồ họa (GUI Component) bao gồm 3 thành phần cơ bản: Model, View, và Controller. Model có trách nhiệm đối với toàn bộ dữ liệu cũng như trạng thái của đối tượng đồ họa. View chính là thể hiện trực quan của Model, hay nói cách khác chính là giao diện của đối tượng đồ họa. Và Controller điều khiển việc tương tác giữa đối tượng đồ họa với người sử dụng cũng như những đối tượng khác.

Khi người sử dụng hoặc những đối tượng khác cần thay đổi trạng thái của đối tượng đồ họa, nó sẽ tương tác thông qua Controller của đối tượng đồ họa. Controller sẽ thực hiện việc thay đổi trên Model. Khi có bất kỳ sự thay đổi nào ở xảy ra ở Model, nó sẽ phát thông điệp (broadcast message) thông báo cho View và Controller biết. Nhận được thông điệp từ Model, View sẽ cập nhật lại thể hiện của mình, đảm bảo rằng nó luôn là thể hiện trực quan chính xác của Model. Còn Controller, khi nhận được thông điệp từ Model, sẽ có những tương tác cần thiết phản hồi lại người sử dụng hoặc các đối tượng khác.

Lấy ví dụ một GUI Component đơn giản là Checkbox. Checkbox có thành phần Model để quản lý trạng thái của nó là check hay uncheck, thành phần View để thể hiện nó với trạng thái tương ứng lên màn hình, và thành phần Controller để xử lý những sự kiện khi có sự tương tác của người sử dụng hoặc các đối tượng khác lên Checkbox. Khi người sử dụng nhấn chuột vào Checkbox, thành phần Controller của Checkbox sẽ xử lý sự kiện này, yêu cầu thành phần Model thay đổi dữ liệu trạng thái. Sau khi thay đổi trạng thái, thành phần Model phát thông điệp đến thành phần View và Controller. Thành phần View của Checkbox nhận được thông điệp sẽ cập nhật lại thể hiện của Checkbox, phản ánh chính xác trạng thái Checkbox do Model lưu giữ. Thành phần Controller nhận được thông điệp do Model gởi tới sẽ có những tương tác phản hồi với người sử dụng nếu cần thiết.

Tuy nhiên, việc sử dụng mô hình MVC model 2 một cách hoàn toàn cứng nhắc (phần “Điều khiển” chỉ dùng servlet, phần “Hiển thị” chỉ dùng JSP )sẽ dẫn đến một vài trường hợp kém hiệu quả, nhất là khi các yêu cầu từ trình duyệt web chỉ đòi hỏi việc hiển thị thông tin. Trong trường hợp này, gửi thẳng yêu cầu hiển thị từ trình duyệt web tới trang JSP sẽ hiệu quả hơn.

Sau đây là 1 ví dụ ứng dụng mô hình MVC để tạo 1 giỏ hàng:
Bạn phải có cơ sở dữ liệu như hình:

db

Cấu trúc thư mục sau khi hoàn thành sẽ như sau:
cautruc
Các bước tiến hành như sau:
Trong thư mục webapps của thư mục cài đặt Tomcat, tạo folder có tên ShoppingCart

1>Tạo trang MyEShop.jsp có nội dung sau:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="shopping.*" %>
<%@page import="java.util.ArrayList" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>My E-Shop</title>
        <script type="text/javascript">
            function kt(){
                var s=document.getElementById("sl").value;
                if(isNaN(s) || s<=0)
                    return false;
                return true;
            }
        </script>
    </head>
    <body>
        <h1>GIỎ HÀNG ONLINE - MVC</h1>
        <%
            DBActions db = new DBActions();
            ArrayList<Sanpham> dssp = db.getAllProducts();
        %>
        <form action="ControllerServlet">
            Hãy chọn món hàng cần mua:
            <select name="monhang">
                <%
            for (Sanpham sp : dssp) {%>
                <option value="<%=sp.getMsSP()%>"><%=sp.getTenSP()%></option>
                <%}%>
            </select>
            Số lượng<input name="soluong" value="0" id="sl"/>
            <input type="hidden" name="action" value="muahang"/>
            <input type="submit" value="Mua hàng" onclick="return kt()"/>
        </form>
		<br/>
        <jsp:include page="MyECart.jsp" flush="true"/>
    </body>
</html>

2>Tạo trang MyECart.jsp có nội dung sau

<%-- 
    Document   : giohang
    Author     : VoVanHai
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.ArrayList" %>
<%@page import="shopping.*" %>
<%
   Object obj=session.getAttribute("giohang");
   if(obj!=null){
       Giohang giohang=(Giohang)obj;
       ArrayList<Monhang>dssp=giohang.getGiohang();
	   if(dssp.size()>0){
%>
<table align="center" border="1" width="95%">
    <tr>
        <th>STT</th>
        <th>Tên món hàng</th>
        <th>Số lượng</th>
        <th>Đơn giá</th>
        <th>Thành tiền</th>
        <th></th>
    </tr>
    <%int i=1;
    for(Monhang mh:dssp){
        String ms=mh.getSanpham().getMsSP();
        String ten=mh.getSanpham().getTenSP();
        double dg=mh.getSanpham().getDongia();
        int sl=mh.getSoluong();
        %>
        <tr>
            <td><%=(i++)%></td>
            <td><%=ten%></td>
            <td><%=dg%></td>
            <td><%=sl%></td>
            <td><%=dg*sl%></td>
            <td>
                <form action="ControllerServlet" method="post">
                    <input type="hidden" name="action" value="trahang"/>
                    <input type="hidden" name="mssp" value="<%=ms%>"/>
                    <input type="submit" value="Trả hàng"/>
                </form>
            </td>
        </tr>
    <%}%>
    </table>
    <br/>
        <center>
            <form action="ControllerServlet">
                <input type="hidden" name="action" value="checkout"/>
                <input type="submit" value="Check out"/>
            </form>
        </center>
   <%}
   }
%>

3>Tạo trang Checkout.jsp có nội dung sau
<%-- 
    Document   : Checkout
    Created on : 16-03-2011, 17:58:41
    Author     : VoVanHai
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.ArrayList" %>
<%@page import="shopping.*" %>
<%
   Object obj=session.getAttribute("giohang");
   if(obj!=null){
       Giohang giohang=(Giohang)obj;
       ArrayList<Monhang>dssp=giohang.getGiohang();
%>
<h1 align="center">TÍNH TIỀN</h1>
<table align="center" border="1" width="95%">
    <tr>
        <th>STT</th>
        <th>Tên món hàng</th>
        <th>Số lượng</th>
        <th>Đơn giá</th>
        <th>Thành tiền</th>
    </tr>
    <%int i=1;
    for(Monhang mh:dssp){
        String ms=mh.getSanpham().getMsSP();
        String ten=mh.getSanpham().getTenSP();
        double dg=mh.getSanpham().getDongia();
        int sl=mh.getSoluong();
        %>
        <tr>
            <td><%=(i++)%></td>
            <td><%=ten%></td>
            <td><%=dg%></td>
            <td><%=sl%></td>
            <td><%=dg*sl%></td>
        </tr>
    <%}%>
    <tr>
        <td align="right" colspan="5" ><b>Tổng tiền:<%=giohang.Tongtien()%></b></td>
    </tr>
    </table>
	<br/>
	<a href="MyEShop.jsp">Nhấn vào đây để mua thêm hàng</a>
   <%}
%>

4>Trong thư mục classes tạo các file java có nội dung như sau:
File Sanpham.java:
package shopping;

import java.io.Serializable;

/**
 * Lớp đặc tả cho 1 sản phẩm
 * @author VoVanHai
 */
public class Sanpham  implements Serializable{
    private String msSP;
    private String tenSP;
    private float dongia;

    public Sanpham(String msSP, String tenSP, float dongia) {
        this.msSP = msSP;
        this.tenSP = tenSP;
        this.dongia = dongia;
    }

    public float getDongia() {
        return dongia;
    }

    public void setDongia(float dongia) {
        this.dongia = dongia;
    }

    public String getMsSP() {
        return msSP;
    }

    public void setMsSP(String msSP) {
        this.msSP = msSP;
    }

    public String getTenSP() {
        return tenSP;
    }

    public void setTenSP(String tenSP) {
        this.tenSP = tenSP;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final Sanpham other = (Sanpham) obj;
        if ((this.msSP == null) ? (other.msSP != null) : !this.msSP.equals(other.msSP)) {
            return false;
        }
        return true;
    }

    @Override
    public int hashCode() {
        int hash = 7;
        hash = 19 * hash + (this.msSP != null ? this.msSP.hashCode() : 0);
        return hash;
    }

    @Override
    public String toString() {
        return msSP+";"+ tenSP;
    }    
}
Advertisements
Chuyên mục:Java, JSP
  1. Không có bình luận
  1. No trackbacks yet.

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s

%d bloggers like this: