Source code đồ án thiết kế website bán pizza Angular (Full source code + Báo cáo chi tiết)

Source code giao diện website bán pizza gồm các trang: Trang chủ: banner, hướng dẫn mua hàng, sản phẩm bán chạy Trang thực đơn: danh sách các loại pizza trưng bày Trang chi tiết sản phẩm: thông tin chi tiết sản phẩm khi người dùng click Đặt ngay vào loại sản phẩm bất kì, form đặt hàng Trang liên hệ: form liên hệ hỗ trợ Trang giới thiệu: thông tin cửa hàng, vị trí trên gg map Chi tiết báo cáo (*pdf) gồm: Lời cảm ơn, mở đầu Tổng quan đề tài, lí do, mục tiêu chọn đề tài, môi trường phát triển Phân tích thiết kế hệ thống, sơ đồ usecase, sơ đồ hoạt động Thiết kế và xây dựng trang web, thiết kế chức năng và xây dựng giao diện Hướng dẫn sử dụng, thực nghiệm triển khai Kết luận *** Đồ án phù hợp cho các bạn mới bắt đầu tìm hiểu về thiết kế frontend bằng Angular ***

LỜI CẢM ƠN

Em xin chân thành cảm ơn sâu sắc đến với quý thầy cô đã giúp đỡ em thực hiện

đồ án lần này Đặc biệt là Thầy Phạm Văn Đăng đã giúp đỡ, hướng dẫn tận tình, chỉ bảo

em trong suốt thời gian học tập và thực hiện đồ án

Đồng thời em cũng xin trân trọng gửi lời cảm ơn, tình cảm quý báu mà các thầy cô

trong khoa CNTT đã truyền đạt kĩ năng, kinh nghiệm cho em, và em xin gửi lời cảm ơn

đến Trường ĐH Nguyễn Tất Thành đã tạo điều kiện để em được học tập trong môi trường

tuyệt vời như này

Và cuối cùng em cũng xin được gửi lời cảm ơn đến với gia đình đã luôn luôn động

viên, ủng hộ, những người bạn đã gắn bó, chia sẻ rất nhiều những kinh nghiệm, kiến thức

để đồ án lần này được thực hiện một cách hoàn chỉnh

Tuy nhiên thời gian và lượng kiến thức có hạn nên em không thể phát huy hết khả

năng, ý tưởng vào đồ án lần này Trong quá trình thực hiện, không thể tránh những sai sót,

kính mong nhận được sự đóng góp và cảm thông từ quý thầy cô

Em xin chân thành cảm ơn!

Sinh viên thực hiện

Khoa Nguyễn Đăng Khoa

LỜI MỞ ĐẦU

Trong thời đại ngày nay việc ứng dụng tin học vào cuộc sống đã trở thành nhu cầu buôn bán là điều cần thiết của con người Với sự phát triển mạnh mẽ của công nghệ thông tin làm cho tin học không còn xa lạ đối với mỗi chúng ta Máy tính cùng với các công nghệ khác đã giúp con người xử lý công việc nhanh chóng và hiệu quả, do đó các chương trình quản lý bán hàng đã ra đời

Từ thực tế, một cửa hàng muốn kinh doanh hiệu quả và mở rộng quy mô thì vấn

đề marketing là điều cấp thiết, xuất phát từ nhu cầu đó việc xây dựng website bán hàng đẹp mắt, khách hàng dễ sử dụng và truy cập là điều mà mỗi chủ kinh doanh ai cũng

muốn Để xây dựng một website hoàn chỉnh, việc đầu tiên cần làm là thiết kế front-end theo chuẩn responsive Vì thế, em đã chọn đề tài “Xây dựng website bán pizza” làm đề tài cho đồ án Chuyên đề chuyên sâu kỹ thuật phần mềm 2 lần này

Trong khuôn khổ của đồ án môn học và thời gian cho phép, đồ án của em sẽ có những điểm chưa hoàn thiện Sau này nếu có điều kiện và thời gian cho phép, đồ án này

sẽ được mở rộng và phát triển hoàn thiện hơn, để có thể ứng dụng hiệu quả cho việc triển khai website đến với khách hàng

MỤC LỤC

LỜI MỞ ĐẦU 5

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 8

1.1 Giới thiệu đề tài 8

1.2 Lý do chọn đề tài 8

1.3 Mục tiêu của đề tài 8

1.4 Môi trường phát triển 8

1.5 Các công cụ hỗ trợ 11

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 14

2.1 Mô tả hệ thống 14

2.2 Sơ đồ Use Case 14

2.3 Sơ đồ hoạt động 18

CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG TRANG WEB 19

3.1 Thiết kế các chức năng 19

3.2 Xây dựng giao diện 22

3.3 Hướng dẫn sử dụng 26

KẾT LUẬN 28

TÀI LIỆU THAM KHẢO 29

PHỤ LỤC CODE 30

1 Link source code: 30

2 Code mẫu 30

DANH SÁCH HÌNH

Hình 1 NodeJS 9

Hình 2 Cách NodeJS hoạt động 10

Hình 3 Angular 10

Hình 4 Các lợi ích mà Angular mang lại 11

Hình 5 Cửa sổ CMD 12

Hình 6 Visual Studio Code 12

Hình 7 Một số tiện ích tốt nhất dành cho Visual Studio Code 13

Hình 8 Usecase tổng quát 15

Hình 9 Usecase truy cập website 16

Hình 10 Usecase nhập hàng 16

Hình 11 Usecase đặt hàng 17

Hình 12 Usecase giao hàng 17

Hình 13 Sơ đồ Class 18

Hình 14 Responsive website 19

Hình 15 Sử dụng services 20

Hình 16 Dữ liệu được đổ lên trang thực đơn 20

Hình 17 Lấy id món ăn 21

Hình 18 Đặt Pizza 5 Loại Thịt Thượng Hạng 21

Hình 19 Hiển thị trang đặt hàng dựa trên id sản phẩm cần đặt 22

Hình 20 Giao diện trang chủ (1) 22

Hình 21 Giao diện trang chủ (2) 23

Hình 22 Giao diện trang chủ (3) 23

Hình 23 Giao diện trang thực đơn (1) 24

Hình 24 Giao diện trang thực đơn (2) 24

Hình 25 Giao diện trang đặt hàng 25

Hình 26 Giao diện trang liên hệ 25

Hình 27 Giao diện trang liên hệ 26

Hình 28 Giao diện trang liên hệ 26

Hình 29 Hướng dẫn chạy dự án Angular (1) 26

Hình 30 Hướng dẫn chạy dự án Angular 27

Hình 31 Hướng dẫn chạy dự án Angular 27

Hình 32 Hưỡng dẫn chạy dự án Angular 27

Hình 33 Code home.component.html 30

Hình 34 Code menu.component.html 30

Hình 35 Code navbar.component.html 31

Hình 36 Code footer.component.html 31

Hình 37 Code order-details.service.ts 32

Hình 38 Code menupage.component.ts 32

Hình 39 Code menupage.component.html 33

Hình 40 Code app-routing.module.ts 33

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài

- Pizza Delicious là một website (front-end) bán Pizza trực tuyến Bao gồm các template: trang chủ, trang sản phẩm, trang chi tiết sản phẩm và đặt hàng, trang liên hệ, trang giới thiệu Với giao diện đẹp mắt, đơn giản và dễ sử dụng, giúp khách hàng dễ dàng tiếp cận với việc đặt hàng online

1.2 Lý do chọn đề tài

- Vào những năm gần đây, việc ứng dụng CNTT về website bán hàng trực tuyến ngày càng phát triển mạnh mẽ, giúp cho các cửa hàng kiếm được lợi nhuận nhiều hơn và giảm chi phí nhân công Hiểu được yêu cầu đó, em quyết định chọn đề tài “Xây dựng website bán pizza” làm mục tiêu chính cho đồ án lần này, với mong muốn xây dựng một template website responsive có thể chạy trên mọi thiết bị Ngoài ra, với giao diện website thân thiện cùng với tông màu đơn giản sẽ tạo thiện cảm cho khách hàng, giúp khách hàng đặt món tại nhà mà không cần tốn nhiều thời gian ra cửa hàng Đó là sự tiện lợi mà mọi khách hàng nào cũng muốn!

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

- Tìm hiểu cấu trúc dự án Angular

- Xây dựng website bán pizza hoàn chỉnh, responsive với mọi thiết bị

- Giao diện đẹp, dễ sử dụng

- Trình bày đẹp, clean code

1.4 Môi trường phát triển

- Node.js:

• NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8

Engine, nó được sử dụng để xây dựng các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp NodeJS là một

mã nguồn mở được sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ

WIndow cho tới Linux, OS X nên đó cũng là một lợi thế NodeJS cung cấp các

thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất

Hình 1 NodeJS

- Các đặc tính của NodeJs:

• Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ (none-blocking),

nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về Việc

di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime)

• Chạy rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 Javascript Engine nên việc thực thi chương trình rất nhanh

• Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mô hình luồng duy nhất với sự kiện lặp cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng một cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược với các máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu Node.js sử dụng một chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP Server

• Không đệm:

NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra

dữ liệu

• Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License

Hình 2 Cách NodeJS hoạt động

- Angular: là một javascript framework do google phát triển để xây dựng các Single Page Application (SPA) bằng JavaScript , HTML và TypeScript Angular cung cấp các tính năng tích hợp cho animation , http service và có các tính năng như auto-complete , navigation , toolbar , menus ,… Code được viết bằng TypeScript , biên dịch thành JavaScript và hiển thị tương tự trong trình duyệt

Hình 3 Angular

- Lợi ích khi sử dụng Angular:

• Angular giúp nâng cao năng suất của các lập trình viên

• Cấu trúc phát triển rõ ràng

• Extensive binding

• Hỗ trợ đầy đủ tính năng điều hướng (routing)

• Angular giúp giảm tối đa kích thước và tăng tối đa hiệu suất của ứng dụng

Hình 5 Cửa sổ CMD

- Visual Studio Code:

macOS, Visual Studio Code được phát triển bởi Microsoft Nó được xem là một sự kết hợp hoàn hảo giữa IDE và Code Editor

highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác

Hình 6 Visual Studio Code

- Một số tính năng của Visual Studio Code:

• Hỗ trợ nhiều ngôn ngữ lập trình

• Hỗ trợ đa nền tảng

• Cung cấp kho tiện ích mở rộng

• Kho lưu trữ an toàn

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Mô tả hệ thống

- Pizza Delicious là một hệ thống website bán pizza trực tuyến mới đi vào hoạt động giữa năm 2022, đến với website Pizza Delicious khách hàng có thể dễ dàng đặt pizza tại nhà, tìm thấy nhiều loại pizza ngon, được chế biến công phu từ đôi bàn tay của các đầu bếp chuyên nghiệp Ngoài Pizza ra cửa hàng còn có các loại thức

ăn nhanh khác như: gà rán, nước ngọt, xúc xích xông khói, mì Ý, v.v… Cùng tiêu chí không ngừng hoàn thiện, nâng cao chất lượng món ăn, dịch vụ, Pizza

Delicious cam kết sẽ là lựa chọn tốt cho quý khách hàng yêu thích thức ăn nhanh!

- Hệ thống website bao gồm các trang:

• Trang chủ: Hiển thị banner sản phẩm, các loại pizza được yêu thích nhất

• Trang thực đơn: Hiển thị các loại Pizza được website bày bán

• Trang đặt hàng: Hiển thị chi tiết sản phẩm, và form điền thông tin đặt

hàng

• Trang liên hệ: Hiển thị form cho khách hàng nhập thông tin cần liên hệ

đến cửa hàng

• Trang giới thiệu: Hiển thị thông tin cửa hàng, vị trí cửa hàng hoạt động

trên Google Map

2.2 Sơ đồ Use Case

• Đầu bếp: Chế biến pizza, kiểm tra hàng tồn, bảo quản pizza

• Nhân viên giao hàng: Giao pizza khi có đơn hàng, thu tiền

- Xác định Use-case:

• Truy cập website:

o Tham quan website

o Xem chi tiết sản phẩm

o Liên hệ cửa hàng

o Xem số lượng hiện có của 1 loại pizza bất kì

• Nhập hàng:

o Số lượng Pizza đầu bếp chế biến được

o Bảo quản pizza

o Số lượng Pizza còn hạn sử dụng

• Đặt hàng:

o Chọn Pizza cần đặt

o Chọn số lượng (số lượng hiện có trong kho)

o Cung cấp thông tin khách hàng

❖ Usecase truy cập website

Hình 9 Usecase truy cập website

❖ Usecase nhập hàng

Hình 10 Usecase nhập hàng

❖ Usecase đặt hàng

Hình 11 Usecase đặt hàng

❖ Usecase giao hàng

Hình 12 Usecase giao hàng

• Loại món: MaLoai int, TenLoai string, MoTa string

• Món ăn: MaMon int, TenMon string, MoTa string, NoiDung string, DonGia float, HinhAnh string

• Hóa đơn: MaHD int, TongTien float

• Chi tiết hóa đơn: MaCTHD int, SoLuongMon int

• Thanh toán: MaTT int, PhuongThucTT string, TrangThaiTT: string

• Vận chuyển: MaVC int, TenVC string, DiaChiVC: string, SĐTVC string,

EmailVC string, GhiChu string

Hình 13 Sơ đồ Class

CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG TRANG WEB

3.1 Thiết kế các chức năng

- Responsive website theo kích thước màn hình thiết bị truy cập

Hình 14 Responsive website

- Sử dụng services để đổ dữ liệu lên các trang

Hình 15 Sử dụng services

Hình 16 Dữ liệu được đổ lên trang thực đơn

- Lấy id pizza khi người dùng click đặt hàng vào 1 pizza cụ thể

Hình 17 Lấy id món ăn

Hình 18 Đặt Pizza 5 Loại Thịt Thượng Hạng

Hình 19 Hiển thị trang đặt hàng dựa trên id sản phẩm cần đặt 3.2 Xây dựng giao diện

- Giao diện trang chủ:

Hình 20 Giao diện trang chủ (1)

Hình 21 Giao diện trang chủ (2)

Hình 22 Giao diện trang chủ (3)

- Giao diện trang thực đơn:

Hình 23 Giao diện trang thực đơn (1)

Hình 24 Giao diện trang thực đơn (2)

- Giao diện trang đặt hàng:

Hình 25 Giao diện trang đặt hàng

- Giao diện trang liên hệ:

Hình 26 Giao diện trang liên hệ

- Giao diện trang liên hệ:

Hình 27 Giao diện trang liên hệ

Hình 28 Giao diện trang liên hệ 3.3 Hướng dẫn sử dụng

- Cài đặt NodeJS và Angular phiên bản mới nhất

- Trên thanh địa chỉ thư mục dự án Angular: gõ cmd để mở command prompt

Hình 29 Hướng dẫn chạy dự án Angular (1)

Hình 30 Hướng dẫn chạy dự án Angular

- Gõ: ng serve để chạy dự án

Hình 31 Hướng dẫn chạy dự án Angular

- Mở trình duyệt lên và gõ: http://localhost:4200/ website sẽ hiện lên

Hình 32 Hưỡng dẫn chạy dự án Angular

KẾT LUẬN

Kết quả đạt được

- Ưu điểm:

• Xây dựng được website responsive với mọi thiết bị

• Hiểu được cấu trúc dự án Angular

• Hoàn thành mục tiêu đề tài xây dựng website bán pizza

• Giao diện dễ nhìn, dễ sử dụng

- Nhược điểm:

• Website còn nhiều thiếu sót

• Thiếu trang giỏ hàng cho khách hàng đặt nhiều sản phẩm

• Nội dung website chưa được chi tiết

Hướng phát triển

- Nếu có thêm nhiều thời gian, cơ hội, em sẽ xây dựng hệ thống website này một cách chỉn chu hơn, nâng cấp giao diện và thêm các trang quản trị, cập nhật thêm tính năng mới để cho người dùng dễ dàng thao tác một cách tiện lợi nhất có thể, để phù hợp với xu hướng đặt món ăn online thời nay

TÀI LIỆU THAM KHẢO

[1] Slide bài giảng Chuyên đề chuyên sâu KTPM 2 của Thầy Phạm Văn Đăng trên

website LCMS2

[2] Lý thuyết Angular, NodeJS, Visual Studio Code trên website Viblo

PHỤ LỤC CODE

1 Link source code:

- Link source code trên drive (.rar):

Hình 35 Code navbar.component.html

Hình 36 Code footer.component.html

Hình 37 Code order-details.service.ts

Hình 38 Code menupage.component.ts

Hình 39 Code menupage.component.html

Hình 40 Code app-routing.module.ts