1. Trang chủ
  2. » Luận Văn - Báo Cáo

(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính

107 10 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây Dựng Trang Web Bán Linh Kiện Máy Tính
Tác giả Phan Quốc Phú, Đặng Văn Mạnh
Người hướng dẫn Thầy Nguyễn Trần Thi Văn
Trường học Trường Đại Học Sư Phạm Kỹ Thuật TP.HCM
Chuyên ngành Công nghệ Thông Tin
Thể loại Đồ Án Tốt Nghiệp
Năm xuất bản 2021
Thành phố TP.HCM
Định dạng
Số trang 107
Dung lượng 6,46 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Cấu trúc

  • CHƯƠNG 1: MỞ ĐẦU (15)
    • 1. Đặt vấn đề và lý do chọn đề tài (15)
    • 2. Mục tiêu và nhiệm vụ của đề tài (16)
      • 2.1. Mục tiêu (16)
      • 2.2. Nhiệm vụ (17)
    • 3. Yêu cầu (17)
    • 4. Phương pháp nghiên cứu (18)
    • 5. Bố cục của báo cáo (19)
  • CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG (20)
    • 1. Html/Css (20)
      • 1.1. HTML - HyperText Markup Language (20)
      • 1.2. Css - Cascade Style Sheet (21)
    • 2. Laravel PHP framework (22)
    • 3. Mô hình MVC (23)
    • 4. Một số package của Laravel được sử dụng trong đồ án (23)
    • 5. Cơ sở dữ liệu MySQL (24)
  • CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU (25)
    • 1.3. Phong Vũ (27)
    • 2. Cấu trúc ứng dụng (27)
    • 3. Qui định và yêu cầu thiết kế (31)
      • 3.1. Quy định (31)
      • 3.2. Yêu cầu thiết kế (31)
    • 4. Đánh giá và lựa chọn công nghệ (32)
  • CHƯƠNG 4: THIẾT KẾ PHẦN MỀM (0)
    • 1. Lược đồ usecase và mô tả use case (33)
      • 1.1. Danh sách usecase (33)
      • 1.2. Lược đồ usecase (34)
      • 1.3. Đặc tả use case (35)
        • 1.3.1. Tìm kiếm thông tin (35)
        • 1.3.2. Xem danh sách sản phẩm (35)
        • 1.3.3. Xem thông tin chi tiết sản phẩm (36)
        • 1.3.4. Các chức năng của giỏ hàng (36)
        • 1.3.5. Đăng ký (37)
        • 1.3.6. Đăng nhập (37)
        • 1.3.7. Đăng xuất (38)
        • 1.3.8. Đặt mua hàng (38)
        • 1.3.9. Xem danh sách đơn hàng (39)
        • 1.3.10. Xem thông tin đơn hàng (39)
        • 1.3.11. Chỉnh sửa thông tin cá nhân (40)
        • 1.3.12. Đánh giá sản phẩm (40)
        • 1.3.13. Quản lý banner quảng cáo (41)
        • 1.3.14. Quản lý tài khoản khách hàng (41)
        • 1.3.15. Quản lý đơn hàng (42)
        • 1.3.16. Quản lý sản phẩm (42)
        • 1.3.17. Quản lý bài viết (43)
        • 1.3.18. Quản lý danh mục (44)
        • 1.3.19. Xem thống kê bán hàng (45)
        • 1.3.20. Quản lý nhân viên (45)
    • 2. Mô hình cơ sở dữ liệu (46)
      • 2.1. Lược đồ quan hệ (46)
      • 2.2. Danh sách các bảng (47)
      • 2.3. Mô tả chi tiết các bảng (48)
        • 2.3.1. Bảng admins (48)
        • 2.3.2. Bảng articles (48)
        • 2.3.3. Bảng categories (49)
        • 2.3.4. Bảng contacts (50)
        • 2.3.5. Bảng orders (50)
        • 2.3.6. Bảng out_banners (51)
        • 2.3.7. Bảng slide_banners (51)
        • 2.3.8. Bảng password_resets (52)
        • 2.3.9. Bảng payments (52)
        • 2.3.10. Bảng products (53)
        • 2.3.11. Bảng ratings (54)
        • 2.3.12. Bảng transactions (54)
        • 2.3.13. Bảng users (55)
      • 2.4. Quan hệ giữa các bảng (56)
        • 2.4.1. ratings – users (56)
        • 2.4.2. payments – users (57)
        • 2.4.6. products – categories (61)
        • 2.4.7. admins - articles (62)
    • 3. Lược đồ tuần tự (63)
      • 3.1. Đăng nhập (63)
      • 3.2. Đăng ký (64)
      • 3.3. Thêm sản phẩm (65)
      • 3.4. Đặt hàng (66)
      • 3.5. Xử lý đơn hàng (67)
    • 4. Sơ đồ sitemap website (68)
      • 4.1. Sơ đồ sitemap khách hàng (68)
      • 4.2. Sơ đồ sitemap admin (69)
    • 5. Thiết kế giao diện (70)
      • 5.1. Khách hàng (70)
        • 5.1.1. Trang chủ (70)
        • 5.1.2. Trang đăng nhập (72)
        • 5.1.3. Trang đăng ký (73)
        • 5.1.4. Trang xem danh sách sản phẩm theo danh mục (74)
        • 5.1.5. Trang xem chi tiết sản phẩm (75)
        • 5.1.6. Trang xem lịch sử đơn hàng (76)
        • 5.1.7. Trang xem sản phẩm trong giỏ hàng (77)
        • 5.1.8. Trang xác nhận thông tin đơn hàng (78)
        • 5.1.9. Trang thông báo đặt hàng thành công (79)
        • 5.1.10. Trang thanh toán online (80)
        • 5.1.11. Trang thông báo thanh toán thành công (81)
        • 5.1.12. Trang xem thông tin cá nhân (82)
        • 5.1.13. Trang thay đổi thông tin cá nhân (84)
        • 5.1.14. Trang chính sách bảo hành (85)
        • 5.1.15. Trang hướng dẫn trả góp (86)
      • 5.2. Admin (87)
        • 5.2.1. Trang tổng quan (87)
        • 5.2.2. Trang quản lý danh mục (88)
        • 5.2.3. Trang quản lý sản phẩm (90)
        • 5.2.4. Trang thêm/sửa sản phẩm (91)
        • 5.2.5. Trang quản lý các đánh gíá (93)
        • 5.2.6. Trang xử lý đơn hàng (94)
        • 5.2.7. Trang quản lý tin tức (95)
        • 5.2.8. Trang quản lý tài khoản khách hàng (96)
        • 5.2.9. Trang quản lý banner quảng cáo (97)
        • 5.2.10. Trang quản lý tài khoản quản trị viên (98)
  • CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ (99)
    • 1. Cài đặt (99)
      • 1.1. Chuẩn bị môi trường hosting (99)
      • 1.2. Chuẩn bị database (101)
    • 2. Kiểm thử (103)
  • CHƯƠNG 6: KẾT LUẬN (0)
    • 1. Kết quả đạt được (104)
    • 2. Ưu điểm (104)
    • 3. Khuyết điểm (105)
    • 4. Hướng phát triển (105)
  • TÀI LIỆU THAM KHẢO (106)

Nội dung

(Đồ á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

Ngày đăng: 26/12/2022, 15:12

🧩 Sản phẩm bạn có thể quan tâm

w