Yeoman, workflow untuk pembuatan aplikasi web modern

Yeoman yo .. yo .. 😉

PP Kanto`s Blog

Ditulis oleh Alfian Busyro *)

Internet dan aplikasi web telah berkembang pesat akhir-akhir ini dengan hadirnya headless web framework seperti node.js, grunt, dll. Dan juga MVC framework untuk front-end seperti backbone, angular, dll. Dengan framework-framework diatas pembuatan aplikasi web menjadi semakin rapi dan semakin user-friendly.

Tetapi ada satu yg masih tidak berubah. Apa itu?  yaitu struktur aplikasi web yang terkadang bisa membingungkan developer web itu sendiri dan deployment aplikasi web yang terkadang menguras banyak waktu. Bagi aplikasi web yang berskala kecil, hal ini mungkin tidak menjadi masalah yang besar. Namun apabila skala aplikasi web kita semakin besar, struktur penyusunan file, direktori dan library bakal menjadi kendala. Dan apabila kita bekerja dalam team tentunya ini akan menjadi masalah yang besar disaat kita berkolaborasi dengan developer lain. Tentunya banyak developer bertanya, apa solusi yang jelas untuk masalah ini ? Beruntunglah bagi para developer aplikasi web saat ini, karena dengan ada yeoman yang akan…

View original post 1,324 more words

Membuat Map Sederhana menggunakan Google Maps API v3

Hello Friends„ How are you today? I hope all of you have a great day 🙂

Ok langsung aja yh..

Pertama-tama kita panggil si api gugelnya dulu.. hey„ sini donk 😀

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Kedua-dua kita tentukan posisi dimana kita berada. Simpan didalam kode javascript kita. 

var cirebon = new google.maps.LatLng(-6.7166667, 108.5666667);
var cirebonBarat = new google.maps.LatLng(-6.713411147532438, 108.56200218200684); 

Ketiga-tiga kita bikin Map untuk ditampilkan di html kita..

var myOptions =	{
		  center: cirebon,
		  zoom: 15,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		};
				
var map = new google.maps.Map(document.getElementById("maps"),myOptions);

Langkah selanjutnya untuk membuat titik/point Marker dan info window ketika di klik

var marker= new google.maps.Marker({
				    position: cirebon,
				    map: map			
				});
var klik = google.maps.event.addListener;
klik(marker, 'click', (function(marker){
  return function() {
  infowindow.setContent("Ini Rumahku"),
  infowindow.open(map, marker);				
}			
})(marker));

kemudian bikin garis dari point a ke b.. (polyline)

var lingkaran = new google.maps.Circle({ map: map, center: cirebon, fillColor: "#4CED4C", fillOpacity: 0.6, strokeColor: "transparent", strokeOpacity: 0.8, strokeWeight: 2 }) lingkaran.setRadius(200);

Untuk HTML-nya seperti ini

<div id="maps" style="width: 75%"></div>

Demo+Source Langsung sini aja : http://cezmed.comeze.com/map-sederhana.html