TÌM HIỂU REACTJS và xây DỰNG WEB QUẢN lý RESORT

1, đã tận tình hướng dẫn và giúp đỡ về kiến thức, phương pháp cho chúng emtrong suốt quá trình thực hiện và hoàn thành đồ án.Hi vọng với sự chỉ bảo và góp ý từ thầy, nhóm đề tài có thể t

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Giảng viên hướng dẫn: ThS Huỳnh Tuấn Anh

Nhóm thực hiện: 19522167 – Trương Xuân Tâm

19521931 – Lê Anh Nhân

MỤC LỤC

Chương 4 : THIẾT KẾ DỮ LIỆU 30

1, đã tận tình hướng dẫn và giúp đỡ về kiến thức, phương pháp cho chúng emtrong suốt quá trình thực hiện và hoàn thành đồ án.

Hi vọng với sự chỉ bảo và góp ý từ thầy, nhóm đề tài có thể tiếp tục phát triển

để ứng dụng ngày càng được mở rộng và phục vụ được tốt hơn cho người

dùng

Mặc dù đã có nhiều cố gắng trong suốt quá trình thực hiện đề tài, song khôngthể tránh khỏi những hạn chế, thiếu sót Chúng em mong rằng sẽ nhận đượcnhững đóng góp và nhận xét chân thành từ thầy, các bạn sinh viên và ngườidùng trong quá trình sử dụng phần mềm để phần mềm ngày càng hoàn thiệnhơn nữa Mọi đóng góp xin vui lòng gửi về email: 19522167@gm.uit.edu.vnhoặc 19521931@gm.uit.edu.vn

Mỗi ý kiến đóng góp của thầy và các bạn sẽ là một nguồn động lực to lớn đốivới chúng em để chúng em có thể cải thiện phần mềm tốt hơn và xây dựngnhững phần mềm hữu ích đối với người dùng hơn nữa

Chúng em xin trân trọng cảm ơn

Thành phố Hồ Chí Minh, ngày 14 tháng 06 năm 2022

Chương 1 - TỔNG QUAN ĐỀ TÀI

1.1 Mô tả bài toán

- Hiện nay, sau khi Covid-19 đã đi qua, cuộc sống người dân dần đi vào ổnđịnh và bình thường mới Với đa số mọi người, khi mà đã phải trải qua thời

kì giãn cách xã hội quá lâu, thì du lịch sẽ là lựa chọn hàng đầu Nhu cầu dulịch của người Việt Nam trong năm 2022 là rất lớn, đặc biệt là du lịch trongnước Theo đó, có tới 76% du khách Việt Nam tham gia khảo sát đang lên kếhoạch du lịch giải trí trong nước vào năm 2022, cao hơn nhiều so với tỷ lệ38% số người lập kế hoạch du lịch nước ngoài

- Thực tế, chúng ta có thể thấy rõ được rằng, đời sống của người dân mỗi ngàyđều được nâng cao, cơ sở hạ tầng và giao thông lại được cải thiện và hiện đạihơn, nhưng kéo theo đó chính là sự ô nhiễm môi trường ngày một nặng nề,

vì thế, con người thường có xu hướng muốn tìm đến những nơi gần gũi vớithiên nhiên để nghỉ dưỡng và thư giãn thoải mái hơn, bỏ lại tất cả nhữngkhói bụi, ồn ào nơi thành phố

- Bên cạnh đó, rất nhiều du khách có nhu cầu về chuyển đổi những điểm đếnkhác nhau trong tour du lịch của mình Chính vì thế, các hãng du lịch cầnchuẩn bị đầy đủ để có thể phục vụ và đáp ứng kịp thời cho khách du lịch

- Nhận thấy được vấn đề đó, ứng dụng quản lý Resort được ra đời nhằm đápứng được nhu cầu đặt phòng ở một cách tiện lợi, minh bạch hơn, giải quyếtđược bài toán về thông tin của các địa điểm, chất lượng nơi ở mà du khách

sẽ đặt chân đến

1.2 Yêu cầu đặt ra

- Một số yêu cầu nhóm đặt ra khi phát triển ứng dụng:

+ Tính tiện dụng: ứng dụng phải thân thiện với người dùng, dễ dàng tiếp cậnvới mọi lứa tuổi

+ Tính đúng đắn: thông tin đưa lên phải được xác thực kĩ về độ chính xác, ứngdụng chạy không lỗi

+ Tính thích nghi: ứng dụng chạy được trên nhiều nền tảng trình duyệt webkhác nhau

+ Tính tiến hoá: ứng dụng phải dễ dàng phát triển thêm tính năng mà khôngảnh hưởng đến các tính năng đã phát triển trước đó

+ Tính bảo trì: ứng dụng có thể thay đổi một số chức năng hoặc cập nhật thêmthông tin một cách tiện lợi nhất

+ Tính tương tác: tạo ra được một môi trường tương tác tốt giữa hệ thống vàngười dùng

Chương 2 - PHÂN TÍCH ĐẶC TẢ YÊU CẦU 2.1 Sơ đồ usecase

Hình 2.1 Sơ đồ usecase

2.1.1 Usecase khách hàng đặt phòng

Hình 2.1.1 Usecase khách hàng

2.1.2 Use Case khách vãng lai

Hình 2.1.2 Usecase khách vãng lai

2.2 Sequence Diagram

Hình 2.2 Sequence diagram

2.3 Danh sách Use case

1 Đăng nhập Dùng tài khoản đã đăng ký đăng nhập

vào hệ thống

3 Đăng xuất Thoát tài khoản khỏi hệ thống

4 Thay đổi mật khẩu Cho phép người dùng thay đổi mật

5 Xem thông tin nhà hàng Hiển thị chi tiết các thông tin về nhà

hàng như tên , giá , hình ảnh … vv

6 Xem thông tin phòng Hiển thị chi tiết các thông tin về phòng

như tên loại phòng,giá, hình ảnh … vv

7 Xem các dịch vụ sẵn có Hiển thị chi tiết các dịch vụ sẵn có để

10 Nhập thông tin đặt phòng Cho phép khách hàng nhập thông tin

cá nhân và các thông tin kèm theo đểđặt phòng

2.4 Đặc tả Usecase

2.4.1 Đăng ký

Mô tả Khách hàng đăng ký tài khoản mới để sử dụng cho việc đăng

nhập vàoTác nhân Khách hàng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Khách hàng yêu cầu mởmàn hình Đăng ký

2 Hiển thị màn hình đăng ký

3 Nhập các thông tin yêu cầucho việc tạo tài khoản Chọnnút Đăng ký

4 Kiểm tra các thông tin xem đãđúng định dạng đặt ra bởi hệthống hay chưa

5 Kiểm tra email đã được đăngnhập ký trước đó hay chưa

6 Xác thực email

7 Người dùng xác thực thôngqua email đã gửi đến emailngười dùng đăng ký

8 Thông báo đăng ký tài khoảnthành công

Luồng

thay thế

A1 Sai định dạng các thông tin đã nhập

5 Yêu cầu nhập lại đúng định dạng các thông tin sai định dạngA2 Email đã được đăng ký cho một tài khoản khác

6 Hệ thống yêu cầu người dùng đăng ký bằng email khácA3 Người dùng chưa xác thực tài khoản và hết thời gian xácthực

khoản và password Chọn nútĐăng nhập

5 Chuyển đến màn hình trangchủ

Luồng

thay thế

A1 Sai Tài khoản hoặc mật khẩu

5 Yêu cầu đăng nhập lạiA2 Email đã được đăng ký cho một tài khoản khác

6 Hệ thống yêu cầu người dùng đăng ký bằng email khácA3 Người dùng chưa xác thực tài khoản và hết thời gian xácthực

2.4.3 Thay đổi mật khẩu

Mô tả Khách hàng đã đăng nhập bằng tài khoản đã tạo

2 Hiển thị màn hình đổi mật khẩu

3 Nhập các thông tin yêu cầucho việc đổi mật khẩu nhưtài khoản và password vànhập password mới

4 Kiểm tra thông tin tài khoản vàmật khẩu

5 Thông báo đổi mật khẩu thànhcông

Luồng

thay thế

A1 Sai Tài khoản hoặc mật khẩu

5 Yêu cầu đăng nhập lạiĐiều kiện

Hành vi của tác nhân Hành vi của hệ thống

1 Khách hàng chọn Log out 2 Đăng xuất tài khoản khỏi ứng

Mô tả Khách hàng ở giao diện trang chủ có thể xem các hình ảnh và các

dịch vụ có sẵnTác nhân Khách hàng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Khách hàng ở trang chủ 2 Hiển thị màn hình trang chủ

3 Hiển thị các thông tin hiện có ởtrang chủ như banner, image ,room,

2.4.6 Xem thông tin nhà hàng

Mô tả Khách hàng đăng nhập vào hệ thống , click vào “Nhà hàng” trên

2.4.7 Xem thông tin phòng

Mô tả Khách hàng đăng nhập vào hệ thống , click vào “Room” trên

thanh header hoặc chọn view more ở mục favorite Room ở mànhình trang chủ

3 Nhập các thông tin cầnthiết

4 Hiển thị textbox để khách hàngnhập

Thông báo đặt phòng thành công

Chương 3 : THIẾT KẾ KIẾN TRÚC DỮ LIỆU

3.1 Kiến trúc tổng thể của hệ thống

Hình 3.1 Mern stack Development

MERN Stack :MERN stack là nguyên bộ combo open source các công nghệ đềuliên quan đến Javascript là cũng hot nhất hiện nay: MongoDB, ExpressJS,

React/React Native, NodeJS Người ta dùng MERN stack để xây dựng ReactUniversal App

3.2 Kiến trúc mô hình

Mô hình MVC (Model – View – Controller) là một trong những mô hình kiếntrúc ứng dụng phổ biến nhất Ban đầu mô hình này được áp dụng chủ yếu ở cácứng dụng desktop, nhưng sau này ý tưởng về mô hình MVC được ứng dụng chocác nền tảng khác như Web

Hình 3.2.1 Mô Hình MVC

3.2.1 Cấu trúc mô hình MVC

Tầng xử lý – Controller

Xử lý logic của ứng dụng, là cầu nối giữa tầng View và Model Hay nói mộtcách cụ thể, Controller sẽ nhận yêu cầu được gửi từ View và thực hiện xử lí yêucầu, truy vấn hoặc thao tác dữ liệu lên tầng Model Sau khi xử lý xong, kết quả sẽđược trả về lại cho tầng View.

Tầng logic dữ liệu – Model

Tầng Model là trung gian giữa ứng dụng và hệ quản trị cơ sở dữ liệu để cungcấp và quản lý mô hình và các thao tác lên dữ liệu Thông thường, tầng Model sẽkết

nối với một hoặc nhiều cơ sở dữ liệu để thực hiện các thao tác lên dữ liệu

Tầng giao diện – View

Thể hiện giao diện người dùng, là thành phần giao tiếp giữa người dùng (user)

và ứng dụng (application)

3.2.2 Mô hình MVC trong ứng dụng Web

Với sự phát triển của các công nghệ xây dựng web ở cả Frontend và Backend,các nhà phát triển có thể xây dựng và phát triển ứng dụng web một cách độc lậpnhưng vẫn đảm bảo được tính kiến trúc của ứng dụng

Hình 3.2.2 Mô Hình MVC trong ứng dụng Web

− Tầng giao diện người dùng (View) sẽ được phát triển độc lập ở phía client sử

dụng các công nghệ Frontend như VueJS, ReactJS, Nói cách khác, client sẽđược chạy trên 1 server độc lập và có thể tương tác với phía server của backend

− Tầng xử lí (Controller) và logic dữ liệu (Model) sẽ được phát triển độc lập ở

phía server sử dụng các công nghệ Backend như ExpressJS, DotNetCore, Flank,

− Sau khi hoàn thành việc phát triển, client sẽ cung cấp 1 bản build hoàn chỉnh đểthêm vào phía Server Người dùng sẽ yêu cầu thành phần giao diện thông quarequest gửi đến Server

NodeJS có thể được dùng để xây dựng các loại ứng dụng khác nhau như các ứngdụng dòng lệnh, ứng dụng web, ứng dụng trò chuyện theo thời gian thực, máy chủREST API, Tuy nhiên, NodeJS thường được dùng chủ yếu để xây dựng cácchương trình mạng như máy chủ web, tương tự như PHP, Java hoặc ASP.NET.

Vì đây là mã nguồn mở nên cho phép bạn sử dụng miễn phí và đồng thời được liêntục được chỉnh sửa, cải tiến bởi cộng đồng các nhà phát triển toàn cầu.

Lợi ích sử dụng Nodejs

● IO hướng sự kiện không đồng bộ giúp xử lý nhiều yêu cầu đồng thời

● Đáp ứng được những yêu cầu về thời gian thực

● Có tốc độ cực rất nhanh, đáp ứng được nhu cầu sử dụng của khách truy cập

‘khổng lồ’ trong thời gian ngắn

● Sử dụng JavaScript, một ngôn ngữ lập trình rất dễ học

● Chia sẻ cùng một đoạn mã với cả phía máy chủ và máy khách

● Npm và các module rất mạnh mẽ và vẫn đang tiếp tục phát triển

● Có một cộng đồng lớn mạnh, có nhiều mã được chia sẻ qua github

● Tương thích với nhiều thiết bị, nhiều hệ điều hành như MacOS, Window,Linux,…

3.2.4 ReactJS

Hình 3.2.4 Reactjs

ReactJS là gì?

ReactJS là một thư viện JavaScript được tạo ra để xây dựng giao diện người dùng

có khả năng tương tác tốt và nhanh chóng cho các ứng dụng web và di động Nó làmột thư viện mã nguồn mở, xây dựng dựa trên các component, giao diện ngườidùng chỉ chịu trách nhiệm cho tầng view của ứng dụng

Nó được sử dụng bởi các công ty lớn, đã thành lập và các công ty mới thành lậpnhư: Netflix, Airbnb, Instagram và New York Times v v ReactJS mang lại nhiềulợi thế cho các lập trình viên, khiến nó trở thành một lựa chọn tốt hơn so với cácFramework khác như Angular

Trong kiến trúc Model View Controller (MVC), tầng view chịu trách nhiệm vềgiao diện của ứng dụng ReactJS được tạo ra bởi Jordan Walke, một kỹ sư phầnmềm tại Facebook

Các tính năng của ReactJS

Chúng ta đã vừa tìm hiểu ReactJS là gì rồi, vậy bây giờ hãy xem nó có những tínhnăng gì mà khiến cho nhiều công ty sử dụng nó đến vậy

JSX – JavaScript Syntax Extension

JSX như tên gọi của nó, là một phần mở rộng cú pháp cho JavaScript Nó được sửdụng với ReactJS để mô tả giao diện người dùng trông như thế nào Bằng cách sửdụng JSX, chúng ta có thể viết các cấu trúc HTML trong cùng một tệp chứa mãJavaScript Điều này làm cho mã dễ hiểu và dễ gỡ lỗi hơn, vì nó tránh việc sử dụngcác cấu trúc DOM JavaScript phức tạp

Virtual DOM

Virtual DOM là một định dạng dữ liệu của JavaScript, với khối lượng nhẹ và đượcdùng để thể hiện nội dung của DOM – Document Object Model – Mô hình Đốitượng Tài liệu tại một thời điểm nhất định nào đó Khi trạng thái của một đối tượngthay đổi, VDOM chỉ thay đổi đối tượng đó trong DOM thực thay vì cập nhật tất cảcác đối tượng

Nghe có vẻ khá phức tạp đúng không? Đừng lo lắng quá, trước tiên chúng ta hãytìm hiểu DOM là gì, sau đó chúng ta sẽ xem xét cách VDOM và DOM thực tươngtác với nhau.

● Mô hình Đối tượng Tài liệu (DOM) là gì?

DOM (Mô hình Đối tượng Tài liệu) coi một file XML hoặc HTML như một cấutrúc cây, trong đó mỗi nút là một đối tượng đại diện cho một phần của tài liệu

● Virtual DOM và ReactJS DOM tương tác với nhau như thế nào?

Khi trạng thái của một đối tượng thay đổi trong ứng dụng ReactJS, VDOM sẽ đượccập nhật Sau đó, nó so sánh trạng thái trước đó của nó và sau đó chỉ cập nhật cácđối tượng đó trong DOM thực thay vì cập nhật tất cả các đối tượng

Điều này làm cho mọi thứ hoạt động nhanh chóng

Performance

ReactJS sử dụng VDOM, giúp các ứng dụng web chạy nhanh hơn nhiều so vớinhững ứng dụng được phát triển với các Framework front-end khác

ReactJS chia giao diện người dùng phức tạp thành các thành phần riêng lẻ, chophép nhiều người dùng làm việc trên từng thành phần đồng thời, do đó đẩy nhanhthời gian phát triển cũng như cải thiện hiệu năng của ứng dụng.

Redux

Redux là một phần cực kỳ quan trọng trong ReactJS

Bản thân của ReactJS không sở hữu các module chuyên dụng nhằm để xử lý dữliệu Vì thế, ReactJS được triển khai một cách độc lập và chia nhỏ View thànhnhững component nhỏ khác nhau, điều này sẽ giúp cho việc quản lý dễ dàng hơn,các thành phần sẽ liên kết chặt chẽ với nhau hơn

One-way Data Binding

Liên kết dữ liệu một chiều của ReactJS giữ mọi thứ theo mô-đun và nhanh chóng.Luồng dữ liệu một chiều có nghĩa là khi một nhà phát triển thiết kế một ứng dụngReactJS, họ thường lồng các thành phần con bên trong các thành phần mẹ Bằngcách này, nhà phát triển biết được lỗi xảy ra ở đâu và khi nào, giúp họ kiểm soát tốthơn toàn bộ ứng dụng web

Component

ReactJS được xây dựng xoay quanh các component, trong khi đó, các Frameworkkhác dùng template Để tạo ra một component có đầy đủ những đặc tính, bạn chỉcần sử dụng phương thức createClass dùng để nhận một tham số mô tả đặc tính

Tại sao nên sử dụng ReactJS?

Bây giờ chúng ta đã biết ReactJS là gì và các tính năng của nó, hãy tiếp tục và xemtại sao ReactJS là thư viện front-end phổ biến nhất để phát triển ứng dụng web.

Sự phổ biến của ReactJS ngày nay đã lu mờ tất cả các Framework phát triển

front-end khác Đây là lý do tại sao:

● Dễ dàng tạo các ứng dụng động

ReactJS giúp tạo các ứng dụng web động dễ dàng hơn vì nó yêu cầu ít mã hóa hơn

và cung cấp nhiều chức năng hơn, trái ngược với JavaScript, nơi việc viết mã

thường trở nên phức tạp rất nhanh

● Cải thiện hiệu năng với Virtual DOM

ReactJS cho phép người dùng xây dựng các Virtual DOM và host chúngtrong bộ nhớ Ưu điểm này sẽ giúp Virtual thay đổi ngay khi DOM thực tế

có sự thay đổi Cập nhật liên tục giúp các ứng dụng tránh tình trạng bị giánđoạn Người dùng sử dụng liên tục, website ổn định giúp doanh thu duy trì

và tăng trưởng vượt bậc

được sử dụng lại trong toàn bộ ứng dụng, do đó làm giảm đáng kể thờigian phát triển của ứng dụng.

● Dễ dàng viết component dễ dàng hơn

Để viết các component trong ReactJS, người dùng sẽ sử dụng JSX Đây làmột sự kết hợp giữa JavaScript và HTML Tuy không phải là phần mởrộng cú pháp phổ biến nhất, JSX được người dùng đánh giá cao khi pháttriển components đặc biệt hoặc các ứng dụng có khối lượng lớn

● Thân thiện với SEO

Đây là mong muốn của tất cả doanh nghiệp trong thời đại thương mại điện

tử sôi động hiện nay

Giao diện người dùng có thể truy cập càng nhiều công cụ tìm kiếm khácnhau đồng nghĩa với khả năng tiếp cận khách hàng càng cao Đây là mộttrong những yếu tố ảnh hưởng trực tiếp đến sự tăng trưởng doanh thu bánhàng qua website

3.2.5 MongoDB

Hình 3.2.5 MongoDB

MongoDB là gì?

MongoDB là một database hướng tài liệu (document), một dạng NoSQL database.

Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thíchứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON

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ác kích cỡ và các document khác nhau Các dữ liệu được lưu trữtrong document kiểu JSON nên truy vấn sẽ rất nhanh

Ưu điểm của MongoDB