dudu.WEB.ID » Jquery http://dudu.web.id ...still try and try... Wed, 07 Jul 2010 05:19:07 +0000 en hourly 1 http://wordpress.org/?v=3.0 Codeigniter Dasar – Membuat Edit Data http://dudu.web.id/2010/07/codeigniter-dasar-%e2%80%93-membuat-edit-data/ http://dudu.web.id/2010/07/codeigniter-dasar-%e2%80%93-membuat-edit-data/#comments Wed, 07 Jul 2010 05:19:07 +0000 dudu http://dudu.web.id/?p=305

Sekali lagi Perhatian, ini hanya ditujukan kepada Newbie seperti saya, kalo yang sudah jago ya kayanya ga perlu lagi baca :D . Juga wajib mengikuti tuorial sebelumnya yaitu

Edit data, setelah beberapa waktu lalu selesai dengan memasukkan data dan menampilkan serta menghapus data, kemudian ada seseorang yg menanyakan tentang cara mengedit data.

Secara algoritma MVC nya, Edit data dilakukan dengan Memanggil fungsi edit pada controller, fungsi ini akan memanggil data yang akan di edit (menggunakan parameter id) melalui Model, kemudian data tersebut ditampilkan kedalam view. Setelah data tersebut di edit, kemudian memanggil fungsi submit pada controller untuk menentukan proses update data yg dilakukan pada model. Kemudian di redirect ke halaman index untuk melihat hasil data yg telah di edit tadi. Secara gambarannya seperti berikut :

So, daripada bingung, langsung saja di praktekkan :)

Pada file view.show.php ubah menjadi seperti di bawah ini


<script type="text/javascript">
$(document).ready(function() {
 $(".delbutton").click(function(){
 var element = $(this);
 var del_id = element.attr("id");
 var info = 'id=' + del_id;
 if(confirm("Anda yakin akan menghapus?")){
 $.ajax({
 type: "POST",
 url : "<?php echo site_url('daily/delete')?>",
 data: info,
 success: function(){
 }
 });

 $(this).parents(".record").animate({ opacity: "hide" }, "slow");
 }

 return false;
 });

})
</script>
<b>Daily Notes</b>
<table style="width:600px; border:1px solid;">
 <tr>
 <th style="border:1px solid;">No</th>
 <th style="border:1px solid;">Date</th>
 <th style="border:1px solid;">Name</th>
 <th style="border:1px solid;">Amount</th>
 <th style="border:1px solid;">Edit</th>
 <th style="border:1px solid;">Delete</th>
 </tr>
 <?
 $i=0;
 foreach ($query as $row){
 $i++;
 echo "<tr class=\"record\">";
 echo    "<td style=\"border:1px solid;\">$i</td>";
 echo    "<td style=\"border:1px solid;\">$row->date</td>";
 echo    "<td style=\"border:1px solid;\">$row->name</td>";
 echo    "<td style=\"border:1px solid;\">$row->amount</td>";
 echo    "<td style=\"border:1px solid;\">".anchor("daily/edit/$row->id",'Edit')."</td>";
 echo    "<td style=\"border:1px solid;\"><a class=\"delbutton\" id=\"$row->id\" href=\"#\" >Delete</a></td>";
 echo  "</tr>";
 }
 ?>
</table>

Buat controller fungsi edit pada controller daily


function edit($id){
 $query          = $this->MDaily->get($id);
 $data['fid']    = $query['id'];
 $data['fdate']  = $query['date'];
 $data['fname']  = $query['name'];
 $data['famount']= $query['amount'];
 $this->load->view('daily/edit',$data);
 }

Kemudian pada Model buat fungsi get untuk mengambil data/ record yang akan di edit


function get($id){
 $query = $this->db->getwhere('daily',array('id'=>$id));
 return $query->row_array();
 }

Lanjutnya buat file edit.php pada direktory views/daily/edit.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">
 <table>
 <?php echo form_open('daily/submit'); ?>
 <?php echo form_hidden('id',$fid); ?>
 <tr>
 <td> <?php echo form_label('Date : '); ?></td>
 <td> <?php echo form_input('date',$fdate,'id="date"'); ?></td>
 </tr>
 <tr>
 <td> <?php echo form_label('Name : ');?> </td>
 <td> <?php echo form_input('name',$fname,'id="name"'); ?></td>
 </tr>
 <tr>
 <td> <?php echo form_label('Amount : ');?> </td>
 <td> <?php echo form_input('amount',$famount,'id="amount"'); ?></td>
 </tr>
 <tr>
 <td> <?php    echo form_submit('submit','Submit','id="submit"'); echo form_close(); ?> </td>
 </tr>
 </table>
 </div>
 </body>
</html>

Ubah pada fungsi submit pada controller daily sehingga menjai 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')){
 if ($this->input->post('id')){
 $this->MDaily->update();
 redirect('daily/index');
 }else{
 $this->MDaily->save();
 redirect('daily/index');
 }
 }
 }
 }

OK sekarang kita coba edit datanya..

Jika mau script lengkapnya silahkan ambil di sini

Bagi yang belum paham bisa kirim komentar ya :) piss saya juga masih belajar..

]]> http://dudu.web.id/2010/07/codeigniter-dasar-%e2%80%93-membuat-edit-data/feed/ 2 Codeigniter Dasar – Menghapus data dengan Jquery http://dudu.web.id/2010/04/codeigniter-dasar-menghapus-data-dengan-jquery/ http://dudu.web.id/2010/04/codeigniter-dasar-menghapus-data-dengan-jquery/#comments Tue, 27 Apr 2010 09:55:19 +0000 dudu http://www.dudu.web.id/?p=209
Untuk menghapus data menggunakan Ajax dengan Jquery, sebenarnya tidk terlalu sulit. Dengan menggunakan data yang terdahulu pernah kita buat. Kita mempunyai 2 view yaitu show.php dan input.php. Ubah show.php untuk meletakkan fungsi Jquery yang digunakan untuk mengirim data secara Ajax dan memanggil Controller untuk menghapus data. Kemudian Jquery akan menghilangkan baris dengan triger class pada barisnya dengan fungsi animate. Ah terlalu bertele-tele hahahaha bikin ribet, padahal dalam codingnya tidak terlalu banyak perubahan.

Tambahkan script berikut pada view show.php pada aplikasi ci_ku yang kita buat sebelumnya :) , sehingga show.php akan menjadi seperti berikut :

<script type="text/javascript">
$(document).ready(function() {

 $(".delbutton").click(function(){

 //Save the link in a variable called element
 var element = $(this);

 //Find the id of the link that was clicked
 var del_id = element.attr("id");

 //Built a url to send
 var info = 'id=' + del_id;
 if(confirm("Anda yakin akan menghapus?"))
 {
 $.ajax({
 type: "POST",
 url : "<?php echo site_url('daily/delete')?>",
 data: info,
 success: function(){
 }
 });

 $(this).parents(".record").animate({ opacity: "hide" }, "slow");

 }

 return false;

 });

})
</script>
<b>Daily Notes</b>
<table border="1">
 <tr>
 <th>No</th>
 <th>Date</th>
 <th>Name</th>
 <th>Amount</th>
 <th>Delete</th>
 </tr>
 <?
 $i=0;
 foreach ($query as $row){
 $i++;
 echo "<tr class=\"record\">";
 echo    "<td>$i</td>";
 echo    "<td>$row->date</td>";
 echo    "<td>$row->name</td>";
 echo    "<td>$row->amount</td>";
 echo      "<td><a class=\"delbutton\" id=\"$row->id\" href=\"#\" >Delete</a></td>";
 echo  "</tr>";
 }
 ?>
</table>

Perhatikan pada baris ke 53 yaitu pada bagian menampilkan link delete, tampak seperti di atas

echo "<td><a class=\"delbutton\" id=\"$row->id\"  href=\"#\" >Delete</a></td>";

Script javascript di ataslah (baris 133) yang digunakan Jquery untuk mengirimkan data ke controller daily dan menjalankan fungsi delete. Kemudian ubah link delete (baris 53), tambahkan id sebagai data yang akan dihapus dan class delbutton sebagai triger pada Jquery untuk menjalankan fungsi hapus ini.
Jangan lupa ubah controller daily pada fungsi delete menjadi seperti dibawah ini :

function delete()
 {
 $id = $this->input->post('id');
 $this->db->delete('daily', array('id' => $id));
 }

Selesai.. Saya ingin membuat halaman demonya, tetapi belum sempat. Kalo mau download source lengkapnya silahkan ambil di sini

]]> http://dudu.web.id/2010/04/codeigniter-dasar-menghapus-data-dengan-jquery/feed/ 0 Codeigniter Dasar – Belajar AJAX dengan JQuery http://dudu.web.id/2010/04/codeigniter-dasar-belajar-ajax-dengan-jquery/ http://dudu.web.id/2010/04/codeigniter-dasar-belajar-ajax-dengan-jquery/#comments Fri, 16 Apr 2010 09:35:37 +0000 dudu http://www.dudu.web.id/?p=207 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>
]]> http://dudu.web.id/2010/04/codeigniter-dasar-belajar-ajax-dengan-jquery/feed/ 6 10 Beautiful jQuery Menus http://dudu.web.id/2010/01/10-beautiful-jquery-menus/ http://dudu.web.id/2010/01/10-beautiful-jquery-menus/#comments Wed, 20 Jan 2010 09:41:11 +0000 dudu http://www.dudu.web.id/?p=80 Hidden jQuery Drop Down Menu for Minimalist Design
Image and video hosting by TinyPic

A Different Top Navigation with jQuery

Image and video hosting by TinyPic

Demo | Tutorial

Create an apple style menu and improve it via jQuery

Image and video hosting by TinyPic

Demo | Tutorial

Color Fading Menu with jQuery

Image and video hosting by TinyPic

Demo | Tutorial

Create a Cool Animated Navigation with CSS and jQuery

Image and video hosting by TinyPic

Demo | Tutorial

jQuery Drop Line Tabs

Image and video hosting by TinyPic

Demo & Tutorial

Sexy Drop Down Menu w/ jQuery & CSS

Image and video hosting by TinyPic

Demo | Tutorial

Sliding Top Menu With jQuery

Image and video hosting by TinyPic

Demo | Tutorial

How to Make a Smooth Animated Menu with jQuery

Image and video hosting by TinyPic

Demo | Tutorial

jSlickmenu: A jQuery plugin for slick CSS3 menus

Image and video hosting by TinyPic

Demo | Tutorial

source : http://www.webupd8.org/2009/09/10-beautiful-jquery-menus.html

]]> http://dudu.web.id/2010/01/10-beautiful-jquery-menus/feed/ 3