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 :

[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]

41 thoughts on “Codeigniter Dasar – Belajar AJAX dengan JQuery

    1. dudu Post author

      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 😛

      Reply
    1. dudu Post author

      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)

      Reply
  1. syeehab

    kang dudu mau tanya
    pas klik submit mncul “object not found” knp tuh??
    trus g muncul k tbel lg….

    Reply
    1. dudu Post author

      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

      Reply
    1. dudu Post author

      kurang jelas gimana, source nya udah saya kasih semua gitu ko 🙂 kalo mau nambahin efek, ya dengan kreasi sendiri dong 🙂

      Reply
  2. abadhend

    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”>

    Reply
  3. 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

    Reply
    1. dudu Post author

      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]

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.