Modul PHP Lanjut

MODUL 1
PHP Lanjut
(Modularisasi, Pengaksesan File)
Tujuan :
Mampu menjelaskan perintah-perintah PHP (modularisasi, peng aksesan
file) dan membuat aplikasi dengan perintah-perintah PHP.
Tug as Pendahuluan
1. Ada 4 jenis Modularisasi dalam PHP, jelaskan masing-masing
dengan contoh:
a. Require()
b. Include()
c. Require_once()
d. Include_once()
2. Jelaskan apa yang dimaksud dengan pengaksesan file!
3. jelaskan apa saja fungsi dari pengaksesan file!
1. Dasar teori
Modularisasi
Modularisasi adalah penyusunan/pembuatan program berdasarkan modul-
modul. Modul dapat berupa fungsi atau prosedur. Jenis modularisasi di dalam PHP
antara lain :
§ require()
§ include()
§ require_once()
§ include_once()
1.1.Mengakses File
PHP menyediakan seju mlah fungsi yang dapat digunakan untuk melaku kan
interaksi dengan file. Ada fungsi untuk melaku kan pembuatan, pembukaan,
penulisan dan penghapusan file. Urutan pengaksesan file adalah seperti yang
ditunjukkan pada gambar 7.9:
1
Gambar 7.9 Skema pengaksesan file
Sebuah file dapat dibayangkan seperti buku. Bila ingin membaca isi sebuah
buku tersebut , maka perlu membuka buku terlebih dahulu. Serupa dengan hal
tersebut maka bisa dilaku kan operasi pembacaan atau perekaman data pada berkas.
Selanjutnya jika t idak lagi bermaksud menggunakan berkas tersebut, maka perlu
menutup berkas.
1.2. Pemeriksaan File

Pemeriksan apakah file yang akan kita gunakan dalam aplikasi yang kita
buat sangat penting. Pemeriksaan file memberikan kepastian kepada program
apakah file yang akan diproses sudah ada atau belum, jika belu m ada pakah perlu
dibuat dulu filenya atau langsung mmebrikan pesan peringatan kepada pemakai
bahw file yang akan digunakan atau diproses tidak ada. Skrip secara umu m untuk
pemeriksaan file adalah: file_exists(“nama file”). Untuk lebih jelasnya seperti
dibawah in i:
<?php
$nama_file =”pesan.txt”;
if(file_exists($nama_file){
echo “FILE $nama_file SUDAH ADA!”;
}else{
echo “FILE $nama_file BELUM A DA!”;
}
?>
1.3. Membuk a File

Untuk mengakses dan mengubah isi file, maka dibutuhkan file descriptor
adalah suatu variable yang digunakan untuk mewakili file tertentu. File descriptor
didapat dengan menggunakan fungsi PHP: fopen() untuk membuka file. Bentuk
pemanggilan fungsi ini adalah sebagai berikut:
2
fopen (nama_berkas , mode)
§ Fungsi fopen membutuhkan 2 parameter yaitu nama_berkas dan mode (jenis

akses).
§ Nama berkas bertipe string yang merupakan nama file yang akan dibuka.
Harus berada dalam d irektori yang sama dengan tempat script php yang
memanggilnya.
§ Mode (jenis akses) bertipe string yang digunakan untuk menentukan
perlakuan yang diperbolehkan terhadap file yang dibuka. Ada beberapa
mode (jenis akses) yaitu:
Mode Keterangan
r File hanya bisa dibaca. Penunjuk File akan diletakkan diawal
berkas
r+ File dibuka dengan mode baca dan tulis (artinya, bisa merekam
data atau membaca data). Penunjuk File akan diletakkan diawal
berkas.
w Mode perekaman data. File akan d iciptakan kalau belu m ada.
Kalau sudah ada, isinya akan dihapus.
w+ File dibuka dengan mode baca dan tulis (artinya, bisa merekam
dan atau membaca data). File akan diciptakan kalau belu m ada.
Kalau sudah ada, isinya akan dihapus.
a Mode untuk penambahan data. Pada saat file dibuka, penunjuk
file diletakkan pada akhir file. Apabila berkas belum ada, file
akan diciptakan.
a+ File dibuka dengan mode baca dan tulis (artinya, bisa merekam
data atau membaca data). Penunjuk file akan diletakkan diakhir
file. Apabila belu m ada, file akan diciptakan.
b Digunakan pada file system windows yang membedakan file text
dan binary.
1.4. Membaca Isi File

Setelah file berhasil dibuka maka data dapat dilakukan pembacaan file atau
memanipulasi file. Ada beberapa fungsi yang digunakan untuk melaku kan
man ipulasi file diantaranya:
§ Fungsi Menyi mpan Data ke File
Proses penyimpanan data ke dalam file membutuhkan fungsi
fputs(). Bentuk pemanggilannya:
fputs (pegangan, data)
Dalam hal in i argu men pegangan menyatakan pegangan file yang
diperoleh ketika memanggil fopen. Dan argument data (bertipe string)
menyatakan data yang akan direkam. Fungsi memberikan n ilai balik berupa:
§ TRUE kalau data berhasil direkam
3
§ FALSE jika data gagal d irekam.
Contoh:
$pegangan = fopen (“BUKUTAMU.DAT”,”a”);
fputs ($pegangan,”devie”);
§ Fungsi Membaca Data ke File
Proses pembacaan data yang terdapat pada file membutuhkan fungsi fgets().
Fungsi fgets() merupakan kebalikan dari fputs(). Bentuk pemanggilannya:
fgets (pegangan, panjang)
arugen pegangan menyatakan pegangan file yang diperoleh ketika

memanggil fopen (yang menyatakan file yang akan d ibaca). Argu ment
panjang menyatakan ju mlah karakter yang akan dibaca.
Contoh:
$pegangan=fopen (“BUKUTAMU.DAT”,”r”);
fgets($pegangan,255);
§ Fungsi Penunjuk Akhir Berkas
Proses untuk memeriksa apakah penunjuk file sedang menunjuk akhir file
atau tidak mengggunakan fungsi feof. Bentuk pemanggilannya:
feof (peganngan)
Fungsi ini menghasilkan nilai TRUE kalau penunjuk file sedang menunjuk
akhir file. Untuk keadaan lainnya, nilai baliknya berupa FALSE.
Contoh:
$pegangan=fopen(“BUKUTAMU.DAT”,”r”);
feof($pegangan);
2.Kegiatan Praktikum :
1. Setelah mengenal seju mlah fungsi yang terkait dengan berkas maka buat
program dengan PHP dalam mengimplementasikan buku tamu. Dimana
buku tamu in i dengan tujuan memungkinkan pengunjung memasukkan
data pribadi dan memberi ko mentar, silahkan ketik koding di bawah ini,
amat i hasilnya
4
2. Setelah membuat web desain buku tamu, ketiklah simpan.php untuk
menyimpan data yang dimasukkan pada file buku tamu diatas
5
6
3. Ketik bukutamu.php di bawah ini dan modifikasi programnya untuk
menamp ilkan siapa saja tamu yang pernah masuk ke web kita, contoh
tampilannya seperti di bawah ini.
7
8
9
3. Tugas Praktikum
1. Tulis kesimpu lan anda mengenai praktiku m d i atas
2. PHP memungkinkan suatu kode yang disimpan dalam sutu berkas
disertakan kedalam suatu skrip PHP menggunakan pernyataan include.
Hal ini sangat berguna jika mempunyai sederetan kode (misalnya definisi
suatu fungsi, definisi kosntanta, atau kode yang lain) yang sering
digunakan pada berbeagai skrip PHP yang dibuat. Adapun bentuk
pernyataan include adalah sebagai berikut:
include (nama_berkas)
Pernyataan include mengasumsikan bahwa berkas eksternal yang akan
diproses adalah HTML.
Buat desain web seperti di bawah in i, d imana terdiri dari 2 file php yaitu
forminclude.php untuk input data dan include.php sebag ai file
eksternal untuk menukar nilai pertama menjadi kedua dan
sebaliknya
10
File Include.php
5. Referensi
1. Abdul Kadir, ”Dasar Pemrograman WEB Dinamis menggunakan PHP”.
ANDI Yogyakarta.Yogyakarta, 2003.
2. Arief Ramadahan, dkk. ”Buku Latihan PHP 5 & M YSQL”. PT. Elex
Ko mputindo. Jakarta. 2005.
3. Chris Bates, Web Programming: Bu ild ing Internet Applications, Third
Ed ition, John Wiley & Sons Ltd, England, 2006.
4. Elliot White III, Jonathan Eisenhamer, PHP 5 in Practice, Sams, 2006.
11
5. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP & ASP”,
Gava Media, Yogyakarta. 2007.
6. Welling Lu ke, Tho mpson Laura, ”PHP and MySQL Web Develop ment”,
Sams Publishing, 2003.
7. http://www.php.net
8. http://www.mysql.com
9. http://www.w3c.org
10. http://www.ilmukomputer.com
12
MODUL II
BASISDATA MYSQL DAN KONEKSI
Tujuan :
Mampu menggunakan dan mengaplikasikan Basis Data MySQL serta
mengkoneksikannya dengan PHP.
PrePraktikum
1. Apakah yang anda ketahui tentang basis data?
2. Sebutkan operator-operator dan fungsi-fungsi pada MYSQL serta
jelaskan setiap bagian yang mendukung operator dan fungsi tersebut?
3. Apa yang anda ketahui tentang query serta sebutkan tiga golongan dari
Pernyataan (statement) SQL?
4. Apa yang anda ketahui tentang function?
5. Jelaskan apa kegunaan dari:
a. Fungsi String
b. Fungsi fclose
c. Fungsi fgets
d. Fungsi fputs
e. Fungsi Date
f. Fungsi Mail
g. Fungsi fopen
h. Fungsi feof
1. Dasar Teori
Basis data adalah sekumpalan in formasi yang diatur agar mudah dicari.
Dalam art i u mu m basis data adalah sekumpulan data yang diproses dengan bantuan
ko mputer yang memungkin kan data dapat diakses dengan mudah dan tepat, yang
dapat digambarkan sebagai akt ifitas dari satu atau lebih organisasi yang berelasi.
MYSQL termasuk jenis RDBMS (Relasional Database Management
System). Sedangkan RDBMS sendiri akan lebih banyak mengenal istilah seperti
tabel, baris dan kolom digunakan dalam perintah-perintah di MYSQL. M YSQL
merupakan sabuah basis data yang mengandung satu atau sejumlah tabel. Tabel
terdiri atas sejumlah baris dan setiap baris mengandung satu atau beberapa kolom.
Didalam PHP telah menyediakan fungsi untuk koneksi ke basis data dengan
sejumlah fungsi untuk pengaturan baik menghubungkan maupun memutuskan
13
koneksi dengan server database MySQL sebagai sarana untuk mengumpulkan
informasi.
1.1 Fungsi-Fungsi Yang disedi akan Oleh PHP

1. Fungsi String
PHP menyediakan banyak sekali fungsi-fungsi yang berhubungan dengan string.
Beberapa diantaranya adalah
- String strlen (string str)
- string strtoupper (string string)
- string substr (string, string, int, string [,int length])
- dst
2. Fungsi Date
Fungsi date dapat digunakan untuk mempero leh tanggal atau jam pada system
(server). Bentuk pemanggilan :
date(string_format)
Nilai balik berupa string yang tergantung oleh nilai pada argu mennya.
Argumen Nilai Balik
D Nama hari yang terdiri atas tiga huruf (misalnya “Sun” dan
“Fri”);
F Nama bulan sekarang (misalnya “January”)
l (Huruf L Kecil) Nama hari sekarang, dengan format panjang (misalnya,
“Friday”)
M Nama bulan, terdiri atas tiga huruf, misalnya “Jan”
Y Tahun dalam bentuk 4 dig it. M isalnya, “2009”
t Jumlah hari pada bulan sekarang (“28” sampai dengan “31”)
d hari sekarang dengan format angka
3. Fungsi File
Fungsi yang digunakan baik untuk kebutuhan pembukaan, pemanipulasi maupun
menutup file. Fungsi-fungsi tersebut diantaranya:
- Bool fopen (string filename, string mode)
- int fwrite (resource handle, string string[, int length)
- bool fclose (resource handle)
- dst
1.2 Koneksi Ke Database

PHP menyediakan fungsi untuk koneksi ke database dengan sejumlah fungsi
untuk pengaturan baik menghubungkan maupun memutuskan koneksi dengan
server database MySQL. Selain MySQL, PHP juga menyediakan beragam fungsi
untuk melaku kan hubungan dengan server database misalnya database MS SQL
Server, mSQL, Oracle dan sebagainya. Kebanyakan fungsi koneksi ke server
14
database mengunakan pola yang sama yaitu server, port, user, password. Fungsi-
fungsi tersebut adalah:
1. mysql_connect(host,user,password)
Fungsi ini digunakan untuk membuka koneksi dengan server MySQL.
Parameter yang digunakan sebagai berikut: Host: nama server dengan server local
dapat dengan menggunakan localhost. User: user yang terdaftar dalam MySQL
yang digunakan untuk login ke server. Password: password dari user yang
melakukan koneksi.Contoh:
$host = "localhost";
$name = "root";
$pass = "";
$conn =mysql_connect($host,$name,$pass);
2. mysql_select_db(nama_ database,nama_koneksi)
Fungsi ini digunakn untuk memilih database yang akan digunakan. Contoh:
$conn=mysql_connect("localhost","root","");
$sukses=mysql_select_db("perpustaan",$conn);
3. mysql_ query(perintah_ query,nama_koneksi)

Perintah ini digunakan untuk mengirimkan query ke server database melalui
lin k nama koneksi. Fungsi in i mengembalikan nilai FA LSE baik CREATE,
UPDATE, DELETE, DROP, dll. Contoh:
$conn=mysql_connect("localhost","root","");
$sql="select nama_anggota, password
fro m anggota where nomor_anggota='$username'";
$rs=mysql_query($sql,$conn);
4. mysql_fetch_array(hasil_query)
Fungsi ini d igunakan untuk melakukan pembacaan record hasil query yang
dilakukan. Pembacaan ini d ilakukan mu lai dari record pertama sampai nilai
terakhir. Tiap record dibaca, dibentuk men jadi array dengan index nu meric dari 0
sampai dengan n-1 dan index assosiatif dengan index adalah nama field dari table.
5. mysql_fetch_row(hasil_query)
Fungsi ini mempunyai hampir sama dengan mysql_fetch_array tetapi array
hasil pembacaan data hanya menggunakan index nu meris saja yang dimulai dari 0
untuk kolo m pertama samapai n -1 untuk kolo m terakh ir hasil query.
6. mysql_result(hasil_query,no_record,nama_field),
15
Fungsi ini berguna untuk mengambil langsung nilai hasil query pada suatu
baris dan kolom tertentu (satu sel) dengan menyebutkan parameter variabel hasil
proses query, no_record, untuk nomor baris (dimu lai dari 0) dan nama field.
7. mysql_num_fiel d(hasil_query)
Fungsi berguna untuk mendapatkan ju mlah field dari hasil query. Contoh:
$ju m_ kolo m=mysql_num_fields($rs);
8. mysql_num_rows(hasil_query)
Fungsi ini berguna untuk mendapatkan ju mlah baris dari hasil query.
Menghasilkan suatu array yang berisi seluruh ko lo m dari sebuah baris pada suatu
himpunan hasil. Mengambil data secara baris per baris. Data yang diambil dalam
bentuk array (elemen dari array adalah field-field dari tabel data). Contoh:
$jml_baris=mysql_num_rows($rs);
2. Kegiatan Praktikum
1. Aktifkan database db_Akademik dan table mahasiswa, klik to mbol structure,
cek table mahasiswa, kemudian klik icon structure
Gambar 2.1. Tampilan untuk merubah struktur tabel

2. Setelah klik icon structure, maka cek salah satu field yang akan di ubah
structure, misalnya cek alamat, kemudian klik icon change.
3. Setelah itu ketikkan pada field alamat, misalnya akan mengubah alamat
men jadi alamat_ru mah, setelah itu klik save.
16
Gambar 2.2 Tamp ilan untuk menuliskan data yang akan di ubah
4. Setelah membuat database db_Akademik dengan tabel mahasiswa, maka anda
dapat membuat coding PHPnya untuk koneksi ke database kemudian buat form
untuk menyimpan data sebagai berikut:
File : db1.php
File : Mahasiswa1_form.php
17
Hasilnya:
18
File : mahasiswa1_saving.php
5. Amatilah yang terjadi dari studi kasus diatas!

6. Tugas tambahan (ditentukan oleh asisten praktiku m)!
19
3. Tug as Praktikum
1. Desainlah sistem informasi akademik dengan melanjutkan kasus I pada
kegiatan prakt iku m sehingga terjadi relasi antara dosen, mahasiswa dan matakuliah
serta jurusan.
2. Koneksikan setiap tabel dengan file PHP yang terdiri dari Input, Saving dan
List data dosen seperti yang terjadi pada kegiatan prakt iku m pada studi kasus ke-4.
3. Amatilah apa yang terjadi!
4. Catatan Praktikum
5. Referensi
2. Arief Ramadahan, dkk. ”Buku Latihan PHP 5 & MYSQL”. PT. Elex
3. Chris Bates, Web Programming: Building Internet Applications, Third
5. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP &
ASP”, Gava Media, Yogyakarta. 2007.
6. Welling Lu ke, Tho mpson Laura, ”PHP and MySQL Web Development”,
8. http://www.mysql.co m
10. http://www.ilmuko mputer.co m
20
MODUL III
APLIKASI
Tujuan :
Mampu membuat suatu aplikasi sederhana dengan PHP dan basisdata
menggunakan M YSQL.
Tug as Pendahuluan
2. Apakah yang anda ketahui tentang system informasi?
3. Apakah yang anda ketahui tentang web statis dan dinamis?
4. Sebutkan langkah-langkah yang harus dipersiapkan dalam mendesain
suatu sistem informasi?
5. Apa fungsi dari ob_start() dalam membuat suatu aplikasi?
1. Dasar Teori
Pada pembahasan kali in i kita akan membuat aplikasi yang sering
diikutsertakan pada web khususnya yang berhubungan dengan database yaitu
Sistem Perpustakaan. Database adalah sekumpalan informasi yang diatur agar
mudah dicari. Dalam art i u mu m database adalah sekumpulan data yang diproses
dengan bantuan komputer yang memungkinkan data dapat diakses dengan mudah
dan tepat, yang dapat digambarkan sebagai aktifitas dari satu atau lebih organisasi
yang berelasi.
Sebagaimana diketahui manajemen modern mengikutsertakan informasi
sebagai sumber daya penting yang setara dengan sumber daya manusia, uang,
mesin dan material. Informasi adalah suatu bentuk penyajian data yang melalui
mekanis me pemrosesan, berguna bagi pihak tertentu misalnya manajer. Bagi pihak
manajemen, informasi merupakan bahan bagi pengambilan keputusan.
Sebagai contoh Sistem Info rmasi Managemen (SIM) perpustakaan dimana
ada koleksi-koleksi buku yang disediakan, pemin jaman oleh anggota perpustaan
maka dalam system tersebut akses yang dapat dilakukan oleh anggota adalah dapat
melihat data-data buku yang pernah dipinjam, denda yang harus dibayar juga
melakukan pencarian buku-buku d iperpustakaan tersebut.
21
Teknisnya setelah pegawai login dengan username dan password pada
system tersebut, maka pegawai tersebut dapat mengakses isi database baik untuk
pemasukan data buku baru maupun peminjaman dan pengembalian. Sedangkan
bagi anggota dapat melakukan akses database untuk pencarian buku, dan melihat
data pemin jaman buku oleh d iri sendiri.
1. Mempersiapkan database yang menggunakan sejumlah tabel dengan
desain sebagai berikut:
Gambar 3.1. Desain Database Sistem Perpustakaan

File koneksi Database:
2. Mendesain Menu Utama yang merupakan menu awal dari SIM

Perpustakaan.
22
23
Gambar 3.2. Menu Utama
3. Mendesain Data Master, yang terdiri dari data pengarang, data buku, pegawai
dan data anggota. Didalam data-data tersebut terdapat program insert, update
dan delete. Untuk program data pengarang:
24
25
Hasilnya:
File Tambah Data Pengarang:
26
File ubah data peng arang :
27
28
File hapus data pengarang:
29
5. Tug as Praktikum
6. Desainlah Sistem Informasi Perpustakaan dengan melanjutkan pada kegiatan
praktiku m studi kasus 3 untuk data buku, pegawai dan data anggota.
Kemudian amat ilah apa yang terjadi?
7. Dengan mendesain sistem info rmasi perpustakaan tersebut, maka pada form
menu utama terdapat data master dan data transaksi. Coba buatlah program
dengan PHP untuk dat transaksi baik transaksi pemin jaman maupun
pengembalian. Kemudian amatilah apa yang terjadi?
4. Referensi
2. Arief Ramadahan, dkk. ”Buku Lat ihan PHP 5 & M YSQL”. PT. Elex
30
MODUL IV
SESSION DAN COOKIES
Tujuan :
Mampu menjelaskan dan mengimplementasikan cookies & session pada
aplikasi PHP untuk meningkatkan sekuriti pada sistem.
Tug as Pendahuluan
1. Apa yang anda ketahui tentang Cookies dan session?
2. Apa perbedaan antara keduanya?
3. Sebutkan dan jelaskan Fungsi apa saja yang digunakan untuk
implementasi session?
4. Apakah fungsi dari cookies?
1. Dasar Teori
1.1 Cookies
Cookie adalah sepotong data yang disimpan pada hard disk local milik
pengunjung dan digunakan oleh halaman web dalam mengingat suatu informasi.
Dengan melihat data pada hard disk local innilah, suatu server mendapatkan
kembali informasi yang pernah dikirmkan ke klien. Sehingga dapat dikatakan
cookie adalah mekanisme penyimpanan sebuah variabel data dari server dan
kemudian dikirmkan browser web client. Berdasarkan sifat yang disebutkan diatas,
cookie dapat digunakan untuk:
· Menyimpan nama pengunjung
· Merekam daftar barang yang ingin dibeli pengunjung.
· Mnyimpan pilihan-pilihan yang diatur oleh pengunjung, dan
· Membuat suatu sesi yang memungkinkan seseorang dapat masuk ke halaman-
halaman lain tanpa perlu melaku kan login kembali.
Dari kegunaan cookie tersebut maka adapun kelemahan cookie yaitu
pengiriman data bersifat sementara sehingga ketika browser ditutup, atau waktu
penyimpanan cookies habis, maka cookie juga akan dihapus. Dan jika fasilitas
31
cookie pada browser itu disable maka pengiriman data untuk disimpan di cookie
browser akan mengalami kegagalan. Fungsi yang digunakan ntuk penggunaan
cookies:
Setcookie (string name[, string value[, int expire]]);
Keterangan dari parameter tersebut adalah:
· Name: nama cookie yang nantinya menjadi varibel yang akan dikirimkan
kembali ke server.
· Value: nilai yang dimiliki oleh variabel cookie.
· Exp ire: batas waktu berlakunya cookie. Biasanya diisikan alam satuan detik.
Contoh: time()+3600 -> cookie akan berlaku selama 1 jam.
Untuk menghapus cookie, maka t inggal memberikan nilai kosong (“”) pada
parameter value pada cookies.
Contoh:
<?php
setcookie("nama","Rosa");
print("cookies telah terbentuk");
?>
Sedangkan untuk mengakses cookie ada 2 cara yaitu:

· $nama_cookie
Contoh:
<?php
print("Dosen PHP:$nama");
?>
· HTTP_ COOKIE_ VA RS
Contoh:
<?php
$nama_cookie=$HTTP_ COOKIE_ VA RS["nama"];
print("Dosen PHP : $nama_cookie");
?>
Dan untuk menghapus cookie yaitu:
32
<?php
$akses_cookie=$nama;
setcookie("nama");
print("setelah dihapus: $nama");
?>
Contoh cookie dengan mengatur batas waktunya sehingga ketika menutup browser
dengan mengklik (X) kemudian panggil kembali browser untuk akses cookie maka
data cookie dapat ditampilkan tetapi jika menjalankan browser lebih dari 1 jam
maka data cookies tidak dapat ditamp ilkan. Contohnya:
<?php
setcookie("nama","Rosa",time()+3600);
print("cookies terbentuk");
?>
1.2 Session
Sesion pada prinsipnya sama seperti cookie hanya saja pada session
mempunyai t ingkat sekuriti yang lebih tinggi dalam pengiriman dan penyimpanan
data di browser client. Selain itu dengan session tidak perlu memeriksa apakah
fasilitas cookie pada browser di disable atau tidak karena session tetap bisa
melakukan apapun status cookie dari browser (baik disable maupun enable).
Dalam session, nilai yang dikirmkan dari server ke browser disebut session_id
(dalam cookie diistilahkan sebagai nama cookie) dimana session_id ini juga akan
hilang jika dilakukan penghapusan atau browser ditutup.
Beberapa fungsi yang digunakan untuk imp lementasi session:
· session_start()
· session id()
· session register()
· session unregister()
· session unset()
· session destroy()
Untuk membuat sistem perpustakaan dengan dua user yaitu anggota dan pegawai,
yang mana diantara keduanya mempunyai hak akses masing masing menggunakan
cookies, maka ket iklah langkah sebagai berikut:
1. ketiklah program untuk mendesain form dari login, sebagai berikut:
33
2. Memberikan keamanan akses menggunakan cookies, sebagai berikut :
34
3. Amatilah yang terjadi pada studi kasus 2!
35
3. Tug as Praktikum
1. Modifikasi dengan memberikan akses menggunakan session pada kasus I
kegiatan prakt iku m diatas.
2. Buatlah fasilitas logout pada sistem akademik dengan melaku kan
pengosongan nilai pada variabel session tersebut sehingga ketika browser
yang tampil maka dibelo kkan ke halaman log in. Untuk itu pada form
mahasiswa ataupun form dosen diberi hiperlin k ”keluar” nilai perlu
diganti dengan <a href =”logout.php”>keluar</a>.
3. Jelaskan program dan hasil eksekusinya berikut ini:
<?php
session_start();
print("SID:".session_id()."<br>");
session_register("var_x");
$var_ x="7896";
print("SID sekarang: $var_ x <br>");
session_unregister("var_x");
print("SID unregister:".session_id());
session_destroy();
?>
session_start() : -----------------------
session_register() :--------------------
session_unregister() : -----------------
session_destroy() : ---------------------
5. Referensi
2. Arief Ramadahan, dkk. ”Buku Latihan PHP 5 & MYSQL”. PT. Elex
36
5. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP & ASP”,
Gava Media, Yogyakarta. 2007.
37
MODUL V
CONTENT MANAGEMENT SYSTEM
( WORDPRESS)
Tujuan :
1. Mampu menginstall ap likasi wordpress yang berlisensi GPL/free di
ko mputer untuk di jalankan secara offline
2. Memahami CMS (Content Management System)
Tug as Pendahuluan
1. Download aplikasi wordpress yang berlisensi GPL/free dari situs
www.wordpress.org !
2. Jelaskan langkah-langkah memu lai wo rdpress offline?
3. Apa yang anda ketahui mengenai CMS (Content Manajement
System) ?
4. Sebutkan dan jelaskan beberapa aplikasi CMS yang popular
menurut anda?
1. Dasar Teori
1.1 CMS
CMS (Content Management System) adalah suatu sistem yang digunakan untuk
mengelo la dan memfasilitasi proses pembuatan, pembaharuan, dan publikasi
content secara bersama (co llaborat ive content management).
Content mengacu pada informasi dalam bentuk teks, grafik, gambar maupun dalam
format-fo rmat lain yang perlu dikelola dengan tujuan memudahkan proses
pembuatan, pembaharuan, distribusi, pencarian, analisis, dan meningkat kan
fleksibilitas untuk ditransformasikan ke dalam bentuk lain. Saat in i, berbagai
perusahaan mengkombinasikan content tak berstruktur dengan transaksi tradisional
dan application logic untuk membangun aplikasi berbasis Web. Web application
ini mewujudkan interaksi yang lebih personal dengan para user-nya, dan
men ingkatkan kinerja perusahaan dengan menyediakan layanan mandiri bagi para
karyawan, partner, penyedia barang dan pelanggan.
38
Dengan adanya CMS yang terintegrasi dengan sebuah WebSite akan memberikan
suatu nilai lebih yang akan men ingkatkan fungsionalitas dan fleksibiltas dari Web
Site tersebut, terlebih pada WebSite yang tujuan pemanfaatannya sebagai media
promosi dan membangun citra konsumen, dimana kontinuitas dan inovasi dalam
pemasaran produk-produk secara berkala dan berkesinambungan sebagai suatu hal
yang memegang peranan penting dalam tercapainya target pemasaran.
1.2 Manfaat CMS

· Manajemen data
· Mengatur siklus hidup website
· Mendukung web temp lating dan standarisasi
· Personalisasi website
· Sindikasi
· Akuntabilitas
1.3 Blog
Blog merupakan kependekan dari weblog. Kata weblog berasal dari kata web dan
log. Web berarti internet dan log berarti pencatatan. Jadi, blog dapat diartikan
sebagai pencatatan yang menggunakan media internet.
Blog bisa berisi segala hal. Mulai dari kegiatan sehari-hari(diary), ilmu
pengetahuan populer, perkembangan teknologi, pemasaran produk, berita politik,
sampai ke hal-hal yang bersifat sensitif seperti ideologi.
Penulis blog juga bervariasi. Bisa dari pakar ko mputer, pekerja umu m, ataupun ibu
rumah tangga. Rentang usianya jauh, mulai dari anak-anak, remaja, dewasa dan
orang tua.
Berikut adalah beberapa fungsi blog:
1. Media pencatatan ide, pengalaman, metode
2. Sarana pro mosi
3. Pendidikan
4. Ekspresi diri
Isi sebuah blog dapat dengan mudah diakses oleh semua orang yang tehubung
lewat internet.
Pada awalnya, orang melakukan keg iatan blog dengan menggunakan situs pribadi.
Kesulitan yang umum diju mpai adalah min imnya kemampuan desain, pemahaman
HTM L, dan pemrograman web. Hal itulah yang seringkali membuat situs pribadi
tidak bertahan lama.
Beberapa kelo mpok mencoba memecah kan permasalahan ini dengan membuat dan
menyediakan situs khusus tempat orang bisa melakukan kegiatan blog tanpa
keharusan menjadi ahli dalam teknologi web. Salah satu aplikasi blog yang populer
adalah WordPress.
39
1. Langkah awal untuk melakukan instalasi wordpress pada local host adalah
dengan menyediakan surce yang kita butuhkan untuk proses instalasinya. Yaitu
xampp win-32 1.6.1 installer packages dan wordpress 2.2.1 (atau yang terbaru).
2. Coba akses alamat: http://localhost/ melalui address bar pada browser kita,
apabila instalasi yang kita lakukan benar, maka browser kita akan membuka
halaman Interface XAMPP pada browser kita (halaman tersebut adalah berfungsi
seperti cPanel webhost kita).
3. Sekarang yang pertama kali kita perlu lakukan adalah memodifikasi setting
sekuriti XAMPP kita. Kita dapat mengubah password untuk akses ke MySQL dan
direktori XAMPP melalu i halaman alamat in i:
http://localhost/security/xampsecurity.php.
4. Setelah mengkonfigurasi setting sekuriti MySQL, maka sekarang dapat mu lai

membuat database MySQL yang nantinya digunakan untuk Wordpress melalui
interface PHPMyAd min. Buka melalui sidebar XAMPP dan buat database baru,
untuk contoh dibawah namai database baru tersebut dengan nama wordpress.
40
5. Sekarang untuk mengkonfigurasi Wordpress ke localhost, mulai dengan meng-
ekstract file .zip wordpress di folder htdocs yang ada di dalam fo lder, sehingga di
dalam folder htdocs akan ada folder baru dengan nama wordpress, buka folder
wordpress tersebut dan buka file wp-config-sample.php menggunakan notepad
(atau menggunakan text ed itor lainnya).
Modifikasi 3 baris di file in i yaitu, wordpress (untuk DB_ NAME), root (untuk
DB_USER) dan test (untuk DB_PASSWORD). Setelah selesai, maka simpan file
yang telah dimodifikasi tersebut dengan nama wp-config.php.
6. Setelah itu, buka browser dan tulis alamat berikut ini di address bar-nya:
http://localhost/wordpress/wp-admin.php/install.php dan lanjutan penginstalan
wordpress ini sesuai petunjuk penginstalan yang ada. Setelah instalasi selesai,
maka blog wordpress telah siap untuk digunakan. Dan alamat untuk meng-
aksesnya yaitu di alamat: http://localhost/wordpress/
7. Default username adalah admin. Catat password yang sudah di generate secara
otomatis karena hanya akan ditampilkan sekali. Pada langkah berikutnya, untuk
login kita harus menggunakan password tersebut, meskipun setelah itu kita dapat
mengubahnya sekehendak kita. Setelah mencatat password, klik Log in.
Sekarang anda harus login ke Wordpress. Isikan admin pada form username dan
isikan password yang tadi telah dicatat pada form password. Setelah itu klik log in
untuk masuk ke dashboard.
41
8. Setelah Log In, akan diju mpai halaman Dashboard. Halaman “Dashboard”
yang muncul adalah seperti berikut.
42
9. Dari klik bagian “Visit Site” yang terdapat pada bagian atas Dashboard atau
disebelah kiri Tit le Blog. Halaman apa yang tampil ?Jelaskan secara detail sebagai
tugas praktiku m no 1.
10. Buat halaman Blog pertama anda dengan tema welco me.
Pengelolaan halaman blog dilakukan melalui halaman Pages. Isi halaman Pages
mirip dengan halaman Posts. Kali in i yang ditampilkan adalah daftar halaman yang
terdapat pada sebuah blog. Operasi yang dapat dilakukan terhadap halaman adalah
Add, View, Ed it, dan Delete.
Tampilan halaman Pages
Tambahkan sebuah halaman baru :

a. klik to mbol Add New yang terletak di bagian atas halaman.
43
Halaman Add New Page
11. Ketikkan judul halaman pada kotak teks atas. Ketikkan juga isi halaman pada
kotak teks di bawahnya. Klik to mbol Publish untuk mempublikasikan.
M enambahkan informasi pada halaman Add New Page
b. Klik to mbol View Page untuk melihat tampilan halaman baru pada blog.
44
Tampilan halaman yang baru
45
c. Pada halaman utama, link ke halaman baru terdapat pada bagian kanan
halaman.
Link ke halaman baru pada halaman utama
3. Tug as Praktikum
1. Halaman apa yang ditamp ilkan ket ika anda klik ”Vis it Site” ? submenu
apa saja yang ada pada halaman tersebut dan apa fungsi dari masing-
masing submenu?
2. Dengan meman faatkan fasilitas penyuntingan teks, edit tulisan pada
kegiatan prakt iku m no 10 yang telah anda buat.
46
· Manfaatkan menu tab HTM L
· Beri warna pada font yg digunakan (warna bebas)
· Doku mentasikan segala perubahan yang anda buat, dan cara mengeditnya.
Tunjukkan hasil sebelum dan sesudah melakukan perubahan dalam bentuk file
print screen.
3. Tambahkan sebuah gambar (tema gambar sesuaikan dengan tulisan) pada post
”Welcome” yang telah anda buat sebelumnya.
47
4. Buat post/tulisan kedua dengan tema bebas, min imal 5 paragraf (1000 kata),
kembangkan sesuai keinginan anda (boleh disertai gambar, boleh tidak)
2. Referensi
1. Mathew Errnisse, “Build Your Own AJAX Web Application”. Site Po int.
Melbourne Australia, 2006
2. www.wordpress.com
3. www.wordpress.org
48
MODUL VI
(WORDPRESS LANJUT)
Tujuan :
Mampu Menjelaskan pengertian blog, cara membuat blog dan mengelola
blog di wo rdpress (online)
Tug as Pendahuluan
1. Jelaskan yang anda pahami mengenai blog?
2. Sebutkan manfaat dari b log?jelaskan!
3. Jelaskan apa yang anda ketahui mengenai wordpress !
4. Apa hubungan antara CMS dan wordpress?
5. Buat draf/rencana penulisan blog yang meliputi :
a. Tema tulisan tentang Toko online
b. Judul Tulisan
c. Buat pengkategorian produk yg dijual (min 6)
1. Dasar Teori
1.1 Pengertian dan Pemanfaatan B LOG

Blog merupakan kependekan dari web log. Kata weblog berasal dari kata web
dan log. Web berarti internet dan log berarti pencatatan. Jadi, blog dapat
diartikan sebagai pencatatan yang menggunakan med ia internet.
Blog bisa berisi segala hal. Mulai dari keg iatan sehari-hari(diary ), ilmu
pengetahuan populer, perkembangan teknologi, pemasaran produk, berita
politik, sampai ke hal-hal yang bersifat sensitif seperti ideologi.
Penulis blog juga bervariasi. Bisa dari pakar ko mputer, pekerja u mu m,
ataupun ibu rumah tangga. Rentang usianya jauh, mulai dari anak-anak,
remaja, dewasa dan orang tua.
Berikut adalah beberapa fungsi blog:
5. Media pencatatan ide, pengalaman, metode
6. Sarana pro mosi
7. Pendidikan
8. Ekspresi diri
49
Isi sebuah blog dapat dengan mudah diakses oleh semua orang yang tehubung
lewat internet.
Pada awalnya, orang melakukan kegiatan blog dengan menggunakan situs
pribadi. Kesulitan yang umu m diju mpai adalah minimnya kemampuan desain,
pemahaman HTM L, dan pemrograman web. Hal itulah yang seringkali
membuat situs pribadi tidak bertahan lama.
Beberapa kelo mpok mencoba memecahkan permasalahan ini dengan membuat
dan menyediakan situs khusus tempat orang bisa melaku kan kegiatan blog
tanpa keharusan menjadi ah li dalam teknologi web. Salah satu aplikasi blog
yang populer adalah WordPress
1.2 Menu Kelol a – Manage

Menu ini dipergunakan untuk mengelola ( mengedit/menyunting, menghapus dsb)
tulisan, halaman, links, Kategori, Tag, dan pustaka media yang telah kita masukkan
sebelumnya. Menu ini terd iri dari 9 submenu lag i sebagai berikut:
· Tulisan (posts)
Berfungsi menamp ilkan art ikel-artikel yang sudah kita posting.
· Halaman (pages)
Berfungsi menampilkan halaman statis / Pages yang sudah kita buat. Di sini
kita b isa mengedit halaman yang ada atau membuat halaman baru..
· Taut (Link)
Menu ini dipergunakan untuk untuk menambah atau mengedit link / blogroll.
· Kateg ori (Category)
Menu ini digunakan untuk mengedit, mendelete atau membuat kategori baru.
Nama Kategori adalah Nama yang digunakan untuk mengidentifikasi kategori
di hampir seluruh tempat, b isa di dalam tulisan atau di widget kategori.
Induk Kategori adalah kategori, tidak seperti tag, dapat memiliki hierarki.
Anda boleh saja memiliki kategori Jazz dan di bawahnya ada kategori anak
Bebop dan Big Band. Deskripsi adalah keterangan kategori secara standar
tidak tampil. Namun sebagian tema dapat menampilkannya.
· Tag
Menu untuk menambah, mendelete atau mengedit tag. Yaitu sederetan kata
dalam xml yang digunakan untuk memberikan informasi doku men sehingga
mudah dikenali oleh pembacanya.
· Kateg ori Taut (Link Categ ories).
Menu untuk mengedit kategori lin k. Pada menu ini anda akan melihat daftar
kategori lin ks. Sub menunya adalah Cari, Tambah Kategori, Hapus, Ed it
(sunting)
50
· Pustaka Medi a
Menu untuk mengatur tempat link file atau image yang sudah diupload. Menu
yang tampil adalah Kelola Media (Manage Media ).
maka perubahan yang telah dibuat dianggap dibatalkan .
· Impor
Menu untuk mengimpor file content dari blog lain. Wordpress menyediakan
beberapa jenis situs yang dapat anda impor ke dalam wo rdpress anda.
· Eks por
Menu untuk mengekspor file d i blog ke blog lain. Wordpress memberikan
pilihan untuk anda jika saja anda sewaktu-waktu ingin memindahkan blog atau
memiliki beberapa blog sekaligus dengan fasilitas ekspor impor.
1.3 Pengelolaan User.

Sebuah blog bisa saja dibuat sebagai perwujudan ekspresi suatu komunitas,
bukan sekedar blog pribadi. Pada kasus seperti ini, kemungkinan besar jumlah
orang yang memiliki wewenang untuk menulis di blog lebih dari satu.
51
1. Tambahkan Kategori min imal 6 kategori dengan spesifikasi bebas :
Anda dapat menentukan kategori tulisan pada area kategori. Secara
default, hanya ada satu kategori, yaitu Uncategorized.
Area Categories
Untuk menambahkan suatu kategori baru, klik +Add new Category.

Muncul area tambahan di bagian bawah Area Categories.
Penambahan kategori
Ketikkan nama kategori pada kotak teks New category name, lalu klik
tombol add.
52
Kategori telah ditambahkan
Tampak kategori baru sudah tampil. Pilih/centang kategori yang

diinginkan.
2. Tambahkan Tag min imal 6 tag, bebas :
Di samping kanan halaman penyuntingan teks terdapat area yang
digunakan untuk menuliskan tag. Tag adalah semacam penggolongan
tulisan.
Wordpress mengenal dua macam penggolongan tulisan, yaitu kategori dan
tag. Jelaskan perbedaan keduanya dengan membandingkan kegiatan prak
no 1 dan 2 yang akan dikerjakan berikut. (Tugas praktiku m no 2)
Tambahkan beberapa tag pada halaman blog anda, dengan cara :

· Masuklah ke halaman dashboard
· Pada menu Right Now/ At a glance p ilih Tag
53
· Setelah itu muncul tampilan berikut,
isilah tag name dengan nama tag, misal Art ikel, description bisa dikosongi ato
diisi, kemud ian klik add tag.
· Tag yang baru anda buat muncul di kolo m sebelah kanan seperti gambar
berikut
54
3. Buat sebuah pengelolaan User
a. Pengelolaan user dilakukan melalui tab User.
b. Daftar user dan penulis sebuah blog dapat dilihat pada halaman
Users/Author & Users.
c. Daftar user yang ditampilkan pada halaman tersebut terdiri dari enam
buah kolom, yaitu :
· ID, nomo r identitas user
· Username, nama login user
· Name, nama asli user
· E-mail, alamat e-mail user
55
· Website, situs yang dimiliki oleh user
d. Actions, aksi yang dapat dilakukan terhadap user, yaitu melihat
tulisan yang pernah dipublikasikan oleh user dan menyunting profil
user.
e. Seleksi terhadap user dilakukan dengan mengklik kotak cek yang
terdapat pada kolo m ID.
f. Untuk menghapus user terseleksi, pilih opsi Remove checked user.
Untuk menentukan tugas user di dalam b log, pilih opsi Set the Role of
checked users to, kemudian pilih salah satu nilai berikut. :
· Contributor, user hanya dapat memberi kontribusi berupa tulisan
dan mengelola tulisan tersebut tetapi tidak dapat melaku kan
publikasi.
· Author, user dapat menulis, mengelola tulisannya, dan
melakukan publikasi tulisan.
· Ed itor, user dapat menulis, melaku kan publikasi tulisan
mengelo la tulisannya sendiri dan user yang lain.
· Admin istrator, user yang memiliki akses penuh terhadap blog.
Area pengaturan user
56
g. Undanglah user lain terlibat dalam penulisan blog, ketikkan alamat e-
mail user yang akan diundang pada kotak teks User E-mail, tentukan
Role yang akan dimiliki user tersebut, dan klik to mbol Add User.
Perhatikan bahwa user yang diundang tersebut harus memiliki
account di Wordpress.com dan alamat e-mail yang digunakan saat
pendaftaran adalah alamat e-mail yang Anda masukkan pada kotak
teks User E-mail.
3. Tug as Praktikum
1. Setelah mencoba seluruh kegiatan praktiku m, sekarang anda buka
halaman site yang telah anda tmbahi dengan berbagai fitur tadi.
Tunjukkan hasilnya dengan print screen, dan jelaskan.
2. Anda sudah membuat beberapa tag kemudian anda jelaskan fungsi tag,
dan hubungkan tag yang anda buat dengan artikel yang sesuai. Jelaskan
apa bedanya dengan kategori.
3. Lanjutkan tugas anda dengan membuat contoh pemanfaatan Kategori Taut
(Lin k Categories), Pustaka Media, Pustaka Media, Import dan Eksport.
Tunjukkan hasilnya dengan print screen.
4. Pada laporan jelaskan langkah-langkah pembuatan fitur pada soal nomor 3
yang disertai print sreen seperti yang telah dicontohkan pada kegiatan
praktiku m.
5. Jelaskan kegunaan masing-masing fitur yang anda buat pada soal nomor 3
!
6. Apa keuntungan membuat pengelolaan user ?
4. Referensi
57
MODUL VII
( WORDPRESS LANJUT )
Tujuan :
Mampu membuat tamp ilan blog lebih menarik dengan memanfaatkan fitur-
fitur appearance dari wordpress.
Tug as Pendahuluan :
1. Mengapa diperlukan untuk mempercantik tampilan blog ? Jelaskan !
2. Fitur-fitur apa saja di wordpress yang berfungsi untuk mempercantik
tampilan blog ! Jelaskan
3. Apa fungsi fitur pengelolaan user pada wordpress ? Jelaskan !
1. Dasar Teori
Appearance
Setelah berhasil membuat blog di wordpress.com, maka langkah berikut
adalah memberikan sentuhan penampilan, bagian in i bersifat subjektif karena
sesuai selera. Pada menu Appearance terdapat beberapa sub menu yaitu :
Themes, Widgets, Extras, Custom Header, Header Colors, Typekits Fonts,
Ed it CSS.
Themes
Dari semua theme WordPress biasanya miliki ju mlah kolo m 2 atau 3 bahkan
ada yang lebih, berikut contoh theme yang hanya memiliki 2 kolo m yaitu
kolo m “body” dan kolom “navigasi”. Gambar d ibawah ini menjelaskan
bagian-bagian tersebut.
58
Bagian-Bagian dari Sebuah Halaman Blog
Widgets
Widgets adalah komponen-ko mponen blog yang umumnya diletakkan pada
sidebar. Sidebar sendiri adalah ruang kolo m yang ada di sisi kanan dan kiri
blog, tergantung theme yang digunakan.
Pada Kolo m yang ada di sebelah kanan (navigasi) pada gambar yang ada
diatas sudah terdapat 3 widget, yaitu Search, Links, dan Blogroll. Jadi itulah
yang dimaksud dengan widget.
1. Lakukan perubahan tamp ilan agar leb ih menarik. Ikuti langkah berikut :
· Klik menu APPEA RANCE
Tampilan halaman Appeareance

59
· Klik submenu THEM ES
Tampilan halaman Themes
· Pilih theme yang disukai pada bagian AVAILA BLE THEM ES

· Klik A CTIVA TE untuk theme yang disukai
· Untuk melihat perubahannya, klik VISITE SITE
Tombol Visit Site
· Lihat perubahan setelah themes diganti
60
Tampilan Theme Blog telah berganti
2. Masih dengan halaman appearance, tambahkan beberapa widget, dengan

mengikuti langkah berikut :
· Pengelolaan widgets dilakukan melalui halaman Widgets.
Tampilan halaman Widgets
· Daftar widgets yang tersedia diberikan pada area Available Widgets.

Untuk menambahkan suatu widgets ke sidebar, drag-and-drop widgets
yang terletak pada area Availab le Widgets ke area sidebar.
61
62
Drag-and-Drop widgets ke area sidebar
· Gambar d i bawah ini menunjukkan contoh widgets yang telah
· ditambahkan ke dalam sidebar.
Widgets yang telah ditambahkan ke sidebar
· Setelah selesai, klik to mbol save. Gambar di bawah menunjukkan

perbedaan tampilan b log sebelum dan sesudah penambahan widgets.
63
Perbedaan tampilan area sidebar
3. Merubah gambar header

Fasilitas untuk mengganti gambar header hanya dimiliki oleh jen is theme
tertentu. Jadi jangan heran jika link untuk menuju ke halaman Custom Header
tidak terdapat pada bab Presentation blog Anda. Untuk mengganti gambar
header dimulai dengan klik Appearance/ Header Col or, seperti tampak pada
gambar berikut:
Tampilan halaman Header Colors
64
Contoh Setting warna
Untuk mengganti gambar header, klik browse dan carilah gambar yang
diinginkan. Perhat ikan uku ran yang disarankan oleh penunjuk yang terdapat
pada halaman tersebut. Klik upload untuk melaku kan upload gambar. Jika
ingin melihat hasilnya, klik link View site, seperti gambar berikut:
65
Hasil penggantian warna
Seandainya dengan penggantian gambar tersebut warna teks judul blog

men jadi t idak cocok, masuklah kembali ke halaman Custom Header.
Perhatikan bahwa di bawah gambar header terdapat empat buah tombol
sebagai berikut :
· Hide Text, untuk menyembunyikan teks judul blog
· Select a Text Color, untuk mengubah warna teks
· Use Original Color, untuk mengembalikan warna teks ke warna asal
· Save Changes, untuk menyimpan perubahan yang dilakukan
Lakukan perubahan terhadap teks sesuai dengan tombol-tombol yang tersedia
tersebut.
Dapatkah perubahan tersebut dikembalikan ke wu jud aslinya?
4. Merubah Warna Header

Seperti halnya gambar header, tidak semua theme mendukung penggantian warna
header. Jika kebetulan theme yang digunakan mendukung penggantian warna
header, di bawah tab Presentation akan terdapat lin k Color Header.
Dibawah gambar header akan terdapat enam buah tombol yang digunakan untuk
pengaturan warna. To mbol-tombol tersebut adalah sebagai berikut :
· Font color, digunakan untuk menentukan warna teks
66
· Upper color, digunakan untuk menentukan warna bagian atas header
· Lower colo r, d igunakan untuk menentukan warna bagian bawah header
· Revert, d igunakan untuk mengembalikan warna header ke warna semula
· Advanced, digunakan untuk menentukan warna berdasarkan nilai
heksadesimal warna.
· Update header, digunakan untuk menyimpan perubahan warna yang telah

diterapkan
Saat tombol pemilih warna diklik, akan muncul panel berisi warna-warna yang
dapat dipilih. Untuk menutup panel tersebut, klik tombol Close Co lor Picker.
3. Tug as Praktikum :
67
Buat suatu Toko Online sederhana yang menjual suatu produk (ditentukan oleh
asisten praktiku m, masing-masing praktikan tidak sama), fitur yang harus ada :
1. Support berbagai macam sistem pembayaran (sistem pembayaran bebas).
Paypal, Google Check Out, bahkan … manual (misalkan kita pengin dengan
transfer BCA, BNI, dsb)
2. Ada pengkategorian produk. Yang dibedakan berdasarkan macam (warna,
ukuran, tipe, d ll) produk.
3. Email pemberitahuan kepada pembeli, kita tinggal set bagaimanakah email
pemberitahuan kepada pembeli
4. Bisa menentukan berbagai tarif pengiriman
5. Real time shopping cart begitu klik ‘beli’ langsung masuk shopping cart dan
terlihat dengan seluruh perhitungan total belanja.
6. Buat database dengan My SQL untuk menyimpan tabel barang dan tabel
belanja.
5. Referensi
68
MODUL VIII
EXTENSIBLE MARKUP LANGUAGE
(XML)
Tujuan :
Mampu menjelaskan pengertian, bagian, syntax, format pada XM L dan
membuat aplikasi dengan perintah-perintah XML.
PrePraktikum
1. Sebutkan apa saja keuntungan dari XM L
2. Jelaskan perbedaan XML dengan HTML
3. Buatkan hierarki XM L apabila kita membuat data input dari suatu
restoran
1. Dasar Teori
XM L Singkatan dari eXtensible Markup Language, dikembangkan mu lai
tahun 1996 dan mendapatkan pengakuan dari W3C pada bulan Februari 1998.
Teknologi yang digunakan pada XML sebenarnya bukan teknologi baru, tapi
merupakan turunan dari SGM L yang telah dikembangkan pada awal 80-an dan
telah banyak digunakan pada dokumentasi teknis proyek-proyek berskala besar.
Ketika HTM L d ikembangkan pada tahun 1990, para penggagas XML mengadopsi
bagian paling penting pada SGM L dan dengan berpedoman pada pengembangan
HTM L menghasilkan markup language yang tidak kalah hebatnya dengan SGM L.
Seperti halnya HTM L, XM L juga menggunakan elemen yang ditandai dengan tag
pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’), tag penutup(diawali dengan
‘</ ‘diakhiri ‘>’) dan atribut elemen(parameter yang dinyatakan dalam tag
pembuka misal <fo rm name=”isidata”>). Hanya bedanya, HTML medefinisikan
dari awal tag dan atribut yang dipakai didalamnya, sedangkan pada XML kita bisa
menggunakan tag dan atribut sesuai kehendak kita.
1.1 Bagian- Bagian dari Dokumen XML
Sebuah dokumen XM L terdiri dari bagian bagian yang disebut dengan node.
Node-node itu adalah:
· Root node
69
· Element node
· Attribute note
· Text node
· Comment node
· Processing Instruction node
· NameSpace Node
Gambar 11.1 child tag yang berada didalam root yang membentuk hirarki
1.2 Sintaks XML
Dibandingkan dengan HTM L, XM L leb ih detail. Kalau kita menulis
sebuah dokumen HTM L, beberapa kesalahan penulisan masih ditolerir. Misalnya
kita menempatkan tag bersilangan seperti <p><b>Hu ruf Tebal</p></b> meskipun
tidak dianjurkan, HTM L masih bisa bekerja dan menamp ilkan hasil seperti yang
kita ing inkan. Tidak demikian dengan XML. Lebih jelasnya kita akan bahas di
bawah bagaimana membuat dokumen XM L yang baik.
Heading standard untuk Document XM L : Biasakanlah setiap membuat
dokumen XM L d iawali dengan heading standard XML. Formatnya adalah sebagai
berikut: <?xml version=”1.0” encoding=”iso-8859-1”?>
70
Doku men XM L harus memiliki Root tag Sebuah dokumen XM L yang
baik harus memiliki root tag. Yaitu tag yang melingkupi keseluruhan dari
dokumen. Tag-tag yang lain, disebut child tag, berada didalam root membentuk
hirarki seperti gambar 11.1
Contoh:
<root>
<child>
<subchild></subchild>
</child>
</root>
1.3 Memformat XML

Terdapat 2 cara untuk memformat data XML untuk menampilkannya pada
web browser, yaitu dengan menggunakan:
1. CSS (Cascading Style Sheets)
Selain dapat digunakan untuk memformat dokumen HTM L, CSS juga dapat
digunakan untuk memfo rmat doku men XM L. CSS dapat melaku kan redefinisi tag
HTM L, memungkinkan tag tersebut disajikan dalam cara berbeda. Dengan cara
yang sama, CSS dapat digunakan untuk mendefin isikan bagaimana tag XM L
ditamp ikan.
2. XSL (eXstensible Stylesheet Language)
XSL merupakan singkatan dari eXstensible Stylesheet Language, dan
merupakan suatu bahasa yang dikembangkan untuk memformat doku men XM L.
Untuk menformat kode maka harus dibuat terlebih dahulu suatu stylesheet XLS.
Meskipun XLS adalah sebuah bahasa yang lengkap dan untuk menyelesaikan
masalah di atas cukup memanfaat kan beberapa fiturnya saja.
1. Membuat data input dari suatu fakultas teknik dengan pohon hierarki, sebagai
berikut:
71
2. Membuat coding XM L dari h ierarki fakultas teknik berikut ini:
3. Jika perubahan pada program xml diatas menjadi:
72
4. Tugas tambahan (ditentukan oleh asisten praktiku m)?
3. Tug as Praktikum
1. Amatilah apa yang terjadi dengan studi kasus ke-3 pada kegiatan
praktiku m d iatas?
2. Buatkan Dengan menggunakan Coding XML hirarki untuk sistem
perpustakaan Unijoyo. Contoh kasus seperti dibawah ini:
3. Carilah di internet contoh aplikasi XM L d i bidang pendidikan dan b isnis

dengan menggunakan elemen XM L dan DTD
5. Referensi
2. Arief Ramadahan, dkk. ”Buku Lat ihan PHP 5 & M YSQL”. PT. Elex
73
10. http://www.ilmuko mputer.co m
74
MODUL IX
AJAX
(DASAR-DASAR AJAX)
Tujuan :
Mampu memahami teknologi ajax dan membuat aplikasi ajax sederhana.
Tug as Pendahuluan
1. Apa yang anda ketahu mengenai AJAX dan teknologi AJAX ?
2. Apa kelebihan yang dimiliki AJAX ?
3. Sebutkan contoh aplikasi terkenal yang memanfaatkan
teknologi ajax ! Jelaskan !
1. Dasar Teori
Mengenal Ajax
Ajax pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang
berjudul Ajax: A New Approach To Web Applicati ons. Ajax singkatan dari
Asynchronous JavaScript and XML. Ajax memberi teknik client-server JavaScript
untuk mengambil data dan menerima data dari server secara "background".
Halaman web dapat diupdate pada tempat tertentu (misalnya teksbox, label,
combobox, optionbox, dll) tanpa harus reload (me-refresh satu halaman penuh).
Ajax sendiri sangat populer pada tahun 2005 yang diperkenalkan oleh google
ataupun web developer besar lainnya.
Ajax sendiri akan sangat berhubungan dengan JavaScript. Pada awal lah irnya
javaScript, banyak programmer yang menggunakan script ini untuk membuat
dynamic halaman web. JavaScript in i banyak digunakan untuk validasi, popup
message, jam, dll. Tetapi JavaScript ini tidak berhubungan langsung dengan Web
Server. Kenapa programmer menggunakan JavaScript ini guna mengurangi beban
server.
Jika ingin mendapatkan informasi dari server, maka dapat menggunakan bahasa
pemrograman client-server seperti PHH, ASP, ColdFusion, Java, dll. Bahasa
pemrograman ini dapat mendapatkan informasi dari server dengan menggunakan
HTM L Form baik POST ato GET. Data dapat dikirim atau diambil dengan
75
menggunakan tombol "submit". Dimana halaman akan direload secara
keseluruhan, hal in i akan sangat bermasalah jika web servernya lambat.
Ajax mencoba memperbaiki JavaScript untuk dapat berkomunikasi secara

langsung dengan server secara langsung. Ajax menggunakan javaScript Ob ject
XM LHttpRequest. Dengan Object ini, maka java script dapat berhubungan dengan
server secara langsung.dan nilai tambahnya adalah Ajax dapat mengamb il dan
mengirim data tanpa harus mereload seluruh halaman. Dengan kata lain, user dapat
bekerja dan Ajax dapat berkerja. Karena Ajax bekerja secara background.
1. Buka sembarang editor (notepad, edit+, dreamweaver, dll)
2. Ketikkan scrip berikut in i :
<head>
<title>AJAX - Demo 1</tit le>

<script language="javascript">
function createRequest(){
var oAJAX = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
oAJAX = new ActiveXOb ject("Msxml2.XM LHTTP");
} catch (e) {
try {
oAJAX = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
oAJAX = false;
}
}
@end @*/
if (!oAJAX && typeof XM LHttpRequest != 'undefined') {

oAJAX = new XM LHttpRequest();
}
if (!oAJAX){
alert(" Error saat membuat XM LHttpRequest!");
}else{
alert("XM LHttpRequest sukses dibuat!");
76
}
return oAJAX;
}
</script>
<style type="text/css">

</style></head>
<body onload="javascript:createRequest();">
Halaman in i memang il function pembuatan class object XMLHttpRequest<br

/>
Jika gagal atau pun berhasil akan di tampilkan A lert message.
</body>
</html>
3. Simpan dengan nama ajax-contoh1.html, letakkan pada folder modul9

4. Kembali pada text editor, buat file baru kemudian ketikkan script berikut :
<head>
<title>AJAX - Demo 1</tit le>
var oAJAX = false;
/*@cc_on @*/
try {
} catch (e) {
try {
oAJAX = new
} catch (e2) {
oAJAX = false;
}
77
}
@end @*/

}
if (!oAJAX){
}
return oAJAX;
}
function requestContent(){
oRequest = createRequest();
var url = "dataLoad.html";
// Bu ka ko munikasi dengan server

oRequest.open("GET", url, true);
// menunggu respon dari server

// jika sudah di dapat respon dari server, maka hasil respon akan di tamp ilkan
pada DIV dengan ID='d ivContent'
oRequest.onreadystatechange = function () {
document.getElement ById("divContent").innerHTM L="<d iv

align='center'>Menunggu Respon server</div>";
if (o Request.readyState == 4) {
//
baca data respon dari server
var response = oRequest.responseText;
document.getElement ById("divContent").innerHTM L = response;
}
}
// Send the request

78
oRequest.send(null);
}
</script>

</style></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td>Peman faatan class object XMLHttpRequest untuk berkomunikasi
dengan server<br />
<a href="#" onclick=" javascript:requestContent();">Click disin i untuk
load Data</a> </td>
</tr>
<tr>
<td>
<div id="divContent"></div>
</td>
</tr>
</table>
</body>
5. Simpan pada folder yang sama (modul9) dengan nama ajax-contoh2.ht ml

6. Kembali ke text editor, buat file baru, ketikkan script ke 3 berikut :
<head>
<title>Unt itled Docu ment</title>

</style>
</head>
<body>
<table width="500" border="0" cellpadding="3" cellspacing="0"
class="table">
<tr>
<td><strong>File dataLoad.html</strong><br />
Apapun isi content dari file in i akan di load dan di tampilkan pada lokasi
DIV content yang di tuju. <br />
<br / >
File yang di load in i bisa berupa file statis biasa, ataupun file berisi content
yang di proses terlebih dahulu oleh server. </td>
</tr>
</table>
</body>
7. Simpan dengan nama ajax-contoh3.html pada folder modul9

8. Kemudian masuk ke fo lder modul9 yang telah anda buat tadi, buka ajax-
contoh1 dengan menggunakan web browser (IE/Mo zilla/Opera d ll), jika
seluruh script yang anda ketikkan benar maka akan muncul tampilan
berikut :
80
9. Klik Ok pada message yang muncul.
10. Masih tetap pada folder modul9, buka ajax-contoh2 dengan
menggunakan web browser (IE/Mozilla/ Opera dll), jika seluruh script
yang anda ketikkan benar maka akan muncul tampilan berikut :
11. Selanjutnya kalimat terakhir “Click disini untuk Load Data” warnanya
berbeda, yang menunjukkan link, silahkan klik link tersebut sehingga
muncul tamp ilan berikut.
81
12. Apa kesimpulan anda?
3. Tug as Praktikum
1. Jelaskan beberapa fungsi dari beberapa bagian script inti dari 3 script
diatas! mengapa harus ada?
2. Apa yang terjadi jika script yang anda maksud tidak d imunculkan?
3. Apa yang dapat anda simpulkan dari keseluruhan kegiatan praktiku m
diatas?
4. Jika ditemu kan error pada saat running di web browser, kira-kira apa saja
kemungkinan penyebabnya?
5. Buat contoh ajax sederhana seperti kegiatan praktiku m diatas, dengan
menyisip kan ajax pada html. !
5. Referensi
1. Mathew Errnisse, “Build Your Own AJAX Web Application”.

Site Point. Melbourne Australia, 2006
2. www.slash.web.id
3. www.atnlie.blogspot.com
4. ww w.bambangriadi.co m
82
MODUL 10
AJAX
(AJAX LANJUT)
Tujuan :
. Mampu memahami dan menggunakan ajax yang dipadukan dengan html,
xml dan css.
1. Keleb ihan utama AJAX terletak pada pemanfaatan class object
XM LHttpRequest untuk berkomunikasi dengan Web Server.
Buatlah function pembuat class object XMLHttpRequest, Untuk
dapat berjalan pada semua browser (Cross Browser) !
2. Beri penjelasan dari tugas pendahuluan no 1 !
3. Apa beda responseXML dan responseText ? kapan menggunakan
responseXML dan responseText ?
4. Baca kembali referensi tentang ajax, xml, css, dom dan co mponent
lain yang dapat dipadukan dengan ajax !
1. Dasar Teori
Membahas lebih jauh tentang AJAX, AJAX bukanlah barang baru dan bukan
teknologi baru. AJAX merupakan paduan dari beberapa teknologi yang sudah
dikenal sebalumnya yaitu HTML, DOM, XM L, Javascript dan teknologi
pendukung lainnya. AJAX adalah akronim dari Asynchronous JavaScript and
XM L, ko mponen-ko mponen AJAX meliputi:
· HTML (HyperText Markup Language) digunakan dalam membuat

halaman web dan dokumen-doku men lain yang dapat ditampilkan dalam
browser. HTM L merupakan standar internasional dengan spesifikasi yang
ditetapkan oleh World Wide Web Consortium (W3C). Versi terakh ir saat
tulisan ini d ibuat adalah HTM L 4.01.
83
· XHTML (Extensible HyperText Markup Language), adalah bahasa
markup sebagaimana HTM L, tetapi dengan gaya bahasa lebih baik. Versi
terakhir saat tulisan ini d ibuat adalah XHTM L 2.0.
· CSS (Cascading Style Sheets ) adalah sebuah mekanis me sederhana untuk
memberikan style (seperti font, warna, jarak spasi, dll) kepada dokumen
web yang ditulis dalam HTM L atau XM L (termasuk beberapa variasi
bahasa XML seperti XHTM L dan SVG).
· JavaScript adalah bahasa scripting kecil, ringan, berorientasi-objek dan
lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai
bahasa mandiri, melain kan dirancang untuk ditanamkan pada produk dan
aplikasi lain seperti peramban web.
· DOM (Document Ob ject Model) adalah sebuah API (Application
Program Interface) untuk dokumen HTM L dan XML. DOM
menyediakan representasi dokumen secara terstruktur, dimungkin kan
untuk merubah isi dan presentasi visual. Pada dasarnya, DOM
menghubungkan halaman web dengan script atau bahasa pemprograman.
· XML (Extensible Markup Language) adalah bahasa markup untuk
keperluan u mu m yang disarankan oleh W3C untuk membuat doku men
markup keperluan khusus. Keperluan utama XM L adalah untuk
pertukaran data antar sistem yang beraneka ragam.
· XSLT (Extensible Stylesheet Language Transformations ) adalah sebuah
bahasa berbasis-XML untuk transformasi doku men XM L. Walaupun
proses merujuk pada transformasi, doku men asli t idak berubah melain kan
dokumen XM L baru dibuat dengan basis isi dokumen yang sudah ada.
XSLT biasanya digunakan untuk merubah skema XM L ke halaman web
atau dokumen PDF.
· Objek XMLHttpRequest untuk melakukan pertukaran data secara
asinkron dengan peladen (server) web. Beberapa kerangka-kerja Ajax dan
dalam beberapa situasi, objek IFrame digunakan selain objek
XM LHttpRequest untuk melakukan pertukaran data dengan peladen web.
· JSON (JavaScript Object Notation) yaitu format pertukaran data
ko mputer yang ringan dan mudah. Keuntungan JSON dibandingkan
dengan XML adalah pada proses penterjemahan data menggunakan
Javascript. Javascript dapat menterjemahkan JSON menggunakan built-in
procedure eval().
Dalam penerapannya, tidak semua teknologi di atas digunakan. Terdapat beberapa

teknik ko munikasi yang digunakan untuk imp lementasi AJAX. Teknik yang umum
digunakan adalah dengan menggunakan:
84
· HiddenFrame
Metode ini memanfaatkan frame yang tersembunyi. Biasanya salah satu
frame diset dengan ukuran tinggi/lebar 0 sehingga tidak terlihat di
halaman. Frame tersembunyi inilah yang sebenarnya melakukan request
ke dan menerima respon dari server, sehingga frame yang tampil kelihatan
tidak melaku kan postback ke server. Javascript digunakan untuk
mengambil data dan mengisi data yang ada di frame tersembunyi ini.
· Hidden Frame
Metode ini hamp ir sama dengan hidden frame, perbedaannya hanya pada
elemen yang digunakan yaitu IFrame, bukan Frame.
· Objek XM LHttpRequest
Metode yang satu ini memanfaat kan ActiveX Objek (IE) atau objek
javascript XMLHttpRequest (Mozilla/Firefo x, Safari, Opera). Ob jek ini
yang akan melaku kan postback ke server dan menerima respon balik
berupa data (bukan halaman). Data yang didapat dari server kemudian
diolah di klien untuk ditamp ilkan ke halaman.
Teknik pemprosesan halaman secara umu m ada dua:
· Pemprosesan halam dengan pembuatan/manipulasi objek doku men

menggunakan javascript.
Klien mengirimkan data dalam format XML/JSON kepada server dan
mendapatkan data dari server berupa XML/JSON. Data XM L/JSON
kemudian diolah untuk meman ipulasi objek doku men menggunakan
DOM dan javascript.
· Parsial rendering.
Pada teknik ini UI dan behaviour tidak diproses di klien melain kan
diproses di server. Klien menerima UI dan behaviour kemudian
melakukan rendering pada bagian halaman tertentu.
2. Perpaduan teknologi-teknologi tersebut dapat meningkatkan kinerja

aplikasi web dan lebih responsif terhadap aksi pengguna. Dengan AJAX
pertukaran data antara klien dan server lebih ringan karena hanya data
yang dipertukarkan (bukan halaman) sehingga aplikasi web dapat berjalan
lebih cepat.
85
Kegiatan Praktikum
1. Buka kembali text editor anda, buat file baru selanjutnya ketikkan script
berikut ini :
<head>
<title>AJAX - XM L data respon format ing</title>
var oAJAX = false;
/*@cc_on @*/
try {
} catch (e) {
try {
oAJAX = new
} catch (e2) {
oAJAX = false;
}
}
@end @*/

}
if (!oAJAX){
}
return oAJAX;
}
function requestContent(){
oRequest = createRequest();
var url = "coreQuick-data.xml";
// Bu ka ko munikasi dengan server

oRequest.open("GET", url, true);
// menunggu respon dari server
86
// jika sudah di dapat respon dari server, maka hasil respon akan di tamp ilkan
pada DIV dengan ID='d ivContent'
oRequest.onreadystatechange = function () {
document.getElement ById("divContent").innerHTM L="<d iv

align='center'>Menunggu Respon server</div>";
if (oRequest.readyState == 4) {
document.getElement ById("divContent").innerHTM L = "";

// baca data respon
dari server
//alert(oRequest.responseXML);
var xmlData =
oRequest.responseXML;
var coreQuick =
xmlData.get ElementsByTagName("quicknews");
//alert("Panjang: " +
coreQuick.length);
for (var i=0; i < coreQu ick.length; i++){

var currentQuick = coreQuick[i];
var newQu ick = docu ment.createElement("div");
newQuick.setAttribute("className", "quickNews");
newQuick.setAttribute("class", "quickNews");
var newTit le = document.createElement("div");
newTitle.setAttribute("className", "title");
newTitle.setAttribute("class", "title");
var titleStr =
document.createTextNode(currentQuick.get ElementsByTagName("title")[0].fi
rstChild.data);
newTitle.appendChild(t itleStr);
87
var newSender = document.createElement("div");
newSender.setAttribute("className", "sender");
newSender.setAttribute("class", "sender");
var
senderStr = document.createTextNode("Pengirim: " +
currentQuick.getElementsByTagName("sender")[0].firstChild.data);;
newSender.appendChild(senderStr);
var newDate = document.createElement("div");
newDate.setAttribute("className", "date");
newDate.setAttribute("class", "date");
var dateStr = docu ment.createTextNode("Tanggal kirim: " +
currentQuick.getElementsByTagName("date")[0].firstChild.data);
newDate.appendChild(dateStr);
var newInfo = document.createElement("div");
newInfo.setAttribute("className", "info");
newInfo.setAttribute("class", "info");
var infoStr =
document.createTextNode(currentQuick.get ElementsByTagName("info")[0].f
irstChild.data);
newInfo.appendChild(infoStr);
newQuick.appendChild(newTitle);
newQuick.appendChild(newIn fo);
newQuick.appendChild(newSender);
newQuick.appendChild(newDate);
document.getElement ById("divContent").appendChild(newQu ick);
}
}
88
}
// Send the request

oRequest.send(null);
}
</script>

</style>
<link href="ajax-examp le.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td>Berikut contoh melaku kan format ing data XM L hasil respon dari
server <br />
dengan menafaatkan DOM dan Javascript. <br / >
<br / >
Untuk melakukan request data XML dari server click lin k dibawah
ini,<br / >
setelah data XML diterima maka javascript function akan melakukan
formating data tersebut.<br />
<br />
<br />
<a href="#" onclick="javascript:requestContent();">Click d isini untuk load
Data</a> </td>
</tr>
<tr>
<td>
<div id="divContent"></div>
</td>
</tr>
</table>
</body>
89
2. Simpan dengan nama ajax-contoh4.html, letakkan pada folder modul10
3. Untuk mengetikkan script ke 2, anda buka kembali text editor, buat file
baru dan ketikkan script berikut ini :
<xml id ="coreQuick">
<coreQuick>
<quicknews>
<id>1</id>
<title>Qu ick news pertama</title>
<sender>JerryPeter</sender>
<date>2006-07-30</date>
<time>19:20:19</time>
<info >Ruangkecil.Or.id, pemanfaatan AJAX dalam
pengembangan web application </info>
</quicknews>
<quicknews>
<id>1</id>
<date>2006-07-30</date>
<time>19:20:19</time>
</quicknews>
<quicknews>
<id>1</id>
<date>2006-07-30</date>
<time>19:20:19</time>
</quicknews>
<quicknews>
<id>1</id>
<date>2006-07-30</date>
<time>19:20:19</time>
90
</quicknews>
<quicknews>
<id>1</id>
<date>2006-07-30</date>
<time>19:20:19</time>
</quicknews>
</coreQuick>
</ xml>
4. Masih pada folder yang sama, modul10 simpan file tersebut dengan nama
coreQuick-data.xml
5. Terakhir anda ket ikkan script berikut ini pada text ed itor anda dengan
membu ka file baru :
.quickNews{
font-size: 11p x;
font-style: normal;
color: # 006699;
display: block;
padding: 0p x;
width: 220p x;
margin-top: 0p x;
margin-right: 0p x;
margin-bottom: 5p x;
margin-left : 0p x;
background-color: #F9F9F9;
border: 1p x solid # 006699;
}
.title {
91
font-size: 11p x;
font-style: normal;
font-weight: bold;
color: # 000000;
background-color: transparent;
display: block;
padding: 3p x;
border-top-width: 0p x;
border-right-width: 0p x;
border-bottom-width: 1p x;
border-left-width: 0p x;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: # 0099CC;
border-right-color: # 0099CC;
border-bottom-color: #0099CC;
border-left-co lor: #0099CC;
}
.info {
font-size: 11p x;
font-style: normal;
color: # 006699;
padding: 3p x;
display: block;
margin-top: 0p x;
margin-right: 0p x;
margin-bottom: 10p x;
margin-left : 0p x;
92
}
.sender {
font-size: 11p x;
font-style: normal;
color: # 006699;
display: block;
padding-top: 3p x;
padding-right: 3p x;
padding-bottom: 0p x;
padding-left: 3p x;
}
.date {
font-size: 11p x;
font-style: normal;
color: # 006699;
display: block;
padding-top: 3p x;
padding-right: 3p x;
padding-bottom: 3p x;
padding-left: 3p x;
}
6. Simpan file tersebut dengan nama ajax-examp le.css letakkan juga di

folder modul10
7. Buka file ajax-contoh4 dengan menggunakan web browser
(IE/Mozilla/ Opera, d ll), jika semua script yang anda ketikkan benar dan
web browser yang anda gunakan support maka tampilan yang muncul
adalah seperti ini.
93
8. Baris terakh ir terdapat kalimat “Click disin i untuk load Data” dengan
warna yang berbeda dan bergaris bawah yang menunjukkan lin k
9. Klik lin k tersebut maka akan anda dapatkan hasilnya seperti berikut :
10. Apa kesimpulan anda?

94
3. Tug as Praktikum
1. Apa yang dapat anda jelaskan dari keg iatan praktiku m d iatas?
2. Jelaskan keterkaitan antara file 1 (ajax-contoh4.html) dengan file 2 (
coreQuick-data.xml) dan file 3 (ajax-examp le.css) !
3. Buat contoh aplikasi ajax sederhana yang menggabungkan xml dan css
seperti kegiatan prakt iku m diatas.
4. Beri penjelasan dari apa yang telah anda kerjakan pada soal no 3 !
5. Referensi
1. Mathew Errnisse, “Build Your Own AJAX Web

Application”. Site Point. Melbourne Australia, 2006
2. www.slash.web.id
3. www.atnlie.blogspot.com
4. www.bambangriadi.com
95
MODUL XI
FRAMEWORK
(PENGENALAN CODEIGNITER)
Tujuan :
1. Peserta praktiku m dapat mengenal cara kerja framework dan
mengetahui fungsi serta kelebihannya.
2. Peserta praktiku m dapat mengenal framework CodeIgniter dan
menggunakannya dalam ap likasi dasar/sederhana.
1. Apakah framework itu? Jelaskan secara rinci!
2. Masing-masing framework punya keunggulan tersendiri. Apakah
keunggulan CodeIgniter? Jelaskan masing-masingnya!
3. Kebanyakan framework menggunakan model M VC. Bagaimana
cara kerja M VC? Jelaskan!
1. Dasar Teori
1.1 Pengertian Framework
Adalah sekumpulan perintah dan fungsi dasar yang dapat membantu
menyelesaikan proses – proses yang lebih ko mp leks.
Mengapa harus Framework ? Sebenarnya bukan keharusan untuk
menggunakan framework. Namun, seperti pengertian diatas, framework dapat
membantu anda dalam menyelesaikan pekerjaan yang lebih ko mpleks.
1.2 Pengenal an CodeIgniter
CodeIgniter adalah sebuah framework php yang dapat mempercepat
developer untuk membuat sebuah aplikasi web. Ada banyak library dan helper
yang berguna didalamnya dan tentunya mempermudah proses development.
Apa Keunggulan Codeigniter?

CodeIgniter sangat ringan, terstruktur, mudah dipelajari, doku mentasi
lengkap dan support yang luar biasa dari foru m codeigniter. A lasan lainnya
96
adalah
· Menggunakan pattern MVC yang mempermudah dan men ingkatkan

flesibilitas
· Menghasilkan url yang search engine friendly
CI menggunakan struktur pemanggilan eksekusi seperti ini :
www.your-site.com/news/article/345.
Jadi maksudnya, ketika sebuah Search Engine mencari kata yang terkait ke
sebuah situs, maka kata kunci tersebut bisa saja didapatkan dalam
pemanggilan alamat situs tersebut.
· Mudah untuk membuat library dan helpernya

· Jalan di PHP 4 (4.3.2+) dan 5
· Support banyak database MySQL (4.1+), MySQLi, MS SQL, Postgres,
Oracle, SQLite, dan ODBC.
· Sekuritas aplikasi terjaga
· Banyak lib rary dan helper yang mempermudah pekerjaan
1.3 MVC
Secara u mu m, framework menggunakan struktur MVC (Model, View,
Controller). M VC sebenarnya adalah sebuah pattern yang bertujuan
memisahkan bisnis logic, data logic dan persentation logic (interface) atau
simp lenya memisahkan antara desain, data dan proses.
Jika digambarkan, kira-kira seperti ini :
Input > Processing > Output = Controller > Model > View
97
Model
Model mencangkup semua proses yang terkait dengan pemanggilan struktur data
dan interaksi ke database, baik berupa pemanggilan fungsi, input processing atau
mencetak output ke dalam browser
Controller
Controller mencangkup semua proses yang terkait dengan pemanggilan database
dan kapsulisasi proses-proses utama. Jadi semisal di bagian in i ada file bernama
member.php, maka semua proses yang terkait dengan member akan
dikapsulisasi/dikelo mpokan dalam file ini. Controller bert indak sebagai
penghubung data dan view.
View
View mencangkup semua proses yang terkait layout output. Bisa dibilang untuk
menaruh template interface website atau aplikasi.
98
1.4 Stuktur CodeIgniter
Setelah di ekstrak, letakkan di fo lder htdoc s, maka akan didapatkan
struktur direktori seperti ini :
Kita hanya akan bermain di fo lder application, di situlah aplikasi kita

diletakkan.
Ø Folder system menyimpan semua file, baik itu file aplikasi yang kita buat
maupun core frameworknya.
99
Ø Folder application: disin ilah ap likasi yang akan kita bangun diletakkan
Ø Folder config : tempat menyimpan semua file konfigurasi yang ada di
aplikasi mu lai dari database, router dan autoload dari aplikasi
Ø Folder controllers : tempat menyimpan semua file controller.
Ø Folder errors : tempat menyimpan semua template error ap likasi
Ø Folder helpers : tempat menyimpan helper-helper yang bukan berasal dari
CI
Ø Folder hooks : tempat menyimpan hook yang digunakan untuk mengubah
alur fungsi dari core CI
Ø Folder language tempat menyimpan bahasa-bahasa yang akan di gunakan
Ø Folder libraries tempat menyimpan semua lib rary buatan kita sendiri
Ø Folder models tempat menyimpan semua model.
Ø Folder vie ws tempat menyimpan semua file view applikasi.
Ø Folder cache tempat menyimpan semua cache yang dibuat caching library.
Ø Folder codeigniter tempat menyimpan semua semua file internals CI.
Ø Folder database tempat menyimpan semua driver database drivers dan class
yang akan digunakan.
Ø Folder fonts tempat menyimpan semua fonts yang digunakan image
man ipulation library.
Ø Folder helpers tempat menyimpan semua helper core CI.
Ø Folder language tempat menyimpan semua langguage core CI.
Ø Folder libaries tempat menyimpan semua library core CI
Ø Folder logs tempat menyimpan semua logs generated oleh CI.
Ø Folder plugin tempat menyimpan semua plugin core CI.
Ø Folder scaffolding tempat menyimpan semua file yang berfungsi sebagai
scaffolding .
Ø Folder user_guide berisi userguide/manual penggunaan CI.
Ø Fileindex.php file yang akan menghandle semua request yang dilaku kan
oleh client.
yang perlu diperhatikan 3 fo lder penting :

/system/application/ model
/system/application/controller
/system/application/ view
Jadi, semua file yang terkait dengan website atau aplikasi anda, masing-masing
harus ditaruh di ketiga fo lder ini sesuai dengan fungsinya masing-masing.
1.5 Aturan Penulisan Fungsi

100
Karena CI menggunakan Object Oriented Programming (OOP), maka yang
perlu diingat bahwa penulisan nama class utama harus menggunakan huruf besar di
awal dan disimpan dengan nama yang sama ,tetapi menggunakan huruf kecil
semua.
Sebagai contoh, silahkan buka file /system/application/controllers/ welcome.php
class Welcome extends Controller {
function Welcome()
{
parent::Controller();
}
function index()
{
$this->load->view(’welco me_ message’);
}
}
Aturan ini berlaku untuk semua file yang terkait dengan class fungsi.
Sedangkan jika d idalamnya terdapat fungsi-fungsi lain, boleh menggunakan huruf
kecil saja atau huruh besar. Tetapi perlu d iingat bahwa PHP sangat Case Sensitive,
jadi berhati-hatilah dalam menggunakan nama fungsi.
1.6 Konfigurasi
Selanjutnya, dalam folder /system/application/config/ ada beberapa file yang
perlu diubah supaya CI b isa berjalan dengan baik.
config.php
Isi alamat pemanggilan di browser. Dalam contoh ini alamatnya
adalah http://localhost/codeigniter
$config['base_url'] = “http://localhost/codeigniter”;
database.php
Isi hostname, username, password dan nama database yang digunakan.
autol oad.php
File ini berfungsi untuk memanggil secara otomat is fungsi-fungsi yang sudah
disediakan CI atau yang anda buat tanpa harus memanggillnya dalam ap likasi
anda. Dalam kasus ini, kita akan memanggil fungsi database secara otomatis
sehingga setiap fungsi lain yang membutuhkan fungsi database cukup dengan
menggunakan perintah $this->db
Kira-kira seperti ini isinya :
$autoload['libraries'] = array(’database’);
routes.php
Variabel ini digunakan untuk menentukan nama file utama yang digunakan sebagai
eksekutor utama website atau aplikasi. Contoh secara defaultnya adalah file
welco me.
$route['default_controller'] = “welcome”;
101
Silahkan buka folder /system/application/controllers/, pasti anda menemukan
file yang bernama welco me.php. File ini yang disebut sebagai eksekutor utama dari
proses secara keseluruhan. Bisa dibilang ‘index’ nyalah.
1. Downloadlah CI (CodeIgniter) di http://codeigniter.co m/download.php
(saat tutorial ini ditu lis, versi yang saya download adalah
CodeIgniter_1.7.2.zip). Ekstraklah file CodeIgniter_1.7.2.zip di folder
yang bisa diakses web, ubahlah nama folder menajd i CodeIgniter.
2. Buatlah file userpage.php dan letakkan di folder
CodeIgniter/system/application/controllers. Buatlah juga file header.php,
sidebar.php, main.php, footer.php,desain.css, letakkan di di folder
CodeIgniter/system/application/views.
3. Aktifkan web-server, lalu akseslah folder CodeIgniter
4. Bukalah file CodeIgniter/system/application/config/routes.php, gantilah
$route['default_controller'] = "welco me"; dengan
$route['default_controller'] = "userpage";
5. Akses kembali folder CodeIgniter dengan browsermu
<?php
//userpage.php
class Userpage extends Controller { //perhatikan bahwa huruf "U" harus besar
function Userpage() //begitu juga dengan huruf "U" difungsi
{
}
function index()
{
$data['judul'] = "Selamat Datang di Web Pertamaku";
$data['header'] = "Web Pertamaku";
$data['sidebar'] = "Menu SideBar";
$data['menu'] = array('menu 1', 'menu 2', 'menu 3');
$data['main'] = "In i adalah bagian main";
$data['copy'] = "Copyright © cesser :-)";
102

<div id="sidebar">
<h3><?php echo $sidebar; ?></h3>
<?php foreach($menu as $daftar): ?>
<?php echo $daftar.'<br />'

<div id="main">
<h1><?php echo $judul; ?></h1>
<p><?php echo $main; ?></p>
<p><?php echo $main; ?></p>

<div class="clear"></div>
</div>
<div id="footer">
<p><?php echo $copy; ?></p>
</div>
</div>
</body>
103

<html>
<head>
<style type="text/css" media="all">@import "<?php echo
base_url();?>system/application/views/desain.css";</style>

<title><?php echo $judul; ?></tit le>
</head>
<body>
<div id="container">
<div id="header">
<h2><?php echo $header; ?></h2>
</div>
<div id="content">
/*-- desain.css --*/
body {
background-color:#FFF;
text-align:center;
}
#container{
width:900p x;
margin:0 auto;
padding : 0;
border : 0;
background-color : red;
}
#header{
width:900p x;
margin:auto;
height:30p x;
background-color : # 057;
color : #fff;
}
#content{
width:900p x;
margin:0;
104
background-color : #cecece;
padding : 0;
border : 0;
}
#sidebar{
width:300p x;
float:left;
3. Tug as Praktikum
1. Apa yang terjadi pada keg iatan praktiku m, point 2? Jelaskan jawaban mu!
2. Apa yang terjadi pada keg iatan praktiku m, point 5? Jelaskan jawaban mu!
5. Referensi
· http://www.codeigniter.co m
· http://www.codeigniter-id.co m
105
MODUL XII
FRAMEWORK (PENGENALAN CODEIGNITER)
Tujuan :
1. Peserta praktiku m mengetahui settingan database dalam
CodeIgniter.
2. Peserta praktiku m dapat membuat aplikasi database dengan
CodeIgniter.
1. Apakah peranan model dalam ap likasi database dengan
CodeIgniter? Jelaskan!
2. File-file apa saja yang berperan dalam settingan database di
CodeIgniter? Bagiamana settingan dilaku kan?
1. Dasar Teori
1.1. Model
Model mencangkup semua proses yang terkait dengan pemanggilan
struktur data dan interaksi ke database, baik berupa pemanggilan fungsi, input
processing atau mencetak output ke dalam browser.
Anatomi Model
class Model_name extends Model {
function Model_name()
{
parent::Model();
}
}
106
Dan filenya disimpan d i application/models/user_model.php
Membaca Model
$this->load->model('Model_name');
$this->Model_name->function();
1.2. Database
Mengambil Data
· $this->db->get()
1 parameter :
$query = $this->db->get('mytable');
// menghasilkan : SELECT * FROM mytable
2 & 3 parameter :
$query = $this->db->get('mytable', 10, 20);
// menghasilkan : SELECT * FROM mytable LIMIT 20,
10 (in MySQL. Other databases have slightly different
syntax)
· $this->db->select()
untuk menyeleksi sebagian field table, d igunakan fungsi ini :
$this->db->select('t itle, content, date');
$query = $this->db->get('mytable');
// menghasilkan : SELECT t itle, content, date FROM
mytable
· $this->db->where()
$where = "name='Joe' AND status='boss' OR status='active'";
$this->db->where($where);
1.3. Memasukkan Data

$this->db->insert()
Contoh :
107
$data = array(
't itle' => 'My title' ,
'name' => 'My Name' ,
'date' => 'My date'
);
$this->db->insert('mytable', $data);
// menghasilkan : INSERT INTO mytable (tit le, name, date) VA LUES
('My tit le', 'My name', 'My date')
$this->db->set()
Contoh :
$this->db->set('name', $name);
$this->db->insert('mytable');
// menghasilkan : INSERT INTO mytable (name) VA LUES ('{$name}')
1.4. Meng-update Data

$this->db->update()
Contoh :
$data = array(
't itle' => $tit le,
'name' => $name,
'date' => $date
);
$this->db->where('id', $id );
$this->db->update('mytable', $data);
// menghasilkan :
// UPDATE mytable
// SET tit le = '{$t itle}', name = '{$name}', date = '{$date}'
// WHERE id = $id
1.5. Menghapus Data

$this->db->delete()
Contoh :
$this->db->where('id', $id );
$this->db->delete('mytable');
/*atau
108
$this->db->delete('mytable', array('id' => $id));
*/
// menghasilkan :
// DELETE FROM mytable
// WHERE id = $id
$this->db->empty_table()
Contoh :
$this->db->empty_table('mytable');
// menghasilkan
// DELETE FROM mytable
$this->db->truncate();
Contoh :
$this->db->fro m('mytable');
$this->db->truncate();
/* or
$this->db->truncate('mytable');
*/
// menghasilkan :
// TRUNCATE mytable
1.6. Pagination
1. Buatlah database, misalnya ci_test.
2. Buatlah tabel pagination seperti contoh berikut :
create table pagination(
NoID int,
IsiNo varchar(20)
);
109
3. Isilah tabel pagination dengan data sbb :
INSERT INTO pagination VA LUES(1,'Data ke satu');
INSERT INTO pagination VA LUES(2,'Data ke dua');
INSERT INTO pagination VA LUES(3,'Data ke tiga');
INSERT INTO pagination VA LUES(4,'Data ke empat');
INSERT INTO pagination VA LUES(5,'Data ke lima');
INSERT INTO pagination VA LUES(6,'Data ke enam');
INSERT INTO pagination VA LUES(7,'Data ke tujuh');
INSERT INTO pagination VA LUES(8,'Data ke delapan');
INSERT INTO pagination VA LUES(9,'Data ke semb ilan');
INSERT INTO pagination VA LUES(10,'Data ke sepuluh');
INSERT INTO pagination VA LUES(11,'Data ke sebelas');
INSERT INTO pagination VA LUES(12,'Data ke duabelas');
INSERT INTO pagination VA LUES(13,'Data ke t igabelas');
INSERT INTO pagination VA LUES(14,'Data ke empatbelas');
INSERT INTO pagination VA LUES(15,'Data ke limabelas');
4. Buatlah file mpagination.php dan letakkan di folder
application/models/
<?php
class Mpagination extends Model {
function Mpagination(){
parent::Model();
}
function AmbilData($num, $offset) {

$query = $this->db->get('pagination',
$num, $offset);
return $query;
}
}
?>
110
5. Buatlah file pagination.php dan letakkan di folder
application/controllers/
<?php
class Pagination extends Controller {
function __construct() {
$this->load->helper('url');
$this->load->database();
}
function index() {
//load pagination class
$this->load->library('pagination');
// Pengaturan konfigurasi untuk pagination

$config['base_url'] =
base_url().'index.php/pagination/index/';
$config['total_rows'] = $this->db-
>count_all('pagination');
$config['per_page'] = '4';
$config['first_link'] = 'Awal';
$config['last_link'] = 'Akhir';
$config['next_link'] = 'Selanjutnya';
$config['prev_link'] = 'Sebelumnya';
$this->pagination->initialize($config);
//load model and ambil hasilnya

$this->load->model('Mpagination');
$data['hasil'] = $this->Mpagination-
>AmbilData($config['per_page'],$this->uri-
>segment(3));
// load the HTML Table Class

$this->load->library('table');
$this->table->set_heading('NoID',
'IsiNo');
// load the view

$this->load->view('v_pagination',
$data);
111
}
}
?>
6. Buatlah file v_pagination.php dan letakkan di folder
application/views/
<html>
<head>
<title>Membuat Pagination</title>
</head>
<body>
<h 1>Membuat Pagination</h1>
<? echo $this->table->generate($hasil); ?>
<? echo $this->pagination->create_links(); ?>
</body>
</html>
7. Jalankan web-server dan akseslah aplikasi yang telah Anda buat!

8. Bukalah file application/config/autoload.php, ubahlah
$autoload['libraries'] = array(‘’);
Menjadi
$autoload['libraries'] = array('database');
9. Ubahlah konfigurasi database pada file
application/config/database.php sesuai dengan konfigurasi database
Anda.
10. Akseslah lagi aplikasi yang telah Anda buat!
3. Tug as Praktikum
1. Apa yang terjadi pada Percobaan langkah ke-7? Jelaskan jawaban mu!
2. Apa yang terjadi pada Percobaan langkah ke-10? Jelaskan jawabanmu!
3. Sebutkan min imal 25 fungsi query database dalam CodeIgniter! Jelaskan
penggunaan masing-masing!
4. Jelaskan tentang penggunaan Method Chaining dalam akses database
CodeIgniter!
112
5. Referensi
· http://www.codeigniter.co m
· http://www.codeigniter-id.co m
113

Modul PHP Lanjut

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul PHP Lanjut

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL 1

1.2. Pemeriksaan File

1.3. Membuk a File

§ Fungsi fopen membutuhkan 2 parameter yaitu nama_berkas dan mode (jenis

1.4. Membaca Isi File

arugen pegangan menyatakan pegangan file yang diperoleh ketika

1.1 Fungsi-Fungsi Yang disedi akan Oleh PHP

1.2 Koneksi Ke Database

3. mysql_ query(perintah_ query,nama_koneksi)

$ju m_ kolo m=mysql_num_fields($rs);

Gambar 2.1. Tampilan untuk merubah struktur tabel

5. Amatilah yang terjadi dari studi kasus diatas!

Gambar 3.1. Desain Database Sistem Perpustakaan

2. Mendesain Menu Utama yang merupakan menu awal dari SIM

File Tambah Data Pengarang:

4. Tugas tambahan (ditentukan oleh asisten praktiku m)!

Sedangkan untuk mengakses cookie ada 2 cara yaitu:

Dan untuk menghapus cookie yaitu:

1.2 Manfaat CMS

4. Setelah mengkonfigurasi setting sekuriti MySQL, maka sekarang dapat mu lai

Tampilan halaman Pages

Tambahkan sebuah halaman baru :

M enambahkan informasi pada halaman Add New Page

Link ke halaman baru pada halaman utama

1.1 Pengertian dan Pemanfaatan B LOG

1.2 Menu Kelol a – Manage

1.3 Pengelolaan User.

Untuk menambahkan suatu kategori baru, klik +Add new Category.

Tampak kategori baru sudah tampil. Pilih/centang kategori yang

Tambahkan beberapa tag pada halaman blog anda, dengan cara :

Area pengaturan user

· Klik menu APPEA RANCE

Tampilan halaman Appeareance

Tampilan halaman Themes

· Pilih theme yang disukai pada bagian AVAILA BLE THEM ES

Tombol Visit Site

· Lihat perubahan setelah themes diganti

2. Masih dengan halaman appearance, tambahkan beberapa widget, dengan

Tampilan halaman Widgets

· Daftar widgets yang tersedia diberikan pada area Available Widgets.

· Gambar d i bawah ini menunjukkan contoh widgets yang telah

· ditambahkan ke dalam sidebar.

Widgets yang telah ditambahkan ke sidebar

· Setelah selesai, klik to mbol save. Gambar di bawah menunjukkan

3. Merubah gambar header

Tampilan halaman Header Colors

Seandainya dengan penggantian gambar tersebut warna teks judul blog

4. Merubah Warna Header

· Update header, digunakan untuk menyimpan perubahan warna yang telah

1.3 Memformat XML

3. Jika perubahan pada program xml diatas menjadi:

3. Carilah di internet contoh aplikasi XM L d i bidang pendidikan dan b isnis

Ajax mencoba memperbaiki JavaScript untuk dapat berkomunikasi secara

<title>AJAX - Demo 1</tit le>

if (!oAJAX && typeof XM LHttpRequest != 'undefined') {

Halaman in i memang il function pembuatan class object XMLHttpRequest<br

3. Simpan dengan nama ajax-contoh1.html, letakkan pada folder modul9

if (!oAJAX && typeof XM LHttpRequest != 'undefined') {

// Bu ka ko munikasi dengan server

// menunggu respon dari server

document.getElement ById("divContent").innerHTM L="<d iv

var response = oRequest.responseText;

document.getElement ById("divContent").innerHTM L = response;

// Send the request

/-- desain.css --/