MC LCLI NI U..............................................................................................3 CHNG 1: GII THIU CHUNG........................................................4 .1.1. Gii thiu cc cng ngh...............................................................4 .1.2. Mt s trang web v du lch c s dng bn trc tuyn.........10 CHNG 2: GOOGLE MAP API.........................................................12 .2.1. Basics (C bn)...........................................................................12 .2.2. Event (S kin)...........................................................................17 .2.3. ConTrol(iu khin)...................................................................20 .2.4. Overlays(Ph trn bn )...........................................................27 CHNG 3: H THNG BN TRC TUYN S DNG GOOGLE MAP API.......................................................................................33 .3.1. Cc cng ngh s dng...........................................................33 .3.2. M t bi ton.............................................................................35 .3.3. Biu lung d liu..................................................................39 .3.4. Thit k c s d liu vt l........................................................41 1. Table : Ti khon............................................................................41 2. Table: Th ..................................................................................42 3. Table : a l..................................................................................42 5. Table : Thng tin khc....................................................................43 6. Table : Video..................................................................................43 .3.5. Thit k v mt giao din............................................................44 TNG KT................................................................................................48

LI NI UNh chng ta bit bn t thi xa xa gip con ngi c th xc nh c phng hng, v tr chnh xc ni mnh mun n, cn n, gip cho h c th hiu bit y v vng a l m h tm hiu. Ngy nay vi s gip ca cng ngh thng tin ngi ta c th ngi ti mt ch v tm kim chnh xc n mt vng no trn th gii bng bn trc tuyn.Hin nay, bn trc tuyn l mt trong nhng lnh vc pht trin mnh m c hu ht cc ni trn th gii xy dng v Vit Nam khng nm ngoi s . Trn th gii google xy dng c mt bn trc tuyn ca ton th gii v cung cp cc API cho ngi lp trnh c th t xy dng bn trc tuyn t nc mnh. Vi s pht trin mnh m trong lnh vc bn cc cng ty Vit Nam nh bamboo, a danh xy dng c s d liu ca mnh, hin th thng tin da trn bn ca google. Chng ng dng bi rt nhiu cng ngh khc nhau nh .NET, PHP, JSPCng xu hng ti xy dng mt trang web v lnh vc bn trc tuyn cho vic hin th thng tin gm thng tin text, hnh nh v video ca tt c cc th trn th gii. y ti s dng cng ngh .NET trn nn Web 2.0 kt hp vi Google Map API.

CHNG 1:.1.1. Gii thiu cc cng ngh 1.1.1. trc tuyn1.1.1.1.1 Bn

GII THIU CHUNG

Bn

Theo wikipedia Bn l bn v n gin miu t mt khng gian, a im v hin th nhng thng s lin quan trc tip n v tr y c lin quan n khu vc xung quanh. Theo cc nh bn : Bn l s miu t khi qut, thu nh b mt tri t hoc b mt thin th khc trn mt phng trong mt php chiu xc nh, ni dung ca bn c biu th bng h thng k hiu quy c. Bn thng dng nht trong a l. Theo ngha ny bn thng c hai chiu m vn biu din mt khng gian c ba chiu ng n. Mn bn l khoa hc v ngh thut v bn . 1.1.1.1.2 Bn trc tuyn Theo Trung tm Thng tin (CIREN thuc B Ti nguyn - Mi trng) c quan cung cp DV ny: Ngoi vic cung cp thng tin cho ngi truy cp, h bn ny cn c ngha nh l c s d liu quan trng phc v hot ng ca cc c quan Chnh ph, cc c quan nghin cu khoa hc v phc v vic ph cp thng tin cng ng. DV ny ca CIREN c thit lp theo ng tiu chun OGC WMS. Do vy, c th s dng bn trc tuyn VN kt hp vi rt nhiu dch v WMS ca cc t chc v quc gia trn th gii. CIREN c hng dn phng php kt hp dch v bn trc tuyn VN vi ngun nh v tinh ca Microsoft Virtual Earth v Yahoo Map. Ngi s dng c th b sung cc ngun d liu ca ring mnh trn nn d liu a l ton cu m khng cn phi c d liu gc. c bit, hin CIREN ang cung cp mt ng dng min ph l Gaia 3.0 khai thc dch v WMS. Trong thi gian ti, CIREN cung cp cc ng lin kt ti cc dch v WMS v ng link ti cc dch v WMS quc t.

1.1.2. Web 2.0

Cng ngh

S tht tuyt vi nu vo mt ngy no , ch vi mt chic my tnh c ci t mt h iu hnh v mt trnh duyt web duy nht m bn li c th thc hin c nhng cng vic nh son tho vn bn, chnh sa nh, lp bng tnh, chat, chuyn i ti liu trc tuyn... m khng cn phi ci thm bt c mt trnh ng dng no. Chuyn ny hon ton khng ch l mt gic m, bi hin ti n v ang c pht trin di tn gi l Web 2.0. Web 2.0 l th h th hai ca cc dch v ang tn ti trn nn World Wide Web, n cho php mi ngi c th cng tc hay chia s cc thng tin trc tuyn vi nhau. Tri ngc vi th h u, Web 2.0 a ngi s dng ti gn hn cc ng dng chy trn Desktop so vi cc trang web bnh thng ch cha ng cc thng tin dng tnh. Quy c chung v Web 2.0 c a ra ti cc cuc hi tho O'Reilly Media v MediaLive International v pht trin web vo nm 2004. Cc ng dng ca Web 2.0 c s kt hp ca cc cng ngh c pht trin vo cui thp nin 1990, bao gm web service APIs (1998), Ajax (1998) v web syndication (1997). Chng cho php a ln trang web mt s lng ln cc phn mm chy trn nn web. Quy c ny cn bao gm c Blog (trang tin c nhn) v Wiki (t in bch khoa m ngun m). Hin ti Web 2.0 pht trin kh mnh v cc trang web cung cp cc ng dng chy trc tuyn cng c kh nhiu ngi s dng, c th k ra mt s cc trang web sau: Trang web cung cp dch v chat trc tuyn () cho php bn chat thng trn nn web m khng phi ci t cc chng trnh chat thng dng nh Yahoo Messenger, MSN... Trang web cung cp dch v son tho vn bn trc tuyn () cho php bn son tho cc ti liu trc tuyn ging nh son tho bng cc chng trnh bnh thng. Trang web cung cp dch v son tho ti liu a nng () cho php son tho v chnh sa cc loi ti liu vi cc nh dng PDF/DOC/HTML.

Trang web lu tr d liu trc tuyn () cho php lu tr d liu ln n 5 GB v c th truy xut mi lc, mi ni. Ngoi ra n cn tnh nng bo v chng virus v h hng. Trang web gip to cc trang tin c nhn () cho php bn c th to ra cc trang web c nhn vi ni dung ty thch. N cho php a vo cc thng tin hay cc ng dng trc tuyn vo trang c nhn ny. Trang web cung cp dch v tm bn () - (nh) cho php bn tra cu bn ca mi ni trn th gii.

1.1.3. mash up

Cng ngh

Khi Web 2.0 ang dn tr nn thnh hnh th cng vi n cng ngh Mashup ra i v mc d ch mi pht trin trong thi gian gn y nhng n to nn mt cuc cch mng ln trong lnh vc ny. Mashup cho php mi ngi th hin kh nng sng to bt tn bng cch "ni" hai hay nhiu ng dng web li vi nhau. Thut ng ny c ni n lu nhng nay mi c gii cng ngh ch trng hn. Theo t in trc tuyn Wikipedia, Mashup c nh ngha nh mt cng c c kh nng ly thng tin t nhiu ngun d liu khc nhau nhm to ra mt dch v tch hp n nht v hon ton mi m. Ngi s dng khng cn phi am hiu v k thut m ch cn xy dng dch v da trn giao din lp trnh ng dng sn c nh ca Google, Amazon, Flickr... Mashup c phn lm bn loi tiu biu: Consumer mashup: Trch xut d liu khc nhau t nhiu ngun v c tp hp li di mt giao din ha n gin. Data mashup: Trn d liu cng loi t nhiu ngun, chng hn gp d liu t cc RSS feed vo mt feed n nht. Business mashup: S dng c hai loi mashup trn, thng l tch hp data c trong v ngoi cng ty. V d, cng ty bt ng sn A c th phn tch th

phn khi so snh s cn nh h bn c tun qua vi danh sch tng cc ngi nh c bn trn th trng. Telecom mashup l ng dng vin thng tng hp, chng hn kt hp dch v tin nhn t cng ty A, nhc chung ca cng ty B, th thoi (voicemail) ca cng ty C... Mashup th hin r c trng ca Web 2.0 l "c nhn ha thng tin". Chng hn, mt nh lp trnh c th to website chia s nh v video ca ring mnh khi kt hp hai dch v YouTube v Flickr. Hay ngi s dng c th "trn" d liu v tnh trng giao thng H Ni vi Google Maps lp bn cc im thng xuyn tc ng trong thnh ph... Mash-up l nhng cng ty cung cp dch v c kh nng kt hp cc cng ngh Web 2.0 li vi nhau. "Ngay khi Google Maps v Google Earth ra i, nhiu ngi tch hp cng c ny vo trong dch v ca h v kim bn tin, chng hn xy dng bn nhng khu vc nhiu ti phm trong thnh ph", Clark ni. C th k tn nhng mash-up ph bin l RateItAll.com, ni ngi dng a ra nhn xt v bt c th g h thch hoc khng thch, v Like.com, cho php mi ngi tm kim v so snh nhng mt hng tng t th h va mua. "Ch hai ci u v hai chic my tnh thung lng Silicon cng c th lm c v s vic trong mt thi gian ngn. Do , cc nh u t phi lun xc nh cng ty h nh rt vn c nhng c im ni tri so vi s ng", chuyn gia u t mo him Peter Rip nhn xt. Thng thng cc dch v web dng mashup kt hp bn vi nhiu loi d liu t nhiu ngun trn web. Trong nm qua, chng ta chng kin nhiu site mi ni nh ni m, nh Zillow.com d on gi bt ng sn hay AuctionMapper th hin cc kt qu tm kim eBay trn bn gip nh v nhng ngi bn hng gn nht. Nhng mashup cn c th lm c nhiu vic hn l nhng bn c ch gii cho nhng website thng thng. K thut ny cng c th p dng cho nhng ng dng nghip v phc v hot ng ca doanh nghip. V mashup da trn nn tng k thut hin c - JavaScript, XML v DHTML, kt hp vi kt ni Internet tc cao h tr

giao din ha v tnh nng phong ph - nn khng yu cu u t nhiu. Mashup ang bt u c xem xt mt cch nghim tc nh l gii php cho cc vn tch hp, ng dng vn thng l gnh nng trc y. Cch thc tch hp linh hot ny c p dng trc y, nh cc site thng mi in t kt hp d liu gim st ca UPS hay FedEx (cc dch v vn chuyn hng ho) vi thng tin n hng cung cp mn hnh tng hp v tnh trng n hng. Trong mi trng doanh nghip, cc hng cung cp gii php portal (cng thng tin) nh IBM v Plumtree t lu cung cp cc cng c ho cho php kt hp cc ngun d liu mt cch d dng, to nn cc ng dng web ty bin n gin. Trn thc t, chng ta thng gp bn ni dung chnh ca Mashup: Bn : Chng hn ngi dng lp bn v bt ng sn, ca hng qu tng, trng hc... ti mt a phng qua Google Maps. Video - nh: V d nh dng giao din lp trnh ng dng API ca Flickr to mashup chia s nh trn nhng site khc. Tm kim - mua sm: L vic tch hp search engine tra cu thng tin v du lch, nh hng... Tin tc: Tiu biu nht l Digg.com - dch v h tr ngi s dng tp hp tin tc v cng ngh, vn ha... t hng lot website khc nhau. Tuy nhin, v cc mashup d to hn so vi nhiu ng dng truyn thng nn chng c th khng c kim sot k lng v mt bo mt. Nhiu ng dng loi ny da trn JavaScript vn c nhiu k h. Vic ci t thoi mi cc thnh phn mashup bn ngoi l mi him ha v bn khng bit r bn trong n thc hin nhng tc v g. Mc d hp dn vi nhng ng dng pht trin nhanh v gn nh, nhng mashup cng c nhng hn ch. Theo Stefan Andreasen - gim c k thut ca Kapow Technologies, "cc mashup c ngha cho 80% qui trnh CNTT thng thng. Nhng khng cng ty no s dng m hnh nh mashup cho thng tin quan trng".

1.1.4. mash up

M

hnh

Seely Brown khng nh vic thng mi ho nhanh chng phn cng v phn mm cng vi bng thng rng s gip to nn tng cho cc dch v t xy dng trang web phc tp hn. Trong khi , cc trnh duyt ngy cng hin i, cho php cc ng dng web c tnh tng tc cao hn v ngi dng s quen vi vic ho trn thng tin t nhiu ngun khc nhau to ra cc ng dng ca ring h. chnh l mash-up. Nhng cng c ang ni ln nh th s m ng cho nhng ngi dng to ra nhng trang web phc tp hn, trong phi k n s bng n ca blog, Wikis C rt nhiu cch tip cn vi tng cung cp dch v t xy dng trang web. Mt s nh cung cp i theo hng to ra nhng trang web ng s hu l cc Wikis. Nhng cng c nh cung cp li i theo hng a cc ng dng xut bn web trn my tnh bn ln web chnh l blog hay cc trang web c nhn. i lp vi cc cng c xut bn web th h u tin nh FrontPage hay Dreamweaver, rt nhiu dch v cho php ngi dng to ra cc ng dng trc tip t trnh duyt web v lu tr mt trang web hon thin trn chnh my ch ca nh cung cp dch v. Thay v ch n gin xut bn cc trang web, mt s nh cung cp dch v tch hp cc dch v web nh YouTube, Flickr hay Amazon.com cho php ngi dng c th t to ra cc mash-up ca ring h.

1.1.5. kt hp

ng dng

Mt xu hng Web 2.0 ph bin hin nay l mash-up, tc mi ngi kt hp cc b d liu khc nhau to nn mt dch v hoc sn phm mi. Ni n gin, mash-up tng t vic ngi ta tch bi ht trong cc album ca cc ngh s tng thi k... chn ra nhng ca khc m h hi lng nht. Google Maps l nn tng yu thch ca gii to mash-up, nh xy dng bn cha thng tin v ti phm, v cc h dn c hoc bn thu....

.1.2.

Mt s trang web v du lch c s dng bn trc tuyn1.2.1. trang web Gii thiu

Ti a ch www.ciren.gov.vn, ngi truy cp c th xem c bn giao thng; bn h thng cc vn quc gia, khu bo tn, rng ngp mn; bn hin trng s dng t, quy hoch t; thng tin nh hng khng v nh v tinh... Trong cuc sng, do qu bn rn vi nhng cng vic hng ngy m nhng danh lam thng cnh ca nc ta t c cc bn bit n hoc ch bit vi ni quen thuc, ni ting m thi. Trang Web thangcanhdep.com c giao din p mt, b cc r rng, d dng trong vic tra cu v s dng. Website ang hot ng vi gn 100 khu du lch, a im, danh lam thng cnh ca nc ta c sp xp theo tng ch , tng ch mc nh Thng cnh, Du lch bin, Hang ng, Vn quc gia.... Hn th na, cc hnh nh minh ha cho nhng mc ging nh trong tp Atlas Vit Nam, nn cc bn s khng gp phi nhng kh khn trong lc tra cu.

Hnh 1: Hnh nh website c s dng bn trc tuyn

1.2.2. bi ton

Gii thiu

cc trang web trn hu ht ch mang tnh gii thiu v mt hnh nh ca mt vng no trn bn trc tuyn, cha c cc on video qung b, cc on vn m t ngn. Bn cnh hn ch v mt c s d liu nh vic gii thiu hnh nh v cc thnh ph ln ca t nc. V th vic qung b hnh nh ca t nc vi th gii phn no hn ch. Cng vi cc trang web s dng bn trc tuyn, ti xy dng trang web qun l h thng thng tin.Trc ht cho php ngi dng c th xem c thng tin v cc th gm din tch, dn s v mt s thng tin lin quan n th . Bn cnh hin th video v hnh nh v th . ng thi hin th v tr v , kinh ca th trn bn trc tuyn.Ngoi ra trang web cn cho php ngi qun l c th nhp d liu, chn thm d liu, xo hay sa i d liu khi thng tin thay i. y ti s dng cng ngh ASP.NET trn nn Web 2.0. To c s d liu bng SQL server 2005 kt hp vi c s d liu bn Google Map hin th thng tin. Trong chng tip theo chng ta s tm hiu k hn v Google Map API dng c s d liu ca Google Map kt hp vi c s d liu t xy dng

CHNG 2:.2.1. Basics (C bn)

GOOGLE MAP API

2.1.1. the Google Maps API (Ti Google Map API)

Loading

Ly bn t Google Map bng cch Truy cp URL nm trong th javascript s cha cc tt c cc k t c bit v cc nh ngha khi bn cn s dng Google Map API. Trang web phi cha on script s dng kho khi ng nhp vo s dng API . Trong v d ny kho c xem nh "abcdefg" .

2.1.2. Elements

Map DOM

hin th bn ln trang web thng thng ngi ta s dng th div v thit lp cc yu t trong trnh duyt Document Object Model(DOM). Trong v d trn mt div c id l map_canvas v t kch thc s dng cc thuc tnh( rng, chiu cao). C th s dng GmapOptions xy dng bn , s dng kch thc ca nhng i tng cha trong n lm kch thc ca chnh n.

2.1.3. Elementary Object

The

var map = new GMap2(document.getElementById("map_canvas"));

Bn cnh ta c th s dng lp JavaScript cung cp mt bn c t tn GMAP2. Nhng i tng ca lp ny s to nn mt bn n trn web. Ta c to mt trng hp ca lp ny bng cch s dng ton t new ca javascript.

2.1.4. the Map (Khi to bn )

Initializing

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Trc khi vic to mt bn dng hm GMap2, cn phi khi to n. S khi to ny c hon thnh vi s s dng hm setCenter(). Phng php setCenter() yu cu mt ta GLatLng v mc khung nhn bn , phng php ny phi c thc thi trc mi thao tc khc thc hin trn bn .

2.1.5. the Map(Ti bn )

Loading

bo m bn ca ta ch c t ln trang sau khi ti trang t server xong, ta thc hin chc nng xy dng i tng GMap2 .Phn t ca trang HTML nhn c mt s kin onload. V th trnh c hnh vi khng th on trc v a cho chng ta nhiu iu khin trn bn .

2.1.6. and Longitudes (V v kinh )

Latitudes

By gi m chng ta c mt bn , ta cn mt cch thc xc nh v tr trn bn . i tng GLatLng cung cp mt c ch nh vy bn trong bn Google API. Bn xy dng mt i tng GLatLng, cha nhng tham s (ca) n {V , kinh }var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)

Chng hn, mt bn trnh by mt ca s hin thi ca ton b th gii bn trong ci g c bit nh mt viewport. Viewport ny c th nh ngha gn nhng im hnh ch nht . i tng GLatLngBounds cung cp chc nng ny, nh ngha mt vng hnh ch nht s dng hai i tng GLatLng i din cho southwest v nhng gc ng bc.

Hnh 2: Thm 10 v tr nh du khc nhau trn bn function initialize() { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Thm 10 v tr nh du v tr khc nhau trn bn var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point)); } }

2.1.7. Attributes (Thuc tnh bn )

Map

Mc nh bn trong Google API s dng nn tng c v chun.Tuy nhin, nhng bn Google API cng h tr nhng kiu nhng bn khc. Cc loi bn di y l chun G_NORMAL_MAP : Khung nhn mc nh G_SATELLITE_MAP : hnh nh t v tinh

G_HYBRID_MAP : Bn trn gia khung nhn mc nh v khung nhn t v tinh G_DEFAULT_MAP_TYPES : Mt tp hp gm 3 loi trn , hu dng cho vic x l lp. C th thit lp loi bn bng cch s dng phng thc GMap2 objects setMapType() Chng hn, m sau y t bn s dng hnh nh v tinh t Google Earthvar map = new GMap2(document.getElementById("map_canvas")); map.setMapType(G_SATELLITE_MAP);

Bn cng cha ng mt s thuc tnh hu ch cho vic xc nhn. Chng hn, tm ra kch thc ca khung nhn hin ti ta s dng phng thc GMap2 objects getBounds() php tr li mt gi tr GLatLngBounds. Ta c th phng to hoc thu nh bn c nhng khung nhn tu . Ta c th nhn ton b th gii bng cch thu bn nh nht(mc 0) hay phng to cc i c th nhn c tng to nh ring r(mc 19) trong khung nhn bnh thng. Vi khung nhn t v tinh c th phng to n mc 20.Bn c th khi phc mc tng gim hin thi ang s dng bi bn bi vic s dng phng thc GMap2 objects getZoom()

2.1.8. Interactions (Tu bin bn )

Map

N cung cp kh nng tu bin cc i tng ca bn . i tng Gmap2 cung cp 1 s lng cc phng thc cu hnh thay i chnh nhng tc ng ca i tng bn . Bn c th thay i bng mt s phng thc tin ch. V d phng thc Gmap2.disableDragging(). Hu b kh nng ko th bn ti v tr mi.var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); window.setTimeout(function() { map.panTo(new GLatLng(37.4569, -122.1569)); }, 1000);

2.1.9. Windows

Info

var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world"));

.2.2. Event (S kin) 2.2.1. Listeners (Lng nghe s kin) Event

Cc s kin trong Google Map API c x l bng cc chc nng tin ch bn trong name space GEvent to ra 1 i tng event listeners. i tng ny c tc dng lng nghe v bt s kin. V d i tng Gmap2 cung cp cc s kin click, double click v move. Mi s kin s xy ra trong cc ng cnh khc nhau. Khi ngi s dng di chuyn chut s kin mouse move s c thi hnh.Phng thc tnh gevent.addListener() c s dng thng bo mi khi cc s kin xy ra. Phng thc ny ch ra mt i tng, mt s kin c lng nghe v mt hm c khi s kin tng ng xy ra. V d di y s a ra mt thng bo mi khi ngi s dng bm vo bn

Hnh 3: Bt s kin khi click vo bn var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.addListener(map, "click", function() { alert("You clicked the map."); });

Listener c kh nng nm bt ng cnh ca s kin. on code di y s hin th kinh v v ca phn trung tm ca bn .var map = new GMap2(document.getElementById("map")); GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); document.getElementById("message").innerHTML = center.toString(); }); map.setCenter(new GLatLng(37.4419, -122.1419), 13);

2.2.2. Using Closures in Event Listeners (S dng Closuress trong lng nghe s kin)Khi thc thi even listenner s rt d dng nu nh i tng c cha d liu trong n. Javascipt khng h tr trng hp d liu c ng gi nhng n h tr hm closure() cho php cc hm ni ti truy cp n cc bin bn ngoi. Cc even listener() s dng hm ny truy cp cc bin thng khng nm trong cc i tng ca s kin . on code di y s dng hm closure() gn mt thng ip b mt vo mt tp hp marker khi bm vo mi marker s hin th mt phn ca thng ip b mt . Phn thng ip ny khng nm trong ni ti ca marker.

Hnh 4: S dng Closuress trong lng nghe s kinvar map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Creates a marker at the given point // The five markers show a secret message when clicked // but that message is not within the marker's instance data function createMarker(point, number) { var marker = new GMarker(point); var message = ["This","is","the","secret","message"]; marker.value = number; GEvent.addListener(marker, "click", function() { var myHtml = "#" + number + "
" + message[number -1]; map.openInfoWindowHtml(point, myHtml); }); return marker; } // Add 5 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 5; i++) { var point = new GLatLng(southWest.lat() + latSpan *

Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(createMarker(point, i + 1)); }

2.2.3. Using Passed Arguments in Events (Truyn tham s trong s kin)Ta c th truyn tham s vo cc s kin. on code di y, s kin click trn bn truyn 2 tham s overlay v point.var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // ground overlay GEvent.addListener(map,"click", function(overlay,point) { var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(point) + " at zoom level " + map.getZoom(); map.openInfoWindow(point, myHtml); }); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());

.2.3. ConTrol(iu khin) 2.3.1. Overview (Tng quan v iu khin) Controls

Bn c th s dng mt s cng c c sn ca Map API trong bn ca mnh

GlargeMapControl: C nhng nt ln dng di chuyn hnh nh, phng to hoc thu nh bn . GSmallMapControl: C nhng nt nh dng di chuyn hnh nh, phng to hoc thu nh bn . GsmallZoomControl: GscaleControl: c th Co dn bn

GMapTypeControl: Cc nt cho php ngi s dng chuyn i gia cc loi bn GHierarchicalMapTypeControl - a selection of nested buttons and menu items for placing many map type selectors. GOverviewMapControl - Mt bn tng quan c xp li trong gc ca mn nh

Tt c cc iu khin ny c da vo i tng ca GControl Mt s kiu bn : G_NORMAL_MAP : Hin th dng bnh thng, thng l kiu bn 2D ca Google Maps G_SATELLITE_MAP: Hin th hnh nh chp t v tinh G_HYBRID_MAP : Hin th hnh nh chp t v tinh kt hp vi nhng thc th ni bt nh (ng, tn thnh ph.) G_PHYSICAL_MAP : Hin th bn a l da vo thng tin a th.

Theo mc nh, Google Maps API cung cp 3 loi bn : G_NORMAL_MAP, G_SATELLITE_MAP v G_HYBRID_MAP. Bn c th thay i n qua 2 hm do Google Map cung cp l GMAP2.removeMapType() hoc GMAP2.addMapType() on code di y loi b kiu bn G_HYBRID_MAP t nhng kiu bn sn c. Khi ta gi hm GmapTypeControl ch c 2 kiu bn G_NORMAL_MAP v G_SATELLITE c hin thvar map = new GMap2(document.getElementById("map_canvas"), { size: new GSize(640,320) } ); map.removeMapType(G_HYBRID_MAP); map.setCenter(new GLatLng(42.366662,-71.106262), 11); var mapControl = new GMapTypeControl(); map.addControl(mapControl); map.addControl(new GLargeMapControl());

2.3.2. Controls to the Map(Thm 1 iu khin ln bn )

Adding

Thm nhng iu khin bn vi Gmap2 phng thc addControl().V d bn thm iu khin ly ton cnh ca bn map.addControl(new GLargeMapControl());

Bn c th thm nhiu iu khin vo mt bn . Trong trng hp ny chng ta s dng cc iu khin c sn l GsmallMapControl() v GmapTypeControl() cho php quyt, phng to thu nh bn v chuyn i gia 2 kiu Map v Statellite.

Hnh 5: Thm 1 iu khin ln bn var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13);

2.3.3. Positionin g Controls on the Map(V tr iu khin trn bn )Phng thc addControl() vi tham s th 2 tu chn GcontrolPosition cho php bn xc nh v tr ca iu khin trn bn . Di dy l mt s gi tr thch hp cho tham s ny

G_ANCHOR_TOP_RIGHT G_ANCHOR_TOP_LEFT G_ANCHOR_BOTTOM_RIGHT G_ANCHOR_BOTTOM_LEFT Nu nh khng s dng cc gi tr ny th Map API s s dng v tr mc nh c xc nh bi iu khin . GcontrolPosition c th xc nh offset c th ch ra bao nhiu pixel t cc chiu ca bn ti v tr ca iu khin. Offset ny c xc nh bi i tng Gsize. V d ny thm iu khin GmapTypeControl vo gc trn bn phi ca bn vi cch ca cc chiu l 10 pixel. Click dobuble vo mi ch trn bn s chuyn iu khin ny xung gc di bn phi bn var map = new GMap2(document.getElementById"map_canvas")); var mapTypeControl = new GMapTypeControl(); var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)); var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10)); map.addControl(mapTypeControl, topRight); GEvent.addListener(map, "dblclick", function() { map.removeControl(mapTypeControl); map.addControl(new GMapTypeControl(), bottomRight); }); map.addControl(new GSmallMapControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13);

2.3.4. Modifying the Makeup of Standard Controls (Sa cha v to ra nhng iu khin chun)Hu ht cc iu khin trong Google Map API cha nhng phng thc x l chun. Tuy nhin mt s iu khin i hi khi to cho mc ch s dng thch hp. V d iu khin GhierarchicalMapTypeConTrol yu cu 1 s hm khi to hin th cc loi bn bn trong menu vi mt trnh t thch hp

v d ny s v sn 1 li bn di sau to ra GhierarchicalMapTypeControl sp xp cc i tng bn ph ln trn.

Hnh 6: Sa cha v to ra nhng iu khin chun// define the crosshair tile layer and its required functions var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15); crossLayer.getTileUrl = function(tile, zoom) { return "./include/tile_crosshairs.png"; } crossLayer.isPng = function() {return true;} // Create a new map type incorporating the tile layer var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ]; var mtTerCross = new GMapType(layerTerCross, G_PHYSICAL_MAP.getProjection(), "Ter+"); var map = new GMap2(document.getElementById("map_canvas"), { size: new GSize(640,320) } ); map.addMapType(G_PHYSICAL_MAP); map.addMapType(mtTerCross); map.setCenter(new GLatLng(37.4419, -122.1419), 4); var mapControl = new GHierarchicalMapTypeControl(); // Set up map type menu relationships mapControl.clearRelationships(); mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false); mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");

// Add control after you've specified the relationships map.addControl(mapControl); map.addControl(new GLargeMapControl());

2.3.5. Map Controls (iu khin bn tu chn)

Custom

Google Map API cho php cung to ra cc iu khin bn tu bng lp con Gcontrol. to ra 1 iu khin kh dng, bn phi nh ngha b x l cho t nht l 2 phng thc trong lp initalize() v getDefaultPostition(). Phng thc initalize() phi tr gi tr DOM element. Trong khi phng thc getDefaultPosition() phi tr i tng c kiu GcontrolPosition Trong v d ny ta to ra mt iu khin cn chnh kch thc n gin s dng cc link k t ch ko dng cc biu tng ho ging nh trong Google Map

Hnh 7: iu khin bn tu chnfunction TextualZoomControl() { } // To "subclass" the GControl, we set the prototype object to // an instance of the GControl object

TextualZoomControl.prototype = new GControl(); // Creates a one DIV for each of the buttons and places them in a container // DIV which is returned as our control element. We add the control to // to the map container and return the element for the map class to // position properly. TextualZoomControl.prototype.initialize = function(map) { var container = document.createElement("div"); var zoomInDiv = document.createElement("div"); this.setButtonStyle_(zoomInDiv); container.appendChild(zoomInDiv); zoomInDiv.appendChild(document.createTextNode("Zoom In")); GEvent.addDomListener(zoomInDiv, "click", function() { map.zoomIn(); }); var zoomOutDiv = document.createElement("div"); this.setButtonStyle_(zoomOutDiv); container.appendChild(zoomOutDiv); zoomOutDiv.appendChild(document.createTextNode("Zoom Out")); GEvent.addDomListener(zoomOutDiv, "click", function() { map.zoomOut(); }); map.getContainer().appendChild(container); return container; } // By default, the control will appear in the top left corner of the // map with 7 pixels of padding. TextualZoomControl.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,

7)); } // Sets the proper CSS for the given button element. TextualZoomControl.prototype.setButtonStyle_ = function(button) { button.style.textDecoration = "underline"; button.style.color = "#0000cc"; button.style.backgroundColor = "white"; button.style.font = "small Arial"; button.style.border = "1px solid black"; button.style.padding = "2px"; button.style.marginBottom = "3px"; button.style.textAlign = "center"; button.style.width = "6em"; button.style.cursor = "pointer"; } var map = new GMap2(document.getElementById("map")); map.addControl(new TextualZoomControl()); map.setCenter(new GLatLng(37.441944, -122.141944), 13);

.2.4. Overlays(Ph trn bn ) 2.4.1. Map Overlays Overview(Tng quan v vic ph trn bn )Hm Overlay ca Map Api c cc kiu sau : Cc im trn bn hin th khi ta s dng marker() v thng l hin th cc biu tng. Marker l i tng ca Gmaker() v c to khi s dng Gicon(). Cc on thng trn Gmap c hin th khi s dng polylines. on thng l i tng ca Gpolyline().

2.4.2. nh du)

Markers(

Marker xc nh cc im trn bn . Mc nh, marker c th hin bng mt biu tng l G_DEFAULT_ICON. Tuy nhin, biu tng ny c th thay i. Hm khi to Gmarker s dng cc i tng GlatLng v GmarkerOptions lm tham s. Marker l mt i tng c th tng tc c vi cc s kin. V d, ta c th s dng s kin click chut vo marker hin th ca s thng tin v v tr hin ti trn bn .

Hnh 8: nh du 10 v tr ln bn var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());

map.addOverlay(new GMarker(point)); }

2.4.3. Markers (Di chuyn nh du)

Draggable

Marker l i tng c th tng tc v bm hay di chuyn sang v tr mi. Trong v d di y, ta s t mt marker trn bn v xem cch x l mt s s kin n gin ca n. Marker c th di chuyn thc thi 4 loi s kin: click, dragstart, drag v dragend ch ra trng thi di chuyn ca n. Mc nh, cc marker ch c th click c ch khng di chuyn c, do vy cn phi thit t gi tr cho thuc tnh draggable l true.

Hnh 9: Di chuyn nh duvar map = new GMap2(document.getElementById("map_canvas")); var center = new GLatLng(37.4419, -122.1419); map.setCenter(center, 13); var marker = new GMarker(center, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("Just bouncing along..."); }); map.addOverlay(marker);

2.4.4. (Biu tng)

Icons

Marker c th t nh ngha ra mt biu tng ring thay th cho biu tng mc nh. nh ngha ra mt biu tng l vic rt phc tp v s lng nh to ra mt biu tng n l khc nhau trong Map API. Ti thiu, mt biu tng cn phi xc nh ra nh nn, kch thc ca kiu Gsize v offset ca biu tng xc nh v tr biu tng. Cc biu tng n gin nht u da trn kiu G_DEFAULT_ICON. To ra mt biu tng da trn kiu ny cho php bn thay i nhanh chng biu tng mc nh bng cch ch thay i mt s t cc thuc tnh. Trong v d di y, ta to ra mt biu tng s dng kiu G_DEFAULT_ICON v sau sa li bng cch s dng mt hnh nh khcvar map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GSmallMapControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Create our "tiny" marker icon var blueIcon = new GIcon(G_DEFAULT_ICON); blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/bluedot.png"; // Set up our GMarkerOptions object markerOptions = { icon:blueIcon }; // Add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point, markerOptions)); }

Hu ht cc biu tng cha mt nh nn v mt nh bng. nh bng c to ra lch 45 so vi nh nn, gc di bn tri ca nh bng thng hng vi gc di bn

tri ca nh nn ca biu tng. nh bng thng l nh 24 bit PNG vi trong sut alpha. Nh m ng vin hnh nh s xut hin mt cch chnh xc trn bn . V d di y to ra mt kiu biu tng mi. Ta xc nh nh nn, nh bng v cc im m ta s t biu tng vo bn ng thi xc nh c v tr ca s thng tin i km theo biu tng.

Hnh 10: Biu tngvar map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Create our "tiny" marker icon var tinyIcon = new GIcon(); tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; tinyIcon.iconSize = new GSize(12, 20); tinyIcon.shadowSize = new GSize(22, 20); tinyIcon.iconAnchor = new GPoint(6, 20); tinyIcon.infoWindowAnchor = new GPoint(5, 1); // Set up our GMarkerOptions object literal markerOptions = { icon:tinyIcon };

// Add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point, markerOptions)); }

Chng 2 gii thiu v API do google map cung cp v cc cch thc s dng n.Google map API c s dng rng ri trong cc trang web lm v lnh vc bn v ti s dng cng ngh Google Map API trong bi ton ca mnh kt hp vi cng ngh ASP.NET trn nn web 2.0. Di y, ti s m t chi tit h thng bn vi chc nng tra cu n gin v th ca cc nc, km theo nhng on gii thiu ngn v chng.

CHNG 3:

H THNG BN TRC TUYN S DNG GOOGLE MAP API

.3.1. Cc cng ngh s dng 3.1.1. lc v .Net FrameWork S

Mi chc nng ASP.NET c c hon ton da vo .NET framework, do c ch .NET trong ASP.NET. Ta cn phi hiu thu o kin trc h tng ca .NET framework dng ASP.NET mt cch hiu qu, trong quan trng nht l CLR v .NET Framework Class.CLR (COMMON LANGUAGE RUNTIME) CLR l mi trng c dng qun l s thi hnh cc ngun m (manage the execution of code) m ta son ra v bin dch (write and compile code) trong cc ng dng. Tuy nhin khi bin dch ngun m, ta li bin dch chng ra thnh mt ngn ng trung gian gi l Microsoft Intermediate Language (MSIL). Chnh MSIL trung gian ny l ngn ng chung cho tt c cc ngn ng .NET hin c, do chc bn cng on ra l ASP.NET cng c bin dch (compile) ra MSIL nh mi ai khc. Trong khi bin dch nh vy, cc ng dng cng sn xut ra nhng thng tin cn thit t ... qung co chnh mnh, ta gi nhng thng tin ny l metadata. n khi ta chy mt ng dng, CLR s tip qun (take-over) v li bin dch (compile) ngun m mt ln na ra thnh ngn ng gc (native language) ca my vi tnh trc khi thi hnh nhng cng tc c b tr trong ngun m . Ta c th cm thy nhng vic bn rn sau hu trng khi phi ch i 1 khong thi gian cn thit CLR chm dt nhim v ca n khi ln u phi bin dch (compile) v hin th 1 trang Web, nhng ri mi chuyn s xui cho mt mi, cui cng l ta c mt trnh bin dch (compiled code) x dng rt hiu qu.NET FRAMEWORK CLASSES iu quan trng nht m ta cn phi nh l mi th trong .NET u l object, t nh cc trang ASP.NET, cc hp thng ip (message box) hay l nt bm (button), tt c u l object c. Cc object c t chc li thnh tng nhm ring bit nh trong mt th vin ta d dng x dng. Ta gi cc nhm 33

nh vy l namespaces, v ta s dng nhng namespace ny gi hay nhp (import) cc class cn thit cho ng dng ca mnh.

3.1.2. g Ngh ASP.NET3.1.2.1 . Gii thiu v ASP.NET

Cn

Trc ht, h tn ca ASP.NET l Active Server Pages .NET (.NET y l .NET framework). Ni n gin, ngn v gn th ASP.NET l mt cng ngh c tnh cch mng dng pht trin cc ng dng v mng hin nay cng nh trong tng lai (ASP.NET is a revolutionary technology for developing web applications). Bn lu ch ASP.NET l mt phng php t chc hay khung t chc (framework) thit lp cc ng dng ht sc hng mnh cho mng da trn CLR (Common Language Runtime) ch khng phi l mt ngn ng lp trnh. Ngn ng lp trnh c thng dng din t ASP.NET l VB.NET (Visual Basic .NET) v VB.NET ch l mt trong 25 ngn ng .NET hin nay c dng pht trin cc trang ASP.NET m thi. Tuy mang h tn gn ging nh ASP c in nhng ASP.NET khng phi l ASP. Ta s lc y vi khc bit gia ASP.NET v ASP bn c khi nim tng qut v s trnh by thm chi tit khi o su vo tng im c trng (features) ca 3.1.2.2. S khc nhau ca ASP.NET v ASP ASP.NET.ASP.NET i vi lp trnh trn Webserver cng ging nh VB6 i vi lp trnh cho desktop. ASP.NET l hu thn ca ASP, tc l ta c th dng n lp trnh trn Webserver thay g dng cgi-perl hay php. V System Architecture th ASP.NET nm trn .NET Framework nn n tn dng tt c nhng chc nng i tng, Cross Language Inheritance ... ASP.NET c phc tho (re-design) li t s khng, n c thay i tn gc r v pht trin (develop) ph hp vi yu cu hin nay cng nh vch mt hng i vng chc cho tng lai Tin Hc. L do chnh l Microsoft qu chn nn trong vic thm tht v kt hp cc cng dng mi vo cc kiu mu lp trnh hay thit k mng theo kiu c in nn Microsoft ngh rng tt nht l lm li mt kiu mu hon ton mi thay v v vu ch ny ch n vo ASP. l 34

cha k n nhiu pht minh mi ra i sau ny da trn cc khi nim mi m theo xu hng pht trin hin nay ca cng ngh Tin Hc (Information Technology) cn c a vo kiu mu pht trin mi . Nh vy, ta mi c th ni ... khi khi ASP.NET khng phi l ASP. Tht vy , ASP.NET cung cp mt phng php hon ton khc bit vi phng php ca ASP.

.3.2. M t bi ton 3.2.1. t bng li M

Mt trang web c chc nng : Tm kim th trn bn trc tuyn ng thi hin th thng tin gm : video, hnh nh v thng tin text. Trong thng tin text c cha lm 3 phn a l, dn s, thng tin khc. Trong phn a l hin th thng tin v vng ca th , din tch v s bang hoc s qun huyn. Trong phn dn s hin th s dn, mt v dn tc ca th . Cn trong phn thng tin khc hin th m s in thoi, m s bu chnh, m s ISO v m s xe. ng thi vi ngi qun l trang web c th nhp thm nhng thng tin mi v th no , c th chn thm thng tin cng nh xo hoc sa thng tin v mt th .

3.2.2. h s d liuThng tin ti khon

Cc

User

Password

Thng tin th a l Dn s Thng tin khc Video

35

3.2.3. t lp biu ng cnh3.2.3.1 Thit lp biu ng cnh

Thi

3.2.3.2

Biu phn r chc nng

36

3.2.3.3

M t chi tit cc chc nng l

1) ng nhp: Khi ngi s dng thc hin vic nhp user, password v gi cho h thng, h thng s kim tra tnh xc thc v cp quyn cho ngi s dng h thng 2) Thao tc thc hin : i vi ngi qun l h thng cho php c th nhp thm, chn thng tin, xo d liu hay sa thng tin . Sau h thng s cp nht cc thao tc thc hin tc ng ln c s d liu, ng thi thay i c s d liu theo ca ngi qun l. Chc nng ny khng cp quyn cho ngi s dng. 3) Tm kim thng tin : Ngi s dng c th xem thng tin v th nh v phn a l, phn dn s, phn thng tin , video v th . 3.2.3.4 Ti khon Th a l Dn s Thng tin khc Video Lit k h s s dng

37

3.2.3.5 Cc thc th a.Ti khon b. Th c. a l d. Dn s e.Thng tin khc f. Video

Lp ma trn thc th - chc nng

Cc chc nng nghip v ng nhp Cp nht Tm kim

a R

b

c

d

e

f

U R

U R

U R

U R

U R

38

.3.3. Biu lung d liu 3.3.1. u lun d liu mc 0 Bi

3.3.2. hnh d liu : M hnh E-RBc 1 : Lit k chnh xc v chn lc th Ti khon User Password 39 1 2 V V 3

M

Thng tin th M th Tn th Tn quc gia a L M th Vng Din tch S qun/huyn Dn s M th Dn s Mt Dn tc Thng tin khc M th M in thoi M bu chnh M ISO M s xe Video M th Link video

1

2 V V V V

3

V V V V V V V V V V V V V V V V V V

Bc 2 : Xc nh thc th v thuc tnh 40

Ti khon(user, password) Thu d(ma_thu_do, ten_thu_do, ten_quoc_gia); a l(ma_thu_do, vung, dien_tich, so_quan_huyen); Dn s(ma_thu_do, so_dan, mat_do, dan_toc); Thng tin bang_so_xe); khc(ma_thu_do, ma_dienthoai, ma_buuchinh, ma_iso,

Video(ma_thu_do, link video)

3.3.3. uyn m hnh E-R sang m hnh quan h

Ch

.3.4. Thit k c s d liu vt l1. Table : Ti khon Thuc tnh Kiu d liu 41 C Kho

User Password

Nvarchar() Navarchar()

50 50

Kho chnh

2. Table: Th Thuc tnh M th Tn th Tn quc gia Kiu d liu Nvarchar() Navarchar() Numeric() C 50 50 10 Kho Kho chnh

3. Table : a l Thuc tnh M th Vng Din tch S Huyn Qun Kiu d liu Nvarchar() Navarchar() Numeric() Numerice() C 50 50 10 3 Kho Kho chnh

42

4. Table : Dn s Thuc tnh M th Dn s Mt Dn tc Kiu d liu Nvarchar() Numeric() Numeric() Nvarchar() C 50 10 10 50 Kho Kho chnh

5. Table : Thng tin khc Thuc tnh M th M in thoi M Chnh M ISO Bng s xe Bu Kiu d liu Nvarchar() Numeric() Numeric() Nvarchar() Nvarchar() C 50 2 2 50 50 Kho Kho chnh

6. Table : Video Thuc tnh M th M in thoi Kiu d liu Nvarchar() Numeric() C 50 2 Kho Kho chnh

43

.3.5. Thit k v mt giao din 3.5.1. ngi dngCh c mt nut xem thng tin v th

Vi

Hnh 11: Nt xem thng tin Trong bn tri gm danh sch cc th ca cc nc

Hnh 12: Danh sch th cc nc Sau khi la chn th mnh mun xem thng tin v ngi dng click vo xem thng tin th s hin th bn trc tuyn, video, hnh nh v th Trc ht l video, v l kinh v th

44

Hnh 13: Thng tin v video, kinh v trn bn trc tuyn Mt s hnh nh v th

Hnh 14: Mt s hnh nh

3.5.2. ngi qun l

Vi

Cc nt nhp, xa, sa, xem thng tin khi thng tin v bn thay i 45

Hnh 15: Cc nt nhp, xo, sa, cp nht thng tin Vi nt nhp thng tin th khi ngi qun l chn 1 th v click vo xem thng tin s hin th ra video, hnh nh v on ngn m t v th Khi ngi qun l click vo nhp thng tin s hin ra

Hnh 16: nhp thng tin Sau khi ngi qun l click v button kiem tra va nhap tiep th h thng s kim tra th c tn ti th hay khng ?Nu tn ti hin ra form nhp d liu cho th .

Hnh 17: Nhp cc thng tin 46

Vi nt xo thng tin

Hnh 18: Xo th

Sau khi ngi qun l click v button kiem tra va cap nhat th h thng s kim tra th c tn ti th hay khng ?Nu tn ti s xo th khi c s d liu

Vi nt cp nht thng tin

Sau khi ngi qun l click v button kiem tra va cap nhat th h thng s kim tra th c tn ti th hay khng ?Nu tn ti hin ra form cp nht d liu cho th c giao din ging hnh 17.

47

TNG KTTm li, kha lun cung cp nhng kin thc c bn v bn trc tuyn, cc cng ngh h tr nh Web 2.0, ASP.NET v Google Map API. C th, kha lun gm nhng phn sau: 1. Khi nim v bn trc tuyn, cng ngh Web 2.0, ASP.NET, cng ngh mash up. 2. Tng quan v Google Map API3. Xy dng mt h thng bn gm cc chc nng xem thng tin,

nhp thng tin, xo thng tin cng nh sa thng tin i vi c s d liu th . Hin th c video, hnh nh v on ngn m t nh a l, dn s v mt s thng tin khc lin quan ti th . trn nn Web 2.0 vi cng ngh ASP.NET, s dng Google Map API. Do hn ch v mt thi gian cng nh kin thc, kha lun cn nhiu sai st v thiu chi tit, rt mong c s ng gp ca cc thy/ c v cc bn cun lun vn c hon thin hn. Hng pht trin ca ti:1. Xy dng trang web hon thin hn v mt giao din cng nh chc nng.

C th kim sot c li v sa li khi ngi dng hoc ngi qun l trang web c nhng thao tc sai i vi c s d liu.2. Trc ht tin ti xy dng cnh p ca cc thnh ph cng nh thng

cnh p ca cc a danh ni ting Vit Nam gii thiu vi bn b quc t.3. Xy dng c mt c s d liu hon chnh vi nhiu thng tin v d

liu v bn .

48