Java web MVC – Tạo trang chủ

 

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

Trang chủ hiển thị

• các sản phẩm nổi bật
• các sản phẩm mới
• danh mục các sản phẩm

để người dùng tiện theo dõi.

Thư viện JSTL: Link tải

2. Thực thi

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

package binh.dev;

import java.io.IOException;

import java.io.PrintWriter;

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.dao.ProductDao;

import binh.dev.data.model.Category;

import binh.dev.data.model.Product;

import binh.dev.util.Constants;

/**

*

* @author binhdev

*/

public class HomeServlet extends BaseServlet {

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

super.doGet(request, response);

ProductDao productDao = DatabaseDao.getInstance().getProductDao();

List<Product> productList = productDao.hot(Constants.VIEW_LIMIT);

List<Product> hotProductList = productDao.hot(Constants.VIEW_NUMBER);

List<Category> hotcategoryList = DatabaseDao.getInstance().getCategoryDao().hotCategory();

request.setAttribute("productList", productList);

request.setAttribute("hotProductList", hotProductList);

request.setAttribute("hotcategoryList", hotcategoryList);

request.getRequestDispatcher("home.jsp").include(request, response);

}

@Override

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

PrintWriter out = response.getWriter();

out.print("Method POST");

}

}

HomeServlet 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

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

Sử dụng thư viện JSTL để ứng dụng Template Engine. Ở đây dùng tag c:forEach để đổ dữ liệu từ một List Category ra view HTML

<!-- top Featured Categories -->

<div class="row">

<c:forEach items="${hotcategoryList}" var="category">

<div class="col-md-3">

<div class="Featured-categories">

<a href="CategoryServlet?categoryId=${category.id}">

<img src="${category.thumbnail}" alt="" class="Featured-categories-img">

</a>

<ul class="Featured-categories-list">

<li class="Featured-categories-item ">

<a href="CategoryServlet?categoryId=${category.id}" class="Featured-categories-link Featured-categories-link-first">${category.name}</a>

</li>

<li class="Featured-categories-item">

<a href="" class="Featured-categories-link">Radar Detectors (2)</a>

</li>

<li class="Featured-categories-item">

<a href="" class="Featured-categories-link">Car Electrical Appliances (4)</a>

</li>

<li class="Featured-categories-item">

<a href="" class="Featured-categories-link">Car Camera (4)</a>

</li>

<li class="Featured-categories-item">

<a href="" class="Featured-categories-link">Audio (2)</a>

</li>

<li class="Featured-categories-item">

<a href=""

class="Featured-categories-link Featured-categories-link-last">ViewAll</a>

</li>

</ul>

</div>

</div>

</c:forEach>

</div>

2.1. Hiển thị danh sách sản phẩm bán chạy

B1: Ở tập tin HomeServlet phương thức doGet chúng ta cần lấy dữ liệu từ database các sản phẩm bán chạy nhất

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

super.doGet(request, response);

ProductDao productDao = DatabaseDao.getInstance().getProductDao();

List<Product> hotProductList = productDao.hot(Constants.VIEW_NUMBER);

request.setAttribute("hotProductList", hotProductList);

}

B2: Đổ dữ liệu ra giao diện home.jsp

<c:forEach items="${hotProductList}" var="product">

<div class="col-md-6">

<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=""><i class="fa-regular fa-eye"></i></a></li>

<li> <a href=""><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>

<form class="product-footer" action="CartServlet" method="post">

<input type="hidden" name="action" value="create"/>

<input type="hidden" name="quantity" value="1" min="1" />

<input type="hidden" name="productId" value="${product.id}"/>

<input type="hidden" name="productPrice" value="${product.price}"/>

<span class="product-short-desc">${product.description}</span>

<h1 class="product-title">${product.name}</h1>

<div class="product-price">

<span class="product-price-1">

<fmt:setLocale value = "en_US"/>

<fmt:formatNumber type="currency" value = "${product.price}" />

</span>

</div>

<button type="submit" class="_btn _btn-product">Add to cart</button>

</form>

</div>

</div>

</c:forEach>

2.2. Hiển thị danh sách sản phẩm mới nhất

B1: Ở tập tin HomeServlet phương thức doGet chúng ta cần lấy dữ liệu từ database các sản phẩm mới nhất

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

super.doGet(request, response);

ProductDao productDao = DatabaseDao.getInstance().getProductDao();

List<Product> newProductList = productDao.news(Constants.VIEW_NUMBER);

request.setAttribute("newProductList", newProductList);

request.getRequestDispatcher("home.jsp").include(request, response);

}

B2: Đổ dữ liệu ra giao diện home.jsp

<c:forEach items="${newProductList}" var="product">

<div class="col-md-6">

<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=""><i class="fa-regular fa-eye"></i></a></li>

<li> <a href=""><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>

<form class="product-footer" action="CartServlet" method="post">

<input type="hidden" name="action" value="create"/>

<input type="hidden" name="quantity" value="1" min="1" />

<input type="hidden" name="productId" value="${product.id}"/>

<input type="hidden" name="productPrice" value="${product.price}"/>

<span class="product-short-desc">${product.description}</span>

<h1 class="product-title">${product.name}</h1>

<div class="product-price">

<span class="product-price-1">

<fmt:setLocale value = "en_US"/>

<fmt:formatNumber type="currency" value = "${product.price}" />

</span>

</div>

<button type="submit" class="_btn _btn-product">Add to cart</button>

</form>

</div>

</div>

</c:forEach>

2.3. Hiển thị danh sách danh mục

B1: Ở tập tin HomeServlet phương thức doGet chúng ta cần lấy dữ liệu từ database các danh mục

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

super.doGet(request, response);

ProductDao productDao = DatabaseDao.getInstance().getProductDao();

List<Category> hotcategoryList = DatabaseDao.getInstance().getCategoryDao().hotCategory();

request.setAttribute("hotcategoryList", hotcategoryList);

request.getRequestDispatcher("home.jsp").include(request, response);

}

B2: Đổ dữ liệu ra giao diện home.jsp

<c:forEach items="${hotcategoryList}" var="category">

<div class="col-md-3">

<div class="Featured-categories">

<a href="CategoryServlet?categoryId=${category.id}">

<img src="${category.thumbnail}" alt="" class="Featured-categories-img">

</a>

<ul class="Featured-categories-list">

<li class="Featured-categories-item ">

<a href="CategoryServlet?categoryId=${category.id}" class="Featured-categories-link Featured-categories-link-first">${category.name}</a>

</li>

<li class="Featured-categories-item">

<a href="" class="Featured-categories-link">Radar Detectors (2)</a>

</li>

<li class="Featured-categories-item">

<a href="" class="Featured-categories-link">Car Electrical Appliances (4)</a>

</li>

<li class="Featured-categories-item">

<a href="" class="Featured-categories-link">Car Camera (4)</a>

</li>

<li class="Featured-categories-item">

<a href="" class="Featured-categories-link">Audio (2)</a>

</li>

<li class="Featured-categories-item">

<a href=""

class="Featured-categories-link Featured-categories-link-last">ViewAll</a>

</li>

</ul>

</div>

</div>

</c:forEach>