Web bán hàng bằng Spring MVC – Thiết kế giao diện người dùng

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 web như trang chủ, sản phẩm, giỏ hàng.

Để thiết kế giao diện web 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 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 Bonfire:

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

Mẫu giao diện Grocery Shoppy:

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

Mẫu giao diện Elite Shoppy:

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.

<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 cơ bản như trang chủ, danh mục, sản phẩm, giỏ hàng, chi tiết sản phẩm…

Như mình sẽ thiết kế trước một vài giao diện cho trang chủ, cửa hàng và 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)