TỔNG QUAN, QUY TRÌNH KHẢO SÁT ĐỒ ÁN
Mục đích và mô tải tài liệu
Những năm gần đây nhu cầu mua sắm xe ô tô của người Việt trở nên rầm rộ hơn bao giờ hết, một phần vì do cơ chế mở cửa của nhà nước, một phần vì nhu cầu phục vụ của phương tiện này ngày càng lớn, có người mua xe để phục vụ đi lại, người mua xe phục vụ ngành vận tải, làm ăn, có người thì lại mua ô tô chỉ để thể hiện đẳng cấp… Tuy nhiên đây là loại hàng hóa không thường được mua sắm online bởi giá trị quá lớn của loại hàng hóa đặc biệt này Nếu có sử dụng hình thức online để mua xe, các mô hình mua bán xe hơi thường thực hiện giao dịch qua các trao đổi trực tiếp với cửa hàng rồi mới bắt đầu lập các đơn hàng, đây là cách an toàn và đảm bảo cho cả người mua và người bán Tuy nhiên mô hình bán hàng này chỉ thường áp dụng cho các hãng xe khác nhau, đơn lẻ và có rất ít các trang tổng hợp hoặc bán cùng lúc nhiều hãng xe Học hỏi mô hình này và thấy được nhu cầu cần một nơi tập trung nhiều loại xe từ nhiều hãng xe trên thế giới Nhóm chúng em quyết định xây dựng trang web mô phỏng showroom xe hơi, trình bày nhiều loại xe từ nhiều hãng và thực hiện quản lý, mua bán thông qua hình thức trao đổi form thông tin Đồng thời đây cũng là chủ đề có mức độ phù hợp với môn học, giúp nhóm có thể hệ thống và thực hành những kiếm thức đã học được cũng như có cơ hội tìm hiểu các công nghệ, framework, thư viện khác.
Khi thực hiện đề tài này, nhóm chúng em rất mong sẽ hiểu rõ hơn về các kiến thức về thiết kế và xây dựng web, biết cách vận dụng những kiến thức đã học và hiểu thêm về các công nghê liên quan, đồng thời cũng hy vọng mô hình web sẽ phần nào hỗ trợ người dùng cảm thấy tiện lợi hơn trong việc tìm hiểu các xe từ nhiều hãng và hỗ trợ được người quản lý những yêu cầu cơ bản trong việc điều hành một trang web.
Phạm vi đồ án
- Phạm vi đồ án: xây dựng và vận hành được trang web sử dụng các công nghệ web như html, css, javascript, reactjs,… đối với frontend và xây dựng backend với nodejs, expressjs và dùng csdl mongodb Tuy nhiên chưa xem xét đến reponsive trong giao diện.
- Phạm vi và đối tượng hệ thống hướng đến tất cả những người có nhu cầu tìm hiểu, khảo sát, mua các loại xe hơi.
Quản lý đồ án với mô hình thác nước kết hợp với Scrum
Nhóm lựa chọn mô hình thác nước để quản lý các bước trong đố án bởi lý do đây là mô hình đơn giản, dễ tiếp cận đối với các thành viên trong nhóm, việc chia từng giai đón rõ ràng cũng giúp nhóm có thể phân chia công việc rõ ràng và đều hơn Ngoài ra nhóm còn kết hợp với mô hình Srcum ở giai đoạn phát triển vì lý do nhóm cần quản lý tốt tiến độ của các thành viên để nhanh chóng có thể giúp đỡ, giải quyết các khó khăn các thành viên gặp phải, cụ thể mô hình quản lý của nhóm như sau:
Hình 1 1 Mô hình quản lí đồ án
- Xác định yêu cầu: thực hiện khảo sát và xem xét các yêu cầu của môn học, đưa ra loạt các yêu cầu tối thiếu và các yêu cầu có thể bổ sung cho đồ án.
- Phân tích: sau khi xác định các yêu cầu cần thực hiện, nhóm xem xét khả năng, thời gian để lên kế hoạch phù hợp cho bước tiếp theo, đưa ra bảng kế hoạch phát triển dựa trên yêu cầu đồ án và khả năng của nhóm.
- Thiết kế: dựa trên các phân tích đã có nhóm bắt đầu thiết kế cơ sở dữ liệu, api đối với backend và thiết kế giao diện, tương tác đối với front end.
- Phát triển kết hợp Scrum: Tiến hành lập trình từng thành phần nhỏ của trang web, logic của hệ thống và các chức năng đã được làm rõ ở các bước trước đó Với mỗi sprint, nhóm sẽ tiến hành thiết kế chi tiết cho từng thành phần, cài đặt và kiểm thử đơn vị cho từng phần đã thực hiện.
- Kiểm thử: sau khi đã phát triển xong dựa trên các phân tích, nhóm tiến hành kiểm thử toàn bộ những phần code, xác định lỗi và thực hiện chỉnh sửa ngay.
- Triển khai: sau bước kiểm thử đả đạt được những yêu cầu đã đặt ra, nhóm tiến hành deploy trang web và viết báo cáo.
Các công cụ sử dụng trong đồ án
- MS Team: MS Team là công cụ nhóm dùng trong quá trình thực hiện đồ án với mục đích trao đổi thông tin, tổ chức các cuộc họp hàng tuần cũng như các cuộc họp đột xuất, lưu trữ lại thông tin cuộc họp.
Hình 1 2 Họp nhóm trên MS Team
- Google Drive: Google Drive là nơi được nhóm dùng để lưu trữ toàn bộ tài liệu liên quan tới đồ án và chủ yếu là hình ảnh sử dụng trong đồ án, tài liệu về đồ án, các dữ liệu được sử dụng và các báo cáo của đồ án.
Hình 1 3 Lưu dữ liệu bằng driver
- Visual Studio Code: Visual Studio Code là text editor được nhóm lựa chọn vì nó miễn phí, đa nền tảng, có kho tiện ích mở rộng đa dạng giúp quá trình code được thuận tiện và nhanh hơn, hỗ trợ nhiều ngôn ngữ lập trình,…
- Figma: Figma là một công cụ thiết kế đồ họa vector chạy trên trình duyệt web, thường dùng để thiết kế UI và dựng prototypes Hỗ trợ nhóm xây dựng giao diện và mô phỏng luồng hoạt động.
Hình 1 4 Thiết kế giao diện bằng Figma
- Git – GitHub: Git là một hệ thống quản lý phiên bản phân tán (Distributed Version Control System – DVCS), nó là một trong những hệ thống quản lý phiên bản phân tán phổ biến nhất hiện nay Git cung cấp cho mỗi lập trình viên kho lưu trữ (repository) riêng chứa toàn bộ lịch sử thay đổi Toàn bộ source code của đồ án sẽ được quản lý bằng Github.
Hình 1 5 Quản lý source code bằng Github
+ Lợi ích của git: Giúp các thành viên có thể thao tác (đưa lên kho code chung cũng như lấy xuống) được nhanh hơn không phải qua quá nhiều bước Kiểm soát được sự thay đổi của từng dòng lệnh khi người lập trình viết ra Giúp người quản lý dự án có thể giám sát phân bổ công việc của một project hiệu quả hơn.
+ Lợi ích của Github: Cung cấp nơi lưu trữ và quản lý kho code dễ dàng, an toàn và truy cập nhanh chóng thông qua Internet.
- Trello: Giúp dễ dàng quản lý dự án cũng như theo dõi các công việc hiện tại – đã xong – và trong tương lai.
Hình 1 6 Quản lý tiến độ bằng Trello
Các công nghệ và thư viện sử dụng trong đồ án
- ReactJS: ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm
2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa. ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI.
- Material UI: Material-UI là một thư viện cho phép chúng ta nhập và sử dụng components khác nhau để tạo giao diện người dùng trong các ứng dụng React, là một thư viện mã nguồn mở triển khai Material Design của Google Nó bao gồm một bộ sưu tập toàn diện các components được tạo sẵn, sẵn sàng để sử dụng trong quá trình xây dựng giao diện người dùng của website.
- React simply carousel và Hero slider: các thư viện component hỗ trợ thiết kế các giao diện carousel hoặc cần slide các thành phần.
- Sweet alert: thư viện component các thông báo, popup thay thế cho các popup mặc định trong Javascript với thiết kế đẹp hơn, reponsive và có thể tùy chỉnh được.
- Axios: Axios là một thư viện HTTP Client dựa trên Promise dành cho node.js và trình duyệt Nó có tính đẳng hình (tức là cùng codebase có thể chạy trong cả trình duyệt và node.js) Ở phía server thì nó sử dụng native module http trong node.js, còn ở phía client (trình duyệt) thì nó sử dụng XMLHttpRequest.
- Dayjs: Day.js là một thư viện xử lý ngày và giờ JavaScript nhẹ, dùng để thao tác với dữ liệu thời gian và hiển thị, định dạng ngày tháng dễ dàng.
- React cookie: một JavaScript API đơn giản và nhẹ dùng để xử lý cookie.
- React Jodit: Jodit là một trình soạn thảo WYSIWYG mã nguồn mở được viết bằng TypeScript thuần tuý mà không cần sử dụng các thư viện bổ sung.
- Node: NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nền tảng này được phát triển vào năm 2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ.
- Express: Expressjs là một framework được xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.
- MongoDB: MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ.
- NodeMailer: Nodemailer là 1 module cho ứng dụng Node js cho phép gửi mail 1 cách dễ dàng.
- Jsonwebtoken: JWT là một phương tiện đại diện cho các yêu cầu chuyển giao giữa hai bên Client – Server , các thông tin trong chuỗi JWT được định dạng bằng JSON Trong đó chuỗi Token phải có 3 phần là header , phần payload và phần signature.
- MongooseJS: Mongoose là một framework JavaScript thường được sử dụng trong ứng dụng Node.js với database là MongoDB Mongoose là một Object Document Mapper (ODM) Điều này có nghĩa là Mongoose cho phép bạn định nghĩa các object (đối tượng) với một schema được định nghĩa rõ ràng, được ánh xạ tới một MongoDB document.
- BcryptJS: Bcrypt là một dạng hash function thường sử dụng để mã hóa password với mục đích tăng cường bảo mật.
Khảo sát
Khảo sát các trang web bán xe tương tự khác để tham khảo giao diện, các chức năng, luồng hoạt động của các trang web đó, đồng thời rút ra các ưu nhược điểm của các trang web để làm nền tảng phát triển đồ án của nhóm.
- Khảo sát trang web bmwvietnam.com.vn/
Hình 1 7 Khảo sát trang web BMW VIETNAM
+ Giao diện: gồm các thành phần cơ bản đối với một trang web trình bày sản phẩm như trang chủ, trang trình bày tất cả sản phẩm, trang chi tiết sản phẩm, tin tức và liên hệ Trong đó nổi bật là trang chủ với thiết kế chia từng phần rất rõ ràng, các thành phần được tối giản và đầy đủ Nhóm chúng em quyết định thực hiện theo trang chủ này, và xây dựng cấu trúc các trang tương tự như trang web bmwvietnam.
+ Chức năng: trình bày,tìm kiếm các xe, có thông tin chi tiết của từng xe, trình bày,tìm kiếm các tin tức và cho phép đọc chi tiết các tin tức, phân trang các trang có nhiều thành phần, tuy nhiên không cho người dùng trực tiếp tạo đơn, người dùng phải liên hệ với chủ trang web thông qua một form liên hệ.
+ Ưu điểm: thiết kế tối giản nhưng đầy đủ, chức năng đơn giản dễ sử dụng, có thể xem như là đại diện cho một trang web bán xe hơi cơ bản.
+ Nhược điểm: không có tài khoản cho người dùng, không thể xem được các đơn người dùng đã lập.
- Khảo sát trang web mercedes-benz.com.vn/
Hình 1 8.Khảo sát trang web Mercerdes-benz
+ Giao diện: bao gồm các thành phần tương tự trang web BMWVN đồng thơi có bổ sung một số giao diện như hiển thị kết quả tìm kiếm, trang liên hệ,… Thiết kế có sự nhất quán trong sử dụng màu sắc chủ đạo, header có tích hợp search bar.
+ Chức năng; tương tự trang Bmwvietnam nhưng có một số chức năng được bổ sung như tìm kiếm xe, lọc xe, có thể hiển thị toàn bộ các xe ngay trên trang chủ,
+ Ưu điểm: có sự chỉnh chu và chuyên nghiệp hơn trong phần thiết kế giao diện với chủ đề được nhất quán ở tất cả các trang Có nhiều chức năng được thêm vào so với trang bmwvietnam.com như có thêm các bộ lọc tìm kiếm.
+ Nhược điểm: không có chức năng tạo tài khoản để theo dõi cái đơn hàng cũng như quản lý thông tin cá nhân người dùng.
1.6.3 Kết luận và rút kinh nghiệm
- Về giao diện: nhóm học hỏi và xem xét đồ án của nhóm sẽ có các trang cơ bản đối với trang web trình bày xe như trang chủ, trang giới thiệu, trang trình bày toàn bộ xe, trang tin tức, trang liên hệ, trang dành cho user, trang dành cho quản lý, hệ thống trang cho đăng nhập đăng kí, trang tìm kiếm, các header footer phù hợp với từng trang.
- Về Chức năng: xem xét các chức năng cơ bản từ 2 trang web đã khảo sát để áp dụng vào đồ án môn học như lấy dữ liệu từ csdl, trình bày các xe theo loại, trình bày xe theo kết quả tìm kiếm,… và thực hiện đánh giá khả năng của nhóm để bổ sung các chức năng trình bày thông tin người dùng bao gồm các thông tin cá nhân và các đơn người dùng đã lập, hệ thống quản lý xe, quản lý nhân viên, khách hàng, quản lý đơn hàng, quản lý hóa đơn, quản lý tin tức.
ĐẶC TẢ VÀ PHÂN TÍCH HỆ THỐNG
Đặc tả
Chương này giúp chúng ta đặc tả chi tiết hơn yêu cầu của hệ thống với các yêu cầu được mô tả trong danh sách các yêu cầu chức năng dưới đây.
Quản lí tài khoản Đăng kí Đăng nhập Đăng xuất
Xem thông tin tài khoản
Thay đổi thông tin tài khoản
Quản lý nội dung xe
Xem thông tin khách hàng
Thay đổi thông tin khách hàng.
Xem thông tin nhân viên Thay đổi thông tin nhân viên Xóa nhân viên
Xem chi tiết tin tức
Thay đổi chi tiết tin tức Xóa tin tứ
Xem chi tiết form Xóa form
Xem chi tiết hóa đơn Sửa tình trạng hóa đơn Xóa hóa đơn
Với mỗi yêu cầu sẽ gồm nhiều yêu cầu nhỏ thuộc chức năng cần tìm hiểu, chúng sẽ được đặc tả có cấu trúc dựa trên biểu mẫu (form) và thể hiện dưới dạng bảng các thông tin chung của chức năng đó Bảng thông tin chung bao gồm định nghĩa chức năng, mô tả đầu vào, mô tả đầu ra, thông tin cần thiết cho tính toán và thực thể khác được sử dụng, mô tả hành động sẽ được thực hiện, điều kiện trước và sau (nếu phù hợp) và các tác dụng phụ (nếu có).
Nội dung chương này gồm có:
Quản lý nội dung xe
Yêu cầu phi chức năng
Mô tả Đăng kí thành viên cho hệ thống (mặc định sẽ là khách hàng).
Mô tả đầu vào nguồn Người dùng chọn tính năng đăng ký trên giao diện Nhập các thông tin để đăng ký tài khoản.
Mô tả đầu ra và đích đến Đăng kí thành công Đích đến là trang chủ home
Mô tả hành động Đểtrở thành khách hàng của trang showroom thì người dùng phải đăng kí tài khoản bằng cách cung cấp các thông tin như: Email, tên và mật khẩu để hệ thống cung cấp tài khoản tương ứng Từ đó khách hàng sẽ trở thành thành viên của showroom. Điều kiện trước Tài khoản chưa tồn tại trong cơ sở dữ liệu. Điều kiện sau Để có thể truy cập vào lần tiếp theo, người dùng phải đăng nhập để có thể sử dụng tài khoản đã được đăng ký (không đăng ký lại)
Tác dụng phụ Thông báo không thành công nếu điều kiện trước không được đảm bảo.
Bảng 2 1 Đặc tả cấu trúc cho yêu cầu đăng ký
Mô tả Cho phép đăng nhập và sử dụng trang web với tư cách là thành viên khách hàng.
Mô tả đầu vào nguồn Người dùng chọn nút đăng nhập trên giao diện Nhập các Email và Password đã được đăng ký từ trước để truy cập vào hệ thống.
Mô tả đầu ra và đích đến Đăng nhập thành công và dẫn đến giao màn hình trang chủ của hệ thống.
Mô tả hành động Người dùng sử dụng Email và Password đã đăng ký trước đó để có thể sử dụng các tính năng của ứng dụng dưới tư cách là thành viên khách hàng. Điều kiện trước Thông tin tài khoản phải được đăng kí thành công trước đó. Điều kiện sau Người dùng được xem tất cả các thông tin hiển thị công khai trên web (trừ trang quản lí, trang quản lí chỉ nhân viên với admin mơi có thể truy cập vào).
Nếu tài khoản không tồn tại hoặc sai email, mật khẩu thì hiển thị thông báo “login failed”.
Bảng 2 2 Đặc tả có cấu trúc cho yêu cầu xem thông tin tài khoản
Mô tả Người dùng muốn đăng xuất ra khỏi trang web.
Mô tả đầu vào nguồn Người dùng nhấn vào nút tài khoản ở trên thanh menu và sau đó tiến hành đăng xuất tài khoản của mình.
Mô tả đầu ra và đích đến Đăng xuất thành công Đích đến sẽ là trang chủ chính.
Mô tả hành động Người dùng muốn đăng xuất ra khỏi hệ thống để sử dụng tài khoản khác hoặc tạo tài khoản mới. Điều kiện trước Trước đó, người dùng phải đăng nhập vào hệ thống. Điều kiện sau Trở về màn hình trang chủ chính
Bảng 2.3: Đặc tả có cấu trúc cho yêu cầu đăng xuất
Chức năng Quên mật khẩu
Mô tả Muốn lấy cung cấp lại mật khẩu bị.
Mô tả đầu vào nguồn Nhấn vào chữ quên mật khẩu trên màn hình đăng nhập
Mô tả đầu ra và đích đến Hiển thị thông báo đã gửi và kiểm tra email.
Sau đó đưa đến trang nhập mật khẩu mới.
Mô tả hành động Khi người dùng nhấn vào quên mật khẩu ở trang đăng nhập thì hệ thống sẽ hiện thị thông báo điền thông tin email sau đó gửi email và sau đó người dùng kiểm tra email của mình và đặt lại mật khẩu. Điều kiện trước Phải có tài khoản trước đó. Điều kiện sau Thông tin mật khẩu được cập nhật trong cơ sở dữ liệu.
Tác dụng phụ Hiện thị thông báo lỗi nếu email điền vào không hợp lệ.
Bảng 2 3 Đặc tả có cấu trúc cho yêu cầu quên mật khẩu
2.1.1.5 Xem thông tin tài khoản
Chức năng Xem thông tin tài khoản
Mô tả Muốn xem thông tin tài khoản của mình
Mô tả đầu vào nguồn Người dùng nhấn vào nút tài khoản trên thanh menu.
Mô tả đầu ra và đích đến Thông tin tài khoản được hiển thị bên trái màn hình bao gồm các trường thông tin mà người dùng đã cung cấp cho hệ thống.
Mô tả hành động Người dùng muốn xem thông tin các nhân và quyền của mình. Điều kiện trước Phải có tài khoản đã đăng kí trước đó. Điều kiện sau Thông tin tài khoản được hiển thị bên trái màn hình.
Bảng 2 4 Đặc tả có cấu trúc cho yêu cầu xem thông tin tài khoản
2.1.1.6 Thay đổi thông tin tài khoản
Chức năng Thay đổi thông tin tài khoản
Mô tả Muốn thay đổi thông tin tài khoản của người dùng.
Mô tả đầu vào nguồn Người dùng nhấn vào nút tài khoản ở trên thanh menu sau đó kích vào icon chỉnh sửa.
Mô tả đầu ra và đích đến Hiển thị đầy đủ các thông tin của tài khoản dưới dạng overlay Cập nhật thành công sẽ trả lại màn hình tài khoản.
Mô tả hành động Người dùng thay đổi thông tin cá nhân sau đó nhấn nút submit thì hệ thống sẽ xử lí và trả về thông báo cập nhật thành công. Điều kiện trước Phải có tài khoản đăng kí trước đó Điều kiện sau Thông tin phải được thay đổi trên cở sở dữ liệu và trang web hiển thị thông tin mới.
Bảng 2 5 Đặc tả có cấu trúc cho yêu cầu thay đổi thông tin tài khoản
2.1.2 Quản lý nội dung xe
Chức năng Thêm mới xe
Mô tả Thêm dữ liệu xe vào cơ sở dữ liệu
Mô tả đầu vào Người dùng chọn tính năng thêm sản phẩm trên trong giao diện nguồn quản lý xe.
Mô tả đầu ra và Thêm mới thành công xe Đích đến là màn hình quản lý xe sau khi đích đến thêm mới.
Mô tả hành động Để có thông tin xe cho khách hàng tra cứu, người dùng cần phải cung cấp những thông tin xe cần thiết để hệ thống thêm vào. Điều kiện trước Người dùng phải là admin Điều kiện sau Dữ liệu mới phải được thêm vào cơ sở dữ liệu
Tác dụng phụ Nếu thông tin cung cấp không đúng hoặc không đủ, xuất hiện thông báo tạo dữ liệu thất bại.
Bảng 2 6 Đặc tả có cấu trúc cho yêu cầu thêm mới xe
2.1.2.2 Xem thông tin chi tiết xe
Chức năng Xem thông tin chi tiết xe
Mô tả Người dùng muốn xem thông tin xe
Mô tả đầu vào nguồn Người dùng nhấp vào nút chi tiết.
Mô tả đầu ra và đích Mở ra màn hình chi tiết xe đến
Mô tả hành động Người dùng xem các thông tin của xe. Điều kiện trước Điều kiện sau Người dùng được xem toàn bộ thông tin xe.
Bảng 2 7 Đặc tả có cấu trúc cho yêu cầu xem thông tin chi tiết xe
2.1.2.3 Cập nhật thông tin xe
Chức năng Cập nhật thông tin xe
Mô tả Người dùng muốn sửa thông tin xe
Mô tả đầu vào nguồn Người dùng nhấp vào biểu tượng sửa trong trang quản lý xe.
Mô tả đầu ra và đích Sửa thông tin thành công, ứng dụng chuyển đến trang quản lý đến sau khi sửa.
Mô tả hành động Người dùng nhập các thông tin mới. Điều kiện trước Người dùng là admin Điều kiện sau Thông tin phải được thay đổi trên cơ sở dữ liệu và ứng dụng hiển thị thông tin mới.
Tác dụng phụ Nếu thông tin sau khi thay đổi thiếu thì hiện thông báo cập nhật thất bại.
Bảng 2 8 Đặc tả có cấu trúc cho yêu cầu cập nhật thông tin xe
Mô tả Người dùng muốn xóa xe
Mô tả đầu vào nguồn Người dùng nhấp vào biểu tượng xóa xe.
Mô tả đầu ra và đích Mở ra màn hình thông báo xóa xe. đến
Mô tả hành động Người dùng chọn xóa Điều kiện trước Người dùng là admin Điều kiện sau Xe phải được xóa trên cơ sở dữ liệu và ứng dụng.
Bảng 2 9 Đặc tả có cấu trúc cho yêu cầu xóa xe
Chức năng Tìm kiếm xe
Mô tả đầu vào nguồn
Người dùng muốn tìm kiếm xe Người dùng nhập nội dung vào thanh tìm kiếm
Mô tả đầu ra và đích Mở ra gợi ý nội dung tìm kiếm và màn hình chứa kết quả tìm đến kiếm.
Mô tả hành động Người dùng nhập nội dung vào thanh tìm kiếm Điều kiện trước Điều kiện sau Người dùng xem được thông tin xe cần tìm kiếm
Tác dụng phụ Nếu không có kết quả phù hợp, hiện ra thông báo không có kết quả.
Bảng 2 10 Đặc tả có cấu trúc cho yêu cầu tìm kiếm xe
Mô tả Người dùng muốn mua xe.
Mô tả đầu vào nguồn Người dùng chọn buy now và nhập thông tin cần thiết.
Mô tả đầu ra và đích Mở ra thông báo thành công. đến
Mô tả hành động Ở giao diện thi tiết xe, người dùng chọn buy now, sau đó nhập các thông tin vào form thông tin liên lạc để nhân viên liên hệ. Điều kiện trước Điều kiện sau
Tác dụng phụ Nếu không có kết quả phù hợp, hiện ra thông báo không có kết quả.
Bảng 2 11 Đặc tả có cấu trúc cho yêu cầu mua xe
Chức năng Thêm mới khách hàng
Mô tả Thêm dữ khách hàng mới vào cơ sở dữ liệu
Mô tả đầu vào nguồn Người dùng chọn tính năng thêm khách hàng trong giao diện quản lý khách hàng.
Mô tả đầu ra và đích Thêm mới thành công Đích đến là màn hình quản lý khách đến hàng sau khi thêm mới.
Phân tích hệ thống
Sơ đồ use-case giúp mô hình hóa các tương tác giữa từng thành phần, hỗ trợ quy trình khơi gợi yêu cầu Mỗi use-case đại diện cho một nhiệm vụ rời rạc (discrete task) liên quan đến sự tương tác từ bên ngoài với hệ thống Các tác nhân (actor) trong use-case có thể là người cũng có thể là hệ thống khác.
Phần này sẽ mô tả các yêu cầu chức năng, bao gồm tên của hầu hết các use cases và actors được mong đợi Đồng thời, mỗi use-case sẽ có những mô tả chi tiết cho chúng.
2.2.1 Sơ đồ use-case tổng quát
Hình 2 1.Sơ đồ use-case tổng quát cho ứng dụng King Speed
1 A01 Admin Tác nhân admin được dùng tất cả các tính năng của hệ thống và được chỉnh sửa các tính năng.
2 A02 System Tác nhân hệ thống là cơ sở dữ liệu, giúp truy xuất dữ liệu khi cần hiển thị trên giao diện cho tác nhân khác
2 A03 Staff Tác nhân nhân viên được dùng tất cả các tính năng của hệ thống trừ những tính năng dành cho admin.
3 A04 Customer Tác nhân khách hàng khi đã có tài khoản, đăng nhập vào hệ thống sẽ được dùng tất cả những tính năng dành cho khách hàng.
4 A05 Guest Tác nhân người dùng khách được xem giới thiệu về hệ thống, xem các tính năng hệ thống cung cấp như xem các loại xe nhưng chỉ được sử dụng tính năng khi đã đăng ký tài khoản.
Bảng 2 34 Danh sác các actors và mô tả của chúng
2.2.3 Danh sách các use-cases
Danh sách các use-cases chính đã được mô hình hóa từ use-case tổng quát gồm ý nghĩa và mô tả chức năng của use-case đó.
STT ID Use-case Ý nghĩa Mô tả chức năng use-case
1 UC01 Quản lý tài Actors có thể thực hiện được khoản các tính năng khi làm việc với hệ thống bao gồm việc phải có tài khoản mới được truy cập vào hệ thống, và giúp người dùng lấy lại tài khoản khi quên mật khẩu.
− Xem/Thay đổi thông tin tài khoản.
2 UC02 Quản lý nội Admin có thể quản lý thông -Thêm xe dung xe tin ô tô (như xem, thêm, xóa, - Xóa xe cập nhật và tìm kiếm).
- Cập nhật Riêng Employee chỉ có
- Xem thông tin chi tiết xe quyền xem và tìm kiếm xe.
3 UC03 Quản lý nhân Admin có thể quản lí thông - Xem viên tin nhân viên (xem, xóa, cập - Xóa nhật và tìm kiếm) Giúp quản
- Cập nhật lí nhân viên một cách hiệu quả nhất.
4 UC04 Quản lí khách Admin/ nhân viên có quyền - Xem hàng quản lí khách hàng (thêm, - Xóa xóa, cập nhật và tìm kiếm).
5 UC05 Quản lí hóa Giúp hệ thống quản lí tốt - Xóa hóa đơn chưa thanh đơn những hóa đơn đã được đặt/ toán thanh toán một cách hiệu - Cập nhật chưa toán thành quả. đã thanh toán.
-Xem tình trạng hóa đơn -Thêm hóa đơn -Lọc và tìm kiếm
6 UC6 Quản lí tin Người dùng có thể xem được tức những tin tức liên quan đến xe, showroom của chúng tôi.
7 UC7 Quản lí form Giúp tổ chức và quản lí tốt những phản hồi từ khách hàng gửi về hệ thống.
- Xem chi tiết phản hồi.
Bảng 2 35 Danh sách các use-cases và ý nghĩa
Các thành phần Mô tả
Use Case Name Tên của use-case, bắt đầu bằng một động từ.
Ví dụ: Quản lý tài khoản Use Case ID Định danh của use-case (ID: Identification).
Ví dụ: UC01 Description Mô tả ngắn gọn về use-case Mô tả này nằm trong khoảng từ một dòng đến một đoạn văn mô tả mục đích và cách sử dụng nó. Stereotype & Package Mô tả khuôn mẫu và gói mà trường hợp sử dụng này thuộc về. Đây là thông tin tùy chọn và có thể không phải lúc nào cũng được ghi lại, mặc dù nó sẽ được nhập dễ dàng trong một công cụ mô hình hóa.
Actors Danh sách các actor có liên quan đến use-case.
Preconditions Điều kiện tiên quyết là những điều kiện cần được thỏa mãn trước khi thực hiện được mô tả khi use-case có thể bắt đầu.
Postconditions Điều kiện sau là điều kiện phải được đáp ứng khi kết thúc use- case.
Use Case Relationships Relationships của use-case (gồm 3 loại: Include, Extend và
Inherited), các actor có quan hệ giữa use-case với use-case.
Basic Flow Luồng thành công chính, trường hợp mọi bước trong use-case đều được thực hiện thành công Ví dụ như:
≪include≫
≪extends≫
Alternative Flow A1 – Các mô tả tùy chọn ở đây là các luồng thay thế trong các điều kiện được chỉ định trong các bước trong basic flow. Exceptions E1 – Các mô tả tùy chọn ở đây chỉ định các hành động được thực hiện trong các điều kiện ngoại lệ gặp phải trong basic flow của ca sử dụng Về mặt kỹ thuật, điều này có thể đại diện cho các hành động để được thực hiện trong trường hợp có lỗi.
Constraints Các ràng buộc hoặc giới hạn đặc biệt đã được lập thành văn bản có liên quan đến việc sử dụng trường hợp.
User Interface Số và tên của thông số kỹ thuật giao diện người dùng liên quan Specifications đến use-case, bao gồm cả thông số kỹ thuật màn hình web, nếu như có sẵn Lưu ý rằng đây không phải là thiết kế giao diện người dùng mà chỉ đơn giản là tham chiếu đến các màn hình/biểu mẫu có khả năng sẽ được tác nhân sử dụng khi giao tiếp với hệ thống.
Metrics (Complexity) Bất cứ thứ gì cần đo lường có liên quan đến các use-case sẽ được đưa vào đây – ví dụ: độ phức tạp của use-case: đơn giản/trung bình/phức tạp.
Priority Tầm quan trọng của chức năng được mô tả bởi use-case: cao/trung bình/thấp.
Status Trạng thái đầy đủ của tài liệu của use-case: ban đầu/chính/cuối cùng Cái này sẽ cho biết mức độ phát triển của use-case
Bảng 2 36 Bảng chú thích các thành phần của use-case cần đặc tả
2.2.4.1 Quản lí tài khoản Đăng kí
Các thành phần Mô tả
Use Case Name Đăng ký
Description Cho phép khách hàng đăng kí để trở thành thành viên của ứng dụng.
Preconditions Thiết bị của actor đã được kết nối Internet khi đăng ký.
Username và Email chưa tồn tại chứa cơ sở dữ liệu.
Postconditions Tạo tài khoản mới cho người dùng nếu đăng ký thành công, thông báo không đăng ký được nếu xảy ra lỗi.
Basic Flow 1 Truy cập vào trang web, sau đó chọn đăng nhập.
2 Chọn đăng kí tài khoản và hiển thị màn hình đăng kí.
3 Người dùng nhập các thông tin (Username, email, password) để đăng ký tài khoản.
4 Hệ thống sẽ tạo tài khoản cho người dùng, lưu vào cơ sở dữ liệu, thông báo đã đăng kí thành công Đưa người dùng về lại trang chủ.
Alternative Flow Nếu tên đăng nhập đã tồn tại thì hệ thống đưa ra thông báo và yêu cầu người dùng lựa chọn lại tên đăng nhập khác.
Constraints Tác nhân đăng ký không được bỏ trống các trường dữ liệu
Username/Email / Password và ConfirmPassword
Bảng 2 37 Bảng đặc tả use-case đăng ký Đăng nhập
Các thành phần Mô tả
Use Case Name Đăng nhập
Description Các tác nhân muốn đăng nhập vào hệ thống King Speed
Actors Admin/Staff/Customer/System
Preconditions Thiết bị của actor đã được kết nối Internet khi đăng nhập.
Thông tin tài khoản phải được đăng ký thành công trước đó.Nếu chưa thì phải đăng kí tài khoản.
Postconditions Actor đăng nhập thành công.
Hệ thống ghi nhận actor đã đăng nhập.
Actor có thể sử dụng các tính năng trên hệ thống.
Basic Flow 1 Người dùng chọn tính năng đăng nhập trên giao diện.
2 Hệ thống hiển thị màn hình đăng nhập
3 Người dùng nhập thông tin Email và password để đăng nhập tài khoản.
4 Hệ thống xác thực người dùng qua tên đăng nhập và mật khẩu, hiển thị màn hình chính với các chức năng tương ứng.
Constraints Tác nhân đăng nhập không được bỏ trống các trường dữ liệu
Bảng 2 38 Bảng đặc tả use-case đăng nhập Đăng xuất
Các thành phần Mô tả
Các tác nhân muốn đăng xuất khỏi hệ thống.
Thiết bị của người dùng đã được kết nối Internet
Trước đó, người dùng phải đăng nhập vào hệ thống. Trở về màn hình Trang chủ
1 Người dùng chọn tính năng Đăng xuất ở bên trong trang tài khoản.
2 Người dùng nhấn đăng xuất.
4 Hệ thống đăng xuất khỏi ứng dụng với tên người dùng đó. Trở về màn hình Trang chủ.
Bảng 2 39 Bảng đặc tả use-case đăng xuất
Xem và thay đổi thông tin tài khoản
Các thành phần Mô tả
Xem và thay đổi thông tin tài khoản Các tác nhân muốn xem và thay đổi thông tin tài khoản. Admin/ Customer/ Staff/System
Thiết bị đã được kết nối Internet khi đăng nhập.
Trước đó, người dùng phải đăng nhập vào hệ thống. Postconditions Hiển thị thông tin người dùng hoặc thông tin người dùng được thay đổi ( nếu update) Basic Flow 1 Người dùng nhấn vào tài khoản ở trên màn hình chính
2 Hệ thống chuyển đến trang tài khoản, sau đó nhấn vào icon thay đổi thông tin người dùng (nếu update)
3 Người dùng thay đổi thông tin và submit (nếu update)
4 Hệ thống cập nhật lại thông tin của người dùng vào cơ sở dữ liệu và hiển thị lại thông tin mới đó cho người dùng.
Bảng 2 40 Bảng đặc tả use-case Xem và Thay đổi thông tin tài khoản
2.2.4.2 Quản lí nội dung xe
Các thành phần Mô tả
Use Case Name Quản lí nội dung xe
Description Admin có thể xem danh sách ô tô và có thể thêm, xóa, cập nhật và tìm kiếm thông tin ô tô theo nhu cầu.
Preconditions Đã đăng nhập thành công vào hệ thống và đi đến trang dashboard.
Postconditions Thực hiện thành công sẽ hiện thị thông tin hay lưu thông tin mới Nếu không thì trạng thái không thay đổi.
Basic Flow 1 Đi đến trang quản lí Dashboard, chọn quản lí oto
2 Hiển thị màn hình danh sách thông tin ô tô
3 Có thể xem thông tin chi tiết, tìm kiếm thông tin hoặc chọn ô tô cần cập nhật hoặc xóa Có thể chọn thêm thông tin ô tô mới
4 Lưu thông tin của ô tô khi thao tác hợp lệ
Bảng 2 41 Bảng đặc tả use-case quản lí nội dung xe
Các thành phần Mô tả
Use Case Name Quản lí khách hàng
Description Admin và staff có thể xem danh sách khách hàng, xem thông tin chi tiết của từng khách hàng và có thể thêm, xóa, cập nhật (đối với admin) và tìm kiếm thông tin khách hàng theo nhu cầu.
Preconditions Đã đăng nhập thành công vào hệ thống và đi đến trang dashboard.
Postconditions Thực hiện thành công sẽ hiện thị thông tin hay lưu thông tin mới Nếu không thì trạng thái không thay đổi.
Basic Flow 1 Đi đến trang quản lí Dashboard, chọn quản lí khách hàng.
2 Hiển thị màn hình danh sách thông tin khách hàng.
3 Có thể xem thông tin chi tiết, tìm kiếm thông tin hoặc chọn khách hàng cần cập nhật hoặc xóa Có thể chọn thêm mới khách hàng.
4 Lưu thông tin của khách hàng khi thao tác hợp lệ
Bảng 2 42 Bảng đặc tả use-case quản lí khách hàng
Các thành phần Mô tả
Use Case Name Quản lí nhân viên
Description Chỉ Admin mới có thể xem danh sách các nhân viên, xem thông tin chi tiết của từng nhân viên và có thể thêm, xóa, cập nhật và tìm kiếm thông tin nhân viên theo nhu cầu.
Postconditions Đã đăng nhập thành công vào hệ thống và đi đến trang dashboard.
Thực hiện thành công sẽ hiện thị thông tin hay lưu thông tin mới. Nếu không thì trạng thái không thay đổi.
Basic Flow 1 Đi đến trang quản lí Dashboard, chọn quản lí nhân viên.
2 Hiển thị màn hình danh sách thông tin nhân viên.
3 Có thể xem thông tin chi tiết, tìm kiếm thông tin hoặc chọn nhân viên cần cập nhật hoặc xóa Có thể chọn thêm mới nhân viên.
4 Lưu thông tin của nhân viên khi thao tác hợp lệ
Bảng 2 43 Bảng đặc tả use-case quản lí nhân viên
Các thành phần Mô tả
Use Case Name Quản lí hóa đơn
Description Admin và Staff mới có thể xem danh sách hóa đơn, xem thông tin chi tiết của từng hóa đơn và có thể thêm, xóa, cập nhật và tìm kiếm thông tin hóa đơn theo nhu cầu.
Postconditions Đã đăng nhập thành công vào hệ thống và đi đến trang dashboard.
Thực hiện thành công sẽ hiện thị thông tin hay lưu thông tin mới. Nếu không thì trạng thái không thay đổi.
Basic Flow 1 Đi đến trang quản lí Dashboard, chọn quản lí hóa đơn.
2 Hiển thị màn hình danh sách các hóa đơn.
3 Có thể xem thông tin chi tiết, tìm kiếm thông tin (Cập nhật và xóa khi chưa thanh toán) Có thể chọn thêm mới hóa đơn.
4 Lưu thông tin của hóa đơn khi thao tác hợp lệ
Bảng 2 44 Bảng đặc tả use-case quản lí hóa đơn
Các thành phần Mô tả
Use Case Name Quản lí tin tức
Description Admin mới có thể xem danh các sách tin tức, xem thông tin chi tiết của từng tin tức và có thể thêm, xóa, cập nhật theo nhu cầu.
Preconditions Đã đăng nhập thành công vào hệ thống và đi đến trang dashboard.
Postconditions Thực hiện thành công sẽ hiện thị thông tin hay lưu thông tin mới.
Nếu không thì trạng thái không thay đổi.
Basic Flow 1 Đi đến trang quản lí Dashboard, chọn quản lí tin tức
2 Hiển thị màn hình danh sách các tin tức.
3 Có thể xem thông tin chi tiết, cập nhật và xóa Có thể chọn thêm mới tin tức.
4 Lưu thông tin của tin tức khi thao tác hợp lệ
Bảng 2 45 Bảng đặc tả use-case quản lí tin tức
Các thành phần Mô tả
Use Case Name Quản lí form
Description Admin/Staff mới có thể lọc, xem danh các sách phản hồi, xem thông tin chi tiết của từng phản hồi và có thể xóa.
Preconditions Đã đăng nhập thành công vào hệ thống và đi đến trang dashboard.
Postconditions Thực hiện thành công sẽ hiện thị thông tin hay lưu thông tin mới.
Nếu không thì trạng thái không thay đổi.
Basic Flow 1 Đi đến trang quản lí Dashboard, chọn quản lí form
2 Hiển thị màn hình danh sách các phản hồi
3 Có thể xem thông tin chi tiết, lọc theo ngày và xóa.
4 Lưu thông tin của form khi thao tác hợp lệ
Bảng 2 46 Bảng đặc tả use-case quản lí form
THIẾT KẾ HỆ THỐNG VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU
Nêu lên kiến trúc hệ thống và mô tả các thành phần
Hình 3 1.Kiến trúc hệ thống
Về kiến trúc hệ thống, nhóm chúng em xây dựng theo dạng Web API và chia thành 2 phần là Front End và Back End Chúng sẽ giao tiếp với nhau thông qua API và sử dụng
3.1.2 Mô tả các thành phần
Về phần Front End, giao diện được xây dựng bằng ReactJS Với ReactJS sẽ giúp nhóm chúng em tiết kiệm thời gian trong việc xây dựng giao diện và xử lí các tính năng so với code thuần Hầu hết các dữ liệu ở giao diện được lấy và xử lí thông qua API do Back End cung cấp Front End sẽ thực hiện gọi các API với HTTP methods tương ứng gồm 4 phương thức là: GET, POST, PUT, DELETE:
GET – Read: Lấy dữ liệu về
POST – Create: Tạo dữ liệu mới
PUT – Update: Cập nhật dữ liệu
DELETE – Delete: Xóa dữ liệu Để thuận tiện cho việc thực hiện các yêu cầu và nhận dữ liệu trả về từ API, đồ án chúng em sử dụng thư viện HTTP Client đó là Axios API.
Về phần Back End, đồ án của chúng em sử ExpressJS chạy trên nền tảng NodeJS để xây dựng một Server Để nhận các yêu cầu và phản hồi thông tin cho Front End thì ở Server sẽ xây dựng các API theo dạng RESTful API chủ yếu gồm 4 phương thức là GET, POST, PUT, DELETE Server được xây dựng với các phần là model, controller, router, middleware, database.
- Model: Là một dạng mẫu dữ liệu, có nhiệm vụ thao tác với cơ sở dữ liệu, nghĩa là nó sẽ chứa tất cả các hàm, các phương thức truy vấn trực tiếp với dữ liệu và controller sẽ thông qua các hàm, phương thức đó để lấy dữ liệu rồi gửi qua cho các request
- Controller: Nó có nhiệm vụ tiếp nhận yêu cầu từ client sau đó xử lý request, load model tương ứng và gửi dữ liệu cho client.
- Router: là một bộ định tuyến giúp cho chúng ta định danh ra các url và hành động kèm theo nó.
- Middleware: là một phần rất quan trọng trong Express nó giúp chúng ta có thể lọc và ngăn chặn các request xấu trong quá trình chạy của ứng dụng Middleware là các hàm khác nhau được gọi bởi Router Express trước khi các request hoàn tất.
- Database: là cơ sở dữ liệu dùng để lưu trữ , truy cập và chỉnh sửa các dữ liệu.
Khi server nhận được một HTTP request từ Front End với các thông tin về đường dẫn, phương thức cũng như dữ liệu, thì router sẽ chuyển request đến controller phù hợp để xử lí Tuy nhiên trước khi xử lí các request bởi controller thì các request này sẽ trải qua middleware Thông thường trong ExpressJS, middleware bao gồm các phần CORS Middleware, CSRF Middleware và Auth Middleware.
CORS Middleware để kiểm tra cross-origin Resource sharing của request CRSF Middleware để xác thực CSRF của request, chống fake request…
Auth Middleware để xác thực request có được truy cập hay không.
Hình 3 2 Luồng hoạt động middleware
Sau khi qua middleware thành công, các request sẽ được controller phù hợp xử lí Các controller sẽ sử dụng các service và model để xử lí các request phù hợp Trong quá trình xử lí ở controller các dữ liệu tương ứng với các model sẽ được lấy ra, thêm, xóa, sửa trong database Server sử dụng cơ sở dữ liệu là MongDB Để thực hiện kết nối và xử lí tác vụ trên thì chúng em sử dụng một thư viện MongooseJS.
Hình 3 3 Luồng hoạt động của Backend khi Front End gửi request
Sau khi xử lí các request thành công thì server sẽ trả cho Front End về trạng thái và dữ liệu tương ứng với requets cho địa chỉ đã yêu cầu Ngược lại, nếu thất bại thì trả về trạng thái lỗi và message tương ứng với lỗi đó Một số mã trạng thái như 200, 201, 400, 401, 500,…
200 Phản hồi tiêu chuẩn cho các yêu cầu HTTP thành công.
201 Dữ liệu đã được tạo thành công
400 Có một lỗi cú pháp trong yêu cầu và yêu cầu bị từ chối.
401 Server nhận được một yêu cầu chưa được xác thực Header yêu cầu không chứa mã xác thực cần thiết và client bị từ chối truy cập
404 Không tìm thấy dữ liệu được yêu cầu yêu cầu.
500 Server gặp sự cố, không thể hoàn thành yêu càua
Bảng 3 1 Ý nghĩa các mã trạng thái
Thiết kế cơ sơ dữ liệu
Ở phần Back End được xây dựng bằng NodeJs Do đó, nhóm chúng em lựa chọn MongoDB để làm cơ sở dữ liệu cho đồ án MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là cơ sở dữ liệu thuộc NoSql và được hàng triệu người sử dụng MongoDB là một database hướng tài liệu , các dữ liệu được lưu trữ tài liệu kiểu JSON thay vì dạng bảng như cơ sở dữ liệu quan hệ nên truy vấn sẽ rất nhanh. Ở đồ án này, nhóm chúng em đã thiết kế 6 model như sau:
- Car: chứa các thông tin của đối tượng ô tô.
Tên trường dữ liệu Loại dữ liệu Chú thích Ràng buộc macar String Mã ô tô, mã này sẽ tự động tăng dần khi
Bắt buộc có dữ liệu ô tô được thêm vào database ten String Tên ô tô Bắt buộc có dữ liệu thuonghieu String Hãng ô tô Bắt buộc có dữ liệu dongco String Động cơ của ô tô Bắt buộc có dữ liệu socho Number Số lượng chỗ ngồi ô Bắt buộc có dữ liệu tô kichthuoc String Kích thước của ô tô Bắt buộc có dữ liệu nguongoc String Nguồn gốc sản xuất Bắt buộc có dữ liệu ô tô vantoctoida String Vận tốc tối đa ô tô Bắt buộc có dữ liệu đạt được dungtich String Dung tích của ô tô Bắt buộc có dữ liệu tieuhaonhienlieu String Tiêu hao nhiên liệu Bắt buộc có dữ liệu congsuatcucdai String Công suất cực đại Bắt buộc có dữ liệu mausac String Màu sắc của ô tô Bắt buộc có dữ liệu gia Number Giá Bắt buộc có dữ liệu hinhanh String Hình ảnh, dữ liệu Bắt buộc có dữ liệu lưu ở dạng link mota String Mô tả về ô tô Bắt buộc có dữ liệu namsanxuat Number Năm ô tô sản xuất Bắt buộc có dữ liệu soluong Number Số lượng ô tô có Bắt buộc có dữ liệu trong cửa hàng advice Boolean Đề xuất ô tô tốt nhất Bắt buộc có dữ liệu createdAt Date Thời gian dữ liệu Bắt buộc có dữ liệu thêm vào database, dữ liệu tự động updatedAt Date Thời gian dữ liệu Bắt buộc có dữ liệu cập nhật, dữ liệu tự động
- User: lưu trữ thông tin xác thực user cũng như các thông tin khác của khách hàng, nhân viên, admin
Tên trường dữ liệu Loại dữ liệu Chú thích Ràng buộc name String Tên Bắt buộc có dữ liệu email String Email Bắt buộc có dữ liệu password String Lưu dưới dạng mã Bắt buộc có dữ liệu hóa, ít nhất 8 kí tự. mauser String Mã user Bắt buộc có dữ liệu gioitinh String Giới tính Không ngaysinh String Ngày sinh Không sdt String Số điện thoại Không diachi String Địa chỉ Không chucvu String Chức vụ Không role String Quyền, dùng để phân Không quyền user verifyToken String Xác thực user khi Không quên mật khẩu token Array Xác thực user khi user Không đã đăng xuất nhưng token vẫn còn hạn createdAt Date Thời gian dữ liệu Bắt buộc có dữ liệu thêm vào database, dữ liệu tự động updatedAt Date Thời gian dữ liệu cập Bắt buộc có dữ liệu nhật, dữ liệu tự động
- News: lưu trữ các thông tin về tin tức
Tên trường dữ liệu Loại dữ liệu Chú thích Ràng buộc author String Tác giả Bắt buộc có dữ liệu title String Tiêu đề Bắt buộc có dữ liệu image String Hình ảnh, lưu dưới Bắt buộc có dữ liệu dạng link description String Mô tả Bắt buộc có dữ liệu dateSource String Ngày đăng tin tức Bắt buộc có dữ liệu detail Array Mảng các thông tin Bắt buộc có dữ liệu chi tiết về bài tin tức createdAt Date Thời gian dữ liệu thêm vào database, dữ liệu tự động
Bắt buộc có dữ liệu
- Form: lưu trữ các thông tin liên hệ từ form liên hệ
Tên trường dữ liệu Loại dữ liệu Chú thích Ràng buộc name String Tên Bắt buộc có dữ liệu mobile String Số điện thoại Bắt buộc có dữ liệu email String Email Bắt buộc có dữ liệu message String Tin nhắn Không createdAt Date Thời gian dữ liệu Bắt buộc có dữ liệu thêm vào database, dữ liệu tự động updatedAt Date Thời gian dữ liệu cập Bắt buộc có dữ liệu nhật, dữ liệu tự động
- HoaDon: lưu trữ các thông tin của hóa đơn
Tên trường dữ liệu Loại dữ liệu Chú thích Ràng buộc mahd String Mã hóa đơn Bắt buộc có dữ liệu makh String Mã khách hàng Bắt buộc có dữ liệu tenkh String Tên khách hàng Bắt buộc có dữ liệu manv String Mã nhân viên Bắt buộc có dữ liệu ngayhd String Ngày hóa đơn Bắt buộc có dữ liệu tinhtrang String Tình trạng thanh toán Bắt buộc có dữ liệu trigia String Tổng trị giá hóa đơn Bắt buộc có dữ liệu createdAt Date Thời gian dữ liệu Bắt buộc có dữ liệu thêm vào database, dữ liệu tự động updatedAt Date Thời gian dữ liệu cập Bắt buộc có dữ liệu nhật, dữ liệu tự động
- CTHD: lưu thông tin chi tiết của các hóa đơn.
Tên trường dữ liệu Loại dữ liệu Chú thích Ràng buộc mahd String Mã hóa đơn Bắt buộc có dữ liệu macar String Mã ô tô Bắt buộc có dữ liệu tenxe String Tên ô tô Bắt buộc có dữ liệu soluong Number Số lượng mua Bắt buộc có dữ liệu gia Number Giá của mỗi ô tô Bắt buộc có dữ liệu createdAt Date Thời gian dữ liệu Bắt buộc có dữ liệu thêm vào database, dữ liệu tự động updatedAt Date Thời gian dữ liệu cập Bắt buộc có dữ liệu nhật, dữ liệu tự động
Bảng 3 7 Model Chi tiết hoa đơn
Vì cơ sở dữ liệu được xây dựng dựa trên mô hình cơ sở dữ liệu phi quan hệ, do đó các dữ liệu của đối tượng này và dữ liệu của đối tượng khác sẽ không bị ràng buộc với nhau Tuy nhiên dữ liệu giữa các đối tượng cần giống nhau ví dụ như giá ô tô ở chi tiết hóa đơn phải giống với giá ở dữ liệu ô tô Vì vậy các dữ liệu sẽ được xử lí hợp lí trước khi lưu vào cơ sở dữ liệu Các hình ảnh liên quan đến xe sẽ lưu vào database bằng đường link thay vì phải lưu trực tiếp giúp cơ sở dữ liệu ít tốn dữ liệu hơn Các hình ảnh về ô tô, nhóm chúng em lưu bằng Firebase và lấy link ảnh này lưu vào database.
Link lưu ảnh ở Firebase: https://console.firebase.google.com/u/0/project/showroomcar-6961d/storage/showroomcar-6961d.appspot.com/files
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Danh sách các màn hình và sơ đồ liên kết các màn hình
Hình 4 1.Sơ đồ liên kết các màn hình
4.1.2 Danh sách các màn hình
Login Màn hình đăng nhập trang web
Forgot Password Màn hình quên mật khẩu
Register Màn hình đăng ký tài khoản King Speed Home
Màn hình trang chủ của King Speed khi đã đăng nhập thành công
Màn hình giới thiệu về King Speed Màn hình chứa các sản phẩm xe của từng hãng xe Màn hình mô tả chi tiết các sản phẩm
Màn hình chứa các tin tức về xe Màn hình xem chi tiết tin tức
Màn hình để khách hàng để lại thông tin liên lạc để được tư vấn thêm về các sản phẩm của King Speed
Màn hình chứa thông tin chi tiết của người dùng
Màn hình cập nhật, chỉnh sửa thông tin của tài khoản người dùng
Màn hình quản lý xe ô tô chứa danh sách ô tô và thông tin Màn hình chỉnh sửa thông tin xe ô tô
Màn hình hiển thị thông tin chi tiết của xe ô tô Màn hình thêm xe ô tô
Màn hình quản lý khách hàng chứa danh sách khách hàng Màn hình chỉnh sửa thông tin chi tiết khách hàng Màn hình hiển thị thông tin chi tiết của khách hàng Màn hình thêm khách hàng mới
Màn hình quản lý nhân viên chứa danh sách nhân viên Màn hình chỉnh sửa thông tin chi tiết nhân viên Màn hình hiển thị thông tin chi tiết của nhân viên Màn hình thêm nhân viên mới
Màn hình quản lý tin tức chứa danh sách tin tức Edit news
Form managementDetail formInvoice management
Màn hình chỉnh sửa thông tin chi tiết tin tức Màn hình hiển thị thông tin chi tiết của tin tức Màn hình thêm tin tức mới
Màn hình quản lý form chứa danh sách form phản hồi Màn hình hiển thị thông tin chi tiết của tin tức Màn hình quản lý hóa đơn chứa danh sách hóa đơn Màn hình chỉnh sửa thông tin chi tiết hóa đơn Màn hình hiển thị thông tin chi tiết của hóa đơn Màn hình thêm hóa đơn mới
Bảng 4 1 Danh sách các màn hình
Chi tiết màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
Mục điều hướng đến màn Link hình đăng ký Register
Trường nhập email đăng Text nhập của người dùng
Trường nhập mật khẩu password Password người dùng
Bắt buộc phải nhập email hợp lệBắt buộc phải nhập nội dung, dài hơn 8 ký tự.
Mục điều hướng đến màn hình Home Page
Mục điều hướng đến màn hình Forgot Password
Bảng 4 2 Bảng mô tả các đối tượng trên màn hình Login
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
Khi click vào nút này điều
1 hướng đến màn hình đăng ký Register đăng ký
Khi click vào sẽ điều 2
Click btnLogin Login() hướng đến màn hình Hiển thị màn hình trang chủ của hệ thống Home Page
Khi click vào sẽ điều
3 Click ForgetPass hướng đến màn hình
Bảng 4 3 Danh sách các biến cố và xử lý trên màn hình Login
Hình 4 3 Màn hình Forget Password
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 email Email Trường nhập email người dùng
Bắt buộc phải nhập email hợp lệ
Mục gửi email xác nhận mật khẩu cho người dùng
3 Quay về đăng Text Mục quay về màn hình Login nhập
Bảng 4 4 Bảng mô tả các đối tượng trên màn hình Forget password
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
Khi click vào nút này
1 Click submitEmail submitEmail() thư xác nhận mật khẩu sẽ được gửi đến email người dùng Khi click vào nút này 2
Click “Quay về màn hình quên mật Hiển thị màn hình đăng nhập” khẩu sẽ tắt và quay trở Login lại màn hình Login
Bảng 4 5 Danh sách các biến cố và xử lý trên màn hình Forget password
Hình 4 4 Màn hình Reset Password
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
Trường nhập password Bắt buộc phải nhập mật người dùng khẩu từ 8 ký tự trở lên
Trường nhập lại Bắt buộc phải giống với password người dùng password
Mục xác nhận mật khẩu mới
4 Quay về đăng Text Mục quay về màn hình nhập Login
Bảng 4 6 Bảng mô tả các đối tượng trên màn hình Reset Password
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
Khi click vào nut này mật khẩu” khẩu sẽ được thay đổi mới
Khi click vào nút này màn
Click “Quay về hình quên mật khẩu sẽ tắt Hiển thị màn hình đăng nhập” và quay trở lại màn hình Login
Bảng 4 7 Danh sách các biến cố và xử lý trên màn hình Reset Password
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
Trường nhập tên của người Bắt buộc phải nhập dùng nội dung
Bắt buộc phải email Text nhập của người dùng nhập email hợp lệ
3 password Password mật khẩu từ 8 ký tự người dùng trở lên
Trường nhập lại password Bắt buộc phải giống người dùng với password
Trường check đông ý với Bắt buộc phải click Checkbox vào checkbox điều khoản dịch vụ
Mục điều hướng đến màn Button hình Home
Mục điều hướng đến màn Link hình Login
Bảng 4 8 Bảng mô tả các đối tượng trên màn hình Register
Biến cố Tên hàm Mô tả xử lý Ý nghĩa
Khi click vào nút này thì Đăng kí tài khoản, hiển
1 Click “Đăng kí” handleSubmit(e) sẽ điều hướng đến trang thị màn hình chủ nếu đăng kí thành công
Home Khi click vào nút này màn 2
Click “Quay về hình quên mật khẩu sẽ tắt Hiển thị màn đăng nhập” và quay trở lại màn hình hình Login
Bảng 4 9 Danh sách các biến cố và xử lý trên màn hình Register
Màn hình introduction bao gồm những giới thiệu và hình ảnh về showroom.
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
Trường nhập tên của người dùng
Trường nhập email của người dùng
Trường nhập số điện thoại người dùng
Bắt buộc phải nhập nội dung Bắt buộc phải nhập email hợp lệ Bắt buộc phải nhập số điện thoại là một số nguyên
Trường nhập lời nhắn của Text người dùng
Mục gửi thông tin liên hệ Button của người dùng tới quản lý
Bảng 4 10 Bảng mô tả các đối tượng trên màn hình Contact
Mô tả xử lý Ý nghĩa T
Khi click vào nút này thì Đăng kí tài thông tin liên lạc của
1 Click “Gửi” handleSubmit(e) người dùng sẽ được gửi khoản, hiển thị tới hệ thống quản lý màn hình Home
Bảng 4 11 Danh sách các biến cố và xử lý trên màn hình Contact
Hình 4 8 Màn hình tin tức
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
Link (Text, Mục hiển thị tin tức image, date) ngắn gọn
Mục hiển thị tin tức
2 Smaller card nổi bật ngắn gọn nhỏ image) hơn
Biến cố Tên hàm Mô tả xử lý Ý nghĩa
Khi click vào link này thì sẽ Hiển thị màn
1 Click card điều hướng đến trang đọc tin hình Read tức news
Khi click vào link này thì sẽ Hiển thị màn
2 Click smaller card điều hướng đến trang đọc tin hình Read tức news
Bảng 4 12 Danh sách các biến cố và xử lý trên màn hình News
Hình 4 9 Màn hình Read news
Màn hình Read news bao gồm phần tin tức chi tiết gồm hình ảnh và các thông tin, bên cạnh là sidebar có chứa các smaller card.
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
Link (Text, Mục hiển thị tin tức nổi image) bật ngắn gọn nhỏ hơn
Biến cố Tên hàm Mô tả xử lý Ý nghĩa
Khi click vào link này thì Hiển thị màn
1 Click smaller card sẽ điều hướng đến trang hình Read news đọc tin tức
Bảng 4 13 Danh sách các biến cố và xử lý trên màn hình Read News
Hình 4 10 Màn hình trang chủ
Hình 4 13 Tất cả mẫu xe
Hình 4 14 Đánh giá khách hàng
Hình 4 15 Tin tức tiêu biểu
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
`1 Giới thiệu Button Hiển thị màn hình Introduction
2 Liên hệ ngay Button Hiển thị màn hình Contact
3 Thanh chọn Menu Hiển thị danh sách các item xe theo branch hãng
4 Discorver more Button Hiển thị trang chi tiết xe
5 Item tin thức Card Hiện thị trang chi tiết tin tức
Bảng 4 14 Bảng mô tả các đối tượng trên màn hình Home
STT Biến cố Tên Mô tả xử lý Ý hàm nghĩa
1 Click vào button giới thiệu Hiển thị màn hình Introduction
2 Click vào button liên hệ Hiển thị màn hình Contact ngay
3 Click vào thanh chọn Hiển thị danh sách các item xe branch theo hãng
4 Click vào button Hiển thị trang chi tiết xe
5 Click vào Item tin thức Hiện thị trang chi tiết tin tức
Bảng 4 15 Danh sách các biến cố và xử lý trên màn hình Home
Hình 4 16.Màn hình hiển thị thông tin sản phẩm xe
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Chi tiết Button Xem chi tiết xe Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm
Mô tả xử lý Ý nghĩa
1 Click vào button Chi tiết
Khi click vào button này sẽ hiện ra màn hình liên hệ
Bảng 4 16 Bảng mô tả các danh sách và biến cố trên màn hình
Hình 4 17 Màn hình thể hiện chi tiết xe
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Liện hệ Button Hiển thị ra màn hình Contact
Bảng 4 17 Bảng mô tả các đối tượng trên màn hình
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
1 Click vào button Liên hệ Hiển thị màn hình Contact
Bảng 4 18 : Bảng mô tả các danh sách và biến cố trên màn hình
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Đăng Xuất Button Đăng xuất khỏi tài khoản hiện tại
2 Icon cây bút Icon Chỉnh sửa thông tin user
Bảng 4 19 Bảng mô tả các đối tượng trên màn hình
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên Mô tả xử lý hàm
1 Click vào đăng xuất Đăng xuất khỏi tài khoản hiện tại
2 Click vào icon cây Chỉnh sửa thông tin của tài khoản bút hiện tại Ý nghĩa
Bảng 4 20 Bảng mô tả các danh sách và biến cố trên màn hình
4.2.11 Màn hình Dashboard. a) Màn hình khách hàng
Hình 4 19 Màn hình quản lí khách hàng
STT Tên đối Kiểu Ý nghĩa Ràng buộc tượng
1 Quản lý ô tô Hiển thị trang quản lý ô tô
2 Quản lý Hiển thị trang quản lý form form
3 Quản lý Hiển thị trang quản lý nhân viên nhân viên
4 Quản lý hóa Hiển thị trang quản lý hóa đơn đơn
5 Quản lý tin thức Hiển thị trang qản lý tin tức
8 Thêm khách hàng Button Thêm khách hàng
9 Chi tiết Button Hiển thị màn hình chi tiết khách hàng
10 Icon cây bút Icon Hiển thị màn hình chỉnh sửa hóa đơn
11 Icon thùng rác Icon Hiển thi pop up xác nhận xóa item
12 Grid khách hàng Grid Hiển thị các nội dung của khách hàng.
Bảng 4 21 Bảng mô tả các đối tượng trên màn hình Quản lý
STT Biến cố Tên Mô tả xử lý Ý nghĩa hàm
1 Click vào chọn item “Quản Hiển thị trang quản lý ô tô lý ô tô”
2 Click vào chọn item “Quản Hiển thị trang quản lý khách lý khách hàng” hàng
3 Click vào chọn item “Quản Hiển thị trang quản lý tin tức lý tin tức”
4 Click vào chọn item “Quản Hiển thị trang quản lý form lý form”
5 Click vào chọn item “Quản Hiển thị trang quản lý nhân lý nhân viên” viên
6 Click vào button thêm Hiển thị màn hình pop up để khách hàng thêm khách hàng
7 Click vào icon cây bút Hiển thị màn hình chỉnh sửa thông tin khách hàng
8 Click vào icon thùng rác Hiển thị màn hình xác nhận xóa pop up.
9 Click vào button chi tiết Hiển thị màn hình chi tiết xe
10 Click vào menu tình trạng Hiện ra tình trạng xe để lọc
11 Click vào “hiện hóa đơn” Hiện ra nơi để search
Hình 4 20 Màn hình xác nhận xóa khách hàng
Bảng mô tả các đối tượng trên màn hình
Kiểu Ý nghĩa Button Xóa thông tin khách hang có sẵn Button Hủy xác nhận xóa thông tin khách hàng
Bảng 4 22 Bảng mô tả các đối tượng trên màn hình
Bảng mô tả các danh sách và biến cố trên màn hình
1 Click vào button Xóa luôn
Tên hàm Mô tả xử lý
Xóa thông tin khách hàng Hủy xóa thông tin khách hàng Ý nghĩa
Bảng 4 23 Bảng mô tả các danh sách và biến cố trên màn hình
Hình 4 21 Màn hình cập nhật dữ liệu khách hàng
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Tên khách hàng Input Nhập tên khách hàng
2 Số điện thoại Input Nhập số điện thoại
3 Ngày sinh Input Nhập ngày sinh
4 Địa chỉ Input Nhập ngày sinh
6 Cập nhật Button Xác nhận cập nhật thông tin
7 Hủy Button Hủy xác nhận cập nhật thông tin
Bảng 4 24 Bảng mô tả các đối tượng trên màn hình
Hình 4 22 Màn hình xem chi tiết khách hàng
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Hủy Button Đóng trang hiển thị chi tiết khách hàng
Bảng 4 25 Bảng mô tả các đối tượng trên màn hình
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
1 Click vào button hủy Đóng trang hiện chi tiết khách hàng
Bảng 4 26 Bảng mô tả các danh sách và biến cố trên màn hình
Hình 4 23 Màn hình thêm khách hàng
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Tên khách hang Input Nhập tên khách hang Bắt buộc
2 Số điện thoại Input Nhập số điện thoại Bắt buộc
3 Ngày sinh Input Nhập ngày sinh Bắt buộc
4 Địa chỉ Input Nhập ngày sinh Bắt buộc
5 CCCD Input Nhập ngày sinh Bắt buộc
6 Email Input Nhập Email Bắt buộc
7 Password Input Nhập password Bắt buộc
8 Password Input Nhập lại password Bắt buộc
9 Thêm dữ liệu Button Thêm dữ liệu khách hang Bắt buộc
10 Hủy Button Đóng trang thêm khách hàng
Bảng 4 27 Bảng mô tả các đối tượng trên màn hình
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên Mô tả xử lý hàm
1 Click vào button thêm Dữ liệu khách hang được lưu vào d ữ li ệ u d at a b a s e2C li Đ ó ck vào button Hủy ng trang khách hàng
Bảng 4 28 Bảng mô tả các danh sách và biến cố trên màn hình b) Quản lý ô tô Ý nghĩa
Hình 4 24 Màn hình quản lý ô tô
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Quản lý khách hàng Hiển thị trang quản lý khách hàng
2 Quản lý khách hàng Hiển thị trang quản lý khách hàng
3 Quản lý nhân viên Hiển thị trang quản lý nhân viên
4 Quản lý hóa đơn Hiển thị trang quản lý hóa đơn
5 Quản lý tin thức Hiển thị trang qản lý tin tức
Hình 4 25 Màn hình xác nhận xác nhận xóa ô tô
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
ButtonXóa thông tin xe có sẵn Button Hủy xác nhận xóa thông tin xe
Bảng 4 29 Bảng mô tả các đối tượng trên màn hình xóa ô tô
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
1 Click vào button Xóa luôn Xóa thông tin xe
2 Click vào button Hủy Hủy xóa thông tin xe
Bảng 4 30 Bảng mô tả các danh sách và biến cố trên màn hình xóa ô tô
Hình 4 26 Màn hình cập nhật dữ liệu xe
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Tên xe Input Nhập tên xe
2 Hình ảnh Input Nhập Link hình ảnh
3 Thương hiệu Input Nhập thương hiệu
4 Giá xe Input Nhập giá xe
5 Động cơ Input Nhập tên động cơ
6 Số chỗ ngồi Input Nhập số chỗ ngồi
7 Kích thước Input Nhập kích thước
8 Nguồn gốc Input Nhập nguồn gốc
9 Tốc độ tối đa Input Nhập tốc độ tối đa
10 Dung tích Input Nhập dung tích tối đa
11 Tiêu hao nhiên liệu Input Nhập tiêu hao nhiên liệu
12 Cập nhật Button Xác nhận cập nhật
12 Hủy Button Xác nhận hủy
Bảng 4 31 Bảng mô tả các đối tượng trên màn hình cập nhật dữ liệu xe
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
1 Click vào button thêm dữ liệu
Dữ liệu khách hang được lưu vào database Đóng trang khách hàng
Bảng 4 32 Bảng mô tả các danh sách và biến cố trên màn hình cập nhật dữ liệu xe
Hình 4 27 Màn hình xem chi tiết xe
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Hủy Button Đóng trang hiển thị chi tiết thông tin xe
Bảng 4 33 Bảng mô tả các đối tượng trên màn hình chi tiết xe
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
1 Click vào button hủy Đóng trang hiện chi tiết thông tin xe
Bảng 4 34 Bảng mô tả các danh sách và biến cố trên màn hình chi tiết xe
Hình 4 28 Màn hình thêm mới ô tô
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Tên xe Input Nhập tên xe Bắt buộc
2 Hình ảnh Input Nhập Link hình ảnh Bắt buộc
3 Thương hiệu Input Nhập thương hiệu Bắt buộc
4 Giá xe Input Nhập giá xe Bắt buộc
5 Động cơ Input Nhập tên động cơ Bắt buộc
6 Số chỗ ngồi Input Nhập số chỗ ngồi Bắt buộc
7 Kích thước Input Nhập kích thước Bắt buộc
8 Nguồn gốc Input Nhập nguồn gốc Bắt buộc
9 Tốc độ tối đa Input Nhập tốc độ tối đa Bắt buộc
10 Dung tích Input Nhập dung tích tối đa Bắt buộc
Bảng 4 35 Bảng mô tả các đối tượng trên màn hình thêm mới ô tô
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm
Mô tả xử lý Ý nghĩa
1 Click vào button thêm dữ liệu
Dữ liệu khách hang được lưu vào database
2 Click vào button Hủy Đóng trang khách hàng
Bảng 4 36 Bảng mô tả các danh sách và biến cố trên màn hình thêm mới ô tô c) Hóa đơn
Hình 4 29 Màn hình quản lý hóa đơn
Bảng mô tả các đối tượng trên màn hình
1 Quản lý ô tô Hiển thị trang quản lý ô tô
2 Quản lý khách hàng Hiển thị trang quản lý khách hàng
3 Quản lý Hiển thị trang quản lý nhân viên nhân viên
4 Quản lý Hiển thị trang quản lý form hóa form
5 Quản lý Hiển thị trang quản lý tin tức hóa tin tức
Tì m kiế m hó a đơ n the o đơn
7 Tình trạng Menu Lọc hóa đơn theo
8 Thêm hóa Button Thêm hóa đơn đơn
9 Chi tiết Button Hiển thị màn hình chi tiết hóa đơn
10 Icon cây Icon Hiển thị màn hình chỉnh sửa hóa đơn bút
11 Icon thùng Icon Hiển thi pop up xác nhận xóa item rác
12 Grid Hiển thị các nội dung của hóa đơn(STT, Mã hóa đơn, Mã Hóa đơn, Ngày lập, Tình trạng, Tổng tiền)
Bảng 4 37 Bảng mô tả các đối tượng trên màn hình quản lý hóa đơn
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên Mô tả xử lý hàm
1 Click vào chọn item “Quản lý Hiển thị trang quản lý ô tô ô tô”
2 Click vào chọn item “Quản lý Hiển thị trang quản lý khách khách hàng” hàng Ý nghĩa
3 Click vào chọn item “Quản lý tin tức”
4 Click vào chọn item “Quản lý form”
5 Click vào chọn item “Quản lý nhân viên”
6 Click vào button thêm hóa đơn
7 Click vào icon cây bút
8 Click vào icon thùng rác
9 Click vào button chi tiết
10 Click vào menu tình trạng
11 Click vào “hiện hóa đơn”
Hiển thị trang quản lý tin tức
Hiển thị trang quản lý form
Hiển thị trang quản lý nhân viên
Hiển thị màn hình pop up để thêm hóa đơn
Hiển thị màn hình chỉnh sửa hóa đơn
Hiển thị màn hình xác nhận xóa pop up.
Hiển thị màn hình chi tiết xe
Hiện ra tình trạng xe để lọc Hiện ra nơi để search
Bảng 4 38 Bảng mô tả các danh sách và biến cố trên màn hình quản lý hóa đơn
Hình 4 30 Màn hình tạo hóa đơn
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Mã KH Input Nhập mã khách hàng Bắt buộc
2 Ngày lập thanh toán Input Nhập ngày lập thanh toán Bắt buộc
3 Mã xe Input Nhập mã xe Bắt buộc
4 Số lượng Input Nhập số lượng Bắt buộc
5 Động cơ Input Nhập tên động cơ Bắt buộc
6 Thêm xe Input Nhập số chỗ ngồi Bắt buộc
7 Kích thước Input Nhập kích thước Bắt buộc
8 Nguồn gốc Input Nhập nguồn gốc Bắt buộc
Bảng 4 39 Bảng mô tả các đối tượng trên màn hình tạo hóa đơn d) Form
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Quản lý ô tô Hiển thị trang quản lý ô tô
2 Quản lý khách hàng Hiển thị trang quản lý khách hàng
3 Quản lý nhân viên Hiển thị trang quản lý nhân viên
4 Quản lý hóa đơn Hiển thị trang quản lý hóa đơn
5 Quản lý tin tức Hiển thị trang quản lý tin tức
6 Icon thùng rác Button Xóa Item grid form
7 Ngày Menu Hiển thị ngày để lọc form
8 Grid form Hiển thị các nội dung của form
Bảng 4 40 Bảng mô tả các đối tượng trên màn hình quản lý form
STT Biến cố Tên Mô tả xử lý Ý hàm nghĩa
1 Click vào chọn item “Quản lý Hiển thị trang quản lý ô tô ô tô”
2 Click vào chọn item “Quản lý Hiển thị trang quản lý khách khách hàng” hàng
3 Click vào chọn item “Quản lý Hiển thị trang quản lý tin tức tin tức”
4 Click vào chọn item “Quản lý Hiển thị trang quản lý form form”
5 Click vào chọn item “Quản lý Hiển thị trang quản lý nhân nhân viên” viên
6 Click vào button thêm hóa Hiển thị màn hình pop up để đơn thêm hóa đơn
7 Click vào icon thùng rác Hiển thị màn hình xác nhận xóa pop up.
Bảng 4 41Bảng mô tả các danh sách các biến cố trên màn hình quản lý form e) Tin tức
Hình 4 31 Màn hình quản lý tin tức
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Quản lý ô tô Hiển thị trang quản lý ô tô
2 Quản lý khách hàng Hiển thị trang quản lý khách hàng
3 Quản lý form Hiển thị trang quản lý form
4 Quản lý hóa đơn Hiển thị trang quản lý hóa đơn
5 Grid tin tức Grid Hiển thị các nội dung của tin tức(STT,Ảnh,Tác Giả,Tiêu đề, Hồ sơ)
Bảng 4 42 Bảng mô tả các đối tượng trên màn hình quản lý tin tức
Hình 4 32 Màn hình xác nhận xóa tin tức
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Xóa luôn Button Xóa thông tin tin tức có sẵn
2 Hủy Button Hủy xác nhận xóa thông tin tin tức
Bảng 4 43 Bảng mô tả các đối tượng trên màn hình xóa tin tức
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
1 Click vào button Xóa luôn Xóa thông tin tin tức
2 Click vào button Hủy Hủy xóa thông tin tin tức
Bảng 4 44 Bảng mô tả các danh sách và biến cố trên màn hình xóa tin tức
Hình 4 33 Màn hình cập nhật tin tức
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Link ảnh Input Nhập link ảnh
2 Tiêu đề Input Nhập tiêu đề
3 Mô tả Input Nhập thương hiệu
4 Ngày đăng Input Nhập ngày đăng
5 Tác giả Input Nhập tên động cơ
6 Số chỗ ngồi Input Nhập số chỗ ngồi
Bảng 4 45 Bảng mô tả các đối tượng trên màn hình sửa tin tức
Hình 4 34 Màn hình thêm tin tức
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Link ảnh Input Nhập link ảnh
2 Tiêu đề Input Nhập tiêu đề
3 Mô tả Input Nhập thương hiệu
4 Ngày đăng Input Nhập ngày đăng
5 Tác giả Input Nhập tên động cơ
6 Chi tiết Input Nhập chi tiết
Bảng 4 46 Bảng mô tả các đối tượng của màn hình thêm tin tức f) Nhân viên
Hình 4 35 Màn hình quản lý nhân viên
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Quản lý ô tô Hiển thị trang quản lý ô tô
2 Quản lý khách hàng Hiển thị trang quản lý khách hàng
3 Quản lý form Hiển thị trang quản lý form
4 Quản lý hóa đơn Hiển thị trang quản lý hóa đơn
5 Quản lý tin thức Hiển thị trang qản lý tin tức
6 Icon cây bút Icon Hiển thị màn hình chỉnh sửa nhân viên
7 Icon thùng rác Icon Hiển thị pop up xóa nhân viên
Bảng 4 47 Bảng mô tả các đối tượng trên màn hình quản lý nhân viên
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
1 Click vào chọn item “Quản lý ô tô”
2 Click vào chọn item “Quản lý khách hàng”
3 Click vào chọn item “Quản lý tin tức”
4 Click vào chọn item “Quản lý form”
5 Click vào chọn item “Quản lý nhân viên”
6 Click vào button thêm hóa đơn
Hiển thị trang quản lý ô tô
Hiển thị trang quản lý khách hàng
Hiển thị trang quản lý tin tức
Hiển thị trang quản lý form
Hiển thị trang quản lý nhân viên
Hiển thị màn hình pop up để thêm hóa đơn
7 Click vào icon cây bút Hiển thị màn hình chỉnh sửa hóa đơn
8 Click vào icon thùng rác Hiển thị màn hình xác nhận xóa pop up.
9 Click vào button chi tiết Hiển thị màn hình chi tiết xe
Bảng 4 48 Bảng mô tả các biến cố màn hình quản lý hóa đơn
Hình 4 36 Màn hình thêm nhân viên
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Tên nhân viên Input Nhập tên nhân viên
2 Giới tính Input Nhập giới tính
3 Địa chỉ Input Nhập địa chỉ
4 Ngày sinh Input Nhập ngày đăng
5 Số điện thoại Input Nhập số điện thoại
6 Chức vụ Input Nhập chức vụ
7 Email Input Nhập Email Bắt buộc
8 Mật khẩu Input Nhập mật khẩu Bắt buộc
9 Xác nhận mật khẩu Input Nhập lại mật khẩu Bắt buộc
Bảng 4 49 Bảng mô tả các đối tượng trên màn hình thêm nhân viên
Hình 4 37 Màn hình xem chi tiết thông tin nhân viên
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Hủy Button Đóng trang hiển thị chi tiết nhân viên.
Bảng 4 50 Bảng mô tả các đối tượng trên màn hình chi tiết nhân viên
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm
Mô tả xử lý Ý nghĩa
1 Click vào button hủy Đóng trang hiện chi tiết thông tin chi tiết nhân viên.
Bảng 4 51 Bảng mô tả các danh sách và biến cố trên màn hình chi tiết nhân viên
Hình 4 38 Màn hình xóa nhân viên
Bảng mô tả các đối tượng trên màn hình
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
1 Xóa luôn Button Xóa thông tin nhân viên có sẵn
2 Hủy Button Hủy xác nhận xóa thông tin nhân viên
Bảng 4 52 Bảng mô tả các đối tượng trên màn hình xóa nhân viên
Bảng mô tả các danh sách và biến cố trên màn hình
STT Biến cố Tên hàm Mô tả xử lý Ý nghĩa
1 Click vào button Xóa luôn Xóa thông tin nhân viên
2 Click vào button Hủy Hủy xóa thông tin nhân viên
Bảng 4 53 Bảng mô tả các danh sách và biến cố trên màn hình xóa nhân viên
CÀI ĐẶT VÀ KIỂM THỬ - ĐỊNH HƯỚNG PHÁT TRIỂN
Các bước cài đặt, deploy đồ án, các API
Link source code Front End: https://github.com/dangbalinh/showroomcar104
Link source code Back End: https://github.com/nuitfsdev/showroomcar104BE
- Các bước chạy dự án ở local:
+ Bước 1: Mở terminal, gõ lệnh git clone https://github.com/dangbalinh/showroomcar104.git
+ Bước 2: Gõ lệnh npm install để cài đặt các node-modules cho dự án
+ Bước 3: Gõ lệnh npm start để chạy dự án
Vì ở local đã dùng API với địa chỉ đã deploy do đó chúng ta không cần chạy source code Back End Trong trường hợp muốn chạy source code Back End ta làm như sau: + Bước 1: Mở terminal, gõ lệnh git clone https://github.com/nuitfsdev/showroomcar104BE.git
+ Bước 2: Gõ lệnh npm install để cài đặt các node-modules cho dự án
+ Bước 3: Thêm thư mục config và file dev.env
+ Bước 4: Trong file dev.env cấu hình các biến môi trường như sau:
MONGODB_URL=mongodb+srv://nuitfsdev:nguyennam@cluster0. afhgoej.mongodb.net/showroomcar104
+Bước 5: Gõ lệnh npm run dev để chạy dự án
+ Front End: Deploy bằng Vercel:
Link tham khảo môi trường cài đặt: https://vercel.com/
Link dự án đã deploy bằng Vercel: https://showroomcar104.vercel.app/ + Back End: Deploy bằng Render:
Link tham khảo môi trường cài đặt : https://render.com/
Link dự án đã deploy bằng Render: https://showroomcar104.onrender.com/
Các API dùng trong đồ án
Sử dụng địa chỉ deploy của BackEnd: https://showroomcar104.onrender.com và kèm các địa chỉ dưới đây Ví dụ https://showroomcar104.onrender.com/cars, https://showroomcar104.onrender.com/news
/cars : lấy thông tin các ô tô Ngoài ra còn hỗ trợ query theo search macar, ten, thuonghieu, pageIndex, pageSize Ví dụ https://showroomcar104.onrender.com/cars?macar=OT3&ten=Honda
/cars/:id : lấy thông tin ô tô có id tương ứng Ví dụ https://showroomcar104.onrender.com/cars/638e3ce750c953be649074 2d
POST: /cars : thêm dữ liệu ô tô mới vào database
PUT: /cars/:id : cập nhật ô tô theo id
DELETE: /cars/:id : xóa ô tô theo id
/users/me : lấy thông tin người dùng đã đăng nhập
/users : thêm mới user, đăng kí tài khoản
/users/forgotPassword: quên mật khẩu
/users/me : cập nhật thông tin người dùng đã đăng nhập
/users/resetPassword: đặt lại mật khẩu
/news : lấy thông tin các tin tức Ngoài ra còn hỗ trợ query theo pageIndex, pageSize
/news/:id : lấy thông tin tin tức có id tương ứng
POST: /news : thêm dữ liệu tin tức mới vào database
PUT: /news/:id : cập nhật tin tức theo id
DELETE: /news/:id : xóa tin tức theo id
/forms : lấy thông tin các form liên hệ của khách hàng Ngoài ra còn hỗ trợ query theo dateForm, pageIndex, pageSize
/forms/:id : lấy thông tin form liên hệ của khách hàng có id tương ứng
POST: /forms : thêm dữ liệu form liên hệ của khách hàng mới vào database DELETE: /forms/:id : xóa form theo id
/users/customers : lấy thông tin các khách hàng Ngoài ra còn hỗ trợ query theo name, mauser, email, search, pageIndex, pageSize
/users/customers/:id : lấy thông tin khách hàng có id tương ứng
POST: /users/customers : thêm dữ liệu khách hàng mới vào database PUT: /users/customers/:id : cập nhật thông tin khách hàng theo id
DELETE: /users/customers/:id : xóa khách hàng theo id
/users/employees : lấy thông tin các nhân viên Ngoài ra còn hỗ trợ query theo name, mauser, email, search, pageIndex, pageSize
/users/employees/:id : lấy thông tin nhân viên có id tương ứng
POST: /users/employees : thêm dữ liệu nhân viên mới vào database PUT: /users/employees/:id : cập nhật thông tin nhân viên theo id
DELETE: /users/employees/:id : xóa nhân viên theo id
/hoadons : lấy thông tin các hóa đơn bao gồm thông chi tiết của hóa đơn Ngoài ra còn hỗ trợ query theo tinhtrang, mahd, pageIndex, pageSize
/hoadons/:id : lấy thông tin hóa đơn có id tương ứng
POST: /hoadons : thêm dữ liệu hóa đơn mới vào database
PUT: /hoadons/:id : cập nhật hóa đơn theo id
DELETE: /hoadons/:id : xóa hóa đơn theo id
Ưu nhược điểm đồ án
- Các tính năng đơn giản, dễ sử dụng, giao diện hiện đại.
- Số lượng xe đa dạng, có tính tham khảo.
- Có áp dụng các phương thức bảo mật cho tài khoản bằng việc mã hóa mật khẩu,xác thực người dùng bằng accessToken AccessToken được lưu vào cookie giúp bảo mật hơn so với lưu ở LocalStorage Gửi email xác thực tài khoản khi người dùng muốn đặt lại mật khẩu.
- Giao diện website gồm hai phần là phần giao diện dành cho khách hàng và giao diện dành cho quản lí Do đó, nó giúp cho luồng hoạt động của website được đảm bảo.
- Website hỗ trợ phân quyền người dùng, hạn chế được người dùng truy cập vào các trang không như cho phép ví dụ như khách hàng không thể truy cập vào trang quản lí.
- Hỗ trợ gửi email đơn đặt hàng cũng như hóa đơn đến email của khách hàng, giúp khách hàng lưu trữ thông tin hóa đơn tiện lợi hơn.
- Hỗ trợ các tính năng lọc, tìm kiếm giúp người dùng dễ dàng hơn trong việc tra cứu thông tin.
- Hỗ trợ nhiều loại quản lí như quản lí ô tô, quản lí khách hàng, quản lí nhân viên, quản lí tin tức, quản lí hóa đơn, quản form liên hệ Trong mỗi trang quản lí đều hỗ trợ các chức năng năng liên quan đến lấy, thêm, xóa, sửa, lọc, tìm kiếm,… Điều đó giúp đảm bảo các chức năng cần thiết cho trang quản lí.
- Chưa hỗ trợ responsive cho trang web
- Một vài thiếu sót trong các chức năng như chưa định dạng sẵn ngày tháng ở một số nơi nhập liệu và xác thực dữ liệu người dùng nhập
- Hiệu suất web chưa cao, một vài xử lý chưa được tối ưu.
Định hướng phát triển đồ án
- Phát triển thêm một số tính năng cho trang web như là tích hợp các chức năng về bảo hành, quản lí chi nhánh,…
- Tối ưu một số phần code nhầm cải thiện hiệu suất trang web.
- Xây dựng website đáp ứng trên mỗi thiết bị và kích thước màn hình khác nhau.
BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN
Họ và tên MSSV Phân công
- Tìm kiếm tài nguyên và phân công công việc lên kế hoạch hoạt động cho các thành viên trong nhóm. Đặng Bá Lĩnh 20521528 - Code và xử lí logic trang chủ.
- Code và xử lý logic trang quản lý khách hàng, trang chi tiết khách hàng
- Viết báo cáo chương 4 Đánh giá
Hoàn thành tốt và đúng tiến độ. 14%
- Code trang trang chủ, trang quản lý ô tô, trang quản lý form phản hồi và xử lý các chức năng ở trong trang.
- Chuẩn bị bố cục code, chia layout cho website, phân chia router đến các trang.
- Quay video demo website quản lý showroom ô tô.
- Thiết kế figma giao diện web và trang dashboard
-Tìm kiếm tài nguyên hình ảnh và dữ liệu xe Honda.
- Code giao diện - xử lí logic trang product.
-Code giao diện - xử lí logic trang quản lí nhân viên.
Hoàn thành tốt và đúng tiến độ. 15%
Hoàn thành tốt và đúng tiến độ. 14%
-Code Front End: xây dựng giao diện và xử lí chức năng màn hình form liên hệ.
-Code Back End: viết các API cho các
Nguyễn Ngọc model như car, user, news…, xử lí các
20521631 chức năng về xác thực người dùng như
Nam đăng nhập, đăng kí, quên mật khẩu, phân quyền người dùng, CRUD, lọc, tìm kiếm, gửi email cho quên mật khẩu, đặt hàng và hóa đơn,…
-Viết báo cáo chương 3, chương 5
- Thiết kế figma giao diện web
- Code giao diện và xử lý hệ thống đăng
Võ Thùy nhập, đăng kí, quên mật khẩu, mật khẩu mới, code header, footer, chức năng
Phương Trúc kiếm trong searchbar đi kèm trang kết quả tìm kiếm, code trang thông tin user.
- Viết báo cáo chương 1, làm slide.
- Thiết kế figma giao diện web
Code giao diện Introduction, quản lý hóa đơn và xử lý logic của giao diện tương ứng.
- Tìm kiếm ảnh và dữ liệu xe BMW,
Huyền Nhung VinFast, Hyundai Hỗ trợ thêm dữ liệu xe vào database.
- Viết báo cáo phần 4.1, 4.2.1 đến 4.2.7.
- Tìm kiếm ảnh và dữ liệu xe, dữ liệu tin tức.
Hoàn thành tốt và đúng tiến độ. 16%
Hoàn thành tốt và đúng tiến độ. 14%
Hoàn thành tốt và đúng tiến độ 13%
Hoàn thành tốt và đúng tiến độ
- Code trang tin tức, trang chi tiết tin tức, trang quản lý tin tức.
