Belajar CRUD Menggunakan CodeIgniter dan Twitter Bootstrap

Setelah lama tidak mempelajari CodeIgniter dan update blog dikarenakan suatu hal, untuk itu kali ini saya akan menjelaskan bagaimana cara membuat fungsi CRUD di CodeIgniter dengan menggunakan Bootstrap. Agar memahami apa yang kita pelajari, ada baiknya kita mengenal terlebih dahulu Framework CodeIgniter dan Twitter Bootstrap. 

Mengenal Framework CodeIgniter dan Twitter Bootstrap

Menurut Hafiz Ridha yang diperoleh dari ilmukomputer.com, mengatakan CodeIgniter adalah sebuah framework PHP yang dapat mempercepat pengembang untuk membuat sebuah aplikasi web. Dilengkapi banyak library dan helper yang berguna di dalamnya dan tentunya mempermudah proses development.

Sedangkan Twitter Bootstrap adalah sebuah alat bantu (framework) HTML dan CSS untuk membuat sebuah tampilan halaman website yang elegan dan support segala macam device. Dengan implementasi Twitter Bootstrap pada framework CodeIgniter akan mempermudah dan mempercepat pembuatan maupun pengembangan website dinamis tanpa harus kesulitan membuat desain.

Berikut ini keuntangan menggunakan Framework CodeIgniter dan Twiiter Bootstrap:

  1. Keuntungan Menggunakan Framework CodeIgniter:
    a. Menghemat Waktu Pengembangan.
    b. Reuse of code (Penggunaan Kembali Code).
    c. Bantuan komunitas.
    d. Kumpulan best practice

Download CodeIgniter secara gratis dialamat website resminya : http://www.codeigniter.com/, pada artikel ini versi 2.2.0

  1. Keuntungan Menggunakan Twitter Bootstrap :
    a. Memudahkan dalam mendesain website.
    b. Responsive (Support segala macam layar dan device)
    c. Dokumentasi Lengkap
    d. Elegan

Download Bootstrap secara gratis dialamat website resminya : http://getbootstrap.com/getting-started/#download/, pada artikel ini versi 3.3.1

Setelah mendownload CodeIgniter dan Bootstrap, kemudian extract file tersebut dan letakkan dalam directory htdocs, hasilnya seperti ini.

htdocs ci dan bootstrap

Sekarang kita akan membuat contoh aplikasi sederhana CRUD (create, read, update, delete) yang berjudul Aplikasi Daftar Perguruan Tinggi di Indonesia

Langkahnya sebagai berikut:

1. Buat sebuah database dengan nama : belejar_ci dan dengan nama tabel : jenis_pt

database

SQLnya:

CREATE TABLE IF NOT EXISTS `jenis_pt` (
`id_pt` int(11) NOT NULL AUTO_INCREMENT,
`nama_pt` varchar(200) NOT NULL,
`jenis_pt` varchar(15) NOT NULL,
`alamat` text NOT NULL,
`website` varchar(45) NOT NULL,
PRIMARY KEY (`id_pt`)
);

Setelah membuat database jangan lupa untuk membuat koneksi antara CodeIgniter dengan MySQL dan meload library database pada file database.php, autoload.php dan routes.php

application=>config=>database.php

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'belajar_ci';
$db['default']['dbdriver'] = 'mysql';

application=>config=>autoload.php

$autoload['libraries'] = array('database','form_validation');

application=>config=>routes.php

$route['default_controller'] = "crud";

 2. Membuat model

Letakkan pada folder models.

m_jenis.php

<?php
	if(!defined('BASEPATH'))
		exit('No direct script access allowed');
	class m_jenis extends CI_Model {
		//Insert data ke database
		function tambah(){
			$nama = $this->input->post('nm_pt');
			$jenis = $this->input->post('jn_pt');
			$alamat = $this->input->post('alamat');
			$website = $this->input->post('website');
			$data = array('id_pt'=>NULL,
				'nama_pt'=>$nama,
				'jenis_pt'=>$jenis,
				'alamat'=>$alamat,
				'website'=>$website);
			$this->db->insert('jenis_pt',$data);
		}
		
		//Mengambil semua data ke database
		function ambil($limit,$offset){
			$ambil=$this->db->get('jenis_pt',$limit,$offset);
			if($ambil->num_rows()>0){
				foreach($ambil->result() as $data){
					$hasil[]=$data;
				}
				return $hasil;
			}
		}
		
		//Mengambil data sesuai id_jenis
		function edit($a){
			$d=$this->db->get_where('jenis_pt',array('id_pt'=>$a))->row();
			return $d;
		}
		
		//Menghapus salah satu database
		function hapus($a){
			$this->db->delete('jenis_pt',array('id_pt'=>$a));
			return;
		}
		
		//Mengubah isi database
		function update($id){
			$nama = $this->input->post('nm_pt');
			$jenis = $this->input->post('jn_pt');
			$alamat = $this->input->post('alamat');
			$website = $this->input->post('website');
			$data = array(
				'nama_pt'=>$nama,
				'jenis_pt'=>$jenis,
				'alamat'=>$alamat,
				'website'=>$website);
			$this->db->where('id_pt',$id);
			$this->db->update('jenis_pt',$data);
		}
	}
?>

 3. Membuat controllers

Letakkan pada folder controllers.

crud.php

<?php
	if(!defined('BASEPATH'))
		exit('No direct access allowed !');
		
	class crud extends CI_Controller{
		function __construct(){
			parent::__construct();
			$this->load->helper(array('url','form'));
		}
		
		//fungsi index saat controller pertama kali dijalankan
		function index(){
			$limit=10;
			$offset=0;
			$this->load->model('m_jenis');
			$this->data['data_get']=$this->m_jenis->ambil($limit,$offset);
			$this->data['page']='tabel';
			$this->load->view('dh_view',$this->data);
		}
		
		//Fungsi tambah jenis
		function tambah_jenis(){
			$this->data['nama_pt']="";
			$this->data['jenis_pt']="";
			$this->data['alamat']="";
			$this->data['website']="";
			$this->data['st']="tambah";
			$this->data['id_pt']="";
			$this->data['page']='formjenis';
			$this->load->view('dh_view',$this->data);
		}
		
		//Fungsi edit 
		function edit(){
			$id=$this->uri->segment(3);
			if($id==NULL){
				redirect('crud');
			}
			$this->load->model('m_jenis');
			$dt=$this->m_jenis->edit($id);
			$this->data['nama_pt']=$dt->nama_pt;
			$this->data['jenis_pt']=$dt->jenis_pt;
			$this->data['alamat']=$dt->alamat;
			$this->data['website']=$dt->website;
			$this->data['st']="edit";
			$this->data['id_pt']=$id;
			$this->data['page']='formjenis';
			$this->load->view('dh_view',$this->data);
		}
		
		//Fungsi hapus
		function hapus(){
			$u=$this->uri->segment(3);
			$this->load->model('m_jenis');
			$this->m_jenis->hapus($u);
			redirect('crud');
		}
		
		//Fungsi simpan
		function simpan(){
			$this->form_validation->set_rules('nm_pt','Nama Perguruan Tinggi','trim|required');
			$this->form_validation->set_rules('alamat','Alamat','trim|required');
			$this->form_validation->set_rules('website','Website','trim|required');
			if($this->form_validation->run()==FALSE){
				if($this->input->post('submit')){
					$this->data['nama_pt']=$this->input->post('nm_pt');
					$this->data['jenis_pt']=$this->input->post('jn_pt');
					$this->data['id_pt']=$this->input->post('id_pt');
					$this->data['st']=$this->input->post('st');
					$this->data['alamat']=$this->input->post('alamat');
					$this->data['website']=$this->input->post('website');
					$this->data['page']='formjenis';
					$this->load->view('dh_view',$this->data);
				}
			}else{
				$st=$this->input->post('st');
				if($this->input->post('submit')){
					if($st=="tambah"){
						$this->load->model('m_jenis');
						$this->m_jenis->tambah();
						redirect('crud');
					}else if($st=="edit"){
						$id_pt=$this->input->post('id');
						$this->load->model('m_jenis');
						$this->m_jenis->update($id_pt);
						redirect('crud');
					}
				}
			}
		}
	}
?>

 4. Membuat view

Dalam implementasi Twitter Bootstrap pada CodeIgniter, penggunaan View sangatlah penting, hal ini digunakan agar deklarasi file-file bootstrap cukup dilakukan sekali saja. Maka kita buat base View. Letakkan pada folder views.

dh_view.php

<?php
if(!defined('BASEPATH'))
	exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar CRUD Menggunakan CodeIgniter dan Boostrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="<?php echo base_url('bootstrap/css/bootstrap.css') ?>" rel="stylesheet">
    <link href="<?php echo base_url('bootstrap/css/bootstrap-responsive.css') ?>" rel="stylesheet">
    <link href="<?php echo base_url('bootstrap/css/docs.css') ?>" rel="stylesheet">
    <link href="<?php echo base_url('bootstrap/css/custom.css') ?>" rel="stylesheet">
    
    <link rel="shortcut icon" href="">
    <script src="<?php echo base_url('bootstrap/js/jquery.min.js') ?>"></script>
    <script src="<?php echo base_url('bootstrap/js/bootstrap.min.js') ?>"></script>
    <script src="<?php echo base_url('bootstrap/js/bootstrap-scrollspy.js') ?>"></script>
    <script src="<?php echo base_url('bootstrap/js/bootstrap-fileupload.js') ?>"></script>
</head>

<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand">
                </a>
                <ul class="nav">
                    <li><a href="">Belajar CRUD Menggunakan CodeIgniter dan Boostrap</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
	<br/>
	<br/>
	<br/>
	<br/>
    <div class="container">
        <div class="row">
            <div class="well">
                <?php $this->load->view($page) ?>
            </div>
        </div>
        <div class="navbar navbar-fixed-bottom navbar-min">
            <div class="navbar-inner">
                <div class="container">
                    <small>&copy; 2014 - Belajar CRUD Menggunakan CodeIgniter dan Boostrap</small>
                </div>
            </div>
        </div>
</body>

</html>

setelah itu buat view untuk menampilkan data dalam bentuk tabel

tabel.php

<a class="btn btn-success" href="<?php echo site_url('crud/tambah_jenis') ?>">
    <i class="icon-pencil"></i> Tambah Perguruan Tinggi</a>
<br />
<br />
<section>
    <table class="table table-condensed table-hover">
        <thead>
            <tr>
                <th></th>
                <th>No.</th>
                <th>Nama Perguruan Tinggi</th>
                <th>Jenis Perguruan Tinggi</th>
                <th>Alamat</th>
                <th>Website</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            <?php $no=1 ; if ($data_get==NULL) { ?>
            <div class="alert alert-error">
                <button type="button" class="close" data-dismiss="alert">x</button>
                <h4>Peringatan !</h4>
                <p>Data perguruan tinggi yang anda cari tidak ada atau masih kosong</p>
            </div>
            <?php } else { foreach ($data_get as $dg) { ?>
            <tr>
                <td></td>
                <td>
                    <?php echo $no++; ?>
                </td>
                <td>
                    <?php echo $dg->nama_pt; ?></td>
                <td>
                    <?php echo $dg->jenis_pt; ?></td>
                <td>
                    <?php echo $dg->alamat; ?></td>
                <td>
                    <?php echo $dg->website; ?></td>
                <td>
                    <a href="<?php echo site_url('crud/edit/' . $dg->id_pt); ?>" title="Edit">
                        <i class="icon-edit"></i>
                    </a>&nbsp;&nbsp;
                    <a href="<?php echo  site_url('crud/hapus/' .$dg->id_pt); ?>" title="delete" onclick="return confirm('Anda yakin ingin menghapus soal ini: <?php echo $dg->nama_pt; ?> ?');">
                        <i class="icon-remove-sign"></i>
                    </a>
                </td>
            </tr>
            <?php } } ?>
        </tbody>
    </table>
</section>

Setelah membuat view untuk tampilan utama, sekarang kita membutuhkan view untuk form tambah dan edit, oleh karena itu kita akan membuat view satu lagi dengan nama formjenis.php

<div id="wrap">
    <div class="container">
        <?php if (validation_errors()) { ?>
        <div class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">x</button>
            <h4>Terjadi Kesalahan!</h4>
            <?php echo validation_errors(); ?>
        </div>
        <?php } ?>
        <?php echo form_open( 'crud/simpan', 'class="form-horizontal"'); ?>
        <div class="control-group">
            <legend>Data Perguruan Tinggi</legend>
        </div>
        <div class="control-group">
            <label class="control-label" for="nm_pt">Nama Perguruan Tinggi</label>
            <div class="controls">
                <input type="text" style="width:300px;" name="nm_pt" value="<?php echo $nama_pt; ?>" placeholder="Nama Perguruan Tinggi">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="jn_pt">Jenis Perguruan Tinggi</label>
            <div class="controls">
                <select style="width:300px;" name="jn_pt">
					<?php 
						if(empty($jenis_pt)){
					?>
					<option>Negeri</option>
                    <option>Swasta</option>
					<?php
					}else if ($jenis_pt == 'Negeri'){
					?>
					<option value="<?php echo $jenis_pt ?>"> <?php echo $jenis_pt ?></option>
                    <option>Swasta</option>
					<?php
					}else{
					?>
					<option value="<?php echo $jenis_pt ?>"> <?php echo $jenis_pt ?></option>
                    <option>Negeri</option>
					<?php
					}
					?>
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="alamat">Alamat</label>
            <div class="controls">
                 <textarea class="form-control" style="width:300px;" rows="5" id="alamat" name="alamat"><?php  echo  $alamat ?></textarea>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="website">Website</label>
            <div class="controls">
                <input type="text" style="width:300px;" name="website" value="<?php  echo  $website ?>" placeholder="http://" />
            </div>
        </div>
        <input type="hidden" name="st" value="<?php echo $st ?>" />
        <input type="hidden" name="id" value="<?php echo $id_pt ?>" />
        <a class="btn" href="<?php echo site_url('crud'); ?>">Back</a>
        <button class="btn btn-primary" type="submit" value="submit" name="submit">Save</button>
        <?php echo form_close(); ?>
    </div>
    <div id="push"></div>
</div>

Hasilnya seperti ini :

[bs_tabs]
[bs_thead]
[bs_tab class=”active” type=”tab” href=”#bs_tab141805559431874″ title=”Tampilan data kosong”]
[bs_tab class=”” type=”tab” href=”#bs_tab141805561025374″ title=”Tampilan data PT “]
[bs_tab class=”” type=”tab” href=”#bs_tab141805566829374″ title=”Tambah data”]
[bs_tab class=”” type=”tab” href=”#bs_tab141805573896874″ title=”Validasi data”]
[bs_tab class=”” type=”tab” href=”#bs_tab141805574921774″ title=”Edit data”]
[bs_tab class=”” type=”tab” href=”#bs_tab141805575927974″ title=”Hapus data”]
[/bs_thead][bs_tcontents]
[bs_tcontent class=”active” id=”bs_tab141805559431874″]Data kosong[/bs_tcontent]

[bs_tcontent class=”” id=”bs_tab141805561025374″]Data perguruan tinggi[/bs_tcontent]
[bs_tcontent class=”” id=”bs_tab141805566829374″]tambah data pt[/bs_tcontent]
[bs_tcontent class=”” id=”bs_tab141805573896874″]validation data[/bs_tcontent]
[bs_tcontent class=”” id=”bs_tab141805574921774″]edit data[/bs_tcontent]

[bs_tcontent class=”” id=”bs_tab141805575927974″]delete data[/bs_tcontent]
[/bs_tcontents]
[/bs_tabs]

Demo aplikasi : disini
[wpdm_package id=’2306′]

Semoga bermanfaat. Terima kasih.

Iklan

One thought on “Belajar CRUD Menggunakan CodeIgniter dan Twitter Bootstrap

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s