KATA PENGANTAR

Modul dengan judul W

Web Design & Web Programing merupakan bahan acuan
yang digunakan sebagai panduan dalam proses belajar mengajar peserta diklat
Sekolah Menengah Kejuruan (SMK) untuk membentuk salah satu bagian dari
kompetensi bidang keahlian Teknologi Informasi dan Komunikasi.
Modul ini mencakup penguasaan konsep file-file grafik, memahami dasar-dasar
pemrograman Web, memahami perintah-perintah pemrograman Web, dan
bagaimana membangun sebuah aplikasi pemrograman berbasis Web.

Penyusun

PERISTILAHAN/GLOSSARY

Animation

: Animasi dari beberapa gambar diam dibuat seperti hidup tanpa ada
patah-patah dalam pergerakannya.

Banner

: Merupakan kepala atau bagian atas dari sebuah web site.

Download

: Proses pengambilan file atau mengcopy file.

Effect

: Tindakan yang dikerjakan untuk menghaluskan atau memperindah

animasi pada obyek.

Event

: Tindakan yang dilakukan setelah adanya action.

Export

: Merubah jenis format ke bentuk yang lain.

Format

: Bentuk ektensi dari jenis file.

Frame

: Bagian dari Timeline.

Grouping

: Mengumpulkan beberapa obyek untuk dijadikan satu.

HTML

: Hypertext Markup Language, bahasa penanda hipertext

Insert

: Memasukkan jenis file kedalam bidang kerja SWiSHmax.

Installation manual : Petunjuk Instalasi

Keyframe

: Pada dasarnya hampir sama dengan frame. Hanya saja untuk Key frame
lebih menunjukkan untuk satu frame.

License Agreement : Persetujuan lisensi penggunaan suatu software tertentu

Movie

: File yang dibuat dalam SWiSHmax.

Object

: Benda yang sedang dikerjakan dalam bidang kerja SWiSHmax.

Operand

: data yang dioperasikan atau dimanipulasi.

Operator

: simbol/tanda

yang

digunakan

untuk

melakukan

operasi-operasi

matematis atau operasi string.

Player

: Untuk memainkan animasi yang telah dibuat.

Preview

: Melihat hasil yang telah dikerjakan.

Scane

: Satu movie merupakan satu Scane.

Search Engine

: Mesin bantu pencarian data.

Server

: Pelayan, Komputer induk yang bertugas untuk melayani komputerkomputer klien.

Software

: Perangkat lunak, program yang berjalan di komputer.

Source Code

: Kode asli suatu program

Time Line

: Garis waktu atau pewaktuan yang terdapat dalam SwiSHmax.

Web design

: Pembuatan/desain halaman-halaman web.

Edit By SMK Taruna Bhakti /WP/2010

BAB. I
PEMELAJARAN
A. Rencana Pemelajaran
Kompetensi

: Mengoperasikan Bahasa Pemrograman Berbasis Web

Jenis Kegiatan

Tanggal Waktu

Tempat
Belajar

Alasan
Perubahan

Tanda
Tangan
Guru

Membuat struktur dokumen

dengan bahasa HTML
Mengenali dan memahami
tag-tag HTML yang meliputi
pemformatan dokumen dan
penambahan objek,
pembuatan tabel dan frame,
serta pembuatan link.
membuat, membuka,
menyimpan file halaman web.
Serta merangkaikan tag-tag
HTML dan memadukan objek
web lainnya sehingga menjadi
halaman web yang menarik.
Mengenali dan memahami
script-script dan fitur-fitur
Bahasa Pemrograman
Berbasis Web
Mengenali dan memahami
perintah-perintah dasar dalam
basis data
Merangkaikan perintahperintah bahasa pemrograman, basis data dan
bahasa pemrograman
berbasis web
Melakukan pembuatan
halaman Web dengan bahasa
pemrograman berbasis web
dan basis data.
Mempersiapkan software
bantu dalam pembuatan
halaman web.
Melakukan pembuatan
halaman web dengan
software bantu.

Edit By SMK Taruna Bhakti /WP/2010

B. Kegiatan Belajar
1. Kegiatan Belajar 1:
Memahami dasar-dasar pemrograman berbasis web

a. Tujuan Kegiatan Pemelajaran

1) Mengerti fitur-fitur software bahasa pemrograman dan fungsinya untuk
mengelola halaman web.
2) Mampu membuat struktur dokumen dengan tag HTML.
3) Peserta diklat dapat mengenali dan memahami fungsi obyek-obyek web dan
tag-tag HTML dalam pembuatan halaman-halaman web yang meliputi:
- Memformat dokumen dan menambahkan objek
- Membuat tabel dan frame
- Membuat dan membangkitkan Link
4) Peserta diklat dapat mengenali dan memahami fitur-fitur pengelolaan file
halaman web.
5) Peserta diklat dapat melakukan kombinasi tag-tag HTML dengan obyekobyek lain untuk membangun halaman web yang disimpan dalam format
HTML.

b. Uraian Materi
1. HTML (Hypertext Markup Language)
HTML atau Hypertext Marksup Language merupakan salah satu format yang
digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman
web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan
disebut sebagai Markup Language yakni bahasa yang mengandung tanda
(tag) tertentu yang digunakan untuk mengatur format tampilan suatu
dokumen.
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan
untuk mentransfer data atau document yang berformat HTML dari web
server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll).
Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan
melihat halaman web.
Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks
editor biasa. Namun sekarang ini di pasaran terdapat banyak sekali HTML
authoring (software yang digunakan untuk membuat atau mendesain
halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage
sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak
akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun
software-software

Edit By SMK Taruna Bhakti /WP/2010

tersebut

semakin

menawarkan

kemudahan

dalam

membuat halaman web, tetapi biasanya seseorang masih perlu untuk

mengedit halaman web tersebut secara manual. Terutama untuk halaman
web yang sangat komplek.
Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari
desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa
menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang
paling mudah adalah menggunakan Notepad. Setelah anda memahami betul
semua tag-tag dasar html, diakhir nanti kita akan belajar membuat halaman
web dengan menggunakan web tool.
Struktur Dasar Html
Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara
tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan
</namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi
elemen-elemen atau tag sebagai berikut:
<html>
<head>
<title>Judul Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>

Keterangan:
<html> .. </html> Mendefinisikan bahwa teks yang berada diantara
kedua tag tersebut adalah file HTML.
<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita
bisa meletakkan tag-tag TITLE, BASE, ISINDEX,
LINK, SCRIPT, STYLE & META.
<title> .. </title>

Sebagai titel atau judul halaman/form. Kalimat yang

terletak di dalam tag ini akan muncul pada bagian
paling atas browser Anda (pada title bar).

<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak

ditampilkan sebagai isi halaman web. Di dalam tag ini
bisa diletakkan berbagai page attribute seperti

bgcolor,

background,

text,

link,

vlink,

leftmargin dan topmargin.

Edit By SMK Taruna Bhakti /WP/2010

alink,

Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML
sederhana. Ikuti langkah-langkah berikut ini:
1. Buat direktori dengan nama latihan di drive C:. Dan selanjutnya dalam
direktori ini kita akan menyimpan semua file-file latihan kita.
2. Buka Browser, misalnya Internet Explorer atau Netscape Navigator.
3. Buka program aplikasi teks editor misalnya dalam latihan ini adalah
Notepad.
4. Mulai baris paling atas, tuliskan:
<html>

<head>

<title>halaman pembuka</title>

</head>
<body>
</body>

Proyek latihan pertama saya.

</html>

5. Simpan file anda dengan cara klik menu File - Save:

6. Selanjutnya pilih direktori latihan yang tadi kita buat.

7. Pada box File name, isikan nama filenya dengan index.html
8. Pada drop down list di Save as type, pilih All Files. Sehingga
tampilannya seperti berikut:

Edit By SMK Taruna Bhakti /WP/2010

9. Simpan proyek anda dengan meng-klik pada tombol Save

Untuk menjalankan kode-kode tersebut, silahkan buka browser seperti
Internet Explorer, Netscape Navigator dan lain-lain.
1. Klik menu File Open

Tip: Jika anda menggunakan Netscape Navigator, klik Open Page

kemudian Choose File

Edit By SMK Taruna Bhakti /WP/2010

2. Setelah jendela Open terbuka, klik tombol Browse

3. Ketika jendela baru terbuka, pilih direktori Latihan dan pilih file
index.html.

4. Klik tombol Open lalu tekan tombol Ok, halaman web yang ditampilkan
dalam browser adalah seperti berikut:

Edit By SMK Taruna Bhakti /WP/2010

Catatan:
Semua dokumen HTML mempunyai ekstensi .html (atau .htm)
Semua halaman Web (homepage) mempunyai file index.html. File

index.html secara otomatis akan dipanggil ketika alamat sebuah domain

atau direktori tempat menyimpan file tersebut di buka di browser.
Terdapat pengecualian pada microsoft yang menggunakan Web server
IIS, file yang dipanggil adalah default.html
Kode Warna
Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi
RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai
heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan
banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya
untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut:
Red

Green

Blue

FF

FF

00

Berarti untuk warna kuning dapat dibuat dengan kode #ffff00. Disamping
itu, pembuatan warna dapat juga dibuat dengan langsung menggunakan
nama warna dalam bahasa inggris, misalnya kuning=yellow.
Berikut ini warna-warna yang dapat digunakan dalam halaman HTML.
Warna

Heksadesimal

White

#FFFFFF

Black

#000000

Red

#FF0000

Green

#00FF00

Blue

#0000FF

Magenta

#FF00FF

Cyan

#00FFFF

Yellow

#FFFF00

Anda dapat juga membuat campuran sendiri warna-warna berdasarkan

emajinasi anda. Yang penting anda mengikuti aturan diatas.
2. Pengaturan Halaman Web dan Teks
Untuk mendapatkan halaman web yang baik anda harus melakukan
pengaturan terhadap halaman web dan teks-teks didalamnya seperti
mengatur warna latar belakang halaman, memilih jenis dan ukuran huruf,

Edit By SMK Taruna Bhakti /WP/2010

perataan, warna teks, menambahkan gambar dll. Tag-tag di bawah ini yang
biasa digunakan dalam pengaturan halaman web dan teks:
a. <body>, digunakan mendefinisikan teks beserta formatnya yang
hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa
diletakkan berbagai page attribute seperti bgcolor, background, text,

link, vlink, alink, leftmargin dan topmargin.

1) Background = digunakan untuk mengatur latar belakang dengan
gambar/image.
2) Bgcolor

= digunakan untuk mengatur warna latar belakang

dokumen, dengan warna putih sebagai default-nya.

3) Teks

= digunakan untuk mengatur warna teks dokumen,

dengan warna hitam sebagai warna default.

4) Link

= Untuk mengatur warna link dokumen dengan

warna biru sebagai warna default

5) Vlink

= Untuk mengatur warna

visited link dokumen

dengan default ungu

6) Alink

= digunakan untuk mengatur warna active link

dokumen dengan default merah.

b. Heading: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf
pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai
<H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan
ukuran terkecil.
contoh1_1.html
<html>
<head>
<title>::: Heading Dokumen HTML:::</title>
</head>
<body bgcolor=#ffffcc text=#003399>
<h1>Headng Tingkat 1 </h1>
<h2>Headng Tingkat 2 </h2>
<h3>Headng Tingkat 3 </h3>
<h4>Headng Tingkat 4 </h4>
<h5>Headng Tingkat 5 </h5>
<h6>Headng Tingkat 6 </h6>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

10

Hasilnya akan terlihat seperti:

c. Paragraph Baru: <P> Digunakan untuk pindah alinea atau membuat

paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.
Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah,
kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align
mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.
d. Line Break: <BR> Digunakan untuk pindah ke baris baru.
e. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang
panjang tidak secara otomatis pindah baris bawahnya bila baris pertama
sudah terlalu panjang.
f.

Font <FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag

FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.
SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang
digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil
dan 7 merupakan ukuran terbesar.
FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa
memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh
koma. Bila terdapat spasi yang terletak pada nama font maka harus
digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus
dipertimbangkan apakah font yang kita gunakan pada halaman web
kita nantinya akan terdapat pada komputer pengguna yang lain

Edit By SMK Taruna Bhakti /WP/2010

11

(pengakses web kita). Pendeknya kita tidak usah menggunakan fontfont yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila
Anda ingin menggunakan font yang sedikit "aneh" Anda bisa
menggunakan graphic.
COLOR: Digunakan untuk mengatur warna font. Didefinisikan
dengan menggunakan nilai RGB/HEX atau bisa juga langsung
menggunakan nama warna (red misalnya).
contoh1_2.html
<html>
<head>
<title>::: Ukuran, Jenis dan Warna Font:::</title>
</head>
<body>
<font size=1 Face=arial color=red>Ukuran font 1</font><br>
<font size=2 Face=arial color=green>Ukuran font 2 </font><br>
<font size=3 Face=arial color=blue>Ukuran font 3 </font><br>
<font size=4 Face=verdana color=red>Ukuran font 4 </font><br>
<font size=5 Face=verdana color=blue>Ukuran font 5 </font><br>
<font size=6 Face=tahoma color=green>Ukuran font 6 </font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7 </font><br>
</body>
</html>

Hasilnya akan terlihat

Contoh lainnya:
<font size=2 face="times_new_roman" color="#0066cc">

Edit By SMK Taruna Bhakti /WP/2010

12

g. Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default

text".

Attribut

sama

dengan

attribut

FONT.

Tag

FONT

akan

mengoverwrite setting pada BASEFONT.

Contoh:
<basefont size=2 face="arial,helvetica" color="#ff0000">

Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang
berhubungan dengan pengaturan teks, yaitu:
Perhatian: Semua tag di bawah ini membutuhkan tap penutup.
<B>

Bold text

<I>

Italic text

<U>

Underscore

<TT>

Typewriter

<S>

Strikeout - draws a line through the text

<PRE>

Preformatted Text <DFN> Definition

<BLINK>

Text berkedip (lebih baik jangan digunakan)

<STRONG>

Strong

<ADDRESS>

Italic
<CITE>

Digunakan untuk quoting text

<CODE>

Monospaced font (digunakan bila Anda ingin meletakkan

(memperlihatkan) kode HTML pada dokumen HTML
Anda)

<SAMP>

Monospaced font (digunakan bila Anda ingin meletakkan

(memperlihatkan) kode HTML pada dokumen HTML
Anda)

<KBD>

Monospaced font (digunakan bila Anda ingin meletakkan

(memperlihatkan) kode HTML pada dokumen HTML
Anda)

<BIG>

Ukuran teks akan lebih besar satu ukuran

<SMALL>

Ukuran teks akan lebih kecil satu ukuran

<SUP>

Membuat tekssuperscript

<SUB>

membuat tekssub script

<ABBREV>

Abbreviations

<ACRONYM> Untuk akronim

<PERSON>

Digunakan untuk indexing

<Q>

Membuat short inline quotation

<VAR>

Membuat variable name, selalu dalam italics.

Edit By SMK Taruna Bhakti /WP/2010

13

h. <HR>, digunakan untuk membuat garis horisontal. Tag ini mempunyai

atribut SIZE, WIDTH, ALIGN dan NOSHADE.
Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan
pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis.
Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan
tanpa bayang-bayang 3-D.
contoh1_3.html
<html>
<head>

<title>::: Membuat Garis Horisontal:::</title>

</head>
<body bgcolor=#ffffcc background=saya.jpg>
<font size=1 Face=tahoma color=blue>Selamat Datang</font>
<hr size=1 width=150 align=left>
<h1><center>www.smkpgri3-mlg.sch.id</h1>
<hr size=5 align=center noshade>
</body>
</html>

Hasilnya tampak sebagai berikut:

i.

LISTS
Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian
rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga
berupa tanda-tanda khusus/symbol.
Terdapat tiga tipe list yang dapat digunakan, yaitu :

Unordered Lists: <UL> Untuk membuat daftar item dengan tanda

bullet (tidak bernomor). List entries didefinisikan dengan tag <LI>.
Pada jenis ini tidak memerlukan pengurutan data.

Edit By SMK Taruna Bhakti /WP/2010

14

Bentuk item tanda pada Unordered List dapat diubah dengan

menggunakan atribut TYPE kedalam tag <UL> dengan nilai
circle untuk bentuk lingkaran tengahnya putih, square untuk
bentuk kotak padat hitam dan disc bentuk lingkaran pada warna
hitam.
contoh1_4.html
<html>
<head>
<title>::: Undordered List:::</title>
</head>
<body>
<b><font size=3 Face=tahoma color=blue>
Hobi saya adalah: </b>
<hr size=2 width=150 align=left>
<ul type=circle>
<li>Olahraga
</ul>
<ul type=square>
<li>Shurfing
</ul>
<ul type=disc>
<li>Makan Bakso
</ul>
</font>
</body>
</html>

Hasil dari kode di atas adalah:

Edit By SMK Taruna Bhakti /WP/2010

15

 Ordered Lists: <OL> Juga digunakan untuk membuat daftar item

bernomor, dengan tiap item dapat menggunakan angka arab atau
romawi. List entries juga didefinisikan dengan <LI> tag.

Atribut

yang ada pada Ordered List adalah TYPE dan START.

contoh1_5.html
<html>
<head>
<title>::: Ordered List:::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
Pendidikan saya adalah: </b>
<hr size=2 width=150 align=left>
<ol type=1>
<li>Sekolah Dasar
<li>Sekolah Lanjutan Pertama
<li>Sekolah Lanjutan Atas
</ol>
<hr size=3 width=500>
<ol start=4>
<li>Universitas Muhammadiyah Malang
<li>Universitas PGRI Malang
</ol>
</font>
</body>
</html>

Hasil dari kode di atas adalah:

Edit By SMK Taruna Bhakti /WP/2010

16

Untuk attribut TYPE, dapat juga menggunakan:

1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.

Definition Lists: <DL>,

digunakan untuk menjelaskan istilah-

istilah. Definition List dinyatakan dengan tag <DL> dan diantara tag
tersebut ditambahkan tag <DT> Definition Term yaitu bagian istilah
yang dijabarkan

dan tag <DD> Definition Data yang merupakan

penjabaran dari istilah.

contoh1_6.html
<html>
<head>
<title>::: definition List:::</title>
</head>
<body>
<dl>
<dt> Bagian Pertama.
<dd> Sub Bagian Pertama.
<dt> Bagian Kedua.
<dd> Sub Bagian Kedua
</dl>
</body>
</html>

Hasil dari kode di atas adalah:

Edit By SMK Taruna Bhakti /WP/2010

17

 Preformatted Text: <PRE>. Digunakan untuk mengatur format

tampilan agar sesuai dengan aslinya.
contoh1_7.html
<html>
<head>
<title>the &lt;pre&gt; tag</title>
</head>
<body>
<h3>without the &lt;pre&gt; tag:</h3>
here's
some ditty
specially done
to lay it out all
formatted and pretty.
unfortunately, that is all
this junk really means
because i admit i
couldn't scrawl
poetry for
beans.
<p><h3>with the &lt;pre&gt; tag:</h3>
<pre>
here's
some ditty
specially done
to lay it out all
formatted and pretty.
unfortunately, that is all
this junk really means
because i admit i
couldn't scrawl
poetry for
beans.
</pre>
</body>
</html>

Hasil dari kode di atas adalah:

Edit By SMK Taruna Bhakti /WP/2010

18

 Extended Quotations: <BLOCKQUOTE>, digunakan untuk

membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.
contoh1_8.html
<html>
<head> <title>::: Blockquote:::</title> </head>
<body>
<h3>2. Pengaturan Teks</h3>
<blockqoute>
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan
terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll.
</blockqoute>
</body>
</html>

Hasilnya tampak seperti bnerikut ini:

3. Hypertext Link
Digunakan untuk membuat link/penghubung antara suatu halaman dengan
halaman lain, ke URL lain, juga digunakan dalam satu halaman untuk
berpindah ke sub judul yang lain atau ke lokasi tertentu dalam satu halaman
yang sama.
Sintak tag link adalah sebagai berikut:
<a href=url_tujuan>nama_link</a>

url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan
nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link
atau tombol penghubung. Tulisan yang terletak antara <A> dan </A>
akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag
<body>. Adapun macam-macam link adalah sebagai berikut:
Link ke Dokumen Lain
Untuk membuat link/penghubung dengan target ke dokumen/halaman yang
berbeda, anda harus membuat dokumen yang dituju/target dan disimpan
dalam direktori tertentu, baik pada direktori yang sama atau berbeda dengan

Edit By SMK Taruna Bhakti /WP/2010

19

dokumen yang aktif sekarang. Untuk mencoba membuat link, silahkan buat
script berikut dan beri nama dengan link_dokumen_lain.html.
<html>
<head>
<title>::: Latihan Membuat Link Ke Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK PGRI 3 Malang:::. <br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
<font face=arial size=1 color=maroon>
<hr>
| <a href=link_dokumen_lain.html>H o m e</a>
| <a href=proli.html>Program Keahlian</a>
| <a href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p><font face=verdana size=4 color=purple>
Selamat datang di web kami ...
</body>
</html>

Buat lagi file berikut dan beri nama dengan proli.html

<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK PGRI 3 Malang:::. <br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
<font face=arial size=1 color=maroon>
<hr>
| <a href=link_dokumen_lain.html>H o m e</a>
| <a href=proli.html>Program Keahlian</a>
| <a href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p><font face=verdana size=4 color=blue>
Program Keahlian:<br>
<font size=1>
<ul type=circle><li>Rekayasa Perangkat Lunak
<li>Teknik Elektronika Industri
<li>Teknik Pembangkit Tenaga Listrik
<li>Teknik Mekanik Otomotif
<li>Teknik Bodi Otomotif
<li>Teknik Pemesinan
<li>Teknik Las</ul>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

20

Untuk melengkapi latihan kali ini, buat juga file berikut dan beri nama

ekstra.html
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK PGRI 3 Malang:::. <br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
<font face=arial size=1 color=maroon>
<hr>
| <a href=link_dokumen_lain.html>H o m e</a>
| <a href=proli.html>Program Keahlian</a>
| <a href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p>
<font face=verdana size=4 color=blue>
Ekstra Kurikuler:<br>
<font size=1>
<ul type=circle>
<li>Seni Bela Diri Tapak Suci
<li>Keagamaan
<li>Sepak Bola
<li>Bola Basket
<li>Kepenyiaran
</ul>
</body>
</html>

Hasil dari kode-kode diatas adalah sebagai berikut:

Edit By SMK Taruna Bhakti /WP/2010

21

Jika link-link tersebut di-klik, maka hasilnya adalah sebagai berikut:

Link ke bagian tertentu dalam dokumen yang sama

Untuk membuat link ke bagian tertentu dalam dokumen yang sama, harus
diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen
adalah tujuan/target link, jika dalam dokumen yang sama yang dituju adalah
nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama
file/dokumen yang bersangkutan.
Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag
anchor <A> dan untuk membuat link cukup memberikan tanda # setelah
nama file dalam URL. Misal:
<a href=#php> Bab 1 </a>

atau dapat ditulis lengkap:

<a href=belajar_php.html#php> Bab 1 </a>

dan untuk nama anchornya:

<a name=php>Ada apa dengan PHP?</a>

Link ke alamat URL atau Website

Untuk membuat link ke alamat URL adalah dengan menambahkan:
http://nama_URL.

Edit By SMK Taruna Bhakti /WP/2010

22

Contoh:
<a href=http://www.dikti.org>www.dikti.org</a>
<a href=http://www.smkpgri3-mlg.sch.id>www.smkpgri3-mlg.sch.id </a>

Link ke Alamat Email

Link email adalah membuat link pada teks, jika teks tersebut diklik maka akan
menampilkan program pengiriman email yang terdapat pada komputer yang
dipakai untuk mengakses data atau teks tersebut secara otomatis.
Untuk membuat link ke

alamat email hanya menambahkan atribut

mailto:alamat_email ke dalam tag <A HREF>

Misalnya:
<A HREF="mailto:[email protected]">Kirim email</a>

Link File yang akan didownload

Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses
selanjutnya adalah mendownload file yang tercantum pada dokumen

tersebut. Format penulisannya adalah <a href=nama_file>

Misal:
<a href=antivirus.zip>Download anti virus</a>
<a href=latih.doc>Download latihan Html</a>
<a href=mysql.exe>Download MYSQL</a>

4. Menyisipkan Gambar/Images
Digunakan untuk menampilkan image atau animasi gif pada halaman web
Anda. Tag yang digunakan adalah
<img src=nama file gambar>

Attribut yang dimiliki tag <img> adalah: alt, align=(center, left, right),
hspace, vspace, border, width dan height. Jika attribut ukuran gambar tidak
dituliskan, maka gambar ditampilkan sesuai dengan ukuran asllinya. Untuk
mengatur ukuran gambar, menggunakan attribut width daan height. Attribut
align digunakan untuk perataan posisi gambar. Attribut border, digunakan
untuk memberi bingkai pada gambar. Sedangkan alt, digunakan untuk

Edit By SMK Taruna Bhakti /WP/2010

23

memberi keterangan pada gambar jika mouse berada diatasnya. Untuk

mengatur letak gambar dapat menggunakan attribut hspace daan vspace.
contoh1_9.html
<html>
<head>
<title>::: menampilkan images:::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
<img src="gedung.jpg" alt="Halaman SMK PGRI 3 Malang">
<img src="ekstra.jpg" hspace=10 vspace=5 width=200 height =254
align="right" border=2>
</font>
</body>
</html>

Tampilan dari contoh diatas adalah sebagai berikut:

Edit By SMK Taruna Bhakti /WP/2010

24

5. Layout Halaman Web dengan Tabel (Table)

Table merupakan cara untuk menampilkan informasi dalam halaman web
dengan bentuk kolom dan baris.
Tabel dan Layout Halaman Web
Hampir semua web site yang berkualitas dan profesional, dirancang
dengan menggunakan Tabel. Layaknya sebuah spreadsheet yang
memiliki sel dan berisi angka-angka, tabel dalam web juga mempunyai
sel yang berisi link, gambar dan text.
Gambat dibawah ini adalah salah satu halaman web yang dirancang
dengan loyout tabel:

cell

Edit By SMK Taruna Bhakti /WP/2010

cell

cell

25

Membuat Tabel
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan
table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa
tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> .

<TABLE>
Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut:
align - perataan: rata kiri (left), tengah (center) atau kanan (right).
valign mengatur bentuk perataan secara vertikal
bgcolor mengatur warna latar belakang (background) dari tabel.
background

menentukan gambar yang digunakan sebagai

background tabel
color Untuk mengatur warna suatu sel dalam tabel
border menentukan ukuran border tabel (dalam pixel).
rowspan menggabungkan beberapa baris
colspan menggabungkan beberapa kolom
cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
cellspacing mengatur spasi/jarak antar cell (dalam pixel).
width menentukan lebar tabel dalam pixel atau percent.
height Menentukan tinggi tabel

<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari
atribut:
align - perataan: rata kiri (left), tengah (center) atau kanan (right).
bgcolor - warna latar belakang dari baris.
valign - perataan vertikal: top, middle atau bottom.

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya
adalah:
align untuk menentukan perataan kolom
background untuk menentukan image yang digunakan sebagai latar
belakang dari kolom.
bgcolor untuk menentukan warna latar belakang
colspan - lihat gambar contoh
height untuk mengatur ukuran tinggi cell dalam pixels.
nowrap untuk membuat supaya isi dari kolom tetap berada pada
satu baris.

Edit By SMK Taruna Bhakti /WP/2010

26

 rowspan - lihat gambar contoh

valign untuk mengatur perataan vertikal: top, middle atau bottom.
width untuk menentukan lebar kolom dalam pixel atau percen.
contoh1_10.html
<html>
<head>
<title>::: Pembuatan Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table>
<tr>
<td>Ini contoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>Ini contoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Jam 'Iyatul Khoir</td>
<td>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td>2.</td>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom
Gresik</td>
</tr>
</table>
</body>
</html>

Hasilnya adalah sebagai berikut:

contoh1_11.html

Edit By SMK Taruna Bhakti /WP/2010

27

contoh1_11.html
<html>
<head>
<title>.::: Belajar Membuat Tabel:::.</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="100%" height="115">
<tr>
<td width="100%" height="115" bordercolor="#C0C0C0"
bgcolor="#BDCED9">&nbsp;</td>
</tr>
</table>
<font size="1">&nbsp;</font>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111"
width="100%" height="431">
<tr>
<td width="23%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="245">
<tr>
<td width="100%" height="244"
bordercolor="#C0C0C0" bgcolor="#BDCED9">&nbsp;</td>
</tr>
</table>
<font size="1">&nbsp;</font>
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="152">
<tr>
<td width="100%" height="19" bgcolor="#BDCED9"
bordercolor="#C0C0C0">&nbsp;</td>
</tr>
<tr>
<td width="100%" height="132" bordercolor="#C0C0C0">
&nbsp;</td>
</tr>
</table>
</td>
<td width="77%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="97%" height="411">
<tr>
<td width="64%" height="109">&nbsp;</td>
<td width="36%" height="109">&nbsp;</td>
</tr>
<tr>
<td width="64%" height="301" rowspan="2">&nbsp;</td>
<td width="36%" height="24" bgcolor="#BDCED9"
bordercolor="#C0C0C0">
<font size="1">&nbsp;</font></td>
</tr>

Edit By SMK Taruna Bhakti /WP/2010

28

<tr>
<td width="36%" height="277" bordercolor="#C0C0C0">&nbsp;
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Hasilnya adalah:

Menambahkan Judul Tabel

Judul dalam tabel dibedakan menjadi tiga macam, yaitu judul tabel, judul
kolom table dan judul baris tabel. Judul tabel atau biasa disebut CAPTION
terletak dibagian luar tabel yang bisa berada dibawah atau diatas tabel.
Secara default caption diletakkan dibagian atas suatu tabel, tetapi juga dapat
diletakkan

dibawah

suatu

tabel

dengan

menambahkan

atribut

ALIGN=BOTTOM pada elemen caption tersebut.

Edit By SMK Taruna Bhakti /WP/2010

29

Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen
TABLE HEADER <TH>. Judul kolom terletak pada sel disebelah kiri atau
kolom pertama suatu tabel, sedangkan judul baris terletak pada baris
pertama suatu tabel. Judul baris atau judul kolom akan tercetak tebal.
contoh1_12.html
<html>
<head>
<title>::: Pembuatan Judul Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table border=1>
<caption align=top><b><u>Daftar Alamat</u></b></caption>
<tr>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td>Jam Iyatul Khoir</td>
<td>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td align=center>2.</td>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>

Hasilnya akan tampak sebagai berikut:

Edit By SMK Taruna Bhakti /WP/2010

30

contoh1_13.html
<html>
<head>
<title>::: Pembuatan Judul Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table border=1>
<caption align=bottom><b><u>Daftar Alamat</u></b></caption>
<tr>
<th width=60 align=left>No.</td>
<td width=150>1.</td>
<td width=200>2.</td>
</tr>
<tr>
<th align=left>Nama</td>
<td>Jam Iyatul Khoir</td>
<td>Ari Mulyaningsih</td>
</tr>
<tr>
<th align=left>Alamat</td>
<td>Bulubrangsi Lamongan</td>
<td>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>

Hasilnya akan tampak seperti berikut:

Mengatur Lebar dan Tinggi Suatu Tabel

Lebar tabel diatur dengan menggunakan atribut WIDTH dan untuk mengatur
tinggi table dengan atribut HEIGHT. Jika atribut WIDTH dan HEIGHT
digunakan dalam elemen TABLE nilainya menunjukkan lebar dan tinggi tabel
terhadap BROWSER sedangkan jika digunakan pada elemen TH dan TD,

Edit By SMK Taruna Bhakti /WP/2010

31

nilainya merupakan lebar dan tinggi dari suatu tabel. Nilai atribut
mengunakan ukuran % (max 100%) dan ukuran pixel.
contoh1_14.html
<html>
<head>
<title>::: Mengatur Lebar dan Tinggi Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table border=1 width=100%>
<caption align=top><b><u>Daftar Alamat</u></b></caption>
<tr>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td height=50>Jam Iyatul Khoir</td>
<td height=50>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td align=center>2.</td>
<td height=30>Ari Mulyaningsih</td>
<td height=30>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>

Hasilnya tampak sebagai berikut:

Edit By SMK Taruna Bhakti /WP/2010

32

Perataan dalam Tabel

Perataan dalam tabel dikenal dua macam, yaitu perataan secara horizontal
dengan atribut ALIGN dan perataan vertikal dengan atribut VALIGN, serta
untuk membuat suatu tabel posisinya menjadi ditengah-tengah layar browser.
contoh1_15.html
<html>
<head>
<title>::: Membuat Perataan Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table border=1 align=center>
<caption align=top>
<b>Daftar Alamat</b>
<hr width=110>
</caption>
<tr>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td align=center valign=middle height=50>Jam Iyatul Khoir</td>
<td align=right valign=top height=50>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td align=center>2.</td>
<td align=left valign=baseline height=50>Ari Mulyaningsih</td>
<td align=left valign=bottom height=50>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>

Hasilnya seperti gambar berikut:

Edit By SMK Taruna Bhakti /WP/2010

33

Membuat Warna Pada Tabel

Didalam pewarnaan tabel kita dapat mengatur warna latar belakang dan teks
serta warna bordernya. Untuk menentukan warna latar belakang pada suatu
tabel, gunakan atribut BGCOLOR sedangkan untuk warna border dapat
menggunakan beberapa atribut sbb:
Atribut

Fungsi

BORDERCOLOR

Mengubah warna keseluruhan border

BORDERCOLORLIGHT

Mengubah warna border bagian atas dan kiri

BORDERCOLORDARK

Mengubah warna border bagian bawah dan kanan

Penggabungan Baris/Kolom
Untuk menggabungkan baris/kolom (merge) digunakan atribut COLSPAN dan
ROWSPAN. COLSPAN digunakan untuk menggabung-kan beberapa kolom
menjadi 1 sedangan ROWSPAN menggabungkan beberapa baris menjadi 1.
Cellpadding Dan Cellspacing
CELLPADDING digunakan untuk mengatur spasi antara border dengan
tulisan, sedangkan CELLSPACING digunakan untuk mengatur spasi antar dua
buah sel.
contoh1_16.html
<html>
<head>
<title>::: Contoh Merge, Cell dan Pedd:::</title>
</head>
<body>
<table border=2 align=center bordercolor=#EFFBFC bgcolor=#cc3300 cellspacing=4
cellpadding=8 width=100%>
<font face=arial size=2 color=white>
<tr>
<td bgcolor=#DFF9F9 colspan=2 align=center>Kelas</td>
<td bgcolor=#DFF9F9 align=center rowspan=2>Keterangan</td>
</tr>
<tr>
<td width=200 bgcolor=#DFF9F9 align=center>I</td>
<td width=200 bgcolor=#DFF9F9 align=center>II</td>
</tr>
<tr>
<td>Ratna Budi Setyorini</td>
<td>Wilujeng Handayani</td>
<td align=center>Lunas</td>
</tr>
</table>
</body>
</head>
</html>

Edit By SMK Taruna Bhakti /WP/2010

34

Hasilnya adalah sebagai berikut:

6. Membuat Frames
Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang
terbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian
merupakan satu halaman HTML terpisah. Sehingga tampilan halaman HTML
yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan bagian
lain tetap sehingga dapat menghemat bandwidth internet dan mempercepat
proses download secara keseluruhan.
Format:
<html>
<head>
</head>
<frameset>

<frame src>

</frameset>
</html>

Aturan penggunaan atribut ROWS dan COLS pada frameset adalah:

<frameset rows=tinggi_baris,tinggi_baris,>
<frameset cols=lebar_kolom, lebar_kolom,>

Atribut-atribut yang digunakan dalam FRAME adalah:

Atribut

Fungsi

FRAMESET COLS

Membuat frame vertikal dengan lebar kolom

tertentu

FRAMESET ROWS

Membuat frame horizontal dengan tinggi baris

tertentu

FRAME SRC

Memasukkan dokumen HTML ke dalam FRAME

NOFRAME

Memasukkan body teks untuk browser yang

tidak dapat menampilkan frame

Edit By SMK Taruna Bhakti /WP/2010

35

Model-model frame dan contoh pembuatannya:

1
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">

<FRAME SRC="menu.htm" NAME="Frame2">

</FRAMESET>
2
<FRAMESET cols="100,*">

<FRAME SRC="homepage.htm" NAME="Frame1">

<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
3
<FRAMESET rows="100,*">

<FRAME SRC="homepage.htm" NAME="Frame1">

<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
4

<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
5

<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET>
</FRAMESET>

6
<FRAMESET cols="*,50%">

<FRAME SRC="homepage.htm" NAME="Frame1">

<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>

Edit By SMK Taruna Bhakti /WP/2010

36

7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET>

</FRAMESET>
8

<FRAMESET rows="15%,70%,15%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="15%,70%,15%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET>
</FRAMESET>

Latihan Menggunakan FRAME

Buat file baru dengan nama latihan6.html, header.html, kiri.html, kanan.html,
bab1.html dan bab2.html dengan isi masing-masing sebagai berikut:
File latihan6.html
<html>
<head>
<title>.:: Latihan Membuat Frame::.</title>
</head>
<frameset rows=20%,* framespacing="0" border="0" frameborder="0">
<frame name=atas src=header.html scrolling="no" noresize>
<frameset cols=25%,* framespacing="0" border="0" frameborder="0">
<frame name=kiri src=kiri.html scrolling="no" noresize>
<frame name=kanan src=kanan.html scrolling="no" noresize>
</frameset>
</frameset>
</html>

Pada tag <frameset rows=20%,*> maksudnya adalah frame yang dibuat

terdiri dari dua bagian/baris dengan ukuran 20% bagian paling atas dan
selebihnya (80%) adalah frame bagian bawah/baris kedua yang ditunjukkan
dengan tanda *. <frame name=atas src=header.html> menunjukkan bahwa
nama frame adalah atas dan diisi dengan dokumen header.html.

Edit By SMK Taruna Bhakti /WP/2010

37

<frameset cols=30%,*> mempunyai arti bahwa frame bawah dibagi lagi

menjadi dua kolom dengan ukuran 30% untuk frame kiri dan sisanya untuk
frame sebelah kanan.
Kalau file tersebut dijalankan hasilnya sebagai berikut:

Tampilan tersebut dikarenakan file-file yang dibutuhkan oleh frame belum

dibuat atau tidak ditemukan. Oleh karena itu lengkapi file-file sebagai berikut:
File header.html
<html>
<head>
<title>.:: Latihan Membuat Frame::.</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK PGRI 3 Malang:::. </b><br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

38

File kiri.html
<html>
<head>
<title>::: Latihan Membuat Frame:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 width="228" height="28" cellspacing=0>
<tr>
<td width="218" height="22" bordercolor="#800080" bgcolor="#BDCED9">
<b><font face="Tahoma" size="2">&nbsp;&nbsp; M e n u</font></b>
</td>
</tr>
<tr>
<td width="218" height="22" bordercolor="#800080">
<b><font face="Tahoma" size="2">&nbsp;&nbsp;
<a href=kanan.html target=kanan>H o m e</a></font></b></td>
</tr>
<tr>
<td width="218" height="22" bordercolor="#800080">
<b><font face="Tahoma" size="2">
&nbsp;&nbsp; <a href=proli.html target=kanan>Program Keahlian</a>
</font></b></td>
</tr>
<tr>
<td width="218" height="22" bordercolor="#800080">
<b><font face="Tahoma" size="2">
&nbsp;&nbsp; <a href=ekstra.html target=kanan>Ekstra Kurikuler</a>
</font></b></td>
</tr>
</table>
</body>
</html>
File kanan.html
<html>
<head>
<title>::: Latihan Membuat Link Ke Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 bordercolor=bordercolor="#800080"
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td valign=top>
<font face=verdana size=4 color=blue>
Selamat datang di web kami ...
</td>
</tr>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

39

File proli.html
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 bordercolor=bordercolor="#800080"
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td valign=top>
<font face=verdana size=4 color=blue>
Program Keahlian:<br>
<font size=1>
<ul type=circle>
<li>Rekayasa Perangkat Lunak
<li>Teknik Elektronika Industri
<li>Teknik Pembangkit Tenaga Listrik
<li>Teknik Mekanik Otomotif
<li>Teknik Bodi Otomotif
<li>Teknik Pemesinan
<li>Teknik Las
</ul>
</td>
</tr>
</body>
</html>
File ekstra.html
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 bordercolor=bordercolor="#800080"
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td valign=top>
<font face=verdana size=4 color=blue>
Ekstra Kurikuler:<br>
<font size=1>
<ul type=circle>
<li>Seni Bela Diri Tapak Suci
<li>Keagamaan
<li>Sepak Bola
<li>Bola Basket
<li>Kepenyiaran
</ul>
</td>
</tr>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

40

Hasilnya adalah sebagai berikut:

7. Form Html
Digunakan untuk menerima masukan/input dari user dan memproses hasil
inputan tersebut di server. User menerima informasi melalui sejumlah elemen
yang disebut kontrol. Kontrol ini dapat berupa TEXTBOX, CHECKBOX, RADIO
BUTTON, PUSH BUTTON, LIST MENU dan lainnya.
Sintak penulisan form adalah:
<form method=post atau get action=program_pemroses>
elemen-elemen FORM
</form>

Atribut METHOD mempunyai dua nilai yaitu POST dan GET. Metode GET
mengirimkan data pada server dengan cara meletakkan data pada bagian
akhir URL yang ditunjuk. Metode POST mengirimkan datanya secara terpisah.
Jika data masukan banyak, lebih disarankan untuk menggunakan metode
post. Atribut ACTION berisi URL dari program yang dipanggil oleh form
tersebut.
TextBOX
Textbox digunakan untuk memasukkan data string sebanyak satu baris. Cara
penulisannya adalah:
<input type=text name=textbox1 size=xx value>

Edit By SMK Taruna Bhakti /WP/2010

41

Atribut TYPE untuk menentukan jenis masukan yang berupa TEXT (textbox),
NAME adalah identifikasi/penamaan elemen ini untuk dibaca oleh program
pemroses nantinya. Atribut VALUE untuk memberi nilai suatu masukan.
Sedangkan atribut SIZE digunakan untuk menentukan panjang atau
banyaknya karakter sebuah masukan. Untuk menyembunyikan masukan yang
ditulis user dalam textbox, dapat menggunakan atribut TYPE=PASSWORD,
sehingga tampilan dalam textbox menjadi karakter *.
contoh1_17.html
<html>
<head>
<title>::: Form Input dengan TEXTBOX:::</title>
</head>
<body>
<h3>Rancangan awal BUKU TAMU</h3>
<form method=post>
<table border=0>
<tr>
<td width=70>Nama</td>
<td width=10>:</td>
<td width=30><input type=text name=nama size=30></td>
</tr>
<tr>
<td width=70>Alamat</td>
<td width=10>:</td>
<td width=30>
<input type=text value=Jl. name=alamat size=30></td>
</tr>
<tr>
<td width=70>Homepage</td>
<td width=10>:</td>
<td width=30>
<input type=text value=http:// name=page size=30></td>
</tr>
</table>
</form>
</body>
</html>

Tampilan untuk contoh diatas adalah:

Edit By SMK Taruna Bhakti /WP/2010

42

CHECKBOX
CheckBox digunakan untuk memberi beberapa pilihan kepada user, sehingga
user dapat memilih salah satu, lebih dari satu pilihan atau tidak memilih sama
sekali.
Tata cara penulisannya adalah:
<input type=checkbox name=checkbox1 value=on atau off checked>Pilihan 1

Dimana attribut TYPE menentukan jenis masukan yang berupa CHECKBOX,

NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses
nantinya, VALUE menentukan apakah pada keadaan awal checkbox ini terpilih
(ON) atau tidak (OFF). Parameter CHECKED menentukan apakah checkBOX
sedang dicentang atau tidak
contoh1_18.html
<html>
<head>
<title>::: Form Input dengan CHECKBOX:::</title>
</head>
<body>
<form method=post>
Pilih Program Keahlian Anda<br>
<h3>Daftar Program Keahlian SMK PGRI 3 Malang</h3>
<p>
<input type=checkbox name=c1 checked>Rekayasa Perangkat Lunak<br>
<input type=checkbox name=c2>Teknik Elektronika Industri<br>
<input type=checkbox name=c3>Teknik Pembangkit Tenaga Listrik<br>
<input type=checkbox name=c4>Teknik Otomotive<br>
</form>
</body>
</html>

Hasil contoh diatas adalah sebagai berikut:

Edit By SMK Taruna Bhakti /WP/2010

43

RADIO Button
Digunakan untuk membuat pilihan. User dapat memilih salah satu pilihan
yang tersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu
pilihan yang disediakan. Atribut CHECKED memberi tanda bahwa pilihan
tersebut sedang diaktifkan, VALUE adalah harga dari pilihan
contoh1_19.html
<html>
<head>
<title>::: Form Input dengan RADIO Button:::</title>
</head>
<body>
<form method=post>
<h3>Pilih Salah satu<br>
Pendidikan Terakhir Anda: </h3>
<input type=radio value="SD" checked name=sekolah>SD<br>
<input type=radio value="SLTP" name=sekolah>SLTP<br>
<input type=radio value="SMU" name=sekolah>SMU<br>
<input type=radio value="S1" name= sekolah >S1<br>
<input type=radio value="S2" name= sekolah >S2<br>
</form>
</body>
</html>

Hasil contoh program tersebut adalah:

DROP-DOWN Menu
Digunakan untuk membuat menu pilihan. Cara menuliskannya adalah:
<select name=menu1>
<option value-pilihan1>Pilihan 1
<option value-pilihan2>Pilihan 2
<option value-pilihan3>Pilihan 3
dst
</select>

Edit By SMK Taruna Bhakti /WP/2010

44

Tag OPTION berfungsi untuk menampilkan pilihan-pilihan yang akan tersedia.

Setiap pilihan ditentukan isinya dengan parameter VALUE.
contoh1_20.html
<html>
<head>
<title>::: Form Input dengan DROP-DOWN Menu:::</title>
</head>
<body>
<form method=post>
<h3>Pilih Salah satu<br>
Jurusan: </h3>
<select name=jurusan>
<option value=TI selected>Teknik Informatika</option>
<option value=EI>Elektronika Industri</option>
<option value=MO>Mesin Otomotive</option>
<option value=BO>Bodi Otomotive</option>
<option value=MP>Mesin Perkakas</option>
<option value=ML>Mesin Las</option>
</select>
</form>
</body>
</html>

Tampilan contoh diatas adalah sebagai berikut:

TEXT Area
Elemen ini digunakan untuk menampilkan masukan berupa textbox yang
mampu menerima masukan berupa string lebih dari satu baris.
Sintaknya adalah:
<textarea name=textbox1 rows=xx cols=xx>Isi Awal
</textarea>

Edit By SMK Taruna Bhakti /WP/2010

45

Parameter NAME adalah identifikasi dari elemen ini untuk dibaca oleh
program pemroses nantinya, COLS dan ROWS adalah ukuran kolom dan baris
textbox ini dalam banyaknya karakter
contoh1_21.html
<html>
<head>
<title>::: Form Input dengan Text Area:::</title>
</head>
<body>
<form method=post>
<h5>Isikan Pesan dan kesan</h5>
<textarea name=textbox1 rows=5 cols=40>Pesan Anda:
</textarea>
</form>
</body>
</html>

Tampilan contoh diatas adalah sebagai berikut:

Elemen Tombol
Elemen ini digunakan untuk menampilkan tombol yang dapat berupa tombol
SUMBIT untuk mengirimkan data ke pemroses di server, RESET untuk
mengulangi/mengosongkan isian form atau NORMAL yang tidak berfungsi
apapun sebelum kita mendefinisikan sebuah fungsi untuknya.
Format penulisannya adalah:
<input type=submit value=OK name=tombol1>untuk tombol SUBMIT
<input type=reset value=reset name=tombol2>untuk tombol RESET

Edit By SMK Taruna Bhakti /WP/2010

46

contoh1_22.html
<html>
<head>
<title>::: Buku Tamu:::</title>
</head>
<body>
<h3><p align=center>BUKU TAMU</p></h3>
<form method=post>
<table border=0 align=center width=500>
<tr>
<td width=11%>Nama</td>
<td width=3%>:</td>
<td width=86%><input type=text name=nama size=20></td>
</tr>
<tr>
<td width=11%>Alamat</td>
<td width=3%>:</td>
<td width=86%>
<input type=text value=Jl. name=alamat size=30></td>
</tr>
<tr>
<td width=11%>Email</td>
<td width=3%>:</td>
<td width=86%><input type=text name=email size=20></td>
</tr>
<tr>
<td width=11%>Website</td>
<td width=3%>:</td>
<td width=86%>
<input type=text value=http:// name=pg size=30></td>
</tr>
<tr>
<td width=11% valign=top>Homepageku</td>
<td width=3% valign=top>:</td>
<td width=86%>
<input type=radio value=hebat name=saran checked>
Bagus Sekali<br>
<input type=radio value=bagus name=saran>
Bagus<br>
<input type=radio value=biasa name=saran>
Biasa Aja<br></td>
</tr>
</table>
<p align=center>
<input type=submit value=kirim name=b1>
<input type=reset value=batal name=b2>
<hr>
</form>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

47

Hasilnya adalah:

c. Rangkuman
Setelah kita mempelajari materi pertama ini, kita dapat menarik kesimpulan,
ternyata membuat/membangun halaman web itu mudah sekali. Dengan hanya
bermodalkan editor teks biasa, kita sudah dapat belajar banyak tentang tag-tag
html yang digunakan untuk membuat sebuah halaman web.
Struktur HTML secara garis besar dibagi menjadi <head> dan <body>. Di bagian
<body> kita dapat menuliskan semua kode html yang akan kita gunakan untuk
membangun halaman web, yaitu diantaranya pengaturan teks, pengaturan
image, hyperlink, pembuatan table dan pembuatan frame.
Lanjutkan ke materi berikutnya agar pengetahuan anda dalam membangun
halaman web lebih banyak lagi.

d. Tugas
1. Kunjungi beberapa website (minimal 10 website). Amatilah website yang
telah anda kunjungi. Yang harus anda amati adalah meliputi:
a. Layout,
Seberapa besar daya tarik dan unsur seni dari web yang anda amati.
Bagaimana model layout web tersebut, berbentuk tabel atau frame?
b. Content/Isi, Apa saja isi dari web tersebut.
Silahkan catat hasil pengamatan anda.

Edit By SMK Taruna Bhakti /WP/2010

48

2. Teliti profil sebuah organisasi/lembaga (misal: KUD, Pemerintah Kota, Sekolah

dan lain-lain). Catat semua hasil penelitian anda. Dari hasil penelitian anda,
silahkan buat website statis yang isinya adalah profile dari yang anda teliti.
Bila perlu tawarkan website buatan anda kepada organisasi/lembaga
tersebut.
3. Silahkan cari dan download tutorial berbahasa Inggris di Internet yang
berhubungan dengan web programming, (misalnya PHP, ASP dan lain-lain).

e. Tes Formatif
1. Jelaskan masing-masing fungsi dari tag-tag berikut:

a) <h1>
b) <p>
c) <br>
d) <hr>
2. Apakah fungsi dari link, form dan frame dalam pembuatan web?
3. Apa perbedaan frame dan frameset?
4. Apa perbedaan checkbox dan radio button?
5. Apakah fungsi dari tombol Submit dan Reset?
6. Buatlah halaman web seperti terlihat di gambar. Dalam gambar tersebut, jika
ada penekanan tombol kirim, maka hasilnya akan dikirimkan ke e-mail anda.

Edit By SMK Taruna Bhakti /WP/2010

49

f. Kunci Jawaban Formatif 1

1. Fungsi dari tag:
a. <h1>

digunakan untuk mengatur ukuran huruf pada header dengan

angka 1 berarti mempunyai ukuran paling besar.

b. <p>

digunakan untuk berpindah alinea atau membuat paragraf baru

c. <br>

Digunakan untuk pindah baris baru.

d. <hr>

digunakan untuk membuat garis horisontal

2. Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain,
dapat berupa teks maupun gambar.
Form,

digunakan

untuk

mengumpulkan

informasi

dari

pengunjung

(berinteraksi dengan pengunjung) karena form dapat berupa model isian

yang harus diisi pengunjung dan akan dibca oleh pemilik web.
Frame, merupakan pembagi halaman.
3. Frame adalah dokumen yang terdapat di dalam frameset dengan border yang
mengelilinginya. Sedangkan frameset, adalah suatu frame yang dapat
menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa
frameset yang lainnya.
4. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk
menentukan pilihan dari suatu daftar pilihan. Perbedaanya terletak pada
jumlah pilihan yang dapat dipilih. Pada checkbox, pengunjung halaman web
dapat memilih beberapa dari daftar pilihan, namun dengan radio button,
pengunjung hanya berhak menentukan satu pilihan saja.
5. Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan
dalam form untuk selanjutnya diolah oleh server. Dan tombol reset berfungsi
untuk mengosongkan dan atau mengembalikan ke nilai default data yang ada
dalam form.
6. Kode untuk halaman web tersebut adalah:
<html>
<head>
<title>::: Form Order:::</title>
</head>
<body>
<font face=verdana>
<h3 align=center>FORM ORDER BARANG
<form action="mailto:[email protected]" method=post>
<table border=2 cellpadding=1>
<tr>
<td rowspan=2><font size=2>Isikan Data-data Anda</td>
<td><input type=text name="NamaDepan" size=20></td>
<td><input type=text name="NamaBelakang" size=20></td>
<td><input type=text name="Usia" size=3></td>
</tr>

Edit By SMK Taruna Bhakti /WP/2010

50

<tr>
<td><font size="-2">Nama Depan</font></td>
<td><font size="-2">Nama Akhir</font></td>
<td><font size="-2">Umur</font></td>
</tr>
<tr>
<td rowspan=3><font size=2>Bagaimana Menghubungi Anda?</td>
<td colspan=4 valign=top><font size=2>Alamat Rumah:
<textarea name="Jalan" rows=2 cols=30></textarea></td>
</tr>
<tr>
<td colspan=2><font size=2>Kota:
<input type=text name="kota" size=20></td>
<td colspan=2><font size=2>Negara:
<input type=text name="negara" size=25></td>
</tr>
<tr>
<td colspan=2><font size=2>Kode Pos:
<input type=text name="kodepos" size=10></td>
<td colspan=2><font size=2>Nomor Telepon
<input type=text name="telp1" size=4> <input type=text name="telp2" size=11></td>
</tr>
<tr>
<td><font size=2>Credit Card
<input type=radio name=CC value=Visa checked>Visa
<input type=radio name=CC value=MasterCard checked>M/C</td>
<td colspan=2 align=center>
<input type=text name=nomorCC1 size=4>
<input type=text name=nomorCC2 size=4>
<input type=text name=nomorCC3 size=4>
<input type=text name=nomorCC4 size=4></td>
<td colspan=2 align=center><font size=2>Tanggal Berakhir:
<input type=text name=blnakhir size=2>
<input type=text name=thnakhir size=2></td>
</tr>
<tr>
<td><font size=2>Jenis Barang </td>
<td colspan=4><font size=2>
<select multiple name=Merchandise size=1>
<option selected>Pentium IV
<option>Pentium III
<option>Monitor
<option>CD-ROM
<option>Kamera Digital
<option>Printer
<option>Mouse
<option>Scanner
</select></td>
</tr>

Edit By SMK Taruna Bhakti /WP/2010

51

<tr>
<td align=center colspan=5>
<h1>Terimakasih Atas Order Anda!</h1>
</td>
</tr>
</table><p>
<center>
<input type="submit" value="Kirim">
<input type="Reset" value="Hapus Isian">
</center>
</form>
</body>
</html>

g. Lembar Kerja 1
Alat dan Bahan
PC (Personal Computer) yang telah dilengkapi dengan Web browser dan editor
teks Notepad.
Kesehatan dan Keselamatan Kerja
1) Berdoalah sebelum memulai kegiatan belajar.
2) Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
3) Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung
dengan benar.
4) Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik
di dekat komputer (magnet, handphone, dan sebagainya).
5) Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain

game.
6) Setelah selesai, matikan komputer sesuai prosedur yang aman!
Langkah Kerja
1) Siapkanlah semua peralatan yang akan digunakan!
2) Periksa semua kabel penghubung pada PC.
3) Nyalakan PC dan jalankan program editor teks notepad dan Web browser
Internet Explorer.
4) Kerjakan Tugas 1 dan Tes Formatif 1 di atas.
5) Apabila menemui kesulitan dalam memahami materi yang ada, segera
tanyakan kepada instruktur.
6) Setelah selesai, matikan komputer dan rapikan seperti semula.

Edit By SMK Taruna Bhakti /WP/2010

52

Kegiatan Belajar 2:
Membangun halaman web dengan bahasa pemrograman berbasis web

a. Tujuan Kegiatan Pemelajaran

1) Peserta diklat mampu mengenali objek-objek web, tag-tag HTML dan scriptscript pada pemrgraman berbasis web.
2) Peserta diklat mampu menggunakan dan menerapkan fungsi dan operator
algoritma pemrograman pada aplikasi yang dibuat
3) Peserta diklat mampu menentukan struktur data pada aplikasi yang dibuat
4) Peserta diklat mampu menentukan basis data pada aplikasi yang dibuat
5) Peserta diklat mampu melakukan kombinasi objek-objek web, tag-tag HTML
dan script yang lain untuk membuat halaman-halaman web.
6) Peserta

diklat

mampu

membangun

halaman

web

dengan

bahasa

pemrograman berbasis web

b. Uraian Materi
1. Pendahuluan
Website dapat dibedakan menjadi dua yaitu Web Statis dan Web Dinamis.
Web Statis adalah web yang berisi informasi-informasi yang bersifat statis
(tetap), sedangkan Web Dinamis adalah web yang menampilkan informasi
yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan
user.
Biasanya untuk web statis yang ditonjolkan adalah sisi tampilan yang banyak
mengandung grafis sehingga untuk merancang web statis tidak diperlukan
kemampuan pemrograman yang handal. Yang dibutuhkan hanya kemampuan
design grafis/web dan cita rasa seni belaka. Sedangkan untuk web dinamis
yang banyak ditonjolkan adalah pengolahan data sehingga dibutuhkan
kemampuan dalam pemrograman web.
Ada dua jenis pemrograman web, yaitu Server Side Programming dan Client

Side Programming. Pada Server Side Programming, semua sintaks dan

perintah program yang diberikan akan dijalankan/diproses di Web Server,
kemudian hasilnya dikirimkan ke browser pengguna dalam bentuk HTML
biasa. Sehingga pengguna tidak dapat melihat kode asli yang ditulis dalam
bentuk server side programming tersebut. Yang tergolong dalam server side
programming seperti: CGI/Perl, Active Server Pages, Java Server Page, PHP,

Cold Fussion dan lain-lain.

Sebaliknya, pada Client Side Programming semua sintaks dan perintah
program dijalankan di Web browser, sehingga ketika client meminta dokumen
yang mengandung script, script tersebut akan diambil dari web server

Edit By SMK Taruna Bhakti /WP/2010

53

kemudian dijalankan di web browser yang bersangkutan. Contoh dari client

side programming seperti: JavaScript, VbScript, HTML.
2. Pengenalan PHP
PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan
pada serverside. Artinya semua sintaks yang kita berikan akan sepenuhnya
dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya
saja. Ketika seorang pengguna internet membuka suatu situs yang
menggunakan fasilitas server side scripting PHP, maka terlebih dahulu server
yang bersangkutan akan memproses semua perintah PHP di server lalu
mengirimkan hasilnya dalam format HTML ke web server pengguna internet
tadi. Sehingga kode asli yang ditulis dengan PHP tidak terlihat di browser
pengguna.
PHP merupakan software yang open source bebas. Jadi anda dapat merubah

source code dan mendistribusikan secara bebas dan gratis. PHP juga dapat
berjalan lintas platform, yaitu dapat digunakan dengan sistem operasi
(Windows dan Linux) dan web server apapun (misalnya: PWS, IIS, Apache
dll).
Adapun kelebihan-kelebihan dari PHP yaitu:

Mudah dibuat dan berkecepatan tinggi

PHP dapat berjalan lintas platform, yaitu dapat berjalan dalam sistem
operasi dan web server apapun.

Dapat digunakan secara gratis.

Termasuk bahasa yang embedded, yakni dapat diletakkan dalam tag
HTML.

Termasuk server side programming, sehingga kode asli/source code PHP

tidak dapat dlihat di browser pengguna, yang terlihat hanya kode dalam
format HTML.

Dapat memanfaatkan sumber-sumber aplikasi yang dimiliki oleh server,

seperti misalnya untuk keperluan database connection. PHP dapat
melakukan koneksi dengan berbagai database seperti MySQL, Oracle,
Sybase, mSQL, Solid, Generic ODBC, Postgres SQL, dBase, Direct MSSQL, Velocis, IBM DB2, Interbase, Frontbase, Empress, dan semua
database yang mempunyai profider ODBC seperti misalnya MS Access dan
lain-lain.

PHP dapat melakukan semua aplikasi program CGI, seperti mengambil

nilai form, menghasilkan halaman web yang dinamis, mengirimkan dan
menerima cookies.

PHP juga mendukung komunikasi dengan layanan lain melalui protokol

IMAP, SNMP, NNTP, POP3 dan HTTP dan lainnya.

Edit By SMK Taruna Bhakti /WP/2010

54

3. Instalasi Program
Untuk menjalankan PHP, dibutuhkan hal-hal berikut:
Web Server
Program aplikasi PHP
Database server
Program Aplikasi Database
Ke-empat komponen tersebut mutlak harus ada, jadi sebelum melakukan
pemrograman dan menjalankan PHP, komponen-komponen diatas harus
dinstall terlebih dahulu.
Untuk keempat software tersebut anda bebas memilih menurut yang anda
suka. Namun dalam modul ini yang akan dibahas hanya PhpTriad saja.
Kenapa PhpTriad? Karena disamping software tersebut adalah gratis juga
karena dalam satu paket program ini sudah terdiri dari 4 software yang kita
butuhkan, yaitu web server (dalam hal ini, Apache), Program PHP, Database
Server MySQL dan program aplikasi MySQL. Penginstalan PhpTriad sangat
mudah, sekali install semua program tersebut secara otomatis terinstall juga.
Cara instalasi PhpTriad adalah sebagai berikut:
a. Persiapkan master program PhpTriad. Jika belum ada, silahkan download
di internet. Anda dapat meminta bantuan search engine untuk mencari
program

PhpTriad

atau

anda

dapat

mengunjungi

situs

http://www.download.com.
b. Setelah proses download selesai, buka windows explorer kemudian double
klik icon PhpTriad2-2-1.exe dan ikuti petunjuk yang diberikan.

Edit By SMK Taruna Bhakti /WP/2010

55

Proses instalasi ini pada dasarnya akan mengekstrak file-file ke direktori

tertentu, yaitu c:\apache.
c. Setelah itu muncul jendela instalasi seperti pada gambar. Kotak licence

agreement tersebut merupakan kotak yang harus dibaca terlebih dahulu

karena

berisikan

pengertianpengertian umum
mengenai

lisensi

perangkat

lunak

ini. Jika anda setuju

dengan

lisensi yang diberikan, baru kita bisa

melanjutkan
instalasi

dengan

klik tombol I Agree. Proses instalasi akan berjalan selama beberapa

menit. Tunggu proses tersebut hingga selesai.
d. Setelah proses selesai akan muncul pesan Setup Completed seperti pada
gambar dibawah ini. Klik tombol close untuk mengakhiri proses instalasi.

e. Selanjutnya lakukan beberapa langkah untuk mengaktifkan semua

komponen PhpTriad dalam komputer anda. Langkah pertama, jalankan
PHPTriad Control Panel, yang dapat dilakukan dari Start Menu
Program PHP Triad

PHPTriad Control Panel.

Atau melalui

Internet Explorer, ketikkan http://localhost:1005/ pada address bar.

PHPTriad Control Panel digunakan untuk melakukan pengaturan
terhadap berbagai fasilitas yang ada pada PhpTriad. Setelah control panel
dijalankan, akan muncul tampilan seperti pada gambar dibawah ini.

Edit By SMK Taruna Bhakti /WP/2010

56

f. Setelah PhpTriad Control Panel aktif, lakukan langkah sebagai berikut:

Klik Install Apache as Service.
Proses ini akan melakukan instalasi Apache sebagai service software.
Klik Start Apache.
Proses ini akan melakukan aktifasi Apache sebagai webserver.
Klik Start MySQL.
Pilih versi sistem operasi yang aktif dan sesuaikan dengan versi yang
ada pada komputer anda.
Klik Open Site w/ default Browser.
Bagian ini digunakan untuk mengecek apakah PHP sebagai sebuah
service sudah dapat digunakan Jika berhasil, maka akan muncul
tampilan sebagai berikut:

Edit By SMK Taruna Bhakti /WP/2010

57

g. Langkah selanjutnya yang perlu anda lakukan adalah mengubah atau

mengatur direktori/folder default untuk dokumen anda. Ini dilakukan agar
ketika

kita

membuka

Internet

Explorer

dan

mengetikkan

http://localhost pada address bar, maka yang akan dibuka adalah

document root yang posisinya di folder yang telah kita tentukan. Jika tidak
kita atur, maka default untuk document root adalah di direktori
C:\apache\htdocs. Artinya, dokumen yang diakses secara otomatis
oleh browser ketika memanggil localhost adalah dokumen-dokumen yang
berada pada folder tersebut. Dan secara otomatis pula, file yang pertama
kali dijalankan adalah file yang memiliki nama index.html, atau
index.htm atau index.php yang terdapat dalam folder tersebut.
Untuk mengatur document root, yang perlu anda lakukan adalah:
Buat direktori/folder baru yang akan kita jadikan document root.
Misalnya: c:\latihan.
Jalankan program aplikasi teks editor Notepad. Kemudian buka file
httpd.conf

yang

terletak

di

c:\apache\conf.

Cari

teks

DocumentRoot C:\Apache\htdocs kemudian ganti teks tersebut

dengan DocumentRoot C:\Latihan. Simpan file ini dan tutup
kembali notepad anda. Sekarang anda bisa membuat file-file PHP yang
disimpan dalam direktori menurut selera anda sendiri.

Edit By SMK Taruna Bhakti /WP/2010

58

h. Langkah terakhir yang tidak kalah pentingnya adalah mengaktifkan

MySQL. Jalankan windows explorer kemudian masuk ke direktori/folder
C:\apache\mysql\bin dan cari file winmysqladmin.exe. Jalankan file ini
untuk mengaktifkan MySql. Jika file ini belum pernah dijalankan
sebelumnya, maka akan muncul window form yang meminta ke anda agar
memasukkan nama user dan password. Isilah sesuai dengan keinginan
anda

sendiri

dan

jangan

lupa

dicatat

agar anda tidak

melupakannya.
Setelah

anda

mengisinya,
klik

ok.

Dan

winmysql akan
segera aktif (terlihat di taskbar sebelah kanan dengan icon berwarna
hijau, jika berwarna merah berarti tidak jalan)
i. Ok, proses instalasi semua software yang kita butuhkan sekarang telah
selesai. Dan sekarang mari kita lanjutkan ke materi berikutnya.

Edit By SMK Taruna Bhakti /WP/2010

59

4. Penulisan Script PHP

Pastikan web server dan skrip PHP anda telah berjalan dengan baik sebelum
anda memulai pemrograman PHP. Untuk membuat web dengan script PHP,
cukup anda persiapkan editor teks.
Fungsi-fungsi yang ada di PHP uncase sensitive, tetapi variabelnya case
sensitive (membedakan huruf besar dan kecil). Script PHP diawali dengan
tanda lebih kecil ( < ) dan diakhiri dengan tanda lebih besar ( > ). Ada tiga
cara untuk menuliskan script PHP yaitu:

<?
Script PHP
?>

<?php
Script PHP
?>

<script language=php>
Script PHP

</script>

Hal-hal yang harus diperhatikan dalam penulisan script php, yaitu:

Script PHP harus disimpan dengan ekstensi PHP. Format penulisannya
adalah namafile.php, atau namafile.php3 atau namafile.php4.
Setiap instruksi dipisahkan oleh tanda titik koma (;).
Setiap baris script isi harus didahului pernyataan cetak yang dibedakan
menjadi dua, yaitu Print dan Echo.
Penulisan komentar/comment didahului dengan /* dan diakhiri dengan
*/. Atau diawali dengan tanda //. Sintaknya adalah sebagai berikut:
/* komentar */
// komentar
# komentar

Karakter adalah semua bentuk huruf, angka, spasi, tanda kontrol atau
simbol yang terdapat dalam tombol keyboard.
5. Variable
Variabel digunakan untuk menyimpan data sementara dan nilainya bisa
berubah-ubah setiap kali program dijalankan. Dalam PHP setiap nama
variable diawali tanda dollar ($) dan diikuti dengan nama variabelnya, tidak
memandang data tersebut apakah integer, real maupun string, PHP otomatis
akan mengkonversi data menurut tipenya. Misalnya nama variable a dalam
PHP ditulis dengan $a. Jenis suatu variable ditentukan pada saat jalannya
Edit By SMK Taruna Bhakti /WP/2010

60

program dan tergantung pada konteks yang digunakan. Aturan penamaan

variabel dalam PHP:

Diawali dengan tanda dolar ($)

Penamaan variabel bersifat case sensitive
Nama variabel hanya bisa diawali dengan huruf atau garis bawah, baru
dapat diikuti dengan beberapa huruf atau angka maupun garis bawah
yang panjangnya tidak terbatas.

Tidak boleh menggunakan tanda baca.

Tidak boleh menggunakan reserved word PHP seperti misalnya echo,

print, dan lain-lain.

Variabel dalam PHP tidak harus dideklarasikan terlebih dahulu sebelum
digunakan.
Contoh-contoh penulisan variabel:
Benar

Salah

$variabel

$var!abel

$_pilih

$-pilih

$te93

$93te

$ini_itu

$ini-itu

contoh2_1.php
<html>
<head>
<title>Variabel dalam PHP</title>
<body>
<?php
//variabel bertipe integer
$a="5";
//variabel bertipe real
$b="2.5";
//variabel bertipe string
$komentar="Selamat Datang di PHP";
echo ("Nilai variabel a adalah = $a <br>");
//variabel bertipe integer
echo ("Nilai variabel b adalah = $b <br>");
//variabel bertipe real
echo ("Nilai variabel komentar adalah = $komentar<br>"); //variabel bertipe string
$hasil=$a+$b;
echo ("Hasil jumlah a dan b adalah = $hasil <br>");
//variabel bertipe double
$tgl = date("d F Y");
//variabel bertipe tanggal
$nama = "SMK PGRI 3 Malang";
$garis= "=====================================";
echo "<p>";
echo $garis."<br>";
echo $komentar. " Di Lab ". $nama. "<br>Belajar dengan giat ya.... <br>";
echo $garis."<br>";
echo "Tanggal ".$tgl;
?>

Edit By SMK Taruna Bhakti /WP/2010

61

hasilnya adalah:

6. Konstanta
Konstanta adalah variabel yang nilainya tetap.
Sintak:
Define (nama_konstanta,nilai_konstanta);

Contoh:
<html>
<head>
</head>
<body>
<?
Define (kampus,SMK PGRI 3 Malang);
Echo kampus;
?>
</body>
</html>

7. Type Data
PHP mengenal 4 tipe data skalar dan 2 tipe data compound. Tipe data skalar
adalah tipe data integer, floating point, string dan boolean. Sedangkan 2 tipe
data compound adalah array dan object. yaitu:
a. Integer, tipe data yang menyatakan bilangan bulat.
b. Floating point/double, tipe data yang menyatakan bilangan real/pecahan
c. String, menyatakan tipe data teks yang berisi kumpulan beberapa karakter
d. Boolean, tipe data logika yang memiliki nilai true dan false.
e. Array adalah tipe data terstruktur yang berguna untuk menyimpan
sejumlah data yang bertipe sama.
f. Objek, merupakan instansiasi dari suatu class.

Edit By SMK Taruna Bhakti /WP/2010

62

8. Konversi Type Data

PHP menyediakan perintah untuk melakukan konversi tipe data ke tipe data
yang lain dengan menggunakan perintah sebagai berikut:
settype(value,datatype)
dimana:
- value adalah nilai yang akan dikonversikan
- datatype adalah tipe data yang dikonversikan
Perhatikan contoh berikut:
contoh2_2.php
<html>
<head>
<title>.:: Konversi Type Data::.</title>
</head>
<body>
<font face=tahoma size=2>
<?php
$bayar="500.77 Rupiah";
print ("Tipe Data String: $bayar <br> \n");
settype($bayar,"double");
print ("Tipe Data Double: $bayar <br> \n");
settype($bayar,"integer");
print ("Tipe Data Integer: $bayar <br> \n");
?>
</body>
</html>

Hasil dari script diatas adalah:

9. Operator
Operator adalah simbol/tanda yang digunakan untuk melakukan operasioperasi matematis atau operasi string. Sedangkan operand adalah data yang
dioperasikan atau dimanipulasi. Operator dapat dikelompokkan dalam 4
kategori, yaitu:

Edit By SMK Taruna Bhakti /WP/2010

63

a. Operator Aritmatika/Arithmetic Operator

b. Operator Penugasan/Assignment Operator
c.

Operator Pembanding/Comparison Operator

d. Operator Logika/Logical Operator

Operator Aritmatika/Arithmetic Operator
Adalah operator yang digunakan dalam operasi matematika. Yang
termasuk operator ini adalah:
Operator

Operasi

Penjumlahan

Pengurangan

Perkalian

Pembagian

Modulus

++

Increment 1

--

Decrement 1

Operator Penugasan/Assignment Operator

Operator penugasan berfungsi untuk memberikan nilai ke suatu variabel
atau variabel ke variabel. Simbol operator ini adalah sama dengan (=).
Daftar operator penugasan seperti dalam tabel berikut:
Operator

Fungsi

Contoh

+=

Untuk menambah nilai variabel disebelah kiri

dengan nilai sebelah kanan

x+=5;
x=x+5;

-=

Untuk mengurangi nilai variabel disebelah kiri

dengan nilai disebelah kanan

x-=5;
x=x-5;

.=

Untuk
melakukan
operasi
penggabungan
(concatenation) antara variabel disebelah kiri
dengan nilai disebelah kanan

x.=php;
x=x.php;

/=

Untuk membagi nilai variabel di sebelah kiri

dengan nilai sebelah kanan

x/=5;
x=x/5;

%=

Sisa hasil bagi antara nilai variabel disebelah kiri

dengan nilai disebelah kanan

X%=5;
x=x%5;

&=

Untuk melakukan operasi logika AND antara nilai

variabel disebelah kiri dengan nilai disebelah
kanan

X&=5;
x=x&5;

|=

Untuk melakukan operasi logika OR antara nilai

variabel disebelah kiri dengan nilai disebelah
kanan

X|=5;
x=x|5;

^=

Untuk melakukan operasi logika XOR antara nilai

variabel disebelah kiri dengan nilai disebelah
kanan

X^=5;
x=x^5;

Operator Pembanding/Comparison Operator

Operator ini disebut juga operator relasional, yaitu operator yang
digunakan untuk membandingkan antara dua atau lebih operand (nilai,

Edit By SMK Taruna Bhakti /WP/2010

64

variabel, atau pernyataan) dan menghasilkan nilai True atau False.

Operator-operator yang termasuk operator pembanding adalah:
Operator

Fungsi

Contoh

Sama Dengan

$a==$b;
true, jika $a sama dengan $b

Identik

$a===$b;
true, jika $a sama dengan
$b, dan keduanya
mempunyai tipe data yang
sama;

Tidak Sama Dengan

$a!=$b; atau
$a<>$b;
true, jika $a tidak sama
dengan $b;

!==

Tidak Identik

$a!==$b;
true, jika $a tidak sama
dengan $b, atau keduanya
tidak memiliki tipe data yang
sama;

<

Kurang Dari

$a<$b;
true, jika $a kurang dari $b;

>

Lebih Dari

$a>$b;
true, jika $a lebih besar dari
$b;

<=

Kurang Dari atau Sama Dengan

$a<=$b;
true, jika $a kurang dari atau
sama dengan $b;

>=

Lebih Dari atau Sama Dengan

$a>=$b;
true, jika $a lebih dari atau
sama dengan $b;

==

===

!= atau <>

Operator Logika/Logical Operator

Operator logika digunakan untuk membandingkan dua atau lebih
pernyataan dan menghasilkan nilai true atau false. Operator logika
sering digunakan pada struktur kendali. Yang termasuk operator logika
adalah:
Operator

Fungsi

Contoh

Operasi Logika AND

$a && $b;
true, jika $a dan $b bernilai true

|| atau OR

Operasi Logika OR

$a || $b; atau
$a or $b;
true, jika $a atau $b, salah satunya bernilai
true;

XOR

Operasi Logika XOR

$a xor $b;
true, jika $a atau $b bernilai true dan salah
satunya bernilai false;

Operasi Logika NOT

!$a;
true, jika $a tidak benilai true;

&& atau
AND

Edit By SMK Taruna Bhakti /WP/2010

65

 Operator Bitwise
Operator bitwise digunakan untuk operasi bilangan biner. Operatoroperator yang termasuk operator bitwise adalah:
Operator

Arti

&

Operator AND

Operator OR

Operator XOR

Operator NOT

<<

Operator Shift Left (geser kiri)

>>

Operator Shift Right (geser kanan)

Operator Increment/Decrement
Pre/Post increment dan decrement masing-masing adalah penambahan
dan pengurangan satu. Apabila operator diletakkan sebelum variabel,
misal ++$i atau --i maka nilai $i akan ditambahkan atau dikurangkan 1
sebelum keseluruhan operasi dalam ekspresi dikerjakan dan sebaliknya
apabila operator diletakkan setelah variabel, misal $i++ atau $i-- maka
nilai $i akan ditambah atau dikurangi 1 setelah operasi dalam ekspresi
dikerjakan.
Operator

Operasi

Penggunaan

++

Pre/Post Increment

++$a atau $a++

--

Pre/Post Decrement

--$b atau $b--

Operator String
Hanya ada satu operator string, yaitu operator concatenation (.), yakni
menggabungkan dua buah atau lebih string.
Contoh
<?php
$a = Hallo;
$b = $a.Selamat Dtang di PHP;
//$b berisikan Hallo Selamat datang di PHP
?>

Kedudukan Operator
Setiap operator mempunyai kedudukan (operator precedence) dan
prioritas masing-masing yang digunakan untuk menentukan operator
manakah yang akan dieksekusi terlebih dahulu bila dalam sebuah
pernyataan terdapat dua atau lebih operator. Contoh, misalnya ada
persamaan matematika x=2+5*7. Maka nilai x adalah 37 bukan 49. Hal
ini karena kedudukan operator perkalian lebih tinggi dari pada operator
penjumlahan sehingga 5 harus dikalikan terlebih dahulu dengan 7, baru
dijumlah dengan 2; bukan 2 ditambah 5 baru dikali 7. Kedudukan
operator-operator tersebut seperti terlihat pada tabel berikut:
Edit By SMK Taruna Bhakti /WP/2010

66

Prioritas
Tertinggi

Operator
(), {}
~, !, ++, --, $, &
*, ?, %
+, <>, <=, >=
==, ===, !=, !==
&
^
!
&&
||
=, +=, -=, *=, /=, &=, |=, ^=, .=
AND (&&)
XOR (||)

Terendah

OR

10. Dasar-dasar Struktur Program Input-Output

Struktur yang paling dasar dalam sebuah pemrograman adalah struktur inputoutput. Input merupakan interface untuk memasukkan data, kemudian data
di olah dan selanjutnya hasil pengolahan ditampilkan pada komponen output.
Input

Proses

Output

Input-Output Sederhana
Sebagai contoh, kita akan membuat program sederhana untuk menghitung
luas segitiga berdasarkan flowchart berikut:
Mulai

Input Alas
Input Tinggi
Output
Cetak Luas

Proses Hitung Luas Segitiga

Luas=0,5 * Alas * Tinggi

Selesai

Edit By SMK Taruna Bhakti /WP/2010

67

contoh2_3.php
<html>
<head>
<title>.:: Latihan membuat input Output::.</title>
</head>
<body>
<font face=verdana size=2>
<?
//Mendeklarasikan data input
$alas=20;
$tinggi=5;
//Proses hitung luas segitiga
$luassegitiga=0.5*$alas*
$tinggi;
//Cetak hasil
echo "Besar Alas = $alas <br>";
echo "Besar Tinggi = $tinggi
<br>";
echo "Luas Segi Tiga Adalah = $luassegitiga<br>";
?>
</body>
</html>

Jika program tersebut dijalankan maka akan didapatkan hasil seperti pada
gambar diatas.

Input-Output dengan Form

Dengan memanfaatkan form yang terdapat dalam HTML, kita dapat membuat
program yang lebih interaktif. Sebagai contoh, program di contoh 2.3 akan
modifikasi sehingga lebih interaktif.
contoh2_4.php
<html>
<head>
<title>.:: Menghitung Luas Segi Tiga::.</title>
</head>
<body>
<font face=verdana>
<center><h3><u>Menghitung Luas Segitiga</u></h3></center>
<form action=luassegitiga.php method=post>
<table align=center bgcolor=#cedadc bordercolor=#cfdbdd cellspacing=5>
<tr>
<td>Masukkan Alas</td>
<td>:</td>
<td><input type=text name=alassegitiga size=10></td>
</tr>
<tr>
<td>Masukkan Tinggi</td>
<td>:</td>
<td><input type=text name=tinggi size=10></td>
</tr>
<tr>

Edit By SMK Taruna Bhakti /WP/2010

68

<td colspan=3 align=center><input type=submit value=hitung></td>

</tr>
</table>
</form>
</body>
</html>

Ketika tombol HITUNG diklik, program memanggil file luassegitiga.php

(perhatikan pada tag <form action=luassegitiga.php method=post>) yang akan
digunakan untuk menampung hasil perhitungan. Maka buat lagi file dan beri
nama luassegitiga.php dan simpan dalam satu direktori.
File luassegitiga.php
<html>
<head>
<title>.:: Hasil Perhitungan Luas Segi Tiga::.</title>
</head>
<body>
<font face=verdana>
<center>
<h3><u>Luas Segitiga</u></h3>
</center>
<form action=contoh2_4.php method=post>
<?
$luas=0.5*$alas*$tinggi;
echo "<table align=center bgcolor=#cedadc bordercolor=#cfdbdd cellpadding=0>";
echo "<tr>";
echo "<td>Alas</td>";
echo "<td>:</td>";
echo "<td>$alas</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Tinggi</td>";
echo "<td>:</td>";
echo "<td>$tinggi</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Luas Segi Tiga</td>";
echo "<td>:</td>";
echo "<td>$luas</td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan=3 align=center><input type=submit value=ulang></td>";
echo "</tr>";
echo "</table>";
?>
</form>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

69

Hasilnya adalah:

dan tampilan setelah tombol hitung di-klik adalah:

11. Struktur Kontrol/Kendali

Statement IF
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara
bersyarat atau sesuai dengan kondisi tertentu. Statement IF dibagi dua,

statement IF tunggal dan statement IF majemuk. Cara penulisan statement

IF tunggal adalah sebagai berikut:
if (kondisi)
{
statement;
}

Edit By SMK Taruna Bhakti /WP/2010

70

Contoh:

Mulai

Input Nilai

Apakah nilai >

70

Y
Kompeten

Selesai

contoh2_5.php
<html>
<head>
<title>.:: Contoh Seleksi Kondisi::.</title>
</head>
<body>
<font face=verdana size=2>
<form action=nilai.php
method=post>Masukkan Nilai:
<input type=text name=nilai
size=2><p>
<input type=submit value=Proses>
</form>
</body>
</html>

Untuk memproses file diatas,

buat script berikut dan simpan dengan nama nilai.php
File nilai.php
<html>
<head>
<title>.:: Contoh Seleksi Kondisi::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "Nilai Ujian anda: $nilai<br>";
if ($nilai>70)
{
echo "Anda Kompeten<br>";
}
?>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

71

Untuk statement IF majemuk atau dikenal dengan IF ... ELSE, digunakan jika
terdapat lebih dari satu kondisi yang akan dikerjakan. Sintaks struktur IF ...
Else adalah sebagai berikut:
if (syarat)
{
statement
}
else
{
statement lain
}

atau:
if (syarat pertama)
{
statement pertama
}
elseif (syarat kedua)
{
statement kedua
}
else
{
statement lain
}

Mulai

Input Nilai

Apakah nilai < 50

Y
Tidak Lulus

Apakah nilai < 70

Y
Lulus dan Tidak
Kompeten

Lulus dan
Kompeten

Selesai

Edit By SMK Taruna Bhakti /WP/2010

72

Sebagai contoh, kita modifikasi file nilai.php pada contoh 2_5 dan simpan
dengan nama nilai2.php
contoh2_6.php
<html>
<head>
<title>.:: Contoh Seleksi Kondisi::.</title>
</head>
<body>
<font face=verdana size=2>
<form action=nilai2.php
method=post>
Masukkan Nilai:
<input type=text name=nilai
size=2><p>
<input type=submit
value=Proses>
</form>
</body>
</html>

File nilai2.php:
<html>
<head>
<title>.:: Contoh Seleksi Kondisi::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "Nilai Ujian anda: $nilai<br>";
if ($nilai<50)
{
echo "Anda Tidak Lulus<br>";
}
elseif ($nilai<70)
{
echo "Anda Lulus Tapi Tidak Kompeten<br>";
}
else
{
echo "Selamat Anda Lulus dan
Kompeten";
}
?>
</body>
</html>

Hasilnya adalah seperti gambar di atas:

Edit By SMK Taruna Bhakti /WP/2010

73

Statement SWITCH
Statement SWITCH digunakan untuk membandingkan suatu variable dengan
beberapa nilai serta menjalankan statement tertentu jika nilai variable sama
dengan nilai yang dibandingkan. Penggunaan statement SWITCH hampir
sama dengan penggunaan statement IF, sehingga bisa digunakan sebagai
pengganti statement IF.
Untuk Keluar dari suatu blok statement dalam statement switch, dapat
mengunakan perintah BREAK
Struktur Switch adalah sebagai berikut:
switch (variable)
case nilai:
statement
case nilai:
statemant
case nilai:
statement

contoh2_7.php
<html>
<head>
<title>.:: Struktur Kendali Switch::.</title>
</head>
<body>
<font face=verdana size=2>
<?
$dino=date("l");
switch($dino)
{
case "Monday":
$hari="Senin";break;
case "Tuesday":
$hari="Selasa";
break;
case "Wednesday":
$hari="Rabu";
break;
case "Thursday":
$hari="Kamis";
break;
case "Friday":
$hari="Jumat";
break;
case "Saturday":
$hari="Sabtu";
break;
default:
$hari="Minggu";
}
echo "<h3>Hari ini adalah hari <u>$hari</u></h3>";
?>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

74

Latihan-latihan
1. Membuat program penghitung discount
Program ini digunakan untuk mengetahui apakah pembeli dapat diskon
atau tidak. Besar diskon tersebut mengikuti aturan sebagai berikut: Jika
jumlah bayar 50.000 dapat diskon 5%, jika jumlah bayar 100.000
dapat diskon 10%, dan jika jumlah bayar 500.000 dapat diskon 50%.
Selain kreteria tersebut, diskonnya adalah 0%.
Untuk mengerjakan program tersebut, perhatikan flowchart berikut:
Mulai

Masukkan
Jumlah Bayar

JumlahBayar
500000

Y
Diskon=0.5*
JumlahBayar

JumlahBayar
100000

Y
Diskon=0.1*
JumlahBayar

JumlahBayar
50000

Y
Diskon=0.05*
JumlahBayar

Diskon=0

TotalBayar=
JumlahBayar-Diskon

Selesai

Dari flowchart tersebut dapat kita buat script programnya, sebagai berikut:
contoh2_8.php
<html>
<head>
<title>.:: Program Menghitung Discount::.</title>
</head>
<body>
<font face=verdana size=2>
<form>Jumlah Bayar

Edit By SMK Taruna Bhakti /WP/2010

75

<input type=text name=totalbeli><br><br>

<input type=submit value="Hitung Diskon">
</form>
<?php
if (isset($totalbeli))
{
$toyar=intval($totalbeli);
$diskon=0;
if ($toyar>=500000)
$diskon=(0.5*$toyar);
else
if ($toyar>=100000)
$diskon=(0.1*$toyar);
else
if ($toyar>=50000)
$diskon=(0.05*$toyar);
else
print("Maaf Tidak Ada Diskon <br>\n");
printf("Jumlah Bayar = %d<br>\n",$toyar);
printf("Diskon = %d<br>\n",$diskon);
$totalbayar=$toyar-$diskon;
printf("<b>Total Bayar = %d<br></b>\n",$totalbayar);
}
?>
</body>
</html>

2. Membuat Program kalkulator sederhana

Program yang akan buat ini adalah program untuk melakukan beberapa
operasi aritmatika, yaitu penjumlahan, pengurangan, perkalian dan
pembagian. Setiap operasi yang dilakukan, program akan meminta
masukan nilai dua operand yang akan dihitung dalam hal ini adalah A dan
B. Program juga akan meminta masukan dari pemakai untuk memilih
operasi apa yang akan dilakukan.

Edit By SMK Taruna Bhakti /WP/2010

76

Perhatikan flowchart berikut:

Mulai

Masukkan
Nilai A dan B

Silahkan Pilih
Operasi Apa?

Pilihan=
Jumlah

Y
C=A+B

Pilihan=
Kurang

Y
C=A-B

Pilihan=
Kali

Y
C=A*B

C=A/B

Hasil Adalah = C

Selesai

Dari flowchart tersebut, dapat kita buat programmnya sebagai berikut:

contoh2_9.php
<html>
<head>
<title>::: Operasi Aritmatika:::</title>
</head>
<body>
<form action=operasi.php method=post>
<center><h3>Operasi Aritmatik A dan B</h3></center>
<table align=center bgcolor=#cedadc bordercolor=#cfdbdd>
<tr>
<td>Masukkan Nilai A </td>
<td><input type=text name=a size=10></td>
</tr>

Edit By SMK Taruna Bhakti /WP/2010

77

<tr>
<td>Masukkan Nilai B </td>
<td><input type=text name=b size=10></td>
</tr>
<tr>
<td>Operasi</td>
<td>
<select name=operasi>
<option value=1>Penjumlahan [a+b]</option>
<option
value=2>Pengurangan [a-b]</option>
<option value=3>
Perkalian [a*b]</option>
<option value=4>
Pembagian
[a/b]</option>
</select>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit value=hitung></td>
</tr>
</table>
</form>
</body>
</html>

Sekarang buat satu lagi program yang digunakan untuk memproses hasil
setelah ada penekenan tombol hitung. File tersebut simpan dengan nama
operasi.php.
File operasi.php
<html>
<head>
<title>Hasil Operasi Aritmatika</title>
</head>
<body>
<?
if ($operasi==1)
{
$c=$a+$b;
$oper='[a + b]';
}
elseif ($operasi==2)
{
$c=$a-$b;
$oper='[a - b]';
}
elseif ($operasi==3)
{
$c=$a*$b;
$oper='[a * b]';
}

Edit By SMK Taruna Bhakti /WP/2010

78

else
{
$c=$a/$b;
$oper='[a / b]';
}
echo "Nilai A adalah = $a dan Nilai B adalah = $b<br>";
echo "Hasil Operasi $oper adalah = $c<br>";
?>
</body>
</html>

Statement WHILE
Pernyataan ini digunakan untuk mengulangi sebuah perintah sampai jumlah
atau kondisi tertentu terpenuhi. Bentuk dasar dari statement While adalah
sebagai berikut:
while (syarat)
{
statement
}

Arti dari statemant While adalah memberikan perintah untuk menjalankan

statement dibawahnya secara berulang-ulang, selama syaratnya terpenuhi.
Perhatikan contoh2_10. Pada contoh tersebut, program digunakan untuk
mencari bilangan genap dari 2 sampai dengan batas tertentu sesuai dengan
masukan yang diberikan.

Mulai

Masukkan
Batasnya?

$genap=0;

$genap < $batas

Y
Selesai
$genap=$genap+2

Bilanga genap dari 2 s/d batas

adalah:$genap

Edit By SMK Taruna Bhakti /WP/2010

79

contoh2_10.php
<html>
<head>
<title>.:: Program Mencari Bilangan Genap::.</title>
</head>
<body>
<font face=verdana size=2>
<form>Mencari Bilangan Genap Berapa:
<input type=text name=genap><br><br>
<input type=submit value="Cari Bilangan Genap">
</form>
<?php
if (isset($genap))
{
$bilgen=intval($genap);
echo "Bilangan Genap dari 2 s/d $bilgen adalah: ";
echo "<br>";
$gen=0;
while ($gen<$genap)
{
$gen=$gen+2;
echo "$gen";
echo " ";
}
}
?>
</body>
</html>

Statement FOR
Perintah

ini

digunakan

untuk

mengulangi

perintah

dengan

jumlah

pengulangan yang sudah diketahui. Pada statement ini perlu dituliskan nilai
awal dan nilai akhir varibel penghitung yang secara otomatis akan bertambah
atau berkurang setiap kali sebuah pengulangan dilaksanakan.
Cara penulisan statement FOR adalah sebagai berikut:
for (Nilai_Awal; Nilai_Akhir; Counter)

Keterangan:
Nilai_Awal : Batas awal perulangan
Nilai_Akhir : Batas akhir perulangan
Counter

: Jumlah kenaikan yang akan ditambakan kepada batas awal

hingga mencapai batas akhir

Edit By SMK Taruna Bhakti /WP/2010

80

contoh2_11.php
<html>
<head>
<title>Latihan Perulangan dengan For</title>
</head>
<body>
Tanggal:
<select name=tanggal>
<option value=0 selected>Tanggal
<?php
//Bentuk Pilihan tanggal 1 sampai dengan 31
for ($i=1;$i<32;$i++)
echo "<option value=$i>$i";
?>
</option>
</select>
</body>
</html>
Hasilnya adalah:

Didalam struktur perulangan, terdapat beberapa pernyataan yang digunakan

untuk merubah jalannya eksekusi terhadap proses looping yang dilakukan.
Pernyataan-pernyataan tersebut adalah:
break, pernyataan ini digunakan untuk keluar dari suatu perulangan.
Sintaknya adalah:
break(n)

Dengan n adalah parameter opsional yang nilainya digunakan jika

terdapat nested loop. Pernyataan break akan mengikuti urutan tingkatan
dimulai dari tingkat paling dalam menuju tingkat terluar.
Continue, pernyataan ini digunakan untuk melewati proses iterasi dan
melanjutkan dengan iterasi berikutnya.
Edit By SMK Taruna Bhakti /WP/2010

81

 Exit, pernyataan ini digunakan untuk mengakhiri seluruh proses eksekusi

yang sedang berjalan.
12. Procedure dan Fungsi
Dalam pembuatan program sering kali dibutuhkan beberapa perintah yang
digunakan berulang kali. Hal ini dapat dihindari dengan subrutin. Subrutin
adalah sekumpulan perintah yang diberi nama dan dapat dipanggil sewaktuwaktu. Dalam pemrograman terdapat dua subrutin, yaitu prosedur dan
fungsi. Standar penulisan fungsi adalah:
function nama_fungsi(argumen)
{
kode perintah

}
contoh:
function operasi_jumlah($x,$y)
{
z=x+y;
echo (z);
}

Beberapa hal yang perlu diperhatikan dalam pembuatan fungsi, yaitu:

Nama fungsi tidak boleh sama dengan nama-nama fungsi yang sudah ada
dalam PHP.
Hanya boleh terdiri dari huruf, angka dan garis bawah
Tidak boleh diawali dengan angka
contoh2_12.php
<html>
<head>
<title>.:: Latihan Membuat Fungsi::.</title>
</head>
<body>
<font face=tahoma size=2>
<?
//Fungsi yg dipanggil
function operasi_jumlah($a,$b)
{
$c=$a+$b;
echo ("Hasil $a + $b = $c");
}
//Program Utama
//Untuk Memanggil Fungsi
operasi_jumlah(6,3);
?>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

82

12.b. REQUIRE
Function Require digunakan untuk membaca nilai variable dan fungsi-fungsi
dari sebuah file lain.
Cara penulisan function Require adalah:
require(namafile);

Function Require ini tidak dapat dimasukkan diadalam suatu struktur looping
misalnya while atau for. Karena hanya memperbolehkan pemangggilan file
yang sama tersebut hanya sekali saja.
contoh2_13.php
<?php
$a=Saya sedang belajar PHP;
function tulistebal($teks)
{
echo(<b>$teks</b>);
}
?>

contoh2_14.php
<?php
require(contoh2_13.php);
tulistebal(Ini adalah tulisan tebal);
echo(<br>);
echo($a);
?>

12.b. INCLUDE
Function Include akan menyertakan isi suatu file tertentu. Include dapat
diletakkan didalam suatu looping misalkan dalam statement for atau while.
contoh2_15.php
<?
echo("--------------------------------------<br>");
echo("PHP adalah bahasa scripting<br>");
echo("--------------------------------------<br>");
echo("<br>");
?>

contoh2_16.php
<?php
for ($b=1; $b<5; $b++)
{
include("contoh2_15.php");
}
?>

Hasilnya adalah:

Edit By SMK Taruna Bhakti /WP/2010

83

12.c. Fungsi String

Fungsi string digunakan memanipulasi/mengolah data string untuk berbagai
macam kebutuhan. Disini akan dibahas beberapa fungsi string yang sering
digunakan dalam membuat program aplikasi web. Fungsi-fungsi tersebut
adalah:
AddSlashes
Digunakan untuk menambahkan karakter backslash ( \ ) pada suatu string.
Hal ini penting digunakan pada query string untuk database, misalkan pada
MySQL. Beberapa karakter yang akan ditambahkan tanda backslash adalah
karakter tanda petik satu ( ), karakter petik dua ( ), backslash ( \ ) dan
karakter NULL.
Sintaks:
addslashes(string)

StripSlashes
Digunakan untuk menghilangkan karakter backslash ( \ ) pada suatu string.
Sintaks:
string stripslashes(string)

Edit By SMK Taruna Bhakti /WP/2010

84

Crypt
Digunakan untuk meng-encrypt dengan metode DES suatu string. Fungsi ini
sering digunakan untuk mengacak string password sebelum disimpan dalam
database. Dalam penggunaan fungsi crypt ini dapat ditambahkan parameter
string salt. Parameter salt ini ditambahkan untuk menentukan basis
pengacakan. Salt string terdiri atas 2 karakter. Jika salt string tidak
ditambahkan pada fungsi crypt maka PHP akan menentukan sendiri salt
string tersebut secara acak.
Sintaks:
crypt(string [ , salt ] )

Echo dan Print

Digunakan untuk mencetak/menampilkan isi suatu string/teks atau argumen
ke browser.
Sintaks:
echo( string argumen1, string argumen2 , .)
print( string argumen1, string argumen2 , .)

Explode
Digunakan untuk memecah-mecah suatu string berdasarkan tanda pemisah
tertentu dan memasukkan hasilnya kedalam suatu variable array.
Sintaks:
explode(string pemisah , string [, int limit] )

Contoh:
$namahari = minggu senin selasa rabu kamis jumat sabtu;
$hari = explode( , $namahari);

Implode
Kegunaan fungsi ini adalah kebalikan daripada fungsi explode. Fungsi implode
digunakan untuk menghasilkan suatu string dari masing-masing elemen suatu
array. String yang dihasilkan tersebut dipisahkan oleh suatu string telah yang
ditentukan sebelumnya.
Sintaks:
implode(string pemisah , array)

Printf dan Sprint

Digunakan untuk menampilkan output ke browser dengan format tertentu.
Sintaksnya adalah sebagai berikut:
Printf(format[,argumen])
Sprint(format[,argumen])

Edit By SMK Taruna Bhakti /WP/2010

85

Parameter format selalu ditandai dengan karakter persen (%), kemudian

diikuti oleh karakter tertentu yang memberikan spesifikasi untuk memberikan
hasil dengan format tertentu. Karakter pemberi spesifikasi tersebut adalah:
Karakter

Keterangan

Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka

biner

Argumen diperlakukan sebagai integer dan ditampilkan sebagai karakter

dengan nilai ASCII-nya

Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka

desimal

Argumen diperlakukan sebagai double dan ditampilkan sebagai angka

floating point

Argumen diperlakukan sebagai integer dan ditampilkan sebagai bilangan

oktal

Argumen diperlakukan dan ditampilkan sebagai string

Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka

heksadesimal (dengan huruf kecil)

Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka

heksadesimal (dengan huruf besar)

contoh2_17.php
<html>
<head>
<title>.:: Latihan Format String::.</title>
</head>
<body>
<font face=verdana size=2>
<?
$angka1=78.79;
$angka2=23.31;
$angka=$angka1+$angka2;
echo ($angka);
echo ("<br>");
$format=printf("%01.2f",
$angka);
echo("$format<br>");
$year=1972;
$month=11;
$day=9;
$tanggal=sprintf("%02d%02d-%04d",$day,$month,
$year);
echo ($tanggal);
?>
</body>
</html>

Angka didepan karakter % menunjukkan jumlah digit atau jumlah karakter

yang akan ditampilkan. Jika ada titik, menunjukkan jumlah angka dibelakang

Edit By SMK Taruna Bhakti /WP/2010

86

koma. Misalnya, %01.2f menunjukkan bahwa bilangan tersebut ditampilkan

sebagai floating point dan harus ada dua angka dibelakang koma yang
ditampilkan. %02d menunjukkan bahwa bilangan tersebut ditampilkan
sebagai integer dan harus ada dua angka yang ditampilkan. Jadi jika terdapat
angka 8, maka akan diubah menjadi 08.
StripTags
Digunakan untuk menghilangkan kode-kode tag HTML pada suatu string.
Sintaks:
striptags(string [, string tags yang tidak dihilangkan] )

StrLen
Digunakan untuk menghitung jumlah karakter suatu string.
Sintaks:
strlen(string)

StrPos
Digunakan untuk mencari posisi suatu sub string pada suatu string. Fungsi ini
biasanya digunakan untuk mencari suatu sub string didalam suatu string.
Sintaks:
strlen(string , sub string)

Str_Repeat
Digunakan untuk mengulang isi suatu string.
Sintaks:
str_repeat(string , int jumlah perulangan)

Str_Replace
Digunakan untuk mengganti suatu string dengan string yang lain.
Sintaks:
Str_replace(tercari,pencari,subyek)

StrRev
Digunakan untuk membalik urutan suatu string.
Sintaks:
strrev(string)

StrStr, StriStr dan StrChr

Digunakan untuk mencari keberadaan suatu string di dalam string lain.
Sintaks:
strstr(tercari,pencari)
stristr(tercari,pencari)
strchr(tercari,pencari)

Edit By SMK Taruna Bhakti /WP/2010

87

StrToLower
Digunakan untuk merubah suatu string menjadi huruf kecil ( lowercase).
Sintaks:
strtolower(string)

StrToUpper
Digunakan untuk merubah suatu string menjadi huruf besar (uppercase)
Sintaks:
strtoupper(string)

SubStr
Digunakan untuk mengambil suatu sub string dengan panjang tertentu dari
suatu string pada posisi tertentu pula.
Sintaks:
substr(string, int posisi , int posisi)

Contoh:
substr(abcdefg,0,3); // mengasilkan string abc
substr(abcdefg,3,2); // menghasilkan string de

SubStr_Count
Digunakan untuk menghitung jumlah sub string dalam suatu string
Sintaks:
substr_count( string , string substring)

Contoh:
substr_count(This is a test,is); // menghasilkan nilai 2

UCFirst
Digunakan untuk mengganti karakter pertama pada suatu string menjadi
huruf besar.
Sintaks:
ucfirst(string)

UCWords
Digunakan untuk mengganti karakter pertama pada setiap kata dalam suatu
string menjadi huruf besar.
Sintaks:
ucwords(string)

Edit By SMK Taruna Bhakti /WP/2010

88

12.d. Fungsi Matematika

Yaitu fungsi-fungsi yang digunakan untuk memanipulasi bilangan-bilangan
dalam operasi matematis.
Fungsi Trigonometri
Fungsi trigonometri adalah fungsi-fungsi yang berhubungan dengan ilmu
trigonometri, yaitu antara lain:

sin(sudut), mencari nilai sinus sebuah sudut

cos(sudut), mencari nilai cosinus sebuah sudut
tan(sudut), mencari nilai tangen sebuah sudut
asin(sudut), mencari nilai arcus sinus sebuah sudut
acos(sudut), mencari nilai arcus cosinus sebuah sudut
atan(sudut), mencari nilai arcus tangen sebuah sudut
deg2rad(a), merubah besaran derajat menjadi radian
rad2deg(a), merubah besaran radian menjadi derajat

Semua besar sudut yang dicari harus dalam bentuk radian.

contoh2_18.php
<html>
<head>
<title>.:: Fungsi-fungsi Trigonometri::.</title>
</head>
<body>
<h3><u>Fungsi-fungsi Trigonometri</u></h3><p>
<font face=verdana size=2>
<form>Masukkan sudut yg dicari:
<input type=text name=sdt><br><br>
<input type=submit value="Hitung">
</form>
<?php
if (isset($sdt))
{
$sudut=intval($sdt);
$sudrad=deg2rad($sudut);
$sin=sin($sudrad);
$cos=cos($sudrad);
$tan=tan($sudrad);
$arcsin=asin($sudrad);
$arccos=acos($sudrad);
$arctan=atan($sudrad);
echo "Sudut $sudut sama
dengan $sudrad radian<br>";
printf("sin($sudut) =
%01.4f<br>",$sin);
printf("cos($sudut) =
%01.4f<br>",$cos);
printf("tan($sudut) =
%01.4f<br>",$tan);
printf("arc sin($sudut) = %01.4f<br>",$arcsin);
printf("arc cos($sudut) = %01.4f<br>",$arccos);
printf("arc tan($sudut) = %01.4f<br>",$arctan);
}
?>
</body></html>

Edit By SMK Taruna Bhakti /WP/2010

89

Fungsi Pangkat dan Algoritma

Fungsi-fungsi yang digunakan untuk perhitungan pangkat dan logaritma.

pow($x,$y), mencari hasil dari $x$y.

exp($x), mencari nilai e$x
log($x), mencari nilai dari logaritma $x
sqrt($x), mencari akar kuadrat $x.

Fungsi Base n
Fungsi yang digunakan untuk konversi suatu bilangan ke bilangan berbasis n.

base_convert(x,y,z), mengubah bilangan x dari basis y menjadi basis z.

decbin(x), mengubah bilangan desimal ke bilangan biner
dechex(x), mengubah bilangan desimal ke bilangan heksadesimal
decoct(x), mengubah bilangan desimal ke bilangan oktal
bindec(x), mengubah bilangan biner ke bilangan desimal
hexdec(x), mengubah bilangan heksadesimal ke bilangan desimal
octdec(x), mengubah bilangan oktal ke bilangan desimal

contoh2_19.php
<html>
<head>
<title>.:: Fungsi-fungsi Trigonometri::.</title>
</head>
<body>
<h3><u>Konversi Bilangan
</u></h3><p>
<font face=verdana size=2>
<form>
Masukkan bilangan yg dicari:
<input type=text name=bil>
<br><br>
<input type=submit
value="Convert">
</form>
<?php
if (isset($bil))
{
$bilangan=intval($bil);
$baseconvert=base_convert($bilangan,10,3);
$desbin=decbin($bilangan);
$deshex=dechex($bilangan);
$desoct=decoct($bilangan);
printf("Desimal $bilangan dalam basis 3 adalah = $baseconvert<br>");
printf("Desimal $bilangan dalam basis 2 adalah = $desbin<br>");
printf("Desimal $bilangan dalam basis 16 adalah = $deshex<br>");
printf("Desimal $bilangan dalam basis 8 adalah = $desoct<br>");
}
?>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

90

Fungsi Matematika Lainnya

Fungsi-fungsi matematika yang juga dikenal PHP, yaitu:

abs(x), nilai absolut dari x

ceil(x), untuk membulatkan pecahan x ke atas
floor(x), untuk membulatkan pecahan x ke bawah
round(x,y), untuk membulatkan pecahan x sampai y angka dibelakang koma
pi(), sama dengan atau 22/7 atau kira-kira 3,14
number_format(x,y,k,r), menuliskan bilangan x dengan format y angka dibelakang koma,
dengan k adalah koma dan r adalah pemisah ribuan

12.e. Fungsi Date dan Time

Fungsi date()
Digunakan untuk mengambil tanggal dan jam sekarang. Hasil dari fungsi ini
adalah sebuah string yang berisi tanggal/jam sesuai dengan format yang
diinginkan.
Sintaks:
date(string format)

Format yang dikenal dalam fungsi date ini adalah sebagai berikut:
Karakter

Keterangan

am / pm

AM / PM

Swatch Internet time

day of the month, 2 digits with leading zeros; i.e. "01" to "31"

day of the week, textual, 3 letters; i.e. "Fri", Sun

month, textual, long; i.e. "January",November

hour, 12-hour format without leading zeros; i.e. "1" to "12"

hour, 24-hour format without leading zeros; i.e. "0" to "23"

hour, 12-hour format; i.e. "01" to "12"

hour, 24-hour format; i.e. "00" to "23"

minutes; i.e. "00" to "59"

I (capital i)
j
l (lowercase L)

"1" if Daylight Savings Time, "0" otherwise.

day of the month without leading zeros; i.e. "1" to "31"
day of the week, textual, long; i.e. "Friday"

boolean for whether it is a leap year; i.e. "0" or "1"

month; i.e. "01" to "12"

month, textual, 3 letters; i.e. "Jan", Mar

month without leading zeros; i.e. "1" to "12"

seconds; i.e. "00" to "59"

English ordinal suffix, textual, 2 characters; i.e. "th", "nd"

number of days in the given month; i.e. "28" to "31"

Timezone setting of this machine; i.e. "MDT"

seconds since the epoch

day of the week, numeric, i.e. "0" (Sunday) to "6" (Saturday)

year, 4 digits; i.e. "1999"

year, 2 digits; i.e. "99"

day of the year; i.e. "0" to "365"

timezone offset in seconds (i.e. "-43200" to "43200")

Edit By SMK Taruna Bhakti /WP/2010

91

Fungsi checkdate()
Digunakan untuk memeriksa apakah format penulisan tanggal sudah benar.
Sintaksnya adalah:
checkdate($bulan,$hari,$tahun)

contoh2_20.php
<html>
<head>
<title>.:: Fungsi Time dan Date::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "Sekarang....<br>";
echo "Hari: ",date(l),"<br>";
echo "Tanggal: ",date('d F Y'),"<br>";
echo "Jam: ",date('h:i:s A');
echo "<hr>";
$hari=30;
$bulan=2;
$tahun=2005;
$validasi=checkdate($bulan,$hari,$tahun);
echo "Tanggal yang dipilih: $hari - $bulan - $tahun <br>";
echo "Penulisan tanggal <b><U>";
if ($validasi)
{
echo "benar";
} else
{
echo "salah";
}
echo "</b></u><br>";
echo "Silahkan dibetulkan kembali";
?>
</body>
</html>

Fungsi getdate()
Digunakan untuk menghasilkan waktu dengan keluaran bertipe array.
Sintaksnya adalah:
checkdate($bulan,$hari,$tahun)

Karakter
hours
mday
minutes
mon
month
seconds
wday
weekday
yday
year

Edit By SMK Taruna Bhakti /WP/2010

Keterangan
Jam
Hari
Menit
Bulan dalam digit
Bulan
Detik
Hari dalam digit
Hari
Hari ke- dari tahun
Tahun

92

contoh2_21.php
<html>
<head>
<title>.:: Fungsi getdate::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "Sekarang Jam: ",date('h:i:s A');
echo "<hr>";
$jam=getdate();
echo "Selamat <b><u>";
if($jam[hours]<=9)
echo "Pagi";
else
if($jam[hours]<=14)
echo "Siang";
else
if($jam[hours]<=19)
echo "Sore";
else
echo "Malam";
echo "</b></u> Mr. Jack";
?>
</body>
</html>

12.f. Fungsi Variable

Fungsi variable digunakan untuk mengecek keberadaan variable. Fungsifungsi yang termasuk fungsi variable adalah:
Fungsi Variable
doubleval($var)
empty($var)
isset($var)
intval($var)
gettype($var)
Is_array($var)
is_bool($var)
Is_double($var)
is_float($var)
is_int($var)
Is_integer($var)
is_long($var)
is_numeric($var)
Is_object($var)
is_real($var)
is_resource($var)
Is_string($var)
settype($var)
strval($var)
unset($var)

Edit By SMK Taruna Bhakti /WP/2010

Keterangan
Mengubah variabel $var menjadi double
Memeriksa apakah variabel $var belum punya nilai
Memeriksa apakah variabel $var sudah didefinisikan
Merubah variabel $var menjadi integer
Memeriksa type variabel $var
Memeriksa apakah $var berupa array
Memeriksa apakah $var bertipe boolean
Memeriksa apakah $var bertipe double
Memeriksa apakah $var bertipe float
Memeriksa apakah $var bertipe short integer
Memeriksa apakah $var bertipe integer
Memeriksa apakah $var bertipe long integer
Memeriksa apakah $var bertipe numerik
Memeriksa apakah $var berupa objek
Memeriksa apakah $var bertipe real
Memeriksa apakah $var berupa resource
Memeriksa apakah $var bertipe string
Menentukan tipe variabel $var
Mengambil nilai string dari $var
Menghapus variabel $var

93

12.g. Fungsi Mail

Digunakan untuk mengirimkan e-mail ke alamat e-mail tertentu.
Sintaks:
mail($penerima,$subject,$isi_email[,$header]);

Contoh:
$pengirim = From: [email protected];
$tujuan = [email protected];
$subject = Pemberitahuan;
$isi = Ini adalah percobaan pengiriman e-mail dengan menggunakan PHP;
mail($to,$subject,$isi,$pengirim);

13. Mengolah File/data Teks

13.a. Membuka File
Untuk membuka file teks, perintah yang digunakan adalah fopen().
Sedangkan untuk menutup file adalah fclose(). Perhatikan contoh berikut:
contoh2_22.php
<html>
<head>
<title>.:: Mengelola Fungsi File::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "<b><u>Menampilkan isi file datasiswa.dat</b></u><br><br>";
if ($file=fopen("datasiswa.dat","r"))
{
while (!feof($file))
{
$string=fgets($file,255);
echo($string);
}
fclose($file);
}
else
{
echo "File gagal dibuka";
}
?>
</body>
</html>

Sebelum

script

diatas

dijalankan,

terlebih

dahulu

harus

dibuat

file

datasiswa.dat. Jika tidak dibuat dan script tetap dijalankan, maka akan keluar
pesan warning seperti dalam gambar diatas. Untuk itu, silahkan buat file
datasiswa.dat. dengan NotePad dan isi seperti dalam gambar berikut:

Edit By SMK Taruna Bhakti /WP/2010

94

Setelah file tersebut disimpan, kembali jalankan file contoh2_22.php.

Sehingga akan didapatkan hasil seperti gambar berikut ini:

13.b. Memasukkan Data

Untuk memasukkan data pada file teks menggunakan perintah:
fputs($tahu,toge)

Perhatikan contoh berikut.

contoh2_23.php
<html>
<head>
<title>.:: Mengelola File::.</title>
</head>
<body>
<h3><u>Mengelola File Teks</u></h3><p>
<font face=verdana size=2>
<form>
Masukkan Nama Siswa:
<input type=text name=isi><br><br>
<input type=submit value="proses">
</form>
<?

Edit By SMK Taruna Bhakti /WP/2010

95

//validasi isi
if (isset($isi))
if (empty($isi))
echo "Data harus terisi";
else
{
if($berkas=fopen("datasiswa.dat","r"))
{
//Memasukkan Data
$berkas=fopen("datasiswa.dat","a+");
fputs($berkas,$isi);
fputs($berkas,"<br>");
fclose($berkas);
//menampilkan
$berkas=fopen("datasiswa.dat","r");
while(!feof($berkas))
{
$teks=fgets($berkas,255);
echo ($teks);
}
fclose($berkas);
}
else
{
echo("File gagal dibuka");
}
}
?>
</body>
</html>

Setelah dijalankan, maka hasilnya akan seperti gambar berikut:

Isikan data pada form input, kemudian klik tombol proses, maka akan
muncul gambar sebagai berikut:

Edit By SMK Taruna Bhakti /WP/2010

96

14. DASAR-DASAR MYSQL

Dalam bahasa SQL pada umumnya informasi tersimpan dalam tabel-tabel
yang secara logik merupakan struktur dua dimensi terdiri dari baris ( row atau

record) dan kolom (column atau field). Sedangkan dalam sebuah database
dapat terdiri dari beberapa table. MySQL adalah database jenis RDBMS
(Relational Database Management System ). Jadi dalam MySQL tetap
menggunakan Table, Baris dan Kolom. Sebuah Database dalam MySQL
mengandung beberapa table dan satu table dalam database terdiri dari
sejumlah baris dan kolom.
14.a. Tipe Data

Tipe Data Numerik

Tipe data numerik dibedakan menjadi dua, tipe data integer dan tipe data
floating point. Tipe data integer untuk bilangan bulat sedangkan tipe data
floating point digunakan untuk bilangan desimal. Tipe data numerik seperti
dalam table di bawah ini:
Tipe Data

Kisaran Nilai

Tinyint

(-128) 127 atau 0-225

Smallint

(-32768) 32767 atau 0 65535

Mediumint

(-8388608)-8388607 atau 0-16777215

Int

(-2147683648)-(2147683647) atau 0-4294967295

Bigint

(-9223372036854775808)-(9223372036854775807) atau
0 18446744073709551615

Float(x)

(-3.402823466E+38)-(-1.175494351E-38), 0, dan
1.175494351E-38 3.402823466E + 38

Float

Idem

Double

(-1.7976E+308)(-2.22E-308),0,dan(2.22E-308)-(1.79E+308)

Edit By SMK Taruna Bhakti /WP/2010

97

Tipe Data String

Yang termasuk dalam tipe data string adalah tipe-tipe data berikut:
Tipe kolom

Kisaran Nilai

CHAR

1 255 karakter

VARCHAR

1 255 karakter

TINYBLOB, TINYTEXT

1 255 karakter

BLOB, TEXT

1 65535 karakter

MEDIUMBLOB, MEDIUMTEXT

1 16777215 karakter

LONGBLOB, LONGTEXT

1 4294967295 karakter

ENUM('value1','value2',...)

Maksimum 65535 karakter

SET('value1','value2',...)

Maksimum 64 elemen

Tipe Data Waktu dan Tanggal

Yang termasuk dalam tipe data tanggal dan waktu adalah sebagai berikut :
Tipe Data

Kisaran Nilai

DATETIME

1000-01-01 00:00 to 9999-12-31 23:59:59

1000-01-01 to 9999-12-31

DATE

1970-01-01 00:00:00 2037

TIMESTAMP

-838:59:59 to 838:59:59:59

TIMEYEAR

1901-2155

14.b. Membuat Database dan Table

Untuk masuk ke dalam program MySQL pada prompt jalankan perintah
berikut ini:
1. Masuk pada direktori utama mysql, seperti perintah berikut:
C:\WINDOWS>cd\apache\mysql\bin

2. Kemudian ketikkan perintah seperti contoh berikut:

C:\apache\mysql\bin>mysql

Kemudian akan masuk kedalam Prompt MySQL seperti tampilan dibawah ini:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 1 to server version: 3.23.47-nt
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
mysql>

Bentuk prompt mysql> adalah tempat menuliskan perintah-perintah MySQL.

Setiap perintah SQL harus diakhiri dengan tanda titik-koma ;.

Edit By SMK Taruna Bhakti /WP/2010

98

Cara untuk membuat sebuah database baru adalah dengan perintah:

create database namadatabase;

Contoh:
mysql> create database alamat;
Query OK, 1 row affected (0.27 sec)
mysql> _

Untuk mengaktifkan database dapat menggunakan perintah berikut ini:

use namadatabase;

Contoh:
mysql> use alamat;
Database changed
mysql> _

Setelah database aktif, sebuah tabel baru dapat dibuat. Perintah untuk
membuat tabel baru adalah:
create table namatabel
(
struktur
);

Contoh:
Misalkan kita ingin menyimpan data anggota yaitu: nomor, nama, email,
alamat, kota. Sedangkan strukturnya seperti tabel dibawah ini:
Kolom/Field

Tipe Data

Keterangan

nomor

int(6), not null,

primary key

Angka dengan panjang maksimal 6, sebagai

primary key, dan tidak boleh kosong.

nama

char(40), not null

Teks dengan panjang maksimal 40 karakter

dan tidak boleh kosong

email

char(25), not null

Teks dengan panjang maksimal 25 karakter

dan tidak boleh kosong

alamat

char(255), not null

Teks dengan panjang maksimal 255 karakter

dan tidak boleh kosong

kota

char(20), not null

Teks dengan panjang maksimal 20 karakter

dan tidak boleh kosong

Perintah MySQL untuk membuat tabel seperti diatas adalah:

mysql> create table anggota (
-> nomor int(6) not null primary key,
-> nama char(40) not null,
-> email char(25) not null,
-> alamat char(255) not null,
-> kota char(20) not null);
Query OK, 0 rows affected (0.33 sec)
mysql> _

Edit By SMK Taruna Bhakti /WP/2010

99

Sedangkan data yang akan diisikan dalam tabel anggota adalah sebagai
berikut:
No

Nama

E-Mail

Alamat

Kota

1.

Wilujeng Handayani

[email protected]

Jl. Janti Barat 60

Malang

2.

Remy Dianning

[email protected]

Jl. Dermo 7

Malang

3.

Ratna Budi S.

[email protected]

Jl. Probolinggo 78

Lamongan

4.

Avicenna Arya

[email protected]

Jl. Durian No. 10

Malang

5.

Bayu

[email protected]

Jl. Candi II/23

Semarang

6.

Yusuf

[email protected]

Jl. Rajawali 78

Mojokerto

7.

Ari Mulyaningsih

[email protected]

Jl. Lebani Waras 100

Gresik

8.

Latief

latief@hotmail

Jl. Pakis 172

Surabaya

9.

Ajie

[email protected]

Jl. Kali Utik 99

Surabaya

10.

Jam Iyatul Khoir

[email protected]

Jl. Agus Salim 33

Lamongan

11.

Sandra

[email protected]

Jl. Adelaide 22

Malang

12.

Paul

[email protected]

Jl. Mertojoyo 88

Malang

13.

Riza

[email protected]

Jl. Bunga

Jombang

14.

M. Nurullah

[email protected]

Jl. Merak Pamekasan 4

Madura

Untuk memasukkan sebuah baris (record) kedalam tabel MySQL adalah

sebagai berikut:
insert into namatabel values(kolom1, kolom2, kolom3,);

Contoh:
mysql> insert into anggota
-> values('1','Wilujeng Handayani','[email protected]','Jl. Janti Barat 60',
-> 'Malang');
Query OK, 1 row affected (0.44 sec)
mysql> _

14.c. Menampilkan Isi Table

Isi tabel dapat ditampilkan dengan menggunakan perintah SELECT, cara
penulisan perintah SELECT adalah:
select kolom from namatable;

Edit By SMK Taruna Bhakti /WP/2010

100

Contoh:

Untuk menampilkan kolom (field) nomor dan nama pada tabel anggota
select nomor, nama from anggota;

Untuk menampilkan semua kolom(field) pada tabel anggota

select * from anggota;

Untuk menampilkan semua kolom pada tabel anggota yang berada pada
kota Surabaya
select * from anggota where kota=Surabaya;

Untuk menampilkan semua kolom pada tabel anggota dengan urut nama
select * from anggota order by nama;

Untuk menghitung jumlah record pada tabel anggota

select count(*) from anggota;

Untuk menampilkan kota pada tabel anggota

select kota from anggota;

Untuk menampilkan kota dengan tidak menampikan kota yang sama pada
tabel anggota
select distinct kota from anggota;

Untuk menampilkan nama dan email yang mempunyai email di

yahoo.com
select nama,email from anggota where email like %yahoo.com;

14.d.

Menghapus Record

Untuk menghapus suatu record dengan kriteria tertentu digunakan perintah

sebagai berikut:
delete from namatabel where kriteria;

Contoh:
Menghapus record dari tabel anggota yang bernomor 3
delete from anggota where nomor=3;

Edit By SMK Taruna Bhakti /WP/2010

101

14.e. Memodifikasi Record

Untuk

memodifikasi

(merubah)

isi

record

tertentu

adalah

dengan

menggunakan perintah sebagai berikut:

update namatabel set kolom1=nilaibaru1,
kolom2=nilaibaru2 where kriteria;

Contoh:
Merubah e-mail dari anggota yang bernomor 2 menjadi [email protected].
update anggota set [email protected] where nomor=2;

14.f. Menghubungkan PHP dengan MySQL

Untuk menghubungkan dengan MySQL, telah disediakan beberapa fungsi oleh
PHP, yaitu antara lain:

Fungsi mysql_connect()
Fungsi ini digunakan untuk menghubungkan PHP dengan MySql. Sintaksnya
adalah:
$koneksi=mysql_connect(host,user,password)
Isi dari variabel $host, $username, $password dapat disesuaikan sesuai dengan
setting pada MySQL server yang ada.

Fungsi mysql_select_db()
Fungsi ini digunakan untuk memilih database yang akan digunakan. Nama
database dapat disesuaikan dengan setting pada MySql server yang ada.
Sintaksnya adalah:
mysql_select_db(namadatabase[,koneksi])
Parameter koneksi boleh tidak dituliskan, jika tidak dituliskan maka
hubungan yang terakhir yang dianggap sebagai hubungan aktif.

Fungsi mysql_query()
Digunakan untuk melakukan perintah query dalam sebuah database.
Sintaksnya sebagai berikut:
$sql=mysql_query(perintah_sql[,koneksi])

Fungsi mysql_fetch_array()
Fungsi ini digunakan untuk mengambil record dalam database dan
memasukkannya kedalam array assosiatif, array numeris atau keduanya.
Sintaksnya adalah:
$baris=mysql_fetch_array($sql)

Edit By SMK Taruna Bhakti /WP/2010

102

 Fungsi mysql_fetch_assoc()
Kegunaannya hampir sama dengan mysql_fetch_array, yang membedakan
adalah array yang dihasilkan hanya array assosiatif. Sintaksnya adalah:
$baris=mysql_fetch_assoc($sql)

Fungsi mysql_fetch_row()
Kegunaannya hampir sama dengan mysql_fetch_array, yang membedakan
adalah array yang dihasilkan hanya array numeris. Sintaksnya adalah:
$baris=mysql_fetch_row($sql)

Fungsi mysql_num_fields()
Fungsi ini digunakan untuk menghitung jumlah field dalam sebuah database.
Sintaksnya adalah:
$jum_field=mysql_num_fields($sql)

Fungsi mysql_num_rows()
Fungsi ini digunakan untuk menghitung jumlah record dalam database.
Sintaksnya adalah:
$jum_row=mysql_num_rows($sql)

Fungsi mysql_close()
Fungsi ini digunakan untuk memutus hubungan dengan sebuah database
yang telah dilakukan. Sintaksnya adalah:
mysql_close([koneksi])

Fungsi mysql_create_db()
Fungsi ini digunakan untuk membuat database dengan script php. Sintaksnya
adalah:
mysql_create_db(nama_database)
Perhatikan contoh pada file contoh2_24.php berikut:
contoh2_24.php
<html>
<head>
<title>.:: tes koneksi dengan server database::.</title>
</head>
<body>
<font face=verdana size=2>
<h3>Tes koneksi dg mysql database server...</h3><p>
<form>
<input type=radio name=tombol Value=1>Sambung
<input type=radio name=tombol Value=0>Putus
<br><br>

Edit By SMK Taruna Bhakti /WP/2010

103

<input type=submit Value=" OK ">

</form>
<?
require("koneksi.php");
$hub=open_connection();
$databasename="alamat";
if (isset($tombol))
{
if ($tombol==1)
{
if ($hub)
{
echo ("Koneksi dg Server Database <b><u>SUKSES</b></u><br>");
$db=@mysql_select_db($databasename,$hub);
if ($db) echo "Database <b><u>$databasename</b></u> ditemukan";
else echo "Database <b><u>$databasename</b></u> TIDAK ditemukan";
} else
echo ("Koneksi dg Server Database <b><u>GAGAL</b></u><br>");
}
elseif ($tombol==0)
{
$mati=@mysql_close($koneksi);
echo ("Koneksi Server Database <b><u>Dimatikan</b></u><br>");
}
}
?>
</body>
</html>

Agar script diatas dapat dijalankan, silahkan buat juga script koneksi.php
berikut ini:
<?php
function open_connection()
{
$host="localhost";
$username="root";
$password="";
$databasename="alamat";
$koneksi=@mysql_connect
($host,$username,
$password);
if ($koneksi)
$db=@mysql_select_db
($databasename,$koneksi)
or die ("Database
<b>$databasename</b>
Tidak Ditemukan");
return $koneksi;
}
?>

Jika script diatas dijalankan dan koneksi dengan server database sukses
dilaku-kan serta data-base alamat sudah dibuat, maka hasilnya seperti
gambar diatas.
Edit By SMK Taruna Bhakti /WP/2010

104

Untuk menampilkan isi tabel anggota dari database alamat yang telah dibuat
di sub bab 14.b, perhatikan contoh2_25 berikut ini.
contoh2_25.php
<html>
<head>
<title>.:: Menampilkan Data::.</title>
</head>
<body>
<font face=arial size=2>
<center><h3>DAFTAR ANGGOTA</h3></center>
<?php
// ----- ambil isi dari file koneksi.php
require("koneksi.php");
// ----- hubungkan ke database
$koneksi=open_connection();
// ----- menentukan nama tabel
$tablename="anggota";
// ----- perintah SQL dimasukkan ke dalam variable string
$sql="select * from $tablename";
// ------ jalankan perintah SQL
$result = mysql_query ($sql) or die ("Terdapat kesalahan pada perintah SQL!");
// ------ putus hubungan dengan database
mysql_close($koneksi);
// ------ buat tampilan tabel
echo("<table width=100% cellspacing=1 cellpadding=2 bgcolor=#000000>");
echo("<tr><td bgcolor=#CCCCCC><b>No</b></td>
<td bgcolor=#CCCCCC><b>Nama</b></td>
<td bgcolor=#CCCCCC><b>E-Mail</b></td>
<td bgcolor=#CCCCCC><b>Alamat</b></td>
<td bgcolor=#CCCCCC><b>Kota</b></td></tr>");
// ------ ambil isi masing-masing record
while ($row = mysql_fetch_object ($result))
{
// ----- mengambil isi setiap kolom
$nomor=$row->nomor;
$nama=$row->nama;
$email=$row->email;
$alamat=$row->alamat;
$kota=$row->kota;
// ------ menampilkan di layar browser
echo("<tr><td bgcolor=#FFFFFF>$nomor</td>
<td bgcolor=#FFFFFF>$nama</td>
<td bgcolor=#FFFFFF>$email</td>
<td bgcolor=#FFFFFF>$alamat</td>
<td bgcolor=#FFFFFF>$kota</td></tr>");
}
echo("</table>");
?>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

105

Hasil dari script tersebut adalah:

Untuk menambahkan data pada tabel anggota, perhatikan contoh pada

contoh2_26.html berikut ini:
contoh2_26.html
<html>
<head>
<title>.:: Tambah Anggota::.</title>
</head>
<body bgcolor="#FFFFFF">
<form action=simpan_anggota.php method=POST>
<font face=verdana size=2 color="#000000">
<h3 align=left>
TAMBAH DATA ANGGOTA
</h3>
</font>
<table border=0>
<tr>
<td width=15%>Nama</td>
<td width=3%>: </td>
<td width=82%><input type=text name=nama size=15></td>
</tr>
<tr>
<td width=15%>Email</td>
<td width=3%>: </td>
<td width=82%><input type=text name=email size=25></td>
</tr>

Edit By SMK Taruna Bhakti /WP/2010

106

<tr>
<td width=15%>Alamat</td>
<td width=3%>: </td>
<td width=82%><input type=text name=alamat size=50></td>
</tr>
<tr>
<td width=15%>Kota</td>
<td width=3%>: </td>
<td width=82%><input type=text name=kota size=12></td>
</tr>
<tr>
<td width=15%
colspan=3
align=center>
<hr></td>
</tr>
<tr>
<td colspan=3
align=right>
<input type=submit
value="Simpan">
<input type=reset
value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>

Sebelum script diatas dijalankan, jangan lupa untuk membuat juga script
simpan_anggota.php
<html>
<head>
<title>.:: Simpan Data::.</title>
</head>
<body>
<font face=arial size=2>
<center><h5>DATA BERHASIL DITAMBAHKAN KE TABEL ANGGOTA</h5></center>
<hr>
<?php
// ----- ambil isi dari file koneksi.php
require("koneksi.php");
// ----- hubungkan ke database
$koneksi=open_connection();
// ----- menentukan nama tabel
$tablename="anggota";
// ----- menghitung jumlah record
$sql1="select * from $tablename";
$hasil =@mysql_query ($sql1) or die ("Terdapat kesalahan pada perintah SQL!");
$jml=@mysql_num_rows($hasil);
$nomor=$jml+1;

Edit By SMK Taruna Bhakti /WP/2010

107

// ----- perintah SQL untuk memasukkan data ke tabel anggota

$sql2="insert into $tablename(nomor,nama,email,alamat,kota) values ('$nomor',";
$sql2.="'$nama','$email','$alamat','$kota')";
// ------ jalankan perintah SQL untuk memasukkan data ke tabel anggota
$hasil =@mysql_query ($sql2) or die ("Terdapat kesalahan pada perintah SQL!");
// ------ putus hubungan dengan database
mysql_close($koneksi);
?>
<center>
| <a href=contoh2_25.php target=_blank>Lihat Data</a>
| <a href=contoh2_26.html>Kembali</a> |
</body>
</html>

15. Autentifikasi Menggunakan Session

Session digunakan untuk menyimpan atau mencatat variabel yang sama ke
halaman yang lain. Session biasanya dipakai untuk aplikasi-aplikasi yang
memerlukan keamanaan. Setiap pengunjung akan diperiksa terlebih dahulu
sebelum dapat mengakses sebuah halaman web. Jika tidak berhak, maka
halaman yang diminta pengunjung tidak dapat ditampilkan.
Untuk memulai session perintah yang digunakan adalah session_start(). Dan
untuk mengakhiri session menggunakan perintah session_destroy(). Terdapat
banyak fungsi yang berhubungan dengan session, yaitu:
15.a. Fungsi session_start()
Berfungsi untuk memulai session. Sintaksnya adalah sebagai berikut:

session_start()
15.b. Fungsi session_destroy()
Berfungsi untuk mengakhiri session. Sintaksnya adalah sebagai berikut:

session_destroy()

Edit By SMK Taruna Bhakti /WP/2010

108

15.c. Fungsi session_name()

Digunakan untuk mengambil atau menentukan nama sebuah session. Sintaksnya
adalah sebagai berikut:

session_name([nama])
Jika argumen nama tidak disertakan, maka fungsi ini digunakan untuk mengambil
nama sebuah session dan jika tidak disertakan digunakan untuk memberi nama
pada session.
15.d. Fungsi session_module_name()
Digunakan untuk mengambil atau menentukan nama sebuah modul session.
Sintaksnya adalah sebagai berikut:

session_module_name([modul])
Jika argumen modul tidak disertakan, fungsi ini digunakan untuk mengambil
nama sebuah modul session dan jika tidak disertakan digunakan untuk memberi
nama pada modul session.
15.e. Fungsi session_save_path()
Digunakan untuk mengambil atau menentukan path dari direktori yang digunakan
untuk menyimpan data-data sebuah session. Sintaksnya adalah sebagai berikut:

session_save_path([path])
15.f. Fungsi session_id()
Digunakan untuk mengambil atau menentukan identitas sebuah session.
Sintaksnya adalah sebagai berikut:

session_id([id])
15.g. Fungsi session_register()
Digunakan untuk mendaftarkan variabel ke dalam sebuah session. Sintaksnya
adalah sebagai berikut:

session_register([namavar1[,namavar2...])
Argumen namavar1, namavar2 dan seterusnya berupa string yang menampung
nama variabel (tanpa tanda $ didepannya).
15.h. Fungsi session_unregister()
Digunakan untuk menghilangkan sebuah variabel dari sebuah session, namun
session tersebut tetap ada. Sintaksnya adalah sebagai berikut:

session_unregister(namavar)
Edit By SMK Taruna Bhakti /WP/2010

109

15.i. Fungsi session_unset()

Digunakan untuk menghilangkan nilai semua variabel yang ada dalam sebuah
session. Sintaksnya adalah sebagai berikut:

session_unset()
15.j. Fungsi session_is_registered()
Digunakan untuk memeriksa apakah sebuah variabel telah didaftarkan pada
sebuah session. Sintaksnya adalah sebagai berikut:

session_isregistered(namavar)
Argumen namavar berupa string yang merujuk nama variabel (tanpa tanda $
didepannya).
15.k. Contoh Penggunaan
Untuk memahami session, kita akan latihan membuat session dengan aplikasi

login. Yang perlu dbuat pertama kali adalah file admin.html.

File admin.html
<html>
<head> <title>.:: Login Administrator::.</title></head>
<body bgcolor="#FFFFFF">
<form name="form1" action=login.php method=POST>
<table width="62%" border=1 align=center
cellpadding=0 cellspacing=0 bgcolor=#ffffff bordercolor=purple>
<td>
<table width="100%" border=0 align=center cellpadding=1 cellspacing=1
bgcolor=#ffffff >
<tr bgcolor=magenta>
<td colspan=2><div align=center><strong>Login Admin</strong></div></td>
</tr>
<tr bgcolor=#ffffff>
<td width=31%>User ID</td>
<td width=69%><input type=text name=user id=admin size=25
maxlength=25></td>
</tr>
<tr bgcolor=#ffffff>
<td width=31%>Password</td>
<td width=69%><input type=password name=password
id=pass size=25 maxlength=25></td>
</tr>
<tr>
<td width=15% colspan=2 align=center><hr></td>
</tr>
<tr>
<td colspan=2 align=right><input type=submit value="Login">
<input type=reset value="Reset"></td>
</tr>
</table>
</td>
</table>
</form>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

110

Script tersebut jika dijalankan akan

tampak seperti gambar disamping
Selanjutnya buat file berikut:
File login.php
<?
session_start();
if (empty($user))
echo "Nama User Belum Di Isi";
elseif (empty($password))
echo "Password Belum Di Isi";
elseif ($user=="jack" &
$password=="onlyme")
{
$master=$user;
session_register("master");
header("location:halaman_utama.php");
exit();
}
else echo "Anda Tidak Terdaftar";
?>

File halaman_utama.php
<?
session_start();
?>
<html>
<head>
<title>.:: Halaman Utama::.</title>
</head>
<body>
<font face=tahoma size=2>
<?
if(!session_is_registered("master"))
echo "<h3>Akses Ditolak...
</h3>";
else
{
echo "Welcome <b>
$master ... </b><br>";
echo "<h3>HALAMAN
ADMINISTRATOR</h3>";
echo "| <a href=hal1.php>
PAGE 1</a>";
echo "| <a href=hal2.php>
PAGE 2</a>";
echo "| <a href=logout.php>
logout</a> |";
echo "<hr>";
}
?>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

111

File hal1.php
<?
session_start();
?>
<html>
<head>
<title>.:: Halaman 1::.
</title></head>
<body>
<font face=tahoma size=2>
<?
if(!session_is_registered
("master"))
echo "<h3>Akses Ditolak...
</h3>";
else
{
echo "<font face=
tahoma size=2>";
echo "<h3>PAGE 1</h3>";
echo "<p align=right>
| <a href=logout.php>logout</a> |";
echo "<hr>";
echo "Nama User <b><u>$master</b></u>";

}
?>
</body>
</html>

File hal2.php
<?
session_start();
?>
<html>
<head>
<title>.:: Halaman 2::.
</title></head>
<body>
<font face=tahoma size=2>
<?
if(!session_is_registered
("master"))
echo "<h3>Akses Ditolak...
</h3>";
else
{
echo "<font face=
tahoma size=2>";
echo "<h3>PAGE 2</h3>";
echo "<p align=right> | <a href=logout.php>logout</a> |";
echo "<hr>";echo "Nama User <b><u>$master</b></u>";
}
?>
</body>
</html>

File hal2.php
<?

?>

session_start();
session_destroy();
header("location:admin.html");

Edit By SMK Taruna Bhakti /WP/2010

112

Membuat Database mysql dengan PhpMyAdmin

Pertama kita akan membuat database di mysql dan menampilkannya di browser tentunya
masih menggunakan Php. Untuk membuat database di mysql sebaiknya gunakan
PhpMyadmin. Jika anda menggunakan phptriad untuk mengakses phpmyadmin, pada
browser ketikkan http://localhost/phpmyadmin/. Penulis menggunakan phpMyAdmin
2.2.0rc4. Penulis tidak menggunakan phptriad tapi easyphp (http://www.easyphp.org)
jadi untuk masalah url di localhost dapat disesuaikan.
Pertama kali buat database mysql dengan phpmyadmin. Beri nama databasenya ikc.

Gambar 1. Database baru

Setelah itu klik create. Database baru sudah terbentuk, sekarang kita tinggal membuat
tabelnya. Contoh pertama kita buat tabel sederhana yaitu tabel pengunjung pada sebuah
halaman web.

Edit By SMK Taruna Bhakti /WP/2010

113

Gambar 2. Tabel pengunjung

Karena kita akan membuat tabel dengan nama pengunjung yang mempunyai field
sejumlah 4 yaitu : id, nama, email dan situs. Maka masukkan pengunjung pada dan 4
pada fields. Klik Go.

Gambar 3. Membuat field pada database

Edit By SMK Taruna Bhakti /WP/2010

114

Selanjutnya ialah mengisi field pada database. Field pertama masukkan id,
Tabel 1. Field pada tabel pengunjung

Gambar 4: id di set auto_increement dan primary

Jangan lupa bahwa php case sensitif jadi sebaiknya isikan semua field dengan huruf kecil
termasuk id. Pada gambar 4 id di setting auto_increement dan Primary. Auto_increement
artinya setiap pengisian record (data ) otomatis nilai id akan di naikkan . Primary artinya
memberi kunci yang unik yang dapat di jadikan pengenal dalam tabel (dalam hal ini tabel
pengunjung). Angka lebih baik di jadikan kunci utama dari sebuah tabel. Karena angka
itu unik dan penggunaannya pun bisa di urutkan sehingga tidak akan ada duplikasi data.
Dengan kata lain hanya dengan id kita nantinya akan dapat melakukan editing, deleteing,
update pada record.

Edit By SMK Taruna Bhakti /WP/2010

115

Jika sudah klik save.

Nantinya hasil tabel pengunjung seperti gambar 5 :

Gambar 5. Tabel Pengunjung

Browse
Insert
Drop
Primary, Index, Unique

untuk melihat isi table (record)

untuk mengisi table
Menghapus field
Menjadikan primary, index atau unique

Isi database tersebut dengan beberapa records, klik Insert untuk mengisinya :

Edit By SMK Taruna Bhakti /WP/2010

116

Gambar 6. Isi tabel

Karena id auto_increement maka id tidak perlu diisi. Jika sudah kli Save. Untuk melihat
record klik Browse :

Gambar 7: Browse tabel

Edit By SMK Taruna Bhakti /WP/2010

117

Apabila anda tidak menggunakan PhpMyadmin untuk administrasi database MySql maka
script yang dapat anda ketikkan di mysql atau paste di jendela query :
CREATE TABLE `pengunjung` (`id` INT(5) not null AUTO_INCREMENT, `nama`
VARCHAR(75) not null, `email` VARCHAR(75) not null, `situs` VARCHAR(75) not null ,
PRIMARY KEY (`id`))
View
Database sudah terbentuk, sekarang kita akan mulai bagaimana caranya menampilkan isi
tabel tersebut pada browser yang tentunya menggunakan Php. Pertama jangan lupa
start dulu apache dan mysql anda (jika anda menggunakan PhpTriad).
Tabel 2. Source code view.php

Edit By SMK Taruna Bhakti /WP/2010

118

Penjelasan :
1. Php selalu di awali oleh tag <? Dan di akhiri tag ?>. Seperti pada baris ke 1 dan baris
ke 32.
2. Baris ke 7 , merupakan cara untuk melakukan koneksi ke mysql. Syarat koneksi ke
Mysql ialah memasukkan nama host / IP, username dan tentunya password. Secata
default koneksi ke mysql seperti script diatas (baris 7) dengan host = localhost, user
= root, dan password di kosongi.
Ringkasnya sintak baris 7 dapat di tulis :
$koneksi = mysql_connect("localhost","root","");
3. Setelah terhubung dengan mysql langkah selanjutnya ialah memilih database yang
akan digunakan. Pada contoh ini database yang digunakan bernama ikc. Baris 9
merupakan sintak bagaimana memilih database.
4. Setelah memilih database ikc, maka kita dapat melakukan query. Dengan sintak
seperti baris 11 maka kita akan mengambil semua record yang terdapat pada tabel
pengunjung.
5. Setelah melakukan query maka kita perlu juga menghitung banyaknya record yang
terdapat pada tabel. Baris 13 adalah cara untuk menghitung seluruh isi tabel.
6. Langkah utama ialah bagaimana menampilkan isi tabel ke dalam browser. Baris 17
memasukkan semua isi hasil dari query ke dalam variable $baris. Di dalam $baris
inilah semua isi tabel (record) di tampung. Pada contoh diatas untuk menampilkan
setiap urutannya menggunakan urutan dari field yang ada di tabel.
$baris[0] artinya menampilkan isi field id. Cara ini sama dengan
$baris[id]. Dan seterusnya. Urutan pertama dimulai dengan angka 0 (nol).
Di browser hasilnya :

Edit By SMK Taruna Bhakti /WP/2010

119

Gamber 8. View.php
Kesimpulan :
Untuk menampilkan database mysql di Browser dengan Php langkah-langkahnya :

Hubungkan dulu Php dengan mysql (menggunakan fungsi mysql_connect())

Pilih database (menggunakan fungsi mysql_select_db)
Query (menggunakan fungsi mysql_query())
Tampilkan (menggunakan fungsi mysql_fetch_array)

Insert
File view.php tidak memungkinkan untuk seseorang memasukkan record dikarenakan file
tersebut hanya menampilkan record. Untuk dapat membuat sebuah halaman yang dapat
memasukkan sebuah inputan maka perlu dibentuk sebuah form. Form tersebut memuat
variabel-variabel yang dibutuhkan yang kemudian setelah di submit akan di proses dan
dimasukkan dalam database. Maka dibutuhkanlah dua file yaitu input.htm dan file
pemroses input.php

Edit By SMK Taruna Bhakti /WP/2010

120

<input type="text" name="nama">

name="nama" artinya bahwa apapun yang di inputkan dalam text box tersebut menjadi
variable nama.

Gambar 9. input.html
Tabel 4. Source code input.php

Pada source code input.htm terdapat 3 variabel yaitu nama, email dan situs. Ketiga
variable tersebut nantinya akan diproses dalam file input.php. Cara pemrosesan atau
pemasukan data dalam database mysql ialah menggunakan perintah mysql yaitu perintah
insert.

Edit By SMK Taruna Bhakti /WP/2010

121

mysql_query("insert into pengunjung (nama, email, situs) values ('$nama', '$email',

'$situs')",$koneksi);
Sintak tersebut memasukkan data yang terdapat pada variable nama, variable email,
variable situs untuk di masukkan ke dalam tabel pengunjung dengan urutan field nya
nama, email dan situs. Id tidak dimasukkan karena sudah auto_increement. Memasukkan
dalam database harus urut dengan fieldnya. Pada tabel pengunjung urutannya id, nama,
email, situs. Maka pada pengisiannya harus di urutkan.

Gambar 10. Urutan pemasukan data

Pengunjung (nama, email, situs) = nama field dalam tabel pengunjung.
Sekarang akan kita coba memasukkan data. Buka file input.htm di browser :

Gambar 11. input data

Klik kirim, maka selanjutnya akan di input.php

Edit By SMK Taruna Bhakti /WP/2010

122

Gambar 12. input.php

Untuk melihat data buka lagi file view.php

Gambar 13. Tambahkan record

Edit By SMK Taruna Bhakti /WP/2010

123

Bisa anda lihat bahwa sekarang jumlah record ada 3. id yang tidak kita isikan dan
masukkan dalam input.php maka di isi otomatis dan nilainya di naikkan satu (+1)
menjadi 3. Inilah yang dinamakan auto_increement. Dari sini anda bisa membuat sebuah
form untuk input data. Program diatas juga dapat anda tambahkan yaitu : jika ada nama
atau email atau situs yang dikosongi maka data tidak dapat di masukkan ke dalam
database karena kosong.
Modifikasi input.php menjadi :
Tabel 5: Source code input.php

Baris 2 akan menyeleksi jika variable nama, email, situs tidak kosong maka masukkan
data (jalankan baris 4-9) namun jika kosong maka jalankan baris 11.

Edit By SMK Taruna Bhakti /WP/2010

124

Edit
Sebuah database tentunya terdapat revisi-revisi atau perubahan isi tabel atau record.
Maka harusnya terdapat sebuah form yang mampu mengedit isi yang terdapat dalam
database. Jika pada file input.php kita sudah dapat memasukkan data ke dalam database
maka kali ini kita akan mengedit data yang telah di masukkan. Langkah pertama kita
harus memodifikasi file view.php agar dapat mempunyai link untuk menuju sebuah form
peng-editan yang selanjutnya dengan form tersebut akan di proses dan di update ke
dalam database.
Tabel 6. source code baru view.php

Script view.php mendapat tambahan pada baris 28. Dimana dibuat sebuah link yang
memanfaatkan variable id untuk di proses pada tahap selanjutnya.

Edit By SMK Taruna Bhakti /WP/2010

125

Gambar 14: View.php

Jika cursor diarahkan pada link edit maka link tersebut akan menggunakan id dari record
untuk dijadikan sebagai variable pemroses di file edit.php.
Ketika cursor diarahkan pada record pertama maka link mempunyai nilai id=1. Nilai 1
diambil dari hasil query dari $baris[0]. Begitu seterusnya. Sehingga dengan mengambil
nilai dari id maka pada file edit.php nilai id tersebut akan di jadikan alat bantu untuk
editing. Kenapa harus menggunakan id ? karena id telah di set primary yang artinya tidak
ada redundancy id. File edit.php membawa sebuah variable id. Dengan variable ini akan
di lakukan query yaitu memilih semua field yang mempunyai id = 1 (nilai 1 diambil dari
edit.php?id=1); dalam hal ini di contohkan id=1.
Tabel 7: Source code edit.php

Edit By SMK Taruna Bhakti /WP/2010

126

Penjelasan :
Inti dari edit.php yaitu dia membawa sebuah variable id yang nilainya diambil dair
view.php. Variable tersebut ditampung dalam variable $id diambil dari edit.php?id=1.
Pada baris 6 dilakukan query untuk mengambil seluruh record yang id-nya sama dengan
$id (dalam contoh id=1) .
Baris 18 digunakan sebagai pengendali proses agar jika form diatas di submit maka
variable id tetap dapat digunakan pada file update.php atau jika ingin sebuah variable
dapat di tangkap untuk diproses maka ketikkan perintah seperti pada baris 18 dan yang
penting harus tetap di antara tag <form> dan </form>

Gambar 15. edit.php?id=1

Edit By SMK Taruna Bhakti /WP/2010

127

Bisa anda lihat bahwa dengan modal variable id saja record tersebut dapat di edit. Logika
dari edit.php ialah hasil query di tampung dalam text box. Sehingga nilai (value) yang
ada dalam text box hasil query. Silahkan merubah nya jika sudah klik update.
Tabel 8: Source code update.php

Penjelasan :
Baris 6 mengupdate record dimana id yang ingin diupdate sama dengan variable id yang
di bawa oleh file update.php. Jika pada file edit.php baris 18 di hapus maka query tidak
dapat dilaksanakan karena nilai variable id tidak dapat di akses.

Gambar 16: Update.php

Proses update telah selesai. Anda bisa meliha isi data pada file view.php.

Edit By SMK Taruna Bhakti /WP/2010

128

Delete
Record tidak selamanya akan disimpan jika database yang digunakan bersifat dinamis.
Dimana setiap waktu atau detik database akan di perbaharui dan data-data lama juga
nantinya akan di hapus jikalau sudah tidak sesuai dengan fakta yang ada. Memang
seharusnya data-data lama menjadi arsip tapi data-data lama yang ternyata sudah tidak
sesuai dengan kebijakan yang baru inilah yang akan di hapus.
Menghapus database MySql dengan php tentunya sangat mudah. Logika bekerjanya
sama dengan edit.php dimana mengambil variable id dan di proses di file delete.php.
Perintah yang digunakan untuk menghapus adalah perintah MySql yaitu delete. File
view.php harus kita modifikasi terlebih dahulu.
Tabel 9: Penambahan delete

Edit By SMK Taruna Bhakti /WP/2010

129

Penjelasan :
Untuk mengambil variable id ditambahkan perintah seperti pada baris 29. Variable id
akan di proses pada file delete.php

Gambar 17: view.php dengan delete

Tabel 10: Source code delete.php

Kiranya tidak perlu di jelaskan lagi, cara kerjanya sama dengan update.php.

Edit By SMK Taruna Bhakti /WP/2010

130

Searching
Database yang besar yang tentunya mempunyai record ribuan atau bahkan ratusan ribu
yang seharusnya mempunyai fasilitas pencarian data atau searching. Pencarian ini
bersifat fleksibel dimana dapat mencari berdasarkan field yang ada dalam tabel. Pada
contoh tabel pengunjung, pencarian dapat di customize-kan berdasarkan id, nama, email
dan situs. Untuk membuat form pencarian menggunakan html sedangkan pemrosesan
variable menggunakan php.
Tabel 11: Source code cari.htm

Penjelasan :
Baris 8-11 menyatakan variable untuk masing-masing field yang terdapat dalam
tabel pengunjung.
Baris 13 menyatakan kata / keyword yang di cari.

Edit By SMK Taruna Bhakti /WP/2010

131

Gambar 18: Cari.htm

Tabel 12: Source code cari.php

Edit By SMK Taruna Bhakti /WP/2010

132

Penjelasan :
Inti dari script.php ialah pada baris 7. Secara umum query akan melakukan pencarian
kata ($cari) dalam sebuah field ($kolom) jika cocok akan ditampilkan. Penggunakan like
di maksudkan untuk mengambil kata / keyword yang terdapat dalam field yang
sepenggal katanya atau huruf sama dengan keyword yang di masukkan. Contoh mencari
pengunjung dengan nama syafii maka jika menggunakan like akan di tampilkan data M
Syafii, Syafii Maarif, dll. Sepanjangan kata atau kalimat cocok dengan keyword meskipun
satu huruf .

Gambar 19: Hasil pencarian keyword 3

Pada contoh diatas mencari pada kolom (field) id dengan keyword 3. Hasilnya
ditampilkan id : 13, 3 .

Edit By SMK Taruna Bhakti /WP/2010

133

Rangkuman 2
Bahasa pemrograman PHP terbukti sangat handal dalam membangun sebuah
program berbasis web
Waktu yang digunakan untuk memproses data dan menjalankan perintahperintah query sangat cepat
Dengan berjalan dalam sebuah web server, maka secara otomatis program ini
bersifat multiuser
Database MySQL menyimpan data didalam direktori khusus yang terpisah dari
file program PHP sehingga keamanan data lebih terjamin
Web server dan database server terpisah sehingga menyulitkan pihak luar
untuk mengakses data yang terdapat didalam database.
Bahasa program PHP dan Database MySQL lebih fleksibel karena dapat
diakses oleh sistem operasi Windows maupun Linux.
Bahasa program PHP dan MySQL adalah open source sehingga kita tidak
perlu mengeluarkan biaya tambahan untuk membeli software tersebut.
Variable dalam PHP tidak perlu di-deklarasikan terlebih dahulu sebelum
digunakan.
Dalam PHP mengenal lima macam tipe data yaitu: integer, float, string, array
dan objek.
Struktur kontrol/kendali dalam php meliputi: statement IF, While, For, Switch,

Require dan Include.

c. Tugas
1. Buatlah aplikasi web dengan program PHP untuk menghitung jumlah
pengunjung yang telah mengunjungi halaman web kita. Counter yang kita
buat ini adalah untuk menghitung berapa kali suatu halaman situs web telah
ditampilkan. Untuk menyederhanakannya maka counter ditampilkan dalam
bentuk teks bukan grafik.
Algoritma:
a. Bila suatu halaman web ditampilkan maka terlebih dulu dibaca isi file
tertentu dan dibaca nilainya.
b. Tampilkan nilainya di layar browser
c. Tambahkan nilainya dengan 1
d. Simpan nilainya yang baru di file
e. Selesai
2. Buatlah aplikasi pendaftaran/registrasi agar pengunjung mendapatkan hak
untuk memasuki halaman web yang kita buat. Untuk itu membuat aplikasi
tersebut anda harus mengikuti aturan-aturan sebagai berikut:
Buat database dan tabel. Field-field tabel tersebut terdiri dari username,

password, nama, alamat, email dan level. Untuk level dibedakan

menjadi dua, yaitu user biasa dan administrator.

Edit By SMK Taruna Bhakti /WP/2010

134

 Buat halaman Login seperti gambar dibawah ini. Tombol Login untuk
masuk ke halaman berikutnya jika user sudah terdaftar. Halaman yang
dikunjungi berdasarkan
level
adalah
maka

user,

jika

LOGIN

user

administrator
halaman

yang

dibuka adalah halaman

User Name
Password

administrator jika user

Daftar

name adalah user biasa

maka

yang

Login

dibuka

adalah halaman user biasa. Sedangkan tombol daftar, digunakan untuk

pendaftaran user baru bagi yang belum terdaftar.
Buat halaman pendaftaran yang didalamnya terdapat Form Pendaftaran
User Baru seperti gambar berikut:

PENDAFTARAN ANGGOTA
User Name
Password
Nama
Alamat
E-mail
Level

Administrator User Biasa

Simpan

Reset

Setelah sukses melakukan pendaftaran, user dapat melakukan login sesuai

dengan level user masing-masing. Untuk halaman administrator terdapat
menu Lihat Data, Tambah Data, Edit Data, Hapus Data dan Ganti
Password. Sedangkan untuk halaman user biasa terdapat menu Edit
Data (miliknya sendiri) dan Ganti Password.
Semua halaman yang dibuat di autentifikasi menggunakan session.
3. Buatlah buku tamu (guestbook) dengan langkah-langkah pembuatan buku
tamu sebagai berikut:
a. Membuat table MySQL yang akan menyimpan isi buku tamu
b. Membuat form pengisian buku tamu
c. Membuat program untuk menerima masukan data dari form yang telah kita
buat sebelumnya
d. Membuat program untuk menampilkan isi buku tamu.

Edit By SMK Taruna Bhakti /WP/2010

135

d. Tes Formatif 2
1. Apa yang anda ketahui dengan Variable dan Konstanta ?.
2. Sebutkan macam-macam statement kendali dan apa fungsinya ?
3. Buatlah program untuk menghitung faktorial. Dengan algoritma sebagai
berikut:
Membuat form dengan menggunakan tag FORM pada HTML. Dengan data
yang dimasukkan adalah nilai faktorial yang dicari. Misal seperti gambar
berikut:

Data yang dimasukkan disimpan dalam variable dan dikirimkan ke sebuah

file PHP lain yang fungsinya untuk menerima variable yang dikirimkan oleh
form. Kemudian variable tersebut diproses dengan rumus berikut ini:
Faktorial n!= 1*2*3*...*n+1

Hasil dari perhitungan tersebut kemudian ditampilkan dalam form yang

lain, seperti pada gambar berikut:

Gunakan statement perulangan untuk mengerjakan tugas diatas.

Selesai

Edit By SMK Taruna Bhakti /WP/2010

136

e. Kunci Jawaban Formatif

Variable digunakan untuk menyimpan data sementara dan nilainya bisa
berubah-ubah setiap kali program dijalankan. Dalam PHP, variable diawali
dengan $ dan diikuti dengan nama variablenya.
Konstanta adalah variable yang nilainya tetap.
Statement kendali terdiri dari:

Statement IF, digunakan untuk melakukan eksekusi suatu statement

secara bersyarat.

Statement WHILE, digunakan untuk melakukan perulangan dalam sebuah

statement sampai kondisi tertentu terpenuhi.

Statement FOR, digunakan untuk mengulangi sejumlah blok statement

sampai jumlah atau kondisi terpenuhi. Fungsinya sama dengan statement
while. Bedanya, dalam statement for jumlah perulangan sudah diketahui
diawal dan harus dituliskan nilai awal dan nilai akhir dari variabel
penghitung.

Statement SWITCH, digunakan untuk membandingkan suatu variable

dengan beberapa nilai serta menjalankan statement tertentu jika nilai
variable sama dengan nilai yang dibandingkan.

Statement REQUIRE, digunakan untuk membaca nilai variable dan fungsifungsi dari sebuah file lain.

Statement INCLUDE, digunakan untuk menyertakan isi suatu file tertentu.

Program untuk menghitung faktorial adalah:

File faktorial.php
<html>
<head>
<title>::: Program Faktorial:::</title>
</head>
<body>
<center>
<table border=1 width=400>
<tr>
<td><font face=tahoma size=2><h3><u><center><br>
Mencari Faktorial</u></h3>
<form action=faktor.php method=post>
Masukkan Nilai Faktorial:<br>
<input type=text name=a size=10><p>
<input type=submit value="Hitung">
</form>
<br>
</td>
</tr>
</table>
</body>
</html>

Edit By SMK Taruna Bhakti /WP/2010

137

File hasil.php
<html>
<head>

<title>::: Program Faktorial:::</title>

</head>
<body>
<center>
<table border=1 width=400>
<tr>
<td><font face=tahoma size=2>
<h3><u>
<center>
<br>Mencari Faktorial</u></h3>
<form action=faktorial.php method=post>
<?
$c=1;
if ($a<1)
{
$a=0;
$c=0;
};
echo "Faktorial $a adalah: ";
for ($b=1;$b<$a+1;$b++)
{
$c=$c*$b;
}
echo("= $c");
?>
<p>
<input type=submit value="Hitung Lagi">
</form>
<br>
</td>
</table>
</body>
</html>

f. Lembar Kerja 2
Alat dan Bahan
a. PC (Personal Computer) yang telah dilengkapi dengan Web browser.
b. Editor Teks NotePad
c. Apache Web Server
d. Program PHP
e. Program MySQL
Kesehatan dan Keselamatan Kerja
a. Berdoalah sebelum memulai kegiatan belajar.
b. Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
c. Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung
dengan benar.
d. Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik
di dekat komputer (magnet, handphone, dan sebagainya).

Edit By SMK Taruna Bhakti /WP/2010

138

e. Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain

game.
f. Setelah selesai, matikan komputer sesuai prosedur yang aman!
Langkah Kerja
a. Siapkanlah semua peralatan yang akan digunakan!
b. Periksa semua kabel penghubung pada PC.
c. Nyalakan PC dan jalankan program web server, MySQL, PHP, editor notepad
dan Web browser Internet Explorer.
d. Kerjakan Tes Formatif 2 di atas.
e. Apabila menemui kesulitan dalam memahami materi yang ada, segera
tanyakan denga instruktur.
f. Setelah selesai, matikan komputer dan rapikan seperti semula.

Edit By SMK Taruna Bhakti /WP/2010

139

3. Kegiatan Belajar 3:
Mengenal Software Web Design.

a. Tujuan Kegiatan Pemelajaran

Setelah melaksanakan kegiatan pemelajaran 1 diharapkan peserta diklat dapat
mengenal berbagai macam software Web design dengan kekurangan dan
kelebihannya masing-masing.

b. Uraian Materi 3
1. Software Web Design
Software web design merupakan perangkat lunak yang berguna untuk
membangun/membuat/mendisain halaman-halaman web, baik yang bersifat
statis maupun dinamis. Saat ini terdapat berbagai macam software web
design yang dikeluarkan oleh vendor yang berbeda-beda. Setiap software
web design itu menawarkan berbagai macam fitur unggulannya masingmasing. Software web design terpopuler yang ada saat ini antara lain: Adobe
Image Ready, Macromedia Dreamweaver, Macromedia Fireworks, Microsoft
Frontpage dan lain sebagainya.
2. Mengenal Macromedia Dreamweaver MX
Macromedia Dreamweaver yang merupakan salah satu software Web design
terpopuler dipilih sebagai software Web design yang akan digunakan dalam
proses pemelajaran dalam modul ini. Macromedia Dreamweaver dipilih karena
kompatibilitas dan dukungannya terhadap berbagai bahasa pemrograman
web, antara lain: ASP, JSP, CFM, ASP.NET, PHP, JavaScript, CSS dan XML
disamping keunggulan-keunggulan lainnya dibandingkan dengan software

Web design yang lain. Saat ini Macromedia Dreamweaver telah sampai pada
versi 2004 yang lebih sering disebut dengan Macromedia Dreamweaver MX
2004.
Dreamweaver menjadi software utama yang digunakan oleh Web designer
dan web programmer guna mengembangkan situs web. Ruang kerja, fasilitas
dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan
efektivitas dalam desain maupun pembangunan situs web. Dreamweaver juga
dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap.
Untuk dapat mengoperasikan Macromedia Dreamweaver, terlebih dahulu
harus dipastikan sudah terinstal di komputer praktikum. Apabila belum ada
Macromedia Dreamweaver yang terinstal, maka perlu dilakukan proses
instalasi. Terlebih dahulu harus dipersiapkan file instalasinya dan diikuti
dengan proses instalasi sesuai dengan installation manual yang ada. Setelah
Macromedia Dreamweaver terinstal, jalankan dengan klik 2 kali pada ikon
yang terdapat di desktop atau dapat juga dilakukan melalui Start Menu.

Edit By SMK Taruna Bhakti /WP/2010

140

3. Workspace Dreamweaver MX
Pertama kali dijalankan setelah proses instalasi selesai, user akan diberikan
pilihan Workspace Setup. Workspace Setup berfungsi untuk menentukan
workspace

yang

akan

kita

pakai

selanjutnya,

apakah

Workspace

Dreamweaver MX apakah Workspace Dreamweaver 4. Di sini kita gunakan

Workspace

Dreamweaver

MX,

apabila

dikemudian

hari

kita

ingin

menggunakan workspace Dreamweaver 4, kita dapat merubahnya melalui

Menu Edit Preferences.

Gambar 1. Workspace Setup

Workspace Dreamweaver MX tersebut memiliki tampilan window seperti pada
gambar 2. Window Dreamweaver MX ini dibagi menjadi 7 bagian, yaitu :
Insert Bar, Document Toolbar, Document Window, Panel Groups, Tag
Selector, Property Inspector dan Files Panel.

Gambar 2. Window dan Panel Dreamweaver MX

Edit By SMK Taruna Bhakti /WP/2010

141

Keterangan Gambar:
1. Insert

bar,

memuat

tombol-tombol

yang

berfungsi

untuk

memasukkan/menyisipkan berbagai jenis obyek seperti gambar, tabel

dan layer ke dalam suatu dokumen. Setiap obyek yang dimasukkan
dengan meng-klik tombol insert pada insert bar ini adalah seperti
halnya memasukkan potongan tag HTML ke dalam halaman yang
sedang dibuat.
2. Document window, berfungsi untuk menampilkan dokumen di mana
anda sekarang bekerja.
3. Document toolbar, berisi tombol dan menu pop-up yang menyediakan
tampilan yang berbeda-beda dari Document Window.
4. Panel groups, merupakan kumpulan panel yang saling berkaitan satu
sama lain, yang dikelompokkan di bawah satu judul.
5. Tag selector, berfungsi untuk menampilkan hierarki tag di sekitar
pilihan yang aktif pada Design View.
6. Property inspector, digunakan untuk melihat dan mengubah berbagai
property obyek atau teks.
7. Files panel, memungkinkan pengaturan file-file atau direktori kerja.
Workspace Dreamweaver MX

ini memberikan kesatuan tampilan antara

menu utama, panel, property inspector serta toolbar.

c. Menentukan Situs Lokal

Mulailah membangun situs Anda dengan menentukan situs lokal untuk file-file
dalam Scall_site. Sebuah situs adalah lokasi penyimpanan semua dokumendokumen dan filefile yang berhubungan dengan situs web tertentu. Menentukan
situs lokal melukiskan struktur dari situs yang Anda buat dan memberitahu
Dreamweaver dimana Anda berencana untuk menempatkan semua file-file.
Tentukan sebuah situs lokal setiap kali Anda membuat situs web dengan
menggunakan Dreamweaver.
Untuk latihan ini, Anda akan menentukan folder Scall_site sebagai folder situs
lokal.
1. Buka Dreamweaver. Sebuah dokumen kosong akan muncul.
2. Pilih Site | New Site.
3. Dalam kotak dialog Site Definition, pastikan bahwa Local Info dipilih
dalam daftar Category.
4. Pada field Site Name, ketik my_tutorial. Nama situs memudahkan Anda
untuk mengidentifikasi dan memilih sebuah situs dari daftar situs-situs yang
telah Anda buat.
5. Klik icon folder di sebelah kanan field Local Root Folder, pilihlah folder Sites
Scall_site, dan klik Select

Edit By SMK Taruna Bhakti /WP/2010

142

.
6. Klik OK.
7. Klik Create ketika ditanya apakah Anda akan membuat sebuah cache file
untuk situs ini.
Cache file adalah sebuah catatan file-file yang ada sehingga Dreamweaver
dapat dengan mudah meng-update link ketika Anda memindahkan,
merubah, atau menghapus sebuah file.
Jendela Site menampilkan sebuah daftar yang berisi semua folder-folder
dan file-file di dalam situs lokal my_tutorial. Daftar ini juga bertindak
sebagai sebuah file manager, yang memperbolehkan Anda untuk meng copy,
paste, menghapus, memindahkan, dan membuka file seperti pada
windows explorer.

8. Biarkan jendela Site dalam keadaan terbuka.

9. Klik jendela Document untuk membuatnya menjadi aktif.
d. Membuat Homepage Situs Scaal
Setelah membuat struktur untuk menaruh situs Scaal, Anda akan membuat
sebuah homepage (halaman pertama) untuk situs ini. Ketika Anda membuat
dokumen ini, Anda akan menambahkan judul halaman, layer, gambar, teks, dan
links. Dalam latihan ini kita membutuhkan object palette dan property inspector.

Edit By SMK Taruna Bhakti /WP/2010

143

Jika object palette dan property inspector belum terbuka, maka lakukan langkah
di bawah ini :
Untuk membuka object palette dengan memilih menu Window |
Objects. Object palette digunakan untuk menambahkan objek ke dalam
dokumen Anda.
Untuk membuka property inspector dengan memilih menu Window |
Properties. Property inspector digunakan untuk mengatur properti atau
atribut dari objek dalam dokumen Anda.

Menyimpan dokumen
Simpanlah dokumen kosong yang Anda buat ketika Anda membuka
Dreamweaver.
1. Pilih File | Save.
2. Dalam kotak dialog Save As, pilih folder Sites/Scall_site untuk menyimpan
file ini.
3. Dalam field Name, ketik my_scall_home.html.
4. Klik Save.

Menentukan Judul dari Halaman

Menentukan judul dari halaman dokumen HTML membantu pembaca
mengidentifikasi halaman ketika sedang browsing. Judul halaman muncul pada
baris judul browser (title bar) ketika dilihat dari sebuah browser. Ketika sebuah
halaman di-bookmark, judul halaman muncul di daftar bookmark. Ketika sebuah
dokumen dibuat tanpa judul halaman, dokumen tersebut muncul di browser
dengan judul Untitle Document.
1. Ketika jendela dokumen aktif, pilih Modify | Page Properties untuk
menampilkan pilihan properti halaman.
2. Dalam field Title dari kotak dialog Page Properties, ketik Scaal Gourmet
Coffee.

Edit By SMK Taruna Bhakti /WP/2010

144

3. Klik OK
Judul muncul pada baris judul dari jendela dokumen Dreamweaver.
MENGGUNAKAN LAYER UNTUK MENGATUR TATA LETAK SEBUAH
HALAMAN
Layer cocok digunakan untuk membuat tata letak halaman yang kompleks karena
Anda dapat dengan mudah merubah posisi elemen-elemen halaman yang Anda
taruh dalam layer hanya dengan men-drag layer-layer tersebut. Dalam latihan ini
Anda akan mengatur tata letak homepage dengan menggunakan layer dan
kemudian mengkonversi tata letak tersebut menjadi sebuah tata letak tabel agar
halaman dapat ditampilkan secara akurat seperti aslinya pada browser versi 3.0
dan 4.0.
Anda tidak dapat mengkonversi layer menjadi tabel jika dokumen yang akan
dikonversi mengandung nested layers (layer yang mengandung layer) atau
overlapping layers (layer-layer yang saling bertumpukan).
Menambah layer
1. Pilih Window | Layer untuk membuka Layer palette.
2. Yakinkan bahwa kotak Prevent Overlaps tercentang.
3. Klik jendela dokumen my_scall_home untuk membuat dokumen tersebut
menjadi aktif.
4. Pilih Insert | Layer.
5. Pada panel Object palettes Common, klik tombol Draw Layer.

Edit By SMK Taruna Bhakti /WP/2010

145

6. Pindahkan pointer ke jendela dokumen; pointer berubah menjadi drawing

tool. Di bawah layer pertama, klik dan tarik (drag) pointer untuk menggambar
sebuah layer.
7. Lakukan langkah ke 5 dan 6 untuk menambahkan sebuah layer lagi.
Halaman Anda harus tampak seperti tampilan di bawah ini.

Memilih dan memanipulasi sebuah layer

Anda dapat mengubah posisi atau ukuran dari layer-layer yang ada di dokumen
Anda.
1. Klik bingkai dari layer
Muncul Handles (kotak hitam kecil sebanyak 8 buah) di sekitar layer terpilih.

Edit By SMK Taruna Bhakti /WP/2010

146

2. Untuk mengubah ukuran layer, klik salah satu handles, dan geser handles
hingga sesuai dengan ukuran yang diinginkan.
3. Untuk menggerakkan sebuah layer, lakukan satu dari beberapa langkah di
bawah ini :
Gunakan tombol panah di keyboard.
Tekan tombol Shift dan gunakan tombol panah untuk mengerakkan
sebuah layer 5 pixel ke arah panah.
Klik tab yang terletak di sudut kiri atas dari layer dan geser layer ke
posisi yang diinginkan.
Menambahkan Sebuah Gambar
Sekarang Anda akan menambahkan gambar logo Scall ke dalam dokumen.
1. Klik di mana saja pada layer paling atas. Dengan mengklik di dalam sebuah
layer maka posisi kursor akan berada di dalam sebuah layer tanpa menyorot
layer.
Sebuah aktif layer dengan kusor akan tampak sebagai berikut :

2. Pilih Insert | Image.

3. Dalam
kotak
dialog
Select
Image
Source,
pilih
Sites/Scall_site/Images, pilih logo_scaal.gif, dan klik Select.
Gambar muncul di layer.

folder

Menambahkan Gambar Navigasi

Sekarang Anda akan menambahkan gambar-gambar untuk menjadi tombol
navigasi. Setelah Anda menambahkan gambar tombol, beri spasi antara gambargambar tersebut: tambahkan sebuah paragraf kosong setelah Anda menyisipkan
gambar-gambar.
1. Letakkan kursor pada layer navigasi (layer di kiri bawah).
2. Pada panel Oject palettes Common, klik tombol Insert Image.

Edit By SMK Taruna Bhakti /WP/2010

147

Kotak dialog Select Image Source muncul.

3. Pada folder Images dari Scall_site, pilih btn_ourstory_up.gif, dan klik
Select untuk menempatkan gambar. Gambar Our Story muncul di layer
4. Letakkan kursor setelah gambar di layer, dan tekan Enter untuk
memberikan spasi antar gambar ini dengan gambar yang akan Anda
sisipkan berikutnya.

5. Pada Object palette, klik tombol Insert Image, dan pada kotak dialog
yang muncul pilih btn_products_up.gif, dan kemudian klik Select.
6. Tempatkan kursor setelah gambar, dan tekan Enter.
7. Pada Object palette, klik tombol Insert Image, dan pada kotak dialog
yang muncul pilih btn_thisweek_up.gif, dan kemudian klik Select.
Tata letak dokumen Anda akan terlihat sama seperti di bawah ini :

Memberi Nama Gambar

Jadikanlah sebuah kebiasaan dengan memberi nama semua elemen yang ada di
dalam dokumen Anda. Jika di kemudian hari Anda butuh untuk referensi atau
memilih
sebuah
gambar
tertentu,
Anda
akan
dengan
mudah
mengidentifikasikannya.
1. Di dalam jendela dokumen, klik gambar Our Story.
2. Pada field Image di Property inspector, ketik ourstory.

Edit By SMK Taruna Bhakti /WP/2010

148

3. Ulangi langkah-langkah di atas, pilih dan beri nama kedua gambar yang lain.
Beri nama products pada gambar kedua dan thisweek pada gambar
ketiga.
Menambahkan Teks Pada Sebuah Layer.
Sekarang Anda dapat menambahkan teks pada layer yang belum terisi.
Pada Dreamweaver, Anda dapat mengetik teks langsung pada layer atau Anda
dapat meng- Cut + Paste teks dari dokumen lain ke dalam sebuah layer. Pada
latihan ini, Anda akan menambahkan teks ke dalam sebuah layer dengan mengCopy + Paste dari file teks yang sudah ada ke dalam sebuah layer.
1. Pilih File | Open, kemudian pada folder Scall_site, buka DW3_copy.txt.
Dokumen DW3_copy.txt akan dibuka pada jendela dokumen
Dreamweaver yang lain. DW3_copy.txt adalah file yang akan Anda copy.
2. Pilih Edit | Select All untuk menyorot seluruh teks dokumen .
3. Pilih Edit | Copy untuk menyalin teks.
4. Tutup dokumen DW3_copy.txt.
5. Dalam dokumen my_scaal_home, letakkan kursor pada layer sebelah
kanan bawah.
6. Pilih Edit | Paste untuk meng-paste teks ke dalam dokumen.
Format Teks
Anda dapat mengformat teks dengan mengubah setting properties pada Property
inspector. Pertama, sorot teks yang Anda akan format, dan kemudian lakukan
perubahan. Anda dapat mengubah jenis huruf dan ukuran dari teks.
Sebelum Anda meng-format teks, Anda akan menambahkan paragraph return
setelah kalimat pertama dan setelah kalimat kedua.
1. Jika property inspector belum terbuka, pilih Window | Properties.
2. Dengan posisi kursor di mana saja dalam layer tsb., tekan Control + A
untuk menyorot seluruh text di dalam layer.
3. Dalam menu Format pop-up kedua dari property inspector, yang tertulis
Default Font, pilih Arial, Helvetica, sans-serif.
4. Pada menu pop-up Size, pilih 3.
Text pada dokumen Anda secara otomatis akan ter-update sesuai dengan
perubahanperubahan yang Anda buat.
Menambahkan Warna Latar Belakang Pada Sebuah Layer
Anda juga dapat menggunakan Property inspector untuk mengatur warna latar
belakang dari sebuah layer. Anda dapat memilih sebuah warna dengan
menggunakan color picker, atau Anda dapat mengetikkan kode hexadesimal
sebuah warna.
1. Klik bingkai dari layer yang mengandung teks. ( Handles muncul di sekeliling
layer ketika disorot).
2. Pada Property inspector, klik kotak warna BgColor. Color palette dan
eyedropper icon muncul. Anda dapat menggunakan eyedropper untuk
memilih warna apa pun pada area kerja, selain memilih warna yang ada di
color palette.
3. Pindahkan icon color picker ke Scaal logo dan klik warna emas yang
mengelilingi huruf S.
Warna latar belakang layer telah berubah.

Edit By SMK Taruna Bhakti /WP/2010

149

Mengatur Posisi Layer-Layer

Sekarang Anda telah selesai mendesain halaman Anda dengan menggunakan
layer-layer. Anda dapat mengkonversi layer-layer menjadi tabel agar dapat dilihat
oleh user yang menggunakan browser versi 3.0.
Ketika Anda mengkonversi layer-layer menjadi sebuah tabel, Dreamweaver
membuat kolom tabel, baris tabel dan cells. Untuk mengurangi jumlah kolom
tabel, baris tabel dan cells tabel ketika Anda mengkonversi tata letak dokumen,
aturlah elemen-elemen layer sebelum mengkonversinya menjadi sebuah
dokumen. Gunakan property inspector untuk mengatur posisi layer-layer di dalam
sebuah dokumen.
Pertama, Anda mengatur ulang ukuran dan memindahkan layer-layer yang telah
Anda desain; kemudian Anda mengatur posisi dua layer di bawah supaya sejajar
dengan layer di atasnya.
1. Rubah ukuran layer atas dengan menggerakkan layer handles hingga
mengelilingi logo Scaal dan teks sesudahnya.
2. Rubah ukuran layer navigasi (layer kiri bawah) dengan menggerak layer
handles hingga mengelilingi gambar-gambar.
3. Pindahkan layer teks hingga berada di samping layer navigasi. Sorot layer,
dan gunakan tombol panah di keyboard atau pindahkan layer dengan
menggunakan layer tab. (Layer-layer tersebut tidak akan tumpang tindih
karena Prevent Overlap di Layer palette dalam keadaan tercentang.)

Edit By SMK Taruna Bhakti /WP/2010

150

4. Jika tidak seluruh field layer property kelihatan di Property Inspector, klik
expander arrow pada suduh kanan bawah dari Property Inspector.
5. Sorot layer yang berisi gambar navigasi. Tekan tombol Shift dan sorot layer
yang berisi teks. Kedua layer tersebut tersorot.
6. Pada field T di Property Inspector, ketik 100. Dengan ini maka kedua layer
akan berjarak 100 pixel dari atas dokumen.

Klik di mana saja di dalam dokumen untuk menghilangkan sorotan.

MENGUBAH LAYER MENJADI TABEL
Sekarang Anda akan mengkonversi layer-layer menjadi tabel agar dapat
ditampilkan pada browser versi 3.0.
1. Pilih Modify | Layout Mode | Convert Layers to Table.
Kotak dialog Convert Layers to Table muncul.

Edit By SMK Taruna Bhakti /WP/2010

151

2. Pada kotak dialog Convert Layers to Table, di bawah Table Layout

yakinkan bahwa Smallest : Collapse Empty Cells dan Use Transparent
GIFs dalam keadaan terseleksi.
3. Pada Layout Tools, pastikan bahwa Prevent Layer Overlap dalam
keadaan tercentang.
4. Click OK.
Sekarang layer-layer telah dikonversi menjadi sebuah tabel.

Catatan : Dreamweaver mengatur spasi antara kolom tabel dan baris tabel
dengan menggunakan transparent GIFs. Setelah mengkonversi layer-layer
menjadi sebuah tabel, Anda akan melihat file transparent.gif pada root level
dari situs folder Anda.
Jangan memindahkan file ini; jika Anda lakukan, Anda akan melihat icon
gambar silang ketika Anda melihat halaman tersebut pada sebuah browser.
5. Tutup Layer palette.
6. Simpan dokumen Anda.
MEMBUAT ROLLOVER IMAGES
Sebuah rollover images adalah sebuah gambar yang akan berubah jika mouse
pointer melewatinya. Anda dapat membuat rollover image dengan menambahkan
perilaku (behavior) kepada sebuah gambar.
1. Pada jendela dokumen, klik gambar Our Story untuk menyorotnya.
2. Pilih Window | Behaviors atau tekan F8 untuk membuka behavior
inspector, dimana berisi semua perilaku behavior yang telah dibuat untuk
elemen tertentu.

Edit By SMK Taruna Bhakti /WP/2010

152

3. Pada menu pop-up Events For, harus tampak 3.0 and Later Browsers.
Jika tidak tampak, lakukan pemilihan.
4. Untuk menambahkan sebuah tindakan klik tombol plus (+) dan pilih Swap
Image. Kotak dialog Swap Image muncul. Pada daftar Images, Anda
akan melihat sebuah daftar yang berisi semua gambar dalam sebuah
halaman, dengan gambar Our Story tersorot. Ini adalah gambar original,
dimana akan diganti dengan gambar lain ketika mouse pointer melewatinya.

5. Klik
Browse
untuk
menuju
folder
Scall_site/Images,
btn_ourstory_over.gif, dan kemudian klik Select.

pilih

Gambar ini akan menggantikan gambar original ketika mouse melewati

gambar Our Story.

6. Terima setting standar untuk Preload Images dan Restore Images

onMouseOut.
7. Klik OK untuk menutup kotak dialog Swap Image dan mengaplikasikan
perubahan yang baru dibuat.

Edit By SMK Taruna Bhakti /WP/2010

153

8. Ulangi langkah ke-4 sampai ke 7 untuk gambar Products dan This Week.
Sorot gambar Products. Kemudian di kotak dialog Swap Image, atur
Set Source to : dengan btn_products_over.gif.
Sorot gambar This Week. Kemudian di kotak dialog Swap Image, atur
Set Source to : dengan btn_thisweek_over.gif.
9. Tutup Behavior inspector.
10. Tekan F12 untuk melihat dokumen anda pada Web browser. Anda tidak
perlu menyimpan dokumen sebelum menampilkannya.
11. Pindahkan mouse pointer ke gambar Our Story, Products, dan This
Week untuk melihat perubahannya.
12. Jika anda sudah melihat file tersebut, tutuplah jendela browser anda.
13. Kembali ke Dreamweaver dan pilih File | Save untuk menyimpan
perubahan yang anda buat.

MENGIMPORT DOKUMEN HTML MICROSOFT WORD

File latihan halaman Our Story berisi sebuah dokumen yang dibuat dengan
menggunakan Microsoft Word dan di simpan sebagai dokumen HTML. Anda
dapat mengimport dokumen ini ke dalam Dreamweaver, dan membersihkan
banyak kode HTML yang tidak standar dengan menggunakan fasilitas
Dreamweaver yaitu Clean Up Word HTML.
1. Pada saat homepage my_scaal_home terbuka, pilih File | New untuk
membuka file baru.
2. Pilih File | Import | Import Word HTML untuk mengimpor dokumen
Word HTML.
3. Pada kotak dialog Select Word HTML File to Import, arahkan pada
DW3_ourstory_word.html, dan kemudian klik Select.
Anda diarahkan untuk menyimpan dokumen anda.

4. Klik OK.

Edit By SMK Taruna Bhakti /WP/2010

154

5. Untuk latihan ini, Anda akan menerima semua setting standar dalam kotak
dialog. Klik OK.
Laporan Clean Up Word HTML muncul, berisi semua hasil dari proses
cleanup.

6. Klik OK.
7. Pilih File | Save As untuk menyimpan dokumen Our Story; beri nama
my_ourstory.
MEMFORMAT TEKS DENGAN HTML STYLE
Jika kita ingin mempermudah melakukan pengformatan adalah dengan
menggunakan HTML style. Sebuah HTML Style terdiri dari satu atau lebih HTML
tags di mana termasuk di dalamnya warna, jenis huruf, dsb. Anda dapat
membuat HTML style pada seluruh paragraf atau pada teks yang tertentu. Jika
Anda telah membuat HTML style sekali, maka anda dapat menggunakannya pada
beberapa halaman di situs tersebut.
Menerapkan HTML Style
Pada latihan ini, Anda akan menggunakan HTML Style untuk mengformat teks
pada dokumen Our Story.
Edit By SMK Taruna Bhakti /WP/2010

155

1. Pilih Window | HTML Style. HTML Style palette muncul.

2. Pastikan bahwa pilihan Apply dalam keadaan tercentang pada pojok kiri
bawah.
3. Pada dokumen my_ourstory, tempatkan kursor pada paragraf pertama. Anda
dapat menempatkan kursor di mana saja pada suatu paragraf untuk
menerapkan suatu style pada sebuah paragraf.
4. Pada HTML Style palette, klik style Body.
Teks pada paragraf pertama di format ulang oleh style yang baru.
5. Pasanglah style Body pada paragraf-paragraf lain dalam dokumen ini.

Membuat HTML Styles

Sekarang, Anda akan membuat HTML style untuk menonjolkan kata Scaal di
dalam dokumen.
1. Klik icon New Style pada bagian bawah HTML Style palette.

Kotak dialog Define HTML Style muncul.

Edit By SMK Taruna Bhakti /WP/2010

156

2. Pada field Name : ketik scaal.

3. Pada pilihan Apply To, pilih Selection.
Hal ini menyebabkan style akan diaplikasikan pada teks yang tersorot bukan
pada seluruh paragraf.
4. Untuk pilihan When Applying, biarkan sesuai setting yang ada yaitu Clear
Existing Style, di mana akan membersihkan semua style yang diaplikasikan
pada teks yang tersorot ketika anda mengaplikasikan style baru.
5. Untuk Font Attributes, pilih :
Font : Arial, Helvetica, sans-serif
Size : 3
Color : #CC9933 (atau gunakan color picker untuk memilih warna
emas)
Style : klik Other, dan kemudian pilih Emphasis.
6. Klik OK.
Style baru ditambahkan pada HTML Style palette. Perhatikan huruf a di
depan style Scaal; icon ini mengidentifikasikan bahwa sebuah style adalah
selection style dan bukan paragraph style.

Edit By SMK Taruna Bhakti /WP/2010

157

7. Pada jendela dokumen, sorot kata Scaal pada paragraph pertama.

8. Pilih style scaal pada HTML Style palette.
9. Gunakan style scaal pada kata yang lain, dan kemudian tutup HTML Style
palette.
10. Pilih File | Save untuk menyimpan perubahan yang anda buat pada
dokumen my_ourstory.
11. Pilih File | Close untuk menutup dokumen.

MEMBUAT PETA SEBUAH SITUS

Menggunakan Dreamweaver Site Map akan memberikan gambar representatif
visual dari struktur sebuah situs lokal. Anda dapat menggunakan peta situs ( site
map) untuk menambahkan file-file baru dalam suatu situs; untuk menambah,
menghilangkan dan merubah links; dsb.
Pada jendela peta situs, homepage sebuah situs selalu akan berada di atas
sebuah peta situs; di bawah homepage anda akan melihat file-file mana yang
merupakan link dari homepage tersebut.
Anda akan mengatur DW3_scaal_home.html sebagai homepage untuk situs
my_tutorial.
Ada beberapa cara untuk menentukan sebuah homepage sebuah situs. Cara
termudah untuk melakukannya adalah dengan menset homepage dengan
menggunakan context menu.
1. Pilih Window | Site Files.
2. Pada
jendela
situs,
pada
daftar
Local
Folder,
sorot
file
DW3_scaal_home.html. Klik kanan pada file tersebut.
3. Pilih Set as Home Page.
4. Klik icon Site Map pada kiri atas jendela situs.
Jendela situs sekarang muncul dengan dua tampilan: pada sebelah kiri adalah
peta situs, dimana ditampilkan secara grafis, dan pada sebelah kanan adalah
daftar isi dari folderfolder lokal.

Edit By SMK Taruna Bhakti /WP/2010

158

Homepage DW3_scaal_home saat belum belum mempunyai link-link. Anda akan

menambahkan link-link pada halaman ini pada bagian lain dari latihan ini.
Biarkan jendela situs dalam keadaan terbuka agar Anda dapat melihat perubahan
ketika Anda menambahkan link-link pada homepage.

MEMBUAT LINK
Ada beberapa cara untuk membuat link dengan menggunakan Dreamweaver.
Pertama, Anda akan membuat link dari gambar Our Story ke halaman Our Story
dengan menggunakan Property inspector.
1. Pada jendela situs, klik ganda icon DW3_scaal_home.html. File
DW3_scaal_home.html akan terbuka.
2. Pada jendela dokumen, klik gambar Our Story untuk menyorotnya.
Janganmelakukan klik ganda karena Anda akan membuka kotak dialog
Select ImageSource.
3. Pilih Window | Properties untuk membuka property inspector bila belum
terbuka. Image Property inspector menampilkan informasi tentang gambar
yang tersorot.

Edit By SMK Taruna Bhakti /WP/2010

159

Catatan : Pada field Link terdapat tanda angka (#), yang terbuat ketika
andamenggunakan swap image pada sebuah gambar. Jangan menghilangkan
tanda tersebut; tanda itu akan diganti dengan nama dokumen yang akan
Anda link.
4. Pada Property inspector, klik icon folder di sebelah kanan field Link.
5. Pada kotak dialog Select File, sorot my_ourstory.html, dan klik Select
untukmemilih file tersebut. Nama dari file tersebut muncul pada field Link di
Property inspector.
Cara kedua membuat link adalah dengan menggunakan Property inspector
dan jendelasitus. Sekarang Anda akan membuat link pada gambar Products
dengan cara ini.
6. Klik title bar (baris judul) dari jendela situs untuk menjadikannya aktif, atau
pilih Window | Site Files. Rubah ukuran jendela dokumen Anda, jika perlu,
agar anda dapat meletakkannya pada sebelah kiri jendela dokumen dan di
sebelah kanannya jendela situs.

7. Pada jendela dokumen klik gambar products untuk menyorotnya.

8. Pada Property inspector, tarik icon Point-to-File (berada di sebelah field Link)
ke jendela situs, dan tempatkan pada file DW3_products_index.html,
setelah itu lepaskan mouse Anda.
Nama file muncul pada field Link di Property inspector.

Edit By SMK Taruna Bhakti /WP/2010

160

9. Cara ketiga yaitu dengan menggunakan klik kanan. Pada jendela dokumen klik
kanan pada gambar This Week dan pilih Change Link.
10.Pada kotak dialog Select File, sorot DW3_thisweek.html dan klik Select.
11. Pada dokumen Dreamweaver, sorot kata products pada paragraf kedua.
12. Klik kanan dan pilih Make Link.
13. Pada kotak dialog Select File, sorot DW3_products_index.html dan klik
Select.
14. Pilih File | Save untuk menyimpan semua perubahan yang telah Anda buat
di homepage ini.
15. Pilih File | Close untuk menutup halaman ini.
MENERAPKAN SEBUAH TEMPLATE
Anda dapat mengunakan template untuk membuat dokumen-dokumen yang
mempunyai struktur dan penampilan yang sama. Template sangat berguna ketika
Anda ingin agar semua halaman di dalam sebuah situs berbagi karakteristik yang
sama.
Pada kesempatan ini Anda akan membuat sebuah template dari halaman produk
yang sudah ada dan kemudian menggunakan template untuk membuat sebuah
halaman produk yang baru.
Membuat Template
Anda akan membuat sebuah template dari versi latihan halaman produk Scaal
compact disk. Kemudian Anda akan menggunakan template ini untuk membuat
tambahan halaman produk yang lain.
1. Pada jendela situs, dalam daftar Local Folder, klik ganda icon
DW3_products_cd.html untuk membuka file tersebut.
2. Pilih File | Save as Template.
Kotak dialog Save As Template muncul.

Edit By SMK Taruna Bhakti /WP/2010

161

Template yang sudah ada, product_page, sudah dibuat dan diterapkan pada
halamanhalaman situs produk Scaal. Anda akan membuat template versi
Anda sendiri
3. Pada field Save As rubahlah nama template menjadi my_product_page,
dan kemudian klik Save.
Sebuah dokumen baru muncul pada jendela dokumen. Perhatikan bahwa ada
tanda template dimana file tersebut berakhiran .dwt.

Merubah template
Sampai di sini, template baru Anda sama dengan apa yang telah Anda simpan.
Tata letak beberapa area tertentu sama untuk setiap jenis produk : foto
produk, nama produk, penjelasan produk, dan harga produk.
Setiap template terdiri dari bagian yang di kunci dan bagian yang dapat diedit.
Bagian yang dikunci hanya dapat diedit pada template itu sendiri; mereka
tampak dengan warna yang lebih terang pada setiap halaman tempat template
diaplikasikan. Bagian yang dapat diedit berisi sesuatu yang unik pada setiap
halaman di mana template diaplikasikan. Pada sebuah template yang
diaplikasikan, bagian yang diedit berwarna terang.
1. Pada template my_product_page.dwt di jendela dokumen, pilih dan
hapus gambar compact disc; dan kemudian ketik Insert image here
pada sel tabel tersebut.
2. Sorot teks yang baru Anda ketik.

Edit By SMK Taruna Bhakti /WP/2010

162

3. Pilih Modify | Templates | New Editable Region.

Kotak dialog New Editable Region muncul.
4. Pada field Name, ketik Image sebagai nama untuk bagian ini.

5. Klik OK.
Perhatikan bahwa teks sekarang berwarna terang, yang menandakan
bahwa ini adalah bagian yang dapat diedit.
6. Pada jendela dokumen, pilih Scaal Sound, kemudian pilih Modify |
Templates | New Editable Region untuk membuat bagian ini menjadi
bagian yang dapat diedit.
7. Pada field Name di kotak dialog New Editable Region, ketik Name dan
klik OK. Pada jendela dokumen, bagian ini berwarna terang dan
diidentifikasikan dengan nama yang Anda berikan.
8. Pada jendela dokumen, sorot teks deskripsi, dan pilih Modify |
Templates | New Editable Region untuk membuat bagian ini menjadi
bagian yang dapat diedit.
9. Pada field Name di kotak dialog New Editable Region, ketik
Description dan klik OK. Pada jendela dokumen, bagian ini berwarna
terang dan diidentifikasikan dengan nama yang Anda berikan.
10. Pilih File | Save untuk menyimpan template Anda.
Kotak dialog Update Pages muncul, menanyakan apakah Anda ingin
mengupdate semua dokumen di situs lokal Anda. Memilih Yes berati
melakukan perubahan pada halaman-halaman di situs Scaal yang sudah
lengkap, dimana Anda tidak mau melakukan hal itu.
11. Klik No, dan kemudian klik Close untuk menutup kotak dialog Update
Pages.
12. Tutup template tersebut.
Menerapkan Suatu Template
Sekarang Anda akan mengunakan template untuk membuat halaman produk
baru.
1. Pilih File | New from Template.
Kotak dialog Select Template muncul.

2. Pada daftar template, pilih my_product_page sebagai template yang akan

digunakan dan kemudian klik Select.
Edit By SMK Taruna Bhakti /WP/2010

163

Sebuah dokumen baru muncul.

Bagian yang lebih gelap dari dokumen adalah bagian yang dapat diedit;
bagian lainnya adalah bagian yang dikunci dan tidak dapat diedit.
3. Simpanlah dokumen Anda, dan beri nama my_products_mug.html.
Mengedit Dokumen.
1. Tempatkan kursor pada bagian gambar.
2. Pilih Insert | Image, dan pada kotak dialog yang muncul pilih mug.jpg.
Kemudian klik Select.
3. Hapus teks Insert image here.
4. Pada jendela dokumen, di bagian Name, ketik sebuah nama untuk produk,
seperti Commuter Mug, dan hapus tulisan yang lain.
5. Pada jendela dokumen, di bagian Description, ketik teks yang berisi
penjelasan tentang mug dan hapus tulisan yang lain.
6. Simpan dokumen Anda.
7. Tutup dokumen tersebut.
MEMBUAT JUMP MENU
Sebuah jump menu adalah menu pilihan pop-up yang menglink dan membuka
file-file pada jendela browser. Anda akan membuat jump menu yang
menyebabkan konsumen dapat dengan mudah menuju suatu produk tertentu
dalam situs Scaal.
1. Pada jendela situs, klik ganda icon file DW3_products_index.html untuk
membuka file tesebut.
2. Sorot dan hapus teks insert jump menu here.
3. Pada posisi kursor, pilih Insert | Form Object | Jump Menu.
Kotak dialog Insert Jump Menu muncul.

Edit By SMK Taruna Bhakti /WP/2010

164

4. Pada field Text, ketik Select a product. Teks ini membawa pengunjung
untuk mengambil suatu tindakan.
5. Pada bagian Option, pilih Select First Item After URL Change.
6. Klik tombol plus (+) untuk menambah item jump menu yang baru.
7. Pada field Text, ketik Compact disc.
8. Pada field When Selected, Go To URL, klik Browse dan pilih
DW3_products_cd.html. Klik Select untuk memilih file yang akan dibuka
ketika item ini dipilih.
9. Klik tombol plus (+) untuk menambah item jump menu yang baru.
10. Pada field Text, ketik Coffee mug. Kemudian klik Browse dan pilih
DW3_products_mug.html. Klik Select untuk memilih file yang akan
dibuka ketika item ini dipilih.
Kotak dialog Insert Jump Menu Anda harus seperti yang tampak pada
gambar di bawah ini :

Edit By SMK Taruna Bhakti /WP/2010

165

11. Klik OK untuk menutup kotak dialog.

12. Simpan dokumen Anda. Jump menu tidak akan bekerja pada jendela
dokumen, Anda harus melihatnya pada browser.

c. Rangkuman 3
Macromedia Dreamweaver yang telah sampai pada versi 2004 (MX) merupakan

software Web design yang telah memiliki banyak dukungan terhadap banyak
bahasa pemrograman web. Panel-panel pada window Dreamweaver MX memiliki
peran masing-masing dalam membangun sebuah halaman web yang cantik,
sesuai dengan jiwa seni si pemakai.

d. Tugas 3
1. Pelajarilah setiap fungsi dari panel-panel dalam window Dreamweaver MX!
2. Cari dan pelajari sumber bacaan atau buku refensi yang menjelaskan secara
detail tentang pengenalan tool-tool dalam Macromedia Dreamweaver MX .

e. Tes Formatif 3
1. Apakah yang anda ketahui tentang software Web design?
2. Apa yang anda ketahui tentang pemrograman Web?
3. Sebutkan beberapa software Web design yang anda ketahui!

f. Kunci Jawaban Formatif 3

1. Software

Web

design

perangkat

lunak

yang

berguna

untuk

membangun/membuat/mendisain halaman-halaman web, baik yang bersifat

statis maupun dinamis.
2. Pemrograman web, adalah pembuatan halaman web yang didalamnya
mengandung unsur bahasa pemrograman disamping tetap menggunakan tagtag HTML. Biasanya pemrograman web bertujuan untuk membangun webweb dinamis.
3. Software

Web

design:

Microsoft

Frontpage,

Macromedia

Fireworks,

Macromedia Dreamweaver, Adobe ImageReady, Namo Web editor dan lain

lain.

g. Lembar Kerja 3
Alat dan Bahan
Personal Computer (PC).
Kesehatan dan Keselamatan Kerja
1. Berdoalah sebelum memulai kegiatan belajar.
2. Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.

Edit By SMK Taruna Bhakti /WP/2010

166

3. Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung

dengan benar.
4. Setelah selesai, matikan komputer sesuai prosedur!
Langkah Kerja
1. Siapkanlah semua peralatan yang dibutuhkan!
2. Periksa semua kabel penghubung pada komputer.
3. Nyalakan komputer dan pastikan komputer tersebut telah terkoneksi internet
dengan baik.
4. Pastikan PC yang anda pakai sudah memiliki software Web design, jika belum
lakukanlah

instalasi

software

yang

dibutuhkan,

yaitu:

Macromedia

Dreamweaver MX .
5. Jalankan Macromedia Dreamweaver MX, amati dan catat bagian-bagian pada
window Dreamweaver MX. Jika mengalami kesulitan, tanyakan pada
instruktur.
6. Setelah selesai, laporkan hasil kerja Anda kepada instruktur.
7. Setelah diteliti matikan komputer dan rapikan seperti semula.

Edit By SMK Taruna Bhakti /WP/2010

167

BAB III
EVALUASI
A. Tes Tulis
Jawablah pertanyaan berikut ini dengan singkat dan jelas!
1. Jelaskan masing-masing fungsi dari tag-tag berikut:
a. <h1>
b. <p>
c. <br>
d. <hr>
2. Apakah fungsi dari link, form dan frame dalam pembuatan web?
3. Apa perbedaan frame dan frameset?
4. Apa perbedaan checkbox dan radio button?
5. Apakah fungsi dari tombol Submit dan Reset?
6. Apa yang anda ketahui dengan Variable dan Konstanta ?.
7. Sebutkan macam-macam statement kendali dan apa fungsinya ?

B. Tes Praktek
Buatlah halaman web dengan content yang lengkap. Web yang anda buat digunakan
untuk mengelola Sistem Administrasi Siswa sekolah anda. Sebelum membuat
halaman web tersebut terlebih dahulu anda harus merencanakan disain dan layout
halaman web, struktur data dan algoritma program, serta menentukan model dan
skema data base (terdiri dari tabel dan field apa saja, relasi dan query-nya). Setelah
proyek anda selesai, silahkan membuat laporan dan serahkan ke guru pembimbing
anda masing-masing.
Ketentuan minimal dari program yang akan anda buat adalah bahwa program anda
nantinya minimal akan dibuka/diakses oleh Administrator, Guru/karyawan, Siswa dan
Orang Tua/wali Siswa.
Administrator
Memiliki hak akses tertinggi dalam program tersebut. Data-data yang dapat
dimasukkan dan diubah oleh administrator adalah:
1. Data Profile Sekolah
2. Data Guru/Karyawan
3. Data Siswa
4. Data Orang Tua/Wali Siswa
5. Data Jurusan
6. Data Kelas
7. Data Pelajaran

Edit By SMK Taruna Bhakti /WP/2010

168

8. Data Tempuh
9. Data Absensi
10. Data Nilai Siswa
11. Data User
Guru/karyawan
Untuk user guru, data yang dapat dimasukkan dan diubah adalah:
1. Data Nilai untuk mata pelajaran yang diajar
2. Ubah Passwordnya sendiri
Siswa
User siswa hanya memiliki hak akses untuk melihat nilai dan absensinya sendiri.
Dan dapat merubah password milik siswa tersebut.
Orang Tua/wali Siswa
User Orang Tua/Wali memiliki hak akses untuk melihat nilai dan absensi
putranya. Dan dapat merubah password miliknya sendiri.
Ketentuan diatas adalah ketentuan minimal, silahkan dilengkapi sebagus mungkin.
Silahkan melakukan studi kasus di sekolah anda sendiri atau di sekolah lain untuk
membantu anda dalam melengkapi content halaman web dan untuk menentukan
field-field dari tabel yang diperlukan.

C. Kunci Jawaban Tes Tulis

1. Fungsi dari tag:
a. <h1> : digunakan untuk mengatur ukuran huruf pada header dengan angka
1 berarti mempunyai ukuran paling besar.
b. <p>

: digunakan untuk berpindah alinea atau membuat paragraf baru

c. <br> : Digunakan untuk pindah baris baru.

d. <hr> : digunakan untuk membuat garis horisontal
2. Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain,
dapat berupa teks maupun gambar.
Form, digunakan untuk mengumpulkan informasi dari pengunjung (berinteraksi
dengan pengunjung) karena form dapat berupa model isian yang harus diisi
pengunjung dan akan dibca oleh pemilik web.
Frame, merupakan pembagi halaman.
3. Frame adalah dokumen yang terdapat di dalam frameset dengan border yang
mengelilinginya.

Sedangkan

frameset,

adalah

suatu

frame

yang

dapat

menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa

frameset yang lainnya.
4. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk menentukan
pilihan dari suatu daftar pilihan. Perbedaanya terletak pada jumlah pilihan yang
dapat dipilih. Pada checkbox, pengunjung halaman web dapat memilih beberapa

Edit By SMK Taruna Bhakti /WP/2010

169

dari daftar pilihan, namun dengan radio button, pengunjung hanya berhak
menentukan satu pilihan saja.
5. Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan dalam
form untuk selanjutnya diolah oleh server. Dan tombol reset berfungsi untuk
mengosongkan dan atau mengembalikan ke nilai default data yang ada dalam
form.
6. Variable digunakan untuk menyimpan data sementara dan nilainya bisa berubahubah setiap kali program dijalankan. Dalam PHP, variable diawali dengan $ dan
diikuti dengan nama variablenya.
Konstanta adalah variable yang nilainya tetap.
7. Statement kendali terdiri dari:
a. Statement IF, digunakan untuk melakukan eksekusi suatu statement secara
bersyarat.
b. Statement WHILE, digunakan untuk melakukan perulangan dalam sebuah
statement sampai kondisi tertentu terpenuhi.
c. Statement FOR, digunakan untuk mengulangi sejumlah blok statement sampai
jumlah atau kondisi terpenuhi. Fungsinya sama dengan statement while.
Bedanya, dalam statement for jumlah perulangan sudah diketahui diawal dan
harus dituliskan nilai awal dan nilai akhir dari variabel penghitung.
d. Statement SWITCH, digunakan untuk membandingkan suatu variable dengan
beberapa nilai serta menjalankan statement tertentu jika nilai variable sama
dengan nilai yang dibandingkan.
e. Statement REQUIRE, digunakan untuk membaca nilai variable dan fungsifungsi dari sebuah file lain.
f. Statement INCLUDE, digunakan untuk menyertakan isi suatu file tertentu.

Edit By SMK Taruna Bhakti /WP/2010

170

D. Lembar Penilaian Tes Praktek

PEDOMAN PENILAIAN
Nama Peserta

No. Induk

Program Keahlian

Teknik Komputer dan Jaringan

Nama Jenis Pekerjaan

Web Programing

No.
1
I

Aspek Penilaian
2

1.2. Menganalisa jenis desain

5
10

Membuat Layout
2.1. Penyiapan Layout

2.2. Menentukan warna dan gambar

5
10

Proses (Sistematika & Cara Kerja)

3.1. Cara Instalasi program aplikasi

3.2. Cara menyiapkan struktur data dan

algoritma program

3.3. Cara menyiapkan Database

3.4. Cara koding program

3.5. Cara melakukan layout

3.6. Cara menetapkan warna

5
Sub Total

IV

Ket.

1.1. Persiapan Hardware dan Software

Sub Total
III

Skor
Perolehan

Perencanaan

Sub Total
II

Skor
Maks

30

Kualitas Produk Kerja

4.1. Halaman Web

Layut halaman web

2,5

Komposisi warna dan gambar

2,5

4.2. Data Base

Desain model database

2,5

Relation

2,5

Query

2,5

Edit By SMK Taruna Bhakti /WP/2010

171

No.
1

Aspek Penilaian
2

Skor
Maks

Skor
Perolehan

Ket.

4.3. Bahasa Program

Penggunaan server side script

2,5

Program dibuat dengan efisien

2,5

4.4. Security
Keamanan Data

Back up data

2,5

Sistem data log

2,5

Keamanan Akses

Autentifikasi user

2,5

Pembatasan hak akses

2,5

4.5. Pekerjaan diselesaikan dengan waktu

yang telah ditentukan
Sub Total
V

30

Sikap/Etos Kerja
5.1. Tanggung jawab

5.2. Ketelitian

5.3. Inisiatif

5.4. Kemandirian

2
Sub Total

VI

2,5

10

Laporan
6.1. Sistimatika penyusunan laporan

6.2. Kelengkapan bukti fisik

6
Sub Total
Total

Edit By SMK Taruna Bhakti /WP/2010

10
100

172

KRITERIA PENILAIAN
No. Aspek Penilaian
I

1.4. Menganalisa jenis desain

Hardware dan Software

disiapkan sesuai kebutuhan

Hardware dan Software

disiapkan sesuai kebutuhan

Merencanakan sesuai tahapan/

proses desain

Tidak merencanakan tahapan/

proses desain

Layout web disiapkan sesuai

prosedur

Layout web tidak disiapkan

sesuai prosedur

Halaman web dilengkapi

dengan warna dan gambar

Halaman web tidak dilengkapai

dengan warna dan gambar

Membuat Layout
2.1. Penyiapan Layout

2.2. Menentukan warna dan

gambar

III

Skor

Perencanaan
1.3. Persiapan Hardware dan
Software

II

Kriteria Penilaian

Proses (Sistematika & Cara Kerja)

3.1. Cara Instalasi program
aplikasi

3.2. Cara menyiapkan struktur

data dan algoritma program

3.3. Cara menyiapkan Database

3.4. Cara koding program

Edit By SMK Taruna Bhakti /WP/2010

Program aplikasi diinstall

dengan benar sesuai dengan
kebutuhan

Program aplikasi tidak diinstall

dengan benar sesuai dengan
kebutuhan

Struktur data dan algoritma

program disiapkan sesuai
dengan rencana

Struktur data dan algoritma

program disiapkan tidak sesuai
dengan rencana

Database disiapkan sesuai

dengan normalisasi database

Database disiapkan tidak

sesuai dengan normalisasi
database

Program di buat sesuai dengan

algoritma program dan efisien

Program di buat tidak sesuai

dengan algoritma program dan
tidak efisien

173

No. Aspek Penilaian

3.5. Cara melakukan layout

3.6. Cara menetapkan warna

IV

Kriteria Penilaian

Skor

Layout memenuhi dasar-dasar

estetika

Layout tidak memenuhi dasardasar estetika

Penggunaan warna memenuhi

harmoni warna

Penggunaan warna tidak

harmoni

Kualitas Produk Kerja

4.1. Halaman Web

Layut halaman web

Komposisi warna dan

gambar

Halaman web dibuat sesuai

dengan layout

2,5

Halaman web tidak dibuat

sesuai dengan layout

0,5

Komposisi warna dan gambar

selaras

2,5

Komposisi warna dan gambar

tidak selaras

0,5

Database dibuat menggunakan/sesuai DMD

2,5

Database dibuat tidak menggunakan/sesuai DMD

0,5

Menggunakan Database relasi

2,5

Tidak menggunakan database

relasi

0,5

Menggunakan query data

2,5

Tidak menggunakan query

data

0,5

Web dibuat dengan teknologi/

bahasa server side script

2,5

Web dibuat tidak dengan

teknologi/bahasa server side
script

0,5

Program dibuat se-efisien

mungkin

2,5

Program dibuat terlalu panjang

0,5

Dalam halaman web terdapat

fasilitas aplikasi backup data

2,5

Dalam halaman web tidak

terdapat fasilitas aplikasi
backup data

0,5

4.2. Data Base

Disain model database

Relation

Query

4.3. Bahasa Program

Penggunaan server side

script

Program dibuat dengan

efisien

4.4. Security
Keamanan Data

Back up data

Edit By SMK Taruna Bhakti /WP/2010

174

No. Aspek Penilaian

Sistem data log

Kriteria Penilaian

Skor

Terdapat fasilitas pencatatan

sistem data log

2,5

Tidak terdapat fasilitas

pencatatan sistem data log

0,5

Halaman web diberi fasilitas

autentifikasi user

2,5

Halaman web tidak diberi

fasilitas autentifikasi user

0,5

Pemakai dbedakan hak

aksesnya

2,5

Pemakai tidak dibedakan hak

aksesnya

0,5

Diselesaikan tepat waktu

2,5

Diselesaikan tidak tepat waktu

0,5

Membereskan kembali alat dan

bahan yang dipergunakan

Keamanan Akses

Autentifikasi user

Pembatasan hak akses

4.5. Pekerjaan diselesaikan

dengan waktu yang telah
ditentukan
V

Sikap/Etos Kerja
5.1. Tanggung jawab

Tidak membereskan alat dan

bahan yang dipergunakan
5.2. Ketelitian

Tidak banyak melakukan

kesalahan kerja
Banyak melakukan kesalahan
kerja

5.3. Inisiatif

Memiliki inisiatif bekerja

Kurang/tidak memiliki inisiatif
kerja

5.4. Kemandirian

VI

Bekerja tanpa banyak

diperintah

0,5
3
0,5
3
0,5
2

Bekerja dengan banyak

diperintah

0,5

Laporan disusun sesuai

sistimatika yang telah
ditentukan

Laporan disusun tanpa

sistimatika

Melampirkan bukti fisik hasil

penyusunan

Tidak melampirkan bukti fisik

Laporan
6.1. Sistimatika penyusunan
laporan

6.2. Kelengkapan bukti fisik

Kategori kelulusan:
70 79
: Memenuhi kriteria mininal. Dapat bekerja dengan bimbingan.
80 89
: Memenuhi kriteria minimal. Dapat bekerja tanpa bimbingan.
90 100
: Di atas kriteria minimal. Dapat bekerja tanpa bimbingan.
Edit By SMK Taruna Bhakti /WP/2010

175

BAB IV
PENUTUP

Setelah menyelesaikan modul ini dan mengerjakan semua tugas serta evaluasi maka
berdasarkan kriteria penilaian, peserta diklat peserta diklat dapat dinyatakan lulus/tidak
lulus. Apabila dinyatakan lulus maka dapat melanjutkan ke modul berikutnya sesuai
dengan alur peta kududukan modul, sedangkan apabila dinyatakan tidak lulus maka
peserta diklat harus mengulang modul ini dan tidak diperkenankan mengambil modul
selanjutnya.

Edit By SMK Taruna Bhakti /WP/2010

176

DAFTAR PUSTAKA
1. Bimo Sunarfrihantono, ST, PHP dan MySQL Untuk WEB, Andi 2003
2. Bunafit Nugroho, PHP & MySQL Dengan Editor Dreamweaver MX, Andi, 2004
3. Mico Pardosi, Bahasa Pemrograman Internet, HTML dan Javascript, Indah,
2001
4. MADCOMS, Aplikasi Manajemen Database Pendidikan Berbasis Web Dengan

PHP dan MySQL, Andi, 2005

5. Sutarman, S.Kom, Membangun Aplikasi Web Dengan PHP dan MySQL, Graha
Ilmu, 2003
6. Teguh Wahyono, PHP TRIAD Fundamental (Memahami Pemrograman Web

Dengan PHP dan MySQL dalam 24 Jam), Gava Media, 2005

7. Visibooks, HTML and JavaScript for Visual Learners,
8. Yahya Kurniawan, ST, Aplikasi Web Database dengan PHP dan MySQL, Elex
Media Komputendo, 2003.
9. http://www.ilmukomputer.com
10. http://www.klik-kanan.com

Edit By SMK Taruna Bhakti /WP/2010

177