Penggunaan fungsi ARRAYDEFINITION pada PHP

rio astamal

MODUL PEMROGRAMAN PHP Level - Pemula Versi - 1.0

Lisensi dibawah: Creative Commons Attribution-Share Alike 3.0

http://creativecommons.org

OSSC LOGO

http://ossc.stikom.edu/

http://lug.stikom.edu/

LUG STIKOM Surabaya

Software Open Source yang Digunakan dalam Pembuatan Modul ini adalah:

OpenOffice.org XAMPP

Linux

Apache httpd Server

PHP

Geany

PDFSam

Ubuntu

Firefox

dan beberapa software lain yang mungkin lupa disebutkan.

© 2008-2010 Rio Astamal – Hal. ii

LUG STIKOM Surabaya

Kata Pengantar Modul Pemrograman PHP ini adalah sebuah modul yang berisikan tutorial dasar-dasar pemrograman web menggunakan bahasa pemrograman PHP. Seperti yang telah diketahui PHP saat ini merupakan bahasa pemrograman untuk web yang terpopuler. Facebook, Yahoo, Digg dan masih banyak website populer lainnya menggunakan PHP. Belum lagi jumlah CMS yang bebasiskan PHP beberapa yang terpopuler diantaranya: Joomla, Wordpress, Drupal, ModxCMS, dan masih banyak lagi. Dengan menguasasi PHP sudah dapat dibayangkan bukan banyak kelebihan yang akan anda dapat.

Pada modul ini penulis coba untuk menjelaskan secara step-by-step bagaimana membuat sebuah halaman website yang lengkap dengan mengetahui terlebih dahulu dasar-dasar web. Hal tersebut meliputi dasar-dasar WWW, HTML, CSS dan pengetahuan dasar tentang website yang menurut penulis perlu diketahui. Baru setelah itu penulis masuk ke bahasan utama yaitu PHP. Pada akhir modul ini penulisan sertakan beberapa contoh aplikasi sederhana yang mungkin akan sangat membantu pemahaman pembaca mengenai PHP.

Penulis sampaikan terima kasih kepada seluruh pihak yang mendukung dan membantu hingga modul ini selesai terutama rekan-rekan di LUG STIKOM Surabaya dan pihak Open Source Software Center (OSSC) STIKOM.

Semoga modul ini dapat berguna bagi semua pembaca. Kritik dan saran untuk modul ini dapat disampaikan pada email penulis di [email protected] Terima Kasih.

Surabaya, Maret 2010

Penulis

© 2008-2010 Rio Astamal – Hal. iii

LUG STIKOM Surabaya

Daftar Isi Kata Pengantar.................................................................................................................................iii Daftar Isi............................................................................................................................................iv Pendahuluan......................................................................................................................................vi BAB I HTML & World Wide Web....................................................................................................1 Cara Kerja WWW................................................................................................................................1 HTML..................................................................................................................................................2 Manipulasi Font...................................................................................................................................3 Hyperlink.............................................................................................................................................4 Membuat Tabel....................................................................................................................................5 HTML Form........................................................................................................................................6 Macam-macam Input......................................................................................................................7 Menampilkan Gambar.........................................................................................................................9 XHTML & DOCTYPE......................................................................................................................10 CSS.....................................................................................................................................................11 CSS Class dan ID..........................................................................................................................12 Hyperlink Pseudoclass...................................................................................................................14 External CSS.................................................................................................................................15 Membuat Layout dengan DIV............................................................................................................16 Javascript...........................................................................................................................................21 Menggunakan Javascript...............................................................................................................21 Manipulasi DOM..........................................................................................................................23 BAB II Pengenalan PHP..................................................................................................................26 Apa itu PHP?....................................................................................................................................26 Cara Kerja PHP.................................................................................................................................26 Variabel pada PHP.............................................................................................................................27 Tipe Variabel.................................................................................................................................27 Konstanta......................................................................................................................................27 Komentar...........................................................................................................................................29 Operator.............................................................................................................................................30 Operator Aritmatik.......................................................................................................................30 Operator Kombinasi.....................................................................................................................30 Operator Perbandingan.................................................................................................................31 Operator Logika............................................................................................................................31 Operator Increment/Decrement....................................................................................................31 Operator String.............................................................................................................................32 Escape Character...............................................................................................................................32 Special Character..............................................................................................................................33 BAB III Struktur Kontrol................................................................................................................35 Struktur Kondisi................................................................................................................................35 Statement if...................................................................................................................................35 Statement if...else..........................................................................................................................36 Statement if...elseif...else..............................................................................................................36 Statement switch...case...break.....................................................................................................40 Struktur Perulangan (Looping)..........................................................................................................41 © 2008-2010 Rio Astamal – Hal. iv

LUG STIKOM Surabaya

Statement for.................................................................................................................................41 Statement while.............................................................................................................................43 Statement do...while......................................................................................................................44

BAB IV File dan Array....................................................................................................................46 Berinteraksi dengan File...................................................................................................................46 Menyimpan File...........................................................................................................................46 Fungsi-fungsi Lain.......................................................................................................................50 Array pada PHP.................................................................................................................................51 Mengakses Isi Array.....................................................................................................................52 Looping Array Index Numerik.....................................................................................................52 Array dengan Index String (Associative Array)...........................................................................55 Mengakses Associative Array.......................................................................................................55 Looping pada Associative Array...................................................................................................56 Array Multidimensi...........................................................................................................................56 Array 2-Dimensi............................................................................................................................56 Array 3-Dimensi............................................................................................................................58 BAB V Contoh-contoh Aplikasi......................................................................................................60 Pre-Requirements..............................................................................................................................60 Simple Contact Form........................................................................................................................60 Penjelasan Script Simple Concat Form........................................................................................62 Simple Guestbook.............................................................................................................................63 Penjelasan Script Simple Guestbook............................................................................................67 Improvisasi Simple Guestbook.....................................................................................................68 Simple Poll........................................................................................................................................68 Penjelasan Script Simple Poll.......................................................................................................72 Daftar Pustaka..................................................................................................................................74

© 2008-2010 Rio Astamal – Hal. v

LUG STIKOM Surabaya

Pendahuluan A. Linux Konfigurasi dan software-software yang digunakan penulis test menggunakan distro Ubuntu, namun dapat dipastikan tidak terlalu berbeda jika diterapkan pada distro Linux lainnya. Software-software yang diperlukan: • • • • •

XAMPP for Linux Text Editor (vi, gedit, emacs, geany atau yang lain) Postfix Mail Server Email Client (Evolution, Claws Mail, Thunderbird atau yang lain) Web Browser (Firefox, Chrome, atau yang lain)

1. Instalasi XAMPP for Linux Download file XAMPP for Linux dari situs http://www.apachefriends.org/. Asumsi yang saya berikan adalah: • • •

File xampp-linux-x.y.z (x.y.z versi xampp) anda letakkan pada home direktori. Username pada sistem yang digunakan adalah lug (Sesuaikan dengan username anda). XAMPP akan diinstall pada direktori /opt sesuai standard defaultnya.

Langkah-langkahnya: 1. Buka Terminal (Application → Accecories → Terminal) 2. Extract file xampp ke direktori /opt $ sudo ­zxvf xampp­linux­x.y.z ­C /opt

3. Ubah permission /opt/lampp/htdocs ke user lug $ sudo chown ­R lug /opt/lampp/htdocs

4. Buat direktori webpro pada direktori /opt/lampp/htdocs $ mkdir /opt/lampp/htdocs/webpro

5. Sekarang coba jalankan XAMPP $ sudo /opt/lampp/lampp startapache

6. Jika semuanya benar maka jika anda mengarahkan alamat web browser anda ke http://localhost/ akan muncul tampilan XAMPP for Linux. 2. Instalasi Postfix Mail Server Tujuan kita menginstall postfix adalah karena ada contoh aplikasi yang kita buat melibatkan proses pengiriman email. Jadi otomatis kita memerlukan sebuah SMTP server. Untuk instalasi postfix langkahnya cukup sederhana namun pastikan repository anda sudah terkonfigurasi dengan bebar. Langkah-langkah instalasi dan konfigurasi postfix: 1. Buka Terminal (Application → Accecories → Terminal) 2. Install dengan menggunakan apt-get $ sudo apt­get install postfix

3. Tambahkan domain localhost.org, localhost.com, localhost.net ke dalam mydestination postfix. © 2008-2010 Rio Astamal – Hal. vi

LUG STIKOM Surabaya $ sudo gedit /etc/postfix/main.cf

4. Cari baris mydestination dan tambahkan entry yang baru, setiap entry dipisahkan koma dan tetap satu baris. Sehingga hasil akhir dari isi mydestination kurang lebih akan terlihat seperti berikut: mydestination = lug­laptop, localhost.localdomain, localhost,  localhost.com, localhost.org, localhost.net

5. Restart postfix $ sudo /etc/init.d/postfix restart

3. Konfigurasi Email Client Pada contoh konfigurasi ini saya menggunakan email client Claws Mail. Namun konsep konfigurasinya sama saja untuk setiap email client yang menggunakan local mailbox. Berikutlangkah-langkahnya. 1. Install Claws Mail $ sudo apt­get claws­mail

2. Kirim email lewat terminal untuk mengetes (ganti lug sesusai username anda) $ mail lug Subject: HELLO INI ADALAH TES UNTUK LOCAL MAILBOX

3. Tekan ENTER lalu CTRL-D untuk mengakhiri penulisan pesan. Jika muncul pertanyaan cc: tekan ENTER saja. 4. Buka claws mail (Applications → Internet → Claws Mail) 5. Klik Configuration → Create new Account 6. Kemudian isikan seperti dibawah ini (ganti lug sesuai username anda)

7. Klik Apply 8. Untuk mengecek email baru klik Icon “Get Mail” pada pojok kiri atas. 9. Jika ada email masuk maka akan tampil di Inbox 10. Email yang kita kirimkan lewat terminal akan masuk ke inbox kita, hasilnya dapat dilihat pada gambar berikut.

© 2008-2010 Rio Astamal – Hal. vii

LUG STIKOM Surabaya

B. Instalasi pada Windows Instalasi software dan konfigurasi penulis lakukan pada sistem operasi Windows XP. Bagi anda yang menggunakan Windows Vista/7 silahkan menyesuaikan. Software-software yang akan kita gunakan diantaranya: • • • • •

XAMPP for Windows Text Editor (Notepad++) Mercury untuk mail server (sudah include dengan XAMPP) Email Client (Outlook Express, Thunderbird, atau yang lain) Web Browser (Firefox, Opera, Chrome, atau yang lain. IE tidak dianjurkan)

1. Instalasi XAMPP for Windows Download file XAMPP for Windows dari situs http://www.apachefriends.org/. Asumsi yang saya berikan adalah: • • •

File xampp-win32-x.y.z.exe (x.y.z versi xampp) XAMPP yang anda download adalah XAMPP versi installer. Target instalasi adalah C:\xampp

Langkah-langkahnya: 1. 2. 3. 4. 5.

Double klik file xampp-win32-x.y.z.exe Pada pilihan bahasa pilih saja English lalu OK Pada Destination Folder pilih saja defaultnya yaitu c:\xampp Klik Next > Install Setelah selesai coba jalankan XAMPP Control panel melalui Start → Programs → Apache Friends → XAMPP → XAMPP Control Panel 6. Klik tombol “Start” disebelah kanan Apache 7. Coba buka browser anda pada alamat http://localhost/ jika semuanya OK maka akan muncul tampilan XAMPP for Windows

© 2008-2010 Rio Astamal – Hal. viii

LUG STIKOM Surabaya

2. Konfigurasi Mercury Mail Server Mercury Server adalah sebuah aplikasi mail server yang mendukung protokol SMTP, POP3, dan IMAP. Mercury sudah dimasukkan dalam XAMPP jadi anda tidak perlu mendownload. Berikut ini adalah cara konfigurasi mercury. Langkah-langkah membuat account baru: 1. 2. 3. 4. 5.

Jalankan XAMPP Control Panel Klik tombol Start sebelah kanan Mercury untuk men-start mercury server. Klik tombol Admin untuk membuka window konfigurasi Klik Menu Configuration → Manage local user... Klik tombol Add untuk menambahkan user baru. Pada contoh saya memasukkan Username: lug Personal name: LUG STIKOM Password: lugstikom 6. Klik tombol OK → Close 7. Langkah selanjutnya adalah mempersingkat waktu poll untuk email baru agar proses send/receive email terjadi secara realtime. Klik menu Configuration → Mercury core module... 8. Pada isian Poll for new mail every ganti dengan 3. 9. Klik OK 10. Tahap berikutnya adalah pengetesan account. Klik menu File → Send mail message Isikan To: [email protected] Subject: HELLO Body: INI TEST ACCOUNT 11. Klik Send Penting! Menutup window Mercury berarti sama saja mematikan mail server. Oleh karena itu cukup minimize saja jangan ditutup. Tahap berikutnya adalah melakukan konfigurasi email client. Dalam contoh ini saya menggunakan email client bawaan Windows Outlook Express. Saya rasa langkah-langkahnya hampir sama untuk semua email client. 1. Pertama jalankan aplikasi Outlook Express 2. Jika tidak muncul window untuk membuat account klik menu Tools → Accounts... 3. Pindah ke tab Mail lalu klik tombol add → Mail... Display Name: LUG STIKOM Email Address: [email protected] Incoming Mail: localhost Outgoing Mail: localhost Account Name: lug Password: lugstikom (sesuai dengan di mercury) 4. Klik Next → Finish → Close 5. Klik tombol Send/Receive untuk mengecek inbox 6. Jika semuanya benar maka seharunya ada email baru di inbox anda. Email tersebut adalah email yang anda kirim lewat mercury. © 2008-2010 Rio Astamal – Hal. ix

LUG STIKOM Surabaya

C. Konvensi Letak Direktori Pada modul ini anda akan sering menemui perintah untuk menyimpan file ke suatu direktori. Karena sistem pengalamatan direktori pada sistem operasi berbasis Linux/*NIX berbeda dengan windows maka pada modul dibuat konvensi sebagai berikut. Jika disebutkan alamat direktori sebagai berikut htdocs/ maka: Untuk linux berarti: /opt/lampp/htdocs/ Untuk Windows berarti: c:\xampp\htdocs\ Modul ini terdiri dari lima bab, untuk itu penulis menyarankan untuk membuat direktori baru bernama webpro didalam htdocs/. Setelah itu berturut-turut buatlah direktori dengan nama bab1, bab2, bab3, bab4, dan bab5. Sehingga struktur direktori akhir akan terlihat seperti tabel dibawah. Linux

Windows

/opt/lampp/htdocs/webpro/bab1

C:\xampp\htdocs\webpro\bab1

/opt/lampp/htdocs/webpro/bab2

C:\xampp\htdocs\webpro\bab2

/opt/lampp/htdocs/webpro/bab3

C:\xampp\htdocs\webpro\bab3

/opt/lampp/htdocs/webpro/bab4

C:\xampp\htdocs\webpro\bab4

/opt/lampp/htdocs/webpro/bab5

C:\xampp\htdocs\webpro\bab5

Jadi setiap project yang anda kerjakan pada modul ini simpan sesuai dengan babnya masing-masing untuk lebih mempermudah organisasi. Mungkin anda bingung dengan perbedaan istilah direktori dan folder. Anggap saja itu sama, tidak usah dipusingkan. Folder ya direktori, direktori ya folder.

© 2008-2010 Rio Astamal – Hal. x

LUG STIKOM Surabaya

Halaman ini sengaja dikosongkan

© 2008-2010 Rio Astamal – Hal. xi

LUG STIKOM Surabaya

Bab I – HTML dan World Wide Web

BAB I

HTML dan World Wide Web 1.1 Cara Kerja WWW Ketika kita mengunjungi sebuah situs katakanlah, google.com, ada sebuah proses “dibalik layar” yang tidak anda ketahui. Proses tersebut cukup kompleks namun, jika digambarkan dalam sebuah diagram sederhana kurang lebih akan seperti berikut: REQUEST Browser

Web Server

INTERNET User RESPONSE Gambar 1.1: Cara kerja WWW Secara kronologis urutan proses pada diagram diatas adalah: 1. 2. 3. 4. 5.

User membuka alamat website pada browser Browser mengirim HTTP-Request ke server Server merespon HTTP-Request dari browser Server mengirim HTTP-Response ke browser Browser menampilkan halaman website kepada user

1.2 HTML HTML/XHTML merupakan format tampilan yang digunakan untuk menampilkan halaman website. HTML terdiri dari simbol-simbol tertentu yang sering disebut dengan tag. Sebuah halaman website yang valid selalu diapit tag

. File HTML umumnya memiliki akhiran *.htm atau *.html. Tag-tag pada HTML selalu diawali dengan <x&amp;amp;gt;..., dimana x tag HTML seperti &amp;amp;lt;strong&amp;amp;gt;, &amp;lt;p&amp;gt;, &amp;lt;/p&amp;gt;&amp;lt;div&amp;gt;, dan lain-lain. Dibawah ini adalah tabel beberapa tag HTML yang sering digunakan. Tag HTML&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Keterangan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;html&amp;gt;&amp;lt;/html&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Tag untuk mengapit halaman HTML&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;head&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Tag yang berisi informasi umum dari halaman&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Judul Halaman *&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;body&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Akan ditampilkan di browser&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;style&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk CSS *&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;strong&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk menebalkan teks&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk membuat layer&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;a&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk membuat hyperlink&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 1&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk membuat paragraf&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;hn&amp;gt;&amp;lt;/hn&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk membuat header **&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;span&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk inline style (manipulasi teks)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Komentar * Tag tersebut harus berada didalam tag &amp;lt;head&amp;gt;...&amp;lt;/head&amp;gt; ** n dapat berupa angka dari 1 – 5, contoh &amp;lt;h2&amp;gt;...&amp;lt;/h2&amp;gt; Penerapan Teori HTML 1. Buka editor anda (gedit(Linux), Notepad++(Windows), dsb)) 2. Ketik kode berikut: 1. 2. 3. 4. 5. 6. 7. 8.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;Website&amp;nbsp;Pertamaku&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;h2&amp;gt;Hello&amp;nbsp;World!!&amp;lt;/h2&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;/html&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan dengan nama hello-world.html 4. Buka browser anda(Firefox, IE, dsb) dan buka file yang baru saja anda buat. 5. Hasilnya akan seperti gambar 1.1&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.1: hello-world.html 1.3 Manipulasi Font Untuk memanipulasi font kita akan menggunakan inline style/CSS (akan dibahas dibagian berikutnya). Kita tidak akan menggunakan tag &amp;lt;font&amp;gt; karena tag ini sudah “kuno” alias deprecated. W3C sebagai pengembang HTML sudah tidak menyarankan untuk menggunakan tag font lagi. Sebagai gantinya digunakan tag &amp;amp;lt;span&amp;amp;gt; dan inline style. Inline style adalah attribut style yang diberikan pada sebuah tag HTML. Contoh, untuk membuat tampilan teks tebal gunakan cara berikut: &amp;amp;lt;span&amp;nbsp;style=”font­weight:bold”&amp;amp;gt;Aku&amp;nbsp;adalah&amp;nbsp;teks&amp;nbsp;tebal&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 2&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Aku adalah teks tebal Pada contoh diatas kita memberikan attribut style, yang berisi “font-weight:bold”. Maksudnya adalah kita akan mengaplikasikan style bold pada teks yang diapit oleh tag &amp;amp;lt;span&amp;amp;gt;. Pemberian style tidak hanya terbatas pada satu bagian saja. anda dapat memberikan beberapa style sekaligus dengan memberi tanda pemisah berupa “;” untuk setiap style. &amp;amp;lt;span&amp;nbsp;style=”font­weight:bold;text­decoration:underline;font­style:italic”&amp;amp;gt;Aku&amp;nbsp; adalah&amp;nbsp;teks&amp;nbsp;tebal,&amp;nbsp;bergaris&amp;nbsp;bawah&amp;nbsp;dan&amp;nbsp;miring&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output Aku adalah teks tebal, bergaris bawah, dan miring Pada contoh diatas kita menerapkan tiga style pada tag span. Dapat dilihat kalau setiap style dipisahkan oleh titik koma. Intinya kita dapat memberikan banyak style sekaligus pada suatu tag. Attribut style tidak terbatas pada tag span saja, hampir semua tag yang digunakan untuk presentasi teks dapat kita sisipi tag style. Penerapan Teori Manipulasi Teks 1. Buka gedit/Notepad++ 2. Ketik kode HTML berikut ini 1. &amp;lt;html&amp;gt; 2. &amp;lt;head&amp;gt; 3. &amp;lt;title&amp;gt;Manipulasi&amp;nbsp;Teks&amp;lt;/title&amp;gt; 4. &amp;lt;/head&amp;gt; 5. &amp;lt;body&amp;gt; 6. &amp;lt;h2&amp;nbsp;style="color:red;text­decoration:underline"&amp;gt;PENGUMUMAN! 7. &amp;amp;lt;span&amp;nbsp;style="color:#FF0000"&amp;amp;gt; 8. Barang&amp;nbsp;siapa&amp;nbsp;yang&amp;nbsp;menemukan&amp;nbsp;dompet&amp;nbsp;saya,&amp;nbsp;akan&amp;nbsp;saya&amp;nbsp;beri&amp;nbsp; 9. &amp;amp;lt;span&amp;nbsp;style="font­weight:bold;font­style:italic"&amp;amp;gt;ISTRI,&amp;nbsp;MOBIL,&amp;nbsp;RUMAH&amp;nbsp;dan&amp;nbsp; 10. Segala&amp;nbsp;SERTIFIKAT&amp;nbsp;TANAH&amp;nbsp;SAYA&amp;nbsp;DIJAMIN!!!. 11.&amp;lt;/h2&amp;nbsp;style="color:red;text­decoration:underline"&amp;gt;&amp;lt;/body&amp;gt; 12.&amp;lt;/html&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan dengan nama manipulasi-teks.html 4. Buka dengan browser anda 5. Hasilnya akan seperti gambar 1.2 1.4 Hyperlink Anda tentu sering melngklik gambar atau tulisan yang mengarah ke halaman lain atau website lainnya. Yang anda klik itu adalah hyperlink atau lebih dikenal dengan istilah link saja. Untuk membuat link kita dapat menggunakan tag &amp;lt;a&amp;gt;&amp;lt;/a&amp;gt;. Dua attribut yang paling sering digunakan pada tag &amp;lt;a&amp;gt; adalah href dan target. href digunakan untuk menentukan lokasi tujuan dari link. Dapat berupa relatif URL atau absolut URL.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 3&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.2: Manipulasi font menggunakan atribut style target digunakan untuk menentukan apakah halaman akan dibuka pada jendela/window baru atau tidak. Defaultnya adalah self dimana link tidak dibuka pada window baru. Jika ingin membuka pada window baru gunakan nilai _blank. Untuk lebih memahami cara kerja link, kita akan membuat dua file yaitu profilku.html dan daftarsitus.html. 1. Buka gedit/Notepad++ 2. Ketik kode berikut: 1. &amp;lt;html&amp;gt; 2. &amp;lt;head&amp;gt; 3. &amp;lt;title&amp;gt;Profil&amp;nbsp;JSL&amp;lt;/title&amp;gt; 4. &amp;lt;/head&amp;gt; 5. &amp;lt;body&amp;gt; 6. &amp;lt;h2&amp;gt;ProfilKu&amp;lt;/h2&amp;gt; 7. &amp;lt;ul&amp;gt; 8. &amp;lt;li&amp;gt;&amp;amp;lt;strong&amp;amp;gt;Nama&amp;nbsp;Lengkap:&amp;nbsp;John&amp;nbsp;Septian&amp;nbsp;Lennon&amp;lt;/li&amp;gt; 9. &amp;lt;li&amp;gt;&amp;amp;lt;strong&amp;amp;gt;Tempat/Tgl.&amp;nbsp;Lahir:&amp;nbsp;Lipermboh,&amp;nbsp;14&amp;nbsp;September&amp;nbsp;1940&amp;lt;/li&amp;gt; 10. &amp;lt;li&amp;gt;&amp;amp;lt;strong&amp;amp;gt;Pekerjaan:&amp;nbsp;Rocker&amp;nbsp;Jalanan&amp;lt;/li&amp;gt; 11. &amp;lt;li&amp;gt;&amp;amp;lt;strong&amp;amp;gt;Wafat:&amp;nbsp;&amp;nbsp;Tewas&amp;nbsp;tertembak&amp;nbsp;oleh&amp;nbsp;penggemar&amp;nbsp;di&amp;nbsp;depan&amp;nbsp; 12. kandang&amp;nbsp;sapi&amp;nbsp;pada&amp;nbsp;1980&amp;lt;/li&amp;gt; 13. &amp;lt;/ul&amp;gt; 14. &amp;lt;p&amp;gt;Ingin&amp;nbsp;lihat&amp;nbsp;daftar&amp;nbsp;situs&amp;nbsp;favorit&amp;nbsp;saya?&amp;nbsp;&amp;lt;a&amp;nbsp;href="daftar­situs.html" rel="nofollow"&amp;gt; 15. klik&amp;nbsp;disini&amp;lt;/a&amp;nbsp;href="daftar­situs.html"&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&amp;lt;/a&amp;gt;.&amp;lt;p&amp;gt;&amp;lt;/p&amp;gt; 16.&amp;lt;/font&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/body&amp;gt; 17.&amp;lt;/html&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan dengan nama profilku.html 4. Buat file baru lagi, kemudian ketik kode berikut: 1. &amp;lt;html&amp;gt; 2. &amp;lt;head&amp;gt; 3. &amp;lt;title&amp;gt;Daftar&amp;nbsp;situs&amp;nbsp;favorit&amp;nbsp;JSL&amp;lt;/title&amp;gt; 4. &amp;lt;/head&amp;gt; 5. &amp;lt;body&amp;gt; 6. &amp;lt;h2&amp;gt;Daftar&amp;nbsp;Situs&amp;nbsp;favoritku&amp;lt;/h2&amp;gt; 7. &amp;lt;ol&amp;gt; 8. &amp;lt;li&amp;gt;&amp;lt;a&amp;nbsp;target="_blank"&amp;nbsp;href="http: www.google.com " rel="nofollow"&amp;gt;Om&amp;nbsp;Google&amp;lt;/a&amp;nbsp;target="_blank"&amp;nbsp;href="http:&amp;gt;&amp;lt;/li&amp;gt; 9. &amp;lt;li&amp;gt;&amp;lt;a&amp;nbsp;target="_blank"&amp;nbsp;href="http: www.milw0rm.com" rel="nofollow"&amp;gt; 10. Cacing&amp;nbsp;Underground&amp;lt;/a&amp;nbsp;target="_blank"&amp;nbsp;href="http:&amp;gt;&amp;lt;/li&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 4&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 11. &amp;lt;/ol&amp;gt; 12. &amp;lt;p&amp;gt;&amp;lt;a&amp;nbsp;href="profilku.html" rel="nofollow"&amp;gt;Lihat&amp;nbsp;profil&amp;nbsp;lengkap&amp;lt;/a&amp;nbsp;href="profilku.html"&amp;gt;&amp;lt;/p&amp;gt; 13.&amp;lt;/body&amp;gt; 14.&amp;lt;/html&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 5. Simpan dilokasi yang sama dengan profilku.html dan beri nama daftar-situs.html 6. Buka file profilku.html dengan browser anda, dan coba klik link yang ada untuk memahami cara kerjanya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.3 1.5 Membuat Tabel Untuk membuat tabel kita dapat menggunakan tag &amp;lt;table&amp;gt;&amp;lt;/table&amp;gt;. Dalam beberapa tahun terakhir, penggunaan tabel sebagai layout website sudah tidak relevan lagi, dan digantikan oleh tag DIV. Saat ini penggunaan tabel dikhususkan hanya untuk menampilkan data secara tabular saja tidak untuk design halaman. Beberapa tag yang sering digunakan saat membuat tabel adalah: Tag&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Keterangan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;tr&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Digunakan untuk membuat baris baru&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;th&amp;gt;&amp;lt;/th&amp;gt;*&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Digunakan untuk membuat header tabel&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;td&amp;gt;&amp;lt;/td&amp;gt;* Digunakan untuk membuat kolom * Tag tersebut selalu berada didalam tag &amp;lt;tr&amp;gt;...&amp;lt;/tr&amp;gt; Seperti halnya tag lain yang digunakan untuk presentasi teks, seperti &amp;amp;lt;span&amp;amp;gt;, anda dapat menggunakan attribut style untuk memformat tampilan tabel. Berikut ini adalah contoh pembuatan tabel menggunakan HTML. 1. Buka teks editor (gedit/Notepad++) 2. Ketik kode berikut: 1. 2. 3. 4. 5. 6. 7.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;TABEL&amp;nbsp;IPS/IPK&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;h2&amp;gt;Tabel&amp;nbsp;IP&amp;nbsp;Sampai&amp;nbsp;semester&amp;nbsp;4:&amp;lt;/h2&amp;gt; &amp;lt;table&amp;nbsp;style="width:600px;"&amp;nbsp;border="1"&amp;gt; © 2008-2010 Rio Astamal – Hal. 5&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 8. &amp;lt;tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt; 9. &amp;lt;th&amp;gt;SEMESTER&amp;lt;/th&amp;gt; 10. &amp;lt;th&amp;gt;IPS&amp;lt;/th&amp;gt; 11. 12. &amp;lt;tr&amp;gt; 13. &amp;lt;td&amp;gt;SEMESTER&amp;nbsp;1&amp;lt;/td&amp;gt;&amp;lt;td&amp;nbsp;style="text­align:right"&amp;gt;4.0 14. &amp;lt;/td&amp;nbsp;style="text­align:right"&amp;gt;&amp;lt;/tr&amp;gt; 15. &amp;lt;tr&amp;gt; 16. &amp;lt;td&amp;gt;SEMESTER&amp;nbsp;2&amp;lt;/td&amp;gt;&amp;lt;td&amp;nbsp;style="text­align:right"&amp;gt;4.0 17. &amp;lt;/td&amp;nbsp;style="text­align:right"&amp;gt;&amp;lt;/tr&amp;gt; 18. &amp;lt;tr&amp;gt; 19. &amp;lt;td&amp;gt;SEMESTER&amp;nbsp;3&amp;lt;/td&amp;gt;&amp;lt;td&amp;nbsp;style="text­align:right"&amp;gt;4.0 20. &amp;lt;/td&amp;nbsp;style="text­align:right"&amp;gt;&amp;lt;/tr&amp;gt; 21. &amp;lt;tr&amp;gt; 22. &amp;lt;td&amp;gt;SEMESTER&amp;nbsp;4&amp;lt;/td&amp;gt;&amp;lt;td&amp;nbsp;style="text­align:right"&amp;gt;4.0 23. &amp;lt;/td&amp;nbsp;style="text­align:right"&amp;gt;&amp;lt;/tr&amp;gt; 24. &amp;lt;tr&amp;nbsp;style="text­align:right;background­color:#ffcb68;font­weight:bold"&amp;gt; 25. &amp;lt;td&amp;nbsp;style="text­align:center;"&amp;gt;NILAI&amp;nbsp;IPK&amp;nbsp;&amp;amp;gt;&amp;amp;gt;&amp;amp;gt; 26. &amp;lt;td&amp;nbsp;style="text­align:inherit;"&amp;gt;4.0 27. 28. 29.&amp;lt;/td&amp;nbsp;style="text­align:inherit;"&amp;gt;&amp;lt;/td&amp;nbsp;style="text­align:center;"&amp;gt;&amp;lt;/tr&amp;nbsp;style="text­align:right;background­color:#ffcb68;font­weight:bold"&amp;gt;&amp;lt;/tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt;&amp;lt;/table&amp;nbsp;style="width:600px;"&amp;nbsp;border="1"&amp;gt;&amp;lt;/body&amp;gt; 30.&amp;lt;/html&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan denan nama tabel.html 4. Buka dengan browser anda, hasilnya akan nampak seperti gambar 1.4&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.4: Penggunaan Tabel &amp;amp;gt; merupakan special character untuk tanda “&amp;amp;gt;”. Dalam HTML special character diawali tanda ampersand “&amp;amp;amp;” dan diakhiri “;”. Contoh lain adalah &amp;amp;lt; untuk “&amp;amp;lt;”, © untuk “©” 1.6 HTML Form HTML Form sering digunakan untuk meminta inputan dari user yang kemudian diproses oleh server side scripting seperti PHP, JSP, dan sebagainya. Form HTML diapit oleh tag &amp;lt;form&amp;gt;&amp;lt;/form&amp;gt;. Dua attribut yang paling sering digunakan dalam penggunaan form adalah: – Action: Nilai dari attribut ini menunjukkan lokasi dari file pemroses dari form. Dapat berupa relatif URI, contoh “folderX/file.php” atau absolut URI, contoh “http://contoh.com/file.php”. © 2008-2010 Rio Astamal – Hal. 6&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya –&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Method: Nilai dari attribut menentukan metode data yang dikirimkan ke file pemroses, apakah melalui metode “GET” atau “POST”.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Contoh penggunaan tag form sebagai berikut: &amp;lt;form&amp;nbsp;action=”file.php”&amp;nbsp;method=”post”&amp;gt; ... &amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Tag form tidak banyak berguna tanpa adanya tag input lain. Tag form berfungsi hanya sebagai wrapper yang mengelompokkan data yang akan dikirim. Tag yang digunakan bersama tag form adalah tag &amp;lt;input /&amp;gt;. 1.6.1 Macam-macam input Untuk menampilkan textbox, checkbox, radio button, dan lainnya hanya diperlukan tag &amp;lt;input /&amp;gt;. Yang membedakan output dari masing-masing tampilan adalah nilai dari attribut type. Contoh berikut merupakan penggunaan tag input untuk menampilkan textbox: &amp;lt;input&amp;nbsp;type=”text”&amp;nbsp;size=”16”&amp;nbsp;maxlength=”16”&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Berikut ini daftar nilai yang dapat digunakan pada attribut type: Nilai type Keterangan text&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk menampilkan textbox&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; password&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk menampilkan password field&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; file&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk menampilkan proses upload file (mirip seperti textbox namun dengan tombol Browse)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; checkbox&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk menampilkan tombol checkbox (lebih dari satu pilihan)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; radio&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk menampilkan tombol radio/option (hanya satu pilihan)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; submit&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Tombol untuk men-submit form (default button untuk submit)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; button&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; sama dengan submit hanya saja bukan default button&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; reset&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk membersihkan tampilkan form&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; hidden&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Input tidak ditampilkan dibrowser.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Selain tag &amp;lt;input /&amp;gt; masih ada tag lain yang biasa digunakan dalam form yaitu tag &amp;amp;lt;select&amp;amp;gt; dan &amp;lt;textarea&amp;gt;. PENERARAN TEORI HTML FORM 1. Buka gedit / Notedpad++ 2. Ketik kode berikut: 1. 2. 3. 4. 5.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;Registrasi&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 7&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 6. &amp;lt;h2&amp;gt;Form&amp;nbsp;Registrasi&amp;lt;/h2&amp;gt; 7. &amp;lt;form&amp;nbsp;action=""&amp;nbsp;method="post"&amp;gt; 8. &amp;lt;label&amp;gt;Nama:&amp;nbsp;&amp;lt;/label&amp;gt; 9. &amp;lt;input&amp;nbsp;type="text"&amp;nbsp;size="30"&amp;nbsp;name="nama"&amp;gt;&amp;lt;br /&amp;gt; 10. &amp;lt;label&amp;gt;Username:&amp;nbsp;&amp;lt;/label&amp;gt; 11. &amp;lt;input&amp;nbsp;type="text"&amp;nbsp;size="16"&amp;nbsp;name="uname"&amp;nbsp;maxlength="16"&amp;gt;&amp;lt;br /&amp;gt; 12. &amp;lt;label&amp;gt;Password:&amp;nbsp;&amp;lt;/label&amp;gt; 13. &amp;lt;input&amp;nbsp;type="password"&amp;nbsp;size="16"&amp;nbsp;name="pass"&amp;nbsp;maxlength="16"&amp;gt;&amp;lt;br /&amp;gt; 14. &amp;lt;label&amp;gt;Jenis&amp;nbsp;Kelamin:&amp;nbsp;&amp;lt;/label&amp;gt; 15. &amp;lt;input&amp;nbsp;type="radio"&amp;nbsp;name="jk"&amp;nbsp;value="pria"&amp;nbsp;checked&amp;gt;&amp;amp;lt;span&amp;amp;gt;&amp;nbsp;Pria 16. &amp;lt;input&amp;nbsp;type="radio"&amp;nbsp;name="jk"&amp;nbsp;value="wanita"&amp;gt;&amp;amp;lt;span&amp;amp;gt;&amp;nbsp;Wanita 17. &amp;lt;br /&amp;gt; 18. &amp;lt;label&amp;gt;Hoby:&amp;nbsp;&amp;lt;/label&amp;gt;&amp;lt;br /&amp;gt; 19. &amp;lt;input&amp;nbsp;type="checkbox"&amp;nbsp;name="hob"&amp;nbsp;value="spkbola"&amp;gt;&amp;amp;lt;span&amp;amp;gt;&amp;nbsp;Sepak&amp;nbsp;Bola 20. &amp;lt;input&amp;nbsp;type="checkbox"&amp;nbsp;name="hob"&amp;nbsp;value="game"&amp;gt;&amp;amp;lt;span&amp;amp;gt;&amp;nbsp;Game 21. &amp;lt;input&amp;nbsp;type="checkbox"&amp;nbsp;name="hob"&amp;nbsp;value="tidur"&amp;gt;&amp;amp;lt;span&amp;amp;gt;&amp;nbsp;Tidur&amp;lt;br /&amp;gt; 22. &amp;lt;label&amp;gt;Deskripsikan&amp;nbsp;diri&amp;nbsp;anda:&amp;nbsp;&amp;lt;label&amp;gt;&amp;lt;br /&amp;gt; 23. &amp;lt;textarea&amp;nbsp;style="height:100px;width:400px"&amp;nbsp;name="desc"&amp;gt;&amp;lt;/textarea&amp;nbsp;style="height:100px;width:400px"&amp;nbsp;name="desc"&amp;gt;&amp;lt;/label&amp;gt;&amp;lt;/label&amp;gt;&amp;lt;/input&amp;nbsp;type="checkbox"&amp;nbsp;name="hob"&amp;nbsp;value="tidur"&amp;gt;&amp;lt;/input&amp;nbsp;type="checkbox"&amp;nbsp;name="hob"&amp;nbsp;value="game"&amp;gt;&amp;lt;/input&amp;nbsp;type="checkbox"&amp;nbsp;name="hob"&amp;nbsp;value="spkbola"&amp;gt;&amp;lt;/input&amp;nbsp;type="radio"&amp;nbsp;name="jk"&amp;nbsp;value="wanita"&amp;gt;&amp;lt;/input&amp;nbsp;type="radio"&amp;nbsp;name="jk"&amp;nbsp;value="pria"&amp;nbsp;checked&amp;gt;&amp;lt;/input&amp;nbsp;type="password"&amp;nbsp;size="16"&amp;nbsp;name="pass"&amp;nbsp;maxlength="16"&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;size="16"&amp;nbsp;name="uname"&amp;nbsp;maxlength="16"&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;size="30"&amp;nbsp;name="nama"&amp;gt;&amp;lt;/form&amp;nbsp;action=""&amp;nbsp;method="post"&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&amp;lt;/textarea&amp;gt; 24. &amp;lt;hr /&amp;gt;&amp;lt;br /&amp;gt; 25. &amp;lt;label&amp;gt;Darimana&amp;nbsp;anda&amp;nbsp;mendengar&amp;nbsp;kami?&amp;lt;/label&amp;gt;&amp;lt;br /&amp;gt; 26. &amp;amp;lt;select&amp;nbsp;name="dengar"&amp;amp;gt; 27. &amp;lt;option&amp;nbsp;value="kuburan"&amp;gt;Dari&amp;nbsp;dalam&amp;nbsp;kubur 28. &amp;lt;option&amp;nbsp;value="google"&amp;gt;Google 29. &amp;lt;option&amp;nbsp;value="mimpi"&amp;gt;Mimpi 30. &amp;lt;br /&amp;gt; 31. &amp;lt;input&amp;nbsp;type="submit"&amp;nbsp;value="daftar"&amp;gt;&amp;nbsp; 32. &amp;lt;input&amp;nbsp;type="reset"&amp;nbsp;value="reset"&amp;gt; 33. 34. 35.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan dengan nama form.html 4. Buka dengan browser file tersebut. Hasilnya memang tidak begitu bagus karena kita tidak melakukan styling pada form.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.6: Contoh HTML Form Sederhana Dalam kasus real world nilai yang ada pada attribut name dan value-lah yang akan dikirim ke file © 2008-2010 Rio Astamal – Hal. 8&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; pemroses. 1.7 Menampilkan Gambar Untuk menampilkan gambar pada halaman HTML dapat digunakan tag &amp;lt;img /&amp;gt;. Beberapa attribut yang sering digunakan adalah src, height, dan width. Attribut src digunakan untuk menentukan alamat dari gambar yang akan ditampilkan, dapat berupa relatif URI atau absolut URI. Attribut height digunakan untuk menentukan tinggi, sedangkan width untuk menentukan lebar. Secara default nilai yang ada pada height dan width adalah dalam pixel, kecuali anda menambahkan tanda “%”. Maka lebar atau tinggi diukur menggunakan persen. Jika anda tidak menyertakan attribut height dan width, maka gambar tersebut akan ditampilkan sesuai dengan ukuran aslinya. Untuk lebih memahaminya ikuti langkah berikut: 1. 2. 3. 4.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Siapkan dua buah gambar dalam folder yang sama dengan file html Dalam contoh ini saya menggunakan (1)stikom.jpg dan (2)join-revolution.jpg Buka gedit/Notepad++ Ketik kode berikut:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 1. &amp;lt;html&amp;gt; 2. &amp;lt;head&amp;gt; 3. &amp;lt;title&amp;gt;Join&amp;nbsp;The&amp;nbsp;Revolution&amp;lt;/title&amp;gt; 4. &amp;lt;/head&amp;gt; 5. &amp;lt;body&amp;gt; 6. &amp;lt;img&amp;nbsp;src="stikom.jpg"&amp;nbsp;align="left"&amp;gt; 7. &amp;amp;lt;strong&amp;nbsp;style="color:red"&amp;amp;gt;SHOULD 8. &amp;lt;img&amp;nbsp;src="join­revolution.jpg"&amp;nbsp;align="center"&amp;gt; 9. &amp;lt;/img&amp;nbsp;src="join­revolution.jpg"&amp;nbsp;align="center"&amp;gt;&amp;lt;/img&amp;nbsp;src="stikom.jpg"&amp;nbsp;align="left"&amp;gt;&amp;lt;/body&amp;gt; 10.&amp;lt;/html&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 5. Simpan dengan nama gambar.html&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.7: Menampilkan gambar dengan img 1.8 XHTML dan DOCTYPE&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 9&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Apakah XHTML itu? apakah ia berbeda dengan HTML? Sebenarnya XHTML adalah HTML hanya saja XHTML mengikuti format XML sebagai standar penulisannya. Jadi setiap tag harus memiliki penutup. Anda tentu pernah mengetik tag-tag tanpa penutup seperti &amp;lt;br /&amp;gt;, &amp;lt;img /&amp;gt;, dan &amp;lt;input /&amp;gt; pada pembahasan sebelumnya. Pada XHTML semua tag harus memiliki penutup, jika tidak maka halaman yang anda buat tidak sesuai dengan standar yang telah ditentukan dan dianggap tidak valid/compliant dengan standar W3C. Berikut ini adalah beberapa contoh penulisan yang valid di HTML tapi tidak di XHTML. SALAH&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; BENAR&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;strong&amp;amp;gt;&amp;amp;lt;span&amp;amp;gt;Hello&amp;nbsp; World&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;strong&amp;amp;gt;&amp;amp;lt;span&amp;amp;gt;Hello&amp;nbsp; World&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;input&amp;nbsp;type=”radio”&amp;nbsp;checked&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;input&amp;nbsp;type=”radio”&amp;nbsp;checked=”checked”&amp;nbsp;&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;br&amp;nbsp;&amp;gt;&amp;nbsp;atau&amp;nbsp;&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;img&amp;nbsp;border=1&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;img&amp;nbsp;border=”1”&amp;nbsp;&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;input&amp;nbsp;type=”button”&amp;nbsp;value=”go&amp;nbsp;&amp;gt;&amp;amp;gt;&amp;amp;gt;”&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;input&amp;nbsp;type=”button”&amp;nbsp; value="”GO&amp;nbsp;"&amp;gt;&amp;amp;gt;&amp;amp;gt;”&amp;nbsp;/&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;STRONG&amp;amp;gt;Hello&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;strong&amp;amp;gt;Hello&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Mungkin anda bertanya, lalu bagaimana saya memberitahu browser bahwa halaman saya adalah XHTML? Semua itu terletak pada DOCTYPE halaman anda. DOCTYPE adalah pententu tipe document yang ingin anda gunakan apakah HTML 4.01, XHTML 1.0 Transitional, XHTML 1.0 Strict dan lainnya. DOCTYPE juga sering disebut DTD (Document Type Definition). Berikut ini adalah contoh penggunaan tipe dokumen HTML 4.01, &amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Jika anda tidak menyebutkan DTD yang anda gunakan asumsi dari satu browser dengan browser yang lain mungkin berbeda-beda. Jadi jika memang anda ingin menggunakan HTML murni bukan XHTML gunakanlah DTD 4.01. Deklarasi DOCTYPE harus diletakkan paling awal sebelum tag &amp;lt;html&amp;gt;. Untuk XHTML beberapa DTD yang sering digunakan adalah 1. 2. 3.&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Perbedaan Transitional dan Strict terdapat pada toleransi kesalahan. Pada transitional jika masih ada kesalahan standar penulisan masih diberikan toleransi, sedangkan Strict tidak memberikan toleransi sama sekali. Contoh halaman XHTML yang valid adalah sebagai berikut: © 2008-2010 Rio Astamal – Hal. 10&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;nbsp; &amp;nbsp; &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;lt;head&amp;gt;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Every&amp;nbsp;document&amp;nbsp;must&amp;nbsp;have&amp;nbsp;a&amp;nbsp;title&amp;lt;/title&amp;gt;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;lt;/head&amp;gt;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;lt;body&amp;gt;&amp;nbsp; &amp;amp;lt;span&amp;amp;gt;Hello&amp;nbsp;World &amp;nbsp;&amp;nbsp;&amp;lt;/body&amp;gt;&amp;nbsp; &amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Dalam pembahasan selanjutnya kita akan selalu menggunakan XHTML bukan lagi HTML. Deklarasi versi XML pada awal halaman tidak harus ditulis namun sangat dianjurkan untuk ditulis. Attribut “xmlns” harus ditulis untuk menentukan namespace yang digunakan.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 1.9 CSS (Cascading Style Sheets) CSS merupakan suatu teknologi yang digunakan untuk mempermudah pembuatan sebuah website. Dengan CSS kita dapat dengan cepat mengaplikasikan suatu style pada tag tertentu. Bahkan kita dapat meletakkan CSS pada suatu file sehingga dapat digunakan oleh banyak halaman sekaligus. Itu merupakan salah satu kelebihan CSS. CSS diapit oleh tag &amp;amp;lt;style&amp;amp;gt; dan berada diantara tag &amp;lt;head&amp;gt;&amp;lt;/head&amp;gt;. Kelebihan lainnya adalah anda dapat menyisipkan komentar pada CSS, hal ini cukup penting jika jumlah CSS anda sangat banyak. Komentar pada CSS diapit oleh karakter /*&amp;nbsp; */. Pada pembahasan-pembahasan sebelumnya kita sering menggunakan attribut style untuk memformat tampilan atau sering disebut inline style. Apa yang ada pada attribut style tersebut sebenarnya adalah CSS yang valid, hanya saja letaknya didalam tag. Hampir semua tag dapat dimanipulasi menggunakan CSS seperti &amp;lt;body&amp;gt;, &amp;amp;lt;span&amp;amp;gt;, &amp;lt;div&amp;gt;, &amp;lt;table&amp;gt;, &amp;lt;p&amp;gt;, dan masih banyak lagi. Berikut ini adalah contoh sederhana penggunaan CSS pada tag body. body&amp;nbsp;{font­face:&amp;nbsp;Verdana;&amp;nbsp;font­size:&amp;nbsp;11px&amp;nbsp;}&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pada contoh diatas kita memformat semua teks yang ada pada tag body menjadi berjenis huruf Verdana dengan ukuran 11 pixel. Tag body pada contoh disebut selector sedangkan attribut style didalamnya disebut declaration. Declaration ditandai dengan adanya kurung kurawal {...}. Penerapan Teori CSS 1. Buka gedit / Notepad++ 2. Ketik kode berikut: 1. 2. 3. 4. 5. 6.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;nbsp; &amp;nbsp; &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; &amp;lt;head&amp;gt;&amp;nbsp; &amp;lt;title&amp;gt;CSS&amp;nbsp;­&amp;nbsp;Cascading&amp;nbsp;Style&amp;nbsp;Sheets&amp;lt;/title&amp;gt;&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 11&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 7. &amp;amp;lt;style&amp;nbsp;type="text/css"&amp;amp;gt; 8. body&amp;nbsp;{&amp;nbsp;font­family:&amp;nbsp;Verdana,&amp;nbsp;Serif;&amp;nbsp;font­size:&amp;nbsp;11px&amp;nbsp;} 9. div&amp;nbsp;{ 10. border:&amp;nbsp;2px&amp;nbsp;solid&amp;nbsp;#cccccc; 11. padding:&amp;nbsp;4px 12. } 13. h2&amp;nbsp;{&amp;nbsp; 14. text­decoration:&amp;nbsp;underline;&amp;nbsp; 15. font­style:&amp;nbsp;italic; 16. font­size:&amp;nbsp;18px 17. } 18. 19.&amp;lt;/head&amp;gt;&amp;nbsp; 20.&amp;lt;body&amp;gt;&amp;nbsp; 21. &amp;lt;div&amp;gt; 22. &amp;lt;h2&amp;gt;Ini&amp;nbsp;adalah&amp;nbsp;contoh&amp;nbsp;sederhana&amp;nbsp;penggunaan&amp;nbsp;CSS&amp;lt;/h2&amp;gt; 23. &amp;lt;/div&amp;gt; 24.&amp;lt;/body&amp;gt;&amp;nbsp; 25.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan dengan nama css.html 4. Lalu jalankan pada browser, hasilnya akan terlihat seperti gambar 1.8&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.8: Contoh penggunaan CSS Dapat anda lihat bahwa tag yang kita deklarasikan pada CSS secara otomatis style tag tersebut mengikuti aturan CSS yang kita buat. Dengan demikian kita dapat dengan mudah memodifikasi banyak elemen sekaligus hanya dari sebuah baris CSS. 1.9.1 CSS Class dan ID Jika anda cukup kreatif, saya harap memang demikian :) maka anda mungkin berfikir kalau penggunaan cara seperti pembahasan sebelumnya tidak sepenuhnya baik. Mengapa? Bayangkan jika pada beberapa bagian pada halaman, anda tidak ingin mengaplikasikan style tersebut. Lalu apa yang anda lakukan? Merubahnya secara manual lewat inline style? Itu memang dapat dilakukan tapi tidak efisien. Cara yang paling efektif dan efisien adalah dengan menggunakan class dalam CSS. Dengan menggunakan class kita dapat menentukan letak bagian yang harus kita aplikasikan suatu style. Penggunakan class diawali dengan tanda titik “.”. Lihat contoh berikut: .tebal­miring&amp;nbsp;{&amp;nbsp;font­weight:&amp;nbsp;bold;&amp;nbsp;font­style:&amp;nbsp;italic&amp;nbsp;} div.error&amp;nbsp;{&amp;nbsp;color:&amp;nbsp;red;&amp;nbsp;font­weight:&amp;nbsp;bold&amp;nbsp;}&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 12&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Baris pertama merupakan general class karena semua tag dapat menggunakannya. Sedangkan pada baris kedua adalah regular class karena class tersebut hanya berlaku pada tag div saja. Untuk mengaplikasikan style yang ada pada class kita harus memasukkan nama class tersebut pada attribut class. Cara lain adalah dengan menggunakan nilai dari attribut id pada setiap tag. Nilai dari attribut id antara tag yang satu dengan tag yang lain tidak boleh ada yang sama. Tanda yang digunakan bukan titik melainkan tanda pagar “#”. #main&amp;nbsp;{&amp;nbsp;border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#000000&amp;nbsp;} div#header&amp;nbsp;{&amp;nbsp;padding:&amp;nbsp;4px&amp;nbsp;}&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; OK, mari kita buat sebuah file untuk lebih memahaminya. 1. Buka gedit / Notepad++ 2. Ketik kode berikut: 1. &amp;nbsp; 2. &amp;nbsp; 4. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 5. &amp;lt;head&amp;gt;&amp;nbsp; 6. &amp;lt;title&amp;gt;CSS&amp;nbsp;Class&amp;nbsp;&amp;amp;amp;&amp;nbsp;ID&amp;lt;/title&amp;gt;&amp;nbsp; 7. &amp;amp;lt;style&amp;nbsp;type="text/css"&amp;amp;gt; 8. body&amp;nbsp;{&amp;nbsp;font­family:&amp;nbsp;Verdana,&amp;nbsp;Serif;&amp;nbsp;font­size:&amp;nbsp;11px&amp;nbsp;} 9. #main&amp;nbsp;{ 10. border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#cccccc; 11. padding:&amp;nbsp;4px 12. } 13. div.box&amp;nbsp;{ 14. border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;orange; 15. background­color:&amp;nbsp;#FFF8B9; 16. padding:&amp;nbsp;6px&amp;nbsp;3px; 17. color:&amp;nbsp;#c60000; 18. width:&amp;nbsp;200px 19. } 20. .green­force&amp;nbsp;{ 21. font­weight:&amp;nbsp;bold; 22. color:&amp;nbsp;green 23. }&amp;nbsp; 24. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 25.&amp;lt;/head&amp;gt;&amp;nbsp; 26.&amp;lt;body&amp;gt;&amp;nbsp; 27. &amp;lt;div&amp;nbsp;id="main"&amp;gt; 28. &amp;lt;div&amp;nbsp;class="box"&amp;gt; 29. I'm&amp;nbsp;the&amp;nbsp;WalRUS...!!&amp;lt;br&amp;nbsp;&amp;gt;GOO&amp;nbsp;GOO&amp;nbsp;G'JOOB!!! 30. &amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/div&amp;nbsp;class="box"&amp;gt;&amp;lt;/div&amp;nbsp;id="main"&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;/table&amp;gt;&amp;lt;/div&amp;gt; 31. &amp;amp;lt;span&amp;nbsp;class="green­force"&amp;amp;gt;Class&amp;nbsp;green­force&amp;nbsp;pada&amp;nbsp;tag&amp;nbsp;span 32. &amp;lt;p&amp;nbsp;class="green­force"&amp;gt;Class&amp;nbsp;green­force&amp;nbsp;pada&amp;nbsp;tag&amp;nbsp;p&amp;lt;p&amp;gt;&amp;lt;/p&amp;gt; 33. 34.&amp;lt;/p&amp;nbsp;class="green­force"&amp;gt;&amp;lt;/body&amp;gt;&amp;nbsp; 35.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan dengan nama css-class.html 4. Hasilnya akan tampak seperti gambar 1.9 jika anda jalankan pada browser&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 13&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.9 1.9.2 Hyperlink Pseudoclass Jika anda pernah mengunjungi suatu website dan anda menggerakkan mouse anda ke arah sebuah link lalu link tersebut berubah warna dan menjadi bergaris bawah atau sebaliknya. Apa yang anda lihat tersebut adalah hasil dari hyperlink pseudoclass-nya CSS. Seperti yang sudah dibawas sebelumnya untuk membuat link kita menggunakan tag &amp;lt;a&amp;gt;&amp;lt;/a&amp;gt;. Oleh karena itu tag iniliah yang akan kita manipulasi. Format penulisan hyperlink pseudoclass adalah a:nama_aksi, dimana nama_aksi dapat berupa: • • • •&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; link: Tampilan link ketika tidak dipilih oleh user (biasanya tidak perlu ditulis) visited: Tampilan link setelah diklik active:Tampilan ketika link diklik hover: Tampilan ketika mouse melewati link (lebih sering digunakan daripada active)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Penasaran? langsung saja buat file untuk mencobanya. 1. Buka gedit / Notepad++ 2. Ketik kode berikut: 1. &amp;nbsp; 2. &amp;nbsp; 4. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 5. &amp;lt;head&amp;gt;&amp;nbsp; 6. &amp;lt;title&amp;gt;Hyperlink&amp;nbsp;Pseudoclass&amp;lt;/title&amp;gt;&amp;nbsp; 7. &amp;amp;lt;style&amp;nbsp;type="text/css"&amp;amp;gt; 8. body&amp;nbsp;{&amp;nbsp;font­family:&amp;nbsp;Verdana,&amp;nbsp;Serif;&amp;nbsp;font­size:&amp;nbsp;14px&amp;nbsp;} 9. a:link&amp;nbsp;{&amp;nbsp; 10. color:&amp;nbsp;green;&amp;nbsp; 11. text­decoration:&amp;nbsp;underline&amp;nbsp; 12. } 13. a:visited&amp;nbsp;{&amp;nbsp; 14. color:&amp;nbsp;green;&amp;nbsp; 15. text­decoration:&amp;nbsp;underline&amp;nbsp; 16. }&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 17. a:active&amp;nbsp;{ 18. font­weight:&amp;nbsp;bold; 19. text­decoration:&amp;nbsp;none; 20. color:&amp;nbsp;#c60000 21. } 22. a:hover&amp;nbsp;{ 23. font­style:&amp;nbsp;italic;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 14&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 24. font­weight:&amp;nbsp;bold; 25. color:&amp;nbsp;#c60000; 26. text­decoration:&amp;nbsp;none 27. }&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 28. 29.&amp;lt;/head&amp;gt;&amp;nbsp; 30.&amp;lt;body&amp;gt;&amp;nbsp; 31. &amp;lt;div&amp;gt; 32. &amp;lt;a&amp;nbsp;href="#" rel="nofollow"&amp;gt;Link&amp;nbsp;1&amp;lt;br&amp;nbsp;&amp;gt; 33. &amp;lt;a&amp;nbsp;href="#" rel="nofollow"&amp;gt;Link&amp;nbsp;2&amp;lt;br&amp;nbsp;&amp;gt; 34. &amp;lt;a&amp;nbsp;href="#" rel="nofollow"&amp;gt;Link&amp;nbsp;3 35. &amp;lt;/a&amp;nbsp;href="#"&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/a&amp;nbsp;href="#"&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/a&amp;nbsp;href="#"&amp;gt;&amp;lt;/div&amp;gt; 36.&amp;lt;/body&amp;gt;&amp;nbsp; 37.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan dengan nama pseudoclass.html 4. Buka browser anda lalu buka file tersebut&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar: 1.10: Penggunaan pseudoclass link&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 1.9.3 External CSS Sampai saat ini anda sudah tahu bagaimana mudahnya memodifikasi style dengan menggunakan CSS. Agar dalam pembuatan website kita lebih efisien maka sebaiknya kita meletakkan file CSS kita pada suatu file tersendiri. Sehingga kita dapat meload-nya pada halaman yang membutuhkan style yang ada pada file CSS tersebut. File CSS yang akan kita load tidak harus berada satu komputer dengan file HTML kita. File CSS tersebut dapat berada pada website lain, ini dimungkinkan karena kita dapat menggunakan URL pada saat pemanggilan file. Ada dua metode untuk memanggil file CSS, yang pertama adalah dengan menggunakan tag &amp;lt;link /&amp;gt; dan yang kedua adalah menggunakan statement @import didalam CSS. Cara yang lebih sering digunakan adalah menggunakan tag &amp;lt;link /&amp;gt;. Tidak ada yang lebih jelas daripada learning by doing, karena itu langsung saja kita praktikkan. 1. Buka gedit / Notepad++ 2. Ketik kode berikut: 1. 2. 3. 4. 5. 6.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; body&amp;nbsp;{&amp;nbsp;font­family:&amp;nbsp;Verdana,&amp;nbsp;Serif;&amp;nbsp;font­size:&amp;nbsp;14px&amp;nbsp;} #main&amp;nbsp;{ border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#cccccc; padding:&amp;nbsp;4px } div.error&amp;nbsp;{ © 2008-2010 Rio Astamal – Hal. 15&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya 7. 8. 9. 10. 11. 12. 13. 14.}&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#c60000; border­left:&amp;nbsp;5px&amp;nbsp;solid&amp;nbsp;#c60000; color:&amp;nbsp;#c60000; font­size:&amp;nbsp;14px; padding:&amp;nbsp;4px&amp;nbsp;6px; font­weight:&amp;nbsp;bold; width:&amp;nbsp;350px;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan dengan nama my.css 4. Buat file baru lagi, kemudian ketik kode berikut: 1. &amp;nbsp; 2. &amp;nbsp; 4. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 5. &amp;lt;head&amp;gt;&amp;nbsp; 6. &amp;lt;title&amp;gt;External&amp;nbsp;Stylesheet&amp;lt;/title&amp;gt;&amp;nbsp; 7. &amp;lt;link&amp;nbsp;rel="stylesheet"&amp;nbsp;type="text css"&amp;nbsp;href="my.css" &amp;nbsp;&amp;gt; 8. &amp;lt;/link&amp;nbsp;rel="stylesheet"&amp;nbsp;type="text&amp;gt;&amp;lt;/head&amp;gt;&amp;nbsp; 9. &amp;lt;body&amp;gt;&amp;nbsp; 10. &amp;lt;div&amp;nbsp;id="main"&amp;gt; 11. &amp;lt;h2&amp;gt;External&amp;nbsp;Stylesheet/CSS&amp;lt;/h2&amp;gt; 12. &amp;lt;div&amp;nbsp;class="error"&amp;gt; 13. WARNING!,&amp;nbsp;memory&amp;nbsp;otak&amp;nbsp;anda&amp;nbsp;sudah&amp;nbsp;90%&amp;nbsp;penuh&amp;nbsp;silahkan&amp;nbsp;kosongkan&amp;nbsp;pikiran­ 14. pikiran&amp;nbsp;kotor&amp;nbsp;yang&amp;nbsp;tidak&amp;nbsp;diperlukan...!!! 15. 16. 17.&amp;lt;/div&amp;nbsp;class="error"&amp;gt;&amp;lt;/div&amp;nbsp;id="main"&amp;gt;&amp;lt;/body&amp;gt;&amp;nbsp; 18.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 5. Simpan dengan nama external-css.html 6. Jalankan pada browser, hasilnya akan terlihat seperti gambar 1.11&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.11: External stylesheet 1.10 Membuat Layout dengan DIV Seperti yang sudah disinggung pada pembahasan tentang tabel, kalau pembuatan design website yang menggunakan tabel dapat dikatakan sudah tidak relevan lagi. Sebagai pengganti dari tabel adalah tag div. Tag div memang dikhususkan untuk membagi halaman kedalam beberapa segmen. Jika kita gabungkan dengan penggunakan attribut id dan class, maka div dapat kita gunakan untuk layout sebuah halaman.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 16&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Secara kasar setiap halaman yang “baik” pasti memiliki beberapa bagian, misalnya halaman tersebut terdiri dari header, kemudian beberapa kolom untuk content utama, dan sebagainya. Semua itu terserah pada designernya. Pada contoh kasus yang akan kita buat nantinya, kita akan membuat sebuah layout halaman yang terdiri dari: 1. 2. 3. 4. 5.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Header utama halaman 2 Kolom 1 untuk content utama 1 untuk berita atau lainnya lebar halaman tidak lebih dari 800px (untuk berjaga-jaga, karena masih banyak user yang resolusi monitornya 800x600) 6. Footer halaman Design halaman yang akan dibuat tidak melibatkan penggunaan gambar, karena prioritas kita disini hanyalah bagaimana cara mengatur tata letak komponen menggunakan tag div. OK, langsung saja tanpa banyak “mendrible bola”, lho kok? 1. Buka gedit / Notepad++ 2. Ketik kode berikut: 1. *&amp;nbsp;{&amp;nbsp;padding:&amp;nbsp;0;&amp;nbsp;margin:&amp;nbsp;0&amp;nbsp;} 2. body&amp;nbsp;{&amp;nbsp; 3. font­family:&amp;nbsp;Verdana,&amp;nbsp;Arial,&amp;nbsp;Serif;&amp;nbsp; 4. font­size:&amp;nbsp;11px; 5. color:&amp;nbsp;#333; 6. background:&amp;nbsp;#fafafa; 7. } 8. /*&amp;nbsp;pembatas&amp;nbsp;utama&amp;nbsp;*/ 9. #container&amp;nbsp;{ 10. margin:&amp;nbsp;6px&amp;nbsp;auto; 11. text­align:&amp;nbsp;left; 12. clear:&amp;nbsp;both; 13. background:&amp;nbsp;#fff; 14. border:2px&amp;nbsp;solid&amp;nbsp;#666; 15. width:778px; 16. padding:0; 17.} 18.#header&amp;nbsp;{ 19. clear:both; 20. margin:&amp;nbsp;2px; 21. background:&amp;nbsp;#FFEA8C; 22. border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;orange; 23. height:&amp;nbsp;95px; 24.} 25.#header&amp;nbsp;h2&amp;nbsp;{ 26. font­size:&amp;nbsp;2em; 27. font­family:&amp;nbsp;Arial; 28. color:&amp;nbsp;#c60000; 29. margin:&amp;nbsp;14px&amp;nbsp;6px&amp;nbsp;4px&amp;nbsp;8px;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 30.} 31.#menu&amp;nbsp;{ 32. clear:&amp;nbsp;both; 33. padding:&amp;nbsp;0;&amp;nbsp;margin:&amp;nbsp;0&amp;nbsp;0&amp;nbsp;25px&amp;nbsp;2px; 34.} © 2008-2010 Rio Astamal – Hal. 17&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 35.#menu&amp;nbsp;ul&amp;nbsp;{ 36. float:left; 37. border:&amp;nbsp;none; 38. list­style:&amp;nbsp;none; 39. font:&amp;nbsp;bold&amp;nbsp;14px&amp;nbsp;Arial; 40.} 41.#menu&amp;nbsp;ul&amp;nbsp;li&amp;nbsp;{ 42. display:&amp;nbsp;inline; 43.} 44.#menu&amp;nbsp;ul&amp;nbsp;li&amp;nbsp;a&amp;nbsp;{ 45. padding­right:&amp;nbsp;16px; 46. border­bottom:&amp;nbsp;4px&amp;nbsp;solid&amp;nbsp;orange; 47.} 48.#menu&amp;nbsp;ul&amp;nbsp;li&amp;nbsp;a:hover&amp;nbsp;{&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 49. border­bottom:&amp;nbsp;4px&amp;nbsp;solid&amp;nbsp;#c60000; 50.} 51.#menu&amp;nbsp;ul&amp;nbsp;li&amp;nbsp;a.aktif&amp;nbsp;{ 52. border­bottom:&amp;nbsp;4px&amp;nbsp;solid&amp;nbsp;#c60000; 53.} 54.#footer&amp;nbsp;{ 55. position:&amp;nbsp;relative; 56. clear:both; 57. height:&amp;nbsp;40px; 58. border:&amp;nbsp;none; 59. background:&amp;nbsp;#cfcfcf; 60. color:&amp;nbsp;#fff; 61. width:&amp;nbsp;100%; 62. text­align:&amp;nbsp;center;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 63.} 64.#footer&amp;nbsp;span&amp;nbsp;{ 65. top:&amp;nbsp;10px; 66. position:&amp;nbsp;absolute; 67.} 68.#content&amp;nbsp;{ 69. margin:&amp;nbsp;2px&amp;nbsp;2px&amp;nbsp;8px&amp;nbsp;2px; 70. float:&amp;nbsp;left; 71. width:&amp;nbsp;485px; 72. border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#ccc; 73. padding:&amp;nbsp;6px&amp;nbsp;10px; 74.} 75.#content&amp;nbsp;h2&amp;nbsp;{ 76. border­bottom:&amp;nbsp;2px&amp;nbsp;dashed&amp;nbsp;#ccc; 77. margin­bottom:&amp;nbsp;16px; 78.} 79.#side&amp;nbsp;{ 80. border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#ccc; 81. float:&amp;nbsp;right; 82. margin:&amp;nbsp;2px; 83. width:&amp;nbsp;250px; 84. padding:&amp;nbsp;2px; 85.} 86.#side&amp;nbsp;h2&amp;nbsp;{ 87. border­bottom:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#fafafa; 88.} 89.#side&amp;nbsp;h2&amp;nbsp;{ 90. background:&amp;nbsp;#cfcfcf; 91. padding:&amp;nbsp;3px; 92. color:&amp;nbsp;#333; 93. text­align:&amp;nbsp;center; 94.} © 2008-2010 Rio Astamal – Hal. 18&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 95.#side&amp;nbsp;p&amp;nbsp;{ 96. border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#ccc; 97. padding:&amp;nbsp;4px; 98.} 99.a&amp;nbsp;{&amp;nbsp;text­decoration:none;&amp;nbsp;color:&amp;nbsp;#666} 100.a:visited&amp;nbsp;{&amp;nbsp;color:&amp;nbsp;#666&amp;nbsp;}&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 5. Simpan dengan nama layout.css 6. Buat file baru, lanjutkan dengan mengetik kode berikut: 1. &amp;nbsp; 2. &amp;nbsp; 4. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 5. &amp;lt;head&amp;gt;&amp;nbsp; 6. &amp;lt;title&amp;gt;Layout&amp;nbsp;Menggunakan&amp;nbsp;DIV&amp;lt;/title&amp;gt;&amp;nbsp; 7. &amp;lt;link&amp;nbsp;rel="stylesheet"&amp;nbsp;type="text css"&amp;nbsp;href="layout.css" &amp;nbsp;&amp;gt; 8. &amp;lt;/link&amp;nbsp;rel="stylesheet"&amp;nbsp;type="text&amp;gt;&amp;lt;/head&amp;gt;&amp;nbsp; 9. &amp;lt;body&amp;gt;&amp;nbsp; 10. &amp;lt;div&amp;nbsp;id="container"&amp;gt; 11. &amp;lt;div&amp;nbsp;id="header"&amp;gt; 12. &amp;lt;h2&amp;gt;R.I.P&amp;nbsp;John&amp;lt;/h2&amp;gt; 13. 14. &amp;lt;div&amp;nbsp;id="menu"&amp;gt; 15. &amp;lt;ul&amp;gt; 16. &amp;lt;li&amp;gt;&amp;lt;a&amp;nbsp;class="aktif"&amp;nbsp;href="#" rel="nofollow"&amp;gt;Home&amp;lt;/a&amp;nbsp;class="aktif"&amp;nbsp;href="#"&amp;gt;&amp;lt;/li&amp;gt; 17. &amp;lt;li&amp;gt;&amp;lt;a&amp;nbsp;href="#" rel="nofollow"&amp;gt;Books&amp;lt;/a&amp;nbsp;href="#"&amp;gt;&amp;lt;/li&amp;gt; 18. &amp;lt;li&amp;gt;&amp;lt;a&amp;nbsp;href="#" rel="nofollow"&amp;gt;Search&amp;lt;/a&amp;nbsp;href="#"&amp;gt;&amp;lt;/li&amp;gt; 19. &amp;lt;li&amp;gt;&amp;lt;a&amp;nbsp;href="#" rel="nofollow"&amp;gt;About&amp;lt;/a&amp;nbsp;href="#"&amp;gt;&amp;lt;/li&amp;gt; 20. &amp;lt;li&amp;gt;&amp;lt;a&amp;nbsp;href="#" rel="nofollow"&amp;gt;Contact&amp;nbsp;Us&amp;lt;/a&amp;nbsp;href="#"&amp;gt;&amp;lt;/li&amp;gt; 21. &amp;lt;/ul&amp;gt; 22. 23. &amp;lt;div&amp;nbsp;id="content"&amp;gt; 24. &amp;lt;h2&amp;gt;Working&amp;nbsp;Class&amp;nbsp;Hero&amp;lt;/h2&amp;gt; 25. &amp;lt;p&amp;gt;As&amp;nbsp;soon&amp;nbsp;as&amp;nbsp;you're&amp;nbsp;born&amp;nbsp;they&amp;nbsp;make&amp;nbsp;you&amp;nbsp;feel&amp;nbsp;small&amp;lt;br&amp;nbsp;&amp;gt; 26.By&amp;nbsp;giving&amp;nbsp;you&amp;nbsp;no&amp;nbsp;time&amp;nbsp;instead&amp;nbsp;of&amp;nbsp;it&amp;nbsp;all&amp;lt;br&amp;nbsp;&amp;gt; 27.Till&amp;nbsp;the&amp;nbsp;pain&amp;nbsp;is&amp;nbsp;so&amp;nbsp;big&amp;nbsp;you&amp;nbsp;feel&amp;nbsp;nothing&amp;nbsp;at&amp;nbsp;all&amp;lt;br&amp;nbsp;&amp;gt; 28.A&amp;nbsp;working&amp;nbsp;class&amp;nbsp;hero&amp;nbsp;is&amp;nbsp;something&amp;nbsp;to&amp;nbsp;be&amp;lt;br&amp;nbsp;&amp;gt; 29.&amp;lt;br&amp;nbsp;&amp;gt; 30.They&amp;nbsp;hurt&amp;nbsp;you&amp;nbsp;at&amp;nbsp;home&amp;nbsp;and&amp;nbsp;they&amp;nbsp;hit&amp;nbsp;you&amp;nbsp;at&amp;nbsp;school&amp;lt;br&amp;nbsp;&amp;gt; 31.They&amp;nbsp;hated&amp;nbsp;your&amp;nbsp;clever&amp;nbsp;and&amp;nbsp;despised&amp;nbsp;a&amp;nbsp;fool&amp;lt;br&amp;nbsp;&amp;gt; 32.Till&amp;nbsp;you're&amp;nbsp;so&amp;nbsp;fucking&amp;nbsp;crazy&amp;nbsp;you&amp;nbsp;can't&amp;nbsp;follow&amp;nbsp;their&amp;nbsp;rules&amp;lt;br&amp;nbsp;&amp;gt; 33.A&amp;nbsp;working&amp;nbsp;class&amp;nbsp;hero&amp;nbsp;is&amp;nbsp;something&amp;nbsp;to&amp;nbsp;be&amp;lt;br&amp;nbsp;&amp;gt; 34.&amp;lt;br&amp;nbsp;&amp;gt; 35.When&amp;nbsp;they've&amp;nbsp;tortured&amp;nbsp;and&amp;nbsp;scared&amp;nbsp;you&amp;nbsp;for&amp;nbsp;twenty&amp;nbsp;hard&amp;nbsp;years&amp;lt;br&amp;nbsp;&amp;gt; 36.Then&amp;nbsp;they&amp;nbsp;expect&amp;nbsp;you&amp;nbsp;to&amp;nbsp;pick&amp;nbsp;a&amp;nbsp;career&amp;lt;br&amp;nbsp;&amp;gt; 37.When&amp;nbsp;you&amp;nbsp;can't&amp;nbsp;really&amp;nbsp;function&amp;nbsp;you're&amp;nbsp;so&amp;nbsp;full&amp;nbsp;of&amp;nbsp;fear&amp;lt;br&amp;nbsp;&amp;gt; 38.A&amp;nbsp;working&amp;nbsp;class&amp;nbsp;hero&amp;nbsp;is&amp;nbsp;something&amp;nbsp;to&amp;nbsp;be&amp;lt;br&amp;nbsp;&amp;gt; 39.&amp;lt;br&amp;nbsp;&amp;gt; 40.Keep&amp;nbsp;you&amp;nbsp;doped&amp;nbsp;with&amp;nbsp;religion&amp;nbsp;and&amp;nbsp;sex&amp;nbsp;and&amp;nbsp;TV&amp;lt;br&amp;nbsp;&amp;gt; 41.And&amp;nbsp;you&amp;nbsp;think&amp;nbsp;you're&amp;nbsp;so&amp;nbsp;clever&amp;nbsp;and&amp;nbsp;classless&amp;nbsp;and&amp;nbsp;free&amp;lt;br&amp;nbsp;&amp;gt; 42.But&amp;nbsp;you're&amp;nbsp;still&amp;nbsp;fucking&amp;nbsp;peasants&amp;nbsp;as&amp;nbsp;far&amp;nbsp;as&amp;nbsp;I&amp;nbsp;can&amp;nbsp;see&amp;lt;br&amp;nbsp;&amp;gt; 43.A&amp;nbsp;working&amp;nbsp;class&amp;nbsp;hero&amp;nbsp;is&amp;nbsp;something&amp;nbsp;to&amp;nbsp;be&amp;lt;br&amp;nbsp;&amp;gt; 44.A&amp;nbsp;working&amp;nbsp;class&amp;nbsp;hero&amp;nbsp;is&amp;nbsp;something&amp;nbsp;to&amp;nbsp;be&amp;lt;br&amp;nbsp;&amp;gt; 45.&amp;lt;br&amp;nbsp;&amp;gt; 46.There's&amp;nbsp;room&amp;nbsp;at&amp;nbsp;the&amp;nbsp;top&amp;nbsp;they&amp;nbsp;are&amp;nbsp;telling&amp;nbsp;you&amp;nbsp;still&amp;lt;br&amp;nbsp;&amp;gt; 47.But&amp;nbsp;first&amp;nbsp;you&amp;nbsp;must&amp;nbsp;learn&amp;nbsp;how&amp;nbsp;to&amp;nbsp;smile&amp;nbsp;as&amp;nbsp;you&amp;nbsp;kill&amp;lt;br&amp;nbsp;&amp;gt; 48.If&amp;nbsp;you&amp;nbsp;want&amp;nbsp;to&amp;nbsp;be&amp;nbsp;like&amp;nbsp;all&amp;nbsp;the&amp;nbsp;folks&amp;nbsp;on&amp;nbsp;the&amp;nbsp;hill&amp;lt;br&amp;nbsp;&amp;gt; 49.&amp;lt;br&amp;nbsp;&amp;gt; 50.If&amp;nbsp;you&amp;nbsp;want&amp;nbsp;to&amp;nbsp;be&amp;nbsp;a&amp;nbsp;hero&amp;nbsp;well&amp;nbsp;just&amp;nbsp;follow&amp;nbsp;me&amp;nbsp;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 19&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 51. 52. &amp;lt;div&amp;nbsp;id="side"&amp;gt; 53. &amp;lt;h2&amp;gt;IMAGINE...&amp;lt;/h2&amp;gt; 54. &amp;lt;p&amp;gt;Imagine&amp;nbsp;there's&amp;nbsp;no&amp;nbsp;heaven 55.It's&amp;nbsp;easy&amp;nbsp;if&amp;nbsp;you&amp;nbsp;try 56.No&amp;nbsp;hell&amp;nbsp;below&amp;nbsp;us 57.Above&amp;nbsp;us&amp;nbsp;only&amp;nbsp;sky 58.Imagine&amp;nbsp;all&amp;nbsp;the&amp;nbsp;people 59.Living&amp;nbsp;for&amp;nbsp;today... 60.Imagine&amp;nbsp;there's&amp;nbsp;no&amp;nbsp;countries 61.It&amp;nbsp;isn't&amp;nbsp;hard&amp;nbsp;to&amp;nbsp;do 62.Nothing&amp;nbsp;to&amp;nbsp;kill&amp;nbsp;or&amp;nbsp;die&amp;nbsp;for 63.And&amp;nbsp;no&amp;nbsp;religion&amp;nbsp;too 64.Imagine&amp;nbsp;all&amp;nbsp;the&amp;nbsp;people 65.Living&amp;nbsp;life&amp;nbsp;in&amp;nbsp;peace... 66.You&amp;nbsp;may&amp;nbsp;say&amp;nbsp;I'm&amp;nbsp;a&amp;nbsp;dreamer 67.But&amp;nbsp;I'm&amp;nbsp;not&amp;nbsp;the&amp;nbsp;only&amp;nbsp;one 68.I&amp;nbsp;hope&amp;nbsp;someday&amp;nbsp;you'll&amp;nbsp;join&amp;nbsp;us 69.And&amp;nbsp;the&amp;nbsp;world&amp;nbsp;will&amp;nbsp;be&amp;nbsp;as&amp;nbsp;one 70.Imagine&amp;nbsp;no&amp;nbsp;possessions 71.I&amp;nbsp;wonder&amp;nbsp;if&amp;nbsp;you&amp;nbsp;can 72.No&amp;nbsp;need&amp;nbsp;for&amp;nbsp;greed&amp;nbsp;or&amp;nbsp;hunger 73.A&amp;nbsp;brotherhood&amp;nbsp;of&amp;nbsp;man 74.Imagine&amp;nbsp;all&amp;nbsp;the&amp;nbsp;people 75.Sharing&amp;nbsp;all&amp;nbsp;the&amp;nbsp;world... 76.You&amp;nbsp;may&amp;nbsp;say&amp;nbsp;I'm&amp;nbsp;a&amp;nbsp;dreamer 77.But&amp;nbsp;I'm&amp;nbsp;not&amp;nbsp;the&amp;nbsp;only&amp;nbsp;one 78.I&amp;nbsp;hope&amp;nbsp;someday&amp;nbsp;you'll&amp;nbsp;join&amp;nbsp;us 79.And&amp;nbsp;the&amp;nbsp;world&amp;nbsp;will&amp;nbsp;live&amp;nbsp;as&amp;nbsp;one...&amp;lt;/p&amp;gt; 80. 81. &amp;lt;div&amp;nbsp;id="footer"&amp;gt; 82. &amp;amp;lt;span&amp;amp;gt;1940&amp;nbsp;­&amp;nbsp;1980 83. 84. 85.&amp;lt;/div&amp;nbsp;id="footer"&amp;gt;&amp;lt;/div&amp;nbsp;id="side"&amp;gt;&amp;lt;/div&amp;nbsp;id="content"&amp;gt;&amp;lt;/div&amp;nbsp;id="menu"&amp;gt;&amp;lt;/div&amp;nbsp;id="header"&amp;gt;&amp;lt;/div&amp;nbsp;id="container"&amp;gt;&amp;lt;/body&amp;gt;&amp;nbsp; 86.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 20&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.12&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 1.11 Javascript Javascript adalah sebuah bahasa pemrograman yang khusus dirancang untuk website. Javascript hanya berjalan disisi klien, artinya penggunaan javascript hanya terbatas pada web-browser anda saja, ia tidak bisa melakukan manipulasi data pada sisi server. Saat ini javascript merupakan salah satu element terpenting dari teknologi web terkini. AJAX adalah salah satu contoh penggunakan javascript yang saat ini banyak digunakan oleh website agar lebih berasa Web 2.0 :). Namun pada buku ini saya hanya membahas javascript sepintas saja, untuk tahu lebih jauh tentang javascript anda dapat mencari lewat google atau tunggu buku saya berikutnya hehehe... 1.11.1 Menggunakan Javascript Secara sederhana sebuah script javascript diapit oleh tag &amp;amp;lt;script&amp;amp;gt;, namun untuk lebih memperjelas penggunaan javascript biasanya ditambahkan attribut language atau type, contoh seperti berikut: &amp;amp;lt;script&amp;nbsp;language=”javascript”&amp;amp;gt; © 2008-2010 Rio Astamal – Hal. 21&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;nbsp;&amp;nbsp;//&amp;nbsp;javascript&amp;nbsp;kode&amp;nbsp;disini... atau &amp;amp;lt;script&amp;nbsp;type=”text/javascript”&amp;amp;gt; &amp;nbsp;&amp;nbsp;//&amp;nbsp;javascript&amp;nbsp;kode&amp;nbsp;disini... &amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Kenapa demikian? Karena jika anda pengguna browser IE maka ia memiliki satu bahasa lagi selain javascript yaitu vbscript. Namun pada kenyataannya hampir tidak ada situs yang menggunakan vbscript, jadi secara default pun jika anda hanya menggunakan tag &amp;amp;lt;script&amp;amp;gt; maka IE akan menganggap script tersebut adalah javascript. Tag &amp;amp;lt;script&amp;amp;gt; dapat anda letakkan pada level global yaitu pada tag &amp;lt;head&amp;gt;&amp;lt;/head&amp;gt; atau secara lokal dimana pun dalam tag &amp;lt;body&amp;gt;&amp;lt;/body&amp;gt;. OK langsung saja kita coba “script é wong jowo” ini. 1. Buka gedit / Notepad++ 2. Ketik kode berikut: 1. &amp;nbsp; 2. &amp;nbsp; 4. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 5. &amp;lt;head&amp;gt;&amp;nbsp; 6. &amp;lt;title&amp;gt;Menggunakan&amp;nbsp;Javascript&amp;lt;/title&amp;gt;&amp;nbsp; 7. &amp;amp;lt;script&amp;nbsp;language="javascript"&amp;amp;gt; 8. var&amp;nbsp;nama&amp;nbsp;=&amp;nbsp;prompt("Masukkan&amp;nbsp;nama:&amp;nbsp;",&amp;nbsp;"nama&amp;nbsp;anda"); 9. var&amp;nbsp;tanya&amp;nbsp;=&amp;nbsp;confirm(nama+",&amp;nbsp;apakah&amp;nbsp;anda&amp;nbsp;laki­laki?"); 10. if&amp;nbsp;(tanya&amp;nbsp;==&amp;nbsp;true)&amp;nbsp;{ 11. alert("Halo&amp;nbsp;"+nama+"&amp;nbsp;kamu&amp;nbsp;adalah&amp;nbsp;laki­laki!"); 12. }&amp;nbsp;else&amp;nbsp;{ 13. alert("Halooo&amp;nbsp;"+nama+"...&amp;nbsp;kamu&amp;nbsp;cewek&amp;nbsp;ya...?&amp;nbsp;atau&amp;nbsp;jangan­jangan...?"); 14. } 15. 16.&amp;lt;/head&amp;gt;&amp;nbsp; 17.&amp;lt;body&amp;gt; 18.&amp;lt;/body&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 19. 3. Simpan dengan nama javascript.html 4. Jalankan pada browser untuk melihat hasilnya.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.13: Javascript prompt&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 22&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pada contoh diatas kita meletakkan javascript pada level global dengan meletakkannya pada tag &amp;lt;head&amp;gt;&amp;lt;/head&amp;gt;. prompt, confirm, dan alert adalah fungsi-fungsi built in javascript yang dapat kita gunakan untuk berinteraksi dengan user. Jika anda familiar dengan bahasa seperti Java, C++, C, atau anak cucunya maka anda tidak akan terlalu berlama-lama menyesuaikan diri dengan syntax javascript. Hal itu karena syntax javascript sangat mirip dengan ketiga bahasa yang telah disebutkan diatas. Untuk mendeklarasikan variabel pada javascript kita dapat menggunakan keyword var. Javascript versi terbaru sudah mendukung penggunaan tipe data dalam pendeklarasian variabel seperti int, string, dll. Namun untuk menjaga kompatibilitas sebaiknya tetap gunakan keyword var. 1.11.2 Manipulasi DOM Salah satu fungsi utama javascript adalah kemampuannya untuk memanipulasi DOM(Document Object Model). DOM sendiri adalah suatu struktur didalam dokumen HTML yang berbentuk seperti tree yang komponen-komponennya adalah elemen HTML seperti tag. Karena kemampuan inilah maka dengan javascript kita dapat menciptakan DHTML Effect (Dynamic HTML Effect). Salah satu contoh pengaplikasian DHTML Effect adalah hide and show suatu elemen HTML. Misal, jika suatu tombol diklik maka tampilan hilang atau tampil. Semua ini dimungkinkan karena javascript dapat melakukan modifikasi style CSS pada elemen secara langsung atau para geeky lebih suka menyebutnya: on the fly :). Untuk lebih memahaminya sebaiknya kita langsung saja mencobanya lewat contoh. 1. Buka gedit/Notepad++ 2. Ketik kode berikut: 1. &amp;nbsp; 2. &amp;nbsp; 4. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 5. &amp;lt;head&amp;gt;&amp;nbsp; 6. &amp;lt;title&amp;gt;Manipulasi&amp;nbsp;DOM&amp;lt;/title&amp;gt;&amp;nbsp; 7. &amp;amp;lt;script&amp;nbsp;language="javascript"&amp;amp;gt; 8. function&amp;nbsp;beriWarna()&amp;nbsp;{ 9. var&amp;nbsp;kotak&amp;nbsp;=&amp;nbsp;document.getElementById('kotak'); 10. var&amp;nbsp;warna&amp;nbsp;=&amp;nbsp;document.getElementById('warna'); 11. //&amp;nbsp;ganti&amp;nbsp;CSS&amp;nbsp;on&amp;nbsp;the&amp;nbsp;fly 12. kotak.style.backgroundColor&amp;nbsp;=&amp;nbsp;'#'&amp;nbsp;+&amp;nbsp;warna.value; 13. } 14. function&amp;nbsp;hideShow()&amp;nbsp;{ 15. var&amp;nbsp;kotak&amp;nbsp;=&amp;nbsp;document.getElementById('kotak'); 16. var&amp;nbsp;status&amp;nbsp;=&amp;nbsp;kotak.style.display; 17. //&amp;nbsp;set&amp;nbsp;CSS&amp;nbsp;display&amp;nbsp;ke&amp;nbsp;block&amp;nbsp;atau&amp;nbsp;none 18. if&amp;nbsp;(status&amp;nbsp;==&amp;nbsp;'block')&amp;nbsp;{ 19. kotak.style.display&amp;nbsp;=&amp;nbsp;'none'; 20. }&amp;nbsp;else&amp;nbsp;{ 21. kotak.style.display&amp;nbsp;=&amp;nbsp;'block'; 22. } 23. } © 2008-2010 Rio Astamal – Hal. 23&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 24. 25. &amp;amp;lt;style&amp;nbsp;type="text/css"&amp;amp;gt; 26. #kotak&amp;nbsp;{ 27. border:3px&amp;nbsp;solid&amp;nbsp;#000; 28. padding:&amp;nbsp;4px; 29. background­color:&amp;nbsp;#ccc; 30. font­size:&amp;nbsp;18px; 31. font­weight:&amp;nbsp;bold; 32. width:&amp;nbsp;300px;&amp;nbsp;height:&amp;nbsp;200px; 33. } 34. 35.&amp;lt;/head&amp;gt;&amp;nbsp; 36.&amp;lt;body&amp;gt; 37. &amp;lt;form&amp;gt; 38. &amp;lt;label&amp;gt;Warna&amp;lt;/label&amp;gt; 39. #&amp;lt;input&amp;nbsp;type="text"&amp;nbsp;id="warna"&amp;nbsp;name="warna"&amp;nbsp;size="5"&amp;nbsp;value="ccc"&amp;nbsp;&amp;gt;&amp;nbsp; 40. &amp;lt;input&amp;nbsp;type="button"&amp;nbsp;onclick="beriwarna()"&amp;nbsp;value="ganti&amp;nbsp;warna"&amp;nbsp;&amp;gt;&amp;nbsp; 41. &amp;lt;input&amp;nbsp;type="button"&amp;nbsp;onclick="hideshow()"&amp;nbsp;value="hide&amp;nbsp;or&amp;nbsp;show"&amp;nbsp;&amp;gt; 42. &amp;lt;/input&amp;nbsp;type="button"&amp;nbsp;onclick="hideshow()"&amp;nbsp;value="hide&amp;nbsp;or&amp;nbsp;show"&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type="button"&amp;nbsp;onclick="beriwarna()"&amp;nbsp;value="ganti&amp;nbsp;warna"&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;id="warna"&amp;nbsp;name="warna"&amp;nbsp;size="5"&amp;nbsp;value="ccc"&amp;nbsp;&amp;gt;&amp;lt;/form&amp;gt; 43. &amp;lt;br&amp;nbsp;&amp;gt; 44. &amp;lt;div&amp;nbsp;id="kotak"&amp;nbsp;style="display:block"&amp;gt; 45. SAYA&amp;nbsp;BUKAN&amp;nbsp;DUKUN,&amp;nbsp;PESULAP&amp;nbsp;ATAU&amp;nbsp;BAHKAN&amp;nbsp;BUNGLON&amp;nbsp;TAPI&amp;nbsp;SAYA&amp;nbsp;BISA&amp;nbsp;BERUBAH 46.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;WARNA&amp;nbsp;DAN&amp;nbsp;MENGHILANG.&amp;nbsp;HEBATKAH&amp;nbsp;SAYA?&amp;nbsp;TENTU&amp;nbsp;TIDAK.&amp;nbsp;YANG&amp;nbsp;HEBAT&amp;nbsp;ADALAH 47.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;YANG&amp;nbsp;MENULIS&amp;nbsp;SAYA&amp;nbsp;BUKAN&amp;nbsp;BEGITU?&amp;nbsp;:p 48. 49.&amp;lt;/div&amp;nbsp;id="kotak"&amp;nbsp;style="display:block"&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 50. 3. Simpan dengan nama dom.html 4. Buka file menggunakan browser untuk melihat hasilnya. Hasilnya kurang lebih akan sama dengan gambar 1.14. Penjalasan Singkat File dom.html Banyak hal baru menyangkut penggunaan javascript, seperti penggunaan keyword function dan metode getElementById. Jika tidak mengerti untuk sementara telan saja :p karena buku ini memang tidak mengharuskan anda menguasai javascript. Fungsi pada javascript ditandai dengan keyword function. Fungsi merupakan pengemlompokkan sejumlah perintah untuk dieksekusi pada satu waktu ketika fungsi itu dipanggil. Pada contoh kita membuat dua fungsi yaitu beriWarna() dan hideShow(). Object yang akan kita modifikasi stylenya adalah object dengan elemen id bernama “kotak” dalam hal ini elemen tersebut adalah sebuah div. &amp;lt;div&amp;nbsp;id="kotak"&amp;nbsp;style="display:block"&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Agar object div tersebut dapat kita manipulasi maka kita perlu membuatkan sebuah wadah untuk menampung object tersebut dalam javascript. Untuk itu digunakanlah salah satu fungsi DOM yaitu getElementById. Setelah kita mendapatkan object tersebut maka kita bebas untuk memodifikasinya. Contoh sederhana adalah mengubah stylesheet dari object tersebut. Setiap tag yang dapat dimanipulasi dengan CSS memiliki atribut style. Bedanya jika pada CSS format penulisannya: jika terdiri dari dua kata maka dipisah dengan tanda “-” contoh: background-color, font-family, font-size, dan sebagainya. Tapi pada javascript digunakan model Capitalis, contoh: backgroundColor, fontFamily, fontSize dan sebagainya.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 24&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab I – HTML dan World Wide Web&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Warna yang digunakan pada contoh adalah menggunakan hexadecimal. Contoh-contoh warna yang dapat anda gunakan sebagai bahan ujicoba adalah: 90EE90, FFFF00, FFC0CB, dan masih banyak lagi.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 1.14: Manipulasi DOM&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 25&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II – Pengenalan PHP&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II Pengenalan PHP 2.1 Apa Itu PHP? PHP(akronim dari PHP: Hypertext Preprocessor) adalah bahasa server-side scripting yang didesain khusus untuk web. Pada halaman HTML anda dapat menempelkan(embed) kode PHP. Kode PHP dieksekusi di sisi server bukan di komputer klien. Dan hasil yang ditampilkan adalah kode HTML murni. PHP merupakan hasil kerja seorang bernama Rasmus Lerdorf pada awal 1995. Namun kemudian PHP berkembang dan tidak hanya merupakan proyek pribadi Rasmus. PHP ditulis ulang dan dengan banyak menambahkan fungsi-fungsi baru oleh Zeev Suraski dan Andi Gutmants (disingkat Zend) dan lahirlah PHP 3 pada 1998. PHP masih terus dikembangkan, pada tahun 2002 PHP hadir dengan versi ke 4. PHP 4 dilengkapi dengan Zend Engine dan mengalami banyak peningkatan performa. Dan yang paling akhir pada tahun 2005 PHP 5 hadir dengan dukungan Zend Engine 2. Banyak fitur baru khususnya pada OOP(Object Oriented Programming) dan XML Berbeda dengan dengan PHP 4, adopsi PHP 5 dikalangan industri sangat lambat. Bahkan hingga sekarang masih cukup banyak hosting yang belum menyediakan PHP 5. Hal ini dikarenakan beberapa faktor, diantanranya kompatibilitas dengan versi PHP 4. Pada saat buku ini ditulis versi terakhir dari PHP adalah versi 5.2.8 untuk PHP 5 dan versi 4.4.9 untuk PHP 4. PHP 6 juga sudah dikembangkan meskipun dalam tahap alpha. Untuk instalasi PHP silahkan baca halaman pendahuluan.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 2.2 Cara Kerja PHP Cara kerja PHP yang akan kita bahas pada buku ini adalah PHP sebagai bahasa pemrograman untuk mengembangan aplikasi berbasis web. Karena selain untuk web-programming PHP juga dapat digunakan untuk mengembangan aplikasi berbasis desktop dan CLI (Command Line Interface).&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Web Server&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Browser HTML Response&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; PHP Request&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; HTTP Request&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Request PHP File&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; HTTP Response&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; PHP HTML Response&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 2.1: Cara kerja PHP Secara sederhana cara kerja PHP dapat dilihat pada gambar 2.1 diatas. Jika diurut maka proses tersebut terdiri dari: 1. User meminta sebuah halaman PHP 2. Browser mengirim HTTP Request kepada WebServer, misal Apache 3. WebServer mengirim permintaan file PHP tersebut ke PHP processor. PHP processor dapat © 2008-2010 Rio Astamal – Hal. 26&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II – Pengenalan PHP&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; berupa modul(bagian dari web-server) atau terpisah(sebagai CGI/Fast-CGI) 4. Permintaan diproses oleh PHP processor kemudian hasilnya dikirim kembali ke web-server 5. Web server memaket kembali hasil tersebut dengan menambahkan HTTP header dan dikirim kembali ke browser. 6. Browser memproses HTTP packet dan menampilkannya sebagai HTML kepada user. 2.3 Variabel pada PHP Variabel merupakan elemen yang sangat penting dalam bahasa pemrograman. Hampir setiap bahasa pemrograman mengenal apa itu yang namanya variabel. Variabel sendiri merupakan suatu bentuk penyimpanan data sementara pada memori komputer yang akan diolah lebih lanjut. Contoh variabel pada PHP antaran lain: $nama&amp;nbsp;=&amp;nbsp;'LUG&amp;nbsp;STIKOM&amp;nbsp;Surabaya'; $angka_1&amp;nbsp;=&amp;nbsp;1; $angka_2&amp;nbsp;=&amp;nbsp;2; $hasil&amp;nbsp;=&amp;nbsp;$angka_1&amp;nbsp;+&amp;nbsp;$angka_2;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Ketentuan-ketentuan dalam membuat variabel: • Variabel dapat terdiri dari huruf, angka dan underscore( _ ) dan tentu saja tanda dollar $. • Variabel tidak dapat diawali dengan angka. • Variabel bersifat case sensitive artinya membedakan huruf kecil dan huruf besar. • Variabel $nama tidak sama dengan $NaMa. Untuk itu hati-hati dalam penulisan nama variabel. Pada variabel anda dapat mengubah nilainya, contoh $angka_1&amp;nbsp;=&amp;nbsp;1 dapat anda ubah menjadi $angka_1&amp;nbsp;=&amp;nbsp;2 saat suatu script dijalankan. Ini berbeda dengan konstanta(akan dibahas berikutnya). 2.3.1 Tipe Variabel Pada PHP kita tidak perlu mendeklarasikan tipe variabel secara eksplisit, istilah kerennya dynamic typing. Karena PHP secara otomatis dapat menentukan tipe variabel berdasarkan nilai yang ada pada variabel tersebut. Berikut ini adalah beberapa tipe data yang dikudung oleh PHP. Tabel 2.1: Macam-macam Tipe Data TipeData&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Keterangan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Integer&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Digunakan untuk semua angka&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; String&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Digunakan untuk semua huruf, angka, spasi, dan simbol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Double&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Digunakan untuk bilangan real&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Boolean&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Digunakan untuk nilai True atau False&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Digunakan untuk menampung beberapa data sekaligus&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Object&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Digunakan untuk class&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 2.3.2 Konstanta Hampir sama dengan variabel, konstanta juga digunakan untuk penyimpanan nilai sementara. Namun perbedaan konstanta dengan variabel adalah pada konstanta anda tidak dapat mengubah © 2008-2010 Rio Astamal – Hal. 27&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II – Pengenalan PHP&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; nilainya jika sudah dideklarasikan. Cara pendeklarasiannya pun berbeda dengan variabel. Pada konstanta digunakan keyword define untuk mendeklarasikan variabel. Konstanta juga tidak diawali dengan tanda $ (dollar). define('HARGA',&amp;nbsp;1500); define('NAMA',&amp;nbsp;'LUG&amp;nbsp;STIKOM&amp;nbsp;Surabaya');&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Dapat dilihat pada kode diatas bahwa kita selalu gunakan huruf KAPITAL untuk konstanta. Hal ini tidak harus dilakukan namun semacam peraturan tidak tertulis jika konstanta maka sebaiknya gunakan huruf kapital. 2.3.3 Penerapan Teori Variabel dan Konstanta 1. 2. 3. 4.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Jika belum silahkan buat folder bab2 didalam folder htdocs/webpro. Pastikan Apache sudah berjalan. Buka gedit (Linux)/Notepad++ (Windows) Ketik kode berikut:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 1. 3. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 4. &amp;lt;head&amp;gt;&amp;nbsp; 5. &amp;lt;title&amp;gt;Variabel&amp;nbsp;dan&amp;nbsp;Konstanta&amp;lt;/title&amp;gt;&amp;nbsp; 6. &amp;lt;/head&amp;gt;&amp;nbsp; 7. &amp;lt;body&amp;gt; 8. '; 16. echo&amp;nbsp;HARGA; 17.?&amp;amp;gt; 18.&amp;lt;/body&amp;gt; 19.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 5. Simpan dengan nama variabel.php pada folder bab2 6. Arahkan browser anda ke alamat http://localhost/webpro/bab2/variabel.html 7. Output dari file tersebut adalah&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Menu: Nasi Rawon 2500&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Klik kanan browser anda lalu klik View Source (untuk Firefox) untuk melihat kode HTML dari halaman tersebut. Perhatikan bahwa tag yang ada hanyalah kode HTML murni. Penjelasan Script variabel.php Jika anda perhatikan, sama seperti pada bab sebelumnya kita hanya menulis sebuah file html biasa. © 2008-2010 Rio Astamal – Hal. 28&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II – Pengenalan PHP&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Namun ada sedikit perbedaan, dimana pada file variabel.php terdapat sebuah tag baru yaitu . Script dalam tag inilah yang akan diproses oleh PHP processor. Semua tulisan diluar tag akan diabaikan oleh PHP. Cara seperti yang kita lakukan pada file variabel.php adalah menempelkan PHP pada HTML. Jika kumpulan mp3 anda adalah western song mungkin anda lebih suka mendengarnya dengan sebutan embedding PHP inside HTML :). Jika anda masih ingat teori sebelumnya tentang variabel, dapat dilihat bahwa variabel $menu kita deklarasi ulang dan nilainya diubah menjadi 'Menu: Nasi Rawon' (Baris: 12). Namun hal tersebut tidak berlaku pada konstanta, pada baris 13 kita deklarasikan ulang konstanta HARGA. Nilai dari konstanta tersebut tidak berubah. Hal itu ditunjukkan ketika kita mencetak nilai dari $menu dan HARGA. $menu berubah menjadi 'Nasi Rawon' dan konstanta tetap 2500. Pada PHP untuk mencetak sesuatu dapat digunakan perintah echo. Contoh penggunaan dapat dilihat pada baris 15 dan 16. Pada konstanta tidak perlu diberi tanda $. TIPS: Selain perintah echo anda juga dapat menggunakan perintah print untuk mencetak output. 2.4 Komentar Komentar pada script bertujuan untuk memberitahu pembacanya, baik orang lain ataupun anda sendiri. Biasanya komentar digunakan untuk menjelaskan tujuan dituliskannya script tersebut, siapa penulisnya, kapan ditulis dan sebagainya. Komentar juga berguna bagi anda sendiri ketika suatu waktu anda lupa mengapa anda menulis file ini, fungsi-fungsinya untuk apa dan banyak lainnya. PHP akan mengabaikan semua text didalam komentar. Jadi tidak akan berpengaruh pada jalannya suatu script. PHP mengenal tiga jenis gaya komentar. Pertama model bahasa C (banyak baris/multi line), biasanya dapat diletakkan pada bagian atas script. Lihatlah script dibawah ini. 1. &amp;lt;br /&amp;gt; 2. 3. /* 4. Filename&amp;nbsp;:&amp;nbsp;db.php 5. Author&amp;nbsp;&amp;nbsp;&amp;nbsp;:&amp;nbsp;Rio&amp;nbsp;Astamal 6. Created&amp;nbsp;&amp;nbsp;:&amp;nbsp;20­02­2009&amp;nbsp;18:22 7. Updated&amp;nbsp;&amp;nbsp;:&amp;nbsp;22­05­2009&amp;nbsp;16:11 8. Desc&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;:&amp;nbsp;File&amp;nbsp;yang&amp;nbsp;menyimpan&amp;nbsp;konfigurasi&amp;nbsp;untuk&amp;nbsp;koneksi&amp;nbsp;ke&amp;nbsp;MySQL&amp;nbsp;Database 9. */ 10. 11.?&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Yang kedua adalah model C++, seperti yang ditunjukkan dibawah ini. echo&amp;nbsp;$nama;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;cetak&amp;nbsp;nama&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 29&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II – Pengenalan PHP&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Yang ketiga adalah model shell script. echo&amp;nbsp;HARGA;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;#&amp;nbsp;cetak&amp;nbsp;harga&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Sekarang coba modifikasi file variabel.php tersebut dengan menambahkan komentar lalu lihat hasilnya. Apakah masih sama atau tidak. 2.5 Operator Operator merupakan simbol yang dapat digunakan untuk memanipulasi nilai dan variabel. Pada bagian sebelumnya kita sudah menggunakan beberapa operator diantaranya =, ==, &amp;amp;lt;, ., +, * dan lainnya. Selanjutnya kita kan membahas operator-oprator ini dan operator lainnya lebih detil lagi . 2.5.1 Operator Aritmatik Pasti anda sudah banyak mengenal berbagai macam operator aritmatik. Jika anda pernhah mengenyam pendidikan yang bernama Sekolah Dasar atau SD pasti anda sering menulis operatoroperator ini pada buku anda :). Tabel 2.2: Operator Aritmatik Operator&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Nama&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Contoh&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; +&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Penambahan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;+&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ­&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pengurangan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;­&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; *&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Perkalian&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;*&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; /&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pembagian&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;/&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; %&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Modulus&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;%&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Yang mungkin bapak atau Ibu guru SD kita lupa mengajarkan adalah tentang modulus. Modulus merupakan sisa pembagian dari dua bilangan. Lihat contoh berikut untuk lebih jelas. 1. &amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 2.5.2 Operator Kombinasi Saya sendiri bingung menjelaskan operator ini, saya takut kata-kata saya menyesatkan pikiran anda :). Jadi lebih baik kita langsung lihat contoh saja biar lebih jelas. Tabel 2.3: Operator Kombinasi Operator&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Penggunaan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Sama dengan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; +=&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;+=&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;=&amp;nbsp;$a&amp;nbsp;+&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ­=&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;­=&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;=&amp;nbsp;$a&amp;nbsp;­&amp;nbsp;$b&amp;nbsp; © 2008-2010 Rio Astamal – Hal. 30&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II – Pengenalan PHP&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; *=&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;*=&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;=&amp;nbsp;$a&amp;nbsp;*&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; /=&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;/=&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;=&amp;nbsp;$a&amp;nbsp;/&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; %=&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;%=&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;=&amp;nbsp;$a&amp;nbsp;%&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Penggunaan operator kombinasi memang favorit para programmer karena memang mereka ini orang-orang yang cenderung malas. Waduh, saya juga termasuk kelihatannya :). 2.5.3 Operator Perbandingan Operator perbandingan digunakan untuk membandingkan dua nilai. Penggunaan ekspressi ini juga akan menghasilkan nilai true atau false terganting dari perbandingan. Tabel 2.4: Operator perbandingan Operator&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Nama&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Penggunaaan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ==&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; sama&amp;nbsp;dengan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;==&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ===&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; identik&amp;nbsp;(harus&amp;nbsp;bertipe&amp;nbsp;sama)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;===&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; !=&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; tidak&amp;nbsp;sama&amp;nbsp;dengan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;!=&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; tidak&amp;nbsp;sama&amp;nbsp;dengan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;&amp;amp;lt;&amp;amp;gt;&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; kurang&amp;nbsp;dari&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;&amp;amp;lt;&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; lebih&amp;nbsp;dari&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;&amp;amp;gt;&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;lt;=&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; kurang&amp;nbsp;dari&amp;nbsp;atau&amp;nbsp;sama&amp;nbsp;dengan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;&amp;amp;lt;=&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;gt;=&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; lebih&amp;nbsp;dari&amp;nbsp;atau&amp;nbsp;sama&amp;nbsp;dengan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;&amp;amp;gt;=&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Operator perbandingan biasanya digunakan pada struktur kontrol seperti percabangan dan perulangan. 2.5.4 Operator Logika Operator logika digunakan untuk melakukan tes terhadap sebuah kondisi logika dari dua atau lebih perbandingan. Sebagai contoh, kita mungkin menemukan kasus nilai dari variabel $a berada diantara 0 sampai 10. Untuk mengetes kondisi $a &amp;amp;gt;= 0 dan $a &amp;amp;lt;= 10, kita gunakan operator AND. Tabel 2.5: Operator Logika Operator&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Nama&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Penggunaaan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Keterangan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; !&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; NOT&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; !$a&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; TRUE&amp;nbsp;jika&amp;nbsp;$a&amp;nbsp;adalah&amp;nbsp;FALSE,&amp;nbsp;berlaku&amp;nbsp; sebaliknya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ||&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; OR&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;||&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; TRUE&amp;nbsp;jika&amp;nbsp;$a&amp;nbsp;atau&amp;nbsp;$b&amp;nbsp;bernilai&amp;nbsp;TRUE&amp;nbsp;atau&amp;nbsp; keduanya&amp;nbsp;bernilai&amp;nbsp;TRUE&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;amp;amp;&amp;amp;amp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; AND&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;&amp;amp;amp;&amp;amp;amp;&amp;nbsp;$b&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; TRUE&amp;nbsp;jika&amp;nbsp;$a&amp;nbsp;dan&amp;nbsp;$b&amp;nbsp;bernilai&amp;nbsp;TRUE&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; xor&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; XOR&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a&amp;nbsp;xor&amp;nbsp;$b&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; TRUE&amp;nbsp;jika&amp;nbsp;$a&amp;nbsp;atau&amp;nbsp;$b&amp;nbsp;bernilai&amp;nbsp;TRUE,&amp;nbsp; tapi&amp;nbsp;tidak&amp;nbsp;keduanya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 2.5.5 Operator Increment/Decrement Operator increment/decrement digunakan untuk menambah/mengurangai nilai dari suatu variabel dengan satu. Increment memiliki simbol ++ (double plus) sedangkan decrement -- (double minus). © 2008-2010 Rio Astamal – Hal. 31&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II – Pengenalan PHP&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Tabel 2.5: Operator Increment/Decrement Nama&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Contoh&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Keterangan&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pre­Increment&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ++$a&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Tambah&amp;nbsp;$a&amp;nbsp;dengan&amp;nbsp;satu,&amp;nbsp;lalu&amp;nbsp;kembalikan&amp;nbsp;nilainya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Post­Increment&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a++&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Kembalikan&amp;nbsp;nilai&amp;nbsp;$a,&amp;nbsp;lalu&amp;nbsp;tambah&amp;nbsp;$a&amp;nbsp;dengan&amp;nbsp;satu&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pre­Decrement&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ­­$a&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Kurangi&amp;nbsp;$a&amp;nbsp;dengan&amp;nbsp;satu,&amp;nbsp;lalu&amp;nbsp;kembalikan&amp;nbsp;nilainya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Post­Decrement&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $a­­&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Kembalikan&amp;nbsp;nilai&amp;nbsp;$a,&amp;nbsp;lalu&amp;nbsp;kurangi&amp;nbsp;$a&amp;nbsp;dengan&amp;nbsp;satu&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Mungkin akan lebih jelas jika anda melihat contoh dibawah ini. 1. Post­increment"; 4. $a&amp;nbsp;=&amp;nbsp;5; 5. echo&amp;nbsp;"Seharusnya&amp;nbsp;5:&amp;nbsp;"&amp;nbsp;.&amp;nbsp;$a++&amp;nbsp;.&amp;nbsp;"&amp;lt;br&amp;nbsp;&amp;gt;"; 6. echo&amp;nbsp;"Seharusnya&amp;nbsp;6:&amp;nbsp;"&amp;nbsp;.&amp;nbsp;$a&amp;nbsp;.&amp;nbsp;"&amp;lt;br&amp;nbsp;&amp;gt;"; 7. 8. echo&amp;nbsp;"&amp;lt;h3&amp;gt;Pre­increment&amp;lt;/h3&amp;gt;"; 9. $a&amp;nbsp;=&amp;nbsp;5; 10.echo&amp;nbsp;"Seharusnya&amp;nbsp;6:&amp;nbsp;"&amp;nbsp;.&amp;nbsp;++$a&amp;nbsp;.&amp;nbsp;"&amp;lt;br&amp;nbsp;&amp;gt;"; 11.echo&amp;nbsp;"Seharusnya&amp;nbsp;6:&amp;nbsp;"&amp;nbsp;.&amp;nbsp;$a&amp;nbsp;.&amp;nbsp;"&amp;lt;br&amp;nbsp;&amp;gt;"; 12. 13.echo&amp;nbsp;"&amp;lt;h3&amp;gt;Post­decrement&amp;lt;/h3&amp;gt;"; 14.$a&amp;nbsp;=&amp;nbsp;5; 15.echo&amp;nbsp;"Seharusnya&amp;nbsp;5:&amp;nbsp;"&amp;nbsp;.&amp;nbsp;$a­­&amp;nbsp;.&amp;nbsp;"&amp;lt;br&amp;nbsp;&amp;gt;"; 16.echo&amp;nbsp;"Seharusnya&amp;nbsp;4:&amp;nbsp;"&amp;nbsp;.&amp;nbsp;$a&amp;nbsp;.&amp;nbsp;"&amp;lt;br&amp;nbsp;&amp;gt;"; 17. 18.echo&amp;nbsp;"&amp;lt;h3&amp;gt;Pre­decrement&amp;lt;/h3&amp;gt;"; 19.$a&amp;nbsp;=&amp;nbsp;5; 20.echo&amp;nbsp;"Seharusnya&amp;nbsp;4:&amp;nbsp;"&amp;nbsp;.&amp;nbsp;­­$a&amp;nbsp;.&amp;nbsp;"&amp;lt;br&amp;nbsp;&amp;gt;"; 21.echo&amp;nbsp;"Seharusnya&amp;nbsp;4:&amp;nbsp;"&amp;nbsp;.&amp;nbsp;$a&amp;nbsp;.&amp;nbsp;"&amp;lt;br&amp;nbsp;&amp;gt;"; 22. 23.?&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 2.5.6 Operator String Sebenarnya pada contoh-contoh sebelumnya operator string ini sudah sering kita gunakan. Operator string yang dimaksud adalah tanda “.” (titik). Tanda titik ini dapat digunakan untuk menggabung string. 1. &amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 2.6 Escape Character Pada saat menulis kode anda akan sangat sering menjumpai suatu kondisi dimana kita harus mencetak tanda petik baik petik satu maupun petik dua. Permasalahannya tanda tersebut sudah © 2008-2010 Rio Astamal – Hal. 32&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II – Pengenalan PHP&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; digunakan sebagai penanda untuk mencetak string. Lalu, bagaimana pemecahannya? Ada beberapa solusi untuk mencetak petik didalam petik itu sendiri: 1. Gunakan petik satu (') sebagai penutup string jika ingin mencetak petik dua (“) dan sebaliknya. 2. Menggunakan Escape Character \ (backslash) Berikut ini adalah contoh penyelesaian dari kedua solusi diatas. '; $b&amp;nbsp;=&amp;nbsp;"The&amp;nbsp;Girl&amp;nbsp;Says:&amp;nbsp;'Go&amp;nbsp;to&amp;nbsp;Hell...!!!'&amp;lt;br&amp;nbsp;&amp;gt;"; echo&amp;nbsp;$a&amp;nbsp;.&amp;nbsp;$b&amp;nbsp;.&amp;nbsp;'&amp;lt;br&amp;nbsp;&amp;gt;'; /* SOLUSI&amp;nbsp;No.&amp;nbsp;2 ============ ­&amp;nbsp;Gunakan&amp;nbsp;escape&amp;nbsp;character&amp;nbsp;\&amp;nbsp;(backslash) */ $a&amp;nbsp;=&amp;nbsp;"John&amp;nbsp;Says:&amp;nbsp;\"My&amp;nbsp;dear,&amp;nbsp;I&amp;nbsp;Love&amp;nbsp;You.\"&amp;lt;br&amp;nbsp;&amp;gt;"; $b&amp;nbsp;=&amp;nbsp;'The&amp;nbsp;Girl&amp;nbsp;Says:&amp;nbsp;\'Go&amp;nbsp;to&amp;nbsp;Hell...!!!\'&amp;lt;br&amp;nbsp;&amp;gt;'; echo&amp;nbsp;$a&amp;nbsp;.&amp;nbsp;$b; ?&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 2.7 Special Character Pembahasan ini sebenarnya tidak begitu krusial jika dihubungkan dengan pembuatan tampilan web. Namun akan sangat berguna dalam proses pencarian kesalahan ketika kita mendesain suatu halaman website. Bingung? Sama saya juga bingung dengan apa yang saya tulis :p. Pada intinya HTML mengabaikan semua karakter whitespace (spasi, tab, baris baru) dan menggantinya hanya dengan satu spasi ketika ditampilkan. Special character disni mencakup • •&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Baris baru (\n) Tab (\t)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Sebenarnya masih banyak karakter spesial lainnya seperti \r, \0, \b dan lain-lain. Untuk lebih jelasnya cobalah contoh berikut. 1. 2. 3. 4. 5. 6. 7. 8. 9.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; "; echo&amp;nbsp;"INI&amp;nbsp;BARIS&amp;nbsp;SATU&amp;lt;br&amp;nbsp;&amp;gt;"; echo&amp;nbsp;"INI&amp;nbsp;BARIS&amp;nbsp;DUA&amp;lt;br&amp;nbsp;&amp;gt;"; echo&amp;nbsp;"INI&amp;nbsp;BARIS&amp;nbsp;TIGA&amp;lt;br&amp;nbsp;&amp;gt;"; echo&amp;nbsp;"\n\n&amp;lt;br&amp;nbsp;&amp;gt;\n\n"; echo&amp;nbsp;"INI&amp;nbsp;BARIS&amp;nbsp;SATU&amp;lt;br&amp;nbsp;&amp;gt;\nINI&amp;nbsp;BARIS&amp;nbsp;DUA&amp;lt;br&amp;nbsp;&amp;gt;\nINI&amp;nbsp;BARIS&amp;nbsp;TIGA"; © 2008-2010 Rio Astamal – Hal. 33&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab II – Pengenalan PHP&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 10. 11.?&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output dari kode diatas kurang lebih seperti berikut: INI BANYAK SPASI INI BARIS SATU INI BARIS DUA INI BARIS TIGA INI BARIS SATU INI BARIS DUA INI BARIS TIGA Jika dilihat dari browser tidak ada yang berbeda dari group 1 dan group 2 yang ada pada kode diatas. Tapi jika anda melihat source HTML dengan cara klik kanan → View Source (Firefox) akan terlihat perbedaannya.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; TIPS: Untuk mencetak special character seperti \n, \t, \r dan sebagainya harus menggunakan petik dua sebagai penutup string.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 34&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III Struktur Kontrol Struktur Kontrol merupakan sebuah struktur dalam bahasa pemrograman yang membolehkan kita untuk mengontrol alur dari eksekusi suatu program atau script. Struktur kontrol mencakup struktur kondisi dan struktur pengulangan atau looping. Struktur kondisi terdiri dari beberapa statement yaitu: • • • •&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; if... if...else... if...elseif...else... switch...case...break...&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Sedangkan struktur perulangan terdiri dari: • • • •&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; for... while... do...while... foreach...&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3.1 Struktur Kondisi 3.1.1 Statement if... Kita dapat menggunakan statemen if untuk membuat sebuah keputusan. Anda harus memberi if sebuah kondisi untuk membuat keputusan. Jika kondisi bernilai true maka blok if akan dieksekusi. Statemen if dikelilingi oleh tanda { } (kurung kurawal). Syntax dasar penulisan statemen if adalah: if&amp;nbsp;(kondisi)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Jika kondisi bernilai TRUE maka perintah yang ada blok pada { } akan dieksekusi. Perhatikan contoh dibawah. 1. 2. 3. 4. 5. 6. 7. 8.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pada contoh diatas kita menggunakan variabel nama sebagai kondisi, dimana jika nilai variabel $nama sama dengan LUG STIKOM maka blok perintah akan dieksekusi. Ingat, bahwa operator perbandingan untuk sama dengan adalah == bukan =. Contoh lain jika kita menggunakan angka untuk perbandingan adalah: 1. &amp;lt;br /&amp;gt; LUG STIKOM Surabaya 3. 4. 5. 6. 7. 8. 9.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $usia&amp;nbsp;=&amp;nbsp;21; $black_list&amp;nbsp;=&amp;nbsp;FALSE; if&amp;nbsp;($usia&amp;nbsp;&amp;amp;gt;=&amp;nbsp;21&amp;nbsp;&amp;amp;amp;&amp;amp;amp;&amp;nbsp;$black_list&amp;nbsp;==&amp;nbsp;FALSE)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;'OK,&amp;nbsp;anda&amp;nbsp;sudah&amp;nbsp;dewasa.&amp;nbsp;Silahkan&amp;nbsp;masuk.'; } ?&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pada contoh ke dua ini, blok if hanya akan dieksekusi jika nilai dari usia lebih dari atau sama dengan 21 DAN nilai dari black_list sama dengan false. TIPS: Anda dapat meletakkan if di dalam if (if bersarang). Ini juga berlaku terhadap semua struktur kontrol lain.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3.1.2 Statement if...else... Statement ini hampir sama dengan if hanya saja pada if else kita diberikan opsi alternatif untuk menentukan aksi yang dilakukan jika kondisi bernilai false. Statement ini akan sangat sering anda gunakan dibanding penggunakan if saja. Syntax penulisan statement if...else... adalah sebagai berikut: if&amp;nbsp;(kondisi)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi&amp;nbsp;jika&amp;nbsp;kondisi&amp;nbsp;true }&amp;nbsp;else&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi&amp;nbsp;jika&amp;nbsp;kondisi&amp;nbsp;false }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Contoh statement if...else... sederhana dapat anda lihat berikut ini. 1. =&amp;nbsp;3000000)&amp;nbsp;{ 5. &amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;'Pak&amp;nbsp;Toyib:&amp;nbsp;"Nak&amp;nbsp;john,&amp;nbsp;kamu&amp;nbsp;boleh&amp;nbsp;menikahi&amp;nbsp;putri&amp;nbsp;saya&amp;nbsp;:)"'; 6. }&amp;nbsp;else&amp;nbsp;{ 7. &amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;'Pak&amp;nbsp;Toyib:&amp;nbsp;"Mau&amp;nbsp;kamu&amp;nbsp;kasih&amp;nbsp;makan&amp;nbsp;apa&amp;nbsp;putri&amp;nbsp;saya&amp;nbsp;nanti!!!"'; 8. } 9. 10.?&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Alur dari script diatas sudah jelas, dimana jika nilai dari $penghasilan lebih dari 3.000.000 maka john diperbolehkan nikah dengan putrinya Pak Toyib :). Namun jika kurang dari 3.000.000 alamat kena marah Pak Toyib :(. 3.1.3 Statemen if...elseif...else... Jika statemen if...else... hanya dapat menggunakan satu alternatif jika kondisi awal bernilai false. Statemen if...elseif... memberi lebih dari satu aksi alternatif. Hal ini memungkinkan kita untuk memilih aksi dari banyak kemungkinan kondisi. Syntax dasar penulisan if...elseif... adalah sebagai berikut: if&amp;nbsp;(kondisi_1)&amp;nbsp;{ © 2008-2010 Rio Astamal – Hal. 36&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi }&amp;nbsp;elseif&amp;nbsp;(kondisi_2)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi }&amp;nbsp;elseif&amp;nbsp;(kondisi_3)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi }&amp;nbsp;else&amp;nbsp;if&amp;nbsp;(kondisi_4)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi }&amp;nbsp;else&amp;nbsp;{ &amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Anda dapat menulis statement elseif dengan spasi, yaitu else if. Keduanya sama-sama dianggap valid oleh PHP. 3.1.4 Penerapan Teori if...elseif...else... Hal yang paling sering dilakukan oleh PHP sebagai bahasa server-side scripting adalah memproses HTML Form. Pada contoh ini adalah inti awal anda memahami tugas PHP sebagai pemroses HTML Form. Kita akan membuat dua file yang pertama adalah file HTML murni sebagai input data bagi user(HTML Form). Dan file yang kedua adalah file PHP yang bertugas memproses data yang dikirim oleh file HTML . 1. 2. 3. 4. 5.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Jika belum silahkan buat folder bab3 pada folder htdocs/webpro Pastikan Apache sudah berjalan Buka gedit / Notepad++ Simpan file tersebut dengan nama form-toko.html Ketik kode berikut:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 1. &amp;nbsp; 3. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 4. &amp;lt;head&amp;gt; 5. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Pembelian&amp;nbsp;Online&amp;lt;/title&amp;gt; 6. &amp;lt;/head&amp;gt; 7. &amp;lt;body&amp;gt; 8. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;h3&amp;gt;LUG&amp;nbsp;ONLINE&amp;nbsp;STORE&amp;lt;/h3&amp;gt;&amp;lt;hr&amp;nbsp;&amp;gt; 9. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;form&amp;nbsp;action="form­proses.php"&amp;nbsp;method="post"&amp;gt; 10.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;label&amp;gt;Sticker&amp;nbsp;Linux&amp;nbsp;(Rp7.500,­)&amp;lt;/label&amp;gt;&amp;lt;br&amp;nbsp;&amp;gt; 11.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;label&amp;gt;Jumlah:&amp;nbsp;&amp;lt;/label&amp;gt; 12.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;input&amp;nbsp;type="text"&amp;nbsp;name="sticker"&amp;nbsp;value="0"&amp;nbsp;size="4"&amp;nbsp;&amp;gt;&amp;lt;br&amp;nbsp;&amp;gt;&amp;lt;br&amp;nbsp;&amp;gt; 13. 14.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;label&amp;gt;Kaos&amp;nbsp;Linux&amp;nbsp;(Rp35.000,­)&amp;lt;/label&amp;gt;&amp;lt;br&amp;nbsp;&amp;gt; 15.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;label&amp;gt;Jumlah:&amp;nbsp;&amp;lt;/label&amp;gt; 16.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;input&amp;nbsp;type="text"&amp;nbsp;name="kaos"&amp;nbsp;value="0"&amp;nbsp;size="4"&amp;nbsp;&amp;gt;&amp;lt;br&amp;nbsp;&amp;gt;&amp;lt;br&amp;nbsp;&amp;gt; 17. 18.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;label&amp;gt;Jacket&amp;nbsp;Linux&amp;nbsp;(Rp35.000,­)&amp;lt;/label&amp;gt;&amp;lt;br&amp;nbsp;&amp;gt; 19.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;label&amp;gt;Jumlah:&amp;nbsp;&amp;lt;/label&amp;gt; 20.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;input&amp;nbsp;type="text"&amp;nbsp;name="jacket"&amp;nbsp;value="0"&amp;nbsp;size="4"&amp;nbsp;&amp;gt;&amp;lt;br&amp;nbsp;&amp;gt;&amp;lt;br&amp;nbsp;&amp;gt; 21. 22.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;input&amp;nbsp;type="submit"&amp;nbsp;value="p&amp;nbsp;r&amp;nbsp;o&amp;nbsp;s&amp;nbsp;e&amp;nbsp;s"&amp;nbsp;&amp;gt; 23.&amp;nbsp;&amp;nbsp;&amp;nbsp; 24.&amp;lt;/input&amp;nbsp;type="submit"&amp;nbsp;value="p&amp;nbsp;r&amp;nbsp;o&amp;nbsp;s&amp;nbsp;e&amp;nbsp;s"&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;name="jacket"&amp;nbsp;value="0"&amp;nbsp;size="4"&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;name="kaos"&amp;nbsp;value="0"&amp;nbsp;size="4"&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;name="sticker"&amp;nbsp;value="0"&amp;nbsp;size="4"&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/form&amp;nbsp;action="form­proses.php"&amp;nbsp;method="post"&amp;gt;&amp;lt;/hr&amp;nbsp;&amp;gt;&amp;lt;/body&amp;gt; 25.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 6. Save kembali file tersebut 7. Sekarang buat file baru 8. Simpan dengan nama form-proses.php masih difolder yang sama. © 2008-2010 Rio Astamal – Hal. 37&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 9. Ketik kode berikut: 1. =&amp;nbsp;50000&amp;nbsp;&amp;amp;amp;&amp;amp;amp;&amp;nbsp;$total&amp;nbsp;&amp;amp;lt;&amp;nbsp;75000)&amp;nbsp;{&amp;nbsp; 22.&amp;nbsp;&amp;nbsp;&amp;nbsp;$diskon&amp;nbsp;=&amp;nbsp;0.05;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;diskon&amp;nbsp;5% 23.&amp;nbsp;&amp;nbsp;&amp;nbsp;$pesan_diskon&amp;nbsp;=&amp;nbsp;'5%'; 24.}&amp;nbsp;elseif&amp;nbsp;($total&amp;nbsp;&amp;amp;gt;=&amp;nbsp;75000&amp;nbsp;&amp;amp;amp;&amp;amp;amp;&amp;nbsp;$total&amp;nbsp;&amp;amp;lt;&amp;nbsp;100000)&amp;nbsp;{ 25.&amp;nbsp;&amp;nbsp;&amp;nbsp;$diskon&amp;nbsp;=&amp;nbsp;0.1;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;diskon&amp;nbsp;10% 26.&amp;nbsp;&amp;nbsp;&amp;nbsp;$pesan_diskon&amp;nbsp;=&amp;nbsp;'10%'; 27.}&amp;nbsp;elseif&amp;nbsp;($total&amp;nbsp;&amp;amp;gt;=&amp;nbsp;100000)&amp;nbsp;{ 28.&amp;nbsp;&amp;nbsp;&amp;nbsp;$diskon&amp;nbsp;=&amp;nbsp;0.15;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;diskon&amp;nbsp;15% 29.&amp;nbsp;&amp;nbsp;&amp;nbsp;$pesan_diskon&amp;nbsp;=&amp;nbsp;'15%'; 30.} 31.$subtotal&amp;nbsp;=&amp;nbsp;$total&amp;nbsp;­&amp;nbsp;($total&amp;nbsp;*&amp;nbsp;$diskon); 32. 33.?&amp;amp;gt; 34.&amp;nbsp; 36.&amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 37.&amp;lt;head&amp;gt; 38.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Pembelian&amp;nbsp;Online&amp;lt;/title&amp;gt; 39.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;amp;lt;style&amp;nbsp;type="text/css"&amp;amp;gt; 40.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;.tanda&amp;nbsp;{&amp;nbsp;background­color:&amp;nbsp;#cfcfcf;&amp;nbsp;} 41.&amp;nbsp;&amp;nbsp;&amp;nbsp; 42.&amp;lt;/head&amp;gt; 43.&amp;lt;body&amp;gt; 44.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;amp;lt;strong&amp;amp;gt;LUG&amp;nbsp;ONLINE&amp;nbsp;STORE&amp;nbsp;­&amp;nbsp;DATA&amp;nbsp;PEMBELIAN&amp;lt;hr&amp;nbsp;&amp;gt; 45.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;table&amp;nbsp;border="1"&amp;gt; 46.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;class="tanda"&amp;gt; 47.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;th&amp;gt;Barang&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;Jumlah&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;Total&amp;lt;/th&amp;gt; 48.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 49.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 50.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;Sticker&amp;lt;/td&amp;gt; 51.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 52.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt; 53.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt; 54.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 55.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;Kaos&amp;lt;/td&amp;gt; 56.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 57.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt; 58.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt; 59.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 60.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;Jacket&amp;lt;/td&amp;gt; © 2008-2010 Rio Astamal – Hal. 38&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 61.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 62.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt; 63.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt; 64.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;class="tanda"&amp;gt; 65.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;nbsp;colspan="2"&amp;gt;TOTAL 66.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 67.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 68.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;class="tanda"&amp;gt; 69.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;nbsp;colspan="2"&amp;gt;Diskon 70.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 71.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 72.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;class="tanda"&amp;gt; 73.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;nbsp;colspan="2"&amp;gt;SUB­TOTAL 74.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 75.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 76.&amp;nbsp;&amp;nbsp;&amp;nbsp; 77.&amp;lt;/td&amp;nbsp;colspan="2"&amp;gt;&amp;lt;/tr&amp;nbsp;class="tanda"&amp;gt;&amp;lt;/td&amp;nbsp;colspan="2"&amp;gt;&amp;lt;/tr&amp;nbsp;class="tanda"&amp;gt;&amp;lt;/td&amp;nbsp;colspan="2"&amp;gt;&amp;lt;/tr&amp;nbsp;class="tanda"&amp;gt;&amp;lt;/tr&amp;nbsp;class="tanda"&amp;gt;&amp;lt;/table&amp;nbsp;border="1"&amp;gt;&amp;lt;/hr&amp;nbsp;&amp;gt;&amp;lt;/body&amp;gt; 78.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 10. Simpan kembali file tersebut 11. Buka browser anda dan arahkan ke http://localhost/webpro/bab3/form-toko.html 12. Hasilnya terlihat seperti gambar 3.1 dan 3.2&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 3.1&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 3.2&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Penjelasan singkat form-toko.html dan form-proses.php Kita mulai dari file form-toko.html terlebih dulu. Pada file ini yang perlu diperhatikan adalah data yang terletak pada &amp;lt;form&amp;gt; dan &amp;lt;/form&amp;gt;. Perhatikan cuplikan script form berikut: &amp;lt;form&amp;nbsp;action="form­proses.php"&amp;nbsp;method="post"&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Perhatikan nilai dari action, file yang diberi “kehormatan” untuk menjalankan tugas memproses data yang dikirim oleh form adalah file form-proses.php. Letak file tersebut satu folder dengan form-toko.html. Metode yang digunakan adalah POST bukan GET. © 2008-2010 Rio Astamal – Hal. 39&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;input&amp;nbsp;type="text"&amp;nbsp;name="sticker"&amp;nbsp;value="0"&amp;nbsp;size="4"&amp;nbsp;&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Arti dari kode diatas adalah data yang akan kita kirimkan ke file form-proses.php bernama sticker. Jadi pada file form-proses.php kita mengambilnya dengan cara: $sticker&amp;nbsp;=&amp;nbsp;$_POST['sticker'];&amp;nbsp;//&amp;nbsp;data&amp;nbsp;sticker&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Kode diatas berarti kita menangkap data yang dikirim dengan metode post dan data tersebut bernama sticker. Isi dari $_POST harus sama dengan isi dari name pada form. Nama variabel penampung tidak harus sama akan tetapi lebih mudah jika sama dengan data yang di-post. TIPS: PHP tidak memperdulikan tata letak kode anda. Jadi desainlah kode anda senyaman mungkin untuk dibaca.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3.1.5 Statement switch...case...break Sebenarnya statement switch...case...break sama dengan if...elseif... dimana kita dapat memilih lebih dari dua kondisi atau lebih. Selain itu pada switch kita dapat memilih kondisi tidak hanya pada nilai true atau false saja tetapi kita juga dapat memilih dari berbagai tipe lain seperti integer, boolean, string dan lain-lain. Syntax penulisan statement switch adalah sebagai berikut. switch&amp;nbsp;($kondisi)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;case&amp;nbsp;kondisi_1: &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi &amp;nbsp;&amp;nbsp;break; &amp;nbsp;&amp;nbsp;case&amp;nbsp;kondisi_2: &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi &amp;nbsp;&amp;nbsp;break; &amp;nbsp;&amp;nbsp;case&amp;nbsp;kondisi_3: &amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi &amp;nbsp;&amp;nbsp;break; &amp;nbsp;&amp;nbsp;default: &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi&amp;nbsp;jika&amp;nbsp;tidak&amp;nbsp;ada&amp;nbsp;yang&amp;nbsp;memenuhi &amp;nbsp;&amp;nbsp;break; }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Block default pada switch sama dengan else pada statement if...elseif...else.... Yaitu blok yang akan dieksekusi jika semua kondisi tidak terpenuhi. Sebagai contoh anda dapat mengganti kode pada form-proses.php baris 21 – 30 dengan kode berikut: 21.switch&amp;nbsp;($total)&amp;nbsp;{ 22.&amp;nbsp;&amp;nbsp;&amp;nbsp;case&amp;nbsp;$total&amp;nbsp;&amp;amp;gt;=&amp;nbsp;50000&amp;nbsp;&amp;amp;amp;&amp;amp;amp;&amp;nbsp;$total&amp;nbsp;&amp;amp;lt;&amp;nbsp;75000: 23.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$diskon&amp;nbsp;=&amp;nbsp;0.05;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;diskon&amp;nbsp;5% 24.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$pesan_diskon&amp;nbsp;=&amp;nbsp;'5%'; 25.&amp;nbsp;&amp;nbsp;&amp;nbsp;break; 26.&amp;nbsp;&amp;nbsp;&amp;nbsp;case&amp;nbsp;$total&amp;nbsp;&amp;amp;gt;=&amp;nbsp;75000&amp;nbsp;&amp;amp;amp;&amp;amp;amp;&amp;nbsp;$total&amp;nbsp;&amp;amp;lt;&amp;nbsp;100000: 27.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$diskon&amp;nbsp;=&amp;nbsp;0.05;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;diskon&amp;nbsp;5% 28.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$pesan_diskon&amp;nbsp;=&amp;nbsp;'5%'; 29.&amp;nbsp;&amp;nbsp;&amp;nbsp;break; 30.&amp;nbsp;&amp;nbsp;&amp;nbsp;case&amp;nbsp;$total&amp;nbsp;&amp;amp;gt;=&amp;nbsp;100000; 31.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$diskon&amp;nbsp;=&amp;nbsp;0.05;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;diskon&amp;nbsp;5% 32.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$pesan_diskon&amp;nbsp;=&amp;nbsp;'5%'; © 2008-2010 Rio Astamal – Hal. 40&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 33.&amp;nbsp;&amp;nbsp;&amp;nbsp;break; 34.}&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3.2 Struktur Perulangan (Looping) Salah satu kelebihan komputer adalah melakukan pekerjaan selama berulang-ulang tanpa rasa bosan sedikit pun. Berbeda dengan manusia, tidak dapat dibayangkan jika komputer tiba-tiba bosan ketika menjalankan perintah :D. Dalam pemrograman perulangan atau looping adalah eksekusi suatu blok kode selama suatu kondisi looping masih terpenuhi. Ini berbeda dengan struktur kontrol yang hanya mengeksekusi blok kode satu kali saja. Agar pengertian looping mudah dicerna, seperti makanan saja dicerna :p, kita akan membuat sebuah file HTML static yang kemudian akan kita buat duplikatnya tetapi menggunakan loop. 1. 2. 3. 4.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka gedit / Notepad++ Buat file baru Simpan dengan nama bensin.html letakkan pada folder htdocs/webpro/bab3 Ketik kode berikut:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 1. &amp;nbsp; 3. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 4. &amp;lt;head&amp;gt; 5. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Bensin&amp;nbsp;Static&amp;lt;/title&amp;gt; 6. &amp;lt;/head&amp;gt; 7. &amp;lt;body&amp;gt; 8. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;table&amp;nbsp;cellpadding="4"&amp;gt; 9. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt; 10.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;th&amp;gt;Bensin&amp;nbsp;(Liter)&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;Harga&amp;nbsp;(Rp)&amp;lt;/th&amp;gt; 11.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 12.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 13.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;5&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;22500&amp;lt;/td&amp;gt; 14.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/tr&amp;gt; 15.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 16.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;10&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;45000&amp;lt;/td&amp;gt; 17.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/tr&amp;gt; 18.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 19.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;15&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;67500&amp;lt;/td&amp;gt; 20.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/tr&amp;gt; 21.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 22.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;20&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;90000&amp;lt;/td&amp;gt; 23.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/tr&amp;gt; 24.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 25.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;25&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;112500&amp;lt;/td&amp;gt; 26.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/tr&amp;gt; 27.&amp;nbsp;&amp;nbsp;&amp;nbsp; 28.&amp;lt;/tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt;&amp;lt;/table&amp;nbsp;cellpadding="4"&amp;gt;&amp;lt;/body&amp;gt; 29.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 6. Save kembali file bensin.html 7. Buka file tersebut pada browser, http://localhost/webpro/bab3/bensin.html 8. Hasilnya akan terlihat seperti gambar 3.3&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 41&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 3.3 3.2.1 Statement for... Bentuk perulangan pertama yang akan kita bahas adalah perulangan dengan for. Bentuk penulisan looping for adalah sebagai berikut. for&amp;nbsp;(ekspresi1;&amp;nbsp;kondisi;&amp;nbsp;ekspresi2)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;akan&amp;nbsp;dieksekusi }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Keterangan: • ekspresi1: dieksekusi satu kali saat loop mulai dieksekusi, biasanya untuk inisialisasi variabel counter • kondisi: dicek setiap loop apakah kondisi masih true, jika ya maka blok kode tetap dieksekusi, berlaku sebaliknya jika false • ekspresi2: dieksekusi setiap akhir loop, disini biasanya digunakan untuk mengubah nilai variabel counter 3.2.2 Penerapan Teori for... Seperti yang pernah disinggung sebelumnya, bahwa kita akan kan menduplikasi file bensin.html tetapi dengan menggunakan perulangan, dalam hal ini kita gunakan for. 1. 2. 3. 4. 1. 2. 3. 4. 5. 6. 7. 8. 9.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka gedit/Notepad++ Buat file baru Simpan dengan nama bensin_for.php pada folder htdocs/webpro/bab3 Ketik kode berikut:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;nbsp; &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; &amp;lt;head&amp;gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Bensin&amp;nbsp;For&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;table&amp;nbsp;cellpadding="4"&amp;gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt; © 2008-2010 Rio Astamal – Hal. 42&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 10.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;th&amp;gt;Bensin&amp;nbsp;(Liter)&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;Harga&amp;nbsp;(Rp)&amp;lt;/th&amp;gt; 11.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 12.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;\n"; 18.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;"&amp;lt;td&amp;gt;$liter&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;"&amp;nbsp;.&amp;nbsp;($harga&amp;nbsp;*&amp;nbsp;$liter)&amp;nbsp;.&amp;nbsp;"&amp;lt;/td&amp;gt;\n"; 19.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;"\n"; 20.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;} 21.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;?&amp;amp;gt; 22.&amp;nbsp;&amp;nbsp;&amp;nbsp; 23.&amp;lt;/tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt;&amp;lt;/table&amp;nbsp;cellpadding="4"&amp;gt;&amp;lt;/body&amp;gt; 24.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 6. Simpan kembali file bensin_for.php 7. Arahkan browser anda ke http://localhost/webpro/bab3/bensin_for.php 8. Hasilnya akan sama persis seperti gambar 3.3 Penjelasan Singkat File bensin_for.php Nilai variabel $liter awal kita set 5, kondisi yang ingin cek adalah jika $liter &amp;amp;lt;= 25. Selama masih terpenuhi(kondisi true) maka blok kode akan tetap dieksekusi. Setiap selesai eksekusi nilai dari variabel counter yaitu $liter kita tambah dengan 5. Looping akan berhenti jika sudah mencapai step 6. Karena pada saat itu nilai $liter sudah mencapai 30 dan itu tidak memenuhi syarat kondisi dimana $liter &amp;amp;lt;= 25. 3.2.3 Statement while... Berbeda dengan for pada while kita tidak bisa meletakkan inisialisasi variabel, kondisi, dan counter pada satu baris saja. Syntax penulisan while adalah sebagai berikut. while&amp;nbsp;(kondisi)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;blok&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Jadi selama kondisi masih true maka blok kode akan terus dieksekusi. While biasa digunakan jika kita tidak tahu batas akhir kapan suatu perulangan harus dihentikan. 3.2.4 Penerapan Teori while... Kita masih tetap menggunakan file bensin.html sebagai acuan output yang akan diselesaikan menggunakan while. 1. 2. 3. 4.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka gedit / Notepad++ Buat file baru Simpan dengan nama bensin_while.php pada folder htdocs/webpro/bab3 Ketik kode berikut:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 1. &amp;nbsp; 3. &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; © 2008-2010 Rio Astamal – Hal. 43&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4. &amp;lt;head&amp;gt; 5. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Bensin&amp;nbsp;While&amp;lt;/title&amp;gt; 6. &amp;lt;/head&amp;gt; 7. &amp;lt;body&amp;gt; 8. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;table&amp;nbsp;cellpadding="4"&amp;gt; 9. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt; 10.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;th&amp;gt;Bensin&amp;nbsp;(Liter)&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;Harga&amp;nbsp;(Rp)&amp;lt;/th&amp;gt; 11.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 12.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;\n"; 19.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;"&amp;lt;td&amp;gt;$liter&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;"&amp;nbsp;.&amp;nbsp;($harga&amp;nbsp;*&amp;nbsp;$liter)&amp;nbsp;.&amp;nbsp;"&amp;lt;/td&amp;gt;\n"; 20.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;"\n"; 21.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$liter&amp;nbsp;+=&amp;nbsp;5;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;tambah&amp;nbsp;counter 22.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;} 23.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;?&amp;amp;gt; 24.&amp;nbsp;&amp;nbsp;&amp;nbsp; 25.&amp;lt;/tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt;&amp;lt;/table&amp;nbsp;cellpadding="4"&amp;gt;&amp;lt;/body&amp;gt; 26.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 5. Simpan kembali file tersebut 6. Coba lihat hasilnya, http://localhost/webpro/bab3/bensin_while.php 7. Hasilnya akan terlihat seperti gambar 3.3 sebelumnya 3.2.5 Statement do...while Berbede dengan dua loop sebelumnya, dimana pada for dan while pengecekan kondisi dilakukan pada awal sebelum blok kode dieksekusi. Pada do...while pengecekan dilakukan diakhir eksekusi kode. Jadi setidak-tidaknya blok kode do...while pasti dieksekusi minimal satu kali. Syntax dasar dari do...while adalah sebagai berikut. do&amp;nbsp;{&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;dieksekusi }&amp;nbsp;while&amp;nbsp;(kondisi)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Blok kode do akan dieksekusi selama kondisi while masih bernilai true. 3.2.6 Penerapan Teori do...while 1. 2. 3. 4. 1. 2. 3. 4. 5. 6. 7. 8.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka gedit / Notepad++ Buat file baru Simpan dengan nama bensin_do_while.php pada folder htdocs/webpro/bab3 Ketik kode berikut:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;nbsp; &amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;Bensin&amp;nbsp;Do&amp;nbsp;While&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;table&amp;nbsp;cellpadding="4"&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 44&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab III – Struktur Kontrol&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 9. &amp;lt;tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt; 10. &amp;lt;th&amp;gt;Bensin&amp;nbsp;(Liter)&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;Harga&amp;nbsp;(Rp)&amp;lt;/th&amp;gt; 11. 12. \n"; 19. echo&amp;nbsp;"&amp;lt;td&amp;gt;$liter&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;"&amp;nbsp;.&amp;nbsp;($harga&amp;nbsp;*&amp;nbsp;$liter)&amp;nbsp;.&amp;nbsp;"&amp;lt;/td&amp;gt;\n"; 20. echo&amp;nbsp;"\n"; 21. $liter&amp;nbsp;+=&amp;nbsp;5;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;tambah&amp;nbsp;counter 22. }&amp;nbsp;while&amp;nbsp;($liter&amp;nbsp;&amp;amp;lt;=&amp;nbsp;25) 23. ?&amp;amp;gt; 24. 25.&amp;lt;/tr&amp;nbsp;style="background­color:#cfcfcf"&amp;gt;&amp;lt;/table&amp;nbsp;cellpadding="4"&amp;gt;&amp;lt;/body&amp;gt; 26.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 5. Simpan kembali file tersebut 6. Arahkan browser ke http://localhost/webpro/bab3/bensin_while.php untuk melihat hasilnya Jika anda masih penasaran dengan kata-kata “minimal dieksekusi satu kali” coba ganti nilai $liter dari 5 menjadi 30 saat inisialisasi. Kode pasti akan dieksekusi satu kali kemudian selesai. Hal ini tidak berlaku untuk for dan while. Jika ditanya kapan kita menggunakan do...while, susah juga jawabnya. Yang jelas secara naluri nanti anda akan menggunakannya tanpa disuruh-suruh orang lain :p. TIPS: Looping for biasa digunakan jika kita telah mengetahui batas awal dan akhir dari suatu perulangan.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk sementara kita tidak menbahas dulu foreach karena loop ini didesain khusus untuk penggunaan didalam array. Jadi pembahasan foreach akan kita lakukan saat membahas tentang array.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 45&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV File dan Array 4.1 Berinteraksi dengan File File merupakan salah satu aspek penting dalam sebuah aplikasi. Seringkali sebuah file dibuat untuk berbagai tujuan misalnya, menyimpan konfigurasi, temporary file, cache dan masih banyak lagi. Interaksi PHP dengan file sangat mirip dengan bahasa C. Proses umum yang dilakukan adalah: • • •&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Membuat resource dengan perintah fopen() Menulis(fwrite())/membaca file Menutup file fclose()&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4.1.1 Menyimpan File Dibanding dengan penyimpanan pada database penyimpanan pada file relatif sederhana. Namun memiliki banyak kekurangan terutama jika menyangkut masalah keamanan dan kecepatan akses data. Pada PHP langkah-langkah untuk menyimpan sebuah file adalah: • • •&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Membuka file dengan fopen() Menulis file dengan fwrite() Menutup file dengan fclose()&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; fopen() minimal memerlukan dua parameter yaitu 1) string nama file dan 2) string mode. Yang perlu diperhatikan disini adalah mode dari file. Syntax yang digunakan adalah: Parameter 1 fopen(&amp;nbsp;“string_nama_file”,&amp;nbsp;“string_mode”&amp;nbsp;);&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Parameter 2 Mode yang dapat digunakan pada fopen adalah: Mode Deskripsi 'r'&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka file hanya untuk baca saja; pointer file diletakkan diawal file.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 'r+'&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka file untuk baca dan tulis; ponter file diletakkan diawal file.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 'w'&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka file untuk tulis saja; pointer diletakkan diawal file lalu truncate(overwrite); jika file tidak ada, buat file tersebut.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 'w+'&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka file untuk baca dan tulis; pointer diletakkan diawal file lalu truncate(overwrite); jika file tidak ada, buat file tersebut.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 'a'&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka file untuk tulis saja; pointer diletakkan diakhir file(append); jika file tidak ada, buat file tersebut.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 'a+'&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Buka file untuk baca dan tulis; pointer diletakkan diakhir file(append); jika file tidak ada, buat file tersebut.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 46&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; TIPS: Agar kompatibel antar sistem operasi yang memiliki “ending line” yang berbeda Linux (\n), MacOS(\r), dan Windows(\r\n) tambahkan opsi 'b', misal 'wb'. (b = binary mode)&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Kita akan menggunakan contoh form-toko.html yang terdapat pada bab 3. Format penyimpanan yang kita gunakan adalah: jml_kaos Sticker -#- harga_kaos -#- jml_kaos Kaos-#- harga_kaos -#- jml_jacket Jacket -#harga_jacket -#- total -#- diskon -#- sub-total OK, langsung aja kita coba untuk menulis file. 4.1.3 Penerapan Teori Penyimpanan File Sebelum memulai pastikan anda sudah membuat folder baru di direktori htdocs/webpro anda dengan nama bab4. Kita akan menyimpan file tersebut didalam folder bab4 dengan nama faktur.txt. Ikuti langkah-langkah berikut: 1. Copy file form-toko.html dan form-proses dari folder bab3 ke bab4 2. Modifikasi file form-proses.php(pada bab4) agar menampilkan link ke halaman faktur. 1.&amp;nbsp;=&amp;nbsp;50000&amp;nbsp;&amp;amp;amp;&amp;amp;amp;&amp;nbsp;$total&amp;nbsp;&amp;amp;lt;&amp;nbsp;75000)&amp;nbsp;{&amp;nbsp; 17.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$diskon&amp;nbsp;=&amp;nbsp;0.05;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;diskon&amp;nbsp;5% 18.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$pesan_diskon&amp;nbsp;=&amp;nbsp;'5%'; 19.&amp;nbsp;}&amp;nbsp;elseif&amp;nbsp;($total&amp;nbsp;&amp;amp;gt;=&amp;nbsp;75000&amp;nbsp;&amp;amp;amp;&amp;amp;amp;&amp;nbsp;$total&amp;nbsp;&amp;amp;lt;&amp;nbsp;100000)&amp;nbsp;{ 20.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$diskon&amp;nbsp;=&amp;nbsp;0.1;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;diskon&amp;nbsp;10% 21.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$pesan_diskon&amp;nbsp;=&amp;nbsp;'10%'; 22.&amp;nbsp;}&amp;nbsp;elseif&amp;nbsp;($total&amp;nbsp;&amp;amp;gt;=&amp;nbsp;100000)&amp;nbsp;{ 23.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$diskon&amp;nbsp;=&amp;nbsp;0.15;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;diskon&amp;nbsp;15% 24.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$pesan_diskon&amp;nbsp;=&amp;nbsp;'15%'; 25.&amp;nbsp;} 26.&amp;nbsp;$subtotal&amp;nbsp;=&amp;nbsp;$total&amp;nbsp;­&amp;nbsp;($total&amp;nbsp;*&amp;nbsp;$diskon); 27.&amp;nbsp;//&amp;nbsp;tulis&amp;nbsp;ke&amp;nbsp;file,&amp;nbsp;mode&amp;nbsp;yang&amp;nbsp;digunakan&amp;nbsp;adalah&amp;nbsp;'a'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;append 28.&amp;nbsp;//&amp;nbsp;file&amp;nbsp;faktur.txt&amp;nbsp;akan&amp;nbsp;dibuat&amp;nbsp;otomatis&amp;nbsp;jika&amp;nbsp;belum&amp;nbsp;ada 29.&amp;nbsp;$fp&amp;nbsp;=&amp;nbsp;fopen('faktur.txt',&amp;nbsp;'a'); 30.&amp;nbsp;$isi_file&amp;nbsp;=&amp;nbsp;"$sticker&amp;nbsp;Sticker&amp;nbsp;­#­&amp;nbsp;"&amp;nbsp;.&amp;nbsp;(HARGA_STICKER&amp;nbsp;*&amp;nbsp;$sticker)&amp;nbsp;.&amp;nbsp;"&amp;nbsp;­#­&amp;nbsp;"&amp;nbsp;. 31.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;"$kaos&amp;nbsp;Kaos&amp;nbsp;­#­&amp;nbsp;"&amp;nbsp;.&amp;nbsp;(HARGA_KAOS&amp;nbsp;*&amp;nbsp;$kaos)&amp;nbsp;.&amp;nbsp;"&amp;nbsp;­#­&amp;nbsp;"&amp;nbsp;. 32.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;"$jacket&amp;nbsp;Jacket&amp;nbsp;­#­&amp;nbsp;"&amp;nbsp;.&amp;nbsp;(HARGA_JACKET&amp;nbsp;*&amp;nbsp;$jacket)&amp;nbsp;.&amp;nbsp;"&amp;nbsp;­#­&amp;nbsp;"&amp;nbsp;. 33.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;"$total&amp;nbsp;­#­&amp;nbsp;$pesan_diskon&amp;nbsp;­#­&amp;nbsp;$subtotal\n"; 34.&amp;nbsp;fwrite($fp,&amp;nbsp;$isi_file); 35.&amp;nbsp;fclose($fp); © 2008-2010 Rio Astamal – Hal. 47&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 36.&amp;nbsp;?&amp;amp;gt; 37.&amp;nbsp;&amp;nbsp; 39.&amp;nbsp;&amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 40.&amp;nbsp;&amp;lt;head&amp;gt; 41.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Pembelian&amp;nbsp;Online&amp;lt;/title&amp;gt; 42.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;amp;lt;style&amp;nbsp;type="text/css"&amp;amp;gt; 43.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;.tanda&amp;nbsp;{&amp;nbsp;background­color:&amp;nbsp;#cfcfcf;&amp;nbsp;} 44.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 45.&amp;nbsp;&amp;lt;/head&amp;gt; 46.&amp;nbsp;&amp;lt;body&amp;gt; 47.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;amp;lt;strong&amp;amp;gt;LUG&amp;nbsp;ONLINE&amp;nbsp;STORE&amp;nbsp;­&amp;nbsp;DATA&amp;nbsp;PEMBELIAN&amp;lt;hr&amp;nbsp;&amp;gt; 48.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;table&amp;nbsp;border="1"&amp;gt; 49.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;class="tanda"&amp;gt; 50.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;th&amp;gt;Barang&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;Jumlah&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;Total&amp;lt;/th&amp;gt; 51.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 52.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 53.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;Sticker&amp;lt;/td&amp;gt; 54.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 55.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt; 56.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt; 57.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 58.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;Kaos&amp;lt;/td&amp;gt; 59.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 60.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt; 61.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt; 62.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;gt; 63.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;Jacket&amp;lt;/td&amp;gt; 64.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 65.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt; 66.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt; 67.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;class="tanda"&amp;gt; 68.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;nbsp;colspan="2"&amp;gt;TOTAL 69.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 70.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 71.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;class="tanda"&amp;gt; 72.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;nbsp;colspan="2"&amp;gt;Diskon 73.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 74.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 75.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;tr&amp;nbsp;class="tanda"&amp;gt; 76.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;nbsp;colspan="2"&amp;gt;SUB­TOTAL 77.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt; 78.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 79.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 80.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;p&amp;gt;&amp;lt;a&amp;nbsp;href="faktur.php" rel="nofollow"&amp;gt;Lihat&amp;nbsp;Faktur&amp;lt;/a&amp;nbsp;href="faktur.php"&amp;gt;&amp;lt;/p&amp;gt; 81.&amp;nbsp;&amp;lt;/td&amp;nbsp;colspan="2"&amp;gt;&amp;lt;/tr&amp;nbsp;class="tanda"&amp;gt;&amp;lt;/td&amp;nbsp;colspan="2"&amp;gt;&amp;lt;/tr&amp;nbsp;class="tanda"&amp;gt;&amp;lt;/td&amp;nbsp;colspan="2"&amp;gt;&amp;lt;/tr&amp;nbsp;class="tanda"&amp;gt;&amp;lt;/tr&amp;nbsp;class="tanda"&amp;gt;&amp;lt;/table&amp;nbsp;border="1"&amp;gt;&amp;lt;/hr&amp;nbsp;&amp;gt;&amp;lt;/body&amp;gt; 82.&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan kembali file form-proses.php 4. Buat sebuah dokumen baru dengan nama faktur.php 5. Isi dari file faktur.php adalah: 1.&amp;nbsp;&amp;nbsp; 3.&amp;nbsp;&amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 4.&amp;nbsp;&amp;lt;head&amp;gt; 5.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Pembelian&amp;nbsp;Online&amp;lt;/title&amp;gt; 6.&amp;nbsp;&amp;lt;/head&amp;gt; 7.&amp;nbsp;&amp;lt;body&amp;gt; 8.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;h2&amp;gt;Data&amp;nbsp;Faktur&amp;nbsp;Pembelian&amp;lt;/h2&amp;gt; 9.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;amp;lt;pre&amp;amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 48&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 10.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 14.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 15.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;a&amp;nbsp;href="form­toko.html" rel="nofollow"&amp;gt;Kembali&amp;nbsp;ke&amp;nbsp;Form 16.&amp;nbsp;&amp;lt;/a&amp;nbsp;href="form­toko.html"&amp;gt;&amp;lt;/body&amp;gt; 17.&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 6. Simpan kembali file faktur.php 7. Buka alamat http://localhost/webpro/bab4/form-toko.html untuk melihat proses penyimpanan file.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 4.1: Tambahan link Lihat Faktur&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 4.2: Data beberapa faktur transaksi yang tercatat&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4.1.4 Penjelasan Singkat Penerapan Teori Penyimpanan File&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 49&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pada file form-proses.php modifikasi yang dilakukan dapat dilihat mulai dari baris 27 – 35 dan juga baris ke-80. Pada baris 27 – 35 yang kita lakukan adalah melakukan penulisan sebuah file dengan nama faktur.txt. Karena kita tidak menyertakan path untuk direktori file maka diasumsikan file faktur.txt akan ditulis pada direktori yang sama. Mode file yang kita gunakan adalah 'a', agar data faktur-faktur sebelumnya yang sudah tertulis tidak tertimpa/overwrite melainkan kita tambahkan diakhir(append). Separator yang digunakan untuk setiap item adalah “-#-”. Format ini akan tetap kita gunakan, karena pada pembahasan array kita akan mengextract setiap item berdasarkan separator tersebut. Pada file faktur.php pembacaan file dilakukan dengan memanggil fungsi readfile(). Fungsi readfile akan membaca sebuah file dan langsung menampilkannya ke output. Karena setiap baris dipasahkan dengan karakter “\n” maka kita perlu tag preformatted text &amp;amp;lt;pre&amp;amp;gt; agar file ditampilkan apa adanya. 4.1.5 Fungsi-fungsi Lain Beberapa fungsi lain yang dapat digunakan untuk manajemen file diantarnya baca dan hapus antara lain fungsi file_get_contents(), fread(), dan unlink(). a. file_get_contents() Fungsi file_get_contents() digunakan untuk membaca sebuah file dan menyimpannya sebagai string. Sebagai contoh kita dapat mengganti fungsi dari readfile() pada file faktur.php dengan perintah berikut: $data&amp;nbsp;=&amp;nbsp;file_get_contents('faktur.txt'); echo&amp;nbsp;$data;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; b. fread() Pada fungsi fread() terdapat dua parameter yang harus disertakan yaitu pointer/resource yang dibuka dengan fopen dan panjang bytes dari data yang akan dibaca. Contoh pengganti readfile() pada file faktur.php adalah sebagai berikut: $fp&amp;nbsp;=&amp;nbsp;fopen('faktur.txt',&amp;nbsp;'r'); $ukuran&amp;nbsp;=&amp;nbsp;filesize('faktur.txt'); $data&amp;nbsp;=&amp;nbsp;fread($fp,&amp;nbsp;$ukuran); echo&amp;nbsp;$data; fclose($fp);&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; atau $fp&amp;nbsp;=&amp;nbsp;fopen('faktur.txt',&amp;nbsp;'r'); $data&amp;nbsp;=&amp;nbsp;''; while&amp;nbsp;(!feof($fp))&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;$data&amp;nbsp;.=&amp;nbsp;fread($fp,&amp;nbsp;2048); } fclose($fp); echo&amp;nbsp;$data;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Fungsi filesize() digunakan untuk mengetahui ukuran sebuah file dalam bytes. Sedangkan fungsi feof() digunakan untuk megecek apakah akhir sebuah file sudah tercapai EOF(End of File). Pada contoh diatas kita membaca sebanyak 2048 bytes atau 2kb setiap loop. © 2008-2010 Rio Astamal – Hal. 50&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; c. fgets() Penggunaan fungsi fgets() hampir sama dengan fread() pada metode yang kedua. $fp&amp;nbsp;=&amp;nbsp;fopen('faktur.txt',&amp;nbsp;'r'); $data&amp;nbsp;=&amp;nbsp;''; while&amp;nbsp;(!feof($fp))&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;$data&amp;nbsp;.=&amp;nbsp;fgets($fp,&amp;nbsp;2048); } fclose($fp); echo&amp;nbsp;$data;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; d. unlink() Berbeda dengan beberapa fungsi sebelumnya, fungsi unlink() digunakan untuk menghapus sebuah file. Contoh penggunaan unlink adalah sebagai berikut: if&amp;nbsp;(unlink('faktur.txt')) &amp;nbsp;&amp;nbsp;echo&amp;nbsp;“File&amp;nbsp;faktur.txt&amp;nbsp;berhasil&amp;nbsp;dihapus”; else &amp;nbsp;&amp;nbsp;echo&amp;nbsp;“File&amp;nbsp;faktur.txt&amp;nbsp;gagal&amp;nbsp;dihapus”;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Fungsi unlink() akan mengembalikan nilai boolean mengenai status penghapusan dari sebuah file. TRUE jika file berhasil dihapus dan FALSE jika gagal dihapus. TIPS: Masalah yang sering muncul jika menyangkut pembuatan dan penghapusan file adalah masalah permission(hak akses). Hal ini umum terjadi pada sistem operasi berbasis UNIX. Jadi perhatikan permission dari direktori/file yang menjadi objek.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4.2 Array pada PHP Array merupakan salah satu aspek terpenting dalam bahasa pemrograman. Sebenarnya apa sih array itu? Secara sederhana array merupakan suatu variabel yang dapat menyimpan beberapa nilai sekaligus. Berbeda dengan variabel biasa yang hanya dapat menampung sebuah nilai saja. Array juga dapat berisi array lainnya (array didalam array), array seperti ini sering disebut array multidimensi. Pada PHP dikenal dua tipe array berdasarkan cara pengaksesannya yaitu array index numerik dan array index string (associative array). Bingung? Yes akhirnya saya bisa membuat anda bingung :p. OK, biar anda tidak stress langsung saja kita bahas yang pertama dulu yaitu arrai index numerik. 4.2.1 Array dengan Index Numerik Kita akan tetap menggunakan contoh produk pada baba sebelumnya yaitu sticker, kaos, dan jacket dalam pembahsan contoh. Sebuah array dengan index numerik diberi index mulai dari 0,1,2,3,... dan seterusnya. Untuk membuat sebuah array dengan index numeric terdapat beberapa cara diantaranya: → Cara 1 $produk&amp;nbsp;=&amp;nbsp;array('sticker',&amp;nbsp;'kaos',&amp;nbsp;'jacket'); © 2008-2010 Rio Astamal – Hal. 51&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Perintah diatas berarti kita membuat sebuah array dengan nama $produk dengan tiga buah elemen didalamnya. Index akan diberikan otomatis dimulai dari 0 yaitu sticker, 1 adalah kaos dan 2 adalah jacket. → Cara 2 $produk[0]&amp;nbsp;=&amp;nbsp;'sticker'; $produk[1]&amp;nbsp;=&amp;nbsp;'kaos'; $produk[2]&amp;nbsp;=&amp;nbsp;'jacket';&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Cara diatas adalah sebuah cara manual yaitu dengan memberi index langsung pada array. → Cara 3 $produk[]&amp;nbsp;=&amp;nbsp;'sticker'; $produk[]&amp;nbsp;=&amp;nbsp;'kaos'; $produk[]&amp;nbsp;=&amp;nbsp;'jacket';&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Cara ketiga hampir sama dengan yang pertama, hanya berbeda cara penulisan saja. Cara ini sangat berguna saat kita akan memberi sebuah nilai pada array saat looping dimana index akan bertambah secara otomatis. 4.2.3 Mengakses Isi Array Untuk mengakses sebuah array hal yang diperlukan adalah nama array tersebut dan index-nya. Dimana penulisan index diapit oleh tanda kurung siku [ ]. Perhatikan contoh berikut: echo&amp;nbsp;$produk[0]&amp;nbsp;.&amp;nbsp;'&amp;nbsp;'&amp;nbsp;.&amp;nbsp;$produk[1]&amp;nbsp;.&amp;nbsp;'&amp;nbsp;'&amp;nbsp;.&amp;nbsp;$produk[2];&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output dari perintah diatas adalah: sticker&amp;nbsp;kaos&amp;nbsp;jacket&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output 1&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk array dengan jumlah yang “bisa” dihitung dengan jari pengaksesan secara manual mungkin tidak masalah. Namun jika jumlah array mencapai puluhan bahkan ratusan? Solusinya ya pakai looping. 4.2.4 Looping Array Index Numerik Pada bab-bab awal kita sudah membahas penggunaan looping. Looping sangat berguna untuk mengakses array dalam jumlah besar. Pada bagian ini kita juga akan membahas foreach() satusatunya perintah looping yang belum dibahas. Output dari perintah-perintah looping berikut akan mengacu pada output 1. Hal ini ditujukan agar memudahkan anda memahami cara kerja array dan looping itu sendiri.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; a. Looping Array dengan for() //&amp;nbsp;set&amp;nbsp;variabel&amp;nbsp;index&amp;nbsp;ke&amp;nbsp;0&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 52&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; for&amp;nbsp;($i=0;&amp;nbsp;$i&amp;amp;lt;3;&amp;nbsp;$i++)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;echo&amp;nbsp;“$produk[$i]&amp;nbsp;”; }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Hasil yang ditampilkan akan sama dengan output 1. b. Looping Array dengan while() //&amp;nbsp;set&amp;nbsp;variabel&amp;nbsp;index&amp;nbsp;ke&amp;nbsp;0 $i&amp;nbsp;=&amp;nbsp;0; while&amp;nbsp;($i&amp;nbsp;&amp;amp;lt;&amp;nbsp;3)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;“$produk[$i]&amp;nbsp;“; &amp;nbsp;&amp;nbsp;&amp;nbsp;$i++;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;increment&amp;nbsp;$i }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; c. Looping Array dengan foreach() Nah, inilah saat yang tepat kita berkenalan dengan si foreach(). Looping ini memang khusus dirancang untuk digunakan dengan array. Jadi jika memungkinkan sebaiknya gunakan loop tipe ini dibanding yang lain jika mengakses array. Syntax dasar dari foreach adalah: foreach&amp;nbsp;(ekspresi1&amp;nbsp;as&amp;nbsp;[eskpresi2&amp;nbsp;=&amp;amp;gt;&amp;nbsp;]&amp;nbsp;ekspresi3)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;kode&amp;nbsp;yang&amp;nbsp;akan&amp;nbsp;dieksekusi }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; dimana: • ekspresi1: variabel array yang akan dimanipulasi • ekpsresi2(opsional): variabel baru tempat menyimpan index array • ekspresi3: variabel baru penampung nilai dari elemen array Untuk menghasilkan output seperti output 1, maka penulisan foreach yang digunakan adalah: foreach&amp;nbsp;($produk&amp;nbsp;as&amp;nbsp;$prd)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;echo&amp;nbsp;“$prd&amp;nbsp;“; }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pada contoh diatas kita hanya menuliskan ekspresi1 dan ekspresi3. Penggunaan ekspresi2 dapat anda lihat pada contoh berikut: foreach&amp;nbsp;($produk&amp;nbsp;as&amp;nbsp;$index&amp;nbsp;=&amp;amp;gt;&amp;nbsp;$prd)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;“$index&amp;nbsp;:&amp;nbsp;$prd&amp;lt;br&amp;nbsp;&amp;gt;”; }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output yang ditampilkan adalah:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 0&amp;nbsp;:&amp;nbsp;sticker 1&amp;nbsp;:&amp;nbsp;kaos 2&amp;nbsp;:&amp;nbsp;jacket&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4.2.5 Penerapan Teori Array Index Numerik Untuk contoh kali ini kita akan coba menampilkan isi dari faktur.txt tapi dengan tampilan yang lebih © 2008-2010 Rio Astamal – Hal. 53&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; baik. Tidak hanya sekedar isinya secara langsung. Ikuti langkah-langkag berikut: 1. Buka gedit(Linux) / Notepad++ (Windows) 2. Buat file baru didalam direktori htdocs/bab4 dengan nama faktur2.php 3. Ketik kode berikut: 1.&amp;nbsp;&amp;nbsp; 3.&amp;nbsp;&amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 4.&amp;nbsp;&amp;lt;head&amp;gt; 5. &amp;lt;title&amp;gt;Pembelian&amp;nbsp;Online&amp;lt;/title&amp;gt; 6.&amp;nbsp;&amp;lt;/head&amp;gt; 7.&amp;nbsp;&amp;lt;body&amp;gt; 8. &amp;lt;h2&amp;gt;Data&amp;nbsp;Faktur&amp;nbsp;Pembelian&amp;lt;/h2&amp;gt; 9. &amp;lt;table&amp;nbsp;border="1"&amp;nbsp;cellpadding="4"&amp;gt; 10. &amp;lt;tr&amp;nbsp;style="background:#ccc"&amp;gt; 11. &amp;lt;th&amp;gt;No.&amp;lt;/th&amp;gt; 12. &amp;lt;th&amp;gt;Jml&amp;nbsp;Sticker&amp;lt;/th&amp;gt; 13. &amp;lt;th&amp;gt;Total&amp;nbsp;Sticker&amp;lt;/th&amp;gt; 14. &amp;lt;th&amp;gt;Jml&amp;nbsp;Kaos&amp;lt;/th&amp;gt; 15. &amp;lt;th&amp;gt;Total&amp;nbsp;Kaos&amp;lt;/th&amp;gt; 16. &amp;lt;th&amp;gt;Jml&amp;nbsp;Jacket&amp;lt;/th&amp;gt; 17. &amp;lt;th&amp;gt;Total&amp;nbsp;Jacket&amp;lt;/th&amp;gt; 18. &amp;lt;th&amp;gt;Total&amp;lt;/th&amp;gt; 19. &amp;lt;th&amp;gt;Diskon&amp;lt;/th&amp;gt; 20. &amp;lt;th&amp;gt;Sub­Total&amp;lt;/th&amp;gt; 21. 22. \n"; 30. echo&amp;nbsp;"&amp;lt;td&amp;gt;".&amp;nbsp;($nomor&amp;nbsp;+&amp;nbsp;1)&amp;nbsp;.&amp;nbsp;"&amp;lt;/td&amp;gt;\n";&amp;nbsp;//&amp;nbsp;karena&amp;nbsp;dimulai&amp;nbsp;dari&amp;nbsp;0 31.&amp;nbsp; 32. //&amp;nbsp;extract&amp;nbsp;data&amp;nbsp;pada&amp;nbsp;setiap&amp;nbsp;baris&amp;nbsp;dengan&amp;nbsp;separator&amp;nbsp;'­#­' 33. $data&amp;nbsp;=&amp;nbsp;explode('­#­',&amp;nbsp;$baris[$nomor]); 34. $jcolom&amp;nbsp;=&amp;nbsp;count($data);&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;panjang&amp;nbsp;array&amp;nbsp;(kolom) 35. for&amp;nbsp;($kolom=0;&amp;nbsp;$kolom&amp;amp;lt;$jcolom;&amp;nbsp;$kolom++)&amp;nbsp;{ 36. echo&amp;nbsp;"&amp;lt;td&amp;gt;"&amp;nbsp;.&amp;nbsp;$data[$kolom]&amp;nbsp;.&amp;nbsp;"&amp;lt;/td&amp;gt;\n"; 37. } 38. echo&amp;nbsp;"\n"; 39. } 40. ?&amp;amp;gt; 41. 42.&amp;nbsp;&amp;lt;/tr&amp;nbsp;style="background:#ccc"&amp;gt;&amp;lt;/table&amp;nbsp;border="1"&amp;nbsp;cellpadding="4"&amp;gt;&amp;lt;/body&amp;gt; 43.&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4. Simpan kembali file faktur2.php 5. Arahkan browser anda pada alamat http://localhost/webpro/bab4/faktur2.php 6. Hasilnya akan terlihat seperti gambar 4.3.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 54&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; TIPS: Anda dapat bereksperimen dengan perintah explode(), misalnya tidak menggunakan fungsi file untuk memecah baris melainkan dengan explode() dengan separator \n.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 4.3: Tampilan data faktur lebih baik dari sebelumnya 4.2.6 Array dengan Index String (Associative Array) Pada kasus tertentu penggunaan associative array lebih baik dibandingkan dengan array index numerik. Pada associative array, pengaksesan bukan dengan index angka melainkan string sesuai dengan keinginan kita. Sebagai contoh kita akan membuat sebuah array $produk seperti sebelumnya namun dengan associative array. → Cara 1 $produk&amp;nbsp;=&amp;nbsp;array(&amp;nbsp;'stc'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'sticker',&amp;nbsp;'ks'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'kaos',&amp;nbsp;'jkt'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'jacket');&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pada contoh diatas kita memberi index pada sticker dengan stc, kaos dengan ks dan jacket dengan jkt. → Cara 2 $produk&amp;nbsp;=&amp;nbsp;array('stc'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'sticker'); $produk&amp;nbsp;=&amp;nbsp;array('ks'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'kaos'); $produk&amp;nbsp;=&amp;nbsp;array('jkt'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'jacket');&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; → Cara 3 $produk['stc']&amp;nbsp;=&amp;nbsp;'sticker'; $produk['ks']&amp;nbsp;=&amp;nbsp;'kaos'; $produk['jkt']&amp;nbsp;=&amp;nbsp;'jacket';&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4.2.7 Mengakses Associative Array Sebenarnya pengaksesan associative array sama dengan array index numerik. Hal yang diperlukan tentu nama dari array dan nama index yang akan diakses. Perhatikan contoh berikut, output tampilan dibawah akan sama dengan output 1 pada bahasan sebelumnya.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 55&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; echo&amp;nbsp;$produk['stc']&amp;nbsp;.&amp;nbsp;'&amp;nbsp;'&amp;nbsp;.&amp;nbsp;$produk['ks']&amp;nbsp;.&amp;nbsp;'&amp;nbsp;'&amp;nbsp;.&amp;nbsp;$produk['jkt'];&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; atau echo&amp;nbsp;“{$produk['stc']}&amp;nbsp;{$produk['ks'}&amp;nbsp;{$produk['jkt']}”;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Jika akan mencetak associative array dalam suatu string maka gunakan tanda { } (kurung kurawal) sebagai pembungkus array. 4.2.8 Looping pada Associative Array Karena pada associative array tidak menggunakan angka sebagai index, maka kita tidak dapat menggunakan looping for pada array tipe ini. a. Looping dengan foreach() Associative array memang sangat cocok digunakan dengan loop foreach. Kesederhanaan syntax foreach membuat lebih mudah dibaca. foreach&amp;nbsp;($produk&amp;nbsp;as&amp;nbsp;$index&amp;nbsp;=&amp;amp;gt;&amp;nbsp;$prd)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;“$index&amp;nbsp;::&amp;nbsp;$prd&amp;lt;br&amp;nbsp;&amp;gt;”; }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output dari script diatas adalah sebagai berikut:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; stc :: sticker ks :: kaos jkt :: jacket&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Setelah keyword “as” index dari array bersifat optional artinya tidak perlu diikutkan juga tidak apaapa. Lihat contoh berikut. foreach&amp;nbsp;($produk&amp;nbsp;as&amp;nbsp;$prd)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;“$prd&amp;lt;br&amp;nbsp;&amp;gt;”; }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output dari potongan script kedua adalah:&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; sticker kaos jacket&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4.3 Array Multidimensi Jangan langsung menganggap kata-kata “multidimensi” menyeramkan, anggap saja ini mainan saja biar otak kita gampang menerimanya. Secara sederhana array multidimensi dapat dianggap sebagai sebuah matriks yang memiliki baris dan kolom. Oleh karena itu kita dapat membuat array dengan ukuran 2-dimensi, 3-dimensi, sampai n-dimensi. 4.3.1 Array 2-Dimensi Bentuk array dua dimensi mirip dengan matriks atau pun suatu koordinat karena diperlukan dua inputan dalam mengakses isi array yaitu baris dan kolomnya. Kita akan tetap menggunakan contoh array sebelumnya dalam ilustrasi berikut ini.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 56&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; PRODUK&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Kode&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Nama Barang&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Harga&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; STC&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Sticker&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 7500&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; KOS&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Kaos&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 35000&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; JKT&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Jaket&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 55000 ATRIBUT PRODUK&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Jika kita konversi dalam bentuk array dua dimensi maka salah satu bentuk array tersebut akan seperti ini: $produk&amp;nbsp;=&amp;nbsp;array( &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;array('STC',&amp;nbsp;'Sticker',&amp;nbsp;7500), &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;array('KOS',&amp;nbsp;'Kaos',&amp;nbsp;35000), &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;array('JKT',&amp;nbsp;'Jaket',&amp;nbsp;55000) &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;);&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk mengakses array 2-dimensi juga tidak berbeda dengan array berdimensi satu. Hanya saja kita perlu mensupai tambahan yaitu kolom mana yang ingin diakses. Baris paling awal indexnya adalah 0 dan kolom paling kiri indexnya adalah 0. Untuk mengakses array tersebut secara manual dapat dilakukan seperti berikut. echo&amp;nbsp;$produk[0][0].'#'.$produk[0][1].'#'.$produk[0][2].'#&amp;lt;br /&amp;gt;'; echo&amp;nbsp;$produk[1][0].'#'.$produk[1][1].'#'.$produk[1][2].'#&amp;lt;br /&amp;gt;'; echo&amp;nbsp;$produk[2][0].'#'.$produk[2][1].'#'.$produk[2][2].'#&amp;lt;br /&amp;gt;';&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output dari kode diatas adalah: STC#Sticker#7500# KOS#Kaos#35000# JKT#Jaket#55000# Atau menggunakan looping seperti berikut: for&amp;nbsp;($i=0;&amp;nbsp;$i&amp;amp;lt;3;&amp;nbsp;$i++)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;for&amp;nbsp;($j=0;&amp;nbsp;$j&amp;amp;lt;3;&amp;nbsp;$j++)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;$produk[$i][$j]&amp;nbsp;.&amp;nbsp;'#'; &amp;nbsp;&amp;nbsp;} &amp;nbsp;&amp;nbsp;echo&amp;nbsp;'&amp;lt;br /&amp;gt;'; }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Pada contoh diatas kita berasumsi bahwa banyak array dari $produk bersifat statik yaiu 3. Jadi kita melakukan loop sebanyak 3 kali dimulai dengan index 0, 1, dan 2. Alternatif yang menurut penulis lebih baik adalah penggunaan associative array pada array $produk diatas. Lihat contoh dibawah. $produk&amp;nbsp;=&amp;nbsp;array(array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'STC', &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Sticker', &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;7500), &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'KOS', &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Kaos', &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;35000), &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'JKT', &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Jaket', &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;55000),&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 57&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; );&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Untuk mengakses array diatas sama dengan cara mengakses array pada index numerik. Contoh, untuk menampilkan harga dari Sticker maka penulisannya $produk[0]['harga']. Berikut ini contoh pengaksesan menggunakan foreach untuk mendapatkan output yang sama seperti sebelumnya. foreach&amp;nbsp;($produk&amp;nbsp;as&amp;nbsp;$p)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;echo&amp;nbsp;$produk['kode'].'#'.$produk['nama_barang'].$produk['harga'].'#&amp;lt;br /&amp;gt;'; }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; TIPS: Penggunaan tipe array index numerik atau string (associative array) sangat bergantung pada situasi. Namun associative relatif lebih mudah digunakan dibanding index numerik.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4.3.2 Array 3-Dimensi Jika pada contoh array 2-dimensi diatas array $produk terdiri dari produk dan attributnya pada array 3-dimensi kita dapat tambahkan sebuah layer tambahan. Untuk memperjelas lihat ilustrasi di bawah ini. LARGE MEDIUM KODE Nama Barang SMALL KODE STC01 Nama Stiker Barang KODE Barang STC01 KOS01 NamaStiker Kaos STC01 Stiker KOS01 JKT01 Kaos Kaos KOS01 Kaos JKT01 Kaos&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Harga Harga 7500 Harga 7500 35000 7500 35000 55000 35000 55000&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; JKT01&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 55000&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Kaos&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bentuk array dari ilustrasi diatas dapat kita tulis sebagai berikut: $produk&amp;nbsp;=&amp;nbsp;array(&amp;nbsp;'small'&amp;nbsp;=&amp;amp;gt; array(array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'STC01', 'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Sticker', 'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;7500), &amp;nbsp;&amp;nbsp;array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'KOS01', &amp;nbsp;&amp;nbsp;'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Kaos', &amp;nbsp;&amp;nbsp;'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;35000), &amp;nbsp;&amp;nbsp;array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'JKT01', &amp;nbsp;&amp;nbsp;'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Jaket', &amp;nbsp;&amp;nbsp;'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;55000) ), 'medium'&amp;nbsp;=&amp;amp;gt; array(array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'STC02', 'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Sticker', 'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;8000), &amp;nbsp;&amp;nbsp;array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'KOS02', &amp;nbsp;&amp;nbsp;'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Kaos', &amp;nbsp;&amp;nbsp;'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;40000), © 2008-2010 Rio Astamal – Hal. 58&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab IV – File dan Array &amp;nbsp;&amp;nbsp;array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'JKT02', &amp;nbsp;&amp;nbsp;'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Jaket', &amp;nbsp;&amp;nbsp;'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;60000) ), 'large'&amp;nbsp;=&amp;amp;gt; array(array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'STC03', 'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Sticker', 'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;8500), &amp;nbsp;&amp;nbsp;array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'KOS03', &amp;nbsp;&amp;nbsp;'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Kaos', &amp;nbsp;&amp;nbsp;'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;45000), &amp;nbsp;&amp;nbsp;array('kode'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'JKT03', &amp;nbsp;&amp;nbsp;'nama_barang'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;'Jaket', &amp;nbsp;&amp;nbsp;'harga'&amp;nbsp;=&amp;amp;gt;&amp;nbsp;65000) )&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ); foreach&amp;nbsp;($produk&amp;nbsp;as&amp;nbsp;$kategori&amp;nbsp;=&amp;amp;gt;&amp;nbsp;$prod)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;echo&amp;nbsp;"Kategori:&amp;nbsp;$kategori"; &amp;nbsp;&amp;nbsp;echo&amp;nbsp;"&amp;lt;br /&amp;gt;===============================&amp;lt;br /&amp;gt;"; &amp;nbsp;&amp;nbsp;foreach&amp;nbsp;($prod&amp;nbsp;as&amp;nbsp;$item)&amp;nbsp;{ &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;$item['kode'].'#'.$item['nama_barang'].'#'.$item['harga'].'&amp;lt;br /&amp;gt;'; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;echo&amp;nbsp;'­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­&amp;lt;br /&amp;gt;'; &amp;nbsp;&amp;nbsp;} &amp;nbsp;&amp;nbsp;echo&amp;nbsp;'&amp;lt;br /&amp;gt;'; }&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Output dari kode diatas adalah sebagai berikut: Kategori:&amp;nbsp;small =============================== STC01#Sticker#7500 ----------------------------------KOS01#Kaos#35000 ----------------------------------JKT01#Jaket#55000 ----------------------------------Kategori: medium =============================== STC02#Sticker#8000 ----------------------------------KOS02#Kaos#40000 ----------------------------------JKT02#Jaket#60000 ----------------------------------Kategori: large =============================== STC03#Sticker#8500 ----------------------------------KOS03#Kaos#45000 ----------------------------------JKT03#Jaket#65000 -----------------------------------&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Dari ilustrasi diatas dapat dilihat bahwa sesungguhnya pembuatan array tidak terbatas pada 3dimensi saja melainkan sampai n-dimensi. Namun pada banyak kasus jumlah dimensi 3 sudah cukup menyelesaikan permasalahan yang dihadapi.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 59&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V Contoh-contoh Aplikasi Pada bab ini kita akan mencoba untuk membuat beberapa aplikasi sederhana sesuai dengan materi yang telah ada pada bab-bab sebelumnya. Aplikasi-aplikasi yang akan kita buat antara lain: • • •&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Simple Contact Form Simple Guestbook Simple Poll&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 5.1 Pre-Requirements Sebelum memulai project pastikan anda sudah membuat sebuah folder bab5 pada folder htdocs/webpro/. Didalam folder bab5 buat tiga folder diantaranya: simple-contact-form, simpleguest-book, dan simple-poll. Sehingga susunan akhir dari folder yang ada pada htdocs/webpro/bab5 terlihat seperti berikut: • • •&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; htdocs/webpro/bab5/simple-contact-form htdocs/webpro/bab5/simple-guestbook htdocs/webpro/bab5/simple-poll&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bagi yang menggunakan sistem operasi Linux/*NIX chmod folder-folder tersebut ke 0777 untuk menghindari masalah permission. 5.2 Simple Contact Form Simple Contact Form adalah sebuah aplikasi sederhana dimana fungsi utamanya adalah untuk mengirimkan email kepada admin dari sebuah form kontak yang tersedia. File-file yang akan kita buat adalah: Direktori: htdocs/webpro/bab5/simple-contact-form Nama File&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Fungsi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; form.html&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Antar muka form kontak berupa HTML murni&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; process.php&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Memproses form kontak dan mengirimkan email ke admin.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; OK, langsung saja kita mulai project ini. 1. Buka teks editor favorit anda 2. Buat file baru lalu Save dengan nama form.html 3. Lanjutkan dengan menyalin kode berikut 1.&amp;nbsp;&amp;nbsp; 3.&amp;nbsp;&amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 4.&amp;nbsp;&amp;lt;head&amp;gt; 5. &amp;lt;title&amp;gt;Simple&amp;nbsp;Contact&amp;nbsp;Form&amp;lt;/title&amp;gt; 6.&amp;nbsp;&amp;lt;/head&amp;gt; 7.&amp;nbsp;&amp;lt;body&amp;gt; 8. &amp;lt;h3&amp;gt;Simple&amp;nbsp;Contact&amp;nbsp;Form&amp;lt;/h3&amp;gt;&amp;lt;hr&amp;nbsp;&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 60&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 9. &amp;lt;form&amp;nbsp;action="process.php"&amp;nbsp;method="post"&amp;gt; 10. &amp;lt;label&amp;gt;Nama&amp;nbsp;Lengkap&amp;lt;/label&amp;gt;&amp;lt;br /&amp;gt; 11. &amp;lt;input&amp;nbsp;type="text"&amp;nbsp;name="nama"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;br /&amp;gt; 12. &amp;lt;label&amp;gt;Email&amp;lt;/label&amp;gt;&amp;lt;br /&amp;gt; 13. &amp;lt;input&amp;nbsp;type="text"&amp;nbsp;name="email"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;br /&amp;gt; 14. &amp;lt;label&amp;gt;Pesan&amp;lt;label&amp;gt;&amp;lt;br /&amp;gt; 15. &amp;lt;textarea&amp;nbsp;name="pesan"&amp;nbsp;cols="60"&amp;nbsp;rows="10"&amp;gt;&amp;lt;br /&amp;gt; 16. &amp;lt;input&amp;nbsp;type="submit"&amp;nbsp;name="submit"&amp;nbsp;value="proses"&amp;nbsp;&amp;gt; 17. 18.&amp;nbsp;&amp;lt;/input&amp;nbsp;type="submit"&amp;nbsp;name="submit"&amp;nbsp;value="proses"&amp;nbsp;&amp;gt;&amp;lt;/textarea&amp;nbsp;name="pesan"&amp;nbsp;cols="60"&amp;nbsp;rows="10"&amp;gt;&amp;lt;/label&amp;gt;&amp;lt;/label&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;name="email"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;name="nama"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;/form&amp;nbsp;action="process.php"&amp;nbsp;method="post"&amp;gt;&amp;lt;/hr&amp;nbsp;&amp;gt;&amp;lt;/body&amp;gt; 19.&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 4. Simpan kembali file tersebut. 5. Buat file baru lali Save dengan nama process.php 6. Salin kode dibawah ini. (Ganti &amp;lt;a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b5b9b8a2b7b5a296bab9b5b7babeb9a5a2f8b9a4b1"&amp;gt;[email&amp;nbsp;protected]&amp;lt;/a&amp;gt; sesuai dengan account pada mail server local anda) 1.&amp;nbsp;"; 38. 39.&amp;nbsp;mail($admin_email,&amp;nbsp;$subject,&amp;nbsp;$pesan,&amp;nbsp;$from); 40. 41.&amp;nbsp;echo&amp;nbsp;("$nama,&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;Pesan&amp;nbsp;telah&amp;nbsp;terkirim&amp;nbsp;ke&amp;nbsp;admin.&amp;nbsp;Terima&amp;nbsp;Kasih"); 42. 43.&amp;nbsp;?&amp;amp;gt; © 2008-2010 Rio Astamal – Hal. 61&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 7. Simpan kembali file process.php 8. Buka browser anda dan arahkan ke http://localhost/webpro/bab5/simple-contactform/form.html 9. Coba masukkan nama, email, dan pesan anda lalu tekan “PROSES” 10. Buka email client anda (Outlook Express, Claws Mail, atau yang lain) untuk mengetahui apakah email sudah masuk di inbox atau belum.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 5.1: Form Kontak&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 5.2: Pesan masuk ke inbox admin 5.2.1 Penjelasan Script Simple Contact Form Pada script process.php ada beberapa fungsi baru yang kita gunakan. Berikut ini adalah penjelasan singkat dari fungsi-fungsi tersebut. © 2008-2010 Rio Astamal – Hal. 62&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Fungsi strlen(string) Fungsi ini untuk menghitung jumlah karakter yang ada pada suatu string. Pada script process.php kita gunakan fungsi ini untuk menghitung julah karakter pada variabel $pesan. Fungsi strpos(string_subject, string_dicari [, integer offset]) Fungsi strpos akan mengembalikan nilai boolean TRUE/FALSE jika string yang dicari ada pada string subject. Mengapa pada script kita menggunakan operator === bukan == ? Karena ada kemungkinan string yang kita cari berada pada offset/index ke 0. Sedangkan pada PHP 0 juga dianggap sebagai FALSE. Jadi perbandingan yang kita lakukan harus identik (===) benar-benar bertipe boolean. Fungsi mail(string_tujuan, string_subject, string_body [, string_header]) Fungsi mail() digunakan untuk mengirim email ke suatu alamat email tertentu. Pada contoh sebelumnya kita mengirimkan email ke &amp;lt;a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23404c4d57424057634f4c40424f4b4c50570d4c5144"&amp;gt;[email&amp;nbsp;protected]&amp;lt;/a&amp;gt; dimana itu merupakan email dari admin. Parameter ke-empat berupa header tambahan yang akan ditambahkan oleh mail server kita email kita dikirim. Kita menambahkan header From: untuk memudahkan admin dalam mereply secara langsung email yang masuk ke-inboxnya. 5.3 Simple Guestbook Simple Guestbook adalah sebuah aplikasi sederhana dimana user dapat meninggalkan komentar pada halaman website yang kita buat. Beberapa fitur yang akan digunakan pada guestbook ini diantarnya: • •&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; User dapat memberikan komentar dengan memasukkan nama, email, website, dan komentarnya. Daftar komenter disusun secara descending berdasarkan waktu, jadi komentar terakhir akan berada paling atas.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; File-file yang akan kita buat adalah sebagai berikut. Direktori: htdocs/webpro/bab5/simple-guestbook Nama File&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Fungsi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; guestbook.php&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Antar muka form serta menampilkan daftar komentar yang telah ada.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; process-gb.php&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Memproses form guestbook.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; functions.php&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Berisi fungsi-fungsi yang digunakan dalam memproses data.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Saatnya untuk memulai ritual coding. 1. Buka text editor lalu buat dokumen baru 2. Save dengan nama guestbook.php 3. Salin code berikut ini. 1.&amp;nbsp; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 6. 7.&amp;nbsp;?&amp;amp;gt;&amp;nbsp; 9.&amp;nbsp;&amp;lt;html&amp;nbsp;xmlns="http: www.w3.org tr xhtml1"&amp;gt;&amp;nbsp; 10.&amp;nbsp;&amp;lt;head&amp;gt; 11. &amp;lt;title&amp;gt;Simple&amp;nbsp;Guestbook&amp;lt;/title&amp;gt; 12. &amp;amp;lt;style&amp;nbsp;type="text/css"&amp;amp;gt; 13. body&amp;nbsp;{ 14. padding:&amp;nbsp;0; 15. margin:&amp;nbsp;0&amp;nbsp;0&amp;nbsp;0&amp;nbsp;4px; 16. font­family:&amp;nbsp;Verdana,&amp;nbsp;Arial,&amp;nbsp;Monospace; 17. font­size:&amp;nbsp;11px; 18. } 19. div.comment&amp;nbsp;{ 20. margin­bottom:&amp;nbsp;6px; 21. width:&amp;nbsp;98%; 22. border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#ccc; 23. border­top:&amp;nbsp;none; 24. } 25. div.comment&amp;nbsp;span.title&amp;nbsp;{ 26. padding:&amp;nbsp;4px; 27. border­bottom:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#ccc; 28. border­top:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#ccc; 29. text­align:right; 30. display:block; 31. background:&amp;nbsp;#f1f1f1; 32. } 33. div.comment&amp;nbsp;p&amp;nbsp;{ 34. padding:&amp;nbsp;4px&amp;nbsp;4px&amp;nbsp;8px&amp;nbsp;10px; 35. margin:&amp;nbsp;0; 36. } 37. h4&amp;nbsp;{ 38. margin:&amp;nbsp;0; 39. } 40. 41.&amp;nbsp;&amp;lt;/head&amp;gt; 42.&amp;nbsp;&amp;lt;body&amp;gt; 43. &amp;lt;h3&amp;gt;Simple&amp;nbsp;Guestbook&amp;lt;/h3&amp;gt; 44. &amp;lt;form&amp;nbsp;action="process­gb.php"&amp;nbsp;method="post"&amp;gt; 45. &amp;lt;table&amp;nbsp;border="0"&amp;gt; 46. &amp;lt;tr&amp;gt; 47. &amp;lt;td&amp;gt;Nama*&amp;lt;/td&amp;gt; 48. &amp;lt;td&amp;gt;&amp;lt;input&amp;nbsp;type="text"&amp;nbsp;name="nama"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;name="nama"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;/td&amp;gt; 49. &amp;lt;/tr&amp;gt; 50. &amp;lt;tr&amp;gt; 51. &amp;lt;td&amp;gt;Email*&amp;lt;/td&amp;gt; 52. &amp;lt;td&amp;gt;&amp;lt;input&amp;nbsp;type="text"&amp;nbsp;name="email"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;name="email"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;/td&amp;gt; 53. &amp;lt;/tr&amp;gt; 54. &amp;lt;tr&amp;gt; 55. &amp;lt;td&amp;gt;Website&amp;lt;/td&amp;gt; 56. &amp;lt;td&amp;gt;&amp;lt;input&amp;nbsp;type="text"&amp;nbsp;name="website"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;name="website"&amp;nbsp;size="20"&amp;nbsp;&amp;gt;&amp;lt;/td&amp;gt; 57. &amp;lt;/tr&amp;gt; 58. &amp;lt;tr&amp;gt; 59. &amp;lt;td&amp;nbsp;style="vertical­align:top"&amp;gt;Pesan* 60. &amp;lt;td&amp;gt;&amp;lt;textarea&amp;nbsp;name="pesan"&amp;nbsp;cols="50"&amp;nbsp;rows="4"&amp;gt; 61. &amp;lt;/textarea&amp;nbsp;name="pesan"&amp;nbsp;cols="50"&amp;nbsp;rows="4"&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;/td&amp;nbsp;style="vertical­align:top"&amp;gt;&amp;lt;/tr&amp;gt; 62. 63. &amp;lt;input&amp;nbsp;type="submit"&amp;nbsp;name="submit"&amp;nbsp;value="proses"&amp;nbsp;&amp;gt; 64. &amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 64&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 65. &amp;lt;hr /&amp;gt; 66. &amp;lt;h4&amp;gt;Total&amp;nbsp;Komentar:&amp;nbsp;&amp;lt;/h4&amp;gt; 67. &amp;nbsp;0)&amp;nbsp;{ 69. $content&amp;nbsp;=&amp;nbsp;file('gb.txt');&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;baca&amp;nbsp;file&amp;nbsp;sebagai&amp;nbsp;array&amp;nbsp;of&amp;nbsp;lines 70. foreach&amp;nbsp;($content&amp;nbsp;as&amp;nbsp;$baris)&amp;nbsp;{ 71. //&amp;nbsp;split&amp;nbsp;setiap&amp;nbsp;field&amp;nbsp;sesuai&amp;nbsp;separator 72. $field&amp;nbsp;=&amp;nbsp;explode("#@#",&amp;nbsp;$baris); 73. 74. $nama&amp;nbsp;=&amp;nbsp;display_name($field[1],&amp;nbsp;$field[2],&amp;nbsp;$field[3]); 75. $date&amp;nbsp;=&amp;nbsp;display_date($field[0]); 76. $pesan&amp;nbsp;=&amp;nbsp;display_mesg($field[4]); 77. 78. echo('&amp;lt;div&amp;nbsp;class="comment"&amp;gt;'); 79. echo('&amp;nbsp;&amp;nbsp;&amp;amp;lt;span&amp;nbsp;class="title"&amp;amp;gt;'); 80. echo('&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Written&amp;nbsp;by&amp;nbsp;'&amp;nbsp;.&amp;nbsp;$nama&amp;nbsp;.&amp;nbsp;'&amp;nbsp;on&amp;nbsp;'&amp;nbsp;.&amp;nbsp;$date); 81. echo('&amp;nbsp;&amp;nbsp;'); 82. echo('&amp;nbsp;&amp;nbsp;&amp;lt;p&amp;gt;'&amp;nbsp;.&amp;nbsp;$pesan&amp;nbsp;.&amp;nbsp;'&amp;lt;/p&amp;gt;'); 83. echo("\n"); 84. } 85. } 86. ?&amp;amp;gt; 87.&amp;nbsp;&amp;lt;script data-cfasync="false"&amp;gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt; 88.&amp;nbsp;&lt;br&gt; &lt;br&gt; 4. Save kembali file tersebut. 5. Buat dokumen baru lalu save dengan nama process-gb.php 6. Kemudian salin code berikut. 1.&amp;nbsp;' 10.&amp;nbsp;//&amp;nbsp;agar&amp;nbsp;setiap&amp;nbsp;data&amp;nbsp;baru&amp;nbsp;tetap&amp;nbsp;pada&amp;nbsp;satu&amp;nbsp;baris 11.&amp;nbsp;$pesan&amp;nbsp;=&amp;nbsp;str_replace("\r\n",&amp;nbsp;"&lt;br&gt;",&amp;nbsp;$pesan); 12.&amp;nbsp;$now&amp;nbsp;=&amp;nbsp;time();&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;waktu&amp;nbsp;sekarang&amp;nbsp;dalam&amp;nbsp;UNIX&amp;nbsp;Timestamp 13. 14.&amp;nbsp;//&amp;nbsp;separator&amp;nbsp;untuk&amp;nbsp;setiap&amp;nbsp;field 15.&amp;nbsp;$sep&amp;nbsp;=&amp;nbsp;'#@#'; 16.&amp;nbsp;//&amp;nbsp;nama&amp;nbsp;file&amp;nbsp;untuk&amp;nbsp;menyimpan&amp;nbsp;daftar&amp;nbsp;komentar&amp;nbsp;guestbook 17.&amp;nbsp;$target&amp;nbsp;=&amp;nbsp;'gb.txt'; 18. 19.&amp;nbsp;//&amp;nbsp;check&amp;nbsp;apakah&amp;nbsp;field&amp;nbsp;yang&amp;nbsp;diperlukan&amp;nbsp;terisi 20.&amp;nbsp;if&amp;nbsp;(empty($nama)&amp;nbsp;||&amp;nbsp;empty($email)&amp;nbsp;||&amp;nbsp;empty($pesan))&amp;nbsp;{ 21. exit('ERROR:&amp;nbsp;Mohon&amp;nbsp;isi&amp;nbsp;field&amp;nbsp;nama,&amp;nbsp;email&amp;nbsp;dan&amp;nbsp;pesan.'); 22.&amp;nbsp;} 23. 24.&amp;nbsp;//&amp;nbsp;susun&amp;nbsp;format&amp;nbsp;yang&amp;nbsp;akan&amp;nbsp;ditulis&amp;nbsp;pada&amp;nbsp;file 25.&amp;nbsp;$content&amp;nbsp;=&amp;nbsp;$now.$sep.$nama.$sep.$email.$sep.$website.$sep.$pesan; 26. 27.&amp;nbsp;//&amp;nbsp;baca&amp;nbsp;isi&amp;nbsp;file&amp;nbsp;lama 28.&amp;nbsp;//&amp;nbsp;tanda&amp;nbsp;@&amp;nbsp;digunakan&amp;nbsp;untuk&amp;nbsp;menyembunyikan&amp;nbsp;warning&amp;nbsp;dari&amp;nbsp;PHP&amp;nbsp;karena&amp;nbsp;pada&amp;nbsp;waktu 29.&amp;nbsp;//&amp;nbsp;pertama&amp;nbsp;kali&amp;nbsp;file&amp;nbsp;tersebut&amp;nbsp;belum&amp;nbsp;ada 30.&amp;nbsp;$old_content&amp;nbsp;=&amp;nbsp;trim(&amp;nbsp;@file_get_contents($target)&amp;nbsp;); 31. © 2008-2010 Rio Astamal – Hal. 65&lt;br&gt; &lt;br&gt; LUG STIKOM Surabaya&lt;br&gt; &lt;br&gt; Bab V – Contoh-contoh Aplikasi&lt;br&gt; &lt;br&gt; 32.&amp;nbsp;//&amp;nbsp;tempatkan&amp;nbsp;komentar&amp;nbsp;terbaru&amp;nbsp;pada&amp;nbsp;baris&amp;nbsp;paling&amp;nbsp;atas 33.&amp;nbsp;$content&amp;nbsp;=&amp;nbsp;$content&amp;nbsp;.&amp;nbsp;"\n"&amp;nbsp;.&amp;nbsp;$old_content; 34. 35.&amp;nbsp;//&amp;nbsp;tulis&amp;nbsp;file 36.&amp;nbsp;file_put_contents($target,&amp;nbsp;$content); 37. 38.&amp;nbsp;//&amp;nbsp;kembalikan&amp;nbsp;ke&amp;nbsp;halaman&amp;nbsp;guestbook.php 39.&amp;nbsp;header('Location:&amp;nbsp;guestbook.php'); 40.&amp;nbsp;?&amp;gt;&lt;br&gt; &lt;br&gt; 7. Simpan kembali file process-gb.php 8. Lanjutkan dengan membuat file baru lalu save dengan nama functions.php 9. Salin code dibawah ini. 1.&amp;nbsp;&amp;nbsp;Nama&amp;nbsp;Penulis&amp;nbsp;(&lt;a target="_blank" href="https://adoc.pub/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3958555854584d795c5458505517574058"&gt;[email&amp;nbsp;protected]&lt;/a&gt;) 7. *&amp;nbsp;dimana&amp;nbsp;Nama&amp;nbsp;Penulis&amp;nbsp;akan&amp;nbsp;berupa&amp;nbsp;link&amp;nbsp;jika&amp;nbsp;alamat&amp;nbsp;web&amp;nbsp;diisi. 8. *&amp;nbsp; 9. *&amp;nbsp;@param&amp;nbsp;$nama&amp;nbsp;­&amp;nbsp;String&amp;nbsp;nama&amp;nbsp;penulis 10. *&amp;nbsp;@param&amp;nbsp;$email&amp;nbsp;String&amp;nbsp;email&amp;nbsp;penulis 11. *&amp;nbsp;@param&amp;nbsp;$web&amp;nbsp;­&amp;nbsp;String&amp;nbsp;alamat&amp;nbsp;website&amp;nbsp;penulis 12. *&amp;nbsp;@return&amp;nbsp;String 13. */ 14.&amp;nbsp;function&amp;nbsp;display_name($nama,&amp;nbsp;$email,&amp;nbsp;$web)&amp;nbsp;{ 15. if&amp;nbsp;(empty($web))&amp;nbsp;{ 16. return&amp;nbsp;"$nama&amp;nbsp;($email)"; 17. } 18. 19. //&amp;nbsp;apakah&amp;nbsp;website&amp;nbsp;diawali&amp;nbsp;http://&amp;nbsp;? 20. if&amp;nbsp;(substr($web,&amp;nbsp;0,&amp;nbsp;7)&amp;nbsp;!=&amp;nbsp;'http://')&amp;nbsp;{ 21. $web&amp;nbsp;=&amp;nbsp;'http://'&amp;nbsp;.&amp;nbsp;$web;&amp;nbsp;&amp;nbsp;&amp;nbsp;//&amp;nbsp;tambahkan&amp;nbsp;jika&amp;nbsp;belum&amp;nbsp;ada 22. } 23. 24. $link&amp;nbsp;=&amp;nbsp;'&lt;a&nbsp;href="'&nbsp;.&nbsp;$web&nbsp;.&nbsp;'" rel="nofollow"&gt;'&amp;nbsp;.&amp;nbsp;$nama&amp;nbsp;.&amp;nbsp;''; 25. return&amp;nbsp;"$link&amp;nbsp;($email)"; 26.&amp;nbsp;} 27. 28.&amp;nbsp;/* 29. *&amp;nbsp;Fungsi&amp;nbsp;untuk&amp;nbsp;menampilkan&amp;nbsp;tanggal&amp;nbsp;yang&amp;nbsp;berformat&amp;nbsp;dd&amp;nbsp;Mon,&amp;nbsp;YYY&amp;nbsp;HH:mm 30. *&amp;nbsp;dari&amp;nbsp;sebuah&amp;nbsp;unix&amp;nbsp;timestamp 31. *&amp;nbsp; 32. *&amp;nbsp;@param&amp;nbsp;$timestamp&amp;nbsp;­&amp;nbsp;Integer&amp;nbsp;UNIX&amp;nbsp;Timestamp 33. *&amp;nbsp;@return&amp;nbsp;String 34. */ 35.&amp;nbsp;function&amp;nbsp;display_date($timestamp)&amp;nbsp;{ 36. return&amp;nbsp;date('d&amp;nbsp;M,&amp;nbsp;Y&amp;nbsp;H:i',&amp;nbsp;$timestamp); 37.&amp;nbsp;} 38. 39.&amp;nbsp;/* 40. *&amp;nbsp;Fungsi&amp;nbsp;untuk&amp;nbsp;menampilkan&amp;nbsp;pesan&amp;nbsp;yang&amp;nbsp;ditulis,&amp;nbsp;dimana&amp;nbsp;fungsi&amp;nbsp;ini&amp;nbsp;akan&amp;nbsp; 41. *&amp;nbsp;mengubah&amp;nbsp;simbol­simbol&amp;nbsp;html&amp;nbsp;agar&amp;nbsp;tidak&amp;nbsp;langsung&amp;nbsp;dicetak&amp;nbsp;melainkan 42. *&amp;nbsp;menggantinya&amp;nbsp;dengan&amp;nbsp;special&amp;nbsp;character. 43. *&amp;nbsp; 44. *&amp;nbsp;@param&amp;nbsp;$pesan&amp;nbsp;­&amp;nbsp;String&amp;nbsp;pesan 45. *&amp;nbsp;@return&amp;nbsp;String&lt;br&gt; &lt;br&gt; © 2008-2010 Rio Astamal – Hal. 66&lt;br&gt; &lt;br&gt; LUG STIKOM Surabaya&lt;br&gt; &lt;br&gt; Bab V – Contoh-contoh Aplikasi&lt;br&gt; &lt;br&gt; 46. */ 47.&amp;nbsp;function&amp;nbsp;display_mesg($pesan)&amp;nbsp;{ 48. //&amp;nbsp;ubah&amp;nbsp;kembali&amp;nbsp;&lt;br&gt;&amp;nbsp;ke&amp;nbsp;"\n"&amp;nbsp;agar&amp;nbsp;nantinya&amp;nbsp;tidak&amp;nbsp;ikut&amp;nbsp;di&amp;nbsp;convert&amp;nbsp;ke&amp;nbsp; 49. //&amp;nbsp;special&amp;nbsp;karakter 50. $pesan&amp;nbsp;=&amp;nbsp;str_replace("&lt;br&gt;",&amp;nbsp;"\n",&amp;nbsp;$pesan); 51. 52. //&amp;nbsp;konvert&amp;nbsp;HTML&amp;nbsp;karakter&amp;nbsp;seperti&amp;nbsp;(&amp;lt;,&amp;nbsp;&amp;gt;,&amp;nbsp;",&amp;nbsp;etc)&amp;nbsp;ke&amp;nbsp;bentuk&amp;nbsp;lain 53. $pesan&amp;nbsp;=&amp;nbsp;htmlentities($pesan); 54. 55. //&amp;nbsp;convert&amp;nbsp;balik&amp;nbsp;"\n"; 56. $pesan&amp;nbsp;=&amp;nbsp;nl2br($pesan); 57. 58. return&amp;nbsp;$pesan; 59.&amp;nbsp;} 60. 61.&amp;nbsp;/*&amp;nbsp; 62. *&amp;nbsp;Fungsi&amp;nbsp;untuk&amp;nbsp;menghitung&amp;nbsp;total&amp;nbsp;komentar&amp;nbsp;yang&amp;nbsp;ada&amp;nbsp;di&amp;nbsp;guestbook. 63. *&amp;nbsp; 64. *&amp;nbsp;@param&amp;nbsp;$file&amp;nbsp;(Optional)&amp;nbsp;­&amp;nbsp;String&amp;nbsp;nama&amp;nbsp;file,&amp;nbsp;default&amp;nbsp;value:&amp;nbsp;gb.txt 65. *&amp;nbsp;@return&amp;nbsp;integer 66. */ 67.&amp;nbsp;function&amp;nbsp;total_comment($file='gb.txt')&amp;nbsp;{ 68. //&amp;nbsp;1&amp;nbsp;baris&amp;nbsp;=&amp;nbsp;1&amp;nbsp;komentar&amp;nbsp;jadi&amp;nbsp;kita&amp;nbsp;hanya&amp;nbsp;perlu&amp;nbsp;menghitung&amp;nbsp;jumlah&amp;nbsp;baris 69. //&amp;nbsp;fungsi&amp;nbsp;file()&amp;nbsp;membuka&amp;nbsp;file&amp;nbsp;sebagai&amp;nbsp;array&amp;nbsp;of&amp;nbsp;lines 70. $baris&amp;nbsp;=&amp;nbsp;@file($file); 71. 72. if&amp;nbsp;($baris)&amp;nbsp;{ 73. return&amp;nbsp;count($baris); 74. } 75. return&amp;nbsp;0; 76.&amp;nbsp;} 77. 78.&amp;nbsp;?&amp;gt;&lt;br&gt; &lt;br&gt; 10. Simpan file tersebut. 11. Saatnya melakukan tes, arahkan browser anda ke alamat http://localhost/webpro/bab5/simple-guestbook/guestbook.php 12. Hasilnya akan terlihat seperti gambar 5.3 5.3.1 Penjelasan Script Simple Guestbook Cukup banyak yang harus dijelaskan karena banyak hal baru yang diterapkan pada aplikasi simple guestbook ini. Saran saya cukup sediakan beberapa butir aspirin jika kepala mulai terasa pusing :). Pada script telah banyak saya beri komentar jadi disini saya hanya menjelaskan sesuatu yang menurut saya penting. Fungsi file_get_contents(), file_put_contents(), dan file() Jika pada bab sebelumnya kita menulis atau membaca file menggunakan fungsi fopen maka disini sedikit berbeda. Untuk menulis file kita gunakan file_put_contents() sedangkan untuk membaca file digunakan fungsi file_get_contents() dan&amp;nbsp;file(). Penggunaan fungsi-fungsi tersebut hanya untuk memudahkan kita saja dalam memanipulasi file. Pembuatan Sebuah Fungsi Hal yang paling menarik dari aplikasi ini adalah terletak pada file functions.php karena pada file ini kita membuat fungsi sendiri. Jika selama ini kita hanya menggunakan fungsi-fungsi bawaan PHP&lt;br&gt; &lt;br&gt; © 2008-2010 Rio Astamal – Hal. 67&lt;br&gt; &lt;br&gt; LUG STIKOM Surabaya&lt;br&gt; &lt;br&gt; Bab V – Contoh-contoh Aplikasi&lt;br&gt; &lt;br&gt; seperti strlen(), trim(), dll maka disini kita membuat sebuah fungsi sesuai dengan kebutuhan pada aplikasi kita.&lt;br&gt; &lt;br&gt; Gambar 5.3: Tampilan simple guestbook Pada PHP sebuah fungsi dapat mengembalikan sebuah nilai atau hanya mengeksekusi beberapa rutin perintah saja. Jika sebuah fungsi mengembalikan nilai itu ditandai dengan adanya keyword return pada body fungsi tersebut. Fungsi-fungsi yang kita buat sebelumnya, semuanya mengembalikan nilai baik itu berupa string atau integer. 5.3.2 Improvisasi Simple Guestbook Improvisasi yang dapat dilakukan pada aplikasi simple guestbook diantarnya: • • •&lt;br&gt; &lt;br&gt; Fasilitas filter bad words (Petunjuk: str_replace dan array) Fasilitas block alamat IP (Petunjuk: IP didapatkan dari $_SERVER['REMOTE_ADDR']) Fasilitas hapus komentar (Petunjuk: Admin perlu memasukkan password, gunakan file() hilangkan baris yang akan dihapus dari array, lalu tulis ulang)&lt;br&gt; &lt;br&gt; 5.4 Simple Poll Aplikasi terakhir yang akan kita buat adalah sebuah polling sangat sederhana. User dapat memilih salah satu kandidat yang tersedia pada polling atau melihat hasil sementara. Disini tidak ada batasan apakah user sudah pernah memilih atau tidak, namanya juga “sangat sederhana” :). Langsung saja ke file-file yang akan dibuat.&lt;br&gt; &lt;br&gt; © 2008-2010 Rio Astamal – Hal. 68&lt;br&gt; &lt;br&gt; LUG STIKOM Surabaya&lt;br&gt; &lt;br&gt; Bab V – Contoh-contoh Aplikasi&lt;br&gt; &lt;br&gt; Direktori: htdocs/webpro/bab5/simple-poll Nama File&lt;br&gt; &lt;br&gt; Fungsi&lt;br&gt; &lt;br&gt; poll.php&lt;br&gt; &lt;br&gt; Halaman untuk memilih dan menampilkan daftar polling&lt;br&gt; &lt;br&gt; config.php&lt;br&gt; &lt;br&gt; Berisi konfigurasi dan beberapa fungsi&lt;br&gt; &lt;br&gt; Seperti biasa “untaian-untaian” code menanti untuk diketik :). 1. Buka teks edit dan buat dokumen baru 2. Simpa dengan nama poll.php lalu salin kode berikut. 1.&amp;nbsp;&amp;nbsp;$data)&amp;nbsp;{ 16. if&amp;nbsp;($pilihan&amp;nbsp;==&amp;nbsp;$nama)&amp;nbsp;{ 17. $kandidat[$nama]['suara']&amp;nbsp;+=&amp;nbsp;1; 18. } 19. } 20. 21. //&amp;nbsp;tulis&amp;nbsp;ulang&amp;nbsp;hasil&amp;nbsp;polling 22. tulis_poll($kandidat); 23. 24. //&amp;nbsp;kembalikan&amp;nbsp;ke&amp;nbsp;halaman&amp;nbsp;polling 25. header('Location:&amp;nbsp;poll.php?action=view'); 26. exit();&amp;nbsp;//&amp;nbsp;keluar&amp;nbsp;agar&amp;nbsp;kode&amp;nbsp;dibawah&amp;nbsp;tidak&amp;nbsp;dieksekusi 27.&amp;nbsp;} 28. 29.&amp;nbsp;?&amp;gt;&amp;nbsp; 31.&amp;nbsp;&lt;html&nbsp;xmlns="http: www.w3.org="" tr="" xhtml1"=""&gt;&amp;nbsp; 32.&amp;nbsp;&lt;head&gt; 33. &lt;title&gt;Simple&nbsp;Poll&lt;/title&gt; 34. &amp;lt;style&amp;nbsp;type="text/css"&amp;gt; 35. body&amp;nbsp;{ 36. margin:&amp;nbsp;0&amp;nbsp;0&amp;nbsp;0&amp;nbsp;10px; 37. padding:0; 38. font­family:&amp;nbsp;Verdana,&amp;nbsp;Arial,&amp;nbsp;Monospace; 39. font­size:&amp;nbsp;11px; 40. } 41. #poll­wrapper&amp;nbsp;{ 42. width:&amp;nbsp;600px; 43. border:&amp;nbsp;1px&amp;nbsp;solid&amp;nbsp;#ccc; 44. padding:&amp;nbsp;4px; 45. } 46. #poll­wrapper&amp;nbsp;div.bar&amp;nbsp;{&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 69&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 47. height:&amp;nbsp;20px; 48. display:&amp;nbsp;block; 49. background:&amp;nbsp;#9CE89C; 50. } 51. #poll­wrapper&amp;nbsp;div.bar&amp;nbsp;span&amp;nbsp;{ 52. position:relative; 53. top:&amp;nbsp;2px; 54. margin­left:&amp;nbsp;5px; 55. font­weight:&amp;nbsp;bold; 56. } 57. 58.&amp;nbsp;&amp;lt;/head&amp;gt; 59.&amp;nbsp;&amp;lt;body&amp;gt; 60. 61. &amp;lt;h2&amp;gt;Pemilihan&amp;nbsp;Lurah&amp;nbsp;Kedung&amp;nbsp;Baruk&amp;lt;/h2&amp;gt; 62. &amp;nbsp;$suara)&amp;nbsp;:&amp;nbsp;?&amp;gt; 63. &amp;lt;p&amp;gt;&amp;nbsp; 64. &amp;lt;a&amp;nbsp;href="poll.php?action=choose&amp;amp;pilihan=&amp;lt;?php&amp;nbsp;echo($nama);? rel="nofollow"&amp;gt;"&amp;gt;Pilih 65. 66. &amp;lt;/a&amp;nbsp;href="poll.php?action=choose&amp;amp;pilihan=&amp;lt;?php&amp;nbsp;echo($nama);?&amp;gt;&amp;lt;/p&amp;gt; 67. 68. 69. &amp;lt;p&amp;gt;&amp;lt;a&amp;nbsp;href="poll.php?action=view" rel="nofollow"&amp;gt;Lihat&amp;nbsp;Hasil&amp;nbsp;Sementara&amp;lt;/a&amp;nbsp;href="poll.php?action=view"&amp;gt;&amp;lt;/p&amp;gt; 70. 71. 72. 73. &amp;lt;h2&amp;gt;Hasil&amp;nbsp;Polling&amp;lt;/h2&amp;gt; 74. &amp;lt;div&amp;nbsp;id="poll­wrapper"&amp;gt; 75. &amp;nbsp;$data)&amp;nbsp;:&amp;nbsp; 76. $persen&amp;nbsp;=&amp;nbsp;persen($data['suara'],&amp;nbsp;$total_suara); 77. ?&amp;gt; 78. &amp;lt;div&amp;nbsp;class="bar"&amp;nbsp;style="width:&amp;lt;?php&amp;nbsp;echo&amp;nbsp;($persen);?&amp;gt;%;background:"&amp;gt; 79. &amp;lt;span&amp;gt;% 80. 81. &amp;lt;span&amp;gt; 82. 83. 84. &amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;Total&amp;nbsp;Suara:&amp;nbsp;&amp;lt;/p&amp;gt; 85. &amp;lt;p&amp;gt;&amp;lt;a&amp;nbsp;href="poll.php" rel="nofollow"&amp;gt;Kembali&amp;nbsp;ke&amp;nbsp;Polling&amp;lt;/a&amp;nbsp;href="poll.php"&amp;gt;&amp;lt;/p&amp;gt; 86. 87.&amp;nbsp;&amp;lt;script data-cfasync="false"&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/div&amp;nbsp;class="bar"&amp;nbsp;style="width:&amp;lt;?php&amp;nbsp;echo&amp;nbsp;($persen);?&amp;gt;&amp;lt;/div&amp;nbsp;id="poll­wrapper"&amp;gt;&amp;lt;/body&amp;gt; 88.&amp;nbsp;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 3. Simpan kembali file poll.php 4. Buat dokumen baru, lalu simpan dengan nama config.php 5. Salin code dibawah ini. 1.&amp;nbsp;&amp;nbsp;0,&amp;nbsp;'warna'&amp;nbsp;=&amp;gt;&amp;nbsp;'#90EE90'); 5.&amp;nbsp;$kandidat['Pak&amp;nbsp;Paijo']&amp;nbsp;=&amp;nbsp;array('suara'&amp;nbsp;=&amp;gt;&amp;nbsp;0,&amp;nbsp;'warna'&amp;nbsp;=&amp;gt;&amp;nbsp;'#FF8197'); 6.&amp;nbsp;$kandidat['Pak&amp;nbsp;Supeno']&amp;nbsp;=&amp;nbsp;array('suara'&amp;nbsp;=&amp;gt;&amp;nbsp;0,&amp;nbsp;'warna'&amp;nbsp;=&amp;gt;&amp;nbsp;'#ADD8E6'); 7. 8.&amp;nbsp;//&amp;nbsp;cek&amp;nbsp;apakah&amp;nbsp;file&amp;nbsp;data­poll.txt&amp;nbsp;ada&amp;nbsp;atau&amp;nbsp;tidak,&amp;nbsp;jika&amp;nbsp;tidak&amp;nbsp;maka 9.&amp;nbsp;//&amp;nbsp;buat&amp;nbsp;baru&amp;nbsp;dengan&amp;nbsp;default&amp;nbsp;nilai&amp;nbsp;0&amp;nbsp;untuk&amp;nbsp;setiap&amp;nbsp;kandidat 10.&amp;nbsp;$target&amp;nbsp;=&amp;nbsp;'data­poll.txt'; 11.&amp;nbsp;if&amp;nbsp;(!file_exists($target))&amp;nbsp;{ © 2008-2010 Rio Astamal – Hal. 70&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 12. tulis_poll($kandidat); 13.&amp;nbsp;}&amp;nbsp;else&amp;nbsp;{ 14. //&amp;nbsp;jika&amp;nbsp;sudah&amp;nbsp;ada&amp;nbsp;maka&amp;nbsp;update&amp;nbsp;nilai&amp;nbsp;dari&amp;nbsp;array&amp;nbsp;$kandidat 15. $content&amp;nbsp;=&amp;nbsp;file($target); 16. foreach&amp;nbsp;($content&amp;nbsp;as&amp;nbsp;$baris)&amp;nbsp;{ 17. //&amp;nbsp;split&amp;nbsp;kandidat&amp;nbsp;dan&amp;nbsp;suaranya 18. $data&amp;nbsp;=&amp;nbsp;explode('|',&amp;nbsp;$baris); 19. //&amp;nbsp;update&amp;nbsp;nilai 20. $kandidat[$data[0]]&amp;nbsp;=&amp;nbsp;array( 21. 'suara'&amp;nbsp;=&amp;gt;&amp;nbsp;(int)$data[1], 22. 'warna'&amp;nbsp;=&amp;gt;&amp;nbsp;trim($data[2]) 23. ); 24. } 25.&amp;nbsp;} 26. 27.&amp;nbsp;//&amp;nbsp;menghitung&amp;nbsp;total&amp;nbsp;suara 28.&amp;nbsp;$total_suara&amp;nbsp;=&amp;nbsp;0; 29.&amp;nbsp;foreach&amp;nbsp;($kandidat&amp;nbsp;as&amp;nbsp;$data)&amp;nbsp;{ 30. $total_suara&amp;nbsp;+=&amp;nbsp;$data['suara']; 31.&amp;nbsp;} 32. 33.&amp;nbsp;/* 34. *&amp;nbsp;Fungsi&amp;nbsp;untuk&amp;nbsp;menulis&amp;nbsp;data&amp;nbsp;polling&amp;nbsp;ke&amp;nbsp;file 35. *&amp;nbsp; 36. *&amp;nbsp;@param&amp;nbsp;$poll&amp;nbsp;­&amp;nbsp;Array&amp;nbsp;data&amp;nbsp;polling 37. *&amp;nbsp;@param&amp;nbsp;$file&amp;nbsp;(optional)&amp;nbsp;­&amp;nbsp;String&amp;nbsp;nama&amp;nbsp;file&amp;nbsp;target 38. *&amp;nbsp;@return&amp;nbsp;void 39. */ 40.&amp;nbsp;function&amp;nbsp;tulis_poll($poll,&amp;nbsp;$file='data­poll.txt')&amp;nbsp;{ 41. //&amp;nbsp;file&amp;nbsp;tidak&amp;nbsp;ada&amp;nbsp;maka&amp;nbsp;buat&amp;nbsp;baru 42. $content&amp;nbsp;=&amp;nbsp;''; 43. foreach&amp;nbsp;($poll&amp;nbsp;as&amp;nbsp;$nama&amp;nbsp;=&amp;gt;&amp;nbsp;$data)&amp;nbsp;{ 44. $content&amp;nbsp;.=&amp;nbsp;"$nama|{$data['suara']}|{$data['warna']}\n"; 45. } 46. $content&amp;nbsp;=&amp;nbsp;trim($content);&amp;nbsp;//&amp;nbsp;strip&amp;nbsp;whitespace&amp;nbsp;di&amp;nbsp;awal&amp;nbsp;dan&amp;nbsp;akhir 47. file_put_contents($file,&amp;nbsp;$content); 48.&amp;nbsp;} 49. 50.&amp;nbsp;/* 51. *&amp;nbsp;Fungsi&amp;nbsp;untuk&amp;nbsp;menentukan&amp;nbsp;jumlah&amp;nbsp;persen&amp;nbsp;yang&amp;nbsp;diperoleh&amp;nbsp;dari&amp;nbsp;setiap&amp;nbsp;data&amp;nbsp;yang 52. *&amp;nbsp;di­poll 53. *&amp;nbsp; 54. *&amp;nbsp;@param&amp;nbsp;$suara_didapat&amp;nbsp;­&amp;nbsp;Integer&amp;nbsp;banyaknya&amp;nbsp;suara&amp;nbsp;yang&amp;nbsp;didapat&amp;nbsp;oleh&amp;nbsp;suatu&amp;nbsp; item 55. *&amp;nbsp;@param&amp;nbsp;$total_suara&amp;nbsp;­&amp;nbsp;Integer&amp;nbsp;total&amp;nbsp;suara&amp;nbsp;dalam&amp;nbsp;polling 56. *&amp;nbsp;@return&amp;nbsp;integer 57. */ 58.&amp;nbsp;function&amp;nbsp;persen($suara_didapat,&amp;nbsp;$total_suara)&amp;nbsp;{ 59. if&amp;nbsp;($total_suara&amp;nbsp;==&amp;nbsp;0)&amp;nbsp;{ 60. return&amp;nbsp;0; 61. } 62. return&amp;nbsp;round(&amp;nbsp;($suara_didapat&amp;nbsp;/&amp;nbsp;$total_suara)&amp;nbsp;*&amp;nbsp;100&amp;nbsp;); 63.&amp;nbsp;} 64. 65.&amp;nbsp;?&amp;gt;&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 6. Simpan kembali file tersebut. 7. Arahkan browser anda alamat http://localhost/webpro/bab5/simple-poll 8. Pilih salah satu kandidat yang ingin anda pilih © 2008-2010 Rio Astamal – Hal. 71&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; 9. Ulangi beberapa kali untuk melihat hasil yang lebih nyata. 10. Output dari aplikasi ini akan terlihat kurang lebih seperti gambar 5.4 dan 5.5&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 5.4: Pemilihan Kandidat&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Gambar 5.5: Hasil Polling 5.4.1 Penjelasan Script Simple Poll Hal baru yang kita dapatkan pada aplikasi simple poll adalah penggunaan global variabel $_GET. Jika sebelumnya anda hanya mengenal variabel global $_POST maka pada aplikasi ini kita memanfaatkan $_GET untuk membuat multiview file (satu file banyak tampilan). Nilai dari variabel $_GET adalah array dari query string pada URL. Lihat contoh dibawah. http://localhost/webpro/bab5/simple-poll/poll.php?action=choose&amp;amp;pilihan=X Untuk mengambil nilai dari parameter action dan pilihan kita dapat menggunakan variabel $_GET sebagai berikut: © 2008-2010 Rio Astamal – Hal. 72&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Bab V – Contoh-contoh Aplikasi&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; $action&amp;nbsp;=&amp;nbsp;$_GET['action']; $pilihan&amp;nbsp;=&amp;nbsp;$_GET['pilihan'];&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Jadi dapat disimpulkan bahwa passing parameter yang tidak terlalu kompleks dan sensitif antar halaman akan lebih mudah menggunakan global variabel $_GET dibandingkan dengan $_POST.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 73&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Daftar Pustaka&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; Daftar Pustaka Achour, Mehdi., Contributors. (2010). PHP Manual. USA: The PHP Documentation Group. Welling, Luke., Thomson, Laura. (2005). PHP and MySQL Web Development Third Edition. Indianapolis: Sams Publishing.&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; © 2008-2010 Rio Astamal – Hal. 74&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; LUG STIKOM Surabaya Hall of Fame 2010 AZWAR ZAINURI&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; MIRZA EKA&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ARIEF WICAKSONO&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; IRIANTO BUNGA&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; MITFAH FARIDL&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; EKO KURNIAWAN&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; RIO ASTAMAL&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; ELVIN ALMUTTAKIN&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; SEMOGA SELALU KOMPAK!&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt; &amp;lt;div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"&amp;gt; &amp;lt;div class="modal-dialog"&amp;gt; &amp;lt;div class="modal-content"&amp;gt; &amp;lt;form role="form" method="post" action="https://adoc.pub/report/modul-pemrograman-php" style="border:none"&amp;gt; &amp;lt;div class="modal-header"&amp;gt; &amp;lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&amp;gt;×&amp;lt;/button&amp;gt; &amp;lt;h4 class="modal-title"&amp;gt;Report "MODUL PEMROGRAMAN PHP"&amp;lt;/h4&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class="modal-body"&amp;gt; &amp;lt;div class="form-group"&amp;gt; &amp;lt;label&amp;gt;Your name&amp;lt;/label&amp;gt; &amp;lt;input type="text" name="name" required="required" class="form-control" /&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class="form-group"&amp;gt; &amp;lt;label&amp;gt;Email&amp;lt;/label&amp;gt; &amp;lt;input type="email" name="email" required="required" class="form-control" /&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class="form-group"&amp;gt; &amp;lt;label&amp;gt;Reason&amp;lt;/label&amp;gt; &amp;lt;select name="reason" required="required" class="form-control"&amp;gt; &amp;lt;option value&amp;gt;-Select Reason-&amp;lt;/option&amp;gt; &amp;lt;option value="pornographic" selected="selected"&amp;gt;Pornographic&amp;lt;/option&amp;gt; &amp;lt;option value="defamatory"&amp;gt;Defamatory&amp;lt;/option&amp;gt; &amp;lt;option value="illegal"&amp;gt;Illegal/Unlawful&amp;lt;/option&amp;gt; &amp;lt;option value="spam"&amp;gt;Spam&amp;lt;/option&amp;gt; &amp;lt;option value="others"&amp;gt;Other Terms Of Service Violation&amp;lt;/option&amp;gt; &amp;lt;option value="copyright"&amp;gt;File a copyright complaint&amp;lt;/option&amp;gt; &amp;lt;/select&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class="form-group"&amp;gt; &amp;lt;label&amp;gt;Description&amp;lt;/label&amp;gt; &amp;lt;textarea name="description" required="required" rows="3" class="form-control" style="border:1px solid #cccccc"&amp;gt;&amp;lt;/textarea&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class="form-group"&amp;gt; &amp;lt;div style="display:inline-block"&amp;gt; &amp;lt;div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script src="https://www.google.com/recaptcha/api.js"&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class="modal-footer"&amp;gt; &amp;lt;button type="button" class="btn btn-default" data-dismiss="modal"&amp;gt;Close&amp;lt;/button&amp;gt; &amp;lt;button type="submit" class="btn btn-primary"&amp;gt;Send&amp;lt;/button&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/form&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); &amp;lt;/script&amp;gt; &amp;lt;footer class="footer" style="margin-top:60px"&amp;gt; &amp;lt;div class="container-fluid"&amp;gt; Copyright © 2022 ADOC.PUB. All rights reserved. &amp;lt;div class="pull-right"&amp;gt; &amp;lt;span&amp;gt;&amp;lt;a href="https://adoc.pub/about"&amp;gt;About Us&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt; | &amp;lt;span&amp;gt;&amp;lt;a href="https://adoc.pub/privacy"&amp;gt;Privacy Policy&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt; | &amp;lt;span&amp;gt;&amp;lt;a href="https://adoc.pub/term"&amp;gt;Terms of Service&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt; | &amp;lt;span&amp;gt;&amp;lt;a href="https://adoc.pub/copyright"&amp;gt;Copyright&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt; | &amp;lt;span&amp;gt;&amp;lt;a href="https://adoc.pub/contact"&amp;gt;Contact Us&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt; | &amp;lt;span&amp;gt;&amp;lt;a href="https://adoc.pub/cookie_policy"&amp;gt;Cookie Policy&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/footer&amp;gt; &amp;lt;div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&amp;gt; &amp;lt;div class="modal-dialog" role="document"&amp;gt; &amp;lt;div class="modal-content"&amp;gt; &amp;lt;div class="modal-header"&amp;gt; &amp;lt;button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"&amp;gt;&amp;lt;span aria-hidden="true"&amp;gt;×&amp;lt;/span&amp;gt;&amp;lt;/button&amp;gt; &amp;lt;h4 class="modal-title" id="add-note-label"&amp;gt;Sign In&amp;lt;/h4&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class="modal-body"&amp;gt; &amp;lt;form action="https://adoc.pub/login" method="post"&amp;gt; &amp;lt;div class="form-group"&amp;gt; &amp;lt;label class="sr-only" for="email"&amp;gt;Email&amp;lt;/label&amp;gt; &amp;lt;input class="form-input form-control" type="text" name="email" id="email" value placeholder="Email" /&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class="form-group"&amp;gt; &amp;lt;label class="sr-only" for="password"&amp;gt;Password&amp;lt;/label&amp;gt; &amp;lt;input class="form-input form-control" type="password" name="password" id="password" value placeholder="Password" /&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class="form-group"&amp;gt; &amp;lt;div class="checkbox"&amp;gt; &amp;lt;label class="form-checkbox"&amp;gt; &amp;lt;input type="checkbox" name="remember" value="1" /&amp;gt; &amp;lt;i class="form-icon"&amp;gt;&amp;lt;/i&amp;gt; Remember me &amp;lt;/label&amp;gt; &amp;lt;label class="pull-right"&amp;gt;&amp;lt;a href="https://adoc.pub/forgot"&amp;gt;Forgot password?&amp;lt;/a&amp;gt;&amp;lt;/label&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;button class="btn btn-primary btn-block" type="submit"&amp;gt;Sign In&amp;lt;/button&amp;gt; &amp;lt;/form&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script&amp;gt; window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); &amp;lt;/script&amp;gt; &amp;lt;script src="https://adoc.pub/assets/js/jquery-ui.min.js"&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css" /&amp;gt; &amp;lt;script&amp;gt; $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); &amp;lt;/script&amp;gt; &amp;lt;div id="ADOCPUB_cookie_box" style="z-index:99999;border-top:1px solid #fefefe;background:#FFC107;width:100%;position:fixed;padding:5px 15px;text-align:center;left:0;bottom:0"&amp;gt; Our partners will collect data and use cookies for ad personalization and measurement. &amp;lt;a href="https://adoc.pub/cookie_policy" target="_blank"&amp;gt;Learn how we and our ad partner Google, collect and use data&amp;lt;/a&amp;gt;. &amp;lt;a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;"&amp;gt;Agree &amp;amp; close&amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); &amp;lt;/script&amp;gt; &amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/a&amp;nbsp;href="'&amp;nbsp;.&amp;nbsp;$web&amp;nbsp;.&amp;nbsp;'"&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/input&amp;nbsp;type="text"&amp;nbsp;name="sticker"&amp;nbsp;value="0"&amp;nbsp;size="4"&amp;nbsp;&amp;gt;&amp;lt;/form&amp;nbsp;action="form­proses.php"&amp;nbsp;method="post"&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/div&amp;nbsp;id="kotak"&amp;nbsp;style="display:block"&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/html&amp;nbsp;xmlns="http:&amp;gt;&amp;lt;/input&amp;nbsp;type=”button”&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type=”button”&amp;nbsp;value=”go&amp;nbsp;&amp;gt;&amp;lt;/img&amp;nbsp;border=”1”&amp;nbsp;&amp;gt;&amp;lt;/img&amp;nbsp;border=1&amp;gt;&amp;lt;/br&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type=”radio”&amp;nbsp;checked=”checked”&amp;nbsp;&amp;gt;&amp;lt;/input&amp;nbsp;type=”radio”&amp;nbsp;checked&amp;gt;&amp;lt;/input&amp;nbsp;type="reset"&amp;nbsp;value="reset"&amp;gt;&amp;lt;/input&amp;nbsp;type="submit"&amp;nbsp;value="daftar"&amp;gt;&amp;lt;/option&amp;nbsp;value="mimpi"&amp;gt;&amp;lt;/option&amp;nbsp;value="google"&amp;gt;&amp;lt;/option&amp;nbsp;value="kuburan"&amp;gt;&amp;lt;/input&amp;nbsp;type=”text”&amp;nbsp;size=”16”&amp;nbsp;maxlength=”16”&amp;gt;&amp;lt;/form&amp;nbsp;action=”file.php”&amp;nbsp;method=”post”&amp;gt;&lt;/head&gt;&lt;/html&nbsp;xmlns="http:&gt;&lt;/a&nbsp;href="'&nbsp;.&nbsp;$web&nbsp;.&nbsp;'"&gt;&lt;/html&gt;</div></div></div></div></div></div></div></div></body></html>