TIỂU LUẬN MÔN HỌC: THIẾT KẾ WEB THIẾT KẾ WEBSITE TRÀ SỮA BÌNH DƯƠNG

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT – CÔNG NGHỆ TIỂU LUẬN MÔN HỌC THIẾT KẾ WEB THIẾT KẾ WEBSITE TRÀ SỮA BÌNH DƯƠNG GVHD: THS NGUYỄN HỮU VĨNH SVTH: LƯU BÁ ĐỨC MSSV: 1824801030189 LỚP: D18PM03 BÌNH DƯƠNG – 7/2020 KHOA KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN Họ tên giảng viên: Nguyễn Hữu Vĩnh Tên đề tài: THIẾT KẾ WEBSITE TRÀ SỮA BÌNH DƯƠNG Nội dung nhận xét: Điểm: Bằng số: Bằng chữ: GIẢNG VIÊN CHẤM (Ký, ghi rõ họ tên) NGUYỄN HỮU VĨNH Đồ án mơn thiết kế web LỜI NĨI ĐẦU Hiện nay, giới công nghệ thông tin thương mại điện tử phát triển mạnh mẽ Kỹ thuật số giúp tiết kiệm đáng kể chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch đặc biệt giúp tiết kiệm thời gian để người đầu tư vào hoạt động khác Hơn nữa, thương mại điện tử giúp người tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp thơng tin theo nhu cầu sở thích người Giờ đây, người ngồi nhà để mua sắm thứ theo ý muốn website bán hàng mạng giúp ta làm điều Chính vậy, cơng nghệ mã nguồn mở trở nên ý tính Giá thành rẻ hỗ trợ nhiều mạng giúp ta nhanh chóng Thiết kế website bán hàng thân thiện dễ sử dụng với người dùng Chính báo cáo chọn đề tài về: “Thiết kế website trà sữa Bình Dương” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng Thiết kế ứng dụng bán hàng Internet Đề tài tiểu luận gồm phần phân chương sau: Chương 1: Tổng quan đề tài Chương 2: Giới thiệu công nghệ Chương 3: Giao diện website Chương 4:Kết luận hướng phát triển SVTH: LƯU BÁ ĐỨC-D18PM03 i Đồ án mơn thiết kế web MỤC LỤC LỜI NĨI ĐẦU i DANH MỤC HÌNH iv CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1 Tên Đề Tài Mục Tiêu Đề Tài Ý Nghĩa Của Đề Tài Đối Tượng Của Đề Tài Một Số Trang Chính Của Website CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML ? 1.2 Công Dụng HTML 1.3 Định dạng HTML 2 Giới thiệu Adobe Dreamwweaver Ngôn ngữ CSS Ngôn ngữ Javacript CHƯƠNG GIAO DIỆN CHƯƠNG TRÌNH 1.Đặc Tả Giao Diện 1.1 Giao diện trang chủ 1.2 Giao diện trang giới thiệu 1.3 Giao diện trang sản phẩm 1.4 Giao diện trang đăng ký 1.5 Giao diện trang đăng nhập 1.6 Giao diện trang danh mục Các Hãng Nước 10 1.6.1 Giao diện danh mục Phúc Long 11 1.6.2 Giao diện danh mục HighLand 12 1.6.3 Giao diện danh mục GongCha 13 1.7 Giao diện danh mục Trà Sữa Theo Mức Giá 13 1.7.1 Giao diện danh mục Trên 60.000 VNĐ 14 1.7.2 Giao diện danh mục Từ 50.000-60.000 VNĐ 15 SVTH: LƯU BÁ ĐỨC-D18PM03 ii Đồ án môn thiết kế web 1.7.3 Giao diện danh mục Từ 40.000-50.000 VNĐ 16 1.7.4 Giao diện danh mục Từ 30.000-40.000 VNĐ 17 1.7.5 Giao diện danh mục Dưới 30.000 VNĐ 18 1.8 Giao diện trang chi tiết Các Hãng Nước 19 1.8.1 Chi tiết nước Trà Đào Phúc Long 19 1.8.1 Chi tiết nước Dâu Ép 20 1.8.3 Chi tiết nước Trà Cocktail 20 1.8.4 Chi tiết nước Cà Phê Phúc Bồn Tử Hạnh Nhân 21 1.8.5 Chi tiết nước Trà Thạch Vải 21 1.8.6 Chi tiết nước Classic Phin Freeze 22 1.8.7 Chi tiết nước Trà Sen Vàng 22 1.8.8 Chi tiết nước Bạc Xỉu Đá 23 1.8.9 Chi tiết nước Phin Đen Đá 23 1.8.10 Chi tiết nước Phin Sữa Đá 24 1.8.11 Chi tiết nước Trà Oolong Long Nhãn Táo Đỏ 24 1.8.12 Chi tiết nước Trà Đen Tắc Mật Ong 25 1.8.13 Chi tiết nước Thiết Quan Âm Đường Nâu Latte 25 1.8.14 Chi tiết nước Sữa Tươi Long Nhãn Táo Đỏ 26 1.8.15 Chi tiết nước Trà Xanh Long Nhãn Táo Đỏ 26 1.8.16 Chi tiết nước Trà Sữa Gạo Rang 27 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 28 Kết đạt 28 Việc chưa làm 28 Hướng phát triển đề tài 28 TÀI LIỆU THAM KHẢO 30 SVTH: LƯU BÁ ĐỨC-D18PM03 iii Đồ án môn thiết kế web DANH MỤC HÌNH Hình 1.1 Giao diện trang chủ Hình 1.2 Giao diện trang giới thiệu Hình 1.3 Giao diện trang sản phẩm Hình 1.4 Giao diện trang đăng ký Hình 1.5 Giao diện trang đăng nhập 10 Hình 1.6 Giao diện trang danh mục Các Hãng Nước 10 Hình 1.6.1 Giao diện danh mục Phúc Long 11 Hình 1.6.2 Giao diện danh mục HighLand 12 Hình 1.6.3 Giao diện danh mục GongCha 13 Hình 1.7 Giao diện danh mục Trà Sữa Theo Mức Giá 13 Hình 1.7.1 Giao diện danh mục Trên 60.000 VNĐ 14 Hình 1.7.2 Giao diện danh mục Từ 50.000-60.000 VNĐ 15 Hình 1.7.3 Giao diện danh mục Từ 40.000-50.000 VNĐ 16 Hình 1.7.4 Giao diện danh mục Từ 30.000-40.000 VNĐ 17 Hình 1.7.5 Giao diện danh mục Dưới 30.000 VNĐ 18 Hình 1.8 Giao diện trang chi tiết Các Hãng Nước 19 Hình 1.8.1 Chi tiết nước Trà Đào Phúc Long 19 Hình 1.8.2 Chi tiết nước Dâu Ép 20 Hình 1.8.3 Chi tiết nước Trà Cocktail 20 Hình 1.8.4 Chi tiết nước Cà Phê Phúc Bồn Tử Hạnh Nhân 21 Hình 1.8.5 Chi tiết nước Trà Thạch Vải 21 Hình 1.8.6 Chi tiết nước Classic Phin Freeze 22 Hình 1.8.7 Chi tiết nước Trà Sen Vàng 22 Hình 1.8.8 Chi tiết nước Bạc Xỉu Đá 23 Hình 1.8.9 Chi tiết nước Phin Đen Đá 23 Hình 1.8.10 Chi tiết nước Phin Sữa Đá 24 Hình 1.8.11 Chi tiết nước Trà Oolong Long Nhãn Táo Đỏ 24 Hình 1.8.12 Chi tiết nước Trà Đen Tắc Mật Ong 25 Hình 1.8.13 Chi tiết nước Thiết Quan Âm Đường Nâu Latte 25 Hình 1.8.14 Chi tiết nước Sữa Tươi Long Nhãn Táo Đỏ 26 SVTH: LƯU BÁ ĐỨC-D18PM03 iv Đồ án mơn thiết kế web Hình 1.8.15 Chi tiết nước Trà Xanh Long Nhãn Táo Đỏ 26 Hình 1.8.16 Chi tiết nước Trà Sữa Gạo Rang .27 SVTH: LƯU BÁ ĐỨC-D18PM03 v Đồ án môn thiết kế web DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT Từ viết tắt Giải thích CSDL Cơ sở liệu ĐVT Đơn vị tính CNTT Cơng Nghệ thơng tin SP Sản phẩm SVTH: LƯU BÁ ĐỨC-D18PM03 vi Đồ án môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE TRÀ SỮA BÌNH DƯƠNG Mục Tiêu Đề Tài + Thiết kế Website bán trà sữa TRÀ SỮA BÌNH DƯƠNG Ý Nghĩa Của Đề Tài + Bán sản phẩm nước chất lượng tới người tiêu dùng + Quảng bá thương hiệu Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu sản phẩm nước uống, trà sữa Một Số Trang Chính Của Website + Trang chủ: Đây trang giới thiệu sơ lược sản phẩm cửa hàng + Trang Giới thiệu: Đây trang giúp cho khách hàng xem biết thêm thông tin cửa hàng + Trang Sản Phẩm: Đây trang mà khách hàng liên hệ với cửa hàng + Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng trang + Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm trang + Trang sản phẩm: Đây trang khách hàng xem tham khảo mặt hàng cửa hàng có sẵn để lựa chọn + Trang chi tiết hãng nước: Đây trang khách hàng nhấn vào sản phẩm để xem chi tiết SVTH: LƯU BÁ ĐỨC-D18PM03 Đồ án môn thiết kế web CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? HTML (Hypertext Markup Language-Ngơn ngữ đánh dấu siêu văn bản) ngôn ngữ đánh dấu chuẩn dùng soạn thảo tài liệu World Wide Web, rõ trang Web hiển thị trình duyệt Ngôn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần trang text graphics HTML ngôn ngữ xác định cấu trúc thông tin HTML sử dụng loạt thẻ thuộc tính dùng để thị văn thông tin khác, cung cấp siêu liên kết tới tài liệu khác 1.2 Công dụng HTML Thiết kế nội dung hình thức trang web Xuất tài liệu trực tuyến hay truy xuất thông tin trực tuyến cách dùng liên kết chèn vào trang web Tạo biểu mẫu trực tuyến nhằm thu thập thông tin người dùng, quản lý giao dịch… Thêm vào đối tượng hình ảnh video, âm thanh… 1.3 Định dạng HTML Là tập tin có phần mở rộng htm html Là tập tin văn túy, có chứa mã đặc biệt gọi Tag(thẻ), thường đặt xung quanh khối văn Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, notepad…và sử dụng nhiều adobe dreamweaver Giới thiệu Adobe Dreamweaver Macromedia Dreamweaver trình biên soạn HTML chuyên nghiệp dùng để thiết kế, viết mã phát triển website trang web ứng dụng web Cho dù bạn có thích thú với cơng việc viết mã HTML thủ cơng bạn thích làm việc mơi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn cơng cụ hữu ích để nâng cao kinh nghiệm thiết kế web bạn Các tính biên soạn trực quan Dreamweaver cho phép bạn tạo nhanh trang web mà khơng cần dịng mã Bạn xem tất thành phần SVTH: LƯU BÁ ĐỨC-D18PM03 Đồ án môn thiết kế web 1.7.3 Giao diện danh mục áo thể Từ 40.000-50.000 VNĐ Hình 1.7.3 Giao diện danh mục Từ 40.000-50.000 VNĐ SVTH: LƯU BÁ ĐỨC-D18PM03 15 Đồ án môn thiết kế web 1.7.4 Giao diện danh mục Từ 30.000-40.000 VNĐ Hình 1.7.4 Giao diện danh mục Từ 30.000-40.000 VNĐ SVTH: LƯU BÁ ĐỨC-D18PM03 16 Đồ án môn thiết kế web 1.7.5 Giao diện danh mục Dưới 30.000 VNĐ Hình 1.7.5 Giao diện danh mục Dưới 30.000 VNĐ 1.8 Giao diện trang chi tiết Các Hãng Nước SVTH: LƯU BÁ ĐỨC-D18PM03 17 Đồ án môn thiết kế web  Mục đích: Chức cho phép người dùng xem tên sản phẩm, giá, thông tin chi tiết sản phẩm  Trong giao diện cho người dùng, chọn hiển thị theo Sản Phẩm kích chọn trang chủ 1.8.1 Chi tiết nước Trà Đào Phúc Long Hình 1.8.1 Giao diện trang chi tiết nước Trà Đào Phúc Long 1.8.2 Chi tiết nước Dâu Ép SVTH: LƯU BÁ ĐỨC-D18PM03 18 Đồ án môn thiết kế web Hình 1.8.2 Giao diện trang chi tiết nước Dâu Ép 1.8.3 Chi tiết nước Trà Cocktail Hình 1.8.3 Giao diện trang chi tiết nước Trà Cocktail 1.8.4 Chi tiết Cà Phê Phúc Bồn Tử Hạnh Nhân SVTH: LƯU BÁ ĐỨC-D18PM03 19 Đồ án mơn thiết kế web Hình 1.8.4 Giao diện trang chi tiết Cà Phê Phúc Bồn Tử Hạnh Nhân 1.8.5 Chi tiết nước Trà Thạch Vải Hình 1.8.5 Giao diện trang chi tiết nước Trà Thạch Vải SVTH: LƯU BÁ ĐỨC-D18PM03 20 Đồ án môn thiết kế web 1.8.6 Chi tiết nước Classic Phin Freeze Hình 1.8.6 Giao diện trang chi tiết Classic Phin Freeze 1.8.7 Chi tiết nước Trà Sen Vàng Hình 1.8.7 Giao diện trang chi tiết nước Trà Sen Vàng SVTH: LƯU BÁ ĐỨC-D18PM03 21 Đồ án môn thiết kế web 1.8.8 Chi tiết nước Bạc Xỉu Đá Hình 1.8.8 Giao diện trang chi tiết nước Bạc Xỉu Đá 1.8.9 Chi tiết nước Phin Đen Đá Hình 1.8.9 Giao diện trang chi tiết Phin Đen Đá SVTH: LƯU BÁ ĐỨC-D18PM03 22 Đồ án môn thiết kế web 1.8.10 Chi tiết nước Phin Sữa Đá Hình 1.8.10 Giao diện trang chi tiết nước Phin Sữa Đá 1.8.11 Chi tiết nước Trà Oolong Long Nhãn Táo Đỏ Hình 1.8.11 Giao diện trang chi tiết nước Trà Oolong Long Nhãn Táo Đỏ SVTH: LƯU BÁ ĐỨC-D18PM03 23 Đồ án môn thiết kế web 1.8.12 Chi tiết nước Trà Đen Tắc Mật Ong Hình 1.8.12 Giao diện trang chi tiết nước Trà Đen Tắc Mật Ong 1.8.13 Chi tiết nước Thiết Quan Âm Đường Nâu Latte Hình 1.8.13 Giao diện trang chi tiết nước Thiết Quan Âm Đường Nâu Latte SVTH: LƯU BÁ ĐỨC-D18PM03 24 Đồ án môn thiết kế web 1.8.14 Chi tiết nước Sữa Tươi Long Nhãn Táo Đỏ Hình 1.8.14 Giao diện trang chi tiết nước Sữa Tươi Long Nhãn Táo Đỏ 1.8.15 Chi tiết nước Trà Xanh Long Nhãn Táo Đỏ Hình 1.8.15 Giao diện trang chi tiết nước Trà Xanh Long Nhãn Táo Đỏ SVTH: LƯU BÁ ĐỨC-D18PM03 25 Đồ án môn thiết kế web 1.8.16 Chi tiết nước Trà Sữa Gạo Rang Hình 1.8.16 Giao diện trang chi tiết nước Trà Sữa Gạo Rang SVTH: LƯU BÁ ĐỨC-D18PM03 26 Đồ án môn thiết kế web CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trong thời buổi cơng nghiệp hóa nay, việc buôn bán qua mạng trở nên phổ biến với hầu hết người Đây xu hướng xã hội người với cú nhấp chuột dễ dàng đặt mua sản phầm mà ưng ý cách dễ dàng thời gian đến tận nơi để mua Việc mua bán giúp tiết kiệm thời gian tiền bạc người lựa chọn sản phẩm với giá đa dạng nhu cầu cá nhân người Vì thế, sau tiến hành khảo sát em định Thiết kế trang web bán trà sữa mà cụ thể “Thiết kế website trà sữa Bình Dương ”với chức cần thiết cho trang web bn bán cần có em thấy nhu cầu mua sắm thị trường tiềm khai thác bn bán Website “TRÀ SỮA BÌNH DƯƠNG” thứ dùng để quảng bá rộng rãi sản phẩm tốt , thứ hai kênh thông tin cho người, thứ ba địa tin cậy để khách hàng yêu thích trà sữa tìm mua cho sản phẩm nước uống chất lượng Qua trình nghiên cứu cố gắng thực hướng dẫn tận tình Giảng viên, giúp đỡ bạn bè khóa học đồ án nghiên cứu thể điều sau: Kết đạt được: - Thiết kế thành công website bán trà sữa, đáp ứng yêu cầu người sử dụng - Tìm hiểu nắm công cụ để Thiết kế website như: Adobe Dreamweaver CS6, ngơn ngữ lập trình Website như: HTML, Javascript, CSS - Giao diện website thiết kế đơn giản, thân thiện dễ sử dụng Việc chưa làm được: - Việc biểu diễn thông tin website chưa linh hoạt - Phân tích thiết kế chưa hồn chỉnh - Nhiều chức cịn thiếu chưa sử dụng Hướng phát triển đề tài Vì thời gian khơng cho phép kiến thức thiết kế web hạn chế nên chúng em chưa tìm hiểu rõ kỹ đề tài Vì đề tài cịn có nhiều thiếu sót, mong thầy giúp đỡ chúng em nhiều em tiếp tục tìm hiểu sâu cơng nghệ này, nhằm mục đích Thiết kế website: SVTH: LƯU BÁ ĐỨC-D18PM03 27 Đồ án môn thiết kế web  Giao diện đẹp, thân thiện với người dùng, có nhiều chức tương tác tốt với người dùng  Thiết kế, bổ sung tính cịn thiếu hay chưa thật hồn chỉnh q trình sử dụng SVTH: LƯU BÁ ĐỨC-D18PM03 28 Đồ án môn thiết kế web TÀI LIỆU KHAM KHẢO - Tài liệu giảng môn “Thiết kế website” thầy Nguyễn Hữu Vĩnh - Website WWW: http://www.hiepsiit.com - Website https://coccoc.com/search#query=Webcoban.vn SVTH: LƯU BÁ ĐỨC-D18PM03 29