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 

Programer Juga Manusia [Harus]

Programer Harus Manusia

Programer Harus Manusia

Saya ditahun 2014 awal ini terlena akan tantangan-tantangan yang ada di dunia Komputer ini, yah Ngoding.. apalagi kalo bukan itu. jam kerja saya normal 08:00 sampai 17:00 seperti pegawai lainya. Tapi Kerjaan saya terasa tidak normal beban rasanya meninggalkan kerjaan yang sebenernya bisa dikerjakan sekarang, bisa selesai untuk besok, atau saya masih bahagia mengerjakan Proyek ini.

Olahraga : sudah beli sepeda Gunung tuh, tiap minggu rutin ikut Senam Nusantara juga loh di Taman Tebet. Baca Buku saya suka wooow apalagi deket gramedia GI, gratiis tinggal jalan baca ga usah beli, hehe.. jalan – jalan kadang juga. Tapi itu duluuuuu…

Begitu sibuknya saya atau begitu Sok sibuknya saya sampai – sampai kebiasaan itu terlewatkan semua. Ya dunia itu terlupakan hanya karena merasa nyaman mengerjakan berbagai permasalahan dalam developer website ini. ya itu tidak masalah toh saya bahagia dan tidak sakit. semua baik – baik saja benarkan ? yap betulll, Tapi itu kemariiin …

Libur kemarin saya sempatkan pulang ke rumah, ke daerah saya di jawa tengah terlalu lelah di Ibukota. Bahagianya bertemu Keluarga disana. Tidak lupa saya sempatkan 1 hari jalan-jalan bersama seseorang yang selalu menjadi motivasi dan tujuan saya sekarang. menyenangkan meskipun melelahkan. wajaar.. kan lelah. ?? hah tidak tidak tidak.

Keesokan harinya, Minggu.. saya bangun pagi dan terasa seluruh badan ini lelah dan pegal semua. waah mulai tidak wajar kan. seingat saya 1,2,3 Hari jaan-jalan pun ga masalah. sekarang cuma jalan-jalan 1 hari sudah seperti ini, ada yang tau kenapa ?

Sore hari saya harus kembali berangkat ke ibukota, beruntung dapat Bus xxxxx executive. meski sempat ketinggalan Bus dan mengejarnya menggunakan sepeda motor tapi itu dingiin, yah saya kedinginan. di Bus ada selimur dan Bantal nyenyak pasi tidur malam ini, itu yang saya pikirkan.

keesokan harinya ternyata kawan – kawan saya masuk angiin. kedinginan dan terlalu lelah. akhirnya down. dan terpaksa 2 Hari ijin ga kerja. mantaaap kan ?ūüôā

Yah begitulah Tugas seorang Programer itu memang menjadi Programer.

Tapi Programer itu Juga harus menjadi mansuia agar dia bisa menemukan Algoritma dengan Logika yang Tepat. jadi ayoo kita mulai pikirkan kembali suapaya kejadian ini tidak terulang dan teman-teman juga tidak mengalaminya.

Terima kasih..

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

Pengertian XSS

XSS merupakan kependekan yang digunakan untuk istilah cross site scripting.

Cross Site Scripting

XSS adalah salah satu jenis serangan injeksi code (code injection attack). XSS dilakukan oleh penyerang dengan cara memasukkan kode HTML atau client script code lainnya k

e suatu situs. Serangan ini akan seolah-olah datang dari situs tersebut. Akibat serangan ini antara lain penyerang dapat mem-bypass keamanan di sisi klien, mendapatkan informasi sensitif, atau menyimpan aplikasi berbahaya.

Alasan kependekan yang digunakan XSS bukan CSS karena CSS sudah digunakan untuk cascade style sheet.

Tipe XSS

  • Reflected atau nonpersistent
  • Stored atau persistent

Reflected XSS

Reflected XSS merupakan tipe XSS yang paling umum dan yang paling mudah dilakukan oleh penyerang. Penyerang menggunakan social engineering agar tautan dengan kode berbahaya ini diklik oleh pengguna. Dengan cara ini penyerang bisa mendapatkan cookie pengguna yang bisa digunakan selanjutnya untuk membajak session pengguna.

Mekanisme pertahanan menghadapi serangan ini adalah dengan melakukan validasi input sebelum menampilkan data apapun yang di-generate oleh pengguna. Jangan percayai apapun data yang dikirim oleh pengguna.

Contoh penyerangan menggunakan XSS (Nama – nama yang saya pakai merupakan karangan) :

1. Toni sering mengunjungi website jack, yang di website tersebut memungkinkan toni untuk memasukan username/password dan menyimpan data pribadi atau data transaksi yang seharusnya tidak boleh diketahui orang lain.

2. Rey mengetahui bahwa toni sering mengunjungi web tersebut, dan lalu mengamati jika di website buatan Jack terdapat kerentanan atau celah yang bisa diserang menggunakan xss

3. Rey lalu mengekplore dan mencoba mencari celahnya dan membuat script berbahaya dan kemudian di embed atau dimasukan ke dalam sbuah URL

4. Rey lalu mengirim email ke toni yang berisi link ke halaman web jack yang sebenernya urlnya sudah di embed script yang berbahaya tersebut, serta merayunya dengan alasan palsu atau sejenisnya.

5. saat Toni click URL tersebut maka toni akan masuk ke dalam website jack serta script yang sudah rey buat akan dijalankan, sehingga rey bisa mengmbil data dari coocienya dan bisa memanfaatkanya.

untuk kejelasan entuk scriptnya seprti apa silahkan dipelajari sendiri..ūüėÄ

Stored XSS

Stored XSS lebih jarang ditemui dan dampak serangannya lebih besar. Sebuah serangan stored XSS dapat berakibat pada seluruh pengguna. Stored XSS terjadi saat pengguna diizinkan untuk memasukkan data yang akan ditampilkan kembali. Contohnya adalah pada message board, buku tamu, dll. Penyerang memasukkan kode HTML atau client script code lainnya pada posting mereka.

ini contoh sederhana yang saya dapat dari wikipedia, spertinya bisa dimengerti karena sederhana :

  1. Mallory posts a message with malicious payload to a social network.
  2. When Bob reads the message, Mallory’s XSS steals Bob’s cookie.
  3. Mallory can now hijack Bob’s session and impersonate Bob

banyak hal yang bisa anda pelajari, dan dengan mengetahuinya anda pasti akan bisa mencari cara mencegahnya. semangat..

sumber : https://en.wikipedia.org/wiki/Cross-site_scripting

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.