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

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 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  Tìm hiểu Angular cách cài đặt  Mô tả website chức  Cơ sở liệu website  Demo website Tìm hiểu Angular cách cài đặt  Angular gì?  Lịch sử phát triển Angular  Các tính Angular  Ưu nhược điểm  Các tính Angular  Cài đặt Angular Angular gì? Angular JavaScript framework dùng để viết giao diện web (Frontend), phát triển Google Hiện nay, Angular sử dụng nhiều công ty lớn: Forbes, General Motors, Upwork… Lịch sử phát triển Angular  Phiên Angular AngularJS năm 2009 đc mắt vào 20/10/2010 lập trình viên Misko Hevery Google  Tháng năm 2015, phiên bản angular  Tháng 3/2017, Angular đời phiên nâng cấp từ Angular  Tháng 11 năm 2017, Angular đời với mục tiêu thay đổi tốc độ kích thước nên nhanh nhỏ angular  Angular mắt vào ngày tháng năm 2018  Angular phát hành vào tháng năm 2019  Tháng 2/2020, Angular đời Các tính Angular  Module  Components  Templates  Directives  Metadatas  Data Binding  Services  Dependency Injection Ưu nhược điểm  Ưu điểm  Nhược điểm Tính Angular  Hỗ trợ TypeScript 3.4.x  IVY Rendering Engine  Hỗ trợ Bazel  Differential Loading  Thay đổi Lazy Loading Route  Thu thập phân tích liệu sử dụng  Loại bỏ @angular/http  Thay đổi ViewChild ContentChild  Hỗ trợ SVG Template  Hỗ trợ PNPM  Hỗ trợ thư viện New Builders/ Architect AP Cài đặt Angular8  Bước 1: Cài đặt NodeJS https://nodejs.org/en/download/  Bước 2: Trong CMD, dùng lệnh node –v để kiểm tra phiên 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 thông qua NodeJS package npm  Bước 5: Sau cài đặt xong dùng lệnh “ng version” để kiểm tra Tạo project Angular  Bước 1: Mở CMD 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 Ở tên project 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ở browser 10 Mô tả trang web chức  Giới thiệu website  Sơ đồ chức website  Sơ đồ use-case 11 Giới thiệu website  Cửa hàng cung cấp máy tính hãng (Dell, Asus, …) linh kiện máy tính Cửa hàng có số dịch vụ sau:  Đặt hàng: Khách hàng đặt hàng online trực tiếp cửa hàng  Giao hàng: Cửa hàng giao đến khách hàng sản phẩm công ty theo đơn đặt hàng khách hàng  Cài đặt: Cài đặt hệ điều hành phần mềm máy tính  Bảo hành: Khi máy có vấn đề phần cứng cửa hàng chuyển máy công ty Gia hạn bảo hành  Thanh toán: Khách hàng toán cho nhân viên giao hàng nhận máy trực tiếp cửa hàng 12 Sơ đồ chức website 13 Sơ đồ use-case 14 Sơ đồ use-case 15 Sơ đồ use-case 16 Cơ sở 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ở 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ở 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 ... dung  Tìm hiểu Angular cách cài đặt  Mô tả website chức  Cơ sở liệu website  Demo website Tìm hiểu Angular cách cài đặt  Angular gì?  Lịch sử phát triển Angular  Các tính Angular  Ưu nhược... 2017, Angular đời với mục tiêu thay đổi tốc độ kích thước nên nhanh nhỏ angular  Angular mắt vào ngày tháng năm 20 18  Angular phát hành vào tháng năm 2019  Tháng 2/2020, Angular đời Các tính Angular. .. triển Angular  Phiên Angular AngularJS năm 2009 đc mắt vào 20/10/2010 lập trình viên Misko Hevery Google  Tháng năm 2015, phiên bản angular  Tháng 3/2017, Angular đời phiên nâng cấp từ Angular