(Đồ án hcmute) xây dựng website đặt vé xem phim sử dụng mern stack

PHẠM VI NGHIÊN CỨU Đề tài này chủ yếu đi tập trung vào việc xử lý các nghiệp vụ cơ bản của một website như là xem thông tin phim, thực hiện việc đặt vé, lưu lịch sử giao dịch,… Về phần

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

NGÀNH CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM

SỬ DỤNG MERN STACK

SVTH: NGUYỄN THU NGÂN

NGUYỄN NHƯ BẢO PHƯƠNG GVHD: TS LÊ VĂN NINH

S K L 0 1 0 5 4 6

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

- -

KHÓA LUẬN TỐT NGHIỆP

GVHD: TS Lê Văn Vinh

Sinh viên thực hiện:

Khóa: 2018 Ngành: CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM

SỬ DỤNG MERN STACK

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

- -

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM

SỬ DỤNG MERN STACK

GVHD: TS Lê Văn Vinh

Sinh viên thực hiện:

Khóa: 2018 Ngành: CÔNG NGHỆ THÔNG TIN

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Nguyễn Thu Ngân MSSV 1: 18110161

Họ và tên Sinh viên 2: Nguyễn Như Bảo Phương MSSV 2: 18110180

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng website đặt vé xem phim sử dụng MERN Stack

Họ và tên Giáo viên hướng dẫn: TS Lê Văn Vinh

Tp Hồ Chí Minh, ngày tháng 12 năm 2022

Giáo viên hướng dẫn

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Nguyễn Thu Ngân MSSV 1: 18110161

Họ và tên Sinh viên 2: Nguyễn Như Bảo Phương MSSV 2: 18110180

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng website đặt vé xem phim sử dụng MERN Stack

Họ và tên Giáo viên phản biện: thầy Nguyễn Đức Khoan

Tp Hồ Chí Minh, ngày tháng 12 năm 2022

Giáo viên phản biện (Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Lời đầu tiên nhóm xin phép được gửi lời cảm ơn chân thành và sâu sắc nhất đến với Khoa Đào Tạo Chất Lượng Cao – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện cho nhóm chúng em được học tập, phát triển nền tảng kiến thức sâu sắc và thực hiện đề tài này

Bên cạnh đó, nhóm chúng em cũng xin gửi lời cảm ơn chân thành nhất đến thầy

Lê Văn Vinh, người đã tận tình chỉ bảo và hướng dẫn nhóm chúng em thực hiện đề tài này

Mặc dù nhóm chúng em đã rất cố gắng để hoàn thành một cách tốt nhất, nhưng

do thời gian hạn hẹp, khả năng còn hạn chế nên khó tránh khỏi việc thiếu sót trong bài báo cáo Chúng em rất mong nhận được sự thông cảm, góp ý cũng như đóng góp của thầy để đề tài hoàn thiện hơn, để có thể phát triển hơn phục vụ cho tương lai

Chúng em chân thành cảm ơn

Nhóm thực hiện

Nguyễn Thu Ngân – 18110161 Nguyễn Như Bảo Phương – 18110180

- Tính bảo mật của website

- Dùng dường dẫn ảnh trực tuyến bị lỗi hiển thị

- Giải pháp hoàn tiền trong Paypal

3 Các phương pháp giải quyết vấn đề

- Sử dụng JWT để cải thiện yêu cầu bảo mật cho website

- Lưu ảnh ở local bằng multer

4 Kết quả đạt được

- Hệ thống Đặt vé xem phim gồm: website cho phía người dùng cuối và website cho phía người quản lý trang

- Giao diện dễ sử dụng với người dùng

- Đáp ứng được các chức năng cơ bản

MỤC LỤC

DANH MỤC HÌNH ẢNH I

DANH MỤC BẢNG BIỂU III DANH MỤC TỪ VIẾT TẮT V DANH MỤC TỪ CHUYÊN NGÀNH VI

KẾ HOẠCH THỰC HIỆN 1

CHƯƠNG 1: PHẦN MỞ ĐẦU 3

1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 3

1.2 ĐỐI TƯỢNG NGHIÊN CỨU 3

1.3 PHẠM VI NGHIÊN CỨU 4

1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 4

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 5

2.1 NODEJS 5

2.2 EXPRESSJS 5

2.3 MONGODB 6

2.4 REACTJS 8

2.5 JSON WEB TOKEN 8

CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 11

3.1 KHẢO SÁT HIỆN TRẠNG 11

3.3 MÔ HÌNH HÓA YÊU CẦU 16

CHƯƠNG 4 THIẾT KẾ PHẦN MỀM 48

4.1 LƯỢC ĐỒ LỚP 48

4.2 LƯỢC ĐỒ TUẦN TỰ 49

4.3 CHI TIẾT BẢNG DỮ LIỆU 65

4.4 SƠ ĐỒ ERD 72

4.5 GIAO DIỆN NGƯỜI DÙNG 72

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM 107

5.1 CÔNG CỤ DÙNG TRONG DỰ ÁN 107

5.2 CÀI ĐẶT ỨNG DỤNG 107

5.3 THỰC HIỆN KIỂM THỬ 108

5.4 KẾ HOẠCH KIỂM THỬ 108

5.5 SO SÁNH SẢN PHẨM 122

CHƯƠNG 6: TỔNG KẾT 125

6.3 NHƯỢC ĐIỂM 125 6.4 HƯỚNG PHÁT TRIỂN 125 CHƯƠNG 7: TÀI LIỆU THAM KHẢO 126

DANH MỤC HÌNH ẢNH

Hình 1 Trang CGV 11

Hình 2 Trang BHD 12

Hình 3 Trang GALAXYCINE 13

Hình 4 Trang CINESTAR 14

Hình 5 Lược đồ khách 19

Hình 6 Lược đồ người quản lý trang 20

Hình 7 Lược đồ Quản lý phim 21

Hình 8 Lược đồ Quản lý đồ ăn 22

Hình 9 Lược đồ lớp 48

Hình 10 Lược đồ tuần tự ĐĂNG NHẬP 49

Hình 11 Lược đồ tuần tự ĐĂNG XUẤT 50

Hình 12 Lược đồ tuần tự ĐĂNG KÝ 51

Hình 13 Lược đồ tuần tự XEM THÔNG TIN CÁ NHÂN 51

Hình 14 Lược đồ tuần tự SỬA THÔNG TIN KHÁCH HÀNG 52

Hình 15 Lược đồ tuần tự THAY ĐỔI MẬT KHẨU KHÁCH HÀNG 52

Hình 16 Lược đồ tuần tự ĐẶT VÉ KHÔNG DÙNG ĐIỂM THƯỞNG 53

Hình 17 Lược đồ tuần tự ĐẶT VÉ DÙNG ĐIỂM THƯỞNG 53

Hình 18 Lược đồ tuần tự XEM LỊCH SỬ GIAO DỊCH 54

Hình 19 Lược đồ tuần tự “XEM THÔNG TIN NGƯỜI DÙNG” 55

Hình 20 Lược đồ tuần tự “XEM THÔNG TIN PHIM” 56

Hình 21 Lược đồ tuần tự “TẠO PHIM MỚI” 57

Hình 22 Lược đồ tuần tự “CẬP NHẬT PHIM” 58

Hình 23 Lược đồ tuần tự “XÓA PHIM SẮP CHIẾU” 58

Hình 24 Lược đồ tuần tự “XEM THÔNG TIN COMBO” 59

Hình 25 Lược đồ tuần tự “TẠO COMBO MỚI” 60

Hình 26 Lược đồ tuần tự “CẬP NHẬT COMBO” 61

Hình 27 Lược đồ tuần tự “XÓA COMBO” 61

Hình 28 Lược đồ tuần tự “THỐNG KÊ DOANH THU” 62

Hình 29 Lược đồ tuần tự “THỐNG KÊ SỐ LƯỢNG” 63

Hình 30 Lược đồ tuần tự “XÓA LỊCH CHIẾU” 64

Hình 31 Lược đồ tuần tự "THÊM LỊCH CHIẾU" 65

Hình 32 Sơ đồ ERD 72

Hình 33 Giao diện ĐĂNG NHẬP 72

Hình 34 Giao diện ĐĂNG KÝ 73

Hình 38 Giao diện CHI TIẾT PHIM 76

Hình 39 Giao diện THÔNG TIN CÁ NHÂN 77

Hình 40 Giao diện THAY ĐỔI THÔNG TIN CÁ NHÂN 78

Hình 41 Giao diện THAY ĐỔI MẬT KHẨU 79

Hình 42 Giao diện LỊCH SỬ GIAO DỊCH 80

Hình 43 Giao diện HỆ THỐNG RẠP 81

Hình 44 Giao diện ĐẶT VÉ 82

Hình 45 Giao diện XÁC NHẬN MUA VÉ 83

Hình 46 Giao diện THANH TOÁN KHÔNG SỬ DỤNG ĐIỂM TÍCH LŨY 84

Hình 47 Giao diện THANH TOÁN CÓ SỬ DỤNG ĐIỂM TÍCH LŨY 85

Hình 48 Giao diện SỬ DỤNG ĐIỂM TÍCH LŨY 87

Hình 50 Giao diện ĐỔI VÉ 88

Hình 51 Giao diện ĐĂNG NHẬP TRANG QUẢN LÝ 89

Hình 52 Giao diện QUẢN LÝ PHIM 90

Hình 53 Giao diện CHI TIẾT PHIM 91

Hình 54 Giao diện CHỈNH SỬA PHIM 93

Hình 55 Giao diện TẠO PHIM MỚI 94

Hình 56 Giao diện LỊCH CHIẾU 95

Hình 57 Giao diện XÓA LỊCH CHIẾU 96

Hình 58 Giao diện DANH SÁCH COMBO 97

Hình 59 Giao diện TẠO COMBO MỚI 98

Hình 60 Giao diện CHI TIẾT COMBO 99

Hình 61 Giao diện CHỈNH SỬA COMBO 100

Hình 62 Giao diện DANH SÁCH NGƯỜI DÙNG 101

Hình 63 Giao diện THỐNG KÊ SỐ LƯỢNG 102

Hình 64 Giao diện THỐNG KÊ DOANH THU 103

Hình 65 Giao diện TẠO LỊCH CHIẾU 104

Hình 66 Giao diện THÔNG TIN NGƯỜI QUẢN LÝ 105

Hình 67 Kết quả thực tế của TS_AFD_01 112

Hình 68 Kết quả thực tế của TS_AFD_02 112

Hình 69 Kết quả thực tế của TS_AFD_03 113

Hình 70 Kết quả thực tế của TS_RQ_01 114

Hình 71 Kết quả thực tế của TS_RQ_02 115

Hình 72 Kết quả thực tế của TS_SI_01 117

Hình 73 Kết quả thực tế của TS_SI_02 117

Hình 74 Kết quả thực tế của TS_SI_03 118

Hình 75 Kết quả thực tế của TS_BT_01 120

DANH MỤC BẢNG BIỂU

Bảng 1 Danh mục từ viết tắt 6

Bảng 2 Danh mục từ chuyên ngành 8

Bảng 3 Kế hoạch thực hiện 2

Bảng 4 Chức năng người quản lý trang 18

Bảng 5 Chức năng khách hàng 19

Bảng 6 Chức năng Khách vãng lai 19

Bảng 7 Kịch bản ĐĂNG NHẬP 23

Bảng 8 Kịch bản ĐĂNG XUẤT 24

Bảng 9 Kịch bản ĐĂNG KÝ 25

Bảng 10 Kịch bản XEM THÔNG TIN CÁ NHÂN 26

Bảng 11 Kịch bản SỬA THÔNG TIN CÁ NHÂN 27

Bảng 12 Kịch bản THAY ĐỔI MẬT KHẨU 28

Bảng 13 Kịch bản ĐẶT VÉ KHÔNG DÙNG ĐIỂM THƯỞNG 29

Bảng 14 Kịch bản ĐẶT VÉ DÙNG ĐIỂM THƯỞNG 31

Bảng 15 Kịch bản ĐỔI GHẾ 32

Bảng 16 Kịch bản XEM THÔNG TIN PHIM 33

Bảng 17 Kịch bản XEM LỊCH SỬ GIAO DỊCH 34

Bảng 18 Kịch bản ĐĂNG NHẬP TRANG QUẢN LÝ 35

Bảng 19 Kịch bản XEM THÔNG TIN PHIM 36

Bảng 20 Kịch bản TẠO MỚI PHIM 37

Bảng 21 Kịch bản CẬP NHẬT PHIM 38

Bảng 22 Kịch bản XÓA PHIM 39

Bảng 23 Kịch bản TẠO LỊCH CHIẾU 40

Bảng 24 Kịch bản XÓA LỊCH CHIẾU 41

Bảng 25 Kịch bản XEM THÔNG TIN NGƯỜI DÙNG 42

Bảng 26 Kịch bản XEM THÔNG TIN COMBO 43

Bảng 27 Kịch bản TẠO MỚI COMBO 44

Bảng 28 Kịch bản CẬP NHẬT COMBO 45

Bảng 29 Kịch bản XÓA COMBO 46

Bảng 30 Kịch bản THỐNG KÊ SỐ LƯỢNG 47

Bảng 31 Kịch bản THỐNG KÊ DOANH THU 47

Bảng 32 Chi tiết bảng USERS 66

Bảng 33 Chi tiết bảng MOVIES 67

Bảng 34 Chi tiết bảng MOVIETHREATERS 68

Bảng 35 Chi tiết bảng ROOMS 68

Bảng 36 Chi tiết bảng SHOWTIMES 69

Bảng 40 Giao diện ĐĂNG NHẬP 73

Bảng 41 Giao diện ĐĂNG KÝ 74

Bảng 42 Giao diện TRANG CHỦ 76

Bảng 43 Giao diện CHI TIẾT PHIM 76

Bảng 44 Giao diện THÔNG TIN CÁ NHÂN 77

Bảng 45 Giao diện THAY ĐỔI THÔNG TIN CÁ NHÂN 78

Bảng 46 Giao diện THAY ĐỔI MẬT KHẨU 79

Bảng 47 Giao diện LỊCH SỬ GIAO DỊCH 80

Bảng 48 Giao diện HỆ THỐNG RẠP 81

Bảng 49 Giao diện ĐẶT VÉ 82

Bảng 50 Giao diện XÁC NHẬN MUA VÉ 83

Bảng 51 Giao diện THANH TOÁN KHÔNG SỬ DỤNG ĐIỂM TÍCH LŨY 85

Bảng 52 Giao diện THANH TOÁN CÓ SỬ DỤNG ĐIỂM TÍCH LŨY 86

Bảng 53 Giao diện SỬ DỤNG ĐIỂM TÍCH LŨY 87

Bảng 54 Giao diện ĐỔI VÉ 88

Bảng 55 Giao diện ĐĂNG NHẬP TRANG QUẢN LÝ 89

Bảng 56 Giao diện QUẢN LÝ PHIM 91

Bảng 57 Giao diện CHI TIẾT PHIM 92

Bảng 58 Giao diện CHỈNH SỬA PHIM 94

Bảng 59 Giao diện TẠO PHIM MỚI 95

Bảng 60 Giao diện LỊCH CHIẾU 96

Bảng 61 Giao diện XÓA LỊCH CHIẾU 96

Bảng 62 Giao diện DANH SÁCH COMBO 98

Bảng 63 Giao diện TẠO COMBO MỚI 99

Bảng 64 Giao diện CHI TIẾT COMBO 100

Bảng 65 Giao diện CHỈNH SỬA COMBO 101

Bảng 66 Giao diện DANH SÁCH NGƯỜI DÙNG 102

Bảng 67 Giao diện THỐNG KÊ SỐ LƯỢNG 103

Bảng 68 Giao diện THỐNG KÊ DOANH THU 104

Bảng 69 Giao diện TẠO LỊCH CHIẾU 105

Bảng 70 Giao diện THÔNG TIN NGƯỜI QUẢN LÝ 106

Bảng 71 Kịch bản kiểm thử 109

Bảng 72 Bảng kiểm thử “THÊM ĐỒ ĂN THỨC UỐNG TC_AFD_01” 110

Bảng 73 Bảng kiểm thử “THÊM ĐỒ ĂN THỨC UỐNG TC_AFD_02” 111

Bảng 74 Bảng kiểm thử “THÊM ĐỒ ĂN THỨC UỐNG TC_AFD_03” 111

Bảng 75 Bảng kiểm thử “THỐNG KÊ DOANH THU THEO QUÝ TC_RQ_01” 114

Bảng 76 Bảng kiểm thử “THỐNG KÊ DOANH THU THEO QUÝ TC_RQ_02” 114

Bảng 80 Bảng kiểm thử "ĐẶT VÉ KHÔNG SỬ DỤNG ĐIỂM THƯỞNG

TC_BT_01" 119Bảng 81 Bảng kiểm thử "ĐẶT VÉ KHÔNG SỬ DỤNG ĐIỂM THƯỞNG

TC_BT_02" 120

DANH MỤC TỪ VIẾT TẮT

Số thứ tự Ký hiệu chữ viết tắt Từ viết đầy đủ

Bảng 1 Danh mục từ viết tắt

DANH MỤC TỪ CHUYÊN NGÀNH

vụ đơn giản hóa cho các ứng dụng phân tán phức tạp đồng thời nó còn

hỗ trợ vô cùng tích cực cho toàn bộ các quá trình kết nối

4 Regular expression Những biểu thức này sẽ có những

nguyên tắc riêng và bạn phải tuân theo nguyên tắc đó thì biểu thức của bạn mới hoạt động được

13 Collection Bảng trong MongoDB

Bảng 2 Danh mục từ chuyên ngành

- Tìm hiểu về ReactJS cho Website

- Tìm hiểu về NodeJS, ExpressJS

để phát triển APIs, JSON WEB TOKEN để ứng dụng vào xác thực

và phân quyền API của hệ thống

- Xây dựng giao diện web admin và web người dùng

- Làm API đăng

ký, đăng nhập

7+8+9 22/10 – 11/11

- Tìm hiểu về MongoDB để áp dụng vào lưu trữ dữ liệu người dùng của hệ thống

- Tìm hiểu cách xây dựng Restful API

- Kết hợp các phần đã xây dựng lại với nhau (Giao diện, API, Database)

- Xây dựng các API quản lý phim, tạo lịch chiếu, xem/ sửa thông tin cá nhân

- Xây dựng chức năng đăng ký, đăng nhập

9+10 12/11 – 25/11

- Viết báo cáo

- Tiếp tục xây dựng các chức năng đặt vé

- Chạy thử project và kiểm lỗi

11+12 26/11 – 09/12

- Tiếp tục viết báo cáo

- Viết API tìm kiếm người dùng, phim, thống kê

- Xây dựng chức năng quản trị (quản lý người dùng, quản lý phim, thống kê)

- Ứng dụng hoàn thành cơ bản

Bảng 3 Kế hoạch thực hiện

CHƯƠNG 1: PHẦN MỞ ĐẦU

1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Xem phim tại rạp là một hình thức giải trí tuyệt vời, được nhiều người yêu thích hiện nay Tuy nhiên, mua vé xem phim lại là một việc không được yêu thích do việc đứng chờ xếp hàng tốn nhiều thời gian Đặc biệt hơn nữa vào thời điểm dịch bệnh vẫn chưa hoàn toàn được kiểm soát như hiện này thì việc tập trung đông người để mua vé

là điều không nên khuyến khích Chính vì thế mà hình thức mua vé xem phim online được ưa chuộng hơn rất nhiều vì vừa có lợi trong tình hình ngày nay, vừa tiết kiệm thời gian và việc mua vé cũng trở nên mau chóng hơn

Người dùng có thể quét mã QR nhận được từ mail phản hồi của trang web, dùng

mã QR để bước vào rạp mà không cần tốn thêm bất kỳ công đoạn nào nữa Nếu người dùng đã chọn được phim hay để xem, hãy đặt vé cực nhanh bằng cách chọn phim ngay

từ Trang Chủ

Nhận thấy được nhu cầu xem phim của người dùng hiện nay, nhóm đã quyết định chọn đề tài “Xây dựng trang web Đặt vé xem phim” để giúp mọi người có thể đặt vé nhanh chóng, tiện lợi và hiệu quả

1.2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu sử dụng một cách nhanh chóng việc đặt vé xem phim Đồng thời kèm theo đó là các công nghệ áp dụng tạo ra sản phẩm Cụ thể như sau:

- Tập trung nghiêm cứu Restful API, NodeJS, ExpressJS để xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng nhất

- Áp dụng cơ sở dữ liệu NoSQL là MongoDB để lưu trữ dũ liệu người dùng của

qua Token Người dùng bắt buộc phải đăng nhập vào hệ thống để có một Token riêng

và mỗi request từ phía người dùng đều phải thông qua một “cánh cửa” và Token là

“chìa khóa”

1.3 PHẠM VI NGHIÊN CỨU

Đề tài này chủ yếu đi tập trung vào việc xử lý các nghiệp vụ cơ bản của một website như là xem thông tin phim, thực hiện việc đặt vé, lưu lịch sử giao dịch,… Về phần lõi

xử lý, xây dựng đầy đủ các APIs phục vụ cho phần hiển thị cuối cùng

1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

- Có thêm kiến thức về NodeJS, ReactJS, cách gọi API

- Xây dựng được một website đặt vé phim trực tuyến với những tính năng cơ bản: Đặt

vé, đổi vé, xem thông tin phim, quản lý thông tin cá nhân ở phía người dùng; Quản

lý phim, lịch chiếu, quản lý người dùng và thống kê ở phía người quản lý trang

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

2.1 NODEJS

2.1.1.Khái niệm

NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine Đây là nền tảng khá nhẹ và được sử dụng để lập trình Backend phía máy chủ, đồng thời đem lại hiệu quả cao hơn bằng cách biên dịch JavaScript trực tiếp vào code Ngoài ra,

nó cũng mở rộng API JavaScript nhằm phát triển nhiều tính năng hơn NodeJS cũng có một cộng đồng phát triển rất lớn vì thế nhiều framework sử dụng core NodeJS ra đời, một trong số các framework phổ biến nhất hiện nay là Express

• Khả năng đơn luồng

Node.js sử dụng một mô hình luồng duy nhất với sự kiện lặp Cơ chế tổ chức sự kiện giúp các máy chủ đáp ứng một cách không ngăn chặn và làm cho máy chủ có khả năng mở rộng cao, trái ngược với các máy chủ truyền thống hạn chế để xử lý yêu cầu

• Khả năng không đệm (NoCache)

NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra

chóng, chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc tạo các ứng dụng 1 web web

và xây dựng API đã trở nên đơn giản hơn đối với các lập trình viên và nhà phát triển

Do có dung lượng khá nhẹ, ExpressJS giúp cho việc tổ chức các ứng dụng web thành một kiến trúc MVC có tổ chức hơn Trên thực tế, nếu không sử dụng ExpressJS,

ta sẽ phải thực hiện rất nhiều bước lập trình phức tạp để xây dựng nên một API hiệu quả ExpressJS đã giúp cho việc lập trình trong Node.js trở nên dễ dàng hơn và có nhiều tính năng mới bổ sung

2.2.2 Tính năng

Phát triển máy chủ nhanh chóng: ExpressJS cung cấp nhiều tính năng dưới dạng các hàm sẵn có để dễ dàng sử dụng ở bất kỳ đâu trong chương trình, giúp tiết kiệm phần nào thời gian viết mã, đẩy nhanh tiến độ viết chương trình

Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyền truy cập vào cơ sở dữ liệu, có chức năng như một người lính gác, kiểm tra quyền truy cập mỗi khi nhận được yên cầu từ phía người dùng hoặc các phần mềm trung gian khác Phần mềm Middleware này chịu trách nhiệm chính cho việc tổ chức có hệ thống các chức năng của ExpressJS

Định tuyến - Routing: ExpressJS cung cấp cơ chế định tuyến giúp duy trì trạng thái của website với sự trợ giúp của URL

Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được ExpressJS cung cấp cho phép các người lập trình xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu HTML ở phía máy chủ

Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể nào thiếu

đi việc gỡ lỗi Giờ đây việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả năng xác định chính xác các phần ứng dụng web có lỗi trong Express.[2]

2.3 MONGODB

2.3.1 Khái niệm

MongoDB là một loại database thiên về hướng tài liệu và là một dạng NoSQL database Chính vì vậy, MongoDB thường sẽ tránh đi cấu trúc table-based của relational database để có thể thích ứng được với mọi tài liệu như JSON có sẵn trong một schema một cách linh hoạt

MongoDB được dùng để lưu trữ mọi dữ liệu dưới dạng Document JSON, trong mỗi collection thường sẽ đa dạng về kích cỡ cũng như document Mọi dữ liệu khi đó đều sẽ được lưu trữ sẵn trong document theo kiểu JSON nên việc truy vấn sẽ được thực thi rất nhanh

2.3.2 Tính năng

Hỗ trợ search bằng field, phép search thông thường, regular expression searches và range queries trong MongoDB

Indexing: bất kì field nào trong BSON document cũng có thể được index

Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệt phiên bản đang tồn tại, đang được sử dụng Ở các cơ sở dữ liệu có nhu cầu lưu trữ lớn, luôn đi đôi với việc đảm bảo cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cố ngoài dự đoán Vì vậy, người ta nghĩ ra khái niệm “nhân bản”, tạo một bản sao cho

cơ sở dữ liệu và lưu trữ ở một nơi khác, đề phòng có sự cố

Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả về kết quả

đã được tính toán Các phép toán tập hợp nhóm các giá trị từ nhiều Document lại với nhau, và có thể thực hiện nhiều phép toán đa dạng trên dữ liệu đã được nhóm đó để trả về một kết quả duy nhất Trong SQL, count(*) và GROUP BY là tương đương với Aggregation trong MongoDB

Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng những function trên và hoạt động như một cách phân phối qua sharding

Ở tính năng tập hợp, chương trình này cung cấp ba cách chính để thực hiện tập hợp

là Aggregation Pipeline, chức năng Mapreduce và Single-purpose Aggregation Trong

đó, theo tài liệu của MongoDB thì Aggregation Pipeline được công nhận là cung cấp hiệu suất tốt hơn hầu hết các hoạt động tổng hợp

MongoDB hỗ trợ collection có kích thước cố định được gọi là collection giới hạn Những collection này có kích cỡ cố định theo sau thứ tự chèn làm tăng hiệu suất các hoạt động khác có liên quan đến dữ liệu Khi dữ liệu vượt quá mức giới hạn thì các tài liệu cũ sẽ tự động được xóa mà không cần dùng bất cứ dòng lệnh nào.[3]

2.4 REACTJS

2.4.1.Khái niệm

ReactJS ra mắt vào năm 2013, là một mã nguồn mở được phát triển bởi Facebook, bản thân nó được biết đến là một thư viện Javascript dùng để xây dựng các giao diện người dùng hay UI một cách dễ dàng và tiện lợi Điểm nổi bật nhất của ReactJS đó là việc render dữ liệu được thực hiện cả ở trên tầng Server và ở dưới Client

Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng Điểm đến cuối cùng của việc sử dụng ReactJS đó là đảm bảo tốc độ nhanh, mượt và có khả năng mở rộng cao

2.4.2 Đặc trưng

2.4.2.1.JSX

Trong React, lập trình viên sẽ thường dùng JSX thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang web JSX là một cú pháp mở rộng của Javascript, nó cho phép lập trình viên viết HTML trong React một cách dễ dàng Khi biên soạn, JSX tối ưu hóa code, vì thế nó chạy nhanh hơn so với code JavaScript tương đương

2.4.2.2.Redux

Redux là một vùng chứa trạng thái có thể dự đoán được hay còn biết đến là một thư viện của JavaScript Redux được thiết kế nhằm hỗ trợ lập trình viên khi viết các ứng dụng của JavaScript có thể hoạt động trong các môi trường khác nhau Mặc dù Redux chủ yếu được sử dụng như một công cụ quản lý trạng thái với React, nhưng nó có thể được sử dụng với bất kỳ Framework hoặc thư viện JavaScript khác [2]

2.5 JSON WEB TOKEN

2.5.1.Khái niệm

JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) định nghĩa một phương thức nhỏ gọn và khép kín, là một phương tiện đại diện cho các yêu cầu chuyển giao giữa hai bên client - server dưới dạng một JSON Các thông tin được truyền tải được đính kèm với một chữ ký điện được mã hóa lại bằng HMAC hoặc RSA có thể xác minh tính đúng đắn do đó tạo ra sự tin cậy cho dữ liệu

Sau đó JSON này sẽ được mã hóa Base64Url và thêm vào phần đầu tiên của JWT token

• Payload

Phần thứ 2 của token là payload, chứa các nội dung của thông tin (claim) Thông tin được truyền đi có thể là mô tả của một thực thể hoặc có thể là thông tin bổ sung cho phần Header Có 3 kiểu claims: registered, public, và private claims

Registered claims: Một tập hợp các nội dung thông tin đã được quy định sẵn, chúng không bắt buộc nhưng tùy vào các ứng dụng thực hiện thì khuyến khích sử dụng để tạo

ra các điều kiện bắt buộc đối với những thông tin cần thiết Ví dụ iss (thời gian tạo token), exp (thời gian token hết hạn), sub (tiêu đề)

Public claims: Những thông tin có thể tự định nghĩa tùy theo ý muốn của người sử dụng ví dụ role, username, v.v Nhưng để tránh trùng lặp với các Registered claims chúng ta nên quy định các claims được liệt kê trong IANA JSON Web Token Registry Private claims: Đây cũng là những thông tin tự định nghĩa hoặc các thông tin thêm, thường được sử dụng để chia sẻ thông tin giữa các Client

• Signature

Để tạo ra phần chữ ký này cần có encoded header, và encoded payload đã được mã hóa ở trên cùng kèm theo một khóa bí mật (chuỗi secret) và một thuật toán được chỉ định trong phần header

Để đảm bảo tính đúng đắn của dữ liệu, chữ ký được sử dụng để xác minh thông điệp vẫn nguyên vẹn trong quá trình truyền nhận Nếu thông tin đã bị ai đó cố ý thay đổi trong phần header hoặc payload và gửi mạo danh đến server (nơi tạo và ký token)

thì quá trình xác nhận thông tin sẽ không hợp lệ [5]

CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA

CGV.VN là trang web của CJ CGV có tính năng hỗ trợ khán giả mua vé xem phim và thanh toán online tại website với nhiều chương trình ưu đãi hấp dẫn

• Ưu điểm:

- Xem những ưu đãi hấp dẫn dành riêng cho bạn

- Đặt vé dễ dàng ngay trên ứng dụng nhanh chóng, an toàn và tiện lợi

- Chọn rạp yêu thích

- Đăng nhập & xem thông tin tài khoản CGV Membership

- Chia sẻ thông tin về phim & ưu đãi với bạn bè qua mạng xã hội

• Nhược điểm:

- Chèn nhiều hình ảnh quảng cáo khiến người dùng bị phân tán sự tập trung

- Các nút nhấn còn mơ hồ, không tường minh

- Không hỗ trợ đổ vé cho người dùng

3.1.2.BHDSTAR.VN

Hình 2 Trang BHD

Từ 2014, BHD Star Cineplex là cụm rạp của doanh nghiệp Việt Nam duy nhất

có sức phát triển mạnh mẽ, qua việc liên tục mở thêm các vị trí rạp mới, ở những khu

vực đắc địa của Thành phố Hồ Chí Minh, Hà Nội, Huế và các tỉnh thành khác Và

https://www.bhdstar.vn/ là trang web trực tuyến của BHD Star Cineplex

• Ưu điểm:

- Đặt trước ghế đẹp mà không phải xếp hàng tại rạp

- Đồng bộ hóa quyền lợi thành viên, đặt trước đồ ăn thức uống với ưu đãi đến

20%

- Quản lý tài khoản thành viên dễ dàng với lịch sử tích điểm qua từng giao dịch

- Cập nhật lịch chiếu và thông tin phim nhanh nhất

- Tra cứu vị trí rạp BHD Star gần bạn nhất

• Nhược điểm:

- Không thể hiện rõ ràng việc trang web đang trong quá trình tải cho người

- Trong quá trình đặt đồ ăn, sau khi nhấn xem chi tiết đồ ăn thì người dùng không quay trở lại chọn món được

- Không hỗ trợ đổ vé cho người dùng

3.1.3.GALAXYCINE.VN

Hình 3 Trang GALAXYCINE

Galaxy Cinema đang ngày càng phát triển hơn nữa với các chương trình đặc sắc, các khuyến mãi hấp dẫn, đem đến cho khán giả những bộ phim bom tấn của thế giới và Việt Nam nhanh chóng và sớm nhất Đến website galaxycine.vn, quý khách sẽ dễ dàng mua được vé xem phim ưng ý, tại website luôn được cập nhật nhanh chóng các phim hay nhất phim mới nhất đang chiếu hoặc sắp chiếu Lịch chiếu tại mọi hệ thống rạp chiếu phim của Galaxy Cinema cũng được cập nhật đầy đủ hàng ngày hàng giờ trên trang chủ

• Ưu điểm:

- Dùng tin nhắn lấy vé tại quầy vé của Galaxy Cinema hoặc quét mã QR

- Mục Góc Điện Ảnh - sở hữu lượng dữ liệu về phim, diễn viên và đạo diễn, giúp quý khách dễ dàng chọn được phim mình yêu thích

- Giới thiệu các phim sắp chiếu hot nhất trong mục Phim Hay Tháng để quý khách sớm có sự tính toán

- Mua vé nhanh chóng: rút gọn tối đa các bước mua vé, thời gian tải nội dung được tối ưu hơn

- Ticket Voucher và Movie Voucher nay có thể áp dụng mua vé trực tuyến

Cinestar có các hệ thống rạp tại nhiều khu vực khác nhau trên toàn quốc Chính

vì thế chọn mua vé xem phim online trên website Cinestar.com.vn cũng vô cùng thuận tiện cho bạn Vì có thể lựa chọn được những rạp chiếu gần bạn Bên cạnh đó việc mua

vé xem phim trực tuyến tại Cinestar.com.vn cũng giúp bạn hưởng được nhiều ưu đãi hơn khi mua trực tiếp tại quầy

● Ưu điểm:

- Đặt trước ghế đẹp, đồ ăn thức uống với nhiều ưu đãi

- Cập nhật sự kiện khuyến mãi, các suất chiếu sớm

- Quản lý tài khoản thành viên, đồng bộ quyền lợi với thẻ tích điểm

- Cập nhật lịch chiếu và thông tin phim nhanh nhất

- Tra cứu vị trí rạp Cinestar gần bạn nhất

• Nhược điểm:

- Ở tính năng tìm lịch chiếu nhanh không cho phép nhấn chọn khung giờ chiếu

- Không hỗ trợ đổ vé cho người dùng

3.1.5.KẾT LUẬN

Qua dữ liệu khảo sát được ở 4 trang đặt vé xem phim phổ biến nhất hiện nay, chúng em đã tổng hợp lại những yêu cầu chức năng cho đề tài “Xây dựng ứng dụng web đặt vé xem phim” như sau:

- Đề tài là một nơi đặt vé trực tuyến nên chức năng chính đầu tiên cần quan tâm

đó là có thể nắm rõ thông tin phim, ngày và suất chiếu, cũng như chọn ghế ngồi theo

ý thích

- Phát triển các tính năng Thêm, Xóa, Sửa cho người quản lý để quản lý các đối tượng như phim, lịch chiếu, …

- Ngoài ra thống kê số lượng khách hàng, lượng phim đang chiếu tại hệ thống rạp

- Khách hàng được phép đăng bình luận về các phim trên web

- Có mail nhắc nhở về lịch chiếu của khách hàng trong ngày hôm đó

- Sau khi đăng nhập có thể xem thông tin tài khoản cá nhân, hoặc chỉnh sửa thông tin

cá nhân hoặc mật khẩu nếu cảm thấy cần thiết

- Đặt vé: Tiết kiệm được thời gian xếp hàng mua vé, việc thanh toán qua web diễn ra

an toàn và tiện lợi Người dùng có thể chọn phim, khung giờ và chỗ ngồi theo mong muốn Sau khi đặt vé thành công thì mã QR sẽ được gửi qua gmail đã đăng ký trước đó

Có thể dùng điểm tích lũy để thực hiện thanh toán (1 điểm tương đương 1000 VNĐ)

- Người dùng có thể xem lại lịch sử giao dịch: ngày giờ, thông tin về vé và phim đã đặt

Có thể yêu cầu đổi vé trước 1 tiếng 30 phút khi diễn ra lịch chiếu phim

- Đăng ký: Dùng để cấp một tài khoản cho người dùng mới Khi đăng ký thì sẽ là khách hàng thành viên, mỗi lần thanh toán sẽ được tích lũy điểm thưởng bằng 5% tổng số tiền thanh toán

- Đăng xuất: Người dùng đăng xuất ra khỏi tài khoản đã đăng nhập

- Vào 8h sáng của ngày chiếu, mail nhắc nhở sẽ được gửi tới khách hàng đã mua vé

- Nêu nhận xét về các phim trên trang web

*Người quản lý trang:

- Sau khi đăng nhập vào tài khoản admin, admin có thể xem các thông tin của những tài khoản người dùng, đồng thời có thể thực hiện chức năng tìm kiếm theo tên tài khoản

- Người quản lý xem được thống kê về số lượng phim sắp chiếu, số lượng phim đang chiếu, tổng doanh thu cũng như tỉ lệ các khung giờ mà khách hàng mua vé

- Cập nhật thông tin phim: admin có thể chỉnh sửa các thông tin (hình ảnh, trailer, mô tả) của phim

- Thêm thông tin đồ ăn/ thức uống trên trang web

- Thêm phim mới: đồng thời có thể tạo các lịch chiếu cho phim Khi tạo lịch chiếu, tùy theo mỗi khung giờ tở các thứ trong tuần mà giá vé sẽ được tạo khác nhau

- Xóa phim: đồng thời xóa những dữ liệu liên quan tới phim (trừ thông tin vé mua của

khách hàng)

3.2.2 Yêu cầu phi chức năng

- Bảo mật: Mật khẩu sẽ được hash khi lưu trữ trong cơ sở dữ liệu

- Tính khả dụng: Phù hợp với nhu cầu, dễ dàng sử dụng

- Có dung lượng lưu trữ dữ liệu lớn

3.3 MÔ HÌNH HÓA YÊU CẦU

3.3.1 Bảng chức năng

3.3.1.1 Chức năng của Người quản lý

1 Tìm kiếm bảng khách hàng Tìm kiếm theo các thuộc tính của khách hàng

2 Sắp xếp ở bảng khách hàng Sắp xếp theo thứ tự tăng giảm bảng chữ cái ở

tên khách hàng hoặc tên tài khoản đăng nhập

3 Thêm đồ ăn thức uống Thêm dữ liệu đồ ăn thức uống mới cho hệ

thống rạp

4 Chỉnh sửa thông tin đồ ăn

thức uống

Thay đổi thông tin đồ ăn thức uống

5 Xóa đồ ăn thức uống Xóa dữ liệu về đồ ăn thức uống

7 Thêm phim Thêm dữ liệu một phim mới cho hệ thống

rạp

8 Chỉnh sửa phim Thay đổi thông tin mô tả, hình ảnh hoặc

trailer của một phim cụ thể

10 Tìm kiếm ở bảng phim Tìm kiếm các thuộc tính của phim

11 Sắp xếp ở bảng phim Sắp xếp theo tên phim, ngày khởi chiếu hoặc

số lượng bán

12 Tạo lịch chiếu cho phim Thêm suất chiếu mới cho phim đã có tại rạp

13 Thống kê Xem các số liệu về tổng doanh thu, số lượng

phim, lượng khách đăng ký Hiển thị các phim được ưa thích tạp rạp thông qua số

lượng bán vé

15 Đăng xuất Thoát khỏi tài khoản và quay về trang chủ

Bảng 4 Chức năng người quản lý trang

3.3.1.2 Chức năng của Khách hàng

1 Đăng ký Tạo một tài khoản mới để có thể đăng nhập

và thực hiện các chức năng của tài khoản

khách hàng

2 Đăng nhập Truy cập và thực hiện các chức năng của tài

khoản khách hàng

4 Xem thông tin phim Xem các chi tiết về phim như là: thời lượng,

mô tả, ngày khởi chiếu

5 Xem lịch chiếu Xem lịch chiếu theo cụm rạp hoặc xem lịch

chiếu theo phim (bao gồm ngày chiếu, giờ

chiếu)

6 Đặt vé Cho phép chọn chỗ ngồi và tiến hành thanh

toán bằng điểm thưởng hoặc thông qua ví

Paypal

7 Xem thông tin cá nhân Hiển thị các thông tin cá nhân: Họ tên, số

điện thoại, điểm thưởng,…

8 Chỉnh sửa thông tin cá nhân Thay đổi thông tin về số điện thoại, họ tên,

email

9 Thay đổi mật khẩu Cập nhật mật khẩu mới

10 Xem lịch sử giao dịch Hiển thị các thông tin về vé đã đặt: tên phim,

tổng tiền vé, thời gian đặt, suất chiếu,…

Bảng 5 Chức năng khách hàng

3.3.1.3 Chức năng của Khách hàng vãng lai

1 Đăng ký Tạo một tài khoản mới để có thể đăng nhập và

thực hiện các chức năng của tài khoản khách

hàng

2 Xem lịch chiếu Xem lịch chiếu theo cụm rạp hoặc xem lịch

chiếu theo phim (bao gồm ngày chiếu, giờ

chiếu)

3 Xem thông tin phim Xem các chi tiết về phim như là: thời lượng,

mô tả, ngày khởi chiếu

Xem thông tin cá nhân

Sửa thông tin cá nhân Đổi v é

Thanh toán online

Xem thông tin v ề phim

Xem lịch sử giao dịch

Khách chưa có tài khoản

Xem đánh giá

Paypal Thay đổi mật khẩu'

Xem lịch chiếu

«include»

Hình 6 Lược đồ người quản lý trang

uc Ngưởi quản lý trang

WEB ĐẶT VÉ XEM PHIM

Người quản lý trang

Quản lý phim

Quản lý đồ ăn

Hình 7 Lược đồ Quản lý phim

uc Quản lý phim

QUẢN LÝ PHIM

Người quản lý trang

Tạo mới thông tin phim

Cập nhật thông tin phim

Xóa thông tin phim

Tạo lịch chiếu

Hình 8 Lược đồ Quản lý đồ ăn

3.3.3 Đặc tả Usecase

3.3.3.1 Khách hàng

3.3.3.1.1 Usecase “ĐĂNG NHẬP”

Mô tả nhanh Đăng nhập để thực hiện các chức năng tương ứng với chức vụ

trong Web bán vé phim

Các đối tượng Khách hàng

Điều kiện tiên

quyết

Người dùng đã có tài khoản trong hệ thống

Khi thành công Người dùng được xác thực và hệ thống hiển thị chức năng tương

ứng với vai trò của người dùng

uc Quản lý đồ ăn

Quản lý đồ ăn

Người quản lý trang

Thêm thông tin đồ ăn

Cập nhật thông tin đồ ăn

Xóa thông tin đồ ăn

Luồng tương tác

Thành công Use case bắt đầu khi người dùng cần thực hiện chức năng nào đó

của hệ thống cần xác thực quyền truy cập

1 Hệ thống hiển thị cửa sổ cho người dùng nhập tên đăng nhập và mật khẩu

2 Người dùng nhập tên đăng nhập và mật khẩu

3 Hệ thống xác thực tên đăng nhập và mật khẩu

4 Hệ thống xác định vai trò của người dùng

5 Hệ thống mở màn hình trang chủ và mở các chức năng được phép truy cập của người dùng

Thất bại Nếu đăng nhập không thành công: Người dùng không truy cập

được vào hệ thống, cần phải kiểm tra lại thông tin đăng nhập Nếu người dùng nhập sai tên đăng nhập hoặc mật khẩu, cũng có thể là cả hai Những công việc sau được thực hiện:

1 Hệ thống mô tả lý do xác thực bị sai

2 Hệ thống lưu ý người dùng đăng nhập lại

3 Khi người dùng nhập lại tên đăng nhập và mật khẩu, bước

3 ở Basic flow được thực hiện

Bảng 7 Kịch bản ĐĂNG NHẬP

3.3.3.1.2 Usecase “ĐĂNG XUẤT”

Mô tả nhanh Thoát khỏi các chức năng tương ứng với vai trò trong Web bán

vé phim