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

    • dwijonarko

      silahkan, mari mari 🙂

  • dwi

    belajar lagi

    • dudu

      silahkan kakak 🙂

  • edicrew

    masa klo edit data gmn???

    • dwijonarko

      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, [email protected]

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

  • asa

    misiii om….. numpang baca 🙂

  • silahkan……..

  • harry

    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)

  • harry

    halo pak dosen, numpang belajar ya 🙂

    • ngece iks.. hambok aku di ajari mas 😀

  • mantapppppp

  • syeehab

    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

  • muflih

    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

  • qaribun

    coba klw lengkap, pasti seru

    • download aja di github nya 🙂

      kata pepatah “Berikan kailnya jangan ikannya”

  • qaribun

    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

  • muflih

    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

  • yudhi yudheth

    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

      $config['global_xss_filtering'] = TRUE;
      
  • 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 🙂