Belajar CRUD CodeIgniter (Xampp) + Bootstrap 4

608 Shares

Tutorial CRUD Codeigniter: Insert (tambah data), edit / update & hapus dengan Xampp database mysql

Pada post ini #admin akan share materi belajar Codeigniter dasar pemula untuk sistem CRUD sederhana dengan menggunakan konsep MVC + design template Bootstrap 4.

Materi latihan Pasang template Bootstrap + CI: Baca disini…

Kita akan belajar / latihan Codeigniter dengan basis data (database) mysql dengan PHPmyadmin xampp / Localhost, materi ini cocok untuk kamu yang baru belajar CI. Update: Versi Codeigniter yang digunakan adalah: 3.xx

 

Belajar CRUD Codeigniter

Crud adalah dasar codeigniter dari semua projects aplikasi dimana setiap fitur nantinya akan ada input, edit, update & hapus data yang disimpan pada database.

Latihan CRUD Codeigniter: buat folder baru > xampp > hddocs > latihanCI

  • URL: http://localhost/latihanCI

Note: file codeigniter 3 & template kita menggunakan materi latihan: sebelumnya »

 

Video CRUD Codegniter

https://www.youtube.com/watch?v=7wvRV8HWRK0

 

Selanjutnya Langsng mulai, temen2, Buat database baru: latihan_ci > tabel: user

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

CREATE TABLE `user` (
  `id` int(5) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(150) NOT NULL,
  `phone` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `user`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `user`
  MODIFY `id` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
COMMIT;

Koneksi Database + Codeigniter: application/config/database.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
  'dsn'	=> '',
  'hostname' => 'localhost',
  'username' => 'root',
  'password' => '',
  'database' => 'latihan_ci',
  '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
);

 

Seting Routes: application/config/routes.php

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

$route['default_controller'] = 'crud';
$route['404_override'] = '';
$route['translate_uri_dashes'] = TRUE;

ket: fungsi routes untuk seting default halaman home, saat url dibuka, Infomasi lengkap setingan / konfigurasi dasar codeigniter bisa agan pelajari disini:

Baca:  Panduan Konfigurasi/Seting Dasar CodeIgniter

 

Seting autoload: application/config/autoload.php

$autoload['libraries'] = array('session', 'database', 'form_validation','template');
$autoload['helper'] = array('url', 'form');

 

Buat file controller CRUD: Crud.php

lokasi folder: application/controllers/Crud.php

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

class Crud extends CI_Controller {

  public function __construct()
  {
    parent::__construct();
    $this->load->model('m_crud');

  }

  // List all data
  public function index()
  {
     $data['tmp']= $this->m_crud->tampil()->result();
     $this->template->load('role','crud/view',$data);
  }

  // Add a form item
  public function form_add()
  {
     $this->template->load('role','crud/create');
  }
    
    // ada data proses input
  public function add()
  {
     
     $this->form_validation->set_rules('name', 'name', 'trim|required|min_length[3]|max_length[45]');
     $this->form_validation->set_rules('email', 'email', 'trim|required|min_length[5]|max_length[45]');
     $this->form_validation->set_rules('phone', 'Phone', 'trim|required|min_length[5]|max_length[14]');
     
     if ($this->form_validation->run() == TRUE) 
     {
     	if($this->m_crud->input())
            {
            $this->session->set_flashdata('pesan','Add data succesfuly!');
            redirect('crud','refresh');
            }
     } else {
        $this->template->load('role','crud/create');
            }

  }

  public function edit(){

     $data['tmp']=$this->m_crud->m_edit()->row();
     $this->template->load('role','crud/edit',$data);

  }

  //Update one item
  public function update()
  {

   $this->form_validation->set_rules('name', 'name', 'trim|required|min_length[3]|max_length[45]');
     $this->form_validation->set_rules('email', 'email', 'trim|required|min_length[5]|max_length[45]');
     $this->form_validation->set_rules('phone', 'Phone', 'trim|required|min_length[5]|max_length[14]');
      
      if ($this->form_validation->run() == TRUE) 
      {
     if($this->m_crud->m_update()){
                $this->session->set_flashdata('pesan','Update data succesfuly!');
                redirect('/','refresh');
        }else{

     	        $this->session->set_flashdata('pesan','Update data failed');
                redirect('/','refresh');

              }

    }else{

    	$data['tmp']=$this->m_crud->m_edit()->row();
        $this->template->load('role','crud/edit',$data);
         
         }

    }

  //Delete one item
  public function del()
  {

     if($this->m_crud->delete())
     {
                $this->session->set_flashdata('pesan','Delete data succesfuly!');
                redirect('crud','refresh');
     }else{

     	        $this->session->set_flashdata('pesan','Delete data failed');
                redirect('crud','refresh');

          }

  }
}

/* End of file Crud.php */
/* Location: ./application/controllers/Crud.php */

Ketengan kode:

semua kode function tampil data, edit data & hapus data kita buat 1 file controllers Crud.php didalam kode telah kita tambahkan form_validasi & flash_data untuk notifikasi proses.

 

Buat file Model Crud: M_crud.php

lokasi folder: application/models/M_crud.php

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

class M_crud extends CI_Model {

  
  public function input(){
    $data = array('name' => $this->input->post('name') , 
                  'email'=> $this->input->post('email'),
                  'phone'=> $this->input->post('phone'));
    return $this->db->insert('user',$data);
  }

  public function tampil(){
    $this->db->select('*');
  return $this->db->get('user');
  }

  public function delete(){

        $this->db->where('id',$this->uri->segment(3));
        return $this->db->delete('user');

  }

  public function m_edit(){

    $this->db->select('*');
    $this->db->where('id',$this->uri->segment(3));
  return $this->db->get('user');
  
  }

  public function m_update(){

    $data = array('name' => $this->input->post('name') , 
                  'email'=> $this->input->post('email'),
                  'phone'=> $this->input->post('phone'));

        $this->db->where('id',$this->uri->segment(3));
        return $this->db->update('user',$data);

  }

}

/* End of file M_crud.php */
/* Location: ./application/models/M_crud.php */

keterangan kode:

Dalam proses edit & hapus data kita menggunakan identifikasi variable ID field, sehingga kita pakai uri-sement(3),

Sample include URL varibale ID: http://localhost/latihanCI/crud/edit/12

 

Buat folder “crud” didalam folder view, yang berisi file:

  1. view.php
  2. create.php
  3. edit.php

 

kode view.php:

<div class="col-md-8">
<h1 class="my-4">Views
          <small>Data sample</small>
        </h1>

<?php echo anchor('crud/form_add', '+ Add data', 'class="btn btn-primary btn-sm"'); ?>
<br><br>
<font color="green"><?php echo $this->session->flashdata('pesan'); ?></font>

<table class="table">
  <thead>
    <tr>
      <th scope="col">#ID</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Phone</th>
      <th scope="col">Option</th>
    </tr>
  </thead>

  <tbody>
    <?php foreach ($tmp as $key) { ?>
    <tr>
      <th scope="row"><?php echo $key->id; ?></th>
      <td><?php echo $key->name; ?></td>
      <td><?php echo $key->email; ?></td>
      <td><?php echo $key->phone; ?></td>
      <td>
        <?php echo anchor('crud/edit/'.$key->id, 'Edit', 'class="badge badge-info"');  ?>
        /
        <?php echo anchor('crud/del/'.$key->id, 'Delete',array('class'=>'badge badge-danger', 'onclick'=>"return confirmDialog();"));  ?>
     </td>
    </tr>
   <?php }?>
  </tbody>
</table>
</div>

<script type="text/javascript">
function confirmDialog() {
  var x=confirm("Yakin akan di hapus?")
  if (x) {
    return true;
  } else {
    return false;
  } }
</script>

Note: menambahkan fungsi javascript untuk validasi (yes/no) tombol / link hapus data!

 

Kode create.php:

  <div class="col-md-4">

        <h1 class="my-4">Add
          <small>Data sample</small>
        </h1>

  <font color="green"><?php echo $this->session->flashdata('pesan'); ?></font>
  <?php echo form_open('crud/add',''); ?>
  <div class="form-group">
    <label for="exampleInputEmail1">Name</label>
    <input type="text" name="name"class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <?php echo form_error('name', '<div class="text-danger"><small>', '</small></div>');?>
  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">Email</label>
    <input type="email" name="email" class="form-control" id="exampleInputPassword1">
    <?php echo form_error('email', '<div class="text-danger"><small>', '</small></div>');?>
  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">Phone</label>
    <input type="text" name="phone" class="form-control" id="exampleInputPassword1">
    <?php echo form_error('phone', '<div class="text-danger"><small>', '</small></div>');?>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
<?php echo form_close(); ?>
</div>

 

kode edit.php:

  <div class="col-md-4">

        <h1 class="my-4">Edit
          <small>Data sample</small>
        </h1>
        
  <font color="green"><?php echo $this->session->flashdata('pesan'); ?></font>
  <?php echo form_open('crud/update/'.$tmp->id,''); ?>

  <div class="form-group">
    <label for="exampleInputEmail1">Name</label>
    <input type="text" name="name" class="form-control" value="<?php echo $tmp->name; ?>">
    <?php echo form_error('name', '<div class="text-danger"><small>', '</small></div>');?>
  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">Email</label>
    <input type="email" name="email" class="form-control" value="<?php echo $tmp->email; ?>">
    <?php echo form_error('email', '<div class="text-danger"><small>', '</small></div>');?>
  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">Phone</label>
    <input type="text" name="phone" class="form-control" value="<?php echo $tmp->phone; ?>">
    <?php echo form_error('phone', '<div class="text-danger"><small>', '</small></div>');?>
  </div>

  <button type="submit" class="btn btn-primary">Update Now!</button>
<?php echo form_close(); ?>

</div>

 

Hasil Preview Crud

Tampil data:

View: form tambah / insert data

View: form edit & update data:

 

Discliamer Code CI

  • Penjelaskan secara rinci makna setiap baris kode pada masing controller, model & views
  • Keterangan & fungsi setiap baris kode akan kita bahas pada video diatas.
  • CRUD Codeigniter menggunakan konsep full MVC
  • hasil masih sederhana jadi bisa dikembangkan lebih lengkap
  • File download latihan CI adalah 100% gratis.

 

Download file CRUD Codeigniter

Jika kamu mengalami error / kesulitan saat belajar kita telah sediakan file CI yang sudah jadi tingggal pakai & bisa di unduh secara gratis untuk latihan belajar: LatihanCRUD.zip

 

Next Belajar CI ?

Materi latihan codeigniter selanjutnya kita akan belajar cara membuat sistem login CI sederhana + Secure dengan enkirpsi password hash:

https://www.seosatu.com/login-codeigniter/

__Semoga bermanfaat & selamat beajar!



Baca Juga:

4 thoughts on “Belajar CRUD CodeIgniter (Xampp) + Bootstrap 4

  1. Avatar for Yogi PranataYogi Pranata

    bg kenapa ketika dijalankan di localhost muncul peringatan seperti ini?
    An Error Was Encountered
    Unable to load the requested class: Template

    Mohon bantuannya bg

    Reply
    1. Avatar for Tn. AndreasTn. Andreas Admin

      pastikan semua kode & setingan xampp benar, itu ada kode template yang perlu di check ulang

  2. Avatar for Harol TehupuringHarol Tehupuring

    Bang cara menambahkan field bgimna yah?
    Sya mau tmbahkan field NIM
    Sya sdah tmbahkan cuma msi error. Muncul tulisan A PHP Error was encountered.

    Reply
    1. Avatar for Tn. AndreasTn. Andreas

      buat field baru di database dan nanti bisa tayangkan di form, info lengkap bantuan bisa kontak via wa saja.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *