Báo cáo Đồ án lập trình web nâng cao Đề tài xây dựng trang web hướng dẫn pha chế Đồ uống – chacha

Trang web cung cấp các chức năng chính như: xem các công thức hướng dẫn pha chế các thức uống đa dạng, theo từng vùng miền, quốc gia trên toàn thế giới tìm kiếm các công thức nấu ăn the

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

<

Dall HOC DIEN LUC

ELECTRIC POWER UNIVERSITY

BAO CAO DO AN LAP TRINH WEB NANG CAO

DE TAI:

XAY DUNG TRANG WEB HUONG DAN PHA CHE

DO UONG - CHACHA

Sinh vién thuc : NGUYEN NGOC CUONG

hướng dẫn

Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CONG NGHE PHAN MEM Lớp : D16CNPM5

Khóa : 2021 - 2026

nhập, đăng ký, quản lý sản phẩm, thêm vào giỏ hàng

Giảng viên chấm:

MUC LUC

CHUONG 1: TONG QUAN ASP.NET, KHAO SAT HIEN TRANG VA

XÁC LẬP DỰ ÁN SH nh HH HH HH HH HH rye 5

1,1 Khái quát ASP c0 1121 11222112 121212121 n ng 5

1.1.1 Một vài nét về ASP.NET sách HH Hee, 5

1.1.2 Ưu điểm và nhược điểm của ASP - che 5 1.1.3 ASP Net MVC là gì? chu HH HH Hye 5

1.1.4 Lich sử của ASP.NET là gì? Q0 2011211222111 H2 nga 6 1.2 Khảo sát hiện trạng L2 ng HH H2 re 7 1.2.1 Giới thiệu về trang web “Hướng dẫn pha chế đồ uống — Cha Cha” T111 011 1111111111111 1111111111611 111111111111 K11 E111 E111 1111k 11111111 KH 15111115111 k 1111191111 gy 7 1.2.2 Mục đích của website cần thiết kế - ngay 8 1.2.3 M6t 86 trang web chinh cccccccccccccccessesseessessessesseseesssesevesseseeees 8 1.2.4 Yêu cầu về chức mang cccccccccccccccsscessessvessessvessessvsseessveseesevareareses 9

CHƯƠNG 2: Phân tích và thiết kế hệ thống nh rên 11

2.1 Xác định các Actor và Use case tống quát của hệ thống 11

2.1.1 CÁC ÁCÉOF nh Hà Hà HH HH nghiện 11

2.1.2 Use case tống quát của hệ thống - Q0 ng HH rêu 11

2.2 Phân rã use €áse nh nho HH Hà Hà Ho HH ho 12

2.2.1 Use case đăng nhập - 0 221 121212111 1111112121112 H1 Hye, 12 2.2.2 Use case quản lý công thức 022112 220 1220128121 rà 14 2.2.3 Use case quản lý sản phẩm - 0 TH nen 19 2.2.4 Use case quản lý mua hàng 0220221222212 22 t2 Hye 22

2.2.6 Use case tìm kiếm pha ché 0 ccccccccccccccscccsccsscesveseesvesessvesveesentees 25

2.2.7 US€ CASE XOMD i (:(:‹1Í1i TT 29

2.2.8 Use case quản lý tài khoản óc 2c 2211212 He 33 2.3 Biểu đồ lớp tổng quát của hệ thống 52 ST nh HH gyớg 36 CHƯƠNG 3: Thiết kế giao diện và cơ sở dữ liệu Error! Bookmark not

defined

3.1 Thiét ké co s@ dit HAW ccc Error! Bookmark not defined 3.2 Xây dựng giao diện người quản lý Error! Bookmark not defined 3.3 Xây dựng giao diện người dùng Error! Bookmark not defined

KET LUAN ooeccccccccccccccscccscssseceessesevesreserseresenssretenseresentaresensevtensestetsetsessieaneens 37

2 Dac ta use case cập nhật công thức óc nè 13

3 Đặc tả use case cập nhật công thức : c c c 2e 15

4 Đặc tả use case cập nhật danh mục công thức

5 Đặc tả use case cập nhật sản phẩm ng ng kg kg kg kg k1 kẻ

6 Đặc tả use case thêm vào ø1ỏ hàng cv vn vn Hào 22

7 Đặc tả use case xem 910 hang c1 2111 1121111121111 11111 tre 24

8 Đặc tả use case tìm kiếm theo tên công thức cv cty 26

9 Đặc tả use case thống kê hàng tỐn tt H Hye 27

10 Đặc tả use case xem công thức : - 1 2222112112212 re 29

11 Đặc tả use case xem công thức : óc 1222 112111212 tra 30 12_ Đặc tả use case xem yêu thích ‹ : c2 2123x123 k2 32

13 Đặc tả use case cập nhật công thức óc c1 ve: 33

DANH MỤC HÌNH ÁNH

Hình 2 1 Use case tỐng quát c ng H121 22222 re 12 Hình 2 2 Biêu đỗ use case đăng nhập - c2 2 HH2 tre 13

Hình 2 3 Biểu đồ trình tự use case đăng nhập ccc¿ 14

Hình 2 4 Ủse case quản lý công thỨc óc L1 n1 1n ng TH Hà Hệ 14 Hình 2 5 Biểu đỗ trình tự use case cập nhật công thức ¿c2 c2- 52 16 Hình 2 6 Biểu đỗ trình tự use case cập nhật danh mục công thức

Hình 2 7 Use case quản lý sản phẩm 0 0 21c 2 H211 12t re Hình 2 8 Biểu đồ trình tự use case cập nhật sản phâm T111 K11 k1 11112 0111 kk re 21 Hình 2 9 Use case quan ly mua hàng 5 0 S11 11211 121 1H Hà 22 Hình 2 10 Biểu đỗ trình tự use case thêm vào giỏ hàng các 23 Hinh 2 11 Use case quan lý bán hàng 12 122 HH Ho nà 23 Hình 2 12 Biéu dé trình tự use case xem giỏ hàng nen 25

Hình 2 13 Use case tìm kiếm pha chế St E2 11818128 ray 25

Hình 2 14 Biểu đỗ trình tự use case tìm kiếm theo tên công thức 27 Hình 2 15 Biéu dé trình tự use case tìm kiếm theo nguyên liệu 28 Hình 2 l6 se case xem (L2 2 121121111111 101111111 011111 1111811111181 11k, 29 Hình 2 17 Biêu đỗ trình tự use case xem công thỨc - c2 vn nho 30 Hình 2 18 Biêu đỗ trình tự use case xem công thỨc - c2 vn nho 31 Hình 2 19 Biêu đỗ trình tự use case xem yêu thích ¿2c 222 sxcsx+2 33 Hình 2 20 Biểu đỗ trình tự use case cập nhật tài khoản - 5.522 35

Hình 2 21 Biêu đồ lớp tổng quát - 5 c1 TH HE 2102 HH t2 gay 36

Hình 3 I Cơ sở dữ liệu Error! Bookmark not defined

Hinh 3 2 Giao diện đăng nhập Error! Bookmark not defined Hinh 3 3 Giao dién cap nhat san pham "— Error! Bookmark not defined

defined

Hình 3 5 Giao diện cập nhat tai khoan Error! Bookmark not defined Hinh 3 6 Giao diện thêm công thức Error! Bookmark not defined Hinh 3 7 Giao diện công thức Error! Bookmark not defined Hinh 3 8 Gioa diện danh mục công thức Error! Bookmark not defined Hinh 3 9 Giao diện trang chủ Error! Bookmark not defined Hinh 3 10 Giao dién danh muc san pham _ Error! Bookmark not defined Hình 3 11 Giao diện danh sách công thức Error! Bookmark not defined Hình 3 12 Giao diện chi tiết công thức Error! Bookmark not defined Hinh 3 13 Giao dién san pham LH ke Error! Bookmark not defined Hình 3 14 Giao diện trang cả nhân Error! Bookmark not defined Hình 3 15 Giao dién giỏ hàng Error! Bookmark not defined

LOI MO DAU

Trong thời đại công nghệ thông tin phát triển như hiện nay, việc ứng dụng internet vào các lĩnh vực của cuộc sống là điều không thể thiếu Một trong những lĩnh vực có nhu cầu sử dụng internet cao là

ẩm thực Pha chế là nghệ thuật, là niềm đam mê của nhiều người

Tuy nhiên, không phải ai cũng có thời gian và điều kiện để tham gia

các khóa học pha chế Do đó, việc xây dựng một trang web dạy pha chế trực tuyến là một giải pháp hữu hiệu để đáp ứng nhu cầu học tập

và trao đổi kinh nghiệm về pha chế của cộng đồng Vì thế em lựa chọn đề tài “Xây dựng trang web hướng dẫn pha chế đồ uống -

nấu ăn theo tên món, nguyên liệu, độ khó; đăng ký thành viên để

tham gia các khóa học online do các chuyên gia ẩm thực giảng dạy; gửi câu hỏi và nhận được tư vấn từ các chuyên gia; chia sẻ kinh nghiệm và bình luận về các món ăn

Em xin gửi lời cảm ơn đến thầy Phương Văn Cảnh đã tận tình hướng dẫn và giúp đỡ chúng em trong kì học vừa rồi để bài báo cáo của chúng em hoàn thiện một cách tốt nhất Chúng em rất mong nhận được những góp ý chân thành từ các thầy cô để bài báo cáo này hoàn thiện hơn nữa

Sau cùng em xin kính chúc các thầy cô trong khoa Công Nghệ Thông Tin của trường Đại học Điện Lực luôn đồi dào sức khỏe để có thể bước tiếp trên con đường trồng người

Trân trọng !

CHUONG 1: TONG QUAN ASP.NET, KHAO SAT HIEN

TRANG VA XAC LAP DU AN 1.1 Khai quat ASP

1.1.1 Một vài nét về ASP.NET

- ASP.NET là một kỹ thuật lập trình Web: server — code behind File co tén

mo rong aspx

- ASP.NET thich hop v6i nhiéu trinh duyét: IE, Netscape, Opera

- ASP.NET được hỗ trợ trên 25 ngôn ngữ NET: VB.NET, C#, cho việc viếtcode xử lý

- ASP.NET cho việc hỗ trợ tạo ra, triển khai và thực hiện ứng dụng hay dịch

vụ web

1.1.2 Ưu điểm và nhược điểm của ASP

- Ưu điểm:

+ Mô hình lập trình đơn giản

+ Hỗ trợ ADO (Active Data Object), FSO (File System Object)

+ ASP cũng hỗ trợ nhiều ngôn ngữ như: VBscrip, Javascrip

- Nhược điểm:

+ Code ASP lan với html nên khó khăn trong việc tìm lỗi

+ Không hỗ trợ cơ chế cache

+ Tốc độ xử lý còn chậm

1.1.3 ASP Net MVC là gì?

Khi ASP.NET MVC là một framework được phát triển bởi Microsoft

để xây dựng ứng dụng web dựa trên mô hình MVC (Model-View-Controller) Đây là một phần của nền táng ASP.NET, được thiết kế đề tạo ra các ứng dụng web linh hoạt, để bảo trì và kiêm thử

phân mềm được sử dụng để phân chia logic và trách nhiệm trong ứng dụng

Mô hình này giúp tô chức mã nguồn một cách có tổ chức và dễ quản lý

Các thành phần chính trong ASP.NET MVC bao gồm:

- Model: Đại diện cho dữ liệu và logic xử lý dữ liệu của ứng dụng Model đóng vai trò như là lớp chứa đữ liệu và các phương thức để truy cập hoặc xử

lý dữ liệu

- View: Là thành phân hiển thị giao diện người dùng Nó đảm nhiệm nhiệm

vụ hiển thị đữ liệu từ Model và nhận đầu vào từ người dùng View không thực hiện logic xử ly, mà chỉ làm nhiệm vụ hiển thị dữ liệu theo cách được định nghĩa

- Controller: Là thành phần chứa logic điều khiển Nó xử lý các sự kiện và tương tác của người dùng, sau đó gọi các phương thức tương Ứng trong Model để thay đổi dữ liệu và cập nhật View Controller làm nhiệm vụ điều phối giữa Model và View

Mô hình MVC giúp phân chia ứng dụng thành các phần nhỏ, giúp dễ dàng quản lý, bảo trì và kiểm thử ứng dụng ASP.NET MVC cũng hỗ trợ nhiều tính năng như routing, model binding, validation, và nhiều chức năng khác giúp phát triên ứng dụng web một cách hiệu quả

1.1.4 Lịch sử của ASP.NET là gì?

Sau khi phiên bản Internet Information Service 4.0 được phát hành vào năm 1997, Microsoft tạo mô hình nghiên cứu ứng dứng web để giải quyết

những khó khăn của ASP.NET, mục đích chính là tách biệt phần thể hiện và

phần nội dung cũng như cách viết rõ ràng hơn

10

Mark Anders, quan ly cua nhom IIS va Scott Guthrie

Những thiết kế ban đầu về ASP.NET được Anders và Guthrie thực hiện chỉ vỏn vẹn trong khoảng 2 tháng Những mã prototype đầu tién duoc Guthrie

viết trong khoảng thời gian nghỉ lễ Giáng sinh năm 1997

vào các cuộc thi pha chế hấp dẫn Hãy cùng khám phá và học

hỏi những công thức nước uống tuyệt vời trên trang web

hướng dẫn pha chế của chúng tôi!

1.2.1 Giới thiệu về trang web “Hướng dẫn pha chế đồ uống - Cha Cha”

Trang web này được thực hiện nhằm mục đích tạo ra

một sân chơi bổ ích cho những người yêu thích đồ uống,

muốn học hỏi và nâng cao kỹ năng pha chế của mình Trang web cung cấp các chức năng chính như: xem các công thức

hướng dẫn pha chế các thức uống đa dạng, theo từng vùng miền, quốc gia trên toàn thế giới tìm kiếm các công thức nấu

ăn theo tên món, nguyên liệu, độ khó; đăng ký thành viên để tham gia các khóa học online do các chuyên gia ẩm thực giảng dạy; gửi câu hỏi và nhận được tư vấn từ các chuyên gia; chia sẻ kinh nghiệm; thêm vào yêu thích các công thức nhằm

11

mục đích lưu trữ, đặt mua các set trà sữa Đồng thời trang

web cũng có giao diện của Admin nhằm quản lý các công

thức, sản phẩm, tài khoản người dùng

1.2.2 Mục đích của website cần thiết kế

A ss

Việc xây dựng trang web cần phải bám sát thực tế “người dùng cần gi

va minh co gi “ để có thể triển khai ra một website hiệu quả và đúng mục đích

là hướng dẫn pha chế đồ uống

Dựa trên các kiến thức nên tảng được thầy Phương Văn Cảnh trao đổi trên lớp và một số tài liệu tham khảo chúng em đã tổng hợp kiến thức để xây dựng một trang web Báo cáo sẽ lập trinh trén nén web “Website hudng dan pha chế đồ uỗng- Cha Cha” tích hợp được giao diện các chức năng sau:

1.2.3 Một số trang web chính

- Trang đăng nhập và đăng ký: để người dùng tạo tài khoản và đăng nhập vào trang web từ đó có thê học tập được các công thức pha chế đỗ uống

và có thể lưu các công thức đó

- Trang cá nhân: để người dùng có thê thay đổi thông tin cá nhân, quản

lý các công thức món ăn đã lưu vào yêu thích

- Trang chủ: hiển thị các sản phâm đang bán và thanh điều hướng đến các trang khác

- Công thức pha chế: hiển thi tat cả các công thức pha chế đã được tông hợp và phân loại thành các danh mục khác nhau

- Chi tiết công thức: hiên thị chi tiết nguyên liệu, ngày đăng tải, hình ảnh, nội dung của loại đồ uống đó

- Yêu thích: hiển thị tất cả các công thức đã lưu trước đó nhằm mục đích lưu trữ và quản lý dễ dàng

- Blog: hiển thị các tin tức về món ăn trên toàn thê giới, các mẹo vặt hữu ích trong quá trính nâu ăn cũng như lựa chọn nguyên liệu

- Liên hệ: để người dùng có thể liên hệ tới nhà phát triển và cung cấp các góp ý hữu ích

- Giới thiệu: hiển thị tổng quan các thông tin liên quan đến nhà phát triển

1.2.4 Yêu cầu về chức năng

- Người dùng : Là những người có nhu câu tìm hiểu về các công thức pha chế, đồng thời có nhu cầu mua các set đồ uống theo set đã được sơ chế sẵn Vì thế trang web cần phải

thỏa mã các chức năng sau:

13

+ Hiển thị danh sách các công thức món ăn để người

dùng có thể

+ Hiển thị danh sách các sản phẩm để người dùng xem

và lựa chọn các set trà sữa cần mua

+ Có thanh tìm kiếm để người dùng có thể tìm kiếm các

công thức món ăn theo tên, nguyên liệu

+ Có chức năng yêu thích để người dùng lưu các công thức bản thân quan tâm

+ Có trang cá nhân để người dùng quản lý thông tin cá

nhân

- Người quản lý : Là người làm chủ ứng dụng có quyền kiểm soát mọi hoạt động của hệ thống và thực hiện các chức năng :

+ Quản lý các tài khoản người dùng

+ Quản lý hình ảnh, nội dung, các công thức

+ Quản lý danh mục công thúc

+ Quản lý nội dung, hình ảnh các sản phẩm

Ngoài các chức năng trên thì trang web phải trình bày

sao cho dễ hiểu, giao diện mang tính thân thiện, đẹp mắt và

làm cho người dùng thấy được những thông tin cần tìm, cung cấp những thông tin quảng cáo thật hấp dẫn nhưng trung thục và tạo nên một cộng đồng những người đam mê nấu ăn đích thục

CHƯƠNG 2: Phân tích và thiết kế hệ thống

2.1 Xác định các Actor và Use case tổng quát của hệ

- Thêm vào yêu thích

- Tìm kiếm theo nguyên liệu, tên

2.1.2 Use case tổng quát của hệ thống

Tim kiém theo tên công thức

Tìm kiếm theo nguyên liệu

Tìm kiếm pha chế

Thêm vào giồ\u _ hang tend: Quản lý mua hàng 5

Xem yêu thích

€§p nhật danh mục công Xem giỏ hàng tức

ập nhật sản phẩm Đăng nhập Quản lý sản phấm

Hinh 2 I Use case tổng quái

2.2 Phan ra use case

2.2.1 Use case dang nhap

Người dùng

Người quản lý Đăng nhập

Hình 2 2 Biểu dé use case đăng nhập

Bang 2 2 Dac ta use case cập nhật công thức

Tên use Đăng nhập

case

Mô tả Use case cho phép người quản lý, người dùng

đăng nhập vào hệ thống để thực hiện chức năng của mình

Actor Người quản lý, người dùng

Điều kiện Khi người quản lý, người dùng chọn use case kích hoạt đăng nhập từ trang chủ của hệ thống

Tiền điều Người dùng, người quản lý phải có tài khoản

kiện

2.2.2 Use case quản lý công thức

Hình 2 4 [se case quản lý công thức

2.2.2.1 Use case cập nhật công thức

Đảng 2 3 Đặc tả se case cập nhật công thức

Tiéu Dé Nội Dung

Tên use case | Cập nhật công thức

Mô tả Use case này cho phép người quản lý cập nhật

công thúc như: thêm, sửa, xóa Actor Người quản lý

Điều kiện Khi người quản lý chọn use case cập nhật công kích hoạt thức trong giao diện quản lý công thức

Tiền điều Người quản lý phải có tài khoản trên hệ thống

Hậu điều Người quản lý có thể thêm, sửa, xóa công thức

20

1 Chọn chức năng thêm công thức

2 Hệ thống hiển thị ra form nhập nội dung công thức

3 Nhập nội dung mới

4 Hệ thống lưu các thông tin mới vào cơ sở dữ liệu

5 Hệ thống hiển thị thông báo thêm thành

công

6 Chọn chức năng sửa công thức

7 Hệ thống hiển thị ra danh sách công thức

8 Chọn công thức cần sửa

9 Hệ thống hiển thị form thông tin công thức

10 Nhập thông tin sửa

11 Hệ thống hiển thị lưu thành công

21

HO © O

: người quan l : frm cập nhật công thức : etr quan lý công thức : công thức

1 Chọn chức năng thẻm công thức

ke _ 2 Hién thi form nhập thé

3 Nhập nội dung công thức

$ Kiếm tra thông tin

6 Thông bảo thêm thất bại

§ Thành công vả lưu vào cơ sở đữ liệu

[ 11 HEn thị thêm thành công

13 Chọn chức năng sửa công thức r¬

20 HEn thi sua that bai

fo

Thành công và lưu vào cơ sơ đữ liệu

33 Lưu thành công

33 Thông bảo sửa thành công a

24 Hién thị sửa thành côi

Hình 2 5 Biểu đồ trình tự se case cập nhật công thức

22