Nghiên cứu ứng dụng công nghệ Ajax và Google maps API để thiết kế website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở Việt Nam

Nghiên cứu ứng dụng công nghệ Ajax và Google maps API để thiết kế website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở Việt Nam Nghiên cứu ứng dụng công nghệ Ajax và Google maps API để thiết kế website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở Việt Nam luận văn tốt nghiệp thạc sĩ

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

-

NGUYỄN DUY HUY

LUẬN VĂN THẠC SĨ KHOA HỌC CÔNG NGHỆ THÔNG TIN

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

-

NGUYỄN DUY HUY

NGHIÊN CỨU ỨNG DỤNG CÔNG NGHỆ AJAX VÀ GOOGLE MAPS API ĐỂ THIẾT KẾ WEBSITE QUẢN LÝ BẢN ĐỒ TRỰC TUYẾN CÁC MỎ KHAI THÁC KHOÁNG SẢN Ở VIỆT NAM

Chuyên ngành: Công nghệ thông tin

LUẬN VĂN THẠC SĨ KHOA HỌC CÔNG NGHỆ THÔNG TIN

NGƯỜI HƯỚNG DẪN KHOA HỌC:

TS Cao Tuấn Dũng

Hà Nội – 2011

1

Tôi là Nguyễn Duy Huy, học viên lớp Cao học Công nghệ Thông tin K2009, Trường Đại học Bách Khoa Hà Nội xin cam kết: Luận văn tốt nghiệp là công trình nghiên cứu của bản thân tôi dưới sự hướng dẫn của TS Cao Tuấn Dũng – Bộ môn Công nghệ Phần mềm - Viện Công nghệ Thông tin và Truyền thông – Trường Đại học Bách Khoa Hà Nội

Các kết quả nêu trong luận văn tốt nghiệp là trung thực, không sao chép toàn văn

của bất kỳ công trình nào khác

Hà N ội ngày 05 tháng 11 năm 2011

Tác gi ả luận văn

Nguyễn Duy Huy

2

M ỤC LỤC

LỜI CAM ĐOAN 1

MỤC LỤC 2

DANH MỤC THUẬT NGỮ VÀ CHỮ VIẾT TẮT 5

DANH MỤC BẢNG BIỂU 6

DANH MỤC HÌNH VẼ 7

LỜI CẢM ƠN 9

MỞ ĐẦU 10

1 Tính cấp thiết của đề tài 10

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

3 Nhiệm vụ nghiên cứu 13

4 Phạm vi nghiên cứu 13

5 Bố cục của luận văn 13

6 Phương pháp nghiên cứu 14

Chương 1: TỔNG QUAN VỀ AJAX 15

1.1 Khái niệm về AJAX 15

1.2 Ưu nhược điểm của AJAX 17

1.2.1 Ưu điểm 17

1.2.2 Nhược điểm 17

1.3 Giới thiệu một số công nghệ chính trong AJAX 17

1.3.1 HTML 18

1.3.2 CSS 18

1.3.3 DOM 20

1.3.4 XML 21

1.3.5 XML httpRequest 22

1.3.6 XML và JavaScript 28

1.3.7 Gửi các request và xử lý các response 29

1.3.8 Xử lý respone của Server 30

1.4 Các bước xây dựng một ứng dụng AJAX 31

Tóm tắt chương 1 32

Chương 2: TỔNG QUAN VỀ GOOGLE MAPS 33

2.1 Giới thiệu chung về Google Maps 33

2.2 Tạo bản đồ Google Maps 34

2.2.1 Bắt đầu với một bản đồ đơn giản 34

2.2.2 Thêm các thành phần chuyển hướng 36

3

2.2.3 Thiết lập bản đồ khởi tạo 37

2.2.4 Thêm điểm và cửa sổ hiển thị thông tin trên bản đồ 37

2.3 Các hàm API của Google Maps 39

2.4 Các đối tượng chính 40

2.4.1 Gmap2 40

2.4.2 GlatLng 41

2.4.3 GlatLngBounds 42

2.5 Các đối tượng điều khiển bản đồ 42

2.5.1 Panning 42

2.5.2 Zooming 43

2.5.3 Thay đổi loại bản đồ 43

2.5.4 GoverviewMap 44

2.6 Thêm dữ liệu người dùng 44

2.6.1 Gmarker 44

2.6.2 GIcon 45

2.6.3 Cửa sổ thông tin 46

2.6.4 Gpolyline 47

2.7 Các sự kiện 47

2.7.1 Gevents 47

2.7.2 GbrowserIsCompatible 48

2.7.3 Các sự kiện Gmap 48

2.7.4 Các sự kiện Gmarker 49

2.8 AJAX và Google Maps 49

2.8.1 DHTML và AJAX 49

2.8.2 GXmlHttp 50

Tóm tắt chương 2 51

Chương 3: THIẾT KẾ WEBSITE QUẢN LÝ BẢN ĐỒ TRỰC TUYẾN CÁC MỎ KHAI THÁC KHOÁNG SẢN Ở VIỆT NAM 52

3.1 Giới thiệu chung 52

3.2 Phân tích và thiết kế hệ thống về chức năng 53

3.2.1 Xây dựng biểu đồ phân cấp chức năng 53

3.2.1.1 Phân tích yêu cầu của bài toán 53

3.2.1.2 Biểu đồ phân cấp chức năng 55

3.2.2 Sơ đồ hoạt động của hệ thống 57

3.2.3 Sơ đồ giải thuật của hệ thống 57

4

3.2.4 Đưa bản đồ nền Google Maps vào website 59

3.2.4.1 Lý do chọn bản đồ nền Google Maps 59

3.2.4.2 Các bước đưa bản đồ nền vào website 59

3.2.5 Mô tả đối tượng mỏ 61

3.2.5.1 Xác định các thông số của đối tượng mỏ 61

3.2.5.2 Xây dựng đối tượng mỏ 63

3.3 Phân tích và thiết kế hệ thống về dữ liệu 66

3.3.1 Thiết kế các thực thể 66

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

3.3.2.1 Lựa chọn hệ QTCSDL 68

3.3.2.2 Thiết kế CSDL MySQL 69

3.3.2.3 Thiết kế cơ sở dữ liệu XML 71

3.3.3 Kết nối với CSDL 73

3.4 Thiết kế website 74

3.4.1 Lựa chọn mô hình thiết kế 74

3.4.2 Thiết kế giao diện 1

3.4.3 Xây dựng website 81

3.4.4 Cài đặt và chạy thử nghiệm 89

Tóm chương 3 90

KẾT LUẬN 91

1 Nhiệm vụ đã hoàn thành 91

2 Các đóng góp khoa học 91

3 Hướng phát triển luận văn 92

TÀI LIỆU THAM KHẢO 93

5

TT Ch ữ viết tắt C ụm từ viết tắt

1 AJAX Asynchronous JavaScript and XML

2 XML eXtensible Markup Language

3 HTML HyperText Markup Language

4 XHTML Extensible HyperText Markup Language

5 CSS Cascading Style Sheets

6 W3C World Wide Web Consortium

8 XSLT XSL Transformations

9 ECMA European Computer Manufacturers Association

10 HTTP HyperText Transfer Protocol

11 SGML Standard Generalized Markup Language

12 DHTML Dynamic HyperText Markup Language

13 IE Internet Explorer

15 URL Uniform Resource Locator

16 JSP JavaServer Pages/Java Scripting Preprocessor

17 PHP Hypertext Preprocessor

18 API Application Programming Interface

19 Zoom Chức năng Phóng to/Thu nhỏ bản đồ

6

Bảng 1.1: Các phương thức của đối tượng XMLHttpRequest 24

Bảng 1.2: Các thuộc tính của đối tượng XMLHttpRequest 24

Bảng 1.3: Các mã trạng thái Response 26

Bảng 3.1: Bảng mô tả thực thể tb_mininglist 68

Bảng 3.2: Bảng mô tả thực thể tb_news 69

Bảng 3.3: Bảng mô tả thực thể tb_chart 69

Bảng 3.4: Bảng mô tả thực thể tb_image 70

Bảng 3.5: Bảng mô tả thực thể tb_members 70

7

Hình 1.1: Ứng dụng web truyền thống/AJAX 16

Hình 1.2: Mô hình cổ điển 17

Hình 1.3: Mô hình AJAX 17

Hình 1.4: Mô hình tương tác chuẩn trong một ứng dụng AJAX 27

Hình 2.1: Hình ảnh về bản đồ Google Maps 34

Hình 2.2: Ứng dụng bản đồ Google Maps đơn giản nhất 37

Hình 2.3: Thêm các điều khiển vào bản đồ 37

Hình 2.4: Thay đổi loại bản đồ hiển thị 39

Hình 2.5: Thêm dữ liệu người dùng vào bản đồ 39

Hình 2.6: Các đối tượng cơ bản của Google Maps 41

Hình 2.7: Đối tượng bản đồ - Gmap2 42

Hình 2.8: Đối tượng Panning 44

Hình 2.9: Các điều khiển Phóng to/Thu nhỏ bản đồ 45

Hình 2.10: Các điều khiển thay đổi loại bản đồ 45

Hình 2.11: Gmarker 46

Hình 2.12: GIcon mặc định với cửa sổ hiển thị thông tin 47

Hình 2.13: Tạo các icon bất kỳ với GIcon 48

Hình 3.1: Biểu đồ phân cấp chức năng 58

Hình 3.2: Sơ đồ hoạt động của hệ thống 59

Hình 3.3: Sơ đồ giải thuật của hệ thống 60

Hình 3.4: Giao diện bản đồ Google Maps trên website 64

Hình 3.5: Minh họa phương thức displaymap() 68

Hình 3.6: Bảng tb_mininglist 72

Hình 3.7: Bảng tb_news 72

Hình 3.8: Bảng tb_bieudo 72

Hình 3.9: Bảng tb_hinhanh 72

Hình 3.10: Bảng tb_members 73

Hình 3.11: Luồng xử lý của mô hình 77

Hình 3.12: So sánh mô hình MVC với mô hình 3 lớp 78

Hình 3.13: Mô hình MVC 79

Hình 3.14: Các ký hiệu mỏ trên bản đồ 84

Hình 3.15: Giao diện trang chủ của website 85

Hình 3.16: Chức năng Tìm kiếm mỏ 85

Hình 3.17: Kết quả Tìm kiếm mỏ 86

Hình 3.18: Giao diện trang Tin tức 86

8

Hình 3.19: Giao diện trang Xem biểu đồ về lượng than tiêu thụ 87

Hình 3.20: Giao diện trang Hình ảnh 88

Hình 3.21: Giao diện trang Liên hệ 88

Hình 3.22: Giao diện trang Liên hệ 89

Hình 3.23: Giao diên trang đăng nhập Quản trị hệ thống 89

Hình 3.24: Giao diện trang Quản trị 90

Hình 3.25: Giao diện trang Quản trị tài khoản 91

Hình 3.26: Giao diện trang Quản trị mỏ 91

Hình 3.22: Giao diện trang Quản trị biểu đồ 91

9

Trước tiên, em xin bày tỏ lòng biết ơn sâu sắc tới thầy giáo TS Cao Tuấn Dũng,

Vi ện Công nghệ Thông tin và Truyền thông, Trường Đại học Bách Khoa Hà Nội,

đã tận tình hướng dẫn em trong suốt quá trình thực hiện luận văn Nhờ sự quan tâm,

chỉ bảo và những ý kiến đóng góp quý báu của thầy đã giúp em hoàn thành luận văn này

Em xin chân thành cảm ơn tập thể các thầy cô giáo trường Đại học Bách Khoa Hà

Nội nói chung và Viện Công nghệ Thông tin và Truyền thông nói riêng đã tận tình

giảng dạy và truyền đạt cho em những kiến thức, kinh nghiệm quý báu trong suốt

những năm học vừa qua

Tôi cũng xin cảm ơn các đồng nghiệp ở Trường Đại học Mỏ - Địa chất đã tạo điều

kiện về thời gian để tôi có thể học tập và hoàn thành luận văn

Cuối cùng, tôi xin chân thành cảm ơn gia đình, người thân và bạn bè đã hết lòng giúp đỡ về vật chất lẫn tinh thần trong suốt quá trình học tập và thực hiện luận văn Xin chân thành cảm ơn!

Hà N ội, ngày 05 tháng 11 năm 2011

Nguy ễn Duy Huy

Lớp Cao học Công nghệ Thông tin K2009

10

1 Tính c ấp thiết của đề tài

Bản đồ là một dạng thể hiện thông tin địa lý đã ra đời từ xa xưa Các bản đồ trước tiên được phác thảo để mô tả vị trí, cảnh quan, địa hình v.v…Bản đồ chủ yếu gồm

những điểm và đường Tuy nhiên bản đồ dạng này thích hợp cho quân đội và các cuộc thám hiểm hơn là được sử dụng như một công cụ khai thác tiềm năng của địa lý

Bản đồ vẫn tiếp tục được in trên giấy ngay cả khi máy tính đã ra đời một thời gian dài trước đó Bản đồ in trên giấy bộc lộ những hạn chế như: thời gian xây dựng, đo đạc, tạo lập rất lâu và tốn kém Lượng thông tin mang trên bản đồ giấy là khá hạn chế

vì nếu mang hết các thông tin lên bản đồ sẽ rắc rối và làm cho khó đọc Bên cạnh đó

bản đồ giấy không thể cập nhật theo thời gian được…

Vì vậy mà ý tưởng mô hình hóa không gian lưu trữ vào máy tính, tạo nên bản đồ máy tính đã được các chuyên gia thực hiện Đó là bản đồ đơn giản có thể mã hóa, lưu

trữ trong máy tính; sữa chữa khi cần thiết; có thể hiển thị trên màn hình và in ra giấy Tuy nhiên, các nhà nghiên cứu nhận thấy nhiều vấn đề địa lý cần phải thu thập một lượng lớn thông tin không phải là bản đồ Lúc này khái niệm Hệ thống thông tin địa lý (viết tắt là GIS - Geographic Information System) ra đời thay thế cho thuật ngữ bản đồ máy tính GIS được hình thành từ các ngành khoa học: Địa lý, Bản đồ, Tin học và Toán học Chỉ đến những năm 80 thì GIS mới có thể phát huy hết khả năng của mình

do sự phát triển mạnh mẽ của công nghệ phần cứng máy tính

Bắt đầu từ thập niên 80, GIS đã trở nên phổ biến trong các lĩnh vực như: thương

mại, khoa học và quản lý Chúng ta có thể gặp nhiều cách định nghĩa khác nhau về GIS:

- GIS là một tập hợp của các phần cứng, phần mềm máy tính cùng với các thông tin địa lý (mô tả không gian) Tập hợp này được thiết kế để có thể thu thập, lưu trữ,

cập nhật, thao tác, phân tích, thể hiện tất cả các hình thức thông tin mang tính không gian

- GIS là một hệ thống máy tính có khả năng lưu trữ và sử dụng dữ liệu mô tả các

vị trí (nơi) trên bề mặt trái đất

- Một hệ thống được gọi là GIS nếu nó có các công cụ hỗ trợ cho việc thao tác với

dữ liệu không gian - Cơ sở dữ liệu GIS là sự tổng hợp có cấu trúc các dữ liệu số hóa không gian và phi không gian về các đối tượng bản đồ, mối liên hệ giữa các đối tượng không gian và các tính chất của một vùng của đối tượng

- GIS là từ viết tắt của:

+ G: Geographic - dữ liệu không gian thể hiện vị trí, hình dạng (điểm, tuyến, vùng) + I : Information - thuộc tính, không thể hiện vị trí (như mô tả bằng văn bản, số, tên )

11

+ S: System - sự liên kết bên trong giữa các thành phần khác nhau (phần cứng, phần

mềm)

Tóm lại, GIS là một hệ thống phần mềm máy tính được sử dụng trong việc vẽ bản

đồ, phân tích các vật thể, hiện tượng tồn tại trên trái đất Công nghệ GIS tổng hợp các

chức năng chung về quản lý dữ liệu như hỏi đáp (query) và phân tích thống kê (statistical analysis) với sự thể hiện trực quan (visualization) và phân tích các vật thể

hiện tượng không gian (geographic analysis) trong bản đồ Sự khác biệt giữa GIS và các

hệ thống thông tin thông thường là tính ứng dụng của nó rất rộng trong việc giải thích hiện tượng, dự báo và quy hoạch chiến lược

Các ứng dụng phổ biến của GIS:

Các hệ thống thông tin địa lý đều cung cấp các công cụ cho phép tạo lập bản đồ,

tổng hợp các thông tin liên quan đến các thực thể trên bản đồ, thể hiện các sự kiện, thể

hiện các ý tưởng, giải quyết các bài toán phức tạp trong thực tế GIS có thể được sử

dụng trong nhiều lĩnh vực, nhiều đối tượng người dùng: cá nhân, gia đình, trường học,

hay các cơ quan, tổ chức nghiên cứu Việc tạo và phân tích bản đồ không phải là mới,

nhưng GIS đóng vai trò nâng cao chất lượng, độ chính xác và nhanh hơn so với cách làm

bằng tay truyền thống Và, trước khi có GIS, chỉ một số ít người có khả năng sử dụng thông tin địa lý trong việc ra quyết định và giải quyết vấn đề

Ngày nay, GIS là một công nghệ "đắt giá", có hàng trăm ngàn người trên thế giới đang làm việc với nó Các nhà chuyên môn của hầu hết các lĩnh vực đang dần dần nhận

thấy lợi ích trong phương pháp suy nghĩ và làm việc theo phương diện địa lý GIS không phải chỉ dùng để tạo ra những bản đồ tĩnh, mà nó còn cho phép tạo ra các bản

đồ đẹp nhiều màu sắc và hơn thế nữa là khả năng tạo bản đồ động Khả năng tạo lập

bản đồ động giúp người dùng có thể lựa chọn và loại bỏ bất cứ các thành phần nào trên

bản đồ nhằm phân tích một cách nhanh chóng các nhân tố khác biệt ảnh hưởng đến mô hình và ngoài ra giúp việc đưa ra các quyết định đối với những vấn đề phức tạp

Các gi ải pháp về GIS thường được chia ra làm hai nhóm chính:

• Giải quyết các bài toán phức tạp liên quan đến mạng giao thông:

Các bài toán như: tìm kiếm đường đi tối ưu, điều phối lộ trình giao thông… thường

được áp dụng trên các hệ thống máy tính lớn, có cấu hình mạnh

• Hiển thị và tìm kiếm các thông tin trên bản đồ:

Đây là dạng ứng dụng bản đồ điện tử, cung cấp các khả năng cho phép người sử

dụng xem bản đồ và tìm kiếm một số thông tin cần thiết, thường được áp dụng trên các máy tính thông thường và nhỏ

Với mỗi nhóm trên có rất nhiều ứng dụng GIS Từ những bài toán tìm đường như:

tìm đường trong thành phố, tìm đường đi của xe buýt cho đến các vấn đề quản lý rừng,

qu ản lý khai thác khoáng sản, dự báo thời tiết…

Nhu c ầu mở rộng, đưa GIS lên mạng:

12

GIS đã được ứng dụng từ vài thập niên trước đây, nhưng dường như GIS vẫn chưa đến được với mọi người Lý do là, trước nay các ứng dụng GIS hầu hết chạy trên máy tính đơn Với những máy tính này cần thiết phải cài đặt các module xử lý GIS (dưới dạng các file dll, hay các ActiveX…), điều này cản trở khả năng ứng dụng GIS

rộng rãi Ví dụ: Khi một người cần biết tuyến xe buýt để di chuyển thì ngoại trừ khi anh

ta trang bị một Pocket PC cài ứng dụng tìm đường xe buýt còn không anh phải trở về nhà hay đến cơ quan tìm đến đúng máy tính được cài ứng dụng này để tìm kiếm thông tin

Từ ví dụ này cho thấy với các ứng dụng GIS mang tính cộng đồng hoặc khi cần có

thể sử dụng bất kể nơi đâu, thì mô hình ứng dụng chạy trên máy đơn là không đáp ứng được Như chúng ta đã biết, Internet ra đời và đã thu ngắn khoảng cách giữa mọi người, và cho phép tìm kiếm thông tin mọi lúc, mọi nơi Mô hình ứng dụng GIS chạy trên nền Internet cho phép mọi người dùng bất kì công cụ nào (máy PC, máy laptop, mobile, Pocket PC…) có thể truy cập Internet tìm kiếm được những thông tin mình

cần

Để đưa bản đồ lên website người ta thường sử dụng WebGIS, AJAX…, trong đó AJAX là một tổ hợp công nghệ, là trung tâm của thế hệ web 2.0 và được rất nhiều chuyên gia sử dụng để thiết kế website, đặc biệt là các website liên quan đến bản đồ

Trên thế giới đã có nhiều ứng dụng GIS được đưa lên Internet như, phổ biến như: + Yahoo maps (http://maps.yahoo.com): là một bản đồ miễn phí của Yahoo hỗ trợ tìm kiếm thông tin về địa điểm, đường đi…

+ Bing maps (3http://www.bing.com/mapsU): Được phát triển từ Live Search Maps,

Windows Live Maps, Windows Live Local, và MSN Virtual Earth, là một bản đồ dịch

vụ web được cung cấp như là một phần của bộ phần mềm công cụ tìm kiếm Bing của Microsoft và được hỗ trợ bởi Bing Maps dành cho khối doanh nghiệp

+ Google Maps (http://maps.google.com): là một bản đồ miễn phí của Google hỗ

trợ tìm kiếm thông tin về địa điểm, đường đi…

Ở Việt Nam cũng đã có một số website về bản đồ trực tuyến, tiêu biểu là:

+ Việt bản đồ (http://www.vietbando.com/maps): hỗ trợ tìm kiếm thông tin về đường đi, địa điểm…

+ Địa điểm (http://www.diadiem.com): hỗ trợ tìm kiếm thông tin về đường đi, địa điểm…

+ Bản đồ số (http://bandoso.com): hỗ trợ tìm kiếm thông tin về địa điểm, đường

phố…

Những website này đều dễ sử dụng và cho phép người dùng truy cập một cách dễ dàng để xem mọi thông tin có trên bản đồ Tuy nhiên, đó hầu hết là những website với

những thông tin chung cho nhiều lĩnh vực như: tìm đường, tìm địa điểm như: nhà

hàng, khách s ạn, trường học, bệnh viện, sân vận động, công viên v.v…, không đi sâu

về một lĩnh vực nào cụ thể, và đương nhiên đi sâu về lĩnh vực khai thác khoáng sản là

13

chưa có Hiện ở Việt Nam chưa có website nào về quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản

Việc có một website về bản đồ thể hiện các mỏ khai thác khoáng sản ở Việt Nam

là rất cần thiết đối với công tác quản lý khai thác khoáng sản của TKV và một số đơn

vị quản lý gián tiếp khác Đây sẽ là tiền đề quan trọng cho việc xây dựng cơ sở dữ liệu

bản đồ trực tuyến cho ngành khai thác khoáng sản ở Việt Nam Vì vậy mà tác giả đã

chọn đề tài “Nghiên cứu ứng dụng công nghệ AJAX và Google Maps API để thiết kế website qu ản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở Việt Nam” làm đề

tài cho luận văn tốt nghiệp cao học của mình

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

◊ Lựa chọn bản đồ nền phù hợp cho website quản lý bản đồ trực tuyến các

mỏ khai thác khoáng sản ở Việt Nam;

◊ Lựa chọn công nghệ (kỹ thuật) thiết kế website phù hợp với quản lý bản đồ

trực tuyến;

◊ Thiết kế website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở

Việt Nam

3 Nhi ệm vụ nghiên cứu

◊ Nghiên cứu lý thuyết về AJAX;

◊ Nghiên cứu lý thuyết về Google Maps;

◊ Xây dựng website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở

Việt Nam;

◊ Cài đặt và thử nghiệm

4 Ph ạm vi nghiên cứu

Trên phạm vi cả nước hiện nay có rất nhiều mỏ khai thác khoáng sản khác nhau và

trực thuộc nhiều các cấp quản lý khác nhau như: Tập đoàn, Tổng Công ty, Công ty, các Sở v.v…Trong số đó có Tập đoàn Công nghiệp Than - Khoáng sản Việt Nam (TKV) Hiện TKV đang quản lý một lượng lớn các mỏ khai thác than vùng Quảng Ninh và một số mỏ khai thác quặng trên khắp cả nước Trong khuôn khổ của luận văn, tác giả chỉ đề cập đến việc quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản trực thuộc TKVchứ chưa đề cập đến các mỏ thuộc các cấp quản lý khác

5 B ố cục của luận văn

Bố cục của luận văn bao gồm 3 chương:

Chương 1: Tổng quan về AJAX

Trong chương này trình bày các khái niệm, các đối tượng, các phương thức, các thuộc tính, các thành phần của AJAX; các ưu nhược điểm khi thiết kế website bằng AJAX cũng như giới thiệu một số website thiết kế bằng AJAX nổi tiếng trên thế giới

14

AJAX không phải là một công nghệ mà là một tổ hợp công nghệ cho phép thực thi các ứng dụng web với tốc độ cao, đặc biệt là các website về bản đồ trực tuyến

Chương 2: Tổng quan về Google Maps

Trong chương này trình bày các khái niệm, các đối tượng, các phương thức, các thuộc tính…đặc biệt là các hàm API của Google Maps; các ưu nhược điểm của Google Maps Với sự hỗ trợ đa dạng các hàm API mà Google Maps đã trở thành dịch vụ cung

cấp bản đồ trực tuyến lớn nhất hiện nay cho mọi đối tượng người dùng

Chương 3: Ứng dụng AJAX và Google Maps API xây dựng website quản lý

b ản đồ trực tuyến các mỏ khai thác khoáng sản ở Việt Nam

Trong chương này trình bày bài toán quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở Việt Nam; phân tích các chức năng cần có của website; đưa bản đồ nền Google Maps vào website; thiết kế cơ sở dữ liệu, thiết kế giao diện, xây dựng các module bằng công nghệ AJAX cho website; cài đặt và thử nghiệm website

Cu ối cùng là những đánh giá, kết luận chung về các kết quả của luận văn, những

h ạn chế cũng như phương hướng phát triển cho luận văn trong tương lai

6 Phương pháp nghiên cứu

Để xây dựng được website theo ý muốn, trước hết phải tìm hiểu về các kỹ thuật đưa bản đồ lên website; phân tích các chức năng cần có của một hệ thống thông tin

bản đồ; lựa chọn công nghệ thiết kế website phù hợp cho quản lý bản đồ - công nghệ AJAX; lựa chọn bản đồ nền phù hợp với website cần thiết kế - Google Maps Nghiên

cứu lý thuyết về AJAX và Google Maps, đặc biệt là các hàm API mà Google Maps hỗ

trợ, trên cơ sở đó để quyết định xem tận dụng được hàm API nào, hàm nào cần phải

viết mới Bên cạnh đó cũng cần nghiên cứu lựa chọn mô hình thiết kế website phù

hợp Cuối cùng là tiến hành thiết kế website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở Việt Nam

Theo [9], AJAX là kỹ thuật kết hợp hai tính năng mạnh của JavaScript được các

nhà phát triển web đánh giá rất cao là:

 Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang;

 Phân tách và làm việc với XML

AJAX là sự phối hợp một loạt các công nghệ đang thu hút sự quan tâm của những người yêu thích lập trình web trong thời gian gần đây, đó là:

 Trình bày trang web dựa trên XHTML và CSS – các chuẩn W3C;

 Biểu diễn động và tương tác sử dụng DOM – chuẩn W3C;

 Trao đổi và xử lý dữ liệu dùng XML và XSLT – các chuẩn W3C;

 Thu hồi dữ liệu bất đối xứng dùng XMLHttpRequest – chuẩn W3C;

 Dùng JavaScript để liên kết mọi thứ lại với nhau JavaScript ở đây là ECMAScript - chuẩn của ECMA, không phải là JScript của Microsoft

 Mô hì nh hoạt động của AJAX:

Hình 1.1: Ứng dụng web truyền thống/AJAX

16

Rõ ràng điểm khác biệt lớn nhất giữa hai mô hình là thay vì phải tải cả trang web

thì v ới AJAX trình duyệt phía người dùng chỉ cần tải về phần của trang web mà người dùng mu ốn thay đổi Điều này giúp cho ứng dụng web phản hồi nhanh hơn, thông

minh hơn

Ngoài ra, điểm đặc biệt quan trọng trong công nghệ AJAX nằm ở chữ A (Asynchronous) – không đồng bộ, tức là người dùng cứ gửi yêu cầu của mình tới server và quay lại với công việc của mình mà không cần chờ trả lời Khi nào server xử

lý xong yêu cầu của phía người dùng, nó sẽ báo hiệu và người dùng có thể “thu nhận

lấy” để thể hiện những thay đổi cần thiết AJAX cho phép tạo ra một AJAX Engine

nằm giữa giao tiếp này Khi đó, các yêu cầu gửi và nhận do AJAX Engine thực hiện Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, web server có

thể gửi trả dữ liệu dạng XML và AJAX Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho trình duyệt hiển thị

Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại trang

Hình 1.3: Mô hình AJAX Hình 1.2: Mô hình cổ điển

17

Mặt khác, sự kết hợp của các công nghệ web như: CSS và XHTML làm cho việc trình bày giao diện trang web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp Đây là những lợi ích hết sức thiết thực mà AJAX đem lại Chúng ta sẽ xem xét cụ thể các thành phần cấu thành AJAX, nguyên lý hoạt động và việc sử dụng Javascript kết

nối chúng trong những phần tiếp theo

Hiện trên thế giới có rất nhiều website nổi tiếng sử dụng công nghệ AJAX như:

Google Maps, Gmail, Yahoo Mail, Windows Live Mail…Các website này đều chạy ổn định và có tốc độ tải trang khá nhanh Ở Việt Nam, hầu hết các website về bản đồ trực tuyến như diadiem.vn, vietmap.com hay vietbando.com đều sử dụng công nghệ này

1.2 Ưu nhược điểm của AJAX

1.2.1 Ưu điểm

 Giúp việc thiết kế web đa dạng hơn và tăng tính tương tác của website với người dùng;

 Sử dụng các công nghệ đã có sẵn nên dễ học và sử dụng;

 Nhờ tính phổ biến của nó nên đã khuyến khích việc phát triển các khuôn

mẫu, điều này sẽ giúp lập trình viên tránh khỏi các vết xe đổ trước đó;

 Được hỗ trợ trong các trình duyệt web phổ biến hiện nay;

 Hỗ trợ rất tốt cho các trang web về bản đồ trực tuyến

1.2.2 Nhược điểm

 Bạn không thể bookmark nó vào favourite trên trình duyệt hay gửi link đến cho bạn bè, vì tất cả quá trình nó thực hiện ngầm và không hiển thị trên

address;

 Không thể hiển thị nội dung trên các trang tìm kiếm vì các trang tìm kiếm

hiện nay vẫn chưa hỗ trợ tìm vì rất khó tìm và gần như không thể tìm được;

 Không thể sử dụng nút back vì back cũng là chính nó;

 Với một số trình duyệt, do nhu cầu bảo mật, sẽ tắt chức năng thực hiện Javascript nên AJAX không thể chạy, hay trong một vài host, không hỗ trợ vào sâu cấu hình server nên hay bị lỗi "Access denied"

Mặc dù vẫn còn những hạn chế nói trên thì AJAX vẫn đã và đang được các lập trình viên sử dụng rộng rãi và đang nghiên cứu để cải thiện nó Ví dụ như vừa update

thông tin trên web, vừa thay đổi trên thanh address để có thể sử dụng một số chức

năng liên quan tới địa chỉ tuyệt đối này

1.3 Gi ới thiệu một số công nghệ chính trong AJAX

AJAX là một tập hợp các công nghệ bổ sung lẫn nhau, trong đó, JavaScript có vai trò là chất keo kết dính các ứng dụng lại với nhau Giao diện người dùng được tạo và tái nạp bằng cách dùng JavaScript để điều khiển DOM, tạo và tổ chức biểu diễn dữ

18

liệu cho người dùng, đồng thời xử lý các tương tác trên chuột và bàn phím CSS cung

cấp một sự nhất quán trên cảm quan “look and feel” cho ứng dụng và khả năng thao

tác mạnh mẽ với DOM Đối tượng XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc một cách bất đồng bộ với server, đảm bảo việc gửi yêu

cầu người dùng và tái nạp dữ liệu trong khi người dùng vẫn làm việc

1.3.1 HTML

Theo [5,9], HTML (HyperText Markup Language) - là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web, nghĩa là các mẩu thông tin được trình bày trên WWW HTML được định nghĩa như là một ứng dụng đơn giản của SGML, vốn đượ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 giờ đây

đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì Tuy nhiên, HTML hiện không còn được phát triển tiếp, người ta đã thay thế nó

bằng XHTML

HTML nói chung tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào

mạng Internet Các file này có chứa thẻ đánh dấu, nghĩa là, các chỉ thị cho chương trình về cách hiển thị hay xử lý văn bản ở dạng văn bản thuần túy Các file này thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP, và sau đó thì phần HTML của chúng sẽ được hiển thị thông qua một trình duyệt web, một loại phần mềm

trực quan đảm nhiệm công việc đọc văn bản của trang cho người sử dụng, phần mềm đọc E-mail, hay một thiết bị không dây như một chiếc điện thoại di động

HTML động hay DHTML (Dynamic HTML) là một thể hiện của việc tạo ra

một trang web bằng cách kết hợp các thành phần: HTML, ngôn ngữ kịch bản máy

khách (như là Javascript), và ngôn ngữ định dạng trình diễn Cascading Style Sheets

(CSS) và Document Object Model (DOM)

XHTML (Extensible HyperText Markup Language) - là một ngôn ngữ đánh dấu

có cùng các khả năng như HTML, nhưng có cú pháp chặt chẽ hơn XHTML 1.0 được W3C đưa ra vào ngày 26 tháng 2 năm 2000 Về phương diện kỹ thuật, XHTML là một

họ các kiểu tài liệu hiện tại và tương lai cùng các mô đun nhằm tái tạo lại, mở rộng, thâu nạp HTML, tái cấu trúc lại dưới dạng XML Các dạng tài liệu thuộc họ XHTML

tất cả đều dựa trên XML, và được thiết kế để làm việc tuyệt đối với các trình đại diện người dùng hiểu XML XHTML là thế hệ kế tiếp HTML, và đã có một loại các đặc tả được phát triển cho XHTML

1.3.2 CSS

Theo [5,9], CSS là một phần không thể thiếu trong thiết kế web, nó được dùng rất nhiều trong các ứng dụng web truyền thống cũng như trong AJAX Một CSS đưa ra cách kiểm soát các loại định dạng trực quan, nó có thể được áp dụng cho các thành

phần riêng lẻ trên các trang Hơn nữa, cho các thành phần định dạng trực quan như màu sắc, lề, hình nền, tính trong suốt, kích cỡ, style sheet có thể xác định cách mà các

 CSS định dạng một trang web theo ba cách:

 Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet);

 Định nghĩa trong một trang web (Internal Style Sheet);

 Định nghĩa thành một file CSS riêng (External Style Sheet) Trang web của chúng ta sẽ tham chiếu đến file CSS này

Giả sử muốn tạo ra các dòng text trong level-1 heading trong tài liệu (đó là đoạn

nằm trong thẻ <H1>) có màu đỏ, ta khai báo thuộc tính CSS như sau:

h1 {color: red}

 Các ưu điểm của CSS:

 CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web Style trong phiên bản HTML 4.0 quy định cách thức thể hiện các thẻ Style thường được lưu trong các file nằm ngoài trang web Chúng giúp thay đổi cách thức định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS;

 CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web với chỉ duy nhất một lần thay đổi tại một vị trí;

 Có thể định nghĩa nhiều style vào một thẻ HTML CSS cho phép đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau Style có thể được quy định ở trong chỉ một thẻ HTML, được quy định trong một trang web hoặc ở trong một file CSS bên ngoài;

 Thứ tự áp dụng các định dạng: Như trên đã nói, có thể sử dụng nhiều cách khác nhau để làm CSS Điều gì sẽ xảy ra nếu áp dụng nhiều cách định dạng cho một thẻ HTML? Theo một cách chung nhất ta có thể nói các style sẽ được “xếp tầng” (cascade) Việc xếp tầng này tuân theo thứ tự ưu tiên giảm

dần như sau:

• Inline Style (style được quy định trong một thẻ HTML cụ thể);

20

• Internal Style (style được quy định trong phần <HEAD> của một trang HTML);

• External Style (style được quy định trong file CSS ngoài);

• Browser Default (thiết lập mặc định của trình duyệt)

1.3.4 DOM

 Khái ni ệm:

Theo [5,9], DOM giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ cho cơ chế của JavaScript Khi sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các nút Đây là một khả năng đặc biệt hữu ích để viết

một ứng dụng AJAX Trong các ứng dụng web truyền thống, trình duyệt phải tái nạp các trang HTML theo một luồng từ server

Trong một ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra

bởi DOM Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây Gốc của cây là thẻ <HTML> để biểu diễn tài liệu; thẻ <BODY> biểu diễn phần thân của tài

liệu, là gốc của phần hiển thị của tài liệu Trong phần thân của tài liệu, có các bảng, paragraph, list, và các loại thẻ khác với các thẻ ở mức thấp hơn nữa

 Tìm ki ếm một DOM Node:

Yêu cầu đầu tiên để làm việc trên DOM với JavaScript là đi tìm kiếm một phần tử

để thay đổi Trước hết cần bắt đầu tham chiếu qua nút gốc (root node), nút này thể

hiện qua biến toàn cục document Mỗi nút trong DOM là một nút con (hoặc nút con

cấp hai, ba…) của document, nhưng cứ đi dần vào cây DOM, sẽ thấy một tài liệu phức

tạp được biểu diễn bởi DOM, và việc tìm kiếm là rất khó khăn

 T ạo DOM Node:

Trong nhiều trường hợp cần tạo các nút mới và thêm nó vào tài liệu JavaScript cung cấp một số phương thức để làm điều đó Các phương thức chuẩn để tạo nút mới

là: document.createElement () và document.createTextNode ()

Phương thức createElement () có thể được dùng để tạo ra bất kỳ phần tử HTML

nào, tham số là kiểu của loại thẻ HTML

var childEl=document.createElement (”div”);

CreateTextNode () tạo một nút thể hiện qua một đoạn text, thường được tìm thấy trong các thẻ về heading, div, paragraph, và list item

var txtNode=document.createTextNode (”some text”);

Chuẩn DOM coi các text node tách rời khỏi biểu diễn HTML Chúng không có các style để áp đặt cho trực tiếp và vì thế chúng yêu cầu ít bộ nhớ hơn

Một nút khi được tạo ra phải được gắn vào tài liệu trước khi hiển thị trên trình duyệt,

phương thức appendChild () được dùng để thực hiện điều này

Cú pháp: el.appendChild (childEl);

21

Ba phương thức createElement (), createTextNode (), và appendChild () cho

phép thực hiện hầu hết các thao tác để thêm một nút vào tài liệu

 Thêm style vào tài li ệu:

DOM cũng cung cấp các phương thức để chỉnh sửa style của các phần tử và tạo định dạng lại cho cấu trúc đã được định nghĩa trong CSS Mỗi phần tử trong trang web

có thể có nhiều giao diện trực quan có thể được áp đặt qua DOM như: vị trí, chiều dài

và r ộng, màu sắc, canh lề và đường viền Các trình duyệt ngày nay đều cung cấp các

ràng buộc JavaScript cho phép thay đổi giao diện mức thấp và áp đặt các định dạng

một cách nhất quán và dễ dàng với các lớp CSS - thuộc tính className

Các phần tử DOM của các trình duyệt web đều hỗ trợ một thuộc tính gọi là

innerHTML, cho phép các nội dung kiểu string tùy ý được gán cho các phần tử theo thuộc tính này, như trong đoạn mã sau:

function addListItemUsingInnerHTML (el,text){

el.innerHTML+=”<div class=’programmed’>”+text+”</div>”; }

1.3.5 XML

 Các đặc điểm của XML:

 XML tương thích với SGML;

 Dễ dàng viết được những chương trình xử lý tài liệu XML;

 Tài liệu XML dễ đọc và có tính hợp lý cao;

 XML được xây dựng với sự giảm thiểu những thuộc tính tùy chọn;

 XML dễ dàng được sử dụng trên Internet;

 XML hỗ trợ nhiều ứng dụng;

 Không đặt nặng tính hình thức trong nội dung thẻ đánh dấu XML

 C ấu trúc một tài liệu XML:

Tài liệu XML chỉ chứa đựng dữ liệu và cách lưu trữ dữ liệu mà không hề đề cập

tới cách thức trình bày dữ liệu Một tài liệu XML sẽ chứa những đặc tả về cấu trúc dữ

liệu Mỗi cấu trúc gồm nhiều phần tử (element), mỗi thành phần được bắt đầu với một

thẻ bắt đầu (Start–tag) và kết thúc với một thẻ kết thúc (End–tag) Giữa Start–tag và End–tag là nội dung của phần tử này Nội dung có thể bao gồm dữ liệu văn bản hay có

thể là một phần tử khác Dưới đây là ví dụ về một file XML:

Theo [5,9], 2XMLHttpRequest là đối tượng cho request của server không đồng bộ

và người dùng vẫn có thể làm việc trong khi đợi tín hiệu trả lời từ server Giải pháp đầu tiên để giải quyết vấn đề này là dùng IFrame Cho đến gần đây, đã được đưa ra như là một giải pháp mạnh mẽ và hiệu quả

Mục đích chủ yếu của tối tượng XMLHttpRequest là cho phép JavaScript chỉnh

s ửa lại các yêu cầu HTTP và chuyển chúng tới server Những ứng dụng web truyền

thông thường hoạt động đồng bộ, nghĩa là tương ứng với một sự kiện như một submit

hoặc một siêu liên kết a href được click thì toàn bộ kết quả sẽ được trả ra một trang

mới gồm cả các thành phần cũ và mới Nhưng trên tất cả là mọi thành phần đều phải load lại một lần nữa

XMLHttpRequest giải quyết khâu này bằng cách hoạt động ngầm xử lý request tới server và trả về kết quả trong lúc đó người dùng vẫn có thể thấy được trang web đang đọc Khi có được kết quả , javascript có chức năng thay đổi thành phần người dùng đã tương tác để đưa ra một kết quả mới Các khâu hoạt động trên hoàn toàn không đồng

bộ với một sự kiện Không những đợi response trả về từ trang chủ người dùng còn có

thể tiếp tục gửi các request khác tới trang chủ Tất cả kết quả sẽ được JS thay đổi cục

bộ thành phần của trang web thông qua các hàm DOM bởi các kết quả được phân tích

bởi bộ hàm XML DOM Cụ thể như sau:

// Khởi tạo một đối tượng XMLHttpRequest

Var request = new XMLHttpRequest ();

// XMLHttpRequest là một đối tượng trong các trình duyệt như Mozilla, Opera, Chrome v.v…

Nhưng trong IE nó lại là một ActiveX Do vậy ta cần kiểm tra xem việc khởi tạo

có thành công không để chắc chắn việc tạo một XMLHttpRequest:

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest ();

}

 Các phương thức của đối tượng XMLHttpRequest:

Bảng 1.1 – Các phương thức của đối tượng XMLHttpRequest

Abort () Dừng yêu cầu hiện tại

getAllResponseHeaders () Trả về header dạng chuỗi

getresponseHeader (x) Trả về header x dạng chuỗi

Open (method , url , a) Thể hiện phương thức request , url đích a nhận true

hoặc false tương ứng với đồng bộ hay không đồng bộ Send (content) Gửi yêu cầu có thể kèm theo dữ liệu POST

setRequestHeader (x,y) Thiết lập hai tham số x = y gắn vào header để gửi đi

cùng với request

 Các thu ộc tính của đối tượng XMLHttpRequest:

Bảng 1.2: Các thuộc tính của đối tượng XMLHttpRequest

Onreadystatechange Dùng để đáp ứng một công việc nào đó khi thuộc

tính ReadyState thay đổi

readyState

Nhận 5 giá trị tương ứng với 5 trạng thái:

0 : Chưa được khởi tạo ( Uninitialized )

1 : Đang được nạp ( Loading )

24

2 : Đã nạp xong ( Loaded )

3 : Tương tác ( Interactive )

4 : Hoàn thành ( Complete ) ResponseText Dữ liệu trả về dạng string thuần

ResponseXML Dữ liệu trả về dạng XML

StatusText Thông điệp trả về dạng chuỗi thông báo kém thêm

onmouseover, và đặt tên tương tự cho các thuộc tính tương đương cho các đối tượng Khi lập trình cho các yêu cầu cho server, chúng ta gặp các thuộc tính tương tự onload

và onreadystatechange

xhr.onreadystatechange = Tên hàm;

Chúng ta vừa thực hiện gán một hàm sẽ liên tục được gọi khi thuộc tính

readystate biến đổi Hãy xem hàm này nên làm gì Đầu tiên, hàm cần kiểm tra trạng thái của request Nếu trạng thái có giá trị là 4, nghĩa là ứng dụng của bạn đã nhận được response đầy đủ từ server và đó là dấu hiệu tốt để bạn tiếp tục xử lý nó

Tiếp theo cần kiểm tra mã trạng thái của HTTP server response Tất cả các mã có

thể thàm khảo ở site của W3C Ở đây, chúng ta quan tâm đến response 200 (OK)

25

Bảng 1.3: Các mã trạng thái Response

301 - Moved Premanently Tài nguyên đã bị di chuyển

401 - Not Authorized Yêu cầu chưa được chứng thực

408 - Request Timeout Yêu cầu không hoàn thành do vượt quá thời

gian kết nối cho phép

500 - Server Error Máy chủ gặp sự cố

Chúng ta hãy xét một ví dụ để tìm hiểu các tương tác của AJAX Hình 1.4 cho

thấy mô hình tương tác chuẩn trong một ứng dụng AJAX

Không giống như các cách tiếp cận kiểu request/response thông thường trong các chuẩn Web client, một ứng dụng AJAX có những khác biệt, sau đây là mô tả quá trình tương tác:

1) Một event client-side gây ra một sự kiện - AJAX event Bất kỳ một tác động

nào cũng có thể gây ra AJAX event, từ một sự kiện onchange đơn giản cho đến một số

tác động của người dùng Ví dụ với đoạn mã sau:

<input type=“text” id=“email” name=“email” onblur =

26

“validateEmail ()”;>

2) Một thể hiện của XMLHttpRequest được tạo ra Dùng phương thức open(), tạo

lời gọi hàm - địa chỉ URL được thiết lập cùng với phương thức HTTP yêu cầu, thông thường là GET hay POST Request được tạo ra qua việc gọi phương thức send () Đoạn mã nguồn dưới đây thể hiện điều đó:

var xmlHttp;

function validateEmail () {

var email = document.getElementById (”email”);

var url = “validate?email=” + escape (email.value);

3) Một request được tạo và gửi đến server Có thể là một lời gọi tới một servlet,

một CGI script, hay một công nghệ phía server nào đó tương tự như ASP.NET, JSP, hay PHP v.v…

4) Server xử lý các yêu cầu, chẳng hạn như truy cập cơ sở dữ liệu hay một tác vụ

hệ thống nào đấy

Hình 1.4: Mô hình tương tác chuẩn trong một ứng dụng AJAX

27

5) Response được trả về cho trình duyệt Trường Content-Type được thiết lập ở

dạng text/xml; XMLHttpRequest chỉ có thể xử lý kết quả dạng text/html Trong các

thể hiện phức tạp hơn thì response khá rắc rối và bao gồm JavaScript, các thao tác trên đối tượng DOM, hoặc các công nghệ liên quan khác Chú ý là cũng cần thiết lập header vì thế trình duyệt sẽ không lưu kết quả một cách cục bộ Chúng ta sẽ làm như sau:

response.setHeader (”Cache-Control”, “no-cache”);

response.setHeader (”Pragma”, “no-cache”);

6) Trong ví dụ sau, cấu hình XMLHttpRequest để gọi hàm callback () khi kết quả

xử lý được trả về Hàm này kiểm tra thuộc tính readyState trên đối tượng

XMLHttpRequest và sau đó xem xét mã trạng thái trả về từ server Mọi thứ hoàn toàn bình thường, hàm callback () có thể làm nhiều việc trên phía client Một phương thức callback thường có dạng sau:

 Phương thức GET và POST:

Trên lý thuyết, sử dụng GET khi request không thay đổi giá trị, tức là nhiều request sẽ trả về cùng kết quả Trong thực tế, nếu phương thức tương ứng ở server thay đổi trạng thái theo một vài cách, thì điều này không còn đúng nữa Điều này có nghĩa,

nó là một chuẩn Có rất nhiều sự khác biệt với chuẩn trong điều kiện kích thước của

phần đệm (payload) - trong nhiều trường hợp, các trình duyệt và server sẽ giới hạn độ dài của địa chỉ URL sử dụng để gửi dữ liệu tới server Tóm lại, dùng GET để truy lục

d ữ liệu từ server; hay nói cách khác tránh được việc thay đổi trạng thái trên với lời gọi

GET

Phương thức POST được dùng khi muốn thay đổi trạng thái trên server Không

giống như GET, phải thiết lập phần Content-Type header trên đối tượng XMLHttpRequest như sau:

xmlHttp.setRequestHeader (“Content-Type”,“application/ x-www-form-urlencoded”);

POST không hạn chế kích thước của payload được gửi tới server, và POST request không cần bảo đảm tính không đổi Hầu hết các request được thiết lập ở GET request, tuy nhiên trạng thái POST cũng luôn sẵn sàng khi cần thiết

 G ửi các request đến Server:

Các bước cơ bản để gửi request dùng đối tượng XMLHttpRequest:

1) Dùng một tham chiếu tới một thể hiện của XMLHttpRequest, có thể bằng cách

tạo mới hay truy cập vào một biến có thể hiện của XMLHttpRequest;

2) Khai báo cho đối tượng XMLHttpRequest về hàm sẽ xử lý các trạng thái của XMLHttpRequest Ta hoàn thành việc này bằng cách thiết lập thuộc tính

onreadystatechange của đối tượng với một con trỏ về một hàm JavaScript;

3) Gán các thuộc tính của request: Phương thức open () của đối tượng XMLHttpRequest được gán về request trạng thái đợi Phương thức open () có ba tham

số: một biến string chỉ báo (thường dùng GET hay POST), một biến string biểu diễn địa chỉ URL của tài nguyên, một biến boolean chỉ báo request sẽ là bất đồng bộ;

4) Gửi request tới server: Phương thức send () sẽ truyền request để yêu cầu tài nguyên Phương thức send() chấp nhận một tham số, thông thường là một biến kiểu string hay một đối tượng DOM Tham số này được truyền tới địa chỉ URL đích như là

một phần của request Khi truyền tham số cho send(), phải đảm bảo rằng kiểu phương

thức được gán trong open() là POST Sử dụng null khi không có dữ liệu nào được gửi

với request

1.3.6 XML và JavaScript

Theo [5], trong môi trường trình duyệt web, các chức năng cơ bản của trình duyệt

gồm: CSS, DOM, và các đối tượng XMLHttpRequest, được coi là các phương tiện của JavaScript, cho phép các nhà phát triển điều khiển các trang ở các mức độ khác nhau Trong chồng công nghệ (tức là các công nghệ sử dụng liệt kê từ trên xuống dưới

của AJAX), JavaScript là chất kết dính các thành phần lại với nhau

Nếu XML là tài nguyên đưa tới người dùng thì javascript là công cụ để thể hiện

nó trực quan hơn Trong tất cả các tác vụ của AJAX, Javascript là một phần không thể thiếu, đặc biệt là các hàm xử lý XML DOM Javascript là một lĩnh vực tương đối rộng

lớn hiện nay và các nhà phát triển vẫn tiếp tục phát triển nó như là một ngôn ngữ máy khác, đa năng và hoàn hảo nhất Mặc dù hiện tại Javascript chưa thể là chuẩn của một ngôn ngữ nhưng người ta vẫn luôn cố gắng để đưa nó lên một tầm cao mới

Giả sử ta có một đoạn văn bản XML như sau:

<?xml version=1.0?>

<person>

<name>DMDuc</name>

<age>22</age>

<message>Thong tin nguoi dung</message>

Javascript sẽ xử lý đoạn văn bản trên để lấy phần tên của các người dùng như sau: xhrXML = Xhr.responseXML

// Thể hiện số người dùng alert

(xhrXML.getElementsByTagName (“personal”).length);

// Lấy tên từng người

var name = xhrXML.getElementsByTagName (“name”);

var person = xhrXML.getElementByTagName (“person”)

for (i=0;i<= person.length-1;i++)

1.3.7 G ửi các request và xử lý các respone

Trước hết chúng ta cùng tìm hiểu hoạt động của giao thức HTTP truyền thống, xem xét các bản tin – message của giao thức này Thay vì quan tâm đến các bit hay byte, chúng ta để ý đến các từ ngữ (thông báo) được xác định trong đặc tả HTTP và các quy tắc kết hợp chúng lại với nhau

Một HTTP message bắt đầu với một dòng request hay status, tiếp theo có thể là

nhiều loại headers và phần message body

Theo [5,9], HTTP là một giao thức kiểu client/server, trong đó client đưa ra các request, và server sẽ trả lời các request này Cấu trúc các HTTP message vì thế cũng thay đổi theo yếu tố này Có một định dạng cho HTTP request và cho các response

30

 HTTP request:

Mỗi request bắt đầu với một Request-Line Dòng này chỉ ra phương thức mà client yêu cầu, tài nguyên, và phiên bản của HTTP mà client có thể hỗ trợ Request-Line có thể có tiếp sau một hay nhiều header và một message body

Một HTTP request bắt đầu với một Request-Line và có thể bao gồm các header và message body Phần header có thể mô tả qua việc truyền dữ liệu, xác định các yêu cầu hay phần message body kèm theo

giống như Request-Line, chứa ba mục và được ngăn cách bởi các khoảng trống

Một HTTP response bắt đầu với một Status-Line và có thể chứa các header và một message body Header có thể mô tả quá trình truyền dữ liệu, xác định response, hoặc

phần body kèm theo Dòng đầu tiên là phiên bản cao nhất của HTTP mà server hỗ trợ HTTP/1.1 200 OK

Date: Sun, 08 Oct 2000 18 12 GMT

Server: Apache/1.3.6 (Unix)

Keep-Alive: timeout=5, max=120

Connection: Keep-Alive

Content-Type: text/html<html>…

1.3.8 X ử lý các respone của server

XMLHttpRequest cung cấp hai thuộc tính để truy cập vào response của server Thuộc tính đầu tiên là responseText - chỉ đơn giản là cung cấp response dưới dạng một

biến string Thuộc tính thứ hai là responseXML - cung cấp response dưới dạng đối tượng XML Truy cập response dưới dạng text đơn giản và rất thuận lợi cho các trường hợp sử dụng đơn giản, chẳng hạn như hiển thị response trong một alert hay response là một cấu trúc đơn giản thông báo thành công hay bị lỗi

Việc truy cập vào response như một đoạn text đơn giản không thật mềm dẻo và linh động Các đoạn text không có cấu trúc và rất khó phân tách một cách logic với JavaScript Việc dùng các response dạng text để tạo nội dung động cho các trang web

sẽ gặp nhiều khó khăn

31

Thuộc tính responseText trở nên hữu ích nếu ta dùng nó chung với thuộc tính innerHTML của các phần tử HTML Thuộc tính innerHTML không phải là một chuẩn, đầu tiên nó được đưa ra trong Internet Explorer và sau đó xuất hiện trong nhiều trình duyệt khác Nó đơn giản là một xâu kí tự biểu diễn nội dung giữa một thẻ mở và thẻ đóng Bằng cách dùng kết hợp responseText và innerHTML, server có thể đưa ra các đoạn mã HTML sẽ được hiển thị bởi các trình duyệt qua thuộc tính innerHTML Việc

sử dụng responseText và innerHTML làm đơn giản quá hóa việc chỉnh sửa nội dung cho trang web động

1.4 Các bước xây dựng một ứng dụng AJAX

Để xây dựng một ứng dụng bằng công nghệ AJAX thường bao gồm các bước cơ

bản sau đây:

 Khởi tạo đối tượng XMLHTTPRequest;

 Xây dựng Javascript ứng với các sự kiện, tương tác;

 Tạo vào gửi yêu cầu đến server;

 Thể hiện cho người dùng biết yêu cầu đang được xử lý trên server (Requesting to Server, Loading Data);

 Nhận response dạng XML;

 Xử lý phân tích thành phần XML của response bằng DOM;

 Thể hiện cho người dùng biết yêu cầu đã được nhận và xử lý tại client;

 Cập nhật thông tin mới lên trang web của client

32

Tóm t ắt chương 1

Chương 1 trình bày về tổng quan về AJAX, đây là một tổ hợp công nghệ với sự

kết hợp không đồng bộ hai tính năng mạnh của JavaScript và XML xoay quanh một đối tượng có tên là XMLHttpRequest AJAX có hai đặc điểm nổi bật là:

- Gửi yêu cầu đến máy chủ mà không cần nạp lại trang;

- Phân tách và làm việc với XML

Trong chương này chủ yếu trình bày về các công nghệ chính trong AJAX, qua đó

có thể dễ dàng nhận thấy AJAX là sự phối hợp một loạt các công nghệ phát triển web

phổ biến hiện nay, trong đó mỗi công nghệ đảm nhiệm một số nhiệm vụ nhất định nào

đó, cụ thể:

- Trình bày trang web dựa trên XHTML và CSS, các chuẩn của W3C, được Firefox, Safari, Opera, Netscape 8.0 hỗ trợ rất tốt;

- Biểu diễn động và tương tác sử dụng Document Object Model, chuẩn của W3C;

- Trao đổi và xử lý dữ liệu dùng XML và XSLT, chuẩn của W3C;

- Thu hồi dữ liệu bất đối xứng dùng XMLHttpRequest;

- Dùng JavaScript để liên kết mọi thứ lại với nhau JavaScript ở đây là ECMAScript, chuẩn của ECMA, không phải là JScript của Microsoft

33

CHƯƠNG 2: TỔNG QUAN VỀ GOOGLE MAPS

2.1 Gi ới thiệu chung về Google Maps

Theo [7,11], Google Maps (hình 2.1) là một dịch vụ bản đồ trực tuyến miễn phí

được cung cấp bởi công ty Google thông qua các trang web như: Google Maps,

Google Ride Finder và được nhúng vào các trang web thứ 3 thông qua các hàm dịch

vụ API Nó cung cấp các dịch vụ khác nhau cho người xem như: bản đồ đường phố,

ảnh chụp vệ tinh, tìm kiếm lộ trình đường đi, tìm kiếm địa điểm v.v…

Google Maps API cho phép chúng ta có thể nhúng Google Maps vào trang web

của mình Để sử dụng các hàm API này, trước hết chúng ta phải đăng ký một tài khoản trên Google Maps để nhận API key, việc phát triển các ứng dụng web của chúng ta sẽ

phụ thuộc vào key này Để sử dụng các hàm API, chúng ta phải chú ý đến 5 bước cơ

bản sau:

 Khai báo sử dụng Javascript của MAP API từ thẻ;

 Khai báo thành phần div với tên "map_canvas" để hiển thị bản đồ;

 Viết các hàm chức năng để tạo ra đối tượng bản đồ;

 Xác định toạ độ địa lý của đối tượng trên bản đồ;

Hình 2.1: Hình ảnh về bản đồ Google Maps

34

 Gán đối tượng trên bản đồ từ thẻ body bằng thuộc tính onLoad để đọc bản

đồ

Google Maps được phát hành phiên bản thử nghiệm vào ngày 7 tháng 02 năm

2005 với giao diện bản đồ cho phép kéo, rê Ngày 18 tháng 02 năm 2005, Jesse James Garrett của Adaptive Path đã xuất bản bài báo chuyên đề đưa ra tên cho phong cách

mới này về sự phát triển web, đó là: AJAX - Một cách tiếp cận mới cho các ứng dụng web Tuy nhiên, Google Maps không chỉ đơn giản là một ứng dụng bản đồ mang tính cách mạng, nó đã trở thành sản phẩm quảng cáo cho tất cả các ứng dụng web Tim O’Reilly (người sáng lập của O’Reilly Media, Inc) đã đưa ra một cụm từ khác, “web 2.0”, giúp tiếp tục xác định sự khác biệt giữa các ứng dụng web được sử dụng để hoạt động thế nào với phương pháp “Google Maps” mới

Ngày 29 tháng 6 năm 2005, Google phát hành phiên bản thứ nhất về hàm API Điều này cho phép chúng ta chuyển từ người dùng bản đồ đơn giản sang các nhà sản

xuất thực tế

Ngày 03 tháng 4 năm 2006, Google phát hành phiên bản thứ hai về hàm API Trong khi phiên bản mới này mang lại nhiều tính năng thú vị mới cho table (tăng cấp

độ zoom, thêm các điều khiển bản đồ và khả năng phủ hình ảnh riêng của bạn trên bản

đồ), nó cũng đã phá vỡ tính tương thích với các phiên bản trước

2.2 T ạo bản đồ Google Maps

2.2.1 B ắt đầu với một bản đồ đơn giản

Trước hết, chúng ta hãy xem các ứng dụng bản đồ Google Maps đơn giản nhất có

thể biểu diễn, theo [7]:

</script>

</body>

</html>

Gi ới thiệu một số thẻ và phương thức chính trong đoạn mã trên:

 Th ẻ <script>: Nhập thư viện Google Maps Đây là nơi bạn đặt mã khóa

 Th ẻ <div>: Là chỗ cho bản đồ của bạn Nó có thể được đặt tên theo bất cứ

điều gì bạn muốn Trong định dạng CSS, chúng ta xác định kích thước của

bản đồ theo điểm ảnh pixel

 new GMap2(): Tạo bản đồ Trong hàm khởi tạo của đối tượng GMap2,

chúng ta thông qua thẻ <div> với việc sử dụng DOM

 map.setCenter(): Tương tự như tên của nó, các trung tâm bản đồ trên điểm

vĩ độ/kinh độ cụ thể Nó cũng zoom theo mức xác định Google sử dụng

thước tỷ lệ 17 điểm, zoom mức 0 sẽ cho bạn thấy toàn bộ thế giới, mức

zoom 17 được zoom cho các mức đường phố

Hình 2.2: Ứng dụng bản đồ Google Maps đơn giản nhất

36

2.2.2 Thêm các thành ph ần chuyển hướng

Bây giờ chúng ta hãy thêm một số thành phần đơn giản vào bản đồ, điều này sẽ

cho phép chúng ta zoom và thay đổi kiểu bản đồ, được thể hiện như trên hình 2.3

37

Gi ới thiệu một số phương thức chính trong đoạn mã này, theo [7]:

 GlargeMapControl: Cho phép người sử dụng thay đổi mức độ zoom của

bản đồ

 GmapTypeControl: Cho phép người sử dụng chuyển đổi quan sát qua lại

giữa các kiểu: bản đồ (Map), vệ tinh (Satellite) và kết hợp (Hybrid)

2.2.3 Thi ết lập bản đồ khởi tạo

Theo [7], để cho phép người sử dụng thay đổi các loại bản đồ, bạn có thể thiết lập

kiểu ban đồ ban đầu (khởi tạo) bằng cách sử dụng phương thức: map.setMapType() –

dùng để thiết lập chế độ quan sát mặc định của bản đồ, có thể nhận các giá trị: G_NORMAL_MAP, G_SATELLITE_MAP hoặc G_HYBRID_MAP

Kết quả là bản đồ hiển thị trên website được khởi tạo đúng như người dùng yêu

cầu (hình 2.4)

2.2.4 Thêm điểm và cửa sổ hiển thị thông tin trên bản đồ

Trong ví dụ dưới đây, chúng ta sẽ tạo ra một điểm trên bản đồ và hiển thị cửa sổ thông tin (xem hình 2.5)

Hình 2.4: Thay đổi loại bản đồ hiển thị

//create marker, add to map overlay

var coorsFieldMarker = new GMarker(coorsFieldPoint); map.addOverlay(coorsFieldMarker);

Hình 2.5: Thêm dữ liệu người dùng vào bản đồ