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

Xây dựng website sàn thương mại điện tử

98 4 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 Website Sàn Thương Mại Điện Tử
Tác giả Trịnh Hồng Thức
Người hướng dẫn ThS. Lê Thị Bảo Yến
Trường học Đại học Đà Nẵng Phân hiệu tại Kon Tum
Thể loại đồ án tốt nghiệp
Năm xuất bản 2022
Thành phố Kon Tum
Định dạng
Số trang 98
Dung lượng 2,52 MB

Cấu trúc

  • CHƯƠNG 1. TỔNG QUAN ĐỀ TÀI (12)
    • 1.1. TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU (12)
    • 1.2. LÝ DO CHỌN ĐỀ TÀI (12)
    • 1.3. MỤC TIÊU NGHIÊN CỨU (12)
    • 1.4. PHƯƠNG PHÁP NGHIÊN CỨU (13)
      • 1.4.1. Khảo sát (13)
      • 1.4.2. Nghiên cứu lý thuyết (13)
      • 1.4.3. Nghiên cứu công nghệ (13)
    • 1.5. PHẠM VI ĐỀ TÀI (13)
  • CHƯƠNG 2. CƠ SỞ LÝ THUYẾT (15)
    • 2.1. MÔ HÌNH MVC (9)
      • 2.1.1. Khái niệm (15)
      • 2.1.2. Luồng tương tác giữa các thành phần trong MVC (16)
      • 2.1.3. Ưu - nhược điểm của mô hình MVC (16)
    • 2.2. MÔ HÌNH THƯƠNG MẠI ĐIỆN TỬ B2C, C2C (17)
      • 2.2.1. Mô hình B2C (17)
      • 2.2.2. Mô hình C2C (18)
    • 2.3. NGÔN NGỮ LẬP TRÌNH (18)
      • 2.3.1. ReactJs (18)
      • 2.3.2. HTML (19)
      • 2.3.3. CSS (19)
      • 2.3.4. JavaScript (19)
    • 2.4. CÔNG CỤ SỬ DỤNG (20)
      • 2.4.1. Visual studio code (20)
      • 2.4.2. Postman (20)
    • 2.5. THƯ VIỆN HỖ TRỢ (20)
      • 2.5.1. Bootstrap (20)
      • 2.5.2. Google Font (20)
      • 2.5.3. Font awesome (20)
      • 2.5.4. Material UI (21)
  • CHƯƠNG 3. PHÂN TÍCH VÀ THIẾT KẾ (22)
    • 3.1. PHÂN TÍCH CHỨC NĂNG CỦA WEBSITE (22)
      • 3.1.1. Chức năng của Khách hàng (22)
      • 3.1.2. Chức năng của User bán hàng (24)
      • 3.1.3. Chức năng của Admin (26)
    • 3.2. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG (28)
      • 3.2.1. Sơ đồ Use case (28)
      • 3.2.2. Sơ đồ tuần tự (9)
      • 3.2.3. Sơ đồ lớp (59)
      • 3.2.4. Lược đồ quan hệ cơ sở dữ liệu (62)
  • CHƯƠNG 4. KẾT QUẢ (67)
    • 4.1. GIAO DIỆN USER (67)
      • 4.1.1. Trang Chủ (67)
      • 4.1.2. Trang đăng nhập (70)
      • 4.1.3. Trang đăng ký (70)
      • 4.1.4. Trang sản phẩm (71)
      • 4.1.5. Trang giỏ hàng (72)
      • 4.1.6. Trang đặt hàng (72)
      • 4.1.7. Trang chi tiết sản phẩm (73)
      • 4.1.8. Trang quản lý đơn hàng (10)
      • 4.1.9. Trang thông tin chi tiết Khách hàng (74)
      • 4.1.10. Trang quản lý thông báo (75)
      • 4.1.11. Trang tìm kiếm sản phẩm (75)
    • 4.2. GIAO DIỆN USER BÁN HÀNG (76)
      • 4.2.1. Trang chủ (76)
      • 4.2.2. Trang quản lý sản phẩm (77)
      • 4.2.3. Trang thêm sản phẩm (78)
      • 4.2.4. Trang sửa sản phẩm (79)
      • 4.2.5. Trang quản lý đơn hàng (80)
      • 4.2.6. Trang quản lý gửi mail Marketing (81)
      • 4.2.7. Trang quản lý mã giảm giá (81)
      • 4.2.8. Trang tạo mã giảm giá (82)
      • 4.2.9. Trang quản lý shop (82)
    • 4.3. GIAO DIỆN ADMIN (83)
      • 4.3.1. Trang đăng nhập (83)
      • 4.3.2. Trang chủ (83)
      • 4.3.3. Trang thông tin Admin (84)
      • 4.3.4. Trang mã giảm giá (84)
      • 4.3.5. Trang tạo Mã giảm giá (85)
      • 4.3.6. Trang gửi Mã giảm giá (85)
      • 4.3.7. Trang quản lý Banner (86)
      • 4.3.8. Trang quản lý Slide (86)
      • 4.3.9. Trang thêm Slide (87)
      • 4.3.10. Trang quản lý Menu (87)
      • 4.3.11. Trang thêm Menu (88)
      • 4.3.12. Trang quản lý Sản phẩm (88)
      • 4.3.13. Trang xem chi tiết Sản phẩm (89)
      • 4.3.14. Trang quản lý tài khoản (89)
      • 4.3.15. Trang xem chi tiết Tài khoản (90)
      • 4.3.16. Trang quản lý Đơn hàng (90)
      • 4.3.17. Trang xem chi tiết Đơn hàng (91)
      • 4.3.18. Trang quản lý Thông báo (91)
      • 4.3.19. Trang quản lý Đơn vị vận chuyển (92)
      • 4.3.20. Trang thêm Đơn vị vận chuyển (92)
      • 4.3.21. Trang quản lý giao diện Flash Sale (93)
      • 4.3.22. Trang quản lý Shop Mall (93)
      • 4.3.23. Trang quản lý Email nhận thông báo (94)
  • CHƯƠNG 5. KẾT LUẬN (95)
    • 5.1. TỔNG KẾT (95)
    • 5.2. KẾT QUẢ ĐẠT ĐƯỢC (95)
      • 5.2.1. Đối với người sử dụng (95)
      • 5.2.2. Đối với người quản trị (95)
    • 5.3. HẠN CHẾ CỦA ĐỀ TÀI (95)
    • 5.4. HƯỚNG PHÁT TRIỂN ĐỀ TÀI (95)

Nội dung

CƠ SỞ LÝ THUYẾT

MÔ HÌNH MVC

3.1 Sơ đồ Use case tổng quát 20

3.2 Sơ đồ Use case đăng ký tài khoản 21

3.3 Sơ đồ Use case đăng nhập 22

3.4 Sơ đồ Use case quản lý đơn hàng 23

3.5 Sơ đồ Use case quản lý sản phẩm 23

3.6 Sơ đồ Use case quản lý mã giảm giá 24

3.7 Sơ đồ Use case quản lý đơn vị vận chuyển 25

3.8 Sơ đồ Use case quản lý danh mục 25

3.9 Sơ đồ Use case quản lý banner 26

3.10 Sơ đồ Use case quản lý slide 27

3.11 Sơ đồ tuần tự đăng ký của khách hàng 28

3.12 Sơ đồ tuần tự đăng nhập của khách hàng 29

3.13 Sơ đồ tuần tự thêm sản phẩm vào giỏ hàng của khách hàng 30 3.14 Sơ đồ tuần tự xóa sản phẩm khỏi giỏ hàng của khách hàng 31 3.15 Sơ đồ tuần tự tìm kiếm sản phẩm của khách hàng 32 3.16 Sơ đồ tuần tự chỉnh sửa thông tin cá nhân của khách hàng 33 3.17 Sơ đồ tuần tự đăng nhập của user bán hàng 34 3.18 Sơ đồ tuần tự đăng ký của user bán hàng 35 3.19 Sơ đồ tuần tự thêm sản phẩm của user bán hàng 36 3.20 Sơ đồ tuần tự cập nhật sản phẩm của user bán hàng 37 3.21 Sơ đồ tuần tự thêm mã giảm giá của user bán hàng 38 3.22 Sơ đồ tuần tự xóa mã giảm giá của user bán hàng 39 3.23 Sơ đồ tuần tự đăng nhập của quản trị hệ thống 40 3.24 Sơ đồ tuần tự sửa sản phẩm của quản trị hệ thống 41 3.25 Sơ đồ tuần tự thêm danh mục của quản trị hệ thống 42 3.26 Sơ đồ tuần tự xóa danh mục của quản trị hệ thống 43 3.27 Sơ đồ tuần tự thêm banner của quản trị hệ thống 44 3.28 Sơ đồ tuần tự xóa banner của quản trị hệ thống 45 3.29 Sơ đồ tuần tự thêm slide của quản trị hệ thống 46 3.30 Sơ đồ tuần tự xóa slide của quản trị hệ thống 47

3.32 Lược đồ quan hệ cơ sở dữ liệu 55 vii

4.1 Giao diện trang chủ trên máy tính 57

4.2 Giao diện trang chủ trên điện thoại 58

4.3 Trang đăng nhập khách hàng 59

4.4 Trang đăng ký khách hàng 59

4.5 Trang nhập mã xác nhận của khách hàng 60

4.9 Trang chi tiết sản phẩm 62

4.10 Trang quản lý đơn hàng 63

4.11 Trang thông tin chi tiết của khách hàng 63

4.12 Trang quản lý thông báo 64

4.13 Trang tìm kiếm sản phẩm 64

4.14 Trang chủ User bán hàng 65

4.15 Trang quản lý sản phẩm User bán hàng 66

4.16 Trang thêm sản phẩm User bán hàng 67

4.17 Trang sửa sản phẩm User bán hàng 68

4.18 Trang quản lý đơn hàng 69

4.19 Trang quản lý gửi mail Marketing 70

4.20 Trang quản lý mã giảm giá 70

4.21 Trang tạo mã giảm giá 71

4.26 Trang mã giảm giá Admin 73

4.27 Trang tạo mã giảm giá 74

4.28 Trang gửi mã giảm giá 74

4.34 Trang quản lý sản phẩm 77

4.35 Trang quản lý chi tiết sản phẩm 78

4.36 Trang quản lý tài khoản 78

4.37 Trang quản lý chi tiết tài khoản 79

4.38 Trang quản lý đơn hàng 79 viii

4.39 Trang xem chi tiết đơn hàng 80

4.40 Trang quản lý thông báo 80

4.41 Trang quản lý đơn vị vận chuyển 81

4.42 Trang thêm đơn vị vận chuyển 81

4.43 Trang quản lý Flash sale 82

4.44 Trang quản lý Shop mall 82

4.45 Trang quản lý Email nhận Thông báo 83

CHƯƠNG 1 TỔNG QUAN ĐỀ TÀI 1.1 TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU

Trong bối cảnh dịch Covid hiện nay, việc giao dịch và mua bán hàng hóa theo phương thức truyền thống gặp nhiều khó khăn Điều này đã dẫn đến sự cạnh tranh ngày càng gay gắt trong kinh doanh, khiến các doanh nghiệp, cửa hàng và công ty ngày càng chú trọng đến việc bán hàng qua Internet.

So với kinh doanh truyền thống, "Thương mại điện tử" mang lại chi phí thấp hơn, hiệu quả cao hơn và lợi nhuận lớn hơn Nhờ vào công nghệ 4.0 và sự phát triển mạnh mẽ của Internet, việc truyền tải thông tin sản phẩm đến khách hàng trở nên nhanh chóng và thuận tiện Sự kết hợp với dịch vụ giao hàng từ các công ty như Bưu điện và Giao hàng tiết kiệm càng tạo điều kiện thuận lợi cho thương mại điện tử phát triển Việc phát triển website bán hàng trực tuyến cho phép người tiêu dùng mua sắm mọi lúc, mọi nơi, từ đó gia tăng doanh thu cho cửa hàng và doanh nghiệp, đồng thời giảm thiểu chi phí marketing.

1.2 LÝ DO CHỌN ĐỀ TÀI

Việc áp dụng website trong phát triển kinh doanh và quảng bá sản phẩm đang trở nên phổ biến và hiệu quả Các công ty và cửa hàng thường sử dụng website để giới thiệu sản phẩm, đặc biệt là trong bối cảnh mọi người ngày càng tìm kiếm thông tin và mua sắm trực tuyến, nhất là đối với phụ nữ và nhân viên văn phòng không có thời gian mua sắm Website không chỉ giúp quảng bá sản phẩm mà còn giới thiệu hình ảnh của cửa hàng và công ty đến đông đảo khách hàng Vì lý do đó, tôi quyết định chọn đề tài “Xây dựng website sàn thương mại điện tử” cho đồ án tốt nghiệp, nhằm tạo ra một website bán hàng uy tín và chất lượng để quảng bá sản phẩm.

– Nắm vững được cách sử dụng phần mềm VS code, MongoDB Compass, Postman;

– Nắm vững kiến thức của các ngôn ngữ lập trình như: ReactJs, JavaScript, TypeScript, HTML, CSS;

– Hiểu được cách thức hoạt động của Client – Server;

– Hiểu được cách thức hoạt động của hệ quản trị cơ sở dữ liệu SQL Server, MySQL;

– Hiểu được cách thức giao tiếp giữa Client – Server qua API;

– Nắm vững kiến thức về cách hoạt động, tổ chức của mô hình thương mại điện tử B2C, C2C;

– Nắm vững các giai đoạn thực hiện một giao dịch của B2C, C2C thông qua Internet;

– Hiểu được cách thức xây dựng một website TMĐT có áp dụng các mô hình kinh doanh phổ biến hiện nay như B2C, C2C;

– Áp dụng được các công cụ, ngôn ngữ lập trình để xây dựng website;

– Áp dụng được các kiến thức về Thương mại điện tử vào website

– Khảo sát yêu cầu, nhu cầu của người dùng thông qua Google biểu mẫu, phiếu khảo sát, …

Chúng tôi thu thập thông tin và dữ liệu từ các trang thương mại điện tử lớn như taobao.com, alibaba.com, tiki.vn, shopee.vn, lazada.vn và sendo.vn thông qua các website đánh giá và thống kê dữ liệu khách hàng Sau đó, chúng tôi phân tích nhu cầu và yêu cầu từ các dữ liệu đã thu thập để áp dụng vào việc phát triển đề tài một cách hiệu quả.

– Tìm hiểu, nghiên cứu mô hình MVC, các kỹ thuật lập trình và cách thức hoạt động của chương trình

– Nghiên cứu, phân tích thiết kế hệ thống chương trình

– Nghiên cứu cách xây dựng chương trình theo những yêu cầu đặt ra

– Tìm hiểu, nghiên cứu các mô hình Thương mại điện tử (B2B, B2C, C2C)

Nghiên cứu và tìm hiểu các công nghệ lập trình website mới như ReactJS, HTML, JavaScript, và CSS thông qua các diễn đàn, nhóm, và trang web công nghệ để áp dụng vào việc xây dựng giao diện người dùng (UI) và trải nghiệm người dùng (UX) hiệu quả.

– Sử dụng ngôn ngữ NodeJs, MongoDB để xây dựng CSDL cho website

1.5 PHẠM VI ĐỀ TÀI Được sử dụng cho môi trường Internet phù hợp với các tất cả những người yêu thích mua sắm online và đây cũng là nơi để các shop, các công ty, danh nghiệp, cá nhân, tổ chức giới thiệu, đăng bán các sản phẩm

Website sẽ có các chứng năng chính bao gồm:

 Đánh giá sản phẩm (comment, rating)

 Thêm sản phẩm vào giỏ hàng

– Dành cho User Bán hàng

 Thống kê sản phẩm đã bán theo năm, tháng, – Dành cho Admin

 Quản lý tài khoản (User, User bán hàng)

 Quản lý Danh mục sản phẩm

 Thống kê sản phẩm đã bán năm, tháng,

 Quản lý banner quảng cáo

 Quản lý mã giảm giá

CƠ SỞ LÝ THUYẾT 2.1 MÔ HÌNH MVC

MVC, viết tắt của Model – View – Controller, là một mô hình thiết kế phổ biến trong kỹ thuật phần mềm Mô hình này chia source code thành ba phần tương ứng với từng thành phần: Model, View và Controller Mỗi phần đảm nhận một chức năng riêng biệt, giúp tách biệt các hoạt động trong ứng dụng.

Model (M) là phần quan trọng trong ứng dụng, có chức năng lưu trữ toàn bộ dữ liệu và đóng vai trò cầu nối giữa View và Controller Model có thể được thể hiện dưới dạng cơ sở dữ liệu hoặc file XML, cho phép thực hiện các thao tác như xem, truy xuất và xử lý dữ liệu.

View (V) là phần giao diện trong mô hình MVC, nơi người dùng có thể truy cập thông tin dữ liệu thông qua các thao tác như tìm kiếm trên website Nó đóng vai trò quan trọng trong việc tạo ra các thành phần HTML và ghi nhận hoạt động của người dùng để tương tác với Controller Tuy nhiên, View không có mối quan hệ trực tiếp với Controller và không lấy dữ liệu từ Controller, mà chỉ hiển thị yêu cầu chuyển đến Controller.

Controller (C) là bộ phận chịu trách nhiệm xử lý các yêu cầu từ người dùng thông qua giao diện (view) Nó cung cấp dữ liệu phù hợp cho người dùng và đồng thời kết nối với model để đảm bảo tính toàn vẹn của dữ liệu.

2.1.2 Luồng tương tác giữa các thành phần trong MVC

– View sẽ hiển thị ra phần nhập form tiêu đề và nội dung

– Controller lấy dữ liệu từ 2 trường và gửi tới Model

Mô hình MVC nhận dữ liệu từ Controller để lưu trữ vào cơ sở dữ liệu, với mỗi bộ phận thực hiện chức năng riêng nhưng vẫn liên kết chặt chẽ, tạo nên sự thống nhất Mô hình này nhẹ và có khả năng tích hợp nhiều tính năng hiện có trong ASP.NET.

2.1.3 Ưu - nhược điểm của mô hình MVC a Ưu điểm

Với MVC, việc kiểm tra và rà soát lỗi phần mềm trở nên dễ dàng hơn, giúp đảm bảo chất lượng sản phẩm trước khi đến tay người tiêu dùng, từ đó nâng cao độ uy tín và tin cậy.

Chức năng control trên các website đóng vai trò quan trọng với các ngôn ngữ lập trình như CSS, HTML và JavaScript Việc áp dụng mô hình MVC giúp tạo ra một bộ control hiệu quả, tận dụng các ngôn ngữ hiện đại với nhiều hình thức khác nhau.

View là nơi lưu trữ dữ liệu và kích thước của nó sẽ tăng lên khi có nhiều yêu cầu được thực hiện, dẫn đến tốc độ tải trang bị giảm Việc áp dụng mô hình MVC giúp tối ưu hóa băng thông, tiết kiệm diện tích và cải thiện hiệu suất tải trang.

– Chức năng Soc (Separation of Concern): Chức năng này cho phép bạn phân tách rõ ràng các phần như Model, giao diện, data, nghiệp vụ

MÔ HÌNH THƯƠNG MẠI ĐIỆN TỬ B2C, C2C

Mô hình kinh doanh B2C, hay còn gọi là Business to Customer, là hình thức giao dịch thương mại giữa doanh nghiệp và người tiêu dùng cuối cùng.

Thuật ngữ "bán trực tiếp cho người tiêu dùng" (B2C) truyền thống đề cập đến việc bán sản phẩm qua cửa hàng hoặc nhà hàng Hiện nay, nó bao gồm cả giao dịch giữa các nhà bán lẻ trực tuyến và khách hàng Hầu hết các doanh nghiệp hoạt động theo mô hình này đều thuộc loại B2C.

B2C là mô hình giao dịch phổ biến được nhiều doanh nghiệp và cá nhân ưa chuộng, mang lại lợi ích đa dạng và hiệu quả trong việc mua bán Qua đó, các doanh nghiệp có thể khẳng định vị thế trên thị trường và xây dựng thương hiệu thành công khi hợp tác với khách hàng.

Trong bối cảnh phát triển mạnh mẽ của Internet, mô hình B2C (Business to Consumer) đã trở thành hình thức bán hàng phổ biến trên toàn cầu Thay vì mua sắm tại các trung tâm thương mại hay thanh toán cho dịch vụ như xem phim và ăn uống tại nhà hàng, B2C hiện nay chủ yếu diễn ra qua thương mại điện tử và bán hàng trực tuyến.

C2C, viết tắt của cụm từ Consumer To Consumer, là mô hình kinh doanh cho phép người tiêu dùng giao dịch trực tiếp với nhau, thường diễn ra trong môi trường trực tuyến Mô hình này bao gồm các giao dịch thương mại điện tử giữa người tiêu dùng thông qua một bên thứ ba, như các trang web trung gian đấu giá hoặc bán hàng.

C2C, hay còn gọi là mô hình thương mại giữa khách hàng với khách hàng, cho phép người tiêu dùng mua bán hàng hóa trực tiếp từ nhau thông qua các nền tảng bên thứ ba Mô hình này đã phát triển mạnh mẽ nhờ sự bùng nổ của công nghệ thương mại điện tử và xu hướng kinh tế chia sẻ.

NGÔN NGỮ LẬP TRÌNH

ReactJs là một thư viện JavaScript mã nguồn mở do Facebook phát triển, giúp lập trình viên dễ dàng quản lý và phát triển web Nó hỗ trợ xây dựng giao diện người dùng (UI) với tính tương tác cao thông qua các component React hoạt động trên cả client và server, cho phép kết nối liền mạch giữa hai phần này Kể từ khi ra mắt vào năm 2013, React đã vượt qua các đối thủ như Angular và Bootstrap, trở thành một trong những thư viện JavaScript phổ biến nhất.

React là một thư viện GUI mã nguồn mở bằng JavaScript, chuyên tập trung vào việc hoàn thành các nhiệm vụ giao diện người dùng một cách hiệu quả Thư viện này được phân loại theo kiểu trong mô hình MVC (Model-View-Controller).

React cho phép lập trình viên tái sử dụng các components đã phát triển cho các ứng dụng khác có cùng chức năng, mang lại lợi thế nổi bật trong việc tiết kiệm thời gian và công sức Tính năng này không chỉ nâng cao hiệu quả phát triển mà còn giúp duy trì sự nhất quán trong thiết kế và chức năng của các ứng dụng.

– React component dễ viết hơn vì nó sử dụng JSX, mở rộng cú pháp tùy chọn cho JavaScript cho phép kết hợp HTML với JavaScript

JSX là sự kết hợp hoàn hảo giữa JavaScript và HTML, giúp đơn giản hóa quá trình xây dựng cấu trúc trang web Bên cạnh đó, phần mở rộng này cũng hỗ trợ việc render nhiều lựa chọn một cách dễ dàng hơn.

JSX có thể không phải là phần mở rộng cú pháp phổ biến nhất, nhưng nó đã chứng minh hiệu quả trong việc phát triển các components đặc biệt và ứng dụng có khối lượng lớn.

React tối ưu hóa quá trình cập nhật DOM (Mô hình đối tượng tài liệu), giúp giảm thiểu những khó khăn thường gặp trong các dự án ứng dụng web Nhờ vào việc sử dụng virtual DOM, React cho phép bạn tránh được những vấn đề phiền phức liên quan đến hiệu suất.

React cung cấp khả năng tạo giao diện người dùng tối ưu cho các công cụ tìm kiếm, điều này mang lại lợi thế đáng kể vì không phải tất cả các khung JavaScript đều hỗ trợ tốt cho SEO.

HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu chủ yếu được sử dụng để tạo ra các trang web trên Internet Cùng với CSS và JavaScript, HTML đóng vai trò quan trọng trong thiết kế website Được phát triển từ SGML, HTML phục vụ cho các tổ chức có yêu cầu xuất bản phức tạp và đã trở thành tiêu chuẩn Internet do W3C duy trì Phiên bản chính thức mới nhất của HTML là HTML5, thay thế cho HTML 4.01 (1999) và XHTML.

CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để định dạng và trình bày tài liệu HTML và XHTML Ngoài ra, CSS còn có thể áp dụng cho các ngôn ngữ khác như XML, SVG và XUL Các tiêu chuẩn kỹ thuật của CSS được quản lý bởi Tổ chức W3C (World Wide Web Consortium).

JavaScript, phiên bản hiện tại, là một ngôn ngữ lập trình thông dụng được phát triển từ các ý niệm nguyên mẫu, chủ yếu sử dụng cho cả phía người dùng và phía máy chủ thông qua Node.js Được sáng tạo bởi Brendan Eich tại Netscape, ngôn ngữ này ban đầu mang tên Mocha, sau đó đổi thành LiveScript và cuối cùng là JavaScript Cú pháp của JavaScript tương tự như C nhưng gần gũi hơn với Self Tập tin mã nguồn JavaScript thường có phần mở rộng là js Phiên bản mới nhất hiện nay là ECMAScript7, một tiêu chuẩn hóa cho JavaScript.

Mozilla phiên bản 1.8 beta có hỗ trợ không đầy đủ cho E4X – phần mở rộng cho JavaScript hỗ trợ làm việc với XML, được chuẩn hóa trong ECMA-357

CÔNG CỤ SỬ DỤNG

Visual Studio Code là trình biên tập mã mạnh mẽ do Microsoft phát triển, tương thích với Windows, Linux và macOS Nó cung cấp các tính năng như debug, tích hợp Git, syntax highlighting, tự hoàn thành mã thông minh và snippets, giúp cải thiện hiệu suất lập trình Ngoài ra, Visual Studio Code cho phép người dùng tùy chỉnh giao diện, phím tắt và các tùy chọn khác để phù hợp với nhu cầu cá nhân.

Visual Studio Code là phần mềm miễn phí và mã nguồn mở, mặc dù gói tải xuống chính có giấy phép Được phát triển trên nền tảng Electron, phần mềm này cho phép triển khai các ứng dụng Node.js trên máy tính cá nhân với động cơ bố trí Blink Tuy sử dụng nền tảng Electron, Visual Studio Code không phải là phiên bản khác của Atom, mà thực chất được xây dựng dựa trên trình biên tập Visual Studio Online, có tên mã là "Monaco".

Postman là công cụ phổ biến để thao tác với API, đặc biệt là REST, và được sử dụng rộng rãi trong việc thử nghiệm API Với Postman, người dùng có thể gọi Rest API mà không cần viết mã, hỗ trợ tất cả các phương thức HTTP như GET, POST, PUT, PATCH, DELETE, và cho phép lưu lại lịch sử các lần request để dễ dàng sử dụng lại khi cần.

THƯ VIỆN HỖ TRỢ

Bootstrap là một framework HTML, CSS và JavaScript giúp người dùng thiết kế website theo tiêu chuẩn nhất định, tối ưu hóa cho các thiết bị di động như điện thoại, iPad và tablet Framework này cung cấp nhiều thành phần cơ bản như typography, forms, buttons, tables, navigation, modals, và image carousels Ngoài ra, Bootstrap còn tích hợp nhiều component và JavaScript hỗ trợ, giúp quá trình thiết kế responsive trở nên dễ dàng, thuận tiện và nhanh chóng hơn.

Google Font là một thư viện miễn phí cung cấp nhiều loại phông chữ đa dạng cho thiết kế website, giúp người dùng dễ dàng lựa chọn và áp dụng cho các dự án của mình.

Font Awesome là thư viện nổi tiếng cung cấp các biểu tượng hình ảnh cho website, giúp người dùng dễ dàng chèn các icon vào layout Thư viện này hỗ trợ nhiều định dạng font khác nhau như OTF, EOT, TTF, cho phép người dùng linh hoạt trong việc sử dụng Ngoài ra, Font Awesome tương thích với hầu hết các hệ điều hành, đảm bảo hoạt động mượt mà trên các thiết bị khác nhau.

Font này cung cấp 10 kiểu icon khác nhau, cho phép bạn kết hợp với CSS3 để tạo ra những hiệu ứng icon đẹp mắt và chuẩn xác hơn, vượt trội hơn so với các icon thông thường.

Material UI là một thư viện React Component tích hợp Google's Material Design, được phát triển từ niềm đam mê với React và thiết kế của Google Trang chủ của Material UI khuyến nghị sử dụng thư viện này cùng với React để tạo ra giao diện mới mẻ cho trang web của bạn Với các thành phần như button, textfield, và toggle được thiết kế độc đáo, Material UI mang đến sự khác biệt so với việc sử dụng Bootstrap phổ biến hiện nay.

PHÂN TÍCH VÀ THIẾT KẾ

PHÂN TÍCH CHỨC NĂNG CỦA WEBSITE

3.1.1 Chức năng của Khách hàng a Đăng ký Đầu vào: Chức năng cho phép người dùng trở thành thành viên của website Khi đã trở thành thành viên họ mới được phép mua các sản phẩm trên website Các thông tin đăng ký thành viên gồm:

Người dùng cần nhập đầy đủ và chính xác thông tin theo yêu cầu hệ thống Sau khi nhấn nút đăng ký, hệ thống sẽ kiểm tra thông tin Nếu tài khoản đã tồn tại, thông báo "Email đã đăng ký tài khoản!" sẽ hiển thị Trong trường hợp thông tin không đầy đủ hoặc không chính xác, hệ thống sẽ thông báo lỗi tương ứng Ngược lại, nếu thông tin hợp lệ, hệ thống sẽ thông báo "Đăng ký thành công" Sau đó, người dùng có thể đăng nhập vào website bằng tài khoản vừa đăng ký.

Sau khi người dùng đăng ký thành công, thông tin sẽ được lưu trữ trong cơ sở dữ liệu Hệ thống sẽ hiển thị thông báo thành công nếu người dùng cung cấp đầy đủ và chính xác thông tin; ngược lại, nếu thông tin bị sai hoặc bỏ trống, hệ thống sẽ thông báo lỗi Đối với chức năng đăng nhập, người dùng có thể truy cập vào hệ thống khi đã có tài khoản, với thông tin đăng nhập cần thiết.

Khi người dùng nhấn nút “Đăng nhập”, nếu thông tin không chính xác, hệ thống sẽ hiển thị thông báo lỗi “Tài khoản hoặc mật khẩu không chính xác” Nếu thông tin đúng, người dùng sẽ nhận thông báo đăng nhập thành công và được chuyển đến trang chủ Đối với việc tìm kiếm sản phẩm, khách hàng có thể nhanh chóng tìm kiếm bằng cách nhập tên sản phẩm cần mua.

Khi người dùng nhập thông tin tìm kiếm và nhấn nút tìm kiếm, hệ thống sẽ hiển thị sản phẩm nếu thông tin có trong cơ sở dữ liệu (CSDL) Ngược lại, nếu thông tin không có trong CSDL, hệ thống sẽ thông báo “Không có sản phẩm nào” Kết quả đầu ra là hiển thị thông tin sản phẩm cần tìm kiếm, đồng thời thông báo cho người dùng nếu sản phẩm không tồn tại Chức năng đặt hàng cho phép người dùng mua sản phẩm, yêu cầu cung cấp các thông tin cần thiết khi thực hiện giao dịch.

– Mã giảm giá (nếu có)

Để đặt hàng, người dùng cần đăng nhập vào hệ thống và điền đầy đủ thông tin theo yêu cầu Sau khi hoàn tất, chỉ cần nhấn nút “Đặt hàng” để hoàn tất quy trình.

Khi người dùng muốn mua hàng, họ cần chọn giỏ hàng và sản phẩm mong muốn, sau đó nhập đầy đủ thông tin cần thiết Hệ thống sẽ kiểm tra tính chính xác của thông tin đã nhập Nếu thông tin không đầy đủ, hệ thống sẽ hiển thị thông báo về các lỗi tương ứng.

– Trong quá trình tạo lập đơn hàng người dùng có thể sửa hoặc xóa thông tin giỏ hàng đã chọn

Sau khi người dùng hoàn tất việc tạo đơn hàng, thông tin đơn hàng sẽ được lưu trữ trong cơ sở dữ liệu Hệ thống sẽ hiển thị thông báo xác nhận đặt hàng thành công cùng với chi tiết đơn hàng mà khách hàng đã thực hiện Ngoài ra, chức năng đánh giá sản phẩm cho phép người dùng gửi nhận xét về các sản phẩm đã mua, bao gồm việc nhập thông tin nhận xét hoặc đánh giá bằng hệ thống sao.

– Người dùng đánh giá sản phẩm bằng cách nhập các đánh giá của mình bên dưới sản phẩm

Người dùng có khả năng đánh giá sản phẩm thông qua hệ thống nhận xét và đánh giá (rating) Kết quả sẽ hiển thị các nhận xét từ khách hàng ngay bên dưới sản phẩm, giúp người tiêu dùng có cái nhìn tổng quan và chính xác hơn về chất lượng sản phẩm.

13 f Thêm sản phẩm vào giỏ hàng

Người dùng có thể dễ dàng thêm sản phẩm vào giỏ hàng bằng cách tìm kiếm sản phẩm mong muốn và nhấn nút "thêm vào giỏ hàng" Điều này giúp quản lý đơn hàng một cách hiệu quả hơn.

User có thể xem được tất cả các sản phẩm đã mua hoặc sản đã bị hủy

3.1.2 Chức năng của User bán hàng a Đăng ký Đầu vào: Chức năng cho phép người dùng trở thành thành viên của website Khi đã trở thành thành viên họ mới được phép mua các sản phẩm trên website Các thông tin đăng ký thành viên gồm:

Người dùng cần nhập đầy đủ và chính xác thông tin theo yêu cầu của hệ thống Sau khi nhấn nút đăng ký, hệ thống sẽ kiểm tra thông tin Nếu tài khoản đã tồn tại, hệ thống sẽ thông báo “Email đã đăng ký tài khoản!”; nếu thông tin không đầy đủ hoặc không chính xác, hệ thống sẽ hiển thị thông báo lỗi tương ứng Ngược lại, nếu thông tin hợp lệ, hệ thống sẽ thông báo “Đăng ký thành công”, cho phép người dùng đăng nhập vào website bằng tài khoản vừa tạo.

Sau khi đăng ký thành công, thông tin người dùng sẽ được lưu trữ trong cơ sở dữ liệu Hệ thống sẽ hiển thị thông báo thành công nếu người dùng nhập đúng và đầy đủ thông tin; ngược lại, nếu thông tin bị sai hoặc bỏ trống, hệ thống sẽ thông báo lỗi Đối với chức năng đăng nhập, người dùng cần có tài khoản và thông tin đăng nhập để truy cập vào hệ thống.

Sau khi người dùng nhấn nút “Đăng nhập”, nếu thông tin không chính xác, hệ thống sẽ hiển thị thông báo lỗi “Tài khoản hoặc mật khẩu không chính xác” Ngược lại, nếu thông tin đúng, người dùng sẽ nhận thông báo đăng nhập thành công và được chuyển đến trang chủ.

14 c Quản lý sản phẩm Đầu vào: User bán hàng có thể thêm, xóa, sửa sản phẩm của mình bao gồm các thành phần của sản phẩm

Người dùng cần cung cấp đầy đủ thông tin theo yêu cầu của hệ thống Nếu thông tin nhập vào không chính xác hoặc bị bỏ trống, hệ thống sẽ hiển thị thông báo lỗi Khi mọi thông tin đã được nhập đầy đủ và chính xác, sản phẩm sẽ được thêm vào cơ sở dữ liệu.

– User có thế xóa sản phẩm đã thêm

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

3.2.1 Sơ đồ Use case a Các tác nhân

Bảng 3.1: Bảng mô tả sơ đồ use case

STT Tác nhân Use case

Khách hàng cần đăng nhập vào hệ thống bằng cách cung cấp tên đăng nhập và mật khẩu Hệ thống sẽ kiểm tra thông tin này và thông báo kết quả thành công hoặc thất bại Nếu đăng nhập thành công, khách hàng sẽ được chuyển đến trang chủ; ngược lại, nếu thất bại, hệ thống sẽ hiển thị thông báo và yêu cầu khách hàng đăng nhập lại.

2 Đăng ký tài khoản: Hệ thống yêu cầu khách hàng cung cấp thông tin đăng ký, khách hàng nhập đầy đủ thông tin đăng ký

Hệ thống sẽ xác minh thông tin đăng ký của khách hàng Nếu thông tin hợp lệ, hệ thống sẽ thông báo đăng ký thành công Ngược lại, nếu thông tin không hợp lệ, hệ thống sẽ không cho phép đăng ký tài khoản.

Xem sản phẩm: Khách hàng có thể xem được tất cả các sản phẩm của trang website bằng cách truy cập vào trang sản phẩm của website

4 Tìm kiếm sản phẩm: Khách hàng nhập tên sản phẩm trên ô tìm kiếm để tìm kiếm sản phẩm mình muốn

Quản lý giỏ hàng: Khách hàng có thể xem được các sản phẩm đã có trong giỏ hàng cũng như có thể xóa các sản phẩm trong giỏ hàng

Thanh toán: Khách hàng nhập thông tin trong phần danh mục thanh toán để thanh toán tiền sản phẩm mà khách hàng cần mua

Khách hàng có thể gửi phản hồi về sản phẩm đã mua bằng cách truy cập vào trang liên hệ và điền thông tin cần thiết để chia sẻ ý kiến của mình.

Quản lý sản phẩm cho phép người quản lý hệ thống kiểm soát toàn bộ thông tin về các sản phẩm hiện có, bao gồm khả năng thêm, xóa và sửa đổi các sản phẩm trong cơ sở dữ liệu.

Quản lý đơn hàng cho phép người quản lý theo dõi và kiểm soát toàn bộ thông tin liên quan đến các đơn hàng của khách hàng Họ có quyền duyệt hoặc xóa các đơn hàng theo yêu cầu, đảm bảo quá trình xử lý đơn hàng diễn ra hiệu quả và chính xác.

Người quản lý tài khoản có trách nhiệm quản lý toàn bộ thông tin của khách hàng đã đăng ký thành viên Họ có khả năng xem chi tiết thông tin của từng khách hàng và có thể xóa toàn bộ thông tin nếu cần thiết.

Quản lý nhà cung cấp: Người quản lý quản lý tất các nhà cung cấp sản phẩm cho trang website, có thể thêm xóa sửa các nhà cung cấp

Quản lý mã giảm giá: Người quản lý quản lý thông tin của các mã giảm giá, có thểm thêm các mã giảm giá hoặc có thể xóa nó

Quản lý đăng nhập của Admin yêu cầu người quản lý nhập thông tin đầy đủ và chính xác Hệ thống sẽ kiểm tra thông tin đã nhập; nếu đúng, người quản lý sẽ được chuyển đến trang quản lý, ngược lại, nếu thông tin sai, hệ thống sẽ thông báo lỗi cho người quản lý.

15 Quản lý banner: Người quản lý có thể thao tác với banner quảng cáo của website bao gồm: thêm, xóa, sửa

Quản lý danh mục là nhiệm vụ của người quản lý, người có trách nhiệm quản lý tất cả các danh mục sản phẩm trên website Họ có khả năng thêm, xóa hoặc sửa đổi các danh mục sản phẩm để đảm bảo nội dung luôn được cập nhật và phù hợp.

17 Quản lý Slide: Người quản lý có thể thao tác với Slide của website bao gồm: thêm, xóa, sửa

18 Quản lý thông báo: Người quản lý có thể thấy được tất cả thông báo và có thể xóa những thông báo đã xem

Quản lý đơn vị vận chuyển cho phép người quản lý kiểm soát toàn bộ các đơn vị vận chuyển trên website, đồng thời có khả năng thêm hoặc xóa các đơn vị này một cách dễ dàng.

Quản lý sản phẩm cho phép người bán hàng dễ dàng kiểm soát toàn bộ thông tin về các sản phẩm hiện có, đồng thời thực hiện các thao tác thêm, xóa và sửa đổi các sản phẩm trong cơ sở dữ liệu.

Quản lý đơn hàng cho phép người bán theo dõi và quản lý thông tin chi tiết về các đơn hàng mà khách hàng đã đặt Người bán có khả năng duyệt thông tin đơn hàng hoặc xóa những đơn hàng không cần thiết của khách hàng.

Quản lý mã giảm giá: User bán hàng quản lý thông tin của các mã giảm giá, có thểm thêm các mã giảm giá hoặc có thể xóa nó

23 Gửi mail Marketing: User bán hàng có thể gửi gmail thông tin các sản phẩm giảm giá đang có của mình

24 Cài đặt Shop: User bán hàng có thể cập nhật thông tin hiển thị của shop

Hệ thống yêu cầu khách hàng cung cấp tên đăng nhập và mật khẩu để đăng nhập Sau khi kiểm tra thông tin, hệ thống sẽ thông báo kết quả thành công hoặc thất bại Nếu đăng nhập thành công, khách hàng sẽ được chuyển đến trang chủ; ngược lại, nếu thất bại, hệ thống sẽ hiển thị thông báo và yêu cầu người dùng đăng nhập lại.

26 Đăng ký tài khoản: Hệ thống yêu cầu khách hàng cung cấp thông tin đăng ký, khách hàng nhập đầy đủ thông tin đăng ký

Hệ thống sẽ xác minh thông tin đăng ký của khách hàng Nếu thông tin hợp lệ, khách sẽ nhận được thông báo đăng ký thành công Ngược lại, nếu thông tin không hợp lệ, hệ thống sẽ không cho phép đăng ký tài khoản.

20 b Sơ đồ use case tổng quát

Hình 3.1: Sơ đồ Use case tổng quát

21 c Đặc tả sơ đồ use case

Bảng 3.2: Bảng đặc tả sơ đồ use case đăng ký tài khoản

Tên Đăng ký Định nghĩa Khách hàng muốn đăng ký làm thành viên của hệ thống

Tác nhân Khách hàng Điều kiện tiên quyết Khách hàng truy cập vào trang đăng ký của website

Dòng sự kiện chính 1 Từ giao diện chính khách hàng chọn đăng nhập

2 Hệ thống hiển thị giao diện đăng ký, yêu cầu khách hàng nhập thông tin cá nhân vào form đăng ký

3 Khách hàng nhập thông tin cá nhân sau đó nhấn nút đăng ký

4 Hệ thống kiểm tra thông tin đăng ký nếu thông tin đăng ký hợp lệ thì hệ thống sẽ thêm tài khoản vào CSDL và thông báo đăng ký tài khoản thành công ngược lại thì hệ thống sẽ thông báo thêm tài khoản thất bại

Dòng sự kiện thay thế Hiển thị thông báo thông tin không hợp lệ Điều kiện sau Khách hàng đã đăng ký thành công

Hình 3.2: Sơ đồ use case đăng ký tài khoản

Bảng 3.3: Bảng đặc tả sơ đồ use case đăng nhập

Tên Đăng nhập Định nghĩa Khách hàng muốn đăng nhập vào hệ thống website

Tác nhân Khách hàng Điều kiện tiên quyết Khách hàng truy cập vào giao diện trang đăng nhập

Dòng sự kiện chính 1 Từ giao diện khách hàng chọn đăng nhập

2 Hệ thống hiển thị giao diện đăng nhập, yêu cầu khách hàng nhập tên tài khoản và mật khẩu

3 Khách hàng nhập tên tài khoản và mật khẩu, chọn đăng nhập

4 Hệ thống kiểm tra thông tin tài khoản và mật khẩu, nếu nhập đúng thì hệ thống sẽ thông báo đăng nhập thành công và chuyển người dùng về trang chủ, ngược lại thì hệ thống sẽ thông báo lỗi đăng nhập thất bại

Dòng sự kiện thay thế Hiển thị thông báo thông tin không hợp lệ Điều kiện sau Khách hàng đã đăng nhập thành công

Hình 3.3: Sơ đồ use case đăng nhập

Bảng 3 4: Bảng đặc tả sơ đồ use case quản lý đơn hàng

Tên Quản lý đơn hàng Định nghĩa User bán hàng quản lý đơn hàng

Tác nhân User bán hàng Điều kiện tiên quyết User bán hàng truy cập vào trang quản lý đơn hàng

Dòng sự kiện chính 1 Từ giao diện trang chính quản lý đơn hàng

2 Hệ thống sẽ hiển thị toàn bộ thông tin tất cả đơn hàng

3 User bán hàng có thể kiểm tra thông tin chi tiết đơn hàng tại đây, hoặc nhấn vào button xác nhận đơn hàng

Dòng sự kiện thay thế 1 Hiển thị thông báo không có đơn hàng nào Điều kiện sau Hiển thị toàn bộ đơn hàng

Hình 3.4: Sơ đồ use case quản lý đơn hàng

Bảng 3.5: Bảng đặc tả sơ đồ use case quản lý sản phẩm

Tên Quản lý sản phẩm Định nghĩa User bán hàng quản lý sản phẩm

KẾT QUẢ

GIAO DIỆN USER

– Giao diện trang chủ với các phần hiển thị: Header, Menu, Slider, Product content, footer, Banner quảng cáo

Header của trang web bao gồm bốn phần chính: logo website, thanh tìm kiếm giúp khách hàng dễ dàng tìm kiếm sản phẩm mong muốn, khu vực đăng nhập cho phép người dùng truy cập tài khoản, và phần giỏ hàng hiển thị thông tin các sản phẩm đã được thêm vào.

– Phần menu chứa danh sách các trang được hiển thị trong website

– Phần silder hiển thị phần nội dung quản cáo của website

– Phần Banner hiển thị hình ảnh các Banner quảng cáo của website

Nội dung sản phẩm trên website sẽ hiển thị thông tin chi tiết về các mặt hàng, được phân chia thành nhiều mục như: Flash sale, Shop mall, gợi ý, sản phẩm bán chạy, và danh mục sản phẩm hiện có Khách hàng có thể dễ dàng lựa chọn sản phẩm mong muốn hoặc tìm kiếm các mặt hàng giảm giá ngay tại đây.

– Phần footer sẽ hiển thị thông tin của website cũng như cách để liên hệ trực tiếp với người quản lý website

Hình 4.1: Giao diện trang chủ trên máy tính

Hình 4.2: Giao diện trang chủ trên điện thoại

– Trang đăng nhập sẽ hiển thị một Form yêu cầu khách hàng nhập thông tin vào để có thể đăng nhập vào hệ thống của website.

– Khách hàng phải đăng nhập đầy đủ thông tin chính xác thì mới có thể đăng nhập vào website

– Khách hàng cũng có thể đăng nhập vào Website bằng Google hoặc Facebook

Hình 4.3: Trang đăng nhập khách hàng 4.1.3 Trang đăng ký

– Giao diện hiển thị của trang đăng ký là một Form các trường để khách hàng nhập thông tin để đăng ký tài khoản tại website

– Khách hàng nhập đầy đủ thông tin trong trang đăng ký sau đó nhấn vào đăng đăng ký

Hình 4.4: Trang đăng ký khách hàng

Sau khi hoàn tất việc đăng ký tài khoản, khách hàng sẽ nhận được một mã xác nhận gửi đến Email Vui lòng kiểm tra Email và nhập mã xác nhận để hoàn tất quá trình đăng ký tài khoản.

Hình 4.5: Trang nhập mã xác nhận của khách hàng 4.1.4 Trang sản phẩm Đây là trang hiển thị tất cả sản phẩm có trong Website

Khách hàng có thể dễ dàng quản lý các sản phẩm đã chọn mua, bao gồm khả năng xóa sản phẩm, điều chỉnh số lượng, xem chi tiết sản phẩm và đặt hàng chỉ bằng một cú nhấn vào nút đặt hàng.

Hình 4.7: Trang giỏ hàng 4.1.6 Trang đặt hàng

Giao diện đặt hàng hiển thị đầy đủ thông tin đơn hàng của khách hàng Khách hàng có thể dễ dàng chỉnh sửa thông tin giao hàng như họ tên, quốc gia, tỉnh/thành phố, địa chỉ và số điện thoại bằng cách nhấn vào nút chỉnh sửa.

– Khách hàng cũng có thể gửi lời nhắn kèm theo cho shop bán sản phẩm

– Khách hàng có thể tùy chọn đơn vị vận chuyển kèm theo

– Khách hàng có thể chọn Voucher giảm giá nếu có

4.1.7 Trang chi tiết sản phẩm

Giao diện trang chi tiết sản phẩm được thiết kế nhằm cung cấp thông tin đầy đủ về sản phẩm, giúp khách hàng nắm bắt tất cả các thông tin cần thiết liên quan đến sản phẩm.

 Thông tin chi tiết về giá, thương hiệu, số lượng, tình trạng sản phẩm

 Giới thiệu các đặt điểm nỗi bật của sản phẩm

 Khách hàng còn có thể xem đánh giá, thích sản phẩm qua phần bình luận của các khách hàng đã mua trước đây

– Khách hàng có thể thêm sản phẩm vào giỏ hàng hoặc xem các sản phẩm liên quan đến sản phẩm khách hàng cần mua ở phía dưới

– Khách hàng cũng có thể nhắn tin trực tiếp với shop bán sản phẩm để biết thêm thông tin của sản phẩm

Hình 4.9: Trang chi tiết sản phẩm

4.1.8 Trang quản lý đơn hàng

– Hiển thị toàn bộ thông tin các đơn hàng bao gồm: đơn hàng thành công, đơn hàng bị hủy, đơn hàng đang giao, đơn hàng chờ lấy sản phẩm

– Khách hàng cũng có thể xem lại tổng số tiền thanh toán sản phẩm tại đây

Hình 4.10: Trang quản lý đơn hàng 4.1.9 Trang thông tin chi tiết Khách hàng

Tại đây, khách hàng có thể xem tất cả thông tin chi tiết về tài khoản của mình Ngoài ra, khách hàng còn có khả năng chỉnh sửa các thông tin như số điện thoại, giới tính, ngày sinh và địa chỉ giao hàng.

Hình 4.11: Trang thông tin chi tiết của khách hàng

4.1.10 Trang quản lý thông báo

Tại đây khách hàng sẽ thấy được tất cả thông báo từ website

Hình 4.12: Trang quản lý thông báo 4.1.11 Trang tìm kiếm sản phẩm

Khách hàng có thể dễ dàng tìm kiếm sản phẩm bằng cách nhập tên sản phẩm vào thanh tìm kiếm Tại đây, họ có tùy chọn sắp xếp sản phẩm theo giá từ thấp đến cao hoặc từ cao đến thấp Ngoài ra, khách hàng cũng có thể nhập mức giá cụ thể để tìm kiếm sản phẩm phù hợp với nhu cầu của mình.

– Khách hàng có thể sử dụng bộ lọc tìm kiếm để có thể tìm kiếm được những sản phẩm tốt nhất

Hình 4.13: Trang tìm kiếm sản phẩm

GIAO DIỆN USER BÁN HÀNG

– Hiển thị toàn bộ tin thông tin của User bán hàng bao gồm tổng số sản phẩm, số đơn hàng, người theo dõi và lượt đáng giá

– Tại đây cũng hiển thị các biểu đồ phân tính bán hàng, thông tin sản phẩm theo tháng, thông tin đơn hàng theo tháng

Hình 4.14: Trang chủ User bán hàng

4.2.2 Trang quản lý sản phẩm

– Tại đây hiển thị toàn bộ tất cả sản phẩm của User bán hàng

– User bán hàng có thể tìm kiếm sản phẩm theo tên hoặc ngày đặt hàng

Hình 4.15: Trang quản lý sản phẩm User bán hàng

Tại đây User bán hàng cần nhập đầy đủ thông tin của sản phẩm, sau đó nhấn vào Button “LƯU & HIỂN THỊ” thị để tạo sản phẩm

Hình 4.16: Trang thêm sản phẩm User bán hàng

Tại đây, người bán hàng có thể truy cập toàn bộ thông tin chi tiết về sản phẩm Họ cũng có khả năng thêm, xóa hoặc chỉnh sửa các thông tin này một cách dễ dàng.

Hình 4.17: Trang sửa sản phẩm User bán hàng

4.2.5 Trang quản lý đơn hàng

– Tại đây User bán hàng có thể nhìn thấy được toàn bộ các đơn hàng đã được khách hàng đặt

– User bán hàng có quyền điều chỉnh trạng thái của đơn hàng hiện tại

Hình 4.18: Trang quản lý đơn hàng

4.2.6 Trang quản lý gửi mail Marketing

Tại đây User bán hàng có thể gửi Email Marketing sản phẩm của mình cho các khách hàng đăng ký nhận thông tin khuyến mãi

Hình 4.19: Trang quản lý gửi mail Marketing 4.2.7 Trang quản lý mã giảm giá

– Tại đây User bán hàng có thể thấy toàn bộ thông tin các mã giảm giá đã tạo – User bán hàng có thể xóa hoặc ẩn mã giả giá

Hình 4.20: Trang quản lý mã giảm giá

4.2.8 Trang tạo mã giảm giá

User bán hàng cần phải nhập đầy đủ và chính xác các thông tin để có thể tạo mã giảm giá

Hình 4.21: Trang tạo mã giảm giá 4.2.9 Trang quản lý shop

Tại đây User Bán hàng có thể chỉnh sửa thông tin của mình bao gồm ảnh đại diện, tên shop, địa chỉ và mô tả

Hình 4.22: Trang quản lý shop

GIAO DIỆN ADMIN

– Giao diện trang đăng nhập của Admin gồm 2 trường một là trường để nhập

“Email”, trương thứ hai là để nhập “Password”

Để đăng nhập vào hệ thống quản lý, Admin cần nhập đầy đủ thông tin đăng nhập Nếu thông tin không chính xác, hệ thống sẽ thông báo lỗi và không cho phép đăng nhập Ngược lại, nếu thông tin đúng, Admin sẽ được chuyển đến trang chủ quản lý.

Hình 4.23: Trang đăng nhập Admin

– Trang giao diện trang chủ của Admin được chia thành 2 phần: thanh menu phía trên và nội dung của trang web phía dưới

Trong giao diện trang chủ, bên phải có danh sách các danh mục quản lý mà Admin có quyền kiểm soát Admin có khả năng chọn từng danh mục để xem thông tin chi tiết và thực hiện các thao tác như xóa hoặc sửa đổi thông tin trong đó.

Tại đây hiển thị toàn bộ thông tin chi tiết của Admin bao gồm: số điện thoại, username, Email, địa chỉ

Hình 4.25: Trang thông tin Admin 4.3.4 Trang mã giảm giá

Tại đây Admin có thể xem được thông tin của các mã giảm giá và có thể thêm hoặc xóa mã giảm giá

Hình 4.26: Trang mã giảm giá Admin

4.3.5 Trang tạo Mã giảm giá

Tại đây Admin bắt buộc phải điền đầy đủ thông tin để tạo ra một mã giảm giá mới

Hình 4.27: Trang tạo mã giảm giá 4.3.6 Trang gửi Mã giảm giá

Admin nhập thông tin của email và lựa các Email cần gửi mã giảm giá

Hình 4.28: Trang gửi mã giảm giá

Tại đây quản lý tất cả các Banner trong website, Admin có thể thêm, xóa, sửa các Banner trong website

Hình 4.29: Trang quản lý Banner 4.3.8 Trang quản lý Slide

Quản lý tất cả hình ảnh Slide trên website tại đây, cho phép Admin xem thông tin chi tiết bao gồm tên, trạng thái và hình ảnh của từng Slide.

Hình 4.30: Trang quản lý Slide

Tại đây yêu cầu Admin phải nhập đầy đủ toàn bộ thông tin để tạo ra Slide mới

Hình 4.31: Trang thêm Slide 4.3.10 Trang quản lý Menu

Quản lý thông tin menu một cách toàn diện, admin có thể xem chi tiết các mục như tên menu, hình ảnh, danh mục cha và trạng thái hiện tại của menu.

– Admin cũng có thể xóa menu đó ra khỏi Website

Hình 4.32: Trang quản lý Menu

Tại đây yêu cầu Admin phải nhập đầy đủ thông tin của menu thì mới có thể tạo được menu mới

Hình 4.33: Trang thêm Menu 4.3.12 Trang quản lý Sản phẩm

Admin có khả năng xem tất cả sản phẩm mà các người dùng đang bán Thông tin sản phẩm bao gồm hình ảnh, danh mục, tên sản phẩm và trạng thái sẽ được hiển thị đầy đủ.

Hình 4.34: Trang quản lý sản phẩm

4.3.13 Trang xem chi tiết Sản phẩm

Tại đây Admin xem được tất cả thông tin chi tiết của sản phẩm

Hình 4.35: Trang quản lý chi tiết sản phẩm 4.3.14 Trang quản lý tài khoản

Admin có khả năng quản lý toàn bộ thông tin tài khoản trên website, bao gồm tên tài khoản, email, số điện thoại và trạng thái.

Hình 4.36: Trang quản lý tài khoản

4.3.15 Trang xem chi tiết Tài khoản

Tại trang chi tiết tài khoản Admin có thể xem được thông tin chi tiết của tài khoản, bao gồm tất cả thông tin của tài khoản

Hình 4.37: Trang quản lý chi tiết tài khoản 4.3.16 Trang quản lý Đơn hàng

Tại trang quản lý đơn hàng, Admin có thể xem được tất cả đơn hàng đã thực hiện tại Website

Hình 4.38: Trang quản lý đơn hàng

4.3.17 Trang xem chi tiết Đơn hàng

Tại trang chi tiết đơn hàng Admin sẽ xem được toàn bộ thông tin đơn hàng, bao gồm người mua hàng, địa chỉ, tổng số tiền thanh toán,…

Hình 4.39: Trang xem chi tiết đơn hàng 4.3.18 Trang quản lý Thông báo

Trên trang quản lý thông báo, Admin có thể theo dõi thông tin về các đơn hàng và sản phẩm mới được thêm vào bởi các shop hoặc người dùng bán hàng.

Hình 4.40: Trang quản lý thông báo

4.3.19 Trang quản lý Đơn vị vận chuyển

Tại trang quản lý đơn vị vận chuyển Admin có thể quản lý đc thông tin mã đơn vị vận chuyển và trạng thái của đơn vị vận chuyển

Hình 4.41: Trang quản lý đơn vị vận chuyển 4.3.20 Trang thêm Đơn vị vận chuyển

Tại trang thêm đơn vị vận chuyển, Admin cần nhập đầy đủ thông tin để có thể thêm đơn vị vận chuyển mới vào Website

Hình 4.42: Trang thêm đơn vị vận chuyển

4.3.21 Trang quản lý giao diện Flash Sale

Tại đây Admin quản lý hiển thị của các sản phẩm trong danh mục hiển thị Flash Sale tại Website

Hình 4.43: Trang quản lý Flash sale 4.3.22 Trang quản lý Shop Mall

Tại trang quản lý Shop Mall, người dùng có thể dễ dàng thêm thông tin hiển thị cho Shop Mall, bao gồm hình ảnh và các sản phẩm kèm theo.

Hình 4.44: Trang quản lý Shop mall

4.3.23 Trang quản lý Email nhận thông báo

Tại đây Admin sẽ thấy được danh sách các Email đăng ký nhận thông tin khuyến mãi từ các shop

Hình 4.45: Trang quản lý Email nhận Thông báo

Ngày đăng: 11/10/2022, 07:51

HÌNH ẢNH LIÊN QUAN

hình vẽ Tên hình vẽ Trang - Xây dựng website sàn thương mại điện tử
hình v ẽ Tên hình vẽ Trang (Trang 9)
Bảng 3.9: Bảng đặc tả sơ đồ use case quản lý banner - Xây dựng website sàn thương mại điện tử
Bảng 3.9 Bảng đặc tả sơ đồ use case quản lý banner (Trang 37)
Hình 3.10: Sơ đồ use case quản lý slide - Xây dựng website sàn thương mại điện tử
Hình 3.10 Sơ đồ use case quản lý slide (Trang 38)
Hình 3.15: Sơ đồ tuần tự tìm kiếm sản phẩm của khách hàng - Xây dựng website sàn thương mại điện tử
Hình 3.15 Sơ đồ tuần tự tìm kiếm sản phẩm của khách hàng (Trang 43)
Bảng 3.12: Bảng mô tả lược đồ cơ sở dữ liệu - Xây dựng website sàn thương mại điện tử
Bảng 3.12 Bảng mô tả lược đồ cơ sở dữ liệu (Trang 62)
photoURL: text Hình ảnh - Xây dựng website sàn thương mại điện tử
photo URL: text Hình ảnh (Trang 65)
Hình 3.32: Lược đồ quan hệ cơ sở dữ liệu - Xây dựng website sàn thương mại điện tử
Hình 3.32 Lược đồ quan hệ cơ sở dữ liệu (Trang 66)
Hình 4.1: Giao diện trang chủ trên máy tính - Xây dựng website sàn thương mại điện tử
Hình 4.1 Giao diện trang chủ trên máy tính (Trang 68)
Hình 4.3: Trang đăng nhập khách hàng 4.1.3. Trang đăng ký - Xây dựng website sàn thương mại điện tử
Hình 4.3 Trang đăng nhập khách hàng 4.1.3. Trang đăng ký (Trang 70)
Hình 4.5: Trang nhập mã xác nhận của khách hàng 4.1.4. Trang sản phẩm - Xây dựng website sàn thương mại điện tử
Hình 4.5 Trang nhập mã xác nhận của khách hàng 4.1.4. Trang sản phẩm (Trang 71)
Hình 4.6: Trang sản phẩm - Xây dựng website sàn thương mại điện tử
Hình 4.6 Trang sản phẩm (Trang 71)
Hình 4.7: Trang giỏ hàng 4.1.6. Trang đặt hàng - Xây dựng website sàn thương mại điện tử
Hình 4.7 Trang giỏ hàng 4.1.6. Trang đặt hàng (Trang 72)
Hình 4.8: Trang đặt hàng - Xây dựng website sàn thương mại điện tử
Hình 4.8 Trang đặt hàng (Trang 72)
Hình 4.9: Trang chi tiết sản phẩm - Xây dựng website sàn thương mại điện tử
Hình 4.9 Trang chi tiết sản phẩm (Trang 73)
Hình 4.11: Trang thông tin chi tiết của khách hàng - Xây dựng website sàn thương mại điện tử
Hình 4.11 Trang thông tin chi tiết của khách hàng (Trang 74)

TRÍCH ĐOẠN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w