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>