TIỂU LUẬN lập trình web CHỦ đề xây dựng giao diện cửa hàng bán hoa

' y -'Z’ HO CHl TRƯỜNG ĐẠI HỌC NGOẠI NGỮ - TIN HỌC THÀNH PHỒ HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO KẾT THÚC HỌC PHẦN HỌC KỲ II NĂM HỌC 2020-2021 MƠN THI: Lập Trình Web CHỦ ĐỀ: Xây dựng giao diện cửa hàng bán hoa Sinh viên thực hiện: Nguyễn Quang Nhật Huy - 20DH112005 Phạm Thành Đạt -20DH111506 Phạm Quốc Đăng Khoa - 20DH111360 Nguyễn Thảo Nguyên - 20DH111454 Phan Thành Trung - 20DH112160 Thành phố Hồ Chí Minh, tháng 06 năm 2021 MOCKUP Trang Đăng Nhập Trang Chủ Trang Sản Phấm Trang Liên Hệ Trang Thanh Toán NỘI DUNG Giới Thiệu - Đây trang web bán hoa Online , giao diện thiết kế chủ yếu CSS Bootstrap - Chức trang web hoạt động dựa Javascript, JSON LocalStorage, đồng thời kết hợp số chương trình thứ ba Firebase API spreadsheets Trang Web a) Trang Đăng Nhập Trang đăng nhập gồm chức đăng ký, đăng nhập, quên mật hoạt động thực tế (không phải mô phỏng) ợ Search by email address, phone number, or User UID Identiíier Providers 111133@gmail.com s Jan 12,2022 dan 12,2022 ducknoodles2002@gmail s Jan7,2022 Jan 11,2022 Jan 6,2022 Rows per page: 50 ▼ Jan 11,2022 - of huynguỵnquangnht2002@ - s Created ị Signed In UserUID Ks7zT9aRQEPattTuOcpfSCDJoJd 288oWjhkxePelG1tXZPku6ncLfj1 TR9r0f KXLScpkDSN RI W1 u2egK Thông tin tài khoản lưu vào trang web thứ ba tên Firebase Các chức đăng nhập, đăng ký hoạt động dựa hàm có sẵn Firebase import vào Javascript - Các giá trị từ input field lấy sử dụng Javascript cách ứng dụng DOM, nút chèn Event Listener (‘click’) để chạy hàm từ Firebase - Nút dành cho khách tham quan nút cho phép người dùng xem trang web sản phẩm khơng cho người dùng tốn trừ đăng nhập b) Trang Chủ Navbar Carousel Slider Embeded Video - Trang chủ giao diện đẹp mắt, cho khách hàng nhìn sơ sản phẩm shop Được thiết kế chủ yếu bàng Bootstrap CSS - Khi load trang chủ việc kiểm tra người dùng đăng nhập chưa, chưa thơng báo, khơng đăng nhập navbar đổi thành đăng xuất Trang cho biết Bạn Chưa Đăng Nhập ĐĂNG XUẤT - Việc kiểm tra trạng thái đăng nhập người ĐĂNG NHẬP dùng kiểm tra Javascript trạng thái đăng nhập lưu vào localStorage c) Trang Sản Phẩm Các nút có ứng Các Ơ Sản Phẩm DOM - Trang sản phẩm giao diện trưng bày sản phẩm buôn bán, ô sản phẩm bao gồm : hình ảnh, nút xem chi tiết nút thêm sản phẩm vào giỏ hàng - Nút xem chi tiết hiển thị pop-up modal (Bootstrap 4) chứa thông tin chi tiết sản phẩm - Nút thêm vào giỏ thêm sản phẩm chọn vào giỏ hàng phía trang sản phẩm - Trong giỏ hàng chứa tên sản phẩm, giá bán số lượng sản phẩm, đồng thời có nút xóa sản phẩm để xóa sản phẩm khỏi giỏ hàng - Các nút thêm vào giỏ, xóa sản phẩm nút tốn thêm xóa sản phẩm Javascript DOM, tổng tiền cập nhật giỏ hàng có thay đổi - Nút toán lưu tổng tiền vào localStorage đưa người dùng đến trang toán trạng thái đăng nhập true, ngược lại lên thông báo đưa khách trở trang đăng nhập Value loginStatus totalPrice true 185000 ► ► ▼ [{title: "Hoa Hồng", price: "850000đ"{title: "Hoa Hướng Dương", price 0: {title: "Hoa Hồng", price: ”850000đ", } 1: {tỉtle: "Hoa Hướng Dương", price: "1000000đ", } - Khi thoát khỏi trang, reload trang, thông tin sản phẩm thêm vào giỏ trước khơng bị xóa Việc thực cách dùng JSON để tạo object lưu object vào localStorage Các thông tin cũ xuất trang load - Ngoài trang sản phẩm cịn có nút đưa khách hàng đến giỏ hàng nút ẩn giỏ hàng d) Trang Liên Hệ - Trang liên hệ bao gồm + Bộ phận hỗ trợ khách hàng, có chứa hình ảnh nhân viên với tên số điện thoại liên lạc + Phần review shop : phần mô chức viết review khách hàng e) Trang Thanh Tốn - Gồm fields để điền thơng tin để khách hàng nhập thông tin cá nhân địa chỉ, thơng tin thẻ tín dụng, v.v - Sau bấm nút tốn phía , tất thông tin form chuyển đến Google sheets mail shop Chức thực cách ứng dụng API spreadsheets hàm import từ API spreadsheets PHAN CONG Nguyễn Quang Nhật Huy - 20DH112005 : - Thiết kế trang chủ - Thiết kế trang sản phẩm - Javascript trang login - Javascript trang sản phẩm - Nghiên cứu Firebase Phạm Thành Đạt - 20DH111506 : - Thiết kế trang toán - Javascript trang toán - Làm báo cáo - Thuyết trình Phạm Quốc Đăng Khoa - 20DH111360 : - Vẽ Mockup - Thiết kế trang login - Thiết kế trang sản phẩm - Thiết kế trang chủ Nguyễn Thảo Nguyên - 20DH111454 : - Tìm kiếm hình ảnh, chi tiết sản phẩm - Thiết kế trang login - Thiết kế trang sản phẩm Thiết kế trang chủ Phan Thành Trung - 20DH112160 : - Thiết kế trang liên hệ - Nghiên cứu API spreadsheets - Javascript trang toán - Thiết kế trang chủ ... Trang Đăng Nhập Trang Chủ Trang Sản Phấm Trang Liên Hệ Trang Thanh Toán NỘI DUNG Giới Thiệu - Đây trang web bán hoa Online , giao diện thiết kế chủ yếu CSS Bootstrap - Chức trang web hoạt động dựa... trang web sản phẩm khơng cho người dùng tốn trừ đăng nhập b) Trang Chủ Navbar Carousel Slider Embeded Video - Trang chủ giao diện đẹp mắt, cho khách hàng nhìn sơ sản phẩm shop Được thiết kế chủ. .. ứng Các Ơ Sản Phẩm DOM - Trang sản phẩm giao diện trưng bày sản phẩm buôn bán, ô sản phẩm bao gồm : hình ảnh, nút xem chi tiết nút thêm sản phẩm vào giỏ hàng - Nút xem chi tiết hiển thị pop-up