Tutorial Google Map API : Membuat Peta lokasimu sendiri

Google Map API merupakan aplikasi interface yang dapat diakses lewat javascript agar Google Map dapat ditampilkan pada halaman web yang akan dibangun. Untuk dapat mengakses dan menampilkan Google Map pada web maka dibutuhkan sebuah API Key terlebih dahulu, dimana API Key ini didapatkan dengan cara login/signup terlebih dahulu dan menggunakan akun di Google/Gmail untuk mendaftarkan alamat web yang akan dibangun sebagai tempat ditampilkannya peta dari Google Map tersebut.

Untuk mencoba tutorial berikut yang harus kamu siapkan adalah :

• 1.       Sebuah Akun google (gmail)
• 2.       Pengetahuan dasar html
• 3.       Pengetahuan dasar JavaScript

Setelah memiliki sebuah akun google/gmail (tentunya) yang pertama kita mesti lakukan adalah mendapatkan  Google Map API Key , dimana Map API adalah berisi sebaris kode yang nantinya akan kita gunakan untuk menampilkan peta google di halaman web yang kita buat. Untuk mendapatkan API Key tsb kamu harus login terlebih dahulu menggunakan akun google melalui gmail setelah itu Gnerate API KEYmu  melalui link berikut http://www.google.com/apis/maps/signup.html  .

 

Pada My web site URL isikan URL web yang akan kita daftarkan (alamat web kita yang akan kita gunakana untuk menampilkan peta),  oiya ingat satu API Key hanya dapat digunakan pada satu URL web jadi API Key yang sudah kita daftarkan di suatu URL web tidak akan dapat kita pindahkan ke URL atau alamat web lainya.

Setelah kita masukan alamat web kita pada kotak my web site URL dan klik generate API Key maka API Key yang kita butuhkan akan muncul. Akan muncul 3 macam API KEY yakni :

• 1.       JavaScript Maps API Example
• 2.       Maps API for Flash Example
• 3.       HTTP Service Example

Karena kita akan membuat sebuah halaman web maka API KEY yang akan kita gunakan adalah API KEY yang pertama “JavaScript Maps API” kemudian kopi APY key tersebut dan taruh di halaman web kita beserta kode program untuk menampilkan petanya (google map api).

Contoh API KEY yang saya dapatkan adalah

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUMmH33A"
      type="text/javascript"></script>

Dan berikut ini adalah scripts (sederhana) program Google Map API untuk menampilkan peta google di web kita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUMmH33A"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-7.797224,110.368797), 17);
map.setMapType(G_HYBRID_MAP);

map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());

var marker = new GMarker(new GLatLng(-7.797224,110.368797));
map.addOverlay(marker);
marker.openInfoWindowHtml("<img src='http://static.kaskus.us/images/smilies/cystg.gif' width='70' height='50'/> <br/> Kota Yogyakarta<br/>titik koordinat latitude/longitude yang kamu masukan disini ");
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>

Kemudian Simpan script tersebut ke dalam format html atau php kemudian upload ke web hosting kamu.. setelah itu buka web tersebut secara online dan lihat hasilnya , peta rumah kamu sudah ditandai dan ditampilkna dalam bentuk peta google .

Keterangan Script:

1.    Google Map API Key

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUMmH33A"
      type="text/javascript"></script>
    <script type="text/javascript">

Script diatas adalah google Map API Key nya.

2.    Titik tengah koordinat :

map.setCenter(new GLatLng(-7.797224,110.368797), 17);

Script diatas berarti saat peta pertama kali dibuka titik tengah peta akan berada di koordinat  -7.797224,110.368797 (Koordinate kota Yogyakarta) dengan zoom 17.

Bagaimana cara mendapatkan koordinat rumah saya?

1. buka saja http://maps.google.com.
2.  Klik my place
3. Dibawahnya akan muncul alamat lokasi kamu (pilih lokasi tsb dan peta akan mengarah ke lokasi tsb)
4.  Pada pojok kanan atas klik icon link
5.  Lihat link yang diatas akan muncul   :                                                                           http://maps.google.com/maps/myplaces?hl=en&ll=-7.811153,110.363846&spn=0.010672,0.01929&sll=37.0625,-95.677068&sspn=23.875,57.630033&vpsrc=0&ctz=-420&z=16&iwloc=A
6.  Pada script diatas Koordinat lokasinya adalah -7.811153,110.36384

 

3.       Komponen-komponen dalam peta :

map.setMapType(G_HYBRID_MAP); 

artinya >> pertama kali map dibuka akan ditampilkan dalam mode hybrid (citrasatelit)

map.addControl(new GSmallMapControl());

>> Map control diaktifkan (tanda untuk menggeser-geser peta)

map.addControl(new GScaleControl());

>> Scale control diaktifkan (tanda untuk zoom in / zoom out peta)

map.addControl(new GMapTypeControl());

>> Map type control diaktifkan (pilihan untuk menampilkan peta dalam mode hybrid, satelit, atau map2d)

map.addControl(new GOverviewMapControl());

>> Mapp overview diaktifkan untuk melihat peta dari jarak lebih jauh (ada dibagian pojok kanan bawah)

4.       Letak Marker

       var marker = new GMarker(new GLatLng(-7.797224,110.368797));

       >> Sebuah marker terletak di titik -7.797224,110.368797

marker.openInfoWindowHtml("<img src='http://static.kaskus.us/images/smilies/cystg.gif' width='70' height='50'/> <br/> Kota Yogyakarta<br/>titik koordinat latitude/longitude yang kamu masukan disini ");

>> Script diatas untuk menambahkan Info marker berupaa gambar dan teks

5.       Ukuran Peta

<div id="map" style="width: 800px; height: 600px"></div>

>> Ukuran peta 800x600px

Hasilnya akan terlihat seperti pada link berikut :
http://fbox.freetzi.com/files/mappost13.html



Coming Soon !

Tutorial Google Map API ( SQL / PHP ): mengambil data dari  database dan menampilkan sebagai marker .

Continue reading →

FunScripts : Gambar-gambar berterbangan di web browsermu..

Bosen facebookan? bosen browsing atau bosen koneksi internetmu lemot .. buat kamu yang suka bereksperimen yuk coba eksperimen berikut ini yang tentunya bakal bikin kamu gak terkagum-kagum... langsung aja buka browser kamu si rubah ap i.. kemudian pastekan semua rumus-rumus script berikut ini (yang ada dalam field) ke address di web browsermu.. dan liat hasilnya.. 

Oiya karena script2 ini akan memainkan gambar2 yang ada di web browsermu.. maka untuk mencoba script2 tsb kamu harus membuka halaman web yang banyak gambarnya, misal kamu bisa membuka google gambar trus setelah gambar terbuka semua masukan script2 nya.. 

 

Script 1 : Twister
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);


Script 2 : Quake
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0)


Script 3 : snake
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',50); void(0);


Script 4 : Roller Coster
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*1+i*x2+x3)*x1+x2)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',50); void(0);

Continue reading →

Dasar Pemprograman Google Map API V3 (Part 1) : The "Hello, World" of Google Maps v3

 

Cara termudah untuk mulai belajar tentang Google Maps API adalah untuk melihat contoh sederhana. Kali ini di BlogNetizen, saya akan memberikan contoh paling dasar dalam pemprograman Google Map API versi 3 yakni menampilkan peta sederhana. Pada Google Map API 3 akan banyak terlihat sama dengan versi sebelumnya (versi 2). Namun, ada beberapa perbedaan, jadi silakan membaca dokumen ini :D

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="petajogja"
5. content="initial-scale=1.0, user-scalable=no" />
6. <style type="text/css">
7. html { height: 100% }
8. body { height: 100%; margin: 0px; padding: 0px }
9. #map_canvas { height: 100% }
10. </style>
11. <script type="text/javascript"
12. src="http://maps.google.com/maps/api/
13. js?sensor=set_to_true_or_false">
14. </script>
15. <script type="text/javascript">
16. function initialize() {
17. var latlng = new google.maps.LatLng(-7.808671167743087, 110.36560535430908);
18. var myOptions = {
19. zoom: 8, center: latlng,
20. mapTypeId: google.maps.MapTypeId.ROADMAP
21. };
22. var map = new google.maps.Map
23. (document.getElementById("map_canvas"),
24. myOptions);}
25. </script>
26. </head>
27. <body onload="initialize()">
28. <div id="map_canvas"
29. style="width:100%; height:100%"></div>
30. </body>
31. </html>

dari contoh script sederhana diatas,
    1. aplikasi menggunakan HTML5  dengan deklarasi <!DOCTYPE html> .
    2. Maps JavaScript API menggunakan tag script.
    3. elemen div bernama "map_canvas" untuk petanya.
    5. fungsi JavaScript ditulis untuk membuat "peta"objek.

1. function initialize() {var latlng = new google.maps.LatLng
2. (-7.808671167743087, 110.36560535430908); var myOptions = 
3. {zoom: 8,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP}; 
4. var map = new google.maps.Map(document.getElementById
5. ("map_canvas"),myOptions);
6. }

Keterangan dari script diatas bahwa peta pertama saat ditampilkan, maka titik tengah peta berada di koordinat peta Yogyakarta (-7.808671167743087, 110.36560535430908)
, dengan Zoom tingkat 8 (semakin besar nilainya semakin dekat petanya), peta ditampilkan dalam type RoadMap. Dan Pada contoh di atas, kita mendefinisikan

bernama "map_canvas"

Type peta lainny
    *  ROADMAP menampilkan peta 2D dari Google Maps.
    * SATELLITE menampilkan peta Citra Satelit dari Google Maps.
    * HYBRID menampilkan peta Citra Satelit bserta nama jalan dan kotanya dari Google Maps.
    * TERRAIN menampilkan bentuk permukaan bumi .

1. id="map_canvas" style="width:100%; height:100%"&gt;

Peta yang telah didefiniskan dalam div id="map_canvas" ditampilkan dalam ukuran panjang dan lebar 100% / satu layar penuh. Ukuran dapat kita sesuaikan dengan kebutuhan.. :D

Hasilnya dapat kamu lihat disini >> Peta Jogja 

Ok begitu saja, tunggu tutorial berikutnya masih di www.blognetizen.blogspot.com :D

Artikel terkait :
Tutorial Google Map API : Membuat Peta lokasimu sendiri
 

 

Continue reading →

Cara pasang flash di blog

Dengan adanya gambar flash di blog kita tentunya akan membuat blog kita lebih menarik dan animatif. berikut langkah memasang gambar flash di blog...

1. Buatlah gambar flash dengan menggunakan macromedia flash atau software lainnya.
2. Upload ke hosting pilihan anda, kalau saya sendiri menggunakan hosting di ripway.com
2. Login ke blogger kemudian pilih menu "Layout".
3. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.
4. Pilih "HTML/Javascript" kemudian taruh script berikut :

<embed src="http://h1.ripway.com/hidra3/tutor.swf" quality="high" bgcolor="white" width="300" height="300" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

* Ganti "http://h1.ripway.com/hidra3/tutor.swf" dengan alamat file flash kamu yang telah ditaruh di hosting.
* Ganti width="300" height="300 dengan ukuran dari file flashmu.

Continue reading →

Try it...!!!

Bagi kamu yang berkunjung ke blogku mungkin posting ini gak penting.. maksud posting ini cuma sebagai selingan dan hiburan.. cs ini semua cuma untuk ujicoba script aja :D ...

berikut game aneh yang mungkin tidak menghibur... :p
kalau bisa menang.. hebat deh, hadiahnya 1 buah piring cantik (wakss)...........!!!

Continue reading →

Sekilas tentang SQL injection

SQL Injection merupakan sebuah cara yang dilakukan oleh seorang hacker untuk masuk kedalam sistem menggunakan sebuah kesalahan yang terjadi pada satu syntax didalam sebuah program PHP/ASP sebuah web. Teknik ini memungkinkan seseorang dapat login kedalam sistem tanpa harus memiliki account. Selain itu SQL injection juga memungkinkan seseorang merubah, menghapus, maupun menambahkan data–data yang berada didalam database.Bahkan yang lebih berbahaya lagi yaitu mematikan database itu sendiri, sehingga tidak bisa memberi layanan kepada web server. Nah biasanya hacker akan mencoba melakukan uji ketahanan sebuah website dengan mencari celah masuk! Jika udah dapat, si hacker akan mencoba untuk melakukan manipulasi. Seorang hacker dapat menyusup ke sebuah situs dan mengobrak-abrik isi database dengan cara sql injection. Cara ini sebenarnya sama saja seorang pencuri yang akan merampok sebuah rumah kosong, anggap saja si pencuri adalah attacker/hacker dan rumah kosong tersebut adalah situs web trus cara pertama yang dilakukan pencuri adalah dengan memantau dan mempelajari rumah tersebut dan mencari cara bagaimana agar dapat masuk kerumah tersebut, begitu juga dengan attacker cara pertama yang dilakukan dengan menentukan lubang mana yang bisa di-inject dengan jalan berjalan-jalan (enumeration) dulu di site tsb. Ada 2 model cara input parameter, cara memasukkan lewat input box dan memasukkannya lewat alamat URL.

SQL Injection attack memanfaatkan kelemahan dalam bahasa pemprograman scripting pada SQL maksudnya adalah memanfaatkan teknik string building untuk mengeksekusi/menjalankan kode SQL. Jadi prinsip dasar SQL Injection sebenarnya memanfaatkan kode insecure (tidak aman) atas sebuah sistem yg terhubung ke internet dalam upaya melangkahi command (perintah) dan secara langsung menuju ke database untuk kemudian mengambil keuntungan dari sistem yg dijamin aman untuk melakukan pengambilan atau pengubahan atau lain sebagainya oleh penyerang. Keuntungan yg diambil adalah seperti login akses terhadap server yg bukan haknya atau yg lainnya, tergantung kepada penyerangnya.

Implementasi SQL Injection

1) Masuk ke google atau browse yg lain

2) Masukkan salah satu keyword berikut

"/admin.asp"

"/login.asp"

"/logon.asp"

"/adminlogin.asp"

"/adminlogon.asp"

"/admin_login.asp"

"/admin_logon.asp"

"/admin/admin.asp"

"/admin/login.asp"

"/admin/logon.asp"

{bisa tambahi sendiri sesuai keinginan kamu}





3) Bukalah salah satu link yang ditemukan oleh google, kemungkinan kamu akan menjumpai sebuah halaman login (user name danpassword).

4) Masukkan kode berikut :

User name : ` or `a'='a

Password : ` or `a'='a (termasuk tanda petiknya)

5) Jika berhasil, kemungkinan kamu akan masuk ke admin panel, di mana kamu bisa menambahkan berita, mengedit user yang lain, merubah about, dan lain-lain.

6) Jika tidak berhasil, cobalah mencari link yang lain yang ditemukan oleh google.

7) Banyak variasi kode yang mungkin, antara lain :

User name : admin

Password : ` or `a'='a

atau bisa dimasukkan ke dua–duanya misal :

‘ or 0=0 -- ; “ or 0=0 -- ; or 0=0 -- ; ‘ or 0=0 # ;

“ or 0=0 # ; ‘ or’x’=’x ; “ or “x”=”x ; ‘) or (‘x’=’x

8) Cobalah sampai berhasil hingga kamu bisa masuk ke admin panel

Cara pencegahan SQL INJECTION

1. Batasi panjang input box (jika memungkinkan), dengan
   
   cara membatasinya di kode program, jadi si cracker pemula akan bingung sejenak melihat input box nya gak bisa diinject dengan perintah yang panjang.


2. Filter input yang dimasukkan oleh user, terutama penggunaan tanda kutip tunggal (Input Validation).


3. Matikan atau sembunyikan pesan-pesan error yang keluar dari SQL Server yang berjalan.


4. Matikan fasilitas-fasilitas standar seperti Stored Procedures, Extended Stored Procedures jika memungkinkan.


5. Ubah "Startup and run SQL Server" menggunakan low privilege user di SQL Server Security tab.

Hacker tidak merusak...

Hacker merupakan julukan yang diberikan kepada seseorang yang mampu menyusup ke jaringan suatu komputer tanpa diketahui. Semakin aman suatu sistem jaringan komputer maka sang hacker akan semakin tertantang untuk menembus celah keamanan pada jaringan komputer tersebut. Pada dasarnya seorang hacker hanya mempunyai keinginan untuk menembus celah keamanan jaringan komputer tanpa bermaksud merusak ataupun menghapus data dari jaringan tersebut. Bahkan dalam komunitas hacker ada kode-kode etik yang harus diambil sebagai pegangan seperti :

• Dilarang untuk menghapus / merusak apapun dalam sistem jaringan tersebut.
• Bila selesai masuk ke jaringan harus mengembalikan sesuatu seperti semula.
• Memberitahukan ke sang admin bahwa sistem jaringan telah berhasil ditembus dan bahkan ada yang memberi petunjuk ke admin mana saja celah yang dapat ditembus oleh sang hacker.

Sebelum istilah cracker diperkenalkan, sebenarnya ada 2 julukan yakni hacker putih dan hacker hitam. Cracker mirip sekali dengan hacker tetapi biasanya tujuan dari seorang cracker adalah negatif seperti merusak jaringan, mencuri data, mengcrack program,dsb.

Continue reading →

Apa sih CMS ?

Mungkin banyak diantara kita, khususnya kita-kita yang tidak terlalu mengerti dengan dunia web, yang tidak tahu tentang apa itu yang dimaksud dengan CMS. hanya kita yang merasa masuk orang computer, jurusan teknik informatika atau ahli dalam web programming yang sudah sangat mengenal dengan arti kata CMS. Postingan kali ini saya akan menjelaskan untuk kamu-kamu yang belum mengertiu arti dari CMS atau Content Management System . CMS (Content Management System) Sebuah sistem yang memberikan kemudahan kepada para penggunanya dalam mengelola dan mengadakan perubahan isi sebuah website dinamis tanpa sebelumnya dibekali pengetahuan tentang hal-hal yang bersifat teknis. Dengan demikian, setiap orang, penulis maupun editor, setiap saat dapat menggunakannya secara leluasa untuk membuat,menghapus atau bahkan memperbaharui isi website tanpa campur tangan langsung dari pihak webmaster. Intinya dengan CMS kita hanya tinggal merakit untuk membuat sebuah website dengan plugin-plugin yang telah disediakan (kita cari di internet) sedangkan tanpa CMS kita harus membuat script-scriptnya dari nol sampe terbentuklah sebuah website yang rumit.

macam-macam cms

Pemanfaatan CMS
CMS pada prinsipnya dapat dipergunakan untuk berbagai macam keperluan dan dalam berbagai kondisi, seperti untuk:

1. Mengelola website pribadi.
2. Mengelola website perusahaan/bisnis.
3. Portal atau website komunitas.
4. Galeri foto, dan lain sebagainya.
5. Forum.
6. Aplikasi E-Commerce.
7. Dan lain-lain

Banyak penyedia CMS sekarang ini, baik itu gratis maupun berbayar. Berikut beberapa situs yang menyediakan CMS dan bisa langsung di download.
• drupal-id.com
• wordpress.com
• mambo-id.com
• joomla-id.com
• cmsindonesia.com

Continue reading →