Codeigniter Dasar – Belajar AJAX dengan JQuery
jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. (sumber : wikipedia). Sudah ya artiinnya.. Ya seperti itulah, cari aja definisi yang tepat.
Saya pengen belajar untuk mengaplikasikan AJAX dengan menggunakan JQuery. Pada aplikasi sebelumnya, yang saya buat adalah insert data menggunakan PHP biasa, sekarang akan saya tambahkan AJAX dengan menggunakan JQuery untuk insert data. (Selanjutnya nanti akan di buat fungsi delete, pasa saya ada mood hehehe)
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>
<title>Daily Notes</title>
<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, semoga berhasil……….
Catatan, saya memanggil jquery langsung dari webnya, sehingga agar bisa di jalankan selcara offline, donload dahulu 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>
numpang belajar kk.
silahkan, mari mari
belajar lagi
silahkan kakak
ka,help me dong,, pleasee..
g bisa ngapalin scriptny nih,,, cara manggil2 class nya..
heran deh,, ko ka2 bisa hafal c?
ka2 makan nasi juga ka?
call me y, restu_putriana@yahoo.com
jangan di apal donk, saya juga ga apal semua hehehe
kan ada userguide nya. Yang bingung bagian mana? nanti belajar bareng ya.
Aku makannya kadang nasi kadang rumput
misiii om….. numpang baca
silahkan……..
mas efek tutorial di atas apa y??
kok aq coba,sama aja sama gak pake jquery…
thanks mas..
ga ada, memang ga ada efek animasi..
JQuery digunakan untuk input data pake ajax (efeknya ya halaman tersebut tidak refresh, data yang ditampilkan langsung muncul di table)
halo pak dosen, numpang belajar ya
ngece iks.. hambok aku di ajari mas
mantapppppp
kang dudu mau tanya
pas klik submit mncul “object not found” knp tuh??
trus g muncul k tbel lg….
link nya mungkin error, coba di sesuaikan..
bang kanpa yaaa efek ajaxnya gk tmpil / gk kliatan msih kya gtuu2 ajj sama kya sblumnya gk da prubahan
knapa yaa ???-_-”
tidak terlalu kelihatan memang kao di localhost karena koneksi yang cepat. Lagian emang efeknya cuma membuat insert data ga pake refresh doank. ga ada efek macem-macem
wah bang tq yaaa mantep nee tutornyaa ,….
i like it
kang dudu maaf ya saya punya masalah pada fungsi dilet napas saya klik jadi hilang ini masalahnya seperti di bawah,kan biasanya kalau salah itu suka muncul dilayar .misalkan sintak eror,ini engga malah gaada apa-apa.. tolong dong….
http://localhost/mproject/index.php/daily/delete/33
coba klw lengkap, pasti seru
mungkin jquery nya belum ke load
download aja di github nya
kata pepatah “Berikan kailnya jangan ikannya”
kang, klw ke github mah kurang jelas
kurang jelas gimana, source nya udah saya kasih semua gitu ko
kalo mau nambahin efek, ya dengan kreasi sendiri dong 
kaka klo mw nyimpen script ini dmn ???
bkin folder lagie bkan trus nympennya dmn ???
<script type="text/javascript" src="javascript/jquery-1.3.2.js”>
maaf kang dudu… kalau di foldr model pake fungsi delete ga ?saya kasih nama mdaily.php nya nah di situnya saya pusing jadi kalau di klik delete jadi eror
muncul dilayarnya 404 page note fount dan di alamatnya jadi
http://localhost/mproject/index.php/delete1
mungkin javascriptnya ga jalan. trus link nya salah harusnya http://localhost/mproject/index.php/delete/1
simpen aja di folder utama / root codeigniter, trus panggil pake base_url nya
salam kenal mas, ane br mo belajar CI pake ajax Jquery neh, br numpang baca doang tutor mase, ntar ane praktikin deh, ntar kalo ada kesulitan tlg ajarin ya mas. makasih
salam kenal, silahkan mari belajar bersama
masgan untuk bug xssnya gmna ??
udah di filter gak script di atas?
saya belum memasang xss karena memang tidak ke topik tersebut
untuk setting xss filtering input bisa dilakukan di config.php nya
buset pada jago2 nih.. saya sedang belajar CI semoga cepat bisa.. amin
mari belajar
ok, makasi. .:)
insert data menggunakan PHP biasa yang sebelumnya tu yang mana?
maksudnya tanpa ajax
pada artkel sebelumnya
makasih mas tutorialnya, keren banget
[...] Codeigniter dasar – Belajar Ajax dengan Jquery [...]