Pemrograman Web 1

MODUL 5
Penggunaan AJAX dalam PHP

A. TUJUAN
1. Mampu menjelaskan konsep AJAX dalam PHP
2. Mampu menjelaskan kode utama AJAX dalam PHP
3. Mampu membuat aplikasi web menggunakan AJAX dalam PHP

B. PETUNJUK
1. Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan
2. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar
3. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur
4. Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas

C. DASAR TEORI
AJAX adalah akronim dari Asynchronous JavaScript And XML. Merupakan suatu metode /
sistem dalam pemrograman web dinamis yang menggabungkan kode JavaScript dan PHP untuk
memproses suatu data tanpa harus reload halaman. Diagram alur dari AJAX kurang lebih seperti
berikut:

Browser
 Membuat XMLHttpRequest → Internet →
 Mengirim request Server
 Memproses request
 Membuat respon balik
Browser  Mengirim respon balik
 Memproses respon dengan JavaScript ← Internet ←
 Mengupdate tampilan halaman

Implementasi AJAX pada web dinamis antara lain pada aplikasi chatting, sistem auto-complete
pada form, sistem voting / rating pada forum, sistem validasi form, dialog box, dan beberapa
bentuk lain yang melibatkan pemrosesan data tanpa harus reload halaman web.

Sabian | STKIP PGRI TULUNGAGUNG

 Pemrograman Web 2

D. LATIHAN
1. Buka kembali Modul 4 beserta project yang telah kalian kerjakan. Copy seluruh filenya
kemudian pindahkan ke folder baru modul5
2. Akses localhost/phpmyadmin untuk membuka PHP My Admin
3. Buka tabel barang pada database toko

4. Pada tab Stucture / Struktur, tambahkan 1 (satu) kolom lagi

Sabian | STKIP PGRI TULUNGAGUNG

 Pemrograman Web 3

5. Deskripsi kolom baru kurang lebih seperti berikut:

Klik Save jika sudah sesuai dengan deskripsi di atas

6. Selanjutnya buka tab Browse, jika prosedur di atas sudah benar maka akan muncul kolom baru
bernama “status” dengan nilai kosong

Sabian | STKIP PGRI TULUNGAGUNG

 Pemrograman Web 4

7. Idealnya, semua kolom pada suatu tabel harus mempunyai nilai. Status dalam tabel ini
difungsikan untuk menentukan status penampilan data baris. Jika status bernilai 0, maka data
disembunyikan. Jika status bernilai 1, maka data ditampilkan. Berhubung nilai masih kosong,
maka kita harus memberikan nilai awal untuk data tersebut.
Untuk memberikan nilai, buka tab SQL dan eksekusi query berikut:

Klik tombol GO untuk mulai mengeksekusi

8. Jika prosedur benar maka tampilannya adalah sebagai berikut:

Sabian | STKIP PGRI TULUNGAGUNG

 Pemrograman Web 5

9. Selanjutnya buka index.php dan tambahkan kode berikut:

Kode di atas digunakan untuk menyertakan file JavaScript pada kode PHP kita

10. Buat file baru bernama script.js dalam satu folder dengan project kalian, kemudian tuliskan
kode berikut pada file tersebut:

Sabian | STKIP PGRI TULUNGAGUNG

 Pemrograman Web 6

11. Buat file baru bernama process_data.php dalam satu folder dengan project kalian,
kemudian tuliskan kode berikut pada file tersebut:

12. Jika prosedur yang kalian lalui benar, berikut daftar file pada folder modul5 yang sedang
kalian kerjakan:

File project dari modul 4: connection.php, library.php, dan index.php

File tambahan untuk modul 5: process_data.php dan script.js

Periksa kembali kelengkapan file kalian. Jika belum lengkap, silahkan dilengkapi. Jika sudah
lengkap, silahkan lanjut ke langkah selanjutnya.

Sabian | STKIP PGRI TULUNGAGUNG

 Pemrograman Web 7

13. Buka file library.php. Pada bagian kode untuk menambahkan barang ($page==1), ubah
query SQLnya menjadi seperti berikut:

Query lama: INSERT INTO barang VALUES('$id','$nama','$harga','$stok')

Query baru: INSERT INTO barang VALUES('$id','$nama','$harga','$stok','1')

14. Kemudian pada bagian kode untuk melihat daftar barang ($page==0), tambahkan beberapa
kode berikut ini:

Berikut versi lengkap dari kode tambahan pada masing-masing baris pada gambar:

Sabian | STKIP PGRI TULUNGAGUNG

 Pemrograman Web 8

Baris Kode
$opacity=$row[4]+0.5;
133
$tool=array('Tampilkan','Sembunyikan');
134
echo '<tr id="list'.$row[0].'" style="opacity:'.$opacity.';">
135
<a id="tool'.$row[0].'" style="text-decoration:none;color:#bf3f3f;"
143 onClick="ToggleStatus('.$row[0].')">'.$tool[$row[4]].'</a>

15. Selanjutnya buka browser dan akses localhost/modul5. Jika prosedur yang kalian lalui benar
maka kurang lebih tampilannya seperti berikut ini:

16. Jika kalian mencoba klik tombol Sembunyikan, maka hasilnya kurang lebih seperti berikut:

Baris yang disembunyikan tampilannya akan menjadi semi transparan. Jika diklik Tampilkan
maka akan tebal kembali

Sabian | STKIP PGRI TULUNGAGUNG

 Pemrograman Web 9

17. Coba perhatikan pada ikon dan tombol reload pada browser. Jika selama kalian memproses
tampilkan / sembunyikan data tidak terjadi reload halaman, maka AJAX bekerja dengan benar

E. TUGAS
Teruskan latihan di atas menggunakan AJAX sehingga tampilan akhirnya seperti berikut:

Ketentuan:
 Jika data disembunyikan, maka tombol Edit dan Hapus disembunyikan
 Jika data ditampilkan, maka tombol Edit dan Hapus ditampilkan

Sabian | STKIP PGRI TULUNGAGUNG