Menampilkan Info Detail berbasis Combobox dan Ajax

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:

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.