Web bán hàng bằng Spring MVC – Thiết kế giao diện quản lý

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ế giao diện quản lý để quản lý sản phẩm, đơn đặt hàng, hóa đơn bán hàng.

Để thiết kế giao diện quản lý bán hàng Spring MVC bạn có thể tự thiết kế hoặc sử dụng mẫu theme miễn phí có sẵn, như trong phần hướng dẫn mình sẽ sử dụng mẫu theme miễn phí.

Bước 1: Bạn chọn một giao diện quản lý mẫu trên mạng hoặc có thể chọn giao diện như phần hướng dẫn để tải về.

Mẫu giao diện quản lý Shoppy Admin Panel:

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

Mẫu giao diện quản lý Baxster Admin Panel:

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

Mẫu giao diện quản lý Novus Admin Panel:

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

Bước 2: Sau khi tải giao diện về máy bạn sẽ copy các thư mục như CSS, JS, … trong thư mục resources đặt ngang hàng thư mục WEB-INF.

Trong tập tin dispatcher-servlet.xml bạn thêm đoạn mã sau để chỉ đường dẫn đến các tập tin CSS, JS nằm trong thư mục resources/manages.

<mvc:resources mapping="/resources/**" location="/resources/" cache-period="31556926"/>
<mvc:annotation-driven />

Trong mỗi trang JSP bạn sẽ chỉ đường dẫn đến tập tin CSS, JS, mình sẽ sử dụng thêm thư viện JSTL:

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

Đường dẫn đến tập tin CSS, JS…

<!-- css -->
<link href="<c:url value="/resources/manage/css/style.css"/>" rel='stylesheet' type='text/css'/>
<!-- js -->
<script src="<c:url value="/resources/manage/js/jquery-2.1.1.min.js" />"></script>

Bước 3: Tiếp theo là bạn sẽ thiết kế các giao diện quản lý cơ bản như quản lý danh mục sản phẩm, quản lý sản phẩm, quản lý hóa đơn, quản lý tài khoản…

Giao diện trang màn hình chính:

Giao diện trang quản lý sản phẩm, danh mục, đơn hàng:

Giao diện trang quản lý thêm sửa sản phẩm, danh mục, đơn hàng:

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)