Xây dựng website bán linh kiện máy tính

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH
KHOA CÔNG NGHỆ THÔNG TIN

TIỂU LUẬN MÔN HỌC

THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN LINH
KIỆN MÁY TÍNH

Giảng viên hướng dẫn: ThS. VƯƠNG XN CHÍ
Sinh viên thực hiện:
NGUYỄN HỒNG TRÍ
MSSV:
1800002580
Chun ngành:
Kỹ thuật phần mềm
Mơn học:
Lập trình web
Khóa:
2020

Tp.HCM, tháng 1. năm 2022
1


2
3

THÀNH VIÊN NHĨM

4
5

ST
T
1

HỌ TÊN
Nguyễn Hồng Trí

2
3

Phạm Minh Thể
Trần Nguyễn Minh Đức

MSSV

GHI CHÚ

180000258 Làm báo cáo, Thiết kế
0
1811545280 Thiết kế Web, Tìm tài liệu
180000284 Tạo cơ sở dữ liệu, Thiết kế
4

…
…
6
7

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

38
39
1


40
41
42

LỜI CẢM ƠN

43
44

Qua một thời gian nghiên cứu, phân công công việc và tiến hành thực hiện đến

45nay, đề tài “xây dựng website bán linh kiện máy tính” đã hồn thành. Chúng em xin
46chân thành cảm các thầy cô đã trang bị kiến thức quý báu cho chúng em trong suốt
47q trình học. Đặc biệt là các thầy các cơ trong khoa Cơng nghệ thơng tin đã tận tình
48giảng dạy, chỉ bảo, trang bị cho chúng em những kiến thức cần thiết nhất trong suốt
49quá trình học tập và nghiên cứu tại khoa, đã tạo mọi điều kiện thuận lợi giúp chúng
50em thực hiện đề tài lớn này.
51

Em xin chân thành cảm ơn thầy giảng viên hướng dẫn môn học – thầy Vương

52Xuân Chí trong khoảng thời gian học kỳ này đã cố gắng nhắc nhở, chỉ dạy, hướng dẫn
53về mẫu chuẩn báo cáo và bài tập đồ án.
54

Trong khoảng gian thực hiện đồ án, những điều sai và thiếu kinh nghiệm vì

55kiến thức cịn rất hạn hẹp. Cho nên bài tập đồ án sẽ không tránh khỏi những sơ sót
56đáng tiếc. Em xin cảm ơn thầy đã đọc hết bài tập đồ án của em và mong thầy góp ý
57nhận xét để chúng em hoàn thành đề tài này.
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

2


74
75
76
77

LỜI MỞ ĐẦU

78
79
80

Ngày nay, cơng nghệ thơng tin đã có những bước phát triển mạnh mẽ theo cả

81chiều rộng và sâu. Máy tính điện tử khơng cịn là một thứ phương tiện quý hiếm mà
82đang ngày càng trở thành một cơng cụ làm việc và giải trí thơng dụng của con người,
83khơng chỉ ở cơng sở mà cịn ngay cả trong gia đình.
84

Đứng trước vai trị của thơng tin hoạt động cạnh tranh gay gắt, các tổ chức và

85các doanh nghiệp đều tìm mọi biện pháp để xây dựng hồn thiện hệ thống thơng tin
86của mình nhằm tin học hóa các hoạt động tác nghiệp của đơn vị.
87

Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện

88các giải pháp cũng như các sản phẩm nhằm cho phép tiến hành thương mại hóa trên
89Internet. Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm
90quan trọng và tính tất yếu của thương mại điện tử. Với những thao tác đơn giản trên
91máy có nối mạng Internet bạn sẽ có tận tay những gì mình cần mà khơng phải mất
92nhiều thời gian. Bạn chỉ cần vào các trang dịch vụ thương mại điện tử, làm theo
93hướng dẫn và click vào những gì bạn cần. Các nhà dịch vụ sẽ mang đến tận nhà cho
94bạn.
95

Để tiếp cận và góp phần đẩy mạnh sự phổ biến của thương mại điện tử ở Việt

96Nam, nhóm em đã quyết định thực hiện đề tài “Xây dựng Website bán linh kiện máy
97tính”
98

Để đáp ứng như cầu cần thay sửa các linh kiện máy tính tốt nhất vầ ổn định

99nhất cho thị trường Việt Nam
100

Với sự hướng dẫn tận tình của thầy Vương Xn Chí, nhóm em đã hồn thành

101đề tài này. Tuy đã cố gắng hết mình nhưng do thời gian có hạn, năng lực bản thân cịn
102nhiều hạn chế nên chắc rằng khơng tránh khỏi những thiếu sót. Em rất mong nhận
103được sự thơng cảm và đóng góp của q thầy cơ.
104

Em xin chân thành cảm ơn.

3


105
106
107
108
109
110

MỤC LỤC

111
112THÀNH VIÊN NHÓM..........................................................................................i
113LỜI CẢM ƠN.......................................................................................................ii
114LỜI MỞ ĐẦU......................................................................................................iii
115MỤC LỤC............................................................................................................iv
116DANH MỤC CÁC HÌNH ẢNH..........................................................................vi
117DANH MỤC CÁC TỪ VIẾT TẮT.....................................................................vii
118CHƯƠNG 1: LÝ THUYẾT VỀ WEBSITE..........................................................8
1191.1 GIỚI THIỆU ASP.NET MVC.........................................................................8
1201.1.1. Tổng quan về asp.net mvc...........................................................................8
1211.1.2. Mơ hình MVC.............................................................................................8
1221.1.3. Tính năng của ASP.Net MVC 5...................................................................9
123CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN LINH KIỆN MÁY
124TÍNH....................................................................................................................11
1252.1. PHÂN TÍCH U CẦU..............................................................................11
1262.1.1 Mơ tả dự án.................................................................................................11
1272.1.2 Actors và Use Cases...................................................................................12
1282.1.3 Mô tả Actors...............................................................................................15
1292.1.4 Mô tả Use Cases.........................................................................................15
1302.2. THIẾT KẾ HỆ THỐNG...............................................................................16
1312.2.1 Kiến trúc hệ thống......................................................................................16
1322.2.2 Thiết kế dữ liệu...........................................................................................18
1332.2.3 Hệ thống được xây dựng............................................................................20
1342.3.WEBSITE BÁN LINH KIỆN MÁY TÍNH..................................................22
4


1352.3.1 Trang chủ bán hàng....................................................................................22

1362.3.2 Trang chi tiết sản phẩm..............................................................................23
1372.3.3 Trang danh sách sản phẩm..........................................................................24
1382.3.4 Trang đăng nhập.........................................................................................25
1392.3.5 Trang đăng kí..............................................................................................26
1402.3.6 Trang giỏ hàng............................................................................................27
1412.3.7 Trang Admin...............................................................................................28
1422.3.8 Trang quản lý thành viên............................................................................28
1432.3.9 Trang quản lý quyền...................................................................................29
1442.3.10. Trang quản lý phân quyền.......................................................................29
1452.3.12 Trang quản lý nhập hàng...........................................................................30
1462.3.13 Trang sản phẩm gần hết.............................................................................32
1472.3.15 Trang quản lý nhà sản xuất........................................................................33
1482.3.16 Trang quản lý sản phẩm.............................................................................35
1493.3 ĐÁNH GIÁ KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN..............................36
150TÀI LIỆU THAM KHẢO...................................................................................38
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

166
167
168
169

5


170
171
172
173
DANH MỤC CÁC HÌNH ẢNH
174
175
176Hình 1: Mơ hình MVC..................................................................................................9
177Hình 2: Biểu đồ Use case chính...................................................................................13
178Hình 3: Biểu đồ Use case quản lý quyền.....................................................................14
179Hình 4: Biểu đồ Use case quản lý tài khoản................................................................14
180Hình 5: Biểu đồ Use case tra cứu sản phẩm.................................................................14
181Hình 6: Biểu đồ Use case đặt hàng..............................................................................15
182Hình 7: Biểu đồ Use case quản lý danh mục................................................................15
183Hình 8: Biểu đồ Use case quản lý nhập xuất................................................................16
184Hình 9: Sơ đồ màn hình...............................................................................................22
185Hình 10: Trang chủ bán hàng.......................................................................................23
186Hình 11: Trang chi tiết sản phẩm.................................................................................24
187Hình 12: Trang danh sách sản phẩm............................................................................25
188Hình 13: Trang đăng nhập............................................................................................26
189Hình 14: Trang đăng kí................................................................................................27
190Hình 15: Trang giỏ hàng..............................................................................................28

191Hình 16: Trang admin..................................................................................................29
192Hình 17: Trang quản lý thành viên...............................................................................29
193Hình 18: Trang quản lý quyền.....................................................................................30
194Hình 19: Trang quản lý phân quyền.............................................................................30
195Hình 20: Trang quản lý đơn đặt hàng...........................................................................31
196Hình 21: Trang quản lý nhập hàng...............................................................................31
197Hình 22: Trang sản phẩm gần hết................................................................................32
198Hình 23: Trang quản lý sản phẩm................................................................................33
199Hình 24: Trang quản lý nhà sản xuất...........................................................................34
200Hình 25: Trang quản lý sản phẩm................................................................................35
201
202
6


203
204

DANH MỤC CÁC TỪ VIẾT TẮT

205

#

Thuật ngữ/
Từ viết tắt
1 SRS
2 BR
3 SC
4 UC

5 EF
… …

Mô tả
Software Requirement Specification
Business Rule
Screen
Use Case
Entity framework

206

7


CHƯƠNG 1: LÝ THUYẾT VỀ WEBSITE

207

2081.1 GIỚI THIỆU ASP.NET MVC
2091.1.1. Tổng quan về asp.net mvc
210
Hệ thống được phát triển dựa trên nền tảng ASP.Net MVC 5.
211ASP.Net MVC là một framework web được phát triển bởi Microsoft,
212thực thi mơ hình MVC. MVC là tên một mẫu phát triển ứng dụng,
213phương pháp này chia nhỏ một ứng dụng thành ba thành phần để cài
214đặt, mỗi thành phần đóng một vai trị khác nhau và ảnh hưởng lẫn
215nhau, đó là Model, Views, và Controller. ASP.Net MVC đang nổi lên là
216phương pháp phát triển web mạnh nhất và phổ biển nhất trên nền .Net
217hiện nay.

2181.1.2. Mơ hình MVC

219
220
221

Hình 1: Mơ hình MVC
Model: Các đối tượng Models là một phần của ứng dụng, các đối

222tượng này thiết lập logic của phần dữ liệu của ứng dụng. Thông thường,
223các đối tượng model lấy và lưu trạng thái của model trong CSDL.
224

Views: Views là các thành phần dùng để hiển thị giao diện người

225dùng (UI). Thông thường, view được tạo dựa vào thông tin dữ liệu
226model.

8


227

Controllers: Controller là các thành phần dùng để quản lý tương

228tác người dùng, làm việc với model và chọn view để hiển thị giao diện
229người dùng.
230

Luồng xử lý dữ liệu trong MVC: Khi có một u cầu từ phía

231Client gửi đến Server, bộ phận Controller có nhiệm vụ tiếp nhận yêu
232cầu, xử lý dữ liệu đầu vào và quyết định luồng đi tiếp theo (trả về kết
233quả hay tương tác với Cơ sở dữ liệu để lấy dữ liệu). Nếu cần tương tác
234với cơ sở dữ liệu, Controller sẽ gọi tới Model để lấy dữ liệu đầu ra.
235Model tương tác với Cơ sở dữ liệu để truy xuất dữ liệu phù hợp với u
236cầu của phía Controller, sau đó Model trả dữ liệu về cho Controller xử
237lý. Controller sẽ gọi đến View phù hợp với yêu cầu kèm theo dữ liệu cho
238View. View có trách nhiệm hiển thị kết quả, dữ liệu đầu ra phù hợp với
239yêu cầu của người dùng trên giao diện Web.
2401.1.3. Tính năng của ASP.Net MVC 5
241
Tách bạch các tác vụ của ứng dụng (logic nhập liệu, business
242logic, và logic giao diện), dễ dàng kiểm thử và mặc định áp dụng
243hướng phát triển Test Driven Development (TDD). Tất cả các tính năng
244chính của mơ hình MVC được cài đặt dựa trên interface và được kiểm
245thử bằng cách sử dụng các đối tượng mocks, mock object là các đối
246tượng mơ phỏng các tính năng của những đối tượng thực sự trong ứng
247dụng. Bạn có thể kiểm thử unit-test cho ứng dụng mà không cần chạy
248controller trong tiến trình ASP.NET, và điều đó giúp unit test được áp
249dụng nhanh chóng và tiện dụng. Bạn có thể sử dụng bất kỳ nền tảng
250unit-testing nào tương thích với nền tảng .NET.
251

MVC là một nền tảng khả mở rộng (extensible) & khả nhúng

252(pluggable). Các thành phần của ASP.NET MVC 5 được thiết kể để
253chúng có thể được thay thế một cách dễ dàng hoặc dễ dàng tùy chỉnh.
9

254Bạn có thể nhúng thêm view engine, cơ chế định tuyến cho URL, cách
255kết xuất tham số của action-method và các thành phần khác. ASP.NET
256MVC cũng hỗ trợ việc sử dụng Dependency Injection (DI) và Inversion
257of Control (IoC). DI cho phép bạn gắn các đối tượng vào một lớp cho lớp
258đó sử dụng thay vì buộc lớp đó phải tự mình khởi tạo các đối tượng. IoC
259quy định rằng, nếu một đối tượng yêu cầu một đối tượng khác, đối
260tượng đầu sẽ lấy đối tượng thứ hai từ một nguồn bên ngồi, ví dụ như
261từ tập tin cấu hình. Và nhờ vậy, việc sử dụng DI và IoC sẽ giúp kiểm thử
262dễ dàng hơn.
263

ASP.NET MVC có thành phần ánh xạ URL mạnh mẽ cho phép bạn

264xây dựng những ứng dụng có các địa chỉ URL xúc tích và dễ tìm kiếm.
265Các địa chỉ URL khơng cần phải có phần mở rộng của tên tập tin và
266được thiết kế để hỗ trợ các mẫu định dạng tên phù hợp với việc tối ưu
267hóa

tìm kiếm

(URL) và

phù hợp với lập

địa chỉ theo kiểu

268Representational State Transfer (REST)…
269

Hỗ trợ các tính năng có sẵn của ASP.NET như cơ chế xác thực

270người dùng, quản lý thành viên, quyền, output caching và data
271caching, seession và profile, quản lý tình trạng ứng dụng, hệ thống cấu
272hình… – ASP.NET MVC 5 sử dụng view engine Razor View Engine cho
273phép thiết lập các view nhanh chóng, dễ dàng và tốn ít công sức hơn
274so với việc sử dụng Web Forms view engine.
275
276
277
10


278
279
280
281
282
283
284
285
286

CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN LINH
KIỆN MÁY TÍNH

2872.1. PHÂN TÍCH U CẦU
288

2.1.1 Mơ tả dự án

289 Hệ thống bán đồ điện tử online bao gồm 1 trang web dành cho user và admin.
290Ở trang website bán hàng:
291

+ Cho phép người dùng có thể vào trang web để xem danh sách các sản phẩm theo

292từng chủng loại, nhà sản xuất, tìm kiếm sản phẩm theo từ khóa.
293

+ Cho phép người dùng thêm vào giỏ hàng, quản lý giỏ hàng, chỉnh sửa số lượng,

294xóa giỏ hàng và hiện tổng tiền.
295

+ Khách hàng gồm 2 vai trò: khách hàng khơng có tài khoản (guest) và có tài

296khoản (customer).
297

+ Nếu người dùng chưa có tài khoản thì sẽ hiện form điền thông tin khi đặt hàng.

11


298

+ Người dùng đã đăng ký tài khoản để mua sản phẩm mà không cần phải điền

299form thông tin.

300Ở trang website Admin:
301

+ Các admin có quyền đăng nhập và đăng ký.

302

+ Tại trang chủ sẽ thống kê các thông tin của cửa hàng.

303

+ Admin được phép thêm, xem, xóa, sửa quyền.

304

+ Mỗi loại tài khoản sẽ được phân quyền khác nhau.

305

+ Ở trang quản lý sản phẩm, các tài khoản có quyền vào được phép thêm, xem ,

306xóa, sửa sản phẩm.
307

+ Ở trang quản lý chủng loại sản phẩm, các tài khoản có quyền vào được phép

308thêm, xem , xóa, sửa chủng loại sản phẩm.
309

+ Ở trang quản lý chủng loại sản phẩm, các tài khoản có quyền vào được phép

310thêm, xem , xóa, sửa nhà sản xuất.1
311

+ Ở trang quản lý nhập hàng, các tài khoản có quyền vào được phép thêm, xem ,

312xóa, sửa đơn nhập hàng.
313
+ Ở đơn đặt hàng, các tài khoản có quyền vào được phép xem các đơn hàng chưa
314thanh toán, đã thanh toán nhưng chưa giao, đã thanh toán và đã giao, và duyệt đơn hàng.
3152.1.2 Actors và Use Cases
316Các Use Case Diagram
317

12


318
319

Hình 2: Biểu đồ Use case chính

320
321

Hình 3: Biểu đồ Use case quản lý quyền

322
323

Hình 4: Biểu đồ Use case quản lý tài khoản
13


324
325

Hình 5: Biểu đồ Use case tra cứu sản phẩm

326
327

Hình 6: Biểu đồ Use case đặt hàng

328
329

#

Code

Hình 7: Biểu đồ Use case quản lý danh mục
Name
Brief Description
14


1
2
3

UC01
UC02
UC03

Đăng nhập
Đăng ký
Quản lý quyền

4

UC04

Quản lý tài khoản

5

UC05

Tra cứu sản phẩm

6

UC06

Đặt hàng

7

UC07

Quản lý danh mục

8

UC08

Quản lý nhập xuất

330
331

Cho phép actor đăng nhập vào hệ thống
Cho phép actor tạo tài khoản khi chưa có
Cho phép actor điều chỉnh quyền các loại
tài
khoản và các quyền
Cho phép actor thêm, xóa, sửa các tài
khoản.
Cho phép các actor tìm kiếm, liệt kê danh
sách sản phẩm và xem chi tiết sản phẩm
Cho phép các actor xem giỏ hàng, sửa giỏ
hàng, xóa giỏ hàng, thanh tốn
Cho phép actor thêm, xóa, sửa các danh
mục như: sản phẩm, loại sản phẩm, nhà
sản xuất
Cho phép actor quản lý phiếu nhập hàng
và
đơn đặt hàng

Hình 8: Biểu đồ Use case quản lý nhập xuất

3322.1.3 Mô tả Actors

#

Tên Actor

Mô tả
15


1

Admin

2
3

Staf
Customer

Là quản trị viên của hệ thống, có mọi quyền và thực
hiện mọi chức năng
Là người quản lý số liệu của hệ thống, doanh thu.
Là khách hàng gồm người có tài khoản và người
chưa
có tài khoản

333

334
335
3362.2. THIẾT KẾ HỆ THỐNG
337
338

2.2.1 Kiến trúc hệ thống.

339Kiến trúc chính
340Framework + ngơn ngữ lập trình dùng để phát triển Cấu hình hệ thống
341
342*Kiến trúc phần mềm
343Đồ án sử dụng mơ hình 3 lớp MVC. MVC là từ viết tắt bởi 3 từ Model –
344View
345

Controller. Đây là mơ hình thiết kế sử dụng trong kỹ thuật phần

346mềm. Mơ hình source code thành 3 phần, tương ứng mỗi từ. Mỗi từ
347tương ứng với một hoạt động tách biệt trong một mơ hình.
348

Model (M):Là bộ phận có chức năng lưu trữ toàn bộ dữ liệu của

349ứng dụng. Bộ phận này là một cầu nối giữa 2 thành phần bên dưới là
350View và Controller. Model thể hiện dưới hình thức là một cơ sở dữ liệu
351hoặc có khi chỉ đơn giản là một file XML bình thường. Model thể hiện rõ
352các thao tác với cơ sở dữ liệu như cho phép xem, truy xuất, xử lý dữ
353liệu,…
354

View (V):Đây là phần giao diện (theme) dành cho người sử dụng.

355Nơi mà người dùng có thể lấy được thơng tin dữ liệu của MVC thông
16


356qua các thao tác truy vấn như tìm kiếm hoặc sử dụng thơng qua các
357website.
358

Controller (C): Bộ phận có nhiệm vụ xử lý các yêu cầu người dùng

359đưa đến thông qua view. Từ đó, C đưa ra dữ liệu phù hợp với người
360dùng. Bên cạnh đó, Controller cịn có chức năng kết nối với model.
361*Framework:
362

Đồ án Sử dụng công nghệ ASP.NET MVC 5 với ngơn ngữ lập trình

363C# 7.3 trong Backend và một phần lớn framework bootstrap 4 làm
364Frontend.
365

Ngoài ra cịn sử dụng cơng nghệ Entity Framework để ánh xạ dữ

366liệu từ database. Entity Framework (EF) là một framework ánh xạ quan
367hệ đối tượng (ORM) dành cho ADO.NET, là 1 phần của .NET Framework.
368EF cho phép các nhà phát triển Web tương tác với dữ liệu quan hệ theo
369phương pháp hướng đối tượng đặc trưng. Lợi ích lớn nhất của EF là giúp

370lập trình viên giảm thiểu việc lập trình mã nguồn cần thiết để truy cập
371và tương tác với cơ sở dữ liệu. EF được Microsoft hỗ trợ phát triển lâu
372dài và bền vững, vì vậy EF là 1 framework mạnh nhất hiện nay để phát
373triển ứng dụng Web với sự hỗ trợ đông đảo của các nhà phát triển Web.
374

17


375
376

Đồ án sử dụng chiến lược database first với MSSQL Server, cùng cú

377pháp LinQ hỗ trợ trong việc truy vấn dữ liệu một cách dễ dàng hơn.
378
379

2.2.2 Thiết kế dữ liệu.

380

Sơ đồ UML database:

381

18


382

383
384
385
19


386
387
388
389

390
391
3922.2.3 Hệ thống được xây dựng.
393

20


394
395

396
397
398
399

Hình 9: Sơ đồ màn hình

400

401
21


4022.3.WEBSITE BÁN LINH KIỆN MÁY TÍNH
4032.3.1 Trang chủ bán hàng.

404
405
406
407

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

22


408

Trang chủ bán hàng dùng để hiển thị những sản phẩm mới theo

409các style khác nhau.
410

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

411
412
413
414

Hình 11: Trang chi tiết sản phẩm
Hiển thị thơng tin chi tiết của sản phẩm như về cấu hình, giá bán, thông tin mô tả,

415thông số kĩ thuật và nút chức năng thêm vào giỏ hàng.
416

23


417

2.3.3 Trang danh sách sản phẩm.

418
419
420

Hình 12: Trang danh sách sản phẩm
Hiển thị danh sách sản phẩm theo từng loại sản phẩm, từng nhà sản xuất, từ từ

421khóa tìm kiếm. Có nút chức năng xem chi tiết và thêm vào giỏ hàng. Và còn được phân
422trang mỗi 6 sản phẩm.

24