Nghiên cứu xây dựng website giới thiệu tour du lịch việt nam

Lý do chọn đề tài Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như

Trang 1

TRƯỜNG ĐẠI HỌC SƯ PHẠM – ĐẠI HỌC ĐÀ NẴNG

KHOA TIN HỌC

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

Trang 2

i

LỜI CẢM ƠN

Trong đợt thực tập vừa qua, em nhận được sự giúp đỡ tận tình và động viên

từ nhiều phía Tất cả những điều đó đã giúp em có động lực cố gắng hoàn thành

Em xin chân thành cảm ơn !

Trang 3

ii

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

………

Đà Nẵng, ngày … tháng … năm 2019

Giảng viên hướng dẫn

Nguyễn Đình Lầu

Trang 4

iii

LỜI CAM ĐOAN

Tôi xin cam đoạn:

1 Những nội dung trong báo cáo tốt nghiệp này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của thầy Nguyễn Đình Lầu

2 Mọi tham khảo dùng trong đồ án thực tập đều được trích dẫn rõ ràng và trung thực tên tác giả, tên công trình, thời gian, địa điểm công bố

3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tôi xin chịu hoàn toàn trách nhiệm

Đà Nẵng, ngày … tháng … năm 2019

Sinh viên thực hiện

Trần Đức Huy

Trang 5

iv

MỤC LỤC

LỜI CẢM ƠN i

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ii

LỜI CAM ĐOAN iii

DANH MỤC CÁC HÌNH vii

DANH MỤC CÁC BẢNG ix

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

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

3 Phạm vi 2

4 Mục đích đề tài 2

5 Phương pháp nghiên cứu, giải pháp công nghệ 2

6 Nội dung nghiên cứu 2

7 Tiêu chí chức năng của đề tài 2

8 Bố cục đề tài 4

CHƯƠNG I : CƠ SỞ LÝ THUYẾT 5

1.1 Tổng quan về HTML/CSS 5

1.1.1 Sơ lược về HTML 5

1.1.2 Sơ lược về CSS 7

1.2 Javascript 8

1.3 Bootstrap 8

1.4 SQL server 9

1.5 Framework ReactJS 10

1.5.1 Virtual DOM 11

Trang 6

v

1.5.2 Giới thiệu về JSX 11

1.5.3 Giới thiệu về Components 12

1.5.4 Props and State 12

1.6 Redux 12

CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 14

2.1 Tìm hiểu thực tế 14

2.1.1 Khảo sát mức 1 14

2.2 Mục tiêu đề tài 14

2.3 Thiết kế hệ thống 15

2.3.1 Sơ đồ Use-case 15

2.3.2 Đặc tả Use-case 18

2.3.3 Sơ đồ ER 26

2.4 Thiết kế cơ sở dữ liệu 26

2.4.1 Sơ đồ thực thể quan hệ 26

2.4.2 Cấu trúc bảng và ràng buộc 27

2.4.3 Sơ đồ hoạt động 30

CHƯƠNG III: KẾT QUẢ ĐẠT ĐƯỢC 33

3.1 Trang chủ 33

3.2 Trang cá nhân 34

3.3 Trang điểm đến 35

3.4 Trang quản lý 36

3.4.1 Quản lý tour 36

Trang 7

vi

3.4.2 Quản lý users 38

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 39 TÀI LIỆU THAM KHẢO 40

Trang 8

vii

DANH MỤC CÁC HÌNH

Hình 1.1: Cấu trúc của CSS 8

Hình 1.2: Sự thay đổi giữa Virtual DOM và Real DOM 11

Hình 1.3: Cơ chế one-way data binding 11

Hình 1.4: Sơ đồ hoạt động Redux 13

Hình 2.1: Sơ đồ use case mô tả chức năng tổng thể 15

Hình 2.2: Sơ đồ use case mô tả chức năng quản lý của quản trị viên 16

Hình 2.3: Sơ đồ use case mô tả chức năng của khách hàng 16

Hình 2.4: Sơ đồ use case mô tả chức năng của khách hàng tiềm năng 17

Hình 2.5: Sơ đồ thực thể liên kết 26

Hình 2.6: Sơ đồ thực thể quan hệ 26

Hình 2.7: Sơ đồ hoạt động tổng quát 30

Hình 2.8: Sơ đồ hoạt động thêm mới 30

Hình 2.9: Sơ đồ hoạt động chỉnh sửa 31

Hình 2.10: Sơ đồ hoạt động xóa 31

Hình 2.11: Sơ đồ hoạt động đặt tour 31

Hình 2.12: Sơ đồ hoạt động đăng ký tài khoản 32

Hình 3.1: Giao diện trang chủ 33

Hình 3.2: Giao diện form đăng nhập 33

Hình 3.3: Giao diện form đăng ký 34

Hình 3.4: Giao diện trang cá nhân 34

Hình 3.5: Giao diện trang điểm đến 35

Hình 3.6: Giao diện trang chi tiết điểm đến 35

Hình 3.7: Giao diện trang quản lý tour 36

Hình 3.8: Giao diện trang thêm mới tour 36

Hình 3.9: Giao diện trang cập nhật tour 37

Hình 3.10: Giao diện xóa tour 37

Hình 3.11: Giao diện trang quản lý users 38

Trang 9

viii Hình 3.12: Giao diện xóa user 38

Trang 10

ix

DANH MỤC CÁC BẢNG

Bảng 2.1: Bảng đặc tả Use case đăng nhập 18

Bảng 2.2: Bảng đặc tả Use case đăng xuất 18

Bảng 2.3: Bảng đặc tả Use case xem thông tin tour 19

Bảng 2.4: Bảng đặc tả Use case thêm mới tour 19

Bảng 2.5: Bảng đặc tả Use case xóa tour 20

Bảng 2.6: Bảng đặc tả Use case cập nhật tour 20

Bảng 2.7: Bảng đặc tả Use case xem thông tin khách hàng 21

Bảng 2.8: Bảng đặc tả Use case tạo tài khoản mới 21

Bảng 2.9: Bảng đặc tả Use case cập nhật thông tin cá nhân 22

Bảng 2.10: Bảng đặc tả Use case xóa tài khoản 22

Bảng 2.11: Bảng đặc tả Use case xem thông tin đặt tour 23

Bảng 2.12: Bảng đặc tả Use case thêm mới giỏ hàng 23

Bảng 2.13: Bảng đặc tả Use case xóa đặt tour 24

Bảng 2.14: Bảng đặc tả Use case xem đánh giá 24

Bảng 2.15: Bảng đặc tả Use case xóa đánh giá 25

Bảng 2.16: Bảng LOGIN 27

Bảng 2.17: Bảng CUSTOMER 27

Bảng 2.18: Bảng PROVINCE_CITY 28

Bảng 2.19: Bảng TOUR 28

Bảng 2.20: Bảng TOUR_DETAILS 29

Bảng 2.21: Bảng BOOKING_TOUR 29

Bảng 2.22: Bảng BOOKING_DETAILS 29

Trang 11

Website tour du lịch Việt Nam 1 Trần Đức Huy - 15CNTT1

MỞ ĐẦU

1 Lý do chọn đề tài

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như của các công ty; nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ

Đối với các chính phủ và các công ty thì việc xây dựng các website riêng càng ngày càng trở nên cấp thiết Thông qua những website này, thông tin về

họ cũng như các công văn, thông báo, quyết định của chính phủ hay các sản phẩm, dịch vụ mới của công ty sẽ đến với những người quan tâm, đến với khách hàng của họ một cách nhanh chóng kịp thời, tránh những phiền hà mà phương thức giao tiếp truyền thống thường gặp phải

Hoạt động của một công ty du lịch có quy mô khá lớn sẽ càng được tăng cường và mở rộng nếu xây dựng được một website tốt Bắt nguồn với ý tưởng này, em đã thực hiện đồ án “XÂY DỰNG WEBSITE GIỚI THIỆU TOUR

DU LỊCH VIỆT NAM”

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

Có hai mục tiêu khi thực hiện nghiên cứu đề tài:

- Học tập và nghiên cứu các kiến thức như sau: Phân tích và thiết kế hệ thống thông tin, cách xây dựng một trang web thương mại điện tử, HTML/CSS, Bootstrap, Javascript, React JS, Redux, HQT CSDL SQL Server

- Xây dựng sản phẩm là trang “website giới thiệu tour du lịch Việt Nam” cung cấp một số chức năng cơ bản để đáp ứng nhu cầu tham khảo giá và đặt tour trực tuyến của khách hàng và quản trị trang web của người quản trị viên

Trang 12

3 Phạm vi

- Website giới thiệu tour du lịch được áp dụng cho các cá nhân hay tổ chức muốn kinh doanh tour du lịch bằng hình thức trực tuyến nhằm tiết kiệm chi phí mặt bằng, nguồn nhân lực, thời gian quản lý

4 Mục đích đề tài

Mục đích của đề tài là nghiên cứu và xây dựng một website giới thiệu tour du lịch Việt Nam

5 Phương pháp nghiên cứu, giải pháp công nghệ

- Phân tích, thiết kế hệ thống, đặc tả website

- Framework: React JS + Redux

- Công nghệ Bootstrap, Javascript, HTML5

- Hệ quản trị cơ sở dữ liệu SQL Server

6 Nội dung nghiên cứu

- Tìm hiểu và lập kế hoạch cho đề tài xây dựng website “Giới thiệu tour

du lịch Việt Nam”

- Phân tích chức năng, thiết kế hệ thống

- Viết tài liệu đặc tả trang web

- Thiết kế cơ sở dữ liệu

- Thiết kế website dựa trên framework Reactjs, Redux, Bootstrap, Javascript và HTML/CSS và HQT CSDL SQL Server

7 Tiêu chí chức năng của đề tài

Sản phẩm là website “Giới thiệu tour du lịch Việt Nam” với những chức năng giành cho hai đối tượng là khách hàng, quản trị viên:

- Một số tiêu chí chức năng

❖ Khách hàng

- Giao diện web dễ sử dụng và có tính thẩm mỹ cao

Trang 13

- Giao diện web phải thiết kế sao cho nội dung hiển thị phải chính xác và đầy đủ thông tin nhất để đáp ứng nhu cầu của khách hàng

- Để thuận tiện cho việc mua bán và giao dịch, hệ thống phải cho phép người dùng đăng kí tài khoản, thông tin đăng kí phải được bảo mật an toàn, chính xác, tránh sai sót

- Để thuận tiện cho việc chọn lựa tour hệ thống cung cấp chức năng cho phép khách hàng có thể tìm kiếm tour theo yêu cầu

- Để thuận tiện cho việc chọn mua tour hệ thống cho phép người truy cập hoặc người dùng xem chi tiết một mặt hàng bất kì

- Để tiến hành mua hàng hệ thống cho phép người truy cập hoặc người dùng được phép thêm tour bất kì vào giỏ hàng

- Để thuận tiện cho khách hàng trong việc tính toán giá cả các mặt hàng hệ thống cho phép người truy cập hoặc người dùng xem chi tiết giỏ hàng hiện tại của họ

- Để thuận tiện cho mua hàng hệ thống cho phép người truy cập hoặc người dùng cập cập nhật số chỗ, thêm, xóa các tour có trong giỏ hàng của họ

- Nếu người dùng đã đăng nhập thì cho phép họ thanh toán để tiến hành giao hàng

- Hình thức thanh toán phải dễ sử dụng và bảo mật

- Bình luận về tour

- Đóng góp ý kiến cho người quản trị

❖ Quản trị

- Cung cấp cho người quản trị giao diện quản lí rõ ràng, dễ sử dụng

- Đối với người quản trị hệ thống phải cho phép họ đăng kí, đăng nhập, cập nhật lại thông tin tài khoản

Trang 14

- Cho phép người quản trị cập nhật tour lên website một cách đơn giản và chính xác

- Cung cấp cho chức năng quản lí danh sách tour

- Thống kê cho người quản trị các vấn đề sau: khách hàng, thu chi, tour, đơn đặt hàng

- Cho phép người quản trị được quyền thêm, xóa, sữa tài khoản khách hàng hay tour website

- Cho phép người quản trị được quyền xem các hóa đơn, xóa hóa đơn

- Cho người quản trị chỉnh sửa các trang giới thiệu, tin tức, liên hệ của trang website

- Cho phép quản trị thống kê, quản lí đơn hàng

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

Nghiên cứu lý thuyết, trình bày những kỹ thuật sử dụng

CHƯƠNG II: TÌM HIỂU THỰC TẾ

Trình bày những đánh giá, phân tích của mọi người

CHƯƠNG III: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Trình bày phân tích thiết kế hệ thống và phân tích cơ sở dữ liệu

CHƯƠNG IV: MÔ TẢ WEBSITE ĐẠT ĐƯỢC

Các kết quả đạt được

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Đánh giá kết quả đã đạt được và hướng phát triển

Trang 15

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

1.1 Tổng quan về HTML/CSS

1.1.1 Sơ lược về HTML

HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web

HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày

- Cấu trúc cở bản và các câu lệnh của HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

</head>

<body>

</body>

</html>

Trang 16

- Các thẻ cơ bản hay sữ dụng trong HTML

+ <div>: Xác định một phân chia khu vực hay một vùng trong văn bản + <h1> tới <h6>: Xác định tiêu đề html

+ <img >: Hiển thị một image

+ <input >: Xác định một điều khiển nhập

+ <label>: Tạo một nhãn cho thành phần input

+ <button>: Xác định một button

+ <hr >: Tạo một đường ngang

+ <i>: Hiển thị chữ in nghiên

+ <li>: Xác định danh sách item

+ <ul>: Định nghĩa một danh sách không có thứ tự

+ <ol>: Định nghĩa một danh sách có thứ tự

+ <a>: Định nghĩa một đường liên kết link tới trang khác

+ <b>: Định nghĩa một từ được in đậm

+ <u>: Định nghĩa một từ được gạch chân

+ <br>: Thẻ xuống dòng

+ <span>: Định nghĩa một khối văn bản

- Form, Frame, Table

+ Form: Tag <form> được dùng để tạo một "biểu mẫu" HTML cho người dùng, được dùng để truyền dữ liệu lên máy chủ Tag <form> không nên dùng để điều khiển layout

Cấu trúc: Trong <form> bắt buộc phải có tham số action

<form action=""></form> một <form> có thể chứa thành phần <input>, <select>,

<texarea>, <fieldset>, <legend>, <label>, có thể chứa các tag khác

Vídụ:<formaction="#">

<ul>

<li>Email: <input type="text" size="30" /></li>

</ul>

Trang 17

<th> xác định phần tử tiêu đề của table

<td> xác định phần tử nội dung của table

1.1.2 Sơ lược về CSS

CSS (Cascading Style Sheet) được dùng để miêu tả cách trình bày tài liệu viết bằng ngôn ngữ HTML và XHTML Ngoài ra CSS còn có thể dùng cho XML, SVG, XUL Các đặc điểm kỹ thuật của CSS được quy định bởi World Wide Web Consortium (W3C) CSS góp phần làm cho định dạng của các trang web trở nên phong phú và đa dạng hơn Do đó việc tìm hiểu CSS và HTML luôn đi kề nhau Bài viết đầu tiên này sẽ giới thiệu sơ lược về CSS để chúng ta có được cái nhìn tổng quan nhất về CSS (tập tin định kiểu theo tầng)

- Các cú pháp trong CSS

Một cú pháp của CSS có hai phần: Một sector, và một hay nhiều declaration

Trang 18

Hình 1.1: Cấu trúc của CSS

- Sector là phần tử thông thường của HTML mà bạn muốn chỉnh style

- Mỗi một Declaration bao gồm 1 thuộc tính (property) và 1 giá trị (value): Property là thuộc tính phong cách mà bạn muốn thay đổi, mỗi một property có một giá trị (value)

Ví dụ: p {color: red; text-align: center;}, p {color: red; text-align: center;}

1.2 Javascript

- JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất thế giới,

nó là ngôn ngữ cho HTML, web, server, PC, laptop, tablet, smart phone…

- JavaScript là một ngôn ngữ kịch bản

- Ngôn ngữ kịch bản là một ngôn ngữ lập trình nhỏ

- JavaScript là mã lập trình có thể được chèn vào các trang HTML

- JavaScript được chèn vào các trang web có thể được chạy bởi tất cả các trình duyệt web hiện đại

- JavaScript là một ngôn ngữ lập trình dễ học

1.3 Bootstrap

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các nút, chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn

Trang 19

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Cốc cốc, Firefox, IE, Opera

1.4 SQL server

SQL Server là một hệ quản trị cơ sở dữ liệu quan hệ (Relational Database

Management System (RDBMS) ) sử dụng câu lệnh SQL (Transact-SQL) để trao

đổi dữ liệu giữa máy Client và máy cài SQL Server Một RDBMS bao gồm databases, database engine và các ứng dụng dùng để quản lý dữ liệu và các bộ phận khác nhau trong RDBMS

SQL Server được tối ưu để có thể chạy trên môi trường cơ sở dữ liệu rất lớn (Very Large Database Environment) lên đến Tera-Byte và có thể phục vụ cùng lúc cho hàng ngàn user SQL Server có thể kết hợp “ăn ý” với các server khác như Microsoft Internet Information Server (IIS), E-Commerce Server, Proxy Server…

❖ Một vài ấn bản SQL Server:

• Enterprise: chứa tất cả cá đặc điểm nổi bật của SQL Server, bao gồm nhân

bộ máy cơ sở dữ liệu và các dịch vụ đi kèm cùng với các công cụ cho tạo

và quản lý phân cụm SQL Server Nó có thể quản lý các CSDL lớn tới

524 petabytes và đánh địa chỉ 12 terabytes bộ nhớ và hỗ trợ tới 640 bộ vi

xử lý (các core của cpu)

• Standard: Rất thích hợp cho các công ty vừa và nhỏ vì giá thành rẻ hơn

nhiều so với Enterprise Edition, nhưng lại bị giới hạn một số chức năng cao cấp (advanced features) khác, edition này có thể chạy tốt trên hệ thống lên đến 4 CPU và 2 GB RAM

• Developer: Có đầy đủ các tính năng của Enterprise Edition nhưng được

chế tạo đặc biệt như giới hạn số lượng người kết nối vào Server cùng một lúc… Ðây là phiên bản sử dụng cho phát triển và kiểm tra ứng dụng Phiên bản này phù hợp cho các cá nhân, tổ chức xây dựng và kiểm tra ứng dụng

• Workgroup: ấn bản SQL Server Workgroup bao gồm chức năng lõi cơ sở

dữ liệu nhưng không có các dịch vụ đi kèm Chú ý phiên bản này không còn tồn tại ở SQL Server 2012

• Express: SQL Server Express dễ sử dụng và quản trị cơ sở dữ liệu đơn

giản Được tích hợp với Microsoft Visual Studio, nên dễ dàng để phát triển

Trang 20

các ứng dụng dữ liệu, an toàn trong lưu trữ, và nhanh chóng triển khai SQL Server Express là phiên bản miễn phí, không giới hạn về số cơ ở dữ liệu hoặc người sử dụng, nhưng nó chỉ dùng cho 1 bộ vi xử lý với 1 GB bộ nhớ và 10 GB file cơ sở dữ liệu SQL Server Express là lựa chọn tốt cho những người dùng chỉ cần một phiên bản SQL Server 2005 nhỏ gọn, dùng trên máy chủ có cấu hình thấp, những nhà phát triển ứng dụng không chuyên hay những người yêu thích xây dựng các ứng dụng nhỏ

1.5 Framework ReactJS

React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với

xu hướng Single Page Application Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau React

so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM Trươc khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một số khái niệm cơ bản:

Trang 21

1.5.1 Virtual DOM

Công nghệ DOM ảo giúp tăng hiệu

năng cho ứng dụng Việc chỉ node gốc

mới có trạng thái và khi nó thay đổi sẽ

tái cấu trúc lại toàn bộ, đồng nghĩa với

việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ

xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo

ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện

Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi Khi đó React

sẽ rất hữu ích để sử dụng

1.5.2 Giới thiệu về JSX

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm: Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã

Hình 1.3: Sự thay đổi giữa Virtual DOM và Real DOM

Hình 1.2: Cơ chế one-way data binding

Trang 22

tương đương viết trực tiếp bằng Javascript Safer: an toàn hơn Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng

1.5.3 Giới thiệu về Components

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component

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

1.5.4 Props and State

Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

Trang 23

tầng, chúng ta phải gọi 3 lần, điều đó sẽ khiến việc code và quản lý state

rất phức tạp, và to dần lên theo thời gian

➢ Với việc sử dụng Redux, chúng ta sẽ lưu state của các component vào

1 store chung ở bên ngoài Sau đó nếu muốn dùng ở component nào

chúng ta chỉ cần gọi nó và sử dụng

Nếu muốn sử dụng Redux, chúng ta cần nhớ 4 thành phần chính của Redux:

Stores, Views, Actions và Reducers

Hình 1.4: Sơ đồ hoạt động Redux

Trang 24

CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Tìm hiểu thực tế

2.1.1 Khảo sát mức 1

Quan sát, lấy ý kiến cho đề tài

Sau khi lên ý tưởng cho đề tài, em đã tiến hành khảo sát ý kiến của bạn bè

và mọi người xung quanh Nội dung xoay quanh về các chức năng của website, tìm hiểu về giao diện, cách thức hoạt động của trang website giới thiệu tour du lịch Việt Nam

Tham khảo ý kiến, đánh giá của mọi người

Sau Sau khi chuẩn bị cơ bản các nội dung về ý tưởng, em bắt đầu thực hiện khảo sát ý kiến, nhận xét của mọi người về website Trong đó có sự hỗ trợ, góp ý kiến nhiệt tình của các anh chị quản lý tại đơn vị thực tập Nội dung hướng đến

là hoàn thiện về mặt ý tưởng, nêu ra các chức năng tiêu biểu, loại bỏ các chức năng không cần thiết

Phân tích đánh giá kết quả khảo sát

Mặc dù chỉ khảo sát trong phạm vi nhỏ tại trường và nơi em sống nhưng

em đã nhận được nhiều ý kiến đóng góp vô cùng quý giá Kết quả là thống nhất xây dựng website giới thiệu tour du lịch Việt Nam

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

Xây dựng được một hệ thống Website quản lý:

- Đầy đủ tính năng cơ bản, phù hợp với nhu cầu sử dụng của người quản lý

và người sử dụng

- Giao diện trực quan, dễ sử dụng

- Nắm bắt được ngôn ngữ lập trình và các công nghệ được sử dụng trong đề tài

Trang 25

- Hoàn thành website với những chức năng dự kiến

2.3 Thiết kế hệ thống

2.3.1 Sơ đồ Use-case

Sau đây là hệ thống sơ đồ use-case của ứng dụng:

Hình 2.1: Sơ đồ use case mô tả chức năng tổng thể

Định dạng
Số trang	50
Dung lượng	2 MB