This can be easily done using ajax. On change of the select, you can trigger a jQuery call to submit the selected value of the box to your PHP page, which has the MySQL to filter the table. The returned result will then be displayed on the page in the designated area.
Main Page:
pname-value
$[document].ready[function[] {
$['select[name="pname"]].on['change',function[] {
var curPname=$[this].val[];
$.ajax[{
type:'GET',
url:'urltotable.php?pname='+curPname,
success:function[data] {
$["div#query_results"].html[data];
}
}];
}];
}];
This is a simplified ajax call that will grab the value from the select box named "pname" and it will send that value to the "url" variable in the ajax call via "GET". This page can then take that variable via GET and use it to get the query results. Upon successful completion, it will display the results inside the div we added with the ID of "query_results".
You can easily customize the select to use your current PHP as listed above, also.
Now for the "urltotable.php" as we specified above, you can use the table query you have above, but just be sure to add the GET line to it so that your pname variable is accessible to the script:
$pname=$_GET["pname"];
For more information about Ajax for full features list, click here to read about Ajax in the jQuery documentation.
Kembali lagi Sahabat Programmer saya kali ini akan membagikan mengenai cara menampilkan data berdasarkan pilihan combo box di PHP. Saya akan membagikan dua contoh untuk menampilkan data pada tabel dan pada form. Contoh kasus yang akan kita pelajari adalah terkait akademik untuk mahasiswa dan jurusan.
Artikel terkait : Menampilkan data dari database ke Combobox PHP
Pada contoh pertama kita akan buat list jurusan pada combo box yang diambil dari database. Lalu kemudian ketika kita memilih salah satu pilihan jurusan pada combo box tersebut lalu menekan tombol pilih, maka tabel akan menampilkan data berdasarkan pilihan jurusan yang kita pilih.
Pada contoh kedua kita membuat list NIK mahasiswa pada combo box yang datanya langsung diambil dari database. Ketika salah satu NIK dipilih dan kemudian tombol pilih ditekan maka akan menampilkan data mahasiswa tersebut pada form yang tersedia.
Baca juga : Membuat CRUD sederhana dengan PHP
Pada tutorial ini juga saya menggunakan Bootstrap untuk membuat tampilan tabel dan form nya bisa lebih bagus. Kalian bisa pelajari Framework CSS Bootstrap pada situs ini, saya sudah banyak membuat konten terkait ini.
- Konfigurasi Database
- Buat File Koneksi Database
- Konfigurasi Framework Bootstrap
- Menampilkan Data pada Tabel berdasarkan pilihan combo box
- Menampilkan Data pada Form berdasarkan pilihan combo box
- Download Source Code
- Nonton Tutorial di Youtube
Konfigurasi Database
Kita akan membuat database mysql dengan nama akademik. Kemudian kita membuat dua tabel yaitu tabel mahasiswa dan jurusan. Desain database yang kita buat seperti pada gambar dibawah
Buat Database
Tahap pertama kita buat database akademik. Perintah sql nya seperti berikut
create database akademik;Gunakan database akademik
use akademik;Buat Tabel
Tahap selanjutnya kita membuat tabel didalam database akademik
Tabel Jurusan
create table jurusan [
kode_jurusan char[2] not null primary key,
nama_jurusan varchar[50] not null
];Pelajari : Cara membuat tabel di mysql
Tabel Mahasiswa
create table mahasiswa [
nik char[10] not null primary key,
nama varchar[50] not null,
jk char[1],
tanggal_lhr date,
jurusan char[2],
umur int,
CONSTRAINT jurusan FOREIGN KEY [`jurusan`] REFERENCES `jurusan` [`kode_jurusan`]
];Masukan contoh data kedalam tabel
Insert data ke tabel jurusan
insert into jurusan [kode_jurusan,nama_jurusan]
values ['TI','Teknik Informatika'],
['SI','Sistem Informasi'],
['MI','Manajemen Informatika'],
['TK','Teknik Komputer'];Insert data ke tabel mahasiswa
INSERT INTO mahasiswa
VALUES ['135410156','Ahmad Riko','1','1995-02-23','TI',22],
['135610157','Dahlan Iskan','1','1998-03-26','SI',20],
['135410189','Wawan Setiawan','1','1993-02-13','TI',23],
['135310156','Safitri Ayu','2','1995-09-01','TK',22],
['135310150','Rian Hidayat','1','1997-08-05','TK',20],
['135510920','Dani Hermawan','1','1996-05-05','SI',23],
['135518322','Nita Daniyatun','2','1994-09-05','TI',23],
['135518900','Mili Wilian','2','1995-10-08','SI',22],
['135510190','Marshel Saraun','1','1993-10-23','MI',23],
['135510191','Nacha Saraun','2','1995-01-13','MI',20],
['135558944','Bayu Mandalika','1','1997-01-15','SI',19],
['158984545','Juan Burnama','1','1993-01-20','SI',24],
['158549583','Candra Sidauruk','1','1994-10-22','TK',23],
['136349343','Kory Ubi','2','1992-10-29','MI',25],
['147343998','Chika Lestari','2','1996-11-12','MI',21];Buat File Koneksi Database
Pada tahap ini kita buat file untuk menghubungkan aplikasi PHP kita dengan database akademik yang telah kita buat.
Konfigurasi Framework Bootstrap
Selanjutnya kita buat konfigurasi bootstrapnya dulu, ada dua cara untuk menggunakan bootstrap yang pertama menggunakan metode CDN [Content Delivery Network] dengan menggunakan metode ini syaratnya komputer kita harus terkoneksi dengan internet karena file-file bootstrap yang kita perlukan akan di load melalui jaringan internet. Untuk menggunakannya cukup deklarasi pada bagian
Metode yang kedua adalah dengan cara kita mendownload langsung bootstrapnya melalui situs resminya. Kemudian kita ektrak pada file projek aplikasi kita didalam folder htdocs.
Untuk menggunakannya kita hanya cukup load CSS nya pada bagian
Untuk penjelasan lebih detail saya sudah bahas pada artikel ini : Cara menggunakan bootstrap
Setelah konfigurasi database dan bootstrapnya, sekarang kita bisa membuat file PHP untuk menampilkan data pada tabel berdasarkan pilihan combo box.
Buat file dengan nama index.php
Menampilkan Data pada Tabel berdasarkan pilihan Combo Box di PHP
Chủ Đề