Kategori Random

Membuat CRUD CodeIgniter dengan Tampilan Bootstrap II

Posted : 17 Februari 2015 | 09:10:59 , Dibaca 38320 kali

Oke, kita lanjutkan tutorial sebelumnya tentang : Membuat CRUD CodeIgniter dengan Tampilan Bootstrap jika belum dibaca silakan dibaca pada link tersebut. Pada langkah sebelumnya controller sudah kita buat, kini kita tinggal buat model dan tampilan viewsnya. 

Model mbarang.php simpan di folder application/models buat seperti dibawah ini

<?php
class Mbarang extends CI_Model {

    var $tabel = 'tb_barang'; //variabel tabel

    function __construct() {
        parent::__construct();
    }
	function get_allbarang() {
        $this->db->from($this->tabel);
		$query = $this->db->get();

        //cek apakah ada ba
        if ($query->num_rows() > 0) {
            return $query->result();
        }
	}

    function get_barang_byid($id) {
        $this->db->from($this->tabel);
        $this->db->where('kode_brg', $id);

        $query = $this->db->get();

        if ($query->num_rows() == 1) {
            return $query->result();
        }
    }

    function get_insert($data){
       $this->db->insert($this->tabel, $data);
       return TRUE;
    }

    function get_update($id,$data) {

        $this->db->where('kode_brg', $id);
        $this->db->update($this->tabel, $data);

        return TRUE;
    }
    function del_barang($id) {
        $this->db->where('kode_brg', $id);
        $this->db->delete($this->tabel);
        if ($this->db->affected_rows() == 1) {

            return TRUE;
        }
        return FALSE;
    }
}
?>

Selanjutnya kita buat tampilan viewnya, karna saya sudah bilang sebelumnya toturial ini adalah lanjutan dari  Membuat tampilan CodeIgniter dengan Bootstrap, yang dimana sebelumnya kita sudah buat templatenya maka kita harus ubah sedikit agar klop dengan skrip yang kita buat ini. 

header.php di folder application/views

<!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="FaberNainggolan">
    <title><?=$title?></title>
    <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
  </head>

  <body>
    <!-- Static navbar -->
    <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">CRUD Barang</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            <li><a href="<?=base_url()?>barang"><i class="glyphicon glyphicon-th"></i> Barang</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

footer.php di folder application/views

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?=base_url()?>assets/js/jquery.min.js"></script>
    <script src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
  </body>
</html>

pada kedua skrip diatas kita menambahkan base_url() dimana berfungsi sebagai link url agar nanti semua plugin yang kita include langsung mengarah ke foldernya.

berikutnya kita buat views untuk vbarang.php pada folder application/views

<? $this->load->view('header');?>

    <div class="container">
      <!-- Main component for a primary marketing message or call to action -->
      <div class="panel panel-default">
  <div class="panel-heading"><b>Daftar Barang</b></div>
  <div class="panel-body">
    <p><?=$this->session->flashdata('pesan')?> </p>
      <a href="<?=base_url()?>barang/form/add" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-plus"></i> Tambah</a>
       <table class="table table-striped">
        <thead>
         <tr>
         <th>No</th>
         <th>Barcode</th>
         <th>Nama</th>
         <th>Harga</th>
         <th>Jenis</th>
         <th>Satuan</th>
         <th>Stok</th>
         <th></th>
         </tr>
        </thead>
        <tbody>
        <? if(empty($qbarang)){ ?>
         <tr>
          <td colspan="6">Data tidak ditemukan</td>
         </tr>
        <? }else{
          $no=0;
          foreach($qbarang as $rowbarang){ $no++;?>
         <tr>
          <td><?=$no?></td>
          <td><?=$rowbarang->barcode?></td>
          <td><?=$rowbarang->nama_brg?></td>
          <td><?=$rowbarang->harga_brg?></td>
          <td><?=$rowbarang->jenis?></td>
          <td><?=$rowbarang->satuan?></td>
          <td><?=$rowbarang->stok_brg?></td>
          <td>
           <a href="<?=base_url()?>barang/form/edit/<?=$rowbarang->kode_brg?>" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-pencil"></i></a>
           <a href="<?=base_url()?>barang/detail/<?=$rowbarang->kode_brg?>" class="btn btn-warning btn-sm"><i class="glyphicon glyphicon-search"></i></a>
           <a href="<?=base_url()?>barang/hapus/<?=$rowbarang->kode_brg?>" class="btn btn-danger btn-sm" onclick="return confirm('Anda Yakin menghapus data ini?')"><i class="glyphicon glyphicon-trash"></i></a>
          </td>
         </tr>
        <? }}?>
        </tbody>
       </table>
        </div>
    </div>    <!-- /panel -->
    </div> <!-- /container -->
<? $this->load->view('footer');?>

nah terlihat pada skrip diatas bahwa header.php dan footer.php diincludekan agar skrip kita tidak ribet harus menulis semua skripnya, jadi jika kita membuat halaman baru nantinya kita tinggal includekan header footer diawal dan diakhir tag skrip kita.

Kemudian untuk formnya kita buat dengan nama vformbarang.php juga di folder application/views

<? $this->load->view('header');?>
<?
if($aksi=='aksi_add'){
   $id="";
    $kode="";
    $nama="";
    $jenis="";
    $harga="";
    $keterangan="";
    $satuan="";
    $stok="";
}else{
  foreach($qdata as $rowdata){
    $id=$rowdata->kode_brg;
    $kode=$rowdata->barcode;
    $nama=$rowdata->nama_brg;
    $jenis=$rowdata->jenis;
    $harga=$rowdata->harga_brg;
    $keterangan=$rowdata->keterangan;
    $satuan=$rowdata->satuan;
    $stok=$rowdata->stok_brg;
  }
}

?>
<div class="container">
      <!-- Main component for a primary marketing message or call to action -->
<div class="panel panel-default">
  <div class="panel-heading"><b>Form Barang</b></div>
  <div class="panel-body">
  <?=$this->session->flashdata('pesan')?>
     <form action="<?=base_url()?>barang/form/<?=$aksi?>" method="post">
       <table class="table table-striped">

         <tr>
          <td style="width:15%;">Kode Barcode</td>
          <td>
            <div class="col-sm-2">
                <input type="hidden" name="id" class="form-control" value="<?=$id?>">
                <input type="text" name="kode" class="form-control" value="<?=$kode?>">
            </div>
            </td>
         </tr>
         <tr>
          <td>Nama Barang</td>
          <td>
            <div class="col-sm-6">
                <input type="text" name="nama" class="form-control" value="<?=$nama?>">
            </div>
            </td>
         </tr>
         <tr>
          <td>Jenis</td>
          <td> <div class="col-sm-5">
          <select name="jenis" required="requreid" class="form-control">
           <option></option>
           <option value="Papan" <? if($aksi=="aksi_edit"){if($jenis=='Papan'){echo"selected=selected";}}?>>Papan</option>
           <option value="Obat" <? if($aksi=="aksi_edit"){if($jenis=='Obat'){echo"selected";}}?>>Obat</option>
           <option value="Kelontong"<? if($aksi=="aksi_edit"){if($jenis=='Kelontong'){echo"selected";}}?>>Kelontong</option>
          </select>
          </div>
          </td>
         </tr>
         <tr>
          <td>Satuan</td>
          <td>
          <div class="col-sm-4">
            <input type="text" name="satuan" class="form-control" value="<?=$satuan?>">
          </div>
          </td>
         </tr>
       <tr>
          <td>Harga Barang</td>
          <td>
           <div class="col-sm-4">
            <input type="text" name="harga" class="form-control" value="<?=$harga?>">
            </div>
           </td>
         </tr>
         <tr>
          <td>Stok</td>
          <td>
            <div class="col-sm-2">
                <input type="text" name="stok" class="form-control" value="<?=$stok?>">
            </div>
            </td>
         </tr>
         <tr>
          <td>Keterangan</td>
          <td>
           <div class="col-sm-6">
            <textarea  name="uraian" class="form-control"><?=$keterangan?></textarea>
           </div>
            </td>
         </tr>
         <tr>
          <td colspan="2">
            <input type="submit" class="btn btn-success" value="Simpan">
            <button type="reset" class="btn btn-default">Batal</button>
          </td>
         </tr>
       </table>
     </form>
        </div>
    </div>    <!-- /panel -->

    </div> <!-- /container -->
<? $this->load->view('footer');?>

pada skrip form diatas sudah tersedia insert dan update. Kita pisahkan berdasarkan kondisi aksi yang dibawa dari controller.

update 4 Juni 2015

script vdetbarang.php simpan di folder aplication/views

<? $this->load->view('header');?>
<?
  foreach($qbarang as $rowdata){
    $id=$rowdata->kode_brg;
    $kode=$rowdata->barcode;
    $nama=$rowdata->nama_brg;
    $jenis=$rowdata->jenis;
    $harga=$rowdata->harga_brg;
    $keterangan=$rowdata->keterangan;
    $satuan=$rowdata->satuan;
    $stok=$rowdata->stok_brg;
  }
?>
    <div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="panel panel-default">
  <div class="panel-heading"><b>Detail Barang</b></div>
  <div class="panel-body">

     <p> <a href="<?=base_url()?>barang" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-repeat"></i> Kembali</a>
     </p>

       <table class="table table-striped">
         <tr>
          <td>Barcode</td>
          <td><?=$kode?></td>
         </tr>
         <tr>
          <td>Nama Barang</td>
          <td><?=$nama?></td>
          </tr>
         <tr>
          <td>Harga Barang</td>
          <td><?=$harga?></td>
          </tr>
         <tr>
          <td>Jenis</td>
          <td><?=$jenis?></td>
          </tr>
         <tr>
          <td>Satuan</td>
          <td><?=$satuan?></td>
          </tr>
         <tr>
          <td>Stok</td>
          <td><?=$stok?></td>
           </tr>
         <tr>
          <td>Keterangan</td>
          <td>
           <?=$keterangan?>
          </td>
         </tr>

       </table>
        </div>
    </div>    <!-- /panel -->

    </div> <!-- /container -->
<? $this->load->view('footer');?>

 

Update 10 Oktober 2016

untuk paging dan pencarian dapat di lihat pada tutorial Membuat Paging dan Search Bootstrap CodeIgniter

 

Tampilan akhir

 

Buat teman teman yang pengen lihat hasilnya bisa dengan klik link dibawah ini.

Postingan Terkait
» Mengganti Dukungan Bahasa Pada Codeigniter 3.xx ( 13 Agu 2017 | 17:08:24 , 85 hits )
» Cetak Laporan Format Excel di Codeigniter ( 25 Jan 2017 | 06:39:12 , 1150 hits )
» Membuat Laporan PDF dengan DomPDF di CodeIgniter ( 04 Nov 2016 | 07:42:55 , 3119 hits )
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 5697 hits )
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 9441 hits )