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

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 Phạm Thành Đạt Phạm Quốc Đăng Khoa – 20DH111360 Nguyễn Thảo Nguyên Phan Thành Trung 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 - DOM addEventListener(‘click’) 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) - 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 toá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 - Việc kiểm tra trạng thái đăng nhập người dùng kiểm tra Javascript trạng thái đăng nhập lưu vào localStorage c) Trang Sản Phẩm - 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 tố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 - 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 PHÂN CÔNG 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ủ. .. localStorage c) Trang Sản Phẩm - 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