Menampilkan data otomatis di Pilihan Combobox Menggunakan Ajax

Sudah tidak asing lagi di dengar soal menampilkan data secara otomatis saat memilih data di combobox, dimana kita memilih data yang di combobox secara otomatis data yang terkait akan tampil di form yang sudah kita siapkan. padahal sudah banyak tutorial tentang ini berterbaran di google tetapi masih juga ada yang bertanya bagai mana cara membuatnya. Untuk itu mimin buat tutorial ini semoga dapat di pahami oleh temen-temen yang mencari tutorial tentang menampilkan data secara otomatis saat pilih data di combobox.

Untuk itu mimin akan membagikan tutorial yang akan diterapkan dengan bahasa pemrograman PHP dan Ajax , untuk databasenya kita menggunakan database pada umumnya yaitu mariaDB (MySQL) yang mudah dipahami dan dipelajari. Untuk proses saat kita memilih data value di combobox dan akan dikirim dan di eksekusi oleh Ajax, maka jika data yang kita pilih tadi di ketemukan maka data akan ditampilkan di form input yang sebelumnya sudah dibuat atau di rancang

Langsung saja bagaimana cara menampilkan data secara otomatis di pilihan combobox Menggunakan Ajax

1.  Siapkan database dan tabelnya serta jangan lupa sudah ada record data di dalam tabelnya

2. Koneksi ke Database

Pertama kali yang dilakukan adalah melakukan koneksi ke database, yang berfungsi untuk menghubungkan program kita kedalam database yang dimana untuk penyimpanan data anda. Selanjutnya kita membuat file php yang bernama koneksi.php Berikut ini adalah sourcodenya :

3. Proses Eksekusi/Pengecekan dengan Ajax

Selanjutnya kita akan membuat sebuah file baru untuk memproses data yang dikirimkan dari combobox nip, dan selanjutnya di proses/cek ke database dan kemudian data akan dikembalikan dalam json. buatlah file dengan nama cek_data.php, ketikkan kode berikut :

4. Membuat Form untuk tampilannya

Form ini berfungsi untuk menampilkan data di database yang menjadi wadah segaligus menampung hasil data terkait yang dipilih. buatlah sebuah file dengan nama index.php, dan isikan dengan script berikut ini :

Berikut ini adalah hasil eksekusi dari program di atas:

menampilkan-data-otomatis-di-combobox-dengan-ajax-2

Nah mudah bukan? coba di coba dan di praktekan sendiri semoga bermanfaat. Bagi yang masih bingung silahkan tanyakan di dalam kolom komentar dibawah ini. #GoodLuck

Ahmad Adzan Azari

Ahmad Adzan Azari

Berhentilah mengungkapkan alasan untuk kegagalanmu. Sebab berhenti beralasan merupakan rahasia tersembunyi dari kesuksesan.

Kasih Komentar Gan