Membuat Aplikasi CRUD dengan Codeigniter + Bootstrap ~ KODEBADAI

Membuat Aplikasi CRUD dengan Codeigniter + Bootstrap

Assalamu alaikum wr. wb.

Kali ini saya akan membagikan tutorial membuat aplikasi CRUD (Create Read Update Delete) dengan menggunakan Codeigniter (Framework PHP). Sebelum anda melanjutkan tutorial ini, sebaiknya anda perlu paham dengan konsep PBO (Pemrograman Berorientasi Object) pada PHP. Agar kalian lebih paham code - code yang digunakan dalam Codeigniter. Karena Codeigniter menggunakan konsep tersebut untuk membangun aplikasinya dan satu lagi menggunakan konsep MVC (Model View Controller). Untuk lebih jelasnya bisa anda kunjungi situsnya. Langsung saja menuju ke tkp.

Pastikan PC anda sudah terinstal aplikasi web server seperti XAMPP, WAMP, Lamp, dsb.
Siapkan editor PHP favorit anda. Saya menggunakan Notepad++ dalam tutorial ini.
Download framework codeigniter nya di https://www.codeigniter.com/download. Saya menggunakan codeigniter versi 3 pada tutorial ini.
Download bootstrap template di sini .
Ekstrak file zip codeigniter ke htdocs dan rename folder yang telah diekstrak dengan nama latihan (opsional). Dan buat folder assets di dalam folder latihan kemudian ekstrak bootstrap template yang didownload ke folder assets tsb.
Edit file config.php yang terdapat di folder latihan/application/config/config.php . Isi $config['base_url'] = 'http://localhost/latihan/'; . latihan adalah nama folder yang akan diakses lewat url.

Edit file database.php yang terdapat di folder config tersebut. Pada hostname isikan localhost, username isikan root (sesuai username mysql anda), password isikan ' '(sesuai username mysql anda).

   
 $db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'perpus',
 'dbdriver' => 'mysqli',
 'dbprefix' => '',
 'pconnect' => FALSE,
 'db_debug' => (ENVIRONMENT !== 'production'),
 'cache_on' => FALSE,
 'cachedir' => '',
 'char_set' => 'utf8',
 'dbcollat' => 'utf8_general_ci',
 'swap_pre' => '',
 'encrypt' => FALSE,
 'compress' => FALSE,
 'stricton' => FALSE,
 'failover' => array(),
 'save_queries' => TRUE

Edit file routes.php di folder tsb.

   
 $route['default_controller'] = 'buku';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

Kemudian buat database pada mysql dengan nama perpus dan buat tabel buku sebagai berikut :

   
 CREATE TABLE `buku` (
  `id` int(5) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `judul` varchar(50) NOT NULL,
  `pengarang` varchar(50) NOT NULL,
  `stok` int(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Buat controller dengan nama Buku.php di folder latihan/application/controllers sbb.

   
 <?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Buku extends CI_Controller{
 
 //membuat atribut alert 
 private $alert = '';
 
 public function __construct(){ //method ini akan selalu dijalankan
  parent::__construct();
  $this->load->helper('url'); //load helper url CI
  $this->load->model('bukuModel'); // load model bukuModel yang akan digunakan untuk proses database
 }
 
 public function index(){ 
  //ambil data dari tabel buku melalui method all dari Model bukuModel
  $data['semua'] = $this->bukuModel->all();
  //load method template
  $this->template('list',$data);
 }
 
 private function template($content,$data=null){ 
 //method ini digunakan untuk memanggil template yang telah dibuat
 // untuk dapat digunakan pada method lainnya
 //parameter $content = lokasi file view pada folder View
 //parameter $data = data yang akan dimasukkan ke file view
  $data['content'] = $this->load->view($content,$data,true);
  $this->load->view('template',$data);
 }
 private function alert($open_tag=null,$close_tag=null,$data=null){ 
 //method ini untuk membuat alert yang dapat digunakan pada method lain
  if($data!=null) $data = $open_tag.$data.$close_tag;
  return $data;
  //contoh : $this->alert('<h1>','</h1>','Hello world'); Output : <h1>Hello World</h1>
 }
 public function form(){
  //jika form disubmit
  if($this->input->post('simpan')){
   //masukkan data POST ke dalam variabel $array
   $array = array(
     'judul'=>$this->input->post('judul'),
     'pengarang'=>$this->input->post('pengarang'),
     'stok'=>$this->input->post('stok'),
   );
   //jika id nya kosong ( melakukan insert data baru )
   if($this->input->post('id')==''){
    //panggil method insert pada Model bukuModel
    if($this->bukuModel->insert($array)){
     //jika berhasil insert
     $this->alert = $this->alert("<p class='alert alert-success'>","</p>","Sukses Menyimpan"); 
    }else{
     //jika gagal insert
     $this->alert = $this->alert("<p class='alert alert-danger'>","</p>","Gagal Menyimpan");
    }
    // jika id nya tidak kosong ( melakukan update data )
   }else{
    //panggil method update pada Model bukuModel
    if($this->bukuModel->update($array,array('id'=>$this->input->post('id')))){
     //jika berhasil update
     $this->alert = $this->alert("<p class='alert alert-success'>","</p>","Sukses Menyimpan"); 
    }else{
     //jika gagal update
     $this->alert = $this->alert("<p class='alert alert-danger'>","</p>","Gagal Menyimpan");     
    }
   }
  }
  //memanggil method getWhere pada model bukuModel untuk memanggil data buku sesuai id
  //jika id kosong, maka nilai balik (return value) nya NULL
  //id diambil dari URL SEGMENT 3
  $data['satu'] = $this->bukuModel->getWhere(array('id'=>$this->uri->segment(3)))->row_array();
  //masukkan data alert hasil proses
  $data['alert'] = $this->alert;
  //memanggil method template
  $this->template('form',$data);
 }
 public function hapus(){
  //jika telah diset URI SEGMENT 3 (id buku) maka hapus data sesuai id yang diset
  //dengan memanggil method model bukuModel
  if($this->uri->segment(3)) $this->bukuModel->delete(array('id'=>$this->uri->segment(3)));
  //kemudian dialihkan ke controller Buku method index
  redirect('buku');
 }
 
}

?>

Buat model BukuModel.php di folder latihan/application/models sbb.

   
 <?php
defined('BASEPATH') OR exit('No direct script access allowed');
class BukuModel extends CI_Model{
 
 public function __construct(){
  parent::__construct();
  //melakukan koneksi database
  $this->load->database();
 }
 public function all(){
  //ambil semua data tabel buku
  return $this->db->get('buku');
 }
 public function getWhere($where){
  //ambil data sesuai kriteria pada tabel buku
  $this->db->where($where);
  return $this->db->get('buku');
 }
 public function insert($data){
  // melakukan insert ke tabel buku
  return $this->db->insert('buku',$data);
 }
 public function update($data,$where){
  //melakukan update ke tabel buku
  $this->db->where($where);
  return $this->db->update('buku',$data);
 }
 public function delete($where){
  //menghapus data pada tabel buku sesuai kriteria
  return $this->db->delete('buku',$where);
 }
 
}
?>

Buka folder latihan/application/views.
Buat file form.php

   
 <div class="row">
 <div class="col-md-12">
  <h1 align="center">Form Buku</h1>
 </div>
</div>
<div class="row">
 <div class="col-md-12">
  <div class="panel panel-default">
   <div class="panel-heading">
    <label>Form Buku</label>
   </div>
   <div class="panel-body">
   <?php echo $alert;?>
    <form method="post" class="form-horizontal">
     <div class="form-group">
      <label class="control-label col-md-2">Judul</label>
      <div class="col-md-10">
       <input type="text" name="judul" class="form-control" value="<?php echo $satu['judul'];?>">
      </div>
     </div>
     <div class="form-group">
      <label class="control-label col-md-2">Pengarang</label>
      <div class="col-md-10">
       <input type="text" name="pengarang" class="form-control" value="<?php echo $satu['pengarang'];?>">
      </div>
     </div>
     <div class="form-group">
      <label class="control-label col-md-2">Stok</label>
      <div class="col-md-10">
       <input type="text" name="stok" value="<?php echo $satu['stok'];?>" class="form-control">
      </div>
     </div>
     <div class="form-group">
      <div class="col-md-2">
       <input type="hidden" name="id" value="<?php echo $satu['id'];?>">
      </div>
      <div class="col-md-10">
       <input type="submit" name="simpan" class="btn btn-primary" value="Simpan">
       <a href="<?php echo site_url();?>" class="btn btn-danger">Kembali</a>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

Buat list.php

   
 <div class="row">
 <div class="col-md-12">
  <h1 align="center">Tabel Buku</h1>
 </div>
</div>
<div class="row">
 <div class="col-md-12">
  <a href="<?php echo site_url('buku/form');?>" class="btn btn-primary pull-left">Tambah</a>
  <table class="table table-striped">
   <thead>
    <tr>
     <th>No</th>
     <th>Judul</th>
     <th>Pengarang</th>
     <th>Stok</th>
     <th>Aksi</th>
    </tr>
   </thead>
   <tbody>
    <?php $n=0;
    foreach($semua->result_array() as $d){ 
    $n++;?>
    <tr>
     <td><?php echo $n;?></td>
     <td><?php echo $d['judul'];?></td>
     <td><?php echo $d['pengarang'];?></td>
     <td><?php echo $d['stok'];?></td>
     <td>
      <a href="<?php echo site_url('buku/form/'.$d['id']);?>" class="btn btn-success">Edit</a>
      <a href="<?php echo site_url('buku/hapus/'.$d['id']);?>" class="btn btn-danger">Hapus</a>
     </td>
    </tr>
    <?php } ?>
   </tbody>
  </table>
 </div>
</div>

Buat template.php

   
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Tutorial CRUD Codeigniter + Bootstrap</title>

    <!-- Bootstrap Core CSS -->
    <link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="<?php echo base_url();?>assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                
                <a class="navbar-brand" href="<?php echo site_url();?>">KadimasMahameru.Net</a>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
  
        <div id="page-wrapper">
   
            <div class="container-fluid">
    <div class="row">
     <div class="col-md-2">
     
     </div>
     <div class="col-md-8">
      <?php echo $content;?>
     </div>
     <div class="col-md-2">
     
     </div>
    </div>
    
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="<?php echo base_url();?>assets/js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>

</body>

</html>

Kemudian run aplikasi di browser dengan mengakses http://localhost/latihan. Selesai. File dapat didownload di sini.

Selanjutnya saya akan melanjutkan tutorial membuat validasi form dengan codeigniter dari tutorial di atas. Mohon menunggu.

KODEBADAI | Coding isn`t disaster

Rabu, 16 November 2016