Hai, ini adalah tulisan pertama saya di Jagocoding.com. oke langsung saja..  Ajax merupakan satu fitur yang digunakan oleh para developer, baik menambah data, menghapus, mengupdate, tanpa melakukan refresh page, atau redirect page. Banyak cara juga untuk dapat menghasilkan Ajax ini, ada devel...

Ajax dengan PHP dan Jquery

Hai, ini adalah tulisan pertama saya di Jagocoding.com. oke langsung saja.. 

Ajax merupakan satu fitur yang digunakan oleh para developer, baik menambah data, menghapus, mengupdate, tanpa melakukan refresh page, atau redirect page.

Banyak cara juga untuk dapat menghasilkan Ajax ini, ada develepor yang membuat engine sendiri, tentunya menggunakan standarisasi ajax, ada juga yang menggunakan javascript plugin, seperti jquery misalnya.

Di tutorial kali ini, saya akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax menggunakan php dan jquery. Caranya sangat-sangat mudah sekali. Anda cukup mengikuti syntaxnya, dan memahami alurnya. Setidaknya diperlukan paling tidak 3 buah file minimal, pertama adalah file yang digunakan untuk mengirim data, kemudian file yang digunakan untuk menerima data ataupun memproses data, dan yang terakhir adalah jquery librarynya itu sendiri.

Oke disini saya memiliki file index.php yang berfungsi dalam mengirimkan data :

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
 <head>
 <title></title>
 <meta name=”” content=””>
 <script type=”text/javascript” src=”jquery-1.6.4.js”></script>
 <script type=”text/javascript”>
 $(document).ready(function(){
 $(‘#ajaxTest’).submit(function(eve){
 eve.preventDefault();
 $.ajax({
 url: “/function.php”,
 type: “POST”,
 dataType: “html”,
 data: $(this).serialize(),
 beforeSend: function(){
 $(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
 },
 success: function(html){
 $(‘#waiting’).fadeOut(‘slow’);
 $(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
 }
 });
 }); 
 });?? ??? ?
 </script>
 </head>
 <body>
 <form method="POST" id="ajaxTest">
 <input type="input" name="ajaxInput" />
 <input type="submit" name="ajaxBtn" value="Test Button" />
 </form>
 <div id="waiting"></div>
 <div id="result"></div>
 </body>
</html>

 

Selanjutnya adalah function.php yang digunakan dalam menerima dan memproses data berisi :

<?php
echo $_POST['ajaxInput'];
?>

 

Dan file yang terakhir adalah file jquery itu sendiri saya menggunakan jquery versi 1.6.4. Dari file ini tidak ada yang perlu diubah.

Pembahasan File Di Atas

Yang perlu disorot adalah jquery script yang ada dibagian headnya. yaitu, Jquery action selalu diawali dengan : 

$(document).ready(function(){

Dan diakhiri dengan : 

});

Kemudian baris selanjutnya adalah :

$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();

Ini berarti submit form yang tadinya disubmit secara langsung ke action formnya alihkan dengan menggunakan jquery ajax, jadi ketika diklik maka tidak akan berpindah ke halaman action formnya. Yang ada malahan jquery yang mengambil alih ketika button submit di klik.

Kemudian baris selanjutnya adalah : 

$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),

Url berisi halaman penerima data yang akan dikirim, kemudian type POST anda sudah tahu maknanya, dataType HTML kita lewat saja, dan yang terakhir adalah data:($this).serialize() artinya kirimkan data yang datanya itu diambil dari input-input yang ada dalam form.

Sedangkan baris selanjutnya saya yakin Anda sudah paham maknanya :

beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});

Oke, selamat mencoba artikel ajax dengan php dan jquery.

 

Jika kurang faham bisa ditanyakan di komentar


About Author

Ahmad Maulana

Hello, panggil aja gue eksmudd atau adun. Gue pelajar, dan gue bercita-cita jadi Web Developer


Comment & Discussions

  • Calma (Guest)
    gan mau tanya. itu kan kodingnya berlaku untuk 1 halaman saja....
    gmn kondisinya klo kita buka 2 tab dg halaman yg berbeda...

    tab pertama inputan, tab kedua outputan. ketika kita input secara otomatis tab kedua(outputan) akan merefresh...

    ditunggu jawabannya y gan... trimakasih

  • Dicky Saputra
    $(document).ready(function(){

    script ini di letakan di mana?

  • Please LOGIN before if you want to give the comment.