Membuat Dynamic Dropdown List dengan PHP dan MySQL

by pino · May 5, 2023

4.75 / 5 5
1 / 5
2 / 5
3 / 5
4 / 5
5 / 5

4 votes, 4.75 avg. rating (94% score)

Membuat Dynamic Dropdown List dengan PHP dan MySQL. Kali ini saya akan membuat sebuah tutorial tentang bagaimana cara untuk membuat sebuah Dynamic Dropdown List dengan PHP dan data di ambil dari Database MySQL.

Seperti pada judul tutorial ini yaitu Dynamic yaitu data bisa merubah-ubah sesuai dengan data yang ada di Database MySQL. Jika data di Database di tambah, maka jumlah List di dropdown juga akan bertambah, begitu juga sebaliknya jika ada data yang dihapus, maka List akan berkuarang.

Oke, langsung saja kita mulai. Pertama buat dahulu sebuah database di phpMyAdmin, dalam kasus ini saya membuat Database dengan nama tutorialweb.

Selanjutnya dumping script SQL di bawah ini:

CREATE TABLE `jurusan` (
  `nama_id` int(11) NOT NULL auto_increment,
  `jurusan_nama` varchar(32) NOT NULL,
  PRIMARY KEY  (`nama_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;
INSERT INTO `jurusan` VALUES (1, 'Teknik Komputer & Jaringan');
INSERT INTO `jurusan` VALUES (2, 'Multimedia');
INSERT INTO `jurusan` VALUES (3, 'Akuntansi');
INSERT INTO `jurusan` VALUES (4, 'Perbankan');
INSERT INTO `jurusan` VALUES (5, 'Pemasaran');

CREATE TABLE `jurusan` (

`nama_id` int(11) NOT NULL auto_increment,

`jurusan_nama` varchar(32) NOT NULL,

PRIMARY KEY (`nama_id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

INSERT INTO `jurusan` VALUES (1, 'Teknik Komputer & Jaringan');

INSERT INTO `jurusan` VALUES (2, 'Multimedia');

INSERT INTO `jurusan` VALUES (3, 'Akuntansi');

INSERT INTO `jurusan` VALUES (4, 'Perbankan');

INSERT INTO `jurusan` VALUES (5, 'Pemasaran');

Jika sudah Anda akan mendapatkan sebuah Table dengan nama jurusan, dan sudah berisi beberapa data jurusan. Klik tombol Browse, dan akan mendapatkan tampilan seperti di bawah ini:

Selanjutnya kita akan membuat script untuk menampilkan data nama-nama jurusan di atas dengan menggunakan Dropdown List dengan tag <select>. Dan berikut ini scriptnya:

<html>
<head>
	<title>Dinamic List by TUTORIALWEB.NET</title>
</head>
<p>
<form>
Pilih Jurusan : 
<select name="jurusan">
	<option>--- Pilih Jurusan ---</option>
	<?php
	mysql_connect("localhost", "root", "root");
	mysql_select_db("tutorialweb");
	$sql = mysql_query("SELECT * FROM jurusan ORDER BY jurusan_nama ASC");
	if(mysql_num_rows($sql) != 0){
		while($row = mysql_fetch_assoc($sql)){
			echo '<option>'.$row['jurusan_nama'].'</option>';
		}
	}
	?>
</select>
<input type="submit" name="submit" value="OK" />
</form>
</p>
</html>

<html>

<head>

<title>Dinamic List by TUTORIALWEB.NET</title>

</head>

<p>

<form>

Pilih Jurusan :

<option>--- Pilih Jurusan ---</option>

<?php

mysql_connect("localhost", "root", "root");

mysql_select_db("tutorialweb");

$sql = mysql_query("SELECT * FROM jurusan ORDER BY jurusan_nama ASC");

if(mysql_num_rows($sql) != 0){

while($row = mysql_fetch_assoc($sql)){

echo '<option>'.$row['jurusan_nama'].'</option>';

}

</select>

</form>

</p>

</html>

Jangan lupa simpan dengan nama index.php

Sedikit penjelasan terntang script di atas:

Baris 12 - 13 : melakukan koneksi ke database
Baris 14 : melakukan Query dengan men SELECT semua data yang ada pada table jurusan
Baris 16 : melakukan perulangan while dan mengambil data dari Query pada baris ke 14
Baris 17 : print hasil output.

Yups, sampai disini dulu tutorial kali ini. Silahkan anda mencobanya sendiri, jangan di lihat saja karena akan terasa sulit. Jadi cobalah…

Jika Anda menyukai artikel ini silahkan tinggalkan komentar atau berlangganan RSS feed untuk mendapatkan update terbaru artikel dari kami.

iyan says:

July 7, 2022 at 1:41 pm

bang admin ada artikel buat bkin katalog ga?
tapi data katalognya dari database
dan tampilannya pengen berbentuk icon

Reply
- pino says:
  
  July 7, 2022 at 9:15 pm
  
  untuk dari database blum buat gan..
  ini yg dari session bisa lihat disini http://tutorialweb.net/mini-toko-online-dengan-php-dan-mysql-freebies/
  
  Reply
aziz says:

November 25, 2022 at 2:09 pm

alhamdulillah terbantu…

Reply
- pino says:
  
  November 25, 2022 at 5:14 pm
  
  semoga bermanfaat gan..
  
  Reply
Kiky says:

July 7, 2022 at 9:26 am

lalu bagaimana cara mendapatkan nilainya?,,

Reply
- pino says:
  
  July 7, 2022 at 9:57 am
  
  echo '<option value="'.$row['nama_id'].'">'.$row['jurusan_nama'].'</option>';
  
  1
  
  echo '<option value="'.$row['nama_id'].'">'.$row['jurusan_nama'].'</option>';
  
  Reply

yufita says:

July 13, 2022 at 10:41 pm

mau tanya lagi ni pak pino….pada form Tambah Data, aku udah bisa tampilin list menu kayak diatas,,udah bisa nyimpen ke database juga kalo salah satu data dipilih,,,tapi pada form Ubah Data tu gimana caranya kalo saya mau menampilkan data dari list menu yang udah terpilih tadi tetapi tetep ada pilihan list menu yang lain…
soalnya yang saya buat pada form Ubah Data tu list menunya masih sama dengan yang di Tambah Data, jadi saya harus milih ulang lagi dan gak tau data sebelumnya tu yang mana gitu…maaf kalo pertanyaannya muter”…mohon bantuannya,,, :sorry

pino says:

July 14, 2022 at 3:12 pm

<?php
echo '<option value="'.$row['nama_id'].'" ';
if($row['nama_jurusan'] == 'opsi_anda_disini'){ echo 'selected'; )
echo '>'.$row['jurusan_nama'].'</option>';
?>

<?php

echo '<option value="'.$row['nama_id'].'" ';