Menampilkan multiple marker Google Maps API
|
|
- Sukarno Oesman
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 Menampilkan multiple marker Google Maps API Oleh: Hasyemi Rafsanjani Asyari 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... 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. var markers = [ ['Taman Nasional Gunung Gede Pangrango', , ], ['Gunung Papandayan', , ], ['Gunung Cikuray', , ], ['Gunung Bromo', , ], ['Gunung Semeru', , ], ['Gunung Merapi', , ],
3 ['Gunung Merbabu', , ], ['Gunung Prau', , ] ]; 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. 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
4 marker-marker kita. Kita sebut properties atau fungsi Google Maps ini dengan Bounds. Bounds, boundaries, batasan. Yah seperti itulah pokonya. Kita tambahkan script berikut: var bounds = new google.maps.latlngbounds(); // diluar looping bounds.extend(pos); // di dalam looping map.fitbounds(bounds); // setelah looping Source Code Lengkap <!DOCTYPE html> <html> <head> <style> #map-canvas { width: 500px; height: 500px; </style> <script src=" <script> var markers = [ ['Taman Nasional Gunung Gede Pangrango', , ], ['Gunung Papandayan', , ], ['Gunung Cikuray', , ], ['Gunung Bromo', , ], ['Gunung Semeru', , ], ['Gunung Merapi', , ], ['Gunung Merbabu', , ], ['Gunung Prau', , ] ]; 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({
5 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: Ya sekian dari tutorial kali ini. Semoga bermanfaat! Happy Codings! :)
6 Tentang Penulis Hasyemi Rafsanjani Asyari null. I'm proud to be Stalker. Currently Mahasiswa Politeknik Negeri Jakarta. Currently Microsoft Student Partners Indonesia Regional Jabodetabek. Founder of a Company.
Menampilkan Markers Google Maps API dengan PHP dan MySQL
Menampilkan Markers Google Maps API dengan PHP dan MySQL Oleh: Hasyemi Rafsanjani Asyari Hai-hai teman-teman jagocoding. Kali ini sedikit lebih advance, tapi tetap masih pada topik tentang Google Maps!
Lebih terperinciBermain dengan Marker Google Maps API
Bermain dengan Marker Google Maps API Oleh: Hasyemi Rafsanjani Asyari Marker adalah salah satu penanda lokasi berbentuk icon atau pin atau juga image. Marker bisa kita rubah dengan image dari kita atau
Lebih terperinciMenampilkan Google Maps V3 pada halaman website
Menampilkan Google Maps V3 pada halaman website Oleh: Hasyemi Rafsanjani Asyari Sekilas tentang Google Maps, ya semua mungkin hampir sudah tahu merupakan salah satu produk dari Google. Dengan Google Maps
Lebih terperinciGeocoding Services pada Google Maps API
Geocoding Services pada Google Maps API Oleh: Hasyemi Rafsanjani Asyari Geocode adalah salah satu fitur dari Google Maps API yang singkatnya sih adalah mentranslate human readable address menjadi sebuah
Lebih terperinciGeocoding Services pada Google Maps API
Geocoding Services pada Google Maps API Oleh: Hasyemi Rafsanjani Asyari Geocode adalah salah satu fitur dari Google Maps API yang singkatnya sih adalah mentranslate human readable address menjadi sebuah
Lebih terperinciMendeteksi Lokasi dengan HTML5 Geolocation
Mendeteksi Lokasi dengan HTML5 Geolocation Oleh: Hasyemi Rafsanjani Asyari Di tutorial kali ini masih berkaitan dengan google maps, yaitu kita akan membuat script dimana kita bisa mendeteksi lokasi dari
Lebih terperinciMembuat Scrollspy Dengan Bootstrap
Membuat Scrollspy Dengan Bootstrap Oleh: Hasyemi Rafsanjani Asyari Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat
Lebih terperinciTugas Modul 2-3. <?php //Header File XML header("content-type: text/xml"); include("koneksi.php");
A. DataLokasi Tugas Modul 2-3
Lebih terperinciSISTEM INFORMASI GEOGRAFIS PEMANTAU KUALITAS UDARA DI KOTA CILEGON
SISTEM INFORMASI GEOGRAFIS PEMANTAU KUALITAS UDARA DI KOTA CILEGON Anggoro Suryo Pramudyo Jurusan Teknik Elektro, Fakultas Teknik, Universitas Sultan Ageng Tirtayasa Jl. Jend. Sudirman km.3 Cilegon-Banten-Indonesia
Lebih terperinciMENAMPILKAN GOOGLE MAPS DI WEB BROWSER DENGAN HTML5
MENAMPILKAN GOOGLE MAPS DI WEB BROWSER DENGAN HTML5 Agung Nugroho Agung.nugroho@raharja.info :: http://ngapainbingung.com Abstrak Google Maps merupakan maps yang paling popular karena keakuratannya dan
Lebih terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM. 4.1 Implementasi Sistem Implementasi bisa diartikan sebagai pelaksanaan atau penerapan atau bisa
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM 4.1 Implementasi Sistem Implementasi bisa diartikan sebagai pelaksanaan atau penerapan atau bisa disebut juga sebagai proses untuk melakukan interaksi, Maka dalam
Lebih terperinciPEMANFAATAN GOOGLE MAPS API UNTUK VISUALISASI DATA BASE TRANSCEIVER STATION
PEMANFAATAN GOOGLE MAPS API UNTUK VISUALISASI DATA BASE TRANSCEIVER STATION Septia Rani Jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas Islam Indonesia Jalan Kaliurang Km.14,5 Sleman,
Lebih terperinciSISTEM INFORMASI GEOGRAFIS BERBASIS WEB PAYAROBA KECAMATAN BINJAI BARAT KOTA BINJAI TUGAS AKHIR MUHAMMAD SYAHBANA
SISTEM INFORMASI GEOGRAFIS BERBASIS WEB PAYAROBA KECAMATAN BINJAI BARAT KOTA BINJAI TUGAS AKHIR MUHAMMAD SYAHBANA 142406014 PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA FAKULTAS MATEMATIKA
Lebih terperinciLAMPIRAN 1 KUESIONER USER REQUIREMENT. Kuesioner Perancangan Aplikasi Pemantau Posisi Perangkat Mobile Dengan Teknologi LBS
LAMPIRAN 1 KUESIONER USER REQUIREMENT Kuesioner Perancangan Aplikasi Pemantau Posisi Perangkat Mobile Dengan Teknologi LBS Kuesioner ini bertujuan untuk mendapatkan opini user dalam pembuatan aplikasi
Lebih terperinciDeteksi Tubrukan Objek Dengan HTML5 [Part 1]
Deteksi Tubrukan Objek Dengan HTML5 [Part 1] Oleh: Yudhistira Bayu W Bismillahirahmanirahim Assalamualaikum wr.wb Alhamdulillah kita telah sampai pada tutorial penanganan Tubrukan dengan menggunakan HTML5.
Lebih terperinciAbdullah hafidh. Fakultas Ilmu Komputer, Universitas Indonesia. [Membuat Web Sederhana dengan.net FrameWork. menggunakan Microsoft Visual Studio 2008]
2009 Abdullah hafidh Fakultas Ilmu Komputer, Universitas Indonesia [Membuat Web Sederhana dengan.net FrameWork menggunakan Microsoft Visual Studio 2008] Pada kesempatan ini, saya akan memberikan tutorial
Lebih terperinciMembuat Interface Dinamis Menggunakan FrameLayout
Membuat Interface Dinamis Menggunakan FrameLayout Oleh: Hasyemi Rafsanjani Asyari Pada tutorial kali ini kita akan belajar membuat aplikasi android dengan fragment. Seperti yang kita ketahui aplikasi android
Lebih terperinci10 - SIG Berbasis Web. by: Ahmad Syauqi Ahsan
10 - SIG Berbasis Web by: Ahmad Syauqi Ahsan Potensi SIG berbasis Web Dapat digunakan di seluruh dunia Tidak memerlukan software GIS Tidak tergantung pada platform ataupun Sistem Operasi Pengelolaan pengguna
Lebih terperinciMEMBANGUN SISTEM NAVIGASI DI SURABAYA MENGGUNAKAN GOOGLE MAPS API
MEMBANGUN SISTEM NAVIGASI DI SURABAYA MENGGUNAKAN GOOGLE MAPS API M. Syaiful Amri Jurusan Teknik Informatika, Dosen Pembimbing Politeknik Elektronika Negeri Surabaya Institut Teknologi Sepuluh Nopember
Lebih terperinciImage Slider 3D. Oleh: Anthonius
Image Slider 3D Oleh: Anthonius Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung
Lebih terperinciSISTEM INFORMASI GEOGRAFIS OBJEK WISATA MENGGUNAKAN GOOGLE MAPS API STUDI KASUS KABUPATEN MOJOKERTO
SISTEM INFORMASI GEOGRAFIS OBJEK WISATA MENGGUNAKAN GOOGLE MAPS API STUDI KASUS KABUPATEN MOJOKERTO Siswanto Jurusan Teknik Informatika, Dosen Pembimbing Politeknik Elektronika Negeri Surabaya Institut
Lebih terperinciBAB IV ANALISA DAN PERANCANGAN SISTEM
BAB IV ANALISA DAN PERANCANGAN SISTEM BAB IV ANALISA DAN PERANCANGAN SISTEM 1.1 Gambaran Sistem Pemetaan SPBU Sistem pemetaan SPBU (Stasiun Pengisian Bahan Bakar Umum) di kota Jepara dan Kudus ini dimaksudkan
Lebih terperinciBAB IV ANALISA DAN PERANCANGAN
BAB IV ANALISA DAN PERANCANGAN 4.1. Analisa Sistem Analisa merupakan tahap pemahaman terhadap suatu persoalan sebelum mengambil suatu tindakan atau keputusan. Ini merupakan tahap yang paling penting karena
Lebih terperinciDeteksi Tubrukan Objek Dengan HTML5 [Part 3]
Deteksi Tubrukan Objek Dengan HTML5 [Part 3] Oleh: Yudhistira Bayu W BismillahirahmanirahimAssalamualaikum wr.wb Alhamdulillah kita sudah sampai di part terakhir yaitu part ke 3 dari tutorial tubrukan
Lebih terperinciBAB II TINJAUAN PUSTAKA DAN DASAR TEORI. Ada beberapa penelitian tentang web dan data. perumahan yang pernah dibahas oleh beberapa mahasiswa
BAB II TINJAUAN PUSTAKA DAN DASAR TEORI 2.1 Tinjauan Pustaka Ada beberapa penelitian tentang web dan data perumahan yang pernah dibahas oleh beberapa mahasiswa yaitu: No Sumber/Tahun Topik Teknol ogi IT
Lebih terperinciVISUALISASI PEMETAAN USAHA JASA TELEMATIKA DI INDONESIA
VISUALISASI PEMETAAN USAHA JASA TELEMATIKA DI INDONESIA Ferdy Arrahman Damin 1, Eneng Tita Tosida 2, Sufiatul Maryana 3 Program Studi Ilmu Komputer, F-MIPA Universitas Pakuan ferdyarrahman22@gmail.com
Lebih terperinciBAB V IMPLEMENTASI DAN PENGUJIAN
BAB V IMPLEMENTASI DAN PENGUJIAN 5.1 Implementasi Basis Data Setelah sistem dianalisis dan didesain secara rinci, tahap selanjutnya adalah implementasi. Implementasi sistem merupakan tahap meletakkan sistem
Lebih terperinciDeteksi Tubrukan Objek Dengan HTML5 [Part 2]
Deteksi Tubrukan Objek Dengan HTML5 [Part 2] Oleh: Yudhistira Bayu W Bismillahirahmanirahim Assalamualaikum wr.wb Setelah kita belajar dengan konsep awal dari tubrukan ini yang berada di Part 1, sekarang
Lebih terperincibuat Lightbox mu sendiri dengan jquery
buat Lightbox mu sendiri dengan jquery Oleh: putra surya herlambang assalamualikum wr wb. apakah kamu pernah melihat gambar pada website yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga
Lebih terperinciMODUL 5 MENAMPILKAN PETA
MODUL 5 MENAMPILKAN PETA 1. Indikator Praktikan dapat menampilkan peta dan menampilkan data dari database. 2. Tujuan Praktikan mendapatkan pengetahuan tentang cara yang dibutuhkan untuk membangun sebuah
Lebih terperinciBAB II TINJAUAN PUSTAKA
BAB II TINJAUAN PUSTAKA Bab II berisikan penjabaran tentang dasar-dasar teori yang menjadi penunjang dalam rancangan dan implementasi Sistem Informasi Geografis Pemetaan Pura Kawitan dan Keterkaitannya
Lebih terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN
BAB IV IMPLEMENTASI DAN PENGUJIAN Bab ini menjelaskan mengenai implementasi dari prototype aplikasi pencarian lokasi rumah sakit BPJS berbasis android yang akan dibuat dan hasil pengujian terhadap aplikasi
Lebih terperinciSImple Pop-Up Modal dengan CSS3 dan Jquery
SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up
Lebih terperinciALUR PROGRAM INPUT DATA KE DALAM DATABASE DARI MARKER PADA PEMROGRAMAN GOOGLE MAPS API
ALUR PROGRAM INPUT DATA KE DALAM DATABASE DARI MARKER PADA PEMROGRAMAN GOOGLE MAPS API Firmansyah Wahyudiarto http://firmansyah.web.id Seperti pada postingan blog saya dengan judul Input Data Ke Dalam
Lebih terperinciFacebook App dengan Javascript
Facebook App dengan Javascript Oleh: Dewi Rosalin Hampir semua pengguna internet tidak asing lagi dengan Facebook, bahkan sudah memiliki akun Facebook. Bagi pemilik website hal ini dapat mambantu untuk
Lebih terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM Setelah melakukan analisa dan perancangan sistem, selanjutnya adalah implementasi dari desain menjadi sebuah aplikasi dan melakukan pengujian dari aplikasi yang
Lebih terperinciMembuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage
Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Oleh: Christian Rosandhy Siapa bilang bikin galeri gambar yang responsive itu susah? Di tutorial kali ini kita akan belajar membuat
Lebih terperinciPemanfaatan Google Maps dalam Pembuatan Aplikasi Pemantau Kondisi Jalan dan Lalu lintas
Pemanfaatan Google Maps dalam Pembuatan Aplikasi Pemantau Kondisi Jalan dan Lalu lintas Dyah Retno Utari 1), Arief Wibowo 2) 1,2 Fakultas Teknologi Informasi, Universitas Budi Luhur e-mail: 1) dyah.retnoutari@budiluhur.ac.id,
Lebih terperinciKNSI PEMBANGUNAN APLIKASI TRAVELING GUIDE KOTA BOGOR MENGGUNAKAN GOOGLE MAPS API
KNSI2014-377 PEMBANGUNAN APLIKASI TRAVELING GUIDE KOTA BOGOR MENGGUNAKAN GOOGLE MAPS API Falahah 1, Cahyo Setiawan 2 Program Studi Teknik Informatika, Universitas Widyatama 1 Program Studi Manajemen Informatika,
Lebih terperinciNotifikasi Keren dengan CSS3
Notifikasi Keren dengan CSS3 Oleh: Sendy PK Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website tentang informasi singkat yang diberikan oleh pemilik website, hal ini
Lebih terperinciBerganti-ganti wajah karakter dengan NML
Berganti-ganti wajah karakter dengan NML Oleh: anakhilang Dalam dunia game salah satu faktor pentingnya adalah character atau sang actor, dan tentunya untuk beberapa jenis game character yang tidak monoton
Lebih terperinciPembangunan Sistem Informasi Geografis Berbasis Web untuk Pemetaan Industri Kreatif Berbasis Budaya di Kota Surakarta
A850 Pembangunan Sistem Informasi Geografis Berbasis Web untuk Pemetaan Industri Kreatif Berbasis Budaya di Kota Surakarta Agmalia Dwi Anggraeni dan Yanto Budisusanto Jurusan Teknik Geomatika, Fakultas
Lebih terperinciModul 5 -Javascript-
Modul 5 -Javascript- Pengertian: Javascript adalah bahasa script yang bisa dijalankan di browser, dan biasa disebut dengan client side programming. Client di sini adalah browser, seperti: Google Chrome,
Lebih terperinciTUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan
Lebih terperinciMembuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO
Membuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO Oleh: Ananda Mukhammad Ikhsan Chatbox adalah fitur yang cukup penting di website berbasis sosial media. Nah, kali ini saya akan memberikan tutorial
Lebih terperinciEuclidean kedua objek dapat dilihat pada Rumus i (Ratnasari 2008) :
Google Static Maps API Google Static Maps API mengembalikan sebuah image (baik bertipe GIF, PNG atau JPEG) untuk merespon HTTP request melalui sebuah URL. Untuk setiap permintaan, pengguna dapat menentukan
Lebih terperinciPembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language)
Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language) Oleh : Tri Wahyu Nugroho triwahyunugroho@yahoo.com maswahyu@students.ee.itb.ac.id http://s.ee.itb.ac.id/~maswahyu http://www.maswahyu.tk
Lebih terperinciSimple Price Calculator dengan Input Range
Simple Price Calculator dengan Input Range Oleh: Septi Wulan Haloo, pada tutorial pertama saya ini, saya ingin membagikan cara membuat simple price calculator dengan input range (yang inputnya bisa digeser-geser
Lebih terperinci1 BAB 5 IMPLEMENTASI DAN PENGUJIAN
1 BAB 5 IMPLEMENTASI DAN PENGUJIAN 5.1 Implementasi Aplikasi dibangun sesuai dengan rancangan sistem yang telah dibuat pada bab sebelumnya.di bawah ini merupakan implementasi dari rancangan mockup yang
Lebih terperinciBAB III PERANCANGAN SISTEM
BAB III PERANCANGAN SISTEM 3.1 Parancangan Sistem Blok diagram dari sistem yang dibuat pada perancangan Tugas Akhir ini terbagi menjadi 2 bagian, yaitu bagian pengirim dan penerima pada kendaraan patroli
Lebih terperinciPENGERTIAN VARIABLE PARAMETER DALAM FUNGSI PHP
PENGERTIAN VARIABLE PARAMETER DALAM FUNGSI PHP Muhamad Yusuf muhamadyusuf0012@gmail.com :: https://muhamadyusufppn.blogspot.co.id Abstrak Variable Parameter adalah sebuah fitur dalam PHP dimana kita bisa
Lebih terperinciModul Web Design. Dosen: Nofiyati, S.Kom, M.Kom Program Studi Teknik Informatika Universitas Jenderal Soedirman
Modul Web Design Dosen: Nofiyati, S.Kom, M.Kom Program Studi Teknik Informatika Universitas Jenderal Soedirman Materi: Pertemuan ke- Materi 1, 2 & 3. Konsep Dasar Web Design: Perencanaan WebSite Typografi,
Lebih terperinciIMPLEMENTASI SISTEM INFORMASI GEOGRAFIS MENGGUNAKAN GOOGLE MAPS API DALAM PEMETAAN ASAL MAHASISWA
IMPLEMENTASI SISTEM INFORMASI GEOGRAFIS MENGGUNAKAN GOOGLE MAPS API DALAM PEMETAAN ASAL MAHASISWA Fauzan Masykur Fakultas Teknik, Program Studi Teknik Informatika Universitas Muhammadiyah Ponorogo Email:
Lebih terperinciPerkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1]
Perkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1] Oleh: Arinadi Nur Rohmad Font Awesome adalah kumpulan icon yang telah dibuat sedemikian rupa, dan menggunakan system Font Icon yang memungkinkan
Lebih terperinciTeam project 2017 Dony Pratidana S. Hum Bima Agus Setyawan S. IIP
Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis
Lebih terperinciBAB IV IMPLEMENTASI DAN PEMBAHASAN. kamera baru serta mampu membantu belajar tentang bangaimana settingan kamera
BAB IV IMPLEMENTASI DAN PEMBAHASAN 4.1 Implementasi dan Uji coba Sistem Penjelasan program Aplikasi Forensik Foto Berbasis Web merupakan sistem informasi untuk membatu pembeli dalam membeli kamera bekas
Lebih terperinciPembuatan WebGIS Untuk Pemetaan Usaha Mikro Kecil Menengah (UMKM) Di Kabupaten Blitar
JURNAL TEKNIK ITS Vol. 6, No. 2, (2017) ISSN: 2337-3539 (2301-9271 Print) A-373 Pembuatan WebGIS Untuk Pemetaan Usaha Mikro Kecil Menengah (UMKM) Di Kabupaten Blitar Amelia Fadhila dan Agung Budi Cahyono
Lebih terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN
BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Setelah sistem dianalisis dan didesain secara rinci, tahap selanjutnya adalah implementasi. Implementasi sistem merupakan tahap meletakkan sistem sehingga
Lebih terperinciMembuat Simpel Site HTML Layout Menggunakan Tag div
Membuat Simpel Site HTML Layout Menggunakan Tag div Oleh: Yudhistira Bayu W Ya, setelah saya memberikan Tutorial Tutorial Simpel HTML pada sebelumnya, Kali Ini saya akan memberikan Cara Membuat Simpel
Lebih terperinciBAB III ANALISIS DAN DESAIN SISTEM
BAB III ANALISIS DAN DESAIN SISTEM Pada bab ini akan dibahas mengenai Sistem Informasi Geografis Pencarian Lokasi Terdekat Kantor PLN Medan Berbasis Android yang meliputi analisa sistem yang sedang berjalan
Lebih terperinciBAB IV PROTOTIPE, PENGEMBANGAN, DAN VERIFIKASI
BAB IV PROTOTIPE, PENGEMBANGAN, DAN VERIFIKASI Pada bab ini akan dibahas mengenai prototipe, pengembangan modul aplikasi Jafaik beserta faktor pendukung yang dibutuhkan oleh sistem, serta hasil pengujian
Lebih terperinciTutorial Jquery. Untuk mencari sebuah element HTML, dengan JavaScript kita menggunakan fungsi getelementbyid():
Tutorial Jquery Apa itu Jquery? Sederhananya Jquery adalah sebuah library JavaScript. Dimana library adalah kumpulan dari berbagai fungsi siap pakai untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian,
Lebih terperinciObjek Bergoyang CSS3
Objek Bergoyang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Gak terasa nih udah mulai banyak yang mudik... Di sela-sela waktu masih aja nih saya update tutorial buat temen-temen jagocoding sekalian...
Lebih terperinciMembuat Themes Wordpress sendiri - Part 1
Membuat Themes Wordpress sendiri - Part 1 Oleh: asep saepulloh Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan
Lebih terperinciBAB IV UJI COBA DAN ANALISA
BAB IV UJI COBA DAN ANALISA Pada tahap ini dilakukan pengujian terhadap aplikasi yang telah dibuat untuk mengetahui apakah program telah dapat berjalan dan bekerja sebagaimana yang diharapkan. Selain itu
Lebih terperinciTutorial Codeigniter : Membuat multiple language dengan Language Class
Tutorial Codeigniter : Membuat multiple language dengan Language Class Pembaca yang budiman. Sering sekali kita melihat website dengan beberapa bahasa. Nah, kira kira bagaimana ya kalo kita membuat sendiri
Lebih terperinciMashita Enggar Kusuma, Yanto Budisusanto Jurusan Teknik Geomatika FTSP-ITS, Kampus ITS Sukolilo, Surabaya,
Aplikasi Google Maps Api Dalam Pengembangan Sistem Informasi Geografis (Sig) Pariwisata Berbasis Web (Studi Kasus : Kabupaten Sidoarjo) APLIKASI GOOGLE MAPS API DALAM PENGEMBANGAN SISTEM INFORMASI GEOGRAFIS
Lebih terperinciPerkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya
Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari
Lebih terperinciPerancangan Sistem Informasi Geografis Lapangan Futsal Kota Padang Berbasis Web
TEKNOSI, Vol. 02, No. 01, April 2016 45 Perancangan Sistem Informasi Geografis Lapangan Futsal Kota Padang Berbasis Web Haris Suryamen 1,*, Ilham Aminuddin 1, Fajril Akbar 1 1 Jurusan Sistem Informasi
Lebih terperinciMembuat Polling Sederhana Dengan Ajax
Membuat Polling Sederhana Dengan Ajax Oleh: Dimas Agung Noviyanto Ajax adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah
Lebih terperinciDasar Membuat App Facebook
Dasar Membuat App Facebook Oleh: titan Sebagaimana seperti yang kita ketahui facebook bukan hanya sebatas sosial network untuk berinteraksi dengan teman kita di dunia maya. Dengan jelinya facebook menggaet
Lebih terperinci1. Pendahuluan. 2. Tinjauan Pustaka
1. Pendahuluan Perkembangan teknik visualisasi data semakin berkembang mulai dari yang sederhana sampai yang kompleks. Heatmap merupakan salah satu teknologi visualisasi yang mempresentasikan data menggunakan
Lebih terperinciMODUL PRAKTIKUM SISTEM TERDISTRIBUSI
MODUL PRAKTIKUM SISTEM TERDISTRIBUSI WEB API Yuli Purwati, M.Kom Praktikum 8 7 Juni 2017 Aplikasi ASP.NET Web Api 1. Pembuatan Web Api Buat project baru pada Visual Studio, File New Project. Lalu, pilih
Lebih terperinci[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap
[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap Oleh: Arinadi Nur Rohmad Asalamualaikum.. Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit..
Lebih terperinciMembuat Tabel Responsive dengan CSS
Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan
Lebih terperinciHow to Create Simple Web (2) - Slice
How to Create Simple Web (2) - Slice Oleh: Isnu Arief Darmawan Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah
Lebih terperinciBAB IV IMPLEMENTASI KARYA. Dalam bab ini akan diuraikan implementasi hasil karya yang merupakan
BAB IV IMPLEMENTASI KARYA Dalam bab ini akan diuraikan implementasi hasil karya yang merupakan penjabaran dari perancangan karya, meliputi pra produksi, produksi, dan pasca produksi. 4.1 Pra Produksi Pada
Lebih terperinciBAB II LANDASAN TEORI
BAB II LANDASAN TEORI 2.1 Sistem Informasi Geografis (SIG) 2.1.1 Pengertian SIG Sistem Informasi Geografis ( SIG ) merupakan komputer yang berbasis pada sistem informasi yang digunakan untuk memberikan
Lebih terperinciBAB III ANALISIS DAN PERANCANGAN
BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Sistem 3.1.1 Analisis Pemakai Dari hasil penelitian yang dilakukan di Provinsi Maluku dan hasil observasi diperoleh data-data yang dibutuhkan untuk membuat
Lebih terperinciLAPORAN RESMI Layout
LAPORAN RESMI Layout Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI
Lebih terperinciLAPORAN RESMI PRAKTIKUM II WEB DESAIN PENGENALAN JAVASCRIPT
LAPORAN RESMI PRAKTIKUM II WEB DESAIN PENGENALAN JAVASCRIPT Di susun oleh : Galuh Meidaluna 4103141023 Dosen : Dwi Susanto ST. MT TEKNOLOGI MULTIMEDIA BROADCASTING POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
Lebih terperinciHTML5 Komplet. Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO
HTML5 Komplet HTML5 Komplet Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO HTML5 Komplet Jubilee Enterprise 2017, PT. Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan
Lebih terperinciHover Putar CSS3. Oleh: Mohammad Nur Huda
Hover Putar CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Haha... Sebenarnya ini adalah tulisan pertama saya pada situs berbagi ilmu ini :-). Pada kali ini kita akan membuat efek hover memutarkan objek
Lebih terperinciBAB IV HASIL DAN PEMBAHASAN. Pada tahap ini penulis mengumpulkan data-data berupa nama dan titik
BAB IV HASIL DAN PEMBAHASAN 4.1 Hasil Penelitian 4.1.1 Pengumpulan Data Pada tahap ini penulis mengumpulkan data-data berupa nama dan titik koordinat lokasi Apotik, Mall dan Supermarket. Data tentang apotik,
Lebih terperinciMembuat Form Dinamis dengan HTML & Javascript.
Membuat Form Dinamis dengan HTML & Javascript. Oleh: d-newbie Assalamualaikum wr.wb. Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element
Lebih terperinciAPLIKASI PEMETAAN LOKASI BENGKEL MOTOR DENGAN LAYANAN LOCATION BASED SERVICE BERBASIS ANDROID
APLIKASI PEMETAAN LOKASI BENGKEL MOTOR DENGAN LAYANAN LOCATION BASED SERVICE BERBASIS ANDROID TUGAS AKHIR Oleh : Harry Chandra Den Putra 3311201041 Disusun untuk memenuhi syarat kelulusan Program Diploma
Lebih terperinciSortable Datagrid dengan Paginating Data
Sortable Datagrid dengan Paginating Data Sebelumnya saya mohon maaf, sudah absen beberapa lama tidak ada artikel yang dibuat. Pada kesempatan kali ini akan kita coba membahas tentang Datagrid yang ditambah
Lebih terperinciMembuat Layout Header Diam di Tempat (Fix Header)
Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout
Lebih terperinciBermain Dynamic Tabel Row dengan menggunakan Javascript
Bermain Dynamic Tabel Row dengan menggunakan Javascript 20 06 2008 Jika kita adalah orang yang berkutat dengan dunia IT terutama bidang aplikasi web programming, pasti akan sering menjumpai proses insert,
Lebih terperinciMembuat PopUp Menu dengan HTML dan JavaScript
Membuat PopUp Menu dengan HTML dan JavaScript by Fajran Rusadi 1. Publication Information Copyright 2004 by Fajran Iman Rusadi All rights reserved. 2. Abstraksi Dalam tutorial kali ini, kita akan membuat
Lebih terperinciBAB 4. Hasil Dan Pembahasan
BAB 4 Hasil Dan Pembahasan 4.1 Implementasi Sistem Pada bagian ini, akan dibahas implementasi dari setiap perancangan yang sudah dibuat pada bab sebelumnya. 4.1.1 Proses Normalisasi Data Spasial Seperti
Lebih terperinciMencetak Data Ke Word atau Excell
Mencetak Data Ke Word atau Excell dengan PHP Mungkin ada sebagian di antara kalian yang memikirkan bagaimana caranya mencetak data yang telah kita buat dengan PHP ke dalam bentuk Word atau Excel. Nah setelah
Lebih terperinciBAB V DESAIN WEB CSS
BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan
Lebih terperinciMembuat Layout Desain Awal dengan Photoshop
2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height
Lebih terperinci6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
Lebih terperinciHTML DOM(2) Yosef Murya Kusuma Ardhana. ST., M.Kom
HTML DOM(2) Yosef Murya Kusuma Ardhana. ST., M.Kom Dengan HTML DOM, Anda dapat menavigasi pohon simpul menggunakan hubungan simpul. DOM Nodes Menurut standar W3C HTML DOM, segala sesuatu dalam dokumen
Lebih terperinciBAB V PEMBAHASAN DAN IMPLEMENTASI
BAB V PEMBAHASAN DAN IMPLEMENTASI Implementasi adalah tahap penerapan sekaligus pengujian bagi sistem baru serta merupakan tahap dimana aplikasi siap dioperasikan pada keadaan yang sebenarnya, efektifitas
Lebih terperinci2 BAB II TINJAUAN PUSTAKA
2 BAB II TINJAUAN PUSTAKA Bab II berisikan penjabaran tentang dasar-dasar teori yang menjadi penunjang dalam rancangan dan implementasi sistem pemetaan yang berbasis Web. 2.1 State of the Art Sistem Informasi
Lebih terperinciMembuat Layout Footer Menempel ke Bawah
Membuat Layout Footer Menempel ke Bawah Oleh: Christian Rosandhy Kali ini saya mau share lagi salah satu layout wajib buat website, yaitu layout footer menempel kebawah. Di tutorial kali ini kita akan
Lebih terperinci