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 :
- 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...
Saya adalah seorang Fullstack Web Developer. Saya sangat menyukai hal-hal baru di dunia teknologi
Traktir Saya- Popular Article
- Tutorial Membuat Tanda Tangan Digital/Elektronik (...
Halo Klinik Coders... Ditutorial ini kita akan mempelajari bagaimana ...
Read 12231x - Tutorial Lengkap membuat CRUD Datatables Server Si...
Halo Klinik Coders.. Di tutorial kali ini kita akan mempelajari Tutor...
Read 7576x - Tutorial sederhana untuk pemula membuat struktur o...
Halo Klinik Coders... Ditutorial kali ini kita akan mempelajari bagai...
Read 7143x - Tutorial Membuat Cek Ongkos Kirim Memanfaatkan API...
Halo Klinik Coders... Ditutorial ini kita akan mempelajari cara membu...
Read 6752x - Tutorial Sederhana Membuat Form Otomatis Terisi Me...
Halo Klinik Coders... Ditutorial ini kita akan mempelajari bagaimana ...
Read 5854x