Nghiên cứu kĩ thuật lập trình MVC và xây dựng Website bán thời trang

LỜI CẢM ƠN

Trước hết, em xin bày tỏ lòng biết ơn sâu sắc tới Thầy Lê Đắc Nhường, người
đã trực tiếp hướng dẫn em làm báo cáo thực tập này.
Em xin chân thành cảm ơn sự giúp đỡ của toàn thể các giảng viên khoa công
nghệ thông tin, trường Đại học Hải Phòng, cũng như sự chỉ bảo của các anh chị Công
ty TNHH Thương mại thế giới số Huy Hậu nơi em thực tập đã dìu dắt, dạy dỗ em cả
về kiến thức chuyên môn và tinh thần học tập độc lập, sáng tạo để em có được kiến
thức thực hiện báo cáo của mình.
Cuối cùng, em xin bày tỏ lịng biết ơn sâu đậm của mình tới gia đình, bạn bè
những người ln sát cánh bên em, tạo mọi điều kiện tốt nhất để em có thể thực hiện
đồ án tốt nghiệp của mình.
Trong quá trình thực hiện báo cáo thực tập, mặc dù đã cố gắng hết sức song do
thời gian và khả năng có hạn nên em khơng thể tránh khỏi những thiếu sót. Vì vậy, em
rất mong nhận được sự thông cảm, chỉ bảo và giúp đỡ của các thầy giáo, cô giáo và
các bạn.
Một lần nữa em xin chân thành cảm ơn!


DANH MỤC CÁC CHỮ VIẾT TẮT
Từ viết tắt
API
ASP
CSDL
CSS
HTML
IDE
MVC
NET
UC
VS

Giải thích
Application Programming Interface
Active Server Pages
Cơ sở dữ liệu
Cascading Style Sheets
HyperText Markup Language
Integrated Developement Enviroment
Model-View-Controller
Network Enabled Technologies
Use Case
Visual Studio

DANH MỤC HÌNH ẢNH
Hình 1.1: Rest API......................................................................................................10
Hình 2.1: Biểu đồ use case tổng quát..........................................................................16
Hình 2.2: Biểu đồ phân rã use case cảu tác nhân Khách hàng....................................16
Hình 2.3: Biểu đồ use case người quản lý...................................................................17
Hình 2.4: Biểu đồ tuần tự của use case Đăng nhập.....................................................26
Hình 2.5: Biểu đồ tuần tự của use case Đăng ký.........................................................26
Hình 2.6: Biểu đồ tuần tự cho use case Xem thông tin sản phẩm...............................27
Hình 2.7: Biểu đồ tuần tự cho use case Mua hàng......................................................27
Hình 2.8: Biểu đồ tuần tự cho use case Xem lịch sử đơn hàng...................................28
Hình 2.9: Biểu đồ tuần tự cho use case thêm sản phẩm..............................................28
Hình 2.10: Biểu đồ tuần tự cho use case sửa thơng tin sản phẩm................................29
Hình 2.11: Biểu đồ tuần tự cho use case xóa sản phẩm...............................................29
Hình 2.12: Biểu đồ lớp................................................................................................30
Hình 3.1: Giao diện Trang chủ....................................................................................38
Hình 3.2 Hình ảnh chi tiết một sản phẩm....................................................................39
Hình 3.3 Giao diện đăng nhập cho admin...................................................................39

Hình 3.4 Giao diện Quản lý sản phẩm........................................................................40


DANH MỤC CÁC BẢNG
Bảng 1.1 Các phiên bản của ASP.NET MVC.................................................................3
Bảng 1.2: Sự khách nhau giữa MVC và Webform.........................................................4
Bảng 1.3: Các phiên bản Angular................................................................................12
Bảng 2.1: Các tác nhân và use case cơ bản của hệ thống.............................................16


MỤC LỤC
LỜI CẢM ƠN..............................................................................................................iii
DANH MỤC CÁC CHỮ VIẾT TẮT...........................................................................iv
DANH MỤC HÌNH ẢNH............................................................................................iv
DANH MỤC CÁC BẢNG............................................................................................v
MỞ ĐẦU....................................................................................................................... 1
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT..............................................................................3
1.1 Công nghệ ASP.NET MVC..................................................................................3
1.1.1 Lịch sử ra đời của MVC................................................................................3
1.1.2 Sự khác nhau giữa MVC và webform...........................................................4
1.1.3 Kiến trúc sử dụng ASP.NET MVC................................................................4
1.1.4 Đặc điểm ASP.NET MVC Framework..........................................................6
1.1.5 Ưu nhược điểm của mơ hình MVC...............................................................8
1.2 Cơng nghệ ASP.NET Core...................................................................................8
1.2.1 Giới thiệu tổng quan về ASP.NET Core.........................................................8
1.2.2 Sơ lượt về lịch sử của ASP.NET Core............................................................8
1.2.3 ASP.NET Core là gì?.....................................................................................9
1.2.4 Ưu điểm của ASP.NET Core..........................................................................9
1.3 Công nghệ ASP.NET Core API..........................................................................10
1.3.1 REST API....................................................................................................10

1.3.2 REST API hoạt động như thế nào?..............................................................10
1.4 Công nghệ Angular.............................................................................................11
1.4.1 Angular là gì?...............................................................................................11
1.4.2 Lịch sử Angular...........................................................................................11
1.4.3 Tại sao nên chọn Angular?...........................................................................12
1.5 Vài nét về thương mại điện tử B2C....................................................................12
1.2.1 Khái niệm....................................................................................................12
1.2.2 Phân loại mơ hình B2C................................................................................12
1.2.3 Hoạt động của mơ hình B2C........................................................................13
CHƯƠNG 2: PHÂN TÍCH, THIẾT KẾ HỆ THỐNG..................................................14
2.1 Mơ tả bài tốn....................................................................................................14
2.2 Mục tiêu xây dựng hệ thống...............................................................................14
2.3 Yêu cầu đặt ra.....................................................................................................14
2.4 Biểu đồ use case.................................................................................................15
2.4.1 Biểu đồ use case tổng quát...........................................................................16


2.4.2 Biểu đồ phân rã cho tác nhân Khách hàng...................................................16
2.4.3 Biểu đồ use case cho tác nhân người quản lý...............................................17
2.5 Đặc tả use case...................................................................................................17
2.5.1 Đặc tả Use Case Đăng nhập.........................................................................17
2.5.2 Đặc tả Use Case Đăng ký............................................................................18
2.5.3 Đặc tả Use Case Tìm kiếm sản phẩm..........................................................19
2.5.4 Đặc tả Use Case Xem thơng tin sản phẩm...................................................20
2.5.5 Đặc tả Use case Đặt mua.............................................................................21
2.5.6 Đặc tả Use case Xem lịch sử đơn hàng........................................................23
2.5.7 Đặc tả Use case Quản lý sản phẩm..............................................................23
2.5.8 Đặc tả Use case Quản lý đơn hàng..............................................................25
2.6 Biểu đồ tuần tự...................................................................................................26
2.6.1 Biểu đồ tuần tự của use case Đăng nhập......................................................26

2.6.2 Biểu đồ tuần tự của use case Đăng ký.........................................................26
2.6.3 Biểu đồ tuần tự cho use case Xem thông tin sản phẩm................................27
2.6.4 Biểu đồ tuần tự cho use case Mua hàng.......................................................27
2.6.5 Biểu đồ tuần tự cho use case Xem lịch sử đơn hàng....................................28
2.6.6 Biểu đồ tuần tự cho use case Quản lý sản phẩm..........................................28
2.7 Thiết kế biểu đồ lớp............................................................................................30
CHƯƠNG 3: THỰC NGHIỆM XÂY DỰNG HỆ THỐNG........................................32
3.1. Môi trường cài đặt.............................................................................................32
3.1.1 Giới thiệu hệ quản trị SQL Server [2].......................................................32
3.1.2. Giới thiệu về Visual studio 2017.................................................................34
3.1.3 Visual studio code........................................................................................35
3.2 Một số giao diện của website.............................................................................38
3.2.1 Trang chủ.....................................................................................................38
3.2.3 Trang chi tiết sản phẩm................................................................................39
3.2.2 Trang đăng nhập cho admin.........................................................................39
3.2.4 Trang Quản lý sản phẩm..............................................................................40
KẾT LUẬN.................................................................................................................41
TÀI LIỆU THAM KHẢO...........................................................................................42
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN..........................................................43


MỞ ĐẦU
Ngày nay, cùng với sự phát triển của đất nước ngành Cơng nghệ thơng tin đã có
những bước phát triển mạnh mẽ không ngừng và tin học đã trở thành chiếc chìa khóa
dẫn đến thành cơng cho nhiều cá nhân trong nhiều lĩnh vực, hoạt động. Với những ứng
dụng của mình, ngành Cơng nghệ thơng tin đã góp phần mang lại nhiều lợi ích mà
khơng ai có thể phủ nhận được. Đặc biệt là trong lĩnh vực quản lý kinh tế, tin học đã
góp phần tạo ra sự thay đổi nhanh chóng cho bộ mặt xã hội. Nhất là khi việc tin học
hóa vào cơng tác quản lý, bán hàng là một trong những yêu cầu cần thiết đối với các
doanh nghiệp hiện nay.

Từ những phần mềm quản lý giúp cho công việc bán hàng của cửa hàng trở nên
nhanh chóng và dễ dàng, ngày nay cơng nghệ thơng tin đã phát triển mạnh mẽ hơn
nữa, Website ra đời không chỉ đáp ứng cho các khách hàng đến trực tiếp cửa hàng mua
sản phẩm mà nó cịn phục vụ cho những khách hàng ở xa. Không những thế, việc giới
thiệu, quảng bá hình ảnh về cửa hàng, cơng ty được mở rộng trên quy mô lớn giúp cho
việc kinh doanh, buôn bán, trao đổi tin tức thuận lợi hơn rất nhiều, mang lại hiệu quả
kinh tế cao hơn và tạo uy tín trong lịng khách hàng.
Chính vì lợi ích mà Website mang lại mà các cửa hàng, công ty đã áp dụng nó
để phát triển cơng việc kinh doanh và giới thiệu cửa hàng của mình. Trong số đó, thời
trang cũng là một ngành sử dụng nhiều đến Website. Do vậy, em lựa chọn đề tài “Xây
dựng Website quản lý bán hàng thời trang sử dụng mơ hình MVC” nhằm đưa đến cho
khách hàng một địa điểm lý tưởng trong việc mua sắm quần áo, đặc biệt là phái nữ.

1


Mục tiêu nghiên cứu

- Thu thập các thông tin, các báo cáo và giấy tờ có liên quan đến việc quản lý
bán hàng của cửa hàng, phân tích thiết kế hệ thống thông tin quản lý bán hàng của
nhà hàng.
- Tìm hiểu cơng nghệ ASP.NET MVC, hệ quản trị cơ sở dữ liệu SQL
Sever, IDE Visual Studio 2017
- Xây dựng hệ thống website quản lý và mua sắm online.
Nội dung báo cáo gồm có 03 chương:

- Chương 1: Cơ sở lý thuyết
Tìm hiểu về cơng nghệ ASP.NET MVC5, thương mại điện tử, khái quát
lên được ưu nhược điểm và tầm quan trọng của các công nghệ này trong việc
xây dựng các hệ thống website hiện nay.

- Chương 2: Phân tích, thiết kế hệ thống
Khảo sát thực trạng từ đó đề ra các mục tiêu cũng như các yêu cần mà hệ
thống cần đạt được
- Chương 3: Phân tích, thiết kế hệ thống
Từ việc khảo sát hệ thống ban đầu, nội dung ở phần này tập trung xác định các yêu
cầu mà hệ thống cần đáp ứng, xác định các chức năng cần có, luồng dữ liệu và các thực thể
trong hệ thống từ đó thiết kế CSDL, xử lý các chức năng, thiết kế chương trình

- Chương 4: Thực nghiệm xây dựng hệ thống
Từ dữ liệu có được qua phần phân tích, thiết kế hệ thống và ứng dụng từ việc
tìm hiểu cơng nghệ ASP.NET MVC, nội dung chương 3 tập trung xác định môi trường
triển khai và thiết kế hệ thống, đưa ra kết luận và rút kinh nghiệm.


CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1 Công nghệ ASP.NET MVC
1.1.1 Lịch sử ra đời của MVC
Sự ra đời của giao diện đồ họa (GUI) và lập trình hướng đối tượng (Object
Oriented Programming) cho phép lập trình viên làm việc với những thành phần đồ họa
như những đối tượng đồ họa có thuộc tính và phương thức riêng của nó. Khơng dừng
lại ở đó, những nhà nghiên cứu ở Xerox PARC còn đi xa hơn khi cho ra đời cái gọi là
kiến trúc MVC (viết tắt của Model – View – Controller)
MVC được phát minh vào những năm 70, bởi TrygveReenskaug. MVC lần đầu
tiên xuất hiện công khai là trong Smalltalk-79
Thế hệ tiếp theo của MVC xuất hiện cùng với hệ điều hành NeXT và các phần
mềm của nó. Kiến trúc này ngày càng được phát triển và hoàn thiện nhằm giải quyết
các vấn đề cũng như các giải pháp cho q trình phát triển phần mềm [8].
Vì vậy sau đó, lần lượt các MVC framework ra đời dựa trên mô hình MVC
như: CodeIgniter, Zend, ASP.NET MVC …

Bảng 1.1 Các phiên bản của ASP.NET MVC

Thời gian phát hành
2008
2008
1/2010
15/8/2012
17/10/2013

Phiên bản
ASP.NET MVC 1.0
ASP.NET MVC 2.0 (.NET 3.5)
ASP.NET MVC 3.0 (.Net 4)
ASP.NET MVC 4.0 (.Net 4.5)
ASP.NET MVC 5.0 (.Net 5.0)


1.1.2 Sự khác nhau giữa MVC và webform
Bảng 1.2: Sự khách nhau giữa MVC và Webform

MVC

Webform

ASP.net MVC chia ra làm 3

ASP.net WebForm sử dụng

phần:

ViewState để quản lý các trang

– Models

ASP.net

– View

postback và dùng các web

– Controller.

controls, các event để thực

Mọi tương tác của người dùng

hiện các hành động cho UI

với Views sẽ được xử lý thơng

(User Interface). Khi có sự

qua việc thực hiện các action

tương tác với người dùng nên

hành động trong Controllers,

hầu hết ASP.net WebForm xử

khơng cịn postback, lifecycle và

lý chậm.

events.
Đối với MVC thì việc đó có thể

Với ASP.net WebForm đều

Việc kiểm tra

sử dụng các unit test có thể thẩm

phải chạy tất cả các tiến trình

(test), gỡ lỗi

định rất dễ dàng các Controllers

của ASP.net, và sự thay đổi ID

thực hiện như thế nào

của bất kỳ Controls nào cũng

Thành phần

(debug)

đều

có

lifecycle,

ảnh hưởng đến ứng dụng
1.1.3 Kiến trúc sử dụng ASP.NET MVC
Như tên gọi MVC gồm 3 thành phần với các chức năng khác nhau [1]:
M (Model): là nơi chứa các nghiệp vụ tương tác với cơ sở dữ liệu. Nó bao
gồm các class/ function xử lý nhiều nghiệp vụ như kết nối database, truy vấn dữ liệu,
thêm – xóa – sửa dữ liệu…
V (View): Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi
chứa tất cả các đối tượng GUI như textbox, images… Hiểu một cách đơn giản, nó là
tập hợp các form hoặc các file HTML.
C (Controller): Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và
gọi đúng những phương thức xử lý chúng… Chẳng hạn thành phần này sẽ nhận yêu


cầu từ url và form để thao tác trực tiếp với Model.
1.1.2.6 Model

Model là thành phần chủ yếu được sử dụng để thao tác xử lý dữ liệu.
Trong các framework, Model vẫn thường sử dụng theo phương thức Active
Record, một trong những design pattern. Chúng có tác dụng rút ngắn thời gian
viết câu truy vấn cho người sử dụng. Biến những câu truy vấn phức tạp trở nên
gần gũi và thân thiện với người sử dụng thông qua các thư viện được định nghĩa
sẵn.
Model thường sẽ là các phương thức có trách nhiệm xử lý các tác vụ như:
select, insert, update, delete các record trong database. Ứng với các lấy dữ liệu,
model thường sử dụng mảng để gởi trả kết quả về. Vì mảng có thể cho phép

model lưu trữ nhiều thông tin hơn, nên thường các bản ghi khi bóc tách chúng sẽ
mang các dữ liệu của cơ sở dữ liệu một cách chi tiết.
Khi sử dụng Model, ta cũng cần tn theo ngun tắc chính của chúng là
khơng xuất giá trị trực tiếp trong Model. Mà tất cả những dữ liệu ấy, phải đưa
vào mảng và trả về theo phương thức. Và tiếp tục ở View ta sẽ sử dụng nó để lấy
dữ liệu ra.
1.1.3.2 View

View là phần hiển thị thông tin tương phản khi gửi và nhận yêu cầu.
Trước đây, người ta thường sử dụng template để phân tách website thành 2 mảng
riêng biệt. Một là giao diện và một là core. Việc chỉnh sửa giao diện trở nên đơn
giản hơn đối so với cách viết thập cẩm lúc trước. Tuy nhiên, các thư viện này
thực chất sẽ làm cho ứng dụng của chúng ta trở nên chậm chạp hơn bao giờ hết.
Bởi chúng phải phiên dịch nhiều lần các kịch bản.
Vì vậy, View là một phần trong việc nâng cấp những hạn chế ấy. Chúng
giúp giảm thiểu tối đa quá trình biên dịch nhiều lần. Và làm cho ứng dụng trở
nên mạnh mẽ và chuyên nghiệp hơn nhiều so với cách lập trình thuần.
1.1.2.6 Controller

Controller có trách nhiệm chính là điều hướng các yêu cầu của người sử
dụng. Như vậy trên toàn ứng dụng của ta, tất cả các yêu cầu đều sẽ phải đi tới


Controller. Và tại đây, ứng với các tham số người sử dụng truyền mà ta đưa họ
đến một tác vụ nào đó trên ứng dụng.
Tại các tác vụ này, chúng sẽ thông qua lớp Model để làm việc và trả kết
quả trở về Controller. Cuối cùng controller sẽ đẩy dữ liệu thao tác tới view. View
là thành phần cuối cùng mà người sử dụng nhận được khi họ giở yêu cầu tới ứng
dụng.
1.1.4 Đặc điểm ASP.NET MVC Framework

 Tiếp tục hỗ trợ các tính năng trong ASP.NET
- Hỗ trợ sử dụng các các tập tin: .ASPX, .ASCX, như là thành phần View.
- Hỗ trợ đầy đủ các tính năng bảo mật của ASP.net: Form/ Windows
authenticate, URL authorization, membership/roles, output và data caching,
section/ profile state, configuration system, provider architecture.
 Tách rõ ràng các mối liên quan, mở ra khả năng test TDD (Test Driven
Developer).
- Có thể test unit trong ứng dụng mà khơng cần phải chạy Controllers
cùng với tiến trình của ASP.NET và có thể dùng bất kỳ một unit testing
framework nào như NUnit, MBUnit, MS Test, …
 Có khả năng mở rộng, mọi thứ trong MVC được thiết kế để dễ thay thế, dễ
dàng tùy biến. Ánh xạ URL mạnh mẽ, cho phép xây dựng ứng dụng với những URL
sạch.
 Khơng sử dụng mơ hình post-back từ giao diện gửi đến server. Thay vào
đó, chủ động đưa những post-back từ View đến thẳng lớp Controller.
 Hỗ trợ nhiều công cụ tạo View (Support for Multiple View Engines)
- Cho phép chọn công cụ tạo view.
- Các loại view engine
o

Web Forms (ASPX)

o

Razor

o

Hay một view engine nguồn mở như Spark, NHaml,

NDjango.


 Hỗ trợ định tuyến
- ASP.NET MVC Framework có một bộ máy ánh xạ URL thật sự mạnh
mẽ.
- Bộ máy này cung cấp phương pháp rất linh hoạt trong việc ánh xạ URL
sang các Controller Classes.
- Bạn có thể dễ dàng định ra các quy luật, cài đặt đường đi, ASP.NET dựa
vào các quy luật đó để xác định Controller và action cần phải thực thi.
- ASP.NET cịn có khả năng phân tích URL, chuyển các thơng số trong
URL thành các tham số trong lời gọi hàm của Controller.
 Model Binding
- Model Binding là tính năng thế mạnh của ASP.NET MVC (và bây giờ
nó cũng được áp dụng cho cả Web Forms trong phiên bản ASP.NET 4.5).
- Hỗ trợ bạn viết phương thức nhận một đối tượng tùy biến như là một
tham số
- Với sự hỗ trợ của Model Binding, bây giờ bạn chỉ cần tập trung vào việc
cài đặt các nghiệp vụ logic, không cần phải bận tâm về việc suy nghĩ làm cách
nào để ánh xạ dữ liệu từ người dùng sang các đối tượng .NET.
 Filters
- Là tính năng mạnh trong ASP.NET MVC. Hỗ trợ cho việc kiểm tra tính
hợp lệ trước khi một action method được gọi hoặc sau khi một action method thi
hành.
 Razor View.
Từ ASP.net MVC 3 đi kèm với một công cụ View mới có tên là Razor với
những lợi ích sau:
- Cú pháp Razor là sạch sẽ và súc tích, địi hỏi một số lượng tối thiểu các tổ hợp
phím.

- Việc tìm hiểu Razor tương đối dễ dàng vì nó dựa trên ngôn ngữ C# và Visual
Basic.
- Visual Studio bao gồm IntelliSense và mã cú pháp Razor được màu hóa.


- Với Razor views có thể kiểm tra từng đơn vị mà khơng địi hỏi bạn phải
chạy các ứng dụng hoặc phải chạy website.
1.1.5 Ưu nhược điểm của mơ hình MVC
– Ưu điểm của MVC: Cho thấy sự chuyên nghiệp trong lập trình và phân tích
đối tượng, vì được chia các thành phần riêng biệt nên hoạt động độc lập tách biệt giúp
phát triển ứng dụng nhanh hơn, đơn giản hơn và dễ nâng cấp, bảo trì hơn.
– Nhược điểm của MVC: Là mơ hình làm việc rất bài bản nên với những ứng
dụng nhỏ, sử dụng MVC rất tốn nhiều thời gian và gây ra nhiều phức tạp.

1.2 Công nghệ ASP.NET Core
1.2.1 Giới thiệu tổng quan về ASP.NET Core
ASP.NET Core là một framework mới của Microsoft. Nó được thiết kế lại từ
đầu để trở nên nhanh chóng, linh hoạt và chạy trên được nhiều nền tảng khác nhau.
Trong bài viết này, ASP.NET Core là một framework có thể được sử dụng để phát triển
web với .NET. Nếu bạn có kinh nghiệm làm việc với MVC hoặc Web API trong một
vài năm thì bạn sẽ nhận thấy những tính năng quen thuộc. Kết thúc khóa học ASP.NET
Core của NET CORE VN. Bạn sẽ có những thứ cần thiết để bắt đầu làm việc được với
ASP.NET Core và viết 1 ứng dụng có thể thêm, sửa hay xem dữ liệu từ database như
các mơn lập trình khác bạn đã từng học.
1.2.2 Sơ lượt về lịch sử của ASP.NET Core
ASP.NET đã được sử dụng từ nhiều năm để phát triển các ứng dụng web. Kể từ
đó, framework này đã trải qua một sự thay đổi tiến hóa đều đặn và cuối cùng đã đưa
chúng ta đến với ASP.NET Core 1.0 hậu duệ mới gần đây nhất của nó.
ASP.NET Core khơng phải là phiên bản tiếp theo của ASP.NET 4.6
Đó là một framework hồn tồn mới, may mắn rằng nó một dự án side-by-side

tương tự với mọi thứ mà chúng ta biết.
Nó thực ra được viết lại trên framework ASP.NET 4.6 hiện tại những kích thước
nhỏ hơn và nhiều modular hơn.
1.2.3 ASP.NET Core là gì?
ASP.NET Core là một web framework mã nguồn và được tối ưu hóa cho
cloud để phát triển các ứng dụng web chạy trên nhiều nền tảng như Windows, Linux


và Mac. Hiện tại, nó bao gồm MVC framework được kết hợp các tính năng của MVC
và Web API thành một web framework duy nhất.
Các ứng dụng ASP.NET Core có thể chạy trên .NET Core hoặc trên .NET
Framework hồn chỉnh.
Nó đã được thiết kế để cung cấp một framework tối ưu cho các ứng dụng
để triển khai tới cloud hoặc chạy on-premises.
Nó bao gồm những modular với các thành phần tối thiểu, do đó bạn giữ được
tính linh hoạt trong q trình xây dựng các giải pháp của mình.
Ta có thể phát triển và chạy các ứng dụng đa nền tảng từ ASP.NET Core trên
Windows, Mac và Linux.
1.2.4 Ưu điểm của ASP.NET Core
ASP.NET Core đi kèm với những ưu điểm sau:
-

ASP.NET Core có một số thay đổi kiến trúc dẫn đến modular framework nhỏ

-

hơn.
ASP.NET Core khơng cịn dựa trên System.Web.dll. Nó dựa trên một tập hợp

-

nhiều yếu tố của Nuget packages.
Điều này cho phép bạn tối ưu ứng dụng của mình chỉ cần những NuGet

-

packages cần thiết.
Lợi ích của diện tích bề mặt ứng dụng nhỏ hơn thì bảo mật chặt chẽ hơn, giảm
dịch vụ, cải thiện hiệu suất và giảm chi phí.
Với ASP.NET Core, bạn có thể nhận được các cải tiến sau:

-

Xây dựng và chạy các ứng dụng ASP.NET Core đa nền tảng trên Windows,

-

Mac và Linux.
Được xây dựng trên .NET Core, hỗ trợ side-by-side app versioning.
Công cụ mới giúp đơn giản hóa việc phát triển web hiện đại.
Liên kết đơn các web stack như Web UI và API Web.
Cấu hình dựa trên mơi trường đám mây sẵn có.
Được xây dựng dựa trên cho DI (Dependency Injection).
Tag Helpers làm cho các Razor makup trở nên tự nhiên hơn với HTML.
Có khả năng host trên IIS hoặc self-host.


1.3 Công nghệ ASP.NET Core API
1.3.1 REST API
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 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.

Hình 1.1: Rest API

1.3.2 REST API hoạt động như thế nào?

-

REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt động cơ bản nêu

-

trên sẽ sử dụng những phương thức HTTP riêng.
GET (SELECT): Trả về một Resource hoặc một danh sách Resource.
POST (CREATE): Tạo mới một Resource.
PUT (UPDATE): Cập nhật thông tin cho Resource.
DELETE (DELETE): Xoá một Resource.


-

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng
với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa.

1.4 Cơng nghệ Angular
1.4.1 Angular là gì?
Angular – ứng dụng là một tập hợp những component (thành phần) và một vài

services (dịch vụ) cung cấp chức năng trên những component đó:
Angular Application = Component + Component + Component … + services
Component = Template + Class + Metadata
Mỗi component bao gồm một mẫu HTML cái mà sẽ render ra một “frame” giao
diện người dùng.
Một Class để code những gì liên kết với view. Class chứa những thuộc tính,
những phần tử dữ liệu có sẵn để phục vụ cho các view và các phương thức thực hiện
những hành động cho view, chẳng hạn như sự phản hồi của một nút bấm.
Một component cũng có metadata cung cấp thêm những thơng tin của
component cho Angular. Metadata này để xác định Class là một Angular component
1.4.2 Lịch sử Angular
Bảng 1.3: Các phiên bản Angular

PHIÊN BẢN ANGULAR
Angular 2

THỜI
GIAN
14.09.2016

MIÊU TẢ
Initial Version of

Angular 4

Angular
23.03.2017 Version 4

Angular 5

11.11.2017 Version 5

Angular 6

03-05-2018 Version 6

Angular 7

18-10-2018 Version 7

Angular 8

25-08-2019 Version 8

Angular 9

13-11-2019 9.0.0-rc.2

1.4.3 Tại sao nên chọn Angular?
Angular làm cho HTML của chúng ta trở nên linh hoạt hơn.


Angular làm cho code HTML của chúng ta trở nên mạnh mẽ hơn với những đặc
trưng như điều kiện “if”, vòng lặp “for” và những biến địa phương “local variables”.
Angular có cơ chế binding data mạnh mẽ, chúng ta có thể dễ dàng hiển thị các
field từ data model của chúng ta, theo dõi những thay đổi và cập nhật lại từ người
dùng.
Angular hoạt động theo thiết kế module (mô đun). Ứng dụng của chúng ta sẽ
được xây dựng từ những khối module độc lập, làm cho việc xây dựng sẽ dễ dàng và có
thể tái sử dụng được nội dung.

Angular hỗ trợ việc giao tiếp với những back- end service. Điều này sẽ dễ dàng
cho việc tích hợp những back-end service để việc giải quyết các bài toán logic nhanh
chóng
Angular là cực kỳ phổ biến với hàng triệu nhà phát triển đang sử dụng nó.

1.5 Vài nét về thương mại điện tử B2C
1.2.1 Khái niệm
-

Mơ hình B2C (Business to Consumer) - cịn gọi là mơ hình bán lẻ trực tuyến là
mơ hình thương mại điện tử diễn ra giữa doanh nghiệp và người tiêu dùng. Các
công ty, doanh nghiệp sẽ bn bán, trao đổi hàng hóa và dịch vụ cho người tiêu
dùng. Doanh nghiệp ở đây có thể là nhà sản xuất, nhà phân phối hoặc đại lý.
Đây là loại giao dịch quen thuộc và phổ biến nhất trong thương mại điện tử xuất
phát từ những nhu cầu mua bán hàng hóa qua mạng.

1.2.2 Phân loại mơ hình B2C
-

Mơ hình B2C được chia thành 2 loại là cửa hàng điện tử và siêu thị điện tử.

o Cửa hàng điện tử (e-store) là một trang web bán hàng hóa, dịch vụ thường được
sở hữu bởi các cá nhân, nhà sản xuất, nhà bán lẻ. Một website cửa hàng điện tử
thường chứa danh mục hàng hóa, dịch vụ; cơng cụ tìm kiếm; giỏ hàng; cổng
thanh toán; dịch vụ khách hàng...
o Siêu thị điện tử (e-mall) là một trang web chứa nhiều cửa hàng điện tử. Đặc
trưng của siêu thị điện tử là thường chứa danh bạ hàng hóa và danh mục các cửa
hàng điện tử.

1.2.3 Hoạt động của mơ hình B2C
-

Mơ hình B2C được áp dụng trong các mơ hình siêu thị điện tử và các website
bán lẻ. Khách hàng truy cập vào website, chọn những món hàng cho mình và
cung cấp thơng tin cần thiết cho việc mua hàng, chọn hình thức thanh tốn và
hồn thành thao tác đặt hàng.

 Kết quả đạt được ở chương 1:
-

Hiểu về công nghệ ASP.NET MVC: biết được về lịch sử ra đời của MVC, sự
khác nhau giữa MVC và webform, biết thêm về kiến trúc của ASP.NET MVC,
sự tương tác giữa các thành phần trong mô hình MVC và các ưu nhược điểm
của mơ hình MVC.

-

Hiểu rõ hơn về thương mại điện tử B2C.

-

Cho thấy được tầm quan trọng của các công nghệ này trong việc xây dựng hệ
thống website hiện nay.

-

Hiểu về ngôn ngữ mô hình hóa nói chung và ngơn ngữ mơ hình hóa UML nói riêng, biết các
sử dụng để áp dụng phân tích hệ thống phục vụ nghiên cứu

CHƯƠNG 2: PHÂN TÍCH, THIẾT KẾ HỆ THỐNG
2.1 Mơ tả bài toán
4Teen Shop là một trong những cửa hàng bán thời trang hàng đầu Hải Phòng.
Đối tượng khách hàng của cửa hàng khơng chỉ là người dân Hải Phịng, mà cịn có cả
những đơn hàng ngoại tỉnh. Vì vậy cửa hàng cần có website quản lý online cũng như
đáp ứng nhu cầu mua sắm trực tiếp của khách hàng.

2.2 Mục tiêu xây dựng hệ thống
-

Xây dựng nên 1 website kết hợp việc bán hàng online và bán hàng tại cửa hàng
Giúp quảng bá thương hiệu 4Teen Shop tới những khách hàng ở địa phương

-

khác.
Hỗ trợ mua hàng và thanh toán online hiệu quả
Thông tin luôn được cập nhật.
Giúp chủ cửa hàng quản lý được các sản phẩm trên website và các đơn hàng
của khách

2.3 Yêu cầu đặt ra
 Yêu cầu chung
- Mọi người đều có thể tìm kiếm các sản phẩm trên website
- Mọi người đều có thể xem thơng tin các sản phẩm trên website
- Người dùng có tài khoản có thể đăng nhập và thực hiện các chức năng
ứng với quyền được cấp.
 Đối với quản lý cửa hàng
- Có thể thực hiện quản lý về sản phẩm như thêm, sửa thơng tin sản phẩm,

xóa sản phẩm, …
- Có thể thực hiện quản lý các đơn hàng online cần xử lý, cập nhật thông

-

báo trạng thái xuất hàng, thanh tốn đơn hàng cho khách hàng.
Đối với khách hàng
Có thể thêm các sản phẩm vào giỏ hàng của mình
Có thể đặt mua sản phẩm trực tuyến
Có thể theo dõi lịch sử mua hàng, trạng thái đơn hàng của bản thân


2.4 Biểu đồ use case.
Bảng 2.4: Các tác nhân và use case cơ bản của hệ thống

Actor
Use case

Quản lý cửa hàng
- Đăng nhập

Khách hàng

- Tìm kiếm
- Xem thơng tin sản phẩm
- Quản lý sản phẩm

- Mua hàng

+ Thêm

+ Thêm sản phẩm vào giỏ

+ Sửa

+ Đặt mua sản phẩm

+ Xóa

- Xem lịch sử đơn hàng

- Quản lý đơn hàng

+ Xem lịch sử mua sắm

+ Xem thông tin đơn hàng + Kiểm tra trạng thái đơn
+ Cập nhật trạng thái đơn hàng
hàng


2.4.1 Biểu đồ use case tổng quát

Hình 2.2: Biểu đồ use case tổng quát

2.4.2 Biểu đồ phân rã cho tác nhân Khách hàng

Hình 2.3: Biểu đồ phân rã use case cảu tác nhân Khách hàng


2.4.3 Biểu đồ use case cho tác nhân người quản lý

Hình 2.4: Biểu đồ use case người quản lý

2.5 Đặc tả use case.
2.5.1 Đặc tả Use Case Đăng nhập

 Tóm tắt
Người dùng là người sử dụng Use Case này được sử dụng để thực hiện chức
năng đăng nhập vào website của người dùng. Sau khi đăng nhập vào website, lúc đó
người dùng mới có thể thực hiện được các chức năng khác ứng với quyền của tài
khoản.

 Dòng sự kiện
a. Dịng sự kiện chính
(1). Người dùng chọn chức năng đăng nhập từ trang chủ của website
(2). Trang chủ sẽ mở đến trang đăng nhập
(3). Người dùng nhập tài khoản của mình
(4). Hệ thống xác nhận thơng tin đăng nhập
(5). Hiển thị thông báo
(6). Kết thúc Use Case


b. Các dòng sự kiện khác
* Dòng sự kiện thứ nhất
(1). Người dùng hủy yêu cầu đăng nhập
(2). Hệ thống bỏ qua trang đăng nhập, trở lại trang hiện tại.
(3). Kết thúc Use Case
* Dòng sự kiện thứ hai
(1). Người dùng nhập sai thông tin đăng nhập
(2). Hệ thống từ chối đăng nhập, hiển thị thông báo và trang đăng nhập.

(3). Kết thúc Use Case

 Các yêu cầu đặc biệt
Không có yêu cầu đặc biệt

 Trạng thái hệ thống khi bắt đầu thực hiện Use Case
Khơng địi hỏi bất cứ điều kiện nào trước đó

 Trạng thái hệ thống sau khi thực hiện Use Case
* Trường hợp đăng nhập thành công: hệ thống hiển thị trang chủ của hệ thống.
Sau khi đăng nhập thành cơng, Người dùng có thể thực hiện các chức năng tương ứng
với quyền đăng nhập của mình, như là thanh tốn tiền, gửi ý kiến phản hồi.
* Trường hợp đăng nhập thất bại: Hệ thống đưa ra thông báo đăng nhập không
thành công và hiển thị trang chủ.

 Điểm mở rộng
Khơng có Use Case nào có quan hệ mở rộng với Use Case này.
2.5.2 Đặc tả Use Case Đăng ký

 Tóm tắt
Người dùng là người sử dụng Use Case này để thực hiện chức năng đăng kí tài
khoản của người dùng. Sau khi đăng kí tài khoản, lúc đó người dùng mới có thể đăng
nhập vào website và thực hiện được các chức năng như là: Thanh tốn tiền, Gửi ý kiến
phản hồi…

 Dịng sự kiện
a. Dịng sự kiện chính
(1). Người dùng chọn chức năng đăng kí từ trang chủ của website
(2). Trang chủ sẽ mở đến trang đăng kí

(3). Người dùng nhập đầy đủ thông tin tài khoản và thông tin cá nhân
(4). Hệ thống xác nhận thông tin và lưu lại
(5). Hiển thị thông báo
(6). Kết thúc Use Case
b. Các dòng sự kiện khác
* Dòng sự kiện thứ nhất
(1). Người dùng hủy yêu cầu đăng kí
(2). Hệ thống bỏ qua trang đăng kí, trở lại trang hiện tại.
(3). Kết thúc Use Case
* Dòng sự kiện thứ hai
(1). Người dùng nhập sai thông tin tài khoản, cá nhân hoặc tài khoản đã
tồn tại
(2). Hệ thống thông báo lỗi và yêu cầu nhập lại
(3). Kết thúc Use Case

 Các u cầu đặc biệt
Khơng có u cầu đặc biệt

 Trạng thái hệ thống khi bắt đầu thực hiện Use Case
Không địi hỏi bất cứ điều kiện nào trước đó

 Trạng thái hệ thống sau khi thực hiện Use Case
* Trường hợp đăng kí thành cơng: hệ thống hiển thị trang đăng nhập để người

dùng có thể đăng nhập vào website và thực hiện các chức năng tương ứng với quyền
đăng nhập của mình, như là thanh tốn tiền, gửi ý kiến phản hồi.
* Trường hợp đăng kí thất bại: Hệ thống đưa ra thơng báo đăng kí khơng thành
cơng và hiển thị trang chủ.

 Điểm mở rộng
Khơng có Use Case nào có quan hệ mở rộng với Use Case này.
2.5.3 Đặc tả Use Case Tìm kiếm sản phẩm

 Tóm tắt
Người dùng là người sử dụng Use Case này để thực hiện chức năng tìm kiếm
sản phẩm. Với chức năng này, người dùng có thể tìm kiếm sản phẩm mà mình u
thích và xem sản phẩm đó có tồn tại trong website hay khơng. Ngồi ra người dùng


cịn có thể xem thơng tin chi tiết của sản phẩm kèm theo giá cả để tham khảo hoặc đặt
mua sản phẩm

 Dịng sự kiện
a. Dịng sự kiện chính
(1). Người dùng chọn chức năng tìm kiếm tài liệu từ trang chủ
(2). Người dùng nhập thơng tin tìm kiếm
(3). Hệ thống xác nhận thơng tin và thực hiện tìm kiếm
(4). Hệ thống trả về thơng tin tìm kiếm
(5). Kết thúc Use Case
b. Các dòng sự kiện khác
* Dòng sự kiện thứ nhất
(1). Người dùng hủy việc việc tìm kiếm
(2). Hệ thống bỏ qua trang tìm kiếm, trở lại trang chủ
(3). Kết thúc Use Case
* Dòng sự kiện thứ hai
(1). Hệ thống có lỗi trong q trình tìm kiếm
(2). Hệ thống thơng báo lỗi
(3). Kết thúc Use Case

 Các yêu cầu đặc biệt
Khơng có u cầu nào đặc biệt

 Trạng thái hệ thống khi bắt đầu thực hiện Use Case
Khơng địi hỏi bất cứ điều kiện nào trước đó

 Trạng thái hệ thống sau khi thực hiện Use Case
* Trường hợp thành công: hệ thống hiển thị thông tin liên quan đến sản phẩm
mà người dùng tìm kiếm
* Trường hợp thất bại: Hệ thống đưa ra thông báo lỗi và trở lại giao diện chính

 Điểm mở rộng
Khơng có Use Case nào có quan hệ mở rộng với Use Case này.
2.5.4 Đặc tả Use Case Xem thơng tin sản phẩm

 Tóm tắt