TIỂU LUẬN CHUYÊN NGÀNH xây DỰNG ỨNG DỤNG WEB đặt vé XEM PHIM

Nhận thấy được nhu cầu xem phim của người dùng hiện nay, nhóm chúng em đã 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ợ

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

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

- -TIỂU LUẬN CHUYÊN NGÀNH

XÂY DỰNG ỨNG DỤNG WEB ĐẶT VÉ XEM PHIM

GVHD: TS Lê Văn Vinh

Sinh viên thực hiện:

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

ĐH SƯ PHẠM KỸ THUẬT TP HCM

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

*******

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh Phúc

*******

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 ứng dụng web đặt vé xem phim

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

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

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

Giáo viên hướng dẫn (Ký & ghi rõ họ tên)

ĐH SƯ PHẠM KỸ THUẬT TP HCM

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

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh Phúc

******* *******

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 ứng dụng web đặt vé xem phim

Họ và tên Giáo viên phản biện:

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

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

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 đếnvới Khoa Đào Tạo Chất Lượng Cao – Trường Đại Học Sư Phạm Kỹ Thuật ThànhPhố 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ềntả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 đếnthầ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ựchiệ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óttrong 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ụ chotươ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à websitecho 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

MỤC LỤC HÌNH ẢNH i

MỤC LỤC BẢNG iv

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

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

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 [1] 5

2.1.1.Khái niệm 5

2.1.2.Các đặc tính của NodeJS 5

2.2 EXPRESSJS [2] 6

2.2.1 Khái niệm 6

2.2.2 Tính năng 6

2.3 MONGODB [3] 7

2.3.1 Khái niệm 7

2.3.2 Tính năng 7

2.4 REACTJS [4] 8

2.4.1.Khái niệm 8

2.4.2 Đặc trưng 8

2.5 JSON WEB TOKEN [5] 9

2.5.1.Khái niệm 9

2.5.2.Cấu trúc 9

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.1.1.TIX.VN 11

3.1.2.CGV.VN 12

3.1.3.BHDSTAR.VN 13

3.1.4.GALAXYCINE.VN 14

3.1.5.CINESTAR.COM.VN 15

3.1.6.KẾT LUẬN 15

3.2 XÁC ĐỊNH YÊU CẦU 16

3.2.1 Yêu cầu chức năng 16

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

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

3.3.1 Bảng chức năng 17

3.3.2 Lược đồ Usecase 19

3.3.3 Đặc tả Usecase 20

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

4.1.LƯỢC ĐỒ LỚP 37

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

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

4.4.SƠ ĐỒ ERD 51

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

4.5.1.Đăng ký 52

4.5.2.Đăng nhập 53

4.5.3.Trang chủ 53

4.5.7.Thay đổi mật khẩu 61

4.5.8.Lịch sử giao dịch 62

4.5.9.Đặt vé 63

4.5.10.Xác nhận mua vé 64

4.5.11.Danh sách khách hàng 65

4.5.12.Danh sách phim 66

4.5.13.Tạo phim mới 67

4.5.14.Chỉnh sửa phim 68

4.5.15.Xóa phim 69

4.15.16 Tạo lịch chiếu 70

4.5.16 Thống kê 71

4.5.17.Đổi vé 72

4.5.18.Xác nhận đổi vé 73

CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 74

5.1.CÔNG CỤ DÙNG TRONG DỰ ÁN 74

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

5.3.THỰC HIỆN KIỂM THỬ 75

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

5.4.1 Kịch bản kiểm thử 76

5.4.2 Kết quả kiểm thử 76

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

6.1 KẾT QUẢ ĐẠT ĐƯỢC 93

6.2 ƯU ĐIỂM 93

6.3 NHƯỢC ĐIỂM 93

6.4 HƯỚNG PHÁT TRIỂN 93

CHƯƠNG 7: TÀI LIỆU THAM KHẢO 94

MỤC LỤC HÌNH ẢNH

Hình 1 Trang TIX 11

Hình 2.Trang CGV 12

Hình 3 Trang BHD 13

Hình 4 Trang GALAXYCINE 14

Hình 5 Trang CINESTAR 15

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

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

Hình 8.Lược đồ lớp 37

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

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

Hình 11.Lược đồ tuần tự ĐĂNG KÝ 39

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

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

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

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

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

Hình 17.Lược đồ tuần tự THỐNG KÊ 42

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

Hình 19.Lược đồ tuần tự XEM THÔNG TIN PHIM 43

Hình 20.Lược đồ tuần tự XEM THÔNG TIN NGƯỜI DÙNG 44

Hình 21.Lược đồ tuần tự TÌM KIẾM THÔNG TIN NGƯỜI DÙNG 44

Hình 22.Lược đồ tuần tự TẠO MỚI PHIM 45

Hình 23.Lược đồ tuần tự CẬP NHẬT PHIM 45

Hình 27 Sơ đồ ERD 51

Hình 28.Giao diện ĐĂNG KÝ 52

Hình 29 Giao diện đăng nhập 53

Hình 30 Giao diện Trang chủ 54

Hình 31 Giao diện Trang chủ sau khi đăng nhập 55

Hình 32 Giao diện TÌM KIẾM 55

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

Hình 34 Giao diện CỤM RẠP 57

Hình 35 Giao diện THÔNG TIN PHIM 58

Hình 36 Giao diện TRANG THÔNG TIN CÁ NHÂN 59

Hình 37 Giao diện THAY ĐỔI THÔNG TIN 60

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

Hình 39 Giao diện LỊCH SỬ GIAO DỊCH 62

Hình 40 Giao diện ĐẶT VÉ 63

Hình 41 Giao diện XÁC NHẬN ĐẶT VÉ 64

Hình 42 Giao diện DANH SÁCH KHÁCH HÀNG 65

Hình 43 Giao diện DANH SÁCH PHIM 66

Hình 44 Giao diện TẠO THÔNG TIN PHIM 67

Hình 45 Giao diện CHỈNH SỬA PHIM 68

Hình 46 Giao diện XÓA THÔNG TIN PHIM 69

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

Hình 48 Giao diện THỐNG KÊ 71

Hình 49 Giao diện ĐỔI VÉ 72

Hình 50 Giao diện XÁC NHẬN ĐỔI VÉ 73

Hình 51.Kết quả thực tế của TC_SI_01 77

Hình 52.Kết quả thực tế của TC_SI_02 78

Hình 53.Kết quả thực tế của TC_SI_03 78

Hình 54.Kết quả thực tế của TC_SU_01(hinh a) 82

Hình 55.Kết quả thực tế của TC_SU_01 (hình b) 82

Hình 56.Kết quả thực tế của TC_SU_02 83

Hình 57.Kết quả thực tế của TC_SU_03 83

Hình 58.Kết quả thực tế của TC_SU_04 84

Hình 59.Kết quả thực tế của TC_SU_05 84

Hình 60.Kết quả thực tế của TS_CS_01 87

Hình 61.Kết quả thực tế của TS_CS_02 87

Hình 62.Kết quả thực tế của TS_CS_03 87

Hình 63.Kết quả thực tế của TS_CS_04 88

Hình 64.Kết quả thực tế của TS_CS_05 88

Hình 65.Kết quả thực tế của TS_CM_01 90

Hình 66.Kết quả thực tế của TS_CM_02 91

Hình 67.Kết quả thực tế của TS_CM_03 92

Hình 68.Kết quả thực tế của TS_CM_04 92

MỤC LỤC BẢNG

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

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

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

Bảng 4.Kịch bản ĐĂNG NHẬP 21

Bảng 5.Kich bản ĐĂNG XUẤT 22

Bảng 6.Kich bản ĐĂNG KÝ 23

Bảng 7.Kich bản XEM THÔNG TIN CÁ NHÂN 24

Bảng 8.Kich bản SỬA THÔNG TIN CÁ NHÂN 24

Bảng 9.Kich bản THAY ĐỔI MẬT KHẨU 25

Bảng 10.Kich bản ĐẶT VÉ KHÔNG DÙNG ĐIỂM THƯỞNG 26

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

Bảng 12 Kich bản THỐNG KÊ 28

Bảng 13 Kich bản XEM THÔNG TIN PHIM 29

Bảng 14.Kich bản XEM THÔNG TIN NGƯỜI DÙNG 29

Bảng 15.Kich bản TÌM KIẾM THÔNG TIN NGƯỜI DÙNG 30

Bảng 16.Kich bản TẠO PHIM MỚI 31

Bảng 17.Kich bản CẬP NHẬT PHIM 32

Bảng 18.Kich bản XÓA PHIM 33

Bảng 19.Kich bản TẠO LỊCH CHIẾU 34

Bảng 20.Kich bản XEM LỊCH SỬ GIAO DỊCH 34

Bảng 21.Kịch bản "ĐỔI GHẾ" 35

Bảng 22.Chi tiết bảng USERS 48

Bảng 23.Chi tiết bảng MOVIES 49

Bảng 24.Chi tiết bảng MOVIETHREATERS 49

Bảng 25.Chi tiết bảng ROOMS 49

Bảng 26 Chi tiết bảng SHOWTIMES 50

Bảng 27.Chi tiết bảng TICKETBOOKINGS 51

Bảng 28.Giao diện ĐĂNG KÝ 53

Bảng 29.Giao diện ĐĂNG NHẬP 53

Bảng 30.Giao diện TRANG CHỦ SAU KHI ĐĂNG NHẬP 54

Bảng 31.Giao diện TRANG CHỦ SAU KHI ĐĂNG NHẬP 55

Bảng 32.Giao diện TÌM KIẾM PHIM 55

Bảng 33.Giao diện LỊCH CHIẾU 56

Bảng 34.Giao diện CỤM RẠP 57

Bảng 35.Giao diện CHI TIẾT PHIM 58

Bảng 36.Giao diện THÔNG TIN CÁ NHÂN 59

Bảng 37.Giao diện THAY ĐỔI THÔNG TIN TÀI KHOẢN 60

Bảng 38.Giao diện THAY ĐỔI MẬT KHẨU 61

Bảng 39.Giao diệnL LỊCH SỬ GIAO DỊCH 62

Bảng 40.Giao diện ĐẶT VÉ 63

Bảng 41.Giao diện XÁC NHẬN MUA VÉ 64

Bảng 42.Giao diện DANH SÁCH NGƯỜI DÙNG 65

Bảng 43.Giao diện DANH SÁCH PHIM 67

Bảng 44.Giao diện TẠO PHIM MỚI 68

Bảng 45.Giao diện CHỈNH SỬA PHIM 69

Bảng 46.Giao diện XÓA PHIM 70

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

Bảng 48 Giao diện THỐNG KÊ 71

Bảng 49 Giao diện ĐỔI VÉ 72

Bảng 50 Giao diện XÁC NHẬN ĐỔI VÉ 74

Bảng 54.Kiểm thử TẠO PHIM MỚI 87Bảng 55.Kiểm thử TẠO LỊCH CHIẾU CHO PHIM 90

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

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

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

vụ đơn giản hóa cho các ứng dụngphâ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ântheo nguyên tắc đó thì biểu thức củabạn mới hoạt động được

17 Request Yêu cầu được gửi từ người dùng

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

để phát triển APIs, JSON WEBTOKEN để ứng dụng vào xácthực và phân quyền API của hệthống

- Xây dựng giao

admin và webngười dùng

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

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

- Xây dựng cácAPI quản lýphim, tạo lịchchiếu, xem/

sửa thông tin

cá nhân

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

9+10 17/11 – 30/11

- Viết báo cáo

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

- API đặt vé, xem lịch sử giao dịch

project và kiểmlỗi

11+12 31/11 – 14/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ànthành cơ bản

CHƯƠNG 1: PHẦN MỞ ĐẦU1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Đến rạp xem phim là một hình thức giải trí tuyệt vời, được nhiều bạn trẻ yêuthí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 nhưvậy Bởi vào những ngày cao điểm thì xếp hàng mua vé xem phim trực tiếp tại quầy làmột "cực hình" Đặ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 đượckiể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ênkhuyến khích Chính vì thế mà hình thức mua vé xem phim online được ưa chuộnghơn rất nhiều

Quý khách có thể quét mã QR để một 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 bạn đã chọn được phim hay để xem, hãy đặt vé cực nhanhbằng cách chọn phim ngay từ Trang Chủ Chỉ cần một phút, email phản hồi của web

sẽ gửi ngay vào hộp mail của bạn

Nhận thấy được nhu cầu xem phim của người dùng hiện nay, nhóm chúng em

đã 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 nhanhchóng việc đặt vé xem phim Đồng thời kèm theo đó là các công nghệ áp dụng tạo rasả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ácAPIs 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 hệthống

-Về phần hiển thị cho người sử dụng nhóm chúng em tiến hành nghiên cứu FrameworkReactJS và một số thư viện được hỗ trợ cho ReactJS để xây dựng và xử lý giao diện

và cho người dùng sử dụng

-Về phần bảo mật hệ thống, tiến hành nghiên cứu công nghệ Json Web Token làm bảomật cho hệ thống, tất cả các luồng dữ liệu vào ra đều được kiểm soát thông quaToken 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” Interceptor

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ộtwebsite 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ẾT2.1 NODEJS [1]

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

Nó được xây dựng để chạy trên server.Javascript là ngôn ngữ hướng sự kiện, do đóbất cứ điều gì xảy ra trên server đều tạo ra sự kiện non-blocking Nên 1 website sửdụng NodeJS đáp ứng được việc truy cập cùng lúc một lượng user cực kì lớn

Và cũng như nhiều ngôn ngữ chạy phía server khác, NodeJS cũng có một cộngđồng phát triển rất lớn 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

Nhưng khả năng mở rộng cao: 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ủ cao khả năng mở rộng

Sử dụng một chương trình đơn luồng và các chương trình tương tự có thể cungcấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủ

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

dữ liệu

2.2 EXPRESSJS [2]

2.2.1 Khái niệm

Đây là một framework mã nguồn mở miễn phí cho NodeJS ExpressJS được sửdụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanhchóng

ExpressJS chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng các ứngdụng web và API trở nên đơn giản hơn với các lập trình viên và nhà pháttriển ExpressJS cũng là một khuôn khổ của NodeJS do đó hầu hết các mã code đãđược viết sẵn cho các lập trình viên có thể làm việc

Nhờ có ExpressJS mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 web,nhiều web hoặc kết hợp Do có dung lượng khá nhẹ, ExpressJS giúp cho việc tổ chứccác ứng dụng web thành một kiến trúc MVC có tổ chức hơn Để có thể sử dụng được

mã nguồn này, chúng ta cần phải biết về Javascript và HTML

Trên thực tế, nếu không sử dụng ExpressJS, bạn sẽ phải thực hiện rất nhiều bướclậ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ậptrì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ạngcác hàm để dễ dàng sử dụng ở bất kỳ đâu trong chương trình Điều này đã loại bỏ nhucầu viết mã từ đó tiết kiệm được thời gian

Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyền truy cậpvào cơ sở dữ liệu, yêu cầu của khách hàng và những phần mềm trung gian khác Phầnmề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ứcnăng của ExpressJS

Định tuyến - Routing: ExpressJS cung cấp cơ chế định tuyến giúp duy trì trạngthá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 chophép các 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ẫuHTML ở phía máy chủ

2.3 MONGODB [3]

2.3.1 Khái niệm

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

MongoDB được dùng để lưu trữ mọi dữ liệu dưới dạng Document JSON bởi vậymỗi một collection thường sẽ có các kích cỡ và các document khác nhau Mọi dữ liệukhi đó đều sẽ được lưu trữ sẵn trong document theo kiểu JSON nên các truy vấn sẽ rấtnhanh

2.3.2 Tính năng

Hỗ trợ search bằng field, các phép search thông thường, regular expressionsearches, và range queries

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 sử dụng Với cơ sở dữ liệu, nhu cầu lưu trữ lớn, đòi hỏi 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 là rất cao Vì vậy,người ta nghĩ ra khái niệm “nhân bản”, tạo một phiên bản cơ sở dữ liệu giống hệt cơ

sở dữ liệu đang tồn tại, 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ếtquả đã được tính toán Các phép toán tập hợp nhóm các giá trị từ nhiều Documentlạ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 functiontrê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ậphợ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

JavaScript thường được thực thi trong các truy vấn, các hàm tổng hợp và đượcgửi trực tiếp đến cơ sở dữ liệu

MongoDB hỗ trợ collection có kích thước cố định được gọi là collection giớihạn Nó 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ẽ bịxóa mà không cần dùng bất cứ dòng lệnh nào

2.4 REACTJS [4]

2.4.1.Khái niệm

ReactJS là một mã nguồn mở được phát triển bởi Facebook, ra mắt vào năm 2013,bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác vớicác thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó làviệc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Clientnữa

ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giaodiện người dùng hay UI 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

2.4.2 Đặc trưng

2.4.2.1.JSX

Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trangweb thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơn JavaScript và chophép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render cácsubcomponent JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so vớicode JavaScript tương đương

sẽ phát huy được vai trò của mình

sự thay đổi đó Do Virtual-DOM vừa đóng vai trò là Model, vừa đóng vai trò là Viewnên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và ngược lại Cónghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ở Viewnhưng vẫn thực hiện được cơ chế Data-binding Điều này làm cho tốc độ ứng dụngtăng lên đáng kể – môt lợi thế không thể tuyệt vời hơn khi sử dụng Virtula-DOM.

2.5 JSON WEB TOKEN [5]

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ộtphương thức nhỏ gọn và khép kín để truyền tải thông tin an toàn giữa client và serverdướ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ó thể xác minh tính đúng đắn do đó tạo ra sự tin cậy cho dữ liệu

Registered claims: Một tập hợp các claims đã được định nghĩa sẵn, chúng khôngbắt buộc nhưng được khuyến khích sử dụng để tạo ra token có ý nghĩa hơn 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 mà chúng ta có thể tự định nghĩa ví dụ role,username, v.v Nhưng để tránh xung đột với các Registered claims chúng ta nên địnhnghĩa 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 để chia sẽ thông tingiữa 2 bên truyền và nhận và được sự đồng ý của họ

 Signature

Để tạo ra một chữ ký chúng ta cần có encoded header, và encoded payload đãđược mã hóa ở trên cùng với một mã bí mật secret và một thuật toán được chỉ địnhtrong phần header để tạo ra chữ ký

Chữ ký được sử dụng để xác minh thông điệp không bị thay đổi trong quá trìnhtruyền nhận nhờ đó đảm bảo tính đúng đắn của dữ liệu Nếu ai đó cố gắng sửa thôngtin trong phần header hoặc payload để gửi mạo danh đến server (nơi tạo và ký token)thì quá trình xác nhận sẽ không hợp lệ

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

YÊU CẦU3.1 KHẢO SÁT HIỆN TRẠNG

3.1.1.TIX.VN

Hình 1 Trang TIX

Tix.vn là website hỗ trợ người dùng đặt vé xem phim trực tuyến tại các cụmrạp như BHD, Galaxy, CGV cực kỳ nhanh chóng và tiện lợi Với Tix.vn, bạn có thểmua vé mà không cần phải đến rạp phim sớm để xếp hàng chờ đợi hoặc lo lắng về vấn

đề hết vé Ngoài ra, Tix.vn thường xuyên cập nhật các thông tin mới nhất về trailer,suất chiếu sớm, các đánh giá phim và chương trình khuyến mãi từ rạp

● Ưu điểm:

- Đặt vé nhanh chóng, thanh toán tiện lợi và an toàn

- Cập nhật các phim đang hot, đang chiếu và sắp chiếu tại các cụm rạp

- Tích điểm đổi quà, ngập tràn ưu đãi

- Cập nhật tin tức, điện ảnh 24h nóng hổi cùng nhiều khuyến mãi hấp dẫn mỗingày

- Đăng nhập tài khoản để kiểm tra lịch sử giao dịch

Hình 2.Trang CGV

CJ CGV là một trong top 5 cụm rạp chiếu phim lớn nhất toàn cầu và là nhàphát hành, cụm rạp chiếu phim lớn nhất Việt Nam Mục tiêu của CJ CGV là trở thànhhình mẫu công ty điển hình đóng góp cho sự phát triển không ngừng của ngành côngnghiệp điện ảnh Việt Nam

Cgv.vn là trang web của CJ CGV có tính năng hỗ trợ khán giả mua vé xemphim 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

Hình 3 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 khuvự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 đến20%

● 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

Hình 4 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 đặcsắ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óngcá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ànggiờ 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

Hình 5 Trang CINESTAR

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ậntiệ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 đãihơ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

3.1.6.KẾT LUẬN

Qua dữ liệu khảo sát được ở 5 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ụngweb đặ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ồitheo ý thích

- Phát triển các tính 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

- 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 Mỗi đặt vé thì chỉ tối đa cho 8 ghế 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ẽ đượcgử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é

*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

- 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 phim mới: admin thêm vào những phim mới đồng thời có thể tạo các lịch chiếucho 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: admin xóa phim đã hết hạn chiếu

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 database

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

- Database 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 tên khách hàng hoặc tên một tài khoản

cụ thể

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 Lọc cột hiển thị ở khách hàng Giới hạn các cột hiển thị thông tin khách hàng

4 Thêm phim Thêm dữ liệu một phim mới cho hệ thống rạp

5 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ể

7 Tìm kiếm ở bảng phim Tìm kiếm theo tên phim

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

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

9 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é.

10 Đăng nhập Đăng nhập và chuyển tới trang quản lý

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

Bảng 1 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

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 2 Chức năng 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 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 đồ khách

WEB ĐẶT VÉ XEM PHIM

Người quản lý trang

phim

Cập nhật thông tin phim Xóa thông tin phim

Xem danh sách phim Tạo lịch chiếu

Thống kê phim bán chạy

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

3.3.3 Đặc tả Usecase

3.3.3.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 Người quản lý, 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

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 đăngnhậ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 4.Kịch bản ĐĂNG NHẬP

3.3.3.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

Các đối tượng Người quản lý, Khách hàng

Điều kiện tiên

quyết

Người dùng đang đăng nhập trong hệ thống

Khi thành công Chuyển người dùng về trang chủ, phần bên phải trở về chữ “Đăng

nhập”

Luồng tương tác

Thành công 1 Người dùng nhấn “Đăng xuất”

2 Hệ thống thoát khỏi tài khoản người dùng, trả về trang chủ củaweb

Thất bại Nếu việc đăng xuất thất bại thì những công việc sau được thực hiện:

1 Hệ thống giữ nguyên trạng thái hiện tại

Điểm mở rộng Không có

Bảng 5.Kich bản ĐĂNG XUẤT

3.3.3.3.Usecase “ĐĂNG KÝ”

Mô tả nhanh Dùng để tạo mới tài khoản cho Khách hàng khi họ cần sử dụng các

chức năng – Đặt vé, xem và chỉnh sửa thông tin cá nhân, thoe dõi lịch

sử giao dịch

Các đối tượng Khách chưa có tài khoản

Điều kiện tiên

Thành công 1 Chọn chức năng “Đăng ký”

2 Nhập tên đăng nhập, mật khẩu, thông tin cá nhân, của kháchhàng

3 Hệ thống kiểm tra sự hợp lệ của thông tin vừa nhập

4 Hiện thông báo đăng ký thành công và chuyển về chỗ Đăng

1 Hệ thống mô tả lý do xác thực bị sai (thông tin chưa hợp lệhoặc tên đăng nhập này đã tồn tại).

2 Hệ thống lưu ý người dùng kiểm tra lại lần nữa

3 Quay lại bước 2 ở Basic flow nếu muốn tiếp tục thao tác

Điểm mở rộng Không có

Bảng 6.Kich bản ĐĂNG KÝ

3.3.3.4.Usecase “XEM THÔNG TIN CÁ NHÂN”

Mô tả nhanh Dùng để kiểm tra, xem lại thông tin liên quan tới vấn đề cá nhân

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

Điều kiện tiên

quyết

Đăng nhập vào trang web

Khi thành công Thông tin được hiển thị ra màn hình

Luồng tương tác

Thành công 1 Hệ thống xác thực Tên đăng nhập và Mật khẩu

2 Chọn chức năng “Thông tin cá nhân”

3 Hiển thị các thông tin tương ứng mà người dùng đã nhập khitạo tài khoản

Thất bại Nếu người dùng không load được trang cá nhân Những công việc sau