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

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 :

1. CodeIgniter 3
   Disini saya masih menggunakan CodeIgniter 3. Teman-teman bisa mendownloadnya disini
2. 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.

1. "application/config/autoload.php" dan ubah seperti ini :
   
   $autoload['libraries'] = array('database');

   $autoload['helper'] = array('url');
2. "application/config/config.php" dan ubah seperti ini :
   
   $config['base_url'] = 'http://localhost/form_otomatis/';
3. "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

   );
4. "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

1. index
   Untuk menampilkan form pencarian NISN,
2. get_nisn
   Untuk memanggil data NISN dari Tabel siswa
3. get_siswa
   Untuk memanggil data siswa dari Tabel siswa berdasarkan NISN

Untuk script lebih lengkapnya bisa kita buat seperti ini :

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:

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

Untuk script lebih lengkapnya bisa kita buat seperti ini :

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 :

1. 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

       });
2. 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>`);

               });

             }

           }

         });

       }
3. 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 :

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...