MODUL XIV, WEB 2

PENYIMPANAN DATA MENGGUNAKAN AJAX
  1. TUJUAN
Agar mahasiswa mampu menyimpan dan menampilkan data yang ada di database ke dalam tabel serta mengubah isi data langsung pada grid tabel tanpa menggunakan tombol submit.
  1. PEMBAHASAN
AJAX dapat dikomunikasikan dengan database, misalnya untuk menyimpan,menampilkan data ataupun mengedit data. Ajax juga dapat digunakan untuk mengembalikan informasi dari database dalam bentuk XML, kemudian memproses XML tersebut. Halaman web dapat mengambil informasi dari database MYSQL, dikonversi ke dokumen XML dan digunakan untuk menampilkan informasi ke beberapa tempat.
Pembahasan Praktikum :
*      Koneksi.php
*      dan ?>
Pasangan kode merupakan kode yang sebenarnya disebut dengan skrip PHP, kode tersebut digunakan untuk mengawali dan mengakhiri skrip PHP.
*      $host=”localhost”;
$user=”root”;
$pass=”root”;
$dbase=”tes”;
Merupakan deklarasi variabel host yaitu localhost, variabel user yaitu root, variabel pass yaitu root dan variabel dbase yaitu tes.
*      $kon=mysql_connect($host,$user,$pass); merupakan perintah variable kon untuk mengkoneksikan atau menghubungkan file keserver yaitu variable host, user dan pass artinya kelocalhost, dengan user dan pass root. Atau membuka koneksi dengan database Mysql server.
*      if(!$kon) die (“Gagal Koneksi…!!!”);untuk mengetes apakah berhasil melakukan koneksi atau tidak, jika berhasil maka akan connect ke server $kon yaitu localhost jika gagal maka akan menampilkan Gagal Koneksi.
*      if(!mysql_select_db($dbase)) die (“Gagal Koneksi Database…!!!”); untuk mengetes apakah berhasil melakukan koneksi database atau tidak, jika berhasil maka akan masuk pada database tes jika gagal maka akan menampilkan Gagal Koneksi Database.
*      Ajax.js
*      var XMLHttpRequestObject = false; merupakan deklarasi variable XMLHttpRequestObject dengan nilai false. AJAX memerlukan XMLHttpRequest Object untuk dapat me-request sebuah halaman web secara Asynchronous. Digunakan untuk berjaga-jaga jika sebelumnya XMLHttpRequestObjectsudah aktif maka kita non aktifkan lagi.
*      if (window.XMLHttpRequest) untuk mengetes objek XMLHttpRequest untuk membedakan antara IE dengan Firefox, perintah ini akan dikerjakan jika bukan IE
*      XMLHttpRequestObject = new XMLHttpRequest() digunakan untuk membuat objek XMLHttpRequest untuk Firefox, Opera dan Safari.
*      else if (window.ActiveXObject) untuk mengetes objek ActiveX untuk membedakan antara IE dengan Firefox, perintah ini akan dikerjakan jika IE
*      XMLHttpRequestObject=newActiveXObject(“Microsoft.XMLHTTP”); digunakan untuk membuat objek XMLHttpRequest untuk IE.
*      function getData(dataSource, divID) digunakan untuk mengambil data di dataSource dimasukkan ke div dengan id divID.
*       if (XMLHttpRequestObject) perintah ini akan dijalankan jika objek XMLHttpRequest telah terbuat.
*      var obj = document.getElementById(divID); digunakan untuk mengambil objek div.
*      XMLHttpRequestObject.open(“GET”, url, open); digunakan untuk mengirimkan request keserver / membuka koneksi keserver, dengan parameter pertama dari open yaitu method permintaan HTTP GET, parameter kedua adalah url dari halaman yang diminta, parameter ketiga diset ketika permintaan adalah asynchronouse, diset TRUE maka eksekusi fungsi Javascript akan berlanjut walau tanggapan dari server belum sampai.
*      XMLHttpRequestObject.onreadystatechange=function() digunakan untuk menangani event yang bekerja setiap kali status berubah / perubahan state,  setelah meminta request keserver, diperlukan sebuah function yang dapat menerima data yang dikembalikan oleh server, properti  onreadystatechange menyimpan data dari server dan memprosesnya.
*      if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
Untuk mengetes respon yang diberikan oleh server sudah komplit (artinya data sudah didapatkan dan mengembalikan status sebuah nomor yaitu OK,
*      obj.innerHTML=XMLHttpRequestObject.responseText; maka akan mengembalikan response dalam bentuk string, data ini akan dimasukkan kedalam div.
*      XMLHttpRequestObject.send(null); merupakan perintah objek XMLHttpRequest untuk mengirim HTTP request keserver dan menerima suatu respon.
*      Praktek.php
*      merupakan bagian kepala. Dibagian ini kita bisa menentukan judul dokumen HTML.
*     
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s