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

Các chức năng đăng nhập, đăng ký đều hoạt động dựa trên các hàm có sẵn của Firebase được import vào Javascript.. - Nút dành cho khách tham quan là nút cho phép người dùng xem trang web v

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

1 Trang Đăng Nhập

2 Trang Chủ

3 Trang Sản Phẩm

4 Trang Liên Hệ

5 Trang Thanh Toán

NỘI DUNG

1 Giới Thiệu

- Đây là trang web bán hoa online , giao diện được thiết kế chủ yếu bằng CSS và Bootstrap 4

- Chức năng của trang web hoạt động dựa trên Javascript, JSON và

LocalStorage, đồng thời kết hợp một số chương trình thứ ba như Firebase và API spreadsheets

2 Trang Web

a) Trang Đăng Nhập

-Trang đăng nhập gồm các chức năng đăng ký, đăng nhập, quên mật khẩu và có thể hoạt động thực tế (không phải mô phỏng)

- Thông tin tài khoản sẽ được lưu vào một trang web thứ ba tên là Firebase Các chức năng đăng nhập, đăng ký đều hoạt động dựa trên các hàm có sẵn của Firebase được import vào Javascript

- Các giá trị từ input field được lấy về sử dụng trên Javascript bằng cách ứng dụng DOM, các nút được chèn Event Listener (‘click’) để chạy các hàm từ Firebase

- Nút dành cho khách tham quan là nút cho phép người dùng xem trang web và các sản phẩm nhưng không cho người dùng thanh toán trừ khi đăng nhập

b) Trang Chủ

- Trang chủ là giao diện đẹp mắt, cho khách hàng nhìn sơ bộ các sản phẩm của

shop Được thiết kế chủ yếu bàng Bootstrap 4 và CSS

- Khi load trang chủ việc đầu tiên kiểm tra là người dùng đã đăng nhập chưa, nếu chưa thì hiện thông báo, nếu rồi thì không hiện và nếu đăng nhập trên navbar đổi thành đăng xuất

Navbar

Carousel Slider

Embeded Video

- Việc kiểm tra trạng thái đăng nhập của người dùng được kiểm tra bằng Javascript

và trạng thái đăng nhập được lưu vào localStorage

c) Trang Sản Phẩm

- Trang sản phẩm là giao diện trưng bày các sản phẩm được buôn bán, một ô sản

phẩm bao gồm : hình ảnh, nút xem chi tiết và 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 của

các sản phẩm

- Nút thêm vào giỏ thêm sản phẩm được chọn vào giỏ hàng ở phía dưới của trang

sản phẩm

- Trong giỏ hàng chứa tên sản phẩm, giá bán và 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 Ô Sản

Phẩm

Các nút có ứng dụng JavaScript

và DOM

- Các nút thêm vào giỏ, xóa sản phẩm và nút thanh toán thêm và xóa sản phẩm bằng Javascript và DOM, và tổng tiền sẽ được cập nhật mỗi khi giỏ hàng có thay đổi

- Nút thanh toán sẽ lưu tổng tiền vào localStorage và đưa người dùng đến trang thanh toán nếu trạng thái đăng nhập là true, ngược lại sẽ hiện lên thông báo và đưa khách trở về trang đăng nhập

- Khi thoát khỏi trang, hoặc reload trang, thông tin của các sản phẩm đã thêm vào giỏ trước đó sẽ không bị xóa đi Việc này được thực hiện bằng cách dùng JSON để tạo object và lưu object vào localStorage Các thông tin cũ được xuất ra mỗi khi trang load

- Ngoài ra trang sản phẩm còn có nút đưa khách hàng đến giỏ hàng và nút ẩn hiệ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 các nhân viên cùng với tên và số điện thoại liên lạc

+ Phần review về shop : là phần mô phỏng một chức năng viết review của khách hàng

e) Trang Thanh Toán

- Gồm các fields để điền thông tin để khách hàng nhập thông tin cá nhân như địa

chỉ, thông tin thẻ tín dụng, v.v

- Sau khi bấm nút thanh toán ở phía dưới , tất cả thông tin trong form sẽ được chuyển đến Google sheets trong mail của shop Chức năng này được thực hiện bằng cách ứng dụng API spreadsheets và các hàm được 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 về Firebase

Phạm Thành Đạt – 20DH111506 :

- Thiết kế trang thanh toán

- Javascript trang thanh 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 về API spreadsheets

- Javascript trang thanh toán

- Thiết kế trang chủ