CRUD Menggunakan Framework CI, Boostrap dan DataTable Part 1
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.phpyang terdapat di folder Application/config
Ubah settingan seperti dibawah ini:
$config['base_url'] = 'http://localhost:86/latihanCRUD/'; (sesuikan dengan lokasi folder)
Buka file route.phpyang 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>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>latihan CRUD</title>
<link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css')?>" rel="stylesheet">
<link href="<?php echo base_url('assets/Header.css')?>" rel="stylesheet">
<link href="<?php echo base_url('assets/datatables/css/dataTables.bootstrap.css')?>" rel="stylesheet">
<link href="<?php echo base_url('assets/datatables/css/jquery.dataTables.min.css')?>" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
::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>
<!-- Static navbar -->
<!--<div id="header">-->
<nav class="navbar text-center navbar-inverse navbar-fixed-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="#">Latihan WEB</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>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="panel panel-primary">
<a class="list-group-item active">
My Panel
</a>
<a class="list-group-item">
01919115<br/>
Antonius Junaidi<br/>
<div class="row">
<div class="col-xs-6 col-md-3">
<img src="..." alt="...">
</div>
</div>
</a>
<a class="list-group-item">
Employ'S Birthday<br/>
<div class="row">
<table class="table table-compact table-striped table-bordered table-hover" cellspacing="0" width="100px" >
<tr>
<th style="width:5px;">NIK</th>
<th >Nama</th>
</tr>
<tr>
<th style="width:5px;">001</th>
<th >Antonius</th>
</tr>
</table>
</div>
</a>
</div>
<div class="panel panel-primary">
<a class="list-group-item active">
New Task
</a>
<a class="list-group-item">
<button class="btn btn-success btn-responsive" type="button">
Approval <span class="badge">10</span>
</button>
</a>
<a class="list-group-item">
<button class="btn btn-warning btn-responsive" type="button">
Messages <span class="badge">5</span>
</button>
</a>
<a class="list-group-item">
<button class="btn btn-danger btn-responsive" type="button">
New Entry <span class="badge">7</span>
</button>
</a>
</div>
</div>
<div class="col-md-10">
<div class="panel panel-primary">
Langkah selanjutnya buat file footer.php di dalam folder Application/View. Copy code php dibawah ini ke dalam file tesebut:
<!-- </td>
</tr>
</table> -->
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills nav-justified">
<li><a href="/">© 2013 Antonius Junaidi PT.</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</div>
</div>
</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 />
<br />
<table id="table" class="table table-striped table-bordered table-hover " cellspacing="0" width="100%">
<thead>
<tr>
<th style="width:5px;">No.</th>
<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:40px;">Stok</th>
<th style="width:80px;">Action</th>
</tr>
</thead>
<!--<tfoot>
<tr>
<th colspan="3" style="text-align:right">Total:</th>
<th colspan="3" ></th>
</tr>
</tfoot>-->
<tbody style="margin-top:5px; font-size: 9pt;">
</tbody>
</table>
</div>
</div>
<script src="<?php echo base_url('assets/jquery/jquery-2.1.4.min.js')?>"></script>
<script src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js')?>"></script>
<script src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js')?>"></script>
<script src="<?php echo base_url('assets/datatables/js/dataTables.bootstrap.js')?>"></script>
<script type="text/javascript">
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>
<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">From Data Barang</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Barcode</label>
<div class="col-md-9">
<input name="barcode" placeholder="First Name" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Nama Barang</label>
<div class="col-md-9">
<input name="nama" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Satuan</label>
<div class="col-md-9">
<select name="satuan" class="form-control">
<option value="PCS">PCS</option>
<option value="Rim">Rim</option>
<option value="Pack">Pack</option>
<option value="Dus">Dus</option>
<option value="Lusin">Lusin</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Harga</label>
<div class="col-md-9">
<input name="harga" onkeypress="return hanyaAngka(event, false)" placeholder="Harga(masukan angka)"class="form-control"></input>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Stok</label>
<div class="col-md-9">
<input name="stok" onkeypress="return hanyaAngka(event, false)" placeholder="Stok(masukan angka)" class="form-control" type="text">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-success glyphicon glyphicon-floppy-save" > Save</button>
<button type="button" class="btn btn-danger glyphicon glyphicon-remove" data-dismiss="modal"> Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->
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
0 Response to "CRUD Menggunakan Framework CI, Boostrap dan DataTable Part 1"
Post a Comment