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

lOMoARcPSD|17160101 TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐÊỀ HỌC PHẦỀN MÔN CƠ SỞ LẬP TRÌNH WEB ĐÊỀ T AI: TÌM HIỂU VA THIÊẾT KÊẾ TRANG WEB BÁN TRA S ỮA Sinh viên thực : 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 Khóa : D15 Hà Nội, tháng năm lOMoARcPSD|17160101 PHIẾU CHẤM ĐIỂM STT Họ tên sinh viên Nguyễn Thành Công - Thiết kế layout thiết kế giao diên Công Lê Duy Chiến - Thiết kế layout thiết kế giao diện Chiến Họ tên giảng viên Giảng viên chấm 1: Giảng viên chấm 2: Nội dung thực Chữ ký Điểm Ghi Chữ ký lOMoARcPSD|17160101 MỤC LỤC Chương 1: Giới thiệu trang web thiết kế 1.1 Tổng Quan .1 1.2 .Các hệ thống tương tự 1.3 Mục đích giải .2 CHƯƠNG 2: Thiết Kế Bố Cục Bố cục phần trang chủ Bố cục phần giới thiệu Bố cục phần order .5 Bố cục phần Vận Chuyển 5 Bố cục phần Tin Tức Chương 3: Kết Quả Thực Hiện 10 Phần Trang Chủ 10 Phần Giới Thiệu 11 Phần Order 11 Phần Vận Chuyển 13 DANH MỤC HÌNH ẢNH Hình 1.2.1: Phần header trang chủ Error! Bookmark not defined Hình 1.2.2 Phần body trang chủ Error! Bookmark not defined Hình 1.2.3 Phần footer trang chủ Error! Bookmark not defined lOMoARcPSD|17160101 Hình 2.1.1 Bố cục trang chủ Error! Bookmark not defined Hình 2.1.2 Bố cục 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 lOMoARcPSD|17160101 Chương 1: Giới thiệu trang web thiết kế 1.1 Tổng Quan Xu hướng thức uống giới trẻ vơ quan tâm ưa thích trà sữa Mặc dù xuất từ lâu năm trở lại lại ăn khơng thể thiếu dịp chơi bạn bè người thân Trước có phát triển vượt bậc lĩnh vực công nghệ vận chuyển, phải chi nhánh, cửa hàng để mua cho thức uống ngon lạ Nhưng ngồi nhà thông qua trang web đặt hang cửa hang mà yêu thích để đặt cho thức uống mà u thích Vậy nên, nhóm chúng em chọn đề tài Thiết Kế Trang Web Bán Trà Sữa 1.2 .Các hệ thống tương tự Trang web lấy ý tưởng từ chuỗi cửa hàng trà sữa ToCoToCo – thương hiệu giới trẻ biết đến từ lâu Dưới số hình ảnh trang Web: Hình 1.2.1 Phần header trang chủ lOMoARcPSD|17160101 Hình 1.2.2 Phần body trang chủ Hình 1.2.3 Phần footer trang chủ lOMoARcPSD|17160101 1.3 Mục đích giải Phần trang chủ : - Để cho khách hàng thấy sản phẩm bật , chương trình khuyến - Để hình ảnh giới thiệu quán - Các phần để tìm kiếm “Cửa hàng”,”sản phẩm”… Phần oder: - Giúp khách tìm kiếm dễ dàng - Có hình ảnh minh họa - Có thể chọn số lượng - Dễ dàng toán CHƯƠNG 2: Thiết Kế Bố Cục Bố cục phần trang chủ lOMoARcPSD|17160101 Hình 2.1 Bố cục trang chủ - Phần Head gồm: logo section dẫn tới trang khác ( giới thiệu, order, tin tức, …) - Phần Body gồm: hình ảnh sản phẩm bật tag giá, đặt hàng ảnh sản phẩm - Phần Footer gồm: thông tin nhãn hiệu ( địa chỉ, hotline,…) Bố cục phần giới thiệu Hình 2.2 Bố cục phần giới thiệu - Phần Head gồm: logo section dẫn tới trang khác ( trang chủ, order, tin tức, …) - Phần Body gồm: Nội dung lịch sử phát triển hay thành tựu đạt số hình ảnh liên quan đến thương hiệu trà sữa lOMoARcPSD|17160101 - Phần Footer gồm: thông tin nhãn hiệu ( địa chỉ, hotline,…) Bố cục phần order Hình 2.3 Bố cục phần oder - Phần Head gồm có phần: logo cơng cụ tìm kiếm sản phẩm - Phần Body gồm có phần: • Phía bên trái có danh mục sản phẩm • Phần có hình ảnh sản phẩm, giá tiền sản phẩm ứng với danh mục sản phẩm • Phía bên phải sản phẩm lựa chọn hiển thị số lượng sản phẩm mà khách hang chọn Bố cục phần Vận Chuyển lOMoARcPSD|17160101 Hình 2.4 Bố cục phần vân chuyển - Phần Head gồm có phần: logo cơng cụ tìm kiếm Phần Body gồm phần sau: • Header bao gồm thẻ: nhận cửa hàng giao hàng tận nơi • Content bao gồm thẻ: o Phía bên trái điền thông tin khách hang ( người muốn đặt hàng ) ví dụ như: họ tên, số điện thoại, địa nhà…) o Phía bên phải hiển thị sản phẩm lựa chọn trang Order ( số lượng sản phẩm, giá tiền sản phẩm, khuyến mãi, tổng tiền cần toán) Cuối toán quay lại trang Order để lựa chọn them sản phẩm cần mua lOMoARcPSD|17160101 Bố cục phần Tin Tức Hình 2.5 Bố cục phần tin tức lOMoARcPSD|17160101 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, section nhỏ dẫn tới phần body Downloaded by Free Games Android (vuchinhhp1@gmail.com) lOMoARcPSD|17160101 -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 nhãn hàng Bố cục phần thêm số lượng topping Hình 2.7 Bố cục phần thêm số lượng topping -Phần header: có hình ảnh mơ tả sản phẩm ,tên sản phẩm ,giá tag điều chỉnh số lượng -Phần body:có tag để lựa chọn(% đá,%đường,topping,…) Downloaded by Free Games Android (vuchinhhp1@gmail.com) lOMoARcPSD|17160101 Chương 3: Kết Quả Thực Hiện Phần Trang Chủ 10 Downloaded by Free Games Android (vuchinhhp1@gmail.com) lOMoARcPSD|17160101 Hình 3.1.1 Demo trang chủ Phần Giới Thiệu 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) lOMoARcPSD|17160101 12 Downloaded by Free Games Android (vuchinhhp1@gmail.com) lOMoARcPSD|17160101 13 Downloaded by Free Games Android (vuchinhhp1@gmail.com) lOMoARcPSD|17160101 Hình 3.3.1 Demo phần Oder 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) lOMoARcPSD|17160101 Hình 3.4.1 Demo phần vân chuyển 15 Downloaded by Free Games Android (vuchinhhp1@gmail.com) ... Web Bán Trà Sữa 1.2 .Các hệ thống tương tự Trang web lấy ý tưởng từ chuỗi cửa hàng trà sữa ToCoToCo – thương hiệu giới trẻ biết đến từ lâu Dưới số hình ảnh trang Web: Hình 1.2.1 Phần header trang. .. PHIẾU CHẤM ĐIỂM STT Họ tên sinh viên Nguyễn Thành Công - Thiết kế layout thiết kế giao diên Công Lê Duy Chiến - Thiết kế layout thiết kế giao diện Chiến Họ tên giảng viên Giảng viên chấm 1: Giảng... Chương 1: Giới thiệu trang web thiết kế 1.1 Tổng Quan .1 1.2 .Các hệ thống tương tự 1.3 Mục đích giải .2 CHƯƠNG 2: Thiết Kế Bố Cục Bố cục phần trang chủ