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

TP. HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN
TIỂU LUẬN CHUYÊN NGÀNH HTTT
TÌM HIỂU ANGULAR 8 VÀ XÂY DỰNG
WEBSITE BÁN MÁY TÍNH

GVHD: TS. Nguyễn Thành Sơn

Thành viên:
Nguyễn Hồ Hồng Đạt 14110034
Hà Hải Long 17110326

Tp. Hồ Chí Minh, tháng 10 năm 2020

Các nội dung chính

 Tìm hiểu về Angular và cách cài đặt

 Mô tả website và các chức năng
 Cơ sở dữ liệu website
 Demo website

2
Tìm hiểu về Angular và cách cài đặt

 Angular là gì?
 Lịch sử phát triển của Angular
 Các tính năng của Angular
 Ưu và nhược điểm
 Các tính năng mới trong Angular 8
 Cài đặt Angular 8

3
Angular là gì?

Angular là một JavaScript framework dùng để viết giao diện web (Front-
end), được phát triển bởi Google. Hiện nay, Angular đang được sử dụng
bởi rất nhiều các công ty lớn: Forbes, General Motors, Upwork…

4
Lịch sử phát triển của Angular

 Phiên bản đầu tiên của Angular là AngularJS được bắt đầu từ năm
2009 và đc ra mắt vào 20/10/2010 bởi lập trình viên Misko Hevery tại
Google
 Tháng 3 năm 2015, phiên bản bản angular 2
 Tháng 3/2017, Angular 4 ra đời đây là một phiên bản nâng cấp từ
Angular 2
 Tháng 11 năm 2017, Angular 5 ra đời với mục tiêu thay đổi về tốc độ và
kích thước nên nó nhanh hơn và nhỏ hơn angular 4
 Angular 6 được ra mắt vào ngày 4 tháng 5 năm 2018
 Angular 8 được phát hành vào tháng 5 năm 2019
 Tháng 2/2020, Angular 9 ra đời
5
Các tính năng của Angular

 Module
 Components
 Templates
 Directives
 Metadatas
 Data Binding
 Services
 Dependency Injection

6
Ưu và nhược điểm

 Ưu điểm
 Nhược điểm

7
Tính năng mới trong Angular 8
 Hỗ trợ TypeScript 3.4.x
 IVY Rendering Engine
 Hỗ trợ Bazel
 Differential Loading
 Thay đổi Lazy Loading trong Route
 Thu thập phân tích dữ liệu sử dụng
 Loại bỏ @angular/http
 Thay đổi ViewChild và ContentChild
 Hỗ trợ SVG Template
 Hỗ trợ PNPM
 Hỗ trợ thư viện mới New Builders/ Architect AP 8
Cài đặt Angular8

 Bước 1: Cài đặt NodeJS bản mới nhất tại

https://nodejs.org/en/download/
 Bước 2: Trong CMD, dùng lệnh node –v để kiểm tra phiên bản của
NodeJS
 Bước 3: cài đặt TypeScript dùng lệnh “npm install –g typescript”
 Bước 4: Trong CMD ta dùng lệnh “npm install –g @angular/cli” để cài
đặt Angular bản mới nhất thông qua NodeJS package npm
 Bước 5: Sau khi cài đặt xong dùng lệnh “ng version” để kiểm tra

9
Tạo 1 project Angular

 Bước 1: Mở CMD ngay tại thư mục cần tạo project mẫu.
 Bước 2: Dùng lệnh “ng new [tên_project]” để tạo project mẫu. Ở đây
tên project là Demo
 Bước 3: Dùng lệnh “ng serve –o” để chạy project mẫu vừa tạo. Tùy
chọn “-o” để chạy project mẫu tự động mở trên browser.

10
Mô tả về trang web và các chức năng

 Giới thiệu website

 Sơ đồ chức năng website
 Sơ đồ use-case

11
Giới thiệu website

 Cửa hàng cung cấp máy tính của các hãng (Dell, Asus, …) và linh kiện
máy tính. Cửa hàng có 1 số dịch vụ sau:
 Đặt hàng: Khách hàng có thể đặt hàng online hoặc trực tiếp tại cửa
hàng.
 Giao hàng: Cửa hàng giao đến khách hàng sản phẩm của công ty theo
đơn đặt hàng của khách hàng.
 Cài đặt: Cài đặt hệ điều hành và các phần mềm cơ bản của máy tính.
 Bảo hành: Khi máy có vấn đề về phần cứng thì cửa hàng chuyển máy
về công ty. Gia hạn bảo hành.
 Thanh toán: Khách hàng thanh toán cho nhân viên giao hàng khi nhận
máy hoặc trực tiếp tại cửa hàng. 12
Sơ đồ chức năng website

13
Sơ đồ use-case

14
Sơ đồ use-case

15
Sơ đồ use-case

16
Cơ sở dữ liệu website
 Abouts(AboutID, Name, Description, Image, Detail, Status, CreatedBy,
CreateDate, LastUpdatedBy, LastUpdatedate, IsDelete)
 CategoryContent(CategoryContentID, Name, ParentId, Status,
CreatedBy, CreatedDate, LastUpdatedBy, LastUpdatedate, IsDelete)
 Contacts(ContactID, Content, Status, CreatedBy, CreatedDate,
LastUpdatedBy, LastUpdatedate, IsDelete)
 Contents(ContentID, Title, Image, Description, Detail, ContenSource,
CategoryContentID, Status, CreatedBy, CreatedDate, LastUpdatedBy,
LastUpdatedate, IsDelete)
 FeedBacks(FeedBackID, Name, Phone, Email, Address, Content,
Status, CreatedDate, LastUpdatedBy, LastUpdatedate, IsDelete)
 Footers(FooterID, Name, Content, Status, CreatedBy, CreatedDate,
LastUpdatedBy, LastUpdatedate, IsDelete) 17
Cơ sở dữ liệu website

 Orders(OrderID, OrderName, OrderMobile, OrderAdress, OrderEmail,

PaymentMethod, Status, CreatedDate, LastUpdatedBy,
LastUpdatedate, IsDelete)
 OrderDetails(OrderDetailID, ProductID, OrderID, Quantity, Price,
Discount)
 Producers(ProducerID, Name, Logo, Email, Phone, Status, CreatedBy,
CreatedDate, LastUpdatedBy, LastUpdatedDate, IsDelete)
 Products( ProductID, Name, Code, Price, Discount, Image, Avaiable,
Description, Detail, Warranty, Quantity, Special, Views, CategoryID,
ProducerID, Status, CreatedBy, CreatedDate, LastUpdatedBy,
LastUpdatedDate, IsDelete)
18
Cơ sở dữ liệu website

 Slides(SlideID, Image, DisplayOrder, Status, CreatedBy, CreatedDate,

LastUpdatedBy, LastUpdatedDate, IsDelete)
 UserGroups(UserGroupID, Name, Description, CreatedDate,
LastUpdatedDate)
 Users(UserID, CodeUserName, Username, Password, Name,
Address, Email, Phone, UserGroupID, Status, CreatedDate,
LastUpdatedDate, IsDelete)

19
 THANK YOU
FOR
LISTENING TO
MY PRESENTATION
20