Controller CodeIgniter

Kita harus menggunakan projek yang lama pada tutorial-tutorial sebelumnya untuk kita lanjutkan. Tutorial kali ini mengenai controller CI yang merupakan kelanjutan dari tutorial-tutorial sebelumnya. 

1. Pengenalan CodeIgniter
2. Konfigurasi CodeIgniter
3. Model CodeIgniter
4. View CodeIgniter

CodeIgniter menggunakan metode MVC (Model, View, Controller) agar kode yang dibuat tidak campur aduk dan mudah dibaca ulang dan terhindar dari kesalahan. Controller dapat dilihat dari link sebuah website.

localhost/belajarcodeigniter/mahasiswa/edit/123

[1] mahasiswa=>Controller

[2] edit=>method/fungsi

[3] 123=>parameter

Catatan: tidak semua controller menggunakan parameter

Contoller pada url di atas adalah mahasiswa sedangkan edit adalah method dan 123 adalah parameter. Untuk parameter tidak sering digunakan.

Didalam tutorial CRUD dengan native PHP sebelumnya kita masih ingat bagaimana mengontrol halaman yang tampil ketika menu diklik.

url?halaman=home

Ini merupakan satu bentuk pengontrolan yang dibuat dengan native PHP yang sekarang akan kita gantikan dengan controller di CI.

Didalam native PHP isi form dikirimkan ke file tujuan. Pada tutorial yang pernah saya tulis biasanya file tujuan pengiriman form namanya ditandai kata aksi_xxx.php. Nah pada CI kita lupakan itu karena aksi tersebut ditangani oleh fungsi controller, misalkan.

localhost/belajarcodeigniter/mahasiswa/aksi_tambah

Sekedar bercerita, saya sering belajar hal baru dengan menyama-nyamakan pelajaran lama. Begitu juga jika kita ingin belajar bahasa pemrograman lain, kita bisa menyama-nyamakan agar mudah mengingat dan mudah mencari kata kunci referensi di google.

Pada tutorial sebelumnya sebenarnya kita sudah menggunakan controller namun belum saya jelaskan sedikit lebih dalam.

Kita mulai belajar controller dari tombol tambah lalu edit dan hapus.

<!--file:mahasiswa_list.php-->

<!--buat tombol di bagian card header-->

<div class="card-header">

    <!--h3 class="card-title">DataTable with default features</h3-->

    <a href="<?php echo site_url('mahasiswa/tambah') ?>"><button class="btn btn-primary"><i class="fa fa-plus"></i> Tambah</button></a>

</div>

<!-- ubah pada bagian aksi-->

<td>

    <a href="<?php echo site_url('mahasiswa/edit/'. $row->nim); ?>"><button class="btn btn-warning"><i class="fa fa-edit"> Edit</i></button></a>

    </a>

    <a href="<?php echo site_url('mahasiswa/hapus/'. $row->nim); ?>" onclick="return confirm('Are You Sure ?')"><button class="btn btn-danger"><i class="fa fa-trash"> Hapus</i></button>

</a>

Dengan fungsi site_url('mahasiswa/tambah'); kita dapat langsung memanggil controller dan method yang hasilnya.

localhost/belajarcodeigniter/mahasiswa/tambah

Selanjutnya ubah controller mahasiswa dan tambahkan method-method yang lain.

• belajarcodeigniter
• application
• controller
• Mahasiswa.php (edit)

<?php

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

class Mahasiswa extends CI_Controller {

function __construct()

    {

        parent::__construct();

        $this->load->model('Mahasiswa_model');

    }

public function index()

{

$mahasiswa = $this->Mahasiswa_model->get_all();

        $data = array(

            'data' => $mahasiswa

        );

        $this->load->view('mahasiswa/mahasiswa_list', $data);

}

    public function tambah(){

            $data = array(

                'judul' => 'Form Tambah Mahasiswa',

                'button' => 'Simpan',

                'action' => site_url('mahasiswa/aksi_tambah'),

            'nim' => set_value('nim'),

            'nama' => set_value('nama'),

            'jenis_kelamin' => set_value('jenis_kelamin'),

            'agama' => set_value('agama'),

           );

            $this->load->view('mahasiswa/mahasiswa_form', $data);

    }

    public function aksi_tambah(){

        $data = array(

            'nim' => $this->input->post('nim',TRUE),

            'nama' => $this->input->post('nama',TRUE),

            'jenis_kelamin' => $this->input->post('jenis_kelamin',TRUE),

            'agama' => $this->input->post('agama',TRUE),

        );

        $this->Mahasiswa_model->insert($data);

        $this->session->set_flashdata('message','Tambah Berhasil');

        redirect(site_url('mahasiswa/tambah'));

    }

    public function edit($id){

        $row = $this->Mahasiswa_model->get_by_id($id);

        $data = array(

            'judul' => 'Form Edit Mahasiswa',

            'button' => 'Ubah',

            'action' => site_url('mahasiswa/aksi_edit'),

            'nim' => set_value('nim',$row->nim),

            'nama' => set_value('nama',$row->nama),

            'jenis_kelamin' => set_value('jenis_kelamin',$row->jenis_kelamin),

            'agama' => set_value('agama',$row->agama),

           );

            $this->load->view('mahasiswa/mahasiswa_form', $data);

    }

    public function aksi_edit(){

       $data = array(

        'nim' => $this->input->post('nim',TRUE),

        'nama' => $this->input->post('nama',TRUE),

        'jenis_kelamin' => $this->input->post('jenis_kelamin',TRUE),

        'agama' => $this->input->post('agama',TRUE),

        ); 

       $this->Mahasiswa_model->update($this->input->post('nim', TRUE), $data);

       $this->session->set_flashdata('message','Edit Berhasil');

        redirect(site_url('mahasiswa/edit/'.$this->input->post('nim',TRUE)));

    }

    public function hapus($id){

        $this->Mahasiswa_model->delete($id);

        $this->session->set_flashdata('message','Hapus Berhasil');

        redirect(site_url('mahasiswa'));

    }

}

Perhatikan dengan baik bagaimana controller berkerja.

View	Controller
Membuat link site_url('mahasiswa/edit/123') [1] mahasiswa=>Controller [2] edit=>method/fungsi [3] 123=>parameter	Membuat Method atau fungsi Class Mahasiswa extends CI_Controller { //[1]nama kelas adalah controller         public function edit($id){         //[2]nama fungsi adalah method         //[3]$id adalah parameter             ....         } }

Ada 6 method pada controller mahasiswa di atas.

1. index
   untuk menampilkan data kedalam tabel yang berasal dari model.
2. tambah
   untuk menyiapkan dan menampilkan form tambah data.
3. aksi_tambah
   untuk menerima nilai tambah data dan diteruskan ke model.
4. edit
   untuk menyiapkan dan menampilkan form edit data.
5. aksi_edit
   untuk menerima nilai edit data dan diteruskan ke model.
6. hapus
   untuk menerima link dari tombol hapus dan diteruskan ke model.

Sekarang kita buat sebuah view untuk form mahasiswa. Ada beberapa file yang akan kita buat di forlder _includes.

• belajarcodeigniter
• application
• view
• _includes
• head_form.php
• js_form.php
• dll (sudah)
• mahasiswa_list.php (sudah)
• mahasiswa_form.php

#head_form.php

Pada file ini css menyesuaikan untuk keperluan form.

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Admin</title>

  <!-- Tell the browser to be responsive to screen width -->

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Font Awesome -->

  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/fontawesome-free/css/all.min.css">

  <!-- Ionicons -->

  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <!-- daterange picker -->

  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/daterangepicker/daterangepicker.css">

  <!-- iCheck for checkboxes and radio inputs -->

  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

  <!-- Bootstrap Color Picker -->

  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">

  <!-- Tempusdominus Bbootstrap 4 -->

  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">

  <!-- Select2 -->

  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/select2/css/select2.min.css">

  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">

  <!-- Bootstrap4 Duallistbox -->

  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">

  <!-- Theme style -->

  <link rel="stylesheet" href="<?php echo base_url(); ?>template/dist/css/adminlte.min.css">

  <!-- Google Font: Source Sans Pro -->

  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

</head>

#js_form.php

Pada file ini js menyesuaikan untuk keperluan form.

<!-- jQuery -->

<script src="<?php echo base_url(); ?>template/plugins/jquery/jquery.min.js"></script>

<!-- Bootstrap 4 -->

<script src="<?php echo base_url(); ?>template/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Select2 -->

<script src="<?php echo base_url(); ?>template/plugins/select2/js/select2.full.min.js"></script>

<!-- Bootstrap4 Duallistbox -->

<script src="<?php echo base_url(); ?>template/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>

<!-- InputMask -->

<script src="<?php echo base_url(); ?>template/plugins/moment/moment.min.js"></script>

<script src="<?php echo base_url(); ?>template/plugins/inputmask/min/jquery.inputmask.bundle.min.js"></script>

<!-- date-range-picker -->

<script src="<?php echo base_url(); ?>template/plugins/daterangepicker/daterangepicker.js"></script>

<!-- bootstrap color picker -->

<script src="<?php echo base_url(); ?>template/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

<!-- Tempusdominus Bootstrap 4 -->

<script src="<?php echo base_url(); ?>template/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>

<!-- Bootstrap Switch -->

<script src="<?php echo base_url(); ?>template/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>

<!-- AdminLTE App -->

<script src="<?php echo base_url(); ?>template/dist/js/adminlte.min.js"></script>

<!-- AdminLTE for demo purposes -->

<script src="<?php echo base_url(); ?>template/dist/js/demo.js"></script>

<!-- Page script -->

<script>

  $(function () {

    //Initialize Select2 Elements

    $('.select2').select2()

    //Initialize Select2 Elements

    $('.select2bs4').select2({

      theme: 'bootstrap4'

    })

    //Datemask dd/mm/yyyy

    $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })

    //Datemask2 mm/dd/yyyy

    $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })

    //Money Euro

    $('[data-mask]').inputmask()

    //Date range picker

    $('#reservation').daterangepicker()

    //Date range picker with time picker

    $('#reservationtime').daterangepicker({

      timePicker: true,

      timePickerIncrement: 30,

      locale: {

        format: 'MM/DD/YYYY hh:mm A'

      }

    })

    //Date range as a button

    $('#daterange-btn').daterangepicker(

      {

        ranges   : {

          'Today'       : [moment(), moment()],

          'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],

          'Last 7 Days' : [moment().subtract(6, 'days'), moment()],

          'Last 30 Days': [moment().subtract(29, 'days'), moment()],

          'This Month'  : [moment().startOf('month'), moment().endOf('month')],

          'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]

        },

        startDate: moment().subtract(29, 'days'),

        endDate  : moment()

      },

      function (start, end) {

        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))

      }

    )

    //Timepicker

    $('#timepicker').datetimepicker({

      format: 'LT'

    })

    

    //Bootstrap Duallistbox

    $('.duallistbox').bootstrapDualListbox()

    //Colorpicker

    $('.my-colorpicker1').colorpicker()

    //color picker with addon

    $('.my-colorpicker2').colorpicker()

    $('.my-colorpicker2').on('colorpickerChange', function(event) {

      $('.my-colorpicker2 .fa-square').css('color', event.color.toString());

    });

    $("input[data-bootstrap-switch]").each(function(){

      $(this).bootstrapSwitch('state', $(this).prop('checked'));

    });

  })

</script>

<script type="text/javascript">

  $("#info").fadeTo(2000, 500).slideUp(500, function(){

  $("#info").slideUp(500);

});

</script>

  

#mahasiswa_form.php

File ini digunakan untuk menampilkan view form. Pada view ini yang berbeda pada _include adalah   head_form.php dan js_form.php yang lain sama.

<!DOCTYPE html>

<html>

<?php $this->load->view('_includes/head_form') ?>

<body class="hold-transition sidebar-mini">

<div class="wrapper">

  <!-- Navbar -->

<?php $this->load->view('_includes/navbar') ?>

  <!-- /.navbar -->

  <!-- Main Sidebar Container -->

<?php $this->load->view('_includes/sidebar') ?>

  <!-- Content Wrapper. Contains page content -->

  <div class="content-wrapper">

    <!-- Content Header (Page header) -->

<?php $this->load->view('_includes/breadcrumb_mahasiswa_list') ?>

    <!-- Main content -->

    <section class="content">

      <div class="container-fluid">

        <!-- SELECT2 EXAMPLE -->

        <div class="card card-default">

          <div class="card-header">

            <?php if ($this->session->flashdata('message')) { ?>

            <div class="alert alert-info" id="info"> <?php echo $this->session->flashdata('message') ?> </div>

            <?php } ?>

            <h3 class="card-title"><?php echo $judul;?></h3>

            <div class="card-tools">

              <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>

              <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>

            </div>

          </div>

          <!-- /.card-header -->

          <?php

                echo form_open_multipart($action, 'role="form" class="form-horizontal" name="mahasiswa"');

          ?>

          <div class="card-body">

            <div class="row">

              <div class="col-md-6">

                <div class="form-group">

                  <label>Nim</label>

                  <?php

                  if ($button=='Ubah') {

                  ?>

                  <input type="text" class="form-control" disabled="" value="<?php echo $nim ?>">

                  <input type="hidden" name="nim" value="<?php echo $nim ?>">

                  <?php

                  }

                  else{

                  ?>

                  <input type="text" class="form-control"  name="nim" value="<?php echo $nim ?>">

                  <?php

                  }

                  ?>

                </div>

                <!-- /.form-group -->

                <div class="form-group">

                  <label>Nama</label>

                  <input type="text" name="nama" class="form-control" value="<?php echo $nama; ?>">

                </div>

                

                <!-- /.form-group -->

              </div>

              <!-- /.col -->

              <div class="col-md-6">

                <div class="form-group">

                  <label>Jenis Kelamin</label>

                  <select class="form-control select2" style="width: 100%;" name="jenis_kelamin">

                    <option selected="selected" value="">Pilih</option>

                    <option value="Laki-Laki" <?php echo $jenis_kelamin=='Laki-Laki'?'selected':''; ?>>Laki-Laki</option>

                    <option value="Perempuan" <?php echo $jenis_kelamin=='Perempuan'?' selected':''; ?>>Perempuan</option>

                  </select>

                </div>

                <!-- /.form-group -->

                <div class="form-group">

                  <label>Agama</label>

                  <select class="form-control select2" style="width: 100%;" name="agama">

                    <option selected="selected" value="">Pilih</option>

                    <option value="Islam" <?php echo $agama=='Islam'?'selected':''; ?>>Islam</option>

                    <option value="Kristen" <?php echo $agama=='Kristen'?'selected':''; ?>>Kristen</option>

                    <option value="Katolik" <?php echo $agama=='Katolik'?'selected':''; ?>>Katolik</option>

                    <option value="Hindu" <?php echo $agama=='Hindu'?'selected':''; ?>>Hindu</option>

                    <option value="Budha" <?php echo $agama=='Budha'?'selected':''; ?>>Budha</option>

                    <option value="Lain-lain" <?php echo $agama=='Lain-lain'?'selected':''; ?>>Lain-lain</option>

                  </select>

                </div>

                <!-- /.form-group -->

              </div>

              <!-- /.col -->

            </div>

          </div>

          <!-- /.card-body -->

          <div class="card-footer">

            <a href="<?php echo site_url('mahasiswa'); ?>"><button type="button" class="btn btn-success"><i class="fa fa-arrow-left"></i> Kembali</button></a>

            <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> <?php echo $button; ?></button>

          </div>

          </form>

        </div>

        <!-- /.card -->

      </div><!-- /.container-fluid -->

    </section>

    <!-- /.content -->

  </div>

  <!-- /.content-wrapper -->

<?php $this->load->view('_includes/footer') ?>

  <!-- Control Sidebar -->

  <aside class="control-sidebar control-sidebar-dark">

    <!-- Control sidebar content goes here -->

  </aside>

  <!-- /.control-sidebar -->

</div>

<!-- ./wrapper -->

<!-- jQuery -->

<?php $this->load->view('_includes/js_form') ?>

</body>

</html>

Selamat kita sudah berhasil membuat CRUD. Hasilnya dapat di download di sini. Terima Kasih 😅