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 :
[php]
<!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>
[/php]
Sedangkan pada controller daily.php pada fungsi submit di ubah menjadi seperti berikut :
[php]
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’);
}
}
[/php]
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
[php]
<script type="text/javascript" src="<?php echo base_url(); ?>javascript/jquery-1.3.2.js"></script>
[/php]
numpang belajar kk. 😀
silahkan, mari mari 🙂
belajar lagi
silahkan kakak 🙂
masa klo edit data gmn???
Maaf belum sempet bikin tutorialnya 🙂 nanti saya buatkan 🙂
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
mungkin jquery nya belum ke load
coba klw lengkap, pasti seru
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”>
simpen aja di folder utama / root codeigniter, trus panggil pake base_url nya
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
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
[php]
$config[‘global_xss_filtering’] = TRUE;
[/php]
ok, makasi. .:)
buset pada jago2 nih.. saya sedang belajar CI semoga cepat bisa.. amin
mari belajar 🙂
insert data menggunakan PHP biasa yang sebelumnya tu yang mana?
maksudnya tanpa ajax 🙂 pada artkel sebelumnya
makasih mas tutorialnya, keren banget 🙂