Home All posts

11/6/12

Aplikasi Ajax PHP :Cara Membuat Aplikasi Pencarian dengan AJAX PHP

✔ hero tox

search

Latar Belakang :

Saya coba memahami dan mempelajari tentang AJAX, dan hasilnya saya tuliskan kembali dalam Blog ini.
Tutorial ini saya akan membahas tentang pencarian kata (search) dengan menggunakan AJAX, PHP, dan MySQL dalam sebuah kasus bukutamu.
Adapun cara kerja dari aplikasi ini adalah :
  1. User menginput kata yang dicari.
  2. Dengan “event handling” à onkeyup, setiap user memasukan kata, maka program akan menjalankan fungsi pencarian.
  3. Hasil pencarian akan ditampilkan dalam table.

File-file yang dibutuhkan :

Dalam membuat aplikasi ini ada beberapa file yang dibutuhkan yaitu :
  1. index.php berisi form untuk memasukan kata yang dicari.
  2. ajax.js berisi fungsi untuk membuat koneksi asynchronous dengan server.
  3. proses.php berfungsi untuk memproses kata yang dicari dan menampilkannya kembali ke halaman (file) index.php.

Pertanyaan :

Bagaimana cara ajax menampilkan data yang sudah di proses ke dalam halaman utama aplikasi??
<form>
<b>Cari disini : </b><input type=”text” size=”25″ />
</form>
<br />
<div id=”pencarian”></div>

ajax menampilkan data hasil proses ke dalam tag yang sudah di definisikan didalam halaman utama aplikasi yaitu  <div></div>. dan tag tersebut sudah dicantumkan didalam file ajax yaitu             var obj=document.getElementById(“pencarian”);

Konsepku :

Dari penjelasan diatas dapat diketahui alurnya adalah :
Index.php ———–ajax.js ———-proses.php
  1. Dimana, file index.php mengirim data melalui file ajax.js (tanpa melakukan refresh halaman).
  2. File ajax.js meneruskan pengiriman data dengan tujuan file proses.php
  3. File proses.php mengolah data dan menampilkan data kedalam file index.php dengan bantuan tag <div></div>.
Pencarian Ajax Gambar
Download file Pencarian PHP Ajax :
Referensi Pencarian PHP biasa :
Selamat Mencoba !!!

Read more

Tips Ajax PHP : Cara Cepat Menguasai AJax PHP serta Jquery

✔ hero tox
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.

Read more

Tutorial Codeigniter: Penggunaan AJAX dengan JQuery Pada PHP

✔ hero tox
Pada kali ini saya akan berbagi bagai mana cara penggunaan ajax pada framework codeigniter, dan pada tutorial kali ini, saya mengasumsikan bahwa anda sudah mengetahui codeigniter, atau yang belum anda bisa belajar dulu dari posting2 saya sebelumnya. Oke tanpa banyak basa-basi,, langsung saja ya bro ,, ke TKP ...!!!! Pada kasus ini kita akan membuat program insert kedalam database dengan menggunakan ajax dan codeigniter.
Pada input.php tambahkan script javascript yang berisi fungsi AJax menggunakan JQuery, jangan lupa pada head juga ditambahkan fungsi untuk memanggil JQuerynya. Sehingga input.php akan tampak seperti berikut :

<!DOCTYPE HTML> <html lang="en-US"> <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<h2 >Daily Notes</h2>
<div id="form_input">
... //kode sebelumnya
</div>
<div id="show">
<?php $this->load->view('daily/show') ?>
</div>
<script type="text/javascript">
$('#submit').click(function(){
var form_data = {
date: $('#date').val(),
name: $('#name').val(),
amount: $('#amount').val(),
ajax:1
};
$.ajax({
url : "<?php echo site_url('daily/submit')?>",
type : 'POST',
data : form_data,
success: function(msg){
$('#show').html(msg),
$('#date').val('<?php echo date('Y-m-d'); ?>'),
$('#name').val(''),
$('#amount').val('')
}
});
return false;
});
</script>
</body>
</html>

Sedangkan pada controller daily.php pada fungsi submit di ubah menjadi seperti berikut :


function submit()
{
if ($this->input->post('ajax'))
{
$this->MDaily->save();
$data['query'] = $this->MDaily->getAll();
$this->load->view('daily/show',$data);
}else{
if ($this->input->post('submit'))
{
$this->MDaily->save();
}
redirect('daily/index');
}
}

Sekarang coba untuk input data,selamat mencoba
Catatan, pada kasus ini kita memanggil jquery langsung dari web-nya, sehingga agar dapat di jalankan secara offline, atau localhost download dulu jquerynya, kemudian arahkan ke jquery tersebut, sebagai contoh file jquery saya letakkan di direktori /javascript/jquery-1.3.2.js, maka baris ke lima di ubah menjadi

<script type="text/javascript" src="<?php echo base_url(); ?>javascript/jquery-1.3.2.js"></script>
Read more

11/4/12

Ajax PHP : Tutorial Cara Upload Gambar Dengan AJAX PHP

✔ hero tox
Sebenarnya hal ini tidak beda jauh dengan cara mengupload foto dengan PHP, hanya saja dengan menggunakan ajax, maka cara kerjanya lebih cepat dan dinamis.
Tutorial Cara Upload Gambar dengan AJAX PHP akan menggunakan cara yang sama dengan yang digunakan di tutorial tersebut, ditambahan sedikit trik dan javascript. Untuk meng-upload gambar dengan AJAX diperlukan bantuan  <iframe>. Di tutorial upload gambar dengan PHP digunakan html form seperti di bawah:

<!--form to upload file-->
<form name="formupload" method="post" enctype="multipart/form-data" action="script/to/upload/file.php">
Picture : <input name="picture" type="file" />     
<input type="submit" name="upload" value="Upload" />
</form>


Perlu sedikit perubahan di html form yang digunakan untuk mengupload file seperti berikut:



<iframe name="upload-frame" id="upload-frame" style="display:none;">
</iframe>  
<form name="formupload" method="post" enctype="multipart/form-data" action="upload.php"  target="upload-frame" onsubmit="startUpload();"> 
Picture : <input name="picture" type="file" />
<input type="submit" name="upload" value="Upload" />
</form>
<div id="uploaded-picture">
<!-- div tempat photo yang telah diupload ditampilkan -->
</div>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
function startUpload(){     $("#uploaded-picture").html("loading...");
}
function displayPicture(pictureUrl){
var img = new Image();
$(img).load(function()
{
$(this).hide();
$("#uploaded-picture").html($(this));
$(this).fadeIn();
})
.attr('src', pictureUrl)  
.error(function()
{      
alert("gagal menampilkan gambar");
 });   }  
</script>  


Di baris 1 ditambahkan html tag <iframe> dengan atribut name="upload-frame", id="upload-frame" dan menggunakan atribut style="display:none;" agar <iframe> tersembunyi.
Di bagian tag <form> baris 2 ditambahkan atribut target="upload-frame", atribut target ini diisi dengan hal yang sama dengan atribut name"upload-frame" dari tag <iframe>.
Baris 6 menambahkan tag <div/> tempat menampilkan gambar yang telah diupload.
Baris 9 menambahkan javascript jquery. Baris selanjutnya membuat dua function javascript, startUpload() untuk menampilkan text loading saat gambar sedang diupload dan displayPicture(pictureUrl) untuk menampilkan gambar setelah selesai diupload.

Langkah selanjutnya yang perlu dilakukan adalah membuat script untuk mengupload file.



<?php 
//file upload.php 
$fileName = $_FILES['picture']['name']; 
$fileSize = $_FILES['picture']['size']; 
$fileError = $_FILES['picture']['error']; 
$success = false; 
if($fileSize > 0 || $fileError == 0){ 
$move = move_uploaded_file($_FILES['picture']['tmp_name'], 'photo/'.$fileName); //atau ke directory yang dinginkan 
 if($move){ 
 $success = true; 
} 
}
echo '<script type="text/javascript">'; 
 if($success){ 
 echo "parent.displayPicture('photo/$fileName');"; 
  }else{ 
 echo "alert('Upload gagal $fileError');"; 
 } 
echo '</script>'; 
?>  

Jika file gagal diupload maka akan ditampilkan alert dan jika file berhasil diupload maka akan dipanggil function displayPicture().


Selamat Mencoba

Download Tutorials
Read more
Subscribe to: Posts (Atom)
loading...