T-10 Homepage

 <form onSubmit="return cariArtikel()">
   Cari Judul Artikel: 
   <input type="text" name="txtCari" size="20" />
   <input type="submit" value="Cari" />
   <div id="divResult"></div>
 </form>

  <script language="javascript" src="jquery.js"></script>
  <script language="javascript">
   function cariArtikel(){
	 // ambil nilai dari form inputan dengan nama 'txtCari'
	 var txtCari = $('input[@name=txtCari]').val(); 
	 $.post('cariartikel.php',
		{cari:txtCari}, // kirim variable POST dengan nama 'cari' ke 'cariartikel.php'
		function(response){
		   // jika hasil response kosong maka berikan alert dan keluar dari fungsi 
		   if(response == null){
			alert('Pencarian artikel tidak ditemukan');
			return;
		   }
		   /*
				Catatan: Pada artikel-artikel saya sebelumnya data respon dari request
						 langsung dimasukan ke salah satu element html di file ini, namun
						 kali ini karena format yang diterima JSON maka kita harus menentukan
						 sendiri cara menampilkan data tersebut. Kali ini saya akan tampilkan
						 data request dari server ke dalam bentuk table.
		   */
		   var table = '<table border=1>';
		   table += '<tr bgcolor=#CECECE><th>No</th><th>Judul</th><th>Isi</th><th>Tanggal</th></tr>';
		   // melakukan looping dari data JSON karena data yang didapat berupa array 2 dimensi
		   for(var x=0;x<response.length;x++){ 
			 // setiap field pada setiap baris response adalah field dari table artikel di MySQL
			 table += '<tr><td>'+(x+1)+'</td><td>'+response[x].judul_artikel+'</td>';
			 table += '<td>'+response[x].isi_artikel+'</td>';
			 table += '<td>'+response[x].tanggal_posting+'</td></tr>';
		   }
		   table += '</table>';
		   // masukan hasil looping data berupa table ke dalam element html di halaman ini
		   $('#divResult').html(table); 
		}, 
		'json' // ambil data dari response ajax sebagai JSON
	 );
	 return false;
   }
  </script>