Scribd
Unggah
573 tayangan6 halaman

Manipulasi Combobox Dan Textbox Dengan Ajax JQuery

Teks ini menjelaskan cara manipulasi combobox dan textbox dengan menggunakan ajax dan jquery di PHP. Tutorial ini mendemonstrasikan contoh program yang menampilkan data barang dari basis data MySQL ke dalam combobox dan textbox berdasarkan pilihan item di combobox.

Diunggah oleh

Achmad Solichin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
573 tayangan6 halaman

Manipulasi Combobox Dan Textbox Dengan Ajax JQuery

Teks ini menjelaskan cara manipulasi combobox dan textbox dengan menggunakan ajax dan jquery di PHP. Tutorial ini mendemonstrasikan contoh program yang menampilkan data barang dari basis data MySQL ke dalam combobox dan textbox berdasarkan pilihan item di combobox.

Diunggah oleh

Achmad Solichin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

Manipulasi Combobox dan Textbox dengan Ajax-JQuery | Achmatim.

Net

Manipulasi Combobox dan Textbox


dengan Ajax-JQuery
Tutorial ini ditulis oleh Achmad Solichin
dan sudah dipublikasikan di http://achmatim.net pada tanggal 15 Januari 2015
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.

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
Halaman 1 dari 6

Manipulasi Combobox dan Textbox dengan Ajax-JQuery | Achmatim.Net

prosedural.
Perhatikan baris ke-3 program di bawah ini. Untuk melakukan koneksi ke mysql
menggunakan fungsi mysqli_connect()1 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() 2. Baris ke-6
hingga ke-16 merupakan perintah yang akan dijalankan saat combobox barang dipilih atau
berubah. Kita akan jelaskan nanti.
Program 1: Menampilkan Data Propinsi di Combobox
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2

<?php
#koneksi
$conn = mysqli_connect("localhost", "root", "qwerty", "demo");
#akhir-koneksi
#action get barang
if(isset($_GET['action']) && $_GET['action'] == "getBarang") {
$kode_brg = $_GET['kode_brg'];
//ambil data barang
$query = "SELECT kode_brg, nm_barang, harga FROM barang WHERE
kode_brg='$kode_brg'";
$sql = mysqli_query($conn, $query);
$row = mysqli_fetch_assoc($sql);
echo json_encode($row);
exit;
}
?>
<html>
<head>
<title>Contoh Manipulasi Combobox-Textbox dengan AjaxJQuery</title>
<script type="text/javascript"
src="libs/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#kode_brg').change(function(){
$.getJSON('index.php',{action:'getBarang',
kode_brg:$(this).val()}, function(json){
if (json == null) {
$('#skode').text('');
$('#nm_barang').val('');
$('#harga').val('');
} else {
$('#skode').text(json.kode_brg);
$

http://php.net/manual/en/function.mysqli-connect.php
http://id1.php.net/manual/en/mysqli.construct.php
Halaman 2 dari 6

Manipulasi Combobox dan Textbox dengan Ajax-JQuery | Achmatim.Net

33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

('#nm_barang').val(json.nm_barang);
});

$('#harga').val(json.harga);

});

});
</script>
</head>
<body>
<form>
Pilih Barang
<select name="kode_brg" id="kode_brg">
<option value="">Pilih</option>
<?php
#ambil barang untuk combobox
$query = "SELECT kode_brg, nm_barang FROM barang
ORDER BY nm_barang";
$sql = mysqli_query($conn, $query);
while ($row = mysqli_fetch_assoc($sql)) {
echo "<option
value='$row[kode_brg]'>$row[nm_barang]</option>";
}
?>
</select>
<span id="skode"></span>
<input type="text" name="nm_barang" id="nm_barang"
placeholder="Nama Barang"/>
<input type="text" name="harga" id="harga"
placeholder="Harga"/>
</form>
</body>
</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
Halaman 3 dari 6

Manipulasi Combobox dan Textbox dengan Ajax-JQuery | Achmatim.Net

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.

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.

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.
Halaman 4 dari 6

Manipulasi Combobox dan Textbox dengan Ajax-JQuery | Achmatim.Net

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

Tutorial ini juga telah dipublikasikan di http://achmatim.net/2015/01/15/manipulasicombobox-dan-textbox-dengan-ajax-jquery/

Semoga tutorial ini bermanfaat untuk kita semua dan berbagilah hal baik ke sebanyakbanyaknya orang maka kebahagiaan akan menghampiri Anda. Satu Karya untuk Indonesia!

Halaman 5 dari 6

Manipulasi Combobox dan Textbox dengan Ajax-JQuery | Achmatim.Net

Referensi Terkait

Buku Gratis Pemrograman Web dengan PHP & MySQL. http://achmatim.net/bukugratis/pemrograman-web-dengan-php-dan-mysql/

PHP MySQLi Functions. http://id1.php.net/manual/en/book.mysqli.php

Situs Resmi JQuery. http://jquery.com

Tentang Penulis
Achmad Solichin. Adalah Lulusan Teknik Informatika, Fakultas Teknologi
Informasi, Universitas Budi Luhur, Jakarta (S1, 2005) dan Magister Teknologi
Informasi, Universitas Indonesia (S2, 2010). Saat ini sedang menempuh
program Doktoral dalam bidang Ilmu Komputer di Universitas Gadjah Mada,
Jogjakarta. Kegiatan sehari-hari adalah sebagai Dosen di Universitas Budi
Luhur (http://www.budiluhur.ac.id). Kegiatan lain aktif sebagai programmer,
web developer, system analyst, konsultan dan memberikan pelatihan di
berbagai bidang komputer serta membuat tutorial-tutorial praktis di bidang
komputer. Penulis memiliki situs utama di http://achmatim.net yang berisi berbagai tutorial
praktis di bidang komputer serta menyediakan buku gratis komputer. Penulis dapat
dihubungi melalui email di [email protected] dan [email protected], YM
achmatim, Facebook achmatim dan Twitter @achmatim.

Lisensi Dokumen
Seluruh isi dalam dokumen ini dapat digunakan, dimodifikasi dan
disebarluaskan secara bebas untuk tujuan pendidikan, pembelajaran dan
bukan komersial (non profit), dengan syarat tidak menghilangkan, menghapus atau
mengubah atribut penulis dokumen ini dan pernyataan dalam lisensi dokumen yang
disertakan di setiap dokumen. Tidak diperbolehkan mengkomersialkan tutorial ini kecuali
mendapatkan ijin terlebih dahulu dari penulis.

Halaman 6 dari 6

Anda mungkin juga menyukai