KATA PENGANTAR

Modul dengan judul Web

Web Design & Web Programing
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
Keyframe

Petunjuk Instalasi

: 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

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

Tangga Wakt
l
u

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.

Edit By SMK Taruna Bhakti /WP/2010

Tempa
Tanda
Alasan
t
Tanga
Perubahan
Belajar
n Guru

Jenis Kegiatan

Tangga Wakt
l
u

Tempa
Tanda
Alasan
t
Tanga
Perubahan
Belajar
n Guru

Mempersiapkan software
bantu dalam pembuatan
halaman web.
Melakukan pembuatan
halaman web dengan
software bantu.

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
obyek-obyek 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
Edit By SMK Taruna Bhakti /WP/2010

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

Edit By SMK Taruna Bhakti /WP/2010

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

alink,

leftmargin

dan

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

Edit By SMK Taruna Bhakti /WP/2010

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:

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

Edit By SMK Taruna Bhakti /WP/2010

Tip: Jika anda menggunakan Netscape Navigator, klik Open

Page kemudian Choose File
2. Setelah jendela Open terbuka, klik tombol Browse

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

Edit By SMK Taruna Bhakti /WP/2010

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

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

dipanggil adalah default.html

Kode Warna

Edit By SMK Taruna Bhakti /WP/2010

Web

server

IIS,

file

yang

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

Gree
n

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

Edit By SMK Taruna Bhakti /WP/2010

10

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>

Hasilnya akan terlihat seperti:

Edit By SMK Taruna Bhakti /WP/2010

11

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 masingmasing 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
Edit By SMK Taruna Bhakti /WP/2010

12

pengguna yang lain (pengakses web kita). Pendeknya kita

tidak usah menggunakan font-font yang bentuknya anehaneh, 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:
Edit By SMK Taruna Bhakti /WP/2010

13

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

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

Membuat short inline quotation

Membuat variable name, selalu dalam italics.

Edit By SMK Taruna Bhakti /WP/2010

14

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

Edit By SMK Taruna Bhakti /WP/2010

15

bullet

(tidak

bernomor).

List

entries

didefinisikan dengan tag <LI>.

Pada jenis ini tidak

memerlukan pengurutan data.

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

16

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>

Edit By SMK Taruna Bhakti /WP/2010

17

Hasil dari kode di atas adalah:

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

18

 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

19

 Extended
untuk

Quotations:

membuat

kutipan

<BLOCKQUOTE>,
panjang,

sehingga

digunakan
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

Edit By SMK Taruna Bhakti /WP/2010

20

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 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>
Edit By SMK Taruna Bhakti /WP/2010

21

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

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>
Edit By SMK Taruna Bhakti /WP/2010

22

</body>
</html>

Hasil dari kode-kode diatas adalah sebagai berikut:

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

Edit By SMK Taruna Bhakti /WP/2010

23

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.
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
Edit By SMK Taruna Bhakti /WP/2010

24

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

25

5. Layout Halaman Web dengan Tabel (Table)

Table merupakan cara untuk menampilkan informasi dalam halaman
web dengan bentuk kolom dan baris.

Edit By SMK Taruna Bhakti /WP/2010

26

Tabel dan Layout Halaman Web

Hampir semua web site yang berkualitas dan profesional,
dirancang

dengan

menggunakan

spreadsheet yang memiliki sel dan

Tabel.

Layaknya

sebuah

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

27

cell

cell

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

Edit By SMK Taruna Bhakti /WP/2010

28

 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.
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
Edit By SMK Taruna Bhakti /WP/2010

29

Gresik</td>
</tr>
</table>
</body>
</html>

Hasilnya adalah sebagai berikut:

Edit By SMK Taruna Bhakti /WP/2010

30

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

31

<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

32

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

33

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
Edit By SMK Taruna Bhakti /WP/2010

34

lebar dan tinggi tabel terhadap BROWSER sedangkan jika digunakan

pada elemen TH dan TD, 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

35

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

36

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

BORDERCOLORLIG
HT

Mengubah warna border bagian atas dan kiri

BORDERCOLORDA
RK

Mengubah warna border bagian bawah dan

kanan

Penggabungan Baris/Kolom
Untuk menggabungkan baris/kolom (merge) digunakan atribut
COLSPAN dan ROWSPAN. COLSPAN digunakan untuk menggabungkan

beberapa

kolom

menjadi

sedangan

ROWSPAN

menggabungkan beberapa baris menjadi 1.

Cellpadding Dan Cellspacing
CELLPADDING digunakan untuk mengatur spasi antara border
dengan

tulisan,

sedangkan

CELLSPACING

mengatur spasi antar dua buah sel.

contoh1_16.html
<html>
<head>
<title>::: Contoh Merge, Cell dan Pedd:::</title>
Edit By SMK Taruna Bhakti /WP/2010

37

digunakan

untuk

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

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>
</frameset>
</html>

Edit By SMK Taruna Bhakti /WP/2010

38

<frame src>

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

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>

4
Edit By SMK Taruna Bhakti /WP/2010

39

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>

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

Edit By SMK Taruna Bhakti /WP/2010

40

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

Edit By SMK Taruna Bhakti /WP/2010

41

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>

File kiri.html
<html>
<head>
<title>::: Latihan Membuat Frame:::</title>
</head>
<body bgcolor=#ffffff>
Edit By SMK Taruna Bhakti /WP/2010

42

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

File proli.html
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffff>
Edit By SMK Taruna Bhakti /WP/2010

43

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

Hasilnya adalah sebagai berikut :

Edit By SMK Taruna Bhakti /WP/2010

44

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

45

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

46

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

47

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
Edit By SMK Taruna Bhakti /WP/2010

48

<option value-pilihan3>Pilihan 3
dst
</select>

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

Edit By SMK Taruna Bhakti /WP/2010

49

</textarea>

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

50

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>
Edit By SMK Taruna Bhakti /WP/2010

51

</html>

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,

Edit By SMK Taruna Bhakti /WP/2010

52

 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.
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)
b)
c)
d)

<h1>
<p>
<br>
<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
dikirimkan ke e-mail anda.

Edit By SMK Taruna Bhakti /WP/2010

53

hasilnya akan

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.

Edit By SMK Taruna Bhakti /WP/2010

54

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

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>
<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>
Edit By SMK Taruna Bhakti /WP/2010

55

atau

</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>
<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.
Edit By SMK Taruna Bhakti /WP/2010

56

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

57

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 script-script 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, tagtag 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.

Edit By SMK Taruna Bhakti /WP/2010

53

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

dikirimkan

ke

dijalankan

browser

hanya

pada

server

hasilnya

saja.

sedangkan
Ketika

yang

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 MS-SQL, Velocis, IBM DB2, Interbase,
Edit By SMK Taruna Bhakti /WP/2010

54

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.
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, komponenkomponen 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 diberi-kan, 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.

Edit By SMK Taruna Bhakti /WP/2010

56

e. Selanjutnya lakukan beberapa langkah untuk mengaktifkan

semua komponen PhpTriad dalam komputer anda. Langkah
pertama,

jalankan

dilakukan

dari

PHPTriad

Start

Menu

PHPTriad Control Panel.

Control
Program

Panel,

yang

PHP

dapat

Triad

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

57

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

58

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
Edit By SMK Taruna Bhakti /WP/2010

59

membuat file-file PHP yang disimpan dalam direktori menurut

selera anda sendiri.

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)
Edit By SMK Taruna Bhakti /WP/2010

60

i. Ok, proses instalasi semua software yang kita butuhkan sekarang

telah selesai. Dan sekarang mari kita lanjutkan ke materi
berikutnya.

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.
Edit By SMK Taruna Bhakti /WP/2010

61

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 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
Edit By SMK Taruna Bhakti /WP/2010

62

$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;
?>

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
Edit By SMK Taruna Bhakti /WP/2010

63

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

Edit By SMK Taruna Bhakti /WP/2010

64

9. Operator
Operator adalah simbol/tanda yang digunakan untuk melakukan
operasi-operasi matematis atau operasi string. Sedangkan operand
adalah data yang dioperasikan atau dimanipulasi. Operator dapat
dikelompokkan dalam 4 kategori, yaitu:
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:
Operato
r

Fungsi

+=

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;

Edit By SMK Taruna Bhakti /WP/2010

65

Contoh

.=

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, variabel, atau pernyataan) dan menghasilkan nilai True
atau

False.

Operator-operator

yang

termasuk

operator

pembanding adalah:
Operato
r

Fungsi
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

==

===

!= atau
<>

Edit By SMK Taruna Bhakti /WP/2010

66

Contoh

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

atau sama dengan $b;

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:
Operato
r

Fungsi

&& atau
AND

Operasi Logika AND

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

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 OR

Contoh

Operator Bitwise
Operator bitwise digunakan untuk operasi bilangan biner.
Operator-operator yang termasuk operator bitwise adalah:
Operato
r

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

++$a atau $a++

Pre/Post

--$b atau $b--

Edit By SMK Taruna Bhakti /WP/2010

67

Penggunaan

Pre/Post
Increment

Decrement

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:
Priorita
s
Tertinggi

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

Terendah

OR

10. Dasar-dasar Struktur Program Input-Output

Struktur yang paling dasar dalam sebuah pemrograman adalah
struktur

input-output.

Edit By SMK Taruna Bhakti /WP/2010

68

Input

merupakan

interface

untuk

memasukkan data, kemudian data di olah dan selanjutnya hasil

pengolahan ditampilkan pada komponen output.

Input
Input-Output Sederhana

Proses

Output

Sebagai contoh, kita akan membuat program sederhana untuk

menghitung luas segitiga berdasarkan flowchart berikut:

contoh2_3.php

Mulai

<html>
<head>
Input
Alas
<title>.:: Latihan membuat input
Output::.</title>
Input
Tinggi
</head>
<body>
<font face=verdana size=2>
Output
<?
Cetak
Luas
//Mendeklarasikan data input
$alas=20;
$tinggi=5;

Proses Hitung Luas Segitiga

//Proses hitung luas segitiga
Luas=0,5 * Alas * Tinggi
$luassegitiga=0.5*$alas*
$tinggi;
//Cetak hasil
Selesai
echo "Besar Alas = $alas
<br>";
echo "Besar Tinggi = $tinggi
<br>";
echo "Luas Segi Tiga Adalah = $luassegitiga<br>";
?>
Edit By SMK Taruna Bhakti /WP/2010

69

</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>
<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>
Edit By SMK Taruna Bhakti /WP/2010

70

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

Hasilnya adalah:

Edit By SMK Taruna Bhakti /WP/2010

71

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

72

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

73

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
Selesai

Edit By SMK Taruna Bhakti /WP/2010

74

Lulus dan
Kompeten

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

75

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

76

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

JumlahBaya
r 500000

Y
Diskon=0.5
*JumlahBay
ar

JumlahBaya
r 100000

Y
Diskon=0.1
*JumlahBay
ar

JumlahBaya
r 50000

Y
Diskon=0.0
5*JumlahBa
yar

Diskon=0

TotalBayar=
JumlahBayarDiskon
Selesai

Dari flowchart tersebut dapat kita buat script programnya,

sebagai berikut:
contoh2_8.php
<html>
<head>
<title>.:: Program Menghitung Discount::.</title>
Edit By SMK Taruna Bhakti /WP/2010

77

</head>
<body>
<font face=verdana size=2>
<form>Jumlah Bayar
<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.

Edit By SMK Taruna Bhakti /WP/2010

78

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.
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>
Edit By SMK Taruna Bhakti /WP/2010

79

<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>
<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 [ab]</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]';
}
Edit By SMK Taruna Bhakti /WP/2010

80

elseif ($operasi==2)
{
$c=$a-$b;
$oper='[a - b]';
}
elseif ($operasi==3)
{
$c=$a*$b;
$oper='[a * b]';
}
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
Edit By SMK Taruna Bhakti /WP/2010

$genap=$genap
+2

81
Bilanga genap dari 2 s/d
batas

adalah:$genap

Selesai

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:
Edit By SMK Taruna Bhakti /WP/2010

82

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

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:

Edit By SMK Taruna Bhakti /WP/2010

83

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.
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 sewaktu-waktu. 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
Edit By SMK Taruna Bhakti /WP/2010

84

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>

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);
?>

Edit By SMK Taruna Bhakti /WP/2010

85

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:

12.c. Fungsi String

Edit By SMK Taruna Bhakti /WP/2010

86

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)

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

Edit By SMK Taruna Bhakti /WP/2010

87

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])

Parameter format selalu ditandai dengan karakter persen (%),

kemudian

diikuti

oleh

karakter

spesifikasi

untuk

memberikan

tertentu

hasil

yang

dengan

memberikan

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)

Edit By SMK Taruna Bhakti /WP/2010

88

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 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)
Edit By SMK Taruna Bhakti /WP/2010

89

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)

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
Edit By SMK Taruna Bhakti /WP/2010

90

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

91

12.d. Fungsi Matematika

Yaitu fungsi-fungsi yang digunakan untuk memanipulasi bilanganbilangan 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

92

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>");
Edit By SMK Taruna Bhakti /WP/2010

93

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>

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"

Edit By SMK Taruna Bhakti /WP/2010

94

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")

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

Keterangan
Jam
Hari

Edit By SMK Taruna Bhakti /WP/2010

95

minutes
mon
month
seconds
wday
weekday
yday
year

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

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.
Fungsi-fungsi yang termasuk fungsi variable adalah:
Edit By SMK Taruna Bhakti /WP/2010

96

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)

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

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"))
{
Edit By SMK Taruna Bhakti /WP/2010

97

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:

Setelah

file

tersebut

disimpan,

kembali

jalankan

file

contoh2_22.php. Sehingga akan didapatkan hasil seperti gambar

berikut ini:

Edit By SMK Taruna Bhakti /WP/2010

98

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

//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");
}
}
Edit By SMK Taruna Bhakti /WP/2010

99

?>
</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:

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,
Edit By SMK Taruna Bhakti /WP/2010

100

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)

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,

1 16777215 karakter

MEDIUMTEXT
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

Edit By SMK Taruna Bhakti /WP/2010

101

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 perintahperintah MySQL. Setiap perintah SQL harus diakhiri dengan tanda
titik-koma ;.
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
Edit By SMK Taruna Bhakti /WP/2010

102

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/Fiel
d

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

karakter dan tidak boleh kosong

40

email

char(25), not null

Teks dengan panjang maksimal

karakter dan tidak boleh kosong

25

alamat

char(255), not null

Teks dengan panjang maksimal

karakter dan tidak boleh kosong

kota

char(20), not null

Teks dengan panjang maksimal

karakter dan tidak boleh kosong

255
20

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

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

Edit By SMK Taruna Bhakti /WP/2010

103

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;

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;
Edit By SMK Taruna Bhakti /WP/2010

104

 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;

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

menjadi

[email protected].
update anggota set [email protected] where nomor=2;

Edit By SMK Taruna Bhakti /WP/2010

105

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)

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:
Edit By SMK Taruna Bhakti /WP/2010

106

$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>
<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>");
Edit By SMK Taruna Bhakti /WP/2010

107

$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.
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>
Edit By SMK Taruna Bhakti /WP/2010

108

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

Hasil dari script tersebut adalah:

Edit By SMK Taruna Bhakti /WP/2010

109

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>
<tr>
<td width=15%>Alamat</td>
Edit By SMK Taruna Bhakti /WP/2010

110

<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;
// ----- perintah SQL untuk memasukkan data ke tabel anggota
$sql2="insert into $tablename(nomor,nama,email,alamat,kota) values ('$nomor',";
Edit By SMK Taruna Bhakti /WP/2010

111

$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 aplikasiaplikasi

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

112

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:
Edit By SMK Taruna Bhakti /WP/2010

113

session_unregister(namavar)
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>
Edit By SMK Taruna Bhakti /WP/2010

114

</html>

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>";
}
?>
Edit By SMK Taruna Bhakti /WP/2010

115

</body>
</html>

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

Edit By SMK Taruna Bhakti /WP/2010

116

</h3>";

File hal2.php
<?

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

?>

Edit By SMK Taruna Bhakti /WP/2010

117

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

118

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

119

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

120

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

121

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

122

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

123

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

124

Gamber 8. View.php
Kesimpulan :
Untuk menampilkan database mysql di Browser dengan Php langkahlangkahnya :

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

125

<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

126

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

127

Gambar 12. input.php

Untuk melihat data buka lagi file view.php

Gambar 13. Tambahkan record

Edit By SMK Taruna Bhakti /WP/2010

128

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

129

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

130

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

131

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>

Edit By SMK Taruna Bhakti /WP/2010

132

Gambar 15. edit.php?id=1

Edit By SMK Taruna Bhakti /WP/2010

133

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

134

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

135

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.

Searching
Edit By SMK Taruna Bhakti /WP/2010

136

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

137

Gambar 18: Cari.htm

Tabel 12: Source code cari.php

Edit By SMK Taruna Bhakti /WP/2010

138

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

139

Rangkuman 2
Bahasa pemrograman PHP terbukti sangat handal dalam
membangun sebuah program berbasis web
Waktu yang digunakan untuk memproses data dan menjalankan
perintah-perintah 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 aturanaturan sebagai berikut:
Edit By SMK Taruna Bhakti /WP/2010

140

 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.
Buat halaman Login seperti gambar dibawah ini. Tombol Login
untuk masuk ke halaman berikutnya jika user sudah terdaftar.
Halaman
yang
LOGIN
dikunjungi
berdasarkan
level
User Name
user, jika user adalah
Password
administrator maka
halaman yang dibuka
Logi
Dafta
adalah
halaman
n
r
administrator jika
user name adalah user biasa maka yang 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
Simpan

User
Biasa

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.
Edit By SMK Taruna Bhakti /WP/2010

141

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.

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:

Edit By SMK Taruna Bhakti /WP/2010

142

 Gunakan statement perulangan untuk mengerjakan tugas diatas.

Selesai

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 fungsi-fungsi dari sebuah file lain.

Statement INCLUDE, digunakan untuk menyertakan isi suatu file

tertentu.

Program untuk menghitung faktorial adalah:

File faktorial.php
Edit By SMK Taruna Bhakti /WP/2010

143

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

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.
Edit By SMK Taruna Bhakti /WP/2010

144

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

145

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 masing-masing. 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
Edit By SMK Taruna Bhakti /WP/2010

146

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

Edit By SMK Taruna Bhakti /WP/2010

147

Gambar 2. Window dan Panel Dreamweaver MX

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.
Edit By SMK Taruna Bhakti /WP/2010

148

c. Menentukan Situs Lokal

Mulailah membangun situs Anda dengan menentukan situs lokal untuk
file-file dalam Scall_site. Sebuah situs adalah lokasi penyimpanan
semua dokumen-dokumen 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

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 folderfolder dan file-file di dalam situs lokal my_tutorial. Daftar ini juga
bertindak sebagai sebuah file manager, yang memperbolehkan
Anda untuk mengcopy, paste, menghapus, memindahkan, dan
membuka file seperti pada windows explorer.

Edit By SMK Taruna Bhakti /WP/2010

149

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

Edit By SMK Taruna Bhakti /WP/2010

150

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.

3. Klik OK
Judul muncul pada baris judul dari jendela dokumen Dreamweaver.
MENGGUNAKAN LAYER UNTUK MENGATUR TATA LETAK SEBUAH
HALAMAN

Edit By SMK Taruna Bhakti /WP/2010

151

Layer cocok digunakan untuk membuat tata letak halaman yang

kompleks karena Anda dapat dengan mudah merubah posisi elemenelemen 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.

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.

Edit By SMK Taruna Bhakti /WP/2010

152

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.

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 :

Edit By SMK Taruna Bhakti /WP/2010

153

2. Pilih Insert | Image.

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

Menambahkan Gambar Navigasi

Sekarang Anda akan menambahkan gambar-gambar untuk menjadi
tombol navigasi. Setelah Anda menambahkan gambar tombol, beri
spasi antara gambar-gambar 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.

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.
Edit By SMK Taruna Bhakti /WP/2010

154

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.

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 meng- Copy + 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
Edit By SMK Taruna Bhakti /WP/2010

155

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.

Mengatur Posisi Layer-Layer

Sekarang Anda telah selesai mendesain halaman Anda dengan
menggunakan layer-layer. Anda dapat mengkonversi layer-layer
Edit By SMK Taruna Bhakti /WP/2010

156

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

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.

Edit By SMK Taruna Bhakti /WP/2010

157

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.

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.
Edit By SMK Taruna Bhakti /WP/2010

158

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.

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.

Edit By SMK Taruna Bhakti /WP/2010

159

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.

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.
Edit By SMK Taruna Bhakti /WP/2010

160

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.

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.

Edit By SMK Taruna Bhakti /WP/2010

161

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
mengformat teks pada dokumen Our Story.
1. Pilih Window | HTML Style. HTML Style palette muncul.

untuk

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
Edit By SMK Taruna Bhakti /WP/2010

162

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.

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
Edit By SMK Taruna Bhakti /WP/2010

163

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.

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

164

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

165

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

166

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

167

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

168

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.
Edit By SMK Taruna Bhakti /WP/2010

169

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.
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.
Edit By SMK Taruna Bhakti /WP/2010

170

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.

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

171

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

sumber

bacaan

dalam

window

Dreamweaver MX!
2. Cari

dan

pelajari

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

Edit By SMK Taruna Bhakti /WP/2010

172

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 tag-tag HTML. Biasanya pemrograman web
bertujuan untuk membangun web-web 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.
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 bagianbagian 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

173

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

Edit By SMK Taruna Bhakti /WP/2010

174

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

Edit By SMK Taruna Bhakti /WP/2010

175

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. 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.
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
fungsi-fungsi dari sebuah file lain.
f. Statement INCLUDE, digunakan untuk menyertakan isi suatu file
tertentu.

Edit By SMK Taruna Bhakti /WP/2010

176

D. Lembar Penilaian Tes Praktek

PEDOMAN PENILAIAN
Nama Peserta

No. Induk

Program Keahlian

Nama Jenis Pekerjaan :

No
.
1
I

Teknik Komputer dan

Jaringan

Web Programing

Aspek Penilaian
2

Ket.

1.1. Persiapan Hardware dan Software

1.2. Menganalisa jenis desain

5
10

Membuat Layout
2.1. Penyiapan Layout

2.2. Menentukan warna dan gambar

Sub Total
IX

Skor
Peroleha
n

Perencanaan

Sub Total
V

Skor
Mak
s

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

30

XVII 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

177

No
.
1

Aspek Penilaian
2

Skor
Mak
s

Skor
Peroleha
n

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

2,5
30

XXXVSikap/Etos Kerja
5.1. Tanggung jawab

5.2. Ketelitian

5.3. Inisiatif

5.4. Kemandirian

2
Sub Total

XLI

10

Laporan
6.1. Sistimatika penyusunan laporan

6.2. Kelengkapan bukti fisik

6
Sub Total
Total

Edit By SMK Taruna Bhakti /WP/2010

178

10
100

KRITERIA PENILAIAN
No
.

Aspek Penilaian

Perencanaan
1.3. Persiapan Hardware dan
Software

1.4. Menganalisa jenis desain

VI

Skor

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

XI

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

179

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

No
.

Aspek Penilaian

Kriteria Penilaian

Skor

dengan algoritma program

dan efisien

3.5. Cara melakukan layout

3.6. Cara menetapkan warna

XXIV Kualitas Produk Kerja

4.1. Halaman Web

Layut halaman web

Komposisi warna dan

gambar

Program di buat tidak

sesuai dengan algoritma
program dan tidak efisien

Layout memenuhi dasardasar estetika

Layout tidak memenuhi

dasar-dasar estetika

Penggunaan warna
memenuhi harmoni warna

Penggunaan warna tidak

harmoni

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
mengguna-kan/sesuai DMD

2,5

Database dibuat tidak

meng-gunakan/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

4.2. Data Base

Disain
database

model

Relation

Query

4.3. Bahasa Program

Penggunaan
side script

server

Program
dibuat
dengan efisien

Edit By SMK Taruna Bhakti /WP/2010

180

Program dibuat se-efisien

mungkin

2,5

No
.

Aspek Penilaian

Kriteria Penilaian

4.4. Security
Keamanan Data

Back up data

Sistem data log

Skor

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

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

Keamanan Akses

Autentifikasi user

Pembatasan
akses

hak

4.5. Pekerjaan diselesaikan

dengan waktu yang telah
ditentukan
LIII

Sikap/Etos Kerja
5.1. Tanggung jawab

5.2. Ketelitian

Membereskan kembali alat

dan bahan yang
dipergunakan
Tidak membereskan alat
dan bahan yang
dipergunakan

0,5

Tidak banyak melakukan

kesalahan kerja

Banyak melakukan
kesalahan kerja
5.3. Inisiatif

5.4. Kemandirian

Memiliki inisiatif bekerja

181

0,5
3

Kurang/tidak memiliki
inisiatif kerja

0,5

Bekerja tanpa banyak

diperintah

Bekerja dengan banyak

diperintah
Edit By SMK Taruna Bhakti /WP/2010

0,5

No
.

Aspek Penilaian

Kriteria Penilaian

Skor

LXII Laporan
6.1. Sistimatika penyusunan
laporan

6.2. Kelengkapan bukti fisik

Laporan disusun sesuai

sistimatika yang telah
ditentukan

Laporan disusun tanpa

sistimatika

Melampirkan bukti fisik

hasil penyusunan

Tidak melampirkan 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

182

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

183

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

184