Bài 3: Thiết kế giao diện người dùng cho web

Khi bạn xây dựng website bán hàng hay tin tức, nghe nhạc… thì thiết kế giao diện cho website là phần không thể thiếu được trong quá trình thiết kế trang web, mỗi website thuộc các lĩnh vực khác nhau có thể được thiết kế theo các chủ đề, giao diện khác nhau. Bài viết này mình sẽ hướng dẫn cách thiết kế giao diện cho website bán hàng Spring Framework cơ bản nhất với đầy đủ các trang giỏ hàng, sản phẩm, hóa đơn…

Ở bài viết này, mình sẽ hướng dẫn các bạn thiết kế giao diện cho website dựa theo các mẫu giao diện có sẵn trên mạng, các bạn có thể chọn mẫu giao diện phù hợp chủ đề với website của mình sau đó chỉnh sửa lại. Hoặc bạn có thể xem thêm bài viết mình có chia sẻ một vài mẫu giao diện website bán hàng khá đẹp để bạn lựa chọn.

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ư trong video mình hướng dẫn để thiết kế giao diện cho website, bạn có thể xem mẫu giao diện tại đây và có thể chọn mẫu ưng ý nhất hoặc có thể chọn mẫu mà mình sẽ chọn làm hướng dẫn trong video này.

Bước 2: Sau khi tải giao diện, bạn sẽ copy các thư mục như CSS, JS, … vào trong Project.

kenhlaptrinh-spring-framework-bai-3-thiet-ke-giao-dien-nguoi-dung-cho-web (1)

Cấu trúc Project các bạn thiết kế như hình trên đây theo mô hình MVC

Bước 3: Tiếp theo, bạn sẽ tạo các giao diện cơ bản như trang chủ, trang danh mục, trang sản phẩm, trang menu, footer, giỏ hàng, chi tiết sản phẩm… có thể xem video mình hướng dẫn để tham khảo.

Khi thiết kế giao diện người dùng cho web sử dụng Spring Framework bạn nên chú ý một số điều sau:

– Trong Spring Framework nên tạo folder riêng để chứa toàn bộ CSS, JS và thường chúng ta sẽ đặt trong folder resources đặt ngang hàng thư mục WEB-INF.

kenhlaptrinh-spring-framework-bai-3-thiet-ke-giao-dien-nguoi-dung-cho-web (2)

Giao diện sau khi thiết kế các bạn sẽ được kết quả như hình trên

– Thường bạn sẽ bị lỗi CSS do cấu hình chưa đúng đường dẫn, bạn nên khai báo đến tập tin CSS hoặc JS tương tự như sau đây là có thể khắc phục được điều này trong Spring Framework:

+ Ở file web.xml bạn thêm đoạn mã sau để chỉ các file CSS, JS nằm trong folder resources:

+ Ở mỗi trang JSP bạn sẽ chỉ đường dẫn đến file CSS, JS tương tự như sau, mình sẽ sử dụng thêm thư viện JSTL:

Download source code ngay tại đây.

Download source link 1:

Kết nối dữ liệu bằng Hibernate Framework

Download source link 2:

Kết nối dữ liệu bằng Hibernate Framework

(Tác giả: Tùng Dương)

42 thoughts on “Bài 3: Thiết kế giao diện người dùng cho web

  1. Nguyễn Thanh Tâm

    - Edit

    Reply

    Xin anh sửa lại code
    <script src="”>
    thành
    <script src="” type=”text/javascript”>
    mình mất cả buổi để tìm lỗi sai. Để các bạn lần sau ko gặp lỗi này nữa.

  2. làm đúng theo admin mà sao k hiển thị ảnh lên dk vậy.
    m thấy co đoạn video admin cũng k hiện thị ảnh lên.mà cuối cùng làm xong cũng k check xem có hiện thị được ảnh lên vậy

        1. org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: Line 2 in XML document from ServletContext resource [/WEB-INF/dispatcher-servlet.xml] is invalid; nested exception is org.xml.sax.SAXParseException; lineNumber: 2; columnNumber: 6; The processing instruction target matching “[xX][mM][lL]” is not allowed._Lỗi hiển thị như vậy nè bạn

  3. The matching wildcard is strict, but no declaration can be found for element ‘mvc:resources’
    Này là lỗi gì vậy admin? mình fix mãi không được. mình đã thử cố gắng update bản spring webmvc lên 3.2 nhưng vẫn không được

      1. doan code nay

        minh da cogfig dispatcher-serlet theo nhu ad nhưng đều bị báo lỗi như trên. mình có search bug này thì thấy phần lớn bảo là do version spring, nhưng mình thấy trong clip của admin dùng 3.0 như của mình, nên đang thắc mắc

Bình luận

Loading...