Tutorial Codeigniter: Penggunaan AJAX dengan JQuery Pada PHP

Posted on

Di kali ini saya akan berbagi bagai mana cara penggunaan ajax pada framework codeigniter, dan di panduan kali ini, saya mengasumsikan bahwa sahabat telah mengetahui codeigniter, atau yang belum sahabat dapat belajar dulu dari posting2 saya sebelumnya. Oke tanpa banyak basa-basi,, seketika saja ya bro ,, ke TKP …!!!! Di kasus ini kita akan membuat program insert kedalam database dengan menggunakan ajax dan codeigniter.
Di input.php tambahkan script javascript yang berisi kegunaan AJax menggunakan JQuery, jangan lupa di head pun 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 di controller daily.php di 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 ini coba bagi input data,selamat mencoba
Catatan, di kasus ini kita memanggil jquery seketika dari web-nya, sehingga agar dapat di jalankan secara offline, atau localhost unduh dulu jquerynya, kemudian arahkan ke jquery tersebut, selaku contoh file jquery saya letakkan di direktori /javascript/jquery-1.3.2.js, karenanya baris ke lima di ubah menjadi

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

Leave a Reply

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