CRUD Menggunakan Framework CI, Boostrap dan DataTable Part 1 Anton-Sensei IT Solution and Share Knowledge

Sekarang untuk membuat sebuah sistem, kita tidak perlu harus membuat syntax/codingan satu per satu. Sudah banya sekali framework yang bisa kita gunakan dalam membangun sebuat sistem. Salah satunya adalah CI atau CodeIgniter, dimana freamwork ini menggukan metode MVC (Model View Controle). Dengan metode MVC ini, sistem kita akan tersetruktur dengan rapi sesuai kegunaan setiap fungsionaltas sistem tesebut. Dalam hal ini Model berfungsi sebagi jembatan yang berhubungan dengan database. Dimana semua fungsi yang berhubungan dengan database kita buat di dalam model. Sendangkan untuk mehandle masalah tampilan, kita bisa mengunakan View untuk membuat tampilannya.

Nah, untuk tampilan, kita bisa mengkombinasikan antara codeigniter dan Boostrap. dengan menggunakan boostrap, tampilan kita akan lebih menarik dan responsive. Selain itu kita tidak perlu susah paya dalam menentukan design, karenya boostrap sudah menyediakan semuanya. Baik dari css, component dan layoutnya sudah disediakan. Kita tinggal mengambil dari wibsite yang sudah mereka sediankan. Dan dalam tutorail kita kali ini, kita juga akan menggunakan DataTable untuk menampilkan data dari database ke dalam sebuah tabel di dalam layout view kita.

Kemuadian apa fungsi dari Controller?

Sesuai dengan namanya, controller bertugas menghungkan antara model dan view. Dimana setiap fungsi yang ada didalam model dipangil dan datanya akan di tampilkan ke dalam view melalui controller.

Oke, kita langsung saja mulai caranya. Tapi seblum kita mulai, kita siapkan telebih dahulu perlengkapan tempurnya.

1. CodeIgniter

2. Boostrap

3. DataTable

4. MySQL

Setelah semua terisntal langkah permtama adalah dengan membuat databasenya telebih dahulu. Copykan database berikut ke MySQL. Kalo belum paham bagaimana cara membuat database. Bisa lihat disini.

SQLyog Ultimate v11.11 (64 bit)

MySQL - 5.5.5-10.1.10-MariaDB : Database - crud

*********************************************************************

/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;

/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;

/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;

/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

CREATE DATABASE /*!32312 IF NOT EXISTS*/`crud` /*!40100 DEFAULT CHARACTER SET latin1 */;

USE `crud`;

/*Table structure for table `barang` */

DROP TABLE IF EXISTS `barang`;

CREATE TABLE `barang` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`barcode` char(16) NOT NULL,

`nama` varchar(50) DEFAULT NULL,

`satuan` varchar(20) DEFAULT NULL,

`harga` double DEFAULT NULL,

`stok` int(11) DEFAULT NULL,

PRIMARY KEY (`barcode`),

KEY `id` (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=latin1;

/*Data for the table `barang` */

insert into `barang`(`id`,`barcode`,`nama`,`satuan`,`harga`,`stok`) values (1,'1231231414','Celana','PCS',123124141,45),(8,'1231233452423423','Baju','PCS',13123123,243),(2,'12312414','Kemeja','Pack',231413,123),(10,'13124234254','Kaos','PCS',123123124,2324),(3,'131313123','Sepatu','PCS',12321312,12),(11,'13424265634','Kaos Kai','PCS',12414,1414),(4,'144314314144','ada ja','PCS',213214124,12123),(5,'21124215315145','celana pendek','PCS',23223131,24),(6,'2563765438763523','test','PCS',1233113,234),(7,'312546375654','sadffafs','PCS',12312543,213),(9,'346534214235','sfasdfadf','PCS',413143,213),(13,'qqwrqer','wqeqwe','PCS',123123123,12312312);

Lanjut ke tahap selanjutnya yaitu dengan membuat folder latihanCRUD di folder C:\xampp\htdocs\latihanCRUD

Masukan framwork CodeIgniter, Bootsrap dan DataTable sehingga memiliki struktur derektori seperti ini:

Kemudian kita set terlebih dahulu konfigurasi codeigniter-nya.

Buka file config.php yang terdapat di folder Application/config

Ubah settingan seperti dibawah ini:

$config['base_url'] = 'http://localhost:86/latihanCRUD/'; (sesuikan dengan lokasi folder)

Buka file route.php yang terdapat di folder Application/config

$route['default_controller'] = 'barang';

Kemudian kita buat tampilan layoutnya telbih dahulu.

Yang pertama kita buat tampilan yang general, tampilan ini nanti akan kita gunakan di setiap layout pada sistem kita. Yaitu layout untuk Header dan Footer.

Yang pertama kita tambahkan layout header terlebih dahulu, caranya create file header.php di dalam folder Application/View. Copy code php dibawah ini ke dalam file header.php tadi:

<!DOCTYPE html>

<html>

<head>

<title>latihan CRUD</title>

<!--[if lt IE 9]>

<![endif]-->

::selection{ background-color: #E13300; color: white; }

::moz-selection{ background-color: #E13300; color: white; }

::webkit-selection{ background-color: #E13300; color: white; }

body {

background-color: #fff;

//margin: 40px;

padding-top: 65px;

font: 13px/20px normal Helvetica, Arial, sans-serif;

color: #4F5155;

}

th { white-space: nowrap; }

.toolbar {

float: left;

}

a {

color: #003399;

background-color: transparent;

font-weight: normal;

}

h1 {

color: #444;

background-color: transparent;

border-bottom: 1px solid #D0D0D0;

font-size: 19px;

font-weight: normal;

margin: 0 0 14px 0;

padding: 14px 15px 10px 15px;

}

code {

font-family: Consolas, Monaco, Courier New, Courier, monospace;

font-size: 12px;

background-color: #f9f9f9;

border: 1px solid #D0D0D0;

color: #002166;

display: block;

margin: 14px 0 14px 0;

padding: 12px 10px 12px 10px;

}

#nav{

margin: 0 auto 0 auto;

//width: 80%;

background-color:#A3D900;

//height: 35px;

padding: 0;

//border-style:solid;

//border-width:1px;

//border-color:#FFA64C;

}

#nav ul{

list-style:none;

float:left;

margin: 0 0;

}

#nav ul li{

display: inline;

}

#body{

margin: 0 15px 0 15px;

}

p.footer{

text-align: right;

font-size: 11px;

border-top: 1px solid #D0D0D0;

line-height: 32px;

padding: 0 10px 0 10px;

margin: 20px 0 0 0;

}

#container{

margin: 10px;

border: 1px solid #D0D0D0;

-webkit-box-shadow: 0 0 8px #D0D0D0;

}

#container-detail{

margin: 5px;

//border: 1px solid #D0D0D0;

//-webkit-box-shadow: 0 0 8px #D0D0D0;

}

.table tr {

margin-top:5px;

max-height: 5px; }

@media (max-width: 768px) {

.btn-responsive {

padding:2px 4px;

font-size:0%;

line-height: 1;

border-radius:3px;

}

.glyphicon-chevron-right {transform:scale(2.9,2.9);}

}

@media (min-width: 769px) and (max-width: 992px) {

.btn-responsive {

padding:4px 9px;

font-size:0%;

line-height: 1.2;

}

</style>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Latihan WEB</a>

</div>

<li><a href="<?=base_url()?>barang"><i class="glyphicon glyphicon-th"></i> Barang</a></li>

</ul>

</div>

</div>

</nav>

My Panel

</a>

01919115<br/>

Antonius Junaidi<br/>

</div>

</a>

Employ'S Birthday<br/>

<tr>

</tr>

<tr>

<th >Antonius</th>

</tr>

</table>

</div>

</a>

</div>

New Task

</a>

Approval <span class="badge">10</span>

</button>

</a>

Messages <span class="badge">5</span>

</button>

</a>

New Entry <span class="badge">7</span>

</button>

</a>

</div>

Langkah selanjutnya buat file footer.php di dalam folder Application/View. Copy code php dibawah ini ke dalam file tesebut:

<!-- </td>

</tr>

</table> -->

</div>

<li><a href="#">Terms of Service</a></li>

<li><a href="#">Privacy</a></li>

</ul>

</div>

</body>

</html>

Dan selanjutnya kita buat halaman editor buat barang.php, dan kemudian copy code dibawah ini ke dalam file tesebut:

<button class="btn btn-success" onclick="add_barang()"><i class="glyphicon glyphicon-plus"></i> Add Barang</button>

<br />

<thead>

<tr>

<th style="width:60px;">Barcode</th>

<th style="width:190px;">Nama Barang</th>

<th style="width:60px;">Satuan</th>

<th style="width:45px;">Harga</th>

<th style="width:80px;">Action</th>

</tr>

</thead>

<!--<tfoot>

<tr>

<th colspan="3" style="text-align:right">Total:</th>

</tr>

</tfoot>-->

</tbody>

</table>

</div>

function add_barang()

{

$('#form')[0].reset(); // reset form on modals

$('#modal_form').modal('show'); // show bootstrap modal

$('.modal-title').text('Add barang'); // Set Title to Bootstrap modal title

}

function hanyaAngka(e, decimal) {

var key;

var keychar;

if (window.event) {

key = window.event.keyCode;

} else

if (e) {

key = e.which;

} else return true;

keychar = String.fromCharCode(key);

if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) ) {

return true;

} else

if ((("0123456789").indexOf(keychar) > -1)) {

return true;

} else

if (decimal && (keychar == ".")) {

return true;

} else return false;

}

</script>

<h3 class="modal-title">From Data Barang</h3>

</div>

<label class="control-label col-md-3">Barcode</label>

</div>

<label class="control-label col-md-3">Nama Barang</label>

</div>

<label class="control-label col-md-3">Satuan</label>

<option value="Lusin">Lusin</option>

</select>

</div>

<label class="control-label col-md-3">Harga</label>

</div>

</div>

</form>

</div>

<button type="button" class="btn btn-danger glyphicon glyphicon-remove" data-dismiss="modal"> Cancel</button>

</div>

</div>

</div>

</div>

Jangan lupa menambahkan Jquery untuk show pop up form modalnya. Untuk jQuerynya bisa di download disini. https://drive.google.com/drive/folders/0BwxNYTynfoftMUljRjM4dFV1Mm8

Letakan jQuery yang sudah download ke dalam file assets/jQuery.

Dan yang terakhir, buat controller barang.php di forlder application/controller dan masukan script dibawah ini:

<?php

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

class Barang extends CI_Controller {

public function __construct()

{

parent::__construct();

}

public function index()

{

$this->load->helper('url');

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

$this->load->view('barang');

$this->load->view('footer');

}

Jika sudah, coba jalankan sistemnya menggunakan browser. Dengan mengetik: http://localhost/latihanCRUD/

Dan hasilnya akan seperti ini:

SELAMAT MENCOBA J

About sadf

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.