Tìm hiểu ReactJS và xây dựng web quản lý resort - Đồ án CNTT

ReactJS: Xây dựng web quản lý resort hiệu quả. Tìm hiểu cách ReactJS giúp tối ưu quy trình quản lý, tăng trải nghiệm khách hàng cho resort của bạn.

Chuyên ngành

Công Nghệ Phần Mềm

Người đăng

Ẩn danh

Thể loại

Đồ Án 1

2022

55
1
0

Phí lưu trữ

30 Point

Mục lục chi tiết

LỜI CẢM ƠN

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

1.1. Mô tả bài toán

1.2. Yêu cầu đặt ra

2. Chương 2: PHÂN TÍCH ĐẶC TẢ YÊU CẦU

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

2.2. Use Case khách vãng lai

2.3. Danh sách Use case

2.4. Đặc tả Usecase

2.5. Thay đổi mật khẩu

2.6. Xem thông tin nhà hàng

2.7. Xem thông tin phòng

2.8. Đặt phòng

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

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

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

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

3.5. MongoDB

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

4.1. Mô tả chi tiết kiểu dữ liệu

4.2. Bảng Favorite Restaurant

4.3. Bảng Type of Room

4.4. Bảng Image Gallery

5. Chương 5: Thiết kế giao diện

5.1. Danh sách các màn hình

5.2. Mô tả các màn hình

5.3. Màn hình Register

5.4. Màn hình Log in

5.5. Màn hình Home

5.6. Màn hình List Rooms

5.7. Màn hình Contact Us

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

6.1. Công nghệ sử dụng

6.2. Mức độ hoàn thiện

6.3. Kết quả đạt được

6.4. Hướng phát triển

7. CHƯƠNG 7: BẢNG PHÂN CÔNG CÔNG VIỆC

8. CHƯƠNG 8: TÀI LIỆU THAM KHẢO

Tóm tắt

I. ReactJS Tổng Quan Xây Dựng Web Quản Lý Resort Hiệu Quả

ReactJS đã nổi lên như một lựa chọn hàng đầu để xây dựng các ứng dụng web hiện đại, đặc biệt là trong lĩnh vực quản lý resort. Với kiến trúc dựa trên component, Virtual DOM và khả năng tái sử dụng cao, ReactJS mang lại hiệu suất vượt trội, trải nghiệm người dùng mượt mà và khả năng mở rộng dễ dàng. Bài viết này sẽ đi sâu vào các khía cạnh quan trọng của việc sử dụng ReactJS để xây dựng web quản lý resort hiệu quả, từ việc lựa chọn công nghệ phù hợp đến triển khai các tính năng cốt lõi. Theo nghiên cứu từ ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH, ReactJS cho phép chia giao diện người dùng phức tạp thành các thành phần riêng lẻ, giúp tăng tốc thời gian phát triển và cải thiện hiệu năng ứng dụng. Việc sử dụng MERN stack, kết hợp ReactJS với MongoDB, ExpressJS, và NodeJS, tạo ra một giải pháp toàn diện cho việc xây dựng và quản lý ứng dụng web resort.

1.1. Giới thiệu ReactJS và Ưu điểm khi làm web resort

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, chuyên dùng để xây dựng giao diện người dùng (UI). Ưu điểm của ReactJS khi sử dụng trong việc xây dựng website quản lý resort bao gồm: Hiệu suất cao nhờ sử dụng Virtual DOM, khả năng tái sử dụng các component, giúp giảm thiểu thời gian phát triển và bảo trì, giao diện người dùng linh hoạt và tương tác tốt, dễ dàng tích hợp với các thư viện và công nghệ khác. Ngoài ra, ReactJS còn có một cộng đồng lớn mạnh, cung cấp nhiều tài liệu, công cụ hỗ trợ và các component sẵn có, giúp các nhà phát triển dễ dàng tiếp cận và làm việc.

1.2. Kiến trúc Component Based trong ReactJS và ứng dụng

Kiến trúc Component-Based là nền tảng của ReactJS, cho phép chia nhỏ giao diện người dùng thành các thành phần độc lập, có thể tái sử dụng và dễ dàng quản lý. Trong một web quản lý resort, kiến trúc này có thể được áp dụng để xây dựng các component như: Header, Footer, Navigation, RoomCard, BookingForm, v.v. Mỗi component sẽ chịu trách nhiệm hiển thị và xử lý một phần cụ thể của giao diện, giúp tăng tính modularity, khả năng bảo trì và mở rộng của ứng dụng. Việc sử dụng component cũng giúp đơn giản hóa quá trình phát triển, cho phép các nhà phát triển làm việc song song trên các phần khác nhau của ứng dụng.

II. Thách Thức Phát Triển Web Quản Lý Resort Với ReactJS

Mặc dù ReactJS mang lại nhiều lợi ích, việc xây dựng một web quản lý resort hoàn chỉnh cũng đặt ra nhiều thách thức. Những thách thức này bao gồm: quản lý trạng thái ứng dụng một cách hiệu quả, xử lý dữ liệu từ API và cơ sở dữ liệu, đảm bảo tính bảo mật và hiệu suất của ứng dụng, tối ưu hóa trải nghiệm người dùng trên các thiết bị khác nhau, tích hợp các tính năng đặc thù như đặt phòng, thanh toán trực tuyến, quản lý khách hàng, v.v. Để vượt qua những thách thức này, cần có kiến thức vững chắc về ReactJS, kinh nghiệm làm việc với các công nghệ liên quan và quy trình phát triển chuyên nghiệp.

2.1. Quản lý State và dữ liệu hiệu quả trong ứng dụng ReactJS

Quản lý state là một trong những thách thức lớn nhất trong phát triển ứng dụng ReactJS. State là dữ liệu mà component sử dụng để hiển thị giao diện và tương tác với người dùng. Trong một web quản lý resort, state có thể bao gồm thông tin về phòng, khách hàng, đặt phòng, v.v. Việc quản lý state hiệu quả là rất quan trọng để đảm bảo tính nhất quán, hiệu suất và khả năng bảo trì của ứng dụng. Các giải pháp quản lý state phổ biến trong ReactJS bao gồm: Sử dụng state cục bộ của component, sử dụng Context API để chia sẻ state giữa các component, sử dụng các thư viện quản lý state như Redux hoặc MobX.

2.2. Bảo mật và Tối Ưu hiệu suất cho web quản lý Resort

Bảo mật và tối ưu hiệu suất là hai yếu tố quan trọng cần được xem xét kỹ lưỡng khi xây dựng web quản lý resort. Về bảo mật, cần đảm bảo rằng ứng dụng không bị tấn công từ các lỗ hổng bảo mật như: SQL injection, Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), v.v. Các biện pháp bảo mật cần được áp dụng bao gồm: Xác thực và phân quyền người dùng, mã hóa dữ liệu nhạy cảm, kiểm tra và lọc dữ liệu đầu vào, sử dụng các thư viện và framework bảo mật. Về tối ưu hiệu suất, cần đảm bảo rằng ứng dụng hoạt động mượt mà và nhanh chóng, đặc biệt là trên các thiết bị di động. Các kỹ thuật tối ưu hiệu suất bao gồm: Tối ưu hóa hình ảnh và tài nguyên, sử dụng kỹ thuật lazy loading, giảm thiểu số lượng request HTTP, sử dụng cache, tối ưu hóa code JavaScript và CSS.

III. Hướng Dẫn Xây Dựng Giao Diện Web Resort Với ReactJS

Việc xây dựng giao diện web resort với ReactJS đòi hỏi một quy trình có cấu trúc và các bước rõ ràng. Bắt đầu bằng việc thiết kế UI/UX, xác định cấu trúc component và các tính năng cần thiết. Tiếp theo, cần thiết lập môi trường phát triển, cài đặt các thư viện và công cụ cần thiết. Sau đó, bắt đầu xây dựng các component, sử dụng JSX để mô tả giao diện và CSS để tạo kiểu. Trong quá trình xây dựng, cần chú ý đến tính tái sử dụng, khả năng bảo trì và hiệu suất của các component. Cuối cùng, cần kiểm tra và thử nghiệm giao diện trên các thiết bị và trình duyệt khác nhau.

3.1. Thiết kế UI UX thân thiện với người dùng cho resort

Thiết kế UI/UX là một yếu tố then chốt trong việc tạo ra một web quản lý resort thành công. Giao diện người dùng (UI) cần phải trực quan, dễ sử dụng và hấp dẫn. Trải nghiệm người dùng (UX) cần phải mượt mà, liền mạch và đáp ứng được nhu cầu của người dùng. Các nguyên tắc thiết kế UI/UX cần được tuân thủ bao gồm: Đơn giản hóa giao diện, sử dụng màu sắc và hình ảnh hài hòa, cung cấp phản hồi rõ ràng cho người dùng, đảm bảo tính nhất quán, tối ưu hóa cho các thiết bị di động. Nghiên cứu từ ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH nhấn mạnh tầm quan trọng của việc tạo ra một môi trường tương tác tốt giữa hệ thống và người dùng.

3.2. Triển khai các tính năng chính Đặt phòng Xem phòng

Các tính năng chính của một web quản lý resort bao gồm: Đặt phòng, xem thông tin phòng, tìm kiếm phòng, quản lý khách hàng, thanh toán trực tuyến, v.v. Việc triển khai các tính năng này cần được thực hiện một cách cẩn thận và có cấu trúc. Đối với tính năng đặt phòng, cần xây dựng một form đặt phòng trực quan, cho phép người dùng chọn ngày đến, ngày đi, số lượng khách, loại phòng, v.v. Sau khi người dùng điền đầy đủ thông tin, cần xác thực dữ liệu và gửi yêu cầu đặt phòng đến server. Đối với tính năng xem thông tin phòng, cần hiển thị thông tin chi tiết về từng loại phòng, bao gồm: Hình ảnh, mô tả, tiện nghi, giá cả, v.v. Thông tin này cần được lấy từ cơ sở dữ liệu và hiển thị một cách rõ ràng và hấp dẫn.

IV. Phương Pháp Tích Hợp Backend và API cho Web ReactJS Resort

Để web quản lý resort hoạt động một cách đầy đủ, cần tích hợp ReactJS với backend và API. Backend chịu trách nhiệm xử lý logic nghiệp vụ, lưu trữ dữ liệu và cung cấp API cho frontend. API là giao diện giao tiếp giữa frontend và backend, cho phép frontend gửi yêu cầu và nhận dữ liệu từ backend. Các công nghệ backend phổ biến cho ReactJS bao gồm: Node.js, Python, Java, PHP, v.v. Các định dạng API phổ biến bao gồm: REST, GraphQL.

4.1. Chọn Backend phù hợp NodeJS Express và MongoDB

Việc lựa chọn backend phù hợp là rất quan trọng để đảm bảo hiệu suất, khả năng mở rộng và bảo trì của ứng dụng. NodeJS, Express và MongoDB là một bộ ba công nghệ phổ biến được sử dụng trong phát triển web với ReactJS. NodeJS là một môi trường runtime JavaScript cho phép chạy JavaScript trên server. Express là một framework web cho NodeJS, cung cấp các công cụ và tính năng để xây dựng API. MongoDB là một cơ sở dữ liệu NoSQL, lưu trữ dữ liệu dưới dạng JSON. Sự kết hợp của NodeJS, Express và MongoDB tạo ra một stack phát triển mạnh mẽ và linh hoạt cho web quản lý resort.

4.2. Thiết kế API RESTful để giao tiếp với ReactJS

Thiết kế API RESTful là một cách tiếp cận phổ biến để xây dựng API cho web ReactJS. RESTful API tuân theo các nguyên tắc của kiến trúc REST, sử dụng các HTTP methods (GET, POST, PUT, DELETE) để thực hiện các thao tác CRUD (Create, Read, Update, Delete) trên tài nguyên. Các API RESTful cần được thiết kế một cách rõ ràng, dễ hiểu và tuân thủ các tiêu chuẩn bảo mật. Ví dụ, API để lấy danh sách phòng có thể có endpoint là /api/rooms, sử dụng method GET và trả về dữ liệu dưới dạng JSON.

V. Ứng Dụng Triển Khai Web Quản Lý Resort ReactJS Thực Tế

Triển khai một web quản lý resort ReactJS thực tế đòi hỏi sự chuẩn bị kỹ lưỡng và quy trình triển khai chuyên nghiệp. Các bước triển khai bao gồm: Chọn hosting, cấu hình server, build ứng dụng ReactJS, deploy ứng dụng lên server, cấu hình domain và SSL, kiểm tra và thử nghiệm ứng dụng. Cần đảm bảo rằng ứng dụng hoạt động ổn định, bảo mật và có hiệu suất tốt trong môi trường thực tế.

5.1. Lựa chọn Hosting và cấu hình Server cho web ReactJS

Việc lựa chọn hosting và cấu hình server là một bước quan trọng trong quá trình triển khai web ReactJS. Có nhiều loại hosting khác nhau, bao gồm: Shared hosting, VPS hosting, Dedicated hosting, Cloud hosting. Mỗi loại hosting có ưu và nhược điểm riêng, cần lựa chọn loại hosting phù hợp với nhu cầu và ngân sách của dự án. Sau khi chọn hosting, cần cấu hình server để chạy ứng dụng ReactJS. Các bước cấu hình server bao gồm: Cài đặt NodeJS, cài đặt các dependencies, cấu hình reverse proxy, cấu hình SSL.

5.2. Quy trình Deploy và bảo trì ứng dụng ReactJS resort

Quy trình deploy và bảo trì ứng dụng ReactJS resort cần được thiết lập một cách rõ ràng và tự động hóa. Deploy là quá trình đưa ứng dụng từ môi trường phát triển lên môi trường production. Có nhiều công cụ deploy khác nhau, bao gồm: Netlify, Vercel, Heroku, AWS, v.v. Sau khi deploy, cần bảo trì ứng dụng để đảm bảo ứng dụng hoạt động ổn định, bảo mật và có hiệu suất tốt. Các hoạt động bảo trì bao gồm: Theo dõi log, cập nhật phiên bản, sửa lỗi, tối ưu hóa hiệu suất, kiểm tra bảo mật.

VI. Kết Luận Tương Lai Của Web Quản Lý Resort Dùng ReactJS

ReactJS tiếp tục là một công nghệ hàng đầu trong việc xây dựng web quản lý resort hiện đại và hiệu quả. Với sự phát triển không ngừng của ReactJS và các công nghệ liên quan, tương lai của web quản lý resort sẽ ngày càng trở nên sáng sủa. Các xu hướng phát triển trong tương lai bao gồm: Sử dụng Serverless architecture, tích hợp trí tuệ nhân tạo (AI), sử dụng Progressive Web Apps (PWA), tăng cường trải nghiệm người dùng với thực tế ảo (VR) và thực tế tăng cường (AR).

6.1. Xu hướng phát triển web resort AI VR PWA

Các công nghệ mới như AI, VR, PWA đang mở ra những cơ hội mới cho web quản lý resort. AI có thể được sử dụng để cá nhân hóa trải nghiệm người dùng, cung cấp các gợi ý đặt phòng thông minh, chatbot hỗ trợ khách hàng, v.v. VR có thể được sử dụng để tạo ra các trải nghiệm tham quan resort ảo, giúp khách hàng có cái nhìn trực quan về các phòng và tiện nghi. PWA cho phép cài đặt web resort lên thiết bị di động như một ứng dụng native, cung cấp trải nghiệm người dùng nhanh chóng và mượt mà.

6.2. Lời khuyên cho người mới bắt đầu với ReactJS trong resort

Lời khuyên cho người mới bắt đầu với ReactJS trong lĩnh vực quản lý resort: Bắt đầu với các kiến thức cơ bản về HTML, CSS, JavaScript, ReactJS. Tìm hiểu về các công nghệ liên quan như: NodeJS, Express, MongoDB. Thực hành xây dựng các dự án nhỏ để làm quen với ReactJS. Tham gia cộng đồng ReactJS để học hỏi kinh nghiệm từ những người khác. Luôn cập nhật kiến thức về các công nghệ mới nhất.

22/09/2025

Trích đoạn nội dung tài liệu

Chương 1 - TỔNG QUAN ĐỀ TÀI 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 du lịch của người Việt Nam trong năm 2022 là rất lớn, đặc biệt là du lịch trong nướ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 đại hơ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ới thiên nhiên để nghỉ dưỡng và thư giãn thoải mái hơn, bỏ lại tất cả những khó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 đến khác nhau trong tour du lịch của mình. Chính vì thế, các hãng du lịch cần chuẩ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. 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ận vớ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, ứng dụ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 web khá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êm thô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 Usecase khách hàng đặt phòng Hình 2.1 Usecase khách hàng 2.2 Use Case khách vãng lai Hình 2.2 Usecase khách vãng lai 2.2 Sequence Diagram Hình 2.3 Danh sách Use case STT Tên Use case Mô tả chung 1 Đăng nhập Dùng tài khoản đã đăng ký đăng nhập vào hệ thống 2 Đăng ký Tạo tài khoản mới 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 khẩu 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ó để phục vụ khách 8 Trang chủ Hiển thị Image , Favorite room , …. vv 9 Đặt Phòng Cho phép khách hàng đặt các phòng hiệ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.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ào Tác nhân Khách hàng Luồng Hành vi của tác nhân Hành vi của hệ thống chính 1. Khách hàng yêu cầu mở 2.

Hiển thị màn hình đăng ký màn hình Đăng ký 3. Nhập các thông tin yêu cầu 4. Kiểm tra các thông tin xem đã cho việc tạo tài khoản. Chọn đúng định dạng đặt ra bởi hệ nút Đăng ký thống hay chưa 5.

Kiểm tra email đã được đăng nhập ký trước đó hay chưa 6. Người dùng xác thực thông 8. Thông báo đăng ký tài khoản qua email đã gửi đến email thành công người dùng đăng ký Luồng A1. Sai định dạng các thông tin đã nhập thay thế 5.

Yêu cầu nhập lại đúng định dạng các thông tin sai định dạng A2. 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ác A3. Người dùng chưa xác thực tài khoản và hết thời gian xác thực Điều kiện Phải có email hợp lệ trước Điều kiện Tạo tài khoản trên hệ thống và thông báo đã đăng ký tài khoản sau thành công 2.2 Đăng nhập Mô tả Khách hàng đăng nhập vào ứng dụng thông qua tài khoản đã tạo trước đó Tác nhân Khách hàng Luồng Hành vi của tác nhân Hành vi của hệ thống chính 1.

Khách hàng yêu cầu mở 2. Hiển thị màn hình đăng nhập màn hình Đăng nhập 3. Nhập các thông tin yêu cầu 4. Kiểm tra thông tin tài khoản và cho việc đăng nhập như tài mật khẩu khoản và password Chọn nút Đăng nhập 5.

Chuyển đến màn hình trang chủ Luồng A1. Sai Tài khoản hoặc mật khẩu thay thế 5. Yêu cầu đăng nhập lại A2. 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ác A3. Người dùng chưa xác thực tài khoản và hết thời gian xác thực Điều kiện Phải có email hợp lệ trước Điều kiện Tạo tài khoản trên hệ thống và thông báo đã đăng ký tài khoản sau thành công 2.3 Thay đổi mật khẩu Mô tả Khách hàng đã đăng nhập bằng tài khoản đã tạo Tác nhân Khách hàng Luồng Hành vi của tác nhân Hành vi của hệ thống chính 1. Khách hàng yêu cầu mở 2. Hiển thị màn hình đổi mật khẩu màn hình đổi mật khẩu 3.

Nhập các thông tin yêu cầu 4. Kiểm tra thông tin tài khoản và cho việc đổi mật khẩu như mật khẩu tài khoản và password và nhập password mới 5. Thông báo đổi mật khẩu thành công Luồng A1. Sai Tài khoản hoặc mật khẩu thay thế 5.

Yêu cầu đăng nhập lại Điều kiện Phải có email hợp lệ và đã đăng nhập vào hệ thống trước Điều kiện Đổi mật khẩu trên hệ thống và thông báo đã đổi mật khẩu thành sau công 2.4 Đăng xuất Mô tả Khách hàng đăng xuất tài khoản khỏi ứng dụng Tác nhân Khách hàng Luồng Hành vi của tác nhân Hành vi của hệ thống chính 1. Khách hàng chọn Log out 2. Đăng xuất tài khoản khỏi ứng dụng 3. Hiển thị trang đăng nhập Luồng Không có thay thế Điều kiện Khách hàng đã đăng nhập vào ứng dụng trước Điều kiện Hiển thị trang đăng nhập sau 2.5 Trang chủ 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ẵn Tác nhân Khách hàng Luồng Hành vi của tác nhân Hành vi của hệ thống chính 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,. Luồng Không có thay thế Điều kiện Khách hàng truy cập vào trang web trước Điều kiện Hiển thị trang chủ sau 2.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 thanh header Tác nhân Khách hàng Luồng Hành vi của tác nhân Hành vi của hệ thống chính 1.

Khách hàng mở trang Nhà 2. Hiển thị màn hình nhà hàng hàng trên thanh header 3. Kéo xem các thông tin có 4. Hiển thị các thông tin của các sẵn nhà hàng sẵn có như hình ảnh , tên ….

Luồng Không thay thế Điều kiện Khách hàng truy cập vào trang web trước Điều kiện Hiển thị màn hình gồm các nhà hàng sau 2.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àn hình trang chủ Tác nhân Khách hàng Luồng Hành vi của tác nhân Hành vi của hệ thống chính 1. Khách hàng mở trang 2. Hiển thị màn hình Room Room trên thanh header hoặc click view more ở mục favorite Room ở màn hình trang chủ 3. Kéo xem các thông tin có 4.

Hiển thị các thông tin của các sẵn nhà hàng sẵn có như hình ảnh , tên, giá …. Luồng Không thay thế Điều kiện Khách hàng truy cập vào trang web trước Điều kiện Hiển thị màn hình gồm các phòng hiện có sau 2.8 Đặt phòng Mô tả Khách hàng đăng nhập vào hệ thống , click vào “Book Room now” ở màn hình trang chủ Tác nhân Khách hàng Luồng Hành vi của tác nhân Hành vi của hệ thống chính 1. Khách hàng click Book 2. Hiển thị màn hình gồm form Room ở màn hình trang chủ nhập thông tin để đặt phòng 3.

Nhập các thông tin cần 4. Hiển thị textbox để khách hàng thiết nhập Luồng Không thay thế Điều kiện Khách hàng truy cập vào trang web, đã đăng nhập tài khoản trước Điều kiện Thông báo đặt phòng thành công sau 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ệ đều liê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 React Universal App.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ến trú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 cho các nền tảng khác như Web.1 Mô Hình MVC 3.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ột cách cụ thể, Controller sẽ nhận yêu cầu được gửi từ View và thực hiện xử lí yêu cầ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 để cung cấ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).

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ