Mô hình triển khai giao diện website Topwebviet

26/05/2019 | Mai Đức Thạch | 686 xem

TOPWEBVIET là Hệ thống Website Quản trị nội dung và giao diện; trong đó giao diện website được xây dựng dựa trên mô hình lựa chọn, lắp ghép từng phần của website dựa trên các Item, Modul Template để xây dựng giao diện phía người dùng.

Để có thể triển khai tốt việc xây dựng một giao diện Website trước hết đòi hỏi các bạn phải có kiến thức bản về HTML, CSS, Javascript trong việc xây dựng giao diện Website; đồng thời phải nắm được sơ đồ quy trình xây dựng giao diện Website của hệ thống TOPWEBVIET.

Mô hình hoạt động của một trang web bình thường:

PHÍA MÁY KHÁCH (CLIENT) Người dùng Yêu cầu 1 trang web Trình duyệt thực thi HTML, CSS, Javascript Hiển thị giao diện đồ họa ra ngoài màn hình trình duyệt PHÍA MÁY CHỦ (SERVER) Nhận Yêu cầu 1 trang web Thực hiện Kịch bản Phía máy chủ Xuất các tập tin HTML, CSS, JS trả về trình duyệt Yêu cầu (Request) Phản hồi (Response)

Mô hình xây dựng giao diện trang web của Topwebviet:

ITEM Trình bày một sản phẩm trong danh sách Sản phẩm (Mục Sản phẩm), hoặc một tin tức trong danh sách Tin tức (Mục Tin tức) (Quản lý ở Menu Giao diện -> Mục Sản phẩm – Tin tức) NỘI DUNG MODUL Trình bày mẫu hiển thị Modul với các trường định sẵn trong quản trị nội dung; để sử dụng cho một hoặc nhiều Modul. (Quản lý ở Menu Giao diện -> Giao diện Modul. Phần Nội dung hiển thị) NỘI DUNG BODY Trình bày nội dung chính của trang như Danh mục Sản phẩm (Tin tức), Danh sách Sản phẩm (Tin tức), Tìm kiếm, Thanh toán… (Quản lý ở Menu Giao diện -> Giao diện Template. Phần Thiết lập Hiển thị trang) MODUL NGƯỜI DÙNG Quản lý danh sách các Modul sẽ được sử dụng trong trang Template Giao diện; để trình bày từng phần của trang web. Trong đó Tiêu đề Modul là từ khóa được sử dụng trong trang trình bày Giao diện Template. (Quản lý ở Menu Giao diện -> Giao diện Modul. Phần Thông tin cấu hình) MODUL HỆ THỐNG - Modul {HEADER}: thường đặt trong phần tử head của nội dung Template để hiển thị cấu hình SEO và thư viện CSS và JS hệ thống. - Modul {BODY}: đặt tại vị trí hiển thị nội dung chính của nội dung Template. Nội dung mẫu hiển thị lấy ở phần Nội dung BODY. - Modul {FOOTER}: thường đặt ở vị trí cuối cùng trước thẻ body đóng của nội dung Template để hiển thị thư viện JS hệ thống của Website. TEMPLATE Lựa chọn những Modul người dùng, Modul hệ thống và Biến cài đặt Tùy chỉnh để trình bày giao diện Template của trang Web. (Quản lý ở Menu Giao diện -> Giao diện Template. Phần Thiết lập Giao diện Template) CHỌN TRANG ÁP DỤNG TEMPLATE Vào các trang quản trị nội dung danh mục, danh sách sản phẩm - tin tức và các trang hệ thống để lựa chọn Template hiển thị trang. Dùng cho phần List Sản phẩm (hoặc List Tin tức) của các Modul kiểu Sản phẩm (hoặc Tin tức) Dùng cho các phần: - Danh sách Sản phẩm (Tin tức), Sản phẩm (Tin tức) liên quan, Sản phẩm (Tin tức) cùng danh mục trong các kiểu trang như Danh mục Sản phẩm (Tin tức), Danh sách Sản phẩm (Tin tức), Tìm kiếm. - Một Modul người dùng sử dụng một Nội dung Modul. - Một Nội dung Modul có thể sử dụng cho nhiều Modul người dùng. Phần BODY tải vào Modul hệ thống {BODY}. Nội dung phần Body được lựa chọn trong quá trình quản lý Sản phẩm, Tin tức và các Trang hệ thống. Lựa chọn những Modul người dùng cần thiết để đặt vào vị trí thích hợp trong Thiết lập nội dung Template. Đặt những Modul hệ thống vào vị trí thích hợp trong Thiết lập nội dung Template. 1. Trong quá trình xây dựng giao diện trang, đi theo luồng ở trên.2. Trong quá trình chỉnh sửa giao diện trang, đi theo luồng ngược lại. QUI TRÌNH XÂY DỰNG VÀ CHỈNH SỬA GIAO DIỆN WEBSITE TOPWEBVIET