(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính
CÔNG NGHỆ SỬ DỤNG
Html/Css
HTML là từ viết tắt của HyperText Markup Language, nghĩa là ngôn ngữ đánh dấu siêu văn bản
Hypertext hay siêu văn bản là một đoạn văn bản bất kỳ có chứa liên kết (link) dẫn đến các nguồn thông tin khác như đoạn văn bản khác, địa chỉ website, hình ảnh hay âm thanh, giúp người dùng dễ dàng truy cập và mở rộng kiến thức một cách nhanh chóng và thuận tiện.
HTML được ví như là bộ xương của một giao diện website, dù nó là dành cho
WordPress là nền tảng phổ biến cho mọi website hiện nay, đóng vai trò như “bộ xương” quan trọng giúp xác định bố cục website một cách rõ ràng Hệ thống này sử dụng các thẻ (tag) để đánh dấu các phần khác nhau của trang web, giúp dễ dàng tổ chức và quản lý nội dung Nhờ vào việc gắn thẻ các đối tượng, WordPress có thể tự động xác định vai trò và chức năng của từng phần trong website, góp phần tối ưu hóa trải nghiệm người dùng và nâng cao hiệu quả quản trị nội dung.
HTML là ngôn ngữ mã nguồn mở, tương thích với tất cả các hệ điều hành và trình duyệt web, giúp người dùng dễ dàng truy cập và hiển thị nội dung Với khả năng học hỏi và viết dễ dàng, HTML cho phép soạn thảo nhanh chóng bằng các trình soạn thảo đơn giản như Word hoặc Notepad Chỉ cần lưu file với định dạng “.html” hoặc “.htm”, bạn đã có thể tạo ra trang web dễ dàng mà không cần kiến thức phức tạp.
HTML5 là phiên bản mới nhất của HTML, nổi bật với nhiều tính năng vượt trội so với các phiên bản cũ, đặc biệt là khả năng hỗ trợ mạnh mẽ các phần tử multimedia mà không cần plugin Một tập tin HTML bao gồm các đoạn văn bản được tạo thành từ các thẻ HTML Ngoài ra, HTML5 còn được đánh giá cao về tốc độ và khả năng thích ứng, đồng thời mở rộng khả năng hỗ trợ API và DOM giúp nâng cao hiệu quả thao tác và phát triển ứng dụng web phức tạp.
CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ giúp trình duyệt hiểu và áp dụng các thiết lập định dạng cùng bố cục cho trang web Nhờ CSS, bạn có thể dễ dàng kiểm soát giao diện của nhiều thành phần HTML chỉ với một vùng chọn duy nhất, giúp tối ưu hóa quá trình thiết kế và chỉnh sửa Việc tách biệt cấu trúc HTML và định dạng CSS không những giảm thời gian xây dựng trang web mà còn nâng cao khả năng bảo trì và chỉnh sửa sau này.
CSS có cấu trúc đơn giản và sử dụng các từ tiếng Anh để đặt tên cho các thuộc tính, giúp dễ hiểu và dễ nhớ CSS có thể được viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ một tệp riêng biệt để quản lý hiệu quả hơn Thông thường, CSS được lưu trong các tệp có định dạng ".css", giúp giảm độ dài của mã HTML và tăng tính tổ chức cho trang web Việc sử dụng một tệp CSS chung cho nhiều website giúp tiết kiệm thời gian và công sức trong quá trình phát triển và bảo trì trang web.
Tính kế thừa của CSS giúp giảm số lượng dòng mã cần viết mà vẫn đảm bảo đạt yêu cầu về thiết kế Tuy nhiên, các trình duyệt hiểu và xử lý CSS theo cách riêng của chúng, dẫn đến việc trình bày nội dung không đồng nhất trên các trình duyệt khác nhau CSS cung cấp hàng trăm thuộc tính trình bày đa dạng, cho phép sự sáng tạo trong việc kết hợp các thuộc tính để mang lại hiệu quả tối ưu cho thiết kế web.
+ Mô hình lập trình đơn giản
+ Hỗ trợ ADO (Active Data Object), FSO (File System Object)
+ ASP cùn hỗ trợ nhiều ngôn ngữ như: VBscrip, Javascrip
+ Code ASP lẫn với html nên khó khan trong việc tìm lỗi
+ Không hỗ trợ cơ chế cache
+ Tốc độ xử lý còn chậm.
Laravel PHP framework
PHP là viết tắt của từ Hypertext Preprocessor Ngôn ngữ này được phát triển từ năm
Từ năm 1994 đến nay, ngôn ngữ này đã trở thành công cụ phổ biến trong phát triển ứng dụng phần mềm qua lập trình web Đặc điểm nổi bật của ngôn ngữ này là mã nguồn mở, dễ dàng nhúng vào HTML và tích hợp linh hoạt vào các nền tảng web, giúp nhà phát triển xây dựng các ứng dụng hiệu quả và nhanh chóng hơn.
Laravel là một PHP framework, có mã nguồn mở và miễn phí, được xây dựng nhằm hỗ trợ phát triển các phần mềm, ứng dụng, theo kiến trúc MVC
Laravel là framework PHP giúp quá trình phát triển ứng dụng web trở nên dễ dàng và hiệu quả hơn bằng cách cung cấp cấu trúc rõ ràng để xây dựng dự án Laravel giúp tăng tốc độ phát triển, tiết kiệm thời gian, nâng cao tính ổn định cho ứng dụng và giảm thiểu công đoạn viết lại mã nguồn cho lập trình viên Ưu điểm nổi bật của Laravel Framework bao gồm khả năng tối ưu hóa quy trình lập trình và cải thiện hiệu quả làm việc.
- Nhiều nguồn tài liệu tham khảo
- Tốc độ xử lý nhanh
Nhược điểm của Laravel Framework:
Laravel là một framework PHP mạnh mẽ, tuy nhiên vẫn kế thừa nhiều nhược điểm cố hữu của PHP như hạn chế về cấu trúc ngữ pháp và phù hợp hơn cho các hệ thống có quy mô nhỏ đến trung bình Do đó, việc lựa chọn Laravel cần cân nhắc kỹ lưỡng dựa trên yêu cầu dự án và khả năng mở rộng của ứng dụng.
Mô hình MVC
MVC (Model-View-Controller) là mô hình kiến trúc phần mềm phổ biến trong phát triển ứng dụng, giúp chia sẻ và quản lý tốt hơn các thành phần của phần mềm Mô hình này phân chia ứng dụng thành ba phần chính là Model, View và Controller, tạo sự phân tách rõ ràng giữa xử lý dữ liệu phía server và giao diện người dùng Nhờ đó, MVC giúp tối ưu hóa khả năng bảo trì, mở rộng và nâng cao hiệu suất của phần mềm.
Model (M) là bộ phận chịu trách nhiệm lưu trữ toàn bộ dữ liệu của ứng dụng, đóng vai trò quan trọng trong kiến trúc phần mềm Nó hoạt động như một cầu nối giữa hai thành phần chính là View và Controller, giúp đảm bảo quá trình truyền tải dữ liệu diễn ra trôi chảy Thông thường, Model được thể hiện dưới dạng cơ sở dữ liệu hoặc đơn giản hơn bằng một file dữ liệu, góp phần duy trì tính nhất quán và an toàn cho dữ liệu của ứng dụng.
View (V) là giao diện dành cho người dùng, có nhiệm vụ ghi nhận và truyền tiếp các hành động của khách hàng trên trang web đến controller Đồng thời, View nhận dữ liệu từ controller gửi về để hiển thị thông tin chính xác và trực quan cho người dùng Đây là phần giao diện quan trọng trong kiến trúc MVC, giúp kết nối người dùng với hệ thống một cách hiệu quả và thân thiện.
Trong hệ thống MVC, Controller (C) đóng vai trò chính trong việc xử lý các yêu cầu từ người dùng thông qua giao diện Nó nhận các yêu cầu từ view, sau đó xử lý và xác định dữ liệu phù hợp để gửi lại cho người dùng Controller hạn chế việc xử lý logic nghiệp vụ phức tạp, giúp giữ mã nguồn rõ ràng, dễ bảo trì Ngoài ra, Controller còn phối hợp với các thành phần khác như Model để truy xuất dữ liệu, đảm bảo quá trình trao đổi thông tin diễn ra nhanh chóng và chính xác Điều này giúp nâng cao trải nghiệm người dùng và tối ưu hiệu suất của ứng dụng.
Controller còn có chức năng kết nối với model.
Một số package của Laravel được sử dụng trong đồ án
- barryvdh/laravel-debugbar: Hỗ trợ trong việc debug khi code, được tích hợp thẳng vào giao diện trang web khi chạy
- laravel/socialite: Hỗ trợ việc tích hợp các chức năng đăng nhập thông qua các tài khoản mạng xã hội như Facebook hoặc Google
- nwidart/laravel-module: Hỗ trợ tạo riên từng module cho source code giúp việc quản lý các chức năng của từng actor dể dàng hơn
- bumbummen99/shoppingcart: Hỗ trợ việc tạo ra chức năng giỏ hàng.
Cơ sở dữ liệu MySQL
MySQL là hệ quản trị dữ liệu miễn phí, tích hợp cùng Apache và PHP, phù hợp cho các website nhờ khả năng truy xuất dữ liệu đơn giản và hiệu quả Với nguồn mở, MySQL nhận được sự hỗ trợ mạnh mẽ từ cộng đồng lập trình viên yêu thích mã nguồn mở Mặc dù có cú pháp giống SQL, MySQL chủ yếu đáp ứng các truy vấn cơ bản thay vì các câu lệnh phức tạp, nên phù hợp để xử lý các tác vụ dữ liệu trong vận hành website và giải quyết hầu hết các bài toán trong PHP.
MySQL là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, phù hợp với nhiều hệ điều hành khác nhau Nó cung cấp một hệ thống lớn các hàm tiện ích mạnh mẽ, giúp tối ưu hóa quá trình quản lý dữ liệu Nhờ tính linh hoạt và hiệu suất cao, MySQL ngày càng trở thành lựa chọn phổ biến cho các dự án từ nhỏ đến lớn.
Các ưu điểm của MySQL có thể kể đến như:
• MySQL miễn phí vì là mã nguồn mở
• MySQL sử dụng một Form chuẩn của ngôn ngữ dữ liệu nổi tiếng là SQL
• MySQL làm việc được trên nhiều hệ điều hành và với nhiều ngôn ngữ như PHP, PERL, C, C++, Java, …
• MySQL hoạt động nhanh với các tập dữ liệu lớn
MySQL hỗ trợ quản lý các cơ sở dữ liệu lớn với khả năng lưu trữ lên tới 50 triệu hàng hoặc hơn trong một bảng Kích thước tệp mặc định giới hạn cho một bảng là 4 GB, nhưng có thể mở rộng tùy thuộc vào khả năng của hệ điều hành để đạt tới giới hạn lý thuyết lên đến 8 TB.
MySQL là phần mềm mã nguồn mở với giấy phép GPL, cho phép lập trình viên tùy chỉnh và sửa đổi để phù hợp với môi trường làm việc của mình Khả năng điều chỉnh linh hoạt này giúp các nhà phát triển tối ưu hóa hiệu suất và đáp ứng chính xác các yêu cầu đặc thù của dự án Nhờ vào giấy phép mở, MySQL cung cấp nền tảng linh hoạt và dễ tùy biến, phù hợp với nhiều nhu cầu khác nhau trong lập trình và phát triển phần mềm.
KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
Phong Vũ
Địa chỉ trang chủ: phongvu.vn
Hình 3.3 Giao diện trang chủ Phongvu Điểm mạnh:
- Giao diện trực quan, khi nhìn vào có thể thấy ngay menu danh mục 1 bên, có cái nhìn tổng quan về các sản phẩm đang được bán
- Số điện thoại tư vấn và chăm sóc khách hàng đều được đặt trên thanh navbar
- Có chức năng xây dựng cấu hình PC dựa theo các sản phẩm trong cửa hàng
- Các banner được thiết kế gọn gàng để tránh rối mắt
- Bộ lọc sản phẩm được thiết kế tốt khi dựa trên nhiều tiêu chí để lọc sản phầm
- Có một chuyên mục riêng để chứa các thông tin khuyến mãi của shop
- Có sắp xếp một danh sách riêng các thương hiệu nổi bật Điểm yếu:
- Bán quá nhiều thứ khác không chỉ chuyên về các sản phẩm về máy tính.
Cấu trúc ứng dụng
Dựa trên các khảo sát từ các trang web cùng lĩnh vực, nhóm thực hiện đồ án sẽ xây dựng một website với cấu trúc tối ưu để đáp ứng nhu cầu người dùng, đảm bảo tính thân thiện và dễ sử dụng Website sẽ có các phần chính như trang chủ, danh mục sản phẩm hoặc dịch vụ, và các trang thông tin hỗ trợ, nhằm nâng cao trải nghiệm người dùng và thúc đẩy hiệu quả kinh doanh Việc xây dựng cấu trúc rõ ràng giúp tối ưu hóa khả năng tìm kiếm trên các công cụ tìm kiếm (SEO), tăng khả năng tiếp cận khách hàng mục tiêu.
- Bốn nhóm người dùng chính: o Guest o Khách hàng có tài khoản o Nhân viên o Chủ cửa hàng
- Chức năng của từng bộ phận:
Bảng 3.1 Cấu trúc các chức năng của các nhóm người dùng
Guest Tìm kiếm thông tin
Xem danh sách sản phẩm Xem thông tin chi tiết sản phẩm Các chức năng của giỏ hàng Đăng ký
Khách hàng có tài khoản Tìm kiếm thông tin
Khám phá danh sách sản phẩm đa dạng và xem thông tin chi tiết từng sản phẩm để lựa chọn phù hợp Quản lý giỏ hàng dễ dàng với các chức năng như đăng ký, đăng nhập, đăng xuất và đặt mua hàng nhanh chóng Theo dõi các đơn hàng đã đặt qua danh sách đơn hàng và xem thông tin chi tiết của từng đơn hàng để thuận tiện trong việc quản lý mua sắm Bạn còn có thể đánh giá sản phẩm sau khi sử dụng để chia sẻ trải nghiệm của mình Ngoài ra, việc chỉnh sửa thông tin cá nhân giúp duy trì dữ liệu chính xác và cập nhật, nâng cao trải nghiệm mua sắm trực tuyến của bạn.
Nhân viên Đăng nhập Đăng xuất Quản lý banner quảng cáo Quản lý tài khoản khách hàng Quản lý đơn hàng
Quản lý sản phẩm Quản lý bài viết Quản lý danh mục
Xem thống kê bán hàng
Chủ cửa hàng Đăng nhập Đăng xuất Quản lý banner quảng cáo Quản lý tài khoản khách hàng Quản lý đơn hàng
Quản lý sản phẩm Quản lý bài viết Quản lý danh mục Xem thống kê bán hàng Quản lý nhân viên
Qui định và yêu cầu thiết kế
Khách hàng phải được cung cấp đầy đủ các dụng cụ để có thể có được trải nghiệm mua sắm tốt nhất và không bị gò bó
Admin phải quản lý được tất cả các thành phần chính trên website mà không phải phụ thuộc quá nhiều vào lập trình viên
- Phân quyền ở cả back-end và front-end
- Hiển thị đầy đủ thông tin, các chức năng bố trí phù hợp
- Có các danh mục và search engine để dễ dàng tìm kiếm
- Có chức năng giỏ hàng
- Có chức năng đăng nhập bằng google +
- Thể hiện các thông tin thiết yếu của sản phẩm khi xuất hiện
- Hệ thống gồm các actor chính: Admin, khách hàng, chủ cửa hàng
- Nhân viên là những người trực tiếp quản lý website, có quyền thêm, sửa và xóa các thông tin trong database
- Người chủ cửa hàng là người có quyền trực tiếp thêm hoặc xóa tài khoản nhân viên.
Đánh giá và lựa chọn công nghệ
MySQL là giải pháp lưu trữ dữ liệu lý tưởng nhờ khả năng hoạt động ổn định, dễ sử dụng và khả năng tương thích với nhiều hệ điều hành khác nhau Hệ thống này cung cấp các hàm tiện ích đa dạng, giúp quản lý dữ liệu hiệu quả và thuận tiện hơn Ngoài ra, MySQL còn nổi bật với tính năng bảo mật cao và khả năng mở rộng mạnh mẽ để phù hợp với các nhu cầu phát triển của doanh nghiệp.
- Ngôn ngữ lập trình: Do cần phải phát triển một website trong thời gian có hạn là
Sau 15 tuần, nhóm quyết định chọn PHP Laravel framework nhờ vào những ưu điểm vượt trội như dễ sử dụng, khả năng bảo mật cao và tốc độ phát triển nhanh chóng, nhằm tối ưu hóa quá trình xây dựng sản phẩm.
- Công cụ lập trình: Visual Studio Code
- Công cụ thiết lập local host: Xampp
- Công cụ quản lý package: Composer
- Công cụ quản lý phiên bản code: Github
THIẾT KẾ PHẦN MỀM
Lược đồ usecase và mô tả use case
ID Tên Usecase Actor sử dụng
1 Tìm kiếm thông tin Guest, Khách hàng có tài khoản
2 Xem danh sách sản phẩm Guest, Khách hàng có tài khoản
3 Xem thông tin chi tiết sản phẩm Guest, Khách hàng có tài khoản
4 Các chức năng của giỏ hàng Guest, Khách hàng có tài khoản
5 Đăng ký Guest, Khách hàng có tài khoản
6 Đăng nhập Khách hàng có tài khoản, Nhân viên, Chủ cửa hàng
7 Đăng xuất Khách hàng có tài khoản, Nhân viên, Chủ cửa hàng
8 Đặt mua hàng Khách hàng có tài khoản, Nhân viên, Chủ cửa hàng
9 Xem danh sách đơn hàng Khách hàng có tài khoản
10 Xem thông tin đơn hàng Khách hàng có tài khoản
11 Đánh giá sản phẩm Khách hàng có tài khoản
12 Chỉnh sửa thông tin cá nhân Khách hàng có tài khoản, Nhân viên, Chủ cửa hàng
13 Quản lý banner quảng cáo Nhân viên, Chủ cửa hàng
14 Quản lý tài khoản khách hàng Nhân viên, Chủ cửa hàng
15 Quản lý đơn hàng Nhân viên, Chủ cửa hàng
16 Quản lý sản phẩm Nhân viên, Chủ cửa hàng
17 Quản lý bài viết Nhân viên, Chủ cửa hàng
18 Quản lý danh mục Nhân viên, Chủ cửa hàng
19 Xem thống kê bán hàng Nhân viên, Chủ cửa hàng
20 Quản lý nhân viên Chủ cửa hàng
Bảng 4.2 Đặc tả usecase tìm kiếm thông tin
Name Tìm kiếm thông tin
Goal Tìm kiếm sản phẩm
Actors Guest, Khách hàng có tài khoản
Main Flow 1 Click vào khung tìm kiếm trên thanh navbar
2 Gõ thông tin cần tìm
3 Ấn enter hoặc nhấn vào biểu tượng kính lúp Exception
1.3.2 Xem danh sách sản phẩm
Bảng 4.3 Đặc tả usecase xem danh sách sản phẩm
Name Xem danh sách sản phẩm
Goal Xem danh sách sản phẩm theo danh mục
Actors Guest, Khách hàng có tài khoản
Main Flow 1 Click vào danh mục sản phẩm trên thanh menu ngang
2 Click vào danh mục sản phẩm muốn xem ở menu xổ xuống
1.3.3 Xem thông tin chi tiết sản phẩm
Bảng 4.4 Đặc tả usecase xem thông tin chi tiết sản phẩm
Name Xem thông tin chi tiết sản phẩm
Goal Xem thông tin chi tiết sản phẩm
Actors Guest, Khách hàng có tài khoản
Main Flow 1 Click vào hình ảnh sản phẩm hoặc tên sản phẩm
2 Kéo chuột để đọc chi tiết sản phẩm Exception
1.3.4 Các chức năng của giỏ hàng
Bảng 4.5 Đặc tả usecase giỏ hàng
Name Chức năng của giỏ hàng
Goal Xem chi tiết giỏ hàng, thao tác với giỏ hàng
Actors Guest, Khách hàng có tài khoản
Main Flow 1 Click vào biểu tượng giỏ hàng trên thanh menu
2 Click vào button thanh toán để thanh toán
3 Click vào button thao tác để sửa đổi mặt hàng Exception
Bảng 4.6 Đặc tả usecase đăng ký
Goal Đăng ký tài khoản
Main Flow 1 Click vào label Đăng ký trên thanh menu
2 Nhập thông tin tài khoản tương ứng
3 Click button đăng ký để đăng ký tài khoản Exception
Bảng 4.7 Đặc tả usecase đăng nhập
Goal Đăng nhập vào hệ thống
Actors Khách hàng có tài khoản, Nhân viên, Chủ cửa hàng
Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản, admin, chủ cửa hàng Post-conditions N/A
Main Flow 1 Click vào label Login
2 Nhập thông tin tài khoản
3 Ấn enter hoặc nhấn vào button Sign in Exception
Bảng 4.8 Đặc tả usecase đăng xuất
Goal Thoát khỏi hệ thống
Actors Khách hàng có tài khoản, Nhân viên, Chủ cửa hàng
Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản, admin, chủ cửa hàng Post-conditions N/A
Main Flow 1 Click vào button log out trên thanh menu
Bảng 4.9 Đặc tả usecase đặt mua hàng
Goal Thêm sản phẩm vào giỏ hàng
Actors Khách hàng có tài khoản
Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản
Main Flow 1 Rê chuột đến hình ảnh sản phẩm
2 Click vào biểu tưởng giỏ hàng hiện lên trên hình ảnh sản phẩm
1.3.9 Xem danh sách đơn hàng
Bảng 4.10 Đặc tả usecase xem danh sách đơn hàng
Name Xem danh sách đơn hàng
Goal Xem chi tiết các đơn hàng
Actors Khách hàng có tài khoản
Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản
Main Flow 1 Click vào label tài khoản trên thanh menu
2 Click vào danh mục đơn hàng của bạn Exception
1.3.10 Xem thông tin đơn hàng
Bảng 4.11 Đặc tả usecase xem thông tin đơn hàng
Name Xem thông tin đơn hàng
Goal Xem chi tiết thông tin đơn hàng
Actors Khách hàng có tài khoản
Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản
Main Flow 1 Click biểu tượng xem chi tiết đơn hàng ở cột thao tác
2 Click biểu tượng thùng rác để xóa
3 Click button save change để lưu lại
4 Click vào button close hoặc nút x ở góc phải bên trên để đóng
1.3.11 Chỉnh sửa thông tin cá nhân
Bảng 4.12 Đặc tả usecase chỉnh sửa thông tin cá nhân
Name Chỉnh sửa thông tin cá nhân
Goal Chỉnh sửa thông tin cá nhân
Actors Khách hàng có tài khoản
Post-conditions Đăng nhập tài khoản khách hàng có tài khoản
Main Flow 1 Click vào label tài khoản trên thanh menu
2 Chọn danh mục thông tin cá nhân
4 Nhập thông tin cần thay đổi
5 Click button Save để lưu lại
6 Click button cancel để thoát
Bảng 4.13 Đặc tả usecase đánh giá sản phẩm
Name Đánh giá sản phẩm
Goal Đánh giá sản phẩm, vote sao
Actors Khách hàng có tài khoản
Post-conditions Đăng nhập tài khoản khách hàng có tài khoản
Main Flow 1 Click vào button gửi đánh giá
3 Nhập nội dung đánh giá
4 Click button gửi đánh giá
1.3.13 Quản lý banner quảng cáo
Bảng 4.14 Đặc tả usecase quản lý banner quảng cáo
Name Quản lý banner quảng cáo
Goal Quản lý banner quảng cáo
Actors Nhân viên, Chủ cửa hàng
Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng
Main Flow 1 Click vào danh mục banner quảng cáo
2 Chọn banner ngoài hoặc banner trong
3 Chọn trạng thái hiển thị public hoặc private
4 Chọn button edit để sửa
5 Chọn button delete để xóa Exception
1.3.14 Quản lý tài khoản khách hàng
Bảng 4.15 Đặc tả usecase quản lý tài khoản khách hàng
Name Quản lý tài khoản khách hàng
Goal Quản lý tài khoản khách hàng
Actors Nhân viên, Chủ cửa hàng
Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng
Main Flow 1 Click vào danh mục thành viên
2 Chọn button edit để thay đổi thông tin
3 Nhập thông tin tài khoản
4 Click button lưu thông tin
5 Click button delete để xóa tài khoản Exception
Bảng 4.16 Đặc tả usecase quản lý đơn hàng
Name Quản lý đơn hàng
Goal Quản lý đơn hàng
Actors Nhân viên, Chủ cửa hàng
Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng
Main Flow 1 Click vào danh mục đơn hàng
2 Click menu xổ chọn trạng thái
3 Click button thanh toán để thay đổi thông tin thanh toán
4 Click biểu tượng view để xem chi tiết đơn hàng
5 Click biểu tượng delete để xóa đơn hàng Exception
Bảng 4.17 Đặc tả usecase quản lý sản phẩm
Name Quản lý sản phẩm
Goal Quản lý sản phẩm
Actors Nhân viên, Chủ cửa hàng
Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng
Main Flow 1 Click vào danh mục sản phẩm
2 Click chọn trạng thái hiển thị public hoặc private
3 Click chọn trạng thái nổi bật hoặc none
4 Click button edit để chỉnh sửa
5 Nhập thông tin sản phẩm
Bảng 4.18 Đặc tả usecase quản lý bài viết
Name Quản lý bài viết
Goal Quản lý bài viết
Actors Nhân viên, Chủ cửa hàng
Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng
Main Flow 1 Click vào danh mục tin tức
2 Click vào button thêm mới
3 Nhập thông tin bài viết
4 Click button Lưu bài viết
5 Click biểu tượng edit để chỉnh sửa
6 Click biểu tượng delete để xóa Exception
Bảng 4.19 Đặc tả usecase quản lý danh mục
Name Quản lý danh mục
Goal Quản lý danh mục
Actors Nhân viên, Chủ cửa hàng
Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng
Main Flow 1 Click vào danh mục danh mục
2 Chọn trạng thái home page public hoặc private
3 Chọn trạng thái status public hoặc private
4 Click biểu tượng edit để chỉnh sửa
5 Nhập thông tin danh mục
6 Click button lưu thông tin
7 Click biểu tượng delete để xóa Exception
1.3.19 Xem thống kê bán hàng
Bảng 4.20 Đặc tả usecase xem thống kê bán hàng
Name Xem thống kê bán hàng
Goal Xem thống kê bán hàng, xuất file báo cáo
Actors Nhân viên, Chủ cửa hàng
Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng
Main Flow 1 Click vào danh mục dashboard
2 Kéo chuột để xem thống kê
3 Click button Generate Report để tài báo cáo Exception
Bảng 4.21 Đặc tả usecase quản lý nhân viên
Name Quản lý nhân viên
Goal Quản lý nhân viên
Post-conditions Đăng nhập tài khoản chủ cửa hàng
Main Flow 1 Click vào danh mục quản trị viên
2 Click vào biểu tượng edit
3 Nhập thông tin tài khoản
4 Click button lưu thông tin
5 Click biểu tượng delete để xóa Exception
Mô hình cơ sở dữ liệu
Hình 4.2 Lược đồ quan hệ
Bảng 4.22 Danh sách các bảng
Trong hệ thống quản lý nội dung, các bảng dữ liệu đóng vai trò quan trọng trong việc lưu trữ và tổ chức thông tin Bảng "admins" chứa dữ liệu về thông tin tài khoản của quản trị viên, giúp quản lý hệ thống hiệu quả Bảng "articles" lưu trữ các bài viết trên website, đảm bảo nội dung phong phú và cập nhật Các danh mục sản phẩm được lưu trong bảng "categories", phân chia rõ ràng các nhóm hàng hóa Thông tin liên hệ khách hàng được quản lý trong bảng "contacts", giúp dễ dàng xử lý và phản hồi Các sản phẩm trong đơn hàng được lưu trong bảng "orders", còn "products" là nơi lưu trữ thông tin chi tiết về từng mặt hàng Banner quảng cáo ngoài được quản lý trong "out_banners", trong khi "slide_banner" chứa dữ liệu các banner trong slide sao cho tăng tương tác Thông tin về reset mật khẩu khách hàng được lưu trong "password_reset" để đảm bảo an toàn và tiện lợi Các giao dịch thanh toán qua VNPAY được theo dõi trong "payments", còn "ratings" lưu các đánh giá của khách hàng về sản phẩm hoặc dịch vụ Bảng "transactions" ghi nhận các hoạt động mua bán, trong khi "users" chứa dữ liệu tài khoản khách hàng, hỗ trợ quản lý khách hàng hiệu quả và tối ưu hóa trải nghiệm mua sắm.
2.3 Mô tả chi tiết các bảng
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id Int(10) PK Mã tự động tăng
4 phone char(191) Số điện thoại
10 created_at timestamp Thời gian tạo
11 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id int(10) PK Mã tự động tăng
2 a_name varchar(191) Tên bài viết
10 a_view int(11) Số lượt xem
11 created_at timestamp Thời gian tạo
12 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id int(10) PK Mã tự động tăng
2 c_name varchar(191) Tên danh mục
3 c_slug varchar(191) Tên slug danh mục
7 c_total_product int(11) Tổng sản phẩm
8 c_tittle_seo varchar(191) Tiêu đề SEO
9 c_description_seo varchar(191) Mô tả SEO
10 c_keyword_seo varchar(191) Keyword SEO
11 c_home tinyint(4) Trạng thái trang chủ
12 created_at timestamp Thời gian tạo
13 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id int(10) PK Mã tự động tăng
2 c_name varchar(191) Tên người liên hệ
5 c_content text Nội dung tin liên hệ
7 created_at timestamp Thời gian tạo
8 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id int(10) PK Mã tự động tăng
2 or_transaction_id int(10) id của giao dịch
3 or_product_id int(10) id của sản phẩm
4 or_qty tinyint(4) Số lượng sản phẩm
5 or_price int(11) Giá của sản phẩm
6 or_sale tinyint(4) Giá sau khi sale
7 created_at timestamp Thời gian tạo
8 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id int(10) PK Mã tự động tăng
2 ob_img varchar(191) Ảnh cho banner
3 ob_link varchar(191) Link cho banner
4 ob_status tinyint(4) Trạng thái
5 created_at timestamp Thời gian tạo
6 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id int(10) PK Mã tự động tăng
2 sb_img varchar(191) Ảnh cho banner
3 sb_link varchar(191) Link cho banner
4 sb_status tinyint(4) Trạng thái
5 created_at timestamp Thời gian tạo
6 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 email varchar(191) PK Mã tự động tăng
2 token varchar(191) Token của đợt reset
3 created_at timestamp Thời gian tạo
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id bigint(20) PK Mã tự động tăng
2 p_transaction_id int(10) Mã giao dịch
3 p_user_id int(10) Mã khách hàng
4 p_money int(10) Số tiền thanh toán
5 p_note varchar(191) Ghi chú giao dịch
6 p_vpn_response varchar(225) Mã trả về vnpay
7 p_code_vpn varchar(225) Mã xác nhận trạng thái giao dịch
8 p_code_bank varchar(225) Mã ngân hàng
9 p_time datetime Thời gian giao dịch
10 p_transaction_code varchar(30) Mã hóa đơn thanh toán
11 created_at timestamp Thời gian tạo
12 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id int(10) PK Mã tự động tăng
2 pro_name varchar(191) Token của đợt reset
3 pro_slug varchar(191) Thời gian tạo
4 pro_category_id int(10) Mã danh mục
5 pro_price int(10) Đơn giá sản phẩm
6 pro_author_id int(10) Người thêm sản phẩm
7 pro_sale tinyint(4) % khuyến mãi
8 pro_active tinyint(4) Trạng thái kích hoạt
9 pro_hot tinyint(4) Trạng thái hot
10 pro_view int(10) Lượng người xem
11 pro_description varchar(191) Mô tả ngắn
12 pro_avatar varchar(191) Ảnh đại diện
13 pro_description_seo varchar(191) Mô tả seo
14 pro_keyword_seo varchar(191) Keyword cho seo
15 pro_tittle_seo varchar(191) Tiêu đề cho seo
16 pro_content longtext Nội dung quảng cáo
17 pro_pay tinyint(4) Số người đã thanh toán
18 pro_number tinyint(4) Số lượng sản phẩm
19 created_at timestamp Thời gian tạo
20 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id int(10) PK Mã tự động tăng
2 ra_product_id int(10) Mã sản phẩm
3 ra_number tinyint(4) Số sao đánh giá
4 ra_content varchar(191) Nội dung đánh giá
5 ra_user_id int(10) Mã khách hàng
6 created_at timestamp Thời gian tạo
7 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id int(10) PK Mã tự động tăng
2 tr_user_id int(10) Mã khách hàng
3 tr_total int(10) Tổng giá trị
4 tr_note varchar(191) Ghi chú
5 tr_address varchar(191) Địa chỉ giao hàng
6 tr_phone varchar(191) Số điện thoại liên lạc
9 created_at timestamp Thời gian tạo
10 updated_at timestamp Thời gian cập nhật
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 id Int(10) PK Mã tự động tăng
4 phone char(191) Số điện thoại
10 created_at timestamp Thời gian tạo
11 updated_at timestamp Thời gian cập nhật
2.4 Quan hệ giữa các bảng
Hình 4.3 Quan hệ giữa bảng ratings - users
- Mỗi đánh giá thuộc 1 user, mỗi user có thể có nhiều đánh giá
- Mối quan hệ giữa users – ratings: 1-n
Hình 4.4 Quan hệ giữa bảng payments - users
- Mỗi cuộc thanh toán thuộc 1 user, mỗi user có thể có nhiều thanh toán
- Mối quan hệ giữa users –payments: 1-n
Hình 4.5 Quan hệ giữa bảng payments - transactions
- Mỗi giao dịch (transaction) có 1 hóa đơn thanh toán, mỗi một hóa đơn thanh toán chỉ thuộc 1 giao dịch
- Mối quan hệ giữa transaction – payments: 1-1
Hình 4.6 Quan hệ giữa bảng transactions - orders
- Mỗi một giao dịch có thể có nhiều sản phẩm được đặt, mỗi sản phẩm được đặt chỉ thuộc 1 cuộc giao dịch
- Mối quan hệ giữa transactions – orders: 1-n
Hình 4.7 Quan hệ giữa bảng orders - products
- Mỗi đơn hàng tương ứng với 1 sản phẩm, mỗi sản phẩm có thể có nhiều đơn hàng
- Mối quan hệ giữa orders – products: n-1
Hình 4.8 Quan hệ giữa bảng products - categories
- Mỗi sản phẩm nằm trong 1 danh mục, mỗi danh mục có thể có nhiều sản phẩm
- Mối quan hệ giữa categories – products: 1-n
Hình 4.9 Quan hệ giữa bảng admins - articles
- Mỗi quản trị viên có thể thêm nhiều bài viết, mỗi bài viết chỉ được viết bởi 1 quản trị viên
- Mối quan hệ giữa admins – articles: 1-n.
Lược đồ tuần tự
Hình 4.10 Lược đồ tuần tự cho chức năng đăng nhập
Hình 4.11 Lược đồ tuần tự cho chức năng đăng ký
Hình 4.12 Lược đồ tuần tự cho chức năng thêm sản phẩm
Hình 4.13 Lược đồ tuần tự cho chức năng đặt hàng
Hình 4.14 Lược đồ tuần tự cho chức năng xử lý đơn hàng
Sơ đồ sitemap website
4.1 Sơ đồ sitemap khách hàng
Thiết kế giao diện
Hình 4.17 Giao diện cho trang chủ
Bảng 4.36 Mô tả chức năng giao diện trang chủ
1 Button Đăng ký tài khoản
2 Button Đăng nhập tài khoản
5 Button Nút bung danh mục sản phẩm
6 Button Hiện sản phẩm vừa xem
10 Button Trang chính sách vận chuyển
11 Button Danh mục sản phẩm
12 Navbar Khung show quảng cáo
Bảng 4.37 Biến cố giao diện trang chủ
ID Xử lý Điều kiện kích hoạt
1 Chuyển trang đăng ký tài khoàn Click vào (1)
2 Chuyển trang đăng nhập tài khoản Click vào (2)
3 Chuyển trang xem giỏ hàng Click vào (3)
4 Xem danh mục sản phẩm Rê chuột vào (5)
5 Chuyển trang xem danh sách tin tức
6 Chuyển trang xem hướng dẫn trả góp
7 Chuyển trang xem chính sách bảo hành
Hình 4.18 Giao diện cho trang đăng nhập
Bảng 4.38 Mô tả chức năng giao diện trang đăng nhập
1 Textbox Khung nhập tài khoản
2 Textbox Khung nhập mật khẩu
4 Button Đăng nhập bằng tài khoản google
5 Link Trang lấy lại mật khẩu
Bảng 4.39 Biến cố giao diện trang đăng nhập
ID Xử lý Điều kiện kích hoạt
1 Chuyển trang đăng ký tài khoàn Click vào (6)
Hình 4.19 Giao diện cho trang đăng ký
Bảng 4.40 Mô tả chức năng giao diện trang đăng ký
1 Textbox Khung nhập họ và tên
3 Textbox Khung nhập mật khẩu
4 Textbox Nhập lại mật khẩu
5 Textbox Khung nhập số điện thoại
7 Link Chuyển trang đăng nhập
Bảng 4.41 Biến cố giao diện trang đăng ký
ID Xử lý Điều kiện kích hoạt
1 Chuyển trang đăng nhập Click vào (7)
2 Lưu thông tin đăng ký Click vào (6)
5.1.4 Trang xem danh sách sản phẩm theo danh mục
Hình 4.20 Giao diện cho trang xem danh sách sản phẩm theo danh mục
Bảng 4.42 Mô tả chức năng giao diện trang xem danh sách sản phẩm theo danh mục
1 Card Danh sách các sản phẩm trong danh mục
2 Multiple Select Chọn chế độ sort cho danh sách sản phẩm
5.1.5 Trang xem chi tiết sản phẩm
Hình 4.21 Giao diện cho trang xem chi tiết sản phẩm
Bảng 4.43 Mô tả chức năng giao diện trang xem chi tiết sản phẩm
1 Image Hình minh họa sản phẩm
3 Icon Đánh giá sản phẩm
4 Number Giá của sản phẩm và tình trạng sản phẩm trong kho hàng
5 Button Nút thêm vào giỏ hàng
6 Label Nội dung mô tả chi tiết sản phẩm
7 Icon Khung đánh giá sản phẩm
8 Button Nút gửi đánh giá
9 List Các bình luận đánh giá
Bảng 4.44 Biến cố giao diện trang xem chi tiết sản phẩm
ID Xử lý Điều kiện kích hoạt
1 Hiện khung đánh giá Click vào (8)
5.1.6 Trang xem lịch sử đơn hàng
Hình 4.22 Giao diện cho trang xem lịch sử đơn hàng
Bảng 4.45 Mô tả chức năng giao diện trang xem lịch sử đơn hàng
5.1.7 Trang xem sản phẩm trong giỏ hàng
Hình 4.23 Giao diện cho trang xem sản phẩm trong giỏ hàng
Bảng 4.46 Mô tả chức năng giao diện trang xem sản phẩm trong giỏ hàng
1 Table Danh sách các sản phẩm đang có trong giỏ hàng
2 Button Nút chuyển đến trang nhập thông tin đơn hàng và đặt hàng hoặc thanh toán
Bảng 4.47 Biến cố giao diện trang xem sản phẩm
ID Xử lý Điều kiện kích hoạt
1 Chuyển trang chi tiết đơn hàng Click vào (2)
5.1.8 Trang xác nhận thông tin đơn hàng
Hình 4.24 Giao diện cho trang xác nhận thông tin đơn hàng
Bảng 4.48 Mô tả chức năng giao diện trang xác nhận thông tin đơn hàng
1 Textbox Địa chỉ giao hàng
3 Textbox Số điện thoại khách hàng
4 Textarea Ghi chú cho đơn hàng
5 Button Nút đặt hàng thanh toán COD
6 Button Nút thanh toán Online – chuyển đến trang chọn ngân hàng
7 Table Danh sách sản phẩm có trong đơn hàng
8 Label Tổng giá trị đơn hàng
Bảng 4.49 Biến cố giao diện trang xác nhận thôn tin đơn hàng
ID Xử lý Điều kiện kích hoạt
5.1.9 Trang thông báo đặt hàng thành công
Hình 4.25 Giao diện cho trang thông báo đặt hàng thành công
Bảng 4.50 Mô tả chức năng giao diện trang thông báo đặt hàng thành công
1 Table Danh sách sản phẩm trong đơn hàng
2 Label Thông tin liên hệ của khách hàng
3 Label Địa chỉ giao hàng
4 Label Phương thức thanh toán
5 Button Nút quay về trang chủ để tiếp tục mua hàng
Bảng 4.51 Biến cố giao diện trang thông báo
ID Xử lý Điều kiện kích hoạt
1 Quay lại trang chủ Click vào (5)
Hình 4.26 Giao diện cho trang thanh toán online
Bảng 4.52 Mô tả chức năng giao diện trang thanh toán online
1 Navlink Danh sách các ngân hàng có thể thanh toán
2 Button Trở lại trang nhập thông tin đơn hàng
Bảng 4.53 Biến cố giao diện trang thanh toán online
ID Xử lý Điều kiện kích hoạt
1 Chuyển đến trang thanh toán của vnpay Click vào (1)
5.1.11 Trang thông báo thanh toán thành công
Hình 4.27 Giao diện cho trang thông báo thanh toán thành công
Bảng 4.54 Mô tả chức năng giao diện trang thông báo thanh toán thành công
1 Table Danh sách sản phẩm trong đơn hàng
2 Label Thông tin liên hệ của khách hàng
3 Label Địa chỉ giao hàng
4 Table Thông tin hóa đơn giao dịch tại vnpay
5 Table Phương thức thanh toán và trạng thái giao dịch
6 Button Nút quay về trang chủ
Bảng 4.55 Biến cố giao diện trang thông báo thanh toán thành công
ID Xử lý Điều kiện kích hoạt
1 Chuyển đến trang chủ Click vào (6)
5.1.12 Trang xem thông tin cá nhân
Hình 4.28 Giao diện cho trang xem thông tin cá nhân
Bảng 4.56 Mô tả chức năng giao diện trang xem thông tin cá nhân
Thông tin cơ bản của khách hàng và avartar
2 Table Thông tin chi tiết của khách hàng
3 Button Nút chỉnh sửa thông tin cá nhân
4 Nav link Trang xem thông tin cá nhân
5 Nav link Trang đổi mật khẩu
6 Nav link Trang xem lịch sử đơn hàng
7 Button Nút quay về trang mua sắm
Bảng 4.57 Biến cố giao diện trang xem thông tin cá nhân
ID Xử lý Điều kiện kích hoạt
1 Chuyển đến trang chỉnh sửa thông tin cá nhân
2 Chuyển đến trang đổi mật khẩu Click vào (5)
3 Chuyển đến trang xem lịch sử đơn hàng Click vào (6)
4 Chuyển đến trang chủ Click vào (7)
5.1.13 Trang thay đổi thông tin cá nhân
Hình 4.29 Giao diện cho trang thay đổi thông tin cá nhân
Bảng 4.58 Mô tả chức năng giao diện trang thay đổi thông tin cá nhân
4 Textbox Địa chỉ giao hàng mặc định
Bảng 4.59 Biến cố giao diện trang thay đổi thông tin cá nhân Điều kiện kích hoạt
5.1.14 Trang chính sách bảo hành
Hình 4.30 Giao diện cho trang chính sách bảo hành
Bảng 4.60 Mô tả chức năng giao diện trang chính sách bảo hành
Page html Trang thông tin chính sách bảo hàng cho sản phẩm
5.1.15 Trang hướng dẫn trả góp
Hình 4.31 Giao diện cho trang hướng dẫn trả góp
Bảng 4.61 Mô tả chức năng giao diện trang hướng dẫn trả góp
Page html Trang thông tin trả góp sản phẩm
Hình 4.32 Giao diện cho trang tổng quan
Bảng 4.62 Mô tả chức năng giao diện trang tổng quan admin
1 Card Tổng kết doanh thu theo ngày
2 Card Tổng kết doanh thu theo tháng
3 Card Tống kết đơn hàng còn tồn đọng
4 Card Các tin liên hệ đang chờ
5 Chart Thống kê doanh thu theo biểu đồ
6 Navbar Sidebar tổng hợp đường dẫn đến các chức năng
5.2.2 Trang quản lý danh mục
Hình 4.33 Giao diện cho trang quản lý danh mục
Bảng 4.63 Mô tả chức năng giao diện trang quản lý danh mục
1 Button Thêm mới danh mục
2 Multiple select Chỉnh số lượng hiển thị của 1 bảng
4 Table danh sách các danh mục
5 Badge link Điều chỉnh danh mục nào sẽ hiện sản phẩm lên trang chủ
6 Badge link Điều chỉnh trạng thái danh mục
7 Button Group Nút chức năng Sửa/Xóa danh mục
Bảng 4.64 Biến cố giao diện trang quản lý danh mục
ID Xử lý Điều kiện kích hoạt
1 Chuyển trang thêm mới danh mục Click vào (1)
2 Chỉnh số lượng dòng hiện trong 1 trang Click vào (2)
3 Hiện các danh mục tìm kiếm Click vào (3)
4 Thay đổi trang thái trên trang chủ Click vào (5)
5 Thay đổi trạng thái danh mục Click vào (6)
6 Chuyển trang chỉnh sửa hoặc xóa danh mục Click vào (7)
5.2.3 Trang quản lý sản phẩm
Hình 4.34 Giao diện cho trang quản lý sản phẩm
Bảng 4.65 Mô tả chức năng giao diện trang quản lý sản phẩm
1 Button Thêm mới sản phẩm
2 Table Danh sách các sản phẩm
3 Badge Link Điều chỉnh trạng thái của sản phẩm
4 Badge Link Điều chỉnh cho sản phẩm lên khung gợi ý sản phẩm của khách hàng
Bảng 4.66 Biến cố giao diện trang quản lý sản phẩm
ID Xử lý Điều kiện kích hoạt
5.2.4 Trang thêm/sửa sản phẩm
Hình 4.35 Giao diện cho trang thêm sửa sản phẩm
Bảng 4.67 Mô tả chức năng giao diện trang thêm sửa sản phẩm
2 Textarea Mô tả ngắn gọn cho sản phẩm
3 Ckeditor Mô tả chi tiết cho sản phẩm
6 Option Chọn loại sản phẩm
8 Textbox Khuyến mãi cho sản phẩm
10 Input Img Hình minh họa của sản phẩm
11 Bootstrap file input Các hình minh họa phụ cho sản phẩm
12 Button Lưu thông tin sản phẩm
Bảng 4.68 Biến cố giao diện trang thêm sửa sản phẩm
ID Xử lý Điều kiện kích hoạt
1 Hiện khung chọn ảnh Click vào nút thêm trong (11)
2 Lưu thay đổi Click vào (12)
5.2.5 Trang quản lý các đánh gíá
Hình 4.36 Giao diện cho trang quản lý các đánh giá
Bảng 4.69 Mô tả chức năng giao diện trang quản lý các đánh giá
1 Html Page Trang tổng hợp các đánh giá của các sản phẩm
5.2.6 Trang xử lý đơn hàng
Hình 4.37 Giao diện cho trang xử lý đơn hàng
Bảng 4.70 Mô tả chức năng giao diện trang xử lý đơn hàng
1 Badge Link Chỉnh trạng thái đơn hàng
2 Badge Link Điều chỉnh trạng thái thanh toán
5.2.7 Trang quản lý tin tức
Hình 4.38 Giao diện cho trang quản lý tin tức
Bảng 4.71 Mô tả chức năng giao diện trang quản lý tin tức
1 Html page Trang quản lý bài viết
5.2.8 Trang quản lý tài khoản khách hàng
Hình 4.39 Giao diện cho trang quản lý tài khoản khách hàng
Bảng 4.72 Mô tả chức năng giao diện trang quản lý tài khoản khách hàng
1 Html page Trang quản lý tài khoản khách hàng
5.2.9 Trang quản lý banner quảng cáo
Hình 4.40 Giao diện cho trang quản lý banner quảng cáo
Bảng 4.73 Mô tả chức năng giao diện trang quản lý banner quảng cáo
2 Button Chuyển trang thêm mới banner
3 Badge link Chỉnh trạng thái của banner
5.2.10 Trang quản lý tài khoản quản trị viên
Hình 4.41 Giao diện cho trang quản lý tài khoản quản trị viên
Bảng 4.74 Mô tả chức năng giao diện trang quản lý tài khoản quản trị viên
1 Table Hiển thị danh sách quản trị viên
2 Button Tới trang thêm mới tài khoản quản trị viên
CÀI ĐẶT VÀ KIỂM THỬ
Cài đặt
1.1 Chuẩn bị môi trường hosting
Hình 5.2 Setting chi tiết cho App
Cài đặt dyno cho heroku:
Convert tất cả các bảng có trong database thành file migration:
Hình 5.4 Convert database sang file migration
Chạy migration trên console Heroku:
Hình 5.5 Chạy migration trên console của Heroku
Seed dữ liệu mẫu vào Heroku:
Hình 5.6 Seed dữ liệu mậu vào Heroku Đăng nhập admin trên host:
Kiểm thử
Chức năng Mô tả Trạng thái Đăng nhập bằng tài khoản User đăng nhập vào website thông qua tài khoản đã đăng ký
Hoạt động tốt Đăng nhập qua tài khoản google
User và guest đăng nhập vào website thông qua tài khoản google
Thêm xóa sản phẩm trong giỏ hàng
User thêm hoặc xóa sản phẩm khỏi giỏ hàng
Thanh toán online User thực hiện thanh toán online cho đơn hàng
Hoạt động tốt Đặt hàng User thực hiện đặt hàng Hoạt động tốt
Xem lịch sử đơn hàng User xem lịch sử đơn hàng của mình
Xem chi tiết đơn hàng User xem chi tiết đơn hàng của mình
Hoạt động tốt Đổi thông tin cá nhân User đổi thông tin cá nhân của tài khoản
Thêm xóa sửa sản phẩm Admin thực hiện CRUD sản phẩm
Xử lý trạng thái đơn hàng Admin xử lý trạng thái đơn hàng