Tips Ajax PHP : Cara Cepat Menguasai AJax PHP serta Jquery

Di Tulis Oleh : Ivan Silalahi 4 comments
" BANTU SUBSCRIBE CHANNEL YOUTUBE SAYA, AGAR SAYA MEMBUAT VIDEO TUTORIAL SETIAP POSTINGAN BLOG INI DAN MASIH BANYAK LAGI YANG BISA SAYA BAGIKAN UNTUK SOBAT-SOBAT SEKALIAN. TERIMAKASIH SEBELUMNYA "



Mungkin masih banyak dari anda yang belum mengerti benar tetang ajax php, dan saat ini saya akan berusaha untuk memberikan penjelasan yang lebih mendetail tentang ajax, agar sobat semua mudah untuk memahaminya.
 Ajax bukan merupakan bahasa pemrogram yang baru melainkan hanya merupakan satu fitur yang digunakan oleh para developer, baik menambah data, menghapus, mengupdate, tanpa melakukan refresh page, atau redirect page.
kenapa kita harus menggunakan ajax ? Mungkin pertanyaan semacam itu akan muncul dalam benak anda. contoh yang paling simpel mengenai kegunaan ajax adalah disaat kita sedang mengerjakan sebuah website, atau sedang menginput data, edit atau hapus data pada website ,, dengan menggunakan ajax kita tidak perlu lagi me refresh halaman yang mengalami perubahan data, dengan ajax proses yang dilakukan akan dikerjakan disisi server, atau anda bisa melihat twitter.com , coba anda perhatikan pada bagian twitt dari folower anda,, akan secara otomatis bertambahkan ??? tanpa kita harus merefresh halaman browser kita,,,!!! itulah kegunaan ajax.
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 jquerymisalnya.
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 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 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’);
}
});

Selamat mencoba, jangan lupa , meninggalkan coment anda dibawah ini, atau share ke teman anda.




" BANTU SUBSCRIBE CHANNEL YOUTUBE SAYA, AGAR SAYA MEMBUAT VIDEO TUTORIAL SETIAP POSTINGAN BLOG INI DAN MASIH BANYAK LAGI YANG BISA SAYA BAGIKAN UNTUK SOBAT-SOBAT SEKALIAN. TERIMAKASIH SEBELUMNYA "


Tutorial terkait dengan Tips Ajax PHP : Cara Cepat Menguasai AJax PHP serta Jquery :

Terimakasih Atas Kunjungan Sahabat Setia Belajar Pintar PHP
Judul Pelajaran PHP : Tips Ajax PHP : Cara Cepat Menguasai AJax PHP serta Jquery
Ditulis oleh Ivan Silalahi
Rating postingan ini 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://planetsphp.blogspot.com/2012/11/tips-ajax-php-cara-cepat-menguasai-ajax.html. Terima kasih sudah singgah membaca artikel ini. Jangan lupa like dan sharenya serta komentarnya
4 comments:
Tom alcore said... Balas

hallo
apa kabar
saya newbe mau bertanya?
Database dengan Xampp, bs kah?
terima kasih

Anonymous said... Balas

Maaf , saya mau tanya nih
Gimana cara menggunakan jQuery ajax di template seperti http://themes.creativemilk.net/files/elite/index.html
Saya sudah coba mengikuti tutorial diatas , tetapi tidak bisa
Mohon bantuannya
Makasih

Irhamdani Site said... Balas

@Tom alcore: bisa kok

eko saputra said... Balas

Tiket Pesawat Murah Online, dapatkan segera di SELL TIKET Klik disini:
selltiket.com
Booking di SELLTIKET.COM aja!!!
CEPAT,….TEPAT,….DAN HARGA Di Jamin Murah!!!

Ingin usaha menjadi agen tiket pesawat??
Yang memiliki potensi penghasilan tanpa batas.
Bergabung segera di agen.selltiket.com

INFO LEBIH LANJUT HUBUNGI :
No handphone : 085363402103
PIN : D364EDCB

Post a Comment

Template by Tutorial Website - Belajar Pintar PHP. Design by Ivan Silalahi | Copyright of Belajar Pintar PHP.