Pada kali ini saya akan berbagi bagai mana cara penggunaan ajax pada framework codeigniter, dan pada tutorial kali ini, saya mengasumsikan bahwa anda sudah mengetahui codeigniter, atau yang belum anda bisa belajar dulu dari posting2 saya sebelumnya. Oke tanpa banyak basa-basi,, langsung saja ya bro ,, ke TKP ...!!!! Pada kasus ini kita akan membuat program insert kedalam database dengan menggunakan ajax dan codeigniter.
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 :
Sedangkan pada controller daily.php pada fungsi submit di ubah menjadi seperti berikut :
Sekarang coba untuk input data,selamat mencoba
Catatan, pada kasus ini kita memanggil jquery langsung dari web-nya, sehingga agar dapat di jalankan secara offline, atau localhost download dulu 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
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>
<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>
<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');
}
}
{
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,selamat mencoba
Catatan, pada kasus ini kita memanggil jquery langsung dari web-nya, sehingga agar dapat di jalankan secara offline, atau localhost download dulu 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>
Tutorial Codeigniter: Penggunaan AJAX dengan JQuery Pada PHP
![Tutorial Codeigniter: Penggunaan AJAX dengan JQuery Pada PHP]()
Reviewed by MCH
on
November 05, 2012
Rating:
No comments: