Pemrograman Web 2 Unindra

*** Modul Pemrograman Web II ***
-- 1 --
Dasar - dasar PHP
1. Sejarah PHP
Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.
Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.
Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang PHP: Hypertext Preprocessing.
Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek. Sumber (http://id.wikipedia.org/wiki/PHP).
Bahasa atau skrip PHP ini juga bisa kita sisipkan dengan HTML
*** Modul Pemrograman Web II ***
-- 2 --
2. Instalasi Web Server.
Pertama jika anda ingin memulai Pemrograman Web dengan PHP, silahkan unduh aplikasi webserver, dalam modul praktikum Pemrograman web ini kami menggunakan XAMPP silahkan unduh di http://www.apachefriends.org/
Jika anda sudah mengunduh XAMPP tersebut silahkan anda install file instalasi XAMPP tersebut dan terserah anda untuk meletakan direktori instalasi XAMPP anda.
Contoh : C:xampp atau D:xampp dan lain sebagainya.
Setelah proses instalasi selesai anda buka direktori folder XAMPP tersebut dan akan terlihat seperti gambar berikut ini :
3. Pengenalan Tag PHP.
Penulisan tag PHP ada empat jenis, yaitu :
a) <?php
echo 'jika Anda ingin menangani dokumen XHTML atau XML ';
?>
b) <script language="php"> echo 'yang seperti ini biasa digunakan pada Front Page'; </script>
c) <? echo 'SGML processing instruction'; ?> <?= $variable; ?> merupakan singkatan dari "<? echo $variable; ?>“
d) <% echo 'ASP-style tag'; %> <%= $variable; %> This is a shortcut for "<% echo . . .; %>” Tempat penyimpanan file atau proyek web yang akan dibuat. Database Server / Tempat penyimpanan untuk database
*** Modul Pemrograman Web II ***
-- 3 --
Tetapi yang akan kita gunakan seterusnya adalah tag yang ditulis pada no. a) dengan alasan tag tersebut mampu menangani dokumen XHTML atau XML yang nantinya akan kita gunakan pada materi AJAX selanjutnya. Dan juga dengan tag tersebut kita tidak perlu melakukan konfigurasi pada php.ini yang terdapat pada webserver.
4. Penyimpanan File PHP
Berikut ini adalah contoh sebuah skrip PHP yang disisipkan ke dalam kode HTML :
Code di atas bisa anda coba ketik di aplikasi Notepad, kemudian anda simpan ke dalam direktori htdocs pada tempat instalasi XAMPP sebagai latihan1.php. Sebagai contoh, jika kita instal pada drive C maka direktori htdocs berada pada C:\xampp\htdocs. Kemudian anda buka browser (IE atau Mozilla) kemudian ketik pada address bar sebagai berikut :
http://localhost/latihan1.php
5. Penulisan Komentar.
Komentar biasa digunakan dalam skrip PHP sebagai penjelasan untuk baris kode yang dianggap penting ataupun panjang, sehingga memudahkan pembaca dalam memahami alur kode. Ada dua cara penulisan komentar dalam PHP, diantaranya terlihat dalam kode berikut :
*** Modul Pemrograman Web II ***
-- 4 --
6. Tipe Data
PHP mengenal delapan tipe data yang bisa ditangani, yaitu :
o Tipe data skalar
 Boolean
 Integer
 Float (floating-point number atau double)
 String
o Tipe data compound
 Array
 Object
o Tipe data khusus
 Resource
 Null
Tetapi pada modul ini hanya akan menggunakan beberapa tipe data yaitu tipe data skalar dan tipe data compound. Tipe-tipe data tersebut akan dijelaskan bertahap yang dimulai dengan penjelasan untuk tipe data skalar. Berikut ini penjelasannya :
a) Boolean
Tipe data boolean adalah tipe data yang hanya memiliki dua nilai yaitu true dan false. Berikut ini contoh penggunaannya dalam skrip PHP :
*** Modul Pemrograman Web II ***
-- 5 --
Ketik code di atas ke dalam Notepad kemudian simpan sebagai latboolean.php pada direktori htdocs anda. Kemudian buka browser anda dan ketik pada address bar alamat berikut : http://localhost/latboolean.php
b) Integer
Tipe data integer adalah tipe data yang mampu menyimpan nilai berupa bilangan bulat seperti : 4, -12, atau 32556.
Berikut ini contoh penggunaannya :
Ketik code di atas ke dalam Notepad kemudian simpan sebagai latinteger.php pada direktori htdocs anda. Kemudian buka browser anda dan ketik pada address bar alamat berikut : http://localhost/latinteger.php
c) Float / Double
Tipe data float/double adalah tipe data floating-point yaitu tipe data yang bisa menyimpan nilai berupa bilangan desimal seperti : 3.1123, 145.23, atau -23.41. Berikut ini contoh penggunaannya :
*** Modul Pemrograman Web II ***
-- 6 --
Ketik code di atas ke dalam Notepad kemudian simpan sebagai latfloat.php pada direktori htdocs anda. Kemudian buka browser anda dan ketik pada address bar alamat berikut : http://localhost/latfloat.php
d) String
Tipe data string adalah rangkaian karakter, seperti “Hallo” atau “cukup_mudah”. Nilai String dapat tertutup baik dalam tanda kutip ganda (“ ”) atau tanda kutip tunggal („ ‟). Tanda kutip dalam string dapat juga di “escaped” dengan menggunakan tanda (\) karakter. Berikut ini contoh string dalam PHP :
Ketik code di atas ke dalam Notepad kemudian simpan sebagai latstring.php pada direktori htdocs anda. Kemudian buka browser anda dan ketik pada address bar alamat berikut : http://localhost/latstring.php
7. Variabel.
Variabel berfungsi untuk menyimpan suatu nilai dan nilai yang ada di dalamnya dapat diubah sewaktu-waktu selama eksekusi program. Dalam membuat suatu nama variabel, nama yang dipilih harus memenuhi aturan pengenal (identifier). Pengenal tidak hanya digunakan untuk membuat nama variabel tetapi juga untuk membuat nama function dan class. Aturan yang berlaku adalah :
a) Harus diawali dengan huruf atau garis bawah (underscore).
b) Hanya boleh mengandung huruf, angka, ataupun garis bawah (underscore).
c) Besar kecilnya huruf dibedakan.
Contoh penggunaan pengenal yang dianggap benar menurut aturan di atas adalah :
$_1ni_boleh $YgIni_jg_boleh $aP4_Lg_yg_1n1 $x $y
Dan untuk contoh penggunaannya dalam php sudah dicontohkan pada bagian tipe data sebelumnya.
*** Modul Pemrograman Web II ***
-- 7 --
8. Operator.
Operator adalah simbol yang digunakan dalam program untuk melakukan suatu operasi, misalnya pemjumlahan atau perkalian, membandingkan kesamaan dari dua buah nilai, atau bahkan memberikan nilai kepada variabel. Contoh :
9. 2 + 3 * 4
adalah ekspresi. Tanda + dan * adalah operator, sedangkan 2, 3, dan 4 disebut operand atau argumen.
Dalam PHP, operator terbagi menjadi beberapa kelompok yaitu operator aritmatika (arithmetic), penugasan (assignment), pembanding (comparison), logika (logical), dan bitwise. Dan juga dalam PHP operator-operator tersebut memiliki prioritas, artinya apabila beberapa operator tertulis dalam suatu ekspresi maka akan ada pemilihan terlebih dahulu untuk menjalankan operator yang didahulukan sesuai dengan aturan yang berlaku dalam PHP. Adapun pengelompokan dan prioritas operator disajikan dalam tabel berikut ini :
*** Modul Pemrograman Web II ***
-- 8 --
kelompok dari masing-masing operator disebutkan pada kolom ketiga, dan urutan prioritas dari operator dimulai dari baris paling atas (tertinggi) ke bawah (terendah). Operator yang berada pada baris yang sama memiliki prioritas yang sama.
*** Modul Pemrograman Web II ***
-- 9 --
Penanganan Form dan Struktur Kontrol
10. Penanganan Form
Perhatikan Code HTML berikut :
Seperti yang terlihat dari contoh skrip di atas, kebanyakan elemen dari HTML memiliki beberapa atribut. Diantaranya:
1. Name
2. Id
3. Value
saat ini mungkin atribut ID tidak diperlukan tapi akan sering ditemukan saat anda masuk ke materi AJAX nantinya. Tiap elemen (tag) harus memiliki atribut name yang unik. Di mana nanti kita akan mengakses nilai dari elemen-elemen tersebut melalui atribut name dengan PHP.
Pada elemen form ada beberapa atribut yaitu : action dan method. Pada atribut method akan kita isi dengan get atau post yang akan dijelaskan nanti. Dan atribut action yang akan kita isi dengan lokasi dan nama file PHP yang akan kita tuju.
Method get, mengirimkan data-data melalui URL. Besarnya data yang bisa dikirimkan terbatas dan batasnya tergantung dari browser yang anda gunakan. Untuk Internet Explorer batas datanya adalah 2kb, artinya anda hanya bisa mengirimkan 2048 karakter melalui Internet Explorer dengan method get.
Method post, mengirimkan data sebagai bagian dari request ke server. Di mana data tersebut disisipkan ke message body. Tidak ada batasan dalam pengiriman data menggunakan method post.
Dalam memilih method mana yang akan kita gunakan, perhatikan pernyataan berikut:
*** Modul Pemrograman Web II ***
-- 10 --
1. Gunakan post saat berurusan dengan manipulasi data pada database: tambah, ubah, atau hapus data.
2. Gunakan get saat menampilkan data: hasil pencarian, pengurutan dll.
Kemudian untuk atribut action, yang telah disebutkan tadi akan diisi dengan lokasi dan nama file PHP yang akan dituju sebagai penindak lanjut proses yang akan dilakukan. Isi nilai atribut ini sesuai dengan lokasi dan nama file PHP yang sesuai dengan yang ada, dan apabila aksi/tindak lanjut dari action yang ingin anda lakukan berada pada file yang sama, maka kosongkan nilainya : action=””, atau anda bisa juga mengisinya dengan simbol # seperti : action=”#”.
Kita akan coba lebih lanjut tentang penanganan form dengan contoh-contoh di bawah ini:
Ketik code diatas kemudian simpan sebagai latform1.php. lalu ketik alamat berikut di browser: http://localhost/latform1.php
Penjelasan:
 <form action=”#” method=”get”> : pada baris ini kita mendeklarasikan elemen form dengan masing-masing atribut action yang bernilai # yang artinya aksi terjadi pada halaman tersebut. Kemudian atribut method yang bernilai get yang artinya method yang digunakan untuk pengiriman data adalah get.
*** Modul Pemrograman Web II ***
-- 11 --
 <input type="text" name="tnama" /> dan <input type="text" name="tumur" /> : pada baris ini dibuat textbox yang masing-masing memiliki atribut name unik yang nantinya akan berfungsi sebagai kunci untuk bisa mengakses nilai/value pada objek tersebut.
 <input type="submit" name="bok" value="OK" /> : merupakan elemen tombol sebagai pemicu dari aksi yang akan dilakukan. Elemen ini juga memiliki atribut name unik bok yang nantinya akan berguna sebagai penanda apakah pada tombol tersebut terjadi sesuatu.
 if(isset($_GET[‘bok’])) : pada baris ini dilakukan proses peninjauan, dengan fungsi isset yang digunakan untuk mengetahui apakah terjadi perubahan nilai pada tombol dengan name bok ? jika ya maka akan melakukan perintah sesuai dengan yang ada di dalam statement if tersebut.
 echo $_GET[‘tnama’].”<br/>”; : pada baris ini digunakan fungsi echo untuk melakukan pencetakan ke halaman web kita. Di mana yang akan tercetak adalah nilai/value dari textbox yang memiliki atribut name tnama. Pada ‘tnama’ tentu harus sesuai dengan name yang ada pada elemen yang sesuai.
Berikut contoh penanganan form dengan metode POST:
Simpan code di atas dengan nama latform2.php.
*** Modul Pemrograman Web II ***
-- 12 --
Simpan skrip di atas dengan nama proses_login.php.
Lalu ketik alamat berikut di browser: http://localhost/latform2.php
Struktur Kontrol
a) IF
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat.
Cara penulisannya adalah sebagai berikut:
if (syarat)
{
statement
}
atau:
if (syarat)
{
statement
}
else
{
statement lain
}
Atau:
if (syarat pertama)
{
statement pertama
}
elseif (syarat kedua)
{
statement kedua
}
else
{
statement lain
}
*** Modul Pemrograman Web II ***
-- 13 --
Berikut ini contoh-contoh latihan penggunaan if.
Simpan code di atas dengan nama latif1.php. Lalu ketik alamat berikut di browser: http://localhost/latif1.php
Simpan code di atas dengan nama latif2.php.
*** Modul Pemrograman Web II ***
-- 14 --
Kemudian untuk skrip hasil dari form di atas adalah sebagai berikut:
Simpan code di atas dengan nama proses_post.php.
Lalu ketik alamat berikut di browser: http://localhost/latif2.php
b) While
Bentuk dasar dari statement While adalah sebagai berikut:
while (syarat)
{
Statement
}
Arti dari statemant While adalah memberikan perintah untuk menjalankan statement dibawahnya secara berulang-ulang, selama syaratnya terpenuhi.
Simpan code di atas dengan nama latwhile1.php.
*** Modul Pemrograman Web II ***
-- 15 --
c) For
Cara penulisan statement FOR adalah sebagai berikut:
for (ekspresi1; ekspresi2 ; ekspresi3) statement
ekspresi1 menunjukkan nilai awal untuk suatu variable
ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statement
ekspresi3 menunjukkan pertambahan nilai untuk suatu variable
Simpan skrip di atas dengan nama latfor1.php. Lalu ketik alamat berikut di browser: http://localhost/latfor1.php
d) Switch
Statement SWITCH digunakan untuk membandingkan suatu variable dengan beberapa nilai serta menjalankan statement tertentu jika nilai variable sama dengan nilai yang dibandingkan.
Struktur Switch adalah sebagai berikut:
switch (variable)
case nilai:
statement
case nilai:
statement
*** Modul Pemrograman Web II ***
-- 16 --
Simpan skrip di atas dengan nama latswitch1.php. Lalu ketik alamat berikut di browser: http://localhost/latswitch1.php
*** Modul Pemrograman Web II ***
-- 17 --
PHP dan MySQL
11. PHPMyAdmin
Pada bab sebelumnya telah dibahas mengenai instalasi xampp yang merupakan
paket development untuk aplikasi berbasis PHP dan mysql. Pada xampp telah
disediakan sebuah tool untuk manajemen mysql yaitu phpmyadmin. Untuk
mengaksesnya kita cukup membuka browser, kemudian ketikkan URL berikut ke
kolom address bar:
http://localhost/phpmyadmin
Gambar Tampilan awal phpmyadmin
a) Membuat database dan table
Pada bagian create new database masukkan nama database dengan nama
db_web2.
Gambat Tampilan saat database berhasil dibuat
*** Modul Pemrograman Web II ***
-- 18 --
Kemudian di halaman yang sama, pada bagian create new table on database
db_web2 ketikkan nama table dengan nama mhs dan isikan jumlah fieldnya
dengan angka 4. Lalu klik tombol go.
Gambar Tampilan pengisian keterangan field/kolom
Kemudian langkah selanjutnya adalah mengisikan keterangan untuk field/kolom
seperti yang dicontohkan pada gambar di atas, lalu klik tombol save. Secara detail
keterangan field/kolom adalah sebagai berikut:
field tipe panjang index .
npm varchar 15 primary key
nama varchar 100
alamat varchar 100
no_telp varchar 15
Pada langkah-langkah di atas kita telah melakukan: pembuatan sebuan database
dengan nama db_web2, dan sebuah table dengan nama mhs yang terdiri dari 4
field/kolom. Maka dengan ini kita sudah bisa melanjutkan ke latihan berikutnya.
*** Modul Pemrograman Web II ***
-- 19 --
b) Membuat skrip koneksi database.
Simpan code di atas dengan nama koneksi.php. skrip ini akan terus kita gunakan
dalam latihan-latihan selanjutnya, yang dimaksudkan untuk memudahkan kita
sehingga tidak perlu lagi menulis ulang skrip untuk melakukan koneksi ke dabatase.
c) Menampilkan data dari table mhs
Pada contoh ini akan dibuat skrip untuk menampilkan semua data yang ada pada
table mhs. Berikut ini code yang akan kita buat:
Simpan code di atas dengan nama tampilmhs.php. Lalu ketik alamat berikut di
browser: http://localhost/tampilmhs.php
*** Modul Pemrograman Web II ***
-- 20 --
Keterangan:
o include "koneksi.php"; : skrip ini menggunakan function include yang
disediakan oleh PHP yang berfungsi menyisipkan isi dari file yang dipanggil
(koneksi.php). hal ini kita lakukan dengan maksud agar kita tidak perlu lagi
menulis ulang skrip untuk melakukan koneksi ke database.
o $q = "select * from mhs"; : variabel q yang bernilai query select yang
dipersiapkan untuk memanggil semua data yang ada dalam table mhs.
o $ex = mysql_query($q); : penggunaan function mysql_query yang berfungsi
untuk menjalankan query yang sudah kita persiapkan sebelumnya.
o echo "<a href='addmhs.php'>Tambah MHS</a>"; : hyperlink yang akan
digunakan pada latihan menambah data pada table mhs.
o while($r = mysql_fetch_array($ex)) : pada baris ini menandakan akan
dilakukan perulangan while yang akan menyimpan data dari table mhs secara
perbaris dalan bentuk array yang kemudian akan disimpan pada variabel r.
o $r['npm'] : variabel r yang telah menyimpan data perbaris dari table mhs
(keterangan sebelumnya) dipanggil dengan aturan array, yaitu diikuti dengan
pemanggilan indexnya, dalam hal ini index adalah nama field/kolom yang ada
pada table mhs. Keterangan ini berlaku untuk semua pemanggilan variabel r
pada skrip di atas.
o echo "<td><a href='editmhs.php?n=".$r['npm']."'>Ubah</a>";
hyperlink yang akan digunakan untuk latihan mengubah data pada table mhs.
Pada hyperlink ditambahkan parameter GET yaitu n yang akan mengirimkan
nilai npm.
o echo "<a href='delmhs.php?n=".$r['npm']."'>Hapus</a>";
hyperlink yang akan digunakan untuk latihan menghapus data pada table mhs.
Pada hyperlink ditambahkan parameter GET yaitu n yang akan mengirimkan
nilai npm.
d) Menambah data baru ke dalam table mhs
Skrip berikut merupakan latihan lanjutan dari latihan sebelumnya, yaitu
menampilkan data dari table mhs. Berikut ini merupakan skrip untuk latihan
menambah data pada table mhs.
*** Modul Pemrograman Web II ***
-- 21 --
Simpan code di atas dengan nama addmhs.php.
Keterangan:
o if(isset($_POST['bok'])) : dilakukan pengecekan apakah tombol dengan
name bok terjadi perubahan (diklik) atau tidak.
o $q = "insert into mhs(npm,nama,alamat,no_telp) ";
$q .= " values('$npm','$nama','$alamat',‟$notelp‟)"; : variabel q yang
menyimpan nilai string berupa query untuk melakukan insert/tambah data
pada table mhs.
o mysql_query($q); : eksekusi dari query yang dipersiapkan sebelumnya.
*** Modul Pemrograman Web II ***
-- 22 --
e) Mengubah data pada table mhs
Code berikut merupakan latihan lanjutan dari latihan sebelumnya, yaitu
menampilkan data dari table mhs. Berikut ini merupakan skrip untuk latihan
mengubah data pada table mhs.
Simpan code di atas dengan nama editmhs.php.
Keterangan:
o $npm = $_GET['n']; : variabel npm yang nilainya diambil dari hasil request
GET dengan parameter n (lihat hyperlink pada skrip tampilmhs.php).
o NPM : <input type="text" name="tnpm"
value="<?php echo $r['npm']; ?>"/><br/> : tag input text yang akan terisi
dengan nilai npm yang dihasilkan dari pemanggilan variabel r untuk field npm,
di mana variabel r tersebut merupakan hasil dari eksekusi query select.
*** Modul Pemrograman Web II ***
-- 23 --
o if(isset($_POST['bok'])) : dilakukan pengecekan apakah tombol dengan name
bok terjadi perubahan (diklik) atau tidak.
o $q = "update mhs set nama='$nama', alamat='$alamat', no_telp=‟$notelp‟ ";
$q .= "where npm='$npm'"; : variabel q yang menyimpan nilai string berupa
query untuk melakukan update/ubah data pada table mhs.
o mysql_query($q); : eksekusi dari query yang dipersiapkan sebelumnya.
f) Menghapus data pada table mhs
Code berikut merupakan latihan lanjutan dari latihan sebelumnya, yaitu
menampilkan data dari table mhs. Berikut ini merupakan skrip untuk latihan
mengubah data pada table mhs.
Simpan skrip di atas dengan nama deletemhs.php.
Keterangan:
o $npm = $_GET['n']; : variabel npm yang nilainya diambil dari hasil request
GET dengan parameter n (lihat hyperlink pada skrip tampilmhs.php).
o $q = "delete from mhs where npm='$npm'"; : variabel q yang menyimpan
nilai string berupa query untuk melakukan delete/hapus data pada table mhs.
o mysql_query($q); : eksekusi dari query yang dipersiapkan sebelumnya.
*** Modul Pemrograman Web II ***
-- 24 --
12. Pengenalan AJAX
AJAX atau Asynchronous Javascript And XML merupakan suatu teknik baru
untuk memanipulasi (suatu atau beberapa bagian) halaman web tanpa harus
melakukan reload. Ajax juga merupakan seni pertukaran data antara server (web
server) dengan client (browser), sehingga data-data yang kita peroleh dari server bisa
dengan mudah kita tambahkan, sisipkan, ubah ataupun hapus bagian-bagian tertentu
dari halaman web tanpa kita melakukan reload pada halaman web tersebut.
Berikut simulasi bagaimana Ajax bekerja:
Saat bekerja, Ajax menggunakan kombinasi dari :
 Objek XMLHttpRequest yang digunakan untuk pertukaran data dengan server
secara asynchronous behind the scene (di balik layar tanpa client ketahui).
Semua browser modern saat ini telah mendukung objek XMLHttpRequest
kecuali untuk Internet Explorer 5 dan 6 yang menggunakan ActiveXObject.
 Javascript/DOM yang bertugas untuk menampilkan/berinteraksi dengan
informasi/data.
 CSS yang bertugas menambahkan style ke data.
 XML yang seringkali digunakan sebagai format standar pertukaran/transfer
data.
Berikut ini contoh latihan dengan menggunakan objek XMLHttpRequest:
a) Buat file teks dengan nama coba.txt lalu isikan dengan skrip berikut:
<p>ini adalah text hasil respon dari proses ajax.</p>
b) Ketikkan skrip berikut, kemudian simpan dengan nama latajax1.php:
*** Modul Pemrograman Web II ***
-- 25 --
*** Modul Pemrograman Web II ***
-- 26 --
Keterangan:
o function loadXMLDoc() : deklarasi function yang di dalamnya memuat skrip
untuk proses ajax.
o var xmlhttp; : deklarasi variabel dengan nama xmlhttp yang akan menyimpan
objek XMLHttpRequest.
o if (window.XMLHttpRequest) :dilakukan pengecekan apakah browser
mendukung XMLHttpRequest.
o xmlhttp=new XMLHttpRequest(); : jika browser mendukung XMLHttpRequest
maka variabel xmlhttp akan menjadi objek XMLHttpRequest.
o xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); : jika browser tidak
mendukung XMLHttpRequest, maka variabel xmlhttp akan menjadi objek dari
ActiveXObject.
o xmlhttp.onreadystatechange : pengecekan kesiapan dari browser dalam melakukan
proses ajax.
o xmlhttp.readyState==4 : pengecekan status dari objek XMLHttpRequest, angka
4 menandakan bahwa objek tersebut telah selesai diproses dan siap untuk bertukar
respon.
o xmlhttp.status==200 : pengecekan terhadap halaman web yang sedang diproses,
angka 200 menandakan bahwa halaman tersebut “OK”.
o document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
skrip ini akan mencari element dengan id myDiv kemudian akan mengganti isi dari
element tersebut dengan respon yang dihasilkan oleh ajax.
o xmlhttp.open("GET","coba.txt",true); : skrip ini akan melakukan request GET
ke file coba.txt. parameter true menandakan bahwa kita mengaktifkan modus
asynchronous menjadi true.
o xmlhttp.send(); : skrip ini mengirimkan request yang kita lakukan sebelumnya
ke server.
*** Modul Pemrograman Web II ***
-- 27 --
13. Jquery
JQuery adalah library open source yang memanfaatkan teknologi javascript untuk
berinteraksi dengan teknik ajax. JQuery pertama kali dirilis pada Januari 2006 oleh
John Resig. Dengan memanfaatkan bantuan JQuery inilah kita dapat
mengimplementasikan ajax dengan skrip yang lebih pendek dan sederhana. Dengan
kata lain, di dalam library JQuery telah disediakan beragam fungsi dan fitur untuk kita
bisa menggunakan teknik ajax.
Kita bisa dapatkan file JQuery di: http://docs.jquery.com/Downloading_jQuery.
Apabila kita ingin membuat aplikasi berbasis JQuery maka file ini harus kita letakkan
di dalam folder project kita.
Selanjutnya akan kita coba latihan JQuery sederhana yang pada bagian
sebelumnya (AJAX) telah dibuat. Namun di sini kita akan lihat bagaimana
menambahkan skrip JQuery ke dalam skrip kita. Berikut contohnya:
1. kita akan gunakan file teks yang telah dibuat sebelumnya (coba.txt).
2. ketik skrip berikut kemudian beri nama latjquery.php.
*** Modul Pemrograman Web II ***
-- 28 --
Keterangan:
o <script type="text/javascript" src="jquery.js"></script> : pemanggilan file
jquery.js agar bisa kita gunakan. Sebelumnya pastikan file tersebut telah kita
sediakan di dalam folder project kita.
o <script type="text/javascript"> //skrip </script> : skrip jquery akan kita
letakkan di dalam element tag script. Di dalam element ini kita bisa
menyisipkan skrip-skrip yang kita butuhkan dengan JQuery.
o $(document).ready(function(){ } : pada bagian ini dilakukan pengecekan
apakah dokumen/halaman web yang akan kita proses telah dalam keadaan siap
atau tidak. Bagian ini sebenarnya menggantikan beberapa baris dari skrip
javascript standar dimulai dari menciptakan objek XMLHttpRequest sampai
dengan pengecekan status-status dari browser maupun data yang akan diproses
(lihat latajax1.php).
o $("#bok").click() : pada bagian ini sebagai penanda bahwa aksi akan terjadi
hanya pada saat element dengan id bok (submit button) diklik. simbol #
(pagar) menandakan yang akan kita akses adalah id suatu elemen.
o $.get("coba.txt",function(respon){ //skrip }); : pada bagian ini kita lakukan
request GET ke server di mana file yang di tuju adalah ubah.txt kemudian
semua hasil proses yang didapatkan akan disimpan ke dalam variabel respon.
o $("#myDiv").html(respon); : pada bagian ini hasil dari proses ajax yang
tersimpan dalam variabel respon akan menggantikan isi konten dari element
dengan id myDiv.
*** Modul Pemrograman Web II ***
-- 29 --
14. PHP, MySQL, dan JQuery
Pada bab sebelumnya mengenai latihan mengakses database MySQL hanya
dengan bantuan PHP, baik itu berupa menampilkan (select), menambah (insert),
mengubah (update), dan menghapus (delete) data pada table mhs. Maka kali ini
latihan-latihan tadi akan kita ulangi dan akan dilengkapi dengan teknik ajax
memanfaatkan library JQuery.
Database yang digunakan masih sama yaitu db_web2 dengan table mhs yang
telah dibuat sebelumnya. Dan skrip koneksi mysql yang sebelumnya kita buat
(koneksi.php) akan kita gunakan lagi, dan beberapa skrip lainnya akan kita modifikasi
dengan dilengkapi skrip JQuery.
Menampilkan data dari table mhs dengan JQuery
Mungkin akan terlihat banyak kemiripan dengan code yang sebelumnya dibuat,
karena di sini kita hanya melengkapi skrip tersebut dengan ditambahkan skrip JQuery.
Berikut ini contoh latihan yang akan dibuat:
*** Modul Pemrograman Web II ***
-- 30 --
tampilmhs.php
*** Modul Pemrograman Web II ***
-- 31 --
addmhs.php
*** Modul Pemrograman Web II ***
-- 32 --
editmhs.php
deletemhs.php