Cara Membuat CRUD menggunakan Codeigniter 3 dan Bootstrap

Cara Membuat CRUD menggunakan Codeigniter 3 dan Bootstrap

09:06
Cara Membuat CRUD menggunakan Codeigniter 3 dan Bootstrap - Hai teman-teman, pada kesempatan kali ini, saya memposting mengenai codeigniter. Apa itu CRUD.? CRUD merupakan kepanjangan dari Create Read Update Delete. Saya asumsi teman-teman sudah memahami penggunaan url dan routing pada codeigniter atau bisa membaca pada postingan sebelumnya yaitu Tutorial Codeigniter 3: Penggunaan URL dan Routing di Codeigniter . 
Terlebih dahulu anda dapat mendownload codeigniter di codeigniter.com. Maka kita memiliki struktur folder seperti gambar dibawah ini.

Sejenak kita tinggalkan codeigniter, selanjutnya membuat database dan tabel. Pada tutorial ini menggunakan MySQL sebagai pengolahan databasenya. Maka, terlebih dahulu membuat databasenya, nama databasenya yaitu crud. Tabel yang akan dibuat begitu sederhana saja dengan nama blog. Lalu membuat atribut atau field pada tabel tadi. Seperti gambar dibawah ini:



Setelah persiapan database dan tabel selesai, maka kita kembali lagi pada codeigniter. Agar codeigniter dapat terhubung dengan database yang dibuat tadi. Maka ada beberapa yang harus kita setting. Buka folder application > config > database.php. Edit file database.php dengan text editor yang anda miliki. Perhatikan script dibawah ini, ubah nama database, serta username yang anda miliki.
$db['default'] = array(
    'dsn'    => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'crud',
    '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
);
Jangan lupa di simpan yang sudah kita edit tadi. Lalu ada satu bagian lagi yang harus kita setting, yaitu base_url(). Pada foler application > config > config.php. Edit pada bagian seperti dibawah ini.
$config['base_url'] = 'http://localhost/bahasaprogram/crud/';
Setelah melakukan settingan pada database, maka selanjutnya membuat tampilan form input menggunakan bootstrap. Untuk membuat tampilan, kita menggunakan folder views untuk menempatkan tampilan-tampilan user yang kita miliki. Buka folder views > form.php.
<div class="col-md-5">
 <form method="post" method="<?php echo base_url(); ?>index.php/crud/insert">
  <div class="form-group">
   <label>Judul Post</label>
   <input type="text" name="judul" class="form-control">  
  </div>
  <div class="form-group">
   <label>Isi Post</label>
   <textarea class="form-control" name="isi"></textarea>
  </div>
  <div class="form-group">
   <button type="submit" class="btn btn-primary">Insert</button>
  </div>
 </form>
</div>

Agar tampilan form kita dapat di tampilkan, maka kita membutuhkan sebuah controller. Oleh sebab itu, kita membuat controller baru pada folder controllers > Crud.php (diawali huruf besar). Berikut potongan kode untuk controller Crud.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Crud extends CI_Controller {

 public function index() {
  $layout['post'] = 'form';
  $this->load->view('index', $layout);
 }

}
Maka, ketika melakukan akses url seperti ini http://localhost/bahasaprogram/crud/index.php/crud akan tampil seperti gambar berikut:


Tampilan form input sudah selesai, selanjutnya membuat proses untuk menginput data ke database. Kembali lagi dengan controller Crud yang sudah dibuat, lalu menambahkan potongan script seperti dibawah ini (yang di teballin).
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Crud extends CI_Controller {

    public function __construct() {
        parent:: __construct();
        $this->load->database();
        $this->load->model('ModelCrud');
        $this->load->helper('url');
    }

    public function index() {
        $layout['post'] = 'form';
        $this->load->view('index', $layout);
    }

    public function insert() {
        $judul = $this->input->post('judul');
        $isi = $this->input->post('isi');

        $dataInput = array(
            'judul' => $judul,
            'isi'   => $isi

        );

        $this->ModelCrud->insert($dataInput);
    }

}
Perhatikan pada bagian baris $this->ModelCrud->insert($dataInput) Yang berarti kita harus membuat sebuah model untuk melakukan proses insert data ke database oleh sebab itu buat file baru pada folder models > ModelCrud (diawal huruf besar). Maka berikut potongan script untuk model yang kita buat.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class ModelCrud extends CI_Model {

    public function insert($data) {
        return $this->db->insert('post', $data); //"post" merupakan nama tabel yang dibuat.
    }

}
Sampai disini, sepertinya sudah dapat menginput data kedatabase. Selanjutnya data yang sudah kita input, akan kita tampilkan dalam bentuk tabel. Buat file baru pada folder views > data.php. Lalu terapkan script dibawah ini.
<div class="col-md-9">
 <div class="table-responsive">
  <table class="table table-bordered">
   <tr>
    <th>No.</th>
    <th>Judul</th>
    <th>Isi</th>
    <th>Aksi</th>
   </tr>
   <?php 
   if ($data) {
    $no = 1;
    foreach ($data as $key => $result) {
   
   ?>
   <tr>
    <td><?php echo $no; ?></td>
    <td><?php echo $result->judul ?></td>
    <td><?php echo $result->isi ?></td>
    <td>
     <a href="<?php echo base_url(); ?>index.php/crud/hapus/<?php echo $result->id; ?>" class="btn btn-danger"> Hapus </a>
     <a href="<?php echo base_url(); ?>index.php/crud/edit/<?php echo $result->id; ?>" class="btn btn-success"> Edit</a>
    </td>
   </tr>
   <?php 
    $no++;
    }
   }
   ?>
  </table>
 </div>
</div>

Nah, untuk mendapatkan datanya kita membuat satu fungsi lagi untuk mendapatkan data tersebut. berikut potongan script controller crudnya yang sudah dibuat tadi.
public function getData() {
        $layout['data'] = $this->ModelCrud->getData();
        $layout['post'] = 'data';
        $this->load->view('index', $layout);
 }
Selain controller, kita juga membuat fungsi di modelnya. berikut potongan model crud yang telah dibuat tadi.
public function getData() {
        return $this->db->get('blog')->result();
 }
Maka ketika anda mengakses url seperti ini: http://localhost/bahasaprogram/crud/index.php/crud/getdata akan tampil seperti gambar dibawah ini.


Pada tabel ada 2 aksi yang diberikan yaitu Edit dan Hapus. Selanjutnya kita membuat proses untuk button edit. Untuk membuat edit, terlebih dahulu membuat tampilan form untuk mengedit data. Buat file baru pada folder views > form_edit.php. Berikut script untuk membuat tampilan formnya:

<?php 
$result = $data_blog[0];

?>

<div class="col-md-5">
 <form method="post" action="<?php echo base_url(); ?>index.php/crud/update">
  <input type="hidden" name="id" value="<?php echo $result->id; ?>">
  <div class="form-group">
   <label>Judul Post</label>
   <input type="text" name="judul" class="form-control" value="<?php echo $result->judul; ?>">  
  </div>
  <div class="form-group">
   <label>Isi Post</label>
   <textarea class="form-control" name="isi"><?php echo $result->isi; ?></textarea>
  </div>
  <div class="form-group">
   <button type="submit" class="btn btn-success">Edit</button>
  </div>
 </form>
</div>

Setelah membuat tampilan form, selanjutnya membuat sebuah fungsi di controller untuk mengirim data ke view form edit tadi. Berikut potongan controller Crud yang sudah dibuat tadi.

public function edit() {
        if ($this->uri->segment(3) != null) {
            $id = $this->uri->segment(3);

            $where = array('id' => $id);

            $layout['data_blog'] = $this->ModelCrud->viewData($where);
            $layout['post'] = 'form_edit';
            $this->load->view('index', $layout);
        }
  }
Sampai pada bagian ini, maka hasilnya seperti gambar dibawah ini.
Saat ini tombol edit masih belum berjalan dengan baik. Oleh sebab itu, kita membuat fungsi di controller crud untuk melakukan proses update data di database. 

public function update() {
        $id = $this->input->post('id');
        $judul = $this->input->post('judul');
        $isi = $this->input->post('isi');

        $kondisi = array('id' => $id);
        $data_update = array('judul' => $judul, 'isi' => $isi);
        if ($this->ModelCrud->update($kondisi, $data_update)) {
            echo "berhasil Mengubah data";
        } else {
            echo "gagal mengubah data";
        }
   }
Nah, kita menggunakan model crud dan menggunakan fungsi update, maka kita membuat fungsi update tersebut di model crud yang sudah dibuat sebelumnya. Berikut potongan script untuk update data.
public function update($kondisi, $data_update) {
        $this->db->where($kondisi);
        return $this->db->update('blog', $data_update);
 }
Sepertinya hasilnya berhasil seperti yang kita buat kondisi jika berhasil mengubah datanya. Oke, selanjutnya kita membuat aksi delete (hapus). Seperti langkah-langkah sebelumnya, kita membutuhkan sebuah fungsi di controller untuk melakukan proses hapus ini. Oleh sebab itu, maka dibawah ini potongan script untuk hapus data.
public function hapus() {
        if ($this->uri->segment(3) != null) {
            $id = $this->uri->segment(3);
            $kondisi = array('id' => $id);

            if ($this->ModelCrud->hapus($kondisi)) {
                echo "berhasil Menghapus data";
            } else {
                echo "gagal menghapus data";
            }
        }
  }
Dan berikut fungsi pada bagian modelnya.
public function hapus($kondisi) {
        $this->db->where($kondisi);
        return $this->db->delete('blog');
 }
Sipp, sepertinya sudah berjalan dengan baik. Tinggal di poles-poles saja dengan fungsi dari codeigniternya. Semuanya sudah tersedia pada dokumentasinya saat anda mengunduh codeigniternya.

Kesimpulan 

Pada umumnya pembuat CRUD (Cread, Read, Update, Delete) ini tidaklah jauh beda dengan menggunakan PHP native. Hanya saja disini anda diberi kemudahan, dengan cara memanggil class-class yang telah disediakan. Kesimpulannya untuk menginput data anda menggunakan $this->db->insert(), dan untuk menampilkan datanya menggunakan $this->db->select(), dan untuk update datanya $this->db->update, serta untuk menghapus datanya menggunakan $this->db->delete() dengan parameter-parameter yang telah di sertakan pada dokumentasinya. Sampai disini tutorial yang saya berikan semoga dapat bermanfaat, kritik dan masukannya.


Demo dan Download File


About

Perkenalkan saya blogger pemula, yang ingin belajar lebih dalam mengenai blogger dan internet ini.

Next
« Prev Post
Previous
Next Post »

ConversionConversion EmoticonEmoticon

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
:lv
Subscribe to: Post Comments (Atom)