Home > Menengah > Web Development > Tutorial Ajax > Ajax dengan PHP dan Jquery

.

6 Komentar Untuk Artikel Ini BYAdmin Ilmuwebsite

Banyak sekali permintaan yang datang kepada penulis perihal bagaimana cara mudahnya menghasilkan fitur ajax dengan menggunakan jquery dan php. 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, penulis akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax menggunakan php dan jquery. Caranya sangat-sangat mudah sekali. Anda cukup mengikuti syntaxnya, dan memahami alurnya. Tapi sebelumnya terlebih dahulu Anda membaca tutorial saya sebelumnya tentang pengenalan jquery.

Setidaknya diperlukan paling tidak 3 buah file minimal, pertama adalah file yang digunakan untuk mengirimdata, 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.

Yang perlu disorot adalah jquery script yang ada dibagian headnya :

<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>

jquery action selalu diawali dengan

$(document).ready(function(){

dan di akhiri 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 penulis 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’);
}
});

untuk demo silahkan kunjungi ilmuwebsite labz http://labz.ilmuwebsite.com/ajaxjquery
dan download langsung filenya di sini http://labz.ilmuwebsite.com/ajaxjquery/ajaxjquery.zip

Oke, selamat mencoba artikel ajax dengan php dan jquery.

Salam

Loka Dwiartara
Staff Ilmuwebsite

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



6 Response untuk Artikel Ini

  1. Download Lagu Terbaru

    terimakasi gan numpang download


  2. Lenny

    Saya lagi coba gabungkan PHP dan Ajax di website saya, artikel ini berguna sekali. Trims.


  3. prasetyo wicaksono

    mantap artikel’a pak loka… sering2 aja neh sharing2 gni…
    thanx…


  4. Jefry

    Saya kurang begitu pandai soal coding, walaupun begitu di postingan ini saya mendapatkan tambahan ilmu dan semoga kemampuan coding saya bisa meningkat
    terima kasih


  5. Deddy

    Saya biasa menggunakan codecharge untuk membuat aplikasi ajax. Mudah membuatnya. Baru dari artikel ini saya tau cara kerja ajax tsb. Terima kasih.


  6. Lirik Lagu Lebih

    Ilmunya tentang ajax sangat menarik, terimakasih telah berbagi kode


You must be logged in to post a comment.

eXTReMe Tracker