informatikaunindra.orginformatikaunindra.org/file/WEB 2/Diktat/Pemrograman Web... · Web viewPada...

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 ***-- 1 --

http://id.wikipedia.org/wiki/PHP

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

http://www.apachefriends.org/

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 :


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 :


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 :


http://localhost/latinteger.php

http://localhost/latboolean.php

Ketik code di atas ke dalam Notepad kemudian simpan sebagai latfloat.php


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


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.


http://localhost/latfloat.php

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 :


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.


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:


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.


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


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 }


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.

Kemudian untuk skrip hasil dari form di atas adalah sebagai berikut:*** Modul Pemrograman Web II ***

-- 13 --

http://localhost/latif1.php

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.

c) For


http://localhost/latif2.php

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


Simpan skrip di atas dengan nama latswitch1.php. Lalu ketik alamat berikut di

browser: http://localhost/latswitch1.php


http://localhost/latswitch1.php

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


http://localhost/phpmyadmin

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.


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

Keterangan:*** Modul Pemrograman Web II ***

-- 19 --

http://localhost/tampilmhs.php

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.


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.


e) Mengubah data pada table mhs

Code berikut merupakan latihan lanjutan dari latihan sebelumnya, yaitu


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.

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.


f) Menghapus data pada table mhs

Code berikut merupakan latihan lanjutan dari latihan sebelumnya, yaitu


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.



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:


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.


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.


http://docs.jquery.com/Downloading_jQuery

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.


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 JQueryMungkin 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:


tampilmhs.php


addmhs.php


editmhs.php

deletemhs.php


informatikaunindra.orginformatikaunindra.org/file/WEB 2/Diktat/Pemrograman Web... · Web viewPada...

Documents

Transcript of informatikaunindra.orginformatikaunindra.org/file/WEB 2/Diktat/Pemrograman Web... · Web viewPada...