Modul Mulok Pemrograman-Web

KATA PENGANTAR
Modu dengan |udu Mengoperaskan Bahasa Pemrograman Berbass Mengoperaskan Bahasa Pemrograman Berbass
Web Web merupakan bahan acuan yang dgunakan sebaga panduan daam
proses bea|ar menga|ar sswa SMK N 1 Kota Bekas untuk membentuk
saah satu bagan dar kompetens bdang keahan Teknoog Informas
dan Komunkas pada Program Keahan Rekayasa Perangkat Lunak.
Modu n mencakup penguasaan konsep fle-fle grak, memaham
dasar-dasar pemrograman web, memaham perntah-perntah
pemrograman web, dan bagamana membangun sebuah apkas
pemrograman berbass web.
|akarta, November 2007
Penyusun
Wahyu Lesmono
WAHLES.RPL.1.1
DAFTAR ISI MODUL
Haaman
KATA PENGANTAR .....................................................................
DAFTAR ISI MODUL ...................................................................
PETA KEDUDUKAN MODUL .......................................................
MEKANISME PEMELA|ARAN ....................................................... v
PERISTILAHAN / GLOSSARY ...................................................... v
I. PENDAHULUAN ............................................................. 1
A. Deskrps |udu............................................................ 1
B. Prasyarat .................................................................... 1
C. Petun|uk Penggunaan Modu ...................................... 1
1. Petun|uk Bag Sswa .............................................. 1
2. Peran Guru ............................................................ 3
D. Tu|uan Akhr ............................................................... 3
E. Kompetens ................................................................ 4
F. Cek Kemampuan ........................................................ 5
II. PEMELAJARAN .............................................................. 7
A. Rencana Pemea|aran Sswa ...................................... 7
B. Kegatan Bea|ar ........................................................ 8
Kegatan Bea|ar 1: Tag-tag dasar HTML..................... 8
a. Tu|uan Kegatan Pemea|aran............................ 8
b. Uraan Mater ................................................... 8
c. Rangkuman ...................................................... 52
d. Tugas ............................................................52
e. Tes Formatf ..................................................... 53
f. Kunc |awaban Formatf ................................... 54
g. Lembar Ker|a ................................................... 56
Kegatan Bea|ar 2: Memaham dasar-dasar
pemrograman web ................................................ 57
h. Tu|uan Kegatan Pemea|aran ........................... 57
. Uraan Mater ................................................... 57
|. Rangkuman ......................................................117
k. Tugas ............................................................117
. Tes Formatf .....................................................119
m. Kunc |awaban Formatf ...................................120
n. Lembar Ker|a ...................................................121
Kegatan Bea|ar 3: Membangun haaman web dengan
bahasa pemrograman berbass web ...................123
o. Tu|uan Kegatan Pemea|aran ...........................123
p. Uraan Mater ...................................................123
WAHLES.RPL.1.1
q. Rangkuman ......................................................125
r. Tugas ............................................................125
s. Tes Formatf .....................................................125
t. Kunc |awaban Formatf ...................................126
u. Lembar Ker|a ...................................................126
III. EVALUASI ......................................................................127
A. Tes Tus .................................................................127
B. Tes Praktek ................................................................127
C. Kunc |awaban Tes Tus ..............................................128
D. Lembar Penaan Tes Praktek ....................................130
IV. PENUTUP .......................................................................135
DAFTAR PUSTAKA .................................................................136

WAHLES.RPL.1.1
PERISTILAHAN/GLOSSARY
Animation : Anmas dar beberapa gambar dam dbuat sepert hdup tanpa
ada patah-patah daam pergerakannya.
Bann! : Merupakan kepaa atau bagan atas dar sebuah web ste.
Do"n#oa$ : Proses pengamban e atau mengcopy e.
E%&t : Tndakan yang dker|akan untuk menghauskan atau
memperndah anmas pada obyek.
E'nt : Tndakan yang dakukan seteah adanya acton.
E()o!t : Merubah |ens format ke bentuk yang an.
Fo!mat : Bentuk ektens dar |ens e.
F!am : Bagan dar Tmene.
*!o+)in, : Mengumpukan beberapa obyek untuk d|adkan satu.
HTML : Hypertext Markup Language, bahasa penanda hpertext
In-!t : Memasukkan |ens e kedaam bdang ker|a SWSHmax.
In-ta##ation man+a# : Petun|uk Instaas
K./!am : Pada dasarnya hampr sama dengan frame. Hanya sa|a untuk
Key frame ebh menun|ukkan untuk satu frame.
Li&n- A,!mnt : Persetu|uan sens penggunaan suatu software tertentu
Mo'i : Fe yang dbuat daam SWSHmax.
O01&t : Benda yang sedang dker|akan daam bdang ker|a SWSHmax.
O)!an$ : data yang doperaskan atau dmanpuas.
O)!ato! : smbo/tanda yang dgunakan untuk meakukan operas-operas
matemats atau operas strng.
P#a.! : Untuk memankan anmas yang teah dbuat.
P!'i" : Mehat has yang teah dker|akan.
S&an : Satu move merupakan satu Scane.
Sa!&2 En,in : Mesn bantu pencaran data.
S!'! : Peayan, Komputer nduk yang bertugas untuk meayan
komputer-komputer ken.
So/t"a! : Perangkat unak, program yang ber|aan d komputer.
So+!& 3o$ : Kode as suatu program
Tim Lin : Gars waktu atau pewaktuan yang terdapat daam SwSHmax.
W0 $-i,n : Pembuatan/desan haaman-haaman web.
WAHLES.RPL.1.1
BAB. I
PENDAHULUAN
A. D-4!i)-i J+$+#
Mengoperaskan Bahasa Pemrograman Berbass Web merupakan modu
teor dan atau praktkum yang membahas tentang pengoperasan Bahasa
Pemrograman Berbasis Web. Modu n terdr dar 3 (empat) kegatan
bea|ar. Kegatan Bea|ar 1: Mengena tag-tag HTML, membuat, membuka
dan menympan e haaman web. Kegatan Bea|ar 2: Membuat program
dengan bahasa pemrograman berbass web. Kegaatan Bea|ar 3: Membuat
haaman web dengan sofware bantu. Seteah menguasa modu n
dharapkan peserta dkat mampu membangun haaman web dengan
bahasa pemrograman berbass web.
P!a-.a!at
Kemampuan awa yang dpersyaratkan untuk mempea|ar modu n
adaah:
1. Peserta dkat teah uus modu/mater dkat mengoperaskan PC stand
aone dengan sstem operas berbass teks.
2. Peserta dkat teah uus modu/mater dkat mengoperaskan PC stand
aone dengan sstem operas berbass GUI
3. Peserta dkat teah uus modu/mater menyapkan dan meakukan
survey untuk menentukan kebutuhan data
4. Peserta dkat teah uus modu/mater meakukan perancangan
pengumpuan data
5. Peserta dkat teah uus modu/mater meakukan desan dan
perancangan software
6. Peserta dkat teah uus modu/mater dkat mengoperaskan software
apkas bass data
B. Pt+n1+4 Pn,,+naan Mo$+#
1. Pt+n1+4 Ba,i P-!ta $i4#at
Peserta dkat dharapkan dapat berperan aktf dan bernteraks dengan
sumber bea|ar yang mendukungnya, karena tu harus memperhatkan
ha-ha sebaga berkut:
a. Lan,4a25#an,4a2 0#a1a! .an, $itm)+2:
WAHLES.RPL.1.1

1
1) Memaham dan menguasa penggunaan tag-tag HTML.
2) Memaham bagamana menguasa agortma pemrograman
berbass web
3) Memaham bagamana menerapkan agortma pemrograman
berbass pada apkas yang dbuat
4) Memaham bagamana menentukan struktur data pada
apkas yang dbuat
5) Memaham bagamana menentukan bass data pada apkas
yang dbuat
6) Memaham bagamana menentukan pemaka apkas yang
dbuat
7) Pea|ar daftar s serta skema kedudukan modu dengan
cermat dan tet. Karena daam skema modu akan nampak
kedudukan modu yang sedang Anda pea|ar dengan modu-
modu yang an.
8) Ker|akan soa-soa daam cek kemampuan untuk mengukur
sampa se|auh mana pengetahuan yang teah Anda mk.
9) Apaba dar soa daam cek kemampuan teah Anda ker|akan
dan 70 % ter|awab dengan benar, maka Anda dapat angsung
menu|u Evauas untuk menger|akan soa-soa tersebut. Tetap
apaba has |awaban Anda tdak mencapa 70 % benar, maka
Anda harus mengkut kegatan pemea|aran daam modu n.
10) Membaca dengan seksama uraan mater pada setap kegatan
bea|ar. Kemudan ker|akan soa-soa evauas sebaga sarana
athan.
11) Mencermat angkah-angkah ker|a pada setap kegatan
bea|ar sebeum menger|akan dan ba beum |eas tanyakan
pada nstruktur.
12) Mengert apakah teah benar-benar memaham modu n.
13) Untuk men|awab tes formatf usahakan member |awaban
yang sngkat, |eas dan ker|akan sesua dengan kemampuan
Anda seteah mempea|ar modu n.
14) Ba terdapat penugasan, ker|akan tugas tersebut dengan bak
dan bamana peru konsutaskan has tersebut pada
guru/nstruktur.
15) Catatah kesutan yang Anda dapatkan daam modu n untuk
dtanyakan pada guru pada saat kegatan tatap muka. Bacaah
referens annya yang berhubungan dengan mater modu
agar Anda mendapatkan tambahan pengetahuan.
0. P!#n,4a)an .an, Ha!+- Di)!-ia)4an
WAHLES.RPL.1.1

2
Guna menun|ang keseamatan dan keancaran tugas/peker|aan
yang harus dakukan, maka persapkanah seuruh perengkapan
yang dperukan, pea|arah terebh dahuu modu n dan buku-
buku yang menun|ang.
&. Ha-i# P#ati2an
Peserta dkat mampu membangun haaman web dengan bahasa
pemrograman sesua dengan kebutuhan.
6. P!an *+!+
Guru yang akan menga|arkan modu n hendaknya mempersapkan dr
sebak-baknya yatu mencakup aspek strateg pemea|aran,
penguasaan mater, pemhan metode, aat bantu meda pemea|aran
dan perangkat evauas.
Guru harus menyapkan rancangan strateg pemea|aran yang mampu
mewu|udkan peserta dkat terbat aktf daam proses
pencapaan/penguasaan kompetens yang teah dprogramkan.
Penyusunan rancangan strateg pemea|aran mengacu pada krtera
un|uk ker|a (KUK) pada setap sub kompetens yang ada daam GBPP.
3. T+1+an A42i!
1. Peserta dkat mampu meakukan persapan pemrograman berbass
web untuk proses pembuatan sebuah web ste.
2. Peserta dkat mampu menggunakan dan menerapkan fungs dan
operator agortma pemrograman pada apkas yang dbuat
3. Peserta dkat mampu menentukan struktur data pada apkas yang
dbuat
4. Peserta dkat mampu menentukan bass data pada apkas yang
dbuat
5. Peserta dkat mampu mengena ob|ek-ob|ek web, tag-tag HTML dan
scrpt-scrpt pada pemrgraman berbass web.
6. Peserta dkat mampu meakukan kombnas ob|ek-ob|ek web, tag-tag
HTML dan scrpt yang an untuk membuat haaman-haaman web.
7. Peserta diklat mampu membangun halaman web dengan bahasa
pemrograman berbasis web

WAHLES.RPL.1.1

3
D. Kom)tn-i
SILABUS
NAMA SEKOLA ! SMK NE"E#$ 1 KO%A &EKAS$
MA%A PELA'A#AN ! Peren(anaan )E& *asar
KELAS+SEMES%E# ! $+ 1 dan 2
S%AN*A# KOMPE%ENS$ ! Membuat dokumen dengan %ML sesuai spesi,ikasi
KO*E KOMPE%ENS$ ! %$K-P#.2-.2/-.1
ALOKAS$ )AK%0 ! 1./ 1 /2 Menit
WAHLES.RPL.1.1
1
KOMPETENSI
DASAR
INDIKATOR
MATERI
PEMBELAJARAN
KEGIATAN PEMBELAJARAN PENILAIAN
ALOKASI WAKTU
SUMBER
BELAJAR
TM PS PI
1. Menetapkan
pemakaian
dan struktur
dokumen
Kegunaan dari
dokumen dan
audiens
diidenti,ikasi
&ahasa %ML
3ang tepat 3ang
akan digunakan
pada dokumen
dan audiens
ditetapkan
Struktur dasar
dokumen sesuai
pers3aratan
pengguna
diran(ang
Site map dokumen
dikem4bangkan
dan
dikon,irmasikan
dengan klien
Kegunaan dari
dokumen dan
audiens
&ahasa %ML
Struktur dasar
penulisan dokumen
Site map dokumen
dikembangkan dan
dengan klien
Mengidenti,ikasi kegunaan dari
dokumen dan audiens
Menetapkan bahasa %ML 3ang
tepat 3ang akan digunakan pada
dokumen dan audiens
Membuat program sederhana
dari s(ript dasar
Meran(ang struktur dasar
dokumen sesuai pers3aratan
pengguna
Mengatahui s(riptdasar %ML
Mengkon,irmasikan Site map
dokumen dikembangkan dan
dengan klien
Program
sederhan
a
Program
s(ript dasar
2 /567 &uku
%ML
*asar
E4book
%ML
Komputer
Modul a8ar
8obsheet
WAHLES.RPL.1.1
2
KOMPETENSI
DASAR
INDIKATOR
MATERI
PEMBELAJARAN
KEGIATAN PEMBELAJARAN
PENILAIAN
ALOKASI WAKTU
SUMBER
BELAJAR
TM PS PI
2. Membuat
struktur
dokumen
dengan
bahasa %ML
*okumen %ML
dilengkapi dengan
Head dan title
Body pada
dokumen dibuat9
teks dan paragra,
sesuai kebutuhan
ditambahkan
:ormat dokumen
menarik dan
mudah diba(a
dibuat
Simbol khusus
pada browser+
platform
ditambahkan dan
ditampilkan se(ara
tepat
*okumen
disimpan sesuai
dengan
penamaan
standar-
*okumen %ML
dengan Head dan
title
Body pada
dokumen9 teks dan
paragra, sesuai
kebutuhan
ditambahkan
Simbol khusus pada
browser+ platform
Menlengkapi dokumen %ML
dengan Head dan title
Membuat Body pada dokumen
Menambahkan teks dan
paragra, sesuai kebutuhan
:ormat dokumen menarik dan
mudah
*okumen penamaan standar-
Medesain :ormat dokumen
menarik dan mudah diba(a
dibuat
Penambahan simbol khusus
pada browser+ platform
Mengatur itampilan se(ara tepat
Pen3impanan dokumen
disimpan sesuai dengan
penamaan standar-
Program
sederhan
a
Program
dokumen
sederhana
2 /567 651;7 &uku
%ML
*asar
E4book
%ML
Komputer
Modul a8ar
8obsheet
WAHLES.RPL.1.1
3
KOMPETENSI
DASAR
INDIKATOR
MATERI
PEMBELAJARAN
PENILAIAN
ALOKASI WAKTU
SUMBER
BELAJAR
TM PS PI
3. Mem,ormat
dokumen dan
menambahkan
ob3ek
%eks di,ormat
untuk memenuhi
pers3aratan
pen3a8ian
pengguna
Background warna
atau gambar 3ang
sesuai menurut
pers3aratan
pengguna 5 logo
peru4sahaan9 buku
pedoman
perusahaan7
dipasang
Posisi setiap
elemen pada
halaman dibuat
lebih menarik
Indent teks dan list
5ordered,
unordered, dan
nested7 dibuat
"ambar disisipkan
5"$:9 'PE"9 atau
embedded image7
dan dokumen
di,ormat sesuai
pers3aratan
Wrap teks di
sekitar gambar
digunakan atau
ditambahkan 8arak
di sekitar gambar
Skala gambar dan
perataan pada
dokumen di ,ormat
:ormat teks dengan
%ML
Pemberian
Background dan
warna pada
dokumen
Menempatkan ob8ek
pada bidang desain
Mempormat %eks untuk
memenuhi pers3aratan
pen3a8ian pengguna
Memasang Background warna
atau gambar 3ang sesuai
menurut pers3aratan pengguna 5
logo peru4sahaan9 buku
pedoman perusahaan7
Menempatkan Posisi setiap
elemen pada halaman
Indent teks dan list 5ordered,
unordered, dan nested7
Wrap teks di sekitar gambar
digunakan atau 8arak di sekitar
Skala gambar dan perataan
pada dokumen di ,ormat
Membuat setiap elemen pada
halaman dibuat lebih menarik
Membuat Indent teks dan list
5ordered, unordered, dan
nested7
Men3isipkan gambar disisipkan
5"$:9 'PE"9 atau embedded
image7
Mempormat dokumen sesuai
pers3aratan
Menambahkan Wrap teks di
sekitar gambar
Menambahkan 8arak di sekitar
gambar
Program
sederhan
a
(ampura
n dari
materi 3
<ontoh
program
insert ob8e(t
5gambar dan
teks7
2 /567 651;7 &uku
%ML
*asar
E4book
%ML
Komputer
Modul a8ar
8obsheet
WAHLES.RPL.1.1
/
NAMA SEKOLA ! SMK NE"E#$ 1 KO%A &EKAS$
MA%A PELA'A#AN ! Peren(anaan )E& *asar
KELAS+SEMES%E# ! $+ 1 dan 2
S%AN*A# KOMPE%ENS$ ! Menerapkan dasar4dasar pembuatan web statis tingkat dasar
KO*E KOMPE%ENS$ ! %$K-P#.2-.2=-.1
ALOKAS$ )AK%0 ! 126 1 /2 Menit
KOMPETENSI
DASAR
INDIKATOR
MATERI
PEMBELAJARAN
KEGIATAN PEMBELAJARAN PENILAIAN
ALOKASI WAKTU
SUMBER
BELAJAR
TM PS PI
1- Men8elaskan
konsep dasar
dan teknologi
dari )ebpage-
Konsep4konsep dan
teknologi web
di8elaskan 5web
Ser>er9 0#L9 %%P9
%ML9 )eb browser 9
gatewa3
Perbedaan antara
klien dan ser>er
di8elas-
<ara bagaimana
bandwidth
mempengaruhi
transmisi data dan
gambar pada la3ar
di8elaskan-
<iri4(iri dan ,ungsi
dari so,tware teks
editor 3ang tersedia
untuk meran(ang
web page
dibandingkan
Konsep dan teknologi

web
Konsep klien dan
ser>er pada teknologi
)E&
Kapasitas &andwidth
dan kulaitas tampilan
halaman )E&
Pemilihan so,tware
aplikasi peran(angan
web
Perbandingan lo(al
ser>er dan remote
ser>er 5hosting
pro>ider7
Men8elaskan Konsep4konsep dan
teknologi web 5web Ser>er9
0#L9 %%P9 %ML9 )eb browser
9 gatewa3 7
Mengetahui <ara bagaimana
bandwidth mempengaruhi
transmisi data dan gambar pada
la3er
Men8elaskan perbedaan antara
klien dan ser>er
Men8elaskan (ara bagaimana
bandwidth mempengaruhi
transmisi data dan gambar pada
la3er
Membandingkan (iri4(iri dan
,ungsi dari so,tware teks editor
3ang tersedia untuk meran(ang
web page
Men8elaskan keuntungan dan
kerugian running dari ser>er
3ang dimiliki dibandingkan ser>er
pro>ider-
Kompilasi
program
/ /567 &ukub
Pemrogra
man
%ML
Komputer
&uku
membuat
halaman
)E&
dengan
:rontpage
WAHLES.RPL.1.1
2
KOMPETENSI
DASAR
INDIKATOR
MATERI
PEMBELAJARAN
PENILAIAN
ALOKASI WAKTU
SUMBER
BELAJAR
TM PS PI
2- Mempersiapkan
peker8aan
pembuatan web
So,tware teks editor
dan browser sesuai
dengan kebutuhan
diidenti,ikasi
So,tware beroperasi
sesuai dengan
standar operasi
so,tware
Sketsa disain untuk
web 3ang akan dibuat
sudah disiapkan
*ata 3ang akan
ditampilkan di )eb
tersedia
Area ker8a untuk
membuat dokumen
web baru sudah
disiapkan-
Pemilihan teks
editor dan browser
Kiner8a )E&
&rowser
*esain la3out
halaman )E&
Mengidenti,ikasi so,tware teks
editor dan browser sesuai
dengan kebutuhan
Mempersiapkan so,tware
beroperasi sesuai dengan
standar operasi so,tware
Membuat Area ker8a untuk
membuat dokumen web
Mempersiapkan sketsa disain
untuk web 3ang akan dibuat
sudah disiapkan
Men3ediakan data 3ang akan
ditampilkan di )eb
Men3iapkan area ker8a untuk
membuat dokumen web baru-
sketsa
disain
untuk web
&ukub
Pemrogra
man
%ML
Komputer
&uku
membuat
halaman
)E&
dengan
:rontpage
3- Melakukan
pembuatan
dokumen web
baru
Proses pembuatan
)eb sesuai dengan
standar operasi
aplikasi dilakukan
)eb 3ang dibuat
tampil dila3ar sesuai
dengan disain
*ata 3ang tersedia
tampil di la3ar )eb
Proses pembuatan
)eb sesuai
dengan standar
operasi aplikasi
Memanagemen langkah
langkah Proses pembuatan
)eb sesuai dengan standar
operasi aplikasi
Membandingkan )eb 3ang
dibuat tampilan dila3ar sesuai
dengan disain
Menampilkan data 3ang
tersedia di la3ar )eb
Kompilasi
program
asil )eb
standar
/ /567 &ukub
Pemrogra
man
%ML
Komputer
&uku
membuat
halaman
)E&
dengan
:rontpage
WAHLES.RPL.1.1
;
KOMPETENSI
DASAR
INDIKATOR
MATERI
PEMBELAJARAN
PENILAIAN
ALOKASI WAKTU
SUMBER
BELAJAR
TM PS PI
/- Menampilkan
)eb dalam
browser
:ormat 0#L 5Uniform
Resource Locator7
di8elaskan
Peran dari browser
dalam memba(a ,ile4
,ile )eb
didemonstrasikan
5te?t4onl39 h3perte?t7
dengan mengakses
ke 0#L tertentu
melalui menu 3ang
tersedia
Perbedaan browser
mempengaruhi
tampilan dari halaman
web dapat
diidenti,ikasi
:ormat 0#L
5Uniform Resource
Locator7
Peran dari browser
dalam memba(a
,ile4,ile
Perbandingan
lokasi browser
Membuat tampilan :ormat 0#L
5Uniform Resource Locator7
Mendemonstrasikan Peran dari
browser dalam memba(a ,ile4
,ile )eb 5te?t4onl39 h3perte?t7
dengan mengakses ke 0#L
tertentu melalui menu 3ang
tersedia
Mengatahui ma(am4ma(am
browser web
Mengetahui Peran dari browser
dalam memba(a ,ile4,ile )eb
5te?t4onl39 h3perte?t7 dengan
mengakses ke 0#L tertentu
melalui menu 3ang tersedia
Mengidenti,ikasi perbedaan
browser 3ang mempengaruhi
tampilan dari halaman web
Mengetahui Perbedaan browser
mem4pengaruhi tampilan dari
halaman web
Kompilasi
program
asil )eb
standar
/ /567 &ukub
Pemrogra
man
%ML
Komputer
&uku
membuat
halaman
)E&
dengan
:rontpage
Keterangan
%M ! %atap Muka
PS ! Praktek di Sekolah 52 8am praktik di sekolah setara dengan 1 8am tatap muka7
P$ ! Praktek di $ndustri 5/ 8am praktik di *u+ *i setara dengan 1 8am tatap muka7
WAHLES.RPL.1.1
=
F. 34 Kmam)+an
Isah cek st (v) sepert pada tabe d bawah n dengan skap |u|ur dan
dapat dpertanggung |awabkan untuk mengetahu kemampuan awa yang
teah dmk.
Stan$a!
Kom)tn-i
Kom)tn-i Da-a!
Sa.a $a)at
M#a4+4an
P4!1aan ini
$n,an
Kom)tn
Bi#a
Ja"a0an
78a9
K!1a4an
8a Ti$a4
1. Membuat
dokumen
dengan HTML
sesua
speskas
1. Menetapkan
pemakaan dan struktur
dokumen
Tes
Formatf 1
2. Membuat struktur
dokumen dengan
bahasa HTML
Tes
Formatf 1
3. Memformat dokumen
dan menambahkan
obyek
Tes
Formatf 1
4. Menerapkan
dasar-dasar
pembuatan
web stats
tngkat dasar
1. Men|easkan konsep
dasar dan teknoog
dar Webpage.
Tes
Formatf 2
2. Mempersapkan
peker|aan pembuatan
web
Tes
Formatf 2
3. Meakukan pembuatan
dokumen web baru
Tes
Formatf 2
4. Menampkan Web
daam browser
Tes
Formatf 2
Apaba anda men|awab TIDAK pada saah satu pernyataan d atas, maka
pea|arah modu n.
WAHLES.RPL.1.1

1
BAB II
PEMELAJARAN
a. Rn&ana Pm#a1a!an
Kompetens : Membuat Dokumen HTML sesua dengan speskas
Jni- K,iatan
Tan,,a
#
Wa4t
+
Tm)a
t
B#a1a!
A#a-an
P!+0a2an
Tan$a
Tan,a
n *+!+
Menetapkan pemakaan
dan struktur dokumen
Membuat struktur
dokumen dengan bahasa
HTML
Membuat dokumen
dengan menambahkan
ob|ek
b. K,iatan B#a1a!
1. K,iatan B#a1a! 1:
Menetapkan pemakaan dan struktur dokumen
a. T+1+an K,iatan Pm#a1a!an
1. Kegunaan dar dokumen dan au!iens ddentkas
2. Bahasa HTML yang tepat yang akan dgunakan pada dokumen dan
au!iens dtetapkan
3. Struktur dasar dokumen sesua persyaratan pengguna drancang
4. Sie ma" dokumen dkem-bangkan dan dkonrmaskan dengan
ken
0. U!aian Mat!i 1
1. HTML (Hypertext Markup Language)
HTML atau #$"ere% &arksu" Language merupakan saah satu
format yang dgunakan daam pembuatan dokumen dan apkas
yang ber|aan dhaaman web. Sebenarnya, dokumen HTML
hanyaah sebuah dokumen teks basa dan dsebut sebaga &arku"
Language yakn bahasa yang mengandung tanda (ag) tertentu
yang dgunakan untuk mengatur format tampan suatu dokumen.
WAHLES.RPL.1.1

2
HTTP atau #$"ere% 'ransfer Prookol merupakan protoko yang
dgunakan untuk mentransfer data atau document yang berformat
HTML dar web server ke browser (Internet Exporer, Netscape
Navgator, NeoPanet, d). Dengan HTTP nah yang memungknkan
Anda men|ea|ah nternet dan mehat haaman web.
Untuk membuat dokumen HTML hanya dbutuhkan sebuah apkas
teks edtor basa. Namun sekarang n d pasaran terdapat banyak
seka HTML authorng (software yang dgunakan untuk membuat
atau mendesan haaman web). Macromeda Dreamweaver, Adobe
GoLve, MS FrontPage sekedar contohnya. Tetap tanpa mengetahu
dasar-dasarnya Anda tdak akan memperoeh has yang maksma.
Mengapa? Karena waaupun software-software tersebut semakn
menawarkan kemudahan daam membuat haaman web, tetap
basanya seseorang mash peru untuk mengedt haaman web
tersebut secara manua. Terutama untuk haaman web yang sangat
kompek.
Daam tutora n Anda akan kam a|ak untuk mengetahu dasar-
dasar dar desan web. Yang dbutuhkan hanya sebuah word
processor. Anda bsa menggunakan Notepad, WordPad, MS Word
atau yang annya. Tap yang pang mudah adaah menggunakan
Notepad. Seteah anda memaham betu semua tag-tag dasar htm,
dakhr nant kta akan bea|ar membuat haaman web dengan
menggunakan web too.
St!+4t+! Da-a! HTML
Daam penggunaannya, sebagan besar kode HTML harus teretak
d antara tag kontaner. Yatu dawa dengan <namatag> dan
dakhr dengan </namatag> (terdapat tanda "/"). Struktur dasar
dokumen HTML bers eemen-eemen atau tag sebaga berkut:
<html>
<head>
<title>Judul Halaman Web</title>
</head>
<body>
ISI Halaman WEB
</body>
</html>
Keterangan:
WAHLES.RPL.1.1

3
:2tm#; .. :/2tm#;Mendenskan bahwa teks yang berada
dantara kedua tag tersebut adaah e HTML.
:2a$; .. :/2a$; Sebaga nformas page header. D daam
tag n kta bsa meetakkan tag-tag TITLE,
BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
:tit#; .. :/tit#; Sebaga tte atau |udu haaman/form. Kamat
yang teretak d daam tag n akan muncu
pada bagan pang atas browser Anda (pada
tte bar).
:0o$.; .. :/0o$.; Mendenskan teks beserta formatnya
yang hendak dtampkan sebaga s haaman
web. D daam tag n bsa detakkan berbaga
"age aribue sepert bg(olor) ba(kgroun!)
e%) link) *link) alink) lefmargin !an
o"margin.
Sekarang untuk athan pertama kta, mar kta buat dokumen HTML
sederhana. Ikut angkah-angkah berkut n:
1. Buat drektor dengan nama athan d drve C:. Dan sean|utnya
daam drektor n kta akan menympan semua e-e athan
kta.
2. Buka Browser, msanya Internet Exporer atau Netscape
Navgator.
3. Buka program apkas teks edtor msanya daam athan n
adaah Notepad.
4. Mua bars pang atas, tuskan:
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Ini adalah halaman web pertama saya.
</body>
</html>
WAHLES.RPL.1.1

/
5. Smpan e anda dengan cara kk menu Fe - Save:
6. Sean|utnya ph drektor athan yang tad kta buat.
7. Pada box Fe name, skan nama enya dengan Lati2an1.2tm#
8. Pada drop down st d Save as type, ph A## Fi#-. Sehngga
tampannya sepert berkut:
WAHLES.RPL.1.1

2
9. Smpan proyek anda dengan meng-klik pada tombo Sa'
Untuk men|aankan kode-kode tersebut, sahkan buka browser
sepert Internet Exporer, Moza Frefox.
1. Kk menu Fi# O)n
2. Seteah |endea Open terbuka, kk tombo B!o"-
WAHLES.RPL.1.1

;
3. Ketka |endea baru terbuka, ph drektor Lati2an dan ph e
Lati2an1.2tm#.
4. Kk tombo O)n au tekan tombo O4, haaman web yang
dtampkan daam browser adaah sepert berkut:
WAHLES.RPL.1.1

=
3atatan:
Semua !okumen #'&L mem"un$ai eksensi .html +aau .htm,
Semua halaman web +homepage, mem"un$ai fle
Latihan1.html. -ile Laihan..hml se(ara oomais akan
!i"anggil keika alama sebuah !omain aau !irekori em"a
men$im"an fle ersebu !i buka !i browser.
Ko$ Wa!na
Pengaturan warna daam dokumen HTML menggunakan mode
kombnas RGB (re!) green) blue). Setap warna dtampkan daam
dua dgt na heksadesma (0, 1, 2, ..., F). Setap bagan dua dgt
kode menun|ukkan banyaknya ntenstas dar kombnas warna
merah, h|au dan bru. Msanya untuk warna kunng, dbuat dengan
pencampuran warna sebaga berkut:
R$ *!
n
B#+
FF FF 00
Berart untuk warna kunng dapat dbuat dengan kode #hh00.
Dsampng tu, pembuatan warna dapat |uga dbuat dengan
angsung menggunakan nama warna daam bahasa nggrs,
msanya kunng="yeow".
Berkut n warna-warna yang dapat dgunakan daam haaman
HTML.
Wa!na H4-a$-ima#
Whte #FFFFFF
Back #000000
Red #FF0000
Green #00FF00
Bue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yeow #FFFF00
Anda dapat |uga membuat campuran sendr warna-warna
berdasarkan ema|nas anda. Yang pentng anda mengkut aturan
datas.
6. Pn,at+!an Ha#aman W0 $an T4-
WAHLES.RPL.1.1

6
Untuk mendapatkan haaman web yang bak anda harus meakukan
pengaturan terhadap haaman web dan teks-teks ddaamnya
sepert mengatur warna atar beakang haaman, memh |ens dan
ukuran huruf, perataan, warna teks, menambahkan gambar d.
Tag-tag d bawah n yang basa dgunakan daam pengaturan
haaman web dan teks:
a. :0o$.;, dgunakan mendenskan teks beserta formatnya
yang hendak dtampkan sebaga s haaman web. D daam tag
n bsa detakkan berbaga "age aribue sepert bg(olor)
ba(kgroun!) e%) link) *link) alink) lefmargin !an o"margin.
Ba&4,!o+n$ = dgunakan untuk mengatur atar beakang
dengan gambar/mage.
B,&o#o! = dgunakan untuk mengatur warna atar
beakang dokumen, dengan warna puth
sebaga defaut-nya.
T4- = dgunakan untuk mengatur warna teks
dokumen, dengan warna htam sebaga
warna defaut.
Lin4 = Untuk mengatur warna nk dokumen dengan
warna bru sebaga warna defaut
V#in4 = Untuk mengatur warna vsted nk dokumen
dengan defaut ungu
A#in4 = dgunakan untuk mengatur warna actve nk
dokumen dengan defaut merah.
0. Ha$in,: :Hn;..:/Hn; Dgunakan untuk mengatur ukuran
huruf pada header. "n" mempunya na antara 1 - 6 atau antara
<H1> sampa <H6>, dengan <H1> merupakan ukuran terbesar
dan <H6> merupakan ukuran terkec.
&onto21<1.2tm#
<htm>
<head>
<title>::: Membuat Heading Dokumen HML:::</title>
</head>
<body bg!olor"#$$$$$$ te%t"#&&&&&&>
<h1>Headng ingkat 1 </h1>
<h'>Headng ingkat ' </h'>
WAHLES.RPL.1.1

@
<h(>Headng ingkat ( </h(>
<h)>Headng ingkat ) </h)>
<h*>Headng ingkat * </h*>
<h+>Headng ingkat + </h+>
</body>
</html>
Hasnya akan terhat sepert:
&. Pa!a,!a)2 Ba!+: :P; Dgunakan untuk pndah anea atau
membuat paragraf baru. Tag n bsa dber akhran </P> tap
|uga bsa tdak dber. Daam tag n |uga bsa dgunakan untuk
mengatur perataan kr, tengah, kanan dan kr-kanan, yatu
dengan attrbut ALIGN. Attrbut agn mempunya na: LEFT,
RIGHT, CENTER dan |USTIFY.
$. Lin B!a4: :BR; Dgunakan untuk pndah ke bars baru.
. No Lin B!a4: :NOBR; Ba dgunakan tag n maka teks
yang pan|ang tdak secara otomats pndah bars bawahnya ba
bars pertama sudah terau pan|ang.
WAHLES.RPL.1.1

1.
/. Font :FONT; Dgunakan untuk mengatur huruf dokumen
HTML. Tag FONT mempunya attrbut, yatu: SIZE, FACE, COLOR.
SI=E: Dgunakan untuk mengatur ukuran font. Ukuran font
yang dgunakan berksar antara 1 - 7 dengan 1 merupakan
ukuran terkec dan 7 merupakan ukuran terbesar.
FA3E: Dgunakan untuk mengatur |ens atau nama font.
Anda bsa memh maksma 3 |ens font yang masng-
masng dpsahkan oeh koma. Ba terdapat spas yang
teretak pada nama font maka harus dgunakan tanda gars
bawah (_). Daam memh |ens font n harus
dpertmbangkan apakah font yang kta gunakan pada
haaman web kta nantnya akan terdapat pada komputer
pengguna yang an (pengakses web kta). Pendeknya kta
tdak usah menggunakan font-font yang bentuknya aneh-
aneh, gunakan sa|a font standar. Tap ba Anda ngn
menggunakan font yang sedkt "aneh" Anda bsa
menggunakan graphc.
3OLOR: Dgunakan untuk mengatur warna font.
Ddenskan dengan menggunakan na RGB/HEX atau bsa
|uga angsung menggunakan nama warna (red msanya).
&onto21<6.2tm#
<html>
<head>
<title>::: Mengatur ,kuran- .enis dan /arna &ont:::</title>
</head>
<body>
<0ont si1e"1 &a!e"arial !olor"red>,kuran 0ont 1</0ont><br>
<0ont si1e"' &a!e"arial !olor"green>,kuran 0ont ' </0ont><br>
<0ont si1e"( &a!e"arial !olor"blue>,kuran 0ont ( </0ont><br>
<0ont si1e") &a!e"2erdana !olor"red>,kuran 0ont ) </0ont><br>
<0ont si1e"* &a!e"2erdana !olor"blue>,kuran 0ont * </0ont><br>
<0ont si1e"+ &a!e"tahoma !olor"green>,kuran 0ont + </0ont><br>
<0ont si1e"3 &a!e"tahoma !olor"red>,kuran 0ont 3 </0ont><br>
</body>
</html>
Hasnya akan terhat
WAHLES.RPL.1.1

11
Contoh annya:
<0ont si1e"' 0a!e"4times5new5roman4 !olor"4#$$++!!4>
,. Ba- Font: :BASEFONT; Dgunakan untuk mendenskan
"defaut text". Attrbut sama dengan attrbut FONT. Tag FONT
akan mengo*erwrie settng pada BASEFONT.
Contoh:
<base0ont si1e"' 0a!e"4arial-hel2eti!a4 !olor"4#00$$$$4>
Sean tag dan atrbut datas, mash terdapat ag tag-tag yang
berhubungan dengan pengaturan teks, yatu:
P!2atian: Semua tag d bawah n membutuhkan tap penutup.
:B; Bo#$ t(t
:I; /ali( e%
:U; Underscore
:TT; Typewrter
:S; Strkeout - draws a ne through the text
:PRE; Preformatted Text :DFN; 0efniion
:BLINK; Text berkedp (ebh bak |angan dgunakan)
:STRON*; St!on,
:ADDRESS;
/ali(
:3ITE; 0igunakan unuk 1uoing e%
WAHLES.RPL.1.1

12
:3ODE; Monospaced font (dgunakan ba Anda ngn
meetakkan (memperhatkan) kode HTML pada
dokumen HTML Anda)
:SAMP; Monospaced font (dgunakan ba Anda ngn
dokumen HTML Anda)
:KBD; Monospaced font (dgunakan ba Anda ngn
dokumen HTML Anda)
:BI*; Ukuran teks akan ebh besar satu ukuran
:SMALL; Ukuran teks akan ebh kec satu ukuran
:SUP; Membuat teks
superscrpt
:SUB; membuat teks
sub scrpt
:ABBREV; Abbrevatons
:A3RON8M; Untuk akronm
:PERSON; Dgunakan untuk ndexng
:>; Membuat short nne quotaton
:VAR; &embua *ariable name) selalu !alam iali(s.
2. :HR;, dgunakan untuk membuat gars horsonta. Tag n
mempunya atrbut SIZE, WIDTH, ALIGN dan NOSHADE.
Atrbut SI=E dgunakan untuk menentukan pan|ang gars daam
satuan pxe. Atrbut WIDTH dgunakan untuk menentukan
ketebaan gars. Atrbut NOSHADE akan menyatakan bahwa
gars tersebut dtampkan tanpa bayang-bayang 3-D.
&onto21<?.2tm#
<html>
<head>
<title>::: Membuat 6aris Horisontal:::</title>
</head>
<body bg!olor"#000!!!>
<0ont si1e"1 &a!e"tahoma !olor"blue>7hlan /a 8ahlan</0ont>
<hr si1e"1 width"1*$ align"le0t>
<h1><!enter>www.smkn19kotabekasi.!om</h1>
<hr si1e"* align"!enter noshade>
</body>
</html>
Hasnya tampak sebaga berkut:
WAHLES.RPL.1.1

13
i. LISTS
Daftar/st adaah merupakan kumpuan teks yang dsusun
sedemkan rupa sehngga tem-tem yang ada memk nomor
urut atau bsa |uga berupa tanda-tanda khusus/symbo.
Terdapat tga tpe st yang dapat dgunakan, yatu:
Uno!$!$ Li-t-: :UL; Untuk membuat daftar tem
dengan tanda buet (tdak bernomor). Lst entres
ddenskan dengan tag <LI>. Pada |ens n tdak
memerukan pengurutan data.
Bentuk tem tanda pada Unordered Lst dapat dubah
dengan menggunakan atrbut T8PE kedaam tag :UL;
dengan na 7&i!&#9 untuk bentuk ngkaran tengahnya
puth, 7-@+a!9 untuk bentuk kotak padat htam dan
7$i-&9 bentuk ngkaran pada warna htam.
&onto21<A.2tm#
<html>
<head>
<title>::: Membuat ,ndordered List:::</title>
</head>
<body>
<b><0ont si1e"( &a!e"tahoma !olor"blue>
WAHLES.RPL.1.1

1/
.urusan I: yang ada di 8M:; 1 :ota <ekasi ada ( =rogram 8tudi:
</b>
<hr si1e"' width"1*$ align"le0t>
<ul type"!ir!le>
<li>Multimedia
</ul>
<ul type"s>uare>
<li>?=L
</ul>
<ul type"dis!>
<li>:.
</ul>
</0ont>
</body>
</html>
Has dar kode d atas adaah:
O!$!$ Li-t-: :OL; |uga dgunakan untuk membuat
daftar tem bernomor, dengan tap tem dapat
menggunakan angka arab atau romaw. Lst entres |uga
ddenskan dengan <LI> tag. Atrbut yang ada pada
Ordered Lst adaah T8PE dan START.
&onto21<B.2tm#
WAHLES.RPL.1.1

12
<html>
<head>
<title>::: Membuat @rdered List:::</title>
</head>
<body>
<b><0ont si1e"' &a!e"tahoma !olor"bla!k>
8M:; 1 :ota <ekasi memiliki ( .urusan: </b>
<hr si1e"' width"1*$ align"le0t>
<ol type"1>
<li>I:
<li>Mesin
<li>@tomoti0
</ol>
<hr si1e"( width"*$$>
.urusan I: memiliki ) L7< :omputer: </b>
<ol start")>
<li>L7<. Multimedia
<li>L7<. ?=L
<li>L7<. :.
</ol>
</0ont>
</body>
</html>
WAHLES.RPL.1.1

1;
Untuk attrbut TYPE, dapat |uga menggunakan:
1- Defaut numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kec. a, b, c, etc.
I- Romaw huruf besar. I, II, III, etc.
- Romaw huruf kec , , , , etc.
DCnition Li-t-: :DL;, dgunakan untuk men|easkan
stah-stah. Denton Lst dnyatakan dengan tag <DL>
dan dantara tag tersebut dtambahkan tag <DT> Denton
Term yatu bagan stah yang d|abarkan dan tag <DD>
Denton Data yang merupakan pen|abaran dar stah.
&onto21<D.2tm#
<html>
<head>
<title>::: Membuat De0inition List:::</title>
</head>
<body>
<dl>
<dt> <agian =ertama.
<dd> Isi dari <agian =ertama.
<dt> <agian :edua.
WAHLES.RPL.1.1

1=
<dd> Isi dari <agian :edua
</dl>
</body>
</html>
P!/o!matt$ T(t: :PRE;. Dgunakan untuk mengatur
format tampan agar sesua dengan asnya.
&onto21<E.2tm#
<html>
<head>
<title>7plikasi dari AltBpreAgtB tag</title>
</head>
<body>
<h(>tanpa menambahkan pre</h(>
<erakit9
rakit ke hulu
berenang9renag
ketepian- bersakit9sakit
dahulu- bersenag9senang kemudian
<p><h(>dengan menggunakan pre</h(>
<pre>
<erakit9
rakit ke hulu
berenang9renag
ketepian- bersakit9sakit
dahulu- bersenag9senang kemudian
</pre>
</body>
</html>
WAHLES.RPL.1.1

16
E(tn$$ >+otation-: :BLO3K>UOTE;, dgunakan
untuk membuat kutpan pan|ang, sehngga hasnya
men|orok ke daam.
&onto21<F.2tm#
<html>
<head> <title>::: Membuat <lo!k>uote:::</title> </head>
<body>
<h(>=engaturan eks</h(>
<blo!k>oute>
,ntuk mengatur halaman web yang baik- pengaturan teks dapat dilakukan
dengan menggunakan blockqoute.
</blo!k>oute>
</body>
</html>
Hasnya tampak sepert bnerkut n:
WAHLES.RPL.1.1

1@
?. H.)!t(t Lin4
Dgunakan untuk membuat nk/penghubung antara suatu haaman
dengan haaman an, ke URL an, |uga dgunakan daam satu
haaman untuk berpndah ke sub |udu yang an atau ke okas
tertentu daam satu haaman yang sama.
Sntak tag nk adaah sebaga berkut:
<a href=url_tujuan>nama_link</a>
url_tuuan berna okas atau nama e yang akan dtu|u.
Sedangkan nama_link adaah na yang akan dtampkan d
browser sebaga teks nk atau tombo penghubung. Tusan yang
teretak antara :A; dan :/A; akan terdapat gars bawah dan
atrbut warnanya dapat datur daam tag :0o$.;. Adapun
macam-macam nk adaah sebaga berkut:
Lin4 4 Do4+mn Lain
Untuk membuat nk/penghubung dengan target ke
dokumen/haaman yang berbeda, anda harus membuat dokumen
yang dtu|u/target dan dsmpan daam drektor tertentu, bak pada
drektor yang sama atau berbeda dengan dokumen yang aktf
sekarang. Untuk mencoba membuat nk, sahkan buat scrpt
berkut dan ber nama dengan link_!okumen_lain.html.
<html>
<head>
<title>::: Latihan Membuat Link :e Dokumen Lain:::</title>
</head>
<body bg!olor"#0000d$>
<0ont 0a!e"arial si1e"+ !olor"tahoma>
<b>.::: 8M:; 1 :ota <ekasi:::. <br>
<0ont 0a!e"arial si1e") !olor"blue>
WAHLES.RPL.1.1

2.
<i>8ukses itu didapat dari usaha dan kerCa keras serta doa</i>
<0ont 0a!e"arial si1e"1 !olor"tahoma>
<hr si1e"' width"1$$ align"le0t !olor"blue>
D <a hre0"link5dokumen5lain.html>H o m e</a>
D <a hre0"proli.html>=rogram :eahlian</a>
D <a hre0"ekstra.html>Ekstra :urikuler</a> D
<hr><p><0ont 0a!e"2erdana si1e") !olor"orange>
7hlan wa 8ahlan di web kami ...
</body>
</html>
Buat ag e berkut dan ber nama dengan proli.html
<html>
<head>
</head>
<b>.::: 8M:; 1 :ota <ekasi:::. <br>
<hr><p><0ont 0a!e"2erdana si1e") !olor"brown>
=rogram :eahlian<br>
<0ont si1e"1>
<ul type"!ir!le><li>?ekayasa =erangkat Lunak
<li>Multimedia
<li>eknik :omputer dan .aringan
<li>eknik Mekanik @tomoti0
<li>eknik <odi @tomoti0
<li>eknik =emesinan
<li>eknik Las</ul>
</body>
</html>
Untuk meengkap athan ka n, buat |uga e berkut dan ber
nama ek"tra.html
<html>
<head>
</head>
<b>.::: 8M:; 1 :ota <ekasi:::. <br>
WAHLES.RPL.1.1

21
<hr><p><0ont 0a!e"2erdana si1e") !olor"orange>
Ekstra :urikuler<br>
<0ont si1e"1>
<ul type"!ir!le>
<li>=ramuka
<li>?ohis
<li>=M?
<li>=askibra
<li><o%er
</ul>
</body>
</html>
Has dar kode-kode datas adaah sebaga berkut:
|ka nk-nk tersebut d-klik, maka hasnya adaah sebaga berkut:
WAHLES.RPL.1.1

22
Lin4 4 0a,ian t!tnt+ $a#am $o4+mn .an, -ama
WAHLES.RPL.1.1

23
Untuk membuat nk ke bagan tertentu daam dokumen yang sama,
harus dberkan nama an#hor. Perbedaan dengan nk yang berbeda
dokumen adaah tu|uan/target nk, |ka daam dokumen yang sama
yang dtu|u adaah nama anchor tetap kaau dokumen yang beda
yang dtu|u adaah nama e/dokumen yang bersangkutan.
Untuk member nama anchor, atrbut yang dpaka adaah NAME
pada tag anchor <A> dan untuk membuat nk cukup memberkan
tanda G seteah nama e daam URL. Msa:
<a hre0"F#phpF> <ab 1 </a>
atau dapat dtus engkap:
<a hre0"FbelaCar5php.html#phpF> <ab 1 </a>
dan untuk nama anchornya:
<a name"FphpF>7da apa dengan =H=G</a>
Lin4 4 a#amat URL ata+ W0-it
Untuk membuat nk ke aamat URL adaah dengan menambahkan:
2tt)://nama<URL.
Contoh:
<a hre0"Fhttp://www.dikti.orgF>www.dikti.org</a>
<a hre0"Fhttp://www.smkn19kbks.!omF>www.smkn19kbks.!om</a>
Lin4 4 A#amat Emai#
Lnk ema adaah membuat nk pada teks, |ka teks tersebut dkk
maka akan menampkan program pengrman ema yang terdapat
pada komputer yang dpaka untuk mengakses data atau teks
tersebut secara otomats.
Untuk membuat nk ke aamat ema hanya menambahkan atrbut
mai#to:a#amat<mai# ke daam tag :A HREF;
Msanya:
<7 H?E&"4mailto:smkn19kbks.yahoo.!om4>:irim email</a>
Lin4 Fi# .an, a4an $i$o"n#oa$
Lnk e daam ha n adaah apaba dkk pada teks tersebut maka
proses sean|utnya adaah mendownoad e yang tercantum pada
dokumen
WAHLES.RPL.1.1

2/
tersebut. Format penusannya adaah :a 2!/Hnama<C#;
Msa:
<a hre0"Fanti2irus.1ipF>Download anti 2irus</a>
<a hre0"Flatihan.do!F>Download latihan Html</a>
<a hre0"Fmys>l.e%eF>Download MH8IL</a>
A. Mn.i-i)4an *am0a!/Ima,-
Dgunakan untuk menampkan mage atau anmas gf pada
haaman web Anda. Tag yang dgunakan adaah
<img sr!"Fnama 0ile gambarF>
Attrbut yang dmk tag <mg> adaah: at, agn=(center, eft,
rght), hspace, vspace, border, wdth dan heght. |ka attrbut ukuran
gambar tdak dtuskan, maka gambar dtampkan sesua dengan
ukuran asnya. Untuk mengatur ukuran gambar, menggunakan
attrbut wdth daan heght. Attrbut agn dgunakan untuk perataan
poss gambar. Attrbut border, dgunakan untuk member bngka
pada gambar. Sedangkan at, dgunakan untuk member keterangan
pada gambar |ka mouse berada datasnya. Untuk mengatur etak
gambar dapat menggunakan attrbut hspace daan vspace.
&onto21<I.2tm#
<html>
<head>
<title>::: menampilkan images:::</title>
</head>
<body>
<img sr!"4gambar1.Cpg4 alt"4aplikasi (dmaks4>
<img sr!"4i!t.Cpg4 hspa!e"1$ 2spa!e"* width"'$$ height "'*)
align"4!enter4 border"'>
</0ont>
</body>
</html>
WAHLES.RPL.1.1

22
Tampan dar contoh datas adaah sebaga berkut:
B. La.o+t Ha#aman W0 $n,an Ta0# JTa0#K
Tabe merupakan cara untuk menampkan nformas daam haaman
web dengan bentuk koom dan bars.
Mm0+at Ta0#
Terdapat tga tag atau eemen utama yang dgunakan daam
pembuatan tabe, yatu: <TABLE>, <TR>, dan <TD>. Yang peru
WAHLES.RPL.1.1

2;
dngat adaah bahwa tag <TR> dan <TD> harus teretak d antara
tag <TABLE> dan </TABLE> .
:TABLE;
Dgunakan untuk mendenskan pembuatan tabe. Memk
attrbut:
a#i,n - perataan: rata kr (eft), tengah (center) atau kanan
(rght).
'a#i,n - mengatur bentuk perataan secara vertka
0,&o#o! - mengatur warna atar beakang (background) dar
tabe.
0a&4,!o+n$ - menentukan gambar yang dgunakan sebaga
background tabe
&o#o! L Untuk mengatur warna suatu se daam tabe
0o!$! - menentukan ukuran border tabe (daam pxe).
!o"-)an - menggabungkan beberapa bars
&o#-)an - menggabungkan beberapa koom
&##)a$$in, - |arak antara s ce dengan batas ce (daam
pxe).
&##-)a&in, - mengatur spas/|arak antar ce (daam pxe).
"i$t2 - menentukan ebar tabe daam pxe atau percent.
2i,2t - Menentukan tngg tabe
:TR;
Tag n dgunakan untuk membuat bars baru (pada tabe). Terdr
dar atrbut:
a#i,n - perataan: rata kr (eft), tengah (center) atau kanan
(rght).
0,&o#o! - warna atar beakang dar bars.
'a#i,n - perataan vertka: top, mdde atau bottom.
:TD;
Tag n dgunakan untuk membuat koom baru pada tabe.
Attrbutnya adaah:
a#i,n - untuk menentukan perataan koom
0a&4,!o+n$ - untuk menentukan mage yang dgunakan
sebaga atar beakang dar koom.
0,&o#o! - untuk menentukan warna atar beakang
&o#-)an - hat gambar contoh
WAHLES.RPL.1.1

2=
2i,2t - untuk mengatur ukuran tngg ce daam pxes.
no"!a) - untuk membuat supaya s dar koom tetap berada
pada satu bars.
!o"-)an - hat gambar contoh
'a#i,n - untuk mengatur perataan vertka: top, mdde atau
bottom.
"i$t2 - untuk menentukan ebar koom daam pxe atau
percen.
&onto21<1M.2tm#
<html>
<head>
<title>::: =embuatan able:::</title>
</head>
<body>
<0ont 0a!e"arial si1e"' !olor"tahoma>
<table>
<tr>
<td>Ini !ontoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border"1>
<tr>
<td>Ini !ontoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border"1>
<tr>
<td>;o.</td>
<td>;ama</td>
<td>7lamat</td>
</tr>
<tr>
<td>1.</td>
<td>/ahyu</td>
<td><ekasi</td>
</tr>
<tr>
<td>(.</td>
<td>Lesmono</td>
<td>:ranCi</td>
</tr>
</table>
</body>
</html>
Hasnya adaah sebaga berkut:
WAHLES.RPL.1.1

26
WAHLES.RPL.1.1

2@
&onto21<11.2tm#
<html>
<head>
<title>.::: <elaCar Membuat abel:::.</title>
</head>
<body>
<table border"414 !ellpadding"4$4 !ellspa!ing"4$4 border!olor"4#0000004
width"41$$J4 height"411*4>
<tr>
<td width"41$$J4 height"411*4 border!olor"4#K$K$K$4
bg!olor"4#<DKEDL4>AnbspB</td>
</tr>
</table>
<0ont si1e"414>AnbspB</0ont>
<table border"4$4 !ellpadding"4$4 !ellspa!ing"4$4 border!olor"4#1111114
width"41$$J4 height"4)(14>
<tr>
<td width"4'(J4 height"4($34 2align"4top4>
<table border"414 !ellpadding"4$4 !ellspa!ing"4$4
border!olor"4#<DKEDL4 width"4L)J4 height"4')*4>
<tr>
<td width"41$$J4 height"4'))4
border!olor"4#K$K$K$4 bg!olor"4#<DKEDL4>AnbspB</td>
</tr>
</table>
<0ont si1e"414>AnbspB</0ont>
<table border"414 !ellpadding"4$4 !ellspa!ing"4$4
border!olor"4#<DKEDL4 width"4L)J4 height"41*'4>
<tr>
<td width"41$$J4 height"41L4 bg!olor"4#<DKEDL4
border!olor"4#K$K$K$4>AnbspB</td>
</tr>
<tr>
<td width"41$$J4 height"41('4 border!olor"4#K$K$K$4>
AnbspB</td>
</tr>
</table>
</td>
<td width"433J4 height"4($34 2align"4top4>
<table border"414 !ellpadding"4$4 !ellspa!ing"4$4 border!olor"4#0000004
width"4L3J4 height"4)114>
<tr>
<td width"4+)J4 height"41$L4>AnbspB</td>
<td width"4(+J4 height"41$L4>AnbspB</td>
</tr>
<tr>
<td width"4+)J4 height"4($14 rowspan"4'4>AnbspB</td>
<td width"4(+J4 height"4')4 bg!olor"4#<DKEDL4
border!olor"4#K$K$K$4>
<0ont si1e"414>AnbspB</0ont></td>
WAHLES.RPL.1.1

3.
</tr>

<tr>
<td width"4(+J4 height"4'334 border!olor"4#K$K$K$4>AnbspB
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hasnya adaah:
WAHLES.RPL.1.1

31
Mnam0a24an J+$+# Ta0#
|udu daam tabe dbedakan men|ad tga macam, yatu |udu tabe,
|udu koom tabe dan |udu bars tabe. |udu tabe atau basa
dsebut 3APTION teretak dbagan uar tabe yang bsa berada
dbawah atau datas tabe. Secara defaut (a"ion detakkan
dbagan atas suatu tabe, tetap |uga dapat detakkan dbawah
WAHLES.RPL.1.1

32
suatu tabe dengan menambahkan atrbut ALI*NHBOTTOM pada
eemen (a"ion tersebut.
|udu koom atau |udu bars dbuat dengan eemen yang sama yatu
eemen TABLE HEADER :TH;. |udu koom teretak pada se
dsebeah kr atau koom pertama suatu tabe, sedangkan |udu
bars teretak pada bars pertama suatu tabe. |udu bars atau |udu
koom akan tercetak teba.
&onto21<16.2tm#
<html>
<head>
<title>::: =embuatan .udul able:::</title>
</head>
<body>
<0ont 0a!e"arial si1e"' !olor"maroon>
<table border"1>
<!aption align"top><b><u>Da0tar 7lamat</u></b></!aption>
<tr>
<th width")$>;o.</td>
<th width"1*$>;ama</td>
<th width"'$$>7lamat</td>
</tr>
<tr>
<td align"!enter>1.</td>
<td>/ahyu</td>
<td><ekasi</td>
</tr>
<tr>
<td align"!enter>'.</td>
<td>Lesmono</td>
<td>:ranCi</td>
</tr>
</table>
</body>
</html>
Hasnya akan tampak sebaga berkut:
WAHLES.RPL.1.1

33
&onto21<1?.2tm#
<html>
<head>
<title>::: =embuatan .udul able:::</title>
</head>
<body>
<0ont 0a!e"arial si1e"' !olor"maroon>
<table border"1>
<!aption align"bottom><b><u>Da0tar 7lamat</u></b></!aption>
<tr>
<th width"+$ align"le0t>;o.</td>
<td width"1*$>1.</td>
<td width"'$$>'.</td>
</tr>
<tr>
<th align"le0t>;ama</td>
<td>/ahyu</td>
<td>Lesmono</td>
</tr>
<tr>
<th align"le0t>7lamat</td>
<td><ekasi</td>
<td>:ranCi</td>
</tr>
</table>
</body>
</html>
Hasnya akan tampak sepert berkut:
Mn,at+! L0a! $an Tin,,i S+at+ Ta0#
Lebar tabe datur dengan menggunakan atrbut WIDTH dan untuk
mengatur tngg tabe dengan atrbut HEI*HT. |ka atrbut WIDTH
WAHLES.RPL.1.1

3/
dan HEIGHT dgunakan daam eemen TABLE nanya menun|ukkan
ebar dan tngg tabe terhadap BROWSER sedangkan |ka dgunakan
pada eemen TH dan TD, nanya merupakan ebar dan tngg dar
suatu tabe. Na atrbut mengunakan ukuran % (max 100%) dan
ukuran pxe.
&onto21<1A.2tm#
<html>
<head>
<title>::: Mengatur Lebar dan inggi abel:::</title>
</head>
<body>
<table border"1 width"1$$J>
<!aption align"top><b><u>Da0tar 7lamat</u></b></!aption>
<tr>
</tr>
<tr>
<td height"*$>/ahyu</td>
<td height"*$><ekasi</td>
</tr>
<tr>
<td height"($>Lesmono</td>
<td height"($>:ranCi</td>
</tr>
</table>
</body>
</html>
Hasnya tampak sebaga berkut:
WAHLES.RPL.1.1

32
P!ataan $a#am Ta0#
Perataan daam tabe dkena dua macam, yatu perataan secara
horzonta dengan atrbut ALIGN dan perataan vertka dengan
atrbut VALIGN, serta untuk membuat suatu tabe possnya men|ad
dtengah-tengah ayar browser.
&onto21<1B.2tm#
<html>
<head>
<title>::: Membuat =erataan able:::</title>
</head>
<body>
<table border"1 align"!enter>
<!aption align"top>
<b>Da0tar 7lamat</b>
<hr width"11$>
</!aption>
<tr>
</tr>
<tr>
<td align"!enter 2align"middle height"*$>/ahyu</td>
<td align"right 2align"top height"*$><ekasi</td>
</tr>
<tr>
<td align"le0t 2align"baseline height"*$>Lesmono</td>
<td align"le0t 2align"bottom height"*$>:ranCi</td>
</tr>
</table>
</body>
</html>
WAHLES.RPL.1.1

3;
Hasnya sepert gambar berkut:
Mm0+at Wa!na Pa$a Ta0#
Ddaam pewarnaan tabe kta dapat mengatur warna atar beakang
dan teks serta warna bordernya. Untuk menentukan warna atar
beakang pada suatu tabe, gunakan atrbut BGCOLOR sedangkan
untuk warna border dapat menggunakan beberapa atrbut sbb:
At!i0+t F+n,-i
BORDERCOLOR Mengubah warna keseuruhan border
BORDERCOLORLIG
HT
Mengubah warna border bagan atas dan kr
BORDERCOLORDA
RK
Mengubah warna border bagan bawah dan
kanan
Pn,,a0+n,an Ba!i-/Ko#om
Untuk menggabungkan bars/koom (merge, dgunakan atrbut
COLSPAN dan ROWSPAN. COLSPAN dgunakan untuk menggabung-
kan beberapa koom men|ad 1 sedangan ROWSPAN
menggabungkan beberapa bars men|ad 1.
3##)a$$in, Dan 3##-)a&in,
CELLPADDING dgunakan untuk mengatur spas antara border
dengan tusan, sedangkan CELLSPACING dgunakan untuk
mengatur spas antar dua buah se.
&onto21<1D.2tm#
<html>
<head>
WAHLES.RPL.1.1

3=
<title>::: Kontoh Merge- Kell dan =edd:::</title>
</head>
<body>
<table border"' align"!enter border!olor"#$$$$$$ bg!olor"#&&&&&& !ellspa!ing")
!ellpadding"M width"1$$J>
<0ont 0a!e"arial si1e"' !olor"bla!k>
<tr>
<td bg!olor"#EEEEEE !olspan"' align"!enter>:elas</td>
<td bg!olor"#EEEEEE align"!enter rowspan"'>:eterangan</td>
</tr>
<tr>
<td width"'$$ bg!olor"#D&&L&L align"!enter>I</td>
<td width"'$$ bg!olor"#D&&L&L align"!enter>II</td>
</tr>
<tr>
<td>7li</td>
<td>,mar</td>
<td align"!enter>Lunas</td>
</tr>
</table>
</body>
</head>
</html>
D. Mm0+at F!am-
Frame HTML dapat dgunakan untuk membuat tampan haaman
HTML yang terbag-bag men|ad beberapa dokumen HTML, dmana
setap bagan merupakan satu haaman HTML terpsah. Sehngga
tampan haaman HTML yang saah satu atau beberapa bagan
bergant-gant snya sedangkan bagan an tetap sehngga dapat
WAHLES.RPL.1.1

36
menghemat bandwdth nternet dan mempercepat proses downoad
secara keseuruhan.
Format:
<html>
<head>
</head>
<frameset>
<frame src>
</frameset>
</html>
Aturan penggunaan atrbut ROWS dan COLS pada frameset adaah:
<frameset rows=tin!!i"baris#tin!!i"baris#$>
<frameset cols=lebar"%olom# lebar"%olom#$>
Atrbut-atrbut yang dgunakan daam FRAME adaah:
At!i0+t F+n,-i
FRAMESET COLS
Membuat frame vertka dengan ebar
koom tertentu
FRAMESET ROWS
Membuat frame horzonta dengan tngg
bars tertentu
FRAME SRC
Memasukkan dokumen HTML ke daam
FRAME
NOFRAME
Memasukkan body teks untuk browser
yang tdak dapat menampkan frame
Mo$#5mo$# /!am $an &onto2 )m0+atann.a:
WAHLES.RPL.1.1

3@
WAHLES.RPL.1.1

/.
1
<FRAMESET cos="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
6
<FRAMESET cos="100,*">
</FRAMESET>
?
<FRAMESET rows="100,*">
</FRAMESET>
A
<FRAMESET rows="*,60">
</FRAMESET>
B
<FRAMESET rows="*,60">
<FRAMESET cos="50%,50%">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET>
</FRAMESET>
D
<FRAMESET cos="*,50%">
<FRAMESET rows="15%,15%,70%">
</FRAMESET>
</FRAMESET>
E
<FRAMESET cos="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
</FRAMESET>
</FRAMESET>
F
<FRAMESET rows="15%,70%,15%">
<FRAMESET cos="15%,70%,15%">
</FRAMESET>
1
2
3
4
5
6
7
8
Lati2an Mn,,+na4an FRAME
Buat e baru dengan nama athan6.htm, header.htm, kr.htm,
kanan.htm, bab1.htm dan bab2.htm dengan s masng-masng
sebaga berkut:
Fi# #ati2anD.2tm#
<html>
<head>
<title>.:: Latihan Membuat &rame::.</title>
</head>
<0rameset rows"'$J-N 0ramespa!ing"4$4 border"4$4 0rameborder"4$4>
<0rame name"atas sr!"header.html s!rolling"4no4 noresi1e>
<0rameset !ols"'*J-N 0ramespa!ing"4$4 border"4$4 0rameborder"4$4>
<0rame name"kiri sr!"kiri.html s!rolling"4no4 noresi1e>
<0rame name"kanan sr!"kanan.html s!rolling"4no4 noresi1e>
</0rameset>
</0rameset>
</html>
Pada tag 2framese rows3456)78 maksudnya adaah frame yang
dbuat terdr dar dua bagan/bars dengan ukuran 20% bagan
pang atas dan seebhnya (80%) adaah frame bagan bawah/bars
kedua yang dtun|ukkan dengan tanda *. 2frame name3aas
sr(3hea!er.hml8 menun|ukkan bahwa nama frame adaah aas
dan ds dengan dokumen hea!er.hml.
2framese (ols3956)78 mempunya art bahwa frame bawah dbag
ag men|ad dua koom dengan ukuran 30% untuk frame kr dan
ssanya untuk frame sebeah kanan.
Kaau e tersebut d|aankan hasnya sebaga berkut:
WAHLES.RPL.1.1

/1
Tampan tersebut dkarenakan e-e yang dbutuhkan oeh frame
beum dbuat atau tdak dtemukan. Oeh karena tu engkap e-e
sebaga berkut:
File header.html
<html>
<head>
<title>.:: Latihan Membuat &rame::.</title>
</head>
<body bg!olor"#EEEEEE>
<b>.::: 8M:; 1 :ota <ekasi:::. </b><br>
<0ont 0a!e"arial si1e") !olor"orange>
</body>
</html>
File kiri.html
WAHLES.RPL.1.1

/2
<html>
<head>
<title>::: Latihan Membuat &rame:::</title>
</head>
<body bg!olor"#000000>
<table border"1 width"4''M4 height"4'M4 !ellspa!ing"$>
<tr>
<td width"4'1M4 height"4''4 border!olor"4#M$$$M$4 bg!olor"4#<DKEDL4>
<b><0ont 0a!e"4ahoma4 si1e"4'4>AnbspBAnbspB M e n u</0ont></b>
</td>
</tr>
<tr>
<td width"4'1M4 height"4''4 border!olor"4#M$$$M$4>
<b><0ont 0a!e"4ahoma4 si1e"4'4>AnbspBAnbspB
<a hre0"kanan.html target"kanan>H o m e</a></0ont></b></td>
</tr>
<tr>
<b><0ont 0a!e"4ahoma4 si1e"4'4>
AnbspBAnbspB <a hre0"proli.html target"kanan>=rogram :eahlian</a>
</0ont></b></td>
</tr>
<tr>
<b><0ont 0a!e"4ahoma4 si1e"4'4>
AnbspBAnbspB <a hre0"ekstra.html target"kanan>Ekstra :urikuler</a>
</0ont></b></td>
</tr>
</table>
</body>
</html>
File kanan.html
<html>
<head>
</head>
<table border"1 border!olor"border!olor"4#M$$$M$4
!ellspa!ing"$ !ellpadding"*$ width"3*$ height")*$>
<tr>
<td 2align"top>
<0ont 0a!e"2erdana si1e") !olor"blue>
8elamat datang di web kami ...
</td>
</tr>
</body>
</html>
File proli.html
WAHLES.RPL.1.1

/3
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<tr>
<td 2align"top>
=rogram :eahlian:<br>
<0ont si1e"1>
<ul type"!ir!le>
<li>?ekayasa =erangkat Lunak
<li>eknik Elektronika Industri
<li>eknik =embangkit enaga Listrik
<li>eknik Mekanik @tomoti0
<li>eknik <odi @tomoti0
<li>eknik =emesinan
<li>eknik Las
</ul>
</td>
</tr>
</body>
</html>
File ekstra.html
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<tr>
<td 2align"top>
Ekstra :urikuler:<br>
<0ont si1e"1>
<ul type"!ir!le>
<li>8eni <ela Diri apak 8u!i
<li>:eagamaan
<li>8epak <ola
<li><ola <asket
<li>:epenyiaran
</ul>
</td>
</tr>
</body>
</html>
WAHLES.RPL.1.1

//
E. Fo!m Htm#
Dgunakan untuk menerma masukan/nput dar user dan
memproses has nputan tersebut d server. User menerma
nformas meau se|umah eemen yang dsebut kontro. Kontro n
dapat berupa TEXTBOX, CHECKBOX, RADIO BUTTON, PUSH BUTTON,
LIST MENU dan annya.
Sntak penusan form adaah:
<0orm method"Fpost atau getF a!tion"Fprogram5pemrosesF>
elemen9elemen &@?M
</0orm>
Atrbut METHOD mempunya dua na yatu POST dan GET. Metode
GET mengrmkan data pada server dengan cara meetakkan data
pada bagan akhr URL yang dtun|uk. Metode POST mengrmkan
datanya secara terpsah. |ka data masukan banyak, ebh
dsarankan untuk menggunakan metode post. Atrbut ACTION bers
URL dar program yang dpangg oeh form tersebut.
T(tBON
Textbox dgunakan untuk memasukkan data strng sebanyak satu
bars. Cara penusannya adaah:
<input type"te%t name"te%tbo%1 si1e"%% 2alue>
Atrbut TYPE untuk menentukan |ens masukan yang berupa TEXT
(textbox), NAME adaah dentkas/penamaan eemen n untuk
dbaca oeh program pemroses nantnya. Atrbut VALUE untuk
member na suatu masukan. Sedangkan atrbut SIZE dgunakan
WAHLES.RPL.1.1

/2
untuk menentukan pan|ang atau banyaknya karakter sebuah
masukan. Untuk menyembunykan masukan yang dtus user daam
textbox, dapat menggunakan atrbut TYPE="PASSWORD", sehngga
tampan daam textbox men|ad karakter *".
&onto21<1E.2tm#
<html>
<head>
<title>::: &orm Input dengan EO<@O:::</title>
</head>
<body>
<h(><,:, 7M,</h(>
<0orm method"post>
<table border"$>
<tr>
<td width"3$>;ama</td>
<td width"1$>:</td>
<td width"($><input type"te%t name"nama si1e"($></td>
</tr>
<tr>
<td width"3$>7lamat</td>
<td width"1$>:</td>
<td width"($>
<input type"te%t name"alamat si1e"($></td>
</tr>
<tr>
<td width"3$>Homepage</td>
<td width"1$>:</td>
<td width"($>
<input type"te%t name"page si1e"($></td>
</tr>
</table>
</0orm>
</body>
</html>
Tampan untuk contoh datas adaah:
WAHLES.RPL.1.1

/;
3HE3KBON
CheckBox dgunakan untuk member beberapa phan kepada user,
sehngga user dapat memh saah satu, ebh dar satu phan atau
tdak memh sama seka.
Tata cara penusannya adaah:
<input type"!he!kbo% name"!he!kbo%1 2alue"on atau o00 !he!ked>=ilihan 1
Dmana attrbut TYPE menentukan |ens masukan yang berupa
CHECKBOX, NAME adaah dentkas dar eemen n untuk dbaca
oeh program pemroses nantnya, VALUE menentukan apakah pada
keadaan awa checkbox n terph (ON) atau tdak (OFF). Parameter
CHECKED menentukan apakah checkBOX sedang dcentang atau
tdak
&onto21<1F.2tm#
<html>
<head>
<title>::: &orm Input dengan KHEK:<@O:::</title>
</head>
<body>
<0orm method"post>
=ilih =rogram :eahlian 7nda<br>
<h(>Da0tar =rogram :eahlian .urusan I: 8M:; 1 :ota <ekasi </h(>
<p>
<input type"!he!kbo% name"!1 !he!ked>?ekayasa =erangkat Lunak<br>
<input type"!he!kbo% name"!'>Multimedia<br>
<input type"!he!kbo% name"!(>eknik :omputer dan .aringan<br>
</0orm>
</body>
</html>
Has contoh datas adaah sebaga berkut:
WAHLES.RPL.1.1

/=
RADIO B+tton
Dgunakan untuk membuat phan. User dapat memh saah satu
phan yang terseda, sehngga user tdak bsa memh kurang atau
ebh dar satu phan yang dsedakan. Atrbut CHECKED member
tanda bahwa phan tersebut sedang daktfkan, VALUE adaah
harga dar phan
&onto21<1I.2tm#
<html>
<head>
<title>::: &orm Input dengan ?7DI@ <utton:::</title>
</head>
<body>
<0orm method"post>
<h(>=ilih 8alah satu<br>
=endidikan erakhir 7nda: </h(>
<input type"radio 2alue"48D4 !he!ked name"sekolah>8D<br>
<input type"radio 2alue"48L=4 name"sekolah>8L=<br>
<input type"radio 2alue"48M,4 name"sekolah>8M,<br>
<input type"radio 2alue"4814 name" sekolah >81<br>
<input type"radio 2alue"48'4 name" sekolah >8'<br>
</0orm>
</body>
</html>
Has contoh program tersebut adaah:
WAHLES.RPL.1.1

/6
DROP5DOWN Mn+
Dgunakan untuk membuat menu phan. Cara menuskannya
adaah:
<sele!t name"menu1>
<option 2alue9pilihan1>=ilihan 1
<option 2alue9pilihan'>=ilihan '
<option 2alue9pilihan(>=ilihan (
dst P
</sele!t>
Tag OPTION berfungs untuk menampkan phan-phan yang akan
terseda. Setap phan dtentukan snya dengan parameter VALUE.
&onto21<6M.2tm#
<html>
<head>
<title>::: &orm Input dengan D?@=9D@/; Menu:::</title>
</head>
<body>
<0orm method"post>
<h(>=ilih 8alah satu<br>
.urusan: </h(>
<sele!t name"Curusan>
<option 2alue"I sele!ted>eknik In0ormatika</option>
<option 2alue"M@>Mesin @tomoti0</option>
<option 2alue"M=>Mesin =erkakas</option>
<option 2alue"ML>Mesin Las</option>
</sele!t>
</0orm>
WAHLES.RPL.1.1

/@
</body>
</html>
Tampan contoh datas adaah sebaga berkut:
TENT A!a
Eemen n dgunakan untuk menampkan masukan berupa textbox
yang mampu menerma masukan berupa strng ebh dar satu bars.
Sntaknya adaah:
<te%tarea name"te%tbo%1 rows"%% !ols"%%>Isi 7wal
</te%tarea>
Parameter NAME adaah dentkas dar eemen n untuk dbaca
oeh program pemroses nantnya, COLS dan ROWS adaah ukuran
koom dan bars textbox n daam banyaknya karakter
&onto21<61.2tm#
<html>
<head>
<title>::: &orm Input dengan e%t 7rea:::</title>
</head>
<body>
<0orm method"post>
<h*>:irimkan kritik dan saran 7nda</h*>
<te%tarea name"te%tbo%1 rows"* !ols")$>
WAHLES.RPL.1.1

2.
</te%tarea>
</0orm>
</body>
</html>
Tampan contoh datas adaah sebaga berkut:
E#mn Tom0o#
Eemen n dgunakan untuk menampkan tombo yang dapat
berupa tombo SUMBIT untuk mengrmkan data ke pemroses d
server, RESET untuk menguang/mengosongkan san form atau
NORMAL yang tdak berfungs apapun sebeum kta mendenskan
sebuah fungs untuknya.
Format penusannya adaah:
<input type"submit 2alue"@: name"tombol1>untuk tombol 8,<MI
<input type"reset 2alue"reset name"tombol'>untuk tombol ?E8E
&onto21<66.2tm#
<html>
<head>
<title>::: <uku amu:::</title>
</head>
<body>
<h(><p align"!enter><,:, 7M,</p></h(>
<0orm method"post>
WAHLES.RPL.1.1

21
<table border"$ align"!enter width"*$$>
<tr>
<td width"11J>;ama</td>
<td width"(J>:</td>
<td width"M+J><input type"te%t name"nama si1e"'$></td>
</tr>
<tr>
<td width"11J>7lamat</td>
<td width"(J>:</td>
<td width"M+J>
<input type"te%t name"alamat si1e"'$></td>
</tr>
<tr>
<td width"11J>Email</td>
<td width"(J>:</td>
<td width"M+J><input type"te%t name"email si1e"'$></td>
</tr>
<tr>
<td width"11J>/ebsite</td>
<td width"(J>:</td>
<td width"M+J>
<input type"te%t name"pg si1e"'$></td>
</tr>
<tr>
<td width"11J 2align"top>Homepageku</td>
<td width"(J 2align"top>:</td>
<td width"M+J>
<input type"radio 2alue"hebat name"saran !he!ked>
<agus 8ekali<br>
<input type"radio 2alue"bagus name"saran>
<agus<br>
<input type"radio 2alue"biasa name"saran>
<iasa 7Ca<br></td>
</tr>
</table>
<p align"!enter>
<input type"submit 2alue"kirim name"b1>
<input type"reset 2alue"batal name"b'>
<hr>
</0orm>
</body>
</html>
Hasnya adaah:
WAHLES.RPL.1.1

22
&. Ran,4+man
Seteah kta mempea|ar mater pertama n, kta dapat menark
kesmpuan, ternyata membuat/membangun haaman web tu mudah
seka. Dengan hanya bermodakan edtor teks basa, kta sudah dapat
bea|ar banyak tentang tag-tag htm yang dgunakan untuk membuat
sebuah haaman web.
Struktur HTML secara gars besar dbag men|ad <head> dan <body>.
D bagan <body> kta dapat menuskan semua kode htm yang akan
kta gunakan untuk membangun haaman web, yatu dantaranya
pengaturan teks, pengaturan mage, hypernk, pembuatan tabe dan
pembuatan frame.
Lan|utkan ke mater berkutnya agar pengetahuan anda daam
membangun haaman web ebh banyak ag.
$. T+,a-
1. Kun|ung beberapa webste (mnma 10 webste). Amatah webste
yang teah anda kun|ung. Yang harus anda amat adaah meput:
a. Layout$
Seberapa besar daya tark dan unsur sen dar web yang anda
amat.
Bagamana mode ayout web tersebut, berbentuk tabe atau
frame?
b. 3ontnt/I-i, Apa sa|a s dar web tersebut.
WAHLES.RPL.1.1

23
Sahkan catat has pengamatan anda.
2. Tet pro sebuah organsas/embaga (msa: KUD, Pemerntah
Kota, Sekoah dan an-an). Catat semua has penetan anda. Dar
has penetan anda, sahkan buat webste stats yang snya
adaah proe dar yang anda tet. Ba peru tawarkan webste
buatan anda kepada organsas/embaga tersebut.
3. Sahkan car dan !ownloa! tutora berbahasa Inggrs d Internet
yang berhubungan dengan web programmng, (msanya PHP, ASP
dan an-an).
. T- Fo!mati/
1. |easkan masng-masng fungs dar tag-tag berkut:
a) <h1>
b) <p>
c) <br>
d) <hr>
2. Apakah fungs dar nk, form dan frame daam pembuatan web?
3. Apa perbedaan frame dan frameset?
4. Apa perbedaan checkbox dan rado button?
5. Apakah fungs dar tombo Submt dan Reset?
6. Buatah haaman web sepert terhat d gambar. Daam gambar
tersebut, |ka ada penekanan tombo krm, maka hasnya akan
dkrmkan ke e-ma anda.

WAHLES.RPL.1.1

2/

/. K+n&i Ja"a0an Fo!mati/ 1
1. Fungs dar tag:
a. <h1> : dgunakan untuk mengatur ukuran huruf pada header
dengan angka 1 berart mempunya ukuran pang
besar.
b. <p> : dgunakan untuk berpndah anea atau membuat
paragraf baru
c. <br> : Dgunakan untuk pndah bars baru.
d. <hr> : dgunakan untuk membuat gars horsonta
2. Lnk, untuk meompat dar satu dokumen ke dokumen atau tempat
yang an, dapat berupa teks maupun gambar.
Form, dgunakan untuk mengumpukan nformas dar pengun|ung
(bernteraks dengan pengun|ung) karena form dapat berupa mode
san yang harus ds pengun|ung dan akan dbca oeh pemk web.
Frame, merupakan pembag haaman.
3. Frame adaah dokumen yang terdapat d daam frameset dengan
border yang mengengnya. Sedangkan frameset, adaah suatu
frame yang dapat menampung beberapa frame an d daamnya
dan dapat memk beberapa frameset yang annya.
4. Checkbox dan rado button memk fungs yang sama yatu untuk
menentukan phan dar suatu daftar phan. Perbedaanya teretak
pada |umah phan yang dapat dph. Pada checkbox, pengun|ung
haaman web dapat memh beberapa dar daftar phan, namun
dengan rado button, pengun|ung hanya berhak menentukan satu
phan sa|a.
5. Tombo submt berfungs untuk mengrmkan data yang teah
dmasukkan daam form untuk sean|utnya doah oeh server. Dan
tombo reset berfungs untuk mengosongkan dan atau
mengembakan ke na !efaul data yang ada daam form.
6. Kode untuk haaman web tersebut adaah:
<html>
<head>
<title>::: &orm @rder:::</title>
</head>
<body>
<0ont 0a!e"2erdana>
<h( align"!enter>&@?M @?DE? <7?7;6
<0orm a!tion"4mailto:Ca!k5delphiQyahoo.!om4 method"post>
WAHLES.RPL.1.1

22
<table border"' !ellpadding"1>
<tr>
<td rowspan"'><0ont si1e"'>Isikan Data9data 7nda</td>
<td><input type"te%t name"4;amaDepan4 si1e"'$></td>
<td><input type"te%t name"4;ama<elakang4 si1e"'$></td>
<td><input type"te%t name"4,sia4 si1e"(></td>
</tr>
<tr>
<td><0ont si1e"49'4>;ama Depan</0ont></td>
<td><0ont si1e"49'4>;ama 7khir</0ont></td>
<td><0ont si1e"49'4>,mur</0ont></td>
</tr>
<tr>
<td rowspan"(><0ont si1e"'><agaimana Menghubungi 7ndaG</td>
<td !olspan") 2align"top><0ont si1e"'>7lamat ?umah:
<te%tarea name"4.alan4 rows"' !ols"($></te%tarea></td>
</tr>
<tr>
<td !olspan"'><0ont si1e"'>:ota:
<input type"te%t name"4kota4 si1e"'$></td>
<td !olspan"'><0ont si1e"'>;egara:
<input type"te%t name"4negara4 si1e"'*></td>
</tr>
<tr>
<td !olspan"'><0ont si1e"'>:ode =os:
<input type"te%t name"4kodepos4 si1e"1$></td>
<td !olspan"'><0ont si1e"'>;omor elepon
<input type"te%t name"4telp14 si1e")> 9
<input type"te%t name"4telp'4 si1e"11></td>
</tr>
<tr>
<td><0ont si1e"'>Kredit Kard
<input type"radio name"KK 2alue"Risa !he!ked>Risa
<input type"radio name"KK 2alue"MasterKard !he!ked>M/K</td>
<td !olspan"' align"!enter>
<input type"te%t name"nomorKK1 si1e")>
<input type"te%t name"nomorKK' si1e")>
<input type"te%t name"nomorKK( si1e")>
<input type"te%t name"nomorKK) si1e")></td>
<td !olspan"' align"!enter><0ont si1e"'>anggal <erakhir:
<input type"te%t name"blnakhir si1e"'>
<input type"te%t name"thnakhir si1e"'></td>
</tr>
<tr>
<td><0ont si1e"'>.enis <arang </td>
<td !olspan")><0ont si1e"'>
<sele!t multiple name"Mer!handise si1e"1>
<option sele!ted>=entium IR
<option>=entium III
WAHLES.RPL.1.1

2;
<option>Monitor
<option>KD9?@M
<option>:amera Digital
<option>=rinter
<option>Mouse
<option>8!anner
</sele!t></td>
</tr>
<tr>
<td align"!enter !olspan"*>
<h1>erimakasih 7tas @rder 7ndaS</h1>
</td>
</tr>
</table><p>
<!enter>
<input type"4submit4 2alue"4:irim4>
<input type"4?eset4 2alue"4Hapus Isian4>
</!enter>
</0orm>
</body>
</html>
,. Lm0a! K!1a 1
A#at $an Ba2an
PC (Personal :om"uer) yang teah dengkap dengan web browser
dan edtor teks Notepad.
K-2atan $an K-#amatan K!1a
1) Berdoaah sebeum memua kegatan bea|ar.
2) Bacaah dan paham petun|uk praktkum pada setap embar
kegatan bea|ar.
3) Pastkan komputer daam keadaan bak, semua kabe penghubung
terhubung dengan benar.
4) |angan meetakkan benda yang dapat mengeuarkan medan
eektromagnetk d dekat komputer (magnet, han!"hone, dan
sebaganya).
5) Gunakanah komputer sesua fungsnya dengan hat-hat, |angan
berman game.
6) Seteah seesa, matkan komputer sesua prosedur yang aman!
Lan,4a2 K!1a
1) Sapkanah semua peraatan yang akan dgunakan!
WAHLES.RPL.1.1

2=
2) Perksa semua kabe penghubung pada PC.
3) Nyaakan PC dan |aankan program edtor teks notepad dan web
browser Internet Exporer.
4) Ker|akan Tugas 1 dan Tes Formatf 1 d atas.
5) Apaba menemu kesutan daam memaham mater yang ada,
segera tanyakan kepada nstruktur.
6) Seteah seesa, matkan komputer dan rapkan sepert semua.
WAHLES.RPL.1.1

26
6. K,iatan B#a1a! 6:
Membangun haaman web dengan bahasa pemrograman berbass web
1) Peserta dkat mampu mengena ob|ek-ob|ek web, tag-tag HTML
dan scrpt-scrpt pada pemrgraman berbass web.
2) Peserta dkat mampu menggunakan dan menerapkan fungs dan
operator agortma pemrograman pada apkas yang dbuat
3) Peserta dkat mampu menentukan struktur data pada apkas yang
dbuat
4) Peserta dkat mampu menentukan bass data pada apkas yang
dbuat
5) Peserta dkat mampu meakukan kombnas ob|ek-ob|ek web, tag-
tag HTML dan scrpt yang an untuk membuat haaman-haaman
web.
6) Peserta dkat mampu membangun haaman web dengan bahasa
pemrograman berbass web
0. U!aian Mat!i 6
1. Pn$a2+#+an
Webste dapat dbedakan men|ad dua yatu Web Sais dan Web
0inamis. Web Stats adaah web yang bers nformas-nformas
yang bersfat stats (tetap), sedangkan Web Dnams adaah web
yang menampkan nformas yang bersfat dnams (berubah-ubah)
dan dapat sang bernteraks dengan user.
Basanya untuk web stats yang dton|okan adaah ss tampan
yang banyak mengandung gras sehngga untuk merancang web
stats tdak dperukan kemampuan pemrograman yang handa.
Yang dbutuhkan hanya kemampuan desgn gras/web dan cta rasa
sen beaka. Sedangkan untuk web dnams yang banyak dton|okan
adaah pengoahan data sehngga dbutuhkan kemampuan daam
pemrograman web.
Ada dua |ens pemrograman web, yatu Ser*er Si!e Programming
dan :lien Si!e Programming. Pada Server Sde Programmng,
semua sntaks dan perntah program yang dberkan akan
d|aankan/dproses d Web Ser*er, kemudan hasnya dkrmkan ke
browser pengguna daam bentuk HTML basa. Sehngga pengguna
tdak dapat mehat kode as yang dtus daam bentuk server sde
programmng tersebut. Yang tergoong daam server sde
SWR.OPR.?MA.J?K.A
Mengoperasikan <ahasa =emrograman <erbasis /eb
programmng sepert: CGI/Per, Actve Server Pages, |ava Server
Page, PHP, CodFusson dan an-an.
Sebaknya, pada Cent Sde Programmng semua sntaks dan
perntah program d|aankan d web browser, sehngga ketka cent
memnta dokumen yang mengandung scrpt, scrpt tersebut akan
damb dar web server kemudan d|aankan d web browser yang
bersangkutan. Contoh dar cent sde programmng sepert:
|avaScrpt, VbScrpt, HTML.
6. Pn,na#an PHP
PHP adaah bahasa scrptng yang menyatu dengan HTML dan
d|aankan pada ser*ersi!e. Artnya semua sntaks yang kta berkan
akan sepenuhnya d|aankan pada server sedangkan yang
dkrmkan ke browser hanya hasnya sa|a. Ketka seorang
pengguna nternet membuka suatu stus yang menggunakan
fastas server sde scrptng PHP, maka terebh dahuu server yang
bersangkutan akan memproses semua perntah PHP d server au
mengrmkan hasnya daam format HTML ke web server pengguna
nternet tad. Sehngga kode as yang dtus dengan PHP tdak
terhat d browser pengguna.
PHP merupakan software yang open source bebas. |ad anda dapat
merubah sour(e (o!e dan mendstrbuskan secara bebas dan
grats. PHP |uga dapat ber|aan ntas "laform, yatu dapat
dgunakan dengan sstem operas (Wndows dan Lnux) dan web
server apapun (msanya: PWS, IIS, Apache d).
Adapun keebhan-keebhan dar PHP yatu:
Mudah dbuat dan berkecepatan tngg
PHP dapat ber|aan ntas patform, yatu dapat ber|aan daam
sstem operas dan web server apapun.
Dapat dgunakan secara grats.
Termasuk bahasa yang embedded, yakn dapat detakkan daam
tag HTML.
Termasuk server sde programmng, sehngga kode as/source
code PHP tdak dapat dhat d browser pengguna, yang terhat
hanya kode daam format HTML.
Dapat memanfaatkan sumber-sumber apkas yang dmk oeh
server, sepert msanya untuk keperuan !aabase (onne(ion.
PHP dapat meakukan koneks dengan berbaga database sepert
MySOL, Orace, Sybase, mSOL, Sod, Generc ODBC, Postgres
SOL, dBase, Drect MS-SOL, Veocs, IBM DB2, Interbase,
SWR.OPR.?MA.J?K.A
Frontbase, Empress, dan semua database yang mempunya
proder ODBC sepert msanya MS Access dan an-an.
PHP dapat meakukan semua apkas program CGI, sepert
mengamb na form, menghaskan haaman web yang dnams,
mengrmkan dan menerma (ookies.
PHP |uga mendukung komunkas dengan ayanan an meau
protoko IMAP, SNMP, NNTP, POP3 dan HTTP dan annya.
?. In-ta#a-i P!o,!am
Untuk men|aankan PHP, dbutuhkan ha-ha berkut:
Web Server
Program apkas PHP
Database server
Program Apkas Database
Ke-empat komponen tersebut mutak harus ada, |ad sebeum
meakukan pemrograman dan men|aankan PHP, komponen-
komponen datas harus dnsta terebh dahuu.
Untuk keempat software tersebut anda bebas memh menurut
yang anda suka. Namun daam modu n yang akan dbahas hanya
PhpTrad sa|a. Kenapa PhpTrad? Karena dsampng software
tersebut adaah grats |uga karena daam satu paket program n
sudah terdr dar 4 software yang kta butuhkan, yatu web server
(daam ha n, Apache), Program PHP, Database Server MySOL dan
program apkas MySOL. Pengnstaan PhpTrad sangat mudah,
seka nsta semua program tersebut secara otomats ternsta
|uga.
Cara nstaas PhpTrad adaah sebaga berkut:
a. Persapkan master program PhpTrad. |ka beum ada, sahkan
downoad d nternet. Anda dapat memnta bantuan sear(h
engine untuk mencar program PhpTrad atau anda dapat
mengun|ung stus http://www.downoad.com.
b. Seteah proses downoad seesa, buka wndows exporer
kemudan doube kk con PhpTrad2-2-1.exe dan kut petun|uk
yang dberkan.
SWR.OPR.?MA.J?K.A
Proses nstaas n pada dasarnya akan mengekstrak e-e ke
drektor tertentu, yatu &:Oa)a&2.
c. Seteah tu muncu |endea nstaas sepert pada gambar. Kotak
li(en(e agreemen tersebut merupakan kotak yang harus dbaca
terebh dahuu
karena
berskan
pengertan-
pengertan
umum
mengena
sens
perangkat unak
n. |ka anda se-
tu|u dengan
sens yang dber-kan, baru kta bsa mean|utkan nstaas
dengan kk tombo I A,!. Proses nstaas akan ber|aan
seama beberapa ment. Tunggu proses tersebut hngga seesa.
d. Seteah proses seesa akan muncu pesan Seu" :om"lee!
sepert pada gambar dbawah n. Kk tombo &#o- untuk
mengakhr proses nstaas.
SWR.OPR.?MA.J?K.A
e. Sean|utnya akukan beberapa angkah untuk mengaktfkan
semua komponen PhpTrad daam komputer anda. Langkah
pertama, |aankan PHPT!ia$ 3ont!o# Pan#, yang dapat
dakukan dar Sta!t Mn+ P!o,!am PHP T!ia$
PHPT!ia$ 3ont!o# Pan#. Atau meau Internet Exporer,
ketkkan 2tt)://#o&a#2o-t:1MMB/ pada a!!ress bar.
PHPT!ia$ 3ont!o# Pan# dgunakan untuk meakukan
pengaturan terhadap berbaga fastas yang ada pada PhpTrad.
Seteah contro pane d|aankan, akan muncu tampan sepert
pada gambar dbawah n.
SWR.OPR.?MA.J?K.A
f. Seteah PhpTrad Contro Pane aktf, akukan angkah sebaga
berkut:
Kk In-ta## A)a&2 a- S!'i&".
Proses n akan meakukan nstaas Apache sebaga servce
software.
Kk Sta!t A)a&2".
Proses n akan meakukan aktfas Apache sebaga webserver.
Kk Sta!t M.S>L".
Ph vers sstem operas yang aktf dan sesuakan dengan
vers yang ada pada komputer anda.
Kk O)n Sit "/ $/a+#t B!o"-!".
Bagan n dgunakan untuk mengecek apakah PHP sebaga
sebuah servce sudah dapat dgunakan |ka berhas, maka
akan muncu tampan sebaga berkut:
SWR.OPR.?MA.J?K.A
g. Langkah sean|utnya yang peru anda akukan adaah mengubah
atau mengatur drektor/foder defaut untuk dokumen anda. In
dakukan agar ketka kta membuka Internet Exporer dan
mengetkkan 2tt)://#o&a#2o-t pada address bar, maka yang
akan dbuka adaah !o(umen roo yang possnya d foder yang
teah kta tentukan. |ka tdak kta atur, maka defaut untuk
document root adaah d drektor 3:Oa)a&2O2t$o&-". Artnya,
dokumen yang dakses secara otomats oeh browser ketka
memangg ocahost adaah dokumen-dokumen yang berada
pada foder tersebut. Dan secara otomats pua, e yang
pertama ka d|aankan adaah e yang memk nama
in$(.2tm#P atau in$(.2tm atau in$(.)2) yang terdapat
daam foder tersebut.
Untuk mengatur document root, yang peru anda akukan adaah:
Buat drektor/foder baru yang akan kta |adkan document
root. Msanya: &:O#ati2an".
|aankan program apkas teks edtor Notepad. Kemudan buka
e 2tt)$.&on/" yang teretak d &:Oa)a&2O&on/". Car teks
Do&+mntRoot 93:OA)a&2O2t$o&-9 kemudan gant teks
tersebut dengan Do&+mntRoot 93:OLati2an9. Smpan e
n dan tutup kemba notepad anda. Sekarang anda bsa
SWR.OPR.?MA.J?K.A
membuat e-e PHP yang dsmpan daam drektor menurut
seera anda sendr.
h. Langkah terakhr yang tdak kaah pentngnya adaah
mengaktfkan MySOL. |aankan wndows exporer kemudan
masuk ke drektor/foder 3:Oa)a&2Om.-@#O0in dan car e
wnmysqadmn.exe. |aankan e n untuk mengaktfkan MySq.
|ka e n beum pernah d|aankan sebeumnya, maka akan
muncu wndow form yang memnta ke anda agar memasukkan
nama user
dan
password.
Isah sesua
dengan
kengnan
anda sendr
dan |angan
upa dcatat
agar anda
tdak meupakannya.
Seteah anda mengsnya, kk ok. Dan wnmysq akan segera
aktf (terhat d taskbar sebeah kanan dengan con berwarna
h|au, |ka berwarna merah berart tdak |aan)
SWR.OPR.?MA.J?K.A
. Ok, proses nstaas semua software yang kta butuhkan sekarang
teah seesa. Dan sekarang mar kta an|utkan ke mater
berkutnya.
A. Pn+#i-an S&!i)t PHP
Pastkan web server dan skrp PHP anda teah ber|aan dengan bak
sebeum anda memua pemrograman PHP. Untuk membuat web
dengan scrpt PHP, cukup anda persapkan edtor teks.
Fungs-fungs yang ada d PHP +n&a- -n-iti', tetap
varabenya &a- -n-iti' (membedakan huruf besar dan kec).
Scrpt PHP dawa dengan tanda ebh kec ( < ) dan dakhr dengan
tanda ebh besar ( > ). Ada tga cara untuk menuskan scrpt PHP
yatu:
<G
8!ript =H=
G>
<Gphp
8!ript =H=
G>
<s!ript language"FphpF>
8!ript =H=
</s!ript>
Ha-ha yang harus dperhatkan daam penusan scrpt php, yatu:
Scrpt PHP harus dsmpan dengan ek"ten"i %H%. Format
penusannya adaah namafile.php, atau namafile.php3 atau
namafile.php4.
Setap nstruks dpsahkan oeh tanda ttk koma (;").
Setap bars scrpt s harus ddahuu pernyataan cetak yang
dbedakan men|ad dua, yatu %rint dan &#ho.
Penusan komentar/#omment ddahuu dengan /Q dan dakhr
dengan Q/. Atau dawa dengan tanda //. Sntaknya adaah
sebaga berkut:
/N komentar N/
// komentar
# komentar
Karakter adaah semua bentuk huruf, angka, spas, tanda kontro
atau smbo yang terdapat daam tombo keyboard.
SWR.OPR.?MA.J?K.A
B. Va!ia0#
Varabe dgunakan untuk menympan data sementara dan nanya
bsa berubah-ubah setap ka program d|aankan. Daam PHP setap
nama varabe dawa tanda doar ($) dan dkut dengan nama
varabenya, tdak memandang data tersebut apakah nteger, rea
maupun strng, PHP otomats akan mengkonvers data menurut
tpenya. Msanya nama varabe a daam PHP dtus dengan Ra.
|ens suatu varabe dtentukan pada saat |aannya program dan
tergantung pada konteks yang dgunakan. Aturan penamaan
varabe daam PHP:
Dawa dengan tanda doar ($)
Penamaan varabe bersfat case senstve
Nama varabe hanya bsa dawa dengan huruf atau gars
bawah, baru dapat dkut dengan beberapa huruf atau angka
maupun gars bawah yang pan|angnya tdak terbatas.
Tdak boeh menggunakan tanda baca.
Tdak boeh menggunakan reser*e! wor! PHP sepert msanya
e(ho) "rin) dan an-an.
Varabe daam PHP tdak harus ddekaraskan terebh dahuu
sebeum dgunakan.
Contoh-contoh penusan varabe:
Bna! Sa#a2
$varabe $var!abe
$_ph $-ph
$te93 $93te
$n_tu $n-tu
&onto26<1.)2)
<html>
<head>
<title>Rariabel dalam =H=</title>
<body>
<Gphp
//2ariabel bertipe integer
Ta"4*4B
//2ariabel bertipe real
Tb"4'.*4B
//2ariabel bertipe string
Tkomentar"48elamat Datang di =H=4B
e!ho U4;ilai 2ariabel a adalah " Ta <br>4VB //2ariabel bertipe integer
e!ho U4;ilai 2ariabel b adalah " Tb <br>4VB //2ariabel bertipe real
e!ho U4;ilai 2ariabel komentar adalah " Tkomentar<br>4VB //2ariabel bertipe string
SWR.OPR.?MA.J?K.A
Thasil"TaWTbB
e!ho U4Hasil Cumlah a dan b adalah " Thasil <br>4VB //2ariabel bertipe double
Ttgl " dateU4d & H4VB //2ariabel bertipe tanggal
Tnama " 48M: =6?I ( Malang4B
Tgaris" 4"""""""""""""""""""""""""""""""""""""4B
e!ho 4<p>4B
e!ho Tgaris.4<br>4B
e!ho Tkomentar. 4 Di Lab 4. Tnama. 4<br><elaCar dengan giat ya.... <br>4B
e!ho Tgaris.4<br>4B
e!ho 4anggal 4.TtglB
G>
hasnya adaah:
D. Kon-tanta
Konstanta adaah varabe yang nanya tetap.
Sntak:
De0ine UXnama5konstantaF-Fnilai5konstantaFVB
Contoh:
<htm>
<head>
</head>
<body>
<?
Dene (kampus","SMK PGRI 3 Maang");
Echo kampus;
?>
</body>
</htm>
E. T.) Data
PHP mengena 4 tpe data skaar dan 2 tpe data compound. Tpe
data skaar adaah tpe data ineger) ;oaing "oin) sring dan
SWR.OPR.?MA.J?K.A
boolean. Sedangkan 2 tpe data compound adaah arra$ dan ob<e(.
yatu:
a. Integer, tpe data yang menyatakan bangan buat.
b. Foatng pont/doube, tpe data yang menyatakan bangan
rea/pecahan
c. Strng, menyatakan tpe data teks yang bers kumpuan
beberapa karakter
d. Booean, tpe data ogka yang memk na true dan fase.
e. Array adaah tpe data terstruktur yang berguna untuk
menympan se|umah data yang bertpe sama.
f. Ob|ek, merupakan nstansas dar suatu cass.
F. Kon'!-i T.) Data
PHP menyedakan perntah untuk meakukan konvers tpe data ke
tpe data yang an dengan menggunakan perntah sebaga berkut:
settype(value,datatype)
dmana:
5 'a#+ adaah na yang akan dkonverskan
5 $atat.) adaah tpe data yang dkonverskan
Perhatkan contoh berkut:
&onto26<6.)2)
<html>
<head>
<title>.:: :on2ersi ype Data::.</title>
</head>
<body>
<0ont 0a!e"tahoma si1e"'>
<Gphp
Tbayar"4*$$.33 ?upiah4B
print U4ipe Data 8tring: Tbayar <br> Yn4VB
settypeUTbayar-4double4VB
print U4ipe Data Double: Tbayar <br> Yn4VB
settypeUTbayar-4integer4VB
print U4ipe Data Integer: Tbayar <br> Yn4VB
G>
</body>
</html>
Has dar scrpt datas adaah:
SWR.OPR.?MA.J?K.A
I. O)!ato!
Operator adaah smbo/tanda yang dgunakan untuk meakukan
operas-operas matemats atau operas strng. Sedangkan o"eran!
adaah data yang doperaskan atau dmanpuas. Operator dapat
dkeompokkan daam 4 kategor, yatu:
a. Operator Artmatka/Arthmetc Operator
b. Operator Penugasan/Assgnment Operator
c. Operator Pembandng/Comparson Operator
d. Operator Logka/Logca Operator
Operator Aritmatika'Arithmeti# Operator
Adaah operator yang dgunakan daam operas matematka.
Yang termasuk operator n adaah:
Operator Operasi
W =enCumlahan
9 =engurangan
N =erkalian
/ =embagian
J Modulus
WW In!rement 1
99 De!rement 1
Operator %enuga"an'A""ignment Operator
Operator penugasan berfungs untuk memberkan na ke suatu
varabe atau varabe ke varabe. Smbo operator n adaah
sama dengan" (=). Daftar operator penugasan sepert daam
tabe berkut:
O)!ato
!
F+n,-i
3onto2
W"
,ntuk menambah nilai 2ariabel disebelah
kiri dengan nilai sebelah kanan
%W"*B
%"%W*B
9"
,ntuk mengurangi nilai 2ariabel disebelah
kiri dengan nilai disebelah kanan
%9"*B
%"%9*B
SWR.OPR.?MA.J?K.A
."
,ntuk melakukan operasi penggabungan
UconcatenationV antara 2ariabel disebelah
kiri dengan nilai disebelah kanan
%."FphpFB
%"%.FphpFB
/"
,ntuk membagi nilai 2ariabel di sebelah
kiri dengan nilai sebelah kanan
%/"*B
%"%/*B
J"
8isa hasil bagi antara nilai 2ariabel
disebelah kiri dengan nilai disebelah kanan
OJ"*B
%"%J*B
A"
,ntuk melakukan operasi logika 7;D
antara nilai 2ariabel disebelah kiri dengan
nilai disebelah kanan
OA"*B
%"%A*B
D"
,ntuk melakukan operasi logika @? antara
nilai 2ariabel disebelah kiri dengan nilai
disebelah kanan
OD"*B
%"%D*B
Z"
,ntuk melakukan operasi logika O@?
antara nilai 2ariabel disebelah kiri dengan
nilai disebelah kanan
OZ"*B
%"%Z*B
Operator %em(an!ing')ompari"on Operator
Operator n dsebut |uga operator reasona, yatu operator yang
dgunakan untuk membandngkan antara dua atau ebh operand
(na, varabe, atau pernyataan) dan menghaskan na T!+
atau Fa#-. Operator-operator yang termasuk operator
pembandng adaah:
O)!ato
!
F+n,-i
3onto2
"" 8ama Dengan
Ta""TbB
true, Cika Ta sama
dengan Tb
""" Identik
Ta"""TbB
true, Cika Ta sama
dengan Tb- dan keduanya
mempunyai tipe data
yang samaB
S" atau
<>
idak 8ama Dengan
TaS"TbB atau
Ta<>TbB
true, Cika Ta tidak sama
dengan TbB
S"" idak Identik
TaS""TbB
true, Cika Ta tidak sama
dengan Tb- atau
keduanya tidak memiliki
tipe data yang samaB
< :urang Dari
Ta<TbB
true, Cika Ta kurang dari
TbB
> Lebih Dari
Ta>TbB
true, Cika Ta lebih besar
dari TbB
<" :urang Dari atau 8ama Dengan
Ta<"TbB
true, Cika Ta kurang dari
atau sama dengan TbB
SWR.OPR.?MA.J?K.A
>" Lebih Dari atau 8ama Dengan
Ta>"TbB
true, Cika Ta lebih dari
atau sama dengan TbB
Operator Logika'Logi#al Operator
Operator ogka dgunakan untuk membandngkan dua atau ebh
pernyataan dan menghaskan na t!+ atau /a#-. Operator
ogka serng dgunakan pada struktur kenda. Yang termasuk
operator ogka adaah:
O)!ato
!
F+n,-i
3onto2
AA atau
7;D
@perasi Logika 7;D
Ta AA TbB
true, Cika Ta dan Tb bernilai true
DD atau @? @perasi Logika @?
Ta DD TbB atau
Ta or TbB
true, Cika Ta atau Tb- salah satunya
bernilai trueB
O@? @perasi Logika O@?
Ta %or TbB
true, Cika Ta atau Tb bernilai true dan
salah satunya bernilai falseB
S @perasi Logika ;@
STaB
true, Cika Ta tidak benilai trueB
Operator *it+i"e
Operator btwse dgunakan untuk operas bangan bner.
Operator-operator yang termasuk operator btwse adaah:
O)!ato
!
A!ti
& @perator 7;D
D @perator @?
Z @perator O@?
[ @perator ;@
<< @perator 8hi0t Le0t Ugeser kiriV
>> @perator 8hi0t ?ight Ugeser kananV
Operator ,n#rement'-e#rement
Pre/Post ncrement dan decrement masng-masng adaah
penambahan dan pengurangan satu. Apaba operator detakkan
sebeum varabe, msa ++$ atau -- maka na $ akan
dtambahkan atau dkurangkan 1 sebeum keseuruhan operas
daam ekspres dker|akan dan sebaknya apaba operator
detakkan seteah varabe, msa $++ atau $-- maka na $
akan dtambah atau dkurang 1 seteah operas daam ekspres
dker|akan.
O)!ato! O)!a-i Pn,,+naan
SWR.OPR.?MA.J?K.A
++
Pre/Post
Increment
++$a atau $a++
--
Pre/Post
Decrement
--$b atau $b--
Operator String
Hanya ada satu operator strng, yatu operator &on&atnation
J.K, yakn menggabungkan dua buah atau ebh strng.
Contoh
<Gphp
Ta " XHalloFB
Tb " Ta.F8elamat Dtang di =H=FB
//Tb berisikan XHallo 8elamat datang di =H=F
G>
.e!u!ukan Operator
Setap operator mempunya kedudukan (operator precedence)
dan prortas masng-masng yang dgunakan untuk menentukan
operator manakah yang akan deksekus terebh dahuu ba
daam sebuah pernyataan terdapat dua atau ebh operator.
Contoh, msanya ada persamaan matematka x=2+5*7. Maka
na x adaah 37 bukan 49. Ha n karena kedudukan operator
perkaan ebh tngg dar pada operator pen|umahan sehngga
5 harus dkakan terebh dahuu dengan 7, baru d|umah
dengan 2; bukan 2 dtambah 5 baru dka 7. Kedudukan
operator-operator tersebut sepert terhat pada tabe berkut:
P!io!ita
-
O)!ato!
ertin!!i UV- \]
[- S- WW- 99- T- A
N- G- J
W- 9
<>- <"- >"
""- """- S"- S""
A
Z
S
AA
DD
"- W"- 9"- N"- /"- A"- D"- Z"- ."
7;D UAAV
O@? UDDV
erendah @?
1M. Da-a!5$a-a! St!+4t+! P!o,!am In)+t5O+t)+t
SWR.OPR.?MA.J?K.A
Struktur yang pang dasar daam sebuah pemrograman adaah
struktur nput-output. Input merupakan nterface untuk
memasukkan data, kemudan data d oah dan sean|utnya has
pengoahan dtampkan pada komponen output.
,nput/Output Se!erhana
Sebaga contoh, kta akan membuat program sederhana untuk
menghtung uas segtga berdasarkan owchart berkut:
&onto26<?.)2)
<html>
<head>
<title>.:: Latihan membuat input @utput::.</title>
</head>
<body>
<0ont 0a!e"2erdana si1e"'>
<G
//Mendeklarasikan data input
Talas"'$B
Ttinggi"*B
//=roses hitung luas segitiga
Tluassegitiga"$.*NTalasN
TtinggiB
//Ketak hasil
e!ho 4<esar 7las " Talas
<br>4B
e!ho 4<esar inggi " Ttinggi
SWR.OPR.?MA.J?K.A
"nput #roses Output
Mua
Input Aas
Input Tngg
Proses Htung Luas Segtga
Luas=0,5 * Aas * Tngg
Output
Cetak Luas
Seesa
<br>4B
e!ho 4Luas 8egi iga 7dalah " Tluassegitiga<br>4B
G>
</body>
</html>
|ka program tersebut d|aankan maka akan ddapatkan has sepert
pada gambar datas.
,nput/Output !engan 0orm
Dengan memanfaatkan form yang terdapat daam HTML, kta dapat
membuat program yang ebh nteraktf. Sebaga contoh, program d
contoh 2.3 akan modkas sehngga ebh nteraktf.
&onto26<A.)2)
<html>
<head>
<title>.:: Menghitung Luas 8egi iga::.</title>
</head>
<body>
<0ont 0a!e"2erdana>
<!enter><h(><u>Menghitung Luas 8egitiga</u></h(></!enter>
<0orm a!tion"luassegitiga.php method"post>
<table align"!enter bg!olor"#!edad! border!olor"#!0dbdd !ellspa!ing"*>
<tr>
<td>Masukkan 7las</td>
<td>:</td>
<td><input type"te%t name"alas si1e"1$></td>
</tr>
<tr>
<td>Masukkan inggi</td>
<td>:</td>
<td><input type"te%t name"tinggi si1e"1$></td>
</tr>
<tr>
<td !olspan"( align"!enter><input type"submit 2alue"hitung></td>
</tr>
</table>
</0orm>
</body>
</html>
Ketka tombo HITUNG dkk, program memangg e luassegitiga.php
(perhatkan pada tag <0orm a!tion"luassegitiga.php method"post>) yang
akan dgunakan untuk menampung has perhtungan. Maka buat
ag e dan ber nama luassegitiga.php dan smpan daam satu
drektor.
Fi# #+a--,iti,a.)2)
<html>
<head>
<title>.:: Hasil =erhitungan Luas 8egi iga::.</title>
SWR.OPR.?MA.J?K.A
</head>
<body>
<0ont 0a!e"2erdana>
<!enter>
<h(><u>Luas 8egitiga</u></h(>
</!enter>
<0orm a!tion"!ontoh'5).php method"post>
<G
Tluas"$.*NTalasNTtinggiB
e!ho 4<table align"!enter bg!olor"#!edad! border!olor"#!0dbdd !ellpadding"$>4B
e!ho 4<tr>4B
e!ho 4<td>7las</td>4B
e!ho 4<td>:</td>4B
e!ho 4<td>Talas</td>4B
e!ho 4</tr>4B
e!ho 4<tr>4B
e!ho 4<td>inggi</td>4B
e!ho 4<td>:</td>4B
e!ho 4<td>Ttinggi</td>4B
e!ho 4</tr>4B
e!ho 4<tr>4B
e!ho 4<td>Luas 8egi iga</td>4B
e!ho 4<td>:</td>4B
e!ho 4<td>Tluas</td>4B
e!ho 4</tr>4B
e!ho 4<tr>4B
e!ho 4<td !olspan"( align"!enter><input type"submit 2alue"ulang></td>4B
e!ho 4</tr>4B
e!ho 4</table>4B
G>
</0orm>
</body>
</html>
Hasnya adaah:
SWR.OPR.?MA.J?K.A
dan tampan seteah tombo 2it+n, d-kk adaah:
11. St!+4t+! Kont!o#/Kn$a#i
Statmnt ,0
Konstruks IF dgunakan untuk meakukan eksekus suatu statement
secara bersyarat atau sesua dengan konds tertentu. Statement IF
dbag dua, saemen /- unggal dan saemen /- ma<emuk. Cara
penusan statement IF tungga adaah sebaga berkut:
i0 UkondisiV
\
statementB
]
Contoh:
SWR.OPR.?MA.J?K.A
Mua
Input Na
Kompeten
Seesa
Apakah na
> 70
T
Y
&onto26<B.)2)
<html>
<head>
<title>.:: Kontoh 8eleksi :ondisi::.</title>
</head>
<body>
<0orm a!tion"nilai.php
method"post>Masukkan ;ilai:
<input type"te%t name"nilai
si1e"'><p>
<input type"submit
2alue"=roses>
</0orm>
</body>
</html>
Untuk memproses e datas, buat scrpt berkut dan smpan dengan
nama na.php
Fi# ni#ai.)2)
<html>
<head>
</head>
<body>
<G
e!ho 4;ilai ,Cian anda: Tnilai<br>4B
i0 UTnilai>3$V
\
e!ho 47nda :ompeten<br>4B
]
G>
</body>
</html>
SWR.OPR.?MA.J?K.A
Untuk statement IF ma|emuk atau dkena dengan IF ... ELSE,
dgunakan |ka terdapat ebh dar satu konds yang akan dker|akan.
Sntaks struktur IF ... Ese adaah sebaga berkut:
i0 UsyaratV
\
statement
]
else
\
statement lain
]
atau:
i0 Usyarat pertamaV
\
statement pertama
]
elsei0 Usyarat keduaV
\
statement kedua
]
else
\
statement lain
]
SWR.OPR.?MA.J?K.A
Mua
Input Na
Luus dan
Tdak
Kompeten
Seesa
Tdak Luus
T
Y
Apakah na <
50
Apakah na <
70
Luus dan
Kompeten
T
Y
Sebaga contoh, kta modkas e ni#ai.)2) pada contoh 2_5 dan
smpan dengan nama ni#ai6.)2)
&onto26<D.)2)
<html>
<head>
</head>
<body>
<0orm a!tion"nilai'.php
method"post>
Masukkan ;ilai:
<input type"te%t name"nilai
si1e"'><p>
<input type"submit
2alue"=roses>
</0orm>
</body>
</html>
Fi# ni#ai6.)2):
<html>
<head>
</head>
<body>
<G
e!ho 4;ilai ,Cian anda: Tnilai<br>4B
i0 UTnilai<*$V
\
e!ho 47nda idak Lulus<br>4B
]
elsei0 UTnilai<3$V
\
e!ho 47nda Lulus api idak :ompeten<br>4B
]
else
\
e!ho 48elamat 7nda Lulus
dan :ompeten4B
]
G>
</body>
</html>
Hasnya adaah sepert gambar d atas:
SWR.OPR.?MA.J?K.A
Statmnt S1,2)H
Statement SWITCH dgunakan untuk membandngkan suatu varabe
dengan beberapa na serta men|aankan statement tertentu |ka
na varabe sama dengan na yang dbandngkan. Penggunaan
statement SWITCH hampr sama dengan penggunaan statement IF,
sehngga bsa dgunakan sebaga penggant statement IF.
Untuk Keuar dar suatu bok statement daam statement swtch,
dapat mengunakan perntah BREAK
Struktur Swtch adaah sebaga berkut:
swit!h U2ariableV
!ase nilai:
statement
!ase nilai:
statemant
!ase nilai:
statement
&onto26<E.)2)
<html>
<head>
<title>.:: 8truktur :endali 8wit!h::.</title>
</head>
<body>
<G
Tdino"dateU4l4VB
swit!hUTdinoV
\
!ase 4Monday4:
Thari"48enin4BbreakB
!ase 4uesday4:
Thari"48elasa4B
breakB
!ase 4/ednesday4:
Thari"4?abu4B
breakB
!ase 4hursday4:
Thari"4:amis4B
breakB
!ase 4&riday4:
Thari"4.umat4B
breakB
!ase 48aturday4:
Thari"48abtu4B
breakB
de0ault:
Thari"4Minggu4B
]
e!ho 4<h(>Hari ini adalah hari <u>Thari</u></h(>4B
G>
</body>
</html>
SWR.OPR.?MA.J?K.A
Lati2an5#ati2an
1. Membuat program penghtung dscount
Program n dgunakan untuk mengetahu apakah pembe dapat
dskon atau tdak. Besar dskon tersebut mengkut aturan
sebaga berkut: |ka |umah bayar 50.000 dapat dskon 5%, |ka
|umah bayar 100.000 dapat dskon 10%, dan |ka |umah bayar
500.000 dapat dskon 50%. Sean kretera tersebut, dskonnya
adaah 0%.
Untuk menger|akan program tersebut, perhatkan owchart
berkut:
Dar owchart tersebut dapat kta buat scrpt programnya,
sebaga berkut:
&onto26<F.)2)
<html>
<head>
<title>.:: =rogram Menghitung Dis!ount::.</title>
SWR.OPR.?MA.J?K.A
Mua
Dskon=0.5
*|umahBay
ar
T
Y
|umahBaya
r 500000
Masukkan
|umah
Bayar
|umahBaya
r 50000
|umahBaya
r 100000
Dskon=0.1
*|umahBay
ar
T
Y
Dskon=0.0
5*|umahBa
yar
T
Dskon=0
Y
Seesa
TotaBayar=
|umahBayar-
Dskon
</head>
<body>
<0orm>.umlah <ayar
<input type"te%t name"totalbeli><br><br>
<input type"submit 2alue"4Hitung Diskon4>
</0orm>
<Gphp
i0 UissetUTtotalbeliVV
\
Ttoyar"int2alUTtotalbeliVB
Tdiskon"$B
i0 UTtoyar>"*$$$$$V
Tdiskon"U$.*NTtoyarVB
else
i0 UTtoyar>"1$$$$$V
Tdiskon"U$.1NTtoyarVB
else
i0 UTtoyar>"*$$$$V
Tdiskon"U$.$*NTtoyarVB
else
printU4Maa0 idak 7da Diskon <br>Yn4VB
print0U4.umlah <ayar " Jd<br>Yn4-TtoyarVB
print0U4Diskon " Jd<br>Yn4-TdiskonVB
Ttotalbayar"Ttoyar9TdiskonB
print0U4<b>otal <ayar " Jd<br></b>Yn4-TtotalbayarVB
]
G>
</body>
</html>
2. Membuat Program kakuator sederhana
Program yang akan buat n adaah program untuk meakukan
beberapa operas artmatka, yatu pen|umahan, pengurangan,
perkaan dan pembagan. Setap operas yang dakukan,
SWR.OPR.?MA.J?K.A
program akan memnta masukan na dua operand yang akan
dhtung daam ha n adaah A dan B. Program |uga akan
memnta masukan dar pemaka untuk memh operas apa yang
akan dakukan.
Perhatkan owchart berkut:
Dar owchart tersebut, dapat kta buat programmnya sebaga
berkut:
&onto26<I.)2)
<html>
<head>
<title>::: @perasi 7ritmatika:::</title>
</head>
<body>
<0orm a!tion"operasi.php method"post>
SWR.OPR.?MA.J?K.A
Mua
C = A + B
T
Y
Phan=
|umah
Masukkan
Na A dan
B
Phan=
Ka
Phan=
Kurang
C = A - B
T
Y
C = A * B
T
C = A / B
Y
Seesa
Has Adaah = C
Sahkan
Ph
Operas
Apa?
<!enter><h(>@perasi 7ritmatik 7 dan <</h(></!enter>
<table align"!enter bg!olor"#!edad! border!olor"#!0dbdd>
<tr>
<td>Masukkan ;ilai 7 </td>
<td><input type"te%t name"a si1e"1$></td>
</tr>
<tr>
<td>Masukkan ;ilai < </td>
<td><input type"te%t name"b si1e"1$></td>
</tr>
<tr>
<td>@perasi</td>
<td>
<sele!t name"operasi>
<option 2alue"1>=enCumlahan âWb_</option>
<option 2alue"'>=engurangan â9b_</option>
<option
2alue"(>
=erkalian
âNb_</option>
<option
2alue")>
=embagian
â/b_</option>
</sele!t>
</td>
</tr>
<tr>
<td !olspan"'
align"!enter>
<input
type"submit
2alue"hitung></td>
</tr>
</table>
</0orm>
</body>
</html>
Sekarang buat satu ag program yang dgunakan untuk memproses
has seteah ada penekenan tombo htung. Fe tersebut smpan
dengan nama
operas.php.
Fi# o)!a-i.)2)
<html>
<head>
<title>Hasil @perasi
7ritmatika</title>
</head>
<body>
SWR.OPR.?MA.J?K.A
<G
i0 UToperasi""1V
\
T!"TaWTbB
Toper"`â W b_`B
]
elsei0 UToperasi""'V
\
T!"Ta9TbB
Toper"`â 9 b_`B
]
elsei0 UToperasi""(V
\
T!"TaNTbB
Toper"`â N b_`B
]
else
\
T!"Ta/TbB
Toper"`â / b_`B
]
e!ho 4;ilai 7 adalah " Ta dan ;ilai < adalah " Tb<br>4B
e!ho 4Hasil @perasi Toper adalah " T!<br>4B
G>
</body>
</html>
Statmnt 1H,L&
Pernyataan n dgunakan untuk menguang sebuah perntah
sampa |umah atau konds tertentu terpenuh. Bentuk dasar dar
statement Whe adaah sebaga berkut:
while UsyaratV
\
statement
]
Art dar statemant Whe adaah memberkan perntah untuk
men|aankan statement dbawahnya secara beruang-uang, seama
syaratnya terpenuh.
Perhatkan contoh2_10. Pada contoh tersebut, program dgunakan
untuk mencar bangan genap dar 2 sampa dengan batas tertentu
sesua dengan masukan yang dberkan.
SWR.OPR.?MA.J?K.A
Mua
$genap=$genap
+2
T
Y
$genap <
$batas
Masukkan
Batasnya?
Seesa
Banga genap dar 2 s/d
batas
adaah:$genap
$genap=0;
&onto26<1M.)2)
<html>
<head>
<title>.:: =rogram Men!ari <ilangan 6enap::.</title>
</head>
<body>
<0orm>Men!ari <ilangan 6enap <erapa:
<input type"te%t name"genap><br><br>
<input type"submit 2alue"4Kari <ilangan 6enap4>
</0orm>
<Gphp
i0 UissetUTgenapVV
\
Tbilgen"int2alUTgenapVB
e!ho 4<ilangan 6enap dari ' s/d Tbilgen adalah: 4B
e!ho 4<br>4B
Tgen"$B
while UTgen<TgenapV
\
Tgen"TgenW'B
e!ho 4Tgen4B
e!ho 4 4B
]
]
G>
</body>
</html>
Statmnt 0OR
Perntah n dgunakan untuk menguang perntah dengan |umah
penguangan yang sudah dketahu. Pada statement n peru
SWR.OPR.?MA.J?K.A
dtuskan na awa dan na akhr varbe penghtung yang secara
otomats akan bertambah atau berkurang setap ka sebuah
penguangan daksanakan.
Cara penusan statement FOR adaah sebaga berkut:
0or U;ilai57walB ;ilai57khirB KounterV
Keterangan:
Na_Awa : Batas awa peruangan
Na_Akhr : Batas akhr peruangan
Counter : |umah kenakan yang akan dtambakan kepada
batas awa hngga mencapa batas akhr
&onto26<11.)2)
<html>
<head>
<title>Latihan =erulangan dengan &or</title>
</head>
<body>
anggal:
<sele!t name"tanggal>
<option 2alue"$ sele!ted>anggal
<Gphp
//<entuk =ilihan tanggal 1 sampai dengan (1
0or UTi"1BTi<('BTiWWV
e!ho 4<option 2alue"Ti>Ti4B
G>
</option>
</sele!t>
</body>
</html>
Hasilnya adalah:
SWR.OPR.?MA.J?K.A
Ddaam struktur peruangan, terdapat beberapa pernyataan yang
dgunakan untuk merubah |aannya eksekus terhadap proses
oopng yang dakukan. Pernyataan-pernyataan tersebut adaah:
0!a4, pernyataan n dgunakan untuk keuar dar suatu
peruangan.
Sntaknya adaah:
breakUnV
Dengan n adaah parameter opsona yang nanya dgunakan
|ka terdapat nese! loo". Pernyataan 0!a4 akan mengkut
urutan tngkatan dmua dar tngkat pang daam menu|u
tngkat teruar.
3ontin+, pernyataan n dgunakan untuk meewat proses
teras dan mean|utkan dengan teras berkutnya.
E(it, pernyataan n dgunakan untuk mengakhr seuruh proses
eksekus yang sedang ber|aan.
16. P!o&$+! $an F+n,-i
Daam pembuatan program serng ka dbutuhkan beberapa
perntah yang dgunakan beruang ka. Ha n dapat dhndar
dengan subruin. Subrutn adaah sekumpuan perntah yang dber
nama dan dapat dpangg sewaktu-waktu. Daam pemrograman
terdapat dua subruin, yatu prosedur dan fungs. Standar penusan
fungs adaah:
0un!tion nama50ungsiUargumenV
\
kode perintah
}
SWR.OPR.?MA.J?K.A
contoh:
0un!tion operasi5CumlahUT%-TyV
\
1"%WyB
e!ho U1VB
]
Beberapa ha yang peru dperhatkan daam pembuatan fungs,
yatu:
Nama fungs tdak boeh sama dengan nama-nama fungs yang
sudah ada daam PHP.
Hanya boeh terdr dar huruf, angka dan gars bawah
Tdak boeh dawa dengan angka
&onto26<16.)2)
<html>
<head>
<title>.:: Latihan Membuat &ungsi::.</title>
</head>
<body>
<G
//&ungsi yg dipanggil
0un!tion operasi5CumlahUTa-TbV
\
T!"TaWTbB
e!ho U4Hasil Ta W Tb " T!4VB
]
//=rogram ,tama
//,ntuk Memanggil &ungsi
operasi5CumlahU+-(VB
G>
</body>
</html>
16.0. R&34,R&
Functon Requre dgunakan untuk membaca na varabe dan
fungs-fungs dar sebuah e an.
Cara penusan functon Requre adaah:
re>uireUnama0ileVB
Functon Requre n tdak dapat dmasukkan dadaam suatu
struktur oopng msanya whe atau for. Karena hanya
memperboehkan pemangggan e yang sama tersebut hanya
seka sa|a.
&onto26<1?.)2)
<Gphp
SWR.OPR.?MA.J?K.A
Ta"F8aya sedang belaCar =H=FB
0un!tion tulistebalUTteksV
\
e!hoUX<b>Tteks</b>FVB
]
G>
&onto26<1A.)2)
<Gphp
re>uireUX!ontoh'51(.phpFVB
tulistebalUXIni adalah tulisan
tebalFVB
e!hoUX<br>FVB
e!hoUTaVB
G>
16.0. ,5)L4-&
Functon Incude akan menyertakan s suatu e tertentu. Incude
dapat detakkan ddaam suatu oopng msakan daam statement
for atau whe.
&onto26<1B.)2)
<G
e!hoU499999999999999999999999999999999999999<br>4VB
e!hoU4=H= adalah bahasa s!ripting<br>4VB
e!hoU499999999999999999999999999999999999999<br>4VB
e!hoU4<br>4VB
G>
&onto26<1D.)2)
<Gphp
0or UTb"1B Tb<*B TbWWV
\
in!ludeU4!ontoh'51*.php4VB
]
G>
Hasnya adaah:
SWR.OPR.?MA.J?K.A
16.&. F+n,-i St!in,
Fungs strng dgunakan memanpuas/mengoah data strng untuk
berbaga macam kebutuhan. Dsn akan dbahas beberapa fungs
strng yang serng dgunakan daam membuat program apkas
web. Fungs-fungs tersebut adaah:
A$$S#a-2-
Dgunakan untuk menambahkan karakter backsash ( \ ) pada suatu
strng. Ha n pentng dgunakan pada query strng untuk database,
msakan pada MySOL. Beberapa karakter yang akan dtambahkan
tanda backsash adaah karakter tanda petk satu ( ), karakter petk
dua ( ), backsash ( \ ) dan karakter NULL.
Sntaks:
addslashes$string%
St!i)S#a-2-
Dgunakan untuk menghangkan karakter backsash ( \ ) pada suatu
strng.
Sntaks:
string stripslashes$string%
SWR.OPR.?MA.J?K.A
3!.)t
Dgunakan untuk meng-encrypt dengan metode DES suatu strng.
Fungs n serng dgunakan untuk mengacak strng password
sebeum dsmpan daam database. Daam penggunaan fungs crypt
n dapat dtambahkan parameter strng sat. Parameter sat n
dtambahkan untuk menentukan bass pengacakan. Sat strng
terdr atas 2 karakter. |ka sat strng tdak dtambahkan pada
fungs crypt maka PHP akan menentukan sendr sat strng
tersebut secara acak.
Sntaks:
cr&pt$string ' , salt ( %
E&2o $an P!int
Dgunakan untuk mencetak/menampkan s suatu strng/teks atau
argumen ke browser.
Sntaks:
echo$ string argumen1, string argumen2 , ).%
print$ string argumen1, string argumen2 , ).%
E()#o$
Dgunakan untuk memecah-mecah suatu strng berdasarkan tanda
pemsah tertentu dan memasukkan hasnya kedaam suatu varabe
array.
Sntaks:
e*plode$string pemisah , string ', int limit( %
Contoh:
Tnamahari " Xminggu senin selasa rabu kamis Cumat sabtuFB
Thari " e%plodeUX F- TnamahariVB
Im)#o$
Kegunaan fungs n adaah kebakan darpada fungs expode.
Fungs mpode dgunakan untuk menghaskan suatu strng dar
masng-masng eemen suatu array. Strng yang dhaskan tersebut
dpsahkan oeh suatu strng teah yang dtentukan sebeumnya.
Sntaks:
implode$string pemisah , array%
P!int/ $an S)!int
Dgunakan untuk menampkan output ke browser dengan format
tertentu. Sntaksnya adaah sebaga berkut:
SWR.OPR.?MA.J?K.A
#rintf$format',ar!umen(%
+print$format',ar!umen(%
Parameter format seau dtanda dengan karakter persen (%),
kemudan dkut oeh karakter tertentu yang memberkan
speskas untuk memberkan has dengan format tertentu.
Karakter pember speskas tersebut adaah:
Ka!a4t! Kt!an,an
<
7rgumen diperlakukan sebagai integer dan ditampilkan sebagai
angka biner
K
karakter dengan nilai 78KII9nya
d
angka desimal
0
7rgumen diperlakukan sebagai double dan ditampilkan sebagai
angka 0loating point
o
bilangan oktal
s 7rgumen diperlakukan dan ditampilkan sebagai string
%
angka heksadesimal Udengan huru0 ke!ilV
O
angka heksadesimal Udengan huru0 besarV
&onto26<1E.)2)
<html>
<head>
<title>.:: Latihan &ormat 8tring::.</title>
</head>
<body>
<G
Tangka1"3M.3LB
Tangka'"'(.(1B
Tangka"Tangka1WTangka'B
e!ho UTangkaVB
e!ho U4<br>4VB
T0ormat"print0U4J$1.'04-
TangkaVB
e!hoU4T0ormat<br>4VB
Tyear"1L3'B
Tmonth"11B
Tday"LB
Ttanggal"sprint0U4J$'d9
J$'d9J$)d4-Tday-
Tmonth-
TyearVB
e!ho UTtanggalVB
G>
</body>
SWR.OPR.?MA.J?K.A
</html>
Angka ddepan karakter %" menun|ukkan |umah dgt atau |umah
karakter yang akan dtampkan. |ka ada ttk, menun|ukkan |umah
angka dbeakang koma. Msanya, %01.2f" menun|ukkan bahwa
bangan tersebut dtampkan sebaga oatng pont dan harus ada
dua angka dbeakang koma yang dtampkan. %02d
menun|ukkan bahwa bangan tersebut dtampkan sebaga nteger
dan harus ada dua angka yang dtampkan. |ad |ka terdapat angka
8, maka akan dubah men|ad 08.
St!i)Ta,-
Dgunakan untuk menghangkan kode-kode tag HTML pada suatu
strng.
Sntaks:
stripta!s$string ', string tags yang tidak dihilangkan( %
St!Ln
Dgunakan untuk menghtung |umah karakter suatu strng.
Sntaks:
strlen$string%
St!Po-
Dgunakan untuk mencar poss suatu sub strng pada suatu strng.
Fungs n basanya dgunakan untuk mencar suatu sub strng
ddaam suatu strng.
Sntaks:
strlen$string , sub string%
St!<R)at
Dgunakan untuk menguang s suatu strng.
Sntaks:
str_repeat$string , int jumlah perulangan%
St!<R)#a&
Dgunakan untuk menggant suatu strng dengan strng yang an.
Sntaks:
+tr_replace$tercari,pencari,subyek%
St!R'
Dgunakan untuk membak urutan suatu strng.
Sntaks:
SWR.OPR.?MA.J?K.A
strre,$string%
St!St!P St!iSt! $an St!32!
Dgunakan untuk mencar keberadaan suatu strng d daam strng
an.
Sntaks:
strstr$tercari,pencari%
stristr$tercari,pencari%
strchr$tercari,pencari%
St!ToLo"!
Dgunakan untuk merubah suatu strng men|ad huruf kec
(lower(ase).
Sntaks:
strtolo-er$string%
St!ToU))!
Dgunakan untuk merubah suatu strng men|ad huruf besar
(u""er(ase)
Sntaks:
strtoupper$string%
S+0St!
Dgunakan untuk mengamb suatu sub strng dengan pan|ang
tertentu dar suatu strng pada poss tertentu pua.
Sntaks:
substr$string, int posisi , int posisi%
Contoh:
substrUXab!de0gF-$-(VB // mengasilkan string Xab!F
substrUXab!de0gF-(-'VB // menghasilkan string XdeF
S+0St!<3o+nt
Dgunakan untuk menghtung |umah sub strng daam suatu strng
Sntaks:
substr_count$ string , string substring%
Contoh:
substr5!ountUXhis is a testF-FisFVB // menghasilkan nilai '
U3Fi!-t
Dgunakan untuk menggant karakter pertama pada suatu strng
men|ad huruf besar.
Sntaks:
ucfirst$string%
SWR.OPR.?MA.J?K.A
U3Wo!$-
Dgunakan untuk menggant karakter pertama pada setap kata
daam suatu strng men|ad huruf besar.
Sntaks:
uc-ords$string%
SWR.OPR.?MA.J?K.A
16.$. F+n,-i Matmati4a
Yatu fungs-fungs yang dgunakan untuk memanpuas bangan-
bangan daam operas matemats.
F+n,-i T!i,onomt!i
Fungs trgonometr adaah fungs-fungs yang berhubungan dengan
mu trgonometr, yatu antara an:
sinUsudutV- men!ari nilai sinus sebuah sudut
!osUsudutV- men!ari nilai !osinus sebuah sudut
tanUsudutV- men!ari nilai tangen sebuah sudut
asinUsudutV- men!ari nilai ar!us sinus sebuah sudut
a!osUsudutV- men!ari nilai ar!us !osinus sebuah sudut
atanUsudutV- men!ari nilai ar!us tangen sebuah sudut
deg'radUaV- merubah besaran deraCat menCadi radian
rad'degUaV- merubah besaran radian menCadi deraCat
Semua besar sudut yang dcar harus daam bentuk radan.
&onto26<1F.)2)
<html>
<head>
<title>.:: &ungsi90ungsi rigonometri::.</title>
</head>
<body>
<h(><u>&ungsi90ungsi rigonometri</u></h(><p>
<0orm>Masukkan sudut yg di!ari:
<input type"te%t name"sdt><br><br>
<input type"submit 2alue"4Hitung4>
</0orm>
<Gphp
i0 UissetUTsdtVV
\
Tsudut"int2alUTsdtVB
Tsudrad"deg'radUTsudutVB
Tsin"sinUTsudradVB
T!os"!osUTsudradVB
Ttan"tanUTsudradVB
Tar!sin"asinUTsudradVB
Tar!!os"a!osUTsudradVB
Tar!tan"atanUTsudradVB
e!ho 48udut Tsudut sama
dengan Tsudrad radian<br>4B
print0U4sinUTsudutV "
J$1.)0<br>4-TsinVB
print0U4!osUTsudutV "
J$1.)0<br>4-T!osVB
print0U4tanUTsudutV "
J$1.)0<br>4-TtanVB
print0U4ar! sinUTsudutV " J$1.)0<br>4-Tar!sinVB
print0U4ar! !osUTsudutV " J$1.)0<br>4-Tar!!osVB
print0U4ar! tanUTsudutV " J$1.)0<br>4-Tar!tanVB
]
G>
</body></html>
SWR.OPR.?MA.J?K.A
F+n,-i Pan,4at $an A#,o!itma
Fungs-fungs yang dgunakan untuk perhtungan pangkat dan
ogartma.
powUT%-TyV- men!ari hasil dari T%
Ty
.
e%pUT%V- men!ari nilai e
T%
logUT%V- men!ari nilai dari logaritma T%
s>rtUT%V- men!ari akar kuadrat T%.
F+n,-i Ba- n
Fungs yang dgunakan untuk konvers suatu bangan ke bangan
berbass n.
base5!on2ertU%-y-1V- mengubah bilangan % dari basis y menCadi basis 1.
de!binU%V- mengubah bilangan desimal ke bilangan biner
de!he%U%V- mengubah bilangan desimal ke bilangan heksadesimal
de!o!tU%V- mengubah bilangan desimal ke bilangan oktal
binde!U%V- mengubah bilangan biner ke bilangan desimal
he%de!U%V- mengubah bilangan heksadesimal ke bilangan desimal
o!tde!U%V- mengubah bilangan oktal ke bilangan desimal
&onto26<1I.)2)
<html>
<head>
<title>.:: &ungsi90ungsi rigonometri::.</title>
</head>
<body>
<h(><u>:on2ersi <ilangan
</u></h(><p>
<0ont
0a!e"2erdana
si1e"'>
<0orm>
Masukkan
bilangan yg di!ari:
<input type"te%t
name"bil>
<br><br>
<input
type"submit
2alue"4Kon2ert4>
</0orm>
<Gphp
i0 UissetUTbilVV
\
Tbilangan"int2alUTbilVB
Tbase!on2ert"base5!on2ertUTbilangan-1$-(VB
Tdesbin"de!binUTbilanganVB
Tdeshe%"de!he%UTbilanganVB
Tdeso!t"de!o!tUTbilanganVB
print0U4Desimal Tbilangan dalam basis ( adalah " Tbase!on2ert<br>4VB
print0U4Desimal Tbilangan dalam basis ' adalah " Tdesbin<br>4VB
SWR.OPR.?MA.J?K.A
print0U4Desimal Tbilangan dalam basis 1+ adalah " Tdeshe%<br>4VB
print0U4Desimal Tbilangan dalam basis M adalah " Tdeso!t<br>4VB
]
G>
</body>
</html>
F+n,-i Matmati4a Lainn.a
Fungs-fungs matematka yang |uga dkena PHP, yatu:
absU%V- nilai absolut dari %
!eilU%V- untuk membulatkan pe!ahan % ke atas
0loorU%V- untuk membulatkan pe!ahan % ke bawah
roundU%-yV- untuk membulatkan pe!ahan % sampai y angka dibelakang koma
piUV- sama dengan atau ''/3 atau kira9kira (-1)
number50ormatU%-y-k-rV- menuliskan bilangan % dengan 0ormat y angka
dibelakang koma- dengan k adalah koma dan r adalah pemisah ribuan
16.. F+n,-i Dat $an Tim
F+n,-i $atJK
Dgunakan untuk mengamb tangga dan |am sekarang. Has dar
fungs n adaah sebuah strng yang bers tangga/|am sesua
dengan format yang dngnkan.
Sntaks:
date$string format%
Format yang dkena daam fungs date n adaah sebaga berkut:
Ka!a4t! Kt!an,an
a am / pm
7 7M / =M
< 8wat!h Internet time
d day o0 the month- ' digits with leading 1erosB i.e. 4$14 to 4(14
D day o0 the week- te%tual- ( lettersB i.e. 4&ri4- X8unF
& month- te%tual- longB i.e. 4.anuary4-F;o2emberF
g hour- 1'9hour 0ormat without leading 1erosB i.e. 414 to 41'4
6 hour- ')9hour 0ormat without leading 1erosB i.e. 4$4 to 4'(4
h hour- 1'9hour 0ormatB i.e. 4$14 to 41'4
H hour- ')9hour 0ormatB i.e. 4$$4 to 4'(4
i minutesB i.e. 4$$4 to 4*L4
I U!apital iV 414 i0 Daylight 8a2ings ime- 4$4 otherwise.
C day o0 the month without leading 1erosB i.e. 414 to 4(14
l Ulower!ase LV day o0 the week- te%tual- longB i.e. 4&riday4
L boolean 0or whether it is a leap yearB i.e. 4$4 or 414
m monthB i.e. 4$14 to 41'4
M month- te%tual- ( lettersB i.e. 4.an4- XMarF
n month without leading 1erosB i.e. 414 to 41'4
s se!ondsB i.e. 4$$4 to 4*L4
8 English ordinal su00i%- te%tual- ' !hara!tersB i.e. 4th4- 4nd4
t number o0 days in the gi2en monthB i.e. 4'M4 to 4(14
SWR.OPR.?MA.J?K.A
ime1one setting o0 this ma!hineB i.e. 4MD4
, se!onds sin!e the epo!h
w day o0 the week- numeri!- i.e. 4$4 U8undayV to 4+4 U8aturdayV
H year- ) digitsB i.e. 41LLL4
y year- ' digitsB i.e. 4LL4
1 day o0 the yearB i.e. 4$4 to 4(+*4
a time1one o00set in se!onds Ui.e. 49)('$$4 to 4)('$$4V
F+n,-i &2&4$atJK
Dgunakan untuk memerksa apakah format penusan tangga
sudah benar. Sntaksnya adaah:
checkdate$.bulan,.hari,.tahun%
&onto26<6M.)2)
<html>
<head>
<title>.:: &ungsi ime dan Date::.</title>
</head>
<body>
<G
e!ho 48ekarang....<br>4B
e!ho 4Hari: 4-dateUlV-4<br>4B
e!ho 4anggal: 4-dateU`d & H`V-4<br>4B
e!ho 4.am: 4-dateU`h:i:s 7`VB
e!ho 4<hr>4B
Thari"($B
Tbulan"'B
Ttahun"'$$*B
T2alidasi"!he!kdateUTbulan-Thari-TtahunVB
e!ho 4anggal yang dipilih: Thari 9 Tbulan 9 Ttahun <br>4B
e!ho 4=enulisan tanggal 9
<b><,>4B
i0 UT2alidasiV
\
e!ho 4benar4B
] else
\
e!ho 4salah4B
]
e!ho 4</b></u><br>4B
e!ho 48ilahkan dibetulkan
kembali4B
G>
</body>
</html>
F+n,-i ,t$atJK
Dgunakan untuk menghaskan waktu dengan keuaran bertpe
arra$. Sntaksnya adaah:
checkdate$.bulan,.hari,.tahun%
Ka!a4t! Kt!an,an
hours .am
SWR.OPR.?MA.J?K.A
mday Hari
minutes Menit
mon <ulan dalam digit
month <ulan
se!onds Detik
wday Hari dalam digit
weekday Hari
yday Hari ke9 dari tahun
year ahun
&onto26<61.)2)
<html>
<head>
<title>.:: &ungsi getdate::.</title>
</head>
<body>
<G
e!ho 48ekarang .am: 4-dateU`h:i:s 7`VB
e!ho 4<hr>4B
TCam"getdateUVB
e!ho 48elamat <b><u>4B
i0UTCam^hours_<"LV
e!ho 4=agi4B
else
i0UTCam^hours_<"1)V
e!ho 48iang4B
else
i0UTCam^hours_<"1LV
e!ho 48ore4B
else
e!ho 4Malam4B
e!ho 4</b></u> Mr. .a!k4B
G>
</body>
</html>
16./. F+n,-i Va!ia0#
SWR.OPR.?MA.J?K.A
Fungs varabe dgunakan untuk mengecek keberadaan varabe.
Fungs-fungs yang termasuk fungs varabe adaah:
F+n,-i
Va!ia0#
Kt!an,an
double2alUT2arV Mengubah 2ariabel T2ar menCadi double
emptyUT2arV Memeriksa apakah 2ariabel T2ar belum punya nilai
issetUT2arV Memeriksa apakah 2ariabel T2ar sudah dide0inisikan
int2alUT2arV Merubah 2ariabel T2ar menCadi integer
gettypeUT2arV Memeriksa type 2ariabel T2ar
Is5arrayUT2arV Memeriksa apakah T2ar berupa array
is5boolUT2arV Memeriksa apakah T2ar bertipe boolean
Is5doubleUT2arV Memeriksa apakah T2ar bertipe double
is50loatUT2arV Memeriksa apakah T2ar bertipe 0loat
is5intUT2arV Memeriksa apakah T2ar bertipe short integer
Is5integerUT2arV Memeriksa apakah T2ar bertipe integer
is5longUT2arV Memeriksa apakah T2ar bertipe long integer
is5numeri!UT2arV Memeriksa apakah T2ar bertipe numerik
Is5obCe!tUT2arV Memeriksa apakah T2ar berupa obCek
is5realUT2arV Memeriksa apakah T2ar bertipe real
is5resour!eUT2arV Memeriksa apakah T2ar berupa resour!e
Is5stringUT2arV Memeriksa apakah T2ar bertipe string
settypeUT2arV Menentukan tipe 2ariabel T2ar
str2alUT2arV Mengambil nilai string dari T2ar
unsetUT2arV Menghapus 2ariabel T2ar
16.,. F+n,-i Mai#
Dgunakan untuk mengrmkan e-ma ke aamat e-ma tertentu.
Sntaks:
mail$$penerima,$subject,.isi_email',$header(%/
Contoh:
Tpengirim " X&rom: sayaQemail.!omFB
TtuCuan " Xanonkun!oroQyahoo.!omFB
TsubCe!t " X=emberitahuanFB
Tisi " XIni adalah per!obaan pengiriman e9mail dengan menggunakan =H=FB
mailUTto-TsubCe!t-Tisi-TpengirimVB
1?. Mn,o#a2 Fi#/$ata T4-
1?.a. Mm0+4a Fi#
Untuk membuka e teks, perntah yang dgunakan adaah
fopen(). Sedangkan untuk menutup e adaah fclose().
Perhatkan contoh berkut:
&onto26<66.)2)
<html>
<head>
<title>.:: Mengelola &ungsi &ile::.</title>
</head>
<body>
SWR.OPR.?MA.J?K.A
<G
e!ho 4<b><u>Menampilkan isi 0ile datasiswa.dat</b></u><br><br>4B
i0 UT0ile"0openU4datasiswa.dat4-4r4VV
\
while US0eo0UT0ileVV
\
Tstring"0getsUT0ile-'**VB
e!hoUTstringVB
]
0!loseUT0ileVB
]
else
\
e!ho 4&ile gagal dibuka4B
]
G>
</body>
</html>
Sebeum scrpt datas d|aankan, terebh dahuu harus dbuat e
datasiswa.dat. |ka tdak dbuat dan scrpt tetap d|aankan, maka
akan keuar pesan warnng sepert daam gambar datas. Untuk tu,
sahkan buat e datasiswa.dat. dengan NotePad dan s sepert
daam gambar berkut:
Seteah e tersebut dsmpan, kemba |aankan e
contoh2_22.php. Sehngga akan ddapatkan has sepert gambar
berkut n:
SWR.OPR.?MA.J?K.A
1?.0. Mma-+44an Data
Untuk memasukkan data pada e teks menggunakan perntah:
fputs$nama_file,isi%
Perhatkan contoh berkut.
&onto26<6?.)2)
<html>
<head>
<title>.:: Mengelola &ile::.</title>
</head>
<body>
<h(><u>Mengelola &ile eks</u></h(><p>
<0orm>
Masukkan ;ama 8iswa:
<input type"te%t name"isi><br><br>
<input type"submit 2alue"4proses4>
</0orm>
<G
//2alidasi isi
i0 UissetUTisiVV
i0 UemptyUTisiVV
e!ho 4Data harus terisi4B
else
\
i0UTberkas"0openU4datasiswa.dat4-4r4VV
\
//Memasukkan Data
Tberkas"0openU4datasiswa.dat4-4aW4VB
0putsUTberkas-TisiVB
0putsUTberkas-4<br>4VB
SWR.OPR.?MA.J?K.A
0!loseUTberkasVB
//menampilkan
Tberkas"0openU4datasiswa.dat4-4r4VB
whileUS0eo0UTberkasVV
\
Tteks"0getsUTberkas-'**VB
e!ho UTteksVB
]
0!loseUTberkasVB
]
else
\
e!hoU4&ile gagal dibuka4VB
]
]
G>
</body>
</html>
Seteah d|aankan, maka hasnya akan sepert gambar berkut:
Iskan data pada form nput, kemudan kk tombo )!o--, maka
akan muncu gambar sebaga berkut:
SWR.OPR.?MA.J?K.A
1A. Da-a!5$a-a! M.S>L
Daam bahasa SOL pada umumnya nformas tersmpan daam
tabe-tabe yang secara ogk merupakan struktur dua dmens
terdr dar bars (row atau re(or!) dan koom ((olumn atau fel!).
Sedangkan daam sebuah !aabase dapat terdr dar beberapa
able. MySOL adaah database |ens RDBMS (Relaional 0aabase
&anagemen S$sem). |ad daam MySOL tetap menggunakan Tabe,
Bars dan Koom. Sebuah Database daam MySOL mengandung
beberapa tabe dan satu tabe daam database terdr dar se|umah
bars dan koom.
1A.a. Ti) Data
2ipe -ata 5umerik
Tpe data numerk dbedakan men|ad dua, tpe data nteger dan
tpe data oatng pont. Tpe data nteger untuk bangan buat
sedangkan tpe data oatng pont dgunakan untuk bangan
desma. Tpe data numerk sepert daam tabe d bawah n:
Ti) Data Ki-a!an Ni#ai
Tnynt (-128) - 127 atau 0-225
Smant (-32768) - 32767 atau 0 - 65535
Medumnt (-8388608)-8388607 atau 0-16777215
Int (-2147683648)-(2147683647) atau 0-4294967295
Bgnt
(-9223372036854775808)-(9223372036854775807) atau
0 - 18446744073709551615
Foat(x)
(-3.402823466E+38)-(-1.175494351E-38), 0, dan
1.175494351E-38 - 3.402823466E + 38
Foat Idem
SWR.OPR.?MA.J?K.A
Doube (-1.7976E+308)-(-2.22E-308),0,dan(2.22E-308)-
(1.79E+308)
2ipe -ata String
Yang termasuk daam tpe data strng adaah tpe-tpe data berkut:
Ti) 4o#om Ki-a!an Ni#ai
CHAR 1 - 255 karakter
VARCHAR 1 - 255 karakter
TINYBLOB, TINYTEXT 1 - 255 karakter
BLOB, TEXT 1 - 65535 karakter
MEDIUMBLOB,
MEDIUMTEXT
1 - 16777215 karakter
LONGBLOB, LONGTEXT 1 - 4294967295 karakter
ENUM('vaue1','vaue2',...) Maksmum 65535 karakter
SET('vaue1','vaue2',...) Maksmum 64 eemen
2ipe -ata 1aktu !an 2anggal
Yang termasuk daam tpe data tangga dan waktu adaah sebaga
berkut:
Ti) Data Ki-a!an Ni#ai
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
1A.0. Mm0+at Data0a- $an Ta0#
Untuk masuk ke daam program MySOL pada prompt |aankan
perntah berkut n:
1. Masuk pada drektor utama mysq, sepert perntah berkut:
K:Y/I;D@/8>!dYapa!heYmys>lYbin
2. Kemudan ketkkan perntah sepert contoh berkut:
K:Yapa!heYmys>lYbin>mys>l
Kemudan akan masuk kedaam Prompt MySOL sepert tampan
dbawah n:
SWR.OPR.?MA.J?K.A
/el!ome to the My8IL monitor. Kommands end with B or Yg.
Hour My8IL !onne!tion id is 1 to ser2er 2ersion: (.'(.)39nt
ype `helpB` or `Yh` 0or help. ype `Y!` to !lear the bu00er.
mys>l>
Bentuk prompt mysq>" adaah tempat menuskan perntah-
perntah MySOL. Setap perntah SOL harus dakhr dengan tanda
ttk-koma ;".
Cara untuk membuat sebuah database baru adaah dengan
perntah:
create database namadatabase/
Contoh:
mys>l> !reate database alamatB
Iuery @:- 1 row a00e!ted U$.'3 se!V
mys>l> _
Untuk mengaktfkan database dapat menggunakan perntah berkut
n:
use namadatabase/
Contoh:
mys>l> use alamatB
Database !hanged
mys>l> _
Seteah database aktf, sebuah tabe baru dapat dbuat. Perntah
untuk membuat tabe baru adaah:
!reate table namatabel
U
struktur
VB
3onto2:
Msakan kta ngn menympan data anggota yatu: nomor, nama,
ema, aamat, kota. Sedangkan strukturnya sepert tabe dbawah
n:
Ko#om/Fi#
$
Ti) Data Kt!an,an
nomor nt(6), not nu,
prmary key
Angka dengan pan|ang maksma 6,
sebaga prmary key, dan tdak boeh
kosong.
nama char(40), not nu Teks dengan pan|ang maksma 40
karakter dan tdak boeh kosong
SWR.OPR.?MA.J?K.A
ema char(25), not nu Teks dengan pan|ang maksma 25
aamat char(255), not nu Teks dengan pan|ang maksma 255
kota char(20), not nu Teks dengan pan|ang maksma 20
Perntah MySOL untuk membuat tabe sepert datas adaah:
mys>l> !reate table anggota U
9> nomor intU+V not null primary key-
9> nama !harU)$V not null-
9> email !harU'*V not null-
9> alamat !harU'**V not null-
9> kota !harU'$V not nullVB
Iuery @:- $ rows a00e!ted U$.(( se!V
mys>l> 5
Sedangkan data yang akan dskan daam tabe anggota adaah
sebaga berkut:
0o 0ama 123ail 4lamat 5ota
6. /iluCeng Handayani lululQhotmail.!om .l. .anti <arat +$ Malang
'. ?emy Dianning dianQpla1a.!om .l. Dermo 3 Malang
(. ?atna <udi 8. budiQastaga.!om .l. =robolinggo 3M Lamongan
). 72i!enna 7rya a2isQyahoo.!om .l. Durian ;o. 1$ Malang
*. <ayu bayuQastaga.!om .l. Kandi II/'( 8emarang
+. Husu0 u!u0Qyahoo.!om .l. ?aCawali 3M MoCokerto
3. 7ri Mulyaningsih iraQastaga.!om .l. Lebani /aras 1$$ 6resik
M. Latie0 latie0Qhotmail .l. =akis 13' 8urabaya
L. 7Cie CieQyahoo.!om .l. :ali ,tik LL 8urabaya
1$. .am bIyatul :hoir Ca!k5delphiQyahoo.!om .l. 7gus 8alim (( Lamongan
11. 8andra ale%Qhotmail.!om .l. 7delaide '' Malang
1'. =aul paulQtelkom.net .l. MertoCoyo MM Malang
1(. ?i1a i1aQyahoo.!om .l. <unga .ombang
1). M. ;urullah nurulQhotmail.!om .l. Merak =amekasan ) Madura
Untuk memasukkan sebuah bars (record) kedaam tabe MySOL
adaah sebaga berkut:
insert into namatabel ,alues$kolom6, kolom7, kolom8,)%/
Contoh:
mys>l> insert into anggota
9> 2aluesU`1`-`/iluCeng Handayani`-`luluQhotmail.!om`-`.l. .anti <arat +$`-
9> `Malang`VB
Iuery @:- 1 row a00e!ted U$.)) se!V
mys>l> _
1A.&. Mnam)i#4an I-i Ta0#
SWR.OPR.?MA.J?K.A
Is tabe dapat dtampkan dengan menggunakan perntah SELECT,
cara penusan perntah SELECT adaah:
select kolom from namatable/
Contoh:
Untuk menampkan koom (ed) nomor dan nama pada tabe
anggota
sele!t nomor- nama 0rom anggotaB
Untuk menampkan semua koom(ed) pada tabe anggota
sele!t N 0rom anggotaB
Untuk menampkan semua koom pada tabe anggota yang
berada pada kota Surabaya
sele!t N 0rom anggota where kota"c8urabayacB
Untuk menampkan semua koom pada tabe anggota dengan
urut nama
sele!t N 0rom anggota order by namaB
Untuk menghtung |umah record pada tabe anggota
sele!t !ountUNV 0rom anggotaB
Untuk menampkan kota pada tabe anggota
sele!t kota 0rom anggotaB
Untuk menampkan kota dengan tdak menampkan kota yang
sama pada tabe anggota
sele!t distin!t kota 0rom anggotaB
SWR.OPR.?MA.J?K.A
Untuk menampkan nama dan ema yang mempunya ema d
yahoo.com
sele!t nama-email 0rom anggota where email like bJyahoo.!omcB
1A.$. Mn,2a)+- R&o!$
Untuk menghapus suatu record dengan krtera tertentu dgunakan
perntah sebaga berkut:
delete from namatabel -here kriteria/
Contoh:
Menghapus record dar tabe anggota yang bernomor 3
delete 0rom anggota where nomor"c(cB
1A.. Mmo$iC4a-i R&o!$
Untuk memodkas (merubah) s record tertentu adaah dengan
menggunakan perntah sebaga berkut:
update namatabel set kolom6=nilaibaru6,
kolom7=nilaibaru7 ) -here kriteria/
Contoh:
Merubah e-ma dar anggota yang bernomor 2 men|ad
dan@hotma.com.
update anggota set email"cdianQhotmail.!omc where nomor"c'cB
1A./. Mn,2+0+n,4an PHP $n,an M.S>L
Untuk menghubungkan dengan MySOL, teah dsedakan beberapa
fungs oeh PHP, yatu antara an:
F+n,-i mysql_connect()
Fungs n dgunakan untuk menghubungkan PHP dengan MySq.
Sntaksnya adaah:
$koneksi=mysql_connect(host,user,password)
Is dar varabe $host, $username, $password dapat dsesuakan sesua
dengan settng pada MySOL server yang ada.
F+n,-i mysql_select_db()
SWR.OPR.?MA.J?K.A
Fungs n dgunakan untuk memh database yang akan dgunakan.
Nama database dapat dsesuakan dengan settng pada MySq
server yang ada. Sntaksnya adaah:
mysql_select_db(namadatabase[,koneksi])
Parameter konek"i boeh tdak dtuskan, |ka tdak dtuskan maka
hubungan yang terakhr yang danggap sebaga hubungan aktf.
F+n,-i mysql_query()
Dgunakan untuk meakukan perntah 1uer$ daam sebuah
database. Sntaksnya sebaga berkut:
$sql=mysql_query(perintah_sql[,koneksi])
F+n,-i mysql_fetch_array()
Fungs n dgunakan untuk mengamb record daam database dan
memasukkannya kedaam arra$ assosiaif) arra$ numeris atau
keduanya. Sntaksnya adaah:
$baris=mysql_fetch_array($sql)
F+n,-i mysql_fetch_assoc()
Kegunaannya hampr sama dengan m$s1l=fe(h=arra$, yang
membedakan adaah array yang dhaskan hanya arra$ assosiaif.
Sntaksnya adaah:
$baris=mysql_fetch_assoc($sql)
F+n,-i mysql_fetch_row()
Kegunaannya hampr sama dengan m$s1l=fe(h=arra$, yang
membedakan adaah array yang dhaskan hanya arra$ numeris.
Sntaksnya adaah:
$baris=mysql_fetch_row($sql)
F+n,-i mysql_num_fields()
Fungs n dgunakan untuk menghtung |umah ed daam sebuah
database. Sntaksnya adaah:
$jum_field=mysql_num_fields($sql)
F+n,-i mysql_num_rows()
Fungs n dgunakan untuk menghtung |umah record daam
database. Sntaksnya adaah:
$jum_row=mysql_num_rows($sql)
SWR.OPR.?MA.J?K.A
F+n,-i mysql_close()
Fungs n dgunakan untuk memutus hubungan dengan sebuah
database yang teah dakukan. Sntaksnya adaah:
mysql_close([koneksi])
F+n,-i mysql_create_db()
Fungs n dgunakan untuk membuat database dengan scrpt php.
Sntaksnya adaah:
mysql_create_db(nama_database)
Perhatkan contoh pada e &onto26<6A.)2) berkut:
&onto26<6A.)2)
<html>
<head>
<title>.:: tes koneksi dengan ser2er database::.</title>
</head>
<body>
<h(>es koneksi dg mys>l database ser2er...</h(><p>
<0orm>
<input type"radio name"tombol Ralue"1>8ambung
<input type"radio name"tombol Ralue"$>=utus
<br><br>
<input type"submit Ralue"4 @: 4>
</0orm>
<G
re>uireU4koneksi.php4VB
Thub"open5!onne!tionUVB
Tdatabasename"4alamat4B
i0 UissetUTtombolVV
\
i0 UTtombol""1V
\
i0 UThubV
\
e!ho U4:oneksi dg 8er2er Database <b><u>8,:8E8</b></u><br>4VB
Tdb"Qmys>l5sele!t5dbUTdatabasename-ThubVB
i0 UTdbV e!ho 4Database <b><u>Tdatabasename</b></u> ditemukan4B
else e!ho 4Database <b><u>Tdatabasename</b></u> ID7: ditemukan4B
] else
e!ho U4:oneksi dg 8er2er Database <b><u>6767L</b></u><br>4VB
]
elsei0 UTtombol""$V
\
Tmati"Qmys>l5!loseUTkoneksiVB
e!ho U4:oneksi 8er2er Database <b><u>Dimatikan</b></u><br>4VB
]
]
G>
</body>
</html>
SWR.OPR.?MA.J?K.A
Agar scrpt datas dapat d|aankan, sahkan buat |uga scrpt
4on4-i.)2) berkut n:
<Gphp
0un!tion open5!onne!tionUV
\
Thost"4lo!alhost4B
Tusername"4root4B
Tpassword"44B
Tdatabasename"4alamat4B
Tkoneksi"Qmys>l5!onne!t
UThost-Tusername-
TpasswordVB
i0 UTkoneksiV
Tdb"Qmys>l5sele!t5db
UTdatabasename-TkoneksiV
or die U4Database
<b>Tdatabasename</b>
idak Ditemukan4VB
return TkoneksiB
]
G>
|ka scrpt datas d|aankan dan koneks dengan server database
sukses daku-kan serta data-base aamat sudah dbuat, maka
hasnya sepert gambar datas.
Untuk menampkan s tabe anggota dar database aamat yang
teah dbuat d sub bab 14.b, perhatkan contoh2_25 berkut n.
&onto26<6B.)2)
<html>
<head>
<title>.:: Menampilkan Data::.</title>
</head>
<body>
<0ont 0a!e"arial si1e"'>
<!enter><h(>D7&7? 7;66@7</h(></!enter>
<Gphp
// 99999 ambil isi dari 0ile koneksi.php
// 99999 hubungkan ke database
Tkoneksi"open5!onne!tionUVB
// 99999 menentukan nama tabel
Ttablename"4anggota4B
// 99999 perintah 8IL dimasukkan ke dalam 2ariable string
Ts>l"4sele!t N 0rom Ttablename4B
// 999999 Calankan perintah 8IL
Tresult " mys>l5>uery UTs>lV or die U4erdapat kesalahan pada perintah 8ILS4VB
// 999999 putus hubungan dengan database
mys>l5!loseUTkoneksiVB
SWR.OPR.?MA.J?K.A
// 999999 buat tampilan tabel
e!hoU4<table width"1$$J !ellspa!ing"1 !ellpadding"' bg!olor"#$$$$$$>4VB
e!hoU4<tr><td bg!olor"#KKKKKK><b>;o</b></td>
<td bg!olor"#KKKKKK><b>;ama</b></td>
<td bg!olor"#KKKKKK><b>E9Mail</b></td>
<td bg!olor"#KKKKKK><b>7lamat</b></td>
<td bg!olor"#KKKKKK><b>:ota</b></td></tr>4VB
// 999999 ambil isi masing9masing re!ord
while UTrow " mys>l50et!h5obCe!t UTresultVV
\
// 99999 mengambil isi setiap kolom
Tnomor"Trow9>nomorB
Tnama"Trow9>namaB
Temail"Trow9>emailB
Talamat"Trow9>alamatB
Tkota"Trow9>kotaB
// 999999 menampilkan di layar browser
e!hoU4<tr><td bg!olor"#&&&&&&>Tnomor</td>
<td bg!olor"#&&&&&&>Tnama</td>
<td bg!olor"#&&&&&&>Temail</td>
<td bg!olor"#&&&&&&>Talamat</td>
<td bg!olor"#&&&&&&>Tkota</td></tr>4VB
]
e!hoU4</table>4VB
G>
</body>
</html>
Has dar scrpt tersebut adaah:

SWR.OPR.?MA.J?K.A
Untuk menambahkan data pada tabe anggota, perhatkan contoh
pada &onto26<6D.2tm# berkut n:
&onto26<6D.2tm#
<html>
<head>
<title>.:: ambah 7nggota::.</title>
</head>
<body bg!olor"4#&&&&&&4>
<0orm a!tion"simpan5anggota.php method"=@8>
<0ont 0a!e"2erdana si1e"' !olor"4#$$$$$$4>
<h( align"le0t>
7M<7H D77 7;66@7
</h(>
</0ont>
<table border"$>
<tr>
<td width"1*J>;ama</td>
<td width"(J>: </td>
<td width"M'J><input type"te%t name"nama si1e"1*></td>
</tr>
<tr>
<td width"1*J>Email</td>
<td width"M'J><input type"te%t name"email si1e"'*></td>
</tr>
<tr>
<td width"1*J>7lamat</td>
<td width"M'J><input type"te%t name"alamat si1e"*$></td>
</tr>
<tr>
<td width"1*J>:ota</td>
<td width"M'J><input type"te%t name"kota si1e"1'></td>
</tr>
<tr>
<td width"1*J
!olspan"(
align"!enter>
<hr></td>
</tr>
<tr>
<td !olspan"(
align"right>
<input type"submit
2alue"48impan4>
<input type"reset
2alue"4?eset4>
</td>
</tr>
</table>
SWR.OPR.?MA.J?K.A
</0orm>
</body>
</html>
Sebeum scrpt datas d|aankan, |angan upa untuk membuat |uga
scrpt -im)an<an,,ota.)2)
<html>
<head>
<title>.:: 8impan Data::.</title>
</head>
<body>
<0ont 0a!e"arial si1e"'>
<!enter><h*>D77 <E?H78IL DI7M<7H:7; :E 7<EL 7;66@7</h*></!enter>
<hr>
<Gphp
// 99999 ambil isi dari 0ile koneksi.php
// 99999 hubungkan ke database
Tkoneksi"open5!onne!tionUVB
// 99999 menentukan nama tabel
Ttablename"4anggota4B
// 99999 menghitung Cumlah re!ord
Ts>l1"4sele!t N 0rom Ttablename4B
Thasil "Qmys>l5>uery UTs>l1V or die U4erdapat kesalahan pada perintah 8ILS4VB
TCml"Qmys>l5num5rowsUThasilVB
Tnomor"TCmlW1B
// 99999 perintah 8IL untuk memasukkan data ke tabel anggota
Ts>l'"4insert into TtablenameUnomor-nama-email-alamat-kotaV 2alues U`Tnomor`-4B
Ts>l'."4`Tnama`-`Temail`-`Talamat`-`Tkota`V4B
// 999999 Calankan perintah 8IL untuk memasukkan data ke tabel anggota
Thasil "Qmys>l5>uery UTs>l'V or die U4erdapat kesalahan pada perintah 8ILS4VB
// 999999 putus hubungan dengan database
mys>l5!loseUTkoneksiVB
G>
<!enter>
D <a hre0"!ontoh'5'*.php target"5blank>Lihat Data</a>
D <a hre0"!ontoh'5'+.html>:embali</a> D
</body>
</html>
SWR.OPR.?MA.J?K.A
1B. A+tntiC4a-i Mn,,+na4an S--ion
Sesson dgunakan untuk menympan atau mencatat varabe yang
sama ke haaman yang an. Sesson basanya dpaka untuk apkas-
apkas yang memerukan keamanaan. Setap pengun|ung akan
dperksa terebh dahuu sebeum dapat mengakses sebuah haaman
web. |ka tdak berhak, maka haaman yang dmnta pengun|ung tdak
dapat dtampkan.
Untuk memua sesson perntah yang dgunakan adaah
session_start(). Dan untuk mengakhr sesson menggunakan
perntah session_destroy(). Terdapat banyak fungs yang
berhubungan dengan sesson, yatu:
1B.a. F+n,-i session_start()
Berfungs untuk memua sesson. Sntaksnya adaah sebaga berkut:
session_start()
1B.0. F+n,-i session_destroy()
Berfungs untuk mengakhr sesson. Sntaksnya adaah sebaga berkut:
session_destroy()
1B.&. F+n,-i session_name()
Dgunakan untuk mengamb atau menentukan nama sebuah sesson.
Sntaksnya adaah sebaga berkut:
session_name([nama])
|ka argumen nama tdak dsertakan, maka fungs n dgunakan untuk
mengamb nama sebuah sesson dan |ka tdak dsertakan dgunakan
untuk member nama pada sesson.
SWR.OPR.?MA.J?K.A
1B.$. F+n,-i session_module_name()
Dgunakan untuk mengamb atau menentukan nama sebuah modu
sesson. Sntaksnya adaah sebaga berkut:
session_module_name([modul])
|ka argumen modu tdak dsertakan, fungs n dgunakan untuk
mengamb nama sebuah modu sesson dan |ka tdak dsertakan
dgunakan untuk member nama pada modu sesson.
1B.. F+n,-i session_save_path()
Dgunakan untuk mengamb atau menentukan path dar drektor yang
dgunakan untuk menympan data-data sebuah sesson. Sntaksnya
adaah sebaga berkut:
session_save_path([path])
1B./. F+n,-i session_id()
Dgunakan untuk mengamb atau menentukan denttas sebuah
sesson. Sntaksnya adaah sebaga berkut:
session_id([id])
1B.,. F+n,-i session_register()
Dgunakan untuk mendaftarkan varabe ke daam sebuah sesson.
Sntaksnya adaah sebaga berkut:
session_register([namavar1[,namavar2...])
Argumen namavar1, namavar2 dan seterusnya berupa strng yang
menampung nama varabe (tanpa tanda $ ddepannya).
1B.2. F+n,-i session_unregister()
Dgunakan untuk menghangkan sebuah varabe dar sebuah sesson,
namun sesson tersebut tetap ada. Sntaksnya adaah sebaga berkut:
session_unregister(namavar)
1B.i. F+n,-i session_unset()
Dgunakan untuk menghangkan na semua varabe yang ada daam
sebuah sesson. Sntaksnya adaah sebaga berkut:
session_unset()
1B.1. F+n,-i session_is_registered()
Dgunakan untuk memerksa apakah sebuah varabe teah ddaftarkan
pada sebuah sesson. Sntaksnya adaah sebaga berkut:
SWR.OPR.?MA.J?K.A
session_isregistered(namavar)
Argumen namavar berupa strng yang meru|uk nama varabe (tanpa
tanda $ ddepannya).
1B.4. 3onto2 Pn,,+naan
Untuk memaham sesson, kta akan athan membuat sesson dengan
apkas login. Yang peru dbuat pertama ka adaah e admn.htm.
Fi# a$min.2tm#
<html>
<head><title>.:: Login 7dministrator::.</title></head>
<body bg!olor"4#&&&&&&4>
<0orm name"40orm14 a!tion"login.php method"=@8>
<table width"4+'J4 border"1 align"!enter
!ellpadding"$ !ellspa!ing"$ bg!olor"#000000 border!olor"purple>
<td>
<table width"41$$J4 border"$ align"!enter !ellpadding"1 !ellspa!ing"1
bg!olor"#000000 >
<tr bg!olor"magenta>
<td !olspan"'><di2 align"!enter><strong>Login 7dmin</strong></di2></td>
</tr>
<tr bg!olor"#000000>
<td width"(1J>,ser ID</td>
<td width"+LJ><input type"te%t name"user id"admin si1e"'*
ma%length"'*></td>
</tr>
<tr bg!olor"#000000>
<td width"(1J>=assword</td>
<td width"+LJ><input type"password name"password
id"pass si1e"'* ma%length"'*></td>
</tr>
<tr>
<td width"1*J !olspan"' align"!enter><hr></td>
</tr>
<tr>
<td !olspan"' align"right><input type"submit 2alue"4Login4>
<input type"reset 2alue"4?eset4></td>
</tr>
</table>
</td>
</table>
</0orm>
</body>
</html>
Scrpt tersebut |ka d|aankan
akan tampak sepert gambar
dsampng
Sean|utnya buat e berkut:
Fi# #o,in.)2)
<G
SWR.OPR.?MA.J?K.A
session5startUVB
i0 UemptyUTuserVV
e!ho 4;ama ,ser <elum Di Isi4B
elsei0 UemptyUTpasswordVV
e!ho 4=assword <elum Di Isi4B
elsei0 UTuser""4Ca!k4 A
Tpassword""4onlyme4V
\
Tmaster"TuserB
session5registerU4master4VB
headerU4lo!ation:halaman5utama.php4VB
e%itUVB
]
else e!ho 47nda idak erda0tar4B
G>
Fi# 2a#aman<+tama.)2)
<G
session5startUVB
G>
<html>
<head>
<title>.:: Halaman ,tama::.</title>
</head>
<body>
<G
i0USsession5is5registeredU4master4VV
e!ho 4<h(>7kses Ditolak...
</h(>4B
else
\
e!ho 4/el!ome <b>
Tmaster ... </b><br>4B
e!ho 4<h(>H7L7M7;
7DMI;I8?7@?</h(>4B
e!ho 4D <a hre0"hal1.php>
=76E 1</a>4B
e!ho 4D <a hre0"hal'.php>
=76E '</a>4B
e!ho 4D <a hre0"logout.php>
logout</a> D4B
e!ho 4<hr>4B
]
G>
</body>
</html>
Fi# 2a#1.)2)
<G
session5startUVB
G>
<html>
<head>
<title>.::
Halaman 1::.
</title></head>
<body>
SWR.OPR.?MA.J?K.A
<G
i0USsession5is5registered
U4master4VV
</h(>4B
else
\
e!ho 4<0ont 0a!e"
tahoma si1e"'>4B
e!ho 4<h(>=76E 1</h(>4B
e!ho 4<p align"right>
D <a hre0"logout.php>logout</a> D4B
e!ho 4<hr>4B
e!ho 4;ama ,ser <b><u>Tmaster</b></u>4B
]
G>
</body>
</html>
Fi# 2a#6.)2)
<G
session5startUVB
G>
<html>
<head>
<title>.:: Halaman '::.
</title></head>
<body>
<G
i0USsession5is5registered
U4master4VV
</h(>4B
else
\
e!ho 4<0ont 0a!e"
tahoma si1e"'>4B
e!ho 4<h(>=76E
'</h(>4B
e!ho 4<p align"right> D <a hre0"logout.php>logout</a> D4B
e!ho 4<hr>4Be!ho 4;ama ,ser <b><u>Tmaster</b></u>4B
]
G>
</body>
</html>
Fi# 2a#6.)2)
<G
session5startUVB
session5destroyUVB
headerU4lo!ation:admin.html4VB
G>
&. Ran,4+man 6
Bahasa pemrograman PHP terbukt sangat handa daam
membangun sebuah program berbass web
Waktu yang dgunakan untuk memproses data dan men|aankan
perntah-perntah query sangat cepat
SWR.OPR.?MA.J?K.A
Dengan ber|aan daam sebuah web server, maka secara otomats
program n bersfat mutuser
Database MySOL menympan data ddaam drektor khusus yang
terpsah dar e program PHP sehngga keamanan data ebh
ter|amn
Web server dan database server terpsah sehngga menyutkan
phak uar untuk mengakses data yang terdapat ddaam database.
Bahasa program PHP dan Database MySOL ebh eksbe karena
dapat dakses oeh sstem operas Wndows maupun Lnux.
Bahasa program PHP dan MySOL adaah open source sehngga kta
tdak peru mengeuarkan baya tambahan untuk membe software
tersebut.
Varabe daam PHP tdak peru d-dekaraskan terebh dahuu
sebeum dgunakan.
Daam PHP mengena ma macam tpe data yatu: nteger, oat,
strng, array dan ob|ek.
Struktur kontro/kenda daam php meput: statement /-, While,
-or, Swi(h) Re1uire dan /n(lu!e.
$. T+,a-
1. Buatah apkas web dengan program PHP untuk menghtung |umah
pengun|ung yang teah mengun|ung haaman web kta. Counter
yang kta buat n adaah untuk menghtung berapa ka suatu
haaman stus web teah dtampkan. Untuk menyederhanakannya
maka counter dtampkan daam bentuk teks bukan grak.
A#,o!itma:
a. Ba suatu haaman web dtampkan maka terebh duu dbaca s
e tertentu dan dbaca nanya.
b. Tampkan nanya d ayar browser
c. Tambahkan nanya dengan 1
d. Smpan nanya yang baru d e
e. Seesa
2. Buatah apkas pendaftaran/regstras agar pengun|ung
mendapatkan hak untuk memasuk haaman web yang kta buat.
Untuk tu membuat apkas tersebut anda harus mengkut aturan-
aturan sebaga berkut:
Buat database dan tabe. Fed-ed tabe tersebut terdr dar
username, password, nama, alamat, email dan leel.
Untuk eve dbedakan men|ad dua, yatu +-! 0ia-a dan
a$mini-t!ato!.
SWR.OPR.?MA.J?K.A
LO*IN
U-! Nam
Pa--"o!$
Log
n
Dafta
r
Buat haaman Lo,in sepert gambar dbawah n. Tombo Lo,in
untuk masuk ke haaman berkutnya |ka user sudah terdaftar.
Haaman yang
dkun|ung
berdasarkan eve
user, |ka user adaah
admnstrator maka
haaman yang dbuka
adaah 2a#aman
a$mini-t!ato! |ka
user name adaah user basa maka yang dbuka adaah 2a#aman
+-! 0ia-a. Sedangkan tombo $a/ta!, dgunakan untuk
pendaftaran user baru bag yang beum terdaftar.
Buat haaman pendaftaran yang ddaamnya terdapat Fo!m
Pn$a/ta!an U-! Ba!+ sepert gambar berkut:
Seteah sukses meakukan pendaftaran, user dapat meakukan
ogn sesua dengan eve user masng-masng. Untuk haaman
admnstrator terdapat menu ihat "ata, #ambah "ata, $dit
"ata, %apus "ata dan &anti 'assword. Sedangkan untuk
haaman user basa terdapat menu $dit "ata (mknya sendr)
dan &anti 'assword.
Semua haaman yang dbuat d autentkas menggunakan
---ion.
3. Buatah buku tamu (guestbook) dengan angkah-angkah pembuatan
buku tamu sebaga berkut:
a. Membuat tabe MySOL yang akan menympan s buku tamu
b. Membuat form pengsan buku tamu
SWR.OPR.?MA.J?K.A
Sim)an
PENDAFTARAN
AN**OTA
U-! Nam
Pa--"o!$
Nama
A#amat
E5mai#
L'#
A$mini-t!ato!
U-!
Bia-a
R-t
c. Membuat program untuk menerma masukan data dar form yang
teah kta buat sebeumnya
d. Membuat program untuk menampkan s buku tamu.
. T- Fo!mati/ 6
1. Apa yang anda ketahu dengan >ariable dan ?onsana ?.
2. Sebutkan macam-macam statement kenda dan apa fungsnya ?
3. Buatah program untuk menghtung faktora. Dengan agortma
sebaga berkut:
Membuat form dengan menggunakan tag FORM pada HTML.
Dengan data yang dmasukkan adaah na faktora yang dcar.
Msa sepert gambar berkut:
Data yang dmasukkan dsmpan daam varabe dan dkrmkan
ke sebuah e PHP an yang fungsnya untuk menerma varabe
yang dkrmkan oeh form. Kemudan varabe tersebut dproses
dengan rumus berkut n:
&aktorial nS" 1N'N(N...NnW1
Has dar perhtungan tersebut kemudan dtampkan daam form
yang an, sepert pada gambar berkut:
SWR.OPR.?MA.J?K.A
Gunakan statement peruangan untuk menger|akan tugas datas.
Seesa
/. K+n&i Ja"a0an Fo!mati/
Varabe dgunakan untuk menympan data sementara dan nanya
bsa berubah-ubah setap ka program d|aankan. Daam PHP,
varabe dawa dengan $ dan dkut dengan nama varabenya.
Statement kenda terdr dar:
Statement IF, dgunakan untuk meakukan eksekus suatu
statement secara bersyarat.
Statement WHILE, dgunakan untuk meakukan peruangan
daam sebuah statement sampa konds tertentu terpenuh.
Statement FOR, dgunakan untuk menguang se|umah bok
statement sampa |umah atau konds terpenuh. Fungsnya
sama dengan statement whe. Bedanya, daam statement for
|umah peruangan sudah dketahu dawa dan harus dtuskan
na awa dan na akhr dar varabe penghtung.
Statement SWITCH, dgunakan untuk membandngkan suatu
varabe dengan beberapa na serta men|aankan statement
tertentu |ka na varabe sama dengan na yang dbandngkan.
Statement REOUIRE, dgunakan untuk membaca na varabe
dan fungs-fungs dar sebuah e an.
Statement INCLUDE, dgunakan untuk menyertakan s suatu e
tertentu.
Program untuk menghtung faktora adaah:
Fi# /a4to!ia#.)2)
SWR.OPR.?MA.J?K.A
<html>
<head>
<title>::: =rogram &aktorial:::</title>
</head>
<body>
<!enter>
<table border"1 width")$$>
<tr>
<td><0ont 0a!e"tahoma si1e"'><h(><u><!enter><br>
Men!ari &aktorial</u></h(>
<0orm a!tion"0aktor.php method"post>
Masukkan ;ilai &aktorial:<br>
<input type"te%t name"a si1e"1$><p>
<input type"submit 2alue"4Hitung4>
</0orm>
<br>
</td>
</tr>
</table>
</body>
</html>
Fi# 2a-i#.)2)
<html>
<head>
<title>::: =rogram &aktorial:::</title>
</head>
<body>
<!enter>
<table border"1 width")$$>
<tr>
<td><0ont 0a!e"tahoma si1e"'>
<h(><u>
<!enter>
<br>Men!ari &aktorial</u></h(>
<0orm a!tion"0aktorial.php method"post>
<G
T!"1B
i0 UTa<1V
\
Ta"$B
T!"$B
]B
e!ho 4&aktorial Ta adalah: 4B
0or UTb"1BTb<TaW1BTbWWV
\
T!"T!NTbB
]
e!hoU4" T!4VB
G>
<p>
<input type"submit 2alue"4Hitung Lagi4>
</0orm>
<br>
</td>
</table>
</body>
</html>
,. Lm0a! K!1a 6
SWR.OPR.?MA.J?K.A
A#at $an Ba2an
a. PC (Personal :om"uer) yang teah dengkap dengan web browser.
b. Edtor Teks NotePad
c. Apache Web Server
d. Program PHP
e. Program MySOL
a. Berdoaah sebeum memua kegatan bea|ar.
b. Bacaah dan paham petun|uk praktkum pada setap embar
kegatan bea|ar.
c. Pastkan komputer daam keadaan bak, semua kabe penghubung
d. |angan meetakkan benda yang dapat mengeuarkan medan
eektromagnetk d dekat komputer (magnet, han!"hone, dan
sebaganya).
e. Gunakanah komputer sesua fungsnya dengan hat-hat, |angan
berman game.
f. Seteah seesa, matkan komputer sesua prosedur yang aman!
Lan,4a2 K!1a
a. Sapkanah semua peraatan yang akan dgunakan!
b. Perksa semua kabe penghubung pada PC.
c. Nyaakan PC dan |aankan program web server, MySOL, PHP, edtor
notepad dan web browser Internet Exporer.
d. Ker|akan Tes Formatf 2 d atas.
e. Apaba menemu kesutan daam memaham mater yang ada,
segera tanyakan denga nstruktur.
f. Seteah seesa, matkan komputer dan rapkan sepert semua.
SWR.OPR.?MA.J?K.A
?. K,iatan B#a1a! ?:
Mengena Software Web Desgn.
Seteah meaksanakan kegatan pemea|aran 1 dharapkan peserta
dkat dapat mengena berbaga macam sofware web !esign dengan
kekurangan dan keebhannya masng-masng.
0. U!aian Mat!i ?
1. So/t"a! W0 D-i,n
Software web desgn merupakan perangkat unak yang berguna
untuk membangun/membuat/mendsan haaman-haaman web,
bak yang bersfat stats maupun dnams. Saat n terdapat berbaga
macam software web desgn yang dkeuarkan oeh vendor yang
berbeda-beda. Setap software web desgn tu menawarkan
berbaga macam tur ungguannya masng-masng. Software web
desgn terpopuer yang ada saat n antara an: Adobe Image Ready,
Macromeda Dreamweaver, Macromeda Freworks, Mcrosoft
Frontpage dan an sebaganya.
6. Mn,na# Ma&!om$ia D!am"a'! MN
Macromeda Dreamweaver yang merupakan saah satu sofware
web !esign terpopuer dph sebaga sofware web !esign yang
akan dgunakan daam proses pemea|aran daam modu n.
Macromeda Dreamweaver dph karena kompatbtas dan
dukungannya terhadap berbaga bahasa pemrograman web, antara
an: ASP, |SP, CFM, ASP.NET, PHP, |avaScrpt, CSS dan XML
dsampng keungguan-keungguan annya dbandngkan dengan
sofware web !esign yang an. Saat n Macromeda Dreamweaver
teah sampa pada vers 2004 yang ebh serng dsebut dengan
Macromeda Dreamweaver MX 2004.
Dreamweaver men|ad sofware utama yang dgunakan oeh web
!esigner dan web programmer guna mengembangkan stus web.
Ruang ker|a, fastas dan kemampuan Dreamweaver mampu
menngkatkan produktvtas dan efektvtas daam desan maupun
pembangunan stus web. Dreamweaver |uga dengkap dengan
fastas untuk mana|emen stus yang cukup engkap.
Untuk dapat mengoperaskan Macromeda Dreamweaver, terebh
dahuu harus dpastkan sudah ternsta d komputer praktkum.
Apaba beum ada Macromeda Dreamweaver yang ternsta, maka
peru dakukan proses nstaas. Terebh dahuu harus dpersapkan
e nstaasnya dan dkut dengan proses nstaas sesua dengan
SWR.OPR.?MA.J?K.A
insallaion manual yang ada. Seteah Macromeda Dreamweaver
ternsta, |aankan dengan kk 2 ka pada kon yang terdapat d
desktop atau dapat |uga dakukan meau Start Menu.
?. Wo!4-)a& D!am"a'! MN
Pertama ka d|aankan seteah proses nstaas seesa, user akan
dberkan phan Workspace Setup. Workspace Setup berfungs
untuk menentukan workspace yang akan kta paka sean|utnya,
apakah Workspace Dreamweaver MX apakah Workspace
Dreamweaver 4. D sn kta gunakan Workspace Dreamweaver MX,
apaba dkemudan har kta ngn menggunakan workspace
Dreamweaver 4, kta dapat merubahnya meau Menu Edt
Preferences.
Gambar 1. Workspace Setup
Workspace Dreamweaver MX tersebut memk tampan wndow
sepert pada gambar 2. Wndow Dreamweaver MX n dbag men|ad
7 bagan, yatu: Insert Bar, Document Toobar, Document Wndow,
Pane Groups, Tag Seector, Property Inspector dan Fes Pane.
SWR.OPR.?MA.J?K.A
Gambar 2. Wndow dan Pane Dreamweaver MX
Keterangan Gambar:
1- Insert bar, memuat tombo-tombo yang berfungs untuk
memasukkan/menyspkan berbaga |ens obyek sepert
gambar, tabe dan ayer ke daam suatu dokumen. Setap
obyek yang dmasukkan dengan meng-kk tombo nsert pada
nsert bar n adaah sepert hanya memasukkan potongan tag
HTML ke daam haaman yang sedang dbuat.
2. Document wndow, berfungs untuk menampkan dokumen d
mana anda sekarang beker|a.
3. Document toobar, bers tombo dan menu pop-up yang
menyedakan tampan yang berbeda-beda dar Document
Wndow.
4. Pane groups, merupakan kumpuan pane yang sang
berkatan satu sama an, yang dkeompokkan d bawah satu
|udu.
5. Tag seector, berfungs untuk menampkan herark tag d
sektar phan yang aktf pada Desgn Vew.
6. Property nspector, dgunakan untuk mehat dan mengubah
berbaga property obyek atau teks.
7. Fes pane, memungknkan pengaturan e-e atau drektor
ker|a.
Workspace Dreamweaver MX n memberkan kesatuan tampan
antara menu utama, pane, property nspector serta toobar.
SWR.OPR.?MA.J?K.A
&. Ran,4+man ?
Macromeda Dreamweaver yang teah sampa pada vers 2004 (MX)
merupakan sofware web !esign yang teah memk banyak dukungan
terhadap banyak bahasa pemrograman web. Pane-pane pada wndow
Dreamweaver MX memk peran masng-masng daam membangun
sebuah haaman web yang cantk, sesua dengan |wa sen s pemaka.
$. T+,a- ?
1. Pea|arah setap fungs dar pane-pane daam wndow
Dreamweaver MX!
2. Car dan pea|ar sumber bacaan atau buku refens yang
men|easkan secara deta tentang pengenaan too-too daam
Macromeda Dreamweaver MX .
. T- Fo!mati/ ?
1. Apakah yang anda ketahu tentang sofware web !esign?
2. Apa yang anda ketahu tentang pemrograman web?
3. Sebutkan beberapa sofware web !esign yang anda ketahu!
/. K+n&i Ja"a0an Fo!mati/ ?
1. Sofware web !esign ; perangkat unak yang berguna untuk
membangun/membuat/mendsan haaman-haaman web, bak yang
bersfat stats maupun dnams.
2. Pemrograman web, adaah pembuatan haaman web yang
ddaamnya mengandung unsur bahasa pemrograman dsampng
tetap menggunakan tag-tag HTML. Basanya pemrograman web
bertu|uan untuk membangun web-web dnams.
3. Sofware web !esign: Mcrosoft Frontpage, Macromeda Freworks,
Macromeda Dreamweaver, Adobe ImageReady, Namo Web e!ior
dan an - an.
,. Lm0a! K!1a ?
A#at $an Ba2an
Persona Computer (PC).
1. Berdoaah sebeum memua kegatan bea|ar.
SWR.OPR.?MA.J?K.A
2. Bacaah dan paham petun|uk praktkum pada setap embar
kegatan bea|ar.
3. Pastkan komputer daam keadaan bak, semua kabe penghubung
4. Seteah seesa, matkan komputer sesua prosedur!
Lan,4a2 K!1a
1. Sapkanah semua peraatan yang dbutuhkan!
2. Perksa semua kabe penghubung pada komputer.
3. Nyaakan komputer dan pastkan komputer tersebut teah
terkoneks nternet dengan bak.
4. Pastkan PC yang anda paka sudah memk sofware web !esign,
|ka beum akukanah nstaas sofware yang dbutuhkan, yatu:
Macromeda Dreamweaver MX .
5. |aankan Macromeda Dreamweaver MX, amat dan catat bagan-
bagan pada wndow Dreamweaver MX. |ka mengaam kesutan,
tanyakan pada nstruktur.
6. Seteah seesa, aporkan has ker|a Anda kepada nstruktur.
7. Seteah dtet matkan komputer dan rapkan sepert semua.
SWR.OPR.?MA.J?K.A
BAB III
EVALUASI
A. T- T+#i-
|awabah pertanyaan berkut n dengan sngkat dan |eas!
1. |easkan masng-masng fungs dar tag-tag berkut:
a. <h1>
b. <p>
c. <br>
d. <hr>
2. Apakah fungs dar nk, form dan frame daam pembuatan web?
3. Apa perbedaan frame dan frameset?
4. Apa perbedaan checkbox dan rado button?
5. Apakah fungs dar tombo Submt dan Reset?
6. Apa yang anda ketahu dengan >ariable dan ?onsana ?.
7. Sebutkan macam-macam statement kenda dan apa fungsnya ?
B. T- P!a4t4
Buatah haaman web dengan content yang engkap. Web yang anda buat
dgunakan untuk mengeoa Si-tm A$mini-t!a-i Si-"a sekoah anda.
Sebeum membuat haaman web tersebut terebh dahuu anda harus
merencanakan dsan dan ayout haaman web, struktur data dan
agortma program, serta menentukan mode dan skema data base (terdr
dar tabe dan ed apa sa|a, reas dan query-nya). Seteah proyek anda
seesa, sahkan membuat aporan dan serahkan ke guru pembmbng
anda masng-masng.
Ketentuan mnma dar program yang akan anda buat adaah bahwa
program anda nantnya mnma akan dbuka/dakses oeh Admnstrator,
Guru/karyawan, Sswa dan Orang Tua/wa Sswa.
A$mini-t!ato!
Memk hak akses tertngg daam program tersebut. Data-data yang
dapat dmasukkan dan dubah oeh admnstrator adaah:
1. Data Proe Sekoah
2. Data Guru/Karyawan
3. Data Sswa
4. Data Orang Tua/Wa Sswa
5. Data |urusan
6. Data Keas
SWR.OPR.?MA.J?K.A
7. Data Pea|aran
8. Data Tempuh
9. Data Absens
10. Data Na Sswa
11. Data User
*+!+/4a!.a"an
Untuk user guru, data yang dapat dmasukkan dan dubah adaah:
1. Data Na untuk mata pea|aran yang da|ar
2. Ubah Passwordnya sendr
Si-"a
User sswa hanya memk hak akses untuk mehat na dan
absensnya sendr. Dan dapat merubah password mk sswa tersebut.
O!an, T+a/"a#i Si-"a
User Orang Tua/Wa memk hak akses untuk mehat na dan
absens putranya. Dan dapat merubah password mknya sendr.
Ketentuan datas adaah ketentuan mnma, sahkan dengkap sebagus
mungkn. Sahkan meakukan stud kasus d sekoah anda sendr atau d
sekoah an untuk membantu anda daam meengkap content haaman
web dan untuk menentukan ed-ed dar tabe yang dperukan.
3. K+n&i Ja"a0an T- T+#i-
1. Fungs dar tag:
a. <h1>: dgunakan untuk mengatur ukuran huruf pada header
dengan angka 1 berart mempunya ukuran pang besar.
b. <p> : dgunakan untuk berpndah anea atau membuat paragraf
baru
c. <br> : Dgunakan untuk pndah bars baru.
d. <hr> : dgunakan untuk membuat gars horsonta
2. Lnk, untuk meompat dar satu dokumen ke dokumen atau tempat
yang an, dapat berupa teks maupun gambar.
Form, dgunakan untuk mengumpukan nformas dar pengun|ung
(bernteraks dengan pengun|ung) karena form dapat berupa mode
san yang harus ds pengun|ung dan akan dbca oeh pemk web.
Frame, merupakan pembag haaman.
3. Frame adaah dokumen yang terdapat d daam frameset dengan
border yang mengengnya. Sedangkan frameset, adaah suatu frame
yang dapat menampung beberapa frame an d daamnya dan dapat
memk beberapa frameset yang annya.
SWR.OPR.?MA.J?K.A
4. Checkbox dan rado button memk fungs yang sama yatu untuk
menentukan phan dar suatu daftar phan. Perbedaanya teretak
pada |umah phan yang dapat dph. Pada checkbox, pengun|ung
haaman web dapat memh beberapa dar daftar phan, namun
dengan rado button, pengun|ung hanya berhak menentukan satu
phan sa|a.
5. Tombo submt berfungs untuk mengrmkan data yang teah
dmasukkan daam form untuk sean|utnya doah oeh server. Dan
tombo reset berfungs untuk mengosongkan dan atau mengembakan
ke na !efaul data yang ada daam form.
6. Varabe dgunakan untuk menympan data sementara dan nanya bsa
berubah-ubah setap ka program d|aankan. Daam PHP, varabe
dawa dengan $ dan dkut dengan nama varabenya.
7. Statement kenda terdr dar:
a. Statement IF, dgunakan untuk meakukan eksekus suatu statement
secara bersyarat.
b. Statement WHILE, dgunakan untuk meakukan peruangan daam
sebuah statement sampa konds tertentu terpenuh.
c. Statement FOR, dgunakan untuk menguang se|umah bok
statement sampa |umah atau konds terpenuh. Fungsnya sama
dengan statement whe. Bedanya, daam statement for |umah
peruangan sudah dketahu dawa dan harus dtuskan na awa
dan na akhr dar varabe penghtung.
d. Statement SWITCH, dgunakan untuk membandngkan suatu varabe
dengan beberapa na serta men|aankan statement tertentu |ka
na varabe sama dengan na yang dbandngkan.
e. Statement REOUIRE, dgunakan untuk membaca na varabe dan
fungs-fungs dar sebuah e an.
f. Statement INCLUDE, dgunakan untuk menyertakan s suatu e
tertentu.
SWR.OPR.?MA.J?K.A
D. Lm0a! Pni#aian T- P!a4t4
PEDOMAN PENILAIAN
Nama Peserta :
No. Induk :
Program Keahan :
Nama |ens Peker|aan :
No
.
A-)4 Pni#aian
S4o!
Ma4
-
S4o!
P!o#2a
n
Kt.
1 6 ? A B
I P!n&anaan
1.1. Persapan Hardware dan Software 5
1.2. Menganasa |ens desan 5
Sub Tota 10
V Mm0+at La.o+t
2.1. Penyapan Layout 5
2.2. Menentukan warna dan gambar 5
Sub Tota 10
IN P!o-- JSi-tmati4a S 3a!a K!1aK
3.1. Cara Instaas program apkas 5
3.2. Cara menyapkan struktur data dan
agortma program
5
3.3. Cara menyapkan Database 5
3.4. Cara kodng program 5
3.5. Cara meakukan ayout 5
3.6. Cara menetapkan warna 5
Sub Tota 30
NVII
K+a#ita- P!o$+4 K!1a
4.1. Haaman Web
Layut haaman web 2,5
Komposs warna dan gambar 2,5
4.2. Data Base
Desan mode database 2,5
Reaton 2,5
Ouery 2,5
SWR.OPR.?MA.J?K.A
Mn,o)!a-i4an 0a2a-a )m!o,!aman
0!0a-i- "0
R4a.a-a P!an,4at
L+na4
No
.
A-)4 Pni#aian
S4o!
Ma4
-
S4o!
P!o#2a
n
Kt.
1 6 ? A B
4.3. Bahasa Program
Penggunaan server sde scrpt 2,5
Program dbuat dengan esen 2,5
4.4. Securty
Kamanan Data
Back up data 2,5
Sstem data og 2,5
Kamanan A4--
Autentkas user 2,5
Pembatasan hak akses 2,5
4.5. Peker|aan dseesakan dengan
waktu yang teah dtentukan
2,5
Sub Tota 30
NNNV
Si4a)/Eto- K!1a
5.1. Tanggung |awab 2
5.2. Ketetan 3
5.3. Insatf 3
5.4. Kemandran 2
Sub Tota 10
NLI
La)o!an
6.1. Sstmatka penyusunan aporan 4
6.2. Keengkapan bukt sk 6
Sub Tota 10
Tota# 1MM
SWR.OPR.?MA.J?K.A
KRITERIA PENILAIAN
No
.
A-)4 Pni#aian K!it!ia Pni#aian S4o!
I
P!n&anaan
1.3. Persapan Hardware dan
Software
Hardware dan Software
dsapkan sesua kebutuhan
5
Hardware dan Software
dsapkan sesua kebutuhan
1
1.4. Menganasa |ens desan Merencanakan sesua
tahapan/ proses desan
5
Tdak merencanakan
tahapan/ proses desan
1
VI
Mm0+at La.o+t
2.1. Penyapan Layout Layout web dsapkan
sesua prosedur
5
Layout web tdak dsapkan
sesua prosedur
1
2.2. Menentukan warna dan
gambar
Haaman web dengkap
dengan warna dan gambar
5
Haaman web tdak
dengkapa dengan warna
dan gambar
1
NI
P!o-- JSi-tmati4a S 3a!a K!1aK
3.1. Cara Instaas program
apkas
Program apkas dnsta
dengan benar sesua
dengan kebutuhan
5
Program apkas tdak
dnsta dengan benar
sesua dengan kebutuhan
1
3.2. Cara menyapkan
struktur data dan
agortma program
Struktur data dan
agortma program
dsapkan sesua dengan
rencana
5
Struktur data dan
agortma program
dsapkan tdak sesua
dengan rencana
1
3.3. Cara menyapkan
Database
Database dsapkan sesua
dengan normasas
database
5
Database dsapkan tdak
sesua dengan normasas
database
1
3.4. Cara kodng program Program d buat sesua
5
SWR.OPR.?MA.J?K.A
No
.
dengan agortma program
dan esen
Program d buat tdak
sesua dengan agortma
program dan tdak esen
1
3.5. Cara meakukan ayout Layout memenuh dasar-
dasar estetka
5
Layout tdak memenuh
dasar-dasar estetka
1
3.6. Cara menetapkan warna Penggunaan warna
memenuh harmon warna
5
Penggunaan warna tdak
harmon
1
NNIV
K+a#ita- P!o$+4 K!1a
4.1. Haaman Web
Layut haaman web Haaman web dbuat
sesua dengan ayout
2,5
Haaman web tdak dbuat
sesua dengan ayout
0,5
Komposs warna dan
gambar
Komposs warna dan
gambar searas
2,5
Komposs warna dan
gambar tdak searas
0,5
4.2. Data Base
Dsan mode
database
Database dbuat
mengguna-kan/sesua DMD
2,5
Database dbuat tdak
meng-gunakan/sesua DMD
0,5
Reaton Menggunakan Database
reas
2,5
Tdak menggunakan
database reas
0,5
Ouery Menggunakan query data 2,5
Tdak menggunakan query
data
0,5
4.3. Bahasa Program
Penggunaan server
sde scrpt
Web dbuat dengan
teknoog/ bahasa server
sde scrpt
2,5
Web dbuat tdak dengan
teknoog/bahasa server
sde scrpt
0,5
Program dbuat
dengan esen
Program dbuat se-esen
mungkn
2,5
SWR.OPR.?MA.J?K.A
No
.
Program dbuat terau
pan|ang
0,5
4.4. Securty
Kamanan Data
Back up data Daam haaman web
terdapat fastas apkas
backup data
2,5
Daam haaman web tdak
terdapat fastas apkas
backup data
0,5
Sstem data og Terdapat fastas
pencatatan sstem data og
2,5
Tdak terdapat fastas
pencatatan sstem data og
0,5
Kamanan A4--
Autentkas user Haaman web dber
fastas autentkas user
2,5
Haaman web tdak dber
fastas autentkas user
0,5
Pembatasan hak
akses
Pemaka dbedakan hak
aksesnya
2,5
Pemaka tdak dbedakan
hak aksesnya
0,5
4.5. Peker|aan dseesakan
dengan waktu yang teah
dtentukan
Dseesakan tepat waktu 2,5
Dseesakan tdak tepat
waktu
0,5
LIII Si4a)/Eto- K!1a
5.1. Tanggung |awab Membereskan kemba aat
dan bahan yang
dpergunakan
2
Tdak membereskan aat
dan bahan yang
dpergunakan
0,5
5.2. Ketetan Tdak banyak meakukan
kesaahan ker|a
3
Banyak meakukan
kesaahan ker|a
0,5
5.3. Insatf Memk nsatf beker|a 3
Kurang/tdak memk
nsatf ker|a
0,5
5.4. Kemandran Beker|a tanpa banyak
dperntah
2
Beker|a dengan banyak
dperntah
0,5
SWR.OPR.?MA.J?K.A
No
.
LNII La)o!an
6.1. Sstmatka penyusunan
aporan
Laporan dsusun sesua
sstmatka yang teah
dtentukan
4
Laporan dsusun tanpa
sstmatka
1
6.2. Keengkapan bukt sk Meamprkan bukt sk
has penyusunan
6
Tdak meamprkan bukt
sk
2
Kategor keuusan:
70 - 79 : Memenuh krtera mnna. Dapat beker|a dengan bmbngan.
80 - 89 : Memenuh krtera mnma. Dapat beker|a tanpa bmbngan.
90 - 100 : D atas krtera mnma. Dapat beker|a tanpa bmbngan.
SWR.OPR.?MA.J?K.A
BAB IV
PENUTUP
Seteah menyeesakan modu n dan menger|akan semua tugas serta
evauas maka berdasarkan krtera penaan, peserta dkat peserta dkat
dapat dnyatakan uus/tdak uus. Apaba dnyatakan uus maka dapat
mean|utkan ke modu berkutnya sesua dengan aur peta kududukan modu,
sedangkan apaba dnyatakan tdak uus maka peserta dkat harus
menguang modu n dan tdak dperkenankan mengamb modu sean|utnya.
SWR.OPR.?MA.J?K.A
DAFTAR PUSTAKA
1. Bmo Sunarfrhantono, ST, %H% !an MyS3L 4ntuk 1&*, And 2003
2. Bunat Nugroho, %H% 6 MyS3L -engan &!itor -ream+ea7er M8,
And, 2004
3. Mco Pardos, *aha"a %emrograman ,nternet$ H2ML !an 9a7a"#ript,
Indah, 2001
4. MADCOMS, Aplika"i Manaemen -ata(a"e %en!i!ikan *er(a"i" 1e(
-engan %H% !an MyS3L, And, 2005
5. Sutarman, S.Kom, Mem(angun Aplika"i 1e( -engan %H% !an MyS3L,
Graha Imu, 2003
6. Teguh Wahyono, %H% 2R,A- 0un!amental (Memahami %emrograman
1e( -engan %H% !an MyS3L !alam :; 9am)) Gava Meda, 2005
7. Vsbooks, H2ML an! 9a7aS#ript <or =i"ual Learner",
8. Yahya Kurnawan, ST, Aplika"i 1e( -ata(a"e !engan %H% !an MyS3L)
Eex Meda Komputendo, 2003.
9. http://www.mukomputer.com
10. http://www.kk-kanan.com
SWR.OPR.?MA.J?K.A

Modul Mulok Pemrograman-Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Mulok Pemrograman-Web

Diunggah oleh

Hak Cipta:

Format Tersedia

KATA PENGANTAR

Konsep dan teknologi

Anda mungkin juga menyukai