›
›

Giáo trình Nhập môn Công nghệ phần mềm - Bài 2: Mô hình kiến trúc MVC trong phát triển ứng dụng web

Download
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
Lab 02  
Mô hình kiến trúc MVC trong phát triển ứng dụng web  
Mục tiêu  
- Tạo ứng dụng web đơn giản dùng MVC design pattern  
- Biết các thành phần nào trong web application tương ứng với thành phần Model,  
View, Control trong kiến trúc MVC  
Phần I Bài tập step by step  
Bài 1.1:  
Tạo một web application đơn giản theo kiến trúc MVC. Ứng dụng này cho phép chúng ta  
tạo trang login đơn giản dùng JSP – Servlet.  
Step 1: Open Netbeans -> Projects -> New Project -> Web Application  
Software Engineering Department - SoICT/HUST  
Trang 1 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
Software Engineering Department - SoICT/HUST  
Trang 2 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
Step 2: Tạo file UserBean.javađại diện cho thành phần Model, biểu diễn các thông  
tin về user. Mỗi usercó 2 thuộc tính là namevà password.  
Đặc trưng của thành phần Model là để lưu trữ thông tin về dữ liệu, do vậy mỗi thuộc  
tính namevà passwordnói trên cần có các phương thức gettervà settertương  
ứng.  
Class UserBeannhư sau:  
Software Engineering Department - SoICT/HUST  
Trang 3 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
Tạo thêm phương thức validate() thực hiện verify nếu user nhập vào là admin hay  
không:  
Step 3: Tạo file LoginServlet.javađại diện cho Controller, thực hiện kiểm  
soát việc login của user.  
Software Engineering Department - SoICT/HUST  
Trang 4 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
Khi chọn Add information to deployment descriptor (web.xml), các thông tin về servlet  
và servlet mapping sẽ được tự động thêm vào file config web.xml.  
<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="3.1"  
xmlns="http://xmlns.jcp.org/xml/ns/javaee"  
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee  
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">  
<servlet>  
<servlet-name>LoginServlet</servlet-name>  
<servlet-class>LoginServlet</servlet-class>  
</servlet>  
<servlet-mapping>  
<servlet-name>LoginServlet</servlet-name>  
<url-pattern>/LoginServlet</url-pattern>  
Software Engineering Department - SoICT/HUST  
Trang 5 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
</servlet-mapping>  
<session-config>  
<session-timeout>  
30  
</session-timeout>  
</session-config>  
</web-app>  
Code của file LoginServlet.java như sau:  
Software Engineering Department - SoICT/HUST  
Trang 6 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
Step 4: Tạo các file view: index.jsp để lấy thông tin từ người dùng, login-success.jsp,  
login-error.jsp. Các file này đóng vai trò thành phần View trong kiến trúc MVC  
File index.jsp chứa form login  
<%@page contentType="text/html" pageEncoding="UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html;  
charset=UTF-8">  
<title>Login</title>  
</head>  
<body>  
<h1>Enter information of user:</h1>  
<form action="LoginServlet" method="post">  
Name:<input type="text" name="name"><br>  
Password:<input type="password" name="password"><br>  
<input type="submit" value="login">  
</form>  
</body>  
</html>  
File login-success.jsp  
<%@page contentType="text/html" pageEncoding="UTF-8"%>  
<%@page import="model.UserBean" %>  
<!DOCTYPE html>  
<html>  
<head>  
Software Engineering Department - SoICT/HUST  
Trang 7 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
<meta http-equiv="Content-Type" content="text/html;  
charset=UTF-8">  
<title>Login success</title>  
</head>  
<body>  
<p>You are successfully logged in!</p>  
<%  
UserBean bean=(UserBean)request.getAttribute("bean");  
out.print("Welcome, "+bean.getName());  
%>  
</body>  
</html>  
File login-error.jsp:  
<%@page contentType="text/html" pageEncoding="UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html;  
charset=UTF-8">  
<title>Login failed</title>  
</head>  
<body>  
<p>Sorry! username or password error</p>  
<%@ include file="index.jsp" %>  
</body>  
</html>  
Step 5: Build và Run ứng dụng  
Software Engineering Department - SoICT/HUST  
Trang 8 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
Software Engineering Department - SoICT/HUST  
Trang 9 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
Câu hỏi:  
a) Hãy tìm hiểu sự khác nhau giữa hai phương thức: doGetvà doPost.  
b) Hãy tìm hiểu về sơ đồ sequence diagram của UML và vẽ lại qúa trình gửi nhận và xử lý  
message giữa 3 thành phần model-view-control trong bài tập nói trên.  
Phần II: Bài tập tự làm  
Tạo một ứng dụng web application theo mô hình MVC có chức năng  
sau: 1 trang hiển thị form add profile của user (đơn giản first name +  
last name + username + pass), sau khi add thì redirect đến trang hiển  
thị: Welcome to new user, [Hiển thị tên đầy đủ của người dùng thông  
qua thuộc tính Firstname và Lastname]. Sau đó thông báo Username:  
[...], Password: [...]. Gợi ý: Tạo một user bean mới có 4 thông tin nói  
trên, 2 pages jsp cho view và 1 servlet.  
Software Engineering Department - SoICT/HUST  
Trang 10 / 11  
Nhập môn Công nghệ phần mềm - Introduction to Software Engineering  
HẾT  
Software Engineering Department - SoICT/HUST  
Trang 11 / 11  
pdf 11 trang Thùy Anh 23900 Free
Download
Bạn đang xem tài liệu "Giáo trình Nhập môn Công nghệ phần mềm - Bài 2: Mô hình kiến trúc MVC trong phát triển ứng dụng web", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfgiao_trinh_nhap_mon_cong_nghe_phan_mem_bai_2_mo_hinh_kien_tr.pdf