Hướng dẫn thiết kế web bằng jsp servlet năm 2024

Question

Bạn có thể Dowload nhiều gói khác nhau tùy thuộc vào mục đích sử dụng, các gói này chỉ khác nhau về các plugin có sẵn trong đó. Bạn nên download gói “Eclipse IDE for Java EE Developers“. Trong quá trình lập trình đòi hỏi thêm các Plugin bạn có thể cài đặt mở rộng thêm.

Nội dung chính Show

3. Cài đặt MySQL, kết nối project trên Eclipse
4. Yêu cầu chức năng website
5. Mô hình MVC
II. PHÂN TÍCH THIẾT KẾ
1. Sơ đồ Usecase
2. Sơ đồ hoạt động
3. Sơ đồ lớp
4. Sơ đồ trình tự
5. Sơ đồ các bảng cơ sở dữ liệu
III. PHÁT TRIỂN ỨNG DỤNG
1. Kết nối với cơ sở dữ liệu
2. Hiển thị danh mục sản phẩm

Các bạn có thể tham khảo video hướng dẫn tải và cài đặt Eclipse IDE qua video sau:

https://www.youtube.com/watch?v=7WeVvKxG_ec

2.2 Tạo web project

Yêu cầu, bạn cần cài đặt Apache Tomcat. Tham khảo bài viết hướng dẫn sau Cài đặt và Cấu hình Server Tomcat trên Eclipse:

https://o7planning.org/vi/10209/cai-dat-va-cau-hinh-server-tomcat-tren-eclipse

Sau khi đã cài xong Apache Tomcat, trên Eclipse các bạn vào File –> New –> Dynamic Web Project

Cửa sổ Dynamic Web Project hiện lên, nhập tên của project vào ô Project name sau đó ấn Finish

3. Cài đặt MySQL, kết nối project trên Eclipse

3.1 Cài đặt MySQL

Trong hướng dẫn này tôi sử dụng MySQL Workbench là công cụ để thực hành. Sau đây chúng ta sẽ đi vào tìm hiểu cách cài dặt và cấu hình MySQL:

3.1.1 Dowload MySQL

Chúng ta sẽ dowload và sử dụng gói miễn phí MySQL Community Server

Để download MySQL Community, click vào địa chỉ sau và làm theo hình bên dưới:

https://dev.mysql.com/downloads/mysql/

3.1.2 Cài đặt MySQL

Sau khi download xong, bạn hãy tham khảo cách cài đặt và cấu hình theo link bên dưới:

Hướng dẫn cài đặt và cấu hình MySQL Community

https://www.youtube.com/watch?v=GVZUu5CGvUY

3.2 Kết nối project trên Eclipse

3.2.1 Download một số các driver quan trọng

1. Maven cho Oracle JDBC Driver

Bạn có thể xem và download tại website của Oracle: theo đường link sau:

* http://www.oracle.com/technetwork/database/enterprise-edition/jdbc-112010-090769.html

Kết quả download được là file Ojdbc6.jar

2. Thư viện điều khiển Database MySQL

Bạn có thể download các thư viện điều khiển cơ sở dữ liệu MySQL tại:

* http://mvnrepository.com/artifact/mysql/mysql-connector-java

Kết quả download được là file mysql-connector-java-xxx.jar

3. Thư viện điều khiển Database SQL Server (JTDS)

Bạn có thể download các phiên bản tại:

* http://mvnrepository.com/artifact/net.sourceforge.jtds/jtds

Kết quả download được là file jtds-xxx.jar

4. Thư viện điều khiển Database SQL Server (SQLJDBC)

Link download:

* http://www.microsoft.com/en-us/download/details.aspx?id=11774

Kết quả download được là file sqljdbc4.jar

3.2.2 Thêm các thư viện vào project

Sau khi tải xong các thư viện ở phía trên, chúng ta kích chuột phải vào project–>Build Path –> Configure Build Path –> Java Build Path–> Libraries –> Add External JARs… –> chọn đến thư mục chứa các thư viện vừa tải về –> tích chọn các thư viện đó –> Apply and close. Cụ thể các bạn xem hình bên dưới

4. Yêu cầu chức năng website

Tùy vào mục đích sử dụng cũng như yêu cầu đặt ra của website mà chúng ta sẽ phân tích các chức năng khác nhau, ở đây mình sẽ đưa ra một số chức năng cơ bản nhất của một website như sau:

4.1 Sơ đồ phân cấp chức năng phía Frontend

4.2 Sơ đồ phân cấp chức năng phía Backend

5. Mô hình MVC

Trong hướng dẫn này chúng ta sẽ học cách tạo website theo mô hình MVC bằng cách sử dụng Java Servlet và JSP

MVC là gì?

MVC được viết tắt bởi Model-View-Controller. Nó tạo ra một mô hình 3 lớp Model-View-Controller tách biệt và tương tác với nhau.

Model: chứa những nghiệp vụ tương tác với dữ liệu hoặc hệ quản trị cơ sở dữ liệu (mysql, mssql…) gồm các class/function xử lý nhiều nghiệp vụ như kết nối database, truy vấn dữ liệu, thêm, xóa, sửa dữ liệu…
View: chứa những giao diện như nút bấm, khung nhập, menu, hình ảnh,… có nhiệm vụ hiển thị dữ liệu và giúp người dùng tương tác với hệ thống. (Trong JSP-Servlet thì View chứa các file jsp).
Controller: tiếp nhận những yêu cầu xử lý được gửi từ người dùng, gồm các class/function xử lý nhiều nghiệp vụ logic để lấy dữ liệu thông tin cần thiết nhờ các nghiệp vụ lớp Model cung cấp và hiển thị dữ liệu ra cho người dùng nhờ lớp View. (Trong JSP-Servlet thì Controller chứa các file servlet).

Giải thích mô hình MVC

Dựa vào mô hình trên ta có thể thấy, khi có một người dùng truy cập vào ứng dụng web. Thì server sẽ nhận một request từ phía client. Cụ thể trường hợp này Client là User. Khi các bạn truy cập vào một trang web nào đó, đồng thời yêu cầu sẽ được gửi đến server để xử lý. Controller lúc này sẽ nhận yêu cầu từ User, có thể tương tác với Database (Model), sẽ xử lý các thuật toán và nghiệp vụ. Trong trường hợp tương tác với cơ sở dữ liệu thì Model thực hiện tương tác với database lấy đúng dữ liệu yêu cầu và trả lại cho controller. Controller sẽ lấy dữ liệu đó để trả về cho View. Còn View có nhiệm vụ hiển thị dữ liệu lên trình duyệt biên dịch. Và các bạn sẽ có thể xem được nội dung mà mình đã yêu cầu.

II. PHÂN TÍCH THIẾT KẾ

1. Sơ đồ Usecase

1.1 Xác định các Actor liên quan đến hệ thống

Khách hàng
- User
  - Có tài khoản.
  - Có quyền đăng nhập, đăng xuất, đổi mật khẩu.
  - Đặt mua sản phẩm.
  - Xem đơn hàng.
  - Thanh toán hóa đơn.
  - Gửi phản hồi cho website.
- Guest (Khách viếng thăm)
  - Xem thông tin sản phẩm.
  - Đăng kí thành viên.
Admin
- Đăng nhập website.
- Xem, thêm mới, xóa, chỉnh sửa thông tin sản phẩm.
- Quản lý đơn đặt hàng.
- Quản lý sản phẩm.
- Quản lý người dùng.
- Xem và xóa tài khoản của khách hàng, nhưng không được thay đổi thông tin khách hàng.
- Trả lời phản hồi khách hàng.

1.2 Các Usecase cần có

Use-case tổng quát.
Use-case dành cho khách hàng.
Use-case dành cho admin.
Use-case quản lý tài khoản.
Use-case quản lý tìm kiếm.
Use-case quản lý đơn hàng.
Use-case quản lý danh mục.

1.3 Bản vẽ các Usecase

* Use-case tổng quát.

* Use-case dành cho khách hàng.

* Use-case dành cho admin.

* Use-case quản lý tài khoản.

* Use-case quản lý tìm kiếm.

* Use-case quản lý đơn hàng.

* Use-case quản lý danh mục.

2. Sơ đồ hoạt động

* Sơ đồ hoạt động đăng kí

* Sơ đồ hoạt động đăng nhập

* Sơ đồ hoạt động tìm kiếm sản phẩm

* Sơ đồ hoạt động thêm mới sản phẩm

* Sơ đồ hoạt động sửa, xóa thông tin sản phẩm

* Sơ đồ hoạt động xem giỏ hàng

* Sơ đồ hoạt động xem sản phẩm

* Sơ đồ hoạt động xem thông tin cá nhân

* Sơ đồ hoạt động xem đơn đặt hàng

* Sơ đồ hoạt động thêm User

* Sơ đồ hoạt động sửa, xóa thông tin User

* Sơ đồ hoạt động thanh toán

3. Sơ đồ lớp

3.1 Chi tiết các lớp cần có trong sơ đồ

3.2 Sơ đồ lớp tổng quan

3.3 Sơ đồ lớp phân rã chi tiết

4. Sơ đồ trình tự

* Sơ đồ trình tự đăng nhập hệ thống

* Sơ đồ trình tự đăng kí tài khoản

* Sơ đồ trình tự thanh toán đơn hàng

* Sơ đồ trình tự thêm sản phẩm vào giỏ hàng

* Sơ đồ trình tự xem chi tiết sản phẩm

* Sơ đồ trình tự xem sản phẩm theo danh mục

* Sơ đồ trình tự Admin thêm, sửa, xóa danh mục

* Sơ đồ trình tự xem thống kê danh mục

5. Sơ đồ các bảng cơ sở dữ liệu

* Bảng 1: Users

* Bảng 2: Product

* Bảng 3: Category

* Bảng 4: Bill

* Bảng 5: Bill_detail

* Bảng 6: Cart

* Sơ đồ thực thể liên kết

III. PHÁT TRIỂN ỨNG DỤNG

1. Kết nối với cơ sở dữ liệu

Đầu tiên các bạn phải tạo một file để kết nối với cơ sở dữ liệu, mình đặt tên file là DBConnect Với Class.forName(“com.mysql.jdbc.Driver”) dùng để load JDBC Drive.

  
import java.sql.Connection;  
import java.sql.DriverManager;
public class DBConnect {  
    public static Connection getConnection(){  
        Connection conn = null;  
        try {  
            Class.forName("com.mysql.jdbc.Driver");  
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/shop", "root", "root");  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
        return conn;  
    }  
    public static void main(String[] args) {  
        System.out.println(getConnection());  
    }  
}

2. Hiển thị danh mục sản phẩm

Bước 1: Tạo đối tượng danh mục với các thuộc tính là mã danh mục và tên danh mục, sau đó thiết lập các phương thức getter và setter như sau:

  
public class Category {  
    private long categoryID;  
    private String categoryName;  
    public Category() {  
    }  
    public Category(long categoryID, String categoryName) {  
        this.categoryID = categoryID;  
        this.categoryName = categoryName;  
    }  
    public long getCategoryID() {  
        return categoryID;  
    }  
    public void setCategoryID(long categoryID) {  
        this.categoryID = categoryID;  
    }  
    public String getCategoryName() {  
        return categoryName;  
    }  
    public void setCategoryName(String categoryName) {  
        this.categoryName = categoryName;  
    }  
}

Bước 2: Viết phương thức lấy ra danh sách các danh mục đã tạo trong cơ sở dữ liệu

Các bạn tạo package dao, và tạo file java với tên CategoryDAO sau đó viết phương thức getListCategory() để có thể lấy ra được danh sách các danh mục từ cơ sở dữ liệu.

Đầu tiên Các bạn phải tạo ra một kết nối Connection đến với cơ sở dữ liệu, sau đó sử dụng các câu lệnh truy vấn SQL để lấy tất cả tên danh mục từ bảng category, sử dụng lệnh executeQuery()

hướng dẫn Mẹo Hay