Desain dan Pemograman Website

Disain dan Pemograman Website
Oleh : Dr. AfzeriDaftar Isi :
Pendahuluan : Learning Outcome
Pengantar Pada Website 1
Pemakaian HTML 10
Form dan Web Editor 17
Dasar dasar Skrip Java 28
XML dan XHTML 38
Menggunakan CSS 54
PHP dan MySQL 60
Membuat Website yang Berkualitas 90
Apendik 98
Disain dan Pemograman Web
Objektif
Mata kuliah ini memberikan skil dan pengetahuan untuk perancangan website melalui
konten statik dan dinamik. Melalui ekplorasi pada pembuatan web dasar , mahasiswa
mampu membuat halaman web menggunakan tool yang umum dalam pengembangan
web.
Pada akhir dari kelas ini mahasiswa akan mampu :
1. Melakukan penanganan web server untuk setup dan uploading file.
2. Membuat Halaman web statik menggunakan HTML secara manual dan melalui
web editor.
3. Menggunakan fungsi-fungsi dasar dalam pemograman Javascript dan php.
4. Menggunakan Javascript, PHP dan HTML untuk membuat halaman web
interaktif
5. Membuat form dan pengendalian web dinamis melalui database.
6. Menggunakan Cascading Style Sheets (CSS) untuk perancagan halaman web.Disain dan Pemograman Web
Bab 1 : Pengantar pada Website
Outcome :
Setelah mempelajari bab ini mahasiswa mampu:
1. Mengetahui sejarah dan kegunaan dari website.
2. Mengenal bentuk bentuk rancangan tampilan web secara umum.
3. Menyiapkan server web.
4. Mengenal bentuk dasar dari bahasa html.
1. Apa itu Website
Situs web (Website) adalah satu set halaman web yang berisi kandungan media teks, video, musik, audio, gambar, imej dan
sebagainya. Situs web ditempatkan sekurangnya pada satu server web yang bisa diakses dalam network seperti Internet atau
dalam sebuah netwok pribadi (LAN) melalui alamat Internet (Internet address). Semua website yang bisa diakses oleh
publik dikelompokkan dalam World Wide Web (www). Kata kata World Wide Web atau dengan singkatan "WWW" atau
“Web") berarti media informasi global dimana pengguna bisa membaca dan menulis melaui komputer ( juga dengan Tablet
PC, smart phone) yang terhubung ke Internet.
Teknologi yang bisa dipakai untuk terhubung ke internet dapat berupa Local Area Networks(LAN), Dial-up access (saluran
Telepon), Broadband access atau Wireless broadband access. Gambar 1-1 memperlihatkan perangkat komputer yang
terhubung ke internet melalui koneksi LAN dan wireless. Komputer yang terhubung ke Internet diberi nomor pengenal yang
disebut dengan IP address. IP address bisa diset otomatis oleh sistim (dynamic IP address) atau diset secara manual.
Gambar 1-1 Ilustrasi Koneksi komputer ke Internet
Gambar 1-2 Mengakses halaman web pada Server
Halaman web (webpage) adalah sebuah dokumen yang ditulis dalam teks yang disisipi dengan format instruksi yang disebut
dengan Hypertext Markup Language (HTML, XHTML). Halaman halaman web diakses dan dikirim dengan protokol HTTP
( Hypertext Transfer Protocol) seperti diilistrasikan pada gambar 1-2. Untuk menambah keamanan dan kerahasiaan dalam
1Disain dan Pemograman Web
pengiriman data kadang kadang dilakukan enkripsi (HTTP Secure/ HTTPs). Pengguna (web browser) memaparkan isi
halaman web sesuai dengan instruksi dari HTML melalui terminal pemaparan (Mozila, Explorer dsb).
Halaman web biasanya diakses dari Uniform Resource Locator (URL) disebut homepage. Beberapa halaman web
memerlukan pendaftaran terlebih dahulu untuk bisa dilihat sebagian atau seluruh kandungan isinya. Beberapa contoh dari
halaman web yang memerlukan pendaftaran adalah situs web bisnis, sebagian websites pemberitaan (kompas.com,
detik.com), academic journal websites, permainan (game) websites, situs berbagi file (file-sharing websites), message
boards, web-based email (gmail, yahoo), social networking websites (facebook, twiter), websites penyedia data real-time
stock market, dan websites menyediakan berbagai macam servis (e.g., fasilitas penyimpanan files dan lain lain). Gambar 1-3
adalah salah satu contoh halaman web yang di lihat menggunakan browser mozila.
Gambar 1-3 Halaman Web elearning stkip surya
2. Sejarah Website
Konsep dari web sudah dimulai sejak tahun 1946 yang dikenal dengan home-based global information system. Tahun
1979 sampai 1991 merupakan era pengembangan World Wide Web. Pada 1984 dikembangkan pilot project oleh CERN
untuk instalasi dan evaluasi protokol TCP/IP pada beberapa non-Unix machines. Pada tahun 1990 CERN sudah menjadi
Internet site terbesar di Eropa.
Pada 1990, Berners-Lee membangun tool yang diperlukan untuk bekerjanya web HyperText Transfer Protocol (HTTP),
HyperText Markup Language (HTML), Web browser (disebut juga WorldWideWeb, yang juga berfungsi sebagai editor).
HTTP server software pertama yang kemudian dikenal dengan CERN httpd), web server pertama (http://info.cern.ch) juga
dikembangkan pada tahun bersamaan.
Tahun 1992 sampai 1995 merupakan tahun pertumbuhan Web. Protokol populer dikembangkan hypertex menu untuk akses
yang lebih baik ke sistem file. Beberapa sites memungkinkan pengguna mengirim teks penuh yang kemampuannya
dikembangkan oleh mesin pencari. Browser grafik juga dikembangkan sehingga fitur seperti embedded graphics,
scripting, dan gambar animasi bisadilayari.
3. Penggunaan website
Saat ini website sudah banyak digunakan untuk berbagai keperluan. Mulai untuk sumber berita, informasi kerja juga untuk
keperluan bisnis dan akses ke berbagai media. Hampir semua instansi pemerintah dan swasta sudah mempunyai halaman
web sendiri dengan berbagai keperluan. Mesin pencari merupakan salah satu tool yang paling banyak digunakan orang.
Google merupakan mesin pencari yang sangat populer. Berbagai macam alamat situs bisa ditemukan dengan mudah hanya
dengan memasukkan beberapa kata kunci kedalam mesin pencari. Dengan adanya mesin pencari menjadikan penggunaan
situs web semakin mudah.
4. Contoh-contoh website
2Disain dan Pemograman Web
Berbagai website dengan bermacam-macan disain dikembangkan sesuai dengan selera dan jenis informasi yang disajikan.
Berikut adalah beberapa website dengan uraian ringkas fitur dan tampilannya.
Website dikti : http://dikti.go.org (Gambar 1.4)
Gambar 1.4
Tampilan halaman utama web ini memiliki beberapa kelompok komponen:
1. Baner yang terdapat pada bagian paling atas
2. Menu menu
3. Gambar SlideshowWrapper
Gambar 1.5
Website Mesin Pencari : Google.com
3Disain dan Pemograman Web
Gambar 1.6
Tampilan halaman utama google lebih sederhana namun keunggulan website ini adalah pada program yang ada
dibelakangnya untuk melakukan pencarian.
Website sebuah bank (Gambar 1.7). Website pada bank selain beri informasi tentang bank tersebut juga mempunyai fasilitas
bagi nasabah untuk mengakses akon nya yang disebut dengan internet banking. Untuk masuk kehalaman internet banking
ini, pengguna harus terdaftar dan masuk melalui nama pengguna dan password yang disediakan.
Gambar 1.7
5. Tool yang diperlukan dalam memakai Website
Ada dua kategori pemakai website ini pertama adalah kelompok yang membuat atau menyajikan website dan yang kedua
adalah kelompok yang memanfaatkan informasi yang tersedia di website. Dalam pelajaran ini kita akan memfokuskan
menjadi penyaji atau pembuat website.
4Disain dan Pemograman Web
6. Melihat / mengunjungi Web
Untuk melihat halaman web diperlukan browser web. Berbagai macam browser web dekombangkan oleh berbagai
perusahaan diantaranya Firefox, Explorer, Netscape, Opera, GoogleCrome. Secara umum setiap browser berkemampuan
sama dalam menampilkan halaman web. Namun ada beberapa browser web bisa menampilkan lebih baik untuk fitur
tertentu.
Gambar 1.8 Logo Berbagai aplikasi browser web
Explorer, Mozilla dan Google Chrome adalah beberapa browser web yang popular saat ini, sedangkan Netscape popular
pada era 1990 an.
Mozilla
Netscape
Explorer
Gambar 1.9 Logo Website Populer
7. Membuat Web
Website dibuat agar orang bisa mendapat informasi yang diperlukan. Berbagai macam informasi dan fasilitas dilakukan
melalui jaringan situs web. Berbagai fasilitas tersedia untuk membuat web namun fasilitas tersebut hanya digunakan sesuai
dengan bentuk web yang dibuat. Untuk itu sebelum memulai membuat web harus terlebih dahulu menentukan bentuk
informasi apa yang akan ditampilkan.
Kenapa orang perlu mengunjungi website? Secara umum orang melihat halamat web dengan dua alasan utama:
1.
2.
Menemukan informasi yang mereka inginkan. Ini bisa berbagai informasi mulai dari seorang peljar hanya ingin
mencari gambar untuk tugas sekolah, mencari informasi saham atau untuk menemukan restoran yang terdekat.
Menyelesaikan tugas. Berbagai bentuk informasi yang berhubungan dengan pekerjaan juga bisa dilakukan melalui
web. Pengunjung bisa saja ingin membeli barang yang lagi laris, mendownload software atau berpartisipasi dalam
diskusi online tentang hobi mereka.
Web bisa dimuat dengan bentuk yang sederhana sampai yang rumit. Yang perlu diperhatikan dalam membuat web adalah
5Disain dan Pemograman Web
bahwa website bukan dibuat untuk diri sendiri. Pembuat tentu sudah tahu tentang isi halaman webnya. Website dibuat untuk
pengunjung untuk mendapatkan isi yang dia inginkan. Isi dan tampilan web harus sesuai dengan harapan pengunjung.
8. Hosting (Penempatan Web)
Penempatan web dilakukan pada server yang mempunyai fasilitas web server. Server web dapat merujuk baik pada
perangkat keras ataupun perangkat lunak yang menyediakan layanan akses kepada pengguna melalui protokol komunikasi
HTTP atau HTTPS. Fungsi utama sebuah server web adalah untuk mentransfer berkas atas permintaan pengguna (pada web
browser) melalui protokol komunikasi yang telah ditentukan. Sebuah halaman web dapat terdiri atas berkas teks, gambar,
video, dan lainnya. Server web berfungsi untuk mentransfer seluruh aspek pemberkasan dalam sebuah halaman web yang
terkait termasuk teks, gambar, video, atau lainnya. Server web merupakan sebuah komputer yang didalamnya terinstal
aplikasi webserver. Contoh aplikasi webserver adalah Apache.
Pengguna, melalui aplikasi web meminta layanan atas berkas ataupun halaman web yang terdapat pada sebuah server web,
kemudian server sebagai manajer layanan tersebut akan merespon balik dengan mengirimkan halaman dan berkas-berkas
pendukung yang dibutuhkan, atau menolak permintaan tersebut jika halaman yang diminta tidak tersedia.
saat ini umumnya server web telah dilengkapi pula dengan mesin penerjemah bahasa skrip yang memungkinkan server web
menyediakan layanan situs web dinamis dengan memanfaatkan pustaka tambahan seperti PHP, ASP. Secara umum server
web berfungsi untuk menempatkan situs web, namun pada prakteknya penggunaannya diperluas sebagai tempat
penyimpanan data ataupun untuk menjalankan sejumlah aplikasi kelas bisnis.
Penempatan pada server lokal
Server local adalah computer yang tidak terhubung ke jaringan umum. Biasanya server local diakses melalui alamat IP
misalnya 192.168.0.1. Sistim operasi server bisa menggunakan Microsoft windows atau Linux.
9. Instalasi Web Server
Server web adalah sebuah program yang bertugas untuk merespon permintaan yang beragam dari browser melalui protocol
HTTP atau HTTPS. Skema operasi dari server web adalah seperi loop berikut :
1. Menunggu permintaan yang ditentukan melalui port TCP (untuk HTTP adalah 80)
2. Menerima permintaan.
3. Melihat isi yang terdapat dalam requeat string
4. Mengirim resource dengan koneksi yang sama dimana perminttan diterima.
5. Kembali ke urutan 2.
Semua web server harus sekurang kurangnya bisa melayani file-file statis yang ditempatkan pada lokasi tertentu pada
hardisk. Kebanyakan webserver mengizinkan untuk menambah direktori-direktori untuk dilayani.
Webserver modern memungkinkan untuk pengontrolan keamanan dan autentikasi pengguna dari program server. Cara
pengontrol yang simple adalah menggunakan file .htaccess.
Pelayanan file static
Semua server web harus sekurang kurangnya mampu melayani file static yang terletak dalam bagian tertentu dari harddisk.
Satu keperluan yang paling esensial adalah bisa menetapkan bagian mana dari disk yang akan dilayani. Kebanyakan server
web mengizinkan bagian laindaru disk untuk digunakan.
6Disain dan Pemograman Web
Konten dinamis
Satu dari banyak aspek penting dalam memilih server web adalah kemampuan yang ditawarkan untuk menangani konten
dinamis. Kebanyakan server web mendukung beberapa bahasa pemograman seperti PHP, JSP, ASP, CGI dan lain lain.
Sangat direkomendasikan server web yang digunakan mendukung bahasa bahasa tersebut. PHP merupakan salah satu
bahasa yang paling banyak penggunanya.
Server Apache
Apache merupakan sebuah server web yang robust, free software yang mempunyai fitur sejajar dengan server komersial.
Proyek ini disupervisi dan dipimpin oleh sekelompok volentir dikenal sebagai Apache Group. Apache server dipublikasikan
pertama kali pada tahun 1995 yang dikembangkan dari server NCSA.
Menginstal Apache
Ada dua cara untuk menginstall Apache; melalui kompilasi source code atau menginstal paket untuk operating yang sesuai.
Instalasi Web Server pada Ubuntu Linux
Pada umumnya server Apache sudah terinstall dalam aplikasi linux. Tetapi perlu untuk menginstal kembali kalau
sebelumnya belum ada, mengganti ke versi yang baru atau ada problem dari file.
pada terminal ketik sudo apt-get install apache2
maka server web akan terinstal pada komputer anda.
Mengkonfigurasi Apache
Konfigurasi mungkin diperlukan setelah instalasi. Secara default, Apache dating dengan konfigurasi minimum untuk
booting server pada port default (port 80) dan melayani semua file dari folder yang ditentukan pada pengarah configurasi
(configuration diective) DocumentRoot. File configurasi Apache dinamai httpd.conf. File httpd.conf berbentuk teks (ASCII)
yang berisi pengarah konfigurasi Apache.
Redhat/Fedora
rpm -ihv httpd-x.x.x.rpm
You will also need to install any additional modules, such as:
• mod_auth_*
• mod_python
• mod_jk2
• mod_perl
• mod_ssl
• php
• etc.
(Tugas : lakukan instalasi server web pada computer anda)
Lokasi dari halaman web pada server apace adalah : var/www.
Untuk mengakses web yang ada pada komputer anda dilakukan dengan mengetikkan http://localhost melalui web browser
(seperti Mozila).
Konfigurasi Apache
Setelah instalasi kita perlu malakukan konfigurasi. Secara default, Apache dating dengan konfigurasi minimum untuk boot
melalui port TCP (port 80) dan melayani dari direktori. File konfigurasi Apache disebut httpd.conf. The httpd.conf file
is an ASCII file containing Apache's configuration directives.
7Disain dan Pemograman Web
2.3.1. Configuration file structure
2.3.2. Global configuration directives
2.3.3. Main directives
2.3.4. Section directives
2.3.5. Virtual servers
Tugas :
Konfigurasi server web yang telah diinstall untuk merespon permintaan HTTP pada port 123.
Untuk tugas ini lakukan :
edit file /home/carlesm/apache/conf/httpd.conf
ganti papameter berikut :
:
Listen 123
ServerAdmin admin@uoc.edu
DocumentRoot "/home/carlesm/web"
<Directory "/home/carlesm/web">
Options Indexes FollowSymLinks
AllowOverride None
Order allow,deny
Allow from all
</Directory>
ScriptAlias /cgi-bin/ "/home/carlesm/cgi/"
<Directory "/home/carlesm/cgi">
AllowOverride None
Options None
Order allow,deny
Allow from all
</Directory>
Menguji web server
Untuk memastikan aplikasi web server yang telah terinstal bekerja dengan baik, periksa dengan menjalankan sebuah file
html yang ada di direktori (folder) web.
Sebagai contoh: Buat sebuah file web menggunakan Open office writer dan kemudian simpan file tersebut pada folder web
(/var/www) dengan ektensi html (save as html), misalnya test.html (lihat gambar berikut) :
Gambar 1.10
Catatan:
Agar file tersebut bisa ditulis oleh semua user, ubah dulu mode direktori www dengan cara berikut
~$ cd /var/
/var$ sudo chmod 777 www
8Disain dan Pemograman Web
Buka file test.html tersebut melalui web browser dengan mengetikkan alamat http://localhost/test.html. Hasilnya akan
muncul seperti gambar berikut. Apabila browser menampilkan isis file sesuai dengan yang dibuat berarti file telah bekerja.
Gambar 1.11
10. Latihan
1.
2.
3.
11.
1.
2.
3.
4.
Menggunakan Mesin Pencari. Dengan menggunakan satu kata kunci (misal STKIP) buka salah satu halaman web
yang ditemukan dari hasil pencarian tersebut.
Mengamati tampilan sebuah web. Sebutkan media dan fasilitas apa saja yang ditampilkan dari halaman web yang
anda amati (Video, gambar, teks, menu, slide show)
Melihat kode dari web (page source).
1. Dengan menggunakan Mozila Pilih view->Page source untuk melihat code yang digunakan oleh halaman web
tersebut. Simbol apa yang sering dijumpai dalam kode tersebut.
2. Copy dan simpan kode tersebut dan buka kembali dengan web browser (File->Open). Apakah tampilannya
masih sama dengan aslinya. Kalau tidak bagian manakah yang hilang?.
3. Kembali amati kode web tersebut. Terka salah satu arti dari teks yang sering muncul dalam kode tersebut.
Pertanyaan
Apa guna aplikasi Apache2
Dimana lokasi file web pada server?
Apakah tipe (ekstensi) dari file web?
Apa kepanjangan dari HTTP?
9Disain dan Pemograman Web
Bab 2 : Pemakaian HTML
Outcome :
Setelah mempelajari mahasiswa mampu:
1. Membuat web sederhana menggunakan bahasa html
2. Belajar membuat web melalui informasi dari internet
3. Mengatur tampilan web dengan menu, latar belakang dan bentuk huruf.
Website atau disingkat web atau dikenal juga dengan nama homepage merupakan sarana penyampaian
informasi melalui Internet. Berbagai macam website kini telah meramaikan dunia maya dengan
berbagai macam kandungan informasi seperti berita, iklan perusahaan, ilmu pengetahuan ataupun
informasi pribadi seseorang.
Bahasa yang umum dipakai untuk membuat halaman website ini salah satunya adalah Hyper Text
Mark up Language yang dikenal dengan singkatan HTML. Perintah perintah yang dipakai dalam
HTML ini dinamakan tag. Tag-tag yang dipakai dalam sebuah web dapat dilihat dengan mengeklik tab
View Source dalam web browser yang dipakai.
Contoh berikut adalah source dari sebuah halaman web dengan tampilan seperti Gambar 2.1
Gambar 2. 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<TITLE></TITLE>
<META NAME="GENERATOR" CONTENT="OpenOffice.org 3.2 (Linux)">
<META NAME="CREATED" CONTENT="20111018;10120800">
<META NAME="CHANGED" CONTENT="20111018;10372400">
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY LANG="en-US" DIR="LTR">
<P ALIGN=CENTER STYLE="margin-bottom: 0in; background: #cccccc">Internal
Website Afzeri</P>
<h2>
<P><A HREF="PengenalanKomputer1/index.php">Pengenalan Komputer 1</A>
10Disain dan Pemograman Web
<P><A HREF="DisainDanPemogramanWeb/index.php">Disain dan Pemograman Web</A>
</h2>
</BODY>
</HTML>
Contoh 1: Source HTML
Apakah HTML?
HTML adalah bahasa untuk penjabaran halaman web digunakan untuk membuat dokumen dengan
struktur hiperteks. HTML juga bisa digunakan untuk membuat dokumen multimedia.
 HTML singkatan dari Hyper Text Markup Language
 HTML bukanlah bahasa pemograman, ini adalah teks yang di tambah-tambah (markup)
 HTML menggunakan tags untuk menjabarkan halaman web.
Ekstensi File manakah yang dipakai .HTM atau .HTML?
Bila anda menyimpan file HTML, anda bisa menyimpannya dengan ekstensi .htm atau .html.
Keduanya tidak ada bedanya. HTML juga bisa digunakan untuk membuat file multimedia yaitu
informasi yang mengandung tidak hanya teks tetapi juga berupa imej, video, suara atau juga sub
program aktif (plig-ins, applets).
Beberapa contoh tag yang dipakai untuk membangun sebuah halaman website adalah <html>,
<head>, <title>, <body>, </html>, </head>, </title>, </body> . Pada contoh di atas terlihat bahwa
setiap tag mempunyai pasangan yang ditambahi dengan tanda slash (/). Perlu diingat bahwa tidak
semua tag mempunyai pasangan seperti contoh di atas, ada tag tag yang tidak mempunyai pasangan
seperti tag <p> yang digunakan untuk memisahkan paragraf.
Tugas : Tunjukkan tag-tag dari source website pada contoh 1 diatas serta pasangannya?
Software untuk membuat Web
Dokumen HTML adalah berupa teks datar (tanpa ada format tertentu) sehingga pada dasarnya bisa
diedit menggunakan editor teks.
Website bisa dibuat dengan bantuan software web developer seperti Microsoft Frontpage atau
Macromedia Dreamweaver, Kompozer atau Visual Studio.
KompoZer merupakan aplikasi membuat web gratis untuk sistim operasi Ubuntu. Aplikasi ini dapat
diinstal dengan mengetik sudo apt-get install kompozer melalui terminal Ubuntu. Gambar 2
menampilkan aplikasi kompozer (Pembuatan web dengan komposer akan dipelajari pada bab
selanjutnya).
Web juga bisa dibuat langsung dari aplikasi pengolah kata seperti Microsoft word atau Open office
writer dengan menyimpan file sabagai format html. Namun teks editor yang umum Notepad, Internet
11Disain dan Pemograman Web
Explorer, atau web browser sejenis bisa dipakai. Untuk latihan membuat web secara online bisa
dilakukan melalui http://www.w3schools.com/html/.
Gambar 2
Struktur Halaman Web
Sebuah halaman web terdiri dari dua bagian, yaitu bagian kepala dan badan. Bagian kepala memberi
nama website, sedangkan bagian badan berisi halaman inti sebuah web. Bagian kepala dan bagian
badan ini nantinya akan membentuk sebuah kesatuan halaman website yang akan kita buat.
<html>
<head>
<title>
Website Saya
</title>
</head>
<body>
Selamat datang di website saya yang pertama
</body>
12Disain dan Pemograman Web
</html>
Kalimat atau kata yang kita tuliskan di antara tag <title> </title> merupakan judul atau deskripsi dari
website yang dibuat. Sedangkan kalimat di antara <body> </body> merupakan isi dari website.
Paragraf
Tag paragraph <p> digunakan un tuk memisahkan alinea. HTML mengabaikan pemotong baris (line
breaks) yang dimasukkan menggunakan tombol enter pada file asli. Sebuah paragraph diindikasikan
dengan teks yang dibatasi oleh <p> dan </p>. Tag P mempunyai atribut ALIGN untuk mengatur
kelurusan teks dalam satu alinea <P ALIGN ttt>.
Nilai ttt adalah satu dari yang berikut:
LEFT, Mengatur paragraph rata kiri.
RIGHT, mengatur paragraph rata kanan.
CENTER, meletakkan teks ditengah.
Pemotong baris (Line breaks)
Untuk memisahkan baris digunakan tag <br>. BR tidak mengubah parameter yang dimasukkan pada
tag paragraph.
Warna Background
Warna background website dapat dilakukan dengan menambahkan kata “bgcolor = warna” setelah tag
body. Misalnya anda ingin memberi warna hitam website anda maka anda tinggal tambahkan kode
berikut :
<body bgcolor = yellow>
Bila anda ingin mengubahnya menjadi warna lainnya anda tinggal ubah warna yang diketik
setelah bgcolor, misalnya : red, green, blue, atau warna lainnya.
Gambar imej juga bisa dijadikan sebuah gambar sebagai background website dengan menambahkan
kode : “background = file gambar” setelah tag body.
Misalnya file gambar pemandangan.jpg dijadikan sebagai
background halaman website, maka tinggal tambahkan kode berikut :
<body background = pemandangan.jpg>
Menggunakan gambar imej sebagai background halaman website anda akan memperlambat loading
halaman website anda, terutama untuk ukuran file gambar yang terlalu besar. Background website bisa
menggunakan file yang bukan berupa gambar imej.
13Disain dan Pemograman Web
Pengatur tampilan teks
Beberapa pengaturan tampilan teks adalah
 Ukuran font
 Warna font
 Efek tulisan
ukuran tulisan bisa juga kita ubah ubah.
Untuk itu kita perlu menyisipkan tag <font> </font> dalam tag <body> </body>.
Untuk mengubah warna tulisan kita tambahkan kode “color” setelah font.
Khusus untuk size kita bisa mengubah ubah ukurannya dari -7 sampai +7, bila nilainya semakin besar
maka semakin besar pula huruf yang akan ditampilkan dalam halaman web.
Kita bisa mengubah satu, dua, atau tiga pengaruh tag tag di atas secara bersamaan
dengan dipisahkan spasi.
<html>
<head>
<title>
Website Saya
</title>
</head>
<body bgcolor = black>
<font color = white face = verdana size = +3 align = center>
Selamat datang di website saya yang pertama
</font>
</body>
</html>
Kode di atas berarti memberi pengaruh tulisan warna putih berjenis Verdana dan berukuran +3. Anda
bisa juga menambahkan efek tulisan bergerak dengan menyisipkan tag <marquee> </marquee>
sebelum kode <font> </font>
Menambahkan gambar
14Disain dan Pemograman Web
gambar ditambahkan dengan tag img seperti berikut.
<img src = file foto anda>
Untuk memberi jarak antara tulisan anda sebelumnya dengan foto ini maka perlu anda tambahkan tag
<br>.
<font color = white face = verdana size = +3 align = center>
Selamat datang di website saya yang pertama <br>
<img src = logo.jpg>
</font>
Tampilan website anda akan seperti ini. Ukuran gambar bisa anda atur dengan menambahkan kode
“height = ukuran”, dan/atau “width = ukuran”. Misalkan anda ingin gambar anda mempunyai tinggi
100 pixel maka anda tinggal tambahkan “height = 100” setelah kode nama file gambar yang anda
sisipkan.
Komentar
Kita bisa memasukkan komentar kedalam HTML dengan menggunakan tag 
</Instructions>
</Recipe>
Resep ditulis dalam ResepXML
Contoh berikut adalah satu kelompok data yang dibatasi oleh tag <markers> dan <markers/>.
Kelompok ini berisi tiga data dimana masing masing data terletak antara <marker
dan />. Setipa
data berisi variable nama, alamat, keterangan, email dan type.
<markers>
<marker nama="Sure Center" alamat="Jalan Scientia Garden, Gading Serpong" keterangan="STKIP
SURYA, IICECC, Surya Enterprice" email="secretariat@iicecc.org" type="bar" lat="-6.23987"
lng="106.621"/>
<marker nama="" alamat="Komplek Perkesa No. 12 Cipaku" keterangan="" email=""
type="rumah_teras" lat="-6.6332" lng="106.815"/>
<marker nama="Dimas" alamat="Purikartika Baru jakan Seruni B4/3 Ciledug, Tangerang, Banten"
keterangan="Rumah tinggal" email="" type="rumah_teras" lat="-6.23623" lng="106.696"/>
</markers>
Contoh JavaScript untuk mengextract XML
Skrip berikut mengirim data dari sebuah database yang dilakukan oleh skrip program
alamat_genxml.php oleh fungsi GDownloadUrl(). Isi database disimpan dalam variable data.
Selanjutnya isi file data diextrak oleh fungsi GXml.parse() dan hasilnya disimpan dalam variable xml.
Kemudian data yang tersimpan dipecah berdasarkan kelompok marker oleh fungsi
xml.documentElement.getElementsByTagName() dan hasil disimpan dalam variable user. Terakhir
42Disain dan Pemograman Web
isi variable user diextrak selanjutnya oleh user[i].getAttribute dan isinya dituangkan kedalam
variable-variable yang ada diantara loop for.
GDownloadUrl("alamat_genxml.php?", function(data) {
var xml = GXml.parse(data);
var user = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < user.length; i++) {
var nama = user[i].getAttribute("nama");
var alamat = user[i].getAttribute("alamat");
var keterangan = user[i].getAttribute("keterangan");
var email = parseFloat(markers[i].getAttribute("email"));
var keyword = user[i].getAttribute("keyword");
var point = new GLatLng(parseFloat(user[i].getAttribute("lat")),
parseFloat(user[i].getAttribute("lng")));
var type = user[i].getAttribute("type");
var marker = createMarker(point, nama, alamat, keterangan, keyword,type);
map.addOverlay(marker);
}
Aturan sintak XML
Aturan sintak XML adalah sangat ringkas dan logis. Aturan mudah dipelajari dan digunakan.
Semua elemen XML harus dengan tag tertutup
Aturan ini sudah diterapkan pada XHTML. Tidak sah kalau tag dalamXML tidak diikuti oleh tag
penutup.
<p>This is a paragraph.</p>
<br> tidak sah
Tag-tag XML adalah Case Sensitive
Tag-tag XML tags are case sensitive. The tag <Letter> adalah berbeda dengan tag <letter>.
Opening and closing tags must be written with the same case:
<Message>This is incorrect</message>
<message>This is correct</message>
Note: "Opening and closing tags" are often referred to as "Start and end tags". Use whatever you
prefer. It is exactly the same thing.
43Disain dan Pemograman Web
Elemen XML harus Properly Nested
In HTML, you might see improperly nested elements:
<b><i>This text is bold and italic</b></i>
In XML, all elements must be properly nested within each other:
<b><i>This text is bold and italic</i></b>
In the example above, "Properly nested" simply means that since the <i> element is opened inside the
<b> element, it must be closed inside the <b> element.
XML Documents Must Have a Root Element
XML documents must contain one element that is the parent of all other elements. This element is
called the root element.
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
XML Attribute Values Must be Quoted
XML elements can have attributes in name/value pairs just like in HTML.
In XML, the attribute values must always be quoted.
Study the two XML documents below. The first one is incorrect, the second is correct:
<note date=12/11/2007>
<to>Tove</to>
<from>Jani</from>
</note>
<note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>
The error in the first document is that the date attribute in the note element is not quoted.
44Disain dan Pemograman Web
Entity References
Some characters have a special meaning in XML.
If you place a character like "<" inside an XML element, it will generate an error because the parser
interprets it as the start of a new element.
This will generate an XML error:
<message>if salary < 1000 then</message>
To avoid this error, replace the "<" character with an entity reference:
<message>if salary < 1000 then</message>
There are 5 predefined entity references in XML:
<
< less than
>
> greater than
& & ampersand
' ' apostrophe
" " quotation mark
Note: Only the characters "<" and "&" are strictly illegal in XML. The greater than character is legal,
but it is a good habit to replace it.
Comments in XML
The syntax for writing comments in XML is similar to that of HTML.

White-space is Preserved in XML
HTML truncates multiple white-space characters to one single white-space:
HTML: Hello
Tove
Output: Hello Tove
With XML, the white-space in a document is not truncated.
XML Stores New Line as LF
In Windows applications, a new line is normally stored as a pair of characters: carriage return (CR) and
line feed (LF). In Unix applications, a new line is normally stored as an LF character. Macintosh
applications also use an LF to store a new line.
45Disain dan Pemograman Web
XML stores a new line as LF.
What is an XML Element?
An XML element is everything from (including) the element's start tag to (including) the element's end
tag.
An element can contain:
 other elements
 text
 attributes
 or a mix of all of the above...
<bookstore>
<book category="CHILDREN">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
In the example above, <bookstore> and <book> have element contents, because they contain other
elements. <book> also has an attribute (category="CHILDREN"). <title>, <author>, <year>, and
<price> have text content because they contain text.
Well-formed is equivalent to analysable
The importance of whether or not a document is well formed in XML lies in the fact that a well-formed document can
be subject to syntactic analysis or parsing (i.e. it can be automatically processed). There are many parsers
(analysers) in many programming languages enabling us to work with XML documents. XML parsers can detect
structural errors in XML documents (i.e. whether they are well formed) and report them to the program. This feature
is very important for programmers because it releases them from the task of having to detect errors by assigning it to a
program (the parser), which does it automatically.
Namespaces
XML is a standard designed for the sharing of information. What happens
when we take information from two different sources and combine it in XML
to send it to somebody else? We may have some sort of conflict arising from
coincidences in the names of tags.
Imagine this scenario: an Internet provider saves all of its data in XML. The
46Disain dan Pemograman Web
sales division stores the home address of clients in a field called <address>.
The client helpdesk uses <address> to store the client's e-mail address and,
lastly, the network control centre uses <address> to store the IP address of the
client's computer. If we combine the information from the three departments
of the company in a single file, we could end up with:
<client>
...
<address>Royal Street</address>
...
<address>sales@client.com</address>
...
<address>192.168.168.192</address>
...
</client>
GNUFDL • PID_00148402 13 Text structured format: XML
Clearly, we would have a problem in this case because we would be unable to
work out the meaning of <address> in each case.
Therefore, in 1999, the W3C defined an XML extension called namespaces,
which can resolve many conflicts and ambiguities of this nature.
2.3.1. Using namespaces
Namespaces are a prefix added to XML tags to indicate the context of the tag
in question. In the above example, we could define:
<network:address>: for use by the network control centre.
<help:address>: for use by the client helpdesk.
<sales:address>: for use by the sales department.
Our combined document would thus look like this:
<client>
...
<sales:address>Royal Street</sales:address>
...
<help:address>sales@client.com</help:address>
...
<network:address>192.168.168.192</network:address>
...
</client>
In order to use a namespace in a document we must first declare it. This can
be done in the root element of the document as shown:
<?xml version="1.0" encoding="iso-8859-1"?>
<clientportfolio
xmlns:sales="http://www.company.com/sales"
xmlns:help="http://www.company.com/help"
xmlns:network="http://www.company.com/network">
<client>
...
<sales:address>Royal Street</sales:address>
...
<help:address>sales@client.com</help:address>
...
<network:address>192.168.168.192</network:address>
...
</client>
</clientportfolio>
GNUFDL • PID_00148402 14 Text structured format: XML
The definition has xmlns attributes(XML namespace) where we indicate the
prefix that we will use for the namespace and a URI (Uniform Resource
Identifier) that will act as the unique namespace identifier.
Validation: XML Schema
XML Schema
XML Schema has certain features making it far more powerful :
• It is defined in XML, which means that it is possible to validate XML
47Disain dan Pemograman Web
Schema documents too.
• It enables control over data types (integers etc).
• It allows us to define new data types.
• It allows us to describe the content of documents.
• It is easy to validate correct data.
• It is easy to define data patterns (formats).
Extensibility
XML Schema is extensible because it allows definitions from a schema can be
reused in another schema. It can also be used to define data types from the
data types in the standard and other schemas, and allows a single document
to use several schemas.
Practical: creating an XML document with its
corresponding XML Schema and transformations
with XSLT
We are going to create an XML document to store hotel information. To do
so, we must first design the XML Schema file we are going to use. This will
allow us to validate our design as we add the different parts to it.
The XML Schema produced by our design will be:
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema
xmlns:xs="http://www.w3.org/2001/XMLSchema"
elementFormDefault="qualified" attributeFormDefault="unqualified">
<xs:element name="Accommodation">
<xs:annotation>
<xs:documentation>Hotel information</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:all>
<xs:element name="Hotels">
<xs:complexType>
<xs:sequence>
<xs:element name="Hotel" maxOccurs="unbounded">
<xs:complexType>
<xs:all>
<xs:element name="Name" type="xs:string"/>
<xs:element name="Location"
type="LocationType"/>
<xs:element name="Rooms">
<xs:complexType>
<xs:all>
<xs:element name="Doubles">
<xs:complexType>
<xs:sequence>
<xs:element
name="Number" type="xs:int"/>
<xs:element
name="Price" type="xs:float"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="Singles">
<xs:complexType>
GNUFDL • PID_00148402 56 Text structured format: XML
<xs:sequence>
<xs:element
name="Number" type="xs:int"/>
<xs:element
name="Price" type="xs:float"/>
</xs:sequence>
</xs:complexType>
48Disain dan Pemograman Web
</xs:element>
</xs:all>
</xs:complexType>
</xs:element>
<xs:element name="Pool" type="xs:boolean"/>
<xs:element name="Category" type="xs:int"/>
</xs:all>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="Chains" minOccurs="0">
<xs:complexType>
<xs:sequence>
<xs:element name="Chain" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="Name"/>
<xs:element name="Location"
type="LocationType"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:all>
</xs:complexType>
</xs:element>
<xs:complexType name="LocationType">
<xs:all>
<xs:element name="Country"/>
<xs:element name="City"/>
<xs:element name="Region" minOccurs="0"/>
</xs:all>
</xs:complexType>
</xs:schema>
49Disain dan Pemograman Web
We will now create a document based on the schema we have designed. With
the use of test data, this document will be:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="Hotels.xslt"?>
<Accommodation
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="hotels.xsd">
<Hotels>
<Hotel>
<Name>Hotel Port Aventura</Name>
<Location>
<Country>Spain</Country>
<City>Salou</City>
<Region>Costa Dorada</Region>
</Location>
<Rooms>
<Doubles>
<Number>50</Number>
<Price>133</Price>
</Doubles>
<Singles>
<Number>10</Number>
<Price>61</Price>
</Singles>
</Rooms>
<Pool>false</Pool>
<Category>3</Category>
</Hotel>
<Hotel>
<Name>Hotel Arts</Name>
GNUFDL • PID_00148402 58 Text structured format: XML
<Location>
<Country>Spain</Country>
<City>Barcelona</City>
</Location>
50Disain dan Pemograman Web
<Rooms>
<Doubles>
<Number>250</Number>
<Price>750</Price>
</Doubles>
<Singles>
<Number>50</Number>
<Price>310</Price>
</Singles>
</Rooms>
<Pool>true</Pool>
<Category>5</Category>
</Hotel>
<Hotel>
<Name>Parador Seu d'Urgell</Name>
<Location>
<Country>Spain</Country>
<City>Seu d'Urgell</City>
<region>Pyrenees</Region>
</Location>
<Rooms>
<Doubles>
<Number>40</Number>
<Price>91.5</Price>
</Doubles>
<Singles>
<Number>2</Number>
<Price>44.4</Price>
</Singles>
</Rooms>
<Pool>true</Pool>
<Category>4</Category>
</Hotel>
</Hotels>
<Chains>
<Chain>
<Name>HUSA</Name>
<Location>
<Country>Spain</Country>
<City>Barcelona</City>
</Location>
</Chain>
<Chain>
GNUFDL • PID_00148402 59 Text structured format: XML
<Name>NH Hoteles</Name>
<Location>
<Country>Spain</Country>
<City>Pamplona</City>
</Location>
</Chain>
<Chain>
<Name>Paradores de Turismo</Name>
<Location>
<Country>Spain</Country>
<City>Madrid</City>
</Location>
</Chain>
</Chains>
</Accommodation>
To obtain a list of the hotels in HTML:
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>Hotel information</title>
</head>
<body>
<h1>List of hotels</h1>
<h2>Hotel</h2>
Name: Hotel Port Aventura (Stars: 3)<br/>
51Disain dan Pemograman Web
Location: Salou, Spain<i> (Costa Dorada)</i><br/>
Pool: <b>No</b><br/><br/><h3>Rooms</h3>
<table>
<tbody>
<tr>
<th>Type</th>
<th>Number</th>
<th>Price</th>
</tr>
<tr>
<td>Singles</td>
<td>10</td>
<td>61</td>
</tr>
<tr>
<td>Doubles</td>
<td>50</td>
<td>133</td>
</tr>
</tbody>
</table>
<h2>Hotel</h2>
Name: Hotel Arts (Stars: 5)<br/>
Location: Barcelona, Spain<br/>
Pool: <b>Yes</b><br/><br/>
GNUFDL • PID_00148402 62 Text structured format: XML
<h3>Rooms</h3>
<table>
<tbody>
<tr>
<th>Type</th>
<th>Number</th>
<th>Price</th>
</tr>
<tr>
<td>Singles</td>
<td>50</td>
<td>310</td>
</tr>
<tr>
<td>Doubles</td>
<td>250</td>
<td>750</td>
</tr>
</tbody>
</table>
<h2>Hotel</h2>
Name: Parador Seu d'Urgell (Stars: 4)<br/>
Location: Seu d'Urgell, Spain<i> (Pyrenees)</i><br/>
Pool: <b>Yes</b><br/><br/>
<h3>Rooms</h3>
<table>
<tbody>
<tr>
<th>Type</th>
<th>Number</th>
<th>Price</th>
</tr>
<tr>
<td>Singles</td>
<td>2</td>
<td>44.4</td>
</tr>
<tr>
<td>Doubles</td>
<td>40</td>
<td>91.5</td>
</tr>
</tbody>
</table>
<h1>List of hotel chains</h1>
52Disain dan Pemograman Web
<h2>Chain</h2>
Name: HUSA<br/>
GNUFDL • PID_00148402 63 Text structured format: XML
Location: Barcelona, Spain<br/>
<h2>Chain</h2> Name: NH Hoteles<br/>
Location: Pamplona, Spain<br/>
<h2>Chain</h2> Name: Paradores de Turismo<br/>
Location: Madrid, Spain<br/>
</body>
</html>
53Disain dan Pemograman Web
Bab 6 Menggunakan CSS
Apa itu CSS?, CSS merupakan singkatan dari Cascading Style Sheet. Style didefenisikan dengan
bagaimana menampilkan elemen-elemen HTML. Dengan menggunakan lembaran-lembaran style
eksternal, bisa menghemat banyak pekerjaan. Lembaran style eksternal disimpan dalam file file
berexstensi css.
HTML tidak diinginkan untuk mempunyai kandungan tag mengatur format dokumen seperti ukuran
font warna dan sebagainya. HTML semula hanya diinginkan untuk mendefenisikan isi dari dokumen
seperti kepala (heading) atau paragraf.
Contoh tag untuk heading dan paragraf:
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf.</p>
Memasukkan informasi huruf dan warna untuk setiap halaman, menjadikan sangat panjang dan mahal.
World Wide Web Consortium (W3C) mengembangkan CSS untuk mendefenisikan tampilan web pada
file terpisah. Style disimpan dalam file terpisah dengan ekstensi .css. Lembaran style eksternal
memudahkan mengganti tampilan atau susunan seluruh halam website hanya dengan mengedit satu
buah file saja.
Ref : http://www.w3schools.com/css/demo_default.htm
Sintak CSS
Aturan CSS disusun dalam dua bagian : sebuah pilihan (selector) , dan satu atau lebih pernyataan
(declaration) dengan format berikut:
Sebuah pernyataan CSS selalu diakhiri dengan titik koma (;) dan satu kelompok pernyataan dilingkupi
dengn kurung krawal seperti berikut:
p {color:red;text-align:center;}
54Disain dan Pemograman Web
Contoh CSS
body
{ background-color:#d0e4fe; }
Pada contoh diatas body merupakan selector, background-color merupakan property sedangkan nilai
untuk backroud-color adalah #d0e4fe.\
Berikut adalah contoh lain dari css
h1
{ color:orange;
text-align:center; }
p
{ font-family:"Times New Roman";
font-size:20px; }
Keterangan (comment) CSS
Keterangan (Comment) digunakan untuk penjelasan kode yang dibuat, dan bisa membantu bila
mengubah kode pada waktu kemudian. Semua keterangan diabaikan oleh browser.
Sebuah keterangan CSS dimulai dengan "/*", dan diakhiri dengan "*/", seperti ini:
/*
Semua tulisan dalam daerah ini berfungsi sebagai penjelasan saja tidak dieksekusi oleh browser
*/
Berikut adalah contoh contoh html yang berisi css beserta css filnya.
Silahkan perhatikan contoh ini dan coba taksir kira kira tujuannya.
55Disain dan Pemograman Web
Contoh 6-1 HTML dengan css
File contoh6-1.html
<html> <head> <link rel="stylesheet" type="text/css" href="ex2.css" /> </head> <body> <h1>This is a
header 1</h1> <hr /> <p>You can see that the style sheet formats the text</p> <p><a
href="http://www.stkipsurya.ac.id" target="_blank">Ini adalah link untuk situs STKIP Surya</a></p>
</body> </html>
ex2.css
body {background-color:tan;}
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
Contoh
cs1.css
body
{
font-size:75%;
font-family:verdana,arial,'sans serif';
background-color:#FFFFF0;
color:#000080;
56Disain dan Pemograman Web
margin:10px;
}
h1 {font-size:200%;}
h2 {font-size:140%;}
h3 {font-size:110%;}
th {background-color:#ADD8E6;}
ul {list-style:circle;}
ol {list-style:upper-roman;}
a:link {color:#000080;}
a:hover {color:red;}
cs2
body
{
font-size:75%;
font-family:"lucida calligraphy",arial,'sans serif';
background-color:#DCDCDC;
color:#8A2BE2;
margin:10px;
}
h1 {font-size:200%;}
h2 {font-size:140%;}
h3 {font-size:110%;}
th {background-color:#D3D3D3;}
td {background-color:#FFFAF0;}
a:link {color:#8A2BE2;text-decoration:none;}
a:hover {color:red;font-weight:bold;text-decoration:none;}
a:visited {text-decoration:none;}
cs3
body
{
font-size:75%;
font-family:verdana,arial,'sans serif';
background-image:url('gradient.png');
57Disain dan Pemograman Web
background-repeat:repeat-x;
background-color:#FFFFF0;
color:#000080;
margin:70px;
}
h1 {font-size:200%;}
h2 {font-size:140%;}
h3 {font-size:110%;}
th {background-color:#ADD8E6;}
ul {list-style:circle;}
ol {list-style:upper-roman;}
a:link {color:#000080;}
a:hover {color:red;}
CSS Background
Properti CSS background digunakan unuk mendefenisikan efek latar belakang
dari elemen.
.
Properti CSS background digunakan untuk mengatur efek latar belakang adalah :
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
Background Color
Properti background-color menentukan warna latar belakang dari sebuah elemen.
Warna latarbelakang dari sebuah halaman dedefenisikan dalam body selector:
58Disain dan Pemograman Web
Contoh
body {background-color:#b0c4de;}
Warna pada CSS lebih sering ditulis dalam bentuk:
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"
Contoh berikut adalah elemen-elemen h1, p, dan div elements yang mempunyai latarbelakang warna
berbeda:
Example
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Tugas 1
Buatlah sebuah halam web dengan bentuk berikut menggunakan html dan css.
Copy text contoh 6-1.html simpan dengan nama contoh6-1.html serta copy text ex2.css simpan dengan
nama ex2.css. Letakkan file tersebut kedalam directori web (var/www).
Buka file dengan web browser serta amati tampilannya.
Berdasarkan tampilan tersebut jelaskan kegunaan dari elemen elemen css yang ada pada ex2.css
body {background-color:tan;}
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
Tugas 2
Membuat halaman web menggunakan css yang tersedia.
Banyak css yang sudah tersedia untuk mengatur tampilan web. Ambil sebuah web yang mempunyai
halaman css. Kopi kode css tersebut kehalaman web anda.
59Disain dan Pemograman Web
Bab 7 Pemograman Web Dinamis menggunakan PHP dan
MySQL
Learning outcome
Setelah mempelajari bab ini siswa diharapkan mampu:
 Melakukan kalkulasi atau evaluasi sederhana menggunakan fungsi aritmetika dan statment if,
for dan while pada php.
 Membuat situs web menggunakan skrip php
 Menyiapkan server web barbasis php dan mysql.
 Menggunakan script php dalam dokumen html.
 Membaca dan menyimpan data menggunakan php mysql.
 Membuat sebuah web dinamis menggunakan php mysql dengan sebuah acuan (misal tanggal).
Metode pengajaran
Problem based learning gasing.
Siswa diberikan permasalahan yang jawabannya ada dalam topik yang diberikan.
Bagian 1 Pengantar PHP
Dalam buku ini anda akan belajar bagaimana menggunakan PHP dengan bekerja melalui banyak
contoh-contah nyata. Kami tidak mengajarkan sintak dengan contoh yang ringkas, tetapi menyajikan
materi ini sehingga mendapatkan sesuatu yang siap untuk dijalankan. Untuk bekerja dengan contoh
yang diberikan dalam Bab ini, anda perlu server Web yang diinstalasi dengan PHP.
Cara instalasi Web server Apache, PHP dan MYSQL pada Windows lihat lampiran A.
Dalam bab ini anda akan mempelajari:
1. Menempelkan PHP dalam HTML
2. Menambahkan koten dinamis
3. Mengakses variabel form
4. Identifiers
5. variable-variable yang dideklarasikan pengguna
6. Tipe-tipe variabel
7. Memberikan nilai ke variabel
8. Konstanta
9. Skop variabel
10. Operasi dan preseden
11. Exspresi
12. Membuat keputusan dengan if, else dan switch
13. iterasi: loop while, do dan for
60Disain dan Pemograman Web
Menempelkan PHP dalam HTML
PHP ditempelkan dalam script HTML dengan menuliskan skript PHP diantara tanda <?php dan ?>
Contoh 1:
Misalnya anda sudah punya file html seperti dibawah ini
<HTML>
<HEAD>
<TITLE>Contoh 1 </TITLE>
</HEAD>
<BODY LANG="en-US" DIR="LTR">
<H1>Menempelkan PHP</H1>
<h2>
Contoh php ditempel dalam HTML
</h2>
</BODY>
</HTML>
dibawah heading h2 tambahkan baris berikut :
<?php
echo '<p> Teks ini ditulis dengan PHP Script.<p>';
?>
Simpan file dengan exstensi php (misal contoh1.php) dan upload ke server.
Jalankan script tersebut. Perhatikan tulisan Teks ini ditulis dengan PHP Script ditampilkan oleh
perintah echo.
Kesimpulan:
Ada 4 kode yang dipakai dalam pemograman dengan php yaitu :
 HTML
 tag-tag PHP
 Perintah PHP
 Whitespace
Tag-tag PHP merupakan kode yang dimulai dari <?php dan diakhiri dengan ?>
61Disain dan Pemograman Web
Perintah PHP merupakan kalimat untuk melakukan sesuatu pada interpreter PHP. Echo merupakan
salah satu contoh perintah PHP
Keterangan (Comments )
Keterangan hanya merupakan catatan yang ditulis pada skrip php untuk menerangkan maksud dari
kode yang ditulis. PHP akan mengabaikan keterangan tersebut dan tidak mengeksekusinya, sehingga
apapun yang ditulis pada keterangan tidak akan menyebabkan kesalahan pda eksekusi. Keterangan
ditulis antara /* dan */ atau setelah //. Pemogram yang baik selalu memberikan keterangan yang cukup
pada kode program. Ini akan sangat memudahkan untuk memahami isi dari program baik dari
sipemogram sendiri ataupun orang lain. Apabila dikemudian hari ada perbaikan program, sipemogram
akan dengan cepat megetahui fungsi dari kode yang dibuat.
Contoh keterangan
/*
Program ini berisi kode tentang belajar menggunakan PHP
*/
// Keterangan.....
Menambahkan kandungan dinamis
Alasan utama menggunakan bahasa skrip pada sisi server adalah untuk bisa menyediakan kandungan
dinamis pada sisi pengguna. Mari kita mulai contoh yang sederhana dengan menuliskan tanggal pada
contoh1.txt
Contoh 1b
<?php
echo 'Waktu sekarang: ';
echo date('H:i, Js F');
echo '</p>';
?>
simpan file tersebut (contoh1b.php) dan jalankan. Fungsi data() akan menampilkan jam dengan format
seperti yang ditulis antara tanda ' ' .
Pemanggilan Fungsi
Perhatikan kata date() pada contoh 1b diatas. Itu merupakan sebuah fungsi. PHP mempunyai banyak
sekali fungsi yang bisa digunakan dalam pengembangan Web. Pada umumnya fungsi memerlukan pass
data sebagai masukan dan menggembalikan beberapa data. Fungsi data() memakai pass data 'H:i, Js F'
dan mengembalikan jam seperti yang ditampilkan dalam web.
Variabel dan Itentifier
Variabel merupakan nama untuk menyimpan data. Identifier merupakan nama dari variabel. Identifier
62Disain dan Pemograman Web
bisa terdiri atas huruf dengan panjang berapa saja, bilangan tanda garis bawah dan tanda dolar. Pada
PHP identifier adalah case sensitif, huruf besar dan huruf kecil mempunyai arti berbeda. $Kota dan
$kota adalah dua variabel yang tidak sama.
Dalam PHP variabel tidak perlu di deklarasikan atau dinyatakan diawal program. Variabel akan dibuat
atau dialokasikan pada waktu pertama kali diberikan nilai. Memberikan nilai pada variabel dinyatakan
dengan operator , = .
Contoh:
$kota = 'Palembang';
$jumlah_mahasiswa = 50;
Tipe variable
Tipe variable mengacu pada bentuk data yang akan disimpan.
Variabel
Pemakaian
Contoh Nilai
Integer Untuk bilangan bulat 23
Double Untuk bilangan real 12.8
String Untuk teks atau karakter 'Jakarta'
Boolean Benar atau salah 0, 1
Array Menyimpan multipel data [12, 45,17]
      dengan tipe yang sama
Object Untuk menyimpan class (lihat Bab 6)
Variable yang belum berisi nilai merupakan tipe yang belum di set. Tipe variabel ditentukan saat
memberikan data pada variabel tersebut.
Contoh:
$jumlah = 45;
// variable $jumlah merupakan tipe bilangan bulat (integer).
$rata_rata = 12.34; // variable $rata_rata bertipe bilangan real;
$ibukota = 'Bali';
// variabel $ibukota bertipe karakter.
Operator-Operator
Operator merupakan simbol untuk mmemanipulasi nilai dari variabel dengan melakukan oprasi
padanya.
Operator Aritmetika
63Disain dan Pemograman Web
Operator
Nama
Contoh
+ Penambahan $a + $b
- Pengurangan $a - $b
* Perkalian $a * $b
/ Pembagian $a / $ b
% Modulus (sisa pembagian) $a % $b
                          bila $a = 27 dan $b =10
                         maka $a % $b = 7
Hasil operasi bisa disimpan dalan sebuah variabel.
contoh
$a = 5;
$b = 7;
$hasil = $a + $b
Menampilkan hasil.
Hasil perhitungan bisa ditampilkan dengan munggunakan perintah echo.
echo 'hasil a tambah b = ' . $hasil;
Harus dicatat bahwa operasi aaritmetika biasanya diterapkan pada bilangan bulat atau desimal
Latihan 1
Buatlah lah Web PHP dengan untuk melakukan perhitungan berikut (gunakan dan modifikasi dari
contoh1b.txt).
$apel = 5000;
$jeruk = 7000;
Harga 12 kg jeruk tambah 5 kg apel adalah :
Operator String
Anda bisa menggabung teks string menggunakan operator.
$a = “STKIP ”;
$b = “Surya ”;
$c = $a.$b;
variabel $c akan berisi teks “STKIP Surya”;
64Disain dan Pemograman Web
Operator Kombinasi
Untuk mempermudah pemberian nilai, dilakukan dengan cara singkat terhadap operator lainnya dalam
sebuah variabel.
Contoh
$a += 5;
ini ekivalen dengan menuliskan dalam bentuk
$a = $a + 5;
Artinya nilai variabel $a terakhir adalah nilai variabel $a sebelumnya ditambah 5;
Pre dan post inkremen dan dekremen
Operator Pre dan post inkrement dan dekremen serupa dengan operator += atau -= tetapi untuk
variabel itu sendiri. Operator Inkremen mempunya dua efek memberi nilai dan meningkatkan nilai.
Lihat contoh berikut.
$a = 4;
echo ++$a;
latihan 2
Uji hasil berikut dengan membuat skrip PHP
$a =5;
$b += $a
echo '$b = ' . $b;
$c = 10;
echo '$c = ' . ++$c;
$c = 10;
echo '$c = ' . $c++;
Referensi
Biasanya bila sebuah variabel diberikan nilainya ke variabel lain maka nilai variable itu akan
dikopikan. Kita bisa menghindari pengkopian dengan menggunakan operator referensi (&).
$a = 5;
$b = &a;
$a=7; // $a dan $b sekarang sama sama 7
65Disain dan Pemograman Web
Beberapa perintah lainnya dalam pemograman php adalah serupa dengan bahasa pemograman lainnya
seperti pada bahasa C atau Fortran
Perintah perintah tersebut adalah :
Operator Pembanding
Operator Logika
Operator Bitwise
Pengambilan keputusan
Statemen If
Statement else
Statement elseif
Statement switch
loop while
loop for dan foreach
loop do..while
keluar dari struktur kontrol
(diberikan tanpa penjelasan, diasumsikan pembaca sudah menguasai salah satu bahasa pemograman)
Menyimpan dan Mengambil data
(Bekerja dengan file)
Bagian ini berisi perintah perintah dalam php untuk:
 Menyimpan data untuk digunakan kemudian
 Membuka file
 Membuat dan menulis sebuah file
 Menutup file
 Membaca file
 mengunci file
 Menghapus file
 Fungsi file beruna lainnya.
Menyimpan data untuk digunakan kemudian
Ada dua cara untuk menyimpan data: dalam file datar atau dalam database. File datar mempunyai
banyak format, tetapi secara umum file datar adalah berupa teks. Database diperlukan untuk
mengetahui informasi yang lebih banyak. Menulis file dengan PHP serupa dengan menulis seperti yang
dilakukan dengan C atau program lainnya.
Ada 3 tahap untuk menulis data kedalam file:
1. Buka file
2. Tulis data
3. Tutup file
Serupa juga untuk membaca dari file
1. Buka file
66Disain dan Pemograman Web
2. Baca data dari file
3. Tutup file
Membuka file
Membuka file digunakan fungsi fopen(). Ada tiga pilihan dalam membuka file
1. Membuka file untuk dibaca, ditulis atau dibaca dan ditulis.
2. Apabila membuka file untuk ditulis, bisa dinyatakan menimpa file yang ada atau menambah
diakhir
3. Tentukan apa file berupa teks atau biner
Format membuka file adalah sebagai berikut:
$fp = fopen(“$DOCUMENT_ROOT/../kelas.txt”,”w”);
Diperlukan dua atau tiga parameter apa bila fingsi fopen digunakan. Parameter pertama adalah lokasi
dan nama file yang akan digunakan. Parameter kedua adalah mode file, untuk menentukan untuk apa
file itu dibuka. Mode file untuk fopen dijabarkan pada tabel 1 berikut.
Mode
Arti
r Mode baca: Membuka file untuk dibaca dimulai dari awal file.
r+ Mode baca:Membuka file untuk dibaca dan ditulis imulai dari awal file.
w
w+
a
a+
b
Disamping membuka file secara lokal, anda juga bisa membuka file via FTP dan HTTP.
Menulis ke file
fwrite() atau fput()
Menutup file
Apabila selesai menggunakan sebuah file maka anda harus menutupnya dengan menggunakan fungsi
fclose() seperti berikut:
fclose($fp)
Fungsi akan mengembalikan true bila berhasil menutup atau false bila tidak. Fungsi-fungsi lain dalam
penanganan file adalah:
Tahu kapan harus berhenti:feof()
67Disain dan Pemograman Web
Membaca sebuah baris setiap waktu:fgets(),fgetss() dan fgetcsv()
Membaca semua file:readfile(), fpatssthru, file()
Menghapus file : unlink()
navigasi dalam sebuah file:rewind(), fseek() dan ftell()
Mengunci file:flock()
Menggunakan MySQL
MySql (disebut dengan mai-es-ki-el) adalah sebuah sistim manajemen database relasi (Relational
database management system: DBMS). Sebuah database memungkinkan untuk menyimpan mencari
mengurutknan dan mengambil data dengan efisien. MySql tersedia dalam lisensi opensource (free),
tetapi versi komersial juga tersedia.
Pengantar terhadap web dinamis dengan php
Pembahasan dalam bagian ini diurutkan dalam delapan tahap sebagai berikut:
1 - Pengantar terhadap web dinamis dengan php
2 - Penyiapan server dan Database
3 - Memasukkan Informasi
4 - Menampilkan Data
5 - Single Records & Error Trapping
6 - Memperbarui dan menghapus data
7 - Menyempurnakan skrip
8 - Contoh kasus
Sebagian besar orang tertarik menggunakan bahasa skrip php karena bisa berinteraksi dengan database.
Dengan difasilitasi penyimpanan dalam database, sebuah web bisa dibuat menjadi dinamis. Informasi
pada situs dinamis bisa ditampilkan berdasarkan keadaan seperti waktu, jenis berita, kelas pengguna
dan sebagainya.
Pelajaran ini membahas bagaimana menggunakan bahasa skrip php dan mysql database untuk
menyimpan informasi dan menampilkannya dalam website. Dasar pengetahuan tentang php dibahas
terlebih dahulu setelah itu pengetahuan tentang database khususnya mysql dan terakhir integrasi
database dan php dalam situs.
Kenapa kita membutuhkan sebuah database? Ini adalah mengejutkan (suprising) bagaimana manfaat
database yang digunakan dalam halaman web. Ada banyak keragaman yang bisa dilakukan mulai dari
menampilkan daftar yang sederhana sampai pada menjalankan website lengkap dari sebuah database.
Beberapa contoh php dan mysql digunakan bersama antara lain merotasi baner dan forum. Setiap baner
memanggil skrip php, membuka sebuah database, mengambil sebuah baner secara acak dan
memperlihatkan pada pengunjung. Skrip php bisa juga menghitung berapa kali sebuah baner
ditampilkan dan bisa juga merekam jumlah klik terhadap baner tersebut. Yang harus dilakukan untuk
menambah, mengganti atau mengubah semuanya adalah mengganti database dan skrip yang
mengambil baner yang tepat untuk semua halaman situs.
68Disain dan Pemograman Web
Contoh kedua adalah Penggunaan untuk Forum. Ratusan forum pada internet dijalankan menggunakan
php dan mysql. Cara ini sangat lebih efisien dari pada membuat membuat satu halaman untuk setiap
pesan dengan banyak macan pilihan. Semua halaman pada forum bisa diganti dengan mengganti
sebuah skrip (todo:contoh skrip forum).
Penggunaan Database. Sebuah contoh yang obvious adalah situs yang mengambil semua informasi dari
sebuah database. Skrip Avenue, sebagai contoh, jalan dengan beberapa skrip yang menangkap ( gain )
semua informasi dari sebuah database besar. Semua kategori skrip yang berbeda bisa diakses dalam
sebuah skrip hanya dengan mengganti URL untuk mengakses bagian yang berbeda dari data base.
(Todo: cari contoh).
Penggunaan database lainnya adalah memberi efek terhadap situs web. Dengan cara yang normal
dimana database tidak digunakan, jika kita harus mengganti sebuah situs web yang besar maka akan
memerlukan waktu yang lama untuk mengupdate dan mengupload semua halaman. Dengan PHP dan
MySQL, semua halaman akan berganti hanya dengan satu atau dua skripPHP. Caranya adalah
mengakses sebuah database MySQL untuk mengambil informasi untuk halaman situs. Hanya perlu
mengganti rancangan satu halaman untuk mengganti semua halaman.
2. Penyiapan server dan Database
Apa yang diperlukan untuk situs berbasiskan php dan mysql? Ada tiga hal yang diperlukan untuk
menjalankan skrip php dengan Mysql database.
Pertama adalah webserver. Webserver bisa dijalankan pada komputer sendiri atau melalui sebuah host
web. Semua server web harusnya bisa bekerja untuk php dan mysql. Apache merupakan salah satu
webserver yang populer dan gratis.
Untuk menyiapkan fasilitas Server dengan php, mysql database dan browser bisa dilakukan dengan
mudah pada komputer dengan sistim operasi ubuntu linux. Cara Instalasi MySql database dan php
pada Ubuntu Linux adalah sebagai berikut.
Melalui terminal lakukan instalasi apache server, mysql database php dan pyphp admin:
sudo apt-get install lamp-server^
Dengan mengetikkan perintah tersebut akan muncul beberapa pesan untuk direspon:
..............
Need to get 33.0MB of archives.
After this operation, 73.6MB of additional disk space will be used.
Do you want to continue [Y/n]?
Jawab Y dan tekan enter
69Disain dan Pemograman Web
Tunggu sampai selesai mendowload file yang diperlukan. Proses download dan instal memerlukan
waktu sekitar 30 menit, tergantung dari kecepatan sambungan internet.
Gambar memasukkan pasword untuk server database mysql.
Setelah itu sistem akan menanyakan MySql pasword untuk root.
Silakan isi pasword anda misalnya 123456 dan klik ok.
Dan ulangi lagi untuk konfirmasi dengan mengisikan password pada bidang isian berikutnya. Pasword
ini akan digunakan untuk mengakses database dalam skrip php.
PHP juga dibutuhkan untuk diinstall pada server. Dengan menggunakan sudo apt-get install
lampserver^ diatas, php sekaligus juga sudah terinstal.
PHP juga perlu diinstal pada server secara terpisah. PHP bisa di download secara gratis dari php.net.
Untuk memeriksa apakah php sudah diinstal pada web server bisa dilakukan dengan membuat sebuah
file yang berisi kode berikut:
<?
phpinfo();
?>
Apabila anda bekerja pada terminal server maka ketik perintah berikut untuk membuat file phptest.php
sudo gedit phptest.php
Simpan kode tersebut dengan ekstensi php misalnya test.php dalam direktori web (var/www). Apabila
anda menggunakan server terpisah dari komputer yang, upload file tersebut ke server dan jalankan
pada browser. Apabila anda melihat banyak informasi ditampilkan, berarti php sudah terinstal pada
server.
Sesudah menginstal lakukan restart untuk server apace dengan perintah :
sudo /etc/init.d/apache2 restart
Terakhir yang diperlukan adalah Mysql database untuk menyimpan segala data.
70Disain dan Pemograman Web
Satu paket installer lengkap untuk php mysql untuk ubuntu linux bisa sudah diinstal dengan
mengetikkan perintah sudo apt-get install lamp-server^ diatas.
Dalam paket tersebut tersedia juga aplikasi administrator database yang bernama phpmyadmin.
Untuk memeriksa apakah php telah bekerja jalankan file phptest.php dengan menggunakan browser
web dengan alamat sebagai berikut :
http://localhost/phptest.php dan informasi berikut akan ditampilkan.
Ditampilkannya info diatas berarti php server sudah terinstal. Anda akan melihat banyak informasi
didalamnya. Silahkan melihat informasi tersebut sampai kebawah. Jika ditemukan bagian tentang
MySQL maka ini berarti bahwa juga terinstal MySQL.
71Disain dan Pemograman Web
Mengatur Database
Meskipun administrasi database bisa dilakukan melalui skrip php, tetapi administrasi dengan
phpmyadmin adalah sangat disarankan. Phpmyadmin menyediakan berbagai fasilitas yang diakses
melalui interface yang mudah. Fasilitas tersebut disamping untuk melihat isi juga melingkupi
penambahan, menghapus, mengubah atau membackup datababse. Fasilitas ini sangat berguna untuk
melakukan troubleshooting database.
Tutorial penggunaan PHP dan MySQL
Melalui tutorial ini akan diperlihatkan beberapa dasar penggunaan PHP dan MySQL.
Anda akan mempelajari bagaimana membuat webbase (situsweb berbasiskan database) untuk data
kemahasiswaan. Ini akan mengizinkan anda untuk menyimpan nama, nomor mahasiswa, jurusan dan
alamat email. Anda juga akan diizinkan untuk memperbarui rekor (data). Akan didemonstrasikan juga
untuk mengirim email kesemua mahasiswa yang datanya tersimpan di database.
Setelah membuat sistim ini anda sudah mempunyai pengetahuan untuk membuat berbagai macam
bentuk situs berbasiskan database. Langkah pertama sebelum membuat situs adalah menyiapkan
database untuk menyimpan data dan membaca informasi didalamnya.
Mempersiapkan database
MySQL database mempunyai setup yang standar sama seperti database lainnya. Sebuah database
berisi tabel tabel. Setiap tabel mempunyai field dengan tipe yang berbeda. Setiap tabel mengandung
rekor yang merupaka isi dari database.
Databases dan Login
Dalam mensetup sebuah database akan diperlukan nama dari database, nama pengguna dan password.
Informasi ini akan digunakan untuk login kedalam database.
Untuk masuk mengelola database menggunakan mhpmyadmin, ketik perintah berikut pada web
browser:
http://localhost/phpmyadmin
apabila perintah tersebut tidak bisa dilakukan berarti server anda belum mempunyai phpmyadmin.
Untuk itu lakukan proses instalasi dengan mengetikkan perintah berikut :
sudo apt-get install phpmyadmin
akan muncul pertanyaan seperti berikut:
72Disain dan Pemograman Web
.........
After this operation, 21.5MB of additional disk space will be used.
Do you want to continue [Y/n]? y
ketik Y dan Enter. Tunggu sampai proses instalasi selesai
Setelah instalasi selesai proses selanjutnya adalah memilih server dan mengisikan pasword untuk
MySql Database dan phpmyadmin.
73Disain dan Pemograman Web
Membuat Database melalui phpmyadmin
Database bisa dibuat dengan mudah melalui interface phpmyadmin. Apabila phpmyadmin sudah
diinstall maka perintah http://localhost/phpmyadmin bisa dijalankan.
74Disain dan Pemograman Web
Halaman untuk login pada phpmyadmin
Pada saat logon, masukkan username dan password seperti yang diregistrasi pada saat instalasi.
75Disain dan Pemograman Web
Untuk membuat database pilih menu Create database pada bidang isian Create new database (seperti
yang ditunjukkan dengan tanda panah pada gambar), dan masukkan nama datanbase yang diinginkan.
Contoh : Database1 kemudian klik tombol Create. Setelah database dibuat maka pada jendela sebelah
kiri akan muncul nama dari database tersebut, Database1(0). Setelah nama database diikuti angka nol
dalam tanda kurung. Angka dalam tanda kurung ini menunjukkan jumlah tabel yang ada pada database,
nol (0) berarti belum ada tabel.
Membuat sebuah Table
Setelah Database dibuat, langkah selanjutnya adalah membuat tabel-tabel. Tabel merupakan bagian
database untuk menyimpan informasi. Phpmyadmin akan mengarahkan anda untuk membut tabel
pertama begitu database dibuat.
Anda akan diminta untuk memberikan nama tabel dan jumlah field (kolom). Membuat sebuah table
pada PHPMyAdmin sangat sederhana, hanya memesukkan nama table menentukan jumlah filed dan
klik Go.
Sebagai contoh kita akan membuat tabel dengan nama mahasiswa dengan jumlah filed sebanyak 4
Klik Go untuk langkah selanjutnya.
Langkah berikutnya memberikan nama setiap filed yang terdiri atas nama, NIM, jurusan dan alamat
seperti gambar berikut:
76Disain dan Pemograman Web
Untul contoh tabel yang dibuat mari kita tentukan nama dan type datanya seperti berikut:
Setelah itu tekan tombol Save untuk mengakhri pembuatan tabel.
77Disain dan Pemograman Web
Tampilan diatas memperlihatkan tampilan phpmysql yang telah berisi tabel mahasiswa.
Pengisian data bisa dilakukan melalui phpmyadmin dengan mengklik tab Insert
Klik Go untuk mengakhiri pemasukan data.
Untuk melihat data, pilih Tab Browse.
78Disain dan Pemograman Web
Screen shot diatas adalah tampilan isi data dari tabel mahasiswa. Data diatas bisa diedit dengan
memilih tombol pulpen ( ) atau dihapus melalui tombol x.
Membuat tabel dengan skrip
Membuat tabel dengan skrip sedikit lebih sulit dibandingkan dengan phpmyadmin. Membuat tabel
menggunakan skrip php biasanya diperlukan untuk melakukan secara otomatis.
Format skrip untuk membuat tabel adalah sebagai berikut :
CREATE TABLE tablename {
Fields
}
Field-field didefenisikan sebagai berikut:
fieldname type(length) extra info,
Field terakhir harus tidak ada koma sesudahnya.
Contoh skrip untuk pembuatan tabel adalah seperti berikut:
CREATE TABLE IF NOT EXISTS `mhs` (
`Nama` varchar(30) NOT NULL,
`Nim` int(12) NOT NULL,
`Jurusan` varchar(20) NOT NULL,
`Alamat` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Untuk latihan:
79Disain dan Pemograman Web
Kopi skrip diatas dan tempelkan pada tab SQL pada phpmyadmin, maka anda akan mempunyai tabel
baru dengan nama mhs.
Database data mahasiswa
Database mahasiswa yang sedang dibuat terdiri atas 5 field dengan tipe data sebagai berikut:
Name
Type
Length
Description
id
nama
NIM
prodi
email
INT
VARCHAR
VARCHAR
VARCHAR
VARCHAR
6
15
15
20
30
Nomor unik sebagai identifikasi setiap rekor
Nama mahasiswa
Nomor Induk mahasiswa
program studi
Alamat email
Ada satu hal lagi wang harus diperhatikan dalam sebuah database yaitu filed id.
Filed id diset dengan PRIMARY, INDEX, UNIQUE dan dalam peningkatan otomatis (auto_increment).
Tujuan membuat id dengan identifier (primary and index) dan harus unik adalah setiap data dalam table
akan diidentifikasi dengan nomor yang tidak sama dengan data yang lain. Seting auto increment akan
memberikan nomor pada id ini dengan nomor lebh besar dari sebelumnya walaupun tidak dimasukkan
dalam pengisian data.
Membuat table menggunakan PHP
80Disain dan Pemograman Web
Kode berikut digunakan untuk membuat table melalui eksekusi skrip php. Beberapa kode belum
dijelaskan tetapi akan dijelaskan pada bagian selanjutnya
<?
$user="username";
$password="password";
$database="database";
mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="CREATE TABLE mahasiswa (id int(6) NOT NULL auto_increment,nama varchar(15) NOT NULL,NIM varchar(15) NOT
NULL,prodi varchar(20) NOT NULL, email varchar(30) NOT NULL";
mysql_query($query);
mysql_close();
?>
Mengacu pada setting database yang dibuat sebelumnya masukkan nama username (root), password
(123456) dan nama database (database1).
Koneksi ke database
Koneksi kedatabase merupakan langkah pertama yang dilakukan sebelum perintah yang lain. Apabila
koneksi tidak berjalan, maka sebua perintah yang berhubungan dengan database akan gagal. Praktek
yang baik adalah menggunakan username, password dan nama database dalam sebuah file terpisah
sehingga bisa diubah dengan mudah dikemudian hari.
Misalnya buat sebuah file dengan nama dbinfo.php (terpisah dengan file yang berisi halaman web
lainnya) dengan isi seperti berikut:
<?php
$username="root";
$password="123456";
$database="database1";
?>
Mungkin anda khawatir mengenai keamanan database dengan meletakan password dalam file. Anda
tidak using ragu karena kode program php diproses oleh server sebelum dikirim ke browser. Tidak
mungkin pengguna isa melihat kode skrip.
Agar dbinfo.php bisa diakses oleh file web maka pada bagian awal halaman web dimasukka perintah
berikut :
require("dbinfo.php");
Baris ini bermaksud untuk memasukkan isi dari dbinfo.php pada halaman yang diakses.
mysql_connect(localhost,$username,$password);
Baris ini mengatakan pada php untuk melakukan koneksi ke server database MySQL database yang
terletak do 'localhost' (localhost berarti server dimana website dijalankan). Jika menjalankan database
81Disain dan Pemograman Web
pada tempat yang berbeda dengan server web, anda harus memberikan alamat dari server tersebut. Jika
alamat server datavbase adalah sql.myserver.com, maka ganti localhost dengan “sql.myserver.com"
(termasuk tanda kutip juga ditulis).
Perintah terakhir mengenai koneksi ke database adalah
mysql_close();
Ini adalah perintah yang penting yang berfungsi menutup sambungan ke server database. Skrip bisa
tetap jalan apabila tidak menutup database, tetapi akan bermasalah pada host web kalau terjadi banyak
sekali sambungan ke server database.
Memilih database
Memilih database dilakukan dengan perintah berikut :
mysql_select_db($database) or die( "Tidak bisa memilih database");
Perintah ini mengatakan pada php untuk memilih database seperti isi variabel $database (seperti di set
sebelumnya). Apabila tidak bisa tersambung akan menghentikan jalannya skrip dan mengeluarkan teks:
Tidak bisa memilih database
Tambahan bagian 'or die' adalah bagus untuk meninggalkan skrip.
Perintah Eksekusi
Apabila telah berhasil koneksi ke database, anda bisa melakukan eksekusi perintah database pada
server.
Ada dua cara mengeksekusi sebuah perintah. Cara pertama adalah memasukkan perintah dalam php.
Cara ini digunakan apabila tidak aka nada hasil dari operasi. Cara lain adalah mendefenisikan perintah
sebagai sebuah variable. Ini akan menset variable dengan hasil operasi.
Contoh berikut adalah menggunakan cara pertama dimana kita tidak memerlukan respon dara database.
mysql_query($query);
Menambah data
Pada bagian ini akan menambahkan data pada database. Informasi yang akan ditambahkan adalah
sebagaiberikut:
Nama: John Heward
NIM: 101123412
prodi: Pendidikan Fisika
email: heward@gmail.com
82Disain dan Pemograman Web
Data ini diletakkan dalam perintah berikut:
$query = "INSERT INTO mahasiswa VALUES ('','John Heward', 101123412’, Pendidikan Fisika’,'heward@gmail.com')";
Variable $query digunakan dan diisi dengan perintah yang berada sebelah tanda sama dengan
Bagian berikutnya adalah menambahkan data kedalam table contacts.
INSERT INTO mahasiswa VALUES
Mengatakan pada PHP untuk memasukkan data baru kedalam tabel contact dengan nilai yang ada
diantara (). Bagian yang berada didalam kurung terdiri atas informasi yang akan ditambahkan. Sebagai
contoh:
John Heward akan dimasukkan pada field ke 2 yaitu field nama.
Pada filed pertama kita tidak perlu memasukkan nilai apa apa. Ini dilakukan karena filed pertama (id)
akan berfungsi sebagai index. Filed id diset auto Increment (peningkatan otomatis), ini berarti bahwa
nilai yang akan dimasukkan adalah satu nomor lebih tinggi dari nilai id yang sudah ada dalam database.
Input data melalui HTML
Memasukkan data melaui halaman HTML hampir serupa dengan menggunakan skrip php.
Kelebihannya adalah anda tidak perlu mengganti skrip untuk setiap data yang dimasukkan. Disamping
itu pengguna bisa memasukkan datanya sendiri tanpa harus melaui skrip php.
Kode berikut memperlihatkan sekelompok halaman HTML dengan textbox untuk mengisikan data.
<form action="tambah.php" method="post">
Nama: <input type="text" name="nama"><br>
NIM: <input type="text" name="NIM"><br>
Program Studi : <input type="text" name="prodi"><br>
E-mail: <input type="text" name="email"><br>
<input type="Submit">
</form>
Skrip berikut merupakan halaman untuk memproses input data yang dipanggil melalui skrip diatas.
<?
require("dbinfo.php");
83Disain dan Pemograman Web
$nama=$_POST['nama'];
$nim=$_POST['NIM'];
$prodi=$_POST['prodi'];
$email=$_POST['email'];
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query = "INSERT INTO contacts VALUES ('','$nama','$nim','$prodi', '$email')";
mysql_query($query);
mysql_close();
?>
Skrip ini sebaiknya disimpan dengan nama tambah.php yang nantinya akan dipanggil oleh form
HTML. File ini akan bekerja memasukkan data kedalam database setelah kita mengimputkan isinya
melalui form. Data ini dilewatkan dari form melalui metoda POST.
Sebaiknya juga menambahkan skrip konfirmasi untuk input data tersebut.
Outputting Data
Sekarang sudah ada sekurangny satu data dalam datbase. Sekarang tentu anda ingi tahu bagaimana
menampilkan data ini menggunakan PHP. Untuk melakukannya anda perlu pengetahuan tentang
looping dalam PHP karena digunakan menyaring data dari sekumpulan data dalam tabel.
Perintah pertama adalah query MySQL seperti berikut:
SELECT * FROM mahasiswa
Perintah MySQL dasar ini mengatakan pada PHP untuk memilih semua rekod dalam tabel mahasiswa.
Keluaran dari perintah ini dieksekusi dan dimasukkan kedalam sebuah variabel. Dalam contoh berikut
nama variabelnya adalah $result.
$query="SELECT * FROM mahasiswa";
$result=mysql_query($query);
Dalam kasus ini, isi dari database adalah berbentuk array (variabel dengan banyak isi) dengan nama
$result. Sebelum mengeluarkan isi data, terlebih dulu harus memisahkan isi dari variabel array ini. Ada
dua tahap yang perludilakukan; menghitung jumlah baris dan memasukandata kedalam variable baru.
Menghitung jumlah baris
Menghitung jumlah baris data dalam hasil eksekusi diatas dilakukan dengan perintah:
$num=mysql_numrows($result);
84Disain dan Pemograman Web
Ini akan mengisi variabel $num berupa angka sesuai dengan jumlah baris tersimpan dalam tabel
mahasiswa. Untuk mengambil semua data maka diperlukan proses loop.
Membuat Loop
Lop adalah perintah untuk mengambil isi setiap baris datayang ada didalamnnya. Anda bisa mengontrol
jumlah pengulangan sebanyak data yang ada. Dengan menggunakan variabel $num, dimana dijalankan
diatas untuk mengetahui jumlah data, anda bisa mengontrol pengulangan dengan mudah. Format
kodenya adalah seperti berikut:
$i=0;
while ($i < $num) {
CODE
$i++;
}
Ini adalah dasar loop PHP dan mengeksekusi kode dengan jumlah pungulangan yang tepat. Setiap kali
pengulangan, nilai $i akan lebih besar dari nilai sebelumnya. Isi variable $i mengatakan pada skrip
baris nomor berapa yang harus dibaca. Lopp while ini akan berakhir apabila nilai $i sudah sama dengan
$num ($num adalah jumlah data dalam database mahasiswa).
Memasukkan data kedalam Variabel
Tugas terakhir dari keluaran skrip adalah untuk menempatkan setiap kepingan data ke dalam
variabelnya masing-masing. Kode berikut digunakan untuk melakukan hal tersebut:
$variable=mysql_result($result,$i,"fieldname");
Variabel $i berfungsi menentukan baris nomor berapa dari data-data yang ada didalam $result yang
harus diambil. “fieldnama” adalah nama dari kolom dalam tabel yanag sean diakses. Untuk mengambil
setiap individu data dari dalam database, skripnya adalah sebagai berikut:
$nama=mysql_result($result,$i,"Nama");
$nim=mysql_result($result,$i,"NIM");
$prodi=mysql_result($result,$i,"Prodi");
$email=mysql_result($result,$i,"Email");
Sebagai contoh sebuah tabel dalam database berisi data mahasiswa seperti berikut:
85Disain dan Pemograman Web
Nama NIM Prodi Email
Anita 102121 TIK anita@stkipsurya.com
Bakhtiar 102122 Fisika bakhtiar@stkipsurya.com
Chairani 102123 Matematika chairani@stkipsurya.com
Apabila fungsi $nim=mysql_result($result,$i,"NIM") dieksekusi dimana $i berisi nilai 2 maka
$nim akan berisi nilai “102122”.
Tugas :
Tentukan nilai $prodi jika skrip $prodi=mysql_result($result,$i,"Prodi"); dengan nilai $i sama dengan
3?
Menggabungkan skrip
Sekarang kita bisa menulis skrip penuh untuk menulis data. Dalam skrip ini data output tidak diberi
format (tersusun).
<?
require("dbinfo.php");
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM mahasiswa";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
echo "<b><center>Keluaran Database</center></b><br><br>";
$i=0;
while ($i < $num) {
$nama=mysql_result($result,$i,"nama");
$nim=mysql_result($result,$i,"NIM");
$prodi=mysql_result($result,$i,"prodi");
$email=mysql_result($result,$i,"email");
echo "<b>Nama : $nama</b><br>NIM: $nim<br>Program Studi: $prodi<br>E-mail:
$i++;
}
$email<hr><br>";
?>
Fungsi echo dalam loop diatas menampilkan isi seperti yang tertera didalam tanda kutip (“”), variable
yang ada didalamnya akan ditampilkan berupa nilai dari variable tersebut.
86Disain dan Pemograman Web
Sebagai latihan anda diminta untuk menkopi skrip tersebut dan menempelkannya kedalam teks editor.
Simpan file tersebut dengan nama mahasiswa.php, upload keserver dan jalankan melalui web browser.
(Sebelum menjalankan skrip ini anda sudah mempunyai file dbinfo.php dan database dengan tabel
mahasiswa yang sudah berisi rekor).
Output terformat
Sekarang kita akan membuat skrip dengan keluaran terformat. Membuat keluaran terformat tidaklah
rumit, yang diperlukan adalah menggunakan PHP untuk membuat keluaran dalam susunan yang benar.
Cara paling mudah melakukannya menempatkan kode PHP pada posisi yang diinginkan yang berisi
variable yang akan ditampilkan didalam HTML yang normal seperti berikut :
<? echo $variablename; ?>
Contoh berikut adalah menampilkan data yang dibaca dari database kedalam HTML berupa tabel.
Perhatikan, Variable yang akan ditampilkan ditempatkan dalam skrip php. Seperti contoh variable
nama ditulis didalam tabel HTML <td><font face="Arial, Helvetica, sans-serif"><? echo $nama." ".$last;
?></font></td>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th><font face="Arial, Helvetica, sans-serif">Nama</font></th>
<th><font face="Arial, Helvetica, sans-serif">Program studi</font></th>
<th><font face="Arial, Helvetica, sans-serif">NIM</font></th>
<th><font face="Arial, Helvetica, sans-serif">E-mail</font></th>
</tr>
<?
$i=0;
while ($i < $num) {
$nama=mysql_result($result,$i,"nama");
$nim=mysql_result($result,$i,"NIM");
$program studi=mysql_result($result,$i,"prodi");
$email=mysql_result($result,$i,"email");
?>
<tr>
<td><font face="Arial, Helvetica, sans-serif"><? echo $nama." ".$last; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><? echo $nim; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><? echo $prodi; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><a href="mailto:<? echo $email; ?>">E-mail</a></font></td>
</tr>
<?
$i++;
}
echo "</table>";
?>
87Disain dan Pemograman Web
Kode ini akan menulis header table kemudian menambah baris untuk setiap rekor yang ada dalam
database yang ditulis secara tersusun.
Kalau sudah familiar dengan PHP dan HTML maka kode ini bisa dimengerti secara baik. Mungkin
bagian dibawah ini perlu penjelasan.
<a href="mailto:<? echo $email; ?>">E-mail</a>
Penulisan mailto bertujuan akan membuka aplikasi email apabila alamat email diklik.
Memilih data
Selain menunjukkan semua database, PHP bisa digunakan untuk memilih rekor individu dengan criteria
tertentu. Untuk menampilkan semua isi table maka kita telah memilih query :
SELECT * FROM mahasiswa
Apabila kita ingin seseorang dengan nama John Heward maka dalam dalam query select ditambahkan
kondisi WHERE:
SELECT * FROM mahasiswa WHERE nama='Chairani'
Kueri ini hampir mirip dangan perintah bahasa inggris pada umumnya. Cara ini digunakan untuk
memilih isi rekaman
Perintah kueri ini bisa digunakan untuk mencari seseorang dengan kriteria tertentu. Misalnya kita akan
mencari atau mengetahui data mahasiswa dengan nomor nim (Contoh 102122/ atau seperti yang ada
dalam tabel yang anda buat). Defenisikan sebuah variabel untuk ini misalnya $cari, kemudia eksekusi
dengan perintah berikut:
$query="SELECT * FROM mahasiswa WHERE NIM='$cari'";
$result=mysql_query($query);
Tugas :
Buatlah sebuah website utnuk melakukan pencarian dengan kata kunci NIM. Tampilkan hasil pencarian
dengan menggunakan keluaran terformat.
Tips: Buat dua buah file php. File pertama berupa form isian (form.php), dan file berfungsi
mengeksekusi form.php (misalnya cari.php). Perhatikan contoh skrip yang diberikan pada bagian Input
data melalui HTML sebagai acuan.
Kesimpulan
Pelajaran ini memberikan langkah-langkah dasar menggunakan PHP dan MySQL bersama untuk
membuat website yang didukung oleh database dan program. Dengan menggunakan database dengan
web banyak pilihan dilakukan dan membuat web simple yang berdaya guna. Cara ini akan menghemat
waktu untuk mengupdate, memgizinkan untuk berinteraksi, adanya umpan balik dan sebagainya.
88Disain dan Pemograman Web
89Disain dan Pemograman Web
Bab 8 : Membuat Website yang berkualitas
Pelajaran ini diberikan setelah peserta mengenal banyak tool dalam pembuatan website. Setelah
mempelajari bab ini mahasiswa mampu untuk memilih rancangan yang baik berdasarkan pada berbagai
pertimbangan yang diperlukan.
Kriteria sebuah qualitas website
Sangatlah disarankan bahwa dalam membuat website selalu mengikuti kriteria kualitas. Website dibuat
bukanlah untuk dibaca sendiri tetapi untuk orang lain. Pembuat web sudah tahu isi yang dibuat. Tetapi
pembaca belum. Untuk itu tampilan harus rapi dan tulisan harus mudah dimengerti.
Berikut ini adalah beberapa acuan yang bisa dipakai untuk pedoman.
Latarbelakang
Hindari penggunaan tampilan yang menyolok khususnya untuk web komersial. Penggunaan text
berwarna yang sulit untuk dibaca dan pola latar belakang yang komplek sudah seharusnya
ditinggalkan..
Halaman harus bersih, uncluttered, dan sangat mudah dibaca tanpa hurting mata. Jangan menggunakan
latar belakan hitam. Ini sangat menyulitkan untuk dicetak dengan printer. White, off-white, pale, or an
exceptionally light texture is okay as long as it NEVER detracts from the text and the images have
impact.
Banner
Jangan menempatkan banner pada top halaman dan tempatkan banner kurang dari empat macam.
Ingin menjadikan Web Komersial? Jelaskan tentang siapa anda, apa yang dilakukan dan buat sesuatu
yang unik. Kenapa menggunakan produk atau servis dari anda dan bagaimana anda bisa memenuhi
kebutuhan pembaca disana.Harus diperhatikan bahwa web menjadi tidak efektif kalau yang diinginkan
hanyalah uang.
Tawarkan informasi tentang produk atau servis yang anda punyai melalui link atau catatan subliminial
tapi ambil backseat dari isi. Isi adalah segalanya menjual tanpa rasa menjual adalah cara untuk menjadi
komersial. Yang paling penting semuanya adalah kejelasan dari isi dan maksud.
Komlain pada browser. Harus diperiksa bahwa web yang dibuat harus bisa terlihatn baik dengan semua
browser sebelum mengirimkannya. Sekurang kurangya dilakukan pengujian dengan tiga browser
teraktif. Ada sekitar 85% pembaca menggunakan Firefox, Chrome dan Internet Explorer.
Isi
Isi adalah raja. Web yang dibuat haruslah mempunyai isi yang ada kontribusinya ke visitor terhadap
keluhan atau kebutuhannya. Tawarkan sesuatu yang mereka tidak bisa mendapatkan dari yang lain.
90Disain dan Pemograman Web
Bisa juga menyampaikan opni anda sendiri tetapi harus diyakini bahwa itu benar.
Counter/ Penghitung
Pinghitung untuk beberapa site adalah efektif untuk menunjukkan kredibilitas, tetapi untuk site yang
kaya dengan isi, nilai dari penghitung jauh dari penting.
Kontak.
Harus diberikan cara yang jelas untuk menghubungi perosahaan dengan melengkapi email, alamat
lengkap, telepon/fax. Jika tidak ada alamat dan telepon, akan diasumsikan ada sesuatu yang
disembunyikan. Harus ada navigasi yang jelas ke halaman kontak.
Hindari menggunakan doorwaypage(splash screen). Pengunjung akan kehilangan waktu hanya
menunggu sebuah logo anda tampil pertama kali dalam waktu yang lama.
Animasi yang berlebihan.
Gambar animasi dan teks flashing seharusnya menjadi web kian menarik, namun tidaklah demikian
saat ini. Harus diperhatikan bahwa peralatan anda mempunyai tujuan, kalau akan memparlambat dan
tidak ada tambahan kepada pesan sebaiknya jangan digunakan.
Frame.
Jangan gunakan frame apa bila tidak ada kontribusi kepada web seperti untuk navigasi. Frame yang
digunakan baik akan membuat web menjadi lebih berarti.
Grafik.
Isi dari web adalah utama tetapi isi tanpa tampilan menarik, kalau tidak ibarat menjual rumah, orang
hanya melihat dari jalan tanpa mau melihat kedalam. Tetapi bila tampilan bagus, orang akn masuk
kedalam dan melihat-lihat sekeliling. Mengecilakan ukuran grafik untuk alas an kecepatan adalh baik,
tetapi jangan sampai merusak tampilan. Membuat icon email yang bergerak bisa sedikit member
kontrobusi ke isi.
Kebersihan code HTML. Tidak perlu dikawatirkan tentang kebersihan kode HTML yang dibuat, hanya
saja perlu menjadi perhatian apabila memperjelek tampilan pada waktu berpidah browser atau monitor
Menggunakan site inspection tool adalah bagus, tetapi anda harus adhere untuk melakukan praktek
yang baik dalam menulis kode halaman.
Javascript
Jangan terlalu berlebihan menggunakan Javascript. Javascript bisa efektif sebagai bantuan navigasi
(untuk mengetahui tombol ), tetapi diluar itu harus mempunyai tujuan yang lebih bagus. Hanya sekedar
mengatakan kepengguna bahwa anda browser apa atau nama anda siapa tidaklah membantu dalam isi.
91Disain dan Pemograman Web
Link
Kalau ada link yang rusak, betulkan sebelum di upload. Gunakan tool yang bisa menguji akurasi dari
link.
Matching. Rancangan yang umum dari site adalah semuanya harus maching. Pengunjung akan merasa
nyaman kalau melihat dan perpindahan yang hamper sama dari satu halaman ke halaman yang lain.
Navigasi harus ditempatkan disuatu lokasi yang sama. Pergantian style dalam sebuag situs tidak
direkomendasikan.
Tujuan yang jelas. Harus diyakini bahwa teks pada halaman paling atas mengatakan pada pengunjung
sehingga dia akan merasa mendapatkan sesuatu dari situs anda. Jangan sampai dia meninggalkan situs
anda setelah membaca kalimat dihalaman atas. Buat dia tahu bahwa situs anda akan menghilangkan
sakitnya atau kebutuhan akan terpenuhi.
Hindari penggunaan plugins. Jika dimasukkan file suara harus ada tombol untuk mematikannya.
Ukuran layar. Saat ini ukuran yang umum digunakan adalah 1024x768. Sebelum mempublikasi situs ke
umum, periksa ukuran halaman anda adalah 1024x768 atau lebih
Pesan berjalan. Pesan berjalan menggunakan scrolling marquee pada bagian bawah. Sebaiknya dengan
tulisan tebal dan bila di klik akan menuju ke link.
Tugas :
Merancang Web Menggunakan Template
Template merupakan media yang efektif untuk memulai merancang sebuah web. Dengan mnggunakan
template tugas kita sebagian besar hanya memilih layout yang paling sesuai dengan isi web yang
dibuat.
Banyak template yang tersedia baik free atau komersial. Template juga disediakan oleh beberapa web
hosting.
Contoh web template:
http://www.wix.com/afzerit/template1
www.dotemplate.com
Ambil sebuah template dari dotemplate.com, dowload dan simpan dalam server web anda.
Lakukan editing pada template tersebut untuk menghasilkan sebuah halaman web pelajaran.
Kode sebuah contoh template adalah seperti dibawah ini:
92Disain dan Pemograman Web
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Web site" />
<meta name="description" content="Site description here" />
<meta name="keywords" content="keywords here" />
<meta name="language" content="en" />
<meta name="subject" content="Site subject here" />
<meta name="robots" content="All" />
<meta name="copyright" content="Your company" />
<meta name="abstract" content="Site description here" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link id="theme" rel="stylesheet" type="text/css" href="style.css" title="theme" />
<script type="text/javascript" language="javascript" src="js/addon.js"></script>
<script type="text/javascript" language="javascript" src="js/custom.js"></script>
</head>
<body>

<div id="topWrapper">
<div id="topBannerWrapper">
<div id="topBanner">
<div id="hmenuWrapper">
<div id="hmenu">
<ul>
<li id="current" style="border:none">
<a href="#" shape="rect">Home</a>
</li>
<li>
<a href="service.html" shape="rect">Products</a>
</li>
<li>
<a href="#" shape="rect">Services</a>
</li>
<li>
<a href="#" shape="rect">News</a>
</li>
<li>
<a href="#" shape="rect">About</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="topSlideshowWrapper">
<div id="sliderContainer">

<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<a href="http://all-free-download.com" title="Audi R8" target="_blank" shape="rect">
<img src="http://lh4.ggpht.com/_d6vKxl1jKWk/TB3zMLtS9xI/AAAAAAABdSs/WUtytrhJd8c/AudiR8.jpg" />
<span class="bottom" style="display: inline;">
<strong>Audi R8</strong>
<br clear="none" /> Change the slideshow image easily in the HTML code.
</span>
</a>
</li>
<li class="slider1Image">
93Disain dan Pemograman Web
<a href="http://all-free-download.com" title="Ferrari 612" target="_blank" shape="rect">
<img src="http://lh4.ggpht.com/_d6vKxl1jKWk/TByyLb_qnWI/AAAAAAABc38/sHskIRlXAdc/FerrariBlack.jpg" />
<span class="bottom" style="display: inline;">
<strong>Ferrari 612</strong>
<br clear="none" /> Change the slideshow image easily in the HTML code.
</span>
</a>
</li>
<li class="slider1Image">
<a href="http://all-free-download.com" title="Lamborghini Gallardo" target="_blank" shape="rect">
<img src="http://lh3.ggpht.com/_d6vKxl1jKWk/TB3zMNrh-4I/AAAAAAABdSo/6WO4HBMCWDI/LamborghiniGallardoBlack.jpg" />
<span class="bottom" style="display: inline;">
<strong>Lamborghini Gallardo</strong>
<br clear="none" /> Change the slideshow image easily in the HTML code.
</span>
</a>
</li>
<li class="slider1Image" style="clear:both"></li>
</ul>
<div id="sliderLeftMask"></div>
<div id="sliderRightMask"></div>
</div>
</div>
</div>
</div>

<div id="wrapper">
<div id="container">

<div id="content">
<div style="margin-top:20px;">
<div id="main">
<h1>Halaman Depan</h1>
<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie,
enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</p>
<h2>Heading 2 sample</h2>
<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie,
enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</p>
</div>
<div id="sidebar">
<div class="bloc rounded" style="margin-top:20px;">
<h3>License</h3>
<p>This template is free. You are free to use it, share it, redistribute it, modify it in any way you want as long as you
<strong>keep a link back to doTemplate Website</strong> in the footer. You can remove this link by making a $10
<a href="http://www.dotemplate.com/dt/index.jsp#donate" target="_blank" shape="rect">donation</a>.
</p>
</div>
<div class="bloc rounded" style="margin-top:20px;">
<h3>Latest news</h3>
<p>Lorem ipsum dolor sit amet, turpis egestas commodo, eget non ultrices nec lectus, ac interdum, netus aliquam, vulputate vel reiciendis risus.
Lorem ipsum dolor sit amet, turpis egestas commodo</p>
94Disain dan Pemograman Web
</div>
</div>
</div>
<div class="clear"></div>
</div>

<div class="clear" style="height:40px"></div>
</div>

</div>
<div id="bottomWrapper">
<div id="footer">
<div class="footer-one-third">
<h2>Company</h2>
<ul>
<li>
<a href="#" shape="rect">Who are we</a>
</li>
<li>
<a href="#" shape="rect">What we do</a>
</li>
<li>
<a href="#" shape="rect">Contact</a>
</li>
<li>
<a href="#" shape="rect">Partners</a>
</li>
<li>
<a href="#" shape="rect">Links</a>
</li>
</ul>
</div>
<div class="footer-one-third">
<h2>Products</h2>
<ul>
<li>
<a href="#" shape="rect">Products</a>
</li>
<li>
<a href="#" shape="rect">Services</a>
</li>
<li>
<a href="#" shape="rect">Clients</a>
95Disain dan Pemograman Web
</li>
<li>
<a href="#" shape="rect">Testimonials</a>
</li>
<li>
<a href="#" shape="rect">Links</a>
</li>
</ul>
</div>
<div class="footer-one-third footer-last">
<h2>Blog archives</h2>
<ul>
<li>
<a href="#" shape="rect">Lorem ipsum</a>
</li>
<li>
<a href="#" shape="rect">Dolor sit</a>
</li>
<li>
<a href="#" shape="rect">Turpis egestas</a>
</li>
<li>
<a href="#" shape="rect">Commodo</a>
</li>
<li>
<a href="#" shape="rect">Eget non</a>
</li>
</ul>
</div>
</div>
<div id="bottom-links">
<div style="padding-top:20px">

<a href="http://www.dotemplate.com" shape="rect">Templates</a> maker
</div>
</div>
</div>
96Disain dan Pemograman Web
</body>
</html>
97Disain dan Pemograman Web
Apendix 1 : Form sintak dan parameter (Pendukung Bab 3)
Elemen Form
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
<!ATTLIST FORM
%attrs;
-- %coreattrs, %i18n, %events --
action
%URI;
#REQUIRED -- server-side form handler --
method
(GET|POST) GET
-- HTTP method used to submit the form--
enctype %ContentType; "application/x-www-form-urlencoded"
accept
%ContentTypes; #IMPLIED -- list of MIME types for file upload --
name
CDATA
#IMPLIED -- name of form for scripting --
onsubmit %Script;
#IMPLIED -- the form was submitted --
onreset %Script;
#IMPLIED -- the form was reset --
accept-charset %Charsets; #IMPLIED -- list of supported charsets --
>
Start tag: required, End tag: required
definition atribut
action = uri [CT]
Aatribute ini menspesifikasikan agen pemrosesan forms.
method = get|post [CI]
Aatribut menspesifikasikan metoda HTTP mana yang akan digunakan untuk mengirinkan
set form data.
enctype = content-type [CI]
This attribute specifies the content type used to submit the form to the server (when the
value of method is "post"). The default value for this attribute is "application/x-www-form-
urlencoded". The value "multipart/form-data" should be used in combination with the
INPUT element, type="file".
accept-charset = charset list [CI]
This attribute specifies the list of character encodings for input data that is accepted by the
server processing this form. The value is a space- and/or comma-delimited list of charset
values. The client must interpret this list as an exclusive-or list, i.e., the server is able to
accept any single character encoding per entity received.
The default value for this attribute is the reserved string "UNKNOWN". User agents may
interpret this value as the character encoding that was used to transmit the document
containing this FORM element.
accept = content-type-list [CI]
This attribute specifies a comma-separated list of content types that a server processing this
form will handle correctly. User agents may use this information to filter out non-
conforming files when prompting a user to select files to be sent to the server (cf. the
INPUT element when type="file").
name = cdata [CI]
This attribute names the element so that it may be referred to from style sheets or scripts.
98Disain dan Pemograman Web
Note. This attribute has been included for backwards compatibility. Applications should
use the id attribute to identify elements.
Attributes defined elsewhere
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
 style (inline style information)
 title (element title)
 target (target frame information)
 onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
The FORM element acts as a container for controls. It specifies:
 The layout of the form (given by the contents of the element).
 The program that will handle the completed and submitted form (the action attribute).
The receiving program must be able to parse name/value pairs in order to make use of
them.
 The method by which user data will be sent to the server (the method attribute).
 A character encoding that must be accepted by the server in order to handle this form (the
accept-charset attribute). User agents may advise the user of the value of the accept-
charset attribute and/or restrict the user's ability to enter unrecognized characters.
A form can contain text and markup (paragraphs, lists, etc.) in addition to form controls.
The following example shows a form that is to be processed by the "adduser" program when
submitted. The form will be sent to the program using the HTTP "post" method.
<FORM action="http://somesite.com/prog/adduser" method="post">
...form contents...
</FORM>
Please consult the section on form submission for information about how user agents must
prepare form data for servers and how user agents should handle expected responses.
Note. Further discussion on the behavior of servers that receive form data is beyond the scope of
this specification.
17.4 Elemen INPUT
<!ENTITY % InputType
"(TEXT | PASSWORD | CHECKBOX |
RADIO | SUBMIT | RESET |
FILE | HIDDEN | IMAGE | BUTTON)"
>

<!ELEMENT INPUT - O EMPTY
-- form control -->
<!ATTLIST INPUT
%attrs;
-- %coreattrs, %i18n, %events --
type
%InputType; TEXT
-- what kind of widget is needed --
name
CDATA
#IMPLIED -- submit as part of form --
99Disain dan Pemograman Web
value
CDATA
#IMPLIED -- Specify for radio buttons and checkboxes --
checked (checked)
#IMPLIED -- for radio buttons and check boxes --
disabled (disabled) #IMPLIED -- unavailable in this context --
readonly (readonly) #IMPLIED -- for text and passwd --
size
CDATA
#IMPLIED -- specific to each type of field --
maxlength NUMBER
#IMPLIED -- max chars for text fields --
src
%URI;
#IMPLIED -- for fields with images --
alt
CDATA
#IMPLIED -- short description --
usemap
%URI;
#IMPLIED -- use client-side image map --
ismap
(ismap)
#IMPLIED -- use server-side image map --
tabindex NUMBER
#IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script;
#IMPLIED -- the element got the focus --
onblur
%Script;
#IMPLIED -- the element lost the focus --
onselect %Script;
#IMPLIED -- some text was selected --
onchange %Script;
#IMPLIED -- the element value was changed --
accept
%ContentTypes; #IMPLIED -- list of MIME types for file upload --
>
Start tag: required, End tag: forbidden
Attribute definitions
type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI]
This attribute specifies the type of control to create. The default value for this attribute is
"text".
name = cdata [CI]
This attribute assigns the control name.
value = cdata [CA]
This attribute specifies the initial value of the control. It is optional except when the type
attribute has the value "radio" or "checkbox".
size = cdata [CN]
This attribute tells the user agent the initial width of the control. The width is given in
pixels except when type attribute has the value "text" or "password". In that case, its value
refers to the (integer) number of characters.
maxlength = number [CN]
When the type attribute has the value "text" or "password", this attribute specifies the
maximum number of characters the user may enter. This number may exceed the specified
size, in which case the user agent should offer a scrolling mechanism. The default value for
this attribute is an unlimited number.
checked [CI]
When the type attribute has the value "radio" or "checkbox", this boolean attribute
specifies that the button is on. User agents must ignore this attribute for other control types.
src = uri [CT]
When the type attribute has the value "image", this attribute specifies the location of the
image to be used to decorate the graphical submit button.
Attributes defined elsewhere
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
100Disain dan Pemograman Web
 title (element title)
 style (inline style information)
 alt (alternate text)
 align (alignment)
 accept (legal content types for a server)
 readonly (read-only input controls)
 disabled (disabled input controls)
 tabindex (tabbing navigation)
 accesskey (access keys)
 usemap (client-side image maps)
 ismap (server-side image maps)
 onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic
events)
17.4.1 Tipe-tipe kontrol dibuat dengan INPUT
The control type defined by the INPUT element depends on the value of the type attribute:
text
Creates a single-line text input control.
password
Like "text", but the input text is rendered in such a way as to hide the characters (e.g., a
series of asterisks). This control type is often used for sensitive input such as passwords.
Note that the current value is the text entered by the user, not the text rendered by the user
agent.
Note. Application designers should note that this mechanism affords only light security
protection. Although the password is masked by user agents from casual observers, it is
transmitted to the server in clear text, and may be read by anyone with low-level access to
the network.
checkbox
Creates a checkbox.
radio
Creates a radio button.
submit
Creates a submit button.
image
Creates a graphical submit button. The value of the src attribute specifies the URI of the
image that will decorate the button. For accessibility reasons, authors should provide
alternate text for the image via the alt attribute.
When a pointing device is used to click on the image, the form is submitted and the click
coordinates passed to the server. The x value is measured in pixels from the left of the
image, and the y value in pixels from the top of the image. The submitted data includes
name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and
101Disain dan Pemograman Web
x-value and y-value are the x and y coordinate values, respectively.
If the server takes different actions depending on the location clicked, users of non-
graphical browsers will be disadvantaged. For this reason, authors should consider
alternate approaches:
 Use multiple submit buttons (each with its own image) in place of a single
graphical submit button. Authors may use style sheets to control the positioning
of these buttons.
 Use a client-side image map together with scripting.
reset
Creates a reset button.
button
Creates a push button. User agents should use the value of the value attribute as the
button's label.
hidden
Creates a hidden control.
file
Creates a file select control. User agents may use the value of the value attribute as the
initial file name.
17.4.2 Contoh form berisi kontrol INPUT
The following sample HTML fragment defines a simple form that allows the user to enter a first
name, last name, email address, and gender. When the submit button is activated, the form will
be sent to the program specified by the action attribute.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
This form might be rendered as follows:
In the section on the LABEL element, we discuss marking up labels such as "First name".
In this next example, the JavaScript function name verify is triggered when the "onclick" event
occurs:
<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
<FORM action="..." method="post">
102Disain dan Pemograman Web
<P>
<INPUT type="button" value="Click Me" onclick="verify()">
</FORM>
</BODY>
Please consult the section on intrinsic events for more information about scripting and events.
The following example shows how the contents of a user-specified file may be submitted with a
form. The user is prompted for his or her name and a list of file names whose contents should be
submitted with the form. By specifying the enctype value of "multipart/form-data", each file's
contents will be packaged for submission in a separate section of a multipart document.
<FORM action="http://server.dom/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="name_of_sender">
What files are you sending? <INPUT type="file" name="name_of_files">
</P>
</FORM>
17.5 Elemen BUTTON
<!ELEMENT BUTTON - -
(%flow;)* -(A|%formctrl;|FORM|FIELDSET)
-- push button -->
<!ATTLIST BUTTON
%attrs;
-- %coreattrs, %i18n, %events --
name
CDATA
#IMPLIED
value
CDATA
#IMPLIED -- sent to server when submitted --
type
(button|submit|reset) submit -- for use as form button --
disabled (disabled) #IMPLIED -- unavailable in this context --
tabindex NUMBER
#IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script;
#IMPLIED -- the element got the focus --
onblur
%Script;
#IMPLIED -- the element lost the focus --
>
Start tag: required, End tag: required
Attribute definitions
name = cdata [CI]
This attribute assigns the control name.
value = cdata [CS]
This attribute assigns the initial value to the button.
type = submit|button|reset [CI]
This attribute declares the type of the button. Possible values:
 submit: Creates a submit button. This is the default value.
 reset: Creates a reset button.
 button: Creates a push button.
Attributes defined elsewhere
103Disain dan Pemograman Web
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
 title (element title)
 style (inline style information)
 disabled (disabled input controls)
 accesskey (access keys)
 tabindex (tabbing navigation)
 onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
Buttons created with the BUTTON element function just like buttons created with the INPUT
element, but they offer richer rendering possibilities: the BUTTON element may have content.
For example, a BUTTON element that contains an image functions like and may resemble an
INPUT element whose type is set to "image", but the BUTTON element type allows content.
Visual user agents may render BUTTON buttons with relief and an up/down motion when
clicked, while they may render INPUT buttons as "flat" images.
The following example expands a previous example, but creates submit and reset buttons with
BUTTON instead of INPUT. The buttons contain images by way of the IMG element.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<BUTTON name="submit" value="submit" type="submit">
Send<IMG src="/icons/wow.gif" alt="wow"></BUTTON>
<BUTTON name="reset" type="reset">
Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
</P>
</FORM>
Recall that authors must provide alternate text for an IMG element.
It is illegal to associate an image map with an IMG that appears as the contents of a BUTTON
element.
ILLEGAL EXAMPLE:
The following is not legal HTML.
<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>
17.6 Elemen SELECT, OPTGROUP, dan OPTION
<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- option selector -->
<!ATTLIST SELECT
%attrs;
-- %coreattrs, %i18n, %events --
name
CDATA
#IMPLIED -- field name --
size
NUMBER
#IMPLIED -- rows visible --
104Disain dan Pemograman Web
multiple
disabled
tabindex
onfocus
onblur
onchange
>
(multiple)
(disabled)
NUMBER
%Script;
%Script;
%Script;
#IMPLIED -- default is single selection --
#IMPLIED -- unavailable in this context --
#IMPLIED -- position in tabbing order --
#IMPLIED -- the element got the focus --
#IMPLIED -- the element lost the focus --
#IMPLIED -- the element value was changed --
Tag awal: Diperlukan, tag akhir: diperlukan
SELECT Attribute definitions
name = cdata [CI]
This attribute assigns the control name.
size = number [CN]
If a SELECT element is presented as a scrolled list box, this attribute specifies the number
of rows in the list that should be visible at the same time. Visual user agents are not
required to present a SELECT element as a list box; they may use any other mechanism,
such as a drop-down menu.
multiple [CI]
If set, this boolean attribute allows multiple selections. If not set, the SELECT element
only permits single selections.
Attributes defined elsewhere
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
 title (element title)
 style (inline style information)
 disabled (disabled input controls)
 tabindex (tabbing navigation)
 onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
The SELECT element creates a menu. Each choice offered by the menu is represented by an
OPTION element. A SELECT element must contain at least one OPTION element.
The OPTGROUP element allows authors to group choices logically. This is particularly helpful
when the user must choose from a long list of options; groups of related choices are easier to
grasp and remember than a single long list of options. In HTML 4, all OPTGROUP elements
must be specified directly within a SELECT element (i.e., groups may not be nested).
17.6.1 Pre-selected options
Zero or more choices may be pre-selected for the user. User agents should determine which
choices are pre-selected as follows:
 If no OPTION element has the selected attribute set, user agent behavior for choosing
which option is initially selected is undefined. Note. Since existing implementations
handle this case differently, the current specification differs from RFC 1866
([RFC1866] section 8.1.3), which states:
105Disain dan Pemograman Web
 The initial state has the first option selected, unless a SELECTED attribute
is present on any of the <OPTION> elements.
 Since user agent behavior differs, authors should ensure that each menu includes a
default pre-selected OPTION.
 If one OPTION element has the selected attribute set, it should be pre-selected.
 If the SELECT element has the multiple attribute set and more than one OPTION
element has the selected attribute set, they should all be pre-selected.
 It is considered an error if more than one OPTION element has the selected attribute set
and the SELECT element does not have the multiple attribute set. User agents may vary
in how they handle this error, but should not pre-select more than one choice.
<!ELEMENT OPTGROUP - - (OPTION)+ -- option group -->
<!ATTLIST OPTGROUP
%attrs;
-- %coreattrs, %i18n, %events --
disabled (disabled) #IMPLIED -- unavailable in this context --
label
%Text;
#REQUIRED -- for use in hierarchical menus --
>
Start tag: required, End tag: required
OPTGROUP Attribute definitions
label = text [CS]
This attribute specifies the label for the option group.
Attributes defined elsewhere
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
 title (element title)
 style (inline style information)
 disabled (disabled input controls)
 onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
Note. Implementors are advised that future versions of HTML may extend the grouping
mechanism to allow for nested groups (i.e., OPTGROUP elements may nest). This will allow
authors to represent a richer hierarchy of choices.
<!ELEMENT OPTION - O (#PCDATA)
-- selectable choice -->
<!ATTLIST OPTION
%attrs;
-- %coreattrs, %i18n, %events --
selected (selected) #IMPLIED
disabled (disabled) #IMPLIED -- unavailable in this context --
label
%Text;
#IMPLIED -- for use in hierarchical menus --
value
CDATA
#IMPLIED -- defaults to element content --
>
Start tag: required, End tag: optional
OPTION Attribute definitions
106Disain dan Pemograman Web
selected [CI]
When set, this boolean attribute specifies that this option is pre-selected.
value = cdata [CS]
This attribute specifies the initial value of the control. If this attribute is not set, the initial
value is set to the contents of the OPTION element.
label = text [CS]
This attribute allows authors to specify a shorter label for an option than the content of the
OPTION element. When specified, user agents should use the value of this attribute rather
than the content of the OPTION element as the option label.
Attributes defined elsewhere
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
 title (element title)
 style (inline style information)
 disabled (disabled input controls)
 onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
When rendering a menu choice, user agents should use the value of the label attribute of the
OPTION element as the choice. If this attribute is not specified, user agents should use the
contents of the OPTION element.
The label attribute of the OPTGROUP element specifies the label for a group of choices.
In this example, we create a menu that allows the user to select which of seven software
components to install. The first and second components are pre-selected but may be deselected
by the user. The remaining components are not pre-selected. The size attribute states that the
menu should only have 4 rows even though the user may select from among 7 options. The other
options should be made available through a scrolling mechanism.
The SELECT is followed by submit and reset buttons.
<FORM action="http://somesite.com/prog/component-select" method="post">
<P>
<SELECT multiple size="4" name="component-select">
<OPTION selected value="Component_1_a">Component_1</OPTION>
<OPTION selected value="Component_1_b">Component_2</OPTION>
<OPTION>Component_3</OPTION>
<OPTION>Component_4</OPTION>
<OPTION>Component_5</OPTION>
<OPTION>Component_6</OPTION>
<OPTION>Component_7</OPTION>
</SELECT>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
Only selected options will be successful (using the control name "component-select"). When no
options are selected, the control is not successful and neither the name nor any values are
submitted to the server when the form is submitted. Note that where the value attribute is set, it
107Disain dan Pemograman Web
determines the control's initial value, otherwise it's the element's contents.
In this example we use the OPTGROUP element to group choices. The following markup:
<FORM action="http://somesite.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTION selected label="none" value="none">None</OPTION>
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OPTION>
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION>
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</OPTION>
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION>
</OPTGROUP>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
represents the following grouping:
None
PortMaster 3
3.7.1
3.7
3.5
PortMaster 2
3.7
3.5
IRX
3.7R
3.5R
Visual user agents may allow users to select from option groups through a hierarchical menu or
some other mechanism that reflects the structure of choices.
A graphical user agent might render this as:
This image shows a SELECT element rendered as cascading menus. The top label of the menu
displays the currently selected value (PortMaster 3, 3.7.1). The user has unfurled two cascading
menus, but has not yet selected the new value (PortMaster 2, 3.7). Note that each cascading
menu displays the label of an OPTGROUP or OPTION element.
17.7 The TEXTAREA element
<!ELEMENT TEXTAREA - - (#PCDATA)
-- multi-line text field -->
<!ATTLIST TEXTAREA
%attrs;
-- %coreattrs, %i18n, %events --
108Disain dan Pemograman Web
name
CDATA
#IMPLIED
rows
NUMBER
#REQUIRED
cols
NUMBER
#REQUIRED
disabled (disabled) #IMPLIED -- unavailable in this context --
readonly (readonly) #IMPLIED
tabindex NUMBER
#IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script;
#IMPLIED -- the element got the focus --
onblur
%Script;
#IMPLIED -- the element lost the focus --
onselect %Script;
#IMPLIED -- some text was selected --
onchange %Script;
#IMPLIED -- the element value was changed --
>
Start tag: required, End tag: required
Attribute definitions
name = cdata [CI]
This attribute assigns the control name.
rows = number [CN]
This attribute specifies the number of visible text lines. Users should be able to enter more
lines than this, so user agents should provide some means to scroll through the contents of
the control when the contents extend beyond the visible area.
cols = number [CN]
This attribute specifies the visible width in average character widths. Users should be able
to enter longer lines than this, so user agents should provide some means to scroll through
the contents of the control when the contents extend beyond the visible area. User agents
may wrap visible text lines to keep long lines visible without the need for scrolling.
Attributes defined elsewhere
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
 title (element title)
 style (inline style information)
 readonly (read-only input controls)
 disabled (disabled input controls)
 tabindex (tabbing navigation)
 onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic
events)
The TEXTAREA element creates a multi-line text input control. User agents should use the
contents of this element as the initial value of the control and should render this text initially.
This example creates a TEXTAREA control that is 20 rows by 80 columns and contains two
lines of text initially. The TEXTAREA is followed by submit and reset buttons.
<FORM action="http://somesite.com/prog/text-read" method="post">
<P>
<TEXTAREA name="thetext" rows="20" cols="80">
First line of initial text.
109Disain dan Pemograman Web
Second line of initial text.
</TEXTAREA>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
Setting the readonly attribute allows authors to display unmodifiable text in a TEXTAREA. This
differs from using standard marked-up text in a document because the value of TEXTAREA is
submitted with the form.
17.8 The ISINDEX element
ISINDEX is deprecated. This element creates a single-line text input control. Authors should use
the INPUT element to create text input controls.
See the Transitional DTD for the formal definition.
Attribute definitions
prompt = text [CS]
Deprecated. This attribute specifies a prompt string for the input field.
Attributes defined elsewhere
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
 title (element title)
 style (inline style information)
The ISINDEX element creates a single-line text input control that allows any number of
characters. User agents may use the value of the prompt attribute as a title for the prompt.
DEPRECATED EXAMPLE:
The following ISINDEX declaration:
<ISINDEX prompt="Enter your search phrase: ">
could be rewritten with INPUT as follows:
<FORM action="..." method="post">
<P>Enter your search phrase: <INPUT type="text"></P>
</FORM>
Semantics of ISINDEX. Currently, the semantics for ISINDEX are only well-defined when the
base URI for the enclosing document is an HTTP URI. In practice, the input string is restricted
to Latin-1 as there is no mechanism for the URI to specify a different character set.
17.9 Labels
Some form controls automatically have labels associated with them (press buttons) while most
do not (text fields, checkboxes and radio buttons, and menus).
For those controls that have implicit labels, user agents should use the value of the value attribute
110Disain dan Pemograman Web
as the label string.
The LABEL element is used to specify labels for controls that do not have implicit labels,
17.9.1 The LABEL element
<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
<!ATTLIST LABEL
%attrs;
-- %coreattrs, %i18n, %events --
for
IDREF
#IMPLIED -- matches field ID value --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script;
#IMPLIED -- the element got the focus --
onblur
%Script;
#IMPLIED -- the element lost the focus --
>
Start tag: required, End tag: required
Attribute definitions
for = idref [CS]
This attribute explicitly associates the label being defined with another control. When
present, the value of this attribute must be the same as the value of the id attribute of some
other control in the same document. When absent, the label being defined is associated
with the element's contents.
Attributes defined elsewhere
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
 title (element title)
 style (inline style information)
 accesskey (access keys)
 onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
The LABEL element may be used to attach information to controls. Each LABEL element is
associated with exactly one form control.
The for attribute associates a label with another control explicitly: the value of the for attribute
must be the same as the value of the id attribute of the associated control element. More than one
LABEL may be associated with the same control by creating multiple references via the for
attribute.
This example creates a table that is used to align two text input controls and their associated
labels. Each label is associated explicitly with one text input:
<FORM action="..." method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">First Name</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Last Name</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
111Disain dan Pemograman Web
</TABLE>
</FORM>
This example extends a previous example form to include LABEL elements.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
To associate a label with another control implicitly, the control element must be within the
contents of the LABEL element. In this case, the LABEL may only contain one control element.
The label itself may be positioned before or after the associated control.
In this example, we implicitly associate two labels with two text input controls:
<FORM action="..." method="post">
<P>
<LABEL>
First Name
<INPUT type="text" name="firstname">
</LABEL>
<LABEL>
<INPUT type="text" name="lastname">
Last Name
</LABEL>
</P>
</FORM>
Note that this technique cannot be used when a table is being used for layout, with the label in
one cell and its associated control in another cell.
When a LABEL element receives focus, it passes the focus on to its associated control. See the
section below on access keys for examples.
Labels may be rendered by user agents in a number of ways (e.g., visually, read by speech
synthesizers, etc.)
17.10 Adding structure to forms: the FIELDSET and
LEGEND elements

112Disain dan Pemograman Web
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- form control group -->
<!ATTLIST FIELDSET
%attrs;
-- %coreattrs, %i18n, %events --
>
<!ELEMENT LEGEND - - (%inline;)*
-- fieldset legend -->
<!ATTLIST LEGEND
%attrs;
-- %coreattrs, %i18n, %events --
accesskey %Character; #IMPLIED -- accessibility key character --
>
Start tag: required, End tag: required
LEGEND Attribute definitions
align = top|bottom|left|right [CI]
Deprecated. This attribute specifies the position of the legend with respect to the fieldset.
Possible values:
 top: The legend is at the top of the fieldset. This is the default value.
 bottom: The legend is at the bottom of the fieldset.
 left: The legend is at the left side of the fieldset.
 right: The legend is at the right side of the fieldset.
Attributes defined elsewhere
 id, class (document-wide identifiers)
 lang (language information), dir (text direction)
 title (element title)
 style (inline style information)
 accesskey (access keys)
 onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
The FIELDSET element allows authors to group thematically related controls and labels.
Grouping controls makes it easier for users to understand their purpose while simultaneously
facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented
user agents. The proper use of this element makes documents more accessible.
The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves
accessibility when the FIELDSET is rendered non-visually.
In this example, we create a form that one might fill out at the doctor's office. It is divided into
three sections: personal information, medical history, and current medication. Each section
contains controls for inputting the appropriate information.
<FORM action="..." method="post">
<P>
<FIELDSET>
<LEGEND>Personal Information</LEGEND>
Last Name: <INPUT name="personal_lastname" type="text" tabindex="1">
First Name: <INPUT name="personal_firstname" type="text" tabindex="2">
Address: <INPUT name="personal_address" type="text" tabindex="3">
113Disain dan Pemograman Web
...more personal information...
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
<INPUT name="history_illness"
type="checkbox"
value="Smallpox" tabindex="20"> Smallpox
<INPUT name="history_illness"
type="checkbox"
value="Mumps" tabindex="21"> Mumps
<INPUT name="history_illness"
type="checkbox"
value="Dizziness" tabindex="22"> Dizziness
<INPUT name="history_illness"
type="checkbox"
value="Sneezing" tabindex="23"> Sneezing
...more medical history...
</FIELDSET>
<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
type="radio"
value="Yes" tabindex="35">Yes
<INPUT name="medication_now"
type="radio"
value="No" tabindex="35">No
If you are currently taking medication, please indicate
it in the space below:
<TEXTAREA name="current_medication"
rows="20" cols="50"
tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>
Note that in this example, we might improve the visual presentation of the form by aligning
elements within each FIELDSET (with style sheets), adding color and font information (with
style sheets), adding scripting (say, to only open the "current medication" text area if the user
indicates he or she is currently on medication), etc.
17.11 Giving focus to an element
In an HTML document, an element must receive focus from the user in order to become active
and perform its tasks. For example, users must activate a link specified by the A element in order
to follow the specified link. Similarly, users must give a TEXTAREA focus in order to enter text
into it.
There are several ways to give focus to an element:
 Designate the element with a pointing device.
 Navigate from one element to the next with the keyboard. The document's author may
114Disain dan Pemograman Web
define a tabbing order that specifies the order in which elements will receive focus if
the user navigates the document with the keyboard (see tabbing navigation). Once
selected, an element may be activated by some other key sequence.
 Select an element through an access key (sometimes called "keyboard shortcut" or
"keyboard accelerator").
17.11.1 Tabbing navigation
Attribute definitions
tabindex = number [CN]
This attribute specifies the position of the current element in the tabbing order for the
current document. This value must be a number between 0 and 32767. User agents should
ignore leading zeros.
The tabbing order defines the order in which elements will receive focus when navigated by the
user via the keyboard. The tabbing order may include elements nested within other elements.
Elements that may receive focus should be navigated by user agents according to the following
rules:
1 Those elements that support the tabindex attribute and assign a positive value to it are
navigated first. Navigation proceeds from the element with the lowest tabindex value
to the element with the highest value. Values need not be sequential nor must they
begin with any particular value. Elements that have identical tabindex values should be
navigated in the order they appear in the character stream.
2 Those elements that do not support the tabindex attribute or support it and assign it a
value of "0" are navigated next. These elements are navigated in the order they appear
in the character stream.
3 Elements that are disabled do not participate in the tabbing order.
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT,
SELECT, and TEXTAREA.
In this example, the tabbing order will be the BUTTON, the INPUT elements in order (note that
"field1" and the button share the same tabindex, but "field1" appears later in the character
stream), and finally the link created by the A element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with FORM</TITLE>
</HEAD>
<BODY>
...some text...
<P>Go to the
<A tabindex="10" href="http://www.w3.org/">W3C Web site.</A>
...some more...
<BUTTON type="button" name="get-database"
tabindex="1" onclick="get-database">
Get the current database.
</BUTTON>
115Disain dan Pemograman Web
...some more...
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>
</BODY>
</HTML>
Tabbing keys. The actual key sequence that causes tabbing navigation or element activation
depends on the configuration of the user agent (e.g., the "tab" key is used for navigation and the
"enter" key is used to activate a selected element).
User agents may also define key sequences to navigate the tabbing order in reverse. When the
end (or beginning) of the tabbing order is reached, user agents may circle back to the beginning
(or end).
17.11.2 Access keys
Attribute definitions
accesskey = character [CN]
This attribute assigns an access key to an element. An access key is a single character from
the document character set. Note. Authors should consider the input method of the
expected reader when specifying an accesskey.
Pressing an access key assigned to an element gives focus to the element. The action that occurs
when an element receives focus depends on the element. For example, when a user activates a
link defined by the A element, the user agent generally follows the link. When a user activates a
radio button, the user agent changes the value of the radio button. When the user activates a text
field, it allows input, etc.
The following elements support the accesskey attribute: A, AREA, BUTTON, INPUT, LABEL,
and LEGEND, and TEXTAREA.
This example assigns the access key "U" to a label associated with an INPUT control. Typing the
access key gives focus to the label which in turn gives it to the associated control. The user may
then enter text into the INPUT area.
<FORM action="..." method="post">
<P>
<LABEL for="fuser" accesskey="U">
User Name
</LABEL>
<INPUT type="text" name="user" id="fuser">
</P>
</FORM>
In this example, we assign an access key to a link defined by the A element. Typing this access
key takes the user to another document, in this case, a table of contents.
116Disain dan Pemograman Web
<P><A accesskey="C"
rel="contents"
href="http://someplace.com/specification/contents.html">
Table of Contents</A>
The invocation of access keys depends on the underlying system. For instance, on machines
running MS Windows, one generally has to press the "alt" key in addition to the access key. On
Apple systems, one generally has to press the "cmd" key in addition to the access key.
The rendering of access keys depends on the user agent. We recommend that authors include the
access key in label text or wherever the access key is to apply. User agents should render the
value of an access key in such a way as to emphasize its role and to distinguish it from other
characters (e.g., by underlining it).
17.12 Disabled and read-only controls
In contexts where user input is either undesirable or irrelevant, it is important to be able to
disable a control or render it read-only. For example, one may want to disable a form's submit
button until the user has entered some required data. Similarly, an author may want to include a
piece of read-only text that must be submitted as a value along with the form. The following
sections describe disabled and read-only controls.
17.12.1 Disabled controls
Attribute definitions
disabled [CI]
When set for a form control, this boolean attribute disables the control for user input.
When set, the disabled attribute has the following effects on an element:
 Disabled controls do not receive focus.
 Disabled controls are skipped in tabbing navigation.
 Disabled controls cannot be successful.
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP,
OPTION, SELECT, and TEXTAREA.
This attribute is inherited but local declarations override the inherited value.
How disabled elements are rendered depends on the user agent. For example, some user agents
"gray out" disabled menu items, button labels, etc.
In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will
its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Note. The only way to modify dynamically the value of the disabled attribute is through a script.
17.12.2 Read-only controls
Attribute definitions
117Disain dan Pemograman Web
readonly [CI]
When set for a form control, this boolean attribute prohibits changes to the control.
The readonly attribute specifies whether the control may be modified by the user.
When set, the readonly attribute has the following effects on an element:
 Read-only elements receive focus but cannot be modified by the user.
 Read-only elements are included in tabbing navigation.
 Read-only elements may be successful.
The following elements support the readonly attribute: INPUT and TEXTAREA.
How read-only elements are rendered depends on the user agent.
Note. The only way to modify dynamically the value of the readonly attribute is through a script.
17.13 Pengiriman Form
Bagian berikut menjelaskan bagaimana agen pengguna pengiriman form data untuk membentuk
agen pemrosesan.
17.13.1 Form submission method
The method attribute of the FORM element specifies the HTTP method used to send the form to
the processing agent. This attribute may take two values:
 get: With the HTTP "get" method, the form data set is appended to the URI specified
by the action attribute (with a question-mark ("?") as separator) and this new URI is
sent to the processing agent.
 post: With the HTTP "post" method, the form data set is included in the body of the form
and sent to the processing agent.
The "get" method should be used when the form is idempotent (i.e., causes no side-effects).
Many database searches have no visible side-effects and make ideal applications for the "get"
method.
If the service associated with the processing of a form causes side effects (for example, if the
form modifies a database or subscription to a service), the "post" method should be used.
Note. The "get" method restricts form data set values to ASCII characters. Only the "post"
method (with enctype="multipart/form-data") is specified to cover the entire [ISO10646]
character set.
17.13.2 Successful controls
A successful control is "valid" for submission. Every successful control has its control name
paired with its current value as part of the submitted form data set. A successful control must be
defined within a FORM element and must have a control name.
However:
 Controls that are disabled cannot be successful.
 If a form contains more than one submit button, only the activated submit button is
118Disain dan Pemograman Web
successful.
 All "on" checkboxes may be successful.
 For radio buttons that share the same value of the name attribute, only the "on" radio
button may be successful.
 For menus, the control name is provided by a SELECT element and values are
provided by OPTION elements. Only selected options may be successful. When no
options are selected, the control is not successful and neither the name nor any values
are submitted to the server when the form is submitted.
 The current value of a file select is a list of one or more file names. Upon submission
of the form, the contents of each file are submitted with the rest of the form data. The
file contents are packaged according to the form's content type.
 The current value of an object control is determined by the object's implementation.
If a control doesn't have a current value when the form is submitted, user agents are not required
to treat it as a successful control.
Furthermore, user agents should not consider the following controls successful:
 Reset buttons.
 OBJECT elements whose declare attribute has been set.
Hidden controls and controls that are not rendered because of style sheet settings may still be
successful. For example:
<FORM action="..." method="post">
<P>
<INPUT type="password" style="display:none"
name="invisible-password"
value="mypassword">
</FORM>
will still cause a value to be paired with the name "invisible-password" and submitted with the
form.
17.13.3 Processing form data
When the user submits a form (e.g., by activating a submit button), the user agent processes it as
follows.
Step one: Identify the successful controls
Step two: Build a form data set
A form data set is a sequence of control-name/current-value pairs constructed from successful
controls
Step three: Encode the form data set
The form data set is then encoded according to the content type specified by the enctype attribute
of the FORM element.
119Disain dan Pemograman Web
Step four: Submit the encoded form data set
Finally, the encoded data is sent to the processing agent designated by the action attribute using
the protocol specified by the method attribute.
This specification does not specify all valid submission methods or content types that may be
used with forms. However, HTML 4 user agents must support the established conventions in the
following cases:
 If the method is "get" and the action is an HTTP URI, the user agent takes the value of
action, appends a `?' to it, then appends the form data set, encoded using the
"application/x-www-form-urlencoded" content type. The user agent then traverses the
link to this URI. In this scenario, form data are restricted to ASCII codes.
 If the method is "post" and the action is an HTTP URI, the user agent conducts an HTTP
"post" transaction using the value of the action attribute and a message created according
to the content type specified by the enctype attribute.
For any other value of action or method, behavior is unspecified.
User agents should render the response from the HTTP "get" and "post" transactions.
17.13.4 Form content types
The enctype attribute of the FORM element specifies the content type used to encode the form
data set for submission to the server. User agents must support the content types listed below.
Behavior for other content types is unspecified.
Please also consult the section on escaping ampersands in URI attribute values.
application/x-www-form-urlencoded
This is the default content type. Forms submitted with this content type must be encoded as
follows:
1 Control names and values are escaped. Space characters are replaced by `+', and then
reserved characters are escaped as described in [RFC1738], section 2.2: Non-
alphanumeric characters are replaced by `%HH', a percent sign and two hexadecimal
digits representing the ASCII code of the character. Line breaks are represented as "CR
LF" pairs (i.e., `%0D%0A').
2 The control names/values are listed in the order they appear in the document. The name is
separated from the value by `=' and name/value pairs are separated from each other by
`&'.
multipart/form-data
Note. Please consult [RFC2388] for additional information about file uploads, including
backwards compatibility issues, the relationship between "multipart/form-data" and other
content types, performance issues, etc.
Please consult the appendix for information about security issues for forms.
The content type "application/x-www-form-urlencoded" is inefficient for sending large quantities
of binary data or text containing non-ASCII characters. The content type "multipart/form-data"
120Disain dan Pemograman Web
should be used for submitting forms that contain files, non-ASCII data, and binary data.
The content "multipart/form-data" follows the rules of all multipart MIME data streams as
outlined in [RFC2045]. The definition of "multipart/form-data" is available at the [IANA]
registry.
A "multipart/form-data" message contains a series of parts, each representing a successful
control. The parts are sent to the processing agent in the same order the corresponding controls
appear in the document stream. Part boundaries should not occur in any of the data; how this is
done lies outside the scope of this specification.
As with all multipart MIME types, each part has an optional "Content-Type" header that defaults
to "text/plain". User agents should supply the "Content-Type" header, accompanied by a
"charset" parameter.
Each part is expected to contain:
1 a "Content-Disposition" header whose value is "form-data".
2 a name attribute specifying the control name of the corresponding control. Control names
originally encoded in non-ASCII character sets may be encoded using the method
outlined in [RFC2045].
Thus, for example, for a control named "mycontrol", the corresponding part would be specified:
Content-Disposition: form-data; name="mycontrol"
As with all MIME transmissions, "CR LF" (i.e., `%0D%0A') is used to separate lines of data.
Each part may be encoded and the "Content-Transfer-Encoding" header supplied if the value of
that part does not conform to the default (7BIT) encoding (see [RFC2045], section 6)
If the contents of a file are submitted with a form, the file input should be identified by the
appropriate content type (e.g., "application/octet-stream"). If multiple files are to be returned as
the result of a single form entry, they should be returned as "multipart/mixed" embedded within
the "multipart/form-data".
The user agent should attempt to supply a file name for each submitted file. The file name may
be specified with the "filename" parameter of the 'Content-Disposition: form-data' header, or, in
the case of multiple files, in a 'Content-Disposition: file' header of the subpart. If the file name of
the client's operating system is not in US-ASCII, the file name might be approximated or
encoded using the method of [RFC2045]. This is convenient for those cases where, for example,
the uploaded files might contain references to each other (e.g., a TeX file and its ".sty" auxiliary
style description).
The following example illustrates "multipart/form-data" encoding. Suppose we have the
following form:
<FORM action="http://server.com/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="submit-name"><BR>
What files are you sending? <INPUT type="file" name="files"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
121Disain dan Pemograman Web
</FORM>
If the user enters "Larry" in the text input, and selects the text file "file1.txt", the user agent
might send back the following data:
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"
Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain
... contents of file1.txt ...
--AaB03x--
If the user selected a second (image) file "file2.gif", the user agent might construct the parts as
follows:
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"
Larry
--AaB03x
Content-Disposition: form-data; name="files"
Content-Type: multipart/mixed; boundary=BbC04y
--BbC04y
Content-Disposition: file; filename="file1.txt"
Content-Type: text/plain
... contents of file1.txt ...
--BbC04y
Content-Disposition: file; filename="file2.gif"
Content-Type: image/gif
Content-Transfer-Encoding: binary
...contents of file2.gif...
--BbC04y--
--AaB03x--
122

Recent

Selasa, 22 April 2014

Desain dan Pemograman Website

About Unknown

Tidak ada komentar:

Popular Posts

Labels

NAMA:KISI WONDA, lulusan dari SMK,Nioga,puncak jaya, provinsi papua

Translate

Instagram posts

Blog Archive

Categories

Home Ads

Tags

Travel

Comments

Ads

Random Posts

Category

About Us