xây dựng website cho showroom vinfast

Kịch bản cho Usecase đặt mua sản phẩm Bảng 2.5: Kịch bản cho Usecase đăng ký đặt mua sản phẩm Tác nhân Khách thành viên, khách vãng lai Đầu vào Họ tên, số điện thoại, email, CMND/CCCD

Trang 1

Đà Nẵng, 01/2024 ĐẠI HỌC ĐÀ NẴNG

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG WEBSITE CHO SHOWROOM VINFAST

Sinh viên thực hiện : Trần Hải Nam

Mã sinh viên 1911505310237

Người hướng dẫn : ThS Nguyễn Thị Hà Quyên

Trang 2

ĐỀ TÀI:

XÂY DỰNG WEBSITE CHO SHOWROOM VINFAST

Giảng viên hướng dẫn duyệt

Trang 5

Tên đề tài: Xây dựng website cho showroom Vinfast Sinh viên thực hiện: Trần Hải Nam

Hiện nay việc xây dựng website cho showroom không còn quá xa lạ Nhằm mục đích phát triển và mở rộng nhiều chức năng, quản lý chuyên nghiệp và hữu ích hơn Từ đó tăng doanh số bán hàng, tiết kiếm thời gian công sức và giúp khách hàng tiếp cận sản phẩm dễ dàng hơn

Em mong muốn xây dựng website cho showroom Vinfast để giúp phát triển những mục tiêu nêu trên

Trang 6

Giảng viên hướng dẫn: ThS Nguyễn Thị Hà Quyên

1 Tên đề tài: Xây dựng website cho showroom Vinfast 2 Các số liệu, tài liệu ban đầu:

- Tài liệu: Tài liệu về ReactJs: https://legacy.reactjs.org/

Tài liệu về PHP: https:// https://www.php.net/

3 Nội dung chính của đồ án:

Quá trình Xây dựng website cho showroom Vinfast: - Thu thập thông tin tài liệu liên quan và khảo sát thực tế - Phân tích thiết kế các chức năng của hệ thống

- Phân tích thiết kế cơ sơ dữ liệu - Thiết kế giao diện cho các chức năng - Xây dựng hệ thống phần mềm

- Kiểm thử phần mềm - Hoàn thành báo cáo tổng hợp

4 Các sản phẩm dự kiến:

- Website hoàn chỉnh cho showroom Vinfast - File báo cáo hoàn chỉnh

5 Ngày giao đồ án: 04/09/2023 6 Ngày nộp đồ án: 21/01/2024

Đà Nẵng, ngày tháng năm 2024

Trang 7

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cả chiều rộng và sâu Máy tính điện tử không còn là một thứ phương tiện quý hiếm mà đang ngày càng trở thành một công cụ làm việc và giải trí thông dụng của con người, không chỉ ở công sở mà còn ngay cả trong gia đình

Đứng trước vai trò của thông tin hoạt động cạnh tranh gay gắt, các tổ chức và các doanh nghiệp đều tìm mọi biện pháp để xây dựng hoàn thiện hệ thống thông tin của mình nhằm tin học hóa các hoạt động tác nghiệp của đơn vị

Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện các giải pháp cũng như các sản phẩm nhằm cho phép tiến hành tự động hóa trên Internet Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu của website Với những thao tác đơn giản trên máy có nối mạng Internet bạn sẽ có tận tay những gì mình cần mà không phải mất nhiều thời gian Bạn chỉ cần vào các trang web làm theo hướng dẫn và click vào những gì bạn cần Các hoạt động sẽ thực hiện ngay trên hệ thống đó

Ở Việt Nam cũng có rất nhiều trường đại học tự động hóa các quy trình trên hệ thống website nhưng do những khó khăn về cơ sở hạ tầng như viễn thông chưa phát triển mạnh nên các quy trình vẫn còn rất nhiều sổ sách, giấy tờ thủ công dẫn đến thiếu hiệu quả, mất khá nhiều thời gian

Để tiếp cận và góp phần đẩy mạnh sự phổ biến và tiện ích của website, em/ đã tìm hiểu và cài đặt “Hệ thống website cho showroom Vinfast”

Với sự hướng dẫn tận tình của ThS Nguyễn Thị Hà Quyên em đã hoàn thành đồ án tốt nghiệp này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thống nhưng chắc rằng không tránh khỏi những thiếu sót Chúng em rất mong nhận được sự thông cảm và góp ý của quí Thầy cô

Chúng em xin chân thành cảm ơn!

Trang 8

Em xin cam đoan :

Trang 9

1.2 Hệ quản trị cơ sở dữ liệu MySQL 5

1.2.2 Visual Studio Code 5

1.2.3 Xampp 6

Chương 2 PHÂN TÍCH THIẾT KẾ HƯỚNG ĐỐI TƯỢNG 7

2.1 Khảo sát yêu cầu 7

Trang 10

2.2.4.1 Kịch bản cho Usecase đăng ký tài khoản 9

2.2.4.2 Kịch bản cho Usecase đăng nhập 10

2.2.4.3 Kịch bản cho Usecase tìm kiếm 10

2.2.4.4 Kịch bản cho Usecase cập nhật hồ sơ cá nhân 11

2.2.4.5 Kịch bản cho Usecase đặt mua sản phẩm 11

2.2.4.6 Kịch bản cho Usecase duyệt đơn hàng 12

2.2.4.7 Kịch bản cho Usecase thống kê 12

2.2.4.8 Kịch bản cho Usecase xuất dữ liệu 12

2.2.4.9 Kịch bản cho Usercase quản lý blog 13

2.2.4.10 Kịch bản cho Usecase bình luận blog 14

2.2.4.11 Kịch bản cho Usercase cập nhật banner 15

2.2.4.12 Kịch bản cho Usercase quản lý sản phẩm 16

2.2.4.13 Kịch bản cho Usercase quản lý tài khoản 18

2.2.4.14 Kịch bản cho Usecase xem lịch sử mua sản phẩm 19

2.2.4.15 Kịch bản cho Usecase xem tin tức 20

Trang 11

2.2.5.7 Viết blog 23

2.2.5.8 Cập nhật blog 24

2.2.5.9 Cập nhật banner 25

2.2.5.10 Cập nhật tài khoản 25

2.2.6 Phác thảo giao diện 26

2.2.6.1 Đăng ký tài khoản 26

Trang 12

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 44

3.1 Công cụ xây dựng chương trình 44

3.2 Giao diện chương trình 44

3.2.1 Giao diện trang chủ 44

3.2.2 Giao diện đăng ký 46

3.2.3 Giao diện đăng nhập 46

3.2.4 Giao diện tìm kiếm 47

3.2.5 Giao diện cập nhật hồ sơ 47

3.2.6 Giao diện đặt mua sản phẩm 48

3.2.7 Giao diện duyệt đơn hàng 50

3.2.8 Giao diện thống kê 51

3.2.9 Giao diện viết, chỉnh sửa và hiển thị blog 51

3.2.10 Giao diện tùy chỉnh và hiển thị banner 53

3.2.11 Giao diện tùy chỉnh sản phẩm 54

3.2.12 Giao diện quản lý tài khoản người dùng 55

3.2.13 Giao diện bình luận bài viết 56

3.2.14 Giao diện lịch sử đơn hàng 56

3.2.15 Giao diện bình luận bài viết 58

KẾT LUẬN & HƯỚNG PHÁT TRIỂN 59

TÀI LIỆU THAM KHẢO 60

Trang 13

Bảng 2.1: Kịch bản cho Usecase đăng ký tài khoản 9

Bảng 2.2: Kịch bản cho Usecase đăng nhập 10

Bảng 2.3: Kịch bản cho Usecase tìm kiếm 10

Bảng 2.4: Kịch bản cho Usecase cập nhật hồ sơ cá nhân 11

Bảng 2.5: Kịch bản cho Usecase đăng ký đặt mua sản phẩm 11

Bảng 2.6: Kịch bản cho Usecase duyệt đơn hàng 12

Bảng 2.7: Kịch bản cho Usecase thống kê 12

Bảng 2.8: Kịch bản cho Usecase xuất dữ liệu 12

Bảng 2.9: Kịch bản cho Usecase viết blog 13

Bảng 2.10: Kịch bản cho Usecase sửa blog 13

Bảng 2.11: Kịch bản cho Usecase xóa blog 14

Bảng 2.12: Kịch bản cho Usecase bình luận blog 14

Bảng 2.13: Kịch bản cho Usecase sửa banner 15

Bảng 2.14: Kịch bản cho Usecase xóa banner 15

Bảng 2.15: Kịch bản cho Usecase thêm banner 16

Bảng 2.16: Kịch bản cho Usecase sửa sản phẩm 16

Bảng 2.17: Kịch bản cho Usecase xóa sản phẩm 17

Bảng 2.18: Kịch bản cho Usecase thêm sản phẩm 17

Bảng 2.19: Kịch bản cho Usecase thêm tài khoản 18

Bảng 2.20: Kịch bản cho Usecase sửa tài khoản 18

Bảng 2.21: Kịch bản cho Usecase xóa tài khoản 19

Bảng 2.22: Kịch bản cho Usecase xem lịch sử mua sản phẩm 19

Bảng 2.23: Kịch bản cho Usecase xem tin tức 20

Bảng 2.24: Table VINFAST_ACCOUNT 33

Bảng 2.25: Table PRODUCTS 33

Bảng 2.26: Table LIST_CAR 35

Bảng 2.27: Table LIST_POST 36

Trang 15

Hình 1.1: Logo Reactjs 3

Hình 1.2: Logo php 5

Hình 1.3: Logo MySQL 5

Hình 1.4: Ảnh minh họa Visual Studio Code 6

Hình 1.5: Ảnh minh họa XamPP 6

Hình 2.1: Sơ đồ nghiệp vụ website cho showroom Vinfast 7

Hình 2.2: Sơ đồ User-case 9

Hình 2.3: Sơ đồ hoạt động tìm kiếm 20

Hình 2.4: Sơ đồ hoạt động đăng ký tài khoản 21

Hình 2.5: Sơ đồ hoạt động cập nhật hồ sơ 21

Hình 2.6: Sơ đồ hoạt động đặt mua sản phẩm 22

Hình 2.7: Sơ đồ hoạt động duyệt đơn hàng 22

Hình 2.8: Sơ đồ hoạt động thống kê 23

Hình 2.9: Sơ đồ hoạt động viết blog 24

Hình 2.10: Sơ đồ hoạt động cập nhật blog 24

Hình 2.11: Sơ đồ hoạt động cập nhật banner 25

Hình 2.12: Sơ đồ hoạt động cập nhật tài khoản 25

Hình 2.13: Giao diện đăng ký tài khoản 26

Hình 2.14: Giao diện cập nhật hồ sơ 26

Hình 2.15: Giao diện đặt mua sản phẩm 27

Hình 2.16: Giao diện duyệt đơn hàng 28

Hình 2.17: Giao diện thống kê 29

Hình 2.18: Giao diện viết blog 29

Hình 2.19: Giao diện cập nhật blog 30

Hình 2.20: Giao diện thêm banner 30

Hình 2.21: Giao diện cập nhật banner 30

Hình 2.22: Giao diện thêm sản phẩm 31

Trang 16

Hình 2.24: Giao diện thêm tài khoản 31

Hình 2.25: Giao diện cập nhật tài khoản 32

Hình 2.26: Giao diện bình luận blog 32

Hình 2.27: Giao diện lịch sử đơn hàng 32

Hình 2.28: Sơ đồ ERD 43

Hình 3.1: Giao diện trang chủ 45

Hình 3.2: Giao diện đăng ký 46

Hình 3.3: Giao diện đăng nhập 46

Hình 3.4: Giao diện tìm kiếm 47

Hình 3.5: Giao diện cập nhật hồ sơ 47

Hình 3.6: Giao diện đặt mua sản phẩm 49

Hình 3.7: Giao diện duyệt đơn hàng 50

Hình 3.8: Giao diện thống kê 51

Hình 3.9: Giao diện viết blog 52

Hình 3.10: Giao diện tùy chỉnh blog 52

Hình 3.11: Giao diện hiển thị các bài blog 53

Hình 3.12: Giao diện tùy chỉnh và hiển thị banner 53

Hình 3.13: Giao diện tùy chỉnh sản phẩm 54

Hình 3.14: Giao diện quản lý tài khoản người dùng 56

Hình 3.15: Giao diện bình luận 56

Hình 3.16: Giao diện đơn hàng trước khi được xác nhận 57

Hình 3.17: Giao diện đơn hàng sau khi xác nhận 57

Hình 3.18: Giao diện bình luận 58

Trang 17

STT Chữ viết tắt Mô tả Nghĩa tiếng việt

Trang 18

MỞ ĐẦU

1 Mục đích thực hiện đề tài

Cùng với sự phát triển vượt bậc về công nghệ thông tin và truyền thông Internet đã trở thành một phương tiện truyền thông và một nguồn thông tin lớn nhất của thế giới Việc ứng dụng công nghệ thông tin và truyền thông đã tạo ra một sự thay đổi lớn trong nhiều lĩnh vực, đặc biệt là trong lĩnh vực mua bán giới thiệu sản phẩm Với xu hướng ngày càng tăng của việc sử dụng dịch vụ trực tuyến, việc xây dựng một website giới thiệu mua bán là một hướng đi tất yếu của các đại lý showroom

Trong bối cảnh đó, em đã chọn đề tài “Xây dựng website cho showroom Vinfast" Đề tài này được đưa ra với mục đích tạo ra một môi trường trực tuyến cho người dùng tiếp cận sản phẩm của showroom một cách nhanh chóng và tiện lợi Website này sẽ giúp cho người dùng có thể xem thông tin sản phẩm trực tuyến, lựa chọn xe phù hợp với nhu cầu bản thân

2 Mục tiêu đề tài Mục tiêu: Xây dựng website cho showroom Vinfast nhằm mục đích phát triển và

mở rộng nhiều chức năng hơn, tạo nên một website quản lý chuyên nghiệp và hữu ích hơn để có thể đi sâu vào thực tiễn với các mục tiêu cụ thể như sau:

- Khách hàng xem được thông tin showroom, thông tin sản phẩm theo yêu cầu bản thân và đặt mua sản phẩm trực tuyến

Nhiệm vụ:

- Nghiên cứu đề tài - Phân tích thiết kế hệ thống - Thiết kế và xây dựng website

3 Phạm vi và đối tượng nghiên cứu a Đối tượng nghiên cứu

- Khách hàng có nhu cầu xem thông tin và mua trực tuyến - Quản lý sản phẩm trên hệ thống

b Phạm vi nghiên cứu

Website này có thể được ứng dụng cho showroom ô tô Vinfast

4 Phương pháp nghiên cứu

Tham khảo các website ô tô có sẵn trên thị trường như Vinfastauto, Autofun

Trang 19

5 Cấu trúc của đồ án tốt nghiệp

Bài báo cáo ngoài các nội dung gồm phần mở đầu và phần kết thúc thì bố cục gồm có 3 chương:

CHƯƠNG 1: TỔNG QUAN CHƯƠNG 2: CƠ SỞ LÝ THUYẾT Nêu các cơ sở lý thuyết sẽ áp dụng trong hệ thống: ngôn ngữ REACTJS, SCSS, JavaScript, ngôn ngữ lập trình PHP, hệ quản trị cơ sở dữ liệu MySQL

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG Trình bày các sơ đồ use case, kịch bản cho các use case, sơ đồ ERD, sơ đồ hoạt động của các chức năng trong hệ thống Từ những phân tích ở trên, tiến hành thiết kế cơ sở dữ liệu cho hệ thống sẽ triển khai

CHƯƠNG 4: DEMO CHƯƠNG TRÌNH Từ những phân tích và thiết kế về hệ thống ở trên, áp dụng xây dựng các chức năng hệ thống Trình bày giao diện của phần mềm triển khai

CHƯƠNG 5: KẾT LUẬN & HƯỚNG PHÁT TRIỂN

Trang 20

Chương 1 CƠ SỞ LÝ THUYẾT

1.1 Tổng quan về ngôn ngữ lập trình

1.1.1 REACTJS

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, chú trọng vào việc xây dựng giao diện người dùng (UI) ReactJS cho phép các nhà phát triển xây dựng các ứng dụng web đơn trang (Single Page Application - SPA) có hiệu suất cao và dễ bảo trì

Một trong những đặc điểm nổi bật của ReactJS là hệ thống component Component trong ReactJS là một khối xây dựng độc lập có thể được sử dụng lại và tái sử dụng trong các ứng dụng khác nhau Việc sử dụng component giúp giảm thiểu lặp lại code, giúp cho ứng dụng dễ bảo trì và phát triển

ReactJS cũng hỗ trợ một cú pháp gọi là JSX, cho phép các nhà phát triển viết HTML và JavaScript trong cùng một file JSX cho phép code được viết rõ ràng hơn và dễ đọc hơn

ReactJS cũng có cộng đồng lớn và phong phú, với rất nhiều tài liệu, thư viện và công cụ hỗ trợ cho việc phát triển ứng dụng Ngoài ra, ReactJS còn có khả năng tích hợp với nhiều công nghệ khác như Redux, React Native, NextJS, v.v

Tóm lại, ReactJS là một thư viện JavaScript rất mạnh mẽ, phổ biến trong việc xây dựng các ứng dụng web đơn trang có hiệu suất cao và dễ bảo trì

Hình 1.1: Logo Reactjs

1.1.2 SCSS

SCSS là một phần mở rộng của CSS, cung cấp cho người lập trình nhiều tính năng mở rộng và tiện ích hơn so với CSS thông thường SCSS là một ngôn ngữ định dạng CSS, nó cung cấp các tính năng như biến, lồng, mixins, toán học và các hàm, cải thiện khả năng tái sử dụng và giảm sự lặp lại của code

SCSS được sử dụng rộng rãi trong các dự án phát triển web để tăng tính hiệu quả, tăng khả năng bảo trì và giảm sự lặp lại của code SCSS có thể được biên dịch thành

Trang 21

CSS thông thường, giúp cho các trình duyệt web có thể hiểu và hiển thị trang web một cách chính xác

1.1.3 PHP

PHP, viết tắt của "PHP: Hypertext Preprocessor", là một ngôn ngữ lập trình mở rộng và phổ biến, chủ yếu được sử dụng cho việc phát triển web phía máy chủ (server- side) PHP có thể nhúng trực tiếp vào mã HTML và thường được kết hợp với các hệ quản trị cơ sở dữ liệu SQL như MySQL, MariaDB, và PostgreSQL để xây dựng các website động và ứng dụng web

Tạo ra bởi Rasmus Lerdorf vào năm 1994, PHP đã trải qua nhiều phiên bản và cải tiến, trở thành một trong những ngôn ngữ lập trình hàng đầu được sử dụng trên web Với cú pháp dễ học và một cộng đồng lớn, PHP mang đến một nền tảng lập trình linh hoạt và mạnh mẽ, phù hợp với cả người mới bắt đầu và các lập trình viên chuyên nghiệp

Một số đặc điểm nổi bật của PHP bao gồm: Tính linh hoạt và mềm dẻo: PHP có thể được sử dụng để phát triển các loại website khác nhau, từ các trang web cá nhân đơn giản đến các ứng dụng doanh nghiệp phức tạp

Tương thích trên nhiều nền tảng: PHP chạy trên hầu hết các hệ điều hành, bao gồm Windows, Linux và macOS, và hợp tác tốt với nhiều loại máy chủ web như Apache và Nginx

Hiệu suất: Các phiên bản mới nhất của PHP đã được tối ưu hóa về hiệu suất, với những cải tiến đáng kể về tốc độ và sử dụng bộ nhớ

Mở rộng và có thể mở rộng: PHP hỗ trợ hàng loạt các mở rộng (extensions) giúp mở rộng chức năng của nó, từ việc xử lý hình ảnh đến kết nối với các dịch vụ web khác

Cơ sở dữ liệu: PHP có khả năng tích hợp mạnh mẽ với hầu hết các hệ quản trị cơ sở dữ liệu, và hỗ trợ một loạt các công nghệ cơ sở dữ liệu, từ MySQL đến NoSQL databases như MongoDB

Cộng đồng hỗ trợ: PHP có một cộng đồng lập trình viên đông đảo và năng động, cùng với một kho lưu trữ rộng lớn các thư viện và frameworks như Laravel, Symfony, và CodeIgniter, giúp phát triển nhanh chóng và hiệu quả

PHP cũng được biết đến với khả năng quản lý session và cookie, tạo ra các hình ảnh động, và xử lý các dạng dữ liệu khác nhau Nó cung cấp nhiều tính năng như gửi email, tạo và quản lý tệp, và hơn thế nữa Dù có những tranh cãi về việc sử dụng PHP

Trang 22

so với các ngôn ngữ và công nghệ web mới hơn, PHP vẫn giữ một vị thế quan trọng trong lĩnh vực phát triển web hiện đại

Hình 1.2: Logo php

1.2 Hệ quản trị cơ sở dữ liệu MySQL

MySQL là một hệ thống quản trị cơ sở dữ liệu quan hệ (RDBMS) hoạt động theo mô hình client-server RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh MySQL rất thích hợp cho các ứng dụng có truy cập cơ sở dữ liệu trên internet

Hình 1.3: Logo MySQL

1.2.2 Visual Studio Code

Visual Studio Code được biết đến là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS Nó được phát triển bởi Microsoft là sự kết hợp hoàn hảo giữa IDE và Code Editor Trình biên tập này được hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, cùng đó là cải tiến mã nguồn Ngoài ra, Visual Studio Code còn cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác

Những ưu điểm nổi bật của Visual Studio Code: - Đa dạng ngôn ngữ lập trình giúp bạn thỏa sức sáng tạo như HTML, CSS,

JavaScript, C++,…

Trang 23

- Ngôn ngữ, giao diện tối giản, tinh tế, giúp người dùng dễ dàng định hình nội dung

- Các tiện ích mở rộng đa dạng, phong phú - Tích hợp các tính năng bảo mật (Git), tăng tốc xử lý vòng lặp (Debug),… - Có thể đơn giản trong việc tìm quản lý hết tất cả các Code có trên hệ thống

Hình 1.4: Ảnh minh họa Visual Studio Code

1.2.3 Xampp

Xampp là một phần mềm cho phép giải lập môi trường server hosting ngay trên máy tính của bạn, cho phép bạn chạy demo website mà không cần phải mua hosting hay VPS Chính vì vậy, Xampp hay được phục vụ cho hoạt động học tập giảng dạy thự hành và phát triển web

Xampp được viết tắt của X + Apache + MySQL + PHP + Perl vì nó được tích hợp sẵn Apache, MySQL, PHP, FTP Server, Mail Server Còn X thể hiện cho sự đa nền tảng của Xampp vì nó có thể dùng được cho 4 hệ điều hành khác nhau: Windows, MacOS, Linus và Solaris

Hình 1.5: Ảnh minh họa XamPP

Trang 24

Chương 2 PHÂN TÍCH THIẾT KẾ HƯỚNG ĐỐI TƯỢNG

2.1 Khảo sát yêu cầu

2.1.1 Hoạt động nghiệp vụ

Hình 2.1: Sơ đồ nghiệp vụ website cho showroom Vinfast

2.1.2 Đặc tả yêu cầu nghiệp vụ

2.1.2.1 Khách vãng lai Khách vãng lai xem được thông tin sản phẩm, showroom, thông số kỹ thuật chi tiết, đăng ký thành viên, đặt mua sản phẩm, xem blog

2.1.2.2 Khách thành viên Khách thành viên xem được thông tin sản phẩm, showroom, thông số kỹ thuật chi tiết, đặt mua sản phẩm, xem blog, viết blog, lịch sử mua hàng, lịch sử blog, cập nhật thông tin tài khoản

Trang 25

2.1.2.3 Quản trị viên Quản trị viên cập nhật tài khoản người dùng, cập nhật sản phẩm, cập nhật banner, duyệt đơn hàng, thống kê đơn hàng

2.2 Phân tích thiết kế hệ thống

2.2.1 Tác nhân

- Khách vãng lai - Khách thành viên - Quản trị viên

2.2.2 Đặc tả yêu cầu phần mềm

2.2.2.1 Khách vãng lai - Xem thông tin sản phẩm - Xem thông tin showroom - Tìm kiếm blog

- Đặt mua sản phẩm - Đăng ký thành viên 2.2.2.2 Khách thành viên

- Xem thông tin sản phẩm - Xem thông tin showroom - Tìm kiếm blog

- Đặt mua sản phẩm - Đăng ký thành viên - Đặt mua sản phẩm - Đăng nhập

- Đăng xuất - Cập nhật hồ sơ cá nhân - Viết blog

- Cập nhật blog - Bình luận blog - Xem lịch sử đơn hàng 2.2.2.3 Quản trị viên

- Cập nhật hồ sơ cá nhân - Cập nhật tài khoản người dùng - Cập nhật sản phẩm

Trang 26

- Thống kê đơn hàng - Duyệt đơn hàng - Cập nhật banner - Đăng nhập - Đăng xuất

Đầu vào Email, họ, tên, mật khẩu, nhập lại mật khẩu

Đầu ra Hệ thống thông báo đăng ký thành công

Xử lý Bước 1: Actor chọn nút đăng ký tài khoản

Bước 2: Nhập email, họ và tên, mật khẩu, nhập lại

Trang 27

mật khẩu

Bước 3: Nhấn nút Đăng ký Bước 4: Hệ thống kiểm tra và thông báo đăng ký

Đầu ra Hệ thống thông báo đăng nhập thành công

thành công

2.2.4.3 Kịch bản cho Usecase tìm kiếm Bảng 2.3: Kịch bản cho Usecase tìm kiếm

Tác nhân Khách vãng lai, khách thành viên

Đầu vào Hình thức tìm kiếm và nhập thông tin cần tìm

Đầu ra Hiển thị ra thông tin tìm kiếm

tìm kiếm

Trang 28

2.2.4.4 Kịch bản cho Usecase cập nhật hồ sơ cá nhân Bảng 2.4: Kịch bản cho Usecase cập nhật hồ sơ cá nhân

Use case Cập nhật hồ sơ cá nhân Tác nhân Khách thành viên, quản trị viên

Đầu vào Email, họ và tên, mật khẩu, nhập lại mật khẩu, số

điện thoại, địa chỉ, hình ảnh cá nhân

Đầu ra Hệ thống thông báo Cập nhật thành công

nhật thành công

2.2.4.5 Kịch bản cho Usecase đặt mua sản phẩm Bảng 2.5: Kịch bản cho Usecase đăng ký đặt mua sản phẩm

Tác nhân Khách thành viên, khách vãng lai

Đầu vào Họ tên, số điện thoại, email, CMND/CCCD

Đầu ra Hệ thống thông báo Đặt hàng thành công

Xử lý

Bước 1: Actor chọn sản phẩm cần đặt Bước 2: Chọn màu sắc kiểu dáng Bước 3: Nhập họ tên, số điện thoại, email,

CMND/CCCD

Bước 4: Chọn phương thức thanh toán đặt cọc Bước 5: Hệ thống kiểm tra và hiển thị thông báo Đặt

hàng thành công

Trang 29

2.2.4.6 Kịch bản cho Usecase duyệt đơn hàng Bảng 2.6: Kịch bản cho Usecase duyệt đơn hàng

Tác nhân Quản trị viên

Đầu vào Đơn hàng khách hàng đã đặt mua

Đầu ra Hệ thống thông báo thành công

Xử lý

Bước 1: Actor nhấn vào tên cá nhân Bước 2: Chọn Trang quản trị

Bước 3: Chọn Customes Bước 4: Nhấn nút Pending Bước 5: Nhấn Accpet để duyệt đơn hàng Bước 6: Hệ thống kiểm tra và hiển thị thông báo

thành công

2.2.4.7 Kịch bản cho Usecase thống kê Bảng 2.7: Kịch bản cho Usecase thống kê

Đầu vào Dữ liệu đơn hàng

Đầu ra Hệ thống hiển thị thông tin doanh số

Xử lý

Bước 1: Actor nhấn vào tên cá nhân

Bước 2: Chọn Trang quản trị

Bước 3: Chọn Databoard

Bước 4: Chọn khoảng thời gian

Bước 5: Hệ thống kiểm tra và hiển thị thông tin doanh số

2.2.4.8 Kịch bản cho Usecase xuất dữ liệu Bảng 2.8: Kịch bản cho Usecase xuất dữ liệu

Trang 30

Đầu vào Dữ liệu đơn hàng

Đầu ra Hệ thống thông báo thành công, xuất file excel

Bước 5: Hệ thống xuất file Excel

2.2.4.9 Kịch bản cho Usercase quản lý blog 2.2.4.9.1 Viết blog

Bảng 2.9: Kịch bản cho Usecase viết blog

Tác nhân Khách thành viên, quản trị viên

Đầu vào Dữ liệu, hình ảnh

bài viết thành công

2.2.4.9.2 Sửa blog Bảng 2.10: Kịch bản cho Usecase sửa blog

Trang 31

Đầu ra Hệ thống thông báo Cập nhật thành công

Xử lý

Bước 1: Actor nhấn vào tên cá nhân Bước 2: Chọn bài viết của tôi Bước 3: Chọn bài viết muốn xóa Bước 4: Nhấn nút xóa

Bước 5: Hệ thống hiển thị thông báo thành

công

2.2.4.10 Kịch bản cho Usecase bình luận blog Bảng 2.12: Kịch bản cho Usecase bình luận blog

Tác nhân Quản trị viên, khách thành viên

Đầu ra Hệ thống hiển thị bình luận

Trang 32

Xử lý

Bước 1: Actor chọn blog muốn bình luận Bước 2: Nhập bình luận

Bước 3: Nhấn gửi Bước 4: Hệ thống hiển thị bình luận

2.2.4.11 Kịch bản cho Usercase cập nhật banner 2.2.4.11.1 Sửa banner

Bảng 2.13: Kịch bản cho Usecase sửa banner

Đầu vào Hình ảnh, dữ liệu

Trang 33

Xử lý

Bước 1: Actor nhấn vào tên cá nhân Bước 2: Chọn Trang quản trị

Bước 3: Chọn Home slide Bước 4: Chọn Create Bước 5: Nhập hình ảnh, id, dữ liệu Bước 6: Chọn Create

Bước 7: Hệ thống kiểm tra và hiển thị thông báo

thành công

2.2.4.12 Kịch bản cho Usercase quản lý sản phẩm 2.2.4.12.1 Sửa sản phẩm

Bảng 2.16: Kịch bản cho Usecase sửa sản phẩm

Trang 34

Xử lý Bước 1: Actor nhấn vào tên cá nhân

Bước 2: Chọn Trang quản trị

Trang 35

Bước 3: Chọn Products Bước 4: Chọn Create Bước 5: Nhập hình ảnh, id, tên, màu sắc, giá tiền,

tiền cọc, số lượng

Bước 6: Chọn Create Bước 7: Hệ thống hiển thị thông báo thành công

2.2.4.13 Kịch bản cho Usercase quản lý tài khoản 2.2.4.13.1 Thêm tài khoản

Bảng 2.19: Kịch bản cho Usecase thêm tài khoản

Trang 36

Đầu ra Hệ thống hiển thị đơn hàng

Xử lý Bước 1: Actor nhấn vào tên cá nhân

Trang 37

Bước 2: Chọn Lịch sử đơn hàng Bước 3: Hệ thống hiển thị đơn hàng thành công

2.2.4.15 Kịch bản cho Usecase xem tin tức Bảng 2.23: Kịch bản cho Usecase xem tin tức

Tác nhân Khách vãng lai, khách thành viên

Đầu vào Dữ liệu sản phẩm, showroom

Đầu ra Hệ thống hiển thị dữ liệu sản phẩm, showroom

Xử lý

Bước 1: Actor chọn logo Vinfast Bước 2: Hệ thống hiển thị dữ liệu sản phẩm Bước 3: Nhấn biểu tượng Thêm

Bước 4: Chọn Liên hệ Bước 5: Hệ thống hiển thị thông tin showroom

2.2.5 Sơ đồ hoạt động

2.2.5.1 Tìm kiếm

Hình 2.3: Sơ đồ hoạt động tìm kiếm

Trang 38

2.2.5.2 Đăng ký tài khoản

Hình 2.4: Sơ đồ hoạt động đăng ký tài khoản 2.2.5.3 Cập nhật hồ sơ

Hình 2.5: Sơ đồ hoạt động cập nhật hồ sơ