Cara Mudah Membuat Dropdown Select Auto Submit saat Berganti Pilihan dengan Php. Halo semuanya kembali lagi di sahretech. Kali ini kita akan membahas trick yang tidak kalah menarik yaitu cara untuk menampilkan data di dalam sebuah form. Cara ini biasa digunakan untuk menampilkan data sesuai dengan kategori yang diinginkan saja, sehingga load halaman menjadi lebih ringan. Untuk tahu lengkapnya, silahkan ikuti artikel berikut ini!
Mungkin istilah yang lebih tepat adalah membuat filter data berdasarkan pilihan dropwdown. Jadi di artikel ini kita akan memanfaatkan sedikit fungsi javascript, dan php untuk membuat fitur sederhana ini, dan untuk datanya sendiri kita akan coba memanfaatkan database MySQL. Ok untuk hasilnya saya preview di bawah ini.
|
| Form Filter Data |
Oh iya, saya juga membuat artikel serupa berikut ini linknya https://www.sahretech.com/2020/08/cara-membuat-fitur-pencarian-hanya.html. Perbedaan artikel yang akan kita bahas dengan artikel pada link di atas adalah pencarian data masih menggunakan tombol, sedangkan tutorial yang akan kita bahas tidak menggunakan tombol, sehingga saat dropdownnya diganti maka hasil di bawahnya juga akan terganti. Selain itu, pada tutorial kali ini hasil filtering data akan kita tampilkan di dalam form.
1. Membuat Tabel
Pertama, buatlah database latihan, lalu buatlah sebuah tabel sederhana dengan nama mahasiswa dan struktur seperti gambar berikut ini. Lalu jangan lupa tambahkan beberapa data di dalamnya.
|
| Membuat tabel mahasiswa |
2. Membuat Halaman Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Form Filter Data</title>
<!-- bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<?php
//sesuaikan dengan database, username, dan password kalian masing-masing
$servername = "localhost";
$database = "latihan";
$username = "root";
$password = "";
// membuat koneksi
$conn = mysqli_connect($servername, $username, $password, $database);
//jika jurusan sudah diset maka masukkan datanya ke dalam variabel $cari
if(isset($_GET['jurusan'])){
$cari = $_GET['jurusan'];
//ambil data dari database, dimana pencarian sesuai dengan variabel cari
$data = mysqli_query($conn, "select * from mahasiswa where jurusan = '$cari'");
}else{
//tapi jika jurusan belum diset, maka jangan tampilkan apapun
$data = [];
}
?>
<body>
<br>
<div class="container jumbotron">
<!-- membuat form dropdown jurusan dengan id = form_id -->
<form action="index.php" method="GET" id="form_id">
<div class="form-group">
<label for="exampleInputEmail1">Jurusan</label>
<!-- gunakan event onchange untuk mengirim data secara otomatis -->
<select class="form-control" name="jurusan" onChange="document.getElementById('form_id').submit();">
<option value="">--Pilih Jurusan--</option>
<option <?php if(!empty($cari)){ echo $cari == 'Sistem Informasi' ? 'selected':''; } ?> value="Sistem Informasi">Sistem Informasi</option>
<option <?php if(!empty($cari)){ echo $cari == 'Informatika' ? 'selected':''; } ?> value="Informatika">Informatika</option>
<option <?php if(!empty($cari)){ echo $cari == 'DKV' ? 'selected':''; } ?> value="DKV">DKV</option>
<option <?php if(!empty($cari)){ echo $cari == 'Akuntansi' ? 'selected':''; } ?> value="Akuntansi">Akuntansi</option>
</select>
</div>
</form>
<form>
<hr>
<div class="form-group">
<label for="exampleInputPassword1">Nama Mahasiswa</label>
<select class="form-control">
<option value="">--Pilih Mahasiswa--</option>
<!-- data ditampilkan berdasarkan jurusan yang dipilih
untuk logikanya ada pada line 24 hingga 33 -->
<?php while($d = mysqli_fetch_array($data)){ ?>
<option><?php echo $d['nama']; ?></option>
<?php } ?>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Penjelasan:
Pertama kita akan membuat koneksi ke database, settingnya ada pada line 12 hingga line 21. Lalu kita buat sebuah kondisi pada line 24 hingga line 33 dimana jika variabel $_GET['jurusan'] diset maka akan mengambil data dari database berdasarkan variabel $_GET['jurusan'], atau jika variabelnya belum diset maka data kosong.
Kemudian pada line 38 ke bawah kita akan menampilkan sebuah form inputan dengan dropdown select yang menampilkan data jurusan. Dropdown select ini diberi event onchange, dimana akan mengirim data secara otomatis saat dropdown select berubah. Lalu kita buat sebuah form input baru berbentuk dropdown select juga, data didapat dari kondisi yang dibuat pada line 24 hingga line 33, data akan ditampilkan berdasarkan jurusan yang dipilih
save!, lalu coba kalian jalankan hasilnya di browser. Maka hasilnya akan tampak seperti gambar di bawah ini.
Ok, cukup mudah bukan?, penerapannya cepat hanya cukup 1 halaman dan tidak perlu banyak logika dan script. Dan yang paling penting load halaman menjadi lebih cepat. Baiklah, sekian tutorial Cara Mudah Membuat Dropdown Select Auto Submit saat Berganti Pilihan dengan Php. Semoga tutorial ini dapat membantu kalian semua, kurang lebihnya saya mohon maaf, jika ada yang salah atau ada codingan yang sulit dipahami silahkan tinggalkan komentar kalian di bawah ini. Sampai jumpa di tutorial menarik lainnya. Happy Coding!😄
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi