Website du lịch và dịch vụ bán sản phẩm

Website du lịch , dịch vụ bán sản phẩm, Website bán sản phẩm

Trang 1

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

ĐỀ TÀI WEBSITE DU LỊCH VÀ DỊCH VỤ BÁN SẢN PHẨM

Chuyên ngành đào tạo: KỸ THUẬT PHẦN MỀM

Giảng viên hướng dẫn: ThS NGUYỄN VĂN THẮNG

KHOA CÔNG NGHỆ THÔNG TIN

Trang 2

INDUSTRIAL UNIVERSITY OF HO CHI MINH CITY FACULTY OF INFORMATION TECHNOLOGY

TRINH DUC DUY PHAM THANH DUY

WEBSITE TRAVEL AND TRAVEL PRODUCT SALE SERVICE

Major: Software engineer

Supervisor: MSc Nguyen Van Thang

HO CHI MINH CITY, 2020

Trang 3

Title: WEBSITE TRAVEL AND TRAVEL PRODUCT SALE SERVICE.

Abstract:

- Reason for writing: Today, tourism services are very developing so attract many

people traveling in domestic and foreign tourist destinations But most travelers do not fully understand the basic information about the places in their travel as well

as to prepare the necessary equipment for the trip In addition, travelers need to have a forum where they can share travel experiences, photos, emotions when traveling, evaluate travel destinations, travel products and products and plan travel for yourself in the future Therefore, building a website travel and travel product sale service is a necessity for tourists today

- Problems: Viewers can manage the cart and see information about tourist

destinations, products, review posts and comments Members can login, create account, update personal information, order products, view purchase history, manage post, review places or products, create schedule, see the schedule created Admin can manage products, approve member posts, revenue statistics and product selling statistics

- Methods: Using HTML, CSS, JavaScript, Bootstrap combine with ReactJS

framework to create interface for website, NodeJS Platform to implement features for website, database NoSQL MongoDB, Socket.io Library to perform real-time interactions and deploying website on service cloud computing Heroku

- Results: View introductory information about the tourist destinations, products,

review posts, comments, register a member, log in, manage the cart, order products, review place or product, create and view schedule, update personal information, search information about places, products, review posts, manage (add, edit, delete) products, approve member posts, revenue statistics and product selling statistics

- Conclusion: Adding expansion operations: create collection, manage places,

integrating the services of renting hotels, renting tourist cars, booking air tickets, train tickets, bus tickets and allow members participate in the schedules created

Trang 4

LỜI CẢM ƠN

Website du lịch và dịch vụ bán sản phẩm là nội dung đề tài mà nhóm chúng

em đã chọn để nghiên cứu, phát triển cũng như là làm khóa luận tốt nghiệp sau 4 năm theo học ngành Kỹ thuật phần mềm tại Khoa Công nghệ thông tin - Trường Đại học Công nghiệp Thành phố Hồ Chí Minh

Đầu tiên, nhóm em xin được gửi lời cảm ơn đến các Thầy, Cô Khoa Công nghệ thông tin trường Đại học Công nghiệp Thành phố Hồ Chí Minh đã truyền đạt những kiến thức chuyên ngành cũng như là những kỹ năng mềm để chúng em có được những hành trang, trang bị đầy đủ nhất về các kiến thức để có thể thực hiện tốt khóa luận tốt nghiệp cũng như là trên con đường sự nghiệp trong tương lai

Ngoài ra, chúng em xin trân trọng cảm ơn thầy hướng dẫn ThS Nguyễn Văn Thắng – giảng viên bộ môn Kỹ thuật phần mềm, thầy đã tận tình hướng dẫn, chỉ bảo nhóm trong quá trình tìm hiểu, nghiên cứu cũng như trong việc hoàn thành đề tài khóa luận tốt nghiệp

Tuy nhiên, do giới hạn kiến thức và khả năng lý luận của bản thân chúng em còn nhiều thiếu sót và hạn chế nên không thể hoàn thành khóa luận một cách tốt nhất, nhóm chúng em kính mong nhận được sự chỉ dẫn và đóng góp của các Thầy, Cô để bài khóa luận của nhóm chúng em được hoàn thiện hơn

Cuối cùng, chúng em xin chân thành cảm ơn và gửi lời chúc sức khỏe tốt đẹp nhất tới các Quý Thầy, Cô!

Tp Hồ Chí Minh, ngày 01 tháng 7 năm 2020

Sinh viên thực hiện

Trang 5

Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm

NHẬN XÉT VÀ ĐÁNH GIÁ CỦA GIÁO VIÊN HƯỚNG DẪN

1 Thông tin sinh viên làm khóa luận:

Họ và tên sinh viên 1: Phạm Thanh Duy

Mã số sinh viên 1: 16043751

Họ và tên sinh viên 2: Trịnh Đức Duy

Khoa: Công nghệ thông tin Chuyên ngành: Kỹ thuật phần mềm Lớp: DHKTPM12A 2 Tên đề tài: Website du lịch và dịch vụ bán sản phẩm 3 Tổng quan về khóa luận: Số chương: 4 Số trang: 125 Số bảng biểu: 36 Số hình vẽ: 118 Số tài liệu tham khảo: 11 4 Nhận xét (thái độ làm việc, kết quả đạt được, hạn chế): ………

………

Trang 6

………

5 Đề nghị:

Được bảo vệ khóa luận trước bộ môn: Không được bảo vệ:

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

Giảng viên hướng dẫn (Ký và ghi rõ họ tên)

Trang 7

NHẬN XÉT VÀ ĐÁNH GIÁ CỦA GIÁO VIÊN PHẢN BIỆN

1 Thông tin sinh viên làm khóa luận:

Họ và tên sinh viên 1: Phạm Thanh Duy

Họ và tên sinh viên 2: Trịnh Đức Duy

Khoa: Công nghệ thông tin Chuyên ngành: Kỹ thuật phần mềm Lớp: DHKTPM12A 2 Tên đề tài: Website du lịch và dịch vụ bán sản phẩm 3 Nhận xét (kết quả đạt được, hạn chế): ……… …

……….……….……

……….……….………

……….……….…………

……….……….………

……… ………

………

4 Đề nghị: Bảo vệ trước hội đồng: Đánh giá qua hình thức Poster:

Không được bảo vệ:

Trang 8

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

Giảng viên phản biện 1

(Ký và ghi rõ họ tên)

Giảng viên phản biện 2

(Ký và ghi rõ họ tên)

Trang 9

MỤC LỤC

CHƯƠNG 1 : GIỚI THIỆU 1

1.1 Tổng quan 1

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

1.3 Phạm vi đề tài 2

1.4 Mô tả yêu cầu chức năng 4

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

2.1 ReactJS [1] 6

2.2 NodeJS [2] 8

2.3 MongoDB [3] 10

2.4 Cloud Computing với Heroku [4] 12

CHƯƠNG 3 : PHÂN TÍCH VÀ THIẾT KẾ 14

3.1 Phân tích yêu cầu bằng UML 14

3.1.1 Usecase tổng quát 14

3.1.2 Danh sách tác nhân và mô tả 15

3.1.3 Danh sách các tình huống hoạt động (Use cases) 15

3.1.4 Tình huống hoạt động 17

3.2 Class diagram 87

3.3 Deployment diagram 88

CHƯƠNG 4 : HIỆN THỰC VÀ KẾT LUẬN 89

4.1 Chi tiết cài đặt cấu hình phần mềm 89

4.2 Giao diện của hệ thống 89

4.3 Test case 102

4.3.1 Thử nghiệm chức năng Đăng nhập 102

4.3.2 Thử nghiệm chức năng Tạo bài đăng 104

4.3.3 Thử nghiệm chức năng Cập nhật thông tin cá nhân 106

4.3.4 Thử nghiệm chức năng Tạo lịch trình cho chuyến đi 109

4.3.5 Thử nghiệm chức năng Chọn mua sản phẩm và thanh toán 113

4.4 Kết luận 122

4.4.1 Kết quả đạt được 122

4.4.2 Hạn chế của đồ án 123

Trang 10

4.4.3 Hướng phát triển 123TÀI LIỆU THAM KHẢO 124PHỤ LỤC 125

Trang 11

DANH MỤC CÁC HÌNH VẼ

Hình 2.1 Nodejs Development 8

Hình 2.2 Cloud Computing với Heroku 12

Hình 3.1 Sơ đồ use case tổng quát 14

Hình 3.2 Acivity diagram UC01_Đăng nhập 18

Hình 3.3 Sequence diagram UC01_Đăng nhập 19

Hình 3.4 Acivity diagram UC02_Đăng ký tài khoản 21

Hình 3.5 Sequence diagram UC02_Đăng ký tài khoản 22

Hình 3.6 Activity diagram UC03_Tìm kiếm địa điểm 24

Hình 3.7 Sequence diagram UC03_Tìm kiếm địa điểm 25

Hình 3.8 Activity diagram UC04_Xem danh sách địa điểm du lịch 26

Hình 3.9 Sequence diagram UC04_Xem danh sách địa điểm du lịch 27

Hình 3.10 Activity diagram UC05_Xem chi tiết thông tin địa điểm 28

Hình 3.11 Sequence diagram UC05_Xem chi tiết thông tin địa điểm 28

Hình 3.12 Activity diagram UC06_Tìm kiếm sản phẩm 29

Hình 3.13 Sequence diagram UC06_Tìm kiếm sản phẩm 30

Hình 3.14 Activity diagram UC07_Xem danh sách sản phẩm 31

Hình 3.15 Sequence diagram UC07_Xem danh sách sản phẩm 31

Hình 3.16 Activity diagram UC08_Xem thông tin sản phẩm 32

Hình 3.17 Sequence diagram UC08_Xem thông tin sản phẩm 33

Hình 3.18 Activity diagram UC09_Xem danh sách bài đăng 34

Hình 3.19 Sequence diagram UC09_Xem danh sách bài đăng 34

Hình 3.20 Activity UC09.1_Xem nội dung bình luận 35

Hình 3.21 Sequence diagram UC09.1_Xem nội dung bình luận 36

Hình 3.22 Activity UC10.1_Xem danh sách giỏ hàng 37

Hình 3.23 Sequence diagram UC10.1_Xem danh sách giỏ hàng 37

Trang 12

Hình 3.24 Activity UC10.2_Thêm sản phẩm vào giỏ hàng 39

Hình 3.25 Sequence diagram UC10.2_Thêm sản phẩm vào giỏ hàng 40

Hình 3.26 Activity UC10.3_Cập nhật giỏ hàng 42

Hình 3.27 Sequence diagram UC10.3_Cập nhật giỏ hàng 43

Hình 3.28 Activity UC10.4_Xóa sản phẩm trong giỏ hàng 44

Hình 3.29 Sequence diagram UC10.4_Xóa sản phẩm trong giỏ hàng 45

Hình 3.30 Activity UC11_Đặt hàng 46

Hình 3.31 Sequence diagram UC11_Đặt hàng 47

Hình 3.32 Activity UC12_Thanh toán sản phẩm 48

Hình 3.33 Sequence diagram UC12_Thanh toán sản phẩm 49

Hình 3.34 Activity diagram UC13.1_Đăng bài 50

Hình 3.35 Sequence diagram UC13.1_Đăng bài 51

Hình 3.36 Activity diagram UC13.3_Xóa bài đăng 52

Hình 3.37 Sequence diagram UC13.3_Xóa bài đăng 53

Hình 3.38 Activity UC14_Tương tác bài đăng 54

Hình 3.39 Sequence diagram UC14_Tương tác bài đăng 54

Hình 3.40 Activity diagram UC15_Đánh giá điểm đến du lịch 56

Hình 3.41 Sequence diagram UC15_Đánh giá điểm đến du lịch 56

Hình 3.42 Activity diagram UC16.1_Tạo lịch trình cho chuyến đi 59

Hình 3.43 Sequence diagram UC16.1_Tạo lịch trình cho chuyến đi 61

Hình 3.44 Activity diagram UC16.2_Xem lịch trình đã tạo 62

Hình 3.45 Sequence diagram UC16.2_Xem lịch trình đã tạo 62

Hình 3.46 Activity UC17_Xem lịch sử đặt/thanh toán 63

Hình 3.47 Sequence diagram UC17_Xem lịch sử đặt/thanh toán 64

Hình 3.48 Activity diagram UC18.1_Thêm sản phẩm 65

Hình 3.49 Sequence diagram UC18.1_Thêm sản phẩm 66

Trang 13

Hình 3.50 Activity diagram UC18.2_Cập nhật sản phẩm 68

Hình 3.51 Sequence diagram UC18.2_Cập nhật sản phẩm 68

Hình 3.52 Activity diagram UC18.3_Xóa sản phẩm 69

Hình 3.53 Sequence diagram UC18.3_Xóa sản phẩm 70

Hình 3.54 Activity diagram UC19.1_ Đánh giá sản phẩm 71

Hình 3.55 Sequence diagram UC19.1_ Đánh giá sản phẩm 72

Hình 3.56 Activity diagram UC20_Thống kê sản phẩm bán chạy 73

Hình 3.57 Sequence diagram UC20_Thống kê sản phẩm bán chạy 74

Hình 3.58 Activity diagram UC21_Thống kê doanh thu 75

Hình 3.59 Sequence diagram UC21_Thống kê doanh thu 76

Hình 3.60 Activity diagram UC22_Duyệt bài đăng 77

Hình 3.61 Sequence diagram UC22_Duyệt bài đăng 78

Hình 3.62 Activity diagram UC23_Gửi email thông báo 79

Hình 3.63 Sequence diagram UC23_Gửi email thông báo 80

Hình 3.64 Activity UC24_Liên kết ví điện tử paypal 81

Hình 3.65 Sequence diagram UC24_Liên kết ví điện tử paypal 81

Hình 3.66 Activity diagram UC25_Liên kết mạng xã hội 83

Hình 3.67 Sequence diagram UC25_Liên kết mạng xã hội 84

Hình 3.68 Activity diagram UC26_Cập nhật thông tin cá nhân 85

Hình 3.69 Sequence diagram UC26_Cập nhật thông tin cá nhân 86

Hình 3.70 Class entity diagram 87

Hình 3.71 Deployment diagram 88

Hình 4.1 Giao diện trang chủ 89

Hình 4.2 Giao diện đăng nhập 90

Hình 4.3 Giao diện đăng ký tài khoản 90

Hình 4.4 Giao diện xem danh sách địa điểm 91

Trang 14

Hình 4.5 Giao diện trang cá nhân 92

Hình 4.6 Giao diện xem chi tiết và bình luận bài đăng 93

Hình 4.7 Giao diện tạo lịch trình 94

Hình 4.8 Giao diện chọn địa điểm vào lịch trình 95

Hình 4.9 Giao diện xem lịch trình đã tạo 96

Hình 4.10 Giao diện xem chi tiết lịch trình đã tạo 97

Hình 4.11 Giao diện xem chi tiết sản phẩm 99

Hình 4.12 Giao diện xem giỏ hàng 99

Hình 4.13 Giao diện xác nhận đặt hàng 99

Hình 4.14 Giao diện xem lịch sử đặt/mua hàng 100

Hình 4.15 Giao diện trang cộng đồng 101

Hình 4.16 Giao diện thử nghiệm chức năng Đăng nhập 102

Hình 4.17 Alert thông báo ‘Tài khoản không tồn tại’ 103

Hình 4.18 Alert thông báo ‘Sai mật khẩu’ 103

Hình 4.19 Thông báo ‘Tài khoản và mật khẩu không được rỗng’ 104

Hình 4.20 Giao diện thử nghiệm chức năng Tạo bài đăng 104

Hình 4.21 Alert thông báo ‘Ảnh không được để rỗng’ 105

Hình 4.22 Thông báo ‘File ảnh không hợp lệ’ 105

Hình 4.23 Thông báo ‘Nội dung không được để trống’ 106

Hình 4.24 Alert thông báo ‘Bài đã đăng thành công’ 106

Hình 4.25 Giao diện thử nghiệm chức năng Cập nhật thông tin cá nhân 107

Hình 4.26 Thông báo ‘Tên và email không được rỗng’ 107

Hình 4.27 Alert thông báo ‘Cập nhật thông tin thành công’ 108

Hình 4.28 Giao diện thử nghiệm chức năng Tạo lịch trình cho chuyến đi (1) 109

Hình 4.29 Giao diện thử nghiệm chức năng Tạo lịch trình cho chuyến đi (2) 110

Hình 4.30 Alert thông báo ‘Tên hành trình không rỗng’ 111

Trang 15

Hình 4.31 Alert thông báo ‘Bạn chưa chọn địa điểm’ 111

Hình 4.32 Alert thông báo ‘Chưa chọn địa điểm cho ngày đã chọn’ 112

Hình 4.33 Alert thông báo ‘Tạo lịch trình thành công’ 113

Hình 4.34 Giao diện thử nghiệm chức năng Chọn mua sản phẩm 114

Hình 4.35 Giao diện thử nghiệm Giỏ hàng khi đã đăng nhập và chưa đăng nhập.115 Hình 4.36 Giao diện thử nghiệm Xác nhận đơn đặt hàng 115

Hình 4.37 Giao diện thử nghiệm Xem lịch sử đặt/mua hàng 115

Hình 4.38 Alert thông báo ‘Không tìm thấy thông tin sản phẩm’ 116

Hình 4.39 Alert thông báo ‘Xác nhận xóa sản phẩm’ 117

Hình 4.40 Alert cảnh báo ‘Số lượng sản phẩm không vượt quá 10’ 118

Hình 4.41 Giao diện Thanh toán bằng hình thức Paypal 119

Hình 4.42 Alert thông báo ‘Hủy thanh toán bằng hình thức Paypal’ 120

Hình 4.43 Alert thông báo ‘Đã đặt hàng thành công’ 121

Hình 4.44 Alert thông báo ‘Xác nhận hủy đơn hàng’ 121

Hình 4.45 Alert thông báo ‘Xác nhận đơn hàng thành công’ 121

Trang 16

DANH MỤC CÁC BẢNG BIỂU

Bảng 3.1 Danh sách tác nhân và mô tả 15

Bảng 3.2 Danh sách các tình huống trong hệ thống 15

Bảng 3.3 Đặc tả use case UC01_Đăng nhập 17

Bảng 3.4 Đặc tả use case UC02_Đăng ký tài khoản 19

Bảng 3.5 Đặc tả use case UC03_Tìm kiếm địa điểm 22

Bảng 3.6 Đặc tả use case UC04_Xem danh sách địa điểm du lịch 25

Bảng 3.7 Đặc tả use case UC05_Xem chi tiết thông tin địa điểm 27

Bảng 3.8 Đặc tả use case UC06_Tìm kiếm sản phẩm 28

Bảng 3.9 Đặc tả use case UC07_Xem danh sách sản phẩm 30

Bảng 3.10 Đặc tả use case UC08_Xem thông tin sản phẩm 31

Bảng 3.11 Đặc tả use case UC09_Xem danh sách bài đăng 33

Bảng 3.12 Đặc tả use case UC09.1_Xem nội dung bình luận 34

Bảng 3.13 Đặc tả use case UC10.1_Xem danh sách giỏ hàng 36

Bảng 3.14 Đặc tả use case UC10.2_Thêm sản phẩm vào giỏ hàng 38

Bảng 3.15 Đặc tả use case UC10.3_Cập nhật giỏ hàng 40

Bảng 3.16 Đặc tả use case UC10.4_Xóa sản phẩm trong giỏ hàng 43

Bảng 3.17 Đặc tả use case UC11_Đặt hàng 45

Bảng 3.18 Đặc tả use case UC12_Thanh toán sản phẩm 47

Bảng 3.19 Đặc tả use case UC13.1_Đăng bài 49

Bảng 3.20 Đặc tả use case UC13.3_Xóa bài đăng 51

Bảng 3.21 Đặc tả use case UC14_Tương tác bài đăng 53

Bảng 3.22 Đặc tả use case UC15_Đánh giá địa điểm 54

Bảng 3.23 Đặc tả use case UC16.1_Tạo lịch trình cho chuyến đi 56

Bảng 3.24 Đặc tả use case UC16.2_Xem lịch trình đã tạo 61

Bảng 3.25 Đặc tả use case UC17_Xem lịch sử đặt/thanh toán 62

Trang 17

Bảng 3.26 Đặc tả use case UC18.1_Thêm sản phẩm 64

Bảng 3.27 Đặc tả use case UC18.2_Cập nhật sản phẩm 66

Bảng 3.28 Đặc tả use case UC18.3_Xóa sản phẩm 68

Bảng 3.29 Đặc tả use case UC19.1_Đánh giá sản phẩm 70

Bảng 3.30 Đặc tả use case UC20_Thống kê sản phẩm bán chạy 72

Bảng 3.31 Đặc tả use case UC21_Thống kê doanh thu 74

Bảng 3.32 Đặc tả use case UC22_Duyệt bài đăng 76

Bảng 3.33 Đặc tả use case UC23_Gửi email thông báo 78

Bảng 3.34 Đặc tả use case UC24_Liên kết ví điện tử paypal 80

Bảng 3.35 Đặc tả use case UC25_Liên kết mạng xã hội 82

Bảng 3.36 Đặc tả use case UC26_Cập nhật thông tin cá nhân 84

Trang 18

và bán sản phẩm du lịch

Việt Nam nói riêng và cả thế giới nói chung đã được thiên nhiên ưu đãi ban tặng cho rất nhiều danh lam thắng cảnh cũng như là các địa điểm du lịch đẹp, hấp dẫn, đa dạng và phong phú Hiện nay trên thực tế dịch vụ du lịch đang rất phát triển vì thế thu hút được nhiều người đi du lịch ở các điểm du lịch trong và ngoài nước Nhưng hầu hết những người đi du lịch chưa nắm bắt được đầy đủ các thông tin cơ bản về những địa điểm trong chuyến du lịch của mình cũng như là để chuẩn bị các đồ dùng cần thiết, thiết yếu trong chuyến đi du lịch Vì thế sẽ gây ra tâm lý hoang mang và bỡ ngỡ cho chuyến đi du lịch của mình Trước những yêu cầu thực tế đó việc xây dựng một website du lịch và dịch vụ bán sản phẩm du lịch là nhu cầu cần thiết đối với khách du lịch hiện nay

Website du lịch và dịch vụ bán sản phẩm du lịch tuy không còn mới mẻ nhưng vẫn rất cần thiết để cải thiện ngành du lịch hiện nay ngày càng phát triển hơn Nhờ vào hệ thống website khách du lịch có thể tiếp cận các thông tin cơ bản về những địa điểm du lịch cũng như là chuẩn bị các vật dụng cần thiết cho chuyến đi của mình một cách nhanh chóng Thông qua hệ thống website khách du lịch cũng có thể đăng bài, bình luận và đánh giá địa điểm trong chuyến du lịch của mình để chia sẻ kinh nghiệm hoặc khi khách du lịch đó có hiểu biết về địa điểm đó Từ những chuyến đi và kinh nghiệm thực tế được các khách du lịch chia sẻ từ đó bạn cũng có thể dễ dàng tạo lịch

Trang 19

Phạm Thanh Duy - 16043751

trình cho chuyến đi của mình ngay trên website Ngoài ra khách du lịch cũng còn có thể mua các đồ dùng cần thiết cho chuyến đi du lịch và thanh toán các đồ dùng đó thông qua website

Thông qua website thì việc quản lý các địa điểm và sản phẩm dịch vụ cũng dễ dàng được quản lý hơn Việc website cho phép thống kê được các địa điểm được yêu thích nhất, các sản phẩm dịch vụ được bán chạy nhất và doanh thu thu được từ việc bán sản phẩm sẽ giúp cho chúng ta có những chiến lược kinh doanh phù hợp hơn

Vì thế tài liệu này sẽ trình bày, phân tích chi tiết về hệ thống website du lịch và dịch vụ bán sản phẩm Các chương được trình bày trong tài liệu nhằm mục đích làm

rõ hơn các lý thuyết và công nghệ cần thiết để xây dựng nên đề tài, các phân tích thiết

kế chi tiết và chi tiết cài đặt cấu hình phần mềm hệ thống sẽ giúp chúng ta đánh giá được đề tài về độ bảo mật, sự ràng buộc và độ tin cậy của hệ thống

1.2 Mục tiêu đề tài

- Tạo ra website du lịch và dịch vụ bán sản phẩm cho phép người dùng nắm bắt thông tin cơ bản và chuẩn bị đồ dùng cần thiết cho chuyến đi, đăng bài, tạo bộ sưu tập, bình luận, tạo lịch trình các chuyến đi của chính mình

- Thông báo thông tin địa điểm thông qua lịch được đặt sẵn thông qua email

- Website có thêm dịch vụ mua sản phẩm liên quan, cần thiết cho chuyến đi du lịch của mình

1.3 Phạm vi đề tài

 Thực hiện các chức năng:

- Khách vãng lai:

+ Đăng nhập/Đăng ký

+ Tìm kiếm và xem chi tiết thông tin địa điểm

+ Tìm kiếm và xem thông tin sản phẩm dịch vụ

+ Xem bài đăng

+ Xem nội dung bình luận

Trang 20

+ Quản lý giỏ hàng (xem, thêm, xóa, cập nhật)

- Thành viên: thực hiện được các chức năng của khách vãng lai và thực hiện thêm các chức năng:

+ Cập nhật thông tin cá nhân

+ Đặt/Thanh toán sản phẩm dịch vụ

+ Xem lịch sử đặt/thanh toán sản phẩm

+ Quản lý bài đăng (đăng bài, xóa bài)

+ Tương tác bài đăng

+ Đánh giá địa điểm/sản phẩm

+ Tạo lịch trình các chuyến đi

+ Xem lịch trình đã tạo

- Admin (Quản lý): thực hiện được các chức năng của guest (khách vãng lai), các chức năng của member (thành viên) và thực hiện thêm các chức năng:

+ Quản lý sản phẩm dịch vụ

+ Thống kê sản phẩm được bán chạy nhất, doanh thu sản phẩm

+ Duyệt bài đăng

- Hệ thống:

+ Gửi email thông báo tạo lịch trình chuyến đi

+ Tích hợp với các mạng xã hội (Facebook, Google)

+ Liên kết ví điện tử (Paypal)

+ Tạo công cụ Crawl Data các địa điểm, sản phẩm từ các trang khác

 Thực hiện với các công nghệ:

- Front-end: Sử dụng HTML, CSS, JavaScript, Bootstrap kết hợp với

framework ReactJS để tạo giao diện cho website

- Back-end: Sử dụng NodeJS Platform để thực hiện và triển khai các chức năng

cho website

- Database: Sử dụng cở sở dữ liệu NoSQL MongoDB

Trang 21

- Sử dụng Socket.io Library để thực hiện các tương tác trên thời gian thực

- Triển khai website sử dụng dịch vụ điện toán đám mây Heroku

1.4 Mô tả yêu cầu chức năng

- Khách vãng lai: có thể vào trang website tìm kiếm các địa điểm du lịch Có thể chọn một địa điểm để xem thông tin chi tiết về khu vực, hình ảnh, mô tả, các điểm đến du lịch,… Ngoài ra, khách vãng lai còn có thể nhìn thấy những bài đăng của những người khác khi họ chia sẻ những kinh nghiệm và các đồ dùng cần thiết

về chuyến đi Thông qua những chia sẻ đó, khách vãng lai có thể dựa vào đó và tìm kiếm những sản phẩm để xem qua và lựa chọn sản phẩm phù hợp cho chuyến

đi và thêm chúng vào giỏ hàng của mình Trong trường hợp khách vãng lai muốn mua thì cần phải đăng nhập vào hệ thống để thanh toán Nếu chưa có tài khoản đăng nhập thì họ có thể đăng ký tài khoản hoặc sử dụng liên kết mạng xã hội (facebook, google) của mình để trở thành thành viên của website

- Thành viên: Sau khi trở thành thành viên của website, người dùng có thể thực hiện các chức năng tạo lịch trình cho chuyến đi của mình Lịch trình được tạo bao gồm các thông tin cơ bản như tên chuyến đi, thời gian, điểm đến, điểm đi Sau đó lịch trình sẽ được thông báo qua gmail cho người dùng để tiện theo dõi, ngoài ra người dùng cũng có thể coi trực tiếp lịch trình đã tạo ngay trên website Để thực hiện được việc mua sản phẩm trên website thì người dùng phải hoàn tất việc thanh toán Người dùng có thể thanh toán bằng hai cách: thanh toán trực tiếp khi nhận được hàng hoặc thanh toán qua cổng điện tử paypal, sau khi xác nhận đã nhận được đơn hàng thì người dùng có thể đánh giá chất lượng của sản phẩm đó Người dùng có thể bình chọn đánh giá những địa điểm mà người dùng muốn đánh giá trên website Ngoài ra nếu người dùng muốn bày tỏ cảm xúc hoặc chia sẻ kinh nghiệm của mình về chuyến đi người dùng có thể đăng bài chia sẻ lên website Những thành viên khác có thể xem các bài chia sẻ trên website và bình luận ý kiến

Trang 22

của mình về nội dung của người viết Người dùng cũng có thể thực hiện cập nhật thông tin cá nhân của mình ngay trên website

- Admin: Thực hiện chức năng quản lý thông tin của các sản phẩm trên hệ thống

và duyệt bài đăng của các thành viên trên website Bên cạnh đó còn có chức năng thống kê các sản phẩm bán chạy, doanh thu thu được trong ngày/tháng/năm

- System: Gửi thông tin về lịch trình mà người dùng đã tạo đến gmail mà thành viên đã đăng ký để dễ dàng theo dõi lịch trình chuyến đi của mình Hệ thống cho phép người dùng đăng nhập bằng tài khoản mạng xã hội thông qua các API của trang mạng xã hội (facebook, google) cung cấp Khi người dùng thực hiện thanh toán bằng paypal thì hệ thống sẽ gọi đến cổng thanh toán thông qua API được cung cấp để người dùng có thể thanh toán Bên cạnh đó còn có các con bot tự động crawl dữ liệu các địa điểm, sản phẩm từ các trang liên quan về website

Trang 23

so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật

ít thay đổi nhất trên DOM

Virtual DOM: Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc

chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý của ứng dụng ReactJS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn

đề này Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object

và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật ReactJS còn

sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi Với các đặc điểm ở trên, ReactJS dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện Ví dụ như trên Facebook: Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi Khi đó ReactJS sẽ rất hữu ích để sử dụng

JSX: Là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript JSX

có các đặc điểm sau:

Trang 24

+ Nhanh hơn (Faster): JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript

+ An toàn hơn (Safer): Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như (Java, C++) Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch

+ Dễ dàng hơn: JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng

Components: ReactJS được xây dựng xung quanh các component, chứ không

dùng template như các framework khác Trong ReactJS, chúng ta xây dựng trang web

sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component trong ReactJS có một trạng thái riêng, có thể thay đổi và ReactJS sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ ReactJS đều là component Chúng sẽ giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

Props và State:

+ Props: giúp các component tương tác với nhau, component nhận input gọi

là props, và trả thuộc tính mô tả những gì component con sẽ render Props là bất biến + State: thể hiện trạng thái của ứng dụng, khi state thay đổi thì component đồng thời render lại để cập nhật giao diện

Trang 25

Hình 2.1 Nodejs Development NodeJS là một nền tảng dựa vào Chrome Javascript runtime để xây dựng các ứng dụng nhanh, có độ lớn NodeJS sử dụng các phần phát sinh các sự kiện (event-driven), mô hình non-blocking I/O để tạo ra các ứng dụng nhẹ và hiệu quả cho các ứng dụng về dữ liệu thời gian thực chạy trên các thiết bị phân tán

NodeJS là một mã nguồn mở, đa nền tảng cho phát triển các ứng dụng phía Server và các ứng dụng liên quan đến mạng Ứng dụng Node.js được viết bằng Javascript và có thể chạy trong môi trường NodeJS trên hệ điều hành Window, Linux,

NodeJS cũng cung cấp cho chúng ta các module Javascript đa dạng, có thể đơn giản hóa sự phát triển của các ứng dụng web sử dụng NodeJS với các phần mở rộng NodeJS hoạt động với một luồng duy nhất và có khả năng asynchronous (bất đồng bộ) Không giống như server được viết bằng PHP thì mỗi ông request đến server thì server sẽ tạo ra một thread để xử lý trong khi đó server node xử lý mọi hành động trong một thread duy nhất Với cách thiết kế như vậy NodeJS sẽ hỗ trợ trang web một

số điều như:

Trang 26

 Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ blocking), nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi

(none-và cơ chế thông báo các sự kiện của NodeJS giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime)

 Chạy nhanh: NodeJS được xây dựng dựa vào nền tảng V8 Javascript Engine nên việc thực thi chương trình rất nhanh

 Đơn luồng nhưng khả năng mở rộng cao: NodeJS 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

 Không đệm: 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

 Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License

 Cách hoạt động: NodeJS sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng Bởi vì, NodeJS có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng không hiệu quả Chính vì lẽ đó giải pháp mà NodeJS đưa ra là sử dụng luồng đơn (Single-Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ trợ hàng chục ngàn kết nối đồng thời

 Express là một web application framework for NodeJS, nó cung cấp cho chúng những rất nhiều tính năng mạnh mẽ trên nền tảng web Express rất dễ dàng để phát triển các ứng dụng nhanh dựa trên NodeJS cho các ứng dụng web Express hỗ trợ các phương thức HTTP và middleware tạo ra 1 API rất mạnh

Trang 27

mẽ và sử dụng dễ dàng hơn Các tính năng của Express framework phải kể đến như:

 Cho phép thiết lập các lớp trung gian để trả về các HTTP request

 Định nghĩa routing có thể được sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

 Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template

Với cơ sở dữ liệu quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan

hệ (như MySQL hay SQL Server, ) sử dụng các bảng để lưu dữ liệu thì với

MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

So với RDBMS thì trong MongoDB collection ứng với table, còn document

sẽ ứng với row, MongoDB sẽ dùng các document thay cho row trong RDBMS

Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần phải tuân theo một cấu trúc nhất định

Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

 Một số câu lệnh cơ bản trên MongoDB:

 Tạo cơ sở dữ liệu: use test

 Tạo bảng: db.createCollection('students')

 Insert dữ liệu: db.students.insert({name:'thanh', gender: 'male'})

Trang 28

 Cập nhật: db.students.update({_id:1},{$set: {name: 'thanh update'}})

 Xóa dữ liệu: db.students.remove({_id: 1})

 Tìm kiếm tất cả: db.students.find({})

 Tìm kiếm: db.students.find({name: 'thanh'})

 Ưu điểm của MongoDB:

 Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái

 Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS

 Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

 Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so với MySQL

 Nhược điểm của mongoDB:

 Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác về value do đó key sẽ bị lặp lại Không hỗ trợ join nên dễ bị dư thừa dữ liệu

 MongoDB không có các tính chất ràng buộc như trong RDBMS nên khi thao tác với MongoDB thì phải hết sức cẩn thận

 Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống

ổ cứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng điều này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra các tình huống như mất điện

Trang 29

Hình 2.2 Cloud Computing với Heroku Heroku là nền tảng đám mây cho phép các lập trình viên xây dựng, triển khai, quản

lý và mở rộng ứng dụng (PaaS – Platform as a service) Nó rất linh hoạt và dễ sử dụng, cung cấp cho một con đường đơn giản nhất để đưa sản phẩm tiếp cận người dùng Nó giúp các nhà phát triển tập trung vào phát triển sản phẩm mà không cần quan tâm đến việc vận hành máy chủ hay phần cứng…

Heroku chạy các ứng dụng trong dynos – nó là một máy ảo mà có thể tăng giảm sức mạnh dự vào độ lớn của ứng dụng Hiểu đơn giản là dynos nhưng là các block, bạn muốn tăng tốc độ xử lý nhiều công việc phức tạp thì thêm block (scale chiều ngang) hoặc tăng kích thước block (scale chiều dọc) Heroku sẽ thanh toán phí tháng dựa trên số lượng dynos và kích thước mỗi dyno bạn sử dụng

Ưu và khuyết điểm của Heroku: Bạn có thể dùng Heroku miễn phí cùng với

vô vàn các addons hỗ trợ cực kỳ hữu ích thì đấy được coi là một trong những dịch vụ hấp dẫn Hỗ trợ nhiều ngôn ngữ lập trình như: NodeJS, Ruby, Python, PHP, Java, Scala, Clojure, Go, Kotlin Ngoài ra chúng ta còn được cung cấp Database, SSL miễn phí, hỗ trợ mạnh làm việc team cũng như liên kết với Github một cách đơn giản

Trang 30

Khuyết điểm thì tất nhiên là có, việc miễn phí sẽ chỉ có giới hạn là 550 giờ mỗi tháng Nếu muốn tăng lên 1000 giờ thì bạn cần cài đặt phương thức thanh toán trên đó Tuy nhiên để kiểm nghiệm một ý tưởng hay một trang web nhỏ thì nhiêu đó là quá đủ để thu về kết quả Sau 2 đến 3 giờ nếu server không có người truy cập thì server sẽ chuyển sang trạng thái ngủ Về việc server bị tắt khi không có traffic, cách đơn giản nhất là tự tạo traffic cho nó Cách dễ nhất là dùng Pingdom để ping trang blog của bạn thường xuyên giữ cho server không bị tắt

Những tính năng của Heroku:

trong đó Nó xử lý mọi từ từ cấu hình, điều phối, cân bằng tải, backup, log, bảo mật…

với nhau để xây dựng phần mềm tốt hơn Các nhóm này có thể tự tổ chức, kiểm soát, thêm thành viên và sử dụng các công cụ cộng tác như Heroku Pipelines

chiều ngang

tích hợp sẵn như New Relic, MongoDB, SendGrid, Searchify, Fastly, Papertrail, ClearDB MySQL, Treasure Data…

của mình về trạng thái trước đó ngay lập tức

tải CPU và lỗi…bạn sẽ luôn biết được ứng dụng của bạn đang hoạt động ra sao

hợp Github để xây dựng quy trình CI/CD gồm build, test, deploy…

Trang 31

UC05_Xem chi tiết thông tin địa điểm

UC06_Tìm kiếm sản phẩm UC07_Xem danh sách sản phẩm

UC08_Xem thông tin sản phẩm

UC09_Xem danh sách bài đăng

UC10_Quản lý giỏ hàng

UC10.1_Xem danh sách giỏ hàng

UC10.2_Thêm sản

UC10.3_Cập nhật giỏ hàng UC10.4_Xóa sản phẩm trong giỏ hàng UC11_Đặt hàng

UC12_Thanh toán sản phẩm

Thành viên

UC13_Quản lý bài đăng

UC01_Ðăng nhập

UC13.1_Đăng bài

UC13.2_Xóa bài đăng

UC09.1_Xem nội

dung bình luận

UC14_Tương tác bài đăng

UC16_Quản lý lịch trình

UC16.2_Xem lịch

trình đã tạo

Admin

UC18_Quản lý sản phẩm

UC18.1_Thêm sản phẩm UC18.2_Cập nhật sản

phẩm

UC18.3_Xóa sản

phẩm

UC22_Duyệt bài đăng

UC20_Thống kê sản phẩm bán chạy

UC21_Thống kê doanh thu

Hệ thống bên ngoài

UC24_Liên kết ví điện

tử paypal

UC23_Gửi email thông báo

UC25_Liên kết mạng

xã hội UC15_Đánh giá

điểm đến du lịch

UC16.1_Tạo lịch trình cho chuyến đi

UC17_Xem lịch sử đặt/thanh toán

UC19_Đánh giá sản phẩm

UC26_Cập nhật thông tin cá nhân

Trang 32

3.1.2 Danh sách tác nhân và mô tả

Bảng 3.1 Danh sách tác nhân và mô tả

Khách vãng lai Những người khách vãng lai ghé để xem trang website

Thành viên Người có thông tin tài khoản của mình trên website và thực hiện

các chức năng mà website cung cấp

Admin Người quản lý toàn bộ các chức năng cho website

3.1.3 Danh sách các tình huống hoạt động (Use cases)

Bảng 3.2 Danh sách các tình huống trong hệ thống

UC01 Đăng nhập

UC02 Đăng ký tài khoản

UC03 Tìm kiếm địa điểm

UC04 Xem danh sách địa điểm du lịch

UC05 Xem chi tiết thông tin địa điểm

UC06 Tìm kiếm sản phẩm

UC07 Xem danh sách sản phẩm

UC08 Xem thông tin sản phẩm

UC09 Xem danh sách bài đăng

UC09.1 Xem nội dung bình luận

UC10 Quản lý giỏ hàng

UC10.1 Xem danh sách giỏ hàng

UC10.2 Thêm sản phẩm vào giỏ hàng

UC10.3 Cập nhật giỏ hàng

UC10.4 Xóa sản phẩm trong giỏ hàng

UC11 Đặt hàng

Trang 33

UC12 Thanh toán sản phẩm

UC13 Quản lý bài đăng

UC13.1 Đăng bài

UC13.2 Xóa bài đăng

UC14 Tương tác bài đăng

UC15 Đánh giá điểm đến du lịch

UC16 Quản lý lịch trình

UC16.1 Tạo lịch trình cho chuyến đi

UC16.2 Xem lịch trình đã tạo

UC17 Xem lịch sử đặt/thanh toán

UC20 Thống kê sản phẩm bán chạy

UC21 Thống kê doanh thu

UC22 Duyệt bài đăng

UC23 Gửi email thông báo

UC24 Liên kết ví điện tử paypal

UC25 Liên kết mạng xã hội

UC26 Cập nhật thông tin cá nhân

Trang 34

3.1.4 Tình huống hoạt động

1 UC01_Đăng nhập

Bảng 3.3 Đặc tả use case UC01_Đăng nhập

Use case: UC01_Đăng nhập

Mục đích: Cho phép thành viên và admin đăng nhập vào hệ thống và

thực hiện những chức năng theo đúng phân quyền của mình

Mô tả: Hệ thống phân quyền chức năng đăng nhập thành 2 nhóm

người dùng: thành viên và admin Người dùng cần phải đăng nhập để sử dụng được những chức năng theo đúng phân quyền của mình

Tác nhân: Thành viên và admin

Điều kiện trước: Người dùng đã có tài khoản trong hệ thống

Điều kiện sau: Đăng nhập thành công thì hệ thống sẽ cho phép thành viên và

admin vào hệ thống thực hiện những chức năng

Luồng sự kiện

chính:

1 Chọn chức năng đăng nhập

3 Bắt đầu nhập tài khoản và mật khẩu

Luồng sự kiện phụ: 4.1 Nếu dữ liệu tài khoản và mật khẩu không đúng định dạng

hoặc không tồn tại trong cơ sở dữ liệu thì hệ thống hiển thị thông báo “Đăng nhập không thành công”, quay lại bước 2

Trang 35

Kiểm tra dữ liệu

Hiển thị thông báo “Đăng nhập thành công”

Trang 36

Hình 3.3 Sequence diagram UC01_Đăng nhập

2 UC02_Đăng ký thành viên

Bảng 3.4 Đặc tả use case UC02_Đăng ký tài khoản

Use case: UC02_Đăng ký tài khoản

Mục đích: Đăng ký tài khoản để truy cập

Mô tả: Use case mô tả việc người dùng đăng ký tài khoản để trở

Nhập tài khoản và mật khẩu

Nhấn nút “Đăng nhập” hoặc nhấn “enter” trên bàn phím

Nhập lại

Trang 37

Điều kiện sau: Đăng ký thành viên thành công và lưu thông tin thành viên

xuống cơ sở dữ liệu

Luồng sự kiện chính Người dùng Hệ thống

1 Chọn chức năng đăng ký tài khoản

3 Nhập thông tin để tiến hành đăng ký

Luồng sự kiện ngoại

Trang 38

chọn chức năng đăng ký tài khoản

bắt đầu

hiển thị giao diện đăng ký

nhập thông tin để tiến hành đăng ký

nhấn nút "Đăng ký" kiểm tra thông tin người dùngđăng ký

thông báo đăng ký thành công và lưu thông tin thành viên xuống cơ sở dữ liệu thông báo thông tin nhập không

Trang 39

Hình 3.5 Sequence diagram UC02_Đăng ký tài khoản

3 UC03_Tìm kiếm địa điểm

Bảng 3.5 Đặc tả use case UC03_Tìm kiếm địa điểm

Use case: UC03_Tìm kiếm địa điểm

Mục đích: Cho phép khách vãng lai, thành viên, admin tìm kiếm chi tiết

thông tin địa điểm

Hiển thị thông báo “Đăng ký tài khoản thành công”

Thông báo thông tin nhập không hợp lệ Nhấn nút "Đăng ký"

Nhập lại

callAPI(account/add)

dbAccount.save(): Account validateInput()

Hiển thị thông báo "Tài khoản đã tồn tại"

account:Account Nhập thông tin đăng ký

Trang 40

Mô tả: Người dùng có thể tìm kiếm thông tin địa điểm bằng cách

nhập từ khóa vào ô tìm kiếm với những từ khóa là các trường

dữ liệu thông tin địa điểm như: tên địa điểm, tên điểm đến du lịch

Tác nhân: Khách vãng lai, thành viên và admin

Điều kiện trước: Truy cập vào giao diện có ô tìm kiếm thông tin địa điểm Điều kiện sau: Tìm kiếm thành công thì hệ thống sẽ hiển thị thông tin địa

2 Nhấn nút “Tìm kiếm”

3 Hiển thị thông tin địa điểm lên màn hình thành công

Luồng sự kiện phụ: 2.1 Nếu nhập từ khóa vào ô tìm kiếm không có trong cơ sở

dữ liệu của hệ thống thì hệ thống hiển thị thông báo “Không tìm thấy”

2.2 Nếu nhập từ khóa vào ô tìm kiếm là rỗng thì hệ thống sẽ hiển thị danh sách các địa điểm lên màn hình

Định dạng
Số trang	142
Dung lượng	3,96 MB

Tài liệu tham khảo	Loại	Chi tiết
[1]. Viblo Asia (5-2017), https://viblo.asia/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7	Link
[2]. Freetuts (2-2016), https://freetuts.net/nodejs-la-gi-584.html	Link
[3]. Viblo Asia (9-2018), https://viblo.asia/p/mongodb-la-gi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N	Link
[4]. TopDev, https://topdev.vn/blog/heroku-la-gi/ Tiếng Anh	Link
[5]. Socket.IO, https://socket.io/docs/	Link
[6]. MongoDB, https://docs.mongodb.com/manual/reference/method/	Link
[7]. Heroku Dev Center, https://devcenter.heroku.com/articles/getting-started-with-nodejs	Link
[8]. MDB4, https://mdbootstrap.com/docs/react/	Link
[9]. NPM, https://www.npmjs.com/package/react-facebook-login [10]. NPM, https://www.npmjs.com/package/react-google-login	Link
[11]. Viblo Asia (6-2018), https://viblo.asia/p/reactjs-social-oauth-login-github-and-facebook-voi-firebase-authentication-Qbq5Q1aX5D8	Link