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 doGet và doPost có vai trò xử lý 2 phương thức GET và POST 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"%>