MODUL XIII, WEB 2

AJAX DENGAN DATABASE II
  1. TUJUAN
Agar mahasiswa mampu mengakses fungsi ajax menggunakaneksternal 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 hasilnyapada sebuah komponen form tertentu misalnya menu drop-down, textarea maupuntextfield.
Pembahasan Praktikum :
*     Databasemodul13
*     Enterpassword: ****
Password mysql adalahroot. Kalau berhasil maka akan ada pemberitahuan seperti dibawah ini.
*     Welcometo the MySQL monitor.  Commands end with; or \g.
Your MySQL connection id is 1
Server version: 6.0.4-alpha-community-logMySQL Community Server (GPL)
Type ‘help;’ or ‘\h’ for help. Type ‘\c’ toclear the buffer.
\h artinya help digunakan apabila kita butuh bantuan dan\c digunakan apabila kita menginginkan perintah yang kita tulis tidakdikerjakan 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 masukkedalam 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)
Perintahdiatas 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
Perintahdiatas digunakan untuk memasukkan record baru pada tabel propinsi. Dalam pengisian record harus sesuai dengan field yangkita tulis.Query OK artinya kita telah berhasil memasukkan record kedalam tabelpropinsi. Records : 3 artinya ada 3 record atau kita telah memasukkan 3 record kedalam tabel propinsi.
*     mysql>desc propinsi;
Perintahdiatas 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;
Perintahdiatas digunakan untuk menampilkan data, data yang dimaksud disini adalah isidata dari tabel propinsi. * artinya kita ingin menampilkan semua kolom.
+———-+————-+
|kodeprop | namaprop    |
+———-+————-+
|DIY      | DIY         |
|JTG      | JAWA TENGAH |
|JTM      | JAWA TIMUR  |
+———-+————-+
3 rowsin set (0.00 sec)
*     mysql>create table kabupaten
-> (kodekab char(5) not null primarykey,
-> kodeprop varchar(5) not null,
-> namakab varchar(30) not null);
Query OK, 0 rows affected (0.09 sec)
Perintahdiatas 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;
Perintahdiatas 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
Perintahdiatas digunakan untuk memasukkan record baru pada tabel kabupaten. Dalam pengisian record harus sesuai dengan field yangkita tulis.Query OK artinya kita telah berhasil memasukkan record kedalam tabelkabupaten.Records : 10 artinya ada 10 record atau kita telah memasukkan 10 record kedalam tabel kabupaten.
*     mysql> select * from kabupaten;
Perintahdiatas digunakan untuk menampilkan data, data yang dimaksud disini adalah isidata 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
*     varXMLHttpRequestObject = false; merupakandeklarasi variable XMLHttpRequestObject dengan nilai false. AJAX memerlukanXMLHttpRequest Object untuk dapat me-request sebuah halaman web secara Asynchronous. Digunakan untuk berjaga-jagajika sebelumnya XMLHttpRequestObjectsudah aktif maka kita non aktifkan lagi.
*     if (window.XMLHttpRequest) untuk mengetes objek XMLHttpRequest untuk membedakan antara IE dengan Firefox, perintah iniakan dikerjakan jika bukan IE
*     XMLHttpRequestObject = newXMLHttpRequest() 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 iniakan 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 iddivID.
*      if (XMLHttpRequestObject) perintah ini akan dijalankan jikaobjek XMLHttpRequest telah terbuat.
*     var obj =document.getElementById(divID); digunakan untuk mengambil objek div.
*     XMLHttpRequestObject.open(“GET”,url, open); digunakan untuk mengirimkan requestkeserver / membuka koneksi keserver, dengan parameter pertama dari open yaitumethod permintaan HTTP GET, parameter kedua adalah url dari halaman yangdiminta, parameter ketiga diset ketika permintaan adalah asynchronouse, disetTRUE maka eksekusi fungsi Javascript akan berlanjut walau tanggapan dari serverbelum sampai.
*     XMLHttpRequestObject.onreadystatechange=function() digunakan untuk menangani event yang bekerja setiap kali status berubah /perubahan state,  setelah meminta requestkeserver, diperlukan sebuah function yang dapat menerima data yang dikembalikanoleh server, properti  onreadystatechange menyimpan data dari server danmemprosesnya.
*     if (XMLHttpRequestObject.readyState==4&& XMLHttpRequestObject.status==200)
Untuk mengetes respon yang diberikanoleh server sudah komplit (artinya data sudah didapatkan dan mengembalikanstatus sebuah nomor yaitu OK,
*     obj.innerHTML=XMLHttpRequestObject.responseText; maka akanmengembalikan response dalam bentuk string, data ini akan dimasukkan kedalamdiv.
*     XMLHttpRequestObject.send(null); merupakan perintah objek XMLHttpRequest untuk mengirim HTTP request keserverdan menerima suatu respon.
*     Koneksi.php
*     dan ?>
Pasangan kode merupakan kode yang sebenarnya disebut dengan skrip PHP, kode tersebutdigunakan untuk mengawali dan mengakhiri skrip PHP.
*     $host=”localhost”;
$user=”root”;
$pass=”root”;
$dbase=”modul13“;
Merupakan deklarasi variabelhost yaitu localhost, variabel user yaitu root, variabel pass yaitu root danvariabel dbase yaitu modul13.
*     $kon=mysql_connect($host,$user,$pass); merupakan perintah variable kon untuk mengkoneksikanatau menghubungkan file keserver yaitu variable host, user dan pass artinyakelocalhost, dengan user dan pass root. Atau membuka koneksi dengan databaseMysql 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 makaakan menampilkan Gagal Koneksi.
*     if(!mysql_select_db($dbase)) die (“Gagal KoneksiDatabase…!!!”); untuk mengetes apakah berhasilmelakukan koneksi database atau tidak, jika berhasil maka akan masuk padadatabase tes jika gagal maka akan menampilkan Gagal Koneksi Database.
*     Kabupaten.php
*     dan ?>
Pasangan kode merupakan kode yangsebenarnya disebut dengan skrip PHP, kode tersebut digunakan untuk mengawalidan mengakhiri skrip PHP.
*     $kodeprop= $_GET[‘kodeprop’]; merupakan deklarasi variabel kodepropuntuk kodeprop dengan method GET.
*     include “koneksi.php”; perintah diatasdigunakan untuk untuk memanggil file koneksi database yang bernama “koneksi.php.”
*     $sql = “select kodekab,namakab fromkabupatenwhere kodeprop=’$kodeprop‘”;merupakan deklarasi variabel sql untuk menampilkan kodekab dan namakab daritabel kabupaten dimana kodeprop berisi variabel kodeprop.
*     $hasil = mysql_query($sql); merupakanperintah variabel hasil  yang digunakan menjalankan query yang diambildari variabel sql.
*     if(!hasil)
echo “GagalQuery…”.mysql_error();
untuk mengetes bukanvariabel 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 padavariabel hasil lebih besar dari 0 jika true maka perintahdibawah ini akan dikerjakan
*     $row = mysql_fetch_array($hasil,MYSQL_ASSOC);merupakan deklarasi variabel row yaitu digunakan untuk menampilkan datadari tabel dalam bentuk array dari variabel hasil. MYSQL_ASSOC menandakan bahwa array outputnya hanyasatu macam yaitu yg menggunakan index associative.
*     echo”

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

*     Coba.php
*      merupakan bagian kepala. Dibagian ini kita bisamenentukan 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