MODUL XIII, WEB 2

AJAX DENGAN DATABASE II
  1. TUJUAN
Agar mahasiswa mampu mengakses fungsi ajax menggunakan eksternal file dan mampu mengirimkan response ajax dalam komponen form.
  1. PEMBAHASAN
Ajax dapat dikomunikasikan dengan data pada file XML, AJAX juga dapat dikomunikasikan dengan database dan dapat ditampilkan hasilnya pada sebuah komponen form tertentu misalnya menu drop-down, textarea maupun textfield.
Pembahasan Praktikum :
*     Database modul13
*      Enter password: ****
Password mysql adalah root. Kalau berhasil maka akan ada pemberitahuan seperti dibawah ini.
*      Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 1
Server version: 6.0.4-alpha-community-log MySQL Community Server (GPL)
Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the buffer.
\h artinya help digunakan apabila kita butuh bantuan dan \c digunakan apabila kita menginginkan perintah yang kita tulis tidak dikerjakan biasanya dipakai apabila kita menuliskan perintah yang salah.
*      mysql> create database modul13;
Query OK, 1 row affected (0.03 sec)
Perintah diatas digunakan untuk membuat database baru dengan nama modul13. Query OK artinya kita telah berhasil membuat database modul13.
*      mysql> use modul13;
Database changed
Perintah diatas adalah perintah untuk masuk kedalam database modul13. Database changed artinya kita telah berhasil masuk kedalam database modul13.
*      mysql> create table propinsi
            -> (kodeprop char(10) not null primary key,
            -> namaprop varchar(30) not null;
Query OK, 0 rows affected (0.06 sec)
Perintah diatas digunakan untuk membuat tabel dengan nama propinsi dengan isi field kodeprop sebagai primary key dan namaprop. Query OK artinya kita telah berhasil membuat tabel propinsi.not null artinya field tersebut harus diisi data.
*      mysql> insert into propinsi(kodeprop,namaprop)values
-> (‘DIY’,’DIY’),
-> (‘JTG’,’JAWA TENGAH’),
-> (‘JTM’,’JAWA TIMUR’);
Query OK, 3 rows affected (0.02 sec)
Records: 3  Duplicates: 0  Warnings: 0
Perintah diatas digunakan untuk memasukkan record baru pada tabel propinsi. Dalam pengisian record harus sesuai dengan field yang kita tulis.Query OK artinya kita telah berhasil memasukkan record kedalam tabel propinsi. Records : 3 artinya ada 3 record atau kita telah memasukkan 3 record kedalam tabel propinsi.
*      mysql> desc propinsi;
Perintah diatas digunakan untuk melihat struktur tabel propinsi.
+———-+————-+——+—–+———+——-+
| Field    | Type        | Null | Key | Default | Extra |
+———-+————-+——+—–+———+——-+
| kodeprop | char(10)    | NO   | PRI | NULL    |       |
| namaprop | varchar(30) | NO   |     | NULL    |       |
+———-+————-+——+—–+———+——-+
2 rows in set (0.00 sec)
*      mysql> select * from propinsi;
Perintah diatas digunakan untuk menampilkan data, data yang dimaksud disini adalah isi data dari tabel propinsi. * artinya kita ingin menampilkan semua kolom.
+———-+————-+
| kodeprop | namaprop    |
+———-+————-+
| DIY      | DIY         |
| JTG      | JAWA TENGAH |
| JTM      | JAWA TIMUR  |
+———-+————-+
3 rows in set (0.00 sec)
*      mysql> create table kabupaten
-> (kodekab char(5) not null primary key,
-> kodeprop varchar(5) not null,
-> namakab varchar(30) not null);
Query OK, 0 rows affected (0.09 sec)
Perintah diatas digunakan untuk membuat tabel dengan nama kabupaten dengan isi field kodekab sebagai primary key, kodeprop dan namakab. Query OK artinya kita telah berhasil membuat tabel kabupaten.not null artinya field tersebut harus diisi data.
*      mysql> desc kabupaten;
Perintah diatas digunakan untuk melihat struktur tabel kabupaten.
+———-+————-+——+—–+———+——-+
| Field    | Type        | Null | Key | Default | Extra |
+———-+————-+——+—–+———+——-+
| kodekab  | char(5)     | NO   | PRI | NULL    |       |
| kodeprop | char(5)     | NO   |     | NULL    |       |
| namakab  | varchar(30) | NO   |     | NULL    |       |
+———-+————-+——+—–+———+——-+
3 rows in set (0.39 sec)
*      mysql> insert into kabupaten(kodekab,kodeprop,namakab)values
-> (‘001′,’DIY’,’Yogyakarta’),
-> (‘002’,’DIY’,’Bantul’),
-> (‘003′,’DIY’,’Sleman’),
-> (‘004′,’DIY’,’Kulon Progo’),
-> (‘005′,’DIY’,’Gunung Kidul’),
-> (‘006′,’JTG’,’Semarang’),
-> (‘007’,’JTG’,’Magelang’),
-> (‘008′,’JTG’,’Klaten’),
-> (‘009′,’JTM’,’Pacitan’),
-> (‘010′,’JTM’,’Malang’);
Query OK, 10 rows affected (0.02 sec)
Records: 10  Duplicates: 0  Warnings: 0
Perintah diatas digunakan untuk memasukkan record baru pada tabel kabupaten. Dalam pengisian record harus sesuai dengan field yang kita tulis.Query OK artinya kita telah berhasil memasukkan record kedalam tabel kabupaten. Records : 10 artinya ada 10 record atau kita telah memasukkan 10 record kedalam tabel kabupaten.
*      mysql> select * from kabupaten;
Perintah diatas digunakan untuk menampilkan data, data yang dimaksud disini adalah isi data dari tabel kabupaten. * artinya kita ingin menampilkan semua kolom.
+———+———-+————–+
| kodekab | kodeprop | namakab      |
+———+———-+————–+
| 001     | DIY      | Yogyakarta   |
| 002     | DIY      | Bantul       |
| 003     | DIY      | Sleman       |
| 004     | DIY      | Kulon Progo  |
| 005     | DIY      | Gunung Kidul |
| 006     | JTG      | Semarang     |
| 007     | JTG      | Magelang     |
| 008     | JTG      | Klaten       |
| 009     | JTM      | Pacitan      |
| 010     | JTM      | Malang       |
+———+———-+————–+
10 rows in set (0.06 sec)
*      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.
*      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=”modul13“;
Merupakan deklarasi variabel host yaitu localhost, variabel user yaitu root, variabel pass yaitu root dan variabel dbase yaitu modul13.
*      $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.
*      Kabupaten.php
*      dan ?>
Pasangan kode merupakan kode yang sebenarnya disebut dengan skrip PHP, kode tersebut digunakan untuk mengawali dan mengakhiri skrip PHP.
*      $kodeprop = $_GET[‘kodeprop’]; merupakan deklarasi variabel kodeprop untuk kodeprop dengan method GET.
*      include “koneksi.php”; perintah diatas digunakan untuk untuk memanggil file koneksi database yang bernama “koneksi.php.”
*      $sql = “select kodekab,namakab from kabupatenwhere kodeprop=’$kodeprop‘”;merupakan deklarasi variabel sql untuk menampilkan kodekab dan namakab dari tabel kabupaten dimana kodeprop berisi variabel kodeprop.
*      $hasil = mysql_query($sql); merupakan perintah variabel hasil  yang digunakan menjalankan query yang diambil dari variabel sql.
*      if(!hasil)
echo “Gagal Query…”.mysql_error();
untuk mengetes bukan variabel hasil, jika benar maka akan menampilkan Gagal Query dan mysql error
*      exit; merupakan perintah keluar.
*      if(mysql_num_rows($hasil) > 0)untuk mengecek kondisi menghitung jumlah baris dari query yang dihasilkan pada variabel hasil lebih besar dari 0 jika true maka perintah dibawah ini akan dikerjakan
*      $row = mysql_fetch_array($hasil,MYSQL_ASSOC);merupakan deklarasi variabel row yaitu digunakan untuk menampilkan data dari tabel dalam bentuk array dari variabel hasil. MYSQL_ASSOC menandakan bahwa array outputnya hanya satu macam yaitu yg menggunakan index associative.
*      echo”

“.$row[‘namakab’].””; digunakan untuk membuat list dan menampilkan kodekab dari variabel row,
untuk ganti baris dan namakab dari variabel row.

*      Coba.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