báo cáo đồ án tốt nghiệp xây dựng website quản lý tour du lịch đầy đủ chi tiết, đạt điển tối đa, chi tiết format đúng định dạng báo cáo, được thầy cô đánh giá tốt. đầy đủ source code và pp thuyết trình
TỔNG QUAN VỀ ĐỀ TÀI
Tính cấp thiết của đề tài
Trong những năm qua, du lịch Việt Nam đang trên đà phát triển mạnh, lượng khách quốc tế đến cũng như khách du lịch nội địa ngày càng tăng nhiều hơn các năm trước Thế giới ngày càng biết đến du lịch Việt Nam nhiều hơn trước, nhiều địa điểm du lịch trong nước được bình chọn là địa chỉ yêu thích của các du khách quốc tế Xã hội ngày càng đón nhận du lịch vì nhiều những mặt tốt mà nó mang lại Tính cạnh tranh và chất lượng của du lịch là những vấn đề nhận được thảo luận rộng rãi và nhiều sự quan tâm Một cách tiếp cận đa chiều sẽ tạo ra giải pháp đúng đắn nâng cao chất lượng và tính cạnh tranh của du lịch Việt Nam với các nước khác trên thế giới
Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, công nghệ thông tin cũng không ngừng những phát minh, những sáng tạo có đẳng cấp để chinh phục hết đỉnh cao này tới đỉnh cao khác Mạng Internet là một trong những sản phẩm có giá trị hết sức lớn lao và trở thành một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, trao đổi thông tin trên toàn cầu.
Bằng Internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn với chi phí thấp hơn nhiều so với cách thức truyền thống Chính điều này, đã thúc đẩy sự khai sinh và phát triển của thương mại điện tử trong hoạt động sản xuất, kinh doanh Giờ đây, thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp Đối với một công ty du lịch, việc quảng bá và giới thiệu đến khách hàng các chương trình du lịch cũng như các dịch vụ của công ty một cách kịp thời là yếu tố mang tính quyết định Vì vậy, sẽ thật thiếu sót nếu công ty chưa xây dựng được một website để giới thiệu các tour mà các công ty tổ chức.
Và một vấn đề được đặt ra song song là làm sao để có thể quản lý và điều hành website một cách dễ dàng và hiệu quả, có như vậy mới tránh được sự nhàm chán cho những khách hàng thường xuyên của website và thu được kết quả mong muốn.Đây là vấn đề hết sức cấp thiết và luôn là mối trăn trở của hầu hết các công ty du
Việc xây dựng và phát triển một website quản lý tour du lịch để cung cấp cho người dùng những chuyến du lịch tốt và phù hợp với túi tiền của họ là điều rất quan trọng và cần thiết Việc quản lý các chuyến đi hay những dịch vụ đi kèm trong tour phải được thực hiện một cách đầy đủ và chính xác đồng thời mang lại trải nghiệm tốt nhất cho người sử dụng, những cá nhân hay tổ chức có thể chọn lưu được những chuyến đi phù hợp với bản thân mình Trên thị trường hiện nay đã và đang xuất hiện rất nhiều phần mềm ứng dụng hỗ trợ cho các công việc này Tuy nhiên việc đáp ứng đủ về cả số lượng và chất lượng thì vẫn là bài toán lớn cho các nhà phát triển phần mềm.
Nắm bắt được tình hình đó, em đã mạnh dạn lựa chọn đề tài: “Xây dựng website quản lý tour du lịch” Với đồ án này, em xin trình bày một cách thức quản lý website giúp cho những người quản trị thật dễ dàng trong việc quản lý, thay đổi, cập nhật thông tin trang web, cũng như quản lý khách hàng một cách hiệu quả và các đơn đặt tour, khách sạn, vé máy bay online.
Một website hoạt động có hiệu quả thì phải có sự quản lý tốt của người quản trị website doanh nghiệp Các công ty sở hữu các website này đều có một bộ phận riêng đảm đương việc quản lý thông tin website, nhằm đáp ứng kịp thời và hiệu quả các yêu cầu của khách hàng qua mạng internet, có như vậy mới khai thác hết giá trị website và nguồn khách hàng tiềm năng bên cạnh Vì vậy, việc quan tâm đến vai trò của công nghệ thông tin và các khách hàng tiềm năng trên mạng là một việc cần thiết, nên có kế hoạch và cắt đặt một người quản trị với kỹ năng chuyên môn tốt để website công ty luôn mới mẻ, thu hút được nhiều khách hàng hơn.
Mục tiêu đề tài
Mục tiêu của đề tài bao gồm các ý chính:
Xây dựng được website quản lý tour du lịch đáp ứng nhu cầu của khách hàng: Chọn tour, tìm kiếm tour, đặt tour, chọn ngày đi, đánh giá…
Website có các chức năng chính:
- Chức năng quản lý: như quản lý tour, quản lý ngày đi, quản lý địa điểm…
- Khách hàng: bình luận, tìm kiếm tour, tạo tour…
- Và một số các chức năng khác như: đăng nhập, đăng xuất, phân quyền,đổi thông tin cá nhân,…
Nội dung nghiên cứu
- Khảo sát quy trình đặt tour online tại một số website.
- Tìm hiểu và nghiên cứu cấu trúc cách xây dựng một website quản lý tour du lịch.
- Thiết kế hệ thống, cụ thể:
Sử dụng MySQL để làm cơ sở dữ liệu.
Sử dụng NodeJS để xây dựng Backend
Sử dụng Firebase để lưu trữ thông tin và dữ liệu dạng ảnh
Xây dựng giao diện website bằng ReactJS.
- Tiến hành cài đặt, lập trình và chạy thử nghiệm chương trình.
Phạm vi nghiên cứu
Xây dựng hệ thống đặt tour trên địa bàn thành phố Vinh (Nghệ An)
Cấu trúc của đồ án tốt nghiệp
Đồ án được cấu trúc thành 5 chương như sau:
Chương 1: Tổng quan về đề tài: mô tả mục tiêu, phạm vi, đối tượng, của đề tài.
Chương 2: Khảo sát hệ thống: phân tích hiện trạng, nghiệp vụ, mã nguồn phát triển, của hệ thống.
Chương 3: Lý thuyết và công nghệ: giới thiệu công nghệ sử dụng trong đề tài và giải thích lí do lựa chọn công nghệ đó.
Chương 4: Phân tích hệ thống và thiết kế hệ thống: xác định các thông tin và chức năng xử lí của hệ thống.
Chương 5: Xây dựng hệ thống: dựa vào kết quả của phân tích và thiết kế hệ thống, để xây dựng hệ thống.
KHẢO SÁT HIỆN TRẠNG HỆ THỐNG
Phân Tích Hiện Trạng
Hiện nay, đang có rất nhiều nhiều hệ thống lớn phục vụ cho việc đặt tour du lịch của khách hàng, nhưng với lượng khách du lịch trong nước ngày càng gia tăng thì khả năng các hệ thống sẽ không đáp ứng được hết các khách hàng Vì vậy, Website ra đời nhằm mục đích đắp lại khoảng trống đó
Ngành du lịch hiện đang phát triển mạnh mẽ, dựa vào thu nhập bình quân đầu người đang gia tăng hướng tới việc đi du lịch trở thành nhu cầu thiết yếu với nhiều người Với nhu cầu du lịch nghỉ ngơi ngày càng tăng cao hiện nay, việc lựa chọn điểm đến trở thành một việc không hề dễ dàng Với các website du lịch, khách hàng có thể dễ dàng lựa chọn điểm đến và ra quyết định cho chuyến đi của bản thân khi trên các trang web trưng bày hình ảnh của địa điểm du lịch, giới thiệu các địa điểm hấp dẫn cho các chuyến du lịch
Về thị trường khách hàng tiềm năng dường như khá là phong phú phân vùng ở nhiều độ tuổi Khách hàng tiềm năng nhất nằm ở các công ty, các nhà trường vì sau những giờ làm việc vất vả thì các công ty hay nhà trường thường tổ chức những tour đi du lịch cho nhân viên của mình Không chỉ khách du lịch nội địa, mà khách du lịch nước ngoài tới Việt Nam cũng ngày càng tăng lên trong những năm gần đây. Việc kiểm soát data và chăm sóc khách hàng chưa bao giờ là công việc đơn gải đối với doanh nghiệp dù lớn hay nhỏ, đối với ngành du lịch đây càng là việc khó giải quyết vì yêu cầu, và đòi hỏi của mỗi khách hàng là khác nhau Khi có một website chuyên nghiệp việc kiểm soát lượng data và chăm sóc khách hàng trong suốt cuộc hành trình cùng công ty và xử lý kịp thời khi có sự cố phát sinh.
Thông qua website, doanh nghiệp dễ dàng tương tác và kết nối cùng khách hàng từ các ý kiến phản hồi của khách hàng sau mỗi lần sử dụng dịch vụ Đây là một yếu tố rất quan trọng để doanh nghiệp có thể biết được khách hàng cảm nhận như thế nào đối với dịch vụ của công ty, từ đó để nâng cấp và sửa đổi dịch vụ Thông qua website còn giúp cho doanh nghiệp hiểu hơn về nhu cầu của khách hàng và đưa ra ghé qua và đến công ty. Đối với bất cứ công ty, doanh nghiệp du lịch nào thì việc quảng bá thương hiệu luôn là việc không dễ dàng gì Việc kiểm soát, quảng bá thương hiệu có thể khiến một công ty du lịch tiêu tốn một số tiền không nhỏ, nhưng khi có website du lịch thì chi phí quảng cáo sẽ có thể giảm đi đáng kể Một website chuyên nghiệp sẽ thu hút ánh nhìn của khách hàng từ những hình ảnh đầu tiên, khiến khách hàng hứng thú,tìm hiểu và truyền bá hình ảnh công ty tốt hơn Không chỉ thế nó còn góp phần quyết định rất lớn đến ánh nhìn của mọi người đối với công ty, doanh nghiệp, là bộ mặt lớn của một doanh nghiệp trong thời kỳ công nghệ hoá hiện nay.
Khảo Sát Một Số Trang Web
Hình 2- 1: Hệ thống website Chudu24.
Chudu 24 là hệ thống đặt tour online lớn có độ phủ sóng gần như cả nước.
Khách hàng đặt tour bằng cách chọn địa điểm phù hợp, nhập các thông tin cá nhân cần thiết, chọn những dịch vụ muốn đi kèm thêm, chọn phòng khách sạn phù hợp và theo yêu cầu của khách hàng.
Hình 2- 2:Hệ thống website travel.com.vn.
Website travel.com.vn là một trong các trang web về du lịch lớn nhất Việt Nam. Độ phủ sóng lớn gần như cả nước.
Quy trình đặt tour trên travel.com.vn:
Khách hàng truy cập vào website chọn tour phù hợp với mình, đăng ký tour bằng cách nhập các thông tin cơ bản về bản thân sau đó hệ thống sẽ gửi email xác nhận đăng ký tour thành công.
Hệ thống dulichviet.com.vn
Hình 2- 3: Hệ thống website dulichviet.com.vn.
Website dulichviet.com.vn cũng là một trong các hệ thống đặt tour lớn hàng đầu Việt Nam.
Quy trình đặt tour: Khách hàng truy cập hệ thống chọn tour yêu thích và gửi email liên hệ để xác nhận đặt tour.
Nguồn phát triển đề tài
CÁC CHỨC NĂNG THAM KHẢO [1]
Nguồn Tham Khảo Mạng Xã Hội.
Các Phần tham khảo 30%, mã nguồn chưa hoàn thiện và nhiều lỗi.
Cách Thiết kế cơ sở dữ liệu.
Tham khảo cách tạo và viết Api để áp dụng thêm trong các trường hợp khác cần sử dụng.
CÁC CHỨC NĂNG PHÁT TRIỂN THÊM
Các chức năng phát triển thêm 70%.
Tìm hiểu mã nguồn cũ, phân tích nghiệp vụ còn thiếu
Chức Năng Tạo Quản Lý Tour.
Chức Năng Tìm Kiếm Tour Trong Nước, Tìm Kiếm Nhanh…
Cập nhật, thay đổi giao diện trang chủ
Chức năng tính toán doanh thu
Giao diện các trang quản lý
Thêm Sửa Xóa, Tạo Tour
Chức Năng Đánh giá Tour (số sao và bình luận)
Yêu cầu chức năng nghiệp vụ của hệ thống
• Tìm hiểu các hệ thống ngoài thực tế.
• Phân tích các quy trình nghiệp vụ của hệ thống quản lý tour.
• Xây dựng các biểu đồ chức năng, các luồng dữ liệu của hệ thống.
• Tìm hiểu về hệ quản trị cơ sở dữ liệu MySQL, cách xây dựng cơ sở dữ liệu.
• Tìm hiểu về Firebase, cách sử dụng Firebase để lưu trữ thông tin trên hệ thống.
• Tìm hiểu các công cụ lập trình, các tiện ích lưu dữ code như GitHub.
• Tìm hiểu về dung lượng của website, dung lượng không được quá lớn, tốc độ xử lý nhanh.
• Xây dựng hệ thống tương tự với các yêu cầu đã đặt ra.
• Xây dựng ứng dụng phía người dùng làm sao có thể tương tác với API phía hệ thống.
• Liên kết với các mạng xã hội hiện hành như Facebook, Google…
• Giao diện dễ nhìn thân thiện với người dùng.
• Chuẩn chính xác về công thức tính toán doanh thu.
• Thêm sửa xóa các thông tin, địa điểm về tour du lịch, thay đổi hình ảnh của từng tour du lịch.
• Theo dõi tình hình liên hệ thông qua website để đáp ứng kịp thời nhu cầu của họ về tổ chức lưu trữ và thực hiện các yêu cầu.
• Chỉnh sửa thông tin khách hàng thông tin đặt tour.
• Xác nhận thanh toán và hình thức thanh toán.
CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ
RESTFUL API [1]
- Sự quan trọng của API trong các ứng dụng ngày nay là điều ko thể bàn cãi.Một ứng dụng mà không có API thì như một cỗ máy tính không kết nối internet vậy Và như một điều hiển nhiên, mọi thứ sau khi phát triển một thời gian sẽ hình thành những chuẩn mực chung và đối với API, nó chính làRESTful [5].
- Có thể nói nguyên lí REST và cấu trúc dữ liệu RESTful được biết đến rộng rãi trong giới lập trình web nói chung và lập trình ứng dụng nói riêng.
- Có thể nói bản thân REST không phải là một loại công nghệ Nó là phương thức tạo API với nguyên lý tổ chức nhất định Những nguyên lý này nhằm hướng dẫn lập trình viên tạo môi trường xử lý API request được toàn diện
RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web (thiết kế Web services) để tiện cho việc quản lý các resource Nó chú trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP.
Các thành phần của RESTful API:
- API (Application Programming Interface) là một tập các quy tắc và cơ chế mà theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu dữ liệu phổ biến như JSON hay XML.
- REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một URL để xử lý dữ liệu.
- RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để quản lý các resource RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau.
- Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method (như GET, POST, PUT, DELETE…) và cách định dạng các URL cho ứng dụng web để quản các resource RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hoặc framework nào cũng có thể sử dụng để thiết kế một RESTful API.
RESTful API hoạt động như thế nào?
Hình 3- 2: Cách hoạt động của RESTful API
- REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng.
- GET (SELECT): Trả về một Resource hoặc một danh sách Resource.
- POST (CREATE): Tạo mới một Resource.
- PUT (UPDATE): Cập nhật thông tin cho Resource.
- DELETE (DELETE): Xóa một Resource.
Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa.
CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web.
Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.
Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ markup(nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời.
ReactJS [2]
ReactJS là một thư viện chứa nhiều JavaScript mã nguồn mở được Facebook xây dựng và phát triển Thư viện này được sử dụng để tạo ra các ứng dụng trang web hấp dẫn với hiệu quả cao, tốc độ load nhanh và mã tối thiểu Mỗi website sử dụng ReactJS phải chạy nhanh, mượt và có khả năng mở rộng cao, thao tác thực hiện đơn giản.
Có thể nói, hầu hết các tính năng hay sức mạnh của ReactJS thường bắt đầu từ việc tập trung vào các phần riêng lẻ Do đó thay vì làm việc trên toàn bộ ứng dụng của website thì ReactJS lại cho phép các Developer phá vỡ giao diện phức tạp của người dùng trở nên đơn giản hơn nhiều Điều này có nghĩa là các Render dữ liệu không chỉ được thực hiện ở vị trí server mà còn có thể thực hiện ở vị trí Client khi sử dụng ReactJS.
Các thành phần chính của ReactJS:
Redux: là một phần cực kỳ quan trọng đối với ReactJS và được sử dụng phổ biến Trong một ReactJS không có các module chuyên dụng để xử lý dữ liệu nên nó được thiết lập một cách độc lập bằng việc chia nhỏ view thành các thành phần khác nhau giúp chúng liên kết chặt chẽ với nhau tốt hơn Sự liên kết và các mối quan hệ giữa các component trong ReactJS cần được quan tâm đặc biệt bởi chỉ có một luồng dữ liệu duy nhất là luồng dữ liệu từ cha sang con Việc sử dụng luồng dữ liệu một chiều này có phần khó khăn đối với những người mới tìm hiểu sử dụng và ứng dụng vào các dự án Bên cạnh các mặt hạn chế, ReactJS có thể phát huy được tất cả chức năng cũng như vai trò của mình trong quá trình sử dụng cơ chế một chiều này Bởi các chức năng của view trở nên phức tạp hơn rất rất nhiều.
Virtual Dom là một phần quan trọng mà hầu như các framework đều sử dụng nó như một ReactJS Người dùng không cần thao tác trực tiếp trên Dom mà vẫn có thể thấy được view và các thay đổi đó Bởi Virtual Dom đóng vai trò là một model và kiêm cả vai trò là một view nên sự thay đổi một trong hai nhân tố sẽ kéo theo các nhân tố khác thay đổi Ngược lại, nếu người dùng không thao tác trực tiếp trên các phần tử Dom, người dùng vẫn có thể thực hiện được các cơ chế Data Binding.
Những lợi ích của ReactJS:
ReactJS tạo ra cho bản thân nó một Dom ảo, nơi các Component được tồn tại trên đó và việc tạo ra Dom giúp cải thiện hiệu suất làm việc tốt hơn Khi người dùng cần cập nhật các thông tin lên Dom hoặc thay đổi gì đó, ReactJS đều có thể tính toán trước và thực hiện chúng Nhờ đó mà
ReactJS sẽ tránh được các thao tác cần có trên Dom và không tốn thêm bất cứ hành động nào khác.
Việc viết code trở nên dễ dàng hơn bởi nó sử dụng một cú pháp đặc biệt là JSX, cho phép trộn được giữa code HTML và JavaScript Bên cạnh đó người dùng có thể sử dụng đoạn code này để thêm vào hàm Render mà không cần thực hiện việc nối chuỗi Điều này được đánh giá là một trong những đặc tính mới cực kỳ thú vị của ReactJS Đồng thời, việc chuyển đổi HTML thành các hàm khởi động đều được thực hiện từ bộ biến đổi chính là JSX.
ReactJS có nhiều công cụ phát triển nhờ cài đặt thêm ứng dụng mở rộng của Chrome chuyên sử dụng cho ReactJS Các lập trình viên có thể debug code một cách dễ dàng hơn, giúp người dùng quan sát trực tiếp vào Virtual Dom.
Thư viện ReactJS thân thiện với SEO, được sự hỗ trợ từ các Render, trả về trình duyệt dưới dạng khi người dùng chạy ReactJS trên server và Virtual Dom.
Một số điều cần biết:
ReactJS chỉ là một view Library của Facebook nên nó giúp Render ra phần view và không phải là một framework JS nào Bên cạnh đó, nó hỗ trợ xây dựng các thành phần UI tính tương tác cao, trạng thái và có thể sử dụng lại Cả hai phần này đều là nơi xây dựng các Component và có thể kết nối với nhau khi hoạt động React trên cả Client và Render trên Server Hơn nữa, react không phải là một MVC Framework nên khi thao tác có thể không cần Model và Controller mà cần phải kết hợp với các thư viện khác.
State Components được sử dụng ít do nó gây khó khăn cho quá trình làm test và liên quan tới việc có Render lại hay không Bên cạnh đó, State chỉ tồn tại trong một Component với khả năng trao đổi các dữ liệu với bên ngoài và việc sử dụng state là không cần thiết Người dùng cần hiểu rằng chỉ nên sử dụng state khi cần thiết và phản ánh đúng các trạng thái của
Component phải luôn luôn nhỏ để phần mềm dễ hiểu và dễ bảo trì hơn: Với các ReactJS, việc giữ cho Component nhỏ nhất có thể tái sử dụng và đạt được hiệu năng cao nhất cùng với độ chia nhỏ phù hợp theo mức độ của team.
Kết hợp ReactJS với Redux.JS, flux hay bất cứ luồng dữ liệu nào Trong đó, Redux là một trong những nguồn dữ liệu được sử dụng nhiều nhất và tư duy của React tương đối hay.
Bên cạnh đó có thể sử dụng JSX, ES6, Babel, Webpack và NPM JSX là một trong những tính năng thú vị nhất của React và toàn bộ những thứ mà người dùng viết đều được hiển thị lên nếu người dùng kết hợp cùng Babel biên dịch và tận dụng được tính năng mới của ES6 Hai nhân tố NPM và webpack đóng vai trò hỗ trợ quá trình đóng gói cũng như tận dụng các thư viện triệt để.
Các trình Dev Tools của Redux và React được sử dụng để giúp lập trình viên Debug nhanh chóng và tìm ra các lỗi trong ứng dụng Thậm chí nó còn có thể Inspect ngược lại các Component của React trong trạng tháiProps và State của từng Component Hay người dùng cũng có thể quan sát trạng thái action và các lý do thay đổi State và back lại state trước.
NodeJS [3]
NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ. Ưu điểm:
IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời
Sử dụng JavaScript – một ngôn ngữ lập trình dễ học.
Nguyễn Đức Tư 29 Lớp DCCTKH63B
Chia sẻ cùng code ở cả phía client và server.
NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ.
Cộng đồng hỗ trợ tích cực.
Cho phép stream các file có kích thước lớn
Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế mô hình đa lõi trong các phần cứng cấp server hiện nay.
Khó thao tác với cơ sử dữ liệu quan hệ.
Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác.
Cần có kiến thức tốt về JavaScript.
Không phù hợp với các tác vụ đòi hỏi nhiều CPU
Những ứng dụng nên viết bằng NodeJS Ứng dụng trò chuyện trong thời gian thực: Nhờ vào cấu trúc không đồng bộ đơn luồng, Node.JS rất thích hợp cho mục đích xử lý giao tiếp trong thời gian thực. Nền tảng này có thể dễ dàng mở rộng quy mô và thường dùng để tạo ra các chatbot. Bên cạnh đó, các tính năng liên quan đến ứng dụng trò chuyện như: chat nhiều người, thông báo đẩy,… cũng có thể dễ dàng được bổ sung nhờ NodeJS.
Internet of Things (IoT): Các ứng dụng IoT thường bao gồm nhiều bộ cảm biến phức tạp để gửi những phần dữ liệu nhỏ Node.JS là một lựa chọn lý tưởng để xử lý các yêu cầu đồng thời này với tốc độ cực nhanh.
Truyền dữ liệu: Netflix là một trong số những công ty lớn trên thế giới chuyên sử dụng Node.JS cho mục đích truyền dữ liệu Sở dĩ vì đây là một nền tảng nhẹ và cực nhanh, đồng thời còn cung cấp một API chuyên dùng để stream.
Các SPA (Single-page application) phức tạp: Trong SPA, toàn bộ ứng dụng được load vào trong một trang duy nhất, do đó sẽ có một số request được thực hiện trong nền Vòng lặp sự kiện (event loop) của Node.JS cho phép xử lý các request theo hướng non- blocking.
Các ứng dụng REST dựa trên API: JavaScript được sử dụng trong cả frontend lẫn backend của trang Do đó một server có thể dễ dàng giao tiếp với frontend qua REST API bằng Node.js Bên cạnh đó, Node.JS còn cung cấp nhiều package như Express.js hay Koa để việc xây dựng ứng dụng web trở nên dễ dàng hơn bao giờ hết.
Một số Web Stack phổ biến khác
Hầu hết các Developer nên biết về LAMP stack truyền thống vì nó đã được sử dụng làm web từ sớm LAMP là viết tắt của Linux, Apache, MySQL và PHP Mỗi trong số đó là các gói phần mềm riêng lẻ được kết hợp để tạo thành một giải pháp máy chủ linh hoạt Lý do lớn nhất để gắn bó với LAMP là bảo mật và hỗ trợ rộng rãi Nó đã ra đời khoảng nhiều thập kỷ, và đó là một phương pháp đã được chứng minh bới các hosting websites Tất cả các công nghệ backend như PHP và Mysql là phổ biến và được hỗ trợ bởi các nhà cung cấp hosting lớn.Nếu chúng ta làm việc trên một LAMP stack , chúng ta về cơ bản có thể lưu trữ bất cứ nơi nào.Ngoài ra các CMS phổ biến nhất như Wordpress, Joomla, Drupal đều được phát triển trên nền PHP và Mysql.
Có các tùy chọn tùy chỉnh trong kiến trúc LAMP như LEMP thay thế Apache với nginx Chúng ta cũng có thể chạy một biến thể trên máy chủ Windows dưới dạng một WAMP stack Tuy nhiên, tất cả phần mềm cốt lõi - bao gồm cả Apache, MySQL và PHP - đều có mã nguồn mở, và chủ yếu dành cho Linux Đây là lý do tại sao Linux có ý nghĩa nhất đối với môi trường máy chủ và đó là lý do tại sao LAMP đã kiểm tra thời gian cho phát triển web hiện đại Hầu hết các developer đi theo con đường này bởi vì đó là cách đơn giản nhất để làm được các website trực tuyến.Chúng ta sẽ tìm thấy rất nhiều hỗ trợ trên các diễn đàn bao gồm mọi thứ chúng ta cần để cấu hình và khắc phục sự cố môi trường LAMP.
Lí do lựa chọn ReactJS làm công nghệ chính
Ứng dụng được tạo ra bởi Reactjs có cấu trúc UI tốt hơn giúp nâng cao và tối ưu hóa UX Nó có thể dễ dàng tăng tương tác của người dùng, tỷ lệ click và tỷ lệ chuyển đổi trên một trang web.
ReactJS cũng được thiết kế để giúp cải thiện số trang render tổng từ phía server. Đồng thời sẽ giúp tối ưu các nút để render phía client-side Khả năng tùy chỉnh công cụ tốt, thậm chí làm giảm ngân sách bảo trì hệ thống, giúp ReactJS hiệu quả cao hơn.
3.6.1 ReactJS có tốc độ cực nhanh.
Cụ thể tại sao ReactJS có tốc độ rất ấn tượng thì bạn có thể xem ở bài giới thiệu tôi đã link ở trên ReactJS tạo ra một virtual DOM và các components được lưu trong đó, khi có bất kỳ sự thay đổi nào ReactJS sẽ tính toán và chỉ cập nhật những components có liên quan, chính điều này làm cho tốc độ của ReactJS cực nhanh. Bạn có thể thấy Facebook đã áp dụng ReactJS vào các sản phẩm của họ facebook, instagram. Để phản ánh tương đối rõ hơn về tốc độ của ReactJS, chúng ta sẽ xem qua một performance test giữa AngularJS, ReactJS, KnockoutJS và Raw DOM Cách thức làm test là render 1000 phần tử và đo xem mất bao nhiêu thời gian để hoàn thành. Kết quả bên dưới thu được sau khi chạy test ở 3 trình duyệt Chrome, Firefox, Safari và mỗi Framework được chạy 10 lần.
Tính trung bình thì ReactJS luôn cho tốc độ nhanh nhất, và ngạc nhiên hơn nữa là nó thậm chí còn nhanh hơn cả sử dụng javascript thuần.
Một trong những vấn đề của các Javascript frameworks là chúng không mấy thân thiện với SEO Mặc dù đã có những cải thiện nhưng nói chung các cỗ máy tìm kiếm vẫn gặp khó khăn khi crawl những ứng dụng sử dụng nhiều javascript. ReactJS có thể được sử dụng ở phía server (nhờ nodejs) để tạo ra virtual DOM sau đó trả về cho trình duyệt như một trang web thông thường.
3.6.3 ReactJS cung cấp sẵn công cụ phát triển
Khi bắt đầu làm việc với ReactJS bạn nên cài công cụ này trên chrome, nó sẽ giúp bạn debug ứng dụng một cách dễ dàng Sau khi cài đặt sẽ có thêm 1 tab react trong phần tools (mở bằng F12) tại đây bạn có thể xem được toàn bộ virtual DOM, giống như là bạn đang xem một cây DOM thuần vậy Bạn có thể chọn, sửa thuộc tính và trạng thái của các components Hơn thế nữa, cây DOM và Virtual DOM có sự tương ứng trong quá trình tương tác Ví dụ khi bạn chọn element bên DOM thì component tương ứng bên Virtual DOM cũng được chọn; hay Virtual DOM sẽ tự động dừng lại tại component tương ứng với breakpoint trong quá trình render page.
Và bạn biết đấy, sử dụng được breakpoint sẽ cực kỳ hữu ích trong quá trình tìm ra lỗi. Đây là những ứng dụng nổi bật có lượng truy cập lớn và nổi tiếng đã sử dụng ReactJS:
Instagram : 100% ReactJS cả public sites và internal tools.
Facebook : commenting interface, business management tools, Lookback video editor, page insights
Khan Academy : sử dụng ReactJS cho hầu hết những chức năng liên quan đến javascript.
Sberbank : ngân hàng số 1 của Nga sử dụng ReactJS.
The New York Times: dự án Red Carpet 2014.
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ĐẶT TOUR DU LỊCH
Phân tích hệ thống
4.1.1 Lược đồ chức năng quản trị viên
Hình 4- 1: Lược đồ ca sử dụng quản trị viênLược đồ thể hiện tất cả chức năng của quản trị viên ở hệ thống quản lý tour du lịch được hiển thị dưới dạng usecase.
4.1.2 Lược đồ chức năng khách hàng
Hình 4- 2: Lược đồ ca sử dụng khách hàngLược đồ thể hiện tất cả chức năng của khách hàng ở hệ thống quản lý tour du lịch được hiển thị dưới dạng usecase.
4.1.3 Chi tiết các chức năng chính của hệ thống.
Bảng 4 - 1: Biểu đồ phân cấp chức năng của hệ thống
Chức năng Mô tả chức năng
I PHÂN HỆ CÁC CHỨC NĂNG KHÁCH HÀNG
1.1 Đăng ký tài khoản Cho phép khách hàng nhập các thông tin như email, tên người dùng và mật khẩu để tạo tài khoản.
1.2 Đăng nhập tài khoản Cho phép khách hàng đăng nhập từ tài khoản đã đăng ký và được phép truy cập các dịch vụ khi có tài khoản cá nhân.
1.3 Đổi thông tin cá nhân Cho phép khách hàng thay đổi các thông tin cá nhân của chính mình Như là tên, địa chỉ, ảnh đại diện, …
Cho phép khách hàng đổi mật khẩu của mình khi muốn.
1.5 Báo quên mật khẩu Khi quên mật khẩu khách hàng có thể lấy lại mật khẩu đăng nhập.
2 Xem thông tin lịch sử
2.1 Xem lịch sử Cho phép khách hàng xem lại lịch sử đặt tour của mình.
Khách hàng sẽ nhận được thông báo từ công ty khi đăng ký tour của riêng mình.
4 Đánh giá và xếp hạng
Cho phép khách hàng đánh giá tour với số sao yêu thích tối đa 5 sao.
Cho phép khách hàng để lại các bình luận của mình với tour, nhận xét các ưu nhược điểm cần phải thay đổi
5.1 Thanh toán bằng hình thức trực tuyến
Cho phép khách hàng thanh toán bằng thẻ tín dụng.
6.1 Đọc tin tức du lịch Cho phép khách hàng đọc các tin tức được website cập nhật trên hệ thống.
7.1 Tìm kiếm tour Cho phép khách hàng tìm kiếm tour theo tên tour
II PHÂN HỆ CÁC CHỨC NĂNG DÀNH CHO NHÂN VIÊN
1.1 Đăng ký tài khoản Cho phép nhân viên đăng ký tài khoản để đăng nhập và quản lý thông tin 1.2 Đổi thông tin cá nhân Cho phép nhân viên đổi một số thông tin được phép thay đổi trong tài khoản 1.3 Đổi mật khẩu Cho phép nhân viên đổi mật khẩu đăng nhập.
1.4 Báo quên mật khẩu Cho phép nhân viên lấy lại của mình.
2.1 Xem thông tin Cho phép nhân viên chọn một dịch vụ được cung cấp và lên lịch làm việc với cộng tác viên.
2.2 Cấp quyền Cho phép nhân viên cấp cao nhất cấp quyền truy cập truy cập hệ thống.
3.1 Thêm bài viết Cho phép nhân viên đăng thêm bài viết.
3.2 Sửa bài viết Cho phép nhân viên sửa bài viết.
3.3 Xoá bài viết Cho phép nhân viên xoá bài viết.
3.4 Xem thông tin Cho phép nhân viên xem lại thông tin bài viết.
4.1 Thêm tour Cho phép nhân viên tạo thêm tour.
4.2 Sửa tour Cho phép nhân viên sửa tour.
4.3 Xoá tour Cho phép nhân viên xoá tour.
4.4 Xem thông tin Cho phép nhân viên xem lại thông tin tour.
5.1 Thêm khuyến mãi Cho phép nhân viên tạo khuyến mãi.
5.2 Sửa khuyến mãi Cho phép nhân viên sửa khuyến mãi.
5.3 Xoá khuyến mãi Cho phép nhân viên xoá khuyến mãi.
5.4 Áp dụng khuyến Cho phép nhân viên áp dụng khuyến mãi cho mãi các tour cụ thể.
6.1 Xem hoá đơn Cho phép nhân viên tạo xem hoá đơn đã được tạo.
6.2 Xoá hoá đơn Cho phép nhân viên xoá hoá đơn.
7.1 Xem doanh thu Cho phép nhân viên xem lại doanh thu của hệ thống theo ngày, tháng, năm.
7.2 Đề xuất doanh thu Cho phép nhân viên nhập vào mục tiêu doanh thu tuần, tháng, năm
4.1.4 Quy trình phân tích nghiệp vụ.
Hình 4- 3: Quy trình đặt tour du lịch Đầu tiên khách hàng truy cập website nếu chưa có tài khoản thì tiến hành vào trang đăng ký để tạo tài khoản rồi đăng nhập hệ thống Khách hàng sẽ tìm kiếm tour phù hợp với các nhân khách hàng hệ thống sẽ cung cấp đầy đủ thông tin của tour đó Khách hàng tiến hành đặt tour bằng phương thức thanh toán khách hàng, hệ thống sẽ lưu trữ hoá đơn và gửi email xác nhận cho khách hàng.
Hình 4- 4: Quy trình thanh toán Đầu tiên khách hàng truy cập website đăng nhập vào hệ thống, khách hàng sẽ tìm kiếm tour yêu thích của bản thân và điền các thông tin mà hệ thống bắt buộc phải nhập Khách hàng dùng thẻ tín dụng để tiến hành thanh toán, hệ thống sẽ tiếp nhận thông tin và lưu hoá đơn khi thanh toán thành công Khách hàng sẽ được nhận email thông báo kết quả thanh toán thành công.
4.1.4.3 Quy trình tìm kiếm tour
Hình 4- 5: Quy trình tìm kiếm tour Khi khách hàng muốn tìm kiếm tour mà mình muốn đi mà không cần phải những tour được hệ thống gợi ý thì khách hàng truy cập website vào danh sách tour và tiến hành tìm kiếm hệ thống sẽ tìm kiếm theo tên tour mà bạn nhập vào ô tìm kiếm.
4.1.5.1 Biểu đồ trình tự đăng nhập.
Hình 4- 6: Biểu đồ trình tự cho chức năng đăng nhập.
4.1.5.2 Biểu đồ trình tự chức năng thêm tour.
Hình 4- 7: Biểu đồ trình tự cho chức năng thêm tour.
4.1.5.3 Biểu đồ trình tự chức năng sửa tour.
Hình 4- 8: Biểu đồ trình tự cho chức năng sửa tour.
4.1.5.4 Biểu đồ trình tự chức năng xóa tour.
Hình 4- 9: Biểu đồ trình tự cho chức năng xóa tour.
4.1.5.5 Biểu đồ trình tự báo cáo doanh thu.
Hình 4- 10: Biểu đồ trình tự cho chức năng báo cáo doanh thu.
4.1.5.6 Biểu đồ trình tự xem thông tin tour.
Hình 4- 11: Biểu đồ trình tự xem thông tin tour.
4.1.6.1 Biểu đồ cộng tác đăng nhập.
Hình 4- 12: Biểu đồ cộng tác cho ca sử dụng đăng nhập.
4.1.6.2 Biểu đồ cộng tác xem thông tin tour.
4.1.6.3 Biểu đồ cộng tác tìm kiếm tour.
Hình 4- 14: Biểu đồ cộng tác cho chức năng tìm kiếm tour
4.1.6.3 Biểu đồ cộng tác quản lý tour.
Hình 4- 15: Biểu đồ cộng tác quản lý tour.
4.1.7.1 Biểu đồ lớp cho chức đăng nhập.
Hình 4- 16: Biểu đồ lớp cho chức năng đăng nhập.
4.1.7.2 Biểu đồ lớp cho chức năng thêm bài viết.
Hình 4- 17: Biểu đồ lớp cho chức năng thêm bài viết.
4.1.7.3 Biểu đồ lớp cho chức năng sửa bài viết.
Hình 4- 18: Biểu đồ lớp cho chức năng sửa bài viết
4.1.7.4 Biểu đồ lớp cho chức năng xóa bài viết.
Hình 4- 19: Biểu đồ lớp cho chức năng xóa bài viết
4.1.7.5 Biểu đồ lớp cho chức năng bình luận.
Hình 4- 20: Biểu đồ lớp cho chức năng bình luận 4.1.8 Biểu đồ hoạt động.
4.1.8.1 Biểu đồ hoạt động thêm tour.
Hình 4- 21: Biểu đồ hoạt động cho chức năng thêm tour
4.1.8.2 Biểu đồ hoạt động sửa, xóa tour.
Hình 4- 22: Biểu đồ hoạt động cho chức năng sửa, xóa tour.
Hình 4- 23: Biểu đồ triển khai
Phân tích chức năng và giao diện hệ thống
- Khách hàng và nhân viên đều có thể đăng nhập hệ thống thông qua trang này.
- Khi nhập mật khẩu web sẽ tự động biến đổi thành dấu • để khách hàng không bị lộ mật khẩu.
- Chức năng quên tài khoản dành cho các khách hàng không may bị quên tài khoản đã đăng ký trong hệ thống Điều kiện cần để lấy lại tài khoản là tên đăng nhập và email đăng ký.
- Tạo tài khoản dành cho những khách hàng chưa đăng ký tài khoản hay khách hàng muốn đăng ký thêm tài khoản mới.
- Web còn có các nền tảng mạng xã hội khác để dễ tiếp cận với người dùng.
Hình 4- 24: Phác họa giao diện đăng nhập
Hình 4- 25: Phác hoạ giao diện đăng ký
- Chức năng này dành cho cả khách hàng và nhân viên.
- Khách hàng điền đầy thông tin cần thiết vào để đăng ký tài khoản mới.
- Một số điều kiện khi đăng ký:
• Mật khẩu ít nhất 5 ký tự không chứa ký tự đặc biệt, không có phím cách.
• Tên tài khoản phải là định dạng email.
• Mật khẩu và nhập lại mật khẩu phải trùng khớp với nhau.
- Chức năng cẩm nang du lịch:
- Cẩm nang du lịch là một nơi để khách hàng có thể tự tìm hiểu thêm các thông tin cần thiết, giúp khách hàng chủ động hơn trong quá trình lựa chọn mà không cần phải nhờ vào tư vấn của nhân viên.
- Các tour được phân ra các nhóm như: tour trong nước, tour nước ngoài và tour yêu thích.
- Các tour được phân ra để nhằm mục đích giảm thời gian tìm kiếm của khách hàng Mỗi loại tour đều có hình ảnh, địa chỉ, và giá cả.
- Tin tức du lịch là nơi để khách hàng cập nhật các thông tin các địa điểm mới, địa điểm được quan tâm, các tin tức thú vị liên quan đến du lịch.
- Ý kiến khách hàng là nơi những bình luận hay được trang web lựa chọn hiển thị lên phần trang chủ.
Hình 4- 26: Phác hoạ giao diện trang chủ
- Đây là nơi khách hàng có thể phản hồi các ý kiến gồm có cả tích cực và tiêu cực.
- Khách hàng sẽ phải điền đầy đủ các thông tin theo yêu cầu của website.
- Khi phản hồi tin nhắn sẽ được gửi vào email nội bộ của công ty.
- Nội dung tin nhắn và thông tin người gửi sẽ được bảo mật.
Hình 4- 27: Phác hoạ giao diện liên hệ 4.2.5 Giao diện quản trị tin tức
- Đây là giao diện trang quản trị tin tức.
- Trang này sẽ lưu trữ toàn bộ thông tin của tin tức.
- Mỗi tin tức đều có thể sửa đổi và xóa.
- Bên trái là menu dọc để tới trang khác một cách tiện lợi nhất.
Hình 4- 28: Phác họa giao diện quản trị tin tức 4.2.6 Giao diện quản trị thông tin khách hàng
- Mỗi khách hàng đều có một mã khách hàng riêng để website dễ dàng trong việc quản lý thông tin của họ.
- Các thông tin này sẽ được lưu trữ trong hệ thống và nhân viên sẽ không thể xóa thông tin cá nhân của khách hàng.
- Trang này sẽ cho nhân viên thấy tên đăng nhập và mật khẩu đăng nhập của khách hàng.
- Khi nhân viên quản trị muốn xem thêm các thông tin khác của khách hàng thì sẽ bấm vào chi tiết Các thông tin khác sẽ được hiện đầy đủ ở trang khác.
Hình 4- 29: Phác họa giao diện quản trị thông tin khách hàng
4.2.7 Giao diện quản trị thống kê doanh thu
- Đây là trang mà hệ thống có thể thống kê lại xem doanh thu đạt được như thế nào.
- Có 3 chỉ tiêu cơ bản là chỉ tiêu ngày, tháng và năm.
- Khi công ty nhỏ thì nhân viên có thể để chỉ tiêu nhỏ còn khi công ty phát triển lớn mạnh hơn nhân viên cũng có thể thay đổi chỉ tiêu để hệ thống phấn đấu và và phát triển theo.
Hình 4- 30: Phác hoạ giao diện quản trị thống kê doanh thu
Cơ sử dữ liệu
4.3.1 Lược đồ cơ sở dữ liệu
4.3.2 Mô tả cơ sở dữ liệu
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: Anhs.
Tên cột Kiểu dữ liệu Ghi chú
Id Int Mã ảnh(khóa chính)
Banner Nvarchar(50) Tình trạng banner
TourId Nvarchar(50) Mã tour (khoá ngoại)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: BinhLuans.
Tên cột Kiểu Ghi chú id Int Mã bình luận(khóa chính)
TourId Int Mã tour(khoá ngoại)
UserId Int Mã người dùng(khoá ngoại)
Star Int Số sao đánh giá
LoadHome Int Hiển thị ra trang chủ
4.3.2.3 Bảng cẩm nang du lịch
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: CamNangDuLich.
Bảng 4 - 4: Cẩm nang du lịch
Tên cột Kiểu Ghi chú id Int Mã ảnh(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: ChiTieus.
Tên cột Kiểu Ghi chú id Int Mã chỉ tiêu(khóa chính)
ChiTieuNgay Int Chỉ tiêu ngày
ChiTieuThang Int Chỉ tiêu tháng
ChiTieuTuan Int Chỉ tiêu tuần
ChiTieuNam Int Chỉ tiêu năm
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: DiaDiems.
Tên cột Kiểu Ghi chú id Int Mã địa điểm(khóa chính)
QuocgiaId Int Mã quốc gia(khoá ngoại)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: DichVu.
Tên cột Kiểu Ghi chú id Int Mã dịch vụ(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: HoaDons.
Tên cột Kiểu Ghi chú id Int Mã hoá đơn(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: KhuyenMais.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã khuyến mãi(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: LienHes.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã liên hệ(khóa chính)
Sdt Int Số điện thoại
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: LoaiTour.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã loại tour(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: MangXaHois.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã mạng xã hội(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: NgayDis.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã ngày đi(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: QuocGias.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã quốc gia(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: Roles.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã role(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị
Tên bảng trong cơ sở dữ liệu: Tags
Tên cột Kiểu dữ liệu Ghi chú id Int Mã tag(khóa chính)
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị
Tên bảng trong cơ sở dữ liệu: TinTucs
Tên cột Kiểu dữ liệu Ghi chú id Int Mã role(khóa chính)
Twitch Nvarchar(50) Twitch status Int Tình trạng
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: Tours.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã tour loại tour(khóa chính)
GiaNguoiLon Int Giá người lớn
GiaTreEm Int Giá trẻ em
GiaEmBe Int Giá em bé
ChiTietTour Nvarchar(50) Chi tiết tour
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: Users.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã role(khóa chính)
Sdt Nvarchar(50) Số điện thoại
NgaySinh Nvarchar(50) Ngày sinh status Int Tình trạng
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: ThongBaos.
Tên cột Kiểu dữ liệu Ghi chú id Int Mã role(khóa chính) userId Int Mã người dùng
4.3.2.20 Bảng hóa đơn cá nhân
Mục đích: dùng để lưu trữ thông tin tài khoản của người quản trị.
Tên bảng trong cơ sở dữ liệu: HoaDonCaNhans
Bảng 4 - 21: Hóa đơn cá nhân
Tên cột Kiểu dữ liệu Ghi chú id int Mã role(khóa chính) userId int Mã người dùng
NgayKhoiHanh Nvarchar(50) Ngày khởi hành
DiaDiemDi Nvarchar(50) Địa điểm đi
TRIỂN KHAI HỆ THỐNG ĐẶT TOUR DU LỊCH
Công cụ sử dụng
HTML, CSS, Javascript là ngôn ngữ chính để thiết kế giao diện hệ thống Bộ ba ngôn ngữ này là dường như không thể thiếu khi tạo giao diện một website.
React là thư viện ngôn ngữ JavaScript mới được phát triển và phổ biến phổ biến để xây dựng giao diện người dùng (UI) React có tốc độ khá nhanh khi người dùng nhập liệu bằng cách sử dụng phương pháp mới để render website.
React là thư viện được phát triển bởi Facebook Nó được ra mắt vào năm 2013 được cho là công cụ JavaScript mã nguồn mở Hiện tại, nó đã đi trước các đối thủ có khả năng hoạt động tương tự như Angular và Bootstrap, hai thư viện JavaScript được người dùng ưa chuộng nhất thời bấy giờ.
React được nhiều lựa chọn bởi nhiều công ty lớn hàng đầu thế giới, bao gồm Netflix, Airbnb, Facebook, WhatsApp, eBay, và Instagram Đây là bằng chứng cho thấy React hiện đang nổi trội hơn với các đối thủ khác trong thị trường.
Nodejs là một FrameWork của ngôn ngữ JavaScript, hệ thống được thiết kế để viết các ứng dụng internet có khả năng mở rộng, được tạo ra năm 2009.
MySQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến nhất thế giới vì đây là hệ quản trị có tốc độ cao, ổn định và khá dễ sử dụng, hoạt động tốt trên nhiều hệ điều hành, tốc độ và tính bảo mật cao.
Visual Studio Code: Công cụ lập trình.
Trình duyệt Google Chome: chạy chương trình.
Github: Quản lý dự án.
Figma: Công cụ chỉnh sửa và thiết kế giao diện.
Giao diện đối với khách hàng
Hình 5- 1: Giao diện trang chủ - Menu Giao diện banner trang chủ đẹp, bắt mắt, hiển thị những địa điểm du lịch nổi tiếng với hiệu ứng silde tạo thêm điểm nhấn và sự sinh động hơn cho website
Hình 5- 2: Giao diện trang chủ - Cẩm nang du lịchGiao diện banner đẹp mắt nhằm thu hút khách hàng, cẩm nang du lịch chỉ là phần giao diện thêm bắt mắt hơn.
Hình 5- 3: Giao diện trang chủ - Tour trong nước Phần du lịch trong nước nhằm mục đích hiển thị các tour mới ở trong nước giúp người dùng dễ dàng lựa chọn hơn Cũng như hiển thị tên tour giá tiền cùng với số sao trung bình mà khách hang đã đánh giá Hiển thị % khuyến mãi đối với tour được giảm giá
Hình 5- 4: Giao diện trang chủ - Tour nước ngoài Phần du lịch nước ngoài nhằm mục đích hiển thị các tour mới ở nước ngoài giúp người dùng dễ dàng lựa chọn hơn Cũng như hiển thị tên tour giá tiền cùng với số sao trung bình mà khách hang đã đánh giá Hiển thị % khuyến mãi đối với tour
Hình 5- 5: Giao diện trang chủ - Dịch vụ Giao diện dịch vụ công ty nhằm mục đích hiển thị các dịch vụ tốt nhất của công ty nhằm thu hút nhiều hơn số lượng khách hàng Cung cấp 1 số dịch vụ miễn phí phù hợp với yêu cầu của khách hàng
Hình 5- 6: Giao diện trang chủ - Tin tứcGiao diện tin tức nhằm mục đích hiển thị các tin tức mới nổi bật, khách hàng có thể chọn và xem tin tức ngay trên giao diện này.
Hình 5- 7: Giao diện trang chủ - Ý kiến khách hàng Giao diện ý kiến khách hàng nhằm mục đích hiển thị những bình luận nổi bật mà khách hàng đã trải nghiệm tour để lại bình luận.
5.2.2 Giao diện thông tin tour
Hình 5- 8: Giao diện xem thông tin tour Giao diện xem thông tin tour nhằm mục đích hiển thị cho khách hàng xem một số hình ảnh banner liên quan đến tour du lịch gồm có: ngày khởi hành, thời gian xuất phát, nơi khởi hành, giá tour và số chỗ ngồi còn lại.
Hình 5- 9: Giao diện chi tiết tour Giao diện chi tiết tour nhằm mục đích hiển thị lịch trình của chuyến đi cho khách hàng để giúp cho khách hàng dễ nắm bắt chuyến đi hơn.
Hình 5- 10: Giao diện giá tourGiao diện giá tour nhằm mục đích hiển thị giá của tour bao gồm: giá tiền người lớn, giá tiền trẻ em, giá tiền em bé.
Hình 5- 11: Giao diện dịch vụ đi kèm Giao diện dịch vụ đi kèm nhằm mục đích hiển thị các dịch vụ sẽ đi kèm trong tour
Hình 5- 12: Giao diện lưu ý Giao diện lưu ý nhằm mục đích hiển thị các lưu ý khi đặt tour
Hình 5- 13: Giao diện bản đồ
Giao diện bản đồ nhằm mục đích hiển thị bản đồ nơi khách hàng muốn đến, khách hàng có thể hình dung chuyến đi bằng cách vào google map để xem tuyến đường.
Hình 5- 14: Giao diện đánh giá Giao diện đánh giá nhằm mục đích hiển thị các đánh giá mà các khách hàng trước đã trải nghiệm tour, khách hàng mới cũng có thể đánh giá bằng cách để lại nhận xét về tour và số sao có phù hợp giá tiền mình bỏ ra hay không.
5.2.3 Giao diện đăng ký tour
Hình 5- 15: Giao diện đăng ký tourGiao diện đăng ký tour nhằm mục đích hiển thị cho khách hàng xem những thông tin mà khách hàng cần phải nhập đầy đủ trước khi đăng ký, khách hàng có thể chọn số người lớn, trẻ em hay là em bé Hệ thống sẽ tổng hợp số lượng người đi cho mình và tính tổng tiền cần phải thanh toán.
Hình 5- 16: Giao diện điều khoản đăng kýGiao diện điều khoản đăng ký nhằm mục đích hiển thị những điều khoản mà hệ thống đặt ra nếu bạn đồng ý với điều khoản mà công ty đặt ra thì bạn mới có thể đăng ký chuyến đi về hình thức thanh toán sẽ có hình thức thanh toán bằng thẻ tín dụng.
Giao diện thanh toán online nhằm mục đích hiển thị các thông tin về tên tour mà bạn muốn đặt, tổng số người đi trong tour đã đặt (bao gồm trẻ em và người lớn), tổng số tiền và số tiền sẽ được chuyển đổi từ Việt Nam đồng thành Đô la Mỹ vì hình thức thanh toán online bằng thẻ tín dụng sẽ dùng giá Đô la để thanh toán.
Giao diện quản trị
5.3.1 Giao diện quản trị admin
Hình 5- 24: Giao diện doanh thu
Giao diện doanh thu nhằm mục đích hiển thị doanh thu của công ty đã đạt được theo các chỉ tiêu ngày, tháng, năm Nhân viên có thể đặt chỉ tiêu theo ngày, tháng, năm tuỳ thuộc vào tình hình của công ty.
5.3.2 Giao diện quản trị tin tức
Hình 5- 25: Giao diện quản lý tin tức Giao diện quản lý tin tức nhằm mục đích hiển thị các tin tức hiện có trong hệ thống Nhân viên có thể thêm, sửa, xoá các tin tức và có thể làm ẩn hiển các tin tức của hệ thống.
5.3.3 Giao diện thêm sửa tin tức
Hình 5- 26: Giao diện thêm, sửa tin tứcGiao diện thêm, sửa tin tức nhằm mục đích hiển thị các thông tin mà nhân viên cần nhập để tiến hành thêm hoặc sửa thông tin của tin tức.
5.3.4 Giao diện quản trị tour
Hình 5- 27: Giao diện quản trị tour Giao diện quản lý tour nhằm mục đích hiển thị các tin tức hiện có trong hệ thống Nhân viên có thể thêm, sửa, xoá các tour và có thể làm ẩn hiển các tour của hệ thống.
5.3.5 Giao diện thêm sửa tour
Hình 5- 28: Giao diện thêm, sửa tourGiao diện thêm, sửa tour nhằm mục đích hiển thị các thông tin mà nhân viên cần nhập để tiến hành thêm hoặc sửa thông tin của tour.
5.3.6 Giao diện quản trị thông tin khách hàng
Hình 5- 29: Giao diện quản lý thông tin khách hàngGiao diện quản lý thông tin khách hàng nhằm mục đích hiển thị các thông tin khách hàng hiện có trong hệ thống Nhân viên có thể cấp quyền hoạt động của hệ thống, hệ thống có các quyền sau: biên tập viên, quản lý tour, quản lý bình luận,quản lý tin tức và admin.
KIỂM THỬ PHẦN MỀM
Trưởng nhóm test sẽ thực hiện viết test plan cho toàn bộ hệ thông gồm các phần sau:
Định nghĩa phạm vi kiểm thử.
Định nghĩa các chiến lược kiểm thử.
Nhận dạng các rủi ro và các yếu tố bất ngờ.
Nhận dạng các hoạt động kiểm thử và xây dựng lịch kiểm thử.
Nhận dạng môi trường kiểm thử.
Hiệu chỉnh trong suốt chu kỳ kiểm thử để phản ánh các thay đổi cần thiết.
5.4.2 Quy trình thiết kế kiểm thử
Hình 5- 30: Quy trình kiểm thử
Trong quy trình này TestManager sẽ thực hiện các xây dựng kế hoạch về kiểm thử, thông qua các phân tích và đánh giá về: phạm vi, chiến lược, rủi ro có thể xảy ra, các dạng kiểm thử, môi trường kiểm thử…
Dựa trên cơ sở đó Test Analysis sẽ tiến hành viết các testcase cho mỗi chức năng trong mỗi module một cách kỹ lưỡng và tỉ mỉ nhất với mục tiêu chính là tìm ra lỗi trong mỗi module và lỗi của cả dự án.
Sau đó các TestCase sẽ được tiến hành thực thi trên các module cụ thể bởi từng Tester cụ thể Trong giai đoạn chuẩn bị, Tester sẽ dùng mẫu prototype, use case, các đặc tả chức năng để viết test case theo trình tự từng bước một.
Tester phải liên tục duy trì tạo các báo cáo lỗi trong quá trình thực hiện, sau đó báo cáo kết quả kiểm thử cho TestManager TestManager tạo bảng tổng kết đánh giá hoạt động kiểm lỗi, xác định xem đã đạt tiêu chí thành công và hoàn thành kiểm thử chưa.
Hình 5- 31: Quy trình chạy các bộ kiểm thử Tester sẽ được bố trí công việc bởi Test Leader để thi hành kiểm thử theo quy trình cụ thể sau:
Thi hành kiểm thử theo từng testcase cho từng module cụ thể.
Chạy lại các case bị failed trước đó để xác nhận là case đó đã được sửa.
So sách kết quả ghi nhận được khi thực thi với kết quả mong đợi.
Đánh giá kết quả kiểm thử (Passed/Failed) cho các trường hợp kiểm thử.
Viết báo cáo lỗi cho những trường hợp kết quả ghi nhận được và kết quả mong đợi không giống nhau.
Bảng 5 - 1: Bảng các test case
Id Mô tả test case Các bước thực hiện Kết quả mong đợi
ET01 Chức năng đăng nhập
(1) Login với username Khi người dùng đăng nhập thành công sẽ chuyển đến trang homepage của người dùng, nếu quản trị viên đăng
Pass nhập thành công sẽ chuyển hướng đến trang homepage của quản trị viên Nếu đăng nhập không thành công thì sẽ báo lỗi
ET02 Chức năng đăng ký
(1) Nhập vào các thông tin cần thiết
Khi đăng kí tài khoản mới sẽ có thông báo chức năng đăng kí thành công, nếu có lỗi xảy ra sẽ thông báo lỗi
ET03 Chức năng đăng xuất
(1) Tại mục thông tin tài khoản nhấn chọn đăng xuất
Nếu đăng xuất thành công, sẽ xóa các token đã cung cấp đồng thời chuyển hướng đến trang chủ Nếu có lỗi xảy ra sẽ có thông báo lỗi
ET04 Chức năng (1) Đăng nhập với vai trò Sửa thông tin Pass tin tài khoản người dùng người dùng hoặc người quản lý
(2) chọn avatar => chỉnh sửa thông tin người dùng
(3) Nhấp sửa trên dòng thông tin người dùng
(4) Nhập các thông tin cần thiết
(5) Nhấn lưu dùng hoặc ngươi quản lý Nếu không thành công thì sẽ có thông báo
Chức năng tài khoản người dùng
(1) Đăng nhập với vai trò quản trị viên (username nguyenductu0000@gmail.com, password = nguyenductu1010)
(2) Tại trang homepage nhấp chọn admin
(3) Chọn quản lý tài khoản
(4) Trên dòng thông tin người dùng nhấn chọn icon khóa
Khóa tài khoản người dùng thành công, nếu lỗi sẽ có thông báo
ET06 Chức năng phân quyền tài khoản người dùng
(1) Đăng nhập với vai trò quản trị viên (username nguyenductu0000@gmail.com, password = nguyenductu1010)
(2) Tại trang homepage nhấp chọn admin
Cấp quyền tài khoản thành công, nếu không thành công sẽ có thông báo.
(3) Chọn quản lý tài khoản
(4) Trên dòng thông tin người dùng nhấn chọn icon phân quyền, nhấp chọn phân quyền ( admin, quản lí tour,…)
Chức năng tìm kiếm tour
(2) Tại trang tour, trên thanh tìm kiếm nhập tên tour, chọn vị trí
Tìm kiếm được tour cần tìm, nếu không sẽ hiển thị danh sách trống
ET08 Chức năng đặt tour
(1) Đăng nhập bằng tài khoản người dùng hoặc admin
(2) Trong list tour hiển thị chọn tour cần đặt
(3) Chọn đặt tour, nhập số người đi, chọn thanh toán
(4) Nhấn thanh toán Đặt tour thành công sẽ báo đã đặt thành công, nếu không sẽ báo lỗi ở các bước tương ứng
ET09 Chức năng thêm tour
(1) Đăng nhập tài khoản admin
(2) Chọn quản lý tour, thêm tour
(3) Điền đẩy đủ các thông tin
Tạo tour thành công sẽ có thông báo đã tạo tour thành công và tour sẽ hiển thị lên màn danh
(4) Nhấn chọn thêm tour sách, nếu không sẽ báo lỗi.
ET10 Chức năng thêm tin tức
(1) Đăng nhập tài khoản admin
(2) Chọn quản lý tin tức, thêm tin tức
(3) Điền đẩy đủ các thông tin
(4) Nhấn chọn thêm tin tức
Tạo tin tức thành công sẽ báo đã tạo tin tức thành công và hiển thị ra ngoài màn danh sách, nếu không thì sẽ báo lỗi
Chức năng xem thông tin các tour đã đặt
(1) Đăng nhập tài khoản cá nhân hoặc admin
(2) Tại trang homepage nhấn chọn avatar
(3) Nhấn chọn xem lịch sử
Nếu đã đặt tour thì chi tiết về tour đã đặt sẽ hiển thị, nếu không thì hiện danh sách trống
Chức năng xem hóa đơn đã đặt tour
(1) Đăng nhập tài khoản admin
(2) Ở trang admin nhấn vào avatar chọn quản lý admin
(3) Chọn quản lí hóa đơn
Nếu đã có người đặt thì sẽ hiện hóa đơn của tour, nếu không thì hiện danh sách trống