di Tutorial sebelumnya kita sudah membuat Database dan Model, pada tutorial kali ini kita lanjutkan di pembuatan Controller dan View untuk Tabel Kelas, Tabel Jurusan dan Tabel Siswa, namun sebelum itu kita fahami dulu apa itu view dan apa itu controller
Pengertian View
View adalah salah satu komponen yang terdapa dalam MVC, View sifatnya digunakan untuk menampilkan suatu data pada halaman web atau fragmenet halaman, seperti header, footer, sidebar, dll. pada umumnya ciri-ciri view di dalamnya terdapat code html, css, javascript
Pengertian Controller
Apa sih Controller itu? controller merupakan sebuah file class yang dipanggil melalui URL, agar lebih mudah memahami silahkan lihat contoh berikut :
misalnya anda membuka url https://semarsoft.com/index.php/Kelas,
CodeIgniter akan mencoba menemukan controller bernama Kelas.php dan memuatnya, pada saat file controller Kelas.php cocok dengan segment pertama URL, maka controller tersebut akan diproses,
Kenapa kita membutuhkan Controller, perlu diingat bahwa View tidak pernah dipanggil secara langsung, View harus dipanggil menggunakan Controller. Ingatlah bahwa dalam kerangka kerja MVC, Controller bertindak sebagai Pengendali atau pengatur lalu lintas, kalau di kehidupan sehari – hari mirip sama polisi lalu lintas š , jadi bertanggung jawab untuk mengambil view tertentu.
Agar tidak makin bingung silahkan mencoba studi kasus berikut ini
Studi Kasus
Tabel Kelas
Membuat Controller Kelas
Buat File Controller dengan nama Kelas.php, perlu diingat penamaan file harus diawali dengan huruf awalĀ CAPITAL begitu pula dengan nama classnya. Lokasi file controller berada pada direktoriĀ application/controller.
Pada file Kelas.php tambahkan kode berikut pada text editor
<?php class Kelas extends CI_Controller { function __construct() { //construct akan dipanggil otomatis ketika Controller ini dipanggil parent::__construct(); $this->load->model('Crud'); //baris ini digunakan untuk //memanggil Class Crud di model Crud.php } public function index() { //menyimpan data di tb_kelas kedalam array dengan nama 'kelas' //$this->Crud->tampilData -> //perintah ini digunakan untuk menampilkan data dari tabel // tampilData berapa di dalam model Crud.php $data['kelas'] = $this->Crud->tampilData('tb_kelas')->result(); $this->template->load('layouts/template', 'vKelas', $data); } public function tambahAksi() { //menyimpan post name='Nama' //yang ada di View ke dalam variabel nama_kelas $nama_kelas = $this->input->post('Nama'); $data = array( 'nama_kelas' => $nama_kelas, //menyimpan data di variabel nama_kelas //ke dalam kolom nama_kelas ); $this->Crud->inputData($data, 'tb_kelas'); redirect('Kelas/index'); } public function hapus($idKelas) { $where = array('id_kelas' => $idKelas); $this->Crud->hapusData($where, 'tb_kelas'); redirect('Kelas/index'); } public function edit($idKelas) { $where = array('id_kelas' => $idKelas); $data['kelas'] = $this->Crud->editData($where, 'tb_kelas')->result(); $this->template->load('layouts/template', 'editKelas', $data); } public function update() { $id_kelas = $this->input->post('idKelas'); $nama_kelas = $this->input->post('Nama'); $data = array( 'nama_kelas' => $nama_kelas, ); $where = array( 'id_kelas' => $id_kelas ); $this->Crud->updateData($where, $data, 'tb_kelas'); redirect('Kelas/index'); } }
Dapat dilihat padaĀ fungsi __construct()Ā berisi kodeĀ $this->load->model(āCrudā); ini artinya kita memanggil model Crud secara otomatis ketika Controller dijalankanm, model Crud ini dapat digunakan disemua tabel, jadi kita tidak perlu membuat model utnuk setiap tabel.
Membuat View Kelas
Langkah berikutnya, buat sebuah file View dengan nama vKelas.php kemudian isi dengan coding berikut ini
<div class="content-wrapper"> <section class="content"> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <i class="fa fa-table"></i>Input Data Kelas </div> <form method="post" action="<?= base_url() . 'index.php/Kelas/tambahAksi' ?>"> <div class="form-group"> <label>Nama Kelas</label> <input type="text" name="Nama" class="form-control" required="true"> </div> <button type="reset" class="btn btn-danger" data-dismiss="modal">Reset</button> <button type="submit" class="btn btn-primary">Simpan</button> </form> </div> </div> <div class="col-md-12"> <br> <div class="panel panel-primary"> <div class="panel-heading"> <i class="fa fa-table"></i> Data Kelas </div> <!-- /.panel-heading --> <div class="panel-body"> <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example"> <thead> <tr> <th>NO</th> <th>Nama Kelas</th> <th colspan="2">Action</th> </tr> </thead> <?php $no = 1; foreach ($kelas as $kls) : ?> <tr> <td><?= $no++ ?></td> <td><?= $kls->nama_kelas ?></td> <?php $onclick = array('onclick' => "javascript:return confirm('Anda Yakin Akan Menghapus?')") ?> <td> <?= anchor('Kelas/edit/' . $kls->id_kelas, '<button class="btn btn-warning">Edit</button>') ?> <?= anchor('Kelas/hapus/' . $kls->id_kelas, '<button class="btn btn-danger">Hapus</button>', $onclick) ?></td> </tr> <?php endforeach; ?> </table> </div> </div> </div> </div> </section> </div>
Perhatikan View Kelas diatas, kita tidak perlu menginputkan baris Header, Title, Sidebar, Footer dan yang lainnya, karena file-file tersebut sudah berada di template, sehingga tidak perlu dipanggil lagi di tiap-tiap viewnya
Membuat View Edit Kelas
Langkah berikutnya, buat sebuah file View dengan nama editKelas.php kemudian isi dengan coding berikut ini
<div class="content-wrapper"> <section class="content"> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <i class="fa fa-table"></i>Edit Data Kelas </div> <?php foreach ($kelas as $kls) : ?> <form action="<?= base_url() . 'index.php/Kelas/update'; ?>" method="post"> <div class="form-group"> <label>Nama Kelas</label> <input type="hidden" name="idKelas" class="form-control" value="<?= $kls->id_kelas ?>"> <input type="text" name="Nama" class="form-control" value="<?= $kls->nama_kelas ?>"> </div> <?php $onclick = array('onclick' => "javascript:return confirm('Anda Yakin Akan Ingin Kembali? Data Yang Sudah di Isi Akan Terhapus.')") ?> <?= anchor('Kelas', '<button class="btn btn-danger">Kembali</button>', $onclick) ?> <!-- <button class="btn btn-danger">Kembali</button> --> <button type="submit" class="btn btn-success">Simpan</button> </form> <?php endforeach; ?> </div> </div> </div> </section> </div>
Tabel Jurusan
Membuat Controller Jurusan
Buat File Controller dengan nama Jurusan.php, kemudian isikan dengan coding berikut ini
<?php class Jurusan extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('Crud'); } public function index() { $data['jurusan'] = $this->Crud->tampilData('tb_jurusan')->result(); $this->template->load('layouts/template', 'vJurusan', $data); } public function tambahAksi() { $this->form_validation->set_rules('nama_jurusan', 'Nama Jurusan', 'required'); $this->form_validation->set_rules('singkatan', 'Singkatan', 'required'); $nama_jurusan = $this->input->post('Nama'); $singkatan = $this->input->post('Singkatan'); $data = array( 'nama_jurusan' => $nama_jurusan, 'singkatan' => $singkatan ); $this->Crud->inputData($data, 'tb_jurusan'); redirect('Jurusan/index'); } public function hapus($idJurusan) { $where = array('id_jurusan' => $idJurusan); $this->Crud->hapusData($where, 'tb_jurusan'); redirect('Jurusan/index'); } public function edit($idJurusan) { $where = array('id_jurusan' => $idJurusan); $data['jurusan'] = $this->Crud->editData($where, 'tb_jurusan')->result(); $this->template->load('layouts/template', 'editJurusan', $data); } public function update() { $idJurusan = $this->input->post('idJurusan'); $namaJurusan = $this->input->post('Nama'); $singkatan = $this->input->post('Singkatan'); $data = array( 'nama_jurusan' => $namaJurusan, 'singkatan' => $singkatan ); $where = array( 'id_jurusan' => $idJurusan ); $this->Crud->updateData($where, $data, 'tb_jurusan'); redirect('Jurusan/index'); } }
Membuat View Jurusan
Langkah berikutnya, buat sebuah file View dengan nama vJurusan.php kemudian isi dengan coding berikut ini
<div class="content-wrapper"> <section class="content"> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <i class="fa fa-table"></i>Input Data Jurusan </div> <form method="post" action="<?= base_url() . 'index.php/Jurusan/tambahAksi' ?>"> <div class="form-group"> <label>Nama Jurusan</label> <input type="text" name="Nama" class="form-control" required="true"> </div> <div class="form-group"> <label>Singkatan</label> <input type="int" name="Singkatan" class="form-control" required="true"> </div> <button type="reset" class="btn btn-danger" data-dismiss="modal">Reset</button> <button type="submit" class="btn btn-primary">Simpan</button> </form> </div> </div> <div class="col-md-12"> <br> <div class="panel panel-primary"> <div class="panel-heading"> <i class="fa fa-table"></i> Data Jurusan </div> <!-- /.panel-heading --> <div class="panel-body"> <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example"> <thead> <tr> <th>NO</th> <th>Nama Jurusan</th> <th>Singkatan</th> <th colspan="2">Action</th> </tr> </thead> <?php $no = 1; foreach ($jurusan as $jrs) : ?> <tr> <td><?= $no++ ?></td> <td><?= $jrs->nama_jurusan ?></td> <td><?= $jrs->singkatan ?></td> <?php $onclick = array('onclick' => "javascript:return confirm('Anda Yakin Akan Menghapus?')") ?> <td> <?= anchor('Jurusan/edit/' . $jrs->id_jurusan, '<button class="btn btn-warning">Edit</button>') ?> <?= anchor('Jurusan/hapus/' . $jrs->id_jurusan, '<button class="btn btn-danger">Hapus</button>', $onclick) ?></td> </tr> <?php endforeach; ?> </table> </div> </div> </div> </section> </div>
Membuat Edit Jurusan
Langkah berikutnya, buat sebuah file View dengan nama editJurusan.php kemudian isi dengan coding berikut ini
<div class="content-wrapper"> <section class="content"> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <i class="fa fa-table"></i>Edit Data Jurusan </div> <?php foreach ($jurusan as $jrs) : ?> <form action="<?= base_url() . 'index.php/Jurusan/update'; ?>" method="post"> <div class="form-group"> <label>Nama Jurusan</label> <input type="hidden" name="idJurusan" class="form-control" value="<?= $jrs->id_jurusan ?>"> <input type="text" name="Nama" class="form-control" value="<?= $jrs->nama_jurusan ?>"> </div> <div class="form-group"> <label>Singkatan</label> <input type="text" name="Singkatan" class="form-control" value="<?= $jrs->singkatan ?>"> </div> <?php $onclick = array('onclick' => "javascript:return confirm('Anda Yakin Akan Ingin Kembali? Data Yang Sudah di Isi Akan Terhapus.')") ?> <?= anchor('Jurusan', '<button class="btn btn-danger">Kembali</button>', $onclick) ?> <!-- <button class="btn btn-danger">Kembali</button> --> <button type="submit" class="btn btn-success">Simpan</button> </form> <?php endforeach; ?> </div> </div> </div> </section> </div>
Tabel Siswa
Membuat Controller Siswa
<?php defined('BASEPATH') or exit('No direct script access allowed'); class Siswa extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('Crud'); } public function index() { $data['siswa'] = $this->Crud->tampilData('vSiswa')->result(); $data['jurusan'] = $this->Crud->tampilData('tb_jurusan')->result(); $data['kelas'] = $this->Crud->tampilData('tb_kelas')->result(); $this->template->load('layouts/template', 'vSiswa', $data); } public function tambahAksi() { $data = array( "nama" => $_POST['nama_siswa'], "nisn" => $_POST['nisn'], "jk" => $_POST['jk'], "id_kelas" => $_POST['id_kelas'], "id_jurusan" => $_POST['id_jurusan'] ); $this->Crud->inputData($data, 'tb_siswa'); $this->session->set_flashdata('sukses', "Data Berhasil Disimpan"); redirect('Siswa'); } public function update() { $idSiswa = $this->input->post('id_siswa'); $namaSiswa = $this->input->post('edit_nama'); $nisn = $this->input->post('edit_nisn'); $jk = $this->input->post('edit_jk'); $id_kelas = $this->input->post('edit_id_kelas'); $id_jurusan = $this->input->post('edit_id_jurusan'); $data = array( "nama" => $namaSiswa, "nisn" => $nisn, "jk" => $jk, "id_kelas" => $id_kelas, "id_jurusan" => $id_jurusan, ); $where = array( "id_siswa" => $idSiswa ); $this->Crud->updateData($where, $data, 'tb_siswa'); redirect('Siswa'); } public function hapus($id) { $where = array('id_siswa' => $id); $this->Crud->hapusData($where, 'tb_siswa'); redirect('Siswa'); } public function cari() { $data2['siswa'] = $this->Crud->cari("nama","vSiswa"); $this->template->load('layouts/template', 'vSiswa', $data2); } }
Membuat View Siswa
<div class="content-wrapper"> <section class="content"> <?php $data = $this->session->flashdata('sukses'); if ($data != "") { ?> <div id="notifikasi" class="alert alert-success"><strong>Sukses! </strong> <?= $data; ?></div> <?php } ?> <?php $data2 = $this->session->flashdata('error'); if ($data2 != "") { ?> <div id="notifikasi" class="alert alert-danger"><strong> Error! </strong> <?= $data2; ?></div> <?php } ?> <!-- /.row --> <div class="row"> <div class="col-lg-12"> <div class="panel panel-primary"> <div class="panel-heading"> <i class="fa fa-table"></i> Data Siswa </div> <div class="box-tools"> <!-- /.panel-heading --> <div class="panel-body"> <nav class="navbar navbar-light bg-light justify-content-between"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-tambah"><i class="fa fa-plus-circle"></i> Tambah Siswa</button> <form action="<?php echo base_url('index.php/Siswa/cari')?>" method="GET" class="form-inline pull-right"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="cari" name="cari"> <button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button> </form> </nav> <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example"> <thead> <tr> <th>No</th> <th>Nama</th> <th>NISN</th> <th>Jenis Kelamin</th> <th>Kelas</th> <th>Jurusan</th> <th>Aksi</th> </tr> </thead> <tbody> <?php $no = 1; foreach ($siswa as $row) : ?> <tr class="odd gradeX"> <td><?php echo $no++; ?></td> <td><?php echo $row->nama; ?></td> <td><?php echo $row->nisn; ?></td> <td><?php echo $row->jk; ?></td> <td><?php echo $row->nama_kelas; ?></td> <td><?php echo $row->nama_jurusan; ?></td> <td> <center> <div class="tooltip-demo"> <a data-toggle="modal" data-target="#modal-edit<?= $row->id_siswa; ?>" class="btn btn-warning btn-circle" data-popup="tooltip" data-placement="top" title="Edit Data"><i class="fa fa-pencil"></i></a> <a href="<?php echo base_url('index.php/Siswa/hapus/' . $row->id_siswa); ?>" onclick="return confirm('Apakah Anda Ingin Menghapus Data <?= $row->nama; ?> ?');" class="btn btn-danger btn-circle" data-popup="tooltip" data-placement="top" title="Hapus Data"><i class="fa fa-trash"></i></a> </div> </center> </td> </tr> <?php endforeach; ?> </tbody> </table> <!-- /.table-responsive --> </div> </div> </div> </div> </div> </div> <div id="modal-tambah" class="modal fade"> <div class="modal-dialog"> <form action="<?php echo site_url('Siswa/tambahAksi'); ?>" method="post"> <div class="modal-content"> <div class="modal-header bg-primary"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Tambah Data</h4> </div> <br> <div class="modal-body"> <div class="form-group"> <label class='col-md-3' for="nama_siswa">Nama Siswa</label> <div class='col-md-9'> <input type="text" name="nama_siswa" id="nama_siswa" autocomplete="off" required placeholder="Masukkan Nama Lengkap" class="form-control"> </div> </div> </div> <div class="modal-body"> <div class="form-group"> <label class='col-md-3' for="nisn">NISN</label> <div class='col-md-9'> <input type="text" name="nisn" id="nisn" autocomplete="off" required placeholder="Masukkan NISN" class="form-control"> </div> </div> </div> <div class="modal-body"> <div class="form-group"> <label class='col-md-3' for="nisn">Jenis Kelamin</label> <div class='col-md-9'> <select class="form-control" name="jk" id="jk"> <option value="">Pilih JK</option> <option value="L">Laki-Laki</option> <option value="P">Perempuan</option> </select> </div> </div> </div> <div class="modal-body"> <div class="form-group"> <label class='col-md-3' for="kelas">Kelas</label> <div class='col-md-9'> <!-- <input type="text" name="kelas" id="kelas" class="form-control" autocomplete="off" required placeholder="Masukkan Kelas"> --> <select class="form-control" name="id_kelas" id="id_kelas"> <option value="">Pilih Kelas</option> <?php foreach ($kelas as $k) : ?> <option value="<?= $k->id_kelas ?>"> <?= $k->nama_kelas; ?> </option> <?php endforeach; ?> </select> </div> </div> </div> <div class="modal-body"> <div class="form-group"> <label class='col-md-3' for="jurusan">Jurusan</label> <div class="col-md-9"> <select class="form-control" name="id_jurusan" id="id_jurusan"> <option value="">Pilih Jurusan</option> <?php foreach ($jurusan as $j) : ?> <option value="<?= $j->id_jurusan ?>"> <?= $j->nama_jurusan; ?> </option> <?php endforeach; ?> </select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary"><i class="icon-checkmark-circle2"></i> Simpan</button> </div> </form> </div> </div> </div> <!-- /#page-wrapper --> <?php $no = 0; foreach ($siswa as $row) : $no++; ?> <div class="row"> <div id="modal-edit<?= $row->id_siswa; ?>" class="modal fade"> <div class="modal-dialog"> <form action="<?php echo site_url('Siswa/update'); ?>" method="post"> <div class="modal-content"> <div class="modal-header bg-primary"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Edit Data</h4> </div> <div class="modal-body"> <input type="hidden" readonly value="<?= $row->id_siswa; ?>" name="id_siswa" class="form-control"> <div class="form-group"> <label class='col-md-3'>Nama Siswa</label> <div class='col-md-9'><input type="text" name="edit_nama" autocomplete="off" value="<?= $row->nama; ?>" required placeholder="Masukkan Nama Lengkap" class="form-control"></div> </div> </div> <div class="modal-body"> <div class="form-group"> <label class='col-md-3'>NISN</label> <div class='col-md-9'><input type="text" name="edit_nisn" autocomplete="off" value="<?= $row->nisn; ?>" required placeholder="Masukkan NISN" class="form-control"></div> </div> </div> <div class="modal-body"> <div class="form-group"> <label class='col-md-3' for="kelas">Jenis Kelamin</label> <div class="col-md-9"> <select name="edit_jk" id="edit_jk" class="form-control"> <option value="">Pilih Jenis Kelamin</option> <option <?php if($row->jk=='L'){echo "selected"; } ?> value="L">Laki-Laki</option> <option <?php if($row->jk=='P'){echo "selected"; } ?> value="P">Perempuan</option> </select> </div> </div> </div> <div class="modal-body"> <div class="form-group"> <label class='col-md-3' for="kelas">Kelas</label> <div class="col-md-9"> <select name="edit_id_kelas" id="edit_id_kelas" class="form-control"> <option value="">Pilih Kelas</option> <?php foreach ($kelas as $row_kelas => $data) : ?> <option <?= ($data->nama_kelas == $row->nama_kelas ? 'selected=""' : '') ?> value="<?= $data->id_kelas ?>"><?= $data->nama_kelas ?></option> <?php endforeach; ?> </select> </div> </div> </div> <div class="modal-body"> <div class="form-group"> <label class='col-md-3' for="jurusan">Jurusan</label> <div class="col-md-9"> <select name="edit_id_jurusan" id="edit_id_jurusan" class="form-control"> <option value="">Pilih Jurusan</option> <?php foreach ($jurusan as $row_jurusan => $data) : ?> <option <?= ($data->nama_jurusan == $row->nama_jurusan ? 'selected=""' : '') ?> value="<?= $data->id_jurusan ?>"><?= $data->nama_jurusan ?></option> <?php endforeach; ?> </select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-warning"><i class="icon-pencil5"></i> Edit</button> </div> </form> </div> </div> </div> <?php endforeach; ?>