Ứng dụng công nghệ webgis trong xây dựng website quản lý thông tin các điểm bưu điện của tỉnh thái nguyên

Sự kiện Một số đối tượng trong Maps API được thiết kế để đáp ứng với sự kiện người sử dụng chẳng hạn như các sự kiện chuột hoặc bàn phím.. Mục đích chính của việc sử dụng sơ đồ ca sử dụn

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối với các thầy cô của khoa Công nghệ thông tin - Đại học Công nghệ thông tin và truyền thông –ĐHTN đã tạo điều kiện cho em tham gia hoàn thiện đồ án Và em cũng xin chân

thành cảm ơn cô Ths Hồ Thị Tuyến đã nhiệt tình hướng dẫn em hoàn thành tốt

bài đồ án tốt nghiệp

Trong quá trình làm bài, cũng như là trong quá trình làm bài báo cáo, khó tránh khỏi sai sót, em rất mong nhận được sự góp ý của các Thầy, Cô trong hội đồng để em được học thêm được nhiều kinh nghiệm

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

Thái Nguyên, ngày 1 tháng 6 năm 2016

Sinh viên thực hiện

Trần Lan Phương

LỜI CAM ĐOAN

Em xin cam đoan: Toàn bộ nội dung đồ án tốt nghiệp“Ứng dụng công nghệ WebGis trong xây dựng WebSite quản lý thông tin các điểm bưu điện của tỉnh Thái Nguyên” Do em tự học tập, tìm hiểu từ quá trình học tập tại trường,

nghiên cứu trên Internet, sách báo, và các tài liệu có liên quan Không sao chép hay sử dụng bài làm của bất kỳ ai khác

Em xin chịu hoàn toàn trách nhiệm về lời cam đoan của mình trước Quý thầy Cô và nhà trường

Thái Nguyên, ngày 1 tháng 6 năm 2016

NGƯỜI CAM ĐOAN

Trần Lan Phương

2

LỜI NÓI ĐẦU 1

CHƯƠNG 1 TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT2

1.1 Tổng quan về HTML-CSS 2

1.1.1 Giới thiệu về HTML 2

1.1.2 Giới thiệu về CSS 2

1.2 Tổng quan về WebGis 4

1.2.1 Tổng quan về kiến trúc WebGis 4

1.2.2 Tổng quan về Google Map API6

1.3 Tổng quan về UML 17

1.4 Hệ quản trị CSDL MySQL 27

CHƯƠNG 2 KHẢO SÁT PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 332.1 Khảo sát hệ thống 33

2.1.1 Giới thiệu về hệ thống các điểm bưu điện 33

2.1.2 Hiện trạng việc quản lý các quản lý các điểm bưu điện trên địa bàn tỉnh Thái Nguyên 34

2.1.3 Bài toán mới đặt ra 34

2.1.4 Yêu cầu của hệ thống 35

2.2 Phân tích hệ thống 35

2.2.1 Sơ đồ USE CASE 35

2.2.2 Sơ đồ trình tự xem thông tin bưu điện 37

2.2.3 Sơ đồ trình tự xem bản đồ điểm bưu điện 38

2.2.4 Sơ đồ trình tự tìm kiếm điểm bưu điện39

2.2.5 Sơ đồ trình tự tìm đường đi trên bản đồ 40

2.2.6 Sơ đồ trình tự thêm điểm bưu điện 41

2.2.7 Sơ đồ trình tự sửa thông tin điểm bưu điện 42

2.2.8 Sơ đồ trình tự xóa điểm bưu điện 43

2.2.9 Sơ đồ trình tự thêm tin mới 44

2.2.10 Sơ đồ trình tự sửa tin tức 45

DANH MỤC HÌNH ẢNH

Hình 1.1: Kiến trúc hệ thống WebGIS 5

Hình 1.2: Tạo API key 7

Hình 1.3: Tạo Markers trên bản đồ 13

Hình 1.4: Tạo Polyline trên bản đồ 14

Hình 1.5: Tạo Polygon trên bản đồ 15

Hình 1.6: Tạo Infowindows trên bản đồ 16

Hình 2.1: Sơ đồ USER CASE tổng quát 36

Hình 2.2: Sơ đồ USER CASE phân rã chức năng quản lý thông tin điểm bưu điện

36

Hình 2.3: Sơ đồ USER CASE phân rã chức năng quản lý tin tức 37

Hình 2.4: Sơ đồ trình tự xem thông tin bưu điện 37

Hình 2.5: Sơ đồ trình tự xem bản đồ 38

Hình 2.5: Sơ đồ trình tự tìm kiếm điểm bưu điện39

Hình 2.6: Sơ đồ trình tự tìm đường đi trên bản đồ 40

Hình 2.7: Sơ đồ trình tự thêm điểm bưu điện 41

Hình 2.8: Sơ đồ trình tự sửa thông tin điểm bưu điện 42

Hình 2.9: Sơ đồ trình tự xóa điểm bưu điện 43

Hình 2.10: Sơ đồ trình tự thêm tin mới 44

Hình 2.11: Sơ đồ trình tự sửa tin tức 45

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

Hình 3.2: Giao diện trang xem bản đồ 52

Hình 3.3: Giao diện trang cập nhật53

Hình 3.4: Giao điện trang liên hệ 54

Hình 3.5: giao diện hiển thị thông tin điểm bưu điện 55

Hình 3.6: Giao diện hiển thị tin tức 56

Hình 3.7: Giao diện thêm điểm bưu điện 56

Hình 3.8: Giao diện thêm tin tức mới 57

6

LỜI NÓI ĐẦU

Do nhu cầu tìm kiếm thông tin ngày càng cao đặc biệt là nhu cầu tìm kiếm thông tin theo địa điểm, theo tọa độ không gian, theo khoảng cách hiện nay chưa đáp ứng nhu cầu của người dùng Mà hiện nay WebGIS là xu hướng phổ biến thông tin mạnh mẽ trên Internet không chỉ dưới góc độ thông tin thuộc tính thuần túy mà nó kết hợp được với thông tin không gian hữu ích cho người sử dụng Bằng việc kết hợp GIS và Web để tạo thành WebGIS, người dùng sẽ dễ truy cập được các thông tin kết hợp với các bản đồ động để có được cái nhìn trực quan thông qua

trình duyệt Vì vậy em đã chọn đề tài nghiên cứu: “Ứng dụng công nghệ WebGis trong xây dựng WebSite quản lý thông tin các điểm Bưu Điện của tỉnh Thái Nguyên”.

 Nội dung nghiên cứu:

Gồm 3 chương:

Chương 1: Tổng quan về cơ sở lý thuyết

Tổng quan về HTML - CSS

Lý thuyết về WebGisTổng quan về UML

Hệ quản trị CSDL MySQLChương 2: Khảo sát phân tích và thiết kế hệ thống

Khảo sát hệ thốngHiện trạng của hệ thốngBài toán mới đặt ra và yêu cầu hệ thống Phân tích hệ thống

Thiết kế hệ thống Chươg 3: Xây dựng chương trình

Kết quả giao diện chương trình

8

1.1.2 Giới thiệu về CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một

dạng file text với phần tên mở rộng là css Trong Style Sheet này chứa những câu lệnh CSS Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví

dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v

Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với nhau Nhưng với sự xuất hiện của CSS, người ta có thể tách rời hoàn toàn phần trình bày và nội dung Giúp cho phần code của trang web cũng gọn hơn và quan trọng hơn cả là dễ chỉnh sửa hơn

Trước khi bắt đầu tìm hiểu thêm về CSS tôi muốn bạn biết một chút về thế mạnh của nó trong việc thiết kế web Ví dụ nếu làm việc với HTML và bạn muốn

font chữ của toàn bộ trang web là Arial Bạn sẽ phải làm đi làm lại như thế cho tất

cả các file html mà bạn có Nhưng nếu bạn sử dụng CSS, thì bạn chỉ cần làm một lần và tất cà các trang khác sẽ tự động được thay đổi

Có ba cách bạn có thể sử dụng để định dạng trang web là: cục bộ, nhúng vào trang và liên kết đến một file CSS riêng biệt Trong thực tế thì cách cuối cùng

là liên kết đến một file riêng biệt được sử dụng phổ biến nhất Nhưng bạn cũng nên biết về hai cách còn lại vì đôi khi bạn cũng phải sử dụng đến nó tuy không nhiều

1 Cục bộ – code CSS được chèn trực tiếp vào trong thẻ HTML

Cách định dạng cục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ HTML và chỉ có tác động lên thẻ đó

Ví dụ:

<p style=”font-size:16pt; font-weight:bold; color:blue;”>

Nếu bạn thêm code CSS vào trong thẻ này nó sẽ thay đổi

cách hiển thị trên trình duyệt

</p>

2 Nhúng vào trang web

Cách thứ hai là bạn khai báo code CSS nằm trong cặp thẻ <style></style> được đặt ở phần <head></head> của tài liệu Về cơ bản nó cũng chỉ có tác động cục bộ lên file mà bạn chèn đoạn code CSS này Nó có phạm vi ảnh hưởng lớn hơn

là cách chèn cục bộ được nói ở trên, nhưng nó không có ảnh hưởng đến các file khác trong cùng một trang web

10

<title>Nhúng vào trang</title>

<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />

3 Liên kết đến một file biệt lập

Thực tế cách cuối cùng này mới là thế mạnh thực sự của CSS bởi vì bạn chỉ cần tạo ra một file CSS và viết code chỉ một lần Nó sẽ ảnh hưởng đến toàn bộ trang web chứ không chỉ ảnh hưởng đến một file html đơn lẻ hoặc chỉ một thẻ trong hàng ngàn thẻ mà bạn có Bằng cách này chúng ta có thể tách rời hoàn toàn những thành phần trình bày và nội dung ra khỏi nhau Nếu bạn viết toàn bộ code CSS trong một file và liên kết nó đến những trang còn lại, thì việc thay đổi sửa chữa trang web trở nên cực kỳ đơn giản

Để liên kết file CSS đến tất cả các file html của bạn, bạn chỉ cần chèn đoạn code sau vào giữa thẻ <head></head> của tài liệu:

1 <link href="style_sheet.css" rel="stylesheet" type="text/css" />

Và trình duyệt sẽ tự động dùng file style_sheet.css để định dạng cho trang web của bạn Tất nhiên trong file style_sheet.css bạn đã viết code CSS rồi

1.2 Tổng quan về WebGis

1.2.1 Tổng quan về kiến trúc WebGis

Kiến trúc web của hệ thống thông tin dữ liệu không gian cũng gần giống như kiến trúc dành cho một hệ thống thông tin web cơ bản khác, ngoại trừ có sử dụng kỹ thuật GIS Có nhiều dạng công nghệ cho việc thành lập web cho thông tin không gian như: MapServer, GeoServer, ArcGIS Server,… Cơ sở dữ liệu không gian sẽ được dùng để quản lý và truy xuất dữ liệu không gian, được đặt trên Data

Server Nhà kho hay nơi lưu trữ (Clearing House) được dùng để lưu trữ và duy trì siêu dữ liệu Metadata về những dữ liệu không gian tại những Data Server khác nhau Dựa trên những thành phần quản lý dữ liệu, ứng dụng Server và mô hình Server được dùng cho ứng dụng hệ thống để tính toán thông tin không gian qua các hàm cụ thể Tất cả kết quả tính toán của ứng dụng Server sẽ được gởi đến Web Server để thêm vào các gói HTML, gởi cho phía client và hiển thị nơi trình duyệt web.

a) Cilent gửi yêu cầu của người sử dụng thông qua giao thức HTTP đến Web Server

b) Web Server nhận yêu cầu của người dùng từ cilent, xử lý và chuyển tiếp yêu cầu đến ứng dụng trên Server có liên quan

c) Application Server (chính là các ứng dụng GIS) nhận các yêu cầu cụ thể đối với các ứng dụng và gọi các hàm có liên quan để tính toán xử lý Nếu có yêu cầu dữ liệu nó sẽ gửi yêu cầu dữ liệu đến Data Exchange Center (trung tâm trao đổi dữ liệu)

d) Data Exchange Center nhận yêu cầu dữ liệu, tìm kiếm vị trí dữ liệu, sau

đó gửi yêu cầu dữ liệu đến Data Server chứa dữ liệu cần tìm

e) Data Server tiến hành truy vấn dữ liệu cần thiết và trả dữ liệu này về cho Data Exchange Center

f) Data Exchange Center nhận nhiều nguồn dữ liệu từ Data Server, sắp xếp logic dữ liệu theo yêu cầu và trả dữ liệu về cho Application Server

g) Application Server nhận dữ liệu trả về từ các Data Exchange Center và đưa chúng đến các hàm cần sử dụng, xử lý, trả kết quả về Web Server

h) Web Server nhận kết quả xử lý, thêm vào các code HTML, PHP,… để

có thể hiển thị lên trình duyệt, gửi trả kết quả về cho trình duyệt dưới dạng các trang web

12

Hình 1.1: Kiến trúc hệ thống WebGIS (Nguồn: Climate GIS –

www.climategis.com )

Kiến trúc 3-tier gồm 3 thành phần cơ bản, đại diện cho 3 tầng:

1) Database (Data tier): là nơi lưu trữ các dữ liệu địa lý bao gồm các dữ liệu không gian và phi không gian Các dữ liệu này được quản trị bởi các hệ quản trị cơ

sở dữ liệu như: Oracle, MS SQL Server, Esri SDE, PostgreSQL,… hoặc là các dạng file dữ liệu như: Shapefile, Tab, XML,… Các dữ liệu này được thiết kế cài đặt và xây dựng theo 7 từng quy trình cụ thể Tùy theo quy mô và yêu cầu của hệ thống mà tổ chức lựa chọn công nghệ quản trị cơ sở dữ liệu cho phù hợp

2) Application Server (Bussiness tier): thường được tích hợp trong một Webserver nào đó, ví dụ như các Web Server nổi tiếng Apache Tomcat, Internet

Information Server Đó là một ứng dụng phía Server nhiệm vụ chính của nó là tiếp nhận các yêu cầu từ client, lấy dữ liệu từ phía cơ sở dữ liệu theo yêu cầu client, trình bày dữ liệu theo cấu hình định sẵn hoặc theo yêu cầu của client và trả kết quả

về theo yêu cầu

3) Client (Presentation tier): thông thường đơn thuần là một Browser như Internet Explorer, FireFox, Google Chome,… để mở các trang web theo URL định sẵn Các ứng dụng client có thể là 1 Website, Applet, Flash,… được viết bằng các công nghệ chuẩn mà W3C đã chứng thực Các client đôi khi cũng là một ứng dụng Desktop tương tự như phần mềm MapInfo, ArcMap,…

1.2.2 Tổng quan về Google Map API

a Google Map API là gì?

Google Maps là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google, hỗ trợ nhiều dịch vụ khác của Google nổi bật là dẫn đường Nó cho phép thấy bản đồ đường sá, đường đi cho xe đạp, cho người đi bộ và xe hơi, và những địa điểm kinh doanh trong khu vực cũng như khắp nơi trên thế giới

Map API là gì?

Đó là một phương thức cho phép 1 website B sử dụng dịch vụ bản đồ của site A (gọi là Map API) và nhúng vào website của mình (site B) Site A ở đây là google map, site B là các web site cá nhân hoặc tổ chức muốn sử dụng dịch vụ của google, có thể rê chuột, zoom, đánh dấu trên bản đồ

Các ứng dụng xây dựng trên map được nhúng vào trang web cá nhân thông qua các thẻ javascripts do vậy việc sử dụng API google rất dễ dàng

Google Map API đã được nâng cấp lên phiên bản thứ 3 Phiên bản này hỗ trợ không chỉ cho các máy để bàn truyền thống mà cho cả các thiết bị di động

14

Nhanh hơn và nhiều hơn các ứng dụng.

Điều quan trọng là các dịch vụ hoàn toàn miễn phí với việc xây dựng một ứng dụng nhỏ Trả phí nếu đó là việc sử dụng cho mục đích kinh doanh, doanh nghiệp

b Cách sử dụng và phát triển công nghệ

Tất cả các ứng dụng Maps API nên tải Maps API sử dụng một API key Một key API cho bạn kiểm soát các ứng dụng của mình và cũng là việc google có thể liên lạc với bạn về ứng dụng có ích bạn đang xây dựng Từ đó có cơ hội phát triển bản thân mình

Tạo một API key:

Truy cập vào https://code.google.com/apis/console và đăng nhập bằng tài khoản gmail của mình

Click vào Services link bên trái menu

Kéo xuống dưới tìm Google Maps API v3 service và kích hoạt dịch vụ

Click API Access, một API key sẽ hiện lên và bạn sẽ copy lại để sử dụng

Hình 0.2: Tạo API key

c Load bản đồ về trang Web cá nhân

Khi đã có key google cung cấp ta sử dụng key đó trong đoạn mã javascripts trong thẻ <head>:

<scripttype="text/javascript"> src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">

</script>

Tạo một hàm trong javascripts:

IGFMAP.init=function() {

geocoder = new google.maps.Geocoder();

directionsDisplay = new google.maps.DirectionsRenderer();

var myOptions = {

zoom: 15,

16

center: pcenter,mapTypeId: google.maps.MapTypeId.ROADMAP, };

Đầu tiên tạo một đối tượng bản đồ chứa các biến khởi tạo bản đồ

 zoom: độ zoom được quy định khi Map được load

 Map type: loại Map được hiển thị sau khi load xong có 4 loại để chọn: ROADMAP, SATELLITE, HYBRID, TERRAIN

 Map object: var map = new google.maps.Map(document.getElementById("map "), myOptions); Xác định id html chứa đối tượng Map với tùy chọn

"myOptions" như trên

Sau đó load bản đồ vào web.

<script IH80_-AgZbiq1lKAkcOoavIWTEc&sensor=false"></script>

Tổng quan: Lớp phủ(overlays) là các đối tượng trên bản đồ và được gắn với

vĩ độ, kinh độ cho nên nó sẽ di chuyển cùng bản đồ khi ta kéo hoặc zoom bản đồ Overlays phản ánh các đối tượng mà bạn thêm vào bản đồ như points, line, areas, hoặc các "collections of object" tạm gọi là bộ sưu tập đối tượng, các đối tượng mà bạn muốn xây dựng Vd: 1 khu vực công nghiệp, khu vực sông, khu vui chơi giải trí

Các loại lớp phủ: markers, polylines, areas, info windows, polygons

Thêm các lớp phủ: Đầu tiên phải xác định lớp phủ nào cần xây dựng để có thể hiển thị trên Map Thêm lớp phủ trực tiếp lên bản đồ sử dụng phương thức setmap() Ví dụ sau thêm lớp phủ Markers để đánh dấu điểm trên map

var myLatlng = new google.maps.LatLng(21.682953,105.815978);

myOptions);

//Lớp phủ Markers được thêm vào bởi đối tượng trong javascripts cùng các tùy chọn của lớp phủ:

var marker = new google.maps.Marker({

position: myLatlng, //vị trí này sẽ xuất hiện điểm đánh dấu với icon mặc định của google

title:"Hello World!"

});

//sau đó gọi phương thức setmap() để thêm vào bản đồ

"marker.setMap(map)"

marker.setMap(map);// đối tượng map được khởi tạo ở trên

Loại bỏ lớp phủ: Để loại bỏ ta gọi phương thức setmap() của lớp phủ và đặt

là null "setmap(null)" Nhưng đây mới chỉ loại bỏ tạm thời không cho chúng xuất hiện chứ chưa xóa hoàn toàn

Nhưng trên bản đồ với một ứng dụng nhỏ thì ít nhất ta cũng phải sử dụng trên 2 lớp phủ Vì vậy để quản lý chúng thật sự dễ dàng ta tạo một mảng chứa các lớp phủ Khi muốn tạo một lớp phủ ta chỉ setmap() trên các phần tử của mảng hoặc loại bỏ chúng cũng vậy Điều quan trọng là có thể xóa các lớp phủ khi cho độ dài của mảng bằng 0

e Markers

Markers dùng để xác định một điểm trên bản đồ hoặc đánh dấu địa điểm dựa trên vĩ độ và kinh độ Theo mặc định sử dụng icon của google làm hình ảnh hiện lên điểm đánh dấu Hoặc muốn một icon của mình thì ta gọi phương thức setIcon()

Sau đây là các trường được xây dựng trong new google.maps.Marker:

20

Position(bắt buộc): Quy định là tọa độ LatLng của điểm được đánh dấu.

Map(tùy chọn): Quy định đối tượng bản đồ được đánh dấu Nếu thuộc tính này được khai báo trong đây nó sẽ thay thế cho Markers.setMap(map)

Icon(tùy chọn): Hình ảnh tùy chọn mà bạn muốn hiển thị thay thế hình ảnh mặc định Dùng tùy chọn này thay thế cho marker.setIcon(link đến hình ảnh trong thư mục)

Title(tùy chọn): Tiêu đề của địa điểm

Draggable(tùy chọn): Thuộc tính động của điểm đánh dấu, thể hiện sự chuyển động của điểm được đánh dấu Nếu TRUE tính động được khởi động

Animation: Cách thức chuyển động của điểm đánh dấu Có 2 cách thức DROP, BOUNCE

 var myLatlng = new google.maps.LatLng(21.682953,105.815978);

 var icon = "link đến hình ảnh";

 var marker = new google.maps.Marker({

 position: myLatlng,

 map: map,

 icon:icon,

độ rộng của đường Phải có ít nhất 2 điểm để tạo nên 1 đường thẳng.

Cũng giống như lớp phủ Markers ta khai báo lớp phủ Polyline và các thuộc tính của nó như sau:

//vẽ đường

22

var poly=new google.maps.Polyline({

path: //giá trị là một mảng chứa các tọa độ cần nối với nhau strokeColor: "#FF0000",// tùy chọn màu sắc

strokeOpacity: 1.0,//độ đậm nhạt của màu sắc

strokeWeight: 2//độ rộng của đường

Polygon là các đường polyline khép kín dùng để thể hiện đường kết nối trên bản đồ dựa vào các tọa độ Các đoạn thẳng được hiển thị với các tùy chọn cho nó như màu sắc, độ đậm nhạt, độ rộng của đường Phải có ít nhất 2 điểm để tạo nên 1 đường thẳng.

Cũng giống như Polyline ta khai báo lớp phủ Polygon và các thuộc tính của nó như sau:

//vẽ đường

PolygonOptions pgOption=new PolygonOptions(); ({

path: //giá trị là một mảng chứa các tọa độ cần nối với nhau

polyGon.setStrokeColor(Color.BLUE); // tùy chọn màu sắc

polyGon.setFillColor(Color.YELLOW); //độ đậm nhạt của màu sắc

polyGon.setStrokeWidth(5); //độ rộng của đường

});

//phủ lên map

poly.setMap(map);

24

Hình 1.5: Tạo Polygon trên bản đồ

h Infowindown

Infowindows là một cửa sổ chứa các thông tin Ta có thể gắn nó vào MARKER hay POLYGON để khi click vào thì cửa sổ Infowindows mở lên cho ta

thông tin của MARKER, POLYGON đó.

Tạo một Infowindows cũng giống như các lớp phủ khác:

var info = new google.maps.InfoWindow({

content: 'text'//chứa nội dung Infowindows

});

26

Sau đó gọi info.open() để có thể mở được cửa sổ.

Hình 1.6: Tạo Infowindows trên bản đồ

e Sự kiện

Một số đối tượng trong Maps API được thiết kế để đáp ứng với sự kiện người

sử dụng chẳng hạn như các sự kiện chuột hoặc bàn phím Một đối tượng google.maps.Marker có thể lắng nghe người sử dụng các sự kiện sau đây, ví dụ :

Sự kiện 'click'

Sự kiện 'dblclick'

Sự kiện 'mouseup'

Sự kiện 'mousedown'

Sự kiện 'mouseover'

Sự kiện 'mouseout'

Một sự kiện được gọi như sau:

google.maps.event.addListener(đối tượng, sự kiện gọi, function(){ });

28

Sau đây là chương trình khi click chuột vào map thì lấy tọa của điểm đó và đổ

dữ liệu lên ô điểm đi

google.maps.event.addListener(IGFMAP.map, "click", function (event) {

Quay lại về cuối thế kỷ hai mươi

Chính xác vào năm 1997 Object Management Group (OMG-Nhóm quản lý đối tượng) đã phát hành bản Unified Modeling Language (UML) Một trong những mục đích của UML là cung cấp cho cộng đồng phát triển một ngôn ngữ thiết kế phổ biến và ổn định, ngôn ngữ này có thể được dùng để phát triển và xây dựng các ứng dụng máy tính UML đưa ra một ký hiệu mô hình hóa chuẩn thống nhất mà các chuyên gia công nghệ thông tin (CNTT) muốn có trong nhiều năm Khi sử dụng UML, các chuyên gia CNTT bây giờ đã có thể đọc và phổ biến cấu trúc hệ thống và các kế hoạch thiết kế giống như các công nhân xây dựng đang làm trong nhiều năm qua với các kế hoạch chi tiết về các tòa nhà

Bây giờ là thế kỷ hai mốt chính xác là năm 2003 và UML đã nâng cao sức mạnh trong chuyên ngành của chúng ta Trên 75% các bản tóm tắt mà tôi thấy, có một

30

điểm nhấn yêu cầu kiến thức về UML Tuy nhiên, sau khi nói chuyện với đa số các ứng viên cho công việc này, một điều trở nên rõ ràng là họ không thực sự biết UML Thông thường, hoặc là họ đang sử dụng nó như là một từ thông dụng hoặc

họ đã có một phần tiếp xúc với UML Sự thiếu hiểu biết này đã thôi thúc tôi viết bài giới thiệu vắn tắt này về UML, tập trung vào các sơ đồ cơ bản được sử dụng trong việc mô hình hóa trực quan Khi bạn đọc xong bạn sẽ không có đủ kiến thức

để đặt UML vào tổng quan của bạn, nhưng sẽ có một điểm khởi đầu để nghiên cứu sâu hơn vào ngôn ngữ này

a.Sơ đồ ca sử dụng

Một ca sử dụng minh họa một đơn vị chức năng được hệ thống cung cấp Mục đích chính của việc sử dụng sơ đồ ca sử dụng là giúp các nhóm phát triển hình dung ra các yêu cầu chức năng của một hệ thống, bao gồm mối quan hệ của

"các vai" (con người, người sẽ tương tác với hệ thống) với các quy trình cần thiết, cũng như các mối quan hệ trong số các ca sử dụng khác nhau Các sơ đồ ca sử dụng nói chung cho thấy các nhóm các ca sử dụng hoặc tất cả các ca sử dụng cho

hệ thống hoàn chỉnh, hoặc sự đột phá của một nhóm các ca sử dụng cụ thể với chức năng liên quan (ví dụ, tất cả các ca sử dụng có liên quan đến quản trị an ninh) Để cho thấy ca sử dụng trên một sơ đồ ca sử dụng, bạn vẽ hình bầu dục ở giữa sơ đồ và đặt tên ca sử dụng ở trung tâm, hoặc bên dưới, hình bầu dục Để vẽ một vai (chỉ thị một người sử dụng hệ thống) trên một sơ đồ ca sử dụng, bạn vẽ một người dính vào bên trái hay bên phải sơ đồ của bạn (và chỉ trong trường hợp bạn đang muốn biết, một số người vẽ người đi kèm đẹp hơn những người khác)

Sử dụng các đường đơn giản để miêu tả các mối quan hệ giữa vai và các ca sử dụng

Hình 1.7: Sơ đồ ca sử dụng mẫu

Sơ đồ ca sử dụng thường được dùng để giao tiếp các hàm cấp cao của hệ thống và quy mô của hệ thống Bằng cách xem xét sơ đồ ca sử dụng mẫu của chúng ta trong Hình trên, bạn có thể dễ dàng chỉ ra các hàm mà hệ thống ví dụ của chúng ta cung cấp Hệ thống này cho phép những người quản lý ban nhạc xem qua một báo cáo thống kê bán hàng và báo cáo Billboard 200 (bảng xếp hạng 200 anbum âm nhạc bản chạy nhất) với các đĩa CD của ban nhạc Nó cũng cho phép xem một báo cáo thống kê bán hàng và báo cáo Billboard 200 cho riêng một đĩa

CD Sơ đồ này cũng cho chúng ta biết hệ thống của chúng ta cung cấp các báo cáo

32

Billboard từ một hệ thống bên ngoài được gọi là Dịch vụ báo cáo Billboard (Billboard Reporting Service).

Ngoài ra, sự vắng mặt của các ca sử dụng trong sơ đồ này cho thấy những gì hệ thống không làm được Ví dụ, nó không cung cấp cách cho phép người quản lý ban nhạc nghe các bài hát từ các album khác nhau trên bảng xếp hạng Billboard

200 tức là chúng ta thấy không có tham chiếu đến một ca sử dụng được gọi là Nghe các bài hát từ Billboard 200 Sự thiếu vắng này không phải là một vấn đề nhỏ Với các sự mô tả ca sử dụng rõ ràng và đơn giản được cung cấp trên sơ đồ như vậy, một nhà tài trợ cho dự án có thể dễ dàng nhìn thấy chức năng cần thiết nào có hay không có trong hệ thống

b.Sơ đồ lớp

Sơ đồ lớp cho thấy các thực thể khác nhau (người, các chủ đề và dữ liệu) liên quan với nhau như thế nào; nói cách khác, nó cho thấy các cấu trúc tĩnh của hệ thống Một sơ đồ lớp có thể được sử dụng để hiển thị các lớp hợp lý, chúng thường

là các chủ đề khác nhau mà các doanh nhân trong một tổ chức hay bàn về chúng các ban nhạc rock, các đĩa CD, phát thanh hoặc các khoản vay, thế chấp nhà, các khoản vay mua xe và lãi suất Các sơ đồ lớp cũng có thể được sử dụng để hiển thị các lớp thực hiện, chúng là những lớp mà các lập trình viên thường hay xử lý Một

sơ đồ lớp thực hiện có thể sẽ cho thấy một số các lớp giống như sơ đồ các lớp hợp

lý Lớp thực hiện sẽ không được vẽ với các thuộc tính như nhau, tuy nhiên, vì nó hầu như sẽ có khả năng có các tham khảo đến những thứ như các Vectơ và HashMaps

Một lớp được mô tả trong sơ đồ lớp như là một hình chữ nhật với ba phần nằm ngang, như trong Hình 2 Phần phía trên chỉ ra tên của lớp; phần giữa có chứa các thuộc tính của lớp; và phần dưới chứa hoạt động của lớp (hay

"các phương thức")

Hình 1.8: Đối tượng lớp mẫu trong một sơ đồ lớp

Theo kinh nghiệm của tôi, hầu như tất cả các nhà phát triển đều biết sơ đồ này

là gì, nhưng tôi thấy rằng hầu hết các lập trình viên vẽ các đường quan hệ không đúng Đối với một sơ đồ lớp như trong Hình 3, bạn nên vẽ mối quan hệ kế thừa1 bằng cách sử dụng một đường có một mũi tên ở đầu chỉ tới siêu lớp và mũi tên nên là một tam giác hoàn chỉnh Một mối quan hệ liên kết nên là một đường nét liền nếu cả hai lớp nhận ra được nhau và là một đường có một mũi tên hở nếu liên kết đó chỉ được một trong các lớp này biết đến

c.Sơ đồ trình tự

Sơ đồ trình tự (sequence) hiển thị một dòng chi tiết cho một ca sử dụng cụ thể hoặc thậm chí chỉ là một phần của một ca sử dụng cụ thể Hầu như chúng tự giải thích; chúng hiển thị các lời gọi giữa các đối tượng khác nhau theo trình tự

34

của chúng và có thể hiển thị, ở một mức độ chi tiết, các lời gọi khác với các đối tượng khác.

Một sơ đồ trình tự có hai chiều: Chiều dọc cho thấy trình tự của thông báo/các lời gọi theo thứ tự thời gian mà chúng xảy ra; chiều ngang thể hiện các cá thể đối tượng mà các thông báo được gửi tới chúng

Một sơ đồ trình tự vẽ rất đơn giản Ngang trên đầu sơ đồ của bạn, xác định các cá thể lớp (đối tượng) bằng cách đặt mỗi cá thể lớp trong hộp (xem Hình 4) Trong hộp này, đặt tên cá thể lớp và tên lớp được ngăn cách bằng một khoảng trống/ dấu hai chấm/ khoảng trống " : " (ví dụ, myReportGenerator : ReportGenerator) Nếu một cá thể lớp gửi một thông báo đến một cá thể lớp khác,

vẽ một đường với một mũi tên hở trỏ đến cá thể lớp nhận; đặt tên của thông báo/ phương thức trên đường vẽ đó Tùy chọn, với các thông báo quan trọng, bạn có thể

vẽ một đường chấm chấm có một mũi tên chỉ ngược về cá thể lớp ban đầu; ghi nhãn giá trị trả về trên đường chấm chấm đó Riêng tôi luôn muốn có đường giá trị trả về vì tôi muốn tìm các chi tiết phụ làm cho nó dễ đọc hơn

Đọc một sơ đồ trình tự rất đơn giản Bắt đầu tại góc trên bên trái với cá thể lớp "trình điều khiển" bắt đầu trình tự Sau đó đi theo mỗi thông báo dưới sơ đồ Hãy nhớ rằng: Mặc dù sơ đồ trình tự ví dụ trong Hình 4 cho thấy một thông báo trả

về cho mỗi thông báo đã gửi, đây là tùy chọn

Hình 1.9: Một sơ đồ trình tự mẫu

36

Bằng cách đọc sơ đồ trình tự mẫu của chúng ta trong Hình 1.3.3, bạn có thể thấy cách tạo một Báo cáo bán đĩa CD (CD Sales Report) Đối tượng aServlet là một trình điều khiển ví dụ của chúng ta aServlet gửi một thông báo đến cá thể lớp ReportGenerator có tên là gen Thông báo này được ghi nhãn là generateCDSalesReport, nó có nghĩa là đối tượng ReportGenerator triển khai thực hiện trình xử lý thông báo này Trên cơ sở kiểm tra chặt chẽ hơn, nhãn thông báo generateCDSalesReport có cdId trong ngoặc đơn, có nghĩa là aServlet đang chuyển cùng với thông báo một biến có tên là cdId Khi cá thể gen nhận được một thông báo generateCDSalesReport, rồi nó thực hiện các lời gọi tiếp theo đến lớp CDSalesReport và cá thể hiện tại của một CDSalesReport gọi là aCDReport được trả về Sau đó cá thể gen thực hiện các lời gọi đến cá thể aCDReport được trả về, chuyển qua nó các tham số trên mỗi lời gọi thông báo Vào cuối trình tự, cá thể gen trả về một aCDReport đến người gọi aServlet của nó.

d.Sơ đồ hoạt động

Sơ đồ hoạt động hiển thị luồng kiểm soát theo thủ tục giữa hai hay nhiều đối tượng lớp khi xử lý một hoạt động Các sơ đồ hoạt động có thể được sử dụng

để mô hình hóa quy trình kinh doanh cao cấp hơn ở mức đơn vị kinh doanh, hoặc

để mô hình hóa các hành động bên trong mức thấp Theo kinh nghiệm của tôi, các

sơ đồ hoạt động tốt nhất được sử dụng để mô hình hóa quy trình cao cấp hơn, chẳng hạn công ty hiện đang kinh doanh như thế nào, hoặc muốn tiến hành kinh doanh như thế nào Điều này là do các sơ đồ hoạt động có vẻ "ít kỹ thuật" hơn so với các sơ đồ trình tự và những người thích kinh doanh có xu hướng hiểu chúng nhanh hơn

Một bộ ký hiệu hoạt động tương tự như các ký hiệu đã sử dụng trong một

sơ đồ trạng thái Giống như một sơ đồ trạng thái, sơ đồ hoạt động bắt đầu bằng một vòng tròn nét liền kết nối tới hoạt động ban đầu Hoạt động này được mô hình hóa bằng cách vẽ một hình chữ nhật có các cạnh tròn, kèm theo tên của hoạt động Các hoạt động có thể được kết nối với các hoạt động khác thông qua các đường chuyển

tiếp, hoặc đến các điểm quyết định có kết nối tới các hoạt động khác được các điều kiện của điểm quyết định bảo vệ Các hoạt động, chấm dứt quá trình được mô hình hóa, được kết nối với một điểm kết thúc (giống như trong một sơ đồ trạng thái) Tùy chọn, các hoạt động có thể được nhóm lại thành các làn đường, chúng được sử dụng để chỉ ra đối tượng thực sự thực hiện các hoạt động.

38

Hình 1.10: Sơ đồ hoạt động

Trong sơ đồ hoạt động ví dụ của chúng ta, chúng ta có hai làn đường vì chúng ta có hai đối tượng kiểm soát các hoạt động riêng biệt: một người quản lý

ban nhạc và một công cụ lập báo cáo Quá trình này bắt đầu với việc người quản lý ban nhạc chọn xem báo cáo bán hàng của một trong những ban nhạc của mình Công cụ lập báo cáo sau đó lấy ra và hiển thị tất cả các ban nhạc mà người đó quản

lý và yêu cầu anh ta phải chọn một ban nhạc Sau khi người quản lý ban nhạc chọn một ban nhạc, công cụ lập báo cáo lấy ra thông tin bán hàng và hiển thị bản báo cáo bán hàng Sơ đồ hoạt động cho thấy rằng việc hiển thị báo cáo là bước cuối cùng trong quá trình này

e.Sơ đồ thành phần

Một sơ đồ thành phần cung cấp một khung nhìn vật lý của hệ thống Mục đích của n

Mô hình hóa một sơ đồ thành phần tốt nhất được mô tả thông qua một ví

dụ Hình 1.3.5 cho thấy bốn thành phần: Reporting Tool (Công cụ lập báo cáo), Billboard Service (Dịch vụ Billboard), Servlet 2.2 API và JDBC API Các đường mũi tên từ thành phần Reporting Tool đến các thành phần Billboard Service, Servlet 2.2 API, JDBC API muốn nói rằng Reporting Tool phụ thuộc vào ba thành phần đó

Hình 1.11: Một sơ đồ thành phần f.Sơ đồ triển khai

Sơ đồ triển khai cho thấy cách một hệ thống sẽ được triển khai cụ thể trong môi trường phần cứng Mục đích của nó là hiển thị các thành phần khác nhau của

40