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
([Link]
Bahasa atau skrip PHP ini juga bisa kita sisipkan dengan HTML
*** Modul Pemrograman Web II ***
-- 1 --
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 [Link]
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 :
Tempat penyimpanan file atau proyek web yang akan dibuat.
Database Server / Tempat penyimpanan untuk
database
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 . . .; %>”
*** Modul Pemrograman Web II ***
-- 2 --
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 [Link] 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 [Link]. 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 :
[Link]
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 ***
-- 3 --
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 ***
-- 4 --
Ketik code di atas ke dalam Notepad kemudian simpan sebagai
[Link] pada direktori htdocs anda. Kemudian buka browser anda dan
ketik pada address bar alamat berikut : [Link]
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 [Link]
pada direktori htdocs anda. Kemudian buka browser anda dan ketik pada
address bar alamat berikut : [Link]
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 ***
-- 5 --
Ketik code di atas ke dalam Notepad kemudian simpan sebagai [Link]
pada direktori htdocs anda. Kemudian buka browser anda dan ketik pada
address bar alamat berikut : [Link]
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 [Link]
pada direktori htdocs anda. Kemudian buka browser anda dan ketik pada
address bar alamat berikut : [Link]
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 ***
-- 6 --
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 ***
-- 7 --
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 ***
-- 8 --
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 ***
-- 9 --
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 [Link]. lalu ketik alamat
berikut di browser: [Link]
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 ***
-- 10 --
<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 [Link].
*** Modul Pemrograman Web II ***
-- 11 --
Simpan skrip di atas dengan nama proses_login.php.
Lalu ketik alamat berikut di browser: [Link]
Struktur Kontrol
a) IF
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara
bersyarat.
Cara penulisannya adalah sebagai berikut:
if (syarat) atau: Atau:
{ if (syarat) if (syarat pertama)
statement { {
} statement statement pertama
} }
else elseif (syarat kedua)
{ {
statement lain statement kedua
} }
else
{
statement lain
}
*** Modul Pemrograman Web II ***
-- 12 --
Berikut ini contoh-contoh latihan penggunaan if.
Simpan code di atas dengan nama [Link]. Lalu ketik alamat berikut di
browser: [Link]
Simpan code di atas dengan nama [Link].
Kemudian untuk skrip hasil dari form di atas adalah sebagai berikut:
*** Modul Pemrograman Web II ***
-- 13 --
Simpan code di atas dengan nama proses_post.php.
Lalu ketik alamat berikut di browser: [Link]
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 [Link].
c) For
*** Modul Pemrograman Web II ***
-- 14 --
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 [Link]. Lalu ketik alamat berikut di
browser: [Link]
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 ***
-- 15 --
Simpan skrip di atas dengan nama [Link]. Lalu ketik alamat berikut di
browser: [Link]
*** Modul Pemrograman Web II ***
-- 16 --
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:
[Link]
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 ***
-- 17 --
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 ***
-- 18 --
b) Membuat skrip koneksi database.
Simpan code di atas dengan nama [Link]. 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 [Link]. Lalu ketik alamat berikut di
browser: [Link]
Keterangan:
*** Modul Pemrograman Web II ***
-- 19 --
o include "[Link]"; : skrip ini menggunakan function include yang
disediakan oleh PHP yang berfungsi menyisipkan isi dari file yang dipanggil
([Link]). 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='[Link]'>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='[Link]?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='[Link]?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 ***
-- 20 --
Simpan code di atas dengan nama [Link].
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 ***
-- 21 --
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 [Link].
Keterangan:
o $npm = $_GET['n']; : variabel npm yang nilainya diambil dari hasil request
GET dengan parameter n (lihat hyperlink pada skrip [Link]).
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.
o if(isset($_POST['bok'])) : dilakukan pengecekan apakah tombol dengan name
bok terjadi perubahan (diklik) atau tidak.
*** Modul Pemrograman Web II ***
-- 22 --
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 [Link].
Keterangan:
o $npm = $_GET['n']; : variabel npm yang nilainya diambil dari hasil request
GET dengan parameter n (lihat hyperlink pada skrip [Link]).
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 ***
-- 23 --
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 [Link] lalu isikan dengan skrip berikut:
<p>ini adalah text hasil respon dari proses ajax.</p>
b) Ketikkan skrip berikut, kemudian simpan dengan nama [Link]:
*** Modul Pemrograman Web II ***
-- 24 --
*** Modul Pemrograman Web II ***
-- 25 --
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 ([Link]) :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("[Link]"); : jika browser tidak
mendukung XMLHttpRequest, maka variabel xmlhttp akan menjadi objek dari
ActiveXObject.
o [Link] : pengecekan kesiapan dari browser dalam melakukan
proses ajax.
o [Link]==4 : pengecekan status dari objek XMLHttpRequest, angka
4 menandakan bahwa objek tersebut telah selesai diproses dan siap untuk bertukar
respon.
o [Link]==200 : pengecekan terhadap halaman web yang sedang diproses,
angka 200 menandakan bahwa halaman tersebut “OK”.
o [Link]("myDiv").innerHTML=[Link];
skrip ini akan mencari element dengan id myDiv kemudian akan mengganti isi dari
element tersebut dengan respon yang dihasilkan oleh ajax.
o [Link]("GET","[Link]",true); : skrip ini akan melakukan request GET
ke file [Link]. parameter true menandakan bahwa kita mengaktifkan modus
asynchronous menjadi true.
o [Link](); : skrip ini mengirimkan request yang kita lakukan sebelumnya
ke server.
*** Modul Pemrograman Web II ***
-- 26 --
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: [Link]
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 ([Link]).
2. ketik skrip berikut kemudian beri nama [Link].
*** Modul Pemrograman Web II ***
-- 27 --
Keterangan:
o <script type="text/javascript" src="[Link]"></script> : pemanggilan file
[Link] 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 [Link]).
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("[Link]",function(respon){ //skrip }); : pada bagian ini kita lakukan
request GET ke server di mana file yang di tuju adalah [Link] 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 ***
-- 28 --
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
([Link]) 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 ***
-- 29 --
[Link]
*** Modul Pemrograman Web II ***
-- 30 --
[Link]
*** Modul Pemrograman Web II ***
-- 31 --
[Link]
[Link]
*** Modul Pemrograman Web II ***
-- 32 --