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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.15 MB, 30 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>LỜI CẢM ƠN </b>

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 đã ln ln độ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!

Khoa

Nguyễn Đăng Khoa

<b> </b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>LỜI MỞ ĐẦU </b>

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 hồ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 hồ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.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>MỤC LỤC </b>

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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 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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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

- 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.

<b>1.2. Lý do chọn đề tài </b>

- 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 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!

<b>1.3. Mục tiêu của đề tài </b>

- 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.

<b>1.4. Mơi trường phát triển </b>

- 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 tồ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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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.

<b><small>Hình 1 NodeJS </small></b>

- 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.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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

<b><small>Hình 2 Cách NodeJS hoạt động </small></b>

- 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.

<b><small>Hình 3 Angular </small></b>

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

• 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. • Document và cộng đồng (community) lớn.

<b><small>Hình 4 Các lợi ích mà Angular mang lại </small></b>

<b>1.5. Các cơng cụ hỗ trợ </b>

-

Command Prompt:

•

Command Prompt hay cịn gọi là CMD, là một cơng cụ giúp người dùng có thể nhập các lệnh vào để mở ra một số tác vụ trên hệ điều hành Windows.

•

Thơng thường, người dùng có thể mở các tác vụ bằng cách nhấn vào biểu tượng của tác vụ hoặc qua nhiều bước khác nhau. Nhưng với CMD, bạn chỉ cần nhập lệnh tương ứng với tác vụ thì việc mở tác vụ sẽ cực kỳ nhanh, giúp bạn tiết kiệm nhiều thời gian.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

- 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.

<b><small>Hình 6 Visual Studio Code </small></b>

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

- 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 tồn.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 Mô tả hệ thống </b>

-

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 hồ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:

<b>• 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. </b>

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

<b>hàng. </b>

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

<b>đến cửa hàng. </b>

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

<b>trên Google Map. </b>

<b>2.2 Sơ đồ Use Case </b>

- Xác định Actor

• Khách hàng: gồm những khách hàng tiềm năng là những người có ý định mua hàng có thể vào website để xem thơng tin và đặt pizza, liên hệ với cửa hàng. • Nhân viên trực online: xác nhận đơn hàng, trả lời tin nhắn khách hàng đặt

pizza.

• Đầ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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

❖ Usecase truy cập website

<b><small>Hình 9 Usecase truy cập website </small></b>

❖ Usecase nhập hàng

<b><small>Hình 10 Usecase nhập hàng </small></b>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

❖ Usecase đặt hàng

<b><small>Hình 11 Usecase đặt hàng </small></b>

❖ Usecase giao hàng

<b><small>Hình 12 Usecase giao hàng </small></b>

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>2.3 Sơ đồ hoạt động </b>

- Dựa vào các Usecase ở trên, ta xác định được các lớp: Khách hàng, Admin, Loại món, Món ăn, Hóa đơn, Chi tiết hóa đơn, Thanh toán, Vận chuyển.

- Xác định thuộc tính và phương thức các lớp

• Khách hàng: MaKH int, TenKH string, EmailKH string, MatKhauKH string, SĐTKH string.

• Admin: MaAdmin int, EmailAdmin string, MatKhauAdmin string, TenAdmin string, SĐTAdmin string.

• 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 tốn: MaTT int, PhuongThucTT string, TrangThaiTT: string. • Vận chuyển: MaVC int, TenVC string, DiaChiVC: string, SĐTVC string,

EmailVC string, GhiChu string.

<b><small>Hình 13 Sơ đồ Class </small></b>

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG TRANG WEB 3.1 Thiết kế các chức năng </b>

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

<b><small>Hình 14 Responsive website </small></b>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

<b><small>Hình 15 Sử dụng services </small></b>

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

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b><small>Hình 18 Đặt Pizza 5 Loại Thịt Thượng Hạng </small></b>

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

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

<b>3.2 Xây dựng giao diện </b>

- Giao diện trang chủ:

<b><small>Hình 20 Giao diện trang chủ (1) </small></b>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b><small>Hình 21 Giao diện trang chủ (2) </small></b>

<b><small>Hình 22 Giao diện trang chủ (3) </small></b>

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

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

<b><small>Hình 23 Giao diện trang thực đơn (1) </small></b>

<b><small>Hình 24 Giao diện trang thực đơn (2) </small></b>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

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

<b><small>Hình 25 Giao diện trang đặt hàng </small></b>

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

<b><small>Hình 26 Giao diện trang liên hệ </small></b>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

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

<b><small>Hình 27 Giao diện trang liên hệ </small></b>

<b><small>Hình 28 Giao diện trang liên hệ </small></b>

<b>3.3 Hướng dẫn sử dụng </b>

- 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

<b><small>Hình 29 Hướng dẫn chạy dự án Angular (1) </small></b>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b><small>Hình 30 Hướng dẫn chạy dự án Angular </small></b>

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

<b><small>Hình 31 Hướng dẫn chạy dự án Angular </small></b>

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

<b><small>Hình 32 Hưỡng dẫn chạy dự án Angular </small></b>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>KẾT LUẬN </b>

<b>• Xây dựng được website responsive với mọi thiết bị. • Hiểu được cấu trúc dự án Angular. </b>

<b>• Hồ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. </b>

<b>- Nhược điểm: </b>

<b>• Website cịn nhiều thiếu sót. </b>

<b>• 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. </b>

<b>Hướng phát triển </b>

- 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.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>TÀI LIỆU THAM KHẢO </b>

[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.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>PHỤ LỤC CODE </b>

<b>1. Link source code: </b>

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

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b><small>Hình 35 Code navbar.component.html </small></b>

<b><small>Hình 36 Code footer.component.html </small></b>

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

<b><small>Hình 37 Code order-details.service.ts </small></b>

<b><small>Hình 38 Code menupage.component.ts </small></b>

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<b><small>Hình 39 Code menupage.component.html </small></b>

<b><small>Hình 40 Code app-routing.module.ts </small></b>

</div>