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

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...  Lịch sử phát triển của Angular  Các tính năng củ

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

1

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

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

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

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

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

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

Sơ đồ use-case

14

Sơ đồ use-case

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,

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)

THANK YOU

FOR LISTENING TO

MY PRESENTATION