Xây dựng web app du lịch danang travel trên smartphone.

ĐẠI HỌC ĐÀ NẴNG

TRƢỜNG ĐẠI HỌC SƢ PHẠM

KHOA TIN HỌC



LUẬN VĂN TỐT NGHIỆP

NGÀNH CỬ NHÂN CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG WEB APP DU LỊCH

DANANG TRAVEL TRÊN SMARTPHONE

Mã số: 09CNTT2-001

Ngày bảo vệ : 31/05/2013

SVTH : TRẦN THỊ HỒNG ÁNH

LỚP : 09CNTT2

GVHD : PGS. TSKH. TRẦN QUỐC CHIẾN

ĐÀ NẴNG, 05 - 2013

LỜI CẢM ƠN

Lời đầu tiên em xin bày tỏ lòng biết ơn sâu sắc đến tất cả quý thầy cô khoa Tin

học trường Đại học Sư phạm – Đại học Đà Nẵng đã tận tình giúp đỡ, truyền đạt kiến

thức cho em trong suốt 4 năm đại học, và đặc biệt là thầy PGS. TSKH. Trần Quốc

Chiến người đã trực tiếp chỉ dạy và hướng dẫn em thực hiện đề tài này.

Em xin chân thành cảm ơn ban lãnh đạo Công ty TNHH Tin học & Thương

mại AsNet đã tiếp nhận và tạo điều kiện cho em hoàn thành tốt đồ án.

Đồng thời cũng gửi lời cảm ơn đến tất cả các bạn sinh viên cùng khóa và tập thể

Lớp 09CNTT2 khoa Tin học - Trường ĐH Sư Phạm - ĐH Đà Nẵng đã ủng hộ, giúp đỡ,

chia sẻ kiến thức và kinh nghiệm trong thời gian qua.

Và để có được kết quả như ngày hôm nay, em rất biết ơn gia đình đã động viên,

khích lệ và tạo mọi điều kiện thuận lợi nhất trong suốt quá trình học tập cũng như quá

trình thực hiện đề tài này.

Mặc dù em đã cố gắng hoàn thành tốt đồ án tốt nghiệp. Tuy nhiên, do kinh

nghiệm và vốn kiến thức còn hạn chế nên không tránh khỏi những thiếu sót. Em rất

mong nhận được sự góp ý, nhận xét của các anh chị, thầy cô và các bạn.

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

Sinh viên

Trần Thị Hồng Ánh

LỜI CAM ĐOAN

Tôi xin cam đoan:

1. Những nội dung trong báo cáo 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 PGS. TSKH. Trần Quốc Chiến.

2. Mọi tham khảo dùng trong báo cáo này đều được trích dẫn rõ ràng 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.

Sinh viên,

Trần Thị Hồng Ánh.

Mục lục i

MỤC LỤC

MỞ ĐẦU.................................................................................................................................... 1

1.1. BỐI CẢNH CỦA ĐỀ TÀI........................................................................................ 1

1.1.1. Tên đề tài ........................................................................................................ 1

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

1.2. MỤC ĐÍCH, ĐỐI TƢỢNG VÀ PHẠM VI NGHIÊN CỨU.................................... 2

1.2.1. Mục đích nghiên cứu ...................................................................................... 2

1.2.2. Đối tƣợng nghiên cứu..................................................................................... 3

1.2.3. Phạm vi nghiên cứu ........................................................................................ 3

1.3. PHƢƠNG PHÁP NGHIÊN CỨU ............................................................................ 4

1.4. MỤC TIÊU CẦN ĐẠT ĐƢỢC................................................................................ 4

1.5. Ý NGHĨA CỦA ĐỀ TÀI.......................................................................................... 4

CHƢƠNG 1. CƠ SỞ LÝ THUYẾT .................................................................................. 5

1.1. HTML........................................................................................................................... 5

1.1.1. Giới thiệu về HTML .......................................................................................... 5

1.1.1.1. Khái niệm................................................................................................. 5

1.1.1.2. Cấu trúc của 1 tài liệu HTML.................................................................. 5

1.1.2. Giới thiệu về HTML5 ........................................................................................ 5

1.1.2.1. Sự ra đời và phát triển.............................................................................. 5

1.1.2.2. Ƣu điểm của HTML5 .............................................................................. 6

1.1.2.3. Cú pháp của trang HTML5...................................................................... 6

1.1.2.4. Các thẻ mới trong HTML5 ...................................................................... 8

1.1.2.5. Các tính năng mới trong HTML5 .......................................................... 10

1.2. CSS............................................................................................................................. 11

1.2.1. Giới thiệu về CSS............................................................................................. 11

1.2.1.1. Khái niệm CSS ...................................................................................... 11

1.2.1.2. Cú pháp CSS.......................................................................................... 11

1.2.1.3. Cách khai báo CSS ................................................................................ 12

1.2.2. Giới thiệu về CSS3........................................................................................... 12

1.2.3. Hƣớng đối tƣợng trong CSS (OOCSS)............................................................ 13

1.3. JAVASCRIPT ............................................................................................................ 13

1.3.1. Khái niệm......................................................................................................... 13

1.3.2. Cú pháp ............................................................................................................ 14

1.3.2.1. Khoảng trắng ......................................................................................... 14

1.3.2.2. Chú thích................................................................................................ 14

1.3.2.3. Biến........................................................................................................ 14

Mục lục ii

1.3.2.4. Đối tƣợng............................................................................................... 15

1.3.2.5. Cấu trúc dữ liệu...................................................................................... 15

1.3.3. Cách nhúng JavaScript vào trang HTML......................................................... 15

1.4. NODEJS ..................................................................................................................... 16

1.4.1. NodeJs là gì? .................................................................................................... 16

1.4.2. Khác nhau giữa Blocking và Non-Blocking .................................................... 17

1.4.2.1. Blocking................................................................................................. 17

1.4.2.2. Non-Blocking ........................................................................................ 18

1.4.2.3. Lợi ích event-driven so với thread-driven ............................................. 18

1.4.3. Node Package Manager (NPM) ....................................................................... 20

1.4.3.1. Giới thiệu về NPM................................................................................. 20

1.4.3.2. Định dạng gói cài NPM ......................................................................... 21

1.4.3.3. Sử dụng NPM ........................................................................................ 22

1.4.3.4. Gói toàn cục và gói cục bộ trong khi NPM cài đặt................................ 22

1.4.4. Express Framework.......................................................................................... 23

1.4.5. Jade templates .................................................................................................. 24

1.4.6. Node-mysql...................................................................................................... 27

1.5. RESPONSIVE WEB DESIGN .................................................................................. 27

1.5.1. Khái niệm......................................................................................................... 27

1.5.2. Các kỹ thuật Responsive Web Design ............................................................. 28

1.5.2.1. Fluid Grid............................................................................................... 28

1.5.2.2. Fluid image ............................................................................................ 29

1.5.2.3. Media Queries........................................................................................ 29

1.5.3. Ƣu thế của Responsive Web Deisgn................................................................ 29

1.5.4. Phạm vi ứng dụng ............................................................................................ 29

1.6. JQUERYMOBILE ..................................................................................................... 30

1.6.1. Giới thiệu về jQuerymobile.............................................................................. 30

1.6.2. Các tính năng cơ bản của jQuerymobile .......................................................... 30

1.6.3. jQuerymobile hỗ trợ các nền tảng di động....................................................... 30

1.7. MYSQL SERVER...................................................................................................... 31

1.7.1. MySQL là gì? ................................................................................................... 31

1.7.2. Tại sao lại sử dụng MySQL?............................................................................ 31

1.8. GOOGLE MAPS API................................................................................................ 32

1.9. TÌM HIỂU VỀ JQUERY ........................................................................................... 33

1.9.1. jQuery là gì?..................................................................................................... 33

1.9.2. Cách áp dụng jQuery vào trang web của mình ................................................ 33

1.10. TÌM HIỂU VỀ SMARTPHONE.............................................................................. 34

1.10.1. Smartphone là gì?........................................................................................... 34

1.10.2. Ƣu điểm của Smartphone............................................................................... 35

Mục lục iii

CHƢƠNG 2. PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................................... 36

2.1. KHẢO SÁT THỰC TRẠNG..................................................................................... 36

2.1.1. Thực trạng ........................................................................................................ 36

2.1.2. Nhìn nhận về các sản phẩm web và app du lịch trên thị trƣờng ...................... 36

2.1.2.1. Website du lịch ...................................................................................... 36

2.1.2.2. App du lịch ............................................................................................ 36

2.1.3. Giải pháp .......................................................................................................... 36

2.2. PHÂN TÍCH BÀI TOÁN........................................................................................... 37

2.3. XÁC ĐỊNH YÊU CẦU.............................................................................................. 38

2.3.1. Yêu cầu chức năng ........................................................................................... 38

2.3.2. Yêu cầu phi chức năng..................................................................................... 38

2.4. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG................................................................ 38

2.4.1. Các chức năng chính của Web app .................................................................. 38

2.4.2. Sơ đồ phân rã chức năng .................................................................................. 41

2.4.3. Biểu đồ luồng dữ liệu 3 mức............................................................................ 42

2.4.3.1. Sơ dồ dữ liệu mức ngữ cảnh .................................................................. 42

2.4.3.2. Sơ đồ dữ liệu mức đỉnh.......................................................................... 43

2.4.3.3. Sơ đồ dữ liệu mức dƣới đỉnh ................................................................. 44

2.4.4. Sơ đồ phân luồng dữ liệu ................................................................................. 47

2.5. THIẾT KẾ CƠ SỞ DỮ LIỆU .................................................................................... 47

2.5.1. Xác định các thực thể ....................................................................................... 47

2.5.1.1. tb_user.................................................................................................... 47

2.5.1.2. tb_user_tour........................................................................................... 48

2.5.1.3. tb_introduce ........................................................................................... 48

2.5.1.4. tb_content .............................................................................................. 48

2.5.1.5. tb_detail ................................................................................................. 48

2.5.1.6. tb_tour.................................................................................................... 49

2.5.1.7. tb_tour_detail......................................................................................... 49

2.5.1.8. tb_keyword ............................................................................................ 49

2.5.2. Sơ đồ quan hệ giữa các thực thể....................................................................... 50

CHƢƠNG 3. TÌM HIỂU THUẬT TOÁN ...................................................................... 51

3.1. THUẬT TOÁN DIJKSTRA TÌM ĐƢỜNG ĐI NGẮN NHẤT................................. 51

3.1.1. Khái niệm......................................................................................................... 51

3.1.2. Bài toán tìm đƣờng đi ngắn nhất...................................................................... 51

3.1.3. Các bƣớc của thuật toán Dijkstra ..................................................................... 51

3.1.4. Sơ đồ thuật toán Dijkstra.................................................................................. 52

3.2. THUẬT TOÁN MÃ HÓA MD5................................................................................ 52

3.2.1. Khái niệm......................................................................................................... 52

3.2.2. Ứng dụng của thuật toán .................................................................................. 53

Mục lục iv

3.2.3. Mô tả thuật toán ............................................................................................... 53

3.3. THUẬT TOÁN XỬ LÝ CHUỖI ............................................................................... 54

3.3.1. Cắt chuỗi .......................................................................................................... 54

3.3.2. Đọc chuỗi ......................................................................................................... 55

CHƢƠNG 4. TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ ............................................. 57

4.1. TRIỂN KHAI XÂY DỰNG....................................................................................... 57

4.1.1. Yêu cầu hệ thống.............................................................................................. 57

4.1.2. Các yêu cầu về cài đặt...................................................................................... 57

4.1.2.1. Node.js................................................................................................... 57

4.1.2.2. Module dependencies ............................................................................ 57

4.1.2.3. Node-mysql............................................................................................ 58

4.1.3. Xây dựng server ............................................................................................... 59

4.1.3.1. Tìm hiểu mô hình MVC ........................................................................ 59

4.1.3.2. Xây dựng server bằng module express.................................................. 60

4.1.4. Xây dựng các chức năng phía client ................................................................ 60

4.1.4.1. Thiết kế trang chủ và menu ................................................................... 60

4.1.4.2. Giới thiệu ............................................................................................... 63

4.1.4.3. Địa điểm................................................................................................. 66

4.1.4.4. Tour........................................................................................................ 69

4.1.4.5. Tìm kiếm................................................................................................ 73

4.1.4.6. Tài khoản ............................................................................................... 75

4.2. ĐÁNH GIÁ ................................................................................................................ 81

KẾT LUẬN.............................................................................................................................. 82

1.1. KẾT QUẢ ĐẠT ĐƢỢC ......................................................................................... 82

1.1.1. Kiến thức lý thuyết ....................................................................................... 82

1.1.2. Những kinh nghiệm thực tiễn....................................................................... 82

1.2. HẠN CHẾ............................................................................................................... 82

1.3. HƢỚNG PHÁT TRIỂN.......................................................................................... 82

Mục lục v

DANH MỤC HÌNH ẢNH

Hình 1.1. Bố cục cơ bản của trang HTML5 ............................................................................... 7

Hình 1.2. Một số Smartphone................................................................................................... 34

Hình 2.1. Bài toán du lịch......................................................................................................... 37

Hình 2.2. Các chức năng chính................................................................................................. 40

Hình 2.3. Sơ đồ phân rã chức năng........................................................................................... 41

Hình 2.4. Sơ đồ ngữ cảnh ......................................................................................................... 42

Hình 2.5. Sơ đồ dữ liệu mức đỉnh............................................................................................. 43

Hình 2.6. Sơ đồ dữ liệu mức dƣới đỉnh-1 ................................................................................. 44

Hình 2.7. Sơ đồ dữ liệu mức dƣới đỉnh-2 ................................................................................. 45

Hình 2.8. Sơ đồ dữ liệu mức dƣới đỉnh-3 ................................................................................. 45

Hình 2.9. Sơ đồ dữ liệu mức dƣới đỉnh-4 ................................................................................. 46

Hình 2.10. Sơ đồ dữ liệu mức dƣới đỉnh-5 ............................................................................... 46

Hình 2.11. Sơ đồ phân luồng dữ liệu ........................................................................................ 47

Hình 2.12. Sơ đồ quan hệ giữa các thực thể ............................................................................. 50

Hình 3.1. Sơ đồ thuật toán Dijkstra .......................................................................................... 52

Hình 3.2. Chu trình mã hóa bằng thuật toán MD5 ................................................................... 54

Hình 4.1. Thông báo thành công khi chạy Node.js server........................................................ 58

Hình 4.2. Mô hình MVC........................................................................................................... 59

Hình 4.3. Giao diện trang chủ................................................................................................... 61

Hình 4.4. Giao diện menu......................................................................................................... 62

Hình 4.5. Giao diện trang giới thiệu ......................................................................................... 63

Hình 4.6. Giao diện trang nội dung của phần giới thiệu........................................................... 64

Hình 4.7. Giao diện trang nội dung chi tiết của phần giới thiệu............................................... 65

Hình 4.8. Giao diện trang địa điểm........................................................................................... 67

Hình 4.9. Giao diện trang tìm đƣờng........................................................................................ 68

Hình 4.10. Giao diện trang tour................................................................................................ 69

Hình 4.11. Giao diện thể hiện chức năng lƣu tour.................................................................... 70

Hình 4.12. Giao diện trang tour yêu thích ................................................................................ 71

Hình 4.13. Giao diện thể hiện chức năng xóa tour ................................................................... 72

Hình 4.14. Giao diện trang tìm kiếm ........................................................................................ 74

Hình 4.15. Quá trình đăng ký ................................................................................................... 76

Hình 4.16. Giao diện trang đăng ký.......................................................................................... 77

Hình 4.17. Quá trình đăng nhập................................................................................................ 79

Hình 4.18. Giao diện trang đăng nhập ...................................................................................... 80

Mục lục vi

DANH MỤC BẢNG BIỂU

Bảng 1.1. Cấu trúc trang HTML................................................................................................. 5

Bảng 1.2. Cú pháp của trang HTML5 ........................................................................................ 7

Bảng 1.3. Các thẻ mới trong HTML5....................................................................................... 10

Bảng 1.4. Cú pháp cơ bản của CSS .......................................................................................... 11

Bảng 2.1. Mô tả bảng tb_user................................................................................................... 47

Bảng 2.2. Mô tả bảng tb_user_tour........................................................................................... 48

Bảng 2.3. Mô tả bảng tb_introduce........................................................................................... 48

Bảng 2.4. Mô tả bảng tb_content.............................................................................................. 48

Bảng 2.5. Mô tả bảng tb_detail................................................................................................. 49

Bảng 2.6. Mô tả bảng tb_tour ................................................................................................... 49

Bảng 2.7. Mô tả bảng tb_tour ................................................................................................... 49

Bảng 2.8. Mô tả bảng tb_keyword............................................................................................ 49

Bảng 4.1. So sánh Danang Travel với các sản phẩm khác ....................................................... 81