Menu Select Berantai Menggunakan Jquery dan PHP (Jquery Chained Select)

Membuat tampilan (antar muka) aplikasi web yang baik dan mudah dipahami memang selalu menjadi tantangan tersendiri bagi developer dan designer. Salah satunya adalah membuat menu select berantai dengan mengambil nilai dari database (remote).

Menu select berantai (chained select menu) kira-kira bentuknya seperti ini:
Jquery Chained Select

Di sebelah kiri adalah menu propinsi dan di sebelah kanannya adalah menu kabupaten. Daftar kabupaten muncul sesuai nama propinsi yang kita pilih. Tutorial ini menggunakan plugin jquery dari http://www.appelsiini.net/projects/chained. Kita akan menggunakan script remote dari plugin tersebut. Script remote tersebut digunakan khusus untuk membuat menu select berantai dengan nilai yang diambil dari database.

Langkah 1:
Buat Database dengan skema sbb:
skema database
Klik disini untuk mengimpor data ke database anda.

Langkah 2:
Seperti bisa dilihat di http://www.appelsiini.net/projects/chained. Script jquery remote ini menggunakan format json. Jadi ketika kita memilih propinsi Sumatera Utara (id = 2), maka script remote ini mengharapkan nilai json seperti dibawah ini. Nilai berikut didapat dari GET request ?propinsi=2 .

{
"466": "Kabupaten Labuhan Batu",
"467": "Kabupaten Tapanuli Utara",
"468": "Kota Tanjung Balai",
"469": "Kota Medan",
"470": "Kabupaten Asahan",
"471": "Kabupaten Batubara",
"472": "Kabupaten Dairi",
"473": "Kabupaten Deli Serdang",
"474": "Kabupaten Humbang Hasundutan",
"475": "Kabupaten Labuhan Batu Selatan",
"476": "Kabupaten Mandailing Natal",
"477": "Kabupaten Nias Selatan",
"478": "Kabupaten Padang Lawas",
"479": "Kabupaten Pakpak Bharat",
"480": "Kabupaten Samosir",
"481": "Kota Padang Sidempuan",
"482": "Kota Pematangsiantar",
"483": "Kota Tebing Tinggi",
"484": "Kota Binjai",
"485": "Kabupaten Serdang Bedagai",
"486": "Kabupaten Langkat",
"487": "Kabupaten Toba Samosir",
"488": "Kabupaten Karo",
"489": "Kabupaten Simalungun",
"490": "Kabupaten Nias Barat",
"491": "Kabupaten Tapanuli Tengah",
"492": "Kabupaten Labuhan Batu Utara",
"493": "Kabupaten Gunung Sitoli",
"494": "Kabupaten Nias",
"495": "Kabupaten Nias Utara",
"496": "Kabupaten Tapanuli Selatan",
"497": "Kabupaten Padang Lawas Utara",
"498": "Kota Sibolga"
}

Supaya lebih paham, kita langsung saja buat nama file json.php di folder chain (nama folder terserah anda) dan di dalamnya tulis kode berikut ini:

<?php

// Connect Database
$con = mysql_connect("localhost","root","");
if (!$con){die('Could not connect: ' . mysql_error());}
$selected = mysql_select_db("jquery_chained", $con) or die("Could not select jquery_chained");

// Query propinsi
$propinsi = $_GET['propinsi'];
$result = mysql_query("SELECT * FROM kabupaten WHERE id_propinsi = '$propinsi'");

$results_array = array();
while($row = mysql_fetch_array($result)) {
	$results_array[$row['id_kabupaten']] = $row['kabupaten'];
}

echo json_encode($results_array);

mysql_close($con);

Sekarang kita coba buka http://localhost/chain/json.php?propinsi=2
Anda akan melihat daftar kabupaten di propinsi dengan id_propinsi = 2 (Sumatera Utara) dengan format json seperti ini:
{"466":"Kabupaten Labuhan Batu","467":"Kabupaten Tapanuli Utara","468":"Kota Tanjung Balai","469":"Kota Medan","470":"Kabupaten Asahan","471":"Kabupaten Batubara","472":"Kabupaten Dairi","473":"Kabupaten Deli Serdang","474":"Kabupaten Humbang Hasundutan","475":"Kabupaten Labuhan Batu Selatan","476":"Kabupaten Mandailing Natal","477":"Kabupaten Nias Selatan","478":"Kabupaten Padang Lawas","479":"Kabupaten Pakpak Bharat","480":"Kabupaten Samosir","481":"Kota Padang Sidempuan","482":"Kota Pematangsiantar","483":"Kota Tebing Tinggi","484":"Kota Binjai","485":"Kabupaten Serdang Bedagai","486":"Kabupaten Langkat","487":"Kabupaten Toba Samosir","488":"Kabupaten Karo","489":"Kabupaten Simalungun","490":"Kabupaten Nias Barat","491":"Kabupaten Tapanuli Tengah","492":"Kabupaten Labuhan Batu Utara","493":"Kabupaten Gunung Sitoli","494":"Kabupaten Nias","495":"Kabupaten Nias Utara","496":"Kabupaten Tapanuli Selatan","497":"Kabupaten Padang Lawas Utara","498":"Kota Sibolga"}

Langkah 3:
Download script remote chained https://raw.githubusercontent.com/tuupola/jquery_chained/master/jquery.chained.remote.min.js
Buat file index.php dan tulis kode berikut:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Jquery Chained</title>
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="jquery.chained.remote.min.js"></script>
	
	<script>	
	$( document ).ready(function() {

		$("#kabupaten").remoteChained({
			parents : "#propinsi",
			url : "json.php",
			loading : "Memuat..."
		});

	});		
	</script>
	
	
</head>
<body>

<?php
// Ambil Semua Nilai Propinsi Untuk Select Menu
$con = mysql_connect("localhost","root","");
if (!$con){die('Could not connect: ' . mysql_error());}
$selected = mysql_select_db("jquery_chained", $con) or die("Could not select jquery_chained");
$result = mysql_query("SELECT * FROM propinsi");
?>

<select name="propinsi" id="propinsi">
	<option value="">--</option>
	<?php while($row = mysql_fetch_array($result)): ?>
		<option value="<?php echo $row['id_propinsi']?>"><?php echo $row['propinsi'] ?></option>	
	<?php endwhile ?>
</select>

<select name="kabupaten" id="kabupaten">
	<option value="">--</option>
</select>
	
</body>
</html>

Jika semuanya benar, anda akan melihat tampilan seperti ini:
Jquery Chained Select

Just My Note, Get Post from RSS in WordPress

		<!-- Begin -->
		<?php
		include_once(ABSPATH.WPINC.'/rss.php'); // path to include script
		$feed = fetch_rss('http://yourfeed.com'); // specify feed url
		$items = array_slice($feed->items, 0, 6); // specify first and last item
		?>
		<?php if (!empty($items)) : ?>
						
				<ul>			                
					<?php $hitung = 0; foreach ($items as $item): $hitung++;?>
					<li><a class="judulhome" href="<?php echo $item['link']; ?>" rel="bookmark"><?php echo $item['title']; ?></a></li>
					<?php endforeach; ?>
				</ul>
								
		<?php endif; ?>
		<!-- End  -->		

Bocah Kipas Angin Yang Bodoh

Dulu saya pernah ngepost di blog teman saya, judulnya sepuluh alasan tidak membeli macintosh. Ahahaha sebetulnya malu kalo diinget-inget, dulu kita orangnya negatif, kalo nggak suka ya mendingan dijelek-jelekin. Namanya juga bocah kipas angin (fanboy). Jadi harap maklum.

Baiklah, sekarang zamannya sudah berbeda, ceritanya saya dah banyak belajar. Walaupun masih pemula, saya sedikit-sedikit bisa lah mbikin website walaupun kurang rapi dan culun. Nah karena saya miskin, saya waktu itu belajarnya pakai PC Pentium Empat Seleron sama Windows bajakan. Kadang-kadang suka sok keren pake Linux, biar kalo ada orang mendekat kita bisa pamer lagi ngetik command di konsolnya. Padahal cuma ngetik ping google.com. Itu juga ga konek ke internet… huuu norak ya.

Kemudian setiap saya belajar dari screencast pasti tutorialnya pakai Macintosh. Selama ini saya ngetik kode (kalau kata teman saya nulis diari) pake notepad plus plus. Bukan pijat plus plus. Notepad plus plus ini cukup mumpuni. Sederhana, ringan dan gratis.

Kemudian saya melihat ada teman menggunakan apple macbook pro. Bagus bukan main ini. Kalau flipnya dibuka terus kamar lagi gelap, lampu di keyboard nyala. Waktu itu teman saya yang juga front end developer menggunakan Textmate untuk mengetik kodenya. Textmate itu cakep dan fungsional, pokoknya enak deh. Terus ada OmniGraffle yang cuma ada di Mac, disini kita bisa membuat sketsa design web kita dengan mudah.

Begitulah teman-teman, Macintosh itu tetap nomor satu untuk develop web, karena toolsnya banyak. Tapi jika teman-teman suka bermain game, maka Macbook Air itu hanya bisa dijadikan mousepad untuk mousenya PC. Apalagi jika teman-teman sukanya belanja di steam, wah sudah pasti Macbook teman-teman akan diolok-olok oleh pengguna Alienware.

Nah tapi itu kan cuma contoh bahwa membeli sesuatu harus sesuai kebutuhan. Jadi nggak ada yang baik dan buruk. Kalau mau facebookan sama twitteran doang ya beli aja netbook murah-murah yang kecil-kecil itu sudah cukup bgt. Kalau mau main game beli aja Alienware, harganya hampir sama lah kayak Apple tapi bisa main game kelas berat.

Sebetulnya Sepuluh Alasan Tidak Membeli Macintosh juga bisa dibalik menjadi Sepuluh Alasan Membeli Macintosh:

1. Super Mahal
Lhoo, barang bagus ya biasanya mahal.

2. Spare part sulit
Ndak juga, namun yang jelas mahal. Tapi ndak papa ini barang bagus jadi wajar kalo mahal, ngerrii lho.

3. Bukan Windows
Jaman sekarang ini, pake Windows itu harus latihan sabar. Spywarenya banyak (illvid-illvid apa itu suka nyebelin), loadingnya lambat, belum lagi ada virus. Jadi daripada pakai jendela yang nggak ada kusennya ya mendingan pakai yang lain.

4. Tidak bisa main game kebanyakan
Lha, sudah tua kebanyakan main game ndak baik… batuk ntar.

5. Tidak bisa dioprek
Lho, kalau mampu mbengkel ke Apple Store ngapain kotor-kotoran sendiri.

6. Pasti built up
Masa sudah beli mahal-mahal kok buatan sini apa buatan Cina, emoh… Kalau mahal ya mesti built up. ngerrii lho.

7. Sulit diupgrade
Siapa bilang, bisa kok, asal kantungnya tebal. Tapi ndak papa, ini barang bagus jadi wajar kalo mahal, ngerrii lho.

8. Tidak bisa beralih fungsi
Lha ini keliru, Mac Mini bisa dijadikan server lho. Terus Mac Pro itu walaupun mirip tong sampah, tapi specnya mumpuni banget. Bisa bikin server IBM di rak lain minder.

9. Service center kurang
Dulu iya mungkin, sekarang sih banyak. Tinggal pilih.

10. Accessories Mahal
Lhoo, barang bagus ya harus mahal, ngerrii lho.

Jadi teman-teman, tidak baik dan tidak produktif menjelek-jelekan produk lain ya. Posting saya yang dulu itu postingan bocah kipas angin, jadi ya mohon maklum. Eh tapi jangan salah saya suka lebih Android, ahahahahaha (tertawa antagonis).

Home Sweet Home Part 3

Sambil tetap memegang handycam, secara naluri aku merapat ke sudut terdekat. Entah kenapa sudut rak display elektronik ini terasa nyaman. Suara klik pertanda kaset mini DV selesai di rewind membuatku tersentak dari lamunan.
Jari-jari tanganku yang berkeringat karena tegang menekan tombol play di flip LCD handycam. Suara handycam kembali memecah kesunyian.
Baca lebih lanjut

Home Sweet Home Part 2

Tanpa pikir panjang, aku langsung masuk melalui pintu utama. Walaupun gelap dan dengan cahaya seadanya, aku tahu di sekitarku berantakan. Keranjang-keranjang belanja warna biru dan merah berserakan di sana-sini. Troli-troli berisi barang belanjaan juga banyak bertebaran, terguling, rodanya rusak dan pegangannya patah. Para pengunjung kelihatannya terburu-buru meninggalkan troli mereka.
Baca lebih lanjut

Home Sweet Home Part 1

Aku tidak tahu kenapa tiba-tiba mendapatkan diriku terbangun di antara tumpukan pakaian-pakaian ini. Kepalaku pusing, berarti mungkin aku pingsan karena terbentur sesuatu atau ada yang memukulku dari belakang. Yang jelas ruangan ini gelap gulita. Ada sedikit cahaya kedip-kedip di depan sana, mengingatkanku akan kebiasaan burukku berkunjung ke club tiap akhir pekan. Mungkin itu juga yang membuatku merasa sudah terbiasa dengan perasaan pusing ini. Alkohol dan terbentur kurang lebih sama.
Baca lebih lanjut

WordPress Auto Refresh Content DIV with Jquery

Have you ever visit websites that always refreshing their page periodically? Well, I have and I think it’s annoying. The refresh feature is done with javascript and its main purpose is to show visitor the latest article. This is a common practice in a news portal. While I like the idea of showing visitor the newest story, I hate that it must reload the entire site just to see a portion of website getting updated.

What if we can refresh just some parts of a website where visitors would see the latest update? In WordPress we can do that easily with jquery. Let’s say you have a home page that show your latest posts like a typical blog. This would be your typical loop in index.php.

<div class="latest-wrapper">

	<!-- Main Content -->
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="latest-row">
		<h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
		<?php the_content() ?>
	</div>
	<?php endwhile; else: ?>
	<h5>Sorry, no post here..</h5>
	<?php endif; ?>	
	<!-- /Main Content -->
	
</div>

What we need to do first is separate the code inside the div.latest-wrapper into another file. In your theme/yourtheme folder, create new file called main-content.php and then insert the code below into main-content.php.

<!-- Main Content -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="latest-row">
	<h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
	<?php the_content() ?>
</div>
<?php endwhile; else: ?>
<h5>Sorry, no post here..</h5>
<?php endif; ?>	
<!-- /Main Content -->

Open index.php and place code like this:

<div class="latest-wrapper" id="refresh">
	<?php get_template_part('main','content') ?>
</div>

What the get_template_part('main','content') function does is basically include code in main-content.php. Notice the id="refresh". We will use the id to identify div where we want to refresh our content.

Add jquery library in your header.php or footer.php. If you don’t know how to do this, you can Google wp_enqueue_script. Follow the WordPress codex to load jquery properly.

After that, in your theme/yourtheme folder create a file called latest.php. In latest.php insert

<?php 
// Load WordPress Engine
require('../../../wp-blog-header.php' );
get_template_part('main','content') 
?>

What the code does is load main-content.php and fetch the content. Since we load the latest.php from jquery load() function, we need to load wp-blog-header.php so latest.php will have access to wordpress API. Here, we use get_template_part().

After that, let’s add some simple jquery load() to refresh id="refresh" periodically.

<script type="text/javascript">
	var refreshId = setInterval(function() {
		$('#refresh').fadeOut("slow").load('<?php echo bloginfo('template_url')?>/latest.php').fadeIn("slow");
	}, 60000);
</script>

Notice the number 60000 will equal 60 seconds or 1 minute.
That’s it, try adding some posts and wait 1 minute to see if the content is refreshed and showing your latest posts.