Manipulasi Combobox dan Textbox dengan Ajax-JQuery

Sebenarnya saya sudah pernah menulis tutorial terkait manipulasi Combobox dengan Ajax dan JQuery di awal tahun 2013. Pada tutorial tersebut, sudah dijelaskan secara rinci beserta contohnya, bagaimana membuat ComboBox secara dinamis berdasarkan isi dari ComboBox lainnya. Namun demikian, ternyata masih banyak yang menanyakan bagaimana jika kita ingin menampilkan datanya bukan dalam bentuk ComboBox, tapi TextBox. Ya sebenarnya caranya sama saja, tinggal ganti obyeknya. Tapi sepertinya tutorial ini harus dibuat, agar menjadi lebih jelas, sekaligus memperkaya contoh. Semoga tutorial manipulasi ComboBox dan TextBox dengan Ajax-JQuery ini bermanfaat.

Pada tutorial ini, kita akan menyajikan contoh sebuah ComboBox yang menampilkan data barang. Selanjutnya kita akan menampilkan kode barang, nama barang dan harga pada TextBox berdasarkan data barang yang dipilih. Data akan diambil dari database MySQL oleh PHP, tentunya dengan menggunakan konsep Ajax.

Dan berikut ini struktur dan isi tabel “barang” yang akan digunakan dalam tutorial ini. Silahkan buat tabel dan isi beberapa data menggunakan tools MySQL Client yang Anda punya.

manipulasi-combobox-textbox-dengan-ajax-jquery-mysql

Contoh Program

Untuk menampilkan data dari database ke combobox, pada dasarnya sama seperti menampilkan data seperti biasanya. Proses menampilkan data ke combobox dapat dilihat pada program 1 berikut ini. Pertama-tama kita lakukan koneksi ke database mysql, kita menggunakan fungsi mysqli_* yang merupakan pengembangan dari fungsi mysql_*. Menurut beberapa rujukan, fungsi ini performanya lebih baik dibanding fungsi mysql_*, dan juga dapat ditulis dengan gaya prosedural maupun object-oriented (OO). Untuk lebih mempermudah, pada contoh-contoh program di bawah ini, kita akan gunakan gaya prosedural.

Perhatikan baris ke-3 program di bawah ini. Untuk melakukan koneksi ke mysql menggunakan fungsi mysqli_connect() yang memiliki 6 (enam) parameter terkait dengan server MySQL yaitu hostname, username, password, nama database, port dan socket. Pada model object-oriented (OO), fungsi ini merupakan alias dari mysqli::__construct(). Baris ke-6 hingga ke-16 merupakan perintah yang akan dijalankan saat combobox barang dipilih atau berubah. Kita akan jelaskan nanti.

Program 1   
  1. <?php
  2. #koneksi
  3. $conn = mysqli_connect("localhost", "root", "qwerty", "demo");
  4. #akhir-koneksi
  5.  
  6. #action get barang
  7. if(isset($_GET['action']) && $_GET['action'] == "getBarang") {
  8. $kode_brg = $_GET['kode_brg'];
  9.  
  10. //ambil data barang
  11. $query = "SELECT kode_brg, nm_barang, harga FROM barang WHERE kode_brg='$kode_brg'";
  12. $sql = mysqli_query($conn, $query);
  13. $row = mysqli_fetch_assoc($sql);
  14. echo json_encode($row);
  15. }
  16. ?>
  17. <html>
  18. <head>
  19. <title>Contoh Manipulasi Combobox-Textbox dengan Ajax-JQuery</title>
  20. <script type="text/javascript" src="libs/jquery.min.js"></script>
  21. <script type="text/javascript">
  22. $(document).ready(function(){
  23. $('#kode_brg').change(function(){
  24. $.getJSON('index.php',{action:'getBarang', kode_brg:$(this).val()}, function(json){
  25. if (json == null) {
  26. $('#skode').text('');
  27. $('#nm_barang').val('');
  28. $('#harga').val('');
  29. } else {
  30. $('#skode').text(json.kode_brg);
  31. $('#nm_barang').val(json.nm_barang);
  32. $('#harga').val(json.harga);
  33. }
  34. });
  35. });
  36. });
  37. </script>
  38. </head>
  39. <body>
  40. <form>
  41. Pilih Barang
  42. <select name="kode_brg" id="kode_brg">
  43. <option value="">Pilih</option>
  44. <?php
  45. #ambil barang untuk combobox
  46. $query = "SELECT kode_brg, nm_barang FROM barang ORDER BY nm_barang";
  47. $sql = mysqli_query($conn, $query);
  48. while ($row = mysqli_fetch_assoc($sql)) {
  49. echo "<option value='$row[kode_brg]'>$row[nm_barang]</option>";
  50. }
  51. ?>
  52. </select>
  53. <span id="skode"></span>
  54. <input type="text" name="nm_barang" id="nm_barang" placeholder="Nama Barang"/>
  55. <input type="text" name="harga" id="harga" placeholder="Harga"/>
  56. </form>
  57. </body>
  58. </html>

Selanjutnya baris 18-59 pada dasarnya adalah perintah HTML (dan Javascript) untuk menampilkan obyek ComboBox dan TextBox di layar. Perhatikan baris 43-53. Pada baris tersebut, dibuat object ComboBox dengan tag <select> dengan atribut name “kode_brg” dan id juga “kode_brg”. Dalam sebuah halaman yang didalamnya terdapat interaksi antara HTML, PHP dan jQuery, penamaan komponen (obyek) menjadi hal yang sangat penting. JQuery mengakses suatu komponen (obyek), salah satunya menggunakan selector ID, sedangkan PHP dapat mengambil nilai inputan suatu form berdasarkan isi atribut “name” dari inputan tersebut.

ComboBox “kode_brg” akan diisi dengan data barang yang diambil dari tabel barang di MySQL. Baris 46-51 merupakan perintah untuk mengambil data barang dan menampilkannya di ComboBox. Perintah dimulai dengan membuat perintah query SELECT untuk pengambilan data (disimpan di variabel $query) yang selanjutnya dieksekusi dengan fungsi mysqli_query(). Setiap baris hasil eksekusi perintah query dikonversi ke dalam bentuk array dengan fungsi mysqli_fetch_assoc() dan ditampilkan ke ComboBox dengan atribut <option>. Nilai (value) dari atribut <option> adalah kode_brg dan caption (teks yang muncul di pilihan) adalah nm_barang.

ajax-combo-text-03

Sekarang kita akan bahas di sisi perintah jQuery-nya. Perhatikan baris ke-21. Pertama-tama kita harus menyertakan library jQuery terbaru. Pada contoh, kita sertakan library jQuery yang telah diunduh dari situs http://jquery.com dan diletakkan di folder “libs”. Jika ingin cara yang lebih praktis, kita dapat memanfaatkan library jQuery yang tersedia secara online di http://code.jquery.com/jquery.js secara langsung, tanpa perlu mengunduhnya terlebih dahulu. Namun demikian, pada cara kedua, kita harus terhubung secara online saat mencoba program kita.

ajax-combo-text-02

Ok lanjut. Selanjutnya bagian utama dari perintah jQuery. Perhatikan baris 22-38. Seluruh perintah Javascript yang berada di dalam fungsi $(document).ready(function(){ … }); akan dijalankan pada saat suatu halaman telah siap ditampilkan. Dalam program 1, perintah yang dijalankan adalah mengatur apa yang terjadi saat ComboBox “kode_brg” dipilih. Melalui perintah baris ke-24, kita memanfaatkan event change() pada selector #kode_brg. Event ini akan aktif saat nilai ComboBox mengalami perubahan.

Lalu apa yang terjadi saat terjadi perubahan (on change) nilai pada ComboBox ? Pada baris ke-25, melalui fungsi $.getJSON(), jQuery akan mengakses halaman index.php (halaman yang sama) dengan metode GET dan mengirimkan 2 parameter: ‘action’ dengan nilai ‘getBarang’ dan ‘kode_brg’ yang berisi sesuai dengan nilai ComboBox yang dipilih.

ajax-combo-text-01

Selanjutnya program berlanjut ke baris 7-16 dimana terdapat perintah PHP yang akan menangkap request dari jQuery (request metode GET). Untuk memastikan adanya request, digunakan pemeriksaan kondisi if (isset($_GET[‘action’]) && $_GET[‘action’]==’getBarang’]). Setelah itu, nilai kode_brg akan diambil dari parameter yang dikirim oleh jQuery (baris ke-8), dibentuk perintah query untuk mengambil data dari tabel barang, mengeksekusinya dengan fungsi mysqli_query() dan mengubahnya ke array dengan mysqli_fetch_assoc(). JSON adaah format default fungsi jQuery $.getJSON(). Oleh karena itu, digunakan fungsi json_encode() dari PHP untuk mengubah data array menjadi data berformat JSON (JavaScript Object Notation). Data JSON akan dikembalikan ke bagian jQuery yang memanggilnya (baris ke-25).

Kembali ke baris 25. Nilai JSON akan ditangkap oleh variabel ‘json’ dan selanjutnya dapat ditampilkan sesuai kebutuhan. Dalam hal ini, data kode_brg ditampilkan dalam bentuk text (baris ke-31), nama_brg dalam TextBox (baris ke-32) dan harga dalam bentuk TextBox (baris ke-33).

Silahkan program 1 dijalankan dan lihat hasilnya.

Kesimpulan

Secara sederhana, tutorial ini memberikan gambaran bagaimana memanipulasi ComboBox dan TextBox dengan menggunakan konsep Ajax dan library JQuery, tentu dengan bahasa pemrograman PHP. Contoh di atas menggunakan kasus sederhana menampilkan data barang berdasarkan pilihan ComboBox, namun dapat dikembangkan dan diterapkan untuk contoh kasus yang lainnya.

Download

Download Tutorial ini di link bawah ini.

Berbagi itu indah...Share on Facebook0Share on Google+2Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest1Digg this

9 comments

  1. Saya sudah mencoba script diatas, tapi tidak berjalan sebagaimana mestinya, program berhasil menampilkan nama barang di combobox, tapi saat kita memilih salah satu nama barang, textbox nama barang dan harga tetap tidak terisi apa apa. Lalu saya coba copy paste scrip diatas ‘as is’, hasilnya tetap sama, combobox ada isinya, tapi saat dipilih nothings happened !, apakah karena versi jquery.js nya berbeda ya ?

  2. Sebelumnya saya mengucapkan terimakasih atas Fast Reply yang Sdr. Achmatim kirimkan ke email. Errornya sudah berhasil diatasi, ternyata memang bad jquery.js files (i think i messed it up somewhere in the middle of learning). Setelah saya menggantinya dengan copy paste dari hasil download, semuanya berjalan lancar, Sukses selalu ya Pak Achmatim, and Viva BUDILUHUR, nb : saya juga almamater BudiLuhur Angkatan 1993 (a bit old ya hahahah). saat ini saya bekerja sebagai konsultan manajemen dan keuangan, bahasa programming yang saya kuasai hanya cobol,clipper/foxpro, pada jaman saya dulu ini yg terpopuler, saat ini hanya terpakai saat perusahaan ingin migrasi dari aplikasi yg dibangun ke clipper/foxpro ke web, saya berfungsi untuk membedah aplikasi lama dan menjelaskannya ke team developer baru. Karena keterbatasan waktu saya kurang mengikuti perkembangan bahasa programming yg terbaru. Tetapi karena membaca penjelasan Pak Ahcmatim yang rinci dan terstruktur (saya senang dengan pola procedural yg anda pakai utk menjelaskan), saya terangsang untuk kembali belajar, mumpung ada waktu untuk belajar kembali. Sekali lagi terimakasih banyak Pak Achmatim

  3. maaf sebelumnya
    saya mempunyai masalah yang sama dengan apa yang di alami oleh mas steve
    apakah ini jg karena versi jquerynya yang bermasalah?
    mohon bantuannya

  4. Bagaimana cara menampilkan data dalam bentuk tabel berdasarkan item dari combobox yang di pilih,,mohon bantuanya

  5. misalnya saya ingin menampilkan data siswa perkelas dan kelas nya di pilih dari combobox dan item comboboxnya berasal dari database

  6. pak,udah saya coba ,,itu hanya berhasil untuk objek textbox,,sedangkan saya hanya mau ngabil nilai id kelasnya untuk menampikan data berdasarkan kelas,mohon bantuannya

  7. pak saya coba script nya untuk tampilkan satu row berhasil, setelah select kode, maka detail nya muncul.
    namun ada kendala waktu coba kombinasikan dengan penambahan banyak barang, saat mencoba menambahkan barang baru di row berikutnya.

    $(‘#plus’).click(function(e){
    var newitem = $(‘#items #item1’).html();
    $(‘#items’).append(” + newitem + ”);

    });

    hasilnya semua dari row sebelumnya tercopy kebawah, jadi sebelum di select sudah keluar hasil dari tampilan row atasnya.
    yang mau dibuat, harusnya di row baru tambahan dibawahnya kosongan dulu, baru setelah di select kode barangnya detail nya baru muncul.

    mohon bantuannya, terimakasih.

  8. agan yg terhormat,
    sya udah coba buat samakan. plus js versi 3.
    tapi pas klik item combo box tidak ada perubahan ke text area nya?
    helpp..
    suka ma web nya..
    Terimakasih bnyak,

Leave a Reply

Your email address will not be published. Required fields are marked *