Báo cáo Đồ án cơ sở 2 Đề tài xây dựng website ẩm thực

Trang web có thể đáp ứng được các nhu cầu cơ bản của người dùng, Mang tính chất tham khảo là chủ yếu, chúng tôi sẽ cố gắng tiếp tục điều chỉnh trong thời gian sắp tới.. Xây Dựng Trang We

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

VÀ TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH



BÁO CÁO ĐỒ ÁN CƠ SỞ 2

ĐỀ TÀI:

XÂY DỰNG WEBSITE ẨM THỰC

Giảng viên hướng dẫn : TS Lê Văn Minh

Đặng Bình Nguyên – 22IT.B051

Đà Nẵng, tháng 12 năm 2023

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

VÀ TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH



BÁO CÁO ĐỒ ÁN CƠ SỞ 2

ĐỀ TÀI:

XÂY DỰNG WEBSITE ẨM THỰC

Giảng viên hướng dẫn : TS Lê Văn Minh

Đặng Bình Nguyên – 22IT.B051

Đà Nẵng, tháng 12 năm 2023

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Giảng viên hướng dẫn

MỤC LỤC

DANH MỤC BẢNG 7

DANH MỤC HÌNH 8

MỞ ĐẦU 9

1 Lý do chọn đề tài 9

2 Bố cục báo cáo 9

CHƯƠNG 1 GIỚI THIỆU ĐỀ TÀI 9

1.1 Tên đề tài: Xây dựng website ẩm thực 10

1.2 Tổng quan 10

1.3 Phương pháp: 10

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

1.5 Nội dung và kế hoạch thực hiện 10

CHƯƠNG 2 TỔNG QUAN VỀ CÔNG NGHỆ 11

2.1 Giới Thiệu về PHP: 12

2.1.1 Ưu Điểm của PHP 12

2.1.2 Nhược Điểm của PHP: 12

2.2 HTML 13

2.2.1 HTML là gì? 13

2.2.2 Lịch sử của HTML: 13

2.2.3 Ưu điểm của HTML 14

2.2.4 Nhược điểm của HTML 14

2.3 CSS 14

2.3.1 CSS là gì? 14

2.3.2 Các thành phần chính của CSS 14

2.3.3 Ưu điểm của CSS 15

2.3.4 Nhược điểm của CSS 15

2.4 JavaScript 15

2.4.1 JavaScript là gì? 15

2.4.2 Đặc điểm của JavaScript 15

2.4.3 Ưu điểm của JavaScript 16

2.4.4 Nhược điểm của JavaScript 16

2.5 Reponsive Web 16

2.5.1 Reponsive là gì? 16

2.5.2 Lợi ích của Reponsive: 16

CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 17

3.1 Yêu cầu 17

3.1.1 Yêu cầu chức năng 17

3.1.2 Yêu cầu phi chức năng 17

3.2 Các tác nhân của hệ thống 18

3.3 Biểu đồ use case 18

3.3.1 Biểu đồ use-case tổng quát 18

3.3.2 Biểu đồ use-case đăng nhập 19

3.3.3 Biểu đồ use-case quản lý danh mục công thức 19

3.3.4 Biểu đồ use-case quản lý công thức 20

3.3.5 Biểu đồ use-case quản lý bài viết 21

3.3.6 Biểu đồ use-case quản lý thành viên 22

3.3.7 Biểu đồ use-case chức năng người dùng 22

3.4 Biểu đồ tuần tự 24

3.4.1 Biểu đồ tuần tự đăng nhập 24

3.4.2 Biểu đồ tuần tự tìm kiếm 25

3.4.3 Biểu đồ tuần tự tạo bài viết 26

3.4.4 Biểu đồ tạo bình luận 27

CHƯƠNG 4 XÂY DỰNG WEBSITE 30

4.1 Giao diện người dùng 30

4.1.1 Giao diện trang chủ 30

4.1.2 Giao diện trang công thức nấu ăn 32

4.1.3 Giao diện trang bài viết 33

4.1.4 Giao diện trang liên hệ 34

4.1.5 Giao diện đăng ký 35

4.1.6 Giao diện đăng nhập 35

4.1.7 Giao diện cập nhật thông tin 36

4.2 Giao diện quản trị 37

4.2.1 Giao diện trang đăng nhập 37

4.2.2 Giao diện trang chủ 38

4.2.3 Trang quản lý danh mục 38

4.2.4 Trang quản lý sản phẩm 39

4.2.5 Trang quản lý thành viên 40

4.2.6 Trang quản lý bài viết 41

KẾT LUẬN 42

TÀI LIỆU THAM KHẢO 42

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN THỰC HIỆN 44

PHÂN CÔNG NHIỆM VỤ 45

DANH MỤC HÌNH

H>nh 1 biểu đồ use case tổng quát 19

H>nh 2 biểu đồ use case đăng nhập 19

H>nh 3 biểu đồ use case quản lý danh mục công thức 20

H>nh 4 biểu đồ use case quản lý công thức 20

H>nh 5 biểu đồ use case quản lý bài viết 21

H>nh 6 biểu đồ use case quản lý thành viên 22

H>nh 7 biểu đồ use case chức năng người dùng 23

H>nh 8 biểu đồ tuần tự đăng nhập 24

H>nh 9 biểu đồ tuần tự quản lý sản phẩm 25

H>nh 10 biểu đồ tuần tự quản lý danh mục 26

H>nh 11 biểu đồ tuần tự quản lý thành viên 27

H>nh 12 biểu đồ tuần tự quản lý bài viết 28

H>nh 13 Biểu đồ lớp 29

H>nh 14 giao diện trang chủ 30

H>nh 15 Giao diện trang chủ 31

H>nh 16 Giao diện trang công thức nấu ăn 32

H>nh 17 Giao diện trang chi tiết công thức 32

H>nh 18 Giao diện trang bài viết 33

H>nh 19 Giao diện tạo bài viết 33

H>nh 20 Giao diện chi tiết bài viết 34

H>nh 21 Giao diện trang liên hệ 34

H>nh 22 Giao diện đăng ký 35

H>nh 23 Giao diện đăng nhập 35

H>nh 24 Giao diện cập nhật thông tin 36

H>nh 25 Giao diện sau khi cập nhật thông tin 36

H>nh 26 Giao diện đăng nhập trang quản trị 37

H>nh 27 Giao diện trang chủ 38

H>nh 28 Giao diện trang quản lý danh mục 38

H>nh 29 Giao diện trang thêm danh mục 39

H>nh 30 Giao diện trang sửa danh mục 39

H>nh 31 Giao diện trang quản lý sản phẩm 39

H>nh 32 Giao diện trang thêm sản phẩ 40

H>nh 33 Giao diện trang sửa sản phẩm 40

H>nh 34 Giao diện trang quản lý người dùng 40

H>nh 35 Giao diện trang quản lý admin 41

H>nh 36 Giao diện trang quản lý bài viết khi chưa được duyệt 41

H>nh 37 Giao diện trang quản lý bài viết khi được duyệt 41

DANH MỤC BẢNG

Bảng 1 – Nội dung và kế hoạch thực

hiện 8Bảng 2 – Các yêu cầu phi chức năng của ứng

dụng 14

MỞ ĐẦU

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

Trong thời đại mà ẩm thực không chỉ còn là nhu cầu cơ bản mà còn

là một phần không thể thiếu của cuộc sống, việc chia sẻ và t>m kiếm thông tin về công thực nấu ăn trở nên quan trọng hơn bao giờ hết

Để đáp ứng nhu cầu này và tạo ra một không gian tương tác V> vậy chúng tôi đã t>m hiểu và phát triển với mục tiêu ban đầu là phục vụ cho học tập và mong muốn sau này có thể ứng dụng vào thực tế Trang web có thể đáp ứng được các nhu cầu cơ bản của người dùng, Mang tính chất tham khảo là chủ yếu, chúng tôi sẽ cố gắng tiếp tục điều chỉnh trong thời gian sắp tới

2 Bố cục báo cáo

Báo cáo này được chia thành bốn chương chính, cụ thể như sau:Chương 1 Tổng Quan Về Công Nghệ: Đưa ra cái nh>n tổng quan về công nghệ được sử dụng trong dự án

Chương 2 Phân Tích Thiết Kế Hệ Thống: Chi tiết về các bước để thực hiện tạo nên hệ thống website

Chương 3 Xây Dựng Trang Web: Chương này tr>nh bày kết quả về các giao diện,tính năng của website của người dùng và quản trị viên.Chương 4 Kết Quả Dự Kiến: Đánh giá những kết quả dự kiến và tiềm năng phát triển tương lai của trang web ẩm thực

Cuối cùng là Kết luận, Tài liệu tham khảo và Phụ lục liên quan đến đềtài

CHƯƠNG 1 GIỚI THIỆU ĐỀ TÀI

1.1 Tên đề tài: Xây dựng website ẩm thực

1.2 Tổng quan

Ngày nay, trong bối cảnh cuộc sống ngày càng hiện đại và sự phổ biến của internet, việc chia sẻ thông tin về ẩm thực trở thành một yếu tố quan trọng, không chỉ đáp ứng nhu cầu cơ bản về thức ăn mà còn là một trải nghiệm văn hóa và xã hội Những người đam mê nấu

ăn không chỉ t>m kiếm công thức ngon mắt mà còn muốn chia sẻ và tương tác với cộng đồng có chung sở thích Do đó, việc xây dựng các website cung cấp thông tin của các món ăn nói chung và website cung cấp thông tin ẩm thực nói riêng là thực sự cần thiết

- Kiểm thử và sửa chữa sai sót

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

Mục tiêu chính của đề tài là xây dựng một trang web ẩm thực hiện đại và tích hợp nhiều tính năng, nhằm tối ưu hóa trải nghiệm người dùng trong việc t>m kiếm, chia sẻ công thức nấu ăn, và tương tác trong cộng đồng ẩm thực trực tuyến Đồng thời, chúng tôi hướng đếnviệc sử dụng công nghệ hiện đại như PHP và MySQL để đảm bảo tính

bảo mật, hiệu suất cao và tính mở rộng

1.5 Nội dung và kế hoạch thực hiện

Thời gian Nội dung thực hiện

- Xác định đặc điểm và tính năng cần thiết cho trang web ẩm thực

- Lập kế hoạch chi tiết về cấu trúc trang web, tính năng, và giao diện

Tuần 3-4:

Thiết kế giao

diện trang web

- Thiết kế giao diện trang chủ, trang công thức nấu ăn và trang chia sẻ đánh giá và trải nghiệm ẩm thực

- Tạo layout và thiết kế trực quan phù hợp với trải nghiệm người dùng

Tuần 5-6:

Phát triển tính

năng trang web

- Phát triển tính năng t>m kiếm, tạo

và chia sẻ công thức nấu ăn, đánh giá và b>nh luận về các món ăn, tạo cộng đồng yêu thích ẩm thực

- Kiểm tra và đảm bảo tính ổn định của các tính năng trước khi chuyểnsang giai đoạn kế tiếp

Bảng 1 nội dung và kế hoạch thực hiện

CHƯƠNG 2 TỔNG QUAN VỀ CÔNG NGHỆ

2.1 Giới Thiệu về PHP:

PHP (Hypertext Preprocessor) là một ngôn ngữ lập tr>nh mã nguồn

mở được sử dụng chủ yếu để phát triển ứng dụng web động và tươngtác Ban đầu, PHP được thiết kế để

tạo ra các trang web động, nơi mà mã nguồn PHP có thể được nhúngtrực tiếp vào mã HTML để tạo ra nội dung động PHP được thực hiện trên phía máy chủ, điều này có nghĩa là mã nguồn PHP được xử lý bởimáy chủ web trước khi được gửi đến tr>nh duyệt của người dùng Điều này giúp tạo ra các trang web động và tương tác, cho phép thực hiện nhiều chức năng như xử lý biểu mẫu, tương tác với cơ sở

dữ liệu, và nhiều hơn nữa

2.1.1 Ưu Điểm của PHP

a Linh Hoạt và Dễ Học:

PHP là một ngôn ngữ lập tr>nh linh hoạt và dễ học, đặc biệt là đối với những người mới bắt đầu Cú pháp giống với các ngôn ngữ lập tr>nh khác như C và Java, giúp người phát triển dễ dàng chuyển đổi hoặc học thêm

2.1.2 Nhược Điểm của PHP:

a Hiệu Suất Thấp Hơn Một Số Ngôn Ngữ Khác:

Trong một số trường hợp, hiệu suất của PHP có thể thấp hơn so với một số ngôn ngữ khác như Node.js hoặc Go, đặc biệt là đối với các ứng dụng yêu cầu xử lý lớn

PHP vẫn là một trong những lựa chọn phổ biến cho việc phát triển web, đặc biệt là đối với các dự án web vừa và nhỏ, và nó tiếp tục được cập nhật để đáp ứng các yêu cầu ngày càng phức tạp của ngành công nghiệp phát triển web.

2.2 HTML

2.2.1 HTML là gì?

- HTML (Hyper Markup Language) : Là một ngôn ngữ đánh dấu được

thiết kế ra để tạo nên các thành phần cơ bản (như tiêu đề, đoạn văn, h>nh ảnh, video, button, inout box, audio, …) của Website

- HTML không phải là ngôn ngữ lập tr>nh, đồng nghĩa với việc nó

không thể tạo ra các chức năng “động” được Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web

2.2.2 Lịch sử của HTML:

- HTML được sáng tạo bởi “Tim Berners – Lee”, nhà vật lý học của

trung tâm nghiên cứu CERN ở Thụy Sĩ Anh ta đã nghĩ ra được ý

tưởng cho hệ thống hypertext trên nền Internet

- Hypertext có nghĩa là văn bản chứa links, nơi mọi người có thể xem

và truy cập ngay lập tức Anh xuất bản phiên bản mới của HTML đều

có thêm tag mới và các thuộc tính mới

- Theo Mozilla Developer Network: “HTML Element Reference” hiện

có hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hổ trợ bởi các tr>nh duyệt hiện đại)

- Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như

là chuẩn mật của một website Các thiết lập và cấu trúc của HTML

được vận hành bởi World Wide Web Consortium (W3C) Bạn có thể kiểm tra t>nh trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website.

- Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn

HTML5 Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại g>, như là <article> <header> <footer>, ,

2.2.3 Ưu điểm của HTML

- Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên

hỗ trợ và cộng đồng sử dụng cực lớn Sử dụng mượt mà trên hầu hết mọi tr>nh duyệt

- Có quá tr>nh học đơn giản và trực tiếp.

- Mã nguồn mở và hoàn toàn miễn phí.

- Markup gọn gàn và đồng nhất.

- Chuẩn chỉnh của web được vận hành bởi World Wide Web

Consortium (W3C)

- Dễ dàng tích hợp với các ngôn ngữ phụ trợ như PHP và Node.js.

2.2.4 Nhược điểm của HTML

- Được dùng chủ yếu cho web tĩnh Đối với các tính năng động, bạn

cần sử dụng JavaScript hoặc ngôn ngữ phụ trợ thứ ba như PHP

- Nó có thể thực thi một số logic nhất định cho người dùng V> vậy,

hầu hết các trang đều cần được tạo riêng biệt, bất kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers

- Một số tr>nh duyệt chậm hỗ trợ tính năng mới.

- Khó kiểm soát cảnh thực thi của tr>nh duyết ( ví dụ như những tr>nh

duyệt cũ không render được tag mới)

2.3 CSS

2.3.1 CSS là gì?

- CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheets language Nó dung để tạo phong cách và định kiểu cho nhữngyếu tố được viết dưới dạng ngôn ngữ đánh dấu, như HTML Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công

sức cho người viết web Nó phân biệt cách hiển thị của trang bằng cách điều khiển bố cục, màu sắc và font chữ.

2.3.2 Các thành phần chính của CSS

CSS bao gồm các thành phần chính như:

- Selectors: Selectors là các đối tượng được sử dụng để xác

định các phần tử HTML mà bạn muốn áp dụng các quy tắc CSS

- Properties: Properties là các thuộc tính được sử dụng để xác

định cách các phần tử HTML sẽ được hiển thị

- Values: Values là các giá trị được sử dụng để xác định cách

các thuộc tính sẽ được hiển thị

- Media Queries: Media Queries là các truy vấn được sử dụng

để xác định cách các trang web sẽ được hiển thị trên các thiết bị khác nhau

2.3.3 Ưu điểm của CSS

- Tiết kiệm băng thông (bandwith).

- Kết hợp và làm tăng sức mạnh cho HTML

- Có thể đặt các đối tượng ở bất k> vị trí nào trên webpage

- CSS tương thích với hầu hết các tr>nh duyệt

- Hỗ trợ cho việc in ấn webpage

- Hỗ trợ tối đa việc tùy biến webpage

- Hỗ trợ các công cụ t>m kiếm

- Giúp các webpage có sự đồng bộ tuyệt đối, dễ dàng nâng cấp giao

diện

2.3.4 Nhược điểm của CSS

- Hoạt động khác biệt cho mỗi tr>nh duyệt.

- Người mới dùng gặp nhiều khó khăn.

- Có thể gặp rủi ro cho định dạng web.

2.4 JavaScript

2.4.1 JavaScript là gì?

- Javascript: là một ngôn ngữ lập tr>nh có thể chạy được trên tr>nh duyệt giúp xây dựng các chức năng tương tác với người dùng như các hiệu ứng chuyển, animation, các sự kiện click chuột, kéo thả chuột, …

2.4.2 Đặc điểm của JavaScript

JavaScript có một số đặc điểm sau:

- Là một ngôn ngữ thông dịch (interpreted language), nghĩa là các script thi hành không cần biên dịch trước (precompile) Tr>nh duyệt dịch script, phân tích và thi hành ngay tức thời

- Lập tr>nh theo cấu trúc (Structured programing)

- Giống như C và Java, chúng có phân biệt chữ HOA và thường

2.4.3 Ưu điểm của JavaScript

- Tiết kiệm băng thông chủ cô cùng tốt v> chúng chạy trực tiếp trên

máy người dùng

- Linh hoạt vận hành, tương thích tốt

- Dễ dàng kiểm tra và xử lí vấn đề

- Tạo ra các hiệu ứng linh động, hấp dẫn cùng các tính năng hay ho

- Giúp người dùng có thêm những trải nghiệm thú vị hơn

2.4.4 Nhược điểm của JavaScript

- Các tính năng JavaScript có thể không chạy được.

- Ảnh hưởng đến hiệu suất thiết bị đầu cuối

- Dễ bị khai thác thông tin, chŽn mã độc vào thiết bị người dùng

2.5 Reponsive Web

2.5.1 Reponsive là gì?

- Responsive Web (RWD) là một quá tr>nh thiết kế một trang web

duy nhất để sử dụng và tương thích trên các thiết bị điện tử cầm tay hoặc tiện dụng khác nhau

- Còn được gọi là Thiết kế web thích ứng (AWD).

- Nó đề cập đến quá tr>nh thiết kế các trang web sẽ phản hồi lại thiết

bị mà họ đang xem để cung cấp cho người dùng trải nghiệm người dùng tối ưu, liền mạch

2.5.2 Lợi ích của Reponsive:

- Có nhiều lượt truy cập hơn từ thiết bị di động.

- Giảm chi phí, tăng tốc độ phát triển trên di động

- Ít phải bảo tr> hơn

- Cải thiện tốc độ tải trang

- Giữ chân người dùng

- Tỉ lệ chuyển đổi cao hơn

- Dễ dàng tạo báo cáo phân tích (analytics report) hơn

- Cải thiện về SEO

- Cải thiện trải nghiệm trực tuyến đối với tr>nh duyệt

- Trải nghiệm ngay cả khi không có internet

CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

- Người dùng có thể xem blog và tạo blog

- Người dùng có thể b>nh luận, tương tác với nhau

b Quản trị:

- Người quản lý có thể thay đổi giao diện người dùng

- Người quản lý có thể thay đổi các thông tin cơ bản trên website

- Người quản lý có thể quản lý thành viên

- Người quản lý có thể quản lý thực đơn

- Người quản lý có thể quản lý loại thực đơn

- Người quản lý có thể quản lý bài viết

3.1.2 Yêu cầu phi chức năng :

MỤ

C

TÊN YÊU

CẦU

MÔ TẢ YÊU CẦU

người dùng

chính xác

4 Tương thích Tương thích với đa phần các tr>nh duyệt

web hiện tại

Bảng 2 – Các yêu cầu phi chức năng của ứng dụng

+ tác nhân khách hàng: có thể thực hiện các chức năng như đăng kýtài khoản, đăng nhập Xem và t>m kiếm sản phẩm, Xem và tạo blog, b>nh luận ,

3.3 Biểu đồ use case

3.3.1 Biểu đồ use-case tổng quát

H$nh 1 biểu đồ use case tổng quát

3.3.2 Biểu đồ use-case đăng nhập

H$nh 2 biểu đồ use case đăng nhập

Tác nhân: Admin

Mô tả: Use case cho admin đăng nhập vào hệ thống

Điều kiện trước: Admin chưa đăng nhập vào hệ thống

3.3.3 Biểu đồ use-case quản lý danh mục công thức

H$nh 3 biểu đồ use case quản lý danh mục công thức

Tác nhân:Admin

Mô tả: use case cho phép hiển thị,xóa,thêm,sửa,t>m kiếm

Điều kiện trước: admin đã đăng nhập vào hệ thống

Kết quả: các thông tin về danh mục công thức được cập nhật trong

cơ sở dữ liệu

3.3.4 Biểu đồ use-case quản lý công thức

H$nh 4 biểu đồ use case quản lý công thức

3.3.5 Biểu đồ use-case quản lý bài viết

H$nh 5 biểu đồ use case quản lý bài viết

Tác nhân:Admin

Mô tả: use case cho phép hiển thị,xóa,duyệt,bài viết đã duyệt,bài viết chưa duyệt

Điều kiện trước: Admin đã đăng nhập vào hệ thống

Kết quả: các thông tin về bài viết được cập nhật trong cơ sở dữ liệu