ĐỒ ÁN CƠ SỞ 2 ĐỀ TÀI: XÂY DỰNG WEBSITE DẠY NẤU ĂN. Th.S Võ Hùng Cường

CỨU TỔNG QUAN

1.Các ngôn ngữ sử dụng phục vụ cho việc thiết kế Website

2 Yêu cầu của các chức năng có trong Website a.Tìm kiếm sản phẩm

 Điều kiện trước: Người dùng ghé thăm hệ thống.

 Điều kiện sau: Khi người dùng có nhu cầu tìm hiểu thông tin về các món ăn.

 Mô tả: Người dùng vào hệ thống để tìm kiếm món ăn mà mình muốn xem.

Hành động của tác nhân Hành động của hệ thống

1 Người dùng kích vào mục tìm kiếm món ăn.

3 Người dùng nhập thông tin cần thiết vào form tìm kiếm và nhấn nút tìm kiếm.

2 Hệ thống hiển thị form tìm kiếm: tìm kiếm theo tên, tìm theo nguyên liệu, …

4 Hệ thống hiển thị kết quả tìm kiếm b Đăng ký tài khoản

 Điều kiện trước: Người dùng ghé thăm hệ thống.

 Điều kiện sau: Người dùng đăng ký tài khoản.

 Mô tả: Người dùng cung cấp đầy đủ thông tin cần thiết đăng ký tài khoản hệ thống.

Để yêu thích và bình luận về các công thức nấu ăn trên website, người dùng cần đăng ký tài khoản.

3 Người dùng cung cấp đầy đủ thông tin cần thiết mà hệ thống yêu cầu và nhấn Đăng ký.

2 Hiển thị form đăng ký cho người dùng.

4 Hệ thống báo kết quả quá trình nhập thông tin cá nhân.

6 Hệ thống cập nhật thông tin của người dùng vừa đăng ký vào hệ thống

Người dùng cần cung cấp đầy đủ thông tin cần thiết để hoàn tất quá trình đăng ký Nếu không, hệ thống sẽ thông báo yêu cầu người dùng nhập thông tin đầy đủ hoặc thoát khỏi form đăng ký trước khi tiếp tục.

 Điều kiện trước: Người dùng vào trang đăng nhập của Website.

 Điều kiện sau: Tên và mật khẩu của người dùng hợp lệ, đăng nhập thành công.

 Mô tả: Người dùng nhập tên và mật khẩu, hệ thống cho phép đăng nhập thành công nếu đã đăng ký tài khoản.

1 Người dùng chọn đăng nhập.

3 Người dùng nhập tên và mật khẩu vào form đăng nhập.

2 Hệ thống hiển thị form đăng nhập.

4 Hệ thống kiểm tra tên và mật khẩu của thành viên có hợp lệ không.

5 Hệ thống hiển thị thành viên đăng nhập thành công.

4 Người dùng đăng nhập lại hoặc chọn chức năng quên mật khẩu ở hệ thống.

6 Người dùng tiếp tục đăng nhập hệ thống hoặc rời khỏi.

5 Hệ thông báo nhập sai thông tin, hiển thị form nhập lại. d Xem, sửa thông tin cá nhân

 Các tác nhân: Người dùng ( đã đăng ký tài khoản)

 Điều kiện trước: Người dùng đăng nhập thành công vào hệ thống.

 Điều kiện sau: Thông tin người dùng được cập nhật trong hệ thống.

 Mô tả: Người dùng vào hệ thống xem, sửa thông tin cá nhân và hệ thống cho phép người dùng các thông tin đã đăng ký.

1 Người dùng chọn chức năng xem thông tin cá nhân.

3 Người dùng chọn sửa và nhập các thông tin mới và nhấn nút lưu thông tin.

2 Hệ thống hiển thị form xem thông tin với các thông tin cũ của người dùng.

4 Hệ thống lưu lại thông tin mới của Người dùng.

5 Người dùng nhập lại thông tin và lưu vào hệ thống.

6 Hệ thống thông báo việc nhập thông tin không hợp lệ. e Bình luận

 Điều kiện trước: Khi người dùng ghé thăm Website để xem công thức nấu ăn.

 Điều kiện sau: Bình luận về công thức của món ăn đó.

Người dùng khi truy cập vào hệ thống để xem công thức sẽ được tự động tạo một ô bình luận Nếu họ muốn để lại ý kiến về bài viết, chỉ cần nhấn vào ô bình luận đó.

1 Người dùng ghé thăm website xem công thức món ăn.

2 Hệ thống hiển thị bài viết kèm theo đó là ô bình luận ở dưới.

3 Nếu người dùng muốn bình luận sẽ

5.Người dùng muốn xóa, sửa bình luận

4.Hệ thống sẽ lưu lại bình luận của Của người dùng vào bài viết

6.Hệ thống hiển thị cho người dùng xóa hoặc sửa bình luận

3/5 Người dùng chưa hoàn tất bình luận mà đã rời khỏi trang web

4/6 Hệ thống hiện thị chưa hoàn tất bình luận Người dúng có muốn tiếp tục hoàn tất hoặc rời khỏi. f Yêu thích

 Điều kiện trước: Khi người dùng ghé thăm Website để xem công thức nấu ăn.

 Điều kiện sau: Yêu thích về công thức của món ăn đó.

Người dùng truy cập vào hệ thống để xem công thức, và hệ thống sẽ tự động tạo nút yêu thích cho họ Khi người dùng muốn lưu bài viết yêu thích, họ chỉ cần nhấn vào nút đó.

1 Người dùng ghé thăm website xem công thức món ăn.

3 Nếu người dùng muốn lưu bài viết yêu thích sẽ nhấn vào đó

2 Hệ thống hiển thị bài viết kèm theo đó là nút yêu thích.

4 Hệ thống sẽ lưu bài người dũng đã yêu thích vào trang yêu thích

3 Người dùng xóa baifyeeu thích khỏitrang yêu thích

4 Hệ thống hiện thị xác nhận xóa bài viết khỏi trang yêu thích g Phân loại

 Các tác nhân: Người dùng

 Điều kiện trước: Người dùng chọn phân loại công thức món ăn theo tên, nguyên liệu, giá thành nguyên liệu,…

 Điều kiện sau: Xác nhận chọn phân loại

 Mô tả: Người dùng sẽ xác nhận phân loại công thức nấu ăn theo nhu cầu tìm kiếm của bản thân tùy vào giá thành, tên,

1 Người dùng nhấn chọn phân loại

3 Người dùng sẽ cho thấy hiển thị các bài viết công thức nấu ăn theo nhu cầu.

2 Hệ thống xác nhận phân loại công thức nấu ăn

4 Xuất bài viết theo yêu cầu h Quản lí người dùng

 Các tác nhân: Người quản trị

 Điều kiện trước: Người quản trị đăng nhập thành công vào hệ thống.

 Điều kiện sau: Người quản trị hệ thống được thông tin của các người dùng trong hệ thống.

Người quản trị đăng nhập vào hệ thống để truy cập chức năng quản lý người dùng, từ đó có thể xem và cập nhật thông tin của người dùng một cách hiệu quả.

1 Người quản trị truy cập vào hệ thống, chọn chức năng quản lí người dùng.

3 Nếu người quản trị chọn chức năng quản lí người dùng.

5 Người quản trị xem, cập nhật thông tin người dùng

7 Người quản trị xác nhận hoàn thành.

2 Hệ thống yêu cầu chọn quản lí người dùng

4 Hệ thống hiển thị form quản lí người dùng.

6 Hệ thống hiển thị thông tin và yêu cầu xác nhận.

1 Người quản lí không xác nhận hoàn thành.

2 Hệ thống hiển thị lại form quản lí. i Quản lí bài viết

 Các tác nhân: Người quản trị.

 Điều kiện trước: Người quản trị đăng nhập vào hệ thống thành công.

 Điều kiện sau: Website được người quản trị cập nhật thông tin bài viết công thức nấu ăn.

 Mô tả: Người quản trị kiểm tra bài viết và cập nhật trên hệ thống.

1 Người quản trị đăng nhập vào hệ thống thành công

3 Người quản trị chọn chức năng quản lí bài viết.

5 Người quản trị cập nhật viết lên hệ thống.

2 Hệ thống yêu cầu chọn quản lí bài viết

4 Hệ thống hiển thị form quản lí bài viết

7 Hệ thống tiếp nhận và cập nhật bài viết lên website.

1 Cập nhật thông tin sai 2 Hệ thống cập nhật thông tin sai.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Biểu đồ use case quản lý danh mục sản phẩm

*Use case Quản lý danh mục món ăn:

 Mục đích: quản lý danh mục món ăn cho website

 Tác nhân: Quản trị viên.

 Mô tả: sau khi đăng nhập vào webservice, admin tiến hành thêm, xóa danh mục sản phẩm.

Biểu đồ use case quản lý sản phẩm

*Use case Quản lý sản phẩm:

 Mục đích: quản lý món ăn cho website.

 Tác nhân: quản trị viên.

 Mô tả: sau khi đăng nhập vào webservice, quản trị viên tiến hành thêm,cập nhật, xóa sản phẩm.

Biểu đồ use case tìm kiếm sản phẩm

*Use case Tìm kiếm sản phẩm:

 Mục đích: tìm kiếm các món ăn mong muốn.

 Mô tả: người dùng không cần đăng nhập vẫn có thể tìm kiếm món ăn bằng cách nhập các từ khóa cần tìm.

Biểu đồ use case xem sản phẩm

*Use case Xem sản phẩm:

 Mục đích: Xem các món ăn và thông tin về món ăn.

 Mô tả: người dùng không cần đăng nhập vẫn có thể xem các món ăn và thông tin món ăn.

7 Biểu đồ use case Bình luận, yêu thích

*Use case Bình luận và yêu thích

 Mục đích:yêu thích và bình luận về món ăn

TRIỂN KHAI VÀ XÂY DỰNG …

CSS (Cascading Style Sheets) là ngôn ngữ dùng để xác định cách trình bày cho các tài liệu HTML, XHTML, XML, SVG, và UML Nó quy định cách hiển thị của các thẻ HTML thông qua việc thiết lập các thuộc tính cho từng thẻ.

CSS là ngôn ngữ đơn giản với cấu trúc rõ ràng, sử dụng từ tiếng Anh để đặt tên thuộc tính, cho phép viết mã trực tiếp trong HTML hoặc tham chiếu từ file riêng có đuôi ".css" Việc tách biệt CSS giúp mã HTML ngắn gọn hơn và cho phép sử dụng chung một file CSS cho nhiều website, tiết kiệm thời gian và công sức Tính kế thừa của CSS giúp giảm số lượng dòng code mà vẫn đáp ứng yêu cầu thiết kế Tuy nhiên, các trình duyệt có cách hiểu riêng về CSS, dẫn đến sự không đồng nhất trong việc trình bày nội dung CSS cung cấp hàng trăm thuộc tính trình bày, cho phép sáng tạo cao trong việc kết hợp để mang lại hiệu quả tối ưu.

Chương 4 Ngôn ngữ lập trình PHP

PHP (Hypertext Preprocessor) là ngôn ngữ lập trình kịch bản phổ biến, chủ yếu dùng để phát triển ứng dụng web và mã nguồn mở Với cú pháp tương tự như C và Java, PHP dễ học, tối ưu cho ứng dụng web và có tốc độ xử lý nhanh Tập tin PHP có phần mở rộng *.php, có thể chứa văn bản, mã HTML, CSS, Javascript và mã PHP Khi người dùng yêu cầu xem trang web, server sẽ chuyển đổi mã PHP thành mã HTML trước khi gửi về trình duyệt, vì trình duyệt chỉ có thể đọc mã HTML.

XAMPP is an open-source, cross-platform web server developed by Apache Friends, primarily comprising the Apache HTTP Server, MariaDB database, and interpreters for PHP and Perl.

XAMPP là một nền tảng đa năng bao gồm Apache, MariaDB, PHP và Perl, cho phép lập trình viên dễ dàng tạo máy chủ web local để kiểm tra và triển khai trang web Tất cả các thành phần cần thiết cho phát triển website được gói gọn trong một tệp, giúp đơn giản hóa quá trình cài đặt XAMPP tương thích với nhiều hệ điều hành như Linux, Windows và Mac, mang lại sự linh hoạt cho người dùng Việc chuyển đổi từ máy chủ local sang máy chủ online trở nên dễ dàng hơn nhờ vào việc sử dụng các thành phần tương tự như trong XAMPP.

Chương 5 Hình ảnh demo giao diện: a Giao diện trang chủ:

Khách hàng vào trang web để xem sản phẩm, tìm các công thức nấu ăn

Trang phân loại món ăn được thiết kế để người dùng dễ dàng chọn lựa, với các mục và loại món ăn được phân chia rõ ràng.

Hình 2: Giao diện phân loại món ăn c Giao diện chi tiết sản phẩm/chi tiết bài viết:

Trang chi tiết là nơi mà người quản trị có thể tải lên thông tin về các món ăn, bao gồm tên và nguyên liệu nấu, giúp người dùng hiểu rõ hơn về món ăn và nội dung bài viết.

Hình 3: Giao diện chi tiết món ăn

Hình 4: Giao diện chi tiết món ăn d Giao diện các món ăn được yêu thích:

Người dùng xem lại các món ăn mình yêu thích trước đó.

Hình 5: Giao diện các món ăn được yêu thích e Giao diện tìm kiếm: Người dùng timg kiếm món ăn theo tên,

Hình 6: Giao diện tìm kiếm f.Giao diện tài khoản: Người dùng thay đổi mật khẩu, thay đổi thông tin tài khoản,…

Hình 7: Giao diện tài khoản g Giao diện danh mục:

Hiện danh sách các danh mục có trong bài viết và quản trị viên có thể thêm, sửa, xóa các danh mục.

Hình 8: Giao diện danh mục

Hình 9: Giao diện thêm danh mục h Giao diện danh sách các món ăn:

Hiện danh sách những món ăn mà quản trị viên đã upload lên và xem trạng thái của sản phẩm.

Hình 10: Giao diện danh sách món ăn

Hình 11: Giao diện thêm công thức nấu ăn i.Giao diện danh sách tài khoản:

Hiện danh sách người dùng và quản trị viên có thể thay đổi quyền cho người dùng, xóa người dùng.

Hình 12: Giao diện danh sách tài khoản người dùng k.Giao diên đăng nhập

Hình 13: Giao diện đăng nhập

Định dạng
Số trang	30
Dung lượng	3,62 MB