Untuk Praktikum pertama grade 10, kita akan mencoba untuk membuat game sederhana yang diberi judul Alien Attack!!! Sebenarnya interaksi user dengan game hanya dengan mengklik mouse secepat2nya untuk mencegah serangan alien terhadap bumi. Skenario ini dapat berbeda antara siswa yang satu dengan lainnya, tergantung kreatifitas individu. Yang perlu disiapkan pertama kali adalah Title Screen. Unsur ini memegang peranan yang sangat penting, karena inilah yang akan menarik user untuk mencoba memainkan game kita. Apabila pada judul gamenya sendiri sudah tidak menarik, maka orang akan enggan mencoba atau bermain dengan game kita. Kemudian dilanjutkan dengan penjelasan dari game itu sendiri. Latar belakang game dan bagaimana cara memainkan game tersebut. Jika unsur ini tidak ada, bisa jadi orang akan merasa kebingungan dalam mencoba game kita, dan apabila terjadi demikian, ada kemungkinan mereka tidak akan mencoba game kita lagi.
lalu unsur berikutnya, tentu saja adalah game itu sendiri. Desain dunia game yang menarik, akan memberikan nilai tambah bagi suksesnya game yang kita buat. Untuk Alien Attack, kita akan memberikan empat unsur penting dalam dunia game yaitu:
1. Background, berupa luar angkasa lengkap dengan gambar bumi
2. Object Alien yang mendekati bumi
3. Tombol sebagai interaksi user untuk menambah armor
4. Indikator Armor yang dalam contoh ini diletakkan di bagian atas
Kemudian, diciptakan dua buah kondisi, apabila armor yang diklik mencapai 100%, permainan berakhir dengan kemenangan user, sementara jika tidak sampai 100%, pemain dinyatakan kalah. Untuk lebih jelasnya, silakan mencoba permainan Alien Attack berikut ini:
Pernahkah anda mengalami hal ini? Tahu2 program yang sudah kita buat, saat kita simpan, muncul extra baris di setiap barisnya. Mungkin bagi beberapa orang hal ini tidak menjadi masalah. Tapi buat saya, kok rasanya tidak enak, karena barisnya menjadi semakin panjang. Sempat beberapa kali mencoba freeware penghapus baris kosong yang under DOS, namun yang terjadi malah ada beberapa baris program saya yang ikut kehapus 
(
Akhirnya nemu juga satu situs di internet yang memberikan layanan ini. Scriptnya keliatannya jalan diclient, jadi tidak perlu kuatir script2 anda nantinya bisa dicuri oleh si pemilik situs. Jadi kita tinggal cut script kita, paste di situs ini, lalu klik Remove Empty Lines, dan copy kembali ke script editor kita, mudah bukan?
Berikut ini linknya: http://textmechanic.com/Remove-Empty-Lines.html
Selamat mencoba.
Dengan database yang semakin besar, import data lewat phpMyAdmin tidak selalu bisa mengimport semua data, bahkan kadang2 seringkali terjadi error. Untuk mengatasi hal ini, kita dapat mengimportnya langsung dengan perintah mysql (penulis menggunakan XAMPP for windows), langkah2nya adalah sebagai berikut:
1. pastikan tabel2 yang ada di database diremove terlebih dahulu, jika anda tidak yakin melakukan hal ini, boleh dibuat backupnya
2. pada folder xampp/mysql/bin, ketikkan perintah mysql -u root -p database < c:/data.sql
(asumsi data yng diimport adalah data.sql dan ada di folder C
3. tunggu sejenak dan setelah beberapa saat seluruh data berhasil diimport dengan sempurna
Kali ini kita akan mencoba menunjukkan beberapa lokasi dimana data latitude dan longitudenya kita ambil dari MySQL Database. Untuk kebutuhan ini, tentu saja kita akan menggunakan PHP untuk mengambil data2 dari database, kemudian data2 ini kita convert menjadi JSON, yang selanjutnya dibaca oleh AJAX. Pertama2 kita akan menggunakan iframe untuk menampilkan mapnya
<iframe width=”540″ height=”377″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”map.php?search=<?php echo $search?>”></iframe>
Dalam file map.php, kita ketikkan kode program berikut ini:
<html>
<head>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type=”text/javascript” src=”scripts/jquery-1.4.3.min.js” ></script>
<script type=”text/javascript”>var map;
var i;
var url;
var marker_icon= ‘home.png’;function map_initialize(){
var start_position = new google.maps.LatLng(lat, lon);
var mapoption = {
zoom: 4,
center: start_position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(“map_canvas”),mapoption);
getData();
}function putMarker(location){
tanda = new google.maps.Marker({
position: location,
map: map,
icon: marker_icon
});
}function getData(){
url = “getdata.php?search=<?php echo $_GET['search']?>”;
$.ajax({
url: url,
dataType: ‘json’,
cache: false,
success:
function(result){for(i=0;i<result.position.length;i++)
{
var point = new google.maps.LatLng(
parseFloat(result.position[i].lat),
parseFloat(result.position[i].lon));
putMarker(point);
}
}
});
}</script>
</head>
<body onload=”map_initialize()”>
<center><table border=0 width=600>
<tr><td>
<div id=”map_canvas” style=”width:540px; height:377px”></div>
</td>
</tr>
</table>
</body>
</html>
Penjelasan:
Saat dijalankan pertama kali, dia akan memanggil fungsi map_initialize untuk menginisialisasi peta dengan lokasi yang sudah dideklarasikan sebelumnya.
Kemudian akan dipanggil fungsi AJAX getData, dengan mengirimkan parameter tertentu yang bisa dibaca di file getdata.php nya nanti, dimana file ini akan mengirimkan nilai balik ke file map.php berupa nilai2 latitude dan longitude dalam format JSON.
Parameter JSON ini berbentuk array yang dapat kita baca dengan looping di dalam fungsi AJAX yang sama, untuk memanggil fungsi putMarker, yaitu fungsi yang digunakan untuk meletakkan marker di atas peta Google Map.
Berikut ini adalah isi dari file getdata.php
<?php
$result=mysql_query($sql);
$loopCount = 1;
$json = ‘{ ‘
. ‘”position” : [';// build json string
while ($row = mysql_fetch_array($result)) {
$json .= '{ '
. '"lat" : "' . $row['lat'] . ‘”, ‘
. ‘”lon” : “‘ . $row['lon'] . ‘” ‘
. ‘}’;// add comma if
if ($loopCount < $record_per_page) {
$json .= ‘, ‘;
$loopCount++;
}
}$json .= ‘] ‘
. ‘}’;echo $json;
?>
Selamat mencoba.
Posisi Latitude dan Longitude dalam Google Map sangat penting untuk langsung merujuk pada lokasi tertentu. Apabila kita hanya mengetahui alamatnya saja, apakah kita bisa mencari tahu latitude dan longitude-nya? Hal ini bisa saja kita lakukan dengan menggunakan script berikut ini:
<?php
$address=’Pucang Anom Timur’;
$suburb=’Surabaya’;
$address=str_replace(‘ ‘,’+',$address);
$suburb=str_replace(‘ ‘,’+',$suburb);
$state=’East Java’;
$country=’Indonesia’;
$str=’http://maps.google.com/maps/api/geocode/json?address=’.$address.’,’.$suburb.’,’.$state.’,’.$country.’&sensor=false’;
$geocode=file_get_contents($str);
$output= json_decode($geocode);
$lat = $output->results[0]->geometry->location->lat;
$lon = $output->results[0]->geometry->location->lng;
?>
Untuk alamat atau kota yang dimasukkan, apabila mengandung spasi, harus kita ubah menjadi tanda plus (+), sedangkan antara alamat, kota, state dan negara masing2 akan dipisahkan dengan tanda koma. Jadi setelah script dijalankan, nilai latitude dan longitudenya akan disimpan pada variabel $lat dan $lon.
Selamat mencoba.
Beberapa teman menanyakan kepada saya, apakah mungkin melakukan update pada beberapa DIV yang berbeda, hanya dengan satu kali pemanggilan fungsi AJAX? Ternyata hal tersebut dapat dilakukan dengan mudah. Aplikasi ini pernah saya gunakan untuk merefresh dua DIV pada satu halaman website, dimana yang satu berisi data yang saya ambil dari MySQL sementara yang satu lagi adalah lokasi dari data2 tersebut yang ditunjukkan dengan Google Map. Perhatikan contoh fungsi AJAXnya sebagai berikut:
function ajaxSearch(hal){
var ajaxRequest, ajaxRequest1; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
ajaxRequest1 = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e){
// Something went wrong
alert(“Your browser cannot support AJAX!”);
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById(‘ajaxResult’);
if (ajaxDisplay.style.display == ‘none’) {
ajaxDisplay.style.display = ‘block’;
}
ajaxDisplay.innerHTML = ajaxRequest.responseText;}
else
{
var ajaxDisplay = document.getElementById(‘ajaxResult’);
if (ajaxDisplay.style.display == ‘none’) {
ajaxDisplay.style.display = ‘block’;
}
ajaxDisplay.innerHTML = “<img src=images/ajaxload.gif>”;
}
}// Create a function that will receive data sent from the server
ajaxRequest1.onreadystatechange = function(){
if(ajaxRequest1.readyState == 4){
var ajaxDisplay1 = document.getElementById(‘ajaxResult1′);
if (ajaxDisplay1.style.display == ‘none’) {
ajaxDisplay1.style.display = ‘block’;
}
ajaxDisplay1.innerHTML = ajaxRequest1.responseText;}
else
{
var ajaxDisplay1 = document.getElementById(‘ajaxResult1′);
if (ajaxDisplay1.style.display == ‘none’) {
ajaxDisplay1.style.display = ‘block’;
}
ajaxDisplay1.innerHTML = “<img src=images/ajaxload.gif>”;
}
}//gathers all the variables
var keyword=document.getElementById(‘keyword’).value;var queryString = “?keyword=” + keyword;
ajaxRequest.open(“GET”, “datasearch_ajax.php” + queryString, true);
ajaxRequest.send(null);ajaxRequest1.open(“GET”, “mapsearch_ajax.php” + queryString, true);
ajaxRequest1.send(null);
}
Jadi dari contoh diatas cukup jelas, bahwa untuk membuat satu fungsi AJAX mampu memanggil dua file PHP yang berbeda, pertama2 kita harus memesan dua variabel AJAX, yang digunakan untuk mengirimkan parameter ke PHP dan juga memeriksa status atau state dari AJAX
Selamat mencoba.
Untuk meng-embed Google Map seperti diatas, kita cukup masuk ke maps.google.com, dan ketikkan alamat kita, lengkap dengan kota dan negara dimana masing2 item akan dipisahkan tanda koma, kemudian kita tinggal klik link dan mengcopy source HTML untuk bisa diletakkan diweb kita. Untuk kode HTML diatas adalah sebagai berikut:
<iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.id/maps?q=-7.237914,112.779354&num=1&ie=UTF8&t=m&z=14&ll=-7.238418,112.779323&output=embed”></iframe><br /><small><a href=”http://maps.google.co.id/maps?q=-7.237914,112.779354&num=1&ie=UTF8&t=m&z=14&ll=-7.238418,112.779323&source=embed” style=”color:#0000FF;text-align:left”>Lihat Peta Lebih Besar</a></small>
Selamat mencoba
Recent Comments