Category: Codeigniter

Membuat Datepicker sederhana dengan Codeigniter dan Jquery

Membuat Datepicker sederhana dengan Codeigniter dan Jquery

Anda pasti tahu dan tak asing lagi dengan istilah datepicker, baiklah kalo belum mengerti apa itu Datepicker itu saya jelasin dengan singkat deh. Datepicker adalah penginputan tanggal layaknya sebuah kalender. Dengan adanya datepicker,halaman web anda pasti akan terlihat interaktif. Adapun plugin datepicker dapat didownload disini. Baiklah tanpa banyak basa-basi mari kita coding

Pertama,copy dulu folder datepicker yang telah didownload ke folder root Codeigniter anda, localhost/codeigniter. Kemudian, kita buat file controller dengan nama cdatepicker.php dan simpan dalam folder system/application/controllers.  Adapun skrip kode  nya adalah sebagai berikut :

<?php

/**
 * @author kristian
 * @copyright 2012
 */

class Cdatepicker extends Controller{

 function index(){

 $this->load->view('datepicker');
 }
}
?>

Penjelasan kode :

1. class Cdatepicker extends controller : Deklarasi untuk mencipatakan class controller bernama Cdatepicker

2. function index() : untuk membuat function index (pertama kali diakses)

3. $this->load->view(‘datepicker’); : untuk me-load file view bernama datepicker.php

Karena pada function index tersebut dilakukan load file view bernama datepicker.php, maka buatlah file view dengan nama tersebut dan letakkan dalam folder system/application/views ,  dan kemudian ketikkan skrip berikut :

Datepicker.php

<html>
<head>
<title>Datepicker</title>
<link href="<?php echo base_url(); ?>datepicker/rfnet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url(); ?>datepicker/datetimepicker_css.js"></script>
</head>
<body>
<table>
<tr>
<td>Tanggal Lahir</td>
<td><a href="javascript:NewCssCal('ttl','ddmmyyyy')"><input type="text" name="ttl" id="ttl" size="20" />
<img src="<?php echo base_url(); ?>datepicker/images/cal.gif" width="16" height="16" alt="Pilih tanggal" />
</a></td>
</tr>
</table>
</body>

</html>

Buka browser lalu ketikkan http://localhost/codeigniter/index.php/cdatepicker, kemudian coba klik pada input teks atau ikon disampingnya. maka akan muncul kalender(datepicker),lalu klik pada salah satu tanggal. berikut hasil dari datepicker :

Berikut tutorial singkat ,membuatdatepicker dengan codeigniter dan jquery, semoga bermanfaat dan happy coding selalu 🙂

Membuat Operasi CRUD dengan Codeigniter Bag.II

Membuat Operasi CRUD dengan Codeigniter Bag.II

Pada kesempatan yang lalu saya sempat menuliskas artikel tentang  Membuat aplikasi CRUD menggunakan CodeIgniter, tapi masih sebatas dalam insert data ke dalam database, karena masih sibuk dengan pekerjaan, saya baru bisa update tutorial ini. berikut akan saya jelaskan tutorial update data menggunakan Codeigniter. Oke tanpa banyak ngomong mari kita coding 🙂

untuk membuat file edit  data (update data)  pada codeigniter, hal yang harus dilakukan adalah buka lagi file model “Mkomentar.php” 

kemudian tambahkah skrip PHP berikut ini :

<?php
 class Mkomentar extends Model {

function tambah() {
 $nama = $this->input->post('nama');
 $url = $this->input->post('url');
 $pesan = $this->input->post('pesan');
 $data=array(
 'nama' => $nama,
 'url' => $url,
 'pesan' => $pesan );
 $this->db->insert('komentar', $data);
}
//tambahkan skrip dibawah ini
<strong>function update($id) {</strong>
<strong>$nama = $this->input->post('nama');</strong>
<strong>$url=$this->input->post('url);</strong>
<strong>$pesan=$this->input-post('pesan')</strong>
<strong>$data=array('nama'=>$nama,'url'=>$url,'pesan'=>$pesan );</strong>
<strong>$this->db->where('id',$id);</strong>
<strong>$this->db-update('komentar',$data);</strong>
}
function select ($id){
return $this->db->get_where('komentar',array('id'=> $id))->row();
}
//batas skrip update data
function ambil() {
 $ambil = $this->db->get('komentar');
 if ($ambil->num_rows() > 0) {
 foreach ($ambil->result() as $data) {
 $hasil[] = $data;
 }
 return $hasil;
 }
 }
 }
 ?>

Continue reading “Membuat Operasi CRUD dengan Codeigniter Bag.II” →

jQuery Snippet : CodeIgniter Paging dengan jQuery

jQuery Snippet : CodeIgniter Paging dengan jQuery

Banyak sekali tutorial yang menjelaskan tentang bagaimana membuat pagination dengan CodeIgniter. Oleh karenanya, disini saya tidak akan menjelaskan bagaimana membuat paging di CI, tetapi bagaimana memadukan paging CI dengan jQuery.Artinya, kita masih dapat menggunakan library pagination CI tanpa merubah core codenya, ditambah bantuan jQuery untuk meload halaman.

Awal pembuatan paging biasa seperti contoh-contoh dan tutorial penggunaan library pagination CI. Perbedaannya adalah ketika halaman yang mengandung pagination ter-load, kita lakukan convert pada link-link pagination yang ada di halaman tersebut supaya berubah menjadi link Ajax. Berikut fungsi yang akan kita gunakan:

// domId adalah dom dimana Anda akan menempatkan content HTML hasil request ke server
function convert_paging(domId)
{
   $(".paging").find("a").each(function(i){
      var thisHref = $(this).attr("href");
      $(this).prop('href','javascript:void(0)');
      $(this).prop('rel',thisHref);
      $(this).bind('click', function(){
         load_url(thisHref,domId);
         return false;
      });
   });
}
function load_url(theurl,div)
{
   $.ajax({
       url: theurl,
       success: function(response){
      $(div).html(response);
       },
   dataType:"html"
   });
   return false;
}

Perlu dicatat bahwa fungsi di atas melakukan converting untuk link yang ada di dalam dom class ‘paging’. Oleh karenanya, dalam config pagination CI, perlu Anda set (contoh):


$config['full_tag_open'] = '<div class="paging">';
$config['full_tag_close'] = '</div>';
// sehingga paging yang terbentuk
// <div class="paging"> ...links.... </div>

sehingga paging yang dihasilkan akan masuk dalam class ‘paging’. Lakukan pemanggilan fungsi convert_paging di view yang mengandung paging, ketika document ready.


<script type="text/javascript">
$(function(){
   // misalnya hasil request link paging akan kita tempatkan di dom id "content"
   convert_paging("#content");
});
</script>
<div id="content">
   ....content e.g. table.....
   <div class="paging">.....paging links.....</div>
</div>

Semoga Bermanfaat 🙂

Membuat operasi CRUD dengan Codeigniter

Membuat operasi CRUD dengan Codeigniter

Penggunaan database tidak akan lepas dari sebuah web,karena database berfungsi untuk menampung atau sebagai wadah penyimpanan dari proses yang dilakukan.

Codeigniter tidak hanya mendukung Mysql sebagai database, tetapi juga MySQLi,PostgreSQL,ODBC, SQLite serta ORACLE.

yang menjadi titik point dari segala aktivitas web ya mungkin ini, Operasi CRUD (Create,Read,Update,Delete) sanga baik untuk dijadikan contoh dalam memahami dan mempelajari database.

Operasi CRUD merupakan proses inti yang sangat diperlukan jika kita ingin membangun website dinamis. Operasi ini selalu berhubungan dengan database. untuk kita melancarkan operaasi CRUD, minimal kita sudah mengetahui struktur konsep dari MVC itu sendiri, bahwa MVC adalahModel, View, Controller yang merupakan alur kerja dari Codeigniter.Tidak usah lama-lama mari segera kita praktekkan :).

1.Membuat Database

Langkah pertama adalah membuat sebuah database dengan nama latihanci. Selanjutnya buatlah sebuah tabel dengan nama komentar dan isikan empat buah field seperti berikut

Field Type Lenght Primary Key AutoIncrement
id int 11 * *
nama varchar 50
url varchar 100
pesan text

2.Konfigurasi Database

Seperti yang kita ketahui bahwa ada perantara yang mengharuskan kita menghubungkan file PHP dengan database Mysql. Dalam dunia Framework PHP juga pasti telah menyediakan file khusus untuk proses koneksi ini. Untuk melakukakn konfigurasi database pada CodeIgniter agar terkoneksi dengan Mysql. Gunakan editor kesukaan anda dan buka file database.php yang terdapat pada folder System/application/config file tersebut merupakan file konfigurasi yang akan kita atur, sesuaikan dengan beberapa settingan seperti berikut :

$db[‘default’][‘hostname’] = “localhost“;
$db[‘default’][‘username’] = “root“;
$db[‘default’][‘password’] = “”; //password sesuaikan dengan password database
$db[‘default’][‘database’] = “latihanci“;
$db[‘default’][‘dbdriver’] = “mysql“;

setelah semua konfigurasi telah siap kita siap untuk membuat file php dengan CodeIgniter.

3.Operasi Create (Menambah Data)

sebagai langkah awal kita harus membuat file Model dengan nama Mkomentar.php dan simpan ke dalam folder System/application/models. Adapun kode dari file tambah data adalah sebagai berikut :


<?php
 class Mkomentar extends Model {

function tambah() {
 $nama = $this->input->post('nama');
 $url = $this->input->post('url');
 $pesan = $this->input->post('pesan');
 $data=array(
 'nama' => $nama,
 'url' => $url,
 'pesan' => $pesan );
 $this->db->insert('komentar', $data);

}

function ambil() {
 $ambil = $this->db->get('komentar');
 if ($ambil->num_rows() > 0) {
 foreach ($ambil->result() as $data) {
 $hasil[] = $data;
 }
 return $hasil;
 }
 }
 }
 ?>

langkah berikutnya adalah membuat file controller yang digunakan sebagai pengendali dari seluruh kegiatan operasi,
buat file dengan nama ckomentar.php dan simpan dalam folder system/application/controllers ,kemudian tulis kode berikut :
File ckomentar.php

<?php
class Ckomentar extends Controller {

function index() {
$this->load->model('mkomentar');
$data['hasil'] = $this->mkomentar->ambil();
$this->load->view('vkomentar', $data);
}

function tambahdata() {
if ($this->input->post('submit')) {
$this->load->model('mkomentar');
$this->mkomentar->tambah();
redirect('ckomentar/index');
}
$this->load->view('tambahkomentar');
}

}
?>

dan langkah terakhir dalam proses tambah data adalah membuat file tambahkomentar.php dan simpan dalam folder system/application/views
adapun skripnya adalah sebagai berikut :
tambahdata.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form tambah data</title>
</head>
<body>
<h3>Tambah data</h3>
<?php echo form_open('ckomentar/tambahdata'); ?>
<table>
<tr>
<td>Nama</td>
<td> :</td>
<td><?php echo form_input('nama'); ?></td>
</tr>
<tr>
<td>URL</td>
<td> :</td>
<td><?php echo form_input('url'); ?></td>
</tr>
<tr>
<td>Pesan</td>
<td> :</td>
<td><?php echo form_textarea('pesan'); ?></td>
</tr>
<tr>
<td><?php echo form_submit('submit','Simpan','id="submit"'); ?></td>
</tr>
</table>
<?php echo form_close(); ?>
</body>
</html>


Pada browser ketikkan url untuk membuka file tersebut , http://localhost/codeigniter/index.php/ckomentar/tambahdata, dan untuk tutorial Update,View dan Delete akan saya posting pada kesempatan berikutnya 😀 . Selamat mencoba