Đồ án tốt nghiệp: Xây dựng trang web đặt tour du lịch bằng MERN Stack

Đồ án tốt nghiệp xây dựng website đặt tour du lịch bằng MERN Stack. Bao gồm phân tích, thiết kế cơ sở dữ liệu, giao diện và các chức năng chính.

• Tác giả: Võ Huỳnh Yến Nhi
• Người hướng dẫn: TS. Lê Văn Vinh
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Trang Web Đặt Tour Du Lịch Trực Tuyến Sử Dụng Công Nghệ MERN Stack
• Loại tài liệu: Khóa Luận Tốt Nghiệp
• Năm xuất bản: 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Web Đặt Tour Du lịch MERN Stack

Đồ án web đặt tour du lịch sử dụng công nghệ MERN Stack là một giải pháp hiện đại cho nhu cầu quản lý và đặt tour du lịch trực tuyến. MERN Stack bao gồm MongoDB, Express.js, React.js và Node.js – những công nghệ tiên tiến giúp xây dựng ứng dụng web toàn diện. Dự án này được phát triển nhằm mục đích cung cấp nền tảng thương mại điện tử chuyên biệt cho lĩnh vực du lịch. Trang web đặt tour với MERN Stack cho phép quản lý tour, người dùng, và giao dịch một cách hiệu quả. Hệ thống này tích hợp cơ sở dữ liệu mạnh mẽ, giao diện người dùng thân thiện, và backend xử lý nhanh chóng. Đây là một trong những đồ án web thực tế được áp dụng tại các trường đại học lớn như Trường Đại học Sư phạm Kỹ thuật TP. HCM.

1.1. Tính cấp thiết của đề tài Đồ án MERN Stack

Ngành du lịch Việt Nam phát triển nhanh chóng, tạo nhu cầu cao về nền tảng đặt tour trực tuyến. Các trang web đặt tour hiện tại cần cải thiện trải nghiệm người dùng và quản lý backend. Công nghệ MERN Stack mang lại hiệu suất cao, khả năng mở rộng và chi phí phát triển thấp. Đây là lý do chính đồ án xây dựng trang web sử dụng công nghệ này trở nên cấp thiết trong đào tạo công nghệ thông tin.

1.2. Ưu điểm của MERN Stack trong Xây dựng Web

MERN Stack cung cấp nhiều ưu điểm cho đồ án web đặt tour: JavaScript thống nhất từ frontend đến backend, cộng đồng lớn hỗ trợ, hiệu suất cao, và khả năng mở rộng. MongoDB cho phép lưu trữ dữ liệu linh hoạt, Express.js xử lý request nhanh chóng, React.js tạo giao diện tương tác, Node.js chạy server hiệu quả. Kết hợp này tạo nên một hệ thống quản lý tour hoàn chỉnh và đáng tin cậy.

II. Các Công Nghệ Chính trong Đồ án Web Đặt Tour

Đồ án web đặt tour du lịch dựa vào bốn công nghệ cốt lõi của MERN Stack. MongoDB là cơ sở dữ liệu NoSQL cung cấp tính linh hoạt trong lưu trữ thông tin tour, khách hàng và đơn đặt hàng. Express.js giúp tạo API RESTful mạnh mẽ để xử lý các yêu cầu từ phía client. React.js xây dựng giao diện người dùng động và tương tác, đảm bảo trải nghiệm mượt mà. Node.js chạy server backend, xử lý logic nghiệp vụ và kết nối cơ sở dữ liệu. Bên cạnh đó, đồ án xây dựng trang web còn sử dụng các công nghệ hỗ trợ như JWT để xác thực, Stripe hoặc PayPal cho thanh toán trực tuyến, và Cloudinary để quản lý hình ảnh tour.

2.1. MongoDB trong Quản lý Dữ liệu Tour

MongoDB cho phép đồ án web đặt tour lưu trữ dữ liệu dưới dạng tài liệu JSON linh hoạt. Điều này rất hữu ích khi thông tin tour có cấu trúc đa dạng: lịch trình có thể ngắn hay dài, số lượng hình ảnh khác nhau, giá tour biến động theo mùa. Schema linh hoạt của MongoDB giúp hệ thống quản lý tour dễ dàng thích ứng với các thay đổi yêu cầu.

2.2. React.js và Giao diện Người dùng

React.js là thư viện JavaScript giúp xây dựng giao diện người dùng tương tác cho trang web đặt tour. Thành phần (components) có thể tái sử dụng, giúp quản lý mã nguồn dễ hơn. Với React, đồ án xây dựng trang web tạo được trải nghiệm người dùng mượt mà, giảm thời gian tải trang, và hỗ trợ các chức năng nâng cao như filtering, sorting dữ liệu tour thời gian thực.

2.3. Node.js và Express.js cho Backend

Node.js cùng Express.js tạo nên backend mạnh mẽ cho đồ án web đặt tour. Express.js giúp tạo API RESTful xử lý các endpoint như lấy danh sách tour, tạo đơn đặt, quản lý người dùng. Hệ thống quản lý tour có thể xử lý hàng ngàn yêu cầu đồng thời nhờ kiến trúc không đồng bộ của Node.js, đảm bảo hiệu suất cao.

III. Các Chức Năng Chính của Trang Web Đặt Tour

Đồ án web đặt tour du lịch được thiết kế với nhiều chức năng toàn diện phục vụ cả admin lẫn người dùng cuối. Phía admin panel cho phép quản lý danh sách tour, thêm sửa xóa tour, quản lý người dùng, xem lịch sử đặt tour, cấu hình giao diện header footer. Phía người dùng cuối, trang web đặt tour cung cấp chức năng đăng nhập đăng ký, xem danh sách tour với bộ lọc, tìm kiếm tour theo điểm đến hoặc ngân sách, xem chi tiết tour kèm lịch trình, đăng ký và thanh toán trực tuyến. Hệ thống quản lý tour cũng hỗ trợ theo dõi lịch sử đơn đặt, quản lý thông tin cá nhân, và nhận thông báo về tour hot.

3.1. Chức Năng Dành cho Admin

Admin panel của đồ án xây dựng trang web cho phép quản lý toàn bộ hệ thống. Admin có thể tạo tour mới với chi tiết lịch trình, giá cả, hình ảnh. Chức năng quản lý người dùng giúp xem danh sách khách hàng, xóa tài khoản spam. Xem lịch sử đặt tour giúp theo dõi doanh thu, lợi nhuận. Cấu hình header footer giúp tùy chỉnh giao diện theo thương hiệu của công ty du lịch.

3.2. Chức Năng Dành cho Người dùng

Trang web đặt tour cung cấp giao diện thân thiện cho người dùng cuối. Chức năng đăng ký đăng nhập bảo mật với xác thực email. Người dùng có thể tìm kiếm tour theo destination, giá, thời gian khởi hành. Xem chi tiết tour với lịch trình, hình ảnh, đánh giá của khách trước đó. Chức năng thanh toán an toàn hỗ trợ nhiều phương thức. Quản lý đơn đặt giúp theo dõi tình trạng booking.

IV. Ý Nghĩa và Hướng Phát Triển của Đồ án

Đồ án web đặt tour du lịch sử dụng MERN Stack mang ý nghĩa lớn trong đào tạo lập trình viên toàn diện. Sinh viên thông qua đồ án xây dựng trang web này học được kiến thức về thiết kế cơ sở dữ liệu NoSQL, lập trình backend với Node.js, xây dựng giao diện frontend hiện đại với React. Hơn nữa, đồ án web thực tế này chuẩn bị kỹ năng cần thiết cho công việc tại các công ty công nghệ. Hướng phát triển của hệ thống quản lý tour có thể mở rộng đến các tính năng: tích hợp thanh toán bằng ví điện tử, thêm chức năng AI gợi ý tour, phát triển mobile app, hỗ trợ đa ngôn ngữ, tích hợp bản đồ Google Maps, và xây dựng hệ thống đánh giá chi tiết.

4.1. Giá Trị Học Tập của Đồ án MERN Stack

Đồ án web đặt tour là cơ hội vàng để sinh viên ứng dụng kiến thức lý thuyết vào thực tế. Thông qua dự án, sinh viên học cách thiết kế cơ sở dữ liệu hiệu quả, viết API clean code, xây dựng UI responsive, quản lý state React, xử lý authentication authorization. Xây dựng trang web hoàn chỉnh giúp sinh viên hiểu toàn bộ quy trình phát triển phần mềm từ requirement gathering đến deployment.

4.2. Tiềm Năng Thương Mại và Mở Rộng

Trang web đặt tour có tiềm năng lớn để phát triển thành sản phẩm thương mại. Có thể mở rộng thêm chức năng: hệ thống commission cho travel agents, tích hợp chatbot AI, ứng dụng mobile iOS/Android, API công khai cho bên thứ ba. Đồ án xây dựng web này có thể trở thành nền tảng SaaS cho nhiều công ty du lịch nhỏ.

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

CHƯƠNG 1. Tính cấp thiết của đề tài - Việt Nam là một quốc gia có nguồn tài nguyên về du lịch vô cùng phòng phú. Tài nguyên thiên nhiên, danh lam thắng cảnh và các di tích lịch sử đi cùng với nền ẩm thực tuyệt vời đem lại những giá trị to lớn đối với du lịch. - Công nghệ phát triển từng ngày, nhu cầu giải trí và trải nghiệm du lịch của mọi người cũng tăng cao nhằm giải tỏa căng thẳng sau nhưng ngày làm việc hay đơn giản là tinh thần đam mê sự khám phá nhưng điều mới lạ tại những vùng đất mới.

Vì vậy, người ta cần những công cụ có thể hỗ trợ được việc tiếp cận những tour du lịch mà không cần phải lo nghĩ quá nhiều. - Tuy nhiên, ở một số địa điểm du lịch, chủ yếu là nhưng nơi mới phát triển du lịch, dịch vụ du lịch mang tính tự phát, cách quảng bá và truyền thông chưa hợp lý dẫn đến những người có nhu cầu du lịch, nghỉ ngơi hay khám phá các địa danh chưa thực sự tiếp cận được những địa điểm du lịch để trải nghiệm. Ví dụ cụ thể như ở tỉnh Khánh Hòa, nếu như Nha Trang đã quá nổi tiếng về ngành du lịch trong nước cũng như quốc tế, thế nhưng ngoài Nha Trang ra Khánh Hòa thực sự còn rất nhiều tài nguyên tiềm năng để phát triển du lịch. Đảo Bình Ba, Bình Hưng, Bãi Dài hay vùng cao Khánh Sơn,… Các địa điểm trên đều có thể đáp ứng đủ các điều kiện cơ bản để phát triển du lịch tuy nhiên số lượng du khách thực không quá nhiều.

- Cũng chính vì là du lịch tự phát, cách quản lý các tour du lịch của những nhà phát hành tour còn gặp khá nhiều vấn đề, không có hệ thống cụ thể, còn xử lý thủ công khá nhiều dẫn đến một sự cố trong quá trình đặt tour (vấn đề tiền cọc, quản lý tour,…) - Vấn đề đặt ra: Làm cách nào để du khách có thể tiếp cận tour du lịch ở địa phương một cách dễ dàng? Những người làm tour làm cách nào có thể quản lý các tour hiệu quả? - Cách giải quyết của bài toán trên là xây dựng được một hệ thống mà du khách có thể tiếp cận được nhưng thông tin về một tour du lịch rồi tiến hành đặt tour một cách nhanh chóng, còn đối với những người làm tour, họ cần một công cụ để hỗ trợ việc quản lý tour của họ. Khảo sát hiện trạng Nhìn chung, trên các trang hệ thống có chứ năng tương tự, hầu hết là những tour về các địa điểm du lịch đã quá nổi tiếng, còn những tour du lịch nhỏ ở địa phương thì hầu như đều được quảng cảo trên Facebook hoặc Google. Em đã tiến hành khảo sát trên một số hệ thống sau: 1 1. Vietnam Tourist: https://vietnamtouristvn.

Giao diện trang chủ của Vietnam Tourist - Ưu điểm: • Là một hệ thống lớn, hỗ trợ cả tour trong và ngoài nước. • Đa dạng dịch vụ • Có thể đặt tour mà không cần đăng kí tài khoản Có chatbox để hỗ trợ tư vấnHình 2.1 - Nhược điểm: • Đổ quá nhiều thông tin lên cũng một trang (thông tin tour, tin tuyển dụng…), màu sắc tưởng phản cao, quá nhiều quảng cáo tạo cảm giác rối mắt. • Tốc độ chuyển trang còn khá chậm 2 1. Saigon Star Travel: https://saigonstartravel.

Giao diện trang chủ của Saigon Star Trevel - Ưu điểm: • Màu sắc hài hòa, dễ nhìn • Hỗ trợ đa dạng dịch vụ • Có thể đặt tour mà không cần đăng ký tài khoản • Có chatbot hỗ trợ khách hàng - Nhược điểm: • Chuyển trang còn chậm • Có khá nhiều nội dung thừa (vouchers đã hết hạn, thông tin tuyển dụng hết hạn,…) • Quá nhiều quảng cáo 3 1. Tour đảo Bình Hưng: https://binhhungtour. Giao diện trang chủ Tour đảo Bình Hưng Đây là một trang web của một tổ chức địa phương. - Ưu điểm: • Giao diện đơn giản, trực quan, dễ dàng nắm bắt thông tin • Không có chi tiết dư thừa • Không có quảng cáo - Nhược điểm: • Giao diện chưa thực sự thu hút • Chưa thực sự làm được chức năng đặt tour online, muốn đặt tour phải gọi điện thoại hoặc liên lạc qua Zalo.

Công nghệ lập trình - Sử dụng ExpressJS và NodeJS để viết server backend và ReactJS phía Frontend. - Sử dụng một số công nghệ hỗ trợ để tối ưu hóa hệ thống: Redux và Ant Design. - Sử dụng MongoDB để tạo nên cơ sở dữ liệu chính cho project 1. Phạm vi nghiên cứu - Tìm hiểu và áp dụng các cộng nghệ sử dụng trong đề tài: o ReactJS: xây dựng Single Page Application áp dụng ReactJS và các thư viện liên quan.

o MongoDB: Xây dựng lên các dữ liệu cần thiết tạo tiền đề để phát triển nên Project. o ExpressJS: Xây dựng các API để gửi và nhận dữ liệu giữa fronend và backend. o NodeJS: Xây dựng server cho cả Project 4 CHƯƠNG 2. Giới thiệu về MERN Stack - Technical stack là gì? Lang thang trên mạng, ta thường nghe nhắc đến những một số thuật ngữ như LAMP Stack, MEAN Stack,vv.

Trong quá trình xây dựng sản phẩm start-up, ta cũng hay nghe nhắc tới tầm quan trọng của việc chọn technical stack cho phù hợp. Stack là gì, tại sao nó ra đời? - Để làm ra một ứng dụng hoàn chỉnh, chỉ viết code không thôi là không đủ. Khi cần lưu trữ thông tin, ta phải đưa chúng vào cơ sở dữ liệu. Sau khi đã hoàn thành phần code, ta phải tìm cách deploy nó, tức là đưa code lên một chỗ nào đó để chạy code.

- Một chương trình hoàn thiện không chỉ có code, mà còn phải có nền tảng hệ điều hành và những phần mềm đi kèm (web server, cơ sở dữ liệu). Người ta gom những thứ này lại với nhau, tạo thành technical stack. - Technical Stack, còn gọi là solution stack, là một tập hợp những phần mềm/công nghệ phối hợp chung với nhau, tạo thành một nền tảng để ứng dụng có thể hoạt động được. Các bộ phận cấu thành một stack [1] 2.

MERN Stack - Một stack cũng khá nổi trong vài năm trở lại đây là 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/MySQL, ExpressJS, React/React Native, NodeJS. Người ta hay dùng MERN stack để xây dựng SPA (Single Page Application). 5 - Thật ra stack này không hoàn toàn đúng chuẩn stack vì nó không bao gồm hệ điều hành.

NodeJS dùng để viết code server-side, có thể hoạt động như web server luôn (Trong thực tế người ta thường dùng thêm nginx làm proxy server). MongoDB - MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL(*) hàng đầu, được hàng triệu người sử dụng. MongoDB được viết bằng C++. Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng.

(*) NoSQL là 1 dạng CSDL mã nguồn mở không sử dụng Transact-SQL để truy vấn thông tin. NoSQL viết tắt bởi: None-Relational SQL, hay có nơi thường gọi là Not-Only SQL. CSDL này được phát triển trên Javascript Framework với kiểu dữ liệu JSON. (Cú pháp của JSON là “key:value”) NoSQL ra đời như là 1 mảnh vá cho những khuyết điểm và thiếu xót cũng như hạn chế của mô hình dữ liệu quan hệ RDBMS về tốc độ, tính năng, khả năng mở rộng, memory cache,.

MongoDB [3] - Một số thuật ngữ thường hay sử dụng: 6 • _id – Là trường bắt buộc có trong mỗi document. Trường _id đại diện cho một giá trị duy nhất trong document MongoDB. Trường _id cũng có thể được hiểu là khóa chính trong document. Nếu bạn thêm mới một document thì MongoDB sẽ tự động sinh ra một _id đại diện cho document đó và là duy nhất trong cơ sở dữ liệu MongoDB.

• Collection – Là nhóm của nhiều document trong MongoDB. Collection có thể được hiểu là một bảng tương ứng trong cơ sở dữ liệu RDBMS (Relational Database Management System). Collection nằm trong một cơ sở dữ liệu duy nhất. Các collection không phải định nghĩa các cột, các hàng hay kiểu dữ liệu trước.

• Cursor – Đây là một con trỏ đến tập kết quả của một truy vấn. Máy khách có thể lặp qua một con trỏ để lấy kết quả. • Database – Nơi chứa các Collection, giống với cơ sở dữ liệu RDMS chúng chứa các bảng. Mỗi Database có một tập tin riêng lưu trữ trên bộ nhớ vật lý.

Một mấy chủ MongoDB có thể chứa nhiều Database. • Document – Một bản ghi thuộc một Collection thì được gọi là một Document. Các Document lần lượt bao gồm các trường tên và giá trị. • Field – Là một cặp name – value trong một document.

Một document có thể có không hoặc nhiều trường. Các trường giống các cột ở cơ sở dữ liệu quan hệ. • JSON – Viết tắt của JavaScript Object Notation. Con người có thể đọc được ở định dạng văn bản đơn giản thể hiện cho các dữ liệu có cấu trúc.

Hiện tại JSON đang hỗ trợ rất nhiều ngôn ngữ lập trình. • Index – Là những cấu trúc dữ liệu đặc biệt, dùng để chứa một phần nhỏ của các tập dữ liệu một cách dễ dàng để quét. Chỉ số lưu trữ giá trị của một fields cụ thể hoặc thiết lập các fields, sắp xếp theo giá trị của các fields này. Index hỗ trợ độ phân tích một cách hiệu quả các truy vấn.

Nếu không có chỉ mục, MongoDB sẽ phải quét tất cả các documents của collection để chọn ra những document phù hợp với câu truy vấn. Quá trình quét này là không hiệu quả và yêu cầu MongoDB để xử lý một khối lượng lớn dữ liệu. - Cách hoat động: • MongoDB hoạt động dưới một tiến trình ngầm service, luôn mở một cổng (Cổng mặc định là 27017) để lắng nghe các yêu cầu truy vấn, thao tác từ các ứng dụng gửi vào sau đó mới tiến hành xử lý. 7 • Mỗi một bản ghi của MongoDB được tự động gắn thêm một field có tên “_id” thuộc kiểu dữ liệu ObjectId mà nó quy định để xác định được tính duy nhất của bản ghi này so với bản ghi khác, cũng như phục vụ các thao tác tìm kiếm và truy vấn thông tin về sau.

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. • Mỗi khi có một truy vấn dữ liệu, bản ghi được cache (ghi đệm) lên bộ nhớ Ram, để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng.