Thiết kế trang web bán trà sữa (đồ án môn cơ sở lập trình web)

Dưới đây là một số hình ảnh của trang Web: Hình 1.2.1 Phần header của trang chủ 1... Phần oder: - Giúp khách tìm kiếm món dễ dàng - Có hình ảnh minh họa - Có thể chọn số lượng món - Dễ d

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

KHOA CÔNG NGH THÔNG TIN Ệ

MÔN C S L P TRÌNH WEB Ơ Ở Ậ

ĐÊỀ TAI:

TÌM HI U VA THIÊẾT KÊẾ TRANG WEB BÁN TRA Ể

S A Ữ

Sinh viên th c hi n ự ệ : NGUYÊỄN THANH CÔNG &

LÊ DUY CHIÊẾN

Gi ng viên h ả ướ ng dẫẫn : PH ƯƠ NG VĂN C NH Ả Ngành : CÔNG NGH THÔNG TIN Ệ Chuyên ngành : CNPM & TTNT&TGMT

L p ớ : CNPM7 & TTNT&TGMT

Hà N i, tháng ộ năm

PHIẾU CHẤM ĐIỂM STT Họ và tên

sinh viên

Nội dung thực hiện Điểm Chữ

ký

1 Nguyễn

Thành Công - Thiết kế layout và thiết kế

giao diên

Công

2 Lê Duy

Chiến - Thiết kế layout và thiết kế

giao diện

Chiến

Họ và tên giảng viên Chữ ký Ghi chú

Giảng viên chấm 1:

Giảng viên chấm 2:

MỤC LỤC

Chương 1: Giới thiệu về trang web thiết kế 1

1.1 Tổng Quan 1

1.2 .Các hệ thống tương tự 1

1.3 Mục đích giải quyết 2

CHƯƠNG 2: Thiết Kế Bố Cục 3

1 Bố cục phần trang chủ 3

2 Bố cục phần giới thiệu 4

3 Bố cục phần order 5

4 Bố cục phần Vận Chuyển 5

5 Bố cục phần Tin Tức 7

Chương 3: Kết Quả Thực Hiện 10

1 Phần Trang Chủ 10

2 Phần Giới Thiệu 11

3 Phần Order 11

4 Phần Vận Chuyển 13

DANH MỤC HÌNH ẢNH

Hình 1.2.1: Phần header của trang chủ Error! Bookmark not

defined

Hình 1.2.2 Phần body của trang

chủ Error! Bookmark not

defined

Hình 1.2.3 Phần footer của trang

chủ Error! Bookmark not

defined

Hình 2.1.1 Bố cục của trang

chủ Error! Bookmark not

defined

Hình 2.1.2 Bố cục của phần giới

thiệu Error! Bookmark not

defined

Hình 2.1.3 Bố cục phần oder

Error! Bookmark not defined

Hình 2.1.4 Bố cục phần vân

chuyển Error! Bookmark not

defined

Hình 2.1.5 Bố cục phần tin tức

Error! Bookmark not defined

Hình 3.1.1 Demo trang chủ

Error! Bookmark not

defined

Hình 3.3.1 Demo phần Oder

Error! Bookmark not defined

Hình 3.4.1 Demo phần vân chuyển

Error! Bookmark not

defined

j

Chương 1: Giới thiệu về trang web thiết kế

1.1 Tổng Quan

Xu hướng về những thức uống được giới trẻ hiện nay vô cùng quan tâm và ưa thích đó chính là trà sữa Mặc dù đã xuất hiện từ lâu nhưng trong những năm trở lại đây thì lại là món ăn không thể thiếu trong

những dịp đi chơi cùng bạn bè hoặc người thân Trước khi có sự phát triển vượt bậc về lĩnh vực công nghệ và vận chuyển, chúng ta phải ra những chi nhánh, cửa hàng để có thể mua cho mình những thức uống ngon và lạ Nhưng giờ đây chúng ta có thể ngồi tại nhà và thông qua những trang web đặt hang của những cửa hang mà chúng ta yêu thích để

có thể đặt cho mình những thức uống mà mình yêu thích Vậy nên, nhóm chúng em đã chọn đề tài là Thiết Kế Trang Web Bán Trà Sữa

1.2 .Các hệ thống tương tự

Trang web này được lấy ý tưởng từ chuỗi cửa hàng trà sữa ToCoToCo – một trong những thương hiệu được giới trẻ biết đến từ rất lâu Dưới đây là một số hình ảnh của trang Web:

Hình 1.2.1 Phần header của trang chủ

1

Hình 1.2.2 Phần body của trang chủ

Hình 1.2.3 Phần footer của trang chủ

2

1.3 Mục đích giải quyết

Phần trang chủ :

- Để cho khách hàng thấy sản phẩm nổi bật , các chương trình khuyến mãi

- Để hình ảnh giới thiệu về quán

- Các phần để tìm kiếm như “Cửa hàng”,”sản phẩm”…

Phần oder:

- Giúp khách tìm kiếm món dễ dàng

- Có hình ảnh minh họa

- Có thể chọn số lượng món

- Dễ dàng thanh toán

CHƯƠNG 2: Thiết Kế Bố Cục

1 Bố cục phần trang chủ

3

Hình 2.1 Bố cục của trang chủ

- Phần Head gồm: logo và các section dẫn tới trang khác ( giới thiệu, order, tin tức, …)

- Phần Body gồm: hình ảnh các sản phẩm nổi bật và tag giá, đặt hàng ở dưới mỗi ảnh sản phẩm

- Phần Footer gồm: thông tin của nhãn hiệu ( địa chỉ, hotline,…)

2 Bố cục phần giới thiệu

Hình 2.2 Bố cục của phần giới thiệu

- Phần Head gồm: logo và các section dẫn tới trang khác ( trang chủ, order, tin tức, …)

- Phần Body gồm: Nội dung về lịch sử phát triển hay những thành tựu đạt được và một số hình ảnh liên quan đến thương hiệu trà sữa đó

4

- Phần Footer gồm: thông tin của nhãn hiệu ( địa chỉ, hotline,…)

3 Bố cục phần order

Hình 2.3 Bố cục phần oder

- Phần Head sẽ gồm có 2 phần: logo và thanh công cụ tìm kiếm sản phẩm

- Phần Body gồm có 3 phần:

• Phía bên trái sẽ có những danh mục sản phẩm • Phần chính

giữa sẽ có hình ảnh sản phẩm, giá tiền của mỗi sản phẩm ứng với từng danh mục sản phẩm

• Phía bên phải sẽ là những sản phẩm đã lựa chọn và hiển thị

được số lượng sản phẩm mà khách hang đã chọn

4 Bố cục phần Vận Chuyển

5

Hình 2.4 Bố cục phần vân chuyển

- Phần Head gồm có 2 phần: logo và thanh công cụ tìm kiếm -

Phần Body gồm những phần sau:

• Header bao gồm 2 thẻ: nhận tại cửa hàng hoặc giao hàng tận

nơi • Content bao gồm 2 thẻ:

o Phía bên trái sẽ điền thông tin của khách hang ( người muốn đặt hàng ) ví dụ như: họ và tên, số điện thoại, địa chỉ nhà…)

o Phía bên phải sẽ hiển thị những sản phẩm đã lựa chọn tại trang Order ( số lượng sản phẩm, giá tiền từng sản phẩm, khuyến mãi, tổng tiền cần thanh toán) Cuối cùng là thanh toán hoặc quay lại trang Order để lựa chọn them sản phẩm cần mua

6

5 Bố cục phần Tin Tức

Hình 2.5 Bố cục phần tin tức

7

6 Bố cục phần nhượng quyền

Hình 2.6 Bốc cục phần chuyển nhượng -Phần header:gồm có logo, các section nhỏ dẫn tới các phần ở body

8

Downloaded by Free Games Android (vuchinhhp1@gmail.com)

-Phần body:gồm hình ảnh giới thiệu thương hiệu, tag đăng kí thông tin, phần video ,logo các nhãn hàng

7 Bố cục phần thêm số lượng và topping

Hình 2.7 Bố cục phần thêm số lượng và topping -Phần header: có hình ảnh mô tả sản phẩm ,tên sản phẩm ,giá và tag điều chỉnh

số lượng

-Phần body:có những tag để lựa chọn(% đá,%đường,topping,…)

9

Downloaded by Free Games Android (vuchinhhp1@gmail.com)

Chương 3: Kết Quả Thực Hiện

1 Phần Trang Chủ

10

Downloaded by Free Games Android (vuchinhhp1@gmail.com)

Hình 3.1.1 Demo trang chủ

2 Phần Giới Thiệu

3 Phần Order

- Layout Order

- Giao Diện Thiết Kế Dựa Trên Layout Order:

11

Downloaded by Free Games Android (vuchinhhp1@gmail.com)

12

Downloaded by Free Games Android (vuchinhhp1@gmail.com)

13

Downloaded by Free Games Android (vuchinhhp1@gmail.com)

Hình 3.3.1 Demo phần Oder

4 Phần Vận Chuyển

- Layout Vận Chuyển

- Giao Diện Thiết Kế Dựa Trên Layout Vận Chuyển

14

Downloaded by Free Games Android (vuchinhhp1@gmail.com)

Hình 3.4.1 Demo phần vân chuyển

15

Downloaded by Free Games Android (vuchinhhp1@gmail.com)