Membuat Peta dari Google Maps API

mapsLiburan waktunya mengembangkan diri, penasaran ingin mengexplore kembali mengenai Peta atau suatu lokasi di website akhirnya saya jatuh hati kepada Google Maps, Pasti. Saya akan coba membuat tutorial sederhana Cara menampilkan Peta suatu Lokasi di Website :

Sebelumnya ada hal yang harus dimengerti terlebih dahulu mengenai Google Maps API Key hanya saya tidak menjelaskan detail disini. Sederhanaya itu adalah Key yang dibutuhkan agar kita bisa memakai API dari google Maps dibawah saya pakai API sbagai contoh, tapi jika ingin benar2 membuat aplikasi sndiri saya sarankan anda mendaftarkan dan membuat Key Google Maps anda sendiri.

 

Scriptnya Sederhana :

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

Diantara tag <head> anda memanggigil script agar anda bisa menggunakan API dari google Maps. Jadi pastikan anda tuliskan itu. Key berisi data yang saya jelaskan diatas. Sedangkan sensor itu untuk menjelaskan aplikasi ini menggunakan sensor atau tidak contohnya seperti GPS.

<div id=”googleMap” style=”width:500px;height:380px;”></div>

Itu adalah Div dengan id googleMap sederhana yang nantinya jadi tempat untuk menampilkan Peta yang akan kita buat.

Disini dibutuhkan pemahaman javascript yang cukup :

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(-6.194912, 106.822823),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Pertama Kita buat fungsi dengan nama [contoh] initialize() yang di dalam fungsi tersebut kita devinisikan 2 variabel.

  1. mapProp variable ini berisi data configurasi atau settingan untuk peta yang akan kita tampilkan. Ada 3 contoh jenis config
    1. center : disini kita definisikan kode koordinat lokasi yang menjadi bagian tengah peta. Diatas saya contohkan koordinat Bunderan HI, Jakarta
    2. zoom : kita definisikan besaran Zoom dari Peta, semakin besar nilainya semakin Detail tampilan peta yang kita tampilkan
  2. map Variable ini kita jalankan objek yang berasal dari API Goolge maps, yang berisi 2 parameter
    1. document.getElementById(“googleMap”) ini untuk menyeleksi element div yang sudah kita buat diatas dengan id googleMap
    2. mapProp ini adalah nama variabel yang sudah kita buat diatas.
    3. mapTypeId adalah jenis peta yang ingin kita tampilkan, ada beberpa pilihan : ROADMAP, SATELLITE, HYBRID, TERRAIN

google.maps.event.addDomListener(window, ‘load’, initialize);

itu adalah perintah yang digunakan untuk menambahkan listener yang intinya Saat halaman diload dia akan menjalankan fungsi initialize()

Mungkin seperti itu penjelasan sederhananya.

Contoh script :

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(-6.194912, 106.822823),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap"></div>

</body>
</html>

Semoga bermanfaat terima kasih, selamat belajar.. happy Codding ūüėÄ

Slide Sederhana | PHP – Jquery

jquery-logoSudah lama saya coba buat Slide menggunakan PHP dan Jquery saat itu lagi iseng2 nah cuma mungkin akan saya share kembali mungkin ada yang ingin coba-coba atau mengembangkan atau baru belajar.

Demo : Slide Sederhana PHP + Jquery

Download Source : Download Source Langsung

Semoga Demo dan Source diatas bisa bermanfaat untuk Belajar. semangat selalu.. ūüôā

Maaf tidak bisa menjelaskan detailnya. harapan saat membuat dan mempelajari diatas sudah paham PHP dan Jquery ya. hehe

Jika ada pertanyaan silahkan, atau gabung di Grup Belajar Website agar lebih ramai. hehe..

Thanks

Tutorial CRUD dengan CodeIgniter

Tutorial mengenai Create, Read, Update dan Delete data pada database mysql serta menggunakan Framework Codeigniter PHP.

Active Record - Menambahkan data (insert)Mungkin kali ini saya tidak bisa menjelaskan secara detail script-script yang kita pakai. akan tetapi saya akan berikan link download untuk teman-teman pelajari. didalamnya terdapat backup dari database mysql yg dipakai serta jangan lupa membca User Guide yah. ūüôā

Mungkin sekilas tadi kurang lebih 1 jam saya sempatkan untuk membuat tampilan dafar pegawai, fiture tambah, ubah serta hapus data menggunakan Framework Codeigniter ini. silahkan nanti temen-temen buka file pegawai [controller], v_pegawai [pegawai] dan m_pegawai [model] untuk dipelajari scriptnya.

jangan lupa seting konfigurasi database disesuaikan di config/database.php setelah teman-teman restore database kepegawaian yg sudah saya sediakan juga contohnya.

Semoga bermanfaat.. Happy Coding ūüėÄ

Download codeigniter 2.1.3 РContoh CRUD Pegawai 

CANVAS – HTML 5

Pengertian Canvas

canvas<canvas> di HTML 5 adalah element yang digunakan untuk menggambar grafik, object di website yg umumnya melalui script javascript.

<canvas> hanya merupakan wadah untuk menggambar, dan untuk menggambarnya anda harus menggunakan script, misal javascript.

<canvas> memiliki beberapa metode untuk menggambar Garis, kotak, lingkaran, karakter, dan menambahkan gambar.

Membuat Canvas

Canvas adalah area persegi yang dibuat menggunakan tag <canvas>, secara default canvas tidak meiliki border dan isi.
contoh :

<canvas id=”kanvasku” width=”200″ height=”100″></canvas>

Saat senggang saya coba pelajari dan membuat percobaan, berikut saya coba memeberikan contoh yang saya buat semoga bermanfaat :

<!DOCTYPE html>
<html>
<head>
<script>
function persegi(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.fillStyle="#000000";
	ctx.fillRect(10,10,90,40);
	console.log(ctx);
}
function line(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.moveTo(100,50);
	ctx.lineTo(200,100);
	ctx.stroke();
}
function lingkaran(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.beginPath();
	ctx.arc(100,50,40,0,2*Math.PI);
	ctx.stroke();
}
function text(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.font='20px, arial';
	ctx.fillStyle="#ffffff";
	ctx.fillText('Persegi',20,20);
	ctx.strokeText('Persegi',50,70);
}
</script>
</head>
<body >

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p>
<ol>
<li><a href="javascript:persegi()">Persegi</a></li>
<li><a href="javascript:line()">Line</a></li>
<li><a href="javascript:lingkaran()">Lingkaran</a></li>
<li><a href="javascript:text()">Text</a></li>
</ol>
</body>
</html>

Tadi penjelasan sederhananya.. semoga bermanfaat. silahkan dipahami. karena scriptnya setau saya tidak susah. jika ada yg tidak jelas silahkan bertanya. ūüôā

jangan lupa gabung di grup belajar website di facebook.

sumber : http://www.w3schools.com/html/html5_canvas.asp

Pemahaman Dasar PHP

Tags PHP

phpKita bisa menuliskan script php di dalam sebuah dokument html ataupun di halaman php yang brediri sendiri. tapi kita harus menggunakan tags PHP agar script php yg kita buat dapat dikenali sebagai bahasa php dan di proses oleh web server. kita bisa menggunakan tag :

<?php    ?>

<?php  digunakan untuk membuka dan menadakan awal dari script php dan ?>   digunakan untuk menutupnya. selain itu banyak juga yang menggunakan short tag, jadi hanya menggunakan <? dan ?>. meskipun bisa, tidak dianjurkan menggunakan short tags karena di beberapa web server default itu short tag tidak aktif atau disable. ketika kita ingin menggunakan cara tersebut kita harus memastikan pengaturan short tags di file configrasi php.ini sudah kita aktifkan. karena jika belum bisa menyebabkan script tidak tereksekusi bahkan bisa menyebabkan error.

dan berikut yang saya dapat dari php manual, mungkin bisa jadi referensi juga :

1.  <?php echo 'if you want to serve XHTML or XML documents, do it like this'; ?>
2.  <script language="php">
echo 'some editors (like FrontPage) don\'t
like processing instructions';
</script>
3.  <? echo 'this is the simplest, an SGML processing instruction'; ?>
<?= expression ?> This is a shortcut for "<? echo expression ?>"
4.  <% echo 'You may optionally use ASP-style tags'; %>
<%= $variable; # This is a shortcut for "<% echo . . ." %>

selain itu dengan php kita juga membuat seperti ini :

 $expression=true;  //kita definisikan nilai ekspresinya
<?php if ($expression == true): ?>
  jika nilai = True maka Text ke 1 ini akan ditampilkan di browser.
<?php else: ?>
  jika nilai = false maka Text ke 2 ini akan ditampilkan di browser.
<?php endif; ?>

Komentar di PHP

Kita juga bisa menuliskan komentar di dalam script php, ada 2 cara yaitu :

1. mengunakan //.. ,  ini bekerja untuk 1 baris code

2. menggunakan /*  .. */  ini bisa kita untuk membuat komentar yang terdiri dari lebih dari 1 baris

<?php

  // komentar pertama
  // komentar kedua

 echo "contoh membuat komentar di php";

  /* komentar awal
  komentar di tengah
  komentar di akhir */

?>

Mungkin sebagai dasar, itu cukup bermanfaat agar bisa melanjutkan ke materi yang lebih dalam lagi. jika ada pertanyaan silahkan komentar atau hub saya langsung. semoga bisa saling membantu.
setalah ini mungkin akan saya ulas mengenai Variable di PHP.

[Looping] Perulangan For di PHP

Loops execute a block of code a specified number of times, or while a specified condition is true.

For pada PHP digunakan untuk mengulang suatu block perintah atau kode sebanyak nilai yg ditentukan dengan sarat perulangan akan selalu dilakukan selama kondisi bernilai benar.

Bentuk Penulisan sintaknya secara Umum :

for (init; condition; increment)
  {
  code to be executed;
  }

Parameters:

  • init: Mostly used to set a counter (but can be any code to be executed once at the beginning of the loop)
  • condition: Evaluated for each loop iteration. If it evaluates to TRUE, the loop continues. If it evaluates to FALSE, the loop ends.
  • increment: Mostly used to increment a counter (but can be any code to be executed at the end of the iteration)

hayo hayo… Programer ngga boleh malas dan ngga mau belajar bahasa inggris yo. karena belum ada bahasa pemrogrman terkenal memakai bahasa indonesia. perintah perintahnya itu hampir semua memakai bahasa inggris loh.

Saat belajar dulu saya senang dengan pelajaran ini. searakng setalh lama ngga nulis dan ada pertanyaan seputar itu saya jadi ingin membuat artikel sederhana dan pendek mengenai perulangan/looping di PHP menggunakan FOR.

<?php
 for($i=1;$i<5;$i++){
	echo $i.'<br />';
 }
?>

--------------------------<br>

<?php
 for($i=1;$i<5;$i++){
	for($j=1;$j<=$i;$j++){
	echo '#';
	}
	echo "<br>";
 }
?>

Diatas ada contoh script, semoga bermanfaat. silahkan dicoba dan dipelajari.

jika ada pertanyaan boleh, jika bisa pasti saya bantu,.. atau bergabung di Grup Belajar Website di Facebook. ūüėÄ

Links pada HTML

Link atau hyperlink (dalam Ms.word) adalah  gambaran bahwa apabila kita mengeklik sebuah kata atau gambar maka kita akan menuju atau diarahkan ke halaman lain sesuai dengan yang kita atur.

Link pada HTML ini menggunakan tag <a>

Dimana tag <a> dapat digunakan dengan dua jalan :

  1. Untuk membuat link menuju ke document lain, maka akan menggunakan atribut href
  2. Untuk membuat bookmark dalam sebuah document, maka akan menggunakan atribut name

Langkah :

  1. Tulislah script dibawah ini pada dreamwaver atau notepad  :
<html>

<head><title>Link</title></head>

<body>

<a href=<a href="http://www.facebook.com/">http://www.facebook.com</a> target=‚ÄĚ_blank‚ÄĚ>Kunjungi Facebook</a>

<p>Apabila anda men-setting atribut target dengan ‚Äú_blank‚ÄĚ, maka link tersebut akan terbuka di tab yang baru pada browser yang digunakan</p>

</body>

</html>

2. Lalu save dengan nama Link.html
3. Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

link