Membuat aplikasi CRUD (Create Reate Update Delete) pada codeigniter menjadi topik tutorial hari ini, akan tetapi teman-teman pada pembahasan ini kita akan mengkhususkan dulu bagaimana membuat tampilan view input data dan controllernya pada tutorial codeigniter part #3 kali ini.
Oke teman-teman, sebelumnya tidak ada salahnya kita flashback sedikit kebelakang yaitu, kita perlu merapikan template Gentelella Alela! yang sudah berhasil kita integrasikan pada pembahasan integrasi template pada codeigniter part #1. Nah disini kita akan membuat menu dan memisahkan halaman konten dari file templatenya sehingga nantinya mudah untuk kita panggil ketika akan kita gunakan dan bersifat dinamis antara konten menu satu dengan konten menu lainnya.
Untuk membuat menu kita akan rubah tag html pada file views/dashborad/template.php pada baris sehingga menjadi seperti berikut ini, dan hilangkan apa yang tidak diperlukan.
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a href="<?php echo base_url('/');?>"><i class="fa fa-home"></i> Home </a></li>
<li><a><i class="fa fa-pencil-square-o"></i> CRUD <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="<?php echo base_url('crud/siswa');?>">Data Siswa</a></li>
<li><a href="<?php echo base_url('crud/kelas');?>">Kelas</a></li>
</ul>
</li>
<li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="">Grafik</a></li>
</ul>
</li>
</ul>
</div>Tahap selanjutnya adalah, kita perlu memisahkan file konten pada file template.php sehingga nantinya bersifat dinamis untuk dipanggil, oke langsung saja kita menuju tag html pada file template.php pada baris tag seperti berikut ini:
<!-- page content -->
<div class="right_col" role="main">Ubahlah menjadi seperti berikut
<!-- page content -->
<div class="right_col" role="main">
<?php $this->load->view($content);?>
</div>
<!-- /page content -->kemudian salinlah tag yang kita potong dan simpan menjadi file konten.php dan simpanlah pada folder views/dashboard sehingga strukturnya menjadi seperti ini views/dashboard/konten.php.
Tahap selnjutnya adalah kita perlu menambahkan beberapa perubahan pada file controller Welcome.php pada baris perintah public function index() ubahlah menjadi seperti berikut ini :
public function index()
{
$data = array();
$data['content'] = 'dashboard/konten';
$this->load->view('dashboard/template', $data);
}Oke teman-teman sampai tahap ini kita sudah berhasil membuat menu dan memisahkan file konten dari file template.
Membuat CRUD Codeigniter, Input Data
Teman-teman sekarang sudah saatnya kita membahas CRUD Input Data codeigniter, mari kita buatkan satu buah file view dan beri nama kelas.php dan simpanlah pada folder views sehingga membentuk struktur seperti views/crud/kelas.php. Dan berikut ini adalah isi dari file view kelas.php
<div class="">
<div class="page-title">
<div class="title_right">
<div class="col-md-12 col-sm-12 col-xs-12 form-group pull-right top_search">
<h3><?php echo (!empty($title)?$title:'');?></h3>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<button class="btn btn-success" data-toggle="modal" data-target=".modal-add" ><i class="fa fa-plus"></i> Tambah</button>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th width="10px">No.</th>
<th>Kelas</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php echo $table;?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Sampai tahap ini kita telah berhasil membuat tampilan konten CRUD Input Data di codeigniter, dan mari kita buatkan formnya, nah disini kita akan menggunakan modal nya boostrap teman-teman, berikut adalah tag hatml untuk form input data kelas teman-teman :
<div class="modal fade bs-example-modal-lg modal-add" id="modal_add" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span>
</button>
<h4 class="modal-title" id="myModalLabel">Tambah Data</h4>
</div>
<div class="modal-body">
<form class="form-horizontal form-label-left" name="frm_add" id="frm_add" method="POST" action='<?php echo base_url()."crud/simpan_kelas"; ?>'>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Kelas</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input class="form-control" name="kelas" id="kelas" required="required" >
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-10 col-sm-10 col-xs-12 col-md-offset-10">
<button type="submit" class="btn btn-success">Simpan</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>Simpanlah tag form html diatas menjadi satu pada file view kelas.php sehingga strukturnya menjadi seperti berikut:
<div class="">
<div class="page-title">
<div class="title_right">
<div class="col-md-12 col-sm-12 col-xs-12 form-group pull-right top_search">
<h3><?php echo (!empty($title)?$title:'');?></h3>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<button class="btn btn-success" data-toggle="modal" data-target=".modal-add" ><i class="fa fa-plus"></i> Tambah</button>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th width="10px">No.</th>
<th>Kelas</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php echo $table;?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- modal -->
<div class="modal fade bs-example-modal-lg modal-add" id="modal_add" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span>
</button>
<h4 class="modal-title" id="myModalLabel">Tambah Data</h4>
</div>
<div class="modal-body">
<form class="form-horizontal form-label-left" name="frm_add" id="frm_add" method="POST" action='<?php echo base_url()."crud/simpan_kelas"; ?>'>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Kelas</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input class="form-control" name="kelas" id="kelas" required="required" >
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-10 col-sm-10 col-xs-12 col-md-offset-10">
<button type="submit" class="btn btn-success">Simpan</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>Sampai sini kita telah berhasil membuat form input data kelas, tahap selanjutnya adalah kita perlu membuatkan controller nya, nah sekarang mari kita buatkan satu buah controller dan kita simpan dengan nama Crud.php dan simpanlah pada folder controllers. Dan berikut ini adalah isi dari file controller Crud.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Crud extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
$this->kelas();
}
public function kelas()
{
$data = array();
$data['title'] ='Data Kelas CRUD (Create Read Update Delete Kelas)';
$sql ="SELECT * from tbl_kelas order by id_kelas ASC";
$hsl = $this->db->query($sql);
$data['table'] = '<tr>
<td></td>
<td></td>
<td></td>
</tr>';
$data['content'] = 'crud/kelas';
$this->load->view('dashboard/template',$data);
}
}Teman-teman semua sampai tahap ini kita akhirnya telah berhasil membuat kontroller dan view CRUD Input Data codeigniter, teman-teman bisa coba klik menu pada menu CRUD -> Kelas, maka akan ditampilkan halaman seperti berikut, dan jika kita klik tombol tambah maka akan ditampilkan modal form input data kelas.
Oke teman-teman semua semoga sukses yah membuat tampilan CRUD nya kali ini, tahap selanjutnya adalah kita akan membahas bagaiman membuat tbl_kelas di database MySQL dan sekalian saja kita akan bahas disana bagaimana menyimpan datanya dengan teknik codeigniter, oke teman-teman untuk pembahasan kali ini saya batasi sampai disini, semoga tutorial kali ini dapat memebantu dan bermanfaat untuk teman-teman semua (CMIIW). Terimakasih…
