Membuat Script Notifikasi Seperti Facebook dengan jQuery dan PHP

Di facebook jika kita ada pesan baru, walaupun halaman gak direfresh maka akan muncul angka jumlah pesan dengan latar belakang merah. Ketika diklik akan mucul list pesan terbaru dari siapa dan kapan. Nah mari kita coba membuat notifikasi seperti facebok tersebut dengan menggunakan jQuery.

Struktur tabel_pesan di database MySQL adalah sebagai berikut :

1	--
2	-- Table structure for table `tabel_pesan`
3	--
4
5	CREATE TABLE `tabel_pesan` (
6	`nomor` int(10) NOT NULL auto_increment,
7	`waktu` varchar(20) NOT NULL,
8	`dari` varchar(50) NOT NULL,
9	`kepada` varchar(50) NOT NULL,
10	`pesan` text NOT NULL,
11	`sudahbaca` varchar(1) NOT NULL,
12	PRIMARY KEY  (`nomor`)
13	) ;
	view plain | print | ?

Pada struktur tabel di atas, untuk mendeteksi sudah terbaca atau belum adalah pada field sudahbaca, bernilai 'N' jika belum dan 'Y' jika sudah dibaca.
Sekarang kita lihat kode jQuery untuk mengecek jika ada pesan terbaru.

1	function cek(){
2	$.ajax({
3	url: "cekpesan.php",
4	cache: false,
5	success: function(msg){
6	$("#notifikasi").html(msg);
7	}
8	});
9	var waktu = setTimeout("cek()",3000);
10	}
	view plain | print | ?

Pada kode di atas kita melakukan proses request dengan ajax ke file cekpesan.php. fungsi setTimeout() berfungsi untuk menjalankan fungsi cek() terus berulang setiap 3000 milidetik atau 3 detik. Untuk Belajar jQuery silahkan baca di pengenalan jQuery dan Tutorial jQuery Ajax.
Berikut kode cekpesan.php

1	<?php
2	session_start();
3	include "config.php";
4	$userid = $_SESSION['userid'];
5	$pesan = mysql_query("SELECT nomor FROM tabel_pesan
6	WHERE kepada='$userid' and sudahbaca='N'");
7	$j = mysql_num_rows($pesan);
8	if($j>0){
9	echo $j;
10	}
11	?>
	view plain | print | ?

Pada kode diatas kita melakukan query, cek jika ada pesan untuk $userid dan belum dibaca (sudahbaca='N'). $userid kita dapat dari variabel $_SESSION yang sudah kita set di halaman utama. Bagaimana cara menggunakan $_SESSION silahkan baca di artikel Membuat Login Multi User dengan PHP.
Untuk database dan kode lengkapnya silahkan download Source Code

Refrensi

Read More

Membuat GIS Google Map Marker Multi Icon dengan jQuery, PHP dan MySQL

Kali ini kita akan membuat aplikasi GIS dengan Google Map API, di mana aplikasi GIS ini, kita bisa membuat marker pada map, marker yang dibuat bisa macam-macam gambar iconnya, tergantung jenis lokasinya, apakah bandara, mesjid, restoran, dan lainnya. Setelah memberi tanda atau marker, kita bisa memberi nama lokasi tersebut dan juga deskripsinya, kemudian kita simpan ke database.

Pada aplikasi GIS ini juga, kita bisa menampilkan keseluruhan marker yang telah disimpan di database MySQL tersebut dengan bantuan PHP dan JSON jQuery. Mari kita lihat.
Algoritma membuat aplikasi GIS ini hampir sama dengan tutorial sebelumnya, Membuat GIS Google Map Seperti Wikimapia dengan jQuery dan Membuat Geographic Information System (GIS) Sederhana dengan Google Map dan Ajax jQuery, silahkan dibaca-baca di situ tutorial dengan google map. Untuk icon-icon yang digunakan bisa buat sendiri atau anda download di http://code.google.com/p/google-maps-icons/
Silahkan Download Source Codenya


Refrensi

Read More

Code sederhana registrasi pendaftaran dengan AJAX jQuery dan PHP serta aktivasi via email

Pernah mendaftar social networking ? Facebook atau Twitter atau milis-milis dan forum-forum ?? Anda mesti aktifkan account anda lewat email bukan ? apabila anda tidak mengaktifkan,,maka account yang baru saja anda buat tidak akan aktif. Proses tersebut kadang disebut verifikasi account via email yang tentu saja membutuhkan autoresponder email. Bagaimana cara membuatnya ya ?? Berikut ini saya coba share bagaimana membuat codingan seperti tersebut.
Secara logika, mungkin sederhananya seperti ini, di table member, kita kasih status aktif. Status aktif akan menentukan apakah member dapat login atau belum dengan adanya code aktifasi.

Pada gambar diatas, terlihat bahwa ada member yang sudah daftar namun belum melakukan aktivasi. Terlihat bahwa field aktifnya masih 0. Member yg sudah aktif ditandai dengan value field aktif adalah 1.
Untuk pertama kali, jangan lupa setting konfigurasi database hostingan kamu. Lalu import file member.sql.
Bila sudah melakukan settingan db dan import database.
Di dalam folder codingan terdapat file-file terpisah,,bisa liat gambar dibawah ini.

Di folder css hanya berisi code css yang jujur belum mahir banget dengan css, maksain aja dah…berikut codenya :

@charset "utf-8";
.judul {
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #0033FF;
}
.author {
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	font-weight: normal;
	color: #666666;
	text-align: center;
	width: 220px;
	text-decoration: none;
}
.link_author {
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	color: #666666;
	text-decoration: none;
}

table {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: 12px;
	background-position: center center;
	margin-left: 46px;
}

.input_username {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: #CCCCCC;
	padding-left: 3px;
}

.input_email {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: #CCCCCC;
	padding-left: 3px;
}

.input_password {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: #CCCCCC;
	padding-left: 3px;
}

.tampil_info {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	background-color: #E7E8E3;
	text-align: center;
	margin-left: 47px;
	border: thin dashed #CCCCCC;
	clear: right;
	float: left;
	width: 200px;
}

.info_email {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	background-color: #E7E8E3;
	text-align: center;
	margin-left: 47px;
	border: thin dashed #CCCCCC;
	clear: right;
	float: left;
	width: 200px;
}

Trus di folder image cuma ada file loading.gif dimana image ini digunakan untuk loading saat ajax melakukan akses ke database.
Di folder inc ada 5 file :

• inc.db.php, berisi setingan database aja

  <?php
        $host = "localhost";
  	$user = "root";
  	$pass = "adiputra";
  	$db   = "blog_tes";
  
  	mysql_connect($host,$user,$pass) or die('error : '.mysql_error());
  
  	mysql_select_db($db) or die('error : '.mysql_error());
  ?>
  

• lib_func.php, kumpulan fungsi-fungsi php seperti fungsi untuk autoresponder,dll.

  <?php
  	include "inc.db.php";
  
  	function secure_input($data){
  		$secure_data = mysql_real_escape_string($data);
  		return $secure_data;
  	}
  
  	function auto_respon($email,$username,$kode){
  		include_once("class.phpmailer.php");
  		$mail         = new PHPMailer();
  		$mail->IsMail();
  		$mail->FromName   = "Admin TokoBukuBekas.Co.Tv"; // silakan isi dengan email kamu..itu hanya sample,, $mail->FromName = "Admin TokoBukuBekas.Co.Tv";
  		$mail->Subject = "Aktifasi Member";
  		$mail->Body = "Terimakasih ".$username." telah mendaftar..<br />Klik link dibawah ini untuk mengaktifkan account anda<br /><br />http://tokobukubekas.co.tv/tutorial/form_daftar/aktifasi.php?kode=$kode";
  		$mail->AddAddress($email);
  		$mail->IsHTML(true);
  		if(!$mail->Send()){
  			return FALSE;
  		}else{
  			return TRUE;
  		}
  	}
  
  	function cek_kode_aktifasi($kode){
  		$sql = "select * from member where code='$kode' and aktif=1";
  		$res = mysql_query($sql);
  		$data = mysql_fetch_array($res);
  		$cek_ada = mysql_num_rows($res);
  
  		if($cek_ada == 0){
  			$cek = 1; # member belum aktifasi
  		}else{
  			$cek = 0; # member sudah aktifasi
  		}
  
  		return cek;
  	}
  ?>
  

• Class_phpmailer.php, Class_smtp.php dan Class_pop3.php adalah class-class untuk melakukan autoresponder. Saya dapatkan di phpclasses.org

Di folder js terdapat code-code jquery untuk settingan ajax dan validasi lainnya.

• js_form_daftar.js : berisi code jQuery untuk form daftar (index.php)

  $(document).ready(function(){
  	$(".tampil_info").hide();
  	$('.loading').hide();
  });
  
  function aksi_daftar(){
  
  	$(".tampil_info").fadeOut('slow');
  
  	$('.loading').show();
  
  	var cek = cek_kosong();
  
  	var email = $(".input_email").val();
  
  	if(cek_kosong()==1){
  		$('.loading').hide();
  		$(".tampil_info").html("maaf, data mesti diisi semua");
  		$(".tampil_info").fadeIn('slow');
  	}else if(cek_email(email)==1){
  		$('.loading').hide();
  		$(".tampil_info").html("maaf, email anda tidak valid");
  		$(".tampil_info").fadeIn('slow');
  	}else{
  		var username 	= $(".input_username").val();
  		var email 		= $(".input_email").val();
  		var password 	= $(".input_password").val();
  		var input_data = "username="+username+"&email="+email+"&password="+password;
  
  		//alert(username+' - '+email+' - '+password);
  
  		$.ajax({
  			url:"proses.php",
  			type:"POST",
  			data:input_data,
  			success:function(data){
  				$('.loading').hide();
  				$(".tampil_info").html(data);
  				$(".tampil_info").fadeIn('slow');
  				//alert('ada');
  			}
  		});
  	}
  
  	return false;
  }
  
  function cek_kosong(){
  	var cek;
  	$(function(){
  
  		data_username = $(".input_username").val().length;
  		data_email = $(".input_email").val().length;
  		data_password = $(".input_password").val().length;
  
  		if((data_username<1) || (data_email)<1 || (data_password<1)){
  			cek = 1;
  		}else{
  			cek = 0;
  		}
  
  	});
  
  	return cek;
  }
  
  function cek_email(data){
  	var regex_email= new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
  
  	isi_email = data;
  
  	if(regex_email.test(isi_email)){
  		return 0;
  	}else{
  		return 1;
  	}
  }
  

• js_form_login.js : berisi code jQuery untuk form login(login.php)

$(document).ready(function(){
	$(".tampil_info").hide();
	$('.loading').hide();
});

function aksi_daftar(){

	$(".tampil_info").fadeOut('slow');

	$('.loading').show();

	var cek = cek_kosong();

	var email = $(".input_email").val();

	if(cek_kosong()==1){
		$('.loading').hide();
		$(".tampil_info").html("maaf, data mesti diisi semua");
		$(".tampil_info").fadeIn('slow');
	}else{
		var username 	= $(".input_username").val();
		var password 	= $(".input_password").val();
		var input_data = "username="+username+"&password="+password;

		//alert(username+' - '+email+' - '+password);

		$.ajax({
			url:"proses_login.php",
			type:"POST",
			data:input_data,
			success:function(data){
				$('.loading').hide();
				$(".tampil_info").html(data);
				$(".tampil_info").fadeIn('slow');
				//alert('ada');
			}
		});
	}

	return false;
}

function cek_kosong(){
	var cek;
	$(function(){

		data_username = $(".input_username").val().length;
		data_password = $(".input_password").val().length;

		if((data_username<1) || (data_password<1)){
			cek = 1;
		}else{
			cek = 0;
		}

	});

	return cek;
}

Awalnya saya arahkan terlebih dahulu untuk melakukan pendaftaran member baru. Lihat index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial Form  Registrasi</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/js_form_daftar.js"></script>
<body>
<div class="judul">Tutorial Registrasi-Login Form Dengan Ajax-jQuery dan Aktifasi Email</div>
<div class="author">Author : <a href="http://www.terusbelajar.wordpress.com" class="link_author">Adiputra</a></div>
<form action="" method="post" name="form_reg">
	<table width="200" border="0" cellspacing="2" cellpadding="2">
      <tr>
        <td>Username</td>
        <td>:</td>
        <td><input name="username" type="text" class="input_username" /></td>
      </tr>
      <tr>
        <td>Email</td>
        <td>:</td>
        <td>
        	<input name="email" type="text" class="input_email"/>
        </td>
      </tr>
      <tr>
        <td>Password</td>
        <td>:</td>
        <td><input name="password" type="password" class="input_password" /></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" class='tombol' value="Daftar" onclick="return aksi_daftar();"/></td>
      </tr>
	</table>

</form>
<div class="loading">
  <img src='image/loading.gif' />
</div>
<div class="tampil_info">

</div>
</body>
</html>

Index.php ini memanggil jquery-1.4.2.min.js, jadi tolong sesuaikan pula pathnya dengan folder kamu (maaf tidak disertakan di donlotan, jadi donlot heula nyak), juga memanggil file js_form_daftar.js dimana settingan validasi dan ajax dengan jquery. Di dalam file js_form_daftar.js terdapat code ajax :

          $.ajax({
			url:"proses.php",
			type:"POST",
			data:input_data,
			success:function(data){
				$('.loading').hide();
				$(".tampil_info").html(data);
				$(".tampil_info").fadeIn('slow');
				//alert('ada');
			}
		});

Terlihat di code tersebut memanggil file proses.php yang berisi query ke database :

<?php
	include "inc/inc.db.php";
	include "inc/lib_func.php";

	$username = secure_input($_POST['username']);
	$email = secure_input($_POST['email']);
	$password = md5(secure_input($_POST['password']));

	$kode = rand(11111,99999);

	$sql = "insert into member values ('','$username','$email','$password','$kode','0')";
	$res = mysql_query($sql);

	if($res){
		//echo "berhasil query";
		if(auto_respon($email,$username,$kode)){
			echo "Silahkan melihat email anda untuk mengaktifkan account anda<br >";
			echo "Apabila tidak ditemukan balasan ke inbox email Anda, silahkan cek inbox spam email Anda...";
		}else{
			echo "Gagal mengirim aktifasi email";
		}
	}else{
		echo "Gagal melakukan query";
	}

?>

Sampai sini adalah proses pendaftaran, lalu dengan code file proses.php ini pula, code aktifasi di kirim melalui email responder melalui email yang sudah didaftarkan. Sekarang bisa kita cek, apakah data aktifasi sudah ke kirim via email atau belum.


Untuk email yahoo,,cek di kotak Spamnya, kalau di kotak Inbox tidak ada. kenapa ya ???
Lihat terdapat link di kedua email yang saya coba,,lalu liat pula bahwa link tersebut mengarah ke aktifasi.php yang isinya hanya codingan untuk mengubah status aktif member. Berikut codenya :

<?php
	include "inc/inc.db.php";
	include "inc/lib_func.php";

	$kode = secure_input($_GET['kode']);
	//echo $kode."<br />";

	$cek = cek_kode_aktifasi($kode);
	//echo $cek."<br />";

	if($cek == 1){
		$sql = "update member set aktif=1 where code = '$kode'";
		mysql_query($sql);
		echo "Terimakasih anda telah melakukan aktifasi account anda <br />";
		echo "Untuk login silahkan anda ke halaman <a href='http://tokobukubekas.co.tv/tutorial/form_daftar/login.php'>[ login ]</a>";
	}else{
		echo "Account anda telah aktif";
	}
?>

File ini hanya untuk mengubah status aktif dari member. Bila berhasil, status aktif bernilai 1. Sampai sini, kita selesai mengaktifkan member dengan kode aktifasi.
Kita coba untuk login (login.php) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial Form  Registrasi Login</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/js_form_login.js"></script>
<body>
<div class="judul">Tutorial Registrasi-Login Form Dengan Ajax-jQuery-PHP dan Aktifasi Email</div>
<div class="author">Author : <a href="http://www.terusbelajar.wordpress.com" class="link_author">Adiputra</a></div>
<form action="" method="post" name="form_reg">
	<table width="200" border="0" cellspacing="2" cellpadding="2">
      <tr>
        <td>Username</td>
        <td>:</td>
        <td><input name="username" type="text" class="input_username" /></td>
      </tr>
      <tr>
        <td>Password</td>
        <td>:</td>
        <td><input name="password" type="password" class="input_password"/></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" class='tombol' value="Login" onclick="return aksi_daftar();"/></td>
      </tr>
	</table>

</form>
<div class="loading">
  <img src='image/loading.gif' />
</div>
<div class="tampil_info">

</div>
</body>
</html>

Proses login berisi validasi baik dari validasi username, validasi password, dan validasi status aktifnya. Berikut kode-nya (proses_login.php):

<?php
	include "inc/inc.db.php";
	include "inc/lib_func.php";

	$username = secure_input($_POST['username']);
	$password = md5(secure_input($_POST['password']));

	$sql = "select * from member where username = '$username'";
	$res = mysql_query($sql);
	$jml = mysql_num_rows($res);

	if($jml==0){
		echo "Username tidak dikenal, silahkan mendaftar";
	}else{
		while($data = mysql_fetch_assoc($res)){

			$pass_db = $data['password'];

			if($pass_db != $password){
				echo "Password Anda salah, silahkan ulangi..";
			}else{

				$aktif = $data['aktif'];
				$email = $data['email'];

				if($aktif == 0){
					echo "Anda belum melakukan aktifasi via email..<br />Silahkan cek email Anda <br />[ ".$email." ]";
				}else{
					echo "Anda telah login  ";
				}

			}

		}
	}

?>

Dimana file ini dipanggil dari file js_form_login.js dengan ajaxnya jquery :

              $.ajax({
			url:"proses_login.php",
			type:"POST",
			data:input_data,
			success:function(data){
				$('.loading').hide();
				$(".tampil_info").html(data);
				$(".tampil_info").fadeIn('slow');
				//alert('ada');
			}
		});

Sampai sini, selesai,,
Demo dan file-filenya bisa dicomot di bawah ini..
maaf klu demonya agak berat,,karena maklum pake hostingan yg gratisan…:)
[ Demo ] [ Download ]
Moda ada manfaatnya ya dan mohon koreksinya…thanks,,


Refrensi

Read More

Teknik Sederhana parsing XML dengan PHP dan Jquery

XML ( Extendsible Markup Language) adalah salah satu bahasa yang dibuat untuk dapat melakukan pertukaran data dari suatu aplikasi ke aplikasi lain. Kenapa kita mesti mempelajari XML, karena menurut saya XML banyak sekali digunakan pada berbagai aplikasi salah satunya Android yang sekarang-sekarang ini lagi booming. Android sendiri paling banyak dibuat dengan bantuan XML dan Java. Untuk mempelajari dasar-dasar XML, teman teman bisa baca-baca pada artikel ini :

• http://www.w3schools.com/xml/
• http://www.xml.com/pub/a/98/10/guide0.html
• http://www.w3.org/XML/

XML tidak bisa lepas dari parsing, mengkonversi dari atau ke XML adalah hal yang paling sering dilakukan. Berikut ini saya akan mencoba mencoba mempraktikan bagaimana melakukan parsing XML dengan PHP.
Kalau teman-teman membaca manual PHP, ada banyak class yang memudahkan kita melakukan parsing XML salah satunya adalah SimpleXML.
Awal terlebih dahulu adalah pengecekan apakah class SimpleXML telah tersedia di versi PHP kita atau belum. Karena SimpleXML ini support pada PHP versi 5.
Sekarang coba kita ambil salah satu contoh file xml dari alamat http://www.w3schools.com/xml/yang plant_catalog.xml.
Sekarang kita buat satu file untuk mencoba mengambil data pada file plant_catalog.xml dengan nama xml_php.php (satukan dalam folder file plant_catalog.xml). Pada xml_php.php kita tulis code seperti dibawah ini :

01

<?php

02	# pengecekan apakah ada file *.xml itu ?

03	if(file_exists('plant_catalog.xml')){

04

05	# ambil data xml

06	$xml = file_get_contents('plant_catalog.xml');

07

08	# pembuatan object SimpleXMLElement

09	$e_xml = new SimpleXMLElement($xml);

10

11	# mengambil name dari element

12	echo "Element root : " . $e_xml->getName() . "<br />";

13	echo "Element children dari root : " . $e_xml->children()->getName() . "<br />";

14

15	echo "Element children dari " . $e_xml->children()->getName() . " : <br />";

16	# loping get name dari child yg banyak

17	foreach($e_xml->children()->children() as $child){

18	echo $child->getName()."<br />";

19

}

20

21	echo "============================================= <br />";

22

23	# mengambil isi dari element

24	echo "Common : " . $e_xml->PLANT[0]->COMMON . "<br />";

25

26	echo "Botanical : " . $e_xml->PLANT[0]->BOTANICAL . "<br />";

27

28	echo "============================================= <br />";

29

30	# hitung jumlah element pada PLANT

31	$jml_plant = $e_xml->PLANT->count();

32	echo "Jumlah element ". $e_xml->children()->getName() . " : " . $jml_plant . "<br />";

33

34	# looping untuk mendapatkan data keseluruhan

35	for ($i=0; $i<$jml_plant; $i++){

36

37	# ambil hanya element COMMON

38	echo "#" . $i . " Common dari " . $e_xml->children()->getName() . " : " . $e_xml->PLANT[$i]->COMMON . "<br />";

39

40

}

41

42

}else{

43

44	echo "file tidak ditemukan";

45

46

}

47

48

?>

Untuk melihatnya Disini
Tapi maaf karena fungsi count() hanya support pada php versi 5.3 sedangkan hosting saya menggunakan versi PHP 5.2 jadi terdapat error. Lebih jelas, teman-teman bisa langsung coba aja di localhost masing-masing.
Pada kode tersebut, sudah saya berikan komentar sehingga memudahkan teman-teman mempelajarinya.
Selain dengan SimpleXML, kita juga bisa memanfaatkan fasilitas dari jquery.Berikut ini adalah code parsing XML dengan jquery :

01

<html>

02

<head>

03	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

04	<script type='text/javascript'>

05

06	$(document).ready(function()

07

{

08

09

$.ajax({

10	type: "GET",

11	url: "plant_catalog.xml",

12	dataType: "xml",

13	beforeSend: function(){

14	$("#image").html("<img src='ajax-loader.gif'");

15

},

16	success: function(xml) {

17	$(xml).find("PLANT").each(function(){

18	$("#image").hide();

19

20	var data_common = $(this).find("COMMON").text();

21	$("#v_common ul").append("<li>"+ data_common +"</li>");

22

23	var data_botanical = $(this).find("BOTANICAL").text();

24	$("#v_botanical ul").append("<li>"+ data_botanical +"</li>");

25

});

26

27

}

28

});

29

30

});

31

32

</script>

33

</head>

34

35

<body>

36	<span id='image'></span><br />

37

Common :

38	<div id='v_common'>

39

<ul>

40

41

</ul>

42

</div>

43

44	Botanical :

45	<div id='v_botanical'>

46

<ul>

47

48

</ul>

49

</div>

50

</body>

51

52

</html>

Demonya bisa dilihat : Disini
Sampai disini semoga ada tambahan ilmu lagi tentang PHP, Jquery n XML


Refrensi

Read More