Dynamic Blinkie Text Generator at TextSpace.net

Feedburner

I heart FeedBurner

Jumat, 31 Maret 2017

Driver DELL Inspiron

Kalau mau downlod ini linknya:
http://www.notebook-driver.com/dell-inspiron-11-3162-laptop-driver-software/

Install Temviewer di linux ubuntu

Kalau mau install teamviewer di linux ubuntu silahkan download aplikasi deb nya di :
https://www.teamviewer.com/id/download/linux/

Cara install mysql di linux

Cara install mysql di linux via terminal :

Introduction

MySQL is an open-source database management system, commonly installed as part of the popular LAMP (Linux, Apache, MySQL, PHP/Python/Perl) stack. It uses a relational database and SQL (Structured Query Language) to manage its data.
The short version of the installation is simple: update your package index, install the mysql-server package, and then run the included security and database initialization scripts.
  • sudo apt-get update
  • sudo apt-get install mysql-server
  • sudo mysql_secure_installation
  • sudo mysql_install_db
This tutorial will explain how to install MySQL version 5.5, 5.6, or 5.7 on a Ubuntu 14.04 server. If you want more detail on these installation instructions, or if you want to install a specific version of MySQL, read on. However, if you're looking to update an existing MySQL installation to version 5.7, you can read this MySQL 5.7 update guide instead.

Prerequisites

To follow this tutorial, you will need:

Step 1 — Installing MySQL

There are two ways to install MySQL. You can either use one of the versions included in the APT package repository by default (which are 5.5 and 5.6), or you can install the latest version (currently 5.7) by manually adding MySQL's repository first.
If you want to install a specific version of MySQL, follow the appropriate section below. To help you decide which version is best for you, you can read MySQL's introduction to MySQL 5.5, then what's new in MySQL 5.6 and what's new in MySQL 5.7.
If you're not sure, you can just use the mysql-server APT package, which just installs the latest version for your Linux distribution. At the time of writing, that's 5.5, but you can always update to another version later.
To install MySQL this way, update the package index on your server and install the package with apt-get.
  • sudo apt-get update
  • sudo apt-get install mysql-server
You'll be prompted to create a root password during the installation. Choose a secure one and make sure you remember it, because you'll need it later. Move on to step two from here.

Installing MySQL 5.5 or 5.6

If you want to install MySQL 5.5 or 5.6 specifically, the process is still very straightforward. First, update the package index on your server.
  • sudo apt-get update
Then, to install MySQL 5.5, install the mysql-server-5.5 package.
  • sudo apt-get install mysql-server-5.5
To install MySQL 5.6, install the mysql-server-5.6 package instead.
  • sudo apt-get install mysql-server-5.6
For both options, you'll be prompted to create a root password during the installation. Choose a secure one and make sure you remember it, because you'll need it later.

Installing MySQL 5.7

If you want to install MySQL 5.7, you'll need to add the newer APT package repository from the MySQL APT repository page. Click Download on the bottom right, then copy the link on the next page from No thanks, just start my download. Download the .deb package to your server.
  • wget http://dev.mysql.com/get/mysql-apt-config_0.6.0-1_all.deb
Next, install it using dpkg.
  • sudo dpkg -i mysql-apt-config_0.6.0-1_all.deb
You'll see a prompt that asks you which MySQL product you want to configure. The MySQL Server option, which is highlighted, should say mysql-5.7. If it doesn't, press ENTER, then scroll down to mysql-5.7 using the arrow keys, and press ENTER again.
Once the option says mysql-5.7, scroll down on the main menu to Apply and press ENTER again. Now, update your package index.
  • sudo apt-get update
Finally, install the mysql-server package, which now contains MySQL 5.7.
  • sudo apt-get install mysql-server
You'll be prompted to create a root password during the installation. Choose a secure one and make sure you remember it, because you'll need it later.

Step 2 — Configuring MySQL

First, you'll want to run the included security script. This changes some of the less secure default options for things like remote root logins and sample users.
  • sudo mysql_secure_installation
This will prompt you for the root password you created in step one. You can press ENTER to accept the defaults for all the subsequent questions, with the exception of the one that asks if you'd like to change the root password. You just set it in step one, so you don't have to change it now.
Next, we'll initialize the MySQL data directory, which is where MySQL stores its data. How you do this depends on which version of MySQL you're running. You can check your version of MySQL with the following command.
  • mysql --version
You'll see some output like this:
Output
mysql  Ver 14.14 Distrib 5.7.11, for Linux (x86_64) using  EditLine wrapper
If you're using a version of MySQL earlier than 5.7.6, you should initialize the data directory by running mysql_install_db.
  • sudo mysql_install_db
Note: In MySQL 5.6, you might get an error that says FATAL ERROR: Could not find my-default.cnf. If you do, copy the /usr/share/my.cnf configuration file into the location that mysql_install_db expects, then rerun it.
  • sudo cp /etc/mysql/my.cnf /usr/share/mysql/my-default.cnf
  • sudo mysql_install_db
This is due to some changes made in MySQL 5.6 and a minor error in the APT package.

The mysql_install_db command is deprecated as of MySQL 5.7.6. If you're using version 5.7.6 or later, you should use mysqld --initialize instead.
However, if you installed version 5.7 from the Debian distribution, like in step one, the data directory was initialized automatically, so you don't have to do anything. If you try running the command anyway, you'll see the following error:
Output
2016-03-07T20:11:15.998193Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.

Step 3 — Testing MySQL

Regardless of how you installed it, MySQL should have started running automatically. To test this, check its status.
  • service mysql status
You'll see the following output (with a different PID).
Output
mysql start/running, process 2689
If MySQL isn't running, you can start it with sudo service mysql start.
For an additional check, you can try connecting to the database using the mysqladmin tool, which is a client that lets you run administrative commands. For example, this command says to connect to MySQL as root (-u root), prompt for a password (-p), and return the version.
  • mysqladmin -p -u root version
You should see output similar to this:
Output
mysqladmin  Ver 8.42 Distrib 5.5.47, for debian-linux-gnu on x86_64
Copyright (c) 2000, 2015, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Server version      5.5.47-0ubuntu0.14.04.1
Protocol version    10
Connection      Localhost via UNIX socket
UNIX socket     /var/run/mysqld/mysqld.sock
Uptime:         4 min 15 sec

Threads: 1  Questions: 602  Slow queries: 0  Opens: 189  Flush tables: 1  Open tables: 41  Queries per second avg: 2.360
This means MySQL is up and running.
Sumber : https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-14-04

Sabtu, 25 Maret 2017

OSPF mikrotik

Open Shortest Path First (OSPF) adalah sebuah protokol routing otomatis (Dynamic Routing) yang mampu menjaga, mengatur dan mendistribusikan informasi routing antar network mengikuti setiap perubahan jaringan secara dinamis. Pada OSPF dikenal sebuah istilah Autonomus System (AS) yaitu sebuah gabungan dari beberapa jaringan yang sifatnya routing dan memiliki kesamaan metode serta policy pengaturan network, yang semuanya dapat dikendalikan oleh network administrator. Dan memang kebanyakan fitur ini diguakan untuk management dalam skala jaringan yang sangat besar. Oleh karena itu untuk mempermudah penambahan informasi routing dan meminimalisir kesalahan distribusi informasi routing, maka OSPF bisa menjadi sebuah solusi.
OSPF termasuk di dalam kategori IGP (Interior Gateway Protocol) yang memiliki  kemapuan Link-State dan Alogaritma Djikstra yang jauh lebih efisien dibandingkan protokol IGP yang lain. Dalam operasinya OSPF menggunakan protokol sendiri yaitu protokol 89.
Cara Kerja OSPF
Berikut adalah sedikit gambaran mengenai prinsip kerja dari OSPF:
  • Setiap router membuat Link State Packet (LSP)
  • Kemudian LSP didistribusikan ke semua neighbour menggunakan Link State Advertisement (LSA) type 1 dan menentukan DR dan BDR dalam 1 Area.
  • Masing-masing router menghitung jalur terpendek (Shortest Path) ke semua neighbour berdasarkan cost routing.
  • Jika ada perbedaan atau perubahan tabel routing, router akan mengirimkan LSP  ke DR dan BDR melalui alamat multicast 224.0.0.6
  • LSP akan didistribusikan oleh DR ke router neighbour lain dalam 1 area sehingga semua router neighbour akan melakukan perhitungan ulang jalur terpendek.
Konfigurasi OSPF - Backbone Area
OPSF merupakan protokol routing yang menggunakan konsep hirarki routing, dengan kata lain OSPF mampu membagi-bagi jaringan menjadi beberpa tingkatan. Tingakatan-tingkatan ini diwujudkan dengan menggunakan sistem pengelompokan yaitu area.
OSPF memiliki beberapa tipe area diantaranya:
  • Bakcbone - Area 0 (Area ID 0.0.0.0) -> Bertanggung jawab mendistribusikan informasi routing antara non-backbone area. Semua sub-Area HARUS terhubung dengan backbone secara logikal.
  • Standart/Default Area -> Merupakan sub-Area dari Area 0. Area ini menerima LSA intra-area dan inter-area dar ABR yang terhubung dengan area 0 (Backbone area).
  • Stub Area -> Area yang paling "ujung". Area ini tidak menerima advertise external route (digantikan default area).
  • Not So Stubby Area -> Stub Area yang tidak menerima external route (digantikan default route) dari area lain tetapi masih bisa mendapatkan external route dari router yang masih dalam 1 area.

Studi Kasus
Kali ini kita akan mencoba melakukan implementasi untuk konfigurasi Backbone - Area 0 pada OSPF. Adapun langkah-langkahnya cukup mudah. Disini kami mempunyai 3 router dengan masing-masing router memiliki jaringan LAN. Kita akan mencoba supaya setiap jaringan LAN pada ketiga router tersebut bisa saling komunikasi tanpa kita tambahkan rule static route secara manual. Untuk gambaran topologi bisa dilihat pada tampilan berikut.




Konfigurasi dari setiap router juga sama tidak ada perbedaan. Langkah awal kita masuk pada menu Routing -> OSPF -> Network. Kemudian tambahkan network yang terdapat di router.



OSPF Networks - Router Pertama


OSPF Networks - Router Kedua


OSPF Networks - Router Ketiga
Setelah kita menambahkan network pada masing-masing router, jika kita melihat pada OSPF -> Interfaces maka secara otomatis akan muncul interface router dimana network tersebut terpasang. Dengan kita menambahkan network itu secara otomatis pula OSPF pada masing-masing router telah aktif.
Pada menu IP -> Routes juga akan ditambahkan secara dinamis rule routing baru dengan flag DAo (Dinamic, Active, Ospf).


Nah, sampai pada langkah ini seharusnya jika kita melakukan test ping maka setiap jaringan lokal sudah bisa reply. Dan berarti konfigurasi untuk OSPF Backbone (Area 0) telah selesai. Cukup mudah bukan?!.

BGP Routing

Network - Pengertian Border Gateway Protocol (BGP) merupakan salah satu jenis routing protokol yang digunakan untuk koneksi antar Autonomous System (AS), dan salah satu jenis routing protokol yang banyak digunakan di ISP besar (Telkomsel) ataupun perbankan. BGP termasuk dalam kategori routing protokol jenis Exterior Gateway Protokol (EGP).

Dengan adanya EGP, router dapat melakukan pertukaran rute dari dan ke luar jaringan lokal Auotonomous System (AS). BGP mempunyai skalabilitas yang tinggi karena dapat melayani pertukaran routing pada beberapa organisasi besar. Oleh karena itu BGP dikenal dengan routing protokol yang sangat rumit dan kompleks.
Image
Gambar BGP

Karakteristik BGP
Menggunakan algoritma routing distance vektor.Algoritma routing distance vector secara periodik menyalin table routing dari router ke router. Perubahan table routing di update antar router yang saling berhubungan pada saat terjadi perubahan topologi.
Digunakan antara ISP dengan ISP dan client-client.
Digunakan untuk merutekan trafik internet antar autonomous system.
BGP adalah Path Vector routing protocol.Dalam proses menentukan rute-rute terbaiknya selalu mengacu kepada path yang terbaik dan terpilih yang didapatnya dari router BGP yang lainnya.
Router BGP membangun dan menjaga koneksi antar-peer menggunakan port nomor 179.
Koneksi antar-peer dijaga dengan menggunakan sinyal keepalive secara periodik.
Metrik (atribut) untuk menentukan rute terbaik sangat kompleks dan dapat dimodifikasi dengan fleksibel.
BGP memiliki routing table sendiri yang biasanya memuat prefiks-prefiks routing yang diterimanya dari router BGP lain
Mengapa BGP?
BGP memiliki kemampuan untuk mengontrol dan mengatur trafik-trafik dari sumber berbeda di dalam network multi-home (tersambung ke lebih dari 1 ISP/Internet Service Provider). Tujuan utama BGP adalah untuk memperkenalkan kepada publik di luar network (upsteram provider atau peer) tentang rute atau porsi spasi address yang dimiliki dengan “meminta izin” membawa data ke suatu spasi address tujuan (meng-advertise).
Salah satu kelemahan yang mungkin dihadapi oleh BGP routing adalah ia mempublikasikan rute yang tidak diketahui bagaimana cara mencapainya. Ini dinamakan black-holing, yaitu melakukan advertise, atau meminta izin untuk membawa data, tetapi beberapa bagian spasi address adalah milik orang lain, akibatnya proses advertise malah menyulitkan.
Internet tanpa BGP
Kemungkinan yang harus ditempuh tanpa melibatkan BGP ke provider:
Harus membuat rute default ke upstream provider, dan semua paket non-lokal diantarkan melalui interface yang ditetapkan oleh rute tersebut.
Provider akan menerapkan rute-rute statis ke network kita, dan mendistribusi ulang rute tersebut melalui IGP mereka. Dari IGP, selanjutnya bisa juga diredistribusikan ke BGP.
Dengan BGP, provider akan memberi kita semua rute yang mereka miliki, dan berusaha “mendengarkan” setiap announcement rute-rute yang kita miliki untuk kemudian meredistribusikannya ke peer-peer atau customer tujuan.
Hubungan BGP Neighbor
Arisitektur Internet sebenarnya tersusun atas AS-AS yang saling terkoneksi. Router yang berkomunikasi langsung melalui BGP dikenal sebagai BGP speaker. Beberapa BGP speaker dapat ditempatkan pada AS yang sama atau AS yang berbeda. Dalam masing-masing AS ini, BGP speaker berkomunikasi satu sama lain untuk melakukan pertukaran informasi reachabilitas network berdasarkan set-set policy yang dibangun dalam AS-AS.
Beberapa versi BGP
BGP versi 1
  • Ukuran message 8 – 1024 byte.
  • Terdapat 8 bit field Direction yang menandkan arah yang diambil oleh informasi routing.
  • Lima kemungkinan field Direction: Up, Down, Horizontal, EGP-derived information, Incomplete

BGP versi 2
  • Ukuran message 19 – 4096 byte.
  • Menghilangkan konsep up, down, dan horizontal di antara AS-AS
  • Menambahkan konsep path-attribute.

BGP versi 3
  • Ukuran message 19 – 4096 byte
  • Mengklarifikasi prosedur pendistribusian rute-rute BGP di antara speaker-speaker dalam sebuah AS.
  • Meningkatkan restriksi terhadap penggunaan path attribute Next-hop

BGP versi 4
  • Ukuran message 19 – 4096 byte.
  • Path atribute AS telah dimodifikasi sehingga set AS-AS dapat digambarkan sebagaimana AS individual.
  • Inter-AS Metric path attribute telah didefinisikan ulang sebagai Multi-Exit Discriminator path attribute.
  • Local preference path attribute ditambahkan.
  • Aggregator path attribute ditambahkan.
  • Dukungan untuk CIDR (Classless Inter Domain Routing)

Ringkasan Operasi BGP
Saat sebuah router BGP baru dibangun, peer-peer BGP dengan sendirinya melakukan pertukaran tabel routing yang mereka miliki, setelah itu peer-peer mengirim notifikasi atau pemberitauan berkaitan dengan perubahan yang terjadi pada tabel routing. Update message memberi informasi peer BGP hanya untuk satu path. Bila perubahan yang timbul mempengaruhi banyak path, maka multiupdate, message perlu dikirim.
Setelah BGP menghimpun update-update routingnya dari beragam AS, protokol akan membuat keputusan untuk mengambil path spesifik untuk masing-masing rute tujuan. Biasanya hanya satu path yang dibutuhkan untuk mencapai satu tujuan. BGP menggunakan atribut path (path attribute) yang dilepas kepadanya melalui update message agar bisa menentukan satu path terbaik bagi setiap tujuan.
Ada dua bentuk sistem koneksi transport protocol yang penting dimengerti. Mereka saling bertukar pesan (message) untuk membuka dan mengkonfirmasi parameter-parameter koneksi. Alur data awal yang dihasilkan tidak lain berupa keseluruhan tabel routing BGP, yang selanjutnya beberapa update penambahan dikirim sebagai perubahan pada tabel routing. BGP dalam hal ini tidak menuntut refresh secara periodik atas keseluruhan tabel routing. Oleh karena itu, BGP speaker harus memelihara versi terkini keseluruhan tabel routing BGP dari semua peer-nya selama durasi koneksi tertentu.

Pesan KeepAlive dikirim secara periodik untuk memastikan kelancaran koneksi. Pesan Notification dikirim untuk merespon adanya error atau kondisi-kondisi khusus yang terjadi. Jika sebuah koneksi menemukan sebuah error, pesan Notification segera dikirim dan koneksi pun ditutup.
Perangkat Hardware & Software untuk Komunikasi BGP
Perlengkapan yang dibutuhkan adalah router komersial seperti Cisco router dan Bay router atau klon-klon PC yang menjalankan Linux, BSD, atau varian Unix lainnya dibantu dengan program yang dinamakan gated untuk memanage BGP.
eBGP vs iBGP
BGP mensupport dua tipe pertukaran informasi routing:
  • Pertukaran di antara AS-AS yang berbeda (external BGP atau eBGP)
  • Pertukaran dalam satu AS tunggal (internal BGP atau iBGP)

Sebuah sistem BGP berbagi informasi reachabilitas network dengan sistem-sitem BGP berdekatan lainnya yang dikenal dengan neighbor atau peer. Sistem BGP tersusun atas grup-grup (groups). Dalam sebuah grup BGP internal, semua peer anggota grup (internal peer) berada dalam AS yang sama. Grup internal menggunakan rute-rute dari IGP untuk memutuskan penyampaian atau forwarding address-adress. Mereka juga menyebarkan rute-rute eksternal di antara router-router internal lain yang menjalankan BGP internal, menghitung next hop dengan mengambil hop BGP yang diterima dengan rute, lalu memutuskannya menggunakan informasi yang diperoleh dari salah satu IGP.
eBGP dan iBGP saling berbagi protokol level dasar yang sama untuk bertukar rute dan juga berbagi algoritma. Namun eBGP digunakan untuk bertukar rute di antara AS yang berbeda, sedang iBGP digunakan untuk bertukar rute di antara AS yang sama. Dalam faktanya, iBGP termasuk salah satu “interior routing protocol” yang dapat digunakan untuk melakukan routing aktif dalam sebuah network.

Perbedaan utama eBGP dan iBGP adalah bahwa eBGP tidak bosan-bosannya mencoba meng-advertise setiap rute BGP yang diketahui ke semua orang sehingga mungkin harus digunakan filter untuk menghentikannya. Sedang iBGP pada dasarnya cukup sulit bekerja karena iBGP tidak meredistribusi rute-rute. Speaker iBGP dalam lingkungan network harus melakukan peer dengan semua speaker iBGP lain untuk membuatnya dapat bekerja (routing mesh).
AS Number (ASN)
ASN merupakan nomor unik yang mengidentifikasikan AS-AS. Nomor ini diatur oleh ARIN (Autonomous Number from The American Registry for Internet Numbers).
Kondisi yang harus dipenuhi untuk mendapatkan nomor AS:
Unique Routing Policy
Multi-homed Site
AS-Path
Setiap kali sebuah rute disebarkan melalui BGP, ia akan diberi ‘perangko’ dengan sebuah nomor AS (AS number) dari router yang menyelenggarakannya. Rute ini bergerak dari satu AS ke AS lain sehingga membentuk sebuah alur atau path (AS-Path)
Kegunaan AS-Path:
  • Memberikan penelusuran diagnostik terhadap routing dalam sebuah network.
  • Merupakan salah satu nomor metric yang menetapkan bagimana rute-rute yang “didengar” melalui BGP dimasukkan ke dalam tabel routing IP.
  • Memungkinkan untuk melakukan routing policy, misalkan ketika kita ingin mengambil rute tertentu.

 BGP Message
  • Open: untuk membuat koneksi BGP di antara 2 sistem BGP
  • Update: untuk melakukan pertukaran informasi reachabilitas network.
  • KeepAlive: untuk menetapkan apakah sebuah link atau host fail atau tidak lagi eksis.
  • Notification: dikirim ketika kondisi error terdeteksi; menyebabkan sesi BGP dan koneksi TCP di antara sistem-sistem BGP akan ditutup.

Minggu, 05 Maret 2017

Multi Marker Javascript

Masih berhubungan dengan Google Maps, kali ini saya akan mengajarkan bagaimana menampilkan banyak marker pada map. Kalau pada sebelumnya kita menampilkan banyak marker dengan menggunakan mouse click, kali ini kita akan menampilkan secara bersamaan, dalam sekali load page.
Ceritanya contohnya disini adalah kita ingin tahu letak gunung-gunung di Indonesia, tapi tidak semua, dikit aja ya haha.
Seperti biasa untuk persiapannya, hanya butuh text editor biasa.
Untuk menampilkan banyak marker, maka kita membutuhkan banyak koordinat dari marker. Disini kita gunakan array untuk menampung koordinat dari marker-marker atau lokasi-lokasi dari gunung-gunung tersebut.

Membuat Array Markers

Pertama mari kita buat array yang berisi koordinat lokasi gunung-gunungnya. Disini saya masukin 8 gunung di daerah jawa ya.
1
2
3
4
5
6
7
8
9
10
var markers = [
      ['Taman Nasional Gunung Gede Pangrango', -6.777797700000000000 , 106.948689100000020000],
      ['Gunung Papandayan', -7.319999999999999000, 107.730000000000020000],
      ['Gunung Cikuray', -7.3225, 107.86000000000001],
      ['Gunung Bromo', -7.942493600000000000, 112.953012199999990000],
      ['Gunung Semeru', -8.1077172, 112.92240749999996],
      ['Gunung Merapi', -7.540717500000000000, 110.445724100000000000],
      ['Gunung Merbabu', -7.455000000000001000, 110.440000000000050000],
      ['Gunung Prau', -7.1869444, 109.92277779999995]
    ];
untuk yang bertanya bagaimana nyari koordinat dari lokasi-lokasinya? Simple! googling aja dengan keyword latitude dan longitude lokasi yang mau dicari. haha :D
Disini kita buat array dengan 8 tempat. Terdapat 3 indeks, indeks pertama nama lokasi, kedua adalah latitude, dan yang ketiga adalah longitude. Indeks ini akan digunakan nanti ketia di looping saat akan menampilkan marker ke dalam maps.

Menampilkan Array Marker dengan looping

Selanjutnya seperti cara biasa kita tampilkan marker ke dalam maps. Perbedaannya kali ini adalah kita gunakan looping, sebanyak index atau size dari array kita.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var infowindow = new google.maps.InfoWindow(), marker, i; // kita buat beberapa variabel untuk keperluan looping.
    for (i = 0; i < markers.length; i++) {  // loop sebanyak size dari array
    pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
    marker = new google.maps.Marker({
        position: pos,
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
    }
Penjelasan dari script diatas cukup mudah dan simple jika kalian teliti dan cermat. Didalam looping ada dua hal kita lakukan yaitu menambahkan markers dan juga menambahkan info window ke dalam marker tersebut.
Yang perlu kalian pahami adalah, pertama untuk markers, position dari markers diambil dari array (markers[i][1], markers[i][2]). Seperti yang sebelumnya saya katakan, indeks 1 dan 2 adalah untuk Lat dan Long. Sama halnya dengan info window, kita gunakan indeks 0. (Ingat! array dimulai dari 0 guys! )

Membuat Map menampilkan semua markers.

Maksudnya apa ya? Maksudnya disini adalah kita buat agar maps kita tidak tampil dalam satu lokasi tertentu saja, seperti di tutorial sebelumnya, mapnya terbatas hanya di Depok saja, jadi ketika ada markers diluar itu, kita tidak bisa melihatnya. Istilahnya maps mencakupi atau melingkupi marker-marker kita. Kita sebut properties atau fungsi Google Maps ini dengan Bounds.
Bounds, boundaries, batasan. Yah seperti itulah pokonya. Kita tambahkan script berikut:
1
2
3
var bounds = new google.maps.LatLngBounds(); // diluar looping
bounds.extend(pos); // di dalam looping
map.fitBounds(bounds); // setelah looping

Source Code Lengkap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 500px;
        height: 500px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
     
    var markers = [
      ['Taman Nasional Gunung Gede Pangrango', -6.777797700000000000 , 106.948689100000020000],
      ['Gunung Papandayan', -7.319999999999999000, 107.730000000000020000],
      ['Gunung Cikuray', -7.3225, 107.86000000000001],
      ['Gunung Bromo', -7.942493600000000000, 112.953012199999990000],
      ['Gunung Semeru', -8.1077172, 112.92240749999996],
      ['Gunung Merapi', -7.540717500000000000, 110.445724100000000000],
      ['Gunung Merbabu', -7.455000000000001000, 110.440000000000050000],
      ['Gunung Prau', -7.1869444, 109.92277779999995]
    ];
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }    
        var map = new google.maps.Map(mapCanvas, mapOptions)
    var infowindow = new google.maps.InfoWindow(), marker, i;
    var bounds = new google.maps.LatLngBounds(); // diluar looping
    for (i = 0; i < markers.length; i++) { 
    pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(pos); // di dalam looping
    marker = new google.maps.Marker({
        position: pos,
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
    map.fitBounds(bounds); // setelah looping
    }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
Hasilnya kurang lebih akan seperti ini:
Hasil Akhir

Jumat, 03 Maret 2017

Menampilkan marker google maps dari database

Dalam edisi tutorial Google Maps sebelumnya, kita telah mengdiskusikan tentang tatacara/tahapan pembuatan sebuah marker dan multipler marker pada sebuah lokasi pada google maps. 

Namun semua lokasi dalam bentuk kordinat (latitude, longtitued), datanya telah kita definisikan pada kodingnya, bersifat statis.

Sekarang kita akan membuat marker pada sebuah lokasi atau lebih, dimana data lokasinya diambil dari database.

Berikut ini adalah output yang akan kita buat, seperti yang ditunjukkan oleh Gambar.1 dibawah ini:

Gambar.1

Tahapan membuat marker pada Google Map

1. Buat database
Pembuatan database bertujuan untuk menyimpan informasi lokasi (latitude,longtitude) serta informasi begitu marker diklik. Dalam contoh ini, kita memberinama databasenya : googlemaps
CREATE TABLE IF NOT EXISTS `data_location` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `desc` varchar(255) NOT NULL,
  `lat` float(10,6) NOT NULL,
  `lon` float(10,6) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

INSERT INTO `data_location` (`id`, `desc`, `lat`, `lon`) VALUES
(1, 'Ibukota Provinsi Aceh', 5.550176, 95.319260),
(2, 'Ibukota Kab.Aceh Jaya', 4.727890, 95.601372),
(3, 'Ibukota Abdya', 3.818570, 96.831841),
(4, 'Ibukota Kotamadya Langsa', 4.476020, 97.952446),
(5, 'Ibukota Kotamadya Sabang', 5.909284, 95.304741);
Script diatas untuk membuat tabel yang bernama data_location seperti yang ditunjukkan Gambar.2:
Gambar.2

2. Membuat file connect.php
File ini bertujuan untuk membangun koneksi dengan database :
<?php
$con=mysqli_connect("localhost","root","","googlemap");
?>

3. Script agar terhubung ke server Google Maps 
Script ini bertujuan agar web kita terhubung dengan server Google Maps:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
Parameter sensor diset false, karena kita akan menentukan sendiri lokasinya.

4. Mempersiapkan variabel-variabel Google Maps API
// Variabel untuk menyimpan informasi (desc)
var infoWindow = new google.maps.InfoWindow;

//  Variabel untuk menyimpan peta Roadmap
var mapOptions = {
  mapTypeId: google.maps.MapTypeId.ROADMAP
} 

// Pembuatan petanya
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      
// Variabel untuk menyimpan batas kordinat
var bounds = new google.maps.LatLngBounds();
Dalam langkah ke-4 ini, kita perlu mempersiapkan variabel untuk menampung :
  • var InfoWindow, digunakan untuk menampung informasi, dalam hal ini nantinya kita akan menampung data dari field desc dari database googlemaps.
  • var mapOptions, digunakan untuk menyimpan tipe peta RoadMap. Jenis peta lain yang dapat didukung : SATELLITE (photographic map), HYBRID (photographic map + road and city names), TERRAIN (map with mountains, rivers).
  • var map, digunakan untuk menyimpan object peta.
  • var bounds digunakan untuk menampung batas kordinat dari sebuah lokasi

5.  Script php untuk mengambil data dari database
Pada tahap ini kita akan mengambil data-data dari database :
<?php
    $query = mysqli_query($con,"select * from data_location");
    while ($data = mysqli_fetch_array($query))
    {
        $nama = $data['desc'];
        $lat = $data['lat'];
        $lon = $data['lon'];
        
        echo ("addMarker($lat, $lon, '<b>$nama</b>');\n");                        
    }
 ?>

6. Proses pembuatan marker
Data-dari langkah ke-5 akan dikirimkan ke fungsi addMarker agar dilakukakn proses pembuatan markernya :
function addMarker(lat, lng, info) {
    var lokasi = new google.maps.LatLng(lat, lng);
    bounds.extend(lokasi);
    var marker = new google.maps.Marker({
        map: map,
        position: lokasi
    });       
    map.fitBounds(bounds);
    bindInfoWindow(marker, map, infoWindow, info);
 }

7. Menampilkan informasi pada marker yang diklik
Tahap ini memberi event click, jadi ketika setiap marker diklik maka akan ditampilkan informasi dari keterangan marker tersebut :
// Menampilkan informasi pada masing-masing marker yang diklik
function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}


Kode lengkap untuk marker Google Map dari database

Dalam contoh ini, kita akan memanggil data dari database dan membuat marker untuk lokasi : Banda Aceh, Sabang, Calang, Langsa dan Blangpidie serta akan ditampilkan masing-masing informasi begitu salah satu marker diklik.
<?php include "connect.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Multi Marker Map </title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    
    <!-- Bagian js -->
    <script src='assets/js/jquery-1.10.1.min.js'></script>       
    
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- akhir dari Bagian js -->
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    
    <script>
        
    var marker;
      function initialize() {
          
        // Variabel untuk menyimpan informasi (desc)
        var infoWindow = new google.maps.InfoWindow;
        
        //  Variabel untuk menyimpan peta Roadmap
        var mapOptions = {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        } 
        
        // Pembuatan petanya
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
              
        // Variabel untuk menyimpan batas kordinat
        var bounds = new google.maps.LatLngBounds();

        // Pengambilan data dari database
        <?php
            $query = mysqli_query($con,"select * from data_location");
            while ($data = mysqli_fetch_array($query))
            {
                $nama = $data['desc'];
                $lat = $data['lat'];
                $lon = $data['lon'];
                
                echo ("addMarker($lat, $lon, '<b>$nama</b>');\n");                        
            }
          ?>
          
        // Proses membuat marker 
        function addMarker(lat, lng, info) {
            var lokasi = new google.maps.LatLng(lat, lng);
            bounds.extend(lokasi);
            var marker = new google.maps.Marker({
                map: map,
                position: lokasi
            });       
            map.fitBounds(bounds);
            bindInfoWindow(marker, map, infoWindow, info);
         }
        
        // Menampilkan informasi pada masing-masing marker yang diklik
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
 
        }
      google.maps.event.addDomListener(window, 'load', initialize);
    
    </script>
    
</head>
<body onload="initialize()">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
<!--- Bagian Judul-->   
<div class="container" style="margin-top:10px"> 

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">Marker Google Maps</div>
                    <div class="panel-body">
                        <div id="map-canvas" style="width: 700px; height: 600px;"></div>
                    </div>
            </div>
        </div>  
    </div>
</div>  
</body>
</html>