Tutorial Sederhana Membuat Form Otomatis Terisi Menggunakan CodeIgniter 3, Library FAKER, JQuery, Select2 dan AJAX (Studi Kasus : Data Siswa)

09-08-2020 10:45:28 BY Alfikri Read 2469x 17 min read

Halo Klinik Coders...

Ditutorial ini kita akan mempelajari bagaimana cara membuat form otomatis terisi menggunakan CodeIgniter 3, Library Faker, JQuery, Select2 dan AJAX. Untuk studi kasusnya kita contohkan untuk pemanggilan data siswa. Sebelumnya saya juga sudah membuat tutorial ini tetapi menggunakan PHP Native. Karena adanya permintaan dari teman-teman untuk membuatnya menggunakan Framework CodeIgniter, Maka saya akan share pada tutoria ini. Jika teman-teman ingin mempelajari untuk PHP Native bisa mengunjungi Tutorial Sederhana Membuat Form Otomatis Terisi Menggunakan PHP Native, Library FAKER, JQuery, Select2 dan AJAX (Studi Kasus : Data Siswa).

Tahap#1 - Persiapan

Ditahap ini kita membutuhkan tool sebagai berikut :

CodeIgniter 3
Disini saya masih menggunakan CodeIgniter 3. Teman-teman bisa mendownloadnya disini
Faker
Untuk dummy datanya, disini saya menggunakan Library Faker yang bisa didownload disini

Selanjutnya buatlah struktur folder CodeIgniter 3 teman-teman seperti gambar berikut ini :

Tahap#2 - Membuat Database dan Table

Ditahap ini teman-teman bisa merujuk ke tutorial sebelumnya yaitu Tutorial Sederhana Membuat Form Otomatis Terisi Menggunakan PHP Native, Library FAKER, JQuery, Select2 dan AJAX (Studi Kasus : Data Siswa)

Tahap#3 - Konfigurasi

Ditahap ini kita akan mengkonfigurasi CodeIgniter agar berjalan dengan baik.

"application/config/autoload.php" dan ubah seperti ini :
$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');
"application/config/config.php" dan ubah seperti ini :
$config['base_url'] = 'http://localhost/form_otomatis/';
"application/config/database.php" dan ubah seperti ini :
$db['default'] = array(
  'dsn' => '',
  'hostname' => 'localhost',
  'username' => 'root',
  'password' => '',
  'database' => 'sekolah',
  'dbdriver' => 'mysqli',
  'dbprefix' => '',
  'pconnect' => FALSE,
  'db_debug' => (ENVIRONMENT !== 'production'),
  'cache_on' => FALSE,
  'cachedir' => '',
  'char_set' => 'utf8',
  'dbcollat' => 'utf8_general_ci',
  'swap_pre' => '',
  'encrypt' => FALSE,
  'compress' => FALSE,
  'stricton' => FALSE,
  'failover' => array(),
  'save_queries' => TRUE
);
"application/config/routes.php" dan ubah seperti ini :
$route['default_controller'] = 'siswa';

Tahap#4 - Membuat Controller Siswa.php

Ditahap ini kita akan membuat sebuah controller dengan nama "Siswa.php". Controller ini memiliki 3 Method yaitu

index
Untuk menampilkan form pencarian NISN,
get_nisn
Untuk memanggil data NISN dari Tabel siswa
get_siswa
Untuk memanggil data siswa dari Tabel siswa berdasarkan NISN

Untuk script lebih lengkapnya bisa kita buat seperti ini :

<?php
defined('BASEPATH') or exit('No direct script access allowed');

require('./application/libraries/autoload.php');

class Siswa extends CI_Controller
{
  public $faker;
  public $result = [
    'status'  => false,
    'data'    => []
  ];

  public function __construct()
  {
    parent::__construct();
    $this->faker  = Faker\Factory::create();
    $this->load->model([
      'siswa_model'
    ]);
  }

  public function index()
  {
    $this->load->view('cari_siswa');
  }

  public function get_nisn()
  {
    if (!$this->input->is_ajax_request()) :
      show_404();
    else :
      $nisn = $this->siswa_model->get_nisn();
      if ($nisn->num_rows() > 0) :
        $this->result['status'] = true;
        foreach ($nisn->result() as $key => $value) :
          $this->result['data'][$key]['nisn'] = $value->nisn;
        endforeach;
      endif;

      echo json_encode($this->result);
    endif;
  }

  public function get_siswa()
  {
    if (!$this->input->is_ajax_request()) :
      show_404();
    else :
      $nisn   = $this->input->get('nisn');
      $siswa  = $this->siswa_model->get_siswa($nisn);
      if ($siswa->num_rows() > 0) :
        $this->result['status'] = true;
        $this->result['data']   = $siswa->row_array();
      endif;

      echo json_encode($this->result);
    endif;
  }
}

Tahap#5 - Membuat Model Siswa_model.php

Ditahap ini kita akan membuat sebuah model dengan nama "Siswa_model.php". Model ini memiliki 3 Method yaitu:

dummy_siswa
Befungsi untuk mengosongkan Table siswa dan mengisi datanya dengan bantuan library Faker.
get_nisn
Berfungsi untuk mengambil data nisn dari Table siswa menggunakan Query SQL
get_siswa
Berfungsi untuk mengambil data siswa dari Table siswa berdasarkan NISN menggunakan Query SQL

Untuk script lebih lengkapnya bisa kita buat seperti ini :

<?php

defined('BASEPATH') or exit('No direct script access allowed');
require('./application/libraries/autoload.php');

class Siswa_model extends CI_Model
{
  private $table_siswa = "siswa";
  public $faker;

  public function __construct()
  {
    parent::__construct();
    $this->faker  = Faker\Factory::create();
  }

  public function dummy_siswa()
  {
    $this->db->query("TRUNCATE TABLE {$this->table_siswa}");
    for ($i = 1; $i <= 10; $i++) {
      $nisn       = $i . $i + rand(3456, 9999);
      $tgl_lahir  = rand(1989, 2020) . '-' . rand(1, 12) . '-' . rand(1, 31);

      if ($i % 2 == 0) {
        $jenkel = 'Laki-Laki';
      } else {
        $jenkel = 'Perempuan';
      }

      $insert = $this->db->query("INSERT INTO {$this->table_siswa}
                                  SET nisn = {$nisn},
                                    nama_siswa = '{$this->faker->name}',
                                    tempat_lahir = '{$this->faker->state}',
                                    tanggal_lahir = '{$tgl_lahir}',
                                    jenis_kelamin = '{$jenkel}',
                                    alamat = '{$this->faker->address}'");
    }
  }

  public function get_nisn()
  {
    $this->dummy_siswa();
    $query  = $this->db->query("SELECT
                                  nisn
                                FROM
                                  {$this->table_siswa}");
    return $query;
  }

  public function get_siswa($nisn)
  {
    $query  = $this->db->query("SELECT
                                  *
                                FROM
                                  {$this->table_siswa}
                                WHERE
                                  nisn = '{$nisn}'");
    return $query;
  }
}

Tahap#6 - Membuat View cari_siswa.php

Setelah kita selesai membuat Controller dan Model, langkah selanjutnya kita akan membuat model untuk melihat hasil yang telah di proses oleh controller dan model.

Pada view ini kita menggunakan library JQuery, Bootstrap 4.5.2, Select2 4.1.0-beta, dan select2 bootstrap theme. Untuk proses datanya disini kita menggunakan Ajax. Berikut penjelasan scriptnya :

Saat dokumen telah sukses diload
$(document).ready(function() {
      // Format Select2 pada id nisn
      $("#nisn").select2({
        allowClear: true,
        theme: "bootstrap",
        placeholder: "Cari NISN",
      });

      show_nisn(); // Memanggil fungsi untuk menampilkan NISN
    });
Menampilkan NISN pada select
// fungsi untuk menampilkan NISN
    function show_nisn() {
      $.ajax({
        url: "<?php echo base_url('index.php/siswa/get_nisn'); ?>",
        type: "GET",
        dataType: "JSON",
        success: function(x) {
          if (x.status == true) {
            $('#nisn').html('<option value=""></option>');
            $.each(x.data, function(k, v) {
              $('#nisn').append(`<option value="${v.nisn}">${v.nisn}</option>`);
            });
          }
        }
      });
    }
Menampilkan data siswa berdasarkan NISN
// fungsi untuk menampilkan data siswa berdasarkan NISN
    function show_siswa(x) {
      $.ajax({
        url: "<?php echo base_url('index.php/siswa/get_siswa'); ?>",
        type: "GET",
        dataType: "JSON",
        data: {
          nisn: x
        },
        success: function(x) {
          if (x.status == true) {
            $('.data-siswa').show()
            $('#nama_siswa').val(x.data.nama_siswa);
            $('#tempat_lahir').val(x.data.tempat_lahir);
            $('#tanggal_lahir').val(x.data.tanggal_lahir);
            $('#jenis_kelamin').val(x.data.jenis_kelamin);
            $('#alamat').val(x.data.alamat);
          }
        }
      });
    }

Untuk script lebih lengkapnya bisa kita buat seperti ini :

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css">

  <title>Form Otomatis</title>
  <style>
    .data-siswa {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row mt-3">
      <div class="col-md-8">
        <form id="form-siswa">
          <div class="form-group">
            <label for="nisn">NISN</label>
            <select name="nisn" id="nisn" class="form-control select2" onchange="show_siswa(this.value)">
            </select>
          </div>
          <div class="form-group data-siswa">
            <label for="nama_siswa">Nama Siswa</label>
            <input type="text" id="nama_siswa" class="form-control" readonly>
          </div>
          <div class="form-group data-siswa">
            <label for="tempat_lahir">Tempat Lahir</label>
            <input type="text" id="tempat_lahir" class="form-control" readonly>
          </div>
          <div class="form-group data-siswa">
            <label for="tanggal_lahir">Tanggal Lahir</label>
            <input type="text" id="tanggal_lahir" class="form-control" readonly>
          </div>
          <div class="form-group data-siswa">
            <label for="jenis_kelamin">Jenis Kelamin</label>
            <input type="text" id="jenis_kelamin" class="form-control" readonly>
          </div>
          <div class="form-group data-siswa">
            <label for="alamat">Alamat</label>
            <input type="text" id="alamat" class="form-control" readonly>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
  <script>
    $(document).ready(function() {
      // Format Select2 pada id nisn
      $("#nisn").select2({
        allowClear: true,
        theme: "bootstrap",
        placeholder: "Cari NISN",
      });

      show_nisn(); // Memanggil fungsi untuk menampilkan NISN
    });

    // fungsi untuk menampilkan NISN
    function show_nisn() {
      $.ajax({
        url: "<?php echo base_url('index.php/siswa/get_nisn'); ?>",
        type: "GET",
        dataType: "JSON",
        success: function(x) {
          if (x.status == true) {
            $('#nisn').html('<option value=""></option>');
            $.each(x.data, function(k, v) {
              $('#nisn').append(`<option value="${v.nisn}">${v.nisn}</option>`);
            });
          }
        }
      });
    }

    // fungsi untuk menampilkan data siswa berdasarkan NISN
    function show_siswa(x) {
      $.ajax({
        url: "<?php echo base_url('index.php/siswa/get_siswa'); ?>",
        type: "GET",
        dataType: "JSON",
        data: {
          nisn: x
        },
        success: function(x) {
          if (x.status == true) {
            $('.data-siswa').show()
            $('#nama_siswa').val(x.data.nama_siswa);
            $('#tempat_lahir').val(x.data.tempat_lahir);
            $('#tanggal_lahir').val(x.data.tanggal_lahir);
            $('#jenis_kelamin').val(x.data.jenis_kelamin);
            $('#alamat').val(x.data.alamat);
          }
        }
      });
    }
  </script>
</body>

</html>

Tahap#7 - Eksekusi

Jika tahapan diatas telah dilakukan dengan benar makan akan terlihat hasilnya pada gambar berikut :
Sekian tutorial dari saya kali ini, mudah-mudahan bermanfaat dan jika ada kritik, saran dan pertanyaan silahkan berkomentar dibawah ini.

Let's Coding...

Sekian tutorial dari saya kali ini, mudah-mudahan bermanfaat dan jika ada kritik, saran dan pertanyaan silahkan berkomentar dibawah ini.

Let's Coding...

Demo