Java web MVC – Tạo trang danh mục

1. Phân tích chức năng

Trang danh mục là trang hiển thị danh sách các sản phẩm được phân loại theo danh mục giúp người dùng tiện phân loại sản phẩm lúc theo dõi.

2. Thực thi

B1: Tạo servlet CategoryServlet kế thừa lớp BaseServlet đóng vai trò controller cho trang chủ

CategoryServlet có 2 phương thức doGetdoPost có vai trò xử lý 2 phương thức GETPOST của http

Với phương thức doGet sẽ sử dụng hàm getRequestDispatch nhúng giao diện ở thư mục view với mục đích hiển thị nội dung.

Để đổ dữ liệu từ database chúng ta cần lấy dữ liệu từ model ở mục controller này

package binh.dev;

import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.util.List;
import binh.dev.data.dao.DatabaseDao;
import binh.dev.data.model.Product;

/**
 *
 * @author binhdev
 */
public class CategoryServlet extends BaseServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        super.doGet(request, response);
        int categoryId = Integer.parseInt(request.getParameter("categoryId"));
        List<Product> productList = DatabaseDao.getInstance().getProductDao().findByCategory(categoryId);
        
        request.setAttribute("productList", productList);
        
        request.getRequestDispatcher("category.jsp").include(request, response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    }

}

B2: Tạo tập tin category.jsp để đổ dữ liệu ra giao diện ở mục view/category.jsp

Sử dụng thư viện JSTL để ứng dụng Template Engine

<%-- 
    Document   : home
    Created on : May 5, 2023, 7:19:37?PM
    Author     : binhdev
--%>
<%@include file="./inc/header.jsp"%>

<div id=app__container"">
    <div class="top-arrival container">
        <!-- top new arrivals -->
        <div class="row">
            <h1 class="heading-title">Top New Arrivals</h1>
        </div>
        <!-- heading product -->
        <div class="heading-bar">
            <span class="heading-desc">
                Browse the collection of our best selling and top interesting products.
            </span>
            <ul class="heading-list">
                <li class="heading-item">
                    <span class="heading-text heading-text-color"> New arrivals</span>
                </li>
                <li class="heading-item">
                    <span class="heading-text"> Featured </span>
                </li>
            </ul>
        </div>
        <!-- top new product -->
        <div class="row">
            <c:forEach items="${productList}" var="product">
                <div class="col-md-3">
                    <div class="product-item">
                        <div class="product-image-wrap">
                            <a href="ProductDetailServlet?productId=${product.id}" class="product-image-wrap-link">
                                <img src="${product.thumbnail}" alt="" class="product-image">
                            </a>
                            <ul class="product-icon">
                                <li> <a href="ProductDetailServlet?productId=${product.id}"><i class="fa-regular fa-eye"></i></a></li>
                                <li> <a href="CartServlet"><i class="fa-solid fa-cart-shopping"></i></a></li>
                                <li> <a href=""><i class="fa-solid fa-arrows-rotate"></i></a></li>
                                <li> <a href=""><i class="fa-regular fa-heart"></i></a></li>
                            </ul>
                        </div>
                        <div class="product-footer">
                            <span class="product-short-desc">
                                ${product.description}
                            </span>
                            <h1 class="product-title">${product.name}</h1>
                            <div class="product-price">
                                <span class="product-price-1 ">$${product.price} </span>
                            </div>



                            <div class="_btn _btn-product">Add to cart</div>
                        </div>

                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
<%@include file="./inc/footer.jsp"%>