Thiết kế và xây dựng website highland coffee

GVHD: TS. Nguyễn Trần Quốc Vinh

SVTH: Lê Nho Thắng

Lớp học phần: 17CNTTC

TRƯỜNG ĐẠI HỌC SƯ PHẠM ĐÀ NẴNG

KHOA TIN HỌC

BÁO CÁO KHÓA LUẬN TỐT NGHIỆP

Đề tài: THIẾT KẾ VÀ XÂY DỰNG

WEBSITE HIGHLAND COFFEE

Đà Nẵng, ngày … tháng 04 năm 2021

1

SVTH: Lê Nho Thắng – Lớp: 17CNTTC 2

1 MỤC LỤC

MỤC LỤC .................................................................................................................................2

DANH MỤC HÌNH ẢNH ........................................................................................................4

LỜI CẢM ƠN ...........................................................................................................................6

MỞ ĐẦU..................................................................................................................................10

I. Lý do chọn đề tài.........................................................................................................10

II. Mục tiêu.......................................................................................................................11

1. Mục tiêu chung. ............................................................................................................11

2. Mục tiêu đề tài ..............................................................................................................11

3. Kết quả dự kiến.............................................................................................................12

III. Đối tượng và phạm vi đề tài.......................................................................................12

1. Đối tượng nghiên cứu...................................................................................................12

2. Phạm vi đề tài. ..............................................................................................................12

3. Phương pháp nghiên cứu ..............................................................................................12

IV. Tiêu chí của đề tài.......................................................................................................13

Chương I: TỔNG QUAN VỀ CÔNG NGHỆ ......................................................................14

I. Tổng quan về HTML5/CSS3/JS................................................................................14

1. Sơ lược về HTML5.......................................................................................................14

2. Sơ lược về CSS3...........................................................................................................17

3. Sơ lược về Js (JavaScript) ............................................................................................19

II. React Js........................................................................................................................22

III. Cơ sở dữ liệu NoSQL và Firebase Firestore ............................................................23

1. Cơ sở dữ liệu NoSQL...................................................................................................23

2. Firebase Firestore. ........................................................................................................25

Chương II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .....................................................27

I. Giới thiệu bài toán......................................................................................................27

1. Khảo sát ........................................................................................................................27

2. Phương pháp thu thập dữ liệu.......................................................................................28

II. Phân tích hệ thống......................................................................................................28

1. Mô tả bài toán...............................................................................................................28

2. Biều đồ thuần tự ...........................................................................................................29

3. Biều đồ hoạt động.........................................................................................................35

4. Biều đồ trang thái .........................................................................................................40

III. Mô tả hệ thống.............................................................................................................44

1. Hoạt động website ........................................................................................................44

2. Yêu cầu về chức năng...................................................................................................45

1

SVTH: Lê Nho Thắng – Lớp: 17CNTTC 3

3. Yêu cầu về phi chức năng.............................................................................................45

4. Bảng Demo các yêu cầu chức năng..............................................................................46

5. Mô hình dữ liệu ............................................................................................................47

Chương III: KẾT QUẢ VÀ CÀI ĐẶT WEBSITE..............................................................50

I. Giao diện website........................................................................................................50

II. Giao diện người dùng.................................................................................................52

III. Giao diện quản trị viên...............................................................................................54

KẾT LUẬN .............................................................................................................................56

I. Kết quả đạt được ........................................................................................................56

II. Hạn chế của đề tài.......................................................................................................56

III. Hướng phát triển ........................................................................................................56

1

SVTH: Lê Nho Thắng – Lớp: 17CNTTC 4

DANH MỤC HÌNH ẢNH

Hình 1: Các loại biến................................................................................................................20

Hình 2: Các loại toán tử............................................................................................................20

Hình 3: Hàm .............................................................................................................................21

Hình 4: Ví dụ về Virtual DOM.................................................................................................22

Hình 5: Cơ chế one-way data binding ......................................................................................22

Hình 6: Các loại cơ sở dữ liệu NoSQL.....................................................................................24

Hình 7: Phân biệt cơ sở dữ liệu SQL và NoSQL......................................................................25

Hình 8: Sơ đồ Use-case ............................................................................................................28

Hình 9: Sơ đồ thuần tự - Đăng nhập.........................................................................................30

Hình 10: Sơ đồ thuần tự - Đăng ký...........................................................................................31

Hình 11: Sơ đồ thuần tự - Tìm kiếm.........................................................................................32

Hình 12: Sơ đồ thuần tự - Chỉnh sửa thông tin.........................................................................32

Hình 13: Sơ đồ thuần tự - Đặt hàng và thanh toán ...................................................................33

Hình 14: Sơ đồ thuần tự - Quản lý người dùng ........................................................................34

Hình 15: Sơ đồ thuần tự - Thống kê .........................................................................................34

Hình 16: Sơ đồ hoạt động - Đăng nhập ....................................................................................35

Hình 17: Sơ đồ hoạt động - Đăng ký........................................................................................36

Hình 18: Sơ đồ hoạt động - Tìm kiếm......................................................................................37

Hình 19: Sơ đồ hoạt động - Chỉnh sửa thông tin......................................................................37

Hình 20: Sơ đồ hoạt động - Đặt hàng và thanh toán ................................................................38

Hình 21: Sơ đồ hoạt động - Quản lý người dùng .....................................................................39

Hình 22: Sơ đồ hoạt động - Thống kê ......................................................................................40

Hình 23: Sơ đồ trạng thái - Đăng nhập.....................................................................................41

Hình 24: Sơ đồ trạng thái - Đăng ký ........................................................................................42

Hình 25: Sơ đồ trạng thái - Tìm kiếm ......................................................................................43

Hình 26: Sơ đồ trạng thái - Chỉnh sửa thông tin.......................................................................44

Hình 27: Sơ đồ trạng thái - Quản lý người dùng......................................................................44

Hình 28: Sơ đồ lớp ...................................................................................................................47

Hình 29: Firebase - bảng sản phẩm ..........................................................................................48

Hình 30: Firebase - bảng người dùng.......................................................................................48

Hình 31: Firebase - Bảng chi nhánh, tọa độ .............................................................................49

Hình 32: Giao diện - Trang chủ................................................................................................50

Hình 33: Giao diện - Về chúng tôi ...........................................................................................50

Hình 34: Giao diện - Tin tức ....................................................................................................51

1

SVTH: Lê Nho Thắng – Lớp: 17CNTTC 5

Hình 35: Giao diện - Món yêu thích.........................................................................................51

Hình 36: Giao diện - Giỏ hàng .................................................................................................51

Hình 37: Giao diện - Đăng ký ..................................................................................................52

Hình 38: Giao diện - Đăng nhập...............................................................................................52

Hình 39: Giao diện - Sản phẩm ................................................................................................52

Hình 40: Giao diện - Chi nhánh................................................................................................53

Hình 41: Giao diện - Chọn đồ đi kèm ......................................................................................53

Hình 42: Giao diện - Chức năng call now................................................................................54

Hình 43: Giao diện - Quản lý sản phẩm...................................................................................54

Hình 44: Giao diện - Quản lý người dùng................................................................................54

Hình 45: Giao diện - Quản lý chi nhánh...................................................................................55