TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE
Tìm hiểu về các ngôn ngữ lập trình
HTML (Ngôn ngữ đánh dấu siêu văn bản) là công cụ chính để tạo ra các tài liệu có thể truy cập trên Internet Các tài liệu HTML được xây dựng từ các thẻ và phần tử của ngôn ngữ này, và thường được lưu trữ trên máy chủ dịch vụ web với phần mở rộng phù hợp.
Tập tin HTML có đuôi ".htm" hoặc ".html" được trình duyệt đọc và hiển thị dưới dạng trang web, trong đó các thẻ HTML sẽ bị ẩn, chỉ hiển thị nội dung văn bản và các đối tượng như hình ảnh và media Mỗi trình duyệt có thể hiển thị cùng một tập tin HTML với kết quả khác nhau Các trang HTML được truyền tải qua mạng internet bằng giao thức HTTP HTML không chỉ cho phép nhúng hình ảnh và âm thanh mà còn hỗ trợ các ngôn ngữ kịch bản như Javascript, giúp tạo hiệu ứng động cho trang web Để nâng cao hiệu quả trình bày, HTML có thể kết hợp với CSS HTML là một chuẩn ngôn ngữ internet được phát triển bởi tổ chức W3C.
World Wide Web Consortium (W3C) là tổ chức chịu trách nhiệm phát triển các tiêu chuẩn cho HTML, trước đây HTML được xuất bản theo chuẩn RFC HTML tương thích với mọi hệ điều hành và trình duyệt, nổi bật với tính dễ học và dễ viết, cho phép sử dụng các trình soạn thảo văn bản như Word hay Notepad để tạo file HTML bằng cách lưu với định dạng ".html" hoặc ".htm" Phiên bản mới nhất, HTML5, mang đến nhiều tính năng vượt trội, đặc biệt là hỗ trợ mạnh mẽ cho các phần tử multimedia mà không cần plugin Tập tin HTML bao gồm các đoạn văn bản được tạo ra từ các thẻ HTML, với HTML5 mạnh mẽ hơn về tốc độ, khả năng thích ứng, và hỗ trợ các API (giao diện lập trình ứng dụng) cùng DOM (các đối tượng thao tác văn bản).
CSS (Cascading Style Sheets) là ngôn ngữ dùng để định dạng và trình bày tài liệu viết bằng HTML, XHTML, XML, SVG và UML Nó xác định cách hiển thị các thẻ HTML thông qua việc quy định các thuộc tính như font chữ, kích thước và màu sắc.
CSS có cấu trúc đơn giản, sử dụng từ tiếng Anh để đặt tên thuộc tính, và có thể viết trực tiếp trong mã HTML hoặc tham chiếu từ file CSS riêng biệt với đuôi ".css" Việc sử dụng CSS giúp mã HTML trở nên ngắn gọn hơn, đồng thời cho phép sử dụng một file CSS cho nhiều website, tiết kiệm thời gian và công sức Đặc biệt, tính kế thừa của CSS giúp giảm số lượng dòng code mà vẫn đáp ứng yêu cầu thiết kế.
Các trình duyệt hiểu CSS theo cách riêng, dẫn đến sự không đồng nhất trong việc trình bày nội dung CSS cung cấp hàng trăm thuộc tính trình bày, cho phép người dùng sáng tạo và kết hợp các thuộc tính để đạt được hiệu quả tối ưu.
1.1.3 Ngôn ngữ lập trình PHP
PHP (Hypertext Preprocessor) là ngôn ngữ lập trình kịch bản mã nguồn mở, chủ yếu được sử dụng để phát triển ứng dụng cho máy chủ, đặc biệt là trong lĩnh vực web Với cú pháp tương tự như C và Java, PHP dễ học và cho phép xây dựng sản phẩm nhanh chóng Tập tin PHP có đuôi *.php, có thể chứa HTML, CSS, Javascript, Jquery và mã nguồn PHP Khi người dùng yêu cầu xem trang web, server chuyển đổi mã nguồn PHP thành HTML trước khi gửi đến trình duyệt, vì trình duyệt chỉ có thể đọc mã HTML.
Laravel là một framework PHP mã nguồn mở miễn phí, được phát triển bởi Taylor Otwell, nhằm hỗ trợ phát triển ứng dụng web theo kiến trúc model-view-controller (MVC) Laravel nổi bật với cú pháp dễ hiểu, hệ thống đóng gói modular, quản lý gói phụ thuộc hiệu quả, cùng nhiều phương thức truy cập cơ sở dữ liệu quan hệ và các tiện ích hỗ trợ bảo trì ứng dụng.
Vào tháng 3 năm 2015, Laravel đã giành vị trí quán quân trong cuộc bình chọn PHP framework phổ biến nhất, theo sau là Symfony2, Nette, CodeIgniter và Yii2 Trước đó, vào tháng 8 năm 2014, Laravel đã trở thành dự án PHP được theo dõi nhiều nhất trên Github.
Laravel được phát hành theo giấy phép MIT, với source code được lưu trữ tại Github.
Laravel là ứng dụng MVC hoàn chỉnh tương đối dễ tiếp cận phù hợp với người mới lập trình PHP.
Dưới đây là một số tính năng nổi bật của Laravel:
- Viết trên mô hình MVC PHP.
- Đầy đủ các lớp Database giúp hỗ trợ tốt cho các nền tảng khác nhau.
Dễ dàng sử dụng và đọc hiểu, các tính năng dựng sẵn mang đến cho người dùng nhiều nhóm công cụ hữu ích, giúp tăng tốc quá trình phát triển một cách đáng kể.
- Các tính năng bảo mật.
- Thư viện hỗ trợ lớn.
Trong dự án này, em sử dụng phiên bản Laravel 5.5 được ra mắt tháng 7/2017.
MVC (Model-View-Controller) là một mẫu kiến trúc phần mềm giúp phát triển giao diện người dùng trên máy tính Mô hình này chia ứng dụng thành ba thành phần chính: Model, View và Controller, nhằm tách biệt cách thức xử lý thông tin và phần giao diện người dùng.
Mẫu MVC, khi được áp dụng đúng cách, giúp các nhà phát triển phần mềm tách biệt rõ ràng giữa nguyên tắc nghiệp vụ và giao diện người dùng Điều này không chỉ tăng cường khả năng bảo trì phần mềm mà còn giảm thiểu sự liên quan giữa các nguyên tắc nghiệp vụ và giao diện, mang lại nhiều lợi ích cho quá trình phát triển.
Trong kiến trúc Model-View-Controller (MVC), mô hình (model) đại diện cho dữ liệu của ứng dụng phần mềm, trong khi khung nhìn (view) bao gồm các yếu tố của giao diện người dùng Bộ điều khiển (controller) đóng vai trò quản lý sự tương tác giữa dữ liệu và các quy tắc nghiệp vụ trong các thao tác liên quan đến mô hình.
Một số thư viện hỗ trợ
JavaScript là một ngôn ngữ lập trình dạng script phổ biến cho web phía client, tuân theo chuẩn ECMAScript Ngôn ngữ này có cú pháp dễ sử dụng và linh động, không liên quan đến Java, và được hỗ trợ bởi hầu hết các trình duyệt hiện nay Với JavaScript, ứng dụng web trở nên sinh động, trực quan và tương tác cao Đây là một ngôn ngữ lập trình kịch bản dựa trên đối tượng, phát triển từ các ý niệm nguyên mẫu, và được sử dụng rộng rãi cho các trang web cũng như để viết script cho các đối tượng trong ứng dụng JavaScript có cú pháp tương tự như ngôn ngữ lập trình C, và phần mở rộng thường dùng cho tập tin mã nguồn là “.js”.
AJAX (Asynchronous JavaScript and XML) là một tập hợp các công nghệ web cho phép phát triển các ứng dụng web động và tương tác Kỹ thuật này kết hợp nhiều ngôn ngữ lập trình, mang đến trải nghiệm người dùng mượt mà và hiệu quả hơn.
HTML (hoặc XHTML ) với CSS trong việc hiển thị thông tin.
Mô hình DOM (Document Object Model) được triển khai qua JavaScript, cho phép hiển thị thông tin động và tương tác với nội dung hiển thị Đối tượng XMLHttpRequest hỗ trợ việc trao đổi dữ liệu không đồng bộ với máy chủ web.
XML là định dạng phổ biến cho việc truyền dữ liệu, nhưng cũng có thể sử dụng nhiều định dạng khác như HTML, văn bản thuần, JSON và EBML.
Bootstrap là một framework tích hợp HTML, CSS và JavaScript, giúp tiết kiệm thời gian và công sức trong việc phát triển giao diện web Thay vì tạo riêng biệt cho giao diện Desktop và Mobile, Bootstrap hỗ trợ thiết kế responsive, cho phép website hiển thị tương thích với mọi kích thước màn hình Nhờ vào tính năng này, bạn có thể dễ dàng tùy chỉnh giao diện trên nhiều loại thiết bị khác nhau, mang lại trải nghiệm người dùng tốt hơn.
Bootstrap giúp tiết kiệm thời gian cho người thiết kế giao diện website nhờ vào các thư viện mã sẵn có Điều này cho phép bạn áp dụng nhanh chóng vào dự án mà không cần phải viết mã từ đầu, giúp tối ưu hóa quy trình thiết kế.
Bootstrap cho phép tùy biến cao, giúp bạn xây dựng nền tảng giao diện riêng Hệ thống Grid System mặc định của Bootstrap bao gồm 12 cột với độ rộng 940px, cho phép bạn dễ dàng thay đổi, nâng cấp và phát triển giao diện theo nhu cầu của mình.
Thiết kế web đáp ứng: Sử dụng Bootstrap, việc phát triển giao diện website tương thích với nhiều thiết bị trở nên đơn giản hơn bao giờ hết Đây là xu hướng thiết kế giao diện website đang được ưa chuộng trên toàn cầu.
JQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm
2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơn, làm nhiều hơn.
jQuery giúp đơn giản hóa việc xử lý HTML, quản lý sự kiện, tạo hiệu ứng động và thực hiện các tương tác Ajax Nhờ vào jQuery, khái niệm Phát triển Web Nhanh đã trở nên quen thuộc hơn với các lập trình viên.
jQuery là một thư viện JavaScript giúp đơn giản hóa nhiều tác vụ với lượng mã code tối thiểu Dưới đây là một số tính năng quan trọng mà jQuery hỗ trợ.
Thao tác DOM với jQuery cho phép người dùng dễ dàng chọn lựa và duyệt các phần tử DOM tương tự như cách sử dụng CSS Ngoài ra, jQuery cũng hỗ trợ chỉnh sửa nội dung của các phần tử này thông qua một công cụ chọn lựa mã nguồn mở được gọi là Sizzle.
jQuery cải thiện khả năng tương tác với người dùng bằng cách xử lý nhiều loại sự kiện khác nhau, giúp giữ cho mã HTML gọn gàng và dễ quản lý mà không cần phải sử dụng các Event Handler phức tạp.
- Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng và phản hồi tốt bởi sử dụng công nghệ AJAX.
- Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt mà bạn có thể sử dụng trong các Website của mình.
- Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB (gzipped).
jQuery được hỗ trợ rộng rãi bởi hầu hết các trình duyệt hiện đại, bao gồm Internet Explorer 6.0 trở lên, Firefox 2.0 trở lên, Safari 3.0 trở lên, Chrome và Opera 9.0 trở lên.
- Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và cú pháp XPath cơ bản.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE
Khảo sát và đặc tả yêu cầu
2.1.1 Phần quản lý trong admin
- Admin quản lý toàn bộ hoạt động của website.
- Quản lý giao dịch thanh toán, xử lý các đơn đặt sản phẩm.
- Quản lý hóa đơn: khi mua hàng gồm tên khách hàng, tên sản phẩm, giá, chi tiết đặt,
- Khi thêm sản phẩm người quản lý sẽ cung cấp thêm các thông tin về sản phẩm , tư vấn sản phẩm đó cho khách hàng.
Hệ thống thống kê tổng số đơn đặt hàng và số lượng liên hệ hàng ngày, hàng tháng, giúp người quản trị dễ dàng theo dõi và xử lý các đơn hàng cũng như các yêu cầu từ người dùng một cách hiệu quả.
- Tư vấn trả lời các liên hệ của khách hàng.
- Website không nên quá phức tạp.
- Dung lượng file không quá lớn.
- Thanh menu thật đơn giản.
- Phải có thông tin liên hệ.
- Font chữ đơn giản, dễ nhìn, màu sắc hài hòa.
- An toàn và bảo mật dữ liệu.
- Kiểm tra website có tương thích với các trình duyệt phổ biến hay không.
- Hiển thị được các sản phẩm , thông tin sản phẩm và các mức giá phù hợp.
- Cho phép khách hàng xem thông tin chi tiết, tìm kiếm các sản phẩm mà khách hàng quan tâm.
- Cho phép khách hàng đặt và mua sản phẩm yêu cầu cần đăng ký tài khoản người dùng.
- Cho phép khách hàng đăng ký tài khoản.
Các yêu cầu phi chức năng
1 Giao diện Giao diện hệ thống phải dễ sử dụng, trực quan, thân thiện với người dùng.
2 Tốc độ xử lý Hệ thống phải xử lý nhanh chóng và chính xác.
3 Bảo mật Tính bảo mật và độ an toàn cao
4 Tương thích Tương thích với đa số các trình duyệt web hiện tại.
Bảng 1 - Các yêu cầu phi chức năng của ứng dụng
Phân tích thiết kế hệ thống
2.3.1 Các chức năng của hệ thống
Hệ thống quản trị trang web:
- Quản lý các đơn đặt.
- Quản lý sản phẩm: Cập nhật thông tin về sản phẩm, thêm sửa xóa sản phẩm.
- Quản lý lưu trữ thông tin khách hàng.
- Quản lý tin tức, danh mục tin tức, ảnh của bài viết, silde của trang web.
- Quản lý danh sách người mua.
Hệ thống giới thiệu sản phẩm:
- Hiển thị thông tin sản phẩm,tên, giá, giảm giá, thông tin, hình ảnh, bài viết liên quan đến sản phẩm.
- Hiển thị danh sách các tin tức, bài viết.
- Cho phép đăng ký, đăng nhập tài khoản.
- Cho phép người dung thay đổi thông tin tài khoản.
- Người dùng xem hàng, đặt hàng, xem hóa đơn, lưu trữ các đơn hàng.
2.3.2 Các tác nhân của hệ thống
Dựa vào mô tả bài toán, ta có thể xác định được các tác nhân chính của hệ thống như sau:
Tác nhân Admin là người đảm nhiệm các chức năng quản trị hệ thống, bao gồm quản lý tài khoản, khách hàng, giao diện, cấu hình website, sản phẩm, hóa đơn và thống kê Để thực hiện các chức năng này, người dùng cần phải đăng nhập vào hệ thống.
Tác nhân khách hàng có khả năng thực hiện nhiều chức năng quan trọng, bao gồm đăng ký và đăng nhập tài khoản, tìm kiếm sản phẩm, xem tin tức, đặt hàng, cũng như kiểm tra và in thông tin hóa đơn.
Để đăng nhập vào hệ thống, người dùng cần nhập username và password Nếu thông tin đăng nhập hợp lệ và trùng khớp với dữ liệu đã lưu, hệ thống sẽ cho phép truy cập để thực hiện các chức năng cần thiết.
2 Quản trị hệ thống Quản lý toàn hộ hệ thống, có quyền thay đổi các thông tin sản phẩm, bài viết, trong hệ thống.
3 Quản lý tài khoản Quản lý thông tin tài khoản đăng nhập của người dùng khi muốn đăng nhập vào hệ thống.
4 Quản lý sản phẩm Quản lý, lưu trữ thông tin về thông tin sản phẩm như mã sản phẩm, tên sản phẩm…
5 Quản lý đơn đặt Quản lý thông tin về các đơn hàng: tên khách hàng, địa chỉ, số điện thoại, hình thức thanh toán, tổng tiền…
6 Quản lý chi tiết đơn đặt
Quản lý thông tin về đặt hàng gồm: mã chi tiết đơn đặt, mã sản phẩm, tên sản phẩm, , số lượng, giá, thành tiền.
7 Quản lý hóa đơn Quản lý chi tiết hóa đơn của khách hàng có những thông tin như: mã giao dịch, mã hóa đơn…
8 Quản lý thống kê Quản lý giao dịch của khách hàng Xuất hóa đơn, danh sách thống kê đơn hàng.
Bảng 2 - Bảng chức năng của Admin
1 Đăng ký tài khoản Người dùng có thể thực hiện thao tác đăng ký trở thành thành viên để thuận tiện cho việc đặt đặt các sản phẩm.
2 Quản lý tài khoản Khách hàng có thể thay đổi thông tin của tài khoản, thay đổi mật khẩu, địa chỉ, thông tin liên lạc.
Để đăng nhập vào hệ thống, người dùng cần nhập username và password Hệ thống sẽ kiểm tra tính hợp lệ của thông tin này với dữ liệu đã lưu, và nếu khớp, người dùng sẽ được phép truy cập.
Tìm kiếm, nhanh về thông tin sản phẩm, dựa vào các tiêu chí tìm kiếm của website như tìm theo tên của sản phẩm…
Khách hàng có thể thực hiện chức năng này để đặt sản phẩm, nhằm giảm thiểu thời gian và chi phí cho khách hàng.
6 Xem chi tiết sản phẩm
Sau khi đăng nhập và chọn sản phẩm, khách hàng sẽ được chuyển đến trang thông tin sản phẩm, nơi hiển thị tên và giá của sản phẩm đã chọn.
7 Xác nhận đặt sản phẩm
Sau khi chọn mua sản phẩm, người dùng tiến hành gửi thông tin, chọn hình thức thanh toán, hình thức vận chuyển để tiến hành đặt hàng.
Bảng 3 - Bảng chức năng người dùng
Biểu đồ use case
2.4.1 Biểu đồ Use – case tổng quát.
Hình 1 - Biểu đồ Use case tổng quát
Hình 2 - Biểu đồ Use case đăng nhập
Mô tả: Use case cho admin đăng nhập vào hệ thống. Điều kiện trước: admin đăng nhập vào hệ thống.
Chọn chức năng đăng nhập.
Giao diện đăng nhập hiển thị.
- Nhập mã admin, mật khẩu vào giao diện đăng nhập.
Hệ thống kiểm tra mã admin và mật khẩu của quản trị viên Nếu thông tin đăng nhập không chính xác, người dùng sẽ được chuyển đến dòng sự kiện rẽ nhánh A1 Ngược lại, nếu thông tin đúng, hệ thống sẽ dẫn đến trang quản trị.
Dòng sự kiện rẽ nhánh:
- Dòng rẽ nhánh A1: admin đăng nhập không thành công.
- Hệ thống thông báo quá trình đăng nhập không thành công do sai mã admin hoặc mật khẩu.
- Chọn nhập lại hệ thống yêu cầu nhập lại mã admin, mật khẩu.
Kết quả: admin đăng nhập thành công và có thể sử dụng các chức năng quản lý tương ứng trong trang quản trị.
2.4.3 Use case quản lý sản phẩm
Hình 3 - Biểu đồ Use case quản lý sản phẩm.
Mô tả: use case cho phép xem, thêm, sửa, xóa, sản phẩm trong hệ thống. Điều kiện trước: admin đã đăng nhập vào hệ thống.
- Người sử dụng chọn kiểu tác động: thêm, sửa, xóa, sản phẩm trong hệ thống.
Để thêm sản phẩm, người dùng cần chọn tùy chọn thêm sản phẩm, sau đó hệ thống sẽ hiển thị giao diện nhập thông tin sản phẩm cùng danh sách sản phẩm hiện có Người sử dụng sẽ nhập thông tin cần thiết, và nếu thông tin nhập vào chính xác, hệ thống sẽ thông báo thành công Trong trường hợp thông tin sai, hệ thống sẽ thực hiện quy trình rẽ nhánh A1 và lưu thông tin vào danh sách sản phẩm.
Để sửa thông tin sản phẩm, người dùng cần truy cập vào hệ thống hiển thị danh sách sản phẩm, chọn sản phẩm cần chỉnh sửa và nhập các thông tin cần thay đổi Nếu việc thay đổi thông tin thành công, hệ thống sẽ hiển thị thông báo xác nhận Trong trường hợp thông tin nhập sai, hệ thống sẽ thực hiện quy trình rẽ nhánh A1 và lưu lại thông tin danh sách sản phẩm.
Để xóa thông tin sản phẩm, người dùng cần truy cập vào hệ thống hiển thị danh sách sản phẩm và chọn sản phẩm muốn xóa Nếu việc thay đổi thông tin thành công, hệ thống sẽ hiển thị thông báo xác nhận Ngược lại, nếu có sai sót, hệ thống sẽ thực hiện quy trình rẽ nhánh A1 và lưu trữ thông tin danh sách sản phẩm.
Kết quả: các thông tin về sản phẩm được cập nhật trong cơ sở dữ
2.4.4 Use case quản lý đơn đặt
Hình 4 - Biểu đồ Use case quản lý đơn đặt
Chức năng duyệt đơn đặt hàng cho phép người dùng xem chi tiết đơn đặt, xóa đơn đặt, và xác nhận rằng nhân viên đã liên hệ với khách hàng Hệ thống cũng cung cấp báo cáo về các đơn đặt đang chờ xử lý và những đơn đã được hoàn tất Lưu ý rằng điều kiện tiên quyết là admin phải đăng nhập vào hệ thống.
Người dùng có thể thực hiện nhiều tác động khác nhau như duyệt đơn đặt hàng, xem chi tiết đơn hàng, xóa đơn đặt hàng, tìm kiếm đơn đặt hàng, và báo cáo tình trạng đơn hàng đang chờ hoặc đã được xử lý.
- Duyệt đơn đặt sản phẩm: chọn chức năng duyệt đơn đặt.
- Xem chi tiết đơn đặt sản phẩm: chọn chức năng xem chi tiết đơn đặt sản phẩm.
Để xóa sản phẩm, người dùng cần truy cập vào hệ thống hiển thị danh sách đơn đặt sản phẩm và chọn đơn đặt cần xóa Nếu việc thay đổi thông tin thành công, hệ thống sẽ thông báo kết quả Ngược lại, nếu có sai sót, hệ thống sẽ thực hiện dòng rẽ nhánh A1 và lưu lại thông tin danh sách đơn đặt sản phẩm.
- Tìm kiếm đơn đặt sản phẩm: nhập thông tin tìm kiếm vào ô tìm kiếm trong danh sách, hệ thống sẽ hiển thị danh sách tìm kiếm được.
- Báo cáo đơn đặt sản phẩm đang chờ, đã được xử lý:
Dòng sự kiện rẽ nhánh A1 cung cấp hệ thống thông báo khi có dữ liệu nhập không hợp lệ, yêu cầu người dùng nhập lại thông tin chính xác Người dùng có thể quay lại để thực hiện lại các bước trong dòng sự kiện chính.
Kết quả: các thông tin về đơn đặt sản phẩm được cập nhật trong cơ sở dữ liệu.
Biểu đồ tuần tự
2.5.1 Biểu đồ tuần tự quản lý sản phẩm
Hình 5 - Biểu đồ tuần tự quản lý danh mục sản phẩm
2.5.2 Biểu đồ tuần tự quản lý đơn đặt hàng.
Hình 6 - Biểu đồ tuần tự quản lý đơn hàng
Biểu đồ, danh sách các đối tượng
Hình 7 –Biểu đồ lớp 2.6.2 Danh sách các đối tượng
STT Tên lớp/quan hệ Ý nghĩa/mô tả
1 Admin Mô tả các thuộc tính và các phương thức liên quan tới nghiệp vụ quản lý Admin.
2 User Mô tả các thuộc tính và các phương thức liên quan tới nghiệp vụ quản lý danh sách thành viên.
3 Đonhang Mô tả các thuộc tính và các phương thức liên quan tới nghiệp vụ quản lý danh sách đơn đặt sản phẩm.
5 Sanpham Mô tả các thuộc tính và các phương thức liên quan tới quản lí sản phẩm.
Bảng 4 - Danh sách các đối tượng
THIẾT KẾ VÀ XÂY DỰNG WEBSITE
Giao diện hiển thị
Hình 8 - Giao diện banner quảng cáo tại trang chủ
Hình 9 - Giao diện quảng cáo tại trang chủ
Hình 10 - Giao diện trang sản phẩm
Hình 11 - Giao diện các sản phẩm.
3.1.3 Giao diện chi tiết sản phẩm
Hình 12 - Giao diện chi tiết sản phẩm.
Hình 13 - Giao diện thanh toán sản phẩm.
Hình 14 – Giao diện giỏ hàng.
Hình 15 Giao diện đơn hàng.
3.1.6 Giao diện đăng nhập, đăng kí tài khoản.
Hình 16 Giao diện đăng nhập
Hình 17 Giao diện đăng ký tài khoản
Giao diện quản trị
Hình 18 Giao diện trang admin 3.2.2 Giao diện quản lí sản phẩm.
Hình 19 Giao diện quản lí sản phẩm.
3.2.3 Giao diện quản lí đơn đặt hàng.
Hình 20 Giao diện quản lí đơn đặt hàng 3.2.4 Giao diện quản lí thêm sản phẩm mới.
Hình 21 Giao diện quản lí thêm sản phẩm mới.
Hình 22 Giao diện quản lí thêm sản phẩm mới 2.
3.2.5 Giao diện quản lí User
Hình 23.Giao diện quản lí tất cả người dùng.
3.2.6 Giao diện quản lí admin.
Hình 24.Giao diện quản lí tài khoản admin.
3.2.7 Giao diện thêm tài khoản admin.
Hình 25 Giao diên thêm tài khoản admin.
3.2.8 Giao diện đăng nhập admin.
Hình 26 Giao diện đăng nhập admin.
