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:

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

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

Link 1 Link 2 Link 3

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

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

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

Link 1 Link 2 Link 3

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

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

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

Link 1 Link 2 Link 3

Trong phần hướng dẫn thiết kế giao diện quản lý bán hàng Spring MVC thì mình sẽ sử dụng mẫu giao diện Shoppy Admin Panel để thực hiện.

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.

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

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.

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:

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

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:

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

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

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

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

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

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

Link 1 Link 2 Link 3

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)

Bình luận