Membuat Web Hosting Sendiri Dari Local PC

Banyak pengunjung blog ini yang menanyakan ke saya, apakah bisa aplikasi web yang sudah dibuat dan diinstall di local web server (PC local) dengan XAMPP atau WAMP atau sejenisnya diakses dari luar atau dari internet? Tentu saja bisa, dengan sedikit setting di PC kita maka aplikasi web yang ada di PC anda bisa diakses dari luar atau internet, tidak hanya dari local PC atau LAN.
Nah.. bagaimana cara setting PC kita menjadi web hosting sehingga bisa diakses dari luar melalui internet? Simak artikel berikut ini dengan baik.

Supaya PC kita menjadi web hosting yang bisa diakses dari luar via internet, perangkat yang dibutuhkan adalah modem internet. Dalam artikel ini, cara setting hanya akan dicontohkan pada modem DLINK Wireless ADSL Router seri DSL 2640T, karena kebetulan saya hanya punya modem ini untuk nge-net Untuk modem yang lain silakan diujicoba sendiri.
Saran saya, untuk membuat Web Hosting dari PC sendiri ini, pastikan koneksi internetnya stabil dan dengan paket unlimited. Nah… di sini saya akan menggunakan koneksi internet Speedy yang kebetulan di rumah saya lumayan stabil. Saya menggunakan Speedy dengan paket Socialia (bukan promosi lho ya)
OK.. kita mulai saja cara settingnya. Oya, pastikan di PC Anda sudah terinstall web server, bisa menggunakan XAMPP, AppServ, WAMP atau yang lain.
Nah… langkah pertama, kita setting modem nya dahulu. Kita akan mensetting modem DLINK nya sebagai Bridge. Untuk mensettingnya, silakan masuk ke settingan modem kemudian pilih WAN Setting. Selanjutnya pilih ‘Bridge Mode‘. Kemudian simpan konfigurasinya.

OK. Modem sudah kita buat sebagai Bridge, selanjutnya kita buat koneksi Speedy di PC kita via Broadband Connection PPPoE. Caranya adalah, masuk ke Control Panel – Network Connection. Lalu pilih Create Connection. Selanjutnya ikuti langkah-langkah sesuai gambar berikut ini




Masukkan username dan password Speedy Anda pada kotak yang disediakan.

Nah… setting koneksi ke Speedy via Broadband Connection PPPoE sudah selesai. Selanjutnya kita lakukan koneksi ke Speedy nya dengan mengklik START – CONNECT TO, pilih Speedy

Setelah koneksi dengan Speedy berhasil, langkah berikutnya adalah melihat IP Address dari PC kita. Caranya adalah dengan masuk ke Command Prompt Windows, lalu ketikkan perintah: ipconfig
C:\ipconfig
Setelah itu harusnya muncul informasi IP Address PC Anda seperti gambar berikut ini

Dalam contoh gambar di atas, muncul IP Address: 180.246.94.195. Nah… nomor IP itulah yang nanti diakses via internet untuk mengakses PC Anda (IP Public). Tinggal ketikkan saja nomor IP tersebut di browser maka otomatis akan mengakses web server yang ada di PC Anda.
Oya.. kalau Anda menggunakan Speedy Socialia seperti saya, maka IP Address tersebut berbeda-beda setiap kali koneksi ke Speedy dilakukan. Hal ini dikarenakan IP Address tersebut bersifat dinamis (Dynamic IP). Kecuali kalau Anda memiliki IP Statis (Static IP) maka IP tersebut fixed selamanya. Untuk mendapatkan static IP, silakan menghubungi ISP Anda. Setahu saya untuk mendapatkan static IP itu kita harus membayar dalam periode tertentu, misalnya tahunan atau bulanan.
OK… selamat mencoba ya.

Read More

Membuat Script PHP untuk Hapus Data dengan Multi Selection

Pernahkah Anda membuat script untuk menghapus data dengan konsep multi selection? Untuk menghapus sebuah data sih.. saya kira mudah untuk membuatnya.

Tapi… bagaimana bila data yang akan dihapus lebih dari satu sekaligus? Rumit gak ya membuat scriptnya? Hmm… nggak rumit kok, cuman sedikit memusingkan saja he.. he.. he nggak ding, becanda… mudah-mudahan artikel yang saya sajikan ini tidak membuat Anda pusing.
OK… konsep menghapus data dengan multi selection ini biasanya menggunakan bantuan komponen checkbox. Mengapa checkbox? ya.. karena komponen checkbox memungkinkan kita bisa memilih pilihan lebih dari satu.

Data yang akan dihapus terlebih dahulu dipilih dengan memberi tanda check pada checkbox yang ada di depan setiap data. Perhatikan contoh tampilan berikut ini:

Nah… kita akan membuat script PHP untuk menghapus data dengan konsep multi selection seperti gambaran di atas.
Untuk studi kasus yang diambil, lagi-lagi kita mengambil kasus tentang data mahasiswa Huh… mentang-mentang yang buat artikel ini seorang dosen kali ya
Misalkan kita punya tabel dan data sbb:

1.CREATE TABLE mhs (2.nim varchar(10),3.namamhs varchar(30),4.PRIMARY KEY (nim)5.)

1.INSERT INTO mhs VALUES ('M0197001', 'ROSIHAN ARI YUANA');2.INSERT INTO mhs VALUES ('M0197002', 'DWI AMALIA FITRIANI');3.INSERT INTO mhs VALUES ('M0197003', 'FAZA FAUZAN KH.');4.INSERT INTO mhs VALUES ('M0197004', 'NADA HASANAH');5.INSERT INTO mhs VALUES ('M0197005', 'MUH. AHSANI TAQWIM');

Langkah pertama dalam membuat script penghapusan data ini, terlebih dahulu kita siapkan script untuk menampilkan semua datanya. Untuk setiap data nantinya kita letakkan sebuah checkbox di depannya yang digunakan untuk memilih data mana saja yang akan dihapus.
data.php

01.<html>02.<head>03.<title>Hapus data mahasiswa</title>04.</head>05.<body>06.<h1>Hapus Data Mahasiswa</h1>07.<?php08. 09.// koneksi mysql10. 11.mysql_connect("dbhost", "dbuser", "dbpass");12.mysql_select_db("dbname");13. 14.// query SQL untuk menampilkan semua data15. 16.$query = "SELECT * FROM mhs";17.$hasil = mysql_query($query);18. 19.// membuat form penghapusan data20. 21.echo "<form name='myform' method='post' action='".$_SERVER['PHP_SELF']."?action=del'>";22.echo "<table border='1'>";23.echo "<tr><td></td><td><b>NIM</b></td><td><b>Nama Mahasiswa</b></td></tr>";24.$i = 0;25.while($data = mysql_fetch_array($hasil))26.{27.echo "<tr><td><input type='checkbox' name='nim".$i."' value='".$data['nim']."' /></td><td>".$data['nim']."</td><td>".$data['namamhs']."</td></tr>";28.$i++;29.}30.echo "</table>";31.echo "<input type='hidden' name='n' value='".$i."' />";32.echo "<p><input type='submit' value='Hapus' name='submit'> <input type='reset' value='Batal' name='reset'></p>";33.echo "</form>";34.?>35. 36.</body>37.</html>

Perhatikan script di atas! Form nantinya akan diarahkan ke script itu sendiri (menggunakan $_SERVER['PHP_SELF']) namun dengan parameter ‘?action=del’. Anda boleh arahkan pemrosesan formnya ke script lain. It’s up to you.
Selain itu perhatikan pula bahwa untuk setiap komponen checkbox diberikan name yang berbeda. Di sini diberikan name berbentuk ‘nim0′, ‘nim1′, ‘nim2′, … dst (perhatikan bagian name=’nim”.$i.”‘).
Kemudian, terdapat pula komponen hidden value (name=’n') yang bernilai sama dengan jumlah data total atau dalam hal ini adalah $i. Komponen ini nantinya akan sangat penting ketika memproses form terutama pada saat membaca komponen checkbox yang dipilih.
Selanjutnya untuk pemanis, misalkan kita ingin membuat fasilitas SELECT ALL untuk memilih semua data sekaligus. OK Bagaimana caranya? Ya.. kita gunakan Javascript. Oya… jangan lupa berikan sebuah checkbox tambahan untuk memberikan fasilitas ini. Begitu checkbox ini dipilih, maka semua checkbox yang ada di depan data akan terpilih. Untuk hal ini, kita berikan event onclick() pada checkbox tsb. Mmm… sebaiknya checkbox ini diletakkan di dalam header tabel saja ya.
data.php

01.<html>02.<head>03.<title>Hapus data mahasiswa</title>04.<script type="text/javascript">05. 06.function pilihan()07.{08.// membaca jumlah komponen dalam form bernama 'myform'09.var jumKomponen = document.myform.length;10. 11.// jika checkbox 'Pilih Semua' dipilih12.if (document.myform[0].checked == true)13.{14.// semua checkbox pada data akan terpilih15.for (i=1; i<=jumKomponen; i++)16.{17.if (document.myform[i].type == "checkbox") document.myform[i].checked = true;18.}19.}20.// jika checkbox 'Pilih Semua' tidak dipilih21.else if (document.myform[0].checked == false)22.{23.// semua checkbox pada data tidak dipilih24.for (i=1; i<=jumKomponen; i++)25.{26.if (document.myform[i].type == "checkbox") document.myform[i].checked = false;27.}28.}29.}30. 31.</script>32.</head>33.<body>34.<h1>Hapus Data Mahasiswa</h1>35.<?php36. 37.// koneksi mysql38. 39.mysql_connect("dbhost", "dbuser", "dbpass");40.mysql_select_db("dbname");41. 42.// query SQL untuk menampilkan semua data43. 44.$query = "SELECT * FROM mhs";45.$hasil = mysql_query($query);46. 47.// membuat form penghapusan data48. 49.echo "<form name='myform' method='post' action='".$_SERVER['PHP_SELF']."?action=del'>";50.echo "<table border='1'>";51.echo "<tr><td><input type='checkbox' name='pilih' onclick='pilihan()' /> Pilih semua</td><td><b>NIM</b></td><td><b>Nama Mahasiswa</b></td></tr>";52.$i = 0;53.while($data = mysql_fetch_array($hasil))54.{55.echo "<tr><td><input type='checkbox' name='nim".$i."' value='".$data['nim']."' /></td><td>".$data['nim']."</td><td>".$data['namamhs']."</td></tr>";56.$i++;57.}58.echo "</table>";59.echo "<input type='hidden' name='n' value='".$i."' />";60.echo "<p><input type='submit' value='Hapus' name='submit'> <input type='reset' value='Batal' name='reset'></p>";61.echo "</form>";62.?>63. 64.</body>65.</html>

Nah… selanjutnya, kita bisa membuat bagian untuk memproses formnya atau membuat script untuk proses penghapusan datanya.
Trus… bagaimana konsep membaca data mana saja yang akan dihapus sesuai pilihan checkboxnya? Untuk membaca data mana yang akan dihapus, kita gunakan bantuan looping. Berapa jumlah loopingnya? Jumlah loopingnya sesuai jumlah komponen checkboxnya. Nah… di sinilah pentingnya penggunaan komponen hidden value <input type=’hidden’ name=’n’ value=’”.$i.”‘ /> Dalam contoh ini nilai n=5.
Selanjutnya isi dalam loopingnya bagaimana? ya… kita cek saja apakah komponen checkbox dengan name=’nim0′ dipilih tidak? jika ya, maka baca NIM mahasiswa terkait dengan komponen tersebut, lalu jalankan query SQL untuk menghapus data mahasiswanya. Trus… komponen checkbox dengan name=’nim1′ dicek apakah dipilih atau tidak. Jika ya, maka baca NIM mahasiswa terkait dengan komponen tersebut, lalu hapus dengan query SQL. Proses ini diulang sebanyak 5 kali untuk kasus di atas, yaitu mulai dari komponen checkbox dengan name=’nim0′ sampai dengan name=’nim4′.
Lantas yang menjadi masalah adalah, bagaimana cara kita mendeteksi bahwa komponen checkbox dengan name tertentu itu dipilih atau tidak? caranya adalah kita gunakan statement IF seperti di bawah ini

1.if (isset($_POST['nim'.$i]))2.{3....4.}

dengan $i = 0, 1, …, n-1.
Jika suatu komponen checkbox itu dipilih, maka perintah isset($_POST['nim'.$i]) akan menghasilkan nilai TRUE. Sedangkan FALSE jika tidak dipilih.
Dengan demikian, script untuk menghapus data dengan multi selection ini adalah sbb:
data.php

01.<html>02.<head>03.<title>Hapus data mahasiswa</title>04.<script type="text/javascript">05. 06.function pilihan()07.{08.// membaca jumlah komponen dalam form bernama 'myform'09.var jumKomponen = document.myform.length;10. 11.// jika checkbox 'Pilih Semua' dipilih12.if (document.myform[0].checked == true)13.{14.// semua checkbox pada data akan terpilih15.for (i=1; i<=jumKomponen; i++)16.{17.if (document.myform[i].type == "checkbox") document.myform[i].checked = true;18.}19.}20.// jika checkbox 'Pilih Semua' tidak dipilih21.else if (document.myform[0].checked == false)22.{23.// semua checkbox pada data tidak dipilih24.for (i=1; i<=jumKomponen; i++)25.{26.if (document.myform[i].type == "checkbox") document.myform[i].checked = false;27.}28.}29.}30. 31.</script>32.</head>33.<body>34.<h1>Hapus Data Mahasiswa</h1>35.<?php36. 37.// koneksi mysql38. 39.mysql_connect("dbhost", "dbuser", "dbpass");40.mysql_select_db("dbname");41. 42.// bagian script untuk menghapus data43. 44.if ($_GET['action'] == "del")45.{46.// membaca nilai n dari hidden value47.$n = $_POST['n'];48. 49.for ($i=0; $i<=$n-1; $i++)50.{51.if (isset($_POST['nim'.$i]))52.{53.$nim = $_POST['nim'.$i];54.$query = "DELETE FROM mhs WHERE nim = '$nim'";55.mysql_query($query);56.}57.}58.}59. 60.// query SQL untuk menampilkan semua data61. 62.$query = "SELECT * FROM mhs";63.$hasil = mysql_query($query);64. 65.// membuat form penghapusan data66. 67.echo "<form name='myform' method='post' action='".$_SERVER['PHP_SELF']."?action=del'>";68.echo "<table border='1'>";69.echo "<tr><td><input type='checkbox' name='pilih' onclick='pilihan()' /> Pilih semua</td><td><b>NIM</b></td><td><b>Nama Mahasiswa</b></td></tr>";70.$i = 0;71.while($data = mysql_fetch_array($hasil))72.{73.echo "<tr><td><input type='checkbox' name='nim".$i."' value='".$data['nim']."' /></td><td>".$data['nim']."</td><td>".$data['namamhs']."</td></tr>";74.$i++;75.}76.echo "</table>";77.echo "<input type='hidden' name='n' value='".$i."' />";78.echo "<p><input type='submit' value='Hapus' name='submit'> <input type='reset' value='Batal' name='reset'></p>";79.echo "</form>";80. 81.?>82. 83.</body>84.</html>

Selamat mencoba... 

Read More

PHP AJAX jQuery

Tutorial PHP AJAX jQuery ini merupakan versi kedua dari Tutorial AJAX JQuery. Tutorial kedua ini dibuat karena ada banyak yang tidak mengerti dengan tutorial versi pertama. Sebelum mengikuti tutorial ini silahkan download jQuery di jQuery.com.

Seperti dijelaskan sebelumnya di Tutorial AJAX JQuery. AJAX memerlukan XMLHttpRequest Object untuk dapat me-request sebuah halaman web secara Asynchronous. Untuk membentuk object XMLHttpRequest dijelaskan di Tutorial Dasar Dasar Ajax. Dengan adanya jQuery anda tidak perlu lagi memikirkan kode javascript untuk membentuk object XMLHttpRequest. jQuery akan membuatkannya untuk anda. Sebelum mulai menggunakan jQuery AJAX anda perlu tahu sedikit tentang jQuery Selector.

jQuery Selector

Ada beberapa jQuery selector yang akan digunakan ditutorial ini.
Selector ID.
contoh: $("#nama"), setara dengan document.getElementById('nama'), untuk memilih element html dengan id="nama".
Selector Class.
contoh: $(".red"), pengganti document.getElementsByClassName('red'), untuk memilih semua element dengan class="red".
Selector Element.
contoh: $("div"), setara dengan document.getElementsByTagName('div'), untuk memilih semua element div.
Untuk lebih jelas silahkan kunjungi dokumentasi jQuery.

Menyimpan Data ke Database dengan jQuery AJAX

Misalkan anda memiliki sebuah database dengan nama 'example', dengan sebuah tabel 'pegawai' dengan struktur seperti berikut:

untuk menyimpan data pegawai ke table di atas tentunya anda memerlukan sebuah html form seperti:

1. <form name="form1" id="form1" action="" method="post">  
2. <p>NIP: <input type="text" name="nip" id="nip"/></p>  
3. <p>Nama: <input type="text" name="nama" id="nama"/></p>  
4. <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">  
5.  <option value="L">Laki Laki</option>  
6.  <option value="P">Perempuan</option>  
7. </select></p>  
8. <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>  
9. <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>  
10. <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>  
11. </form>  

tanpa menggunakan jQuery anda akan membutuhkan kode javascript panjang berikut.

1. <form name="form1" id="form1" action="" method="post">  
2. <p>NIP: <input type="text" name="nip" id="nip"/></p>  
3. <p>Nama: <input type="text" name="nama" id="nama"/></p>  
4. <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">  
5.  <option value="L">Laki Laki</option>  
6.  <option value="P">Perempuan</option>  
7. </select></p>  
8. <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>  
9. <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>  
10. <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>  
11. </form>  
12. <div id="loading"></div>  
13. <script type="text/javascript">  
14. function getXMLHttpRequest(){  
15.  if(window.ActiveXObject){  
16.  return new ActiveXObject("Microsoft.XMLHTTP");   
17.  }else if(window.XMLHttpRequest){  
18.  return new XMLHttpRequest();  
19.  }else {alert("Status : can not create XMLHttpRequest Object");}   
20. }  
21. function simpanPegawai(){  
22.  var xmlhttp = getXMLHttpRequest();  
23. /*simpan.php adalah file php yang meng-handle proses menyimpan data*/  
24.  xmlhttp.open('POST', 'simpan.php', true);  
25.  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
26.  document.getElementById('loading').innerHTML = 'loading...';  
27.  xmlhttp.onreadystatechange=function(){  
28.  if(xmlhttp.readyState == 4){  
29.  if(xmlhttp.status == 200){  
30.  document.getElementById('loading').innerHTML = xmlhttp.responseText;  
31.  }  
32.  }  
33.  }  
34.  var data = 'nip='+document.getElementById('nip').value;  
35.  data += '&namanama='+document.getElementById('nama').value;  
36.  data += '&jenis_kelaminjenis_kelamin='+document.getElementById('jenis_kelamin').value;  
37.  data += '&tgl_lahirtgl_lahir='+document.getElementById('tgl_lahir').value;  
38.  data += '&alamatalamat='+document.getElementById('alamat').value;  
39.  xmlhttp.send(data);  
40. }  
41. </script>  

dan tentunya file simpan.php untuk menyimpan data ke database.

1. <?php  
2. /*file simpan.php*/  
3. mysql_connect("localhost", "user", "password");  
4. mysql_select_db("example");  
5.   
6. mysql_query("insert into pegawai set nip='".$_POST['nip']."',  
7.  nama='".$_POST['nama']."', jenis_kelamin='".$_POST['jenis_kelamin']."',  
8.  tgl_lahir='".$_POST['tgl_lahir']."', alamat='".$_POST['alamat']."'");  
9. echo 'Data telah disimpan';  
10. ?>  

sekarang coba bandingkan dengan menggunakan jQuery.

1. <form name="form1" id="form1" action="" method="post">  
2. <p>NIP: <input type="text" name="nip" id="nip"/></p>  
3. <p>Nama: <input type="text" name="nama" id="nama"/></p>  
4. <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">  
5.  <option value="L">Laki Laki</option>  
6.  <option value="P">Perempuan</option>  
7. </select></p>  
8. <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>  
9. <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>  
10. <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>  
11. </form>  
12. <div id="loading"></div>  
13. <!-- sesuaikan dengan file jquery yang anda download -->  
14. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
15. <script type="text/javascript">  
16. function simpanPegawai(){  
17.  $("#loading").html('loading...');  
18.  $.post('simpan.php', $("form").serialize(), function(hasil){  
19.  $("#loading").html(hasil);  
20.  });  
21. }  
22. </script>  

bisa dilihat perbedaan yang signifikan, tanpa jQuery membutuhkan 28 baris (13-14) kode javascript, sedangkan dengan jQuery hanya dibutuhkan 9 baris (14-22) kode javascript. Dibaris 14 ditambahkan library jQuery, kemudian di function savePegawai() baris ke-17 untuk menampilkan kata 'loading...' kepada user. Baris 18-20 adalah pengganti baris 24-39 kode sebelumnya yang tanpa jQuery. function jQuery $.post (bisa juga dengan jQuery.post) memiliki 3 parameter

$.post(url,data,callback_function);

url: diisi dengan url yang direquest, dalam hal ini adalah file simpan.php;

data: diisi dengan data yang dikirim ke server, kode di atas menggunakan function jQuery.serialize() untuk mengisi parameter ini. Function jQuery.serialize() mengkodekan (Encode) semua element form beserta value masing masing menjadi sebuah string data untuk dikirim ke server;

callback_function: diisi dengan function yang dipanggil setelah proses request selesai.

Menampilkan Data dengan jQuery AJAX

Untuk menampilkan data, pertama yang harus dibuat adalah file php untuk membaca data dari database. Misalnya seperti kode php di bawah.

1. <?php  
2. /*file tampil.php*/  
3. mysql_connect("localhost", "user", "password");  
4. mysql_select_db("example");  
5. ?>  
6. <table>  
7.  <tr>  
8.  <td>NIP</td>  
9.  <td>Nama</td>  
10.  <td>Jenis kelamin</td>  
11.  <td>TGL Lahir</td>  
12.  <td>Alamat</td>  
13.  </tr>  
14.  <?php  
15.  $query = mysql_query("select * from pegawai");  
16.  while($pegawai = mysql_fetch_array($query)){  
17.  echo '<tr>';  
18.  echo '<td>'.$pegawai['nip'].'</td>';  
19.  echo '<td>'.$pegawai['nama'].'</td>';  
20.  echo '<td>'.$pegawai['jenis_kelamin'].'</td>';  
21.  echo '<td>'.$pegawai['tgl_lahir'].'</td>';  
22.  echo '<td>'.$pegawai['alamat'].'</td>';  
23.  echo '</tr>';  
24.  }  
25.  ?>  
26. </table>  

Selanjutnya adalah menggunakan AJAX untuk request file tampil.php di atas. Tanpa jQuery anda akan membuat kode javascript seperti:

1. <a href="javascript:loadData()">Load Data</a>  
2. <div id="pegawai"></div>  
3. <script type="text/javascript">  
4.  function getXMLHttpRequest(){  
5.  if(window.ActiveXObject){  
6.  return new ActiveXObject("Microsoft.XMLHTTP");  
7.  }else if(window.XMLHttpRequest){  
8.  return new XMLHttpRequest();  
9.  }else {alert("Status : can not create XMLHttpRequest Object");}  
10.  }  
11.  function loadData(){  
12.  var xmlhttp = getXMLHttpRequest();  
13.  document.getElementById('pegawai').innerHTML = 'loading...';  
14.  xmlhttp.open('GET', 'tampil.php', true);  
15.  xmlhttp.onreadystatechange = function(){  
16.  if(xmlhttp.readyState == 4){  
17.  if(xmlhttp.status == 200){  
18.  document.getElementById('pegawai').innerHTML = xmlhttp.responseText;  
19.  }  
20.  }  
21.  }  
22.  xmlhttp.send(null);  
23.  }  
24. </script>  

Sedangkan dengan menggunakan jQuery anda hanya membutuhkan kode javascript singkat di bawah:

1. <a href="javascript:loadData()">Load Data</a>  
2. <div id="pegawai"></div>  
3. <!-- sesuaikan dengan file jquery yang anda download -->  
4. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
5. <script type="text/javascript">  
6. function loadData(){  
7.  $("#pegawai").load('tampil.php');  
8. }  
9. </script>  

Bisa dilihat perbedaan yang sangat siginifikan antara menampilkan data dengan jQuery AJAX dibandingkan dengan tanpa jQuery. Tanpa jQuery membutuhkan 22 baris (3-24) kode javascript, sedangkan dengan jQuery hanya dibutuhkan 6 baris. Untuk menampilkan data dengan jQuery AJAX, digunakan function jQuery.load(); function jQuery.load() memiliki dua parameter:
.load(url, [callback_function]);
url: diisi dengan url yang ingin direquest, dalam hal ini adalah file tampil.php;
callback_function: function yang dipanggil setelah proses selesai, parameter ini optional, bisa tidak diisi.
function ini setara dengan function jQuery.get().

Read More