Pernahkah anda lihat informasi disebuah website yang muncul setelah kita memilih judul di comboboxnya? Contoh realnya adalah anda memilih judul sebuah film dalam combox, maka informasi detail film yang kita pilih akan muncul dibawahnya. Nah kira kira seperti itulah yang akan kita buat.
Secara umum, langkah langkahnya adalah sebagai berikut :

1. Buat tabel film
2. Buat form combobox yang berisi idfilm dan judulfilm. Data ini diambil dengan fungsi combo_film()
3. buat div info untuk menampung informasi yang diambil dari database.
4. Buat code ajax di atas form dengan memanfaatkan jQuery.
5. Buat skrip php yang melakukan query mengambil informasi detail yang sesuai dengan idfilm yang dipilih.

Tampilan dari Webnya adalah sbb:

Tampilan Combobox Ajax

Tampilan Combobox Ajax

Tabel film
Tabel yang akan kita pakai adalah tabel film yang berisi informasi judul, poster dan deskripsi dari film.

CREATE TABLE IF NOT EXISTS `film` (
  `idfilm` int(11) NOT NULL AUTO_INCREMENT,
  `judul` varchar(100) NOT NULL,
  `poster` varchar(50) NOT NULL,
  `sinopsis` text NOT NULL,
  PRIMARY KEY (`idfilm`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

Form combobox

<form  class="form-horizontal" method="POST" id="form1" action="#">
	<legend>
		<?=$aksi
		?>
		Pilih Film
	</legend>

	<div class="control-group">
		<label class="control-label" for="idfilm">film</label>
		<div class="controls">
			<select id='idfilm' name='idfilm'>
				<?php
//2) panggil fungsi combo_film() 
				combo_film();
				?>
			</select>
		</div>
	</div>
 <!--3) id='info' untuk menampung hasil dari ajax, menampilkan 
   detail film --> 
	<div id='info' class="control-group">

	</div>

</form>

4. Buat code ajax

$(document).ready(function() {
$("#idfilm").change(function() {
		var idfilm = $("#idfilm").val();
			
		$.ajax({
			url : "inc/get_film.php",
			data : "idfilm=" + idfilm,
			success : function(data) {
				$("#info").html(data);
			
			}
		});
	}); 
	});

5. buat code get_film.php

include('../inc/config.php');

$idfilm=$_GET['idfilm'];
//echo $idfilm;
		         	$sql_film="select *
            	from film where idfilm='$idfilm' ";
				
            	$result=mysql_query($sql_film) or die(mysql_error());
while($rows = mysql_fetch_array($result)){

$hasil=$hasil." <div class=\"row\">
	<div class=\"span8\">
		<div class=\"row\">
			<div class=\"span8\">
				<h4>$rows[judul]</h4>
			</div>
		</div>
		<div class=\"row\">
			<div class=\"span2\">
				 <img src=\"image/$rows[poster]\"  class=\"img-polaroid\">
			</div>
			<div class=\"span6\">
				<p align='justify'>
					$rows[sinopsis]
				</p>
				
				
			</div>
		</div>
</div>
</div>";

}
echo $hasil;

Demo dan Download
Download source code disini dan coba demonya disini.

Penulis: Candra Adi Putra

CandraLab Studio adalah Software house di Yogyakarta, Indonesia yang fokus ke aplikasi Mobile (Android) dan Web . Hubungi saya di candraadiputra(at) gmail.com

Tagged on:         

4 thoughts on “Menampilkan Info Detail berbasis Combobox dan Ajax

  • 28 October , 2014 at 12:45 am
    Permalink

    mas bagaimana caranya kalau yang di tampilkan itu tabel

    Reply
  • 23 January , 2014 at 1:25 pm
    Permalink

    error gan yang di combo.php,
    Notice: Undefined variable: aksi in C:\xampp\htdocs\comboajax\combo.php on line 25

    Reply
  • 23 October , 2013 at 3:29 pm
    Permalink

    mas klo saya mau buat combobox nya lebih dari 2 apa yg harus saya lakukan ya?

    Reply

Tinggalin komentar dong!