TUTORIAL

PHP

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

09-08-2020 00:00:06 BY Alfikri Read 1327x 12 min read

Halo Klinik Coders...

Ditutorial ini kita akan mempelajari bagaimana cara membuat form otomatis terisi menggunakan PHP Native, Libary Faker, JQuery, Select2 dan AJAX. Untuk studi kasusnya kita contohkan untuk pemanggilan data siswa

Tahap#1 - Pendahuluan

Apakah teman-teman pernah melihat atau menggunakan sebuah aplikasi yang mempunyai fitur ketika salah satu fieldnya di isi maka seluruh form otomatis terisi ?. Jika sudah sekarang saya akan mencoba membuat tutorialnya.

Tahap#2 - Persiapan

Untuk persiapan disini kita membutuhkan sebuah library yaitu FAKER. Untuk Librarynya bisa teman-teman download disini.
Selanjutnya buatlah struktur folder aplikasi seperti gambar dibawah ini :


Tahap#3 - Membuat Database dan Table

Ditahap ini buatlah sebuah Database dengan nama "sekolah"

CREATE DATABASE IF NOT EXISTS `sekolah` DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;


Selanjutnya buatlah Table dengan nama "siswa"

CREATE TABLE `siswa` (
  `nisn` int(11NOT NULL,
  `nama_siswa` varchar(100NOT NULL,
  `tempat_lahir` varchar(100NOT NULL,
  `tanggal_lahir` date NOT NULL,
  `jenis_kelamin` enum('Laki-Laki','Perempuan'NOT NULL,
  `alamat` varchar(255NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `siswa`
  ADD PRIMARY KEY (`nisn`);
COMMIT;


Tahap#4 - Membuat Koneksi ke Database

Pada tahap ini kita akan membuat script untuk menghubungkan ke database. Buat lah file koneksi.php dan sesuaikan dengan username dan password server local teman-teman

<?php

$mysqli = new mysqli("localhost""root""""sekolah");

if ($mysqli->connect_errno) {
  echo "Failed to connect to MySQL: " . $mysqli->connect_error;
  exit();
}



Tahap#5 - Membuat file index.php

Buatlah file index.php untuk menampilkan form otomatis.

<!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 {
      displaynone;
    }
  </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: "data.php",
        type: "GET",
        dataType: "JSON",
        success: function(x) {
          if (x.status == true) {
            $('#nisn').html('<option value=""></option>');
            $.each(x.datafunction(kv) {
              $('#nisn').append(`<option value="${v.nisn}">${v.nisn}</option>`);
            });
          }
        }
      });
    }

    // fungsi untuk menampilkan data siswa berdasarkan NISN
    function show_siswa(x) {
      $.ajax({
        url: "siswa_detail.php",
        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#6 - Membuat file data.php

Pada tahap ini kita akan membuat sebuah file data.php. File ini berfungsi untuk membuat data dummy siswa dan menampilkannya kedalam NISN

<?php
require_once 'koneksi.php'// Koneksi ke database
require_once 'autoload.php'// Mengambil Library Faker

$faker  = Faker\Factory::create();

$mysqli->query("TRUNCATE TABLE siswa"); // Kosongkan table siswa

// Data dummy Siswa
for ($i = 1$i <= 10$i++) {
  $nisn       = $i . $i + rand(34569999);
  $tgl_lahir  = rand(19892020. '-' . rand(112. '-' . rand(131);

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

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

// Menampilkan nisn ke format json
$output = [
  'status'  => false,
  'data'    => []
];

$sql  = $mysqli->query("SELECT
                          nisn
                        FROM
                          siswa
                      ");
if (mysqli_num_rows($sql) > 0) :
  while ($data = $sql->fetch_array(MYSQLI_ASSOC)) :
    $output['data'][] = $data;
  endwhile;
  $output['status'] = true;
endif;

echo json_encode($output);



Tahap#7 - Membuat file siswa_detail.php

Pada tahap ini kita akan membuat file siswa_detail.php. File ini berfungsi untuk pemanggilan data siswa berdasarkan NISN.

<?php
require_once 'koneksi.php'// Koneksi ke database

// Menampilkan data siswa berdasarkan nisn ke format json
$output = [
  'status'  => false,
  'data'    => []
];

$nisn = isset($_GET['nisn']) ? $_GET['nisn'] : ''// Mengambil parameter GET dari Select2

// Query SQL mengambil semua field dari tabel siswa
$sql  = $mysqli->query("SELECT
                          *
                        FROM
                          siswa
                        WHERE
                          nisn = '{$nisn}'
                      ");
// Cek jika nisn ketemu
if (mysqli_num_rows($sql) > 0) :
  $data = $sql->fetch_array(MYSQLI_ASSOC);
  $output['data'] = $data;
  $output['status'] = true;
endif;

echo json_encode($output); // Menampilkan Output JSON



Tahap#8 - Eksekusi

Jika semua tahapan diatas telah selesai dengan benar, makan akan terlihat seperti gambar dibawah ini :


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

Let's Coding...

Demo

About author

Alfikri

Saya seorang web developer. Saya sangat suka tantangan untuk mempelejari hal-hal baru dalam dunia pemograman.



Comments

Scroll to Top