Hi sahabat programmers, kembali lagi nich. Kali ini penulis ingin melanjutkan tutorial sebelumnya yaitu “bagaimana menampilkan data dari database dengan codeigniter dan datatables”.

Sekarang penulis akan sharing sebaliknya yaitu “bagaimana menginputkan data ke database dengan codeigniter”.

Hmm.,Jika Anda belum membaca tutorial yang penulis post sebelumnya silahkan baca dulu, karena tutorial kali ini berhubungan dengan tutorial sebelumnya [Baca tutorial sebelumnya].

Ok langsung saja. Penulis anggap anda telah membaca tutorial penulis sebelumnya.

#1. Buat database dengan nama db_inventori dengan struktur sebagai berikut:

CREATE TABLE tbl_barang(
barang_id VARCHAR(10) PRIMARY KEY,
barang_nama VARCHAR(100),
barang_satuan VARCHAR(20),
barang_harga DOUBLE
);

NB: jika Anda telah mempraktekkan tutorial saya sebelumya, anda tidak perlu membuat database lagi.

 

#2. Install codeigniter

Kemudian install codeigniter pada webserver Anda. Jika Anda menggunakan XAMPP letakkan file codeigniter Anda pada direktori c://xampp/htdocs. Jika Anda mengunakan WAMPSERVER letakkan file codeigniter Anda pada c://wamp/www.

Jika Anda bingung silahkan baca tentang Installasi Codeigniter pada post penulis sebelumnya.!

Disini penulis telah melakukan installasi dan penulis menamakan projectnya yaitu ci_datatable.

 

#3. Konfigurasi

Buka file application/config/autoload.php. setting menjadi seperti berikut:

Dari:

$autoload['libraries'] = array();
$autoload['helper'] = array();

Menjadi:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka file application/config/config.php. setting menjadi seperti berikut:

Dari:

$config['base_url'] = '';

Menjadi:

$config['base_url'] = 'http://localhost/ci_datatable/';

Kemudian buka file application/config/database.php. setting menjadi seperti berikut:

$active_group = 'default';
$query_builder = TRUE;

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

Kemudian buka file application/config/routes.php. setting menjadi seperti berikut:

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

 

#4. Buat controller dengan nama Barang.php

Adapun isi dari controller Barang adalah sebagai berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Barang extends CI_Controller {
        function __construct(){
                parent::__construct();
                $this->load->model('m_barang');
        }
        
        function index(){
                $x['data']=$this->m_barang->show_barang();
                $this->load->view('v_barang',$x);
        }

        function simpan_barang(){
                $kode_barang=$this->input->post('kode_barang');
                $nama_barang=$this->input->post('nama_barang');
                $satuan=$this->input->post('satuan');
                $harga=$this->input->post('harga');
                $this->m_barang->simpan_barang($kode_barang,$nama_barang,$satuan,$harga);
                redirect('barang');
        }
}

 

#5. Buat model dengan nama M_barang.php

Adapun isi dari model M_barang adalah sebagai berikut:

<?php
class M_barang extends CI_Model{
        
        function show_barang(){
                $hasil=$this->db->query("SELECT * FROM tbl_barang");
                return $hasil;
        }

        function simpan_barang($kode_barang,$nama_barang,$satuan,$harga){
                $hasil=$this->db->query("INSERT INTO tbl_barang (barang_id,barang_nama,barang_satuan,barang_harga) VALUES ('$kode_barang','$nama_barang','$satuan','$harga')");
                return $hasil;
        }
        
}

 

#6. Buat View dengan nama v_barang.php

Adapun isi dari view v_barang adalah sebagai berikut:

<!DOCTYPE html>
<html lang="id">
<head>
        <meta charset="utf-8">
        <title>Data Barang</title>
        <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">
    <link href="<?php echo base_url().'assets/css/jquery.dataTables.min.css'?>" rel="stylesheet">
</head>
<body>

<div class="container">
        <h1>Data <small>Barang!</small>
                <div class="pull-right"><a class="btn btn-sm btn-success" data-toggle="modal" data-target="#modal_add_new"> Add New</a></div>           
        </h1>

        <table class="table table-bordered table-striped" id="mydata">
                <thead>
                        <tr>
                                <td>Kode Barang</td>
                                <td>Nama Barang</td>
                                <td>Satuan</td>
                                <td>Harga</td>
                        </tr>
                </thead>
                <tbody>
                        <?php 
                                foreach($data->result_array() as $i):
                                        $barang_id=$i['barang_id'];
                                        $barang_nama=$i['barang_nama'];
                                        $barang_satuan=$i['barang_satuan'];
                                        $barang_harga=$i['barang_harga'];
                        ?>
                        <tr>
                                <td><?php echo $barang_id;?></td>
                                <td><?php echo $barang_nama;?></td>
                                <td><?php echo $barang_satuan;?></td>
                                <td><?php echo 'Rp '.number_format($barang_harga);?></td>
                        </tr>
                        <?php endforeach;?>
                </tbody>
        </table>
        
</div>


<!-- ============ MODAL ADD BARANG =============== -->
        <div class="modal fade" id="modal_add_new" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h3 class="modal-title" id="myModalLabel">Add New Barang</h3>
            </div>
            <form class="form-horizontal" method="post" action="<?php echo base_url().'index.php/barang/simpan_barang'?>">
                <div class="modal-body">

                    <div class="form-group">
                        <label class="control-label col-xs-3" >Kode Barang</label>
                        <div class="col-xs-8">
                            <input name="kode_barang" class="form-control" type="text" placeholder="Kode Barang..." required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-3" >Nama Barang</label>
                        <div class="col-xs-8">
                            <input name="nama_barang" class="form-control" type="text" placeholder="Nama Barang..." required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-3" >Satuan</label>
                        <div class="col-xs-8">
                             <select name="satuan" class="form-control" required>
                                <option value="">-PILIH-</option>
                                <option value="Unit">Unit</option>
                                <option value="Kotak">Kotak</option>
                                <option value="Botol">Botol</option>
                                <option value="Sachet">Sachet</option>
                                <option value="Pcs">Pcs</option>
                                <option value="Dus">Dus</option>
                             </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-3" >Harga</label>
                        <div class="col-xs-8">
                            <input name="harga" class="form-control" type="text" placeholder="Harga..." required>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button>
                    <button class="btn btn-info">Simpan</button>
                </div>
            </form>
            </div>
            </div>
        </div>
        <!--END MODAL ADD BARANG-->

<script src="<?php echo base_url().'assets/js/jquery-2.2.4.min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
<script src="<?php echo base_url().'assets/js/jquery.dataTables.min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/moment.js'?>"></script>
<script>
        $(document).ready(function(){
                $('#mydata').DataTable();
        });
</script>
</body>
</html>

Sekarang silahkan jalan dengan mengunjung URL berikut:

http://localhost/ci_datatable/

Ok sahabat programmer, sekian dulu tutorial kali ini semoga bermanfaat.!