XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO

BỘ GIÁO DỤC VÀ ĐÀO TẠO
PHAN TRƯỜNG GIANG

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

PHAN TRƯỜNG GIANG

XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO
XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

HƯNG YÊN - 2022


BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN

PHAN TRƯỜNG GIANG

XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO
NGÀNH: CÔNG NGHỆ THÔNG TIN
CHUYÊN NGÀNH: KỸ THUẬT PHẦN MỀM

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
NGƯỜI HƯỚNG DẪN
NGUYỄN MINH QUÝ

HƯNG YÊN - 2022

NHẬN XÉT
Nhận xét của giảng viên hướng dẫn:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
GIẢNG VIÊN HƯỚNG DẪN
(Ký và ghi rõ họ tên)

3


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

LỜI CAM ĐOAN
Em xin cam đoan đồ án “Xây dựng website bán đồ da” là kết quả thực hiện
của bản thân em dưới sự hướng dẫn của thầy Nguyễn Minh Quý. Những phần sử
dụng tài liệu tham khảo trong đồ án đã được nêu rõ trong phần tài liệu tham khảo.
Các kết quả trình bày trong đồ án và chương trình xây dựng được hồn tồn là kết
quả do bản thân em thực hiện. Nếu vi phạm lời cam đoan này, em xin chịu hoàn toàn
trách nhiệm trước khoa và nhà trường.
Hưng Yên, ngày 18 tháng 4 năm 2022
SINH VIÊN
Phan Trường Giang

4


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

LỜI CẢM ƠN
Để có thể hồn thành đồ án này, lời đầu tiên em xin phép gửi lời cảm ơn tới
bộ môn Công nghệ phần mềm, Khoa Công nghệ thông tin – Trường Đại học Sư phạm
Kỹ thuật Hưng Yên đã tạo điều kiện thuận lợi cho em thực hiện đồ án môn học này.
Đặc biệt em xin chân thành cảm ơn thầy Nguyễn Minh Quý đã rất tận tình hướng dẫn,
chỉ bảo em trong suốt thời gian thực hiện đồ án vừa qua.
Em cũng xin chân thành cảm ơn tất cả các Thầy, các Cô trong Trường đã tận tình
giảng dạy, trang bị cho em những kiến thức cần thiết, quý báu để giúp em thực hiện
được đồ án này.
Mặc dù em đã có cố gắng, nhưng với trình độ cịn hạn chế, trong q trình
thực hiện đề tài khơng tránh khỏi những thiếu sót. Em hi vọng sẽ nhận được những ý
kiến nhận xét, góp ý của các Thầy giáo, Cô giáo về những kết quả triển khai trong đồ
án.

Em xin trân trọng cảm ơn!

5


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

MỤC LỤC
DANH MỤC CÁC THUẬT NGỮ

7

DANH MỤC CÁC BẢNG

8

DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ

8

CHƯƠNG 1:
1.1. Lý do chọn đề tài

11

1.2. Mục tiêu của đề tài

11

1.2.1 Mục tiêu tổng quát

11

1.2.2 Mục tiêu cụ thể

11

1.3. Giới hạn và phạm vi của đề tài

11

1.3.1 Đối tượng nghiên cứu

11

1.3.2 Phạm vi nghiên cứu

12

1.4. Nội dung thực hiện

12

1.5. Phương pháp tiếp cận

12

CHƯƠNG 2:
2.1. Quy trình phát triển phần mềm

13

2.2. Phương pháp phân tích thiết kế hướng đối tượng

13

2.3. Giới thiệu các xu hướng lập trình web mới

13

2.4. Tổng quan về Angular

20

2.5. Lập trình Web API NET CORE

24

CHƯƠNG 3:
3.1 Đặc tả yêu cầu phần mềm

25

3.1.1 Các yêu cầu chức năng

25

3.1.2 Biểu đồ lớp thực thể

30

3.1.3 Các yêu cầu phi chức năng

33

6


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

3.2 Thiết kế hệ thống

33

3.2.1 Thiết kế cơ sở dữ liệu

33

3.2.2 Thiết kế lớp đối tượng

38

3.2.3 Thiết kế giao diện

51

CHƯƠNG 4:
4.1 Triển khai các chức năng cho phân hệ người dùng

61

4.2 Triển khai các chức năng cho phân hệ quản trị nội dung (nếu có)

62

4.3 Kiểm thử và triển khai ứng dụng

62

KẾT LUẬN

64

TÀI LIỆU THAM KHẢO

66

7


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

DANH MỤC CÁC THUẬT NGỮ
STT

Từ viết tắt Cụm từ tiếng anh

Diễn giải

1

MVC

Model View Control

Mẫu thiết kế MVC

2

PWA

Progressive Web Apps

Tiến trình web ứng dụng

3

HTML

Hypertext Markup Language

Ngôn ngữ đánh dấu siêu
văn bản

4

DOM

Document Object Model

Mơ hình đối tượng tài liệu

5

CSS

Cascading Style Sheets

Ngơn ngữ tạo phong cách

8


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

DANH MỤC CÁC BẢNG
Bảng 3- 1: Các chức năng của phân hệ quản trị nội dung.........................................26
Bảng 3- 2: Bảng sản phẩm ........................................................................................34
Bảng 3- 3: Bảng danh mục sản phẩm........................................................................34
Bảng 3- 4: Bảng thương hiệu sản phẩm ....................................................................35
Bảng 3- 5: Bảng đơn hàng.........................................................................................35
Bảng 3- 6: Bảng chi tiết đơn hàng.............................................................................35
Bảng 3- 7: Bảng khách hàng .....................................................................................36
Bảng 3- 8: Bảng Admin ............................................................................................36
Bảng 3- 9: Bảng phản hồi của khách hàng ................................................................37
Bảng 3- 10: Bảng tin tức và khuyến mại..................................................................37
Bảng 3- 11: Bảng nhân viên ......................................................................................38

9

Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ
Hình 3- 1: Biểu đồ USE CASE phân hệ quản trị ......................................................26
Hình 3- 2: Biểu đồ USE CASE phân rã Quản lý khách hàng ...................................27
Hình 3- 3: Biểu đồ USE CASE phân rã Quản lý sản phẩm ......................................27
Hình 3- 4: Biểu đồ USE CASE phân rã Quản lý bán hàng .......................................28
Hình 3- 5: Biểu đồ USE CASE phân rã Quản lý tin tức ...........................................29
Hình 3- 6: Biểu đồ USE CASE phân rã Quản lý người dùng ...................................29
Hình 3- 7: Biểu đồ lớp thực thể .................................................................................32
Hình 3- 8:Biểu đồ VOPC đăng kí .............................................................................38
Hình 3- 9:Biểu đồ VOPC cho chức năng đăng nhập ................................................38
Hình 3- 10:Biểu đồ VOPC thêm người dùng ............................................................39
Hình 3- 11:Biểu đồ VOPC cập nhật người dùng ......................................................39
Hình 3- 12:Biểu đồ VOPC xóa người dùng ..............................................................40
Hình 3- 13:Biểu đồ VOPC thêm sản phẩm ...............................................................40
Hình 3- 14:Biểu đồ VOPC cập nhật sản phẩm .........................................................41
Hình 3- 15:Biểu đồ VOPC xóa sản phẩm .................................................................41
Hình 3- 16:Biểu đồ VOPC thêm tin tức dịch vụ .......................................................42
Hình 3- 17:Biểu đồ VOPC cập nhật tin tức dịch vụ .................................................42
Hình 3- 18:Biểu đồ VOPC xóa tin tức dịch vụ .........................................................43
Hình 3- 19:Biểu đồ VOPC hiển thị đơn hàng ...........................................................43
Hình 3- 20: Biểu đồ tuần tự cho chức năng đăng nhập .............................................44
Hình 3- 21: Biểu đồ tuần tự cho chức năng quản lý đặt hàng ...................................44
Hình 3- 22: Biểu đồ tuần tự cho chức năng quản lý nhập hàng ................................45
Hình 3- 23:Biểu đồ tuần tự chức năng bán hàng ......................................................45
Hình 3- 24: Biểu đồ tuần tự cho chức năng xem sản phẩm ......................................46
Hình 3- 25: Biểu đồ tuần tự cho chức năng tìm kiếm sản phẩm ...............................46
Hình 3- 26: Biểu đồ tuần tự cho chức năng quản lý giỏ hàng ..................................46

Hình 3- 27:Biểu đồ tuần tự chức năng thêm người dùng ..........................................47
Hình 3- 28:Biểu đồ tuần tự chức năng cập nhật thông tin người dùng .....................47

10


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

Hình 3- 29:Biểu đồ tuần tự chức năng xóa thơng tin người dùng ............................47
Hình 3- 30:Biểu đồ tuần tự chức năng thêm tin tức ..................................................48
Hình 3- 31:Biểu đồ tuần tự chức năng cập nhật tin tức ............................................48
Hình 3- 32:Biểu đồ tuần tự chức năng xóa tin tức ....................................................48
Hình 3- 33:Biểu đồ lớp chi tiết chức năng đăng kí ...................................................49
Hình 3- 34:Biểu đồ lớp chi tiết chức năng đăng nhập ..............................................49
Hình 3- 35:Biểu đồ lớp chi tiết chức năng thêm người dùng....................................50
Hình 3- 36:Biểu đồ lớp chi tiết chức năng cập nhật người dùng ..............................50
Hình 3- 37:Biểu đồ lớp chi tiết chức năng xóa người dùng ......................................51
Hình 3- 38:Giao diện trang chủ .................................................................................52
Hình 3- 39:Giao diện giới thiệu ................................................................................53
Hình 3- 40:Giao diện tin tức .....................................................................................54
Hình 3- 41:Giao diện trang chi tiết sản phẩm ...........................................................55
Hình 3- 42:Giao diện trang giỏ hàng.........................................................................56
Hình 3- 43:Giao diện trang thanh tốn......................................................................57
Hình 3- 44:Giao diện đăng nhập Admin ...................................................................58
Hình 3- 45:Giao diện trang quản lí sản phẩm ...........................................................58
Hình 3- 46:Giao diện trang quản lí danh mục ...........................................................59
Hình 3- 47:Giao diện trang quản lí hóa đơn .............................................................59
Hình 3- 48:Giao diện trang quản lí tin tức ................................................................60

11

Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

CHƯƠNG 1:

TỔNG QUAN VỀ ĐỀ TÀI

1.1. Lý do chọn đề tài
Có thể nói rằng ngành Cơng nghệ thơng tin đang phát triển rất mạnh mẽ. Công nghệ
thông tin đã và đang thay đổi thế giới một cách nhanh chóng và từng bước kéo nền
tri thức của nhân loại xích lại gần nhau hơn. Đó là nhờ việc phát triển hệ thống website
trên tồn thế giới. Ngày nay, Website đã đóng một vai trò quan trọng đối với con
người chúng ta từ giải trí cho đến quảng cáo, thương mại, quản lý…Website (thương
mại điện tử) sẽ dần dần thay thế những phương thức kinh doanh cũ trong các doanh
nghiệp bởi tính ưu việt mà Website mang lại như: nhanh hơn, rẽ hơn, tiện dụng hơn,
hiệu quả hơn và không bị giới hạn không gian và thời gian.
Với tầm quan trọng của việc ứng dụng Khoa học Công nghệ thông tin hiện nay, mỗi
người chúng ta cần trang bị cho mình một kiến thức nền tảng về Website. Xuất phát
từ nhu cầu cuộc sống trong tình hình dịch COVID-19 như hiện nên em quyết định
“Xây dựng Website bán đồ da ECCO “ để tạo ra hệ thống quản lý bán hàng có tính
thiết thực, ứng dụng vào thực tế và hỗ trợ người có nhu cầu mua hàng mà khơng thể
ra ngồi vì tình hình dịch COVID-19 phức tạp như ngày nay.
1.2. Mục tiêu của đề tài
1.2.1 Mục tiêu tổng quát
Việc xây dựng website để giúp kinh doanh,quảng bá công ty, thực thiện các chiến
lược Maketing hiệu quả hơn .
1.2.2 Mục tiêu cụ thể
-

Phía trang người dùng: Xây dựng được 3 chức năng chính: Xem sẩn phẩm,

Thêm vào giỏ hàng và Thanh tốn
-

Phía trang quản trị: Xây dựng được các chức năng: Quản lý sản phẩm, Quản

lý đơn hàng, Quản lý danh mục và Quản lý tin tức
1.3. Giới hạn và phạm vi của đề tài
1.3.1 Đối tượng nghiên cứu
-

Đối tượng nghiên cứu: Hoạt động bán hàng, quản lý mặt hàng online.

12


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

-

Khách thể nghiên cứu: Công việc bán hàng của các cửa hàng đồ da, công việc

quản lý của chủ cửa hàng, nhân viên bán hàng, kế toán, nhân viên kho.
1.3.2 Phạm vi nghiên cứu
-

Phạm vi không gian: Cửa hàng đồ da TOMA Fashion ( TP Hải Dương )

-

Phạm vi thời gian: 2021

-

Ý nghĩa khoa học và thực tiễn của đề tài : có thể áp dụng những cơng nghệ

phù hợp vào dự án , đem lại một cái nhìn thực tế cho người triển khai và thực hiện dự
án.
1.4. Nội dung thực hiện
-

Xây dựng trang chủ của công ty, các trang mặt hàng theo loại mặt hàng, theo

giá mặt hàng.
-

Xây dựng trang chi tiết mặt hàng và các mặt hàng liên quan.

-

Xây dựng trang giỏ hàng ,nơi hiển thị mặt hàng mà khách hàng lựa chọn đặt

mua. Khách hàng có thể xóa mặt hàng khi khơng cần thiết ra khỏi giỏ hàng.
-

Xây dựng trang xác nhận thông tin khách hàng.

-

Xây dựng trang quản lý sản phầm, nơi ban điều hành cơng ty có thể thêm, sửa,

xóa mặt hàng, quản lý hóa đơn bán, quản lý doanh thu theo tháng, quý, năm.
1.5. Phương pháp tiếp cận
- Tìm hiểu quy trình hoạt động của hệ thống cũ thông qua thực tế khảo sát tại các cửa
hàng, siêu thị như Điện Máy Xanh, Media Mart, Thegioididong…
- Nghiên cứu các công cụ xây dựng hệ thống như: Microsoft Visual Studio 2019,
Microsoft Visual Studio Code, SQL Server 2018 Management Studio, Google
Chrome,…
- Tiến hành xây dựng hệ thống.
- Demo hệ thống trên máy cục bộ (LAN).

13


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

CHƯƠNG 2:

CƠ SỞ LÝ THUYẾT

2.1. Quy trình phát triển phần mềm
-

Đặc tả phần mềm: Định nghĩa các chức năng, điều kiện hoạt động của phần

mềm.
-

Phát triển phần mềm: Là quá trình xây dựng các đặc tả.

Đánh giá phần mềm: Phần mềm phải được đánh giá để chắc chắn rằng ít nhất
có thể thực hiện những gì mà tài liệu đặc tả yêu cầu.

-

Xây dựng phần mềm: Đây là quá trình hoàn thiện các chức năng và giao diện
để ngày càng hoàn thiện phần mềm cũng như các yêu cầu đưa ra từ phía khách hàng.

-

2.2. Phương pháp phân tích thiết kế hướng đối tượng
-

Giai đoạn khảo sát:

UML đưa ra khái niệm Use Case để nắm bắt các yêu cầu của khách hàng (người sử
dụng). UML sử dụng biểu đồ Use case (Use Case Diagram) để nêu bật mối quan hệ
cũng như sự giao tiếp với hệ thống. Qua phương pháp mơ hình hóa Use case, các tác
nhân (Actor) bên ngồi quan tâm đến hệ thống sẽ được mơ hình hóa song song với
chức năng mà họ địi hỏi từ phía hệ thống. Các tác nhân và các Use case được mơ
hình hóa cùng các mối quan hệ và được miêu tả trong biểu đồ Use case của UML.
+
Biểu đồ Use case: biểu diễn sơ đồ chức năng của hệ thống. Từ tập yêu cầu của
hệ thống, biểu đồ use case sẽ phải chỉ ra hệ thống cần thực hiện điều gì để thỏa mãn
các yêu cầu của người dùng hệ thống đó. Đi kèm với biểu đồ use case là các kịch bản.
-

Giai đoạn phân tích:

Sau khi nhận biết được các lớp thành tầng của mơ hình và mối quan hệ giữa chúng
với nhau, các lớp cùng mối quan hệ được miêu tả bằng biểu đồ lớp. Trong giai đoạn
phân tích chỉ duy nhất các lớp sát với thực tế tồn tại, được mơ hình hóa. Giai đoạn
phân tích có các biểu đồ:
+
Biểu đồ lớp: chỉ ra các lớp đối tượng trong hệ thống, các thuộc tính và phương
thức của từng lớp và các mối quan hệ giữa những lớp đó.
+
Biểu đồ lớp thực thể: là các lớp thực thể được xác định thơng qua chích gọn
danh từ thu được và loại bỏ các danh từ trùng lặp và xác định các mối quan hệ giữa
các lớp.
+
Biểu đồ lớp phân tích: căn cứ vào biểu đồ Use Case và các kịch bản Use Case
đã xây dựng, chúng ta sẽ xác định các lớp dựa trên kiến trúc phần mềm đã chọn. Khi
phân tích mỗi một Use Case, chúng ta xác định được các lớp tham gia thực hiện Use
Case đó. Mơ hình lớp này được gọi là mơ hình VOPC.

14


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

+
Biểu đồ trạng thái: tương ứng với mỗi lớp sẽ chỉ ra các trạng thái mà đối tượng
của lớp đó có thể có và sự chuyển tiếp giữa những trạng thái mà đối tượng của lớp đó
có thể có và sự chuyển tiếp giữa những trạng thái đó.
Giai đoạn thiết kế:
Trong giai đoạn này, kết quả của giai đoạn phân tích sẽ được mở rộng thành một giải
pháp kỹ thuật. Các lớp mới sẽ được bổ sung để tạo thành một hạ tầng cơ sở kỹ thuật:
Giao diện người dùng, các chức năng để lưu trữ các đối tượng trong ngân hàng dữ

liệu, giao tiếp với các hệ thống khác, giao diện với các thiết bị ngoại vi và các máy
móc khác trong hệ thống,.... Các lớp thuộc phạm vi vấn đề có từ giai đoạn phân tích
sẽ được "nhúng" vào hạ tầng cơ sở kỹ thuật này, tạo ra khả năng thay đổi trong cả hai
phương diện: Phạm vi vấn đề và hạ tầng cơ sở. Giai đoạn thiết kế sẽ đưa ra kết quả
là bản đặc tả chi tiết cho giai đoạn xây dựng hệ thống.
+
Các biểu đồ tương tác biểu diễn mối liên hệ giữa các đối tượng trong hệ thống
và giữa các đối tượng với các tác nhân biên ngồi. Có hai loại biểu đồ tương tác:
●
Biểu đồ tuần tự: Biểu diễn mối quan hệ giưa các đối tượng và giữa các đối
tượng và tác nhân theo thứ tự thời gian.
●
Biểu đồ cộng tác: Biểu diễn mối quan hệ giữa các đối tượng và giữa các đối
tượng và các tác nhân nhưng nhấn mạnh đến vai trò của các đối tượng trong tương
tác.
+
Biểu đồ hoạt động: biểu diễn các hoạt động và sự đồng bộ, chuyển tiếp các
hoạt động, thường được sử dụng để biểu diễn các phương thức phức tạp của các lớp.
+
Biểu đồ thành phần: định nghĩa các thành phần của hệ thống và mối liên hệ
giữa các thành phần đó.
+
Biểu đồ triển khai: mô tả hệ thống sẽ được triển khai như thế nào, thành phần
nào được cài đặt ở đâu, các liên kết vật lý hoặc giao thức truyền thông nào được sử
dụng.
Giai đoạn xây dựng:
Trong giai đoạn xây dựng (giai đoạn lập trình), các lớp của giai đoạn thiết kế sẽ được
biến thành những dịng code cụ thể trong một ngơn ngữ lập trình hướng đối tượng cụ
thể.
-

Thử nghiệm:

Một hệ thống phần mềm thường được thử nghiệm qua nhiều giai đoạn và với nhiều
nhóm thử nghiệm khác nhau.
2.3. Giới thiệu các xu hướng lập trình web mới
Sự phát triển của cơng nghệ ln nằm ở mức thay đổi chóng mặt. Chính sự phát triển
khơng ngừng ấy địi hỏi phải có cái mới hình thành, tiên tiến hơn và thay thế cái cũ.
Trong lĩnh vực cơng nghệ thơng tin, các lập trình viên luôn phải cập nhật kiến thức
không ngừng để bắt kịp xu hướng để vừa hiện đại vừa tránh bị đào thải. “xu hướng”

15


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

là cụm từ luôn được đề cập sau mỗi lần chuyển đổi hoặc có sự ra đời mang tính
chuyển biến của một ngơn ngữ hay cơng nghệ nào đó
Thập niên 202X có thể là thập kỷ đổi mới đối với các lập trình viên.
Những biến động trong năm 2020 như là một hồi chuông cảnh tỉnh, báo hiệu cần một
thay đổi mạnh mẽ hơn của các ngành nghề, trong đó, nhân tố dẫn dắt là công nghệ
thông tin / lập trình.
Xu hướng #1: Voice search - Tìm kiếm bằng giọng nói
-

Tương lai phát triển web dường như sẽ nhiều tiếng nói hơn và nó khơng chỉ
nói về các trợ lý gia đình đa chức năng ảo như Siri, Google Home hay Amazon
Alexa.

Xu hướng #2: WebAssembly

-

Khi xây dựng một ứng dụng web, hiệu suất thường bị tổn hại. Các giới hạn
JavaScript làm cho các phép tính nặng bị chậm và điều đó ảnh hưởng đáng kể
đến trải nghiệm người dùng.

-

Đây là lý do tại sao hầu hết các trò chơi phổ biến và các ứng dụng mạnh mẽ
chỉ có sẵn dưới dạng một ứng dụng máy tính để bàn gốc.

-

WebAssembly ra đời để thay đổi điều đó - nhằm mục đích cho hiệu suất giữa
các ứng dụng web là như nhau trên mọi trình duyệt và nền tảng.
Với WebAssembly, mã trong bất kỳ ngơn ngữ lập trình nào cũng có thể được
biên dịch thành mã byte chạy trong trình duyệt.

Xu hướng #3: Cá nhân hóa nội dung thơng qua học máy
-

Trí tuệ nhân tạo, bao gồm cả học máy, ảnh hưởng đến các hoạt động hàng ngày
của chúng ta trên internet mà chúng ta thậm chí khơng nhận ra.

-

Đây là điểm chính của ML - cung cấp trải nghiệm được cải thiện nguyên bản.
Học máy là khả năng của phần mềm để cải thiện hiệu suất mà không cần đầu
vào trực tiếp từ các nhà phát triển.

-

Về cơ bản, phần mềm phân tích dữ liệu đến, phát hiện các mẫu, đưa ra quyết
định và cải thiện cơng việc của nó

16


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

Xu hướng #4: Data security - Bảo mật dữ liệu
-

Càng nhiều dữ liệu mà một ứng dụng web xử lý, nó càng hấp dẫn đối với tội
phạm mạng.

-

Cách làm của chúng có thể thay đổi, nhưng ln có mục đích làm hỏng dịch
vụ của bạn và đánh cắp dữ liệu của người dùng hoặc thông tin nội bộ của
công ty.

-

Điều này có thể gây tổn hại lớn đến danh tiếng của bạn và khiến bạn tốn kém
rất nhiều.

-

Các mối đe dọa và hoạt động độc hại dễ dàng phát hiện hơn với phần mềm

bảo mật do AI cung cấp.

-

Khi sự đa dạng của phần mềm độc hại phát triển, nó trở nên mạnh hơn và
nguy hiểm hơn.

-

Vì vậy, các cơng ty lớn hiện đào tạo các hệ thống AI của họ để phân tích các
mẫu hành vi trong mạng và phản ứng với mọi hoạt động đáng ngờ ngay lập
tức.

Xu hướng #5: PWA và AMP
-

Đây có thể khơng cịn là xu hướng. Nó gần như là một tiêu chuẩn bởi vì...
Google ưu tiên các ứng dụng web tải nhanh trên thiết bị di động là một điểm
cộng cho xếp hạng.

-

Đây là lý do tại sao nên xem xét triển khai PWA (Progressive Web Apps)
hoặc AMP, đây là những công nghệ độc đáo giúp giảm thời gian tải trang
web.

-

Người dùng ngày càng không kiên nhẫn. Bạn chậm đồng nghĩa với việc tiền
của khách hàng sẽ rơi vào túi đối thủ.

Xu hướng #6: Trí tuệ nhân tạo và Bots
-

Tương lai của phát triển web sẽ như thế nào? Điều đó được nhiều người tin
rằng các con bot năm tới sẽ trở nên tự học hơn và sẽ dễ dàng phù hợp với
nhu cầu và hành vi của người dùng cụ thể.

17


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

-

Điều đó có nghĩa là các bot hoạt động 24/7 sẽ có thể thay thế các nhà quản lý
hỗ trợ và tiết kiệm chi phí cho nhiều cơng ty.

-

Sự gia tăng của Bot cũng sẽ ảnh hưởng đến xu hướng thiết kế web, đặc biệt
là UX.

-

Sự tiến bộ đáng kể của AI và công nghệ máy học dẫn đến nhu cầu thiết kế
trợ lý ảo, không chỉ về trải nghiệm hình ảnh, hoặc thuật tốn phục vụ sản
phẩm, mà cịn về thiết kế âm thanh hữu ích.

Xu hướng #7: Motion UI

-

Thiết kế web Motion UI là một xu hướng trong thế giới kỹ thuật số.

-

Từ năm này sang năm khác, các công ty khởi nghiệp luôn chú ý nhiều hơn đến
trải nghiệm người dùng và đầu tư ít tài nguyên hơn vào tính thẩm mỹ

-

Tuy nhiên, các trang web và ứng dụng đẹp mắt có nhiều cơ hội được người
dùng tiềm năng chú ý và trở nên viral nhanh chóng.

-

Trong đó, thiết kế Motion UI khơng phải là câu hỏi của kỹ thuật, mà là một
trong những chiến lược tiếp thị.

Xu hướng #8: Automation Testing - Kiểm tra tự động
-

Hầu hết các công nghệ web mới nổi đều nhằm mục đích làm cho q trình phát
triển rẻ hơn và cung cấp cho người dùng trải nghiệm tốt nhất.

-

Tự động hóa các giai đoạn phát triển là công cụ để đạt được mục tiêu đầu tiên.

-

Phương pháp học máy và tiếp cận AI cho phép chúng tôi xây dựng các dự án
phức tạp với một nhóm nhỏ hoặc có ít chun gia phát triển hơn, trong khi tự
động hóa thử nghiệm sản phẩm giúp chúng ta kiểm tra xem sản phẩm của mình
đã sẵn sàng để triển khai hay chưa.

Xu hướng #9: JavaScript Frameworks
-

Các JavaScript Framework đang trong giai đoạn chuẩn hoá và tạo ra một hệ
sinh thuận tiện, dễ dàng sử dụng.

-

Từ 2020, các JavaScript Framework đã phát triển mạnh mẽ liên quan đến
các khía cạnh UX, UI, thử nghiệm và quản lý sản phẩm.

18


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

-

Về mặt kỹ thuật, các JavaScript Framework vẫn là Framework ứng dụng
được tạo bằng ngơn ngữ lập trình JavaScript và dựa trên tích hợp các thư
viện (cả trực quan và chức năng).

-

Xu hướng web này có rất nhiều lợi ích. Cung cấp khả năng phản hồi ngay lập
tức cho người dùng mà không cần tải lại trang, hiệu quả cao và hiệu suất
nhanh, đơn giản mã hóa chỉ là một vài trong số đó.

-

Ngồi xu hướng JavaScript, TypeScript nổi lên mạnh mẽ như một ứng cử
viên thay thế cho JavaScript, nó có những tiến bộ, cải tiến mà JavaScript
khơng thể thay đổi được.

Xu hướng #10: Ứng dụng và kiến trúc không máy chủ
-

Công nghệ không máy chủ là kết quả của việc tìm kiếm khả năng tránh quá
tải hệ thống, mất dữ liệu hoặc phát triển tốn kém.

-

Được hỗ trợ bởi các nhà cung cấp lớn như AWS, các thuật tốn khơng có
máy chủ gần đây đã được xây dựng như một mơ hình thực thi điện tốn đám
mây.

-

Theo khái niệm này, các máy chủ thơng thường có thể được thay thế bằng
các ‘’Đám mây’’ quản lý mức tiêu thụ tài nguyên máy.

-

Xu hướng web hiện tại liên quan đến kiến trúc ứng dụng khơng có máy chủ

giúp giảm ngân sách phát triển và hỗ trợ liên tục, củng cố các ứng dụng có
tiềm năng linh hoạt và giữ cho môi trường Internet bền vững hơn.

Xu hướng #11: Áp dụng Công nghệ Blockchain
-

Blockchain không phải là công nghệ phát triển web mới nhất. Khái niệm về
chúng xuất hiện vào năm 2004 và nổi như cồn ở thời điểm năm 2017, thị
trường giao dịch tiền điện tử (dựa trên công nghệ blockchain) được khai thác
với các khoản đầu tư lớn chưa từng có.

-

Chúng ta nên mong đợi điều gì vào Blockchain trong năm nay?

-

Rõ ràng nhiều người biết rằng, các cơ quan chính quyền sẽ kiềm chế chặt chẽ
nó bởi nó ảnh hưởng đến vấn đề cốt lõi của nhà nước - Tiền tệ.

19


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

-

Nhưng việc sử dụng Blockchain đang trở nên tích cực đáng kể trong thập kỷ
qua và các hệ thống thanh toán lớn đã quyết định chấp nhận Bitcoin và các
loại tiền tệ khác.

Xu hướng #12: Internet of Things (IoT) – Internet vạn vật
-

Internet of Things (hay IoT) là một mạng lưới các thiết bị được kết nối với
nhau, không yêu cầu hoặc gần như khơng có hành động nào từ phía người
dùng để thực hiện các hoạt động và thực hiện các kết quả hữu ích.

-

Một số xu hướng phát triển web sẽ được xảy ra bởi sự phát triển IoT.

-

IoT rất có tiềm năng tồn tại và phát triển - là khả năng giúp cuộc sống hàng
ngày của con người trở nên dễ dàng hoặc thuận tiện hơn.

-

Ngày càng có nhiều thiết bị thơng minh hơn, với tự động hóa thanh tốn, nhà
thơng minh và cơng nghệ thành phố thông minh, phát triển môi trường y tế
điện tử, chúng ta thường có thể trở nên ít q tải hơn với các nhiệm vụ thông
thường và đầu tư nguồn lực nhận thức của chúng ta vào những công việc
phức tạp hơn.

-

Khi đó, với vị trí là một thành phần khơng thể thiếu của không gian internet,
web và ứng dụng sẽ cần phát triển để đáp ứng cho lĩnh vực mới này.

Xu hướng #13: GPDR and Cybersecurity
-

Vấn đề là chúng ta tự động hóa ngày càng nhiều hoạt động bằng các thiết bị
kết nối Internet.

-

Và mỗi khi chúng ta tiến hành các hoạt động như thanh toán trực tuyến, chia
sẻ dữ liệu cá nhân trong khi mua vé hoặc trả thuế hoặc thậm chí nhà thơng
minh và hệ thống đa phương tiện, sẽ ln có nguy cơ bị đánh cắp dữ liệu.

-

Sự phát triển của chính sách quyền riêng tư như GPDR ở Châu Âu (Quy
định bảo vệ dữ liệu chung) cũng là mới nhất trong phát triển web.

-

Tài liệu này có tư cách luật pháp quốc tế và phạt tiền đối với chủ sở hữu sản
phẩm Internet nếu họ thu thập dữ liệu người dùng theo cách không bảo mật,
cũng như bán hoặc lưu trữ thông tin người dùng mà không cần xin phép
người dùng.

20


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

-

Từ năm 2020, các quy định địa phương tại Hoa Kỳ như Đạo luật Quyền
riêng tư của Người tiêu dùng California (CCPA) cũng sẽ được áp dụng.

-

Và Luật An Ninh Mạng tại Việt Nam cũng đã chính thức được áp dụng. Bạn
sẽ cần phải tuân thủ nó.

Xu hướng #14: Ứng dụng một trang (Sigle Page Application - SPA)
-

Ngày nay, với các tiêu chuẩn Internet tốc độ cao, không cần phải bảo thủ
trong cách tiếp cận mà mọi hành động được thực hiện trên trang như nhấp
chuột vào các nút khác nhau dẫn đến một trang web được tải xuống từ máy
chủ.

-

Các SPA có nhiều cơ hội hơn để thu hút sự chú ý của người dùng vì họ
dường như hoạt động nhanh - Các SPA cung cấp cho người dùng phản hồi
tức thì (so với các trang web thơng thường có màn hình trắng trước khi trang
sẽ được tải xuống hồn tồn).

-

Các trang web SPA cũng tiêu thụ ít hơn tài ngun hơn, có thể hoạt động mà
khơng cần code phía máy chủ.

2.4. Tổng quan về Angular

Angular là gì?
- Angular là một JavaScript framework dùng để viết giao diện web (Front-end). Đây
là một sản phẩm được viết bởi Misko Hevery và một người bạn của anh là Adam
Abrons. Sau đó, chính thức “ra mắt” vào 20/10/2010. Hiện tại, sản phẩm này đang
được Google duy trì.
- Hiểu đơn giản, Angular là một khung làm việc của JavaScript MVC phía máy khách
(client) nhằm phát triển ứng dụng web động.
AngularJS là từ dùng để nói về Angular 1 (ra đời năm 2009), được viết bằng
JavaScript. Angular là từ gọi chung cho Angular 2 trở lên (ra đời năm 2016), được
viết bằng TypeScript – phiên bản nâng cao của JavaScript.
- Angular được thay đổi rất nhiều từ AngularJS. Angular đã thiết kế lại từ đầu nên có
nhiều khái niệm đã thay đổi từ AngularJS. Kiến trúc của Angular và AngularJS hoàn
toàn khác nhau.

21


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

- Hiện tại AngularJS cũng khơng cịn được Google hỗ trợ nâng cấp nữa.
Các phiên bản của Angular
●

4/09/2016: Angular 2 – Initial Version of Angular

●

23/03/2017: Angular 4 – Version 4: giảm thiểu code được tạo ra, giảm xuống

60% kích thước tệp được đóng gói, đẩy nhanh q trình phát triển ứng dụng.

●

11/11/2017: Angular 5 – Version 5: sử dụng HTTPClient thay HTTP, cơng cụ

build optimizer được tích hợp sẵn vào trong CLI, …
●

03/05/2018: Angular 6 – Version 6: Cập nhật CLI, command line interface,

Multiple Validators, …
●

18/10/2018: Angular 7 – Version 7: ScrollingModule scroll load dữ liệu, dùng

Drag and Drop, cập nhật RxJS 6.3, …
●

25/08/2019: Angular 8 – Version 8: CLI workflow improvements, Dynamic

imports for lazy routes ….
●

06/02/2020: Angular 9.0: di chuyển tất cả các ứng dụng để sử dụng trình biên

dịch Ivy và thời gian chạy theo mặc định, dùng TypeScript 3.6 và 3.7
●

25/03/2020: Angular 9.1 08/04/2020: Angular 10 – Beta Version

- Angular là một bộ Javascript Framework rất mạnh. Lập trình viên (developer)

thường sử dụng Angular để xây dựng project Single Page Application (SPA).
- Angular hoạt động dựa trên các thuộc tính mở rộng HTML (các atributes theo quy
tắc của Angular). Framework mã nguồn mở hồn tồn miễn phí này được hàng ngàn
developers trên thế giới ưa chuộng và sử dụng.
- Để sử dụng tốt Angular, người dùng cần nắm các khái niệm cơ bản như: HTML,
CSS, JavaScript, TypeScript, Document Object Model (DOM).
Sử dụng Angular, người dùng được gì?
- Ứng dụng được giảm tối đa kích thước và tăng tối đa hiệu suất.
- HTML linh hoạt hơn.
- Code HTML mạnh mẽ hơn với những đặc trưng như IF , FOR, LOCAL
VARIABLES, …
- Dễ dàng hiển thị các field từ data model của website và theo dõi những thay đổi,
cập nhật lại từ người dùng nhờ binding data.

22


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

- Xây dựng và tái sử dụng nội dung nhờ vào những khối module độc lập.
- Nhanh chóng giải quyết các bài toán logic nhờ back- end service hỗ trợ giao tiếp.
* Những tính năng nổi bật của Angular
Cơ chế Two-Way Data Binding
- Đây là tính năng được developer đánh giá là ấn tượng nhất của Angular. Data
binding tự động, tức thời. Bất cứ thay đổi nào trên view, dù là nhỏ nhất, cũng đều
được tự động cập nhật thuộc tính “model” vào component class và ngược lại.
- Thêm vào đó, Angular cũng hỗ trợ property binding. Developer có thể ràng buộc
thuộc tính HTML với thuộc tính của component class, data sẽ tự động xuất hiện bên
trong view thông qua việc điều khiển DOM.
Hỗ trợ cơ chế Routing (điều hướng) mạnh mẽ

- Angular có cơ chế routing tải trang một cách bất đồng bộ trên cùng một trang cho
phép chúng ta tạo SPA.
- Đa số các ứng dụng Web không chỉ có 1 view hay một page duy nhất, mà sẽ cung
cấp nhiều view khác nhau tương ứng với với các chức năng chính. Ví dụ: các trang
liên hệ, giới thiệu chung, nội dung, báo giá, … trong một website. Hiển thị đúng view
vào đúng thời điểm là mục đích của điều hướng (routing).
- Angular giúp định nghĩa các đường dẫn (route) cho mỗi page view của ứng dụng.
Developer sẽ kích hoạt route dựa trên tương tác của người dùng (user).
Mở rộng HTML
- Nhờ Angular, developer có thể sử dụng cấu trúc lập trình giống như điều kiện IF,
vịng lặp FOR, những biến địa phương “local variables”, …để render các control.
Thiết kế module hoá
- Angular tiếp cận theo hướng thiết kế module hoá. Người dùng phải tạo các Angular
Module để tổ chức tốt hơn và quản lý source code.
Hỗ trợ làm việc với hệ thống Backend
- Hỗ trợ làm việc với backend server, thực thi bất cứ logic nào và nhận dữ liệu về –
Angular được xây dựng như thế!

23


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

Cộng đồng hỗ trợ rộng lớn
-Nhiều tài liệu phong phú, đa dạng từ cơ bản đến nâng cao các API của Angular,
cũng như có hẳn một Tutorial Basic được xây dựng nên bởi Angular team.
- Mã nguồn mở.
- Được Google hỗ trợ, liên tục cập nhật
* Ưu điểm của AngularJavaScript
Ràng buộc dữ liệu hai chiều

- Vì kiến trúc của khung làm việc Angular ràng buộc JavaScript và HTML, code cho
cả hai đã được đồng bộ hóa. Do đó, framework giúp các nhà phát triển tiết kiệm được
rất nhiều thời gian.
Chỉ thị
- Framework hỗ trợ mở rộng chức năng của file HTML bằng các chỉ thị. Nhà phát
triển thêm tiền tố ng- vào các thuộc tính HTML để tiến hành kích hoạt các chỉ thị.
Cấu trúc Code
- Angular JavaScript cung cấp cho bạn template; cho phép bạn tạo ra các ứng dụng
với code ngắn gọn. Không chỉ tiết kiệm thời gian mà còn giúp bạn dễ dàng sửa đổi
hoặc sửa chữa các ứng dụng của mình hơn.
Thử nghiệm
- Framework hỗ trợ thử nghiệm đơn vị và tích hợp.
Tương lai tươi sáng
- Tương lai của Angular rất rực rỡ vì chức năng nổi bật cũng như sự phổ biến của nó.
Cơ sở người dùng sẽ tiếp tục phát triển và vô số tài liệu chuyên sâu sẽ được cập nhật
liên tục.
Tương thích với thiết bị di động và máy tính để bàn
- Angular JavaScript có thể chạy trên hầu hết các trình duyệt web. Khơng chỉ trên
máy tính để bàn, phần mềm này còn hoạt động trên cả thiết bị di động.

24


Đồ án tốt nghiệp: Xây dựng website quản lý đồ da

2.5. Lập trình Web API NET CORE
ASP.NET Core là một framework web mã nguồn mở miễn phí và được phát triển
bởi Microsoft. Framework này là một bản viết lại hoàn chỉnh hợp nhất ASP.NET
MVC và ASP.NET Web API thành một mơ hình lập trình duy nhất .
Một số đặc trưng:

●

Trải nghiệm nhà phát triển không biên dịch (nghĩa là quá trình biên dịch diễn

ra liên tục, do đó nhà phát triển không phải gọi lệnh biên dịch)
●

Khung mô-đun được phân phối dưới dạng các gói NuGet

●

Thời gian chạy được tối ưu hóa cho đám mây (được tối ưu hóa cho Internet)

●

Có thể chạy trong IIS hoặc độc lập

●

Hệ thống cấu hình dựa trên mơi trường sẵn sàng cho đám mây

●

Đường dẫn yêu cầu HTTP mô-đun và trọng lượng nhẹ

●

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.

25