Boy IEBao Cao

Môn học: Xây dựng HTTT trên các framework GVHD: ThS.
Tạ Việt Phương
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA HỆ THỐNG THÔNG TIN
BÁO CÁO CUỐI KÌ

MÔN HỌC: XÂY DỰNG HTTT TRÊN CÁC
FRAMEWORK
Đề tài: Website quản lý Showroom Oto
Giảng viên hướng dẫn: ThS. Tạ Việt Phương
Sinh viên thực hiện:
Đặng Bá Lĩnh 20521528

Đoàn Quốc Bảo 20521097
Nguyễn Ngọc Nam 20521631
Tôn Nữ Thảo Nhi 20521718
Nguyễn Thành Trung 20522074
TP.HCM, ngày 24 tháng 12 năm 2022
1
Môn học: Xây dựng HTTT trên các framework GVHD: ThS. Tạ Việt Phương
MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU ĐỒ ÁN ...................................................................................... 13

1.1. Tổng quan về đồ án ........................................................................................................ 13
1.2. Cấu trúc bài báo cáo ....................................................................................................... 13
CHƯƠNG 2: QUẢN LÝ DỰ ÁN........................................................................................... 15
2.1. Khởi tạo đồ án ................................................................................................................ 15
2.1.1. Lý do hình thành ...................................................................................................... 15
2.1.2. Mục tiêu dự án ......................................................................................................... 15
2.2. Khảo sát hiện trạng, mô tả nghiệp cụ và quy trình cho dự án ........................................ 16
2.2.1. Khảo sát hiện trạng .................................................................................................. 16
2.2.1.1. Thực trạng tổ chức .......................................................................................... 16
2.2.1.2. Thực trạng nghiệp vụ ...................................................................................... 17
2.2.1.3. Thực trạng tin học ........................................................................................... 17
2.2.2. Mô tả nghiệp vụ và quy trình .................................................................................. 19
2.2.3. Xác định yêu cầu ..................................................................................................... 20
2.2.3.1. Yêu cầu chức năng .......................................................................................... 20
2.2.3.2. Yêu cầu phi chức năng.................................................................................... 21
2.2.4. Soạn bản điều lệ dự án............................................................................................. 21
2.4.1.1. Lý do hình thành dự án ................................................................................... 21
2.2.4.2. Mục đích của dự án ......................................................................................... 22
2.2.4.3. Mô tả dự án ..................................................................................................... 22
2.2.4.4. Rủi ro của dự án .............................................................................................. 23
2.2.4.5. Sản phẩm mục tiêu .......................................................................................... 23
2.2.5. Quy trình dự kiến..................................................................................................... 23
2.2.6. Quản lý thời gian dự án ........................................................................................... 24
2.2.7. Phân công nhiệm vụ, đánh giá mức độ hoàn thành ................................................. 26
CHƯƠNG 3: CÔNG CỤ SỬ DỤNG ..................................................................................... 29
3.1. Microsoft Teams ............................................................................................................ 29
3.2. Google Drive .................................................................................................................. 29
3.3. Visual Studio .................................................................................................................. 30
2
3.4. Figma ............................................................................................................................. 31

3.5. Git- Github ..................................................................................................................... 32
3.6. Trello .............................................................................................................................. 34
3.8. SQL Server và SQL management studio. ..................................................................... 35
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ ......................................................................... 37
4.1. Sơ đồ Use case ............................................................................................................... 37
4.2. Danh sách các Actor....................................................................................................... 38
4.3. Danh sách các Use-case ................................................................................................. 38
4.4. Đặt tả Use-case và Activity Diagram ............................................................................. 39
4.4.1. Đăng nhập ................................................................................................................ 39
4.4.1.1. Đặc tả .............................................................................................................. 39
4.4.1.2. Activity diagram ............................................................................................. 40
4.4.2. Đăng ký ................................................................................................................... 42
4.4.2.1. Đặc tả .............................................................................................................. 42
4.4.3. Quản lý thông tin ô tô .............................................................................................. 44
4.4.3.1. Đặc tả .............................................................................................................. 44
4.4.4. Quản lý thông tin nhân viên .................................................................................... 50
4.4.4.1. Đặc tả .............................................................................................................. 50
4.4.5. Quản lý thông tin khách hàng .................................................................................. 56
4.4.5.1. Đặc tả .............................................................................................................. 56
4.4.6. Quản lý tin tức ......................................................................................................... 62
4.4.6.1. Đặc tả .............................................................................................................. 62
4.4.7. Quản lý thông tin hóa đơn thanh toán ..................................................................... 67
4.4.7.1. Đặc tả .............................................................................................................. 67
3
4.4.8. Quản lý form............................................................................................................ 73

4.4.8.1. Đặc tả .............................................................................................................. 73
4.4.9. Xem thông tin hóa đơn ............................................................................................ 77
4.4.9.1. Đặc tả .............................................................................................................. 77
4.5. Sequence Diagram ......................................................................................................... 78
4.5.1. Đăng nhập ................................................................................................................ 78
4.5.2. Đăng ký ................................................................................................................... 80
4.5.3. Quản lý thông tin ô tô .............................................................................................. 81
4.5.4. Quản lý thông tin nhân viên .................................................................................... 86
4.5.5. Quản lý thông tin khách hàng .................................................................................. 91
4.5.6. Quản lý tin tức ......................................................................................................... 96
4.5.7. Quản lý thông tin hóa đơn ..................................................................................... 100
4.5.8. Quản lý form.......................................................................................................... 105
4.5.9. Xem thông tin hóa đơn .......................................................................................... 108
4.6. Class diagram ............................................................................................................... 109
4.6.1. Đăng nhập .............................................................................................................. 109
4.6.2. Đăng ký ................................................................................................................. 110
4.6.3. Quản lý thông tin ô tô ............................................................................................ 111
4.6.4. Quản lý thông tin nhân viên .................................................................................. 112
4.6.5. Quản lý thông tin khách hàng ................................................................................ 113
4.6.6. Quản lý tin tức ....................................................................................................... 114
4.6.7. Quản lý thông tin hóa đơn ..................................................................................... 115
4.6.8. Quản lý form.......................................................................................................... 116
4.6.9.Xem thông tin hóa đơn ........................................................................................... 117
CHƯƠNG 5: LẬP TRÌNH VÀ KIỂM THỬ ...................................................................... 118
5.1. Các công nghệ và thư viện được sử dụng ................................................................... 118
5.1.1.FrontEnd ................................................................................................................. 118
5.1.2. BackEnd ................................................................................................................ 119
4
5.2. Kiểm thử....................................................................................................................... 120

5.2.1. Debug trong Visual Studio: ................................................................................... 120
CHƯƠNG 6: GIAO DIỆN VÀ SO SÁNH .......................................................................... 125
6.1. Giao diện ...................................................................................................................... 125
6.1.1. Sơ đồ liên kết các màn hình................................................................................... 125
6.1.2. Danh sách các màn hình ........................................................................................ 126
6.1.3. Chi tiết màn hình ................................................................................................... 129
6.1.3.1. Màn hình Login ............................................................................................ 129
6.1.3.2. Màn hình Forget Password ........................................................................... 131
6.1.3.3. Màn hình Reset Password ............................................................................. 132
6.1.3.4. Màn hình Register ......................................................................................... 134
6.1.3.5. Màn hình introduction .................................................................................. 136
6.1.3.6. Màn hình Contact.......................................................................................... 137
6.1.3.7. Màn hình News ............................................................................................. 139
6.1.3.8. Màn hình Read news .................................................................................... 141
6.1.3.9. Màn hình trang chủ ....................................................................................... 142
6.1.3.10. Màn hình Product........................................................................................ 146
6.1.3.11. Màn hình User ............................................................................................ 148
6.1.3.12. Màn hình Dashboard................................................................................... 149
6.2. So Sánh ........................................................................................................................ 179
6.2.1. Tổng quan đồ án .................................................................................................... 179
6.2.2. So sánh phân quyền trong đồ án ............................................................................ 180
6.2.3. So sánh các màn hình trong đồ án ......................................................................... 180
CHƯƠNG 7: KẾT LUẬN ................................................................................................... 181
7.1. Môi trường triển khai ................................................................................................... 181
7.2. Ưu điểm........................................................................................................................ 181
7.3. Nhược điểm .................................................................................................................. 182
7.4. Hướng phát triển .......................................................................................................... 182
TÀI LIỆU THAM KHẢO .................................................................................................... 183
5
DANH MỤC BẢNG
Bảng 2. 1. Quy trình dự kiến .......................................................................................... 23

Bảng 2. 2.Thời gian quản lí dự án .................................................................................. 25
Bảng 2. 3. Bảng phân công nhiệm vụ ............................................................................ 28
Bảng 6. 1. Danh sách các màn hình ............................................................................. 128

Bảng 6. 2. Bảng mô tả các đối tượng trên màn hình Login ......................................... 130
Bảng 6. 3. Danh sách các biến cố và xử lý trên màn hình Login................................. 130
Bảng 6. 4. Bảng mô tả các đối tượng trên màn hình Forget password ........................ 131
Bảng 6. 5. Danh sách các biến cố và xử lý trên màn hình Forget password ............... 132
Bảng 6. 6. Bảng mô tả các đối tượng trên màn hình Reset Password ......................... 133
Bảng 6. 7. Danh sách các biến cố và xử lý trên màn hình Reset Password ................. 133
Bảng 6. 8. Bảng mô tả các đối tượng trên màn hình Register ..................................... 135
Bảng 6. 9. Danh sách các biến cố và xử lý trên màn hình Register ............................. 135
Bảng 6. 10. Bảng mô tả các đối tượng trên màn hình Contact .................................... 138
Bảng 6. 11. Danh sách các biến cố và xử lý trên màn hình Contact ............................ 138
Bảng 6. 12.Bảng mô tả các đối tượng trên màn hình News......................................... 140
Bảng 6. 13. Danh sách các biến cố và xử lý trên màn hình News ............................... 140
Bảng 6. 14. Bảng mô tả các đối tượng trên màn hình Read News .............................. 141
Bảng 6. 15. Danh sách các biến cố và xử lý trên màn hình Read News ...................... 142
Bảng 6. 16. Bảng mô tả các đối tượng trên màn hình Home ....................................... 145
Bảng 6. 17. Danh sách các biến cố và xử lý trên màn hình Home .............................. 145
Bảng 6. 18. Màn hình hiển thị thông tin sản phẩm xe ................................................. 146
Bảng 6. 19. Bảng mô tả các đối tượng trên màn hình .................................................. 146
Bảng 6. 20. Bảng mô tả các danh sách và biến cố trên màn hình ................................ 146
Bảng 6. 21. Bảng mô tả các đối tượng trên màn hình .................................................. 147
6
Bảng 6. 22. Bảng mô tả các danh sách và biến cố trên màn hình ................................ 147
Bảng 6. 23. Bảng mô tả các đối tượng trên màn hình user .......................................... 148
Bảng 6. 24. Bảng mô tả các danh sách và biến cố trên màn hình user ........................ 148
Bảng 6. 25. Bảng mô tả các đối tượng trên màn hình Quản lý .................................... 150
Bảng 6. 26. Bảng mô tả các đối tượng trên màn hình quản lí ...................................... 151
Bảng 6. 27. Bảng mô tả các đối tượng trên màn hình quản lí xóa khách hàng ........... 152
Bảng 6. 28. Bảng mô tả các danh sách và biến cố trên màn hình xóa khách hàng ...... 152
Bảng 6. 29. Bảng mô tả các đối tượng trên màn hình cập nhật khách hàng ................ 153
Bảng 6. 30. Bảng mô tả các đối tượng trên màn hình thêm khách hàng ..................... 156
Bảng 6. 31. Bảng mô tả các danh sách và biến cố trên màn hình thêm khách hàng ... 156
Bảng 6. 32. Bảng mô tả các đối tượng trên màn hình xóa ô tô .................................... 158
Bảng 6. 33. Bảng mô tả các danh sách và biến cố trên màn hình xóa ô tô .................. 158
Bảng 6. 34. Bảng mô tả các đối tượng trên màn hình cập nhật dữ liệu xe .................. 160
Bảng 6. 35. 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 160
Bảng 6. 36. Bảng mô tả các đối tượng trên màn hình chi tiết xe ................................. 161
Bảng 6. 37. Bảng mô tả các danh sách và biến cố trên màn hình chi tiết xe .............. 161
Bảng 6. 38. Bảng mô tả các đối tượng trên màn hình thêm mới ô tô .......................... 163
Bảng 6. 39. Bảng mô tả các danh sách và biến cố trên màn hình thêm mới ô tô ........ 163
Bảng 6. 40. Bảng mô tả các đối tượng trên màn hình quản lý hóa đơn ....................... 165
Bảng 6. 41. 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 ..... 166
Bảng 6. 42. Bảng mô tả các đối tượng trên màn hình tạo hóa đơn .............................. 167
Bảng 6. 43. Bảng mô tả các đối tượng trên màn hình quản lý form ............................ 167
Bảng 6. 44. Bảng mô tả các danh sách các biến cố trên màn hình quản lý form ........ 168
Bảng 6. 45. Bảng mô tả các đối tượng trên màn hình quản lý tin tức ......................... 169
Bảng 6. 46. Bảng mô tả các đối tượng trên màn hình xóa tin tức................................ 170
Bảng 6. 47. Bảng mô tả các danh sách và biến cố trên màn hình xóa tin tức .............. 170
Bảng 6. 48. Bảng mô tả các đối tượng trên màn hình sửa tin tức ................................ 172
7
Bảng 6. 49. Bảng mô tả các đối tượng của màn hình thêm tin tức .............................. 173
Bảng 6. 50. Bảng mô tả các đối tượng trên màn hình quản lý nhân viên .................... 174
Bảng 6. 51. Bảng mô tả các biến cố màn hình quản lý hóa đơn .................................. 175
Bảng 6. 52. Bảng mô tả các đối tượng trên màn hình thêm nhân viên ........................ 177
Bảng 6. 53. Bảng mô tả các đối tượng trên màn hình chi tiết nhân viên ..................... 177
Bảng 6. 54. 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 ... 178
Bảng 6. 55. Bảng mô tả các đối tượng trên màn hình xóa nhân viên .......................... 178
Bảng 6. 56. 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 ........ 179
DANH MỤC HÌNH ẢNH
Hình 3. 1. Họp nhóm trên Ms Teams ............................................................................. 29

Hình 3. 2. Lưu dữ liệu bằng driver................................................................................. 30
Hình 3. 3. Logo công cụ visual Studio ........................................................................... 31
Hình 3. 4. Thiết kế giao diện bằng Figma ...................................................................... 32
Hình 3. 5. Quản lý source code bằng Github ................................................................. 33
Hình 3. 6. Quản lý tiến độ bằng Trello .......................................................................... 34
Hình 3. 7. Logo Visual Studio Code .............................................................................. 35
Hình 4. 1. Sơ đồ tổng quát Use-case .............................................................................. 38

Hình 4. 2. Sơ đồ Active Diagram Đăng nhập ................................................................ 41
Hình 4. 3. Sơ đồ Active Diagram Đăng kí ..................................................................... 43
Hình 4. 4. Đặc tả quản lý thông tin oto .......................................................................... 44
Hình 4. 5. Sơ đồ Active Diagram xem thông tin chi tiết của ô tô .................................. 45
Hình 4. 6. Sơ đồ Active Diagram thêm thông tin mới của ô tô ..................................... 46
Hình 4. 7. Sơ đồ Active Diagram tìm kiếm thông tin của ô tô ...................................... 47
Hình 4. 8. Sơ đồ Active Diagram xóa thông tin của ô tô ............................................... 48
8
Hình 4. 9. Sơ đồ Active Diagram cập nhật thông tin của ô tô ....................................... 49

Hình 4. 10. Sơ đồ Active Diagram xem thông tin chi tiết nhân viên ............................. 51
Hình 4. 11. Sơ đồ Active Diagram thêm thông tin nhân viên mới ................................ 52
Hình 4. 12. Sơ đồ Active Diagram tìm kiếm thông tin nhân viên ................................. 53
Hình 4. 13. Sơ đồ Active Diagram xóa thông tin nhân viên .......................................... 54
Hình 4. 14. Sơ đồ Active Diagram cập nhật thông tin nhân viên .................................. 56
Hình 4. 15. Sơ đồ Active Diagram xem thông tin chi tiết khách hàng .......................... 57
Hình 4. 16. Sơ đồ Active Diagram thêm thông tin chi tiết khách hàng mới ................. 58
Hình 4. 17. Sơ đồ Active Diagram tìm kiếm thông tin khách hàng............................... 59
Hình 4. 18. Sơ đồ Active Diagram xóa thông tin khách hàng ....................................... 60
Hình 4. 19. Sơ đồ Active Diagram cập nhật thông tin khách hàng .............................. 61
Hình 4. 20. Sơ đồ Active Diagram xem thông tin tin tức .............................................. 63
Hình 4. 21. Sơ đồ Active Diagram thêm tin tức ........................................................... 64
Hình 4. 22. Sơ đồ Active Diagram cập nhật tin tức ....................................................... 66
Hình 4. 23. Sơ đồ Active Diagram xóa tin tức............................................................... 66
Hình 4. 24. Sơ đồ Active Diagram xem thông tin chi tiết hóa đơn ............................... 68
Hình 4. 25. Sơ đồ Active Diagram tạo hóa đơn mới ..................................................... 69
Hình 4. 26. Sơ đồ Active Diagram tìm kiếm hóa đơn ................................................... 70
Hình 4. 27. Sơ đồ Active Diagram xóa hóa đơn ............................................................ 71
Hình 4. 28. Sơ đồ Active Diagram cập nhật thông tin hóa đơn ..................................... 72
Hình 4. 29. Sơ đồ Active Diagram xem thông tin form................................................. 74
Hình 4. 30. Sơ đồ Active Diagram tìm kiếm form ........................................................ 75
Hình 4. 31. Sơ đồ Active Diagram xóa form ................................................................. 76
Hình 4. 32. Sơ đồ Active Diagram xem thông tin hóa đơn ........................................... 78
Hình 4. 33. Sequence Diagram đăng nhập ..................................................................... 79
Hình 4. 34. Sequence Diagram đăng ký......................................................................... 81
Hình 4. 35. Sequence Diagram xem thông tin ô tô ........................................................ 81
9
Hình 4. 36. Sequence Diagram thêm thông tin ô tô ....................................................... 83

Hình 4. 37. Sequence Diagram tìm kiếm ô tô ................................................................ 83
Hình 4. 38.Sequence Diagram cập nhật thông tin ô tô .................................................. 85
Hình 4. 39. Sequence Diagram xóa thông tin ô tô ......................................................... 85
Hình 4. 40. Sequence Diagram xem thông tin nhân viên .............................................. 86
Hình 4. 41.Sequence Diagram thêm thông tin nhân viên .............................................. 87
Hình 4. 42. Sequence Diagram tìm kiếm nhân viên ...................................................... 88
Hình 4. 43. Sequence Diagram cập nhật thông tin nhân viên ........................................ 89
Hình 4. 44. Sequence Diagram xóa thông tin nhân viên ............................................... 90
Hình 4. 45. Sequence Diagram xem thông tin khách hàng ............................................ 91
Hình 4. 46. Sequence Diagram thêm thông tin khách hàng........................................... 92
Hình 4. 47. Sequence Diagram tìm kiếm khách hàng .................................................... 93
Hình 4. 48. Sequence Diagram cập nhật thông tin khách hàng ..................................... 94
Hình 4. 49. Sequence Diagram xóa thông tin khách hàng ............................................. 95
Hình 4. 50. Sequence Diagram xem tin tức ................................................................... 96
Hình 4. 51. Sequence Diagram thêm mới tin tức ........................................................... 97
Hình 4. 52. Sequence Diagram cập nhật tin tức............................................................. 98
Hình 4. 53. Sequence Diagram xóa tin tức .................................................................... 99
Hình 4. 54. Sequence Diagram xem thông tin hóa đơn ............................................... 100
Hình 4. 55. Sequence Diagram thêm hóa đơn ............................................................. 101
Hình 4. 56. Sequence Diagram tìm kiếm hóa đơn ....................................................... 102
Hình 4. 57. Sequence Diagram cập nhật thông tin hóa đơn......................................... 103
Hình 4. 58. Sequence Diagram xóa thông tin hóa đơn ................................................ 104
Hình 4. 59. Sequence Diagram xem phản hồi form ..................................................... 105
Hình 4. 60. Sequence Diagram tìm kiếm form ............................................................ 106
Hình 4. 61. Sequence Diagram xóa form ..................................................................... 107
Hình 4. 62. Sequence Diagram xem thông tin hóa đơn trực tuyến .............................. 108
10
Hình 4. 63. Class diagram đăng nhập .......................................................................... 109

Hình 4. 64. Class diagram đăng ký .............................................................................. 110
Hình 4. 65. Class diagram quản lí thông tin ô tô ......................................................... 111
Hình 4. 66. Class diagram quản lí thông tin nhân viên ................................................ 112
Hình 4. 67. Class diagram quản lí thông tin khách hàng ............................................. 113
Hình 4. 68. Class diagram quản lí tin tức..................................................................... 114
Hình 4. 69. Class diagram quản lí hóa đơn .................................................................. 115
Hình 4. 70. Class diagram quản lí form ....................................................................... 116
Hình 4. 71. Class diagram xem thông tin hóa đơn ....................................................... 117
Hình 5. 1. Cửa sổ theo dõi biến .................................................................................... 121

Hình 5. 2. Thanh công cụ debug .................................................................................. 121
Hình 5. 3. Cửa sổ Diagnostic Tools ............................................................................. 122
Hình 5. 4. Màn hình làm việc Postman ........................................................................ 123
Hình 5. 5. Giao diện Swagger UI ................................................................................. 124
Hình 6. 1. Sơ đồ liên kết các màn hình ........................................................................ 125

Hình 6. 2. Màn hình Login ........................................................................................... 129
Hình 6. 3.Danh sách các biến cố và xử lý trên màn hình Login .................................. 131
Hình 6. 4. Màn hình Reset Password. .......................................................................... 132
Hình 6. 5. Màn hình Register ....................................................................................... 134
Hình 6. 6. Màn hình Introduction ................................................................................ 136
Hình 6. 7. Màn hình Contact ........................................................................................ 137
Hình 6. 8. Màn hình tin tức .......................................................................................... 139
Hình 6. 9. Màn hình Read news ................................................................................... 141
Hình 6. 10. Màn hình trang chủ ................................................................................... 142
11
Hình 6. 11. Liên hệ ....................................................................................................... 142

Hình 6. 12. Gợi ý sản phẩm ......................................................................................... 143
Hình 6. 13. Tất cả mẫu xe ............................................................................................ 143
Hình 6. 14. Đánh giá khách hàng ................................................................................. 144
Hình 6. 15. Tin tức tiêu biểu ........................................................................................ 144
Hình 6. 16. Màn hình thể hiện chi tiết xe ..................................................................... 147
Hình 6. 17. Màn hình quản lí khách hàng .................................................................... 149
Hình 6. 18. Màn hình xác nhận xóa khách hàng .......................................................... 152
Hình 6. 19. Màn hình cập nhật dữ liệu khách hàng ..................................................... 153
Hình 6. 20. Màn hình xem chi tiết khách hàng ............................................................ 154
Hình 6. 21. Bảng mô tả các đối tượng trên màn hình chi tiết khách hàng ................... 154
Hình 6. 22. Bảng mô tả các danh sách và biến cố trên màn hình xem chi tiết khách hàng
...................................................................................................................................... 154
Hình 6. 23. Màn hình thêm khách hàng ....................................................................... 155
Hình 6. 24. Màn hình quản lý ô tô ............................................................................... 157
Hình 6. 25. Màn hình xác nhận xác nhận xóa ô tô ....................................................... 158
Hình 6. 26. Màn hình cập nhật dữ liệu xe .................................................................... 159
Hình 6. 27. Màn hình xem chi tiết xe........................................................................... 161
Hình 6. 28. Màn hình thêm mới ô tô ............................................................................ 162
Hình 6. 29. Màn hình quản lý hóa đơn ........................................................................ 163
Hình 6. 30. Màn hình tạo hóa đơn ............................................................................... 166
Hình 6. 31. Màn hình quản lý tin tức ........................................................................... 169
Hình 6. 32. Màn hình xác nhận xóa tin tức .................................................................. 170
Hình 6. 33. Màn hình cập nhật tin tức.......................................................................... 171
Hình 6. 34. Màn hình thêm tin tức ............................................................................... 172
Hình 6. 35. Màn hình quản lý nhân viên ...................................................................... 173
Hình 6. 36. Màn hình thêm nhân viên.......................................................................... 176
12
Hình 6. 37. Màn hình xem chi tiết thông tin nhân viên ............................................... 177
Hình 6. 38. Màn hình xóa nhân viên ............................................................................ 178
CHƯƠNG 1: GIỚI THIỆU ĐỒ ÁN
1.1. Tổng quan về đồ án

Đồ án (phần mềm) quản lý showroom ô tô được thực hiện với mục đích triển khai một
hệ thống toàn diện đối với nhiều loại đối tượng khác nhau trong quản lý ô tô và các thông
tin liên quan (khách hàng, nhân viên và chủ cửa hàng). Đồ án cũng đã có cho mình
những tính năng cơ bản hiệu quả nhất; đây là thước đo đánh giá chuẩn mực cho bất kỳ
dự án khi triển khai trên thực tế nào. Được thảo luận và trau chuốt bởi các thành viên
trong nhóm, đồ án hy vọng sẽ góp phần phản ánh đúng được nội dung kiến thức và khả
năng nắm bắt các thông tin thực tiễn bên ngoài của từng cá nhân nói riêng và cả nhóm
nói chung.
1.2. Cấu trúc bài báo cáo

Với mục đích để người sử dụng và thầy các bạn tham khảo, nắm bắt được chi tiết tường
tận nhất các khía cạnh xung quanh đồ án, bài báo cáo được chia ra thành các nội dung
chính như:
• QUẢN LÝ DỰ ÁN: nêu rõ các chi tiết, các khía cạnh nghiệp vụ như lý do hình
thành đồ án mục tiệu dự án, khảo sát hiện trạng và quy trình nghiệp vụ, yêu cầu
chức năng…
• CÔNG CỤ SỬ DỤNG: nắm bắt được những công cụ hữu ích để triển khải thực
hiện đồ án được thuận tiện và tối ưu nhất: công cụ quản lý công việc (Trello),
database (sql server), IDE: Visual studio...
• PHÂN TÍCH VÀ THIẾT KẾ: thực hiện xây dựng các sơ đồ use-case
13
• LẬP TRÌNH VÀ KIỂM THỬ: các phương pháp lập trình và công nghệ được
sử dụng cho đồ án. Các bước kiểm thử là điều không thể thiếu trong quá trình
thực hiên đồ án.
• GIAO DIỆN VÀ SO SÁNH: lập được sơ đồ liên kết các màn hình và chi tiết các
màn hình (đối tượng, sự kiện có trong màn hình).
• ƯU NHƯỢC ĐIỂM VÀ ĐỊNH HƯỚNG PHÁT TRIỂN: các thành viên trong
nhóm nói riêng và cả nhóm đút kết những ưu nhược điểm của đồ án đồng thời
đưa ra những hướng phát triển trong tương lai để phù hợp với yêu cầu thực tế.
14
CHƯƠNG 2: QUẢN LÝ DỰ ÁN
Trang giới thiệu nhóm: https://boysie.renderforestsites.com/

Repository FrontEnd: https://github.com/dangbalinh/ShowroomcarIS220
Repository BackEnd: https://github.com/trung0302/ShowroomCarIS220
Quản lí dự án trên Trello: https://trello.com/b/N2cYqine/%C4%91%E1%BB%93-
%C3%A1n-cu%E1%BB%91i-k%C3%AC
2.1. Khởi tạo đồ án
2.1.1. Lý do hình thành
Theo báo cáo thị trường ô tô trong nước cuối năm 2021, số lượng ô tô tiêu thụ ở trong
nước tăng 25% so với năm 2020. Sau khi đại dịch Covid-19 được kiểm soát, thị trường
ô tô ở Việt Nam được giới chuyên gia đánh giá sẽ có nhiều điểm sáng và tăng trưởng
mạnh. Nhu cầu sử dụng ô tô ở nước ta ngày càng tăng dẫn đến các nhà kinh doanh, các
đại lý bán lẻ đang dần đầu tư vào lĩnh vực này. Các showroom bán ô tô ở nước ta xuất
hiện càng nhiều. Điều đó kéo theo cần phải có một phần mềm để quản lý là điều rất quan
trọng và cần thiết. Qua việc tìm hiểu các báo cáo về thị trường ô tô và nhu cầu của các
đại lý bán lẻ, nhóm chúng em quyết định chọn đề tài “Phần mềm quản lý Showroom ô
tô” là đồ án của nhóm.
https://www.vietinbank.vn/investmentbanking/resources/reports/042019-CTS-
BCnganhoto.pdf
https://consosukien.vn/ky-vong-tu-thi-truong-o-to-nam-2022.htm
2.1.2. Mục tiêu dự án
Hiểu được nhu cầu quản lý showroom của các nhà đại lý bán lẻ, nhóm chúng em xây
dựng “Phần mềm quản lý Showroom ô tô” với mục tiêu:
15
+ Cung cấp phần mềm quản lý hiệu quả, giúp showroom tiết kiệm được nhiều thời gian
trong việc quản lý ô tô, nhân viên, khách hàng. Hỗ trợ người dùng truy cập để tìm hiểu,
có được cái nhìn trực quan nhất về các loại ô tô và các hoạt động xung quanh việc mua
bán của showroom.
+ Giúp cho showroom có được tầm nhìn định hướng phát triển trong tương lai trong việc
mua bán ô tô và phục vụ khách hàng thông qua các đánh giá và phản hồi ý kiến.
+ Về cá nhân nhóm chúng em, việc xây dựng phần mềm quản lý Showroom ô tô giúp
nâng cao khả năng phối hợp làm việc nhóm, hiểu rõ hơn về cách xây dựng và quản lý
một dự án. Đồng thời, việc tìm hiểu framework ASP.Net nói riêng, các công nghệ của
microsoft nói chung giúp cho chúng em có thêm kiến thức và khả năng thực hành với
công nghệ mới, là hành trang bước tiếp sau này.
2.2. Khảo sát hiện trạng, mô tả nghiệp cụ và quy trình cho dự án
2.2.1. Khảo sát hiện trạng
2.2.1.1. Thực trạng tổ chức
Chủ đầu tư: Showroom Oto
Địa chỉ: Phường 2, quận Tân Bình, Thành phố Hồ Chí Minh.
Số điện thoại: (028)1254896
Cơ cấu tổ chức gồm:
▪ Giám đốc
▪ Phó giám đốc
▪ Phòng nhân sự
▪ Phòng hành chính
16
▪ Phòng kế hoạch-nghiệp vụ
▪ Phòng tài chính- kế toán
▪ Phòng marketing- sale
▪ Phòng thiết kế- trưng bày
▪ Phòng sửa chữa-bảo trì sản phẩm
2.2.1.2. Thực trạng nghiệp vụ
Trước tình hình nhu cầu sử dụng ôtô ngày một nhiều, showroom oto liên tục được
khách hàng ghé thăm quan và mua oto. Tuy nhiên do diện tích trưng bày nhỏ nên chỉ
trưng bày được một vài mẫu xe mà thôi. Còn nhiều mẫu xe mà khách hàng hỏi đến hiện
không được trưng bày. Nó làm cho nhiều khách hàng không hài lòng và không quay lại
showroom.
Do đó, Giám đốc showroom đã mở cuộc họp nhằm để tạo ra một trang web nhằm
giới thiệu các mẫu xe đang bán và các mẫu mới sắp ra mắt. Trang web sẽ lưu trữ thông
tin xe, thông tin khách hàng, các đơn đặt hàng, hỗ trợ khách hàng, … Khách hàng có thể
lên trang web để xem sản phẩm về mẫu mã, giá thành, dịch vụ bảo dưỡng và sửa chữa.
Khách hàng có thể đặt mua online hoặc đặt lịch hẹn đến showroom xem và mua xe.
Khách hàng có thể thanh toán qua nhiều hình thức như chuyển khoản hay tiền mặt trực
tiếp ở showroom. Khi khách hàng mua xe online thông tin khách hàng sẽ được chuyển
đến các phòng ban để xử lý.
2.2.1.3. Thực trạng tin học
*Phần cứng
Tại Showroom oto có khoảng 20 thiết bị máy tính cá nhân được phân bố đều ở các
phòng ban và các khoa, đảm bảo các tổ nhân viên ở các khoa, các phòng ban, mỗi tổ đều
17
có từ 5-7 thiết bị máy tính hoạt động tốt, đủ tiêu chuẩn để hoạt động phục vụ trong công
việc.
Ngoài ra, Showroom oto còn có 01 máy chủ cấu hình mạnh, và 02 máy chủ dự phòng
để phòng ngừa khi có sự cố.
Các máy tính các ở Trung tâm Y tế quận Tân Phú đều được nối mạng LAN và được
kết nối internet thông qua đường truyền cáp quang tốc độ cao, đảm bảo được các yêu
cầu trong công việc, có tính ổn định và tốc độ truy xuất cao.
Các máy móc, thiết bị ôtô chuyên dùng được kết nối với máy tính, đảm bảo còn hoạt
động tốt, đủ số lượng tại các phòng ban, phục vụ tốt trong việc
tại showroom.
Các khách hàng mua oto đều sử dụng các thiết bị như điện thoại thông minh hoặc có
máy tính cá nhân và đều có thể kết nối Internet để truy xuất lấy thông tin, dữ liệu và mua
oto từ showroom.
*Phần mềm
Tất cả máy tính cá nhân ở Showroom oto đều sử dụng hệ điều hành Windows XP trở
lên, và được cài đầy đủ các phần mềm văn phòng, phần mềm nghiệp vụ oto, …
Các bản phần mềm bên phía showroom đều được cung cấp chính hãng, có bản quyền
đảm bảo được tính bảo mật, ổn định và truy xuất nhanh chóng.
Khách hàng sử dụng máy tính cá nhân từ hệ điều hành Windows XP trở lên, các thiết
bị thông minh như điện thoại thì đều sử dụng các hệ điều hành phổ biến như Android và
IOS.
18
*Con người
Các nhân viên đều có thể sử dụng máy tính và các thiết bị liên quan, có trình độ tin học
văn phòng căn bản, sử dụng thành thạo các phầm mềm liên quan trong nghiệp vụ, sử
dụng được internet để đồng bộ dữ liệu trong nội bộ.
Có các chuyên viên hỗ trợ, phụ trách các mảng liên quan đến máy tính và xử lý sự cố,
chuyên viên quản lý, phụ trách các máy chủ.
Có các tổ phụ trách kiểm tra bảo dưỡng các thiết bị máy tính, hệ thống mạng định kỳ, để
đảm bảo tính ổn định của trang web.
2.2.2. Mô tả nghiệp vụ và quy trình
Thu thập thông tin
Thu thập thông tin chi tiết, dữ liệu về các loại ô tô.
Lập kế hoạch
Tìm hiểu những chức năng cần có, vấn đề cần giải quyết của showroom.
Chọn ngôn ngữ và hệ quản trị thích hợp để viết website.
Tạo repo và sử dụng Jira để quản lý dự án.
Phân task cho các thành viên
Thiết kế giao diệ
Tìm hiểu layout, vẽ sơ đồ liên kết màn hình cho website
Sử dụng figma để thiết kế giao diện website.
Giao diện của website phải có bố cục rõ ràng, thân thiện với người sử dụng.
Màu sắc phải hài hòa, phù hợp với chủ đề của website.
Viết mã nguồn
19
Sử dụng framework ReactJs để lập trình giao diện website.
Sử dụng ASP.NET để lập trình Backend.
Xây dựng cơ sở dữ liệu và thực hiện truy vấn dữ liệu.
Kiểm thử, đánh giá và ra mắt sản phẩm.
Kiểm thử chức năng, hiệu năng của website.
Đánh giá độ hiệu quả của website dựa trên phản hồi và ý kiến người dùng.
Ra mắt sản phẩm trước thầy và lớp.
Bảo trì, nâng cấp
Lấy ý kiến người dùng để hoàn thiện sản phẩm.
Bảo trì liên tục để website được hoàn thiện hơn, vận hành tốt, hoạt động ổn
định, tốc độ tải nhanh, tối ưu SEO hơn sau khi thiết kế web ban đầu.
2.2.3. Xác định yêu cầu
2.2.3.1. Yêu cầu chức năng
Website được xây dựng phải đáp ứng những nhu cầu cần thiết của showroom.
Giao diện website: bố cục rõ ràng, giao diện dễ sử dụng, dễ tương tác, màu sắc hài hòa,
phù hợp với chủ đề “Quản lý showroom ô tô”.
Hình ảnh – thông tin trực quan: cung cấp hình ảnh và thông tin về ô tô là những chức
năng thiết yếu của website quản lý showroom ô tô. Để thu hút được khách hàng và lượt
truy cập, hình ảnh và thông tin trực quan trên trang phải rõ ràng, sắc nét.
Hình ảnh trên website: Hình ảnh rõ nét, ấn tượng với người xem nhằm tăng sự thu hút
và độc đáo cho trang web.
Thông tin trực quan: mô tả chi tiết các thông tin của ô tô, trình bày dễ đọc.
20
Chức năng tìm kiếm: hỗ trợ tra cứu nhanh các thông tin về ô tô, các thông tin liên quan
đến ô tô, giúp người dùng tiết kiệm thời gian trong việc tìm kiếm.
Nhằm quản lý thông tin về:
Quản lý thông tin khách hàng.
Quản lý nhân viên.
Quản lý sản phẩm.
Cập nhật giá, thông tin sản phẩm.
2.2.3.2. Yêu cầu phi chức năng
Giúp quản lý các hoạt động kinh doanh của showroom.
Giúp quảng bá thông tin tới khách hàng.
Xây dựng một website quản lý showroom ô tô tiện lợi, hiệu quả với chi phí hợp lý.
Nâng cao hoạt động của showroom thông qua việc tin học hóa bộ phận quản lý và tiết
kiệm được chi phí.
2.2.4. Soạn bản điều lệ dự án
2.4.1.1. Lý do hình thành dự án

Theo báo cáo thị trường ô tô trong nước cuối năm 2021, số lượng ô tô tiêu thụ ở trong
nước tăng 25% so với năm 2020. Sau khi đại dịch Covid-19 được kiểm soát, thị trường
ô tô ở Việt Nam được giới chuyên gia đánh giá sẽ có nhiều điểm sáng và tăng trưởng
mạnh. Nhu cầu sử dụng ô tô ở nước ta ngày càng tăng dẫn đến các nhà kinh doanh, các
đại lý bán lẻ đang dần đầu tư vào lĩnh vực này. Các showroom bán ô tô ở nước ta xuất
hiện càng nhiều. Điều đó kéo theo cần phải có một phần mềm để quản lý là điều rất quan
trọng và cần thiết. Qua việc tìm hiểu các báo cáo về thị trường ô tô và nhu cầu của các
21
đại lý bán lẻ, nhóm chúng em quyết định chọn đề tài “Phần mềm quản lý Showroom ô
tô” là đồ án của nhóm.
2.2.4.2. Mục đích của dự án

Hiểu được nhu cầu quản lý showroom của các nhà đại lý bán lẻ, nhóm chúng em xây
dựng “Phần mềm quản lý Showroom ô tô” với mục tiêu:
• Cung cấp phần mềm quản lý hiệu quả, giúp showroom tiết kiệm được nhiều thời
gian trong việc quản lý ô tô, nhân viên, khách hàng.
• Hỗ trợ người dùng truy cập để tìm hiểu, có được cái nhìn trực quan nhất về các
loại ô tô và các hoạt động xung quanh việc mua bán của showroom.
• Giúp cho showroom có được tầm nhìn định hướng phát triển trong tương lai trong
việc mua bán ô tô và phục vụ khách hàng thông qua các đánh giá và phản hồi ý
kiến.
Về cá nhân nhóm chúng em, việc xây dựng phần mềm quản lý Showroom ô tô giúp nâng
cao khả năng phối hợp làm việc nhóm, hiểu rõ hơn về cách xây dựng và quản lý một dự
án. Đồng thời, việc tìm hiểu framework ASP.Net nói riêng, các công nghệ của microsoft
nói chung giúp cho chúng em có thêm kiến thức và khả năng thực hành với công nghệ
mới, là hành trang bước tiếp sau này.
2.2.4.3. Mô tả dự án
• Tên dự án: Quản lý Showroom ô tô.
• Ngày bắt đầu dự án: 05/09/2022.
• Ngày dự kiến kết thúc dự án: 24/12/2022.
• Chủ đầu tư: Nhóm BoyIE.
22
2.2.4.4. Rủi ro của dự án

• Thiếu kinh nghiệm quản lý.
• Kỹ năng lập kế hoạch – khởi động dự án còn hạn chế.
2.2.4.5. Sản phẩm mục tiêu

• Xây dựng hoàn thiện website quản lý showroom ô tô.
• Đưa website đi vào hoạt động ổn định.
2.2.5. Quy trình dự kiến

Các mốc dự án Ngày bắt đầu Ngày kết thúc
Thành lập nhóm dự án 05/09/2022 24/12/2022
Chốt ý tưởng dự án 07/09/2022 07/09/2022
Lập kế hoạch thực hiện 08/09/2022 15/09/2022
Xác định các giai đoạn thực hiện 17/09/2022 17/09/2022
Phân công nhiệm vụ các thành viên 20/12/2022 20/12/2022
Thiết kế giao diện dự án 21/09/2022 27/09/2022
Đánh giá và cải tiến các giai đoạn thực hiện 12/11/2022 12/11/2022
Kiểm tra dự án và chạy thử 10/12/2022 20/12/2022
Bảng 2. 1. Quy trình dự kiến
23
2.2.6. Quản lý thời gian dự án
Mốc thời gian Các công việc đã hoàn thành xong Các công việc dự định sẽ
thực hiện tiếp theo
Lên kế hoạch cho đồ án, phân tích nội Thiết kế giao diện bằng
dung cần làm những gì cho đồ án. figma.
20/9/2022 Thống nhất sử dụng công cụ để quản Hoàn thành các nội dung
lí đồ án. sau:
Phân chi task cho các thành viên cho Lí do hình thành đồ án,
giai đoạn này. mục tiêu đồ án.
Mô tả nghiệp vụ, quy

trình cho đồ án.
Xác định yêu cầu.
Thiết kế website cho đồ

án.
30/9/2022 Thiết kế giao diện bằng figma. Xác định đối tượng, từng
Lí do hình thành đồ án, mục tiêu đồ chức năng của đối tượng.
án. Xây đựng đặc tả Use-case
Mô tả nghiệp vụ, quy trình cho đồ án. và Active diagram.
Xác định yêu cầu. Xây dựng database.
Thiết kế website cho đồ án.
24
20/10/2022 Xác định đối tượng, từng chức năng Tiếp tục xây dựng
của đối tượng. database.
Xây đựng đặc tả Use-case và Active Bắt đầu code giao diện
diagram. FrontEnd.
Xây dựng database.
20/11 Hoàn thành database Tiếp tục code FrontEnd.
Hoàn thành 80% giao diện FrontEnd Tìm hiểu Web API và học
ASP. NET.
26/11/2022 Hoàn thành 100% việc code giao diện Bắt đầu xây dựng API
FrontEnd. cho ứng dụng web.
14//12/2022 Hoàn thành việc xây dựng API cho Soạn báo cáo,
ứng dụng. và làm file thuyết trình.
Kiểm thử dự án.
21/12/2022 Hoàn thành file báo cáo. Báo cáo và kết thúc môn
Hoàn thành file thuyết trình. học.
Hoàn thành kiểm thử
Bảng 2. 2.Thời gian quản lí dự án
25
2.2.7. Phân công nhiệm vụ, đánh giá mức độ hoàn thành
Họ và tên MSSV Phân công Đánh giá
Frontend: Thực hiện làm xây
dựng footer, quản lý khách hàng,
detail product.
Backend: Viết api khách hàng Hoàn thành tốt và
Đặng Bá Lĩnh 20521528
(get, put, post, delete). đúng tiến độ
Làm báo cáo chương 1, chương 2,
chương 6.
Thuyết trình báo cáo đồ án.
FrontEnd: Setup project, xây
dựng giao diện và xử lý các chức
năng trang trang chủ, trang quản
lý ô tô, quản lý hóa đơn.
Nguyễn Thành Hoàn thành tốt và
20522074 BackEnd: Xây dựng các chức
Trung đúng tiến độ
năng về quản lý ô tô, quản lý hóa
đơn.
File báo cáo: Làm báo cáo
chương 1, chương 2, chương 7.
FrontEnd: Xây dựng giao diện và
xử lí logic trang Product, Header
trang quản lí Nhân Viên.
Hoàn thành tốt và
Đoàn Quốc Bảo 20521097
BackEnd: Xây dựng chức năng đúng tiến độ
quản lí nhân viên, thêm xóa sửa
nhân viên và quản lí news.
26
Viết báo cáo chương 3 và định

dạng toàn bộ file báo cáo.
Xây dựng trang giới thiệu nhóm.
Làm silde thuyết trình.
Thiết kế figma dashboard cho

Admin

xử lí chức năng các giao diện về
đăng nhập, đăng kí tài khoản,
quên mật khẩu, thông tin tài
khoản.
BackEnd: Xây dựng các chức
Nguyễn Ngọc Nam 20521631 năng về đăng nhập, đăng kí tài
đúng tiến độ
khoản, quên mật khẩu, thông tin
tài khoản, phân quyền và xác thực
user
File báo cáo: làm báo cáo chương
5, kiểm tra chương 4
Thuyết trình: demo đồ án
xử lí logic trang news, quản lí
Tôn Nữ Thảo Nhi 20521718 news, quản lí form và contact.
đúng tiến độ
BackEnd: Xây dựng chức năng
quản lí form.
27
File báo cáo: Làm báo cáo

chương 4.
Bảng 2. 3. Bảng phân công nhiệm vụ
28
CHƯƠNG 3: CÔNG CỤ SỬ DỤNG
3.1. Microsoft Teams
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 3. 1. Họp nhóm trên Ms Teams
3.2. 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.
29
Hình 3. 2.Lưu dữ liệu bằng driver
3.3. Visual Studio
Visual Studio là hệ thống tập hợp tất cả những gì liên quan tới phát triển ứng dụng, bao
gồm trình chỉnh sửa mã, trình thiết kế, gỡ lỗi. Tức là, bạn có thể viết code, sửa lỗi, chỉnh
sửa thiết kế ứng dụng dễ dàng chỉ với 1 phần mềm Visual Studio mà thôi. Không dừng
lại ở đó, người dùng còn có thể thiết kế giao diện, trải nghiệm trong Visual Studio như
khi phát triển ứng dụng Xamarin, UWP bằng XAML.
30
Hình 3. 3. Logo công cụ visual Studio
3.4. 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.
31
Hình 3. 4. Thiết kế giao diện bằng Figma
3.5. Git- Github
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.
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.
32
Hình 3. 5. Quản lý source code bằng Github
33
3.6. 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 3. 6. Quản lý tiến độ bằng Trello
3.7. Visual Studio Code
Visual Studio Code là một trong những trình soạn thảo mã nguồn rất phổ biến được các
lập trình viên sử dụng. Với các ưu điểm nổi bật là sự nhanh chóng, nhẹ, hỗ trợ đa nền
tảng cùng nhiều tính năng và là mã nguồn mở chính.
34
Hình 3. 7.Logo Visual Studio Code
3.8. SQL Server và SQL management studio.
SQL Server hay còn gọi là Microsoft SQL Server, là một phần mềm quản trị cơ sơ dữ
liệu quan hệ được phát triển bởi microsoft bao gồm: tạo, duy trì, phân tích dữ liệu,… dễ
dàng sử dụng để lưu trữ cho các dữ liệu dựa trên tiêu chuẩn RDBMS – Relational
Database Management System.
SQL Server được xây dựng dựa trên SQL, được tối ưu để có thể chạy trên môi trường
cơ sở dữ liệu rất lớn lên đến Tera – Byte cùng lúc phục vụ cho hàng ngàn user. SQL
Server cung cấp đầy đủ các công cụ cho việc quản lý từ nhận diện GUI đến sử dụng ngôn
ngữ cho việc truy vấn SQL.
35
Microsoft SQL Server Management Studio là một công cụ trực quan dùng để quản lý
SQL Server. Với SQL Server Management Studio chúng ta có thể thực hiện được các
tương tác với database bằng câu lệnh hoặc trên giao diện người dùng. SQL Server
Management Studio được thiết kế đơn giản và dễ sử dụng nhưng cũng cần có thời gian
nhất định để làm quen với công cụ.
36
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ
4.1. Sơ đồ Use case
37
Hình 4. 1. Sơ đồ tổng quát Use-case
4.2. Danh sách các Actor
STT Tên Actor Ý nghĩa
1 Admin Là quản trị viên của web, có thể hoạt động trên nhiều chức
năng
2 Nhân viên Là người nhân viên bán xe, lập hóa đơn, …
3 Khách hàng Những người đã mua xe
Bảng 4. 1. Danh sách các Actor
4.3. Danh sách các Use-case
STT Tên Use-case Ý nghĩa
1 Đăng nhập Người dùng đăng nhập vào web
2 Đăng ký Khách hàng đăng ký vào trang web
3 Quản lý thông tin ô Admin có thể quản lý thông tin ô tô (như xem, thêm, xóa, cập
tô nhật và tìm kiếm)
4 Quản lý thông tin Admin có thể quản lý thông tin nhân viên (như xem, thêm,
nhân viên xóa, cập nhật và tìm kiếm)
5 Quản lý thông tin Admin và nhân viên có thể quản lý thông tin khách hàng (như
khách hàng xem, thêm, xóa, cập nhật và tìm kiếm)
38
6 Quản lý tin tức Thống kê thông tin ô tô
7 Quản lý hóa đơn Nhân viên có thể quản lý hóa đơn thanh toán (như xem, tạo,
xóa, cập nhật và tìm kiếm)
8 Quản lý form Nhân viên có thể quản lý các phản hồi (như xóa, cập nhật và
tìm kiếm)
9 Xem thông tin hóa Hiển thị thông tin các hóa đơn của khách hàng
đơn
Bảng 4. 2.Danh sách các Use-case
4.4. Đặt tả Use-case và Activity Diagram
4.4.1. Đăng nhập
4.4.1.1. Đặc tả
Tên Use-case Đăng nhập
Mô tả Use-case này cho phép đăng nhập vào website quản lý

showroom ô tô
Actor Admin, nhân viên và khách hàng
Dòng sự kiện chính 1. Truy cập vào trang web

2. Chọn đăng nhập và hiển thị màn hình đăng nhập
3. Người dùng nhập sđt và mật khẩu
39
4. Hệ thống đưa người dùng đến trang chủ sau khi đăng
nhập thành công
Trạng thái hệ thống khi bắt Yêu cầu email và mật khẩu hợp lệ
đầu thực hiện Use-case. Tài khoản của người dùng đã được đăng ký
Nếu chưa đăng ký tài khoản thì hãy đăng ký
Thiết bị của người dùng đã được kết nối internet
Trạng thái hệ thống sau khi Nếu use-case thực hiện thành công sẽ đi đến trang chủ.
thực hiện Use-case. Còn không thì trạng thái hệ thống không thay đổi
Điểm mở rộng Không
Bảng 4. 3. Đặc tả Đăng nhập
4.4.1.2. Activity diagram

Người dùng: Admin, nhân viên và khách hàng
40
Hình 4. 2. Sơ đồ Active Diagram Đăng nhập
41
4.4.2. Đăng ký
4.4.2.1. Đặc tả
Tên Use-case Đăng ký
Mô tả Khách hàng đăng nhập vào web để xem thông tin
Actor Khách hàng
Dòng sự kiện chính 1. Truy cập vào trang web
2. Chọn đăng ký và hiển thị màn hình đăng ký
3. Người dùng nhập email, mật khẩu, sđt, thông tin cá nhân
(như họ tên, ngày sinh, giới tính, …)
4. Sau khi đăng ký thành công hệ thống yêu cầu bạn đăng
nhập lại
5. Hệ thống đưa người dùng đến trang chủ sau khi đăng
nhập thành công
Trạng thái hệ thống khi bắt Khách hàng không có tài khoản.
đầu thực hiện Use-case.
Trạng thái hệ thống sau khi Nếu use-case thực hiện thành công sẽ đi đến đăng nhập.
thực hiện Use-case. Còn không thì trạng thái hệ thống không thay đổi
Điểm mở rộng không
Bảng 4. 4. Đặc tả đăng kí
42
Hình 4. 3. Sơ đồ Active Diagram Đăng kí
43
4.4.3. Quản lý thông tin ô tô
4.4.3.1. Đặc tả
Tên Use-case Quản lý thông tin ô tô
Mô tả 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.
Actor Admin
Dòng sự kiện chính 1. Nhấp vào chức năng quản lý thông tin ô tô trong trang web
của admin
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 của ô tô
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ệ
Trạng thái hệ thống khi Admin đã đăng nhập vào trang web
bắt đầu thực hiện Use-
case.
Trạng thái hệ thống sau Nếu use-case thực hiện thành công sẽ hiển thị thông tin hay
khi thực hiện Use-case. lưu thông tin mới. Còn không thì trạng thái hệ thống không
thay đổi
Điểm mở rộng 1. Nhập tên ô tô mới trùng với ô tô đã có

2. Nhập thiếu thông tin
3. Nhấn nút hủy thao tác và không lưu ô tô
Hình 4. 4. Đặc tả quản lý thông tin oto
44

***Xem thông tin chi tiết của ô tô
Hình 4. 5. Sơ đồ Active Diagram xem thông tin chi tiết của ô tô
45
***Thêm thông tin ô tô mới
Hình 4. 6. Sơ đồ Active Diagram thêm thông tin mới của ô tô
46
***Tìm kiếm thông tin ô tô
Hình 4. 7. Sơ đồ Active Diagram tìm kiếm thông tin của ô tô
47
***Xóa thông tin ô tô
Hình 4. 8. Sơ đồ Active Diagram xóa thông tin của ô tô
***Cập nhật thông tin ô tô
48
Hình 4. 9. Sơ đồ Active Diagram cập nhật thông tin của ô tô
49
4.4.4. Quản lý thông tin nhân viên
4.4.4.1. Đặc tả
Tên Use-case Quản lý thông tin nhân viên
Mô tả Admin có thể xem danh sách 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.
Actor Admin
Dòng sự kiện chính 1. Nhấp vào chức năng quản lý thông tin nhân viên trong trang
web của admin
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 của nhân viên
hoặc chọn nhân viên cần cập nhật hoặc xóa. Có thể chọn thêm
thông tin nhân viên mới
4. Lưu thông tin của nhân viên khi thao tác hợp lệ
Trạng thái hệ thống Admin đã đăng nhập vào trang web
khi bắt đầu thực hiện
Use-case.
Trạng thái hệ thống Nếu use-case thực hiện thành công sẽ hiển thị thông tin hay lưu
sau khi thực hiện Use- thông tin mới. Còn không thì trạng thái hệ thống không thay
case. đổi
Điểm mở rộng 1. Nhập thiếu thông tin nhân viên

2. Nhấn nút hủy thao tác và không lưu thông tin nhân viên
Bảng 4. 5. Đặc tả quản lí thông tin nhân viên
50

***Xem thông tin chi tiết của nhân viên
Hình 4. 10. Sơ đồ Active Diagram xem thông tin chi tiết nhân viên
51
***Thêm thông tin nhân viên mới
Hình 4. 11. Sơ đồ Active Diagram thêm thông tin nhân viên mới
52
***Tìm kiếm thông tin nhân viên
Hình 4. 12. Sơ đồ Active Diagram tìm kiếm thông tin nhân viên
53
***Xóa thông tin nhân viên
Hình 4. 13. Sơ đồ Active Diagram xóa thông tin nhân viên
54
***Cập nhật thông tin nhân viên
55
Hình 4. 14. Sơ đồ Active Diagram cập nhật thông tin nhân viên
4.4.5. Quản lý thông tin khách hàng
4.4.5.1. Đặc tả
Tên Use-case Quản lý thông tin khách hàng
Mô tả Admin và nhân viên 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 và tìm kiếm thông tin khách hàng theo nhu cầu.
Actor Admin và nhân viên
Dòng sự kiện chính

1. Nhấp vào chức năng quản lý thông tin khách hàng trong trang
web của admin
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 của khách hàng
hoặc chọn khách hàng cần cập nhật hoặc xóa. Có thể chọn thêm
thông tin khách hàng mới
4. Lưu thông tin của khách hàng khi thao tác hợp lệ
Trạng thái hệ thống Admin và nhân viên đã đăng nhập vàotrang web
Use-case.
sau khi thực hiện thông tin mới. Còn không thì trạng thái hệ thống không thay đổi
Use-case.
Điểm mở rộng 1. Nhập thiếu thông tin khách hàng

2. Nhấn nút hủy thao tác và không lưu thông tin khách hàng
56
Bảng 4. 6. Đặc tả quản lí thông tin khách hàng

Người dùng: Admin và nhân viên
***Xem thông tin chi tiết của khách hàng
Hình 4. 15. Sơ đồ Active Diagram xem thông tin chi tiết khách hàng
57
***Thêm thông tin khách hàng mới
Hình 4. 16. Sơ đồ Active Diagram thêm thông tin chi tiết khách hàng mới
58
***Tìm kiếm thông tin khách hàng
Hình 4. 17. Sơ đồ Active Diagram tìm kiếm thông tin khách hàng
59
***Xóa thông tin khách hàng
Hình 4. 18. Sơ đồ Active Diagram xóa thông tin khách hàng
60
***Cập nhật thông tin khách hàng
Hình 4. 19. Sơ đồ Active Diagram cập nhật thông tin khách hàng
61
4.4.6. Quản lý tin tức
4.4.6.1. Đặc tả
Tên Use-case Quản lý tin tức
Mô tả Admin có thể xem danh sách tin tức, xem chi tiết tin tức về xe
ô tô và có thể thêm, xóa, cập nhật tin tức về xe ô tô để cung cấp
tin tức xe cho khách hàng.
Actor Admin
Dòng sự kiện chính 1. Nhấp vào chức năng quản lý tin tức trong trang web của admin
2. Hiển thị màn hình danh sách tin tức
3. Có thể xem thông tin chi tiết, cập nhật hoặc xóa tin tức. Có thể
chọn thêm tin tức mới về ô tô
4. Lưu tin tức khi thao tác hợp lệ
Trạng thái hệ thống Admin đã đăng nhập vàotrang web
Use-case.
case. đổi
Điểm mở rộng 1. Nhập thiếu thông tin bắt buộc

2. Nhấn nút hủy thao tác và không lưu thông tin tin tức
Bảng 4. 7. Đặc tả quản lí tin tức
62

***Xem chi tiết tin tức
Hình 4. 20. Sơ đồ Active Diagram xem thông tin tin tức
63
***Thêm tin tức
Hình 4. 21. Sơ đồ Active Diagram thêm tin tức
64
***Cập nhật tin tức
65
Hình 4. 22. Sơ đồ Active Diagram cập nhật tin tức
***Xóa tin tức
Hình 4. 23. Sơ đồ Active Diagram xóa tin tức
66
4.4.7. Quản lý thông tin hóa đơn thanh toán
4.4.7.1. Đặc tả
Tên Use-case Quản lý thông tin hóa đơn thanh toán
Mô tả Nhân viên 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.
Actor Nhân viên
Dòng sự kiện chính 1. Nhấp vào chức năng quản lý thông tin hóa đơn trong trang web
của nhân viên
2. Hiển thị màn hình danh sách thông tin hóa đơn
3. Có thể xem thông tin chi tiết, tìm kiếm thông tin của hóa đơn
hoặc chọn hóa đơn cần cập nhật hoặc xóa. Có thể chọn thêm
thông tin hóa đơn mới
4. Lưu thông tin của hóa đơn khi thao tác hợp lệ
Trạng thái hệ thống Nhân viên đã đăng nhập vào trang web
Use-case.
case. đổi
Điểm mở rộng 1. Nhập thiếu thông tin khách hàng

2. Nhấn nút hủy thao tác và không lưu thông tin khách hàng
Bảng 4. 8. Đặc tả quản lí thanh toán hóa đơn
67

***Xem thông tin chi tiết của hóa đơn
Hình 4. 24. Sơ đồ Active Diagram xem thông tin chi tiết hóa đơn
68
***Tạo hóa đơn mới
Hình 4. 25. Sơ đồ Active Diagram tạo hóa đơn mới
69
***Tìm kiếm hóa đơn
Hình 4. 26. Sơ đồ Active Diagram tìm kiếm hóa đơn
70
***Xóa hóa đơn
Hình 4. 27. Sơ đồ Active Diagram xóa hóa đơn
71
***Cập nhật thông tin hóa đơn
Hình 4. 28. Sơ đồ Active Diagram cập nhật thông tin hóa đơn
72
4.4.8. Quản lý form
4.4.8.1. Đặc tả
Tên Use-case Quản lý form
Mô tả Admin và nhân viên có thể xem danh 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, cập nhật và tìm
kiếm thông tin phản hồi theo nhu cầu.
Actor Admin và nhân viên
Dòng sự kiện chính 1. Nhấp vào chức năng quản lý form trong trang web của nhân
viên và admin
2. Hiển thị màn hình danh sách các form
3. Có thể xem thông tin chi tiết của form, tìm kiếm form hoặc
chọn form cần xóa.
4. Lưu xóa form khi thao tác hợp lệ
Trạng thái hệ thống Admin và nhân viên đã đăng nhập vòa trang web
Use-case.
Trạng thái hệ thống Nếu use-case thực hiện thành công sẽ hiển thị thông tin form.
sau khi thực hiện Use- Còn không thì trạng thái hệ thống không thay đổi
case.
Điểm mở rộng 1. Nhấn nút hủy thao tác và không xóa form
Bảng 4. 9. Đặc tả quản lí Form
73

Người dùng: Admin và nhân viên
***Xem thông tin form
Hình 4. 29. Sơ đồ Active Diagram xem thông tin form
74
***Tìm kiếm from
Hình 4. 30. Sơ đồ Active Diagram tìm kiếm form
75
***Xóa form
Hình 4. 31. Sơ đồ Active Diagram xóa form
76
4.4.9. Xem thông tin hóa đơn
4.4.9.1. Đặc tả
Tên Use-case Xem thông tin hóa đơn
Mô tả Khách hàng có thể xem các hóa đơn mua hàng của
bản thân khi có nhu cầu.
Actor Khách hàng
Dòng sự kiện chính 1. Nhấp vào chức năng xem thông tin hóa đơn mua
hàng
2. Hiển thị màn hình danh sách thông tin hóa đơn
mua hàng
Trạng thái hệ thống khi bắt đầu Khách hàng đã đăng nhập vào trang web
thực hiện Use-case.
Trạng thái hệ thống sau khi thực Không

hiện Use-case.
Điểm mở rộng Không
Bảng 4. 10. Đặc tả xem thông tin hóa đơn
77
Hình 4. 32. Sơ đồ Active Diagram xem thông tin hóa đơn
4.5. Sequence Diagram

Người dùng: Admin, nhân viên và khách hàng
78
Hình 4. 33. Sequence Diagram đăng nhập
79
4.5.2. Đăng ký
80
Hình 4. 34. Sequence Diagram đăng ký
***Xem thông tin ô tô
Hình 4. 35. Sequence Diagram xem thông tin ô tô
81
***Thêm thông tin ô tô
82
Hình 4. 36. Sequence Diagram thêm thông tin ô tô
***Tìm kiếm ô tô
Hình 4. 37. Sequence Diagram tìm kiếm ô tô
83
***Cập nhật thông tin ô tô
84
Hình 4. 38.Sequence Diagram cập nhật thông tin ô tô
***Xóa thông tin ô tô
Hình 4. 39. Sequence Diagram xóa thông tin ô tô
85
**Xem thông tin nhân viên
Hình 4. 40. Sequence Diagram xem thông tin nhân viên
86
***Thêm thông tin nhân viên
Hình 4. 41.Sequence Diagram thêm thông tin nhân viên
87
***Tìm kiếm nhân viên
Hình 4. 42. Sequence Diagram tìm kiếm nhân viên
88
***Cập nhật thông tin nhân viên
Hình 4. 43. Sequence Diagram cập nhật thông tin nhân viên
89
***Xóa thông tin nhân viên
Hình 4. 44. Sequence Diagram xóa thông tin nhân viên
90
***Xem thông tin khách hàng
Hình 4. 45. Sequence Diagram xem thông tin khách hàng
91
***Thêm thông tin khách hàng
Hình 4. 46. Sequence Diagram thêm thông tin khách hàng
92
***Tìm kiếm khách hàng
Hình 4. 47. Sequence Diagram tìm kiếm khách hàng
93
***Cập nhật thông tin khách hàng
Hình 4. 48. Sequence Diagram cập nhật thông tin khách hàng
94
***Xóa thông tin khách hàng
Hình 4. 49. Sequence Diagram xóa thông tin khách hàng
95
***Xem tin tức
Hình 4. 50. Sequence Diagram xem tin tức
96
***Thêm mới tin tức
Hình 4. 51. Sequence Diagram thêm mới tin tức
97
***Cập nhật tin tức
Hình 4. 52. Sequence Diagram cập nhật tin tức
98
***Xóa tin tức
Hình 4. 53. Sequence Diagram xóa tin tức
99
4.5.7. Quản lý thông tin hóa đơn
***Xem thông tin hóa đơn
Hình 4. 54. Sequence Diagram xem thông tin hóa đơn
100
***Thêm hóa đơn
Hình 4. 55. Sequence Diagram thêm hóa đơn
101
***Tìm kiếm hóa đơn
Hình 4. 56. Sequence Diagram tìm kiếm hóa đơn
102
***Cập nhật thông tin hóa đơn
Hình 4. 57. Sequence Diagram cập nhật thông tin hóa đơn
103
***Xóa thông tin hóa đơn
Hình 4. 58. Sequence Diagram xóa thông tin hóa đơn
104
***Xem phản hồi của form
Hình 4. 59. Sequence Diagram xem phản hồi form
105
***Tìm kiếm form
Hình 4. 60. Sequence Diagram tìm kiếm form
106
***Xóa form
Hình 4. 61. Sequence Diagram xóa form
107
Hình 4. 62. Sequence Diagram xem thông tin hóa đơn trực tuyến
108
4.6. Class diagram
Hình 4. 63. Class diagram đăng nhập
109
4.6.2. Đăng ký
Hình 4. 64. Class diagram đăng ký
110
Hình 4. 65. Class diagram quản lí thông tin ô tô
111
Hình 4. 66. Class diagram quản lí thông tin nhân viên
112
Hình 4. 67. Class diagram quản lí thông tin khách hàng
113
Hình 4. 68. Class diagram quản lí tin tức
114
4.6.7. Quản lý thông tin hóa đơn
Hình 4. 69. Class diagram quản lí hóa đơn
115
Hình 4. 70. Class diagram quản lí form
116
Hình 4. 71. Class diagram xem thông tin hóa đơn
117
CHƯƠNG 5: LẬP TRÌNH VÀ KIỂM THỬ
5.1 . Các công nghệ và thư viện được sử dụng
Để thuận lợi trong việc triển khai đồ án, nhóm chúng em đã xây dựng dựa trên mô hình
Web API với ASP.NET Core MVC. Web API được sử dụng làm thành phần server cho
nhiều loại ứng dụng khác nhau (SPA,mobile, desktop,..). Web API trao đổi dữ liệu ở
dạng JSON hoặc XML với client qua HTTP. Trong ASP.NET Core, Web API được xây
dựng trên MVC framework chứ không phải là một framework riêng. Dự án ASP.NET
Core Web API cũng chính là dự án ASP.NET Core MVC nhưng có một số thay đổi về
kỹ thuật. Để khai thác Web API chúng ta phải xây dựng client riêng. Sự khác biệt lớn
nhất khi sử dụng MVC để tạo ra Web API nằm ở chỗ: thành phần View của MVC giờ
được thay thế bằng JSON hoặc XML. Thay vì sử dụng các Razor template để sinh
HTML, action trong Web API sẽ chuyển đổi dữ liệu thành chuỗi JSON hoặc XML. Do
đó đồ án của nhóm của chúng em sẽ chia thành 2 phần là Front End đảm nhiệm vai trò
là client và Back End đảm nhiệm vài trò là server.
5.1.1 FrontEnd
- 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
118
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.
5.1.2 BackEnd
- ASP.NET Core là một phiên bản mới của ASP.NET, được phát hành bởi
Microsoft và là một mã nguồn mở trên GitHub. ASP.NET Core được sử dụng để
phát triển khuôn khổ website và có thể thích ứng với nhiều trình duyệt khác nhau
như Windows, Mac hoặc Linux kể cả trên nền tảng MVC. ASP.NET Core được
thiết kế để tối ưu development framework cho những ứng dụng cái mà được chạy
on-promise hay được triển khai trên đám mây. ASP.NET Core bao gồm các thành
phần theo hướng module với mục đích tối thiểu tài nguyên và tiết kiệm chi phí
khi phát triển.
- RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng
web (thiết kế Web services) để tiện cho việc quản lý các resource. Nó chú trọng
119
vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…),
bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP.
- Entity Framework Core là một Object Relational Mapping (ORM) framework
giúp dễ dàng truy xuất và lưu trữ dữ liệu trong database thông qua việc ánh xạ
database thành các objects tương ứng trong code.
- 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.
- Brcypt.Net là thư viện mã hóa mật khẩu. Bcrypt là một chức năng mã hóa mật
khẩu dựa trên các thuật toán mã hóa Blowfish. Bcrypt là một thuật toán mã hóa
một chiều. Bạn không thể lấy lại mật khẩu khi đã biết chuỗi mã hóa mật khẩu
trong dữ liệu database trước đó mà bạn hay bất kì ai tấn vào để đánh cắp.
- MailKit là một thư viện ứng dụng main client đa nền tảng được xây dựng trên
MimeKit. Mục tiêu của dự án này là cung cấp cho thế giới .NET các triển khai
ứng dụng khách hàng SMTP, POP3 và IMAP mạnh mẽ, đầy đủ tính năng và tuân
thủ RFC.
5.2 Kiểm thử
5.2.1 Debug trong Visual Studio:

Debug trong Visual Studio cho phép bạn chạy chương trình từng bước để xem
sự thay đổi giá trị của biến, trả về của hàm… qua đó phát hiện những lỗi logic
trong chương trình. Một số thành phần cơ bản:
+ Breakpoints: Là điểm mà chương trình sẽ dừng lại để cho phép bạn chạy
từng bước các dòng code. Có thể đặt nhiều breakpoint trong chương trình.
+ Các cửa sổ theo dõi biến: Giúp bạn theo dõi sự thay đổi của biến hoặc hàm
120
cho mỗi bước chạy. Nếu một biến có sự thay đổi giá trị thì sẽ có màu đỏ
để phân biệt. Có 3 loại:
• Autos: Hiển thị tự động các biến, hoặc hàm trả về trong các dòng code
trước.
• Locals: Tương tự Autos nhưng chỉ hiển thị các biến liên quan trong nội
bộ hàm hoặc khối lệnh.
• Watch: cửa sổ tùy chỉnh cho phép bạn xem chỉ các biến mà bạn yêu
cầu hoặc giá trị tùy chỉnh bất kỳ. Visual Studio cho phép bạn mở tối đa
4 cửa sổ Watch.
Hình 5. 1. Cửa sổ theo dõi biến
+ Thanh công cụ Debug: cung cấp các nút lệnh để bạn thực hiện Debug chương
trình.
Hình 5. 2. Thanh công cụ debug
+ Cửa sổ Call Stack: Chứa lời gọi hàm trong ngăn xếp. Nếu chỉ debug ở mức độ cơ
bản thì cũng không cần quan tâm cửa sổ này lắm.
+ Cửa sổ Diagnostic Tool: Chứa các công cụ chẩn đoán nâng cao. Cung cấp biểu
đồ thời gian thực bộ nhớ, CPU… mà chương trình sử dụng. Ngoài ra nó còn hiển
121
thị các sự kiện được bắt và thời gian bắt.
Hình 5. 3. Cửa sổ Diagnostic Tools
5.2.2 Postman
Postman là một công cụ cho phép chúng ta thao tác với API, phổ biến nhất là
REST. Postman hiện là một trong những công cụ phổ biến nhất được sử dụng trong thử
nghiệm các API. Với Postman, ta có thể gọi Rest API mà không cần viết dòng code nào.
Postman hỗ trợ tất cả các phương thức HTTP (GET, POST, PUT, PATCH, DELETE,
…). Bên cạnh đó, nó còn cho phép lưu lại lịch sử các lần request, rất tiện cho việc sử
dụng lại khi cần. Những lợi ích khi sử dụng Postman:
122
- Sử dụng Collections (Bộ sưu tập) – Postman cho phép người dùng tạo bộ sưu tập
cho các lệnh gọi API của họ. Mỗi bộ sưu tập có thể tạo các thư mục con và nhiều
yêu cầu (request). Điều này giúp việc tổ chức các bộ thử nghiệm.
- Collaboration – Collections và environment có thể được import hoặc export giúp
chia sẻ tệp dễ dàng.
- API Testing – Test trạng thái phản hồi HTTP.
- Gỡ lỗi – Bảng điều khiển Postman giúp kiểm tra dữ liệu nào đã được truy xuất
giúp dễ dàng gỡ lỗi kiểm tra.
Hình 5. 4. Màn hình làm việc Postman
123
5.2.3 Swagger UI
Swagger UI là một tool cho phép bất kỳ ai từ nhà phát triển cho đến người dùng cuối có
thể hình dung và tương tác với các tài nguyên API của dự án. Tool này sẽ tự động tạo ra
tài liệu API từ file config Swagger, với cái nhìn trực quan và việc triển khai trở nên dễ
dàng hơn cho phía client.
Hình 5. 5. Giao diện Swagger UI
124
CHƯƠNG 6: GIAO DIỆN VÀ SO SÁNH
6.1. Giao diện
6.1.1. Sơ đồ liên kết các màn hình
Hình 6. 1. Sơ đồ liên kết các màn hình
125
6.1.2. Danh sách các màn hình
Màn hình Mô tả
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
Introduction Màn hình giới thiệu về King Speed
Product Màn hình chứa các sản phẩm xe của từng hãng xe
Detail product Màn hình mô tả chi tiết các sản phẩm
News Màn hình chứa các tin tức về xe
Read news Màn hình xem chi tiết tin tức
Contact 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
User Màn hình chứa thông tin chi tiết của người dùng
Edit user 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
Car management Màn hình quản lý xe ô tô chứa danh sách ô tô và thông tin
Edit car Màn hình chỉnh sửa thông tin xe ô tô
Detail car Màn hình hiển thị thông tin chi tiết của xe ô tô
126
Add car Màn hình thêm xe ô tô
Customer management Màn hình quản lý khách hàng chứa danh sách khách hàng
Edit customer Màn hình chỉnh sửa thông tin chi tiết khách hàng
Detail customer Màn hình hiển thị thông tin chi tiết của khách hàng
Add customer Màn hình thêm khách hàng mới
Employee management Màn hình quản lý nhân viên chứa danh sách nhân viên
Edit Employee Màn hình chỉnh sửa thông tin chi tiết nhân viên
Detail Employee Màn hình hiển thị thông tin chi tiết của nhân viên
Add Employee Màn hình thêm nhân viên mới
News management Màn hình quản lý tin tức chứa danh sách tin tức
Edit news Màn hình chỉnh sửa thông tin chi tiết tin tức
Detail news Màn hình hiển thị thông tin chi tiết của tin tức
Add news Màn hình thêm tin tức mới
Form management Màn hình quản lý form chứa danh sách form phản hồi
Detail form Màn hình hiển thị thông tin chi tiết của tin tức
127
Invoice management Màn hình quản lý hóa đơn chứa danh sách hóa đơn
Edit invoice Màn hình chỉnh sửa thông tin chi tiết hóa đơn
Detail invoice Màn hình hiển thị thông tin chi tiết của hóa đơn
Add invoice Màn hình thêm hóa đơn mới
Bảng 6. 1. Danh sách các màn hình
128
6.1.3. Chi tiết màn hình
6.1.3.1. Màn hình Login
Hình 6. 2. Màn hình Login
STT Tên đối tượng Kiểu Ý nghĩa Ràng buộc
Mục điều hướng đến

1 linkRegister Link màn hình đăng ký
Register
Trường nhập email đăng Bắt buộc phải

2 email Text
nhập của người dùng nhập email hợp lệ
129
Bắt buộc phải

Trường nhập mật khẩu
3 password Password nhập nội dung, dài hơn
người dùng
8 ký tự.

4 btnLogin Button
màn hình Home Page

5 ForgetPass Text màn hình Forgot
Password
Bảng 6. 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

Click Hiển thị màn hình
1 hướng đến màn hình đăng
linkRegister đăng ký
ký Register
Khi click vào sẽ điều Hiển thị màn hình

2 Click btnLogin Login() hướng đến màn hình trang chủ của hệ
Home Page thống
Khi click vào sẽ điều

Hiển thị màn hình
3 Click ForgetPass hướng đến màn hình
Forget Password
Forget Password
Bảng 6. 3. Danh sách các biến cố và xử lý trên màn hình Login
130
6.1.3.2. Màn hình Forget Password
Hình 6. 3.Danh sách các biến cố và xử lý trên màn hình Login
Trường nhập email người Bắt buộc phải nhập

1 email Email
dùng email hợp lệ
Mục gửi email xác nhận mật

2 submitEmail Button
khẩu cho người dùng
Quay về đăng
3 Text Mục quay về màn hình Login
nhập
Bảng 6. 4. Bảng mô tả các đối tượng trên màn hình Forget password
131
Khi click vào nút này

Click thư xác nhận mật khẩu
1 submitEmail()
submitEmail sẽ được gửi đến email
người dùng
Khi click vào nút này

Click “Quay về màn hình quên mật Hiển thị màn hình
2
đăng nhập” khẩu sẽ tắt và quay trở Login
lại màn hình Login
Bảng 6. 5. Danh sách các biến cố và xử lý trên màn hình Forget password
6.1.3.3. Màn hình Reset Password
Hình 6. 4. Màn hình Reset Password.
132
Trường nhập password Bắt buộc phải nhập mật

1 password Password
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

2 password2 Password
password người dùng password
Mục xác nhận mật khẩu

3 Đổi mật khẩu Button
mới
Mục quay về màn hình

4 Quay về đăng nhập Text
Login
Bảng 6. 6. Bảng mô tả các đối tượng trên màn hình Reset Password
Khi click vào nut này mật

1 Click “Đổi mật khẩu” handleSubmit(e)
khẩu sẽ được thay đổi mới
Khi click vào nút này màn

Click “Quay về đăng hình quên mật khẩu sẽ tắt Hiển thị màn hình
2
nhập” và quay trở lại màn hình Login
Login
Bảng 6. 7. Danh sách các biến cố và xử lý trên màn hình Reset Password
133
6.1.3.4. Màn hình Register
Hình 6. 5. Màn hình Register
Trường nhập tên của người Bắt buộc phải

1 name Text
dùng nhập nội dung
Bắt buộc phải

Trường nhập email đăng nhập
2 email Text nhập email hợp
của người dùng
lệ
Bắt buộc phải

Trường nhập password người nhập mật khẩu
3 password Password
dùng từ 8 ký tự trở
lên
134
Bắt buộc phải

Trường nhập lại password người
4 password2 Password giống với
dùng
password
Bắt buộc phải

Trường check đông ý với điều
5 isSubscribed Checkbox click vào
khoản dịch vụ
checkbox
Mục điều hướng đến màn hình

6 Đăng kí Button
Home
Mục điều hướng đến màn hình

7 linkLogin Link
Login
Bảng 6. 8. Bảng mô tả các đối tượng trên màn hình Register
Khi click vào nút này thì Đăng kí tài

sẽ điều hướng đến trang khoản, hiển
1 Click “Đăng kí” handleSubmit(e)
chủ nếu đăng kí thành thị màn hình
công Home
Khi click vào nút này màn

Click “Quay về đăng hình quên mật khẩu sẽ tắt Hiển thị màn
2
nhập” và quay trở lại màn hình hình Login
Login
Bảng 6. 9. Danh sách các biến cố và xử lý trên màn hình Register
135
6.1.3.5. Màn hình introduction
Hình 6. 6. Màn hình Introduction
Màn hình introduction bao gồm những giới thiệu và hình ảnh về showroom.
136
6.1.3.6. Màn hình Contact
Hình 6. 7. Màn hình Contact
Trường nhập tên của người Bắt buộc phải nhập nội
1 name Text
dùng dung
Trường nhập email của Bắt buộc phải

2 email Email
người dùng nhập email hợp lệ
137
Bắt buộc phải nhập số

Trường nhập số điện thoại
3 mobile Tel điện thoại là một số
người dùng
nguyên
Trường nhập lời nhắn của

4 message Text
người dùng
Mục gửi thông tin liên hệ

5 Gửi Button
của người dùng tới quản lý
Bảng 6. 10. Bảng mô tả các đối tượng trên màn hình Contact
Khi click vào nút này thì

Đăng kí tài
thông tin liên lạc của người
1 Click “Gửi” handleSubmit(e) khoản, hiển thị
dùng sẽ được gửi tới hệ
màn hình Home
thống quản lý
Bảng 6. 11. Danh sách các biến cố và xử lý trên màn hình Contact
138
6.1.3.7. Màn hình News
Hình 6. 8. Màn hình tin tức
139
Link (Text, Mục hiển thị tin tức

1 Card
image, date) ngắn gọn
Mục hiển thị tin tức

Link (Text,
2 Smaller card nổi bật ngắn gọn nhỏ
image)
hơn
Bảng 6. 12.Bảng mô tả các đối tượng trên màn hình News
Khi click vào link này thì sẽ Hiển thị

1 Click card điều hướng đến trang đọc màn hình
tin tức Read news
Khi click vào link này thì sẽ Hiển thị

Click smaller
2 điều hướng đến trang đọc màn hình
card
tin tức Read news
Bảng 6. 13. Danh sách các biến cố và xử lý trên màn hình News
140
6.1.3.8. Màn hình Read news
Hình 6. 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.
Link (Text, Mục hiển thị tin tức nổi

1 Smaller card
image) bật ngắn gọn nhỏ hơn
Bảng 6. 14. Bảng mô tả các đối tượng trên màn hình Read News
ST
Biến cố Tên hàm Mô tả xử lý Ý nghĩa
T
Khi click vào link này thì

Hiển thị màn
Click smaller card sẽ điều hướng đến trang
1 hình Read news
đọc tin tức
141
Bảng 6. 15. Danh sách các biến cố và xử lý trên màn hình Read News
6.1.3.9. Màn hình trang chủ
Hình 6. 10. Màn hình trang chủ
Hình 6. 11. Liên hệ
142
Hình 6. 12. Gợi ý sản phẩm
Hình 6. 13. Tất cả mẫu xe
143
Hình 6. 14. Đánh giá khách hàng
Hình 6. 15. Tin tức tiêu biểu
144
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 6. 16. 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 Hiển thị màn hình Introduction

thiệu
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

Discorver more
5 Click vào Item tin thức Hiện thị trang chi tiết tin tức
Bảng 6. 17. Danh sách các biến cố và xử lý trên màn hình Home
145
6.1.3.10. Màn hình Product
Bảng 6. 18. Màn hình hiển thị thông tin sản phẩm xe
1 Chi tiết Button Xem chi tiết xe
Bảng 6. 19. Bảng mô tả các đối tượng trên màn hình
1 Click vào Khi click vào button này sẽ hiện

button Chi ra màn hình liên hệ
tiết
Bảng 6. 20. Bảng mô tả các danh sách và biến cố trên màn hình
146
Hình 6. 16. Màn hình thể hiện chi tiết xe

buộc
1 Liện hệ Button Hiển thị ra màn hình Contact
Bảng 6. 21. Bảng mô tả các đối tượng trên màn hình
1 Click vào button Liên hệ Hiển thị màn hình Contact
Bảng 6. 22. Bảng mô tả các danh sách và biến cố trên màn hình
147
6.1.3.11. Màn hình User
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 6. 23. Bảng mô tả các đối tượng trên màn hình user

hàm nghĩa
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
Bảng 6. 24. Bảng mô tả các danh sách và biến cố trên màn hình user
148
6.1.3.12. Màn hình Dashboard

a) Màn hình khách hàng
Hình 6. 17. 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
149
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 6. 25. Bảng mô tả các đối tượng trên màn hình Quản lý

hàm nghĩa
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”
150
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
Bảng 6. 26. Bảng mô tả các đối tượng trên màn hình quản lí
151
Hình 6. 18. Màn hình xác nhận xóa khách hàng
1 Xóa luôn Button Xóa thông tin khách hang có sẵn
2 Hủy Button Hủy xác nhận xóa thông tin khách hàng
Bảng 6. 27. Bảng mô tả các đối tượng trên màn hình quản lí xóa khách hàng
1 Click vào button Xóa luôn Xóa thông tin khách hàng
2 Click vào button Hủy Hủy xóa thông tin khách hàng
Bảng 6. 28. Bảng mô tả các danh sách và biến cố trên màn hình xóa khách hàng
152
Hình 6. 19. Màn hình cập nhật dữ liệu khách hàng
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 địa chỉ
5 CCCD Input Nhập CCCD
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 6. 29. Bảng mô tả các đối tượng trên màn hình cập nhật khách hàng
153
Hình 6. 20. Màn hình xem chi tiết khách hàng
1 Hủy Button Đóng trang hiển thị chi tiết khách hàng
Hình 6. 21. Bảng mô tả các đối tượng trên màn hình chi tiết khách hàng
1 Click vào button hủy Đóng trang hiện chi tiết khách hàng
Hình 6. 22. Bảng mô tả các danh sách và biến cố trên màn hình xem chi tiết khách
hàng
154
Hình 6. 23. Màn hình thêm khách hàng
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 địa chỉ Bắt buộc
5 CCCD Input Nhập cccd Bắt buộc
6 Email Input Nhập Email Bắt buộc
155
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 6. 30. Bảng mô tả các đối tượng trên màn hình thêm khách hàng

hàm nghĩa
1 Click vào button thêm Dữ liệu khách hang được lưu vào
dữ liệu database
2 Click vào button Hủy Đóng trang khách hàng
Bảng 6. 31. Bảng mô tả các danh sách và biến cố trên màn hình thêm khách hàng
156
b) Quản lý ô tô
Hình 6. 24. Màn hình quản lý ô tô
1 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
157
Hình 6. 25. Màn hình xác nhận xác nhận xóa ô tô
1 Xóa luôn Button Xóa thông tin xe có sẵn
2 Hủy Button Hủy xác nhận xóa thông tin xe
Bảng 6. 32. Bảng mô tả các đối tượng trên màn hình xóa ô tô
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 6. 33. Bảng mô tả các danh sách và biến cố trên màn hình xóa ô tô
158
Hình 6. 26. Màn hình cập nhật dữ liệu xe
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
159
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 6. 34. Bảng mô tả các đối tượng trên màn hình cập nhật dữ liệu xe
1 Click vào button thêm Dữ liệu khách hang được lưu

dữ liệu vào database
Bảng 6. 35. 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
160
Hình 6. 27. Màn hình xem chi tiết xe
1 Hủy Button Đóng trang hiển thị chi tiết thông tin xe
Bảng 6. 36. Bảng mô tả các đối tượng trên màn hình chi tiết xe
1 Click vào button hủy Đóng trang hiện chi tiết thông tin xe
Bảng 6. 37. Bảng mô tả các danh sách và biến cố trên màn hình chi tiết xe
161
Hình 6. 28. Màn hình thêm mới ô tô
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
162
10 Dung tích Input Nhập dung tích tối đa Bắt buộc
Bảng 6. 38. Bảng mô tả các đối tượng trên màn hình thêm mới ô tô

hàm nghĩa
1 Click vào button thêm Dữ liệu khách hang được lưu vào
dữ liệu database
Bảng 6. 39. 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 6. 29. Màn hình quản lý hóa đơn
163

buộc
2 Quản lý khách Hiển thị trang quản lý khách hàng

hàng
3 Quản lý nhân Hiển thị trang quản lý nhân viên

viên
4 Quản lý hóa Hiển thị trang quản lý form

form
5 Quản lý hóa tin Hiển thị trang quản lý tin tức

tức
6 Tìm hóa đơn Tìm kiếm hóa đơn theo
7 Tình trạng Menu Lọc hóa đơn theo
8 Thêm hóa đơn Button Thêm hóa đơn
9 Chi tiết Button Hiển thị màn hình chi tiết hóa đơn
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 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)
164
Bảng 6. 40. Bảng mô tả các đối tượng trên màn hình quản lý hóa đơn

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 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
165
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
Bảng 6. 41. 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 6. 30. Màn hình tạo hóa đơn
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
166
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 6. 42. Bảng mô tả các đối tượng trên màn hình tạo hóa đơn
d) Form
3 Quản lý nhân viên Hiển thị trang quản lý nhân viê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 6. 43. Bảng mô tả các đối tượng trên màn hình quản lý form
167

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 6. 44. Bả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
168
Hình 6. 31. Màn hình quản lý tin tức

buộc
3 Quản lý form Hiển thị trang quản lý form
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 6. 45. Bảng mô tả các đối tượng trên màn hình quản lý tin tức
169
Hình 6. 32. Màn hình xác nhận xóa tin tứ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 6. 46. Bảng mô tả các đối tượng trên màn hình xóa tin tức
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 6. 47. Bảng mô tả các danh sách và biến cố trên màn hình xóa tin tức
170
Hình 6. 33. Màn hình cập nhật tin tứ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
171
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 6. 48. Bảng mô tả các đối tượng trên màn hình sửa tin tức
Hình 6. 34. Màn hình thêm tin tức
1 Link ảnh Input Nhập link ảnh
2 Tiêu đề Input Nhập tiêu đề
172
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 6. 49. 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 6. 35. Màn hình quản lý nhân viên
173
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 6. 50. 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ý Hiển thị trang quản lý ô

ô tô” tô
174
2 Click vào chọn item “Quản lý Hiển thị trang quản lý

khách hàng” khách hàng
3 Click vào chọn item “Quản lý Hiển thị trang quản lý tin
tin tức” tức

form” form

nhân viên” nhân viên
6 Click vào button thêm hóa đơ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 6. 51. Bảng mô tả các biến cố màn hình quản lý hóa đơn
175
Hình 6. 36. Màn hình thêm nhân viên
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
176
Bảng 6. 52. Bảng mô tả các đối tượng trên màn hình thêm nhân viên
Hình 6. 37. Màn hình xem chi tiết thông tin nhân viên
1 Hủy Button Đóng trang hiển thị chi tiết nhân viên.
Bảng 6. 53. Bảng mô tả các đối tượng trên màn hình chi tiết nhân viên

hàm nghĩa
177
1 Click vào button Đóng trang hiện chi tiết thông tin chi tiết
hủy nhân viên.
Bảng 6. 54. 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 6. 38. Màn hình xóa nhân viên
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 6. 55. Bảng mô tả các đối tượng trên màn hình xóa nhân viên
178
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 6. 56. 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
6.2. So Sánh
6.2.1. Tổng quan đồ án
Nhìn chung, việc phát triển dự án phần mềm trải qua rất nhiều bước với độ phức tạp
khác nhau, song nhóm đã nắm bắt được những tính năng chính và nội dung cần thực
thực hiện đối với trang web của mình một cách chính xác và chuẩn chỉ nhất để có thể
thực hiện và hoàn thành đúng tiến độ và đạt yêu cầu
So sánh với các dự án thực tế tại các showroom ô tô Mercedez(Mercedes-Benz Vietnam)

hay Kia(Trang chủ | Kia Viet Nam) đồ án đã thực hiện được:
• Đồ án được thực hiện được các phân quyền giống đồ án thực tế như admin, nhân
viên thực hiện các thao tác như tạo tài khoản người dùng, xác nhận mail và quên
tài khoản.
• Hiển thị những nội dung cần thiết của một website quản lý showroom ô tô: thông
tin xe, giá xe, nội dung feedback từ người đùng. Ngoài ra còn có thêm tin tức liên
quan đến xe nổi bật trên thế giới.
• Hiển thị những thông tin cần thiết của một khách hàng khi mới đăng ký như danh
sách hóa đơn, thông tin người dùng đồng thời đó là chỉnh sửa thông tin người
dùng.
179
• Hiển thị được nội dung thanh toán hóa đơn cơ bả: bao gồm những xe nào và chi
tiết hóa đơn.
Tuy vậy, đây chỉ là đồ án môn học nên không thể đánh giá ngang bằng hoặc hơn được
với các đồ án thực tế được triển khai bên ngoài còn rất nhiều điều phải học hỏi:
• Thực hiện cải tiến giao diện phù hợp với giao diện người dùng
• Chưa có những tính năng nâng cao như định vị google map, responsive để phù
hợp với các thiết bị cầm tay như điện thoại hay máy tính bảng.
• Hiệu suất render của ứng dụng vẫn còn chưa được tối ưu.
6.2.2. So sánh phân quyền trong đồ án
Admin: có hầu hết mọi quyền hạn (quản lý hóa đơn, quản lý nhân viên, quản lý khách
hàng, quản lý form, quản lý news) với các khả năng thêm sửa xóa…
Nhân viên: quản lý khách hàng, quản lý form…
Khách hàng: không có khả năng nào.
6.2.3. So sánh các màn hình trong đồ án
Đa số các màn hình trong đồ án đều có những chức năng riêng nên khác nhau, song
việc tạo header và footer luôn để xuất hiện giữa các màn hình nên điểm giống nhau
giữa các màn hình đó là phần header và footer.
180
CHƯƠNG 7: KẾT LUẬN
7.1. Môi trường triển khai
• Hệ điều hành: Windows 11, Windows 10

• Phần mềm quản lý cơ sở dữ liệu: SQL Server
• Ngôn ngữ: C#
7.2. Ưu điểm
• 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à phần
giao diện dành cho quản lý. Do đó, luồng hoạt động của website sẽ được đảm
bảo.
• Website có 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 cho phép ví dụ như khách hàng không thể truy cập được vào
trang quản lý.
• Hỗ trợ gửi email đơn đặt đặ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 và năm bắt thông tin về hóa đơn dễ
dàng 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.
181
• 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 lý form liên hệ. Trong mỗi trang quản lý
đều hỗ trợ các chức năng liên quan đến thêm, xóa, sửa, 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ý.
7.3. Nhược điểm
• Chưa hỗ trợ responsive cho trang web.

• Còn 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 của trang web còn chưa cao, một vài xử lý chưa được tối ưu.
7.4. Hướng phát triể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ý các chi nhánh, quản lý thống kê doanh thu…
• Tối ưu một số phần code nhằm cải thiện hiệu suất của trang web.
• Hỗ trợ thêm Responsive cho trang web nhằm tối ưu trải nghiệm người dùng khi
dùng trên các thiết bị có kích thước màn hình khác nhau.
182
TÀI LIỆU THAM KHẢO
[1] Hướng dẫn sử dụng axios, https://github.com/axios/axios[Truy cập lần cuối:

01/12/2022].
[2] Giao diện ô tô của Mercedes-benz, https://www.mercedes-benz.com.vn/en/ [Truy

cập lần cuối: 30/11/2022].
[3] Giao diện ô tô của BMW, https://bmwvietnam.com.vn/ [Truy cập lần cuối:
30/11/2022].
[4] Material UI, https://mui.com/ [Truy cập lần cuối: 5/12/2022]
[5] Tìm hiểu về jsonwebtoken, https://viblo.asia/p/tim-hieu-ve-json-web-token-

jwt7rVRqp73v4bP [Truy cập lần cuối: 3/12/2022]
[6] Tìm hiểu tạo api ASP.NET CORE 6.0, https://learn.microsoft.com/en-

us/aspnet/core/tutorials/first-web-api?view=aspnetcore-6.0&tabs=visual-studio [truy
cập lần cuối: 15/12/2022]
[7] Tạo và cấu hình mô hình, https://learn.microsoft.com/en-us/ef/core/modeling/ [truy

cập lần cuối: 17/12/2022]
[8] Hướng dẫn tìm hiểu Web API & Entity Framework,
https://www.youtube.com/watch?v=K23uJdMiEpk [truy cập lần cuối 6/12/2022]
183

Boy IEBao Cao

Uploaded by

Copyright:

Available Formats

You might also like

Boy IEBao Cao

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Boy IEBao Cao

Uploaded by

Copyright:

Available Formats

Môn học: Xây dựng HTTT trên các framework GVHD: ThS.

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA HỆ THỐNG THÔNG TIN

BÁO CÁO CUỐI KÌ

Sinh viên thực hiện:

Đặng Bá Lĩnh 20521528

TP.HCM, ngày 24 tháng 12 năm 2022

CHƯƠNG 1: GIỚI THIỆU ĐỒ ÁN ...................................................................................... 13

3.4. Figma ............................................................................................................................. 31

4.4.8. Quản lý form............................................................................................................ 73

5.2. Kiểm thử....................................................................................................................... 120

DANH MỤC BẢNG

Bảng 2. 1. Quy trình dự kiến .......................................................................................... 23

Bảng 6. 1. Danh sách các màn hình ............................................................................. 128

DANH MỤC HÌNH ẢNH

Hình 3. 1. Họp nhóm trên Ms Teams ............................................................................. 29

Hình 4. 1. Sơ đồ tổng quát Use-case .............................................................................. 38

Hình 4. 9. Sơ đồ Active Diagram cập nhật thông tin của ô tô ....................................... 49

Hình 4. 36. Sequence Diagram thêm thông tin ô tô ....................................................... 83

Hình 4. 63. Class diagram đăng nhập .......................................................................... 109

Hình 5. 1. Cửa sổ theo dõi biến .................................................................................... 121

Hình 6. 1. Sơ đồ liên kết các màn hình ........................................................................ 125

Hình 6. 11. Liên hệ ....................................................................................................... 142

CHƯƠNG 1: GIỚI THIỆU ĐỒ ÁN

1.1. Tổng quan về đồ án

1.2. Cấu trúc bài báo cáo

Trang giới thiệu nhóm: https://boysie.renderforestsites.com/

2.1. Khởi tạo đồ án

2.1.1. Lý do hình thành

2.1.2. Mục tiêu dự án

2.2. Khảo sát hiện trạng, mô tả nghiệp cụ và quy trình cho dự án

2.2.1. Khảo sát hiện trạng

2.2.1.1. Thực trạng tổ chức

Chủ đầu tư: Showroom Oto

Số điện thoại: (028)1254896

Cơ cấu tổ chức gồm:

▪ Phó giám đốc

▪ Phòng hành chính

▪ Phòng tài chính- kế toán

▪ Phòng marketing- sale

▪ Phòng thiết kế- trưng bày

▪ Phòng sửa chữa-bảo trì sản phẩm

2.2.1.2. Thực trạng nghiệp vụ

2.2.1.3. Thực trạng tin học

2.2.2. Mô tả nghiệp vụ và quy trình

Thu thập thông tin

Chọn ngôn ngữ và hệ quản trị thích hợp để viết website.

Tạo repo và sử dụng Jira để quản lý dự án.

Phân task cho các thành viên

Thiết kế giao diệ

Tìm hiểu layout, vẽ sơ đồ liên kết màn hình cho website

Sử dụng figma để thiết kế giao diện website.

Sử dụng framework ReactJs để lập trình giao diện website.

Sử dụng ASP.NET để lập trình Backend.

Xây dựng cơ sở dữ liệu và thực hiện truy vấn dữ liệu.

Kiểm thử, đánh giá và ra mắt sản phẩm.

Kiểm thử chức năng, hiệu năng của website.