Step by step belajar AJAX dan PHP

Selamat bertemu dalam tutorial media kreatif, kali ini kita akan membahas tentang AJAX. Berdasarkan pemahaman kamin, AJAX ( Asynchronous javascript and XML ) sebenarnya bukanlah bahasa pemrograman baru, akan tetapi merupakan penggabungan antara Javascript dan XML. Sehingga syntax - syntax yang digunakan dalam AJAX sebenarnya adalah syntax - syntax Javascript.

Dalam tulisan kali ini, kami akan mengilustrasikan metode pengiriman data dengan menggunakan AJAX, dimana contoh kali ini kedepannya akan bisa anda kembangkan untuk dipakai dalam sistem pembelian pada toko online, pemilihan jawaban pada ujian online, dan aktivitas lain yang memerlukan kecepatan akses user tanpa harus melakukan refresh pada keseluruhan halaman website.

 

Script program kali ini akan kita bagi menjadi 3 buah script, diantaranya adalah :

1. script utama.php
Script ini digunakan sebagai halaman utama yang nantinya akan diakses oleh user dan akan mengirimkan data melalui beberapa event kita pasang pada halaman ini, pada umumnya digunakan event javascript onclick , onmouseover, onmouseout dan lain - lain.

<html>
	<head>
	<title>Tutorial Ajax media kreatif</title>
	<script type="text/javascript" src="prmajax.js"></script>
	</head>
	
	<body>
	<div id="dom_ajax"></div>
	<a href="#" onclick="KirimData('fungsi','dom_ajax','Parmin Supaidi|Betty maryssa camakh|handi Susanti|Juni Sunarto');">Contoh pengiriman data melalui 

fungsi</a>
	</body>
</html>

2. script prmajax.js
Script ini merupakan bagian inti dari AjAX yang kita bicarakan, dalam script ini terdapat beberapa fungsi utama dan fungsi tambahan seperti yang terlihat pada contoh berikut :

function KirimData(dom,pid,nama) {
    document.getElementById(dom).innerHTML="Loading ...";
    var xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null) {
        alert ("Your browser does not support AJAX!");
        return;
    }
    var date=new Date();
    var timestamp=date.getTime();
	//Ubah bagian ini sesuai kebutuhan
    var url="http://localhost/tutorial/ajax/penerima.php";
    var param="pid="+pid+"&data="+nama;
	
	//tidak perlu dirubah
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
            var res=xmlhttp.responseText;
            document.getElementById(dom).innerHTML=res;
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", param.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(param);
	//tidak perlu dirubah
}


function GetXmlHttpObject() {
    var xmlhttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlhttp;
}


function clearDom(dom) { // fungsi untuk menghapus data yang ditampilkan pada DOM
	document.getElementById(dom).innerHTML="";
}

Script diatas kita simpan dalam satu direktory dengan script utama.php . Fungsi yang digunakan untuk mengirim data adalag function KirimData yang memiliki 3 variabel, yaitu :

  1. dom - merupakan variabel yang memuat pada bagian mana pesan akan ditampilkan, pada contoh diatas dom kita isi dengan dom_ajax yang merupakan id dari sebuah tag div yang berada pada script utama.php
  2. pid - merupakan variabel yang hanya kita gunakan sebagai pelengkap / keterangan dari data yang kita kirimkan, dalam hal ini kita isi dengan alumni
  3. data - merupakan data yang kita kirimkan dengan AJAX, dimana datanya bisa kita lihat pada halaman utama.php pada event onclick yang terdapat pada link

Untuk penjelasan lebih lanjut mengenai xmlhttp bisa kita lihat pada http://www.w3schools.com/xml/xml_http.asp

3. script penerima.php

Script penerima merupakan script php yang kita gunakan sebagai pemroses data yang dikirimkan oleh ajax. dalam contoh kali ini script penerima hanya melakukan proses cetak dan sedikit parsing untuk kemudian dicetak / ditampilkan sebagai pesan jawaban dalam proses xmlhttp.

<?php
if(isset($_POST['pid'])){
	echo 'data yang anda kirimkan dalam bentu Array adalah sebagai berikut ';
	print_r($_POST);
	//Contoh pengolahan data yang dikirim
	$pid  = $_POST['pid'];
	$data = $_POST['data'];
	echo "<h3>Daftar nama Alumni :</h3>";
	$nama = explode('|',$data);
	foreach($nama as $key => $val){
		echo $key.' » '.$val.'<br />';
	}
}
else{
	echo '-_- " kukur kukur kaka ';
}
?>

Jika anda ingin melakukan pemrosesan data ke database, maka bisa dilakukan pada script penerima.php ini . Sekian dulu tutorial kali ini, silahkan download contoh script diatas untuk mempelajarinya lebih lanjut.

Downlad script tutorial ajax
 

Tulis komentar

 




Today
Yesterday
All visitor

Pelatihan Website bersama Media Kreatif Indonesia

laboratorium Komputer dan teknology Kampus I ITN Malang 2013-07-09 08:00:00
 

Pelatihan Sistem Informasi

SMK Negeri 1 Lumajang 2013-05-01 12:00:00
 

Bakti sosial Teknik Kimia

Panti Asuhan Miftahul Huda II 2013-03-26 11:00:00
 

Bagaiamana metode pengajaran teknology yang paling efektif menurut anda ?

Beli buku, kemudian mempelajari sambil praktek
Mengikuti kursus sesuai bidang teknology
Belajar sendiri secara otodidak
Belajar dari contoh - contoh aplikasi yang sudah jadi
Belajar dari contoh - contoh yang paling sederhana
Semua pilihan benar