August 3, 2017

Membuat Dropdown Select2 dengan Request Ajax dan Php

Share this
  • 5
  •  
  •  
  •  
  •  
  •  
    5
    Shares

Assalamualaikum wr wb, pada kesempatan kali ini saya akan memberikan pembahasan mengenai cara membuat dropdown select2 dengan request ajax dan php. Select2 merupakan salah satu plugin yang banyak digunakan pada form, sebagai pengganti dropdown select di aplikasi web. Select2 memberikan kemudahan kepada user, karena kita bisa memilih data dengan memasukkan pencarian pada dropdown tersebut. Fitur ini sangatlah membantu karena kita tidak perlu menscroll dan memilih data ketika sumber data jumlah nya cukup banyak.

Sesuai dari judul artikel ini, kenapa menggunakan request ajax. Secara normal kita bisa mendefinisikan terlebih dahulu sumber data yang akan dipasangkan pada select2 tersebut, untuk jumlah data yang sedikit tidak masalah. Tetapi bagaimana jika data yang akan dipasang berjumlah ribuan, atau puluhan ribu. Hal ini tentu akan membuat load halaman pada lokasi di select2 tersebut akan sangat berat. Jika kita menggunakan ajax, client akan mengirimkan sebuah request pada fungsi yang digunakan untuk memanggil sumber data disaat user melakukan pencarian di select2 tersebut. Hal ini tentunya akan membuat halaman yang di load  dan menjadi lebih ringan.

Membuat Dropdown Select2 dengan Request Ajax dan Php

Membuat Dropdown Select2 dengan Request Ajax dan Php

Membuat Dropdown Select2 dengan Request Ajax dan Php

Langsung saja kita mulai untuk pengkodingannya, pertama tama kita download terlebih dahulu plugin select2 dari website resminya disini. Select2 yang saya gunakan adalah versi 4.0.3. Pasangkan javascript dan css pada layouts aplikasi kita.

Membuat Dropdown Select2 dengan Request Ajax dan Php

Memasang javascript Select2 pada layout

Membuat Dropdown Select2 dengan Request Ajax dan Php

Memasang css select2 pada layout

Struktur tabel yang saya gunakan tb_propinisi.

Kemudian kita buat sebuah form yang berisi dropdown, serta javascript yang digunakan untuk menginisialisasi select2 dengan request ajax. Option yang saya gunakan pada plugin select2 tersebut :

  1. Saya memberikan delay, sehingga request akan berjalan setelah 0.8 ms.
  2. Minimum huruf yang harus di input adalah 3 huruf.
  3. Saya tambahkan tombol untuk clear value pada select2 ini.

Sehingga tampilannya adalah sebagai berikut.

Membuat Dropdown Select2 dengan Request Ajax dan Php

Membuat Dropdown Select2 dengan Request Ajax dan Php

Buat file koneksi dengan menggunakan mysqli koneksi.php.

Kemudian buat sebuah file php dengan nama daftarProvinsi.php yang berisi fungsi untuk menampilkan data daftar propinsi dari database. Berikut adalah contoh scriptnya.

Seperti yang bisa dilihat di atas, data yang akan kita kirimkan berupa array dengan key name id dan text, keyname ini sudah ditentukan di website resmi select2.

Testing Kode Select2

Setelah semua file sudah sesuai, kita coba untuk mengetes form tersebut. Saya akan memasukkan beberapa kata kunci pada pencarian di select2 ini. Dan Secara otomatis select2 akan menampilkan beberapa data yang relevan dengan kata kunci yang saya masukkan.

Membuat Dropdown Select2 dengan Request Ajax dan Php

Membuat Dropdown Select2 dengan Request Ajax dan Php

Membuat Dropdown Select2 dengan Request Ajax dan Php

Request Header

Kita juga bisa melihat request yang berjalan pada debugger.

Membuat Dropdown Select2 dengan Request Ajax dan Php

Response

Mudah bukan 😀 , metode ini akan membuat load data pada form select2 menjadi lebih ringan untuk jumlah data yang banyak. Jika agan-agan membutuhkan source code, bisa cek link berikut https://mragus.com/source-code/. Semoga Tulisan saya ini dapat bermanfaat, tetap belajar dan selamat mencoba. Terimakasih.

Agus Wiji Suhariono

Memulai menulis Blog pada bulan November dari Tahun 2015. Penulis merupakan alumni dari Politeknik Negeri Malang angkatan 2011 Program Studi Manajemen Informatika, Jurusan Elektro. Penulis memulai menekuni dunia programming mulai tahun 2014 dan sekarang bekerja di Pemerintahan sebagai IT Staff.

You may also like...