Web bán hàng bằng Spring MVC – Quản lý sản phẩm

Tiếp tục loạt bài hướng dẫn xây dựng Web bán hàng bằng Spring MVC thì Team Việt Dev sẽ trình bày phần thiết kế quản lý sản phẩm.

Ở phần trước mình đã hướng dẫn các bạn thực hiện thiết kế giao diện quản lý và phần xử lý đăng nhập hệ thống trong Web bán hàng bằng Spring MVC, bây giờ chúng ta tiếp tục với phần xây dựng tính năng quản lý sản phẩm như hiển thị danh sách, thêm mới, cập nhật và xóa.

Bước 1: Đầu tiên chúng ta sẽ thiết kế giao diện trang quản lý sản phẩm, như phần trước mình đã có trình bày thiết kế giao diện quản lý bao gồm các giao diện như quản lý danh mục, quản lý sản phẩm, quản lý hóa đơn…

Bước 2: Bạn tạo lớp ControllerProductManage.java nhằm thực hiện xử lý dữ liệu phần quản lý sản phẩm trong web bán hàng bằng Spring MVC.

Hiển thị danh sách sản phẩm phân trang, phía ControllerProductManage.java thực hiện như sau:

@RequestMapping(value = "list.html", method = RequestMethod.GET)
public String viewProductList(ModelMap mm, HttpSession session) {
      mm.put("listProduct", productService.getListNav(0, 10));
      mm.put("totalItem", productService.totalItem() / 10);
      return "manages/product_list";
}

@RequestMapping(value = "list/{page}.html", method = RequestMethod.GET)
public String viewProductListByPage(ModelMap mm, HttpSession session, @PathVariable("page") int page) {
      mm.put("listProduct", productService.getListNav((page - 1) * 10, 10));
      mm.put("totalItem", productService.totalItem() / 10);
}

Trong trang product_list.jsp hiển thị dữ liệu danh sách sản phẩm.

<c:forEach var="item" items="${listProduct}">
<tr class="unread checked">
       <td class="hidden-xs">
               ${item.productName}
       </td>
       <td class="hidden-xs" style="width: 200px;">
               ${item.category.categoryName}
       </td>
       <td style="text-align: right; width: 150px;">
               $${item.productPrice}
       </td>
       <td style="text-align: right; width: 150px;">
               ${item.productSale}%
       </td>
       <td style="text-align: center; width: 150px;">
               <a class="btn btn-default" href="${pageContext.request.contextPath}/manages/product/edit/${item.productId}.html"><i class="fa fa-edit"></i></a>
               <a class="btn btn-default" href="${pageContext.request.contextPath}/manages/product/remove/${item.productId}.html"><i class="fa fa-remove"></i></a>
       </td>
</tr>
</c:forEach>

Hiển thị phân trang dữ liệu:

<c:forEach var="i" begin="0" end="${totalItem}">    
       <a class="btn btn-default" href="${pageContext.request.contextPath}/manages/product/list/${i+1}.html"><c:out value="${i+1}"/></a>
</c:forEach>

Bước 3: Xử lý khi thêm mới, cập nhật hoặc xóa dữ liệu:

@RequestMapping(value = "add.html", method = RequestMethod.GET)
public String viewProductNew(ModelMap mm, HttpSession session) {
      mm.put("product", new Product());
      mm.put("listCategory", categoryService.getAll());
      return "manages/product_form";
}

@RequestMapping(value = "edit/{productId}.html", method = RequestMethod.GET)
public String viewProductEdit(ModelMap mm, HttpSession session, @PathVariable("productId") int productId) {
      Product p = productService.findById(productId);
      mm.put("product", p);
      mm.put("listCategory", categoryService.getAll());
      return "manages/product_form";
}

@RequestMapping(value = "save.html", method = RequestMethod.POST)
public String viewProductSave(ModelMap mm, HttpSession session, @ModelAttribute("product") Product product) {
      if (product.getProductId() == 0) {
            productService.create(product);
      } else {
            productService.update(product);
      }
      mm.put("product", product);
      mm.put("listCategory", categoryService.getAll());
      return "manages/product_form";
}

@RequestMapping(value = "remove/{productId}.html", method = RequestMethod.GET)
public String viewProductRemove(ModelMap mm, HttpSession session, @PathVariable("productId") int productId) {
      Product p = productService.findById(productId);
      if (p != null) {
            productService.delete(p);
      }
      mm.put("listProduct", productService.getListNav(0, 10));
      mm.put("totalItem", productService.totalItem() / 10);
      return "manages/product_list";
}

Trang product_form.jsp hiển thị dữ liệu người dùng nhập:

<form:form method="POST" modelAttribute="product" class="com-mail"
       action="${pageContext.request.contextPath}/manages/product/save.html">
     <label>Category ${product.category.categoryId}</label>
     <form:select path="category.categoryId">    
            <option value="-1">Select a type</option>
            <c:forEach var="c" items="${listCategory}">
               <option value="${c.categoryId}" ${product.category.categoryId == c.categoryId ? 'selected=""' : ''}>${c.categoryName}</option>
            </c:forEach>
     </form:select><br />
     <label>Name</label>
            <form:input path="productName"  />
     <label>Price</label>
     <form:input path="productPrice"  />
            <label>Sale</label>
     <form:input path="productSale" />
            <label>Description</label>
     <form:textarea path="productDescription"  />
     <div class="form-group">
           <div class="btn btn-default btn-file">
                  <i class="fa fa-paperclip"> </i> Attachment
                  <input type="file" name="attachment">
           </div>
     </div>
     <input type="submit" value="Save"> 
</form:form>

Một số hình ảnh mẫu khi thực hiện chức năng quản lý sản phẩm trong phần xây dựng Web bán hàng bằng Spring MVC như sau:

Trang quản lý sản phẩm:

Trang thông tin sản phẩm:

Tải mã nguồn tại đây:

Lời kết: Trong thời gian tới Team Việt Dev sẽ tiếp tục chia sẻ thêm nhiều bài viết trong loạt bài hướng dẫn xây dựng web bán hàng bằng Spring MVC… miễn phí đến bạn đọc, các bạn nhớ theo dõi kênh để có được những chia sẻ mới nhất.

(Tác giả: Team Việt Dev)