MODUL

Pemrograman WEB

Hari Seputro, S.Pd., M T

SM K Negeri 7 Semarang
 KATA PENGANTAR

Modul dengan judul “ Pe m r ogr a m a n W eb“ merupakan bahan acuan yang

digunakan sebagai panduan dalam proses belajar mengajar siswa SMK Negeri 7
Semarang untuk membentuk salah satu bagian dari Bidang Studi Keahlian
Teknologi I nformasi dan Komunikasi pada Program Studi Keahlian Teknik
Komputer dan I nformatika untuk Paket Keahlian Teknik Komputer dan Jaringan.

Modul ini mencakup penguasaan konsep file-file grafik, memahami dasar-dasar

pemrograman web, memahami perintah-perintah pemrograman web, dan
bagaimana membangun sebuah aplikasi pemrograman berbasis web.

Semarang, Juli 2013

Penyusun

Hari Seputro, S.Pd., MT

NI P. 19670921 199702 1 002
 DAFTAR I SI MODUL

Halaman
KATA PENGANTAR ........................................................................... i
DAFTAR I SI MODUL ........................................................................ ii
PETA KEDUDUKAN MODUL .............................................................. iii
MEKANI SME PEMELAJARAN ............................................................. iv
PERI STI LAHAN / GLOSSARY ............................................................ v

I . PENDAHULUAN .................................................................. 1
A. Deskripsi Judul ................................................................. 1
B. Prasyarat ......................................................................... 1
C. Petunjuk Penggunaan Modul ............................................ 1
1. Petunjuk Bagi Siswa ................................................... 1
2. Peran Guru ................................................................. 3
D. Tujuan Akhir .................................................................... 3
E. Kompetensi ..................................................................... 4
F. Cek Kemampuan ............................................................. 5

I I . PEMELAJARAN ................................................................... 7
A. Rencana Pemelajaran Siswa ............................................. 7
B. Kegiatan Belajar .............................................................. 8
Kegiatan Belajar 1: Tag-tag dasar HTML ............................ 8
a. Tujuan Kegiatan Pemelajaran .................................. 8
b. Uraian Materi ........................................................ 8
c. Rangkuman .......................................................... 52
d. Tugas ................................................................... 52
e. Tes Formatif ......................................................... 53
f. Kunci Jawaban Formatif ......................................... 54
g. Lembar Kerja ........................................................ 56
Kegiatan Belajar 2: Memahami dasar-dasar pemrograman
web ............................................................................ 57
h. Tujuan Kegiatan Pemelajaran ................................. 57
i. Uraian Materi ........................................................ 57
j. Rangkuman .......................................................... 117
k. Tugas ................................................................... 117
l. Tes Formatif ......................................................... 119
m. Kunci Jawaban Formatif ......................................... 120
n. Lembar Kerja ........................................................ 121

Kegiatan Belajar 3: Membangun halaman web dengan bahasa

pemrograman berbasis web ....................................... 123
o. Tujuan Kegiatan Pemelajaran ................................. 123
p. Uraian Materi ........................................................ 123
 q. Rangkuman .......................................................... 125
r. Tugas ................................................................... 125
s. Tes Formatif ......................................................... 125
t. Kunci Jawaban Formatif ......................................... 126
u. Lembar Kerja ........................................................ 126

I I I . EVALUASI ........................................................................... 127

A. Tes Tulis ........................................................................ 127
B. Tes Praktek ..................................................................... 127
C. Kunci Jawaban Tes Tulis .................................................. 128
D. Lembar Penilaian Tes Praktek ........................................... 130

I V. PENUTUP ............................................................................ 135

DAFTAR PUSTAKA ........................................................................ 136

 PERI STI LAHAN/ GLOSSARY

Animation : Animasi dari beberapa gambar diam dibuat seperti hidup tanpa ada
patah-patah dalam pergerakannya.
Banner : Merupakan kepala atau bagian atas dari sebuah web site.
Dow nload : Proses pengambilan file atau mengcopy file.
Effect : Tindakan yang dikerjakan untuk menghaluskan atau memperindah
animasi pada obyek.
Event : Tindakan yang dilakukan setelah adanya action.
Export : Merubah jenis format ke bentuk yang lain.
Format : Bentuk ektensi dari jenis file.
Frame : Bagian dari Timeline.
Grouping : Mengumpulkan beberapa obyek untuk dijadikan satu.
HTML : Hypertext Markup Language, bahasa penanda hipertext
I nsert : Memasukkan jenis file kedalam bidang kerja SWiSHmax.
I nstallation manual : Petunjuk I nstalasi
Keyframe : Pada dasarnya hampir sama dengan frame. Hanya saja untuk Key frame
lebih menunjukkan untuk satu frame.
License Agreement : Persetujuan lisensi penggunaan suatu software tertentu
Movie : File yang dibuat dalam SWiSHmax.
Object : Benda yang sedang dikerjakan dalam bidang kerja SWiSHmax.
Operand : data yang dioperasikan atau dimanipulasi.
Operator : simbol/ tanda yang digunakan untuk melakukan operasi-operasi
matematis atau operasi string.
Player : Untuk memainkan animasi yang telah dibuat.
Preview : Melihat hasil yang telah dikerjakan.
Scane : Satu movie merupakan satu Scane.
Search Engine : Mesin bantu pencarian data.
Server : Pelayan, Komputer induk yang bertugas untuk melayani komputer-
komputer klien.
Softw are : Perangkat lunak, program yang berjalan di komputer.
Source Code : Kode asli suatu program
Time Line : Garis waktu atau pewaktuan yang terdapat dalam SwiSHmax.
Web design : Pembuatan/ desain halaman-halaman web.
 BAB. I
PENDAHULUAN

A. Deskripsi Judul

Mengoperasikan Bahasa Pemrograman Berbasis Web merupakan modul teori dan

atau praktikum yang membahas tentang pengoperasian Bahasa Pemrograman
Berbasis Web. Modul ini terdiri dari 3 (empat) kegiatan belajar. Kegiatan Belajar 1:
Mengenal tag-tag HTML, membuat, membuka dan menyimpan file halaman web.
Kegiatan Belajar 2: Membuat program dengan bahasa pemrograman berbasis web.
Kegaiatan Belajar 3: Membuat halaman web dengan software bantu. Setelah
menguasai modul ini diharapkan peserta diklat mampu membangun halaman web
dengan bahasa pemrograman berbasis web.

Prasyarat
Kemampuan awal yang dipersyaratkan untuk mempelajari modul ini adalah:
1. Peserta diklat telah lulus modul/ materi diklat mengoperasikan PC stand alone
dengan sistem operasi berbasis teks.
2. Peserta diklat telah lulus modul/ materi diklat mengoperasikan PC stand alone
dengan sistem operasi berbasis GUI
3. Peserta diklat telah lulus modul/ materi menyiapkan dan melakukan survey untuk
menentukan kebutuhan data
4. Peserta diklat telah lulus modul/ materi melakukan perancangan pengumpulan
data
5. Peserta diklat telah lulus modul/ materi melakukan desain dan perancangan
software
6. Peserta diklat telah lulus modul/ materi diklat mengoperasikan software aplikasi
basis data

B. Petunjuk Penggunaan Modul

1. Petunjuk Bagi Peserta diklat
Peserta diklat diharapkan dapat berperan aktif dan berinteraksi dengan sumber
belajar yang mendukungnya, karena itu harus memperhatikan hal-hal sebagai
berikut:

a. Langkah-langkah belajar yang ditempuh:

1) Memahami dan menguasai penggunaan tag-tag HTML.

1
 2) Memahami bagaimana menguasai algoritma pemrograman berbasis
web
3) Memahami bagaimana menerapkan algoritma pemrograman berbasis
pada aplikasi yang dibuat
4) Memahami bagaimana menentukan struktur data pada aplikasi yang
dibuat
5) Memahami bagaimana menentukan basis data pada aplikasi yang
dibuat
6) Memahami bagaimana menentukan pemakai aplikasi yang dibuat
7) Pelajari daftar isi serta skema kedudukan modul dengan cermat dan
teliti. Karena dalam skema modul akan nampak kedudukan modul yang
sedang Anda pelajari dengan modul-modul yang lain.
8) Kerjakan soal-soal dalam cek kemampuan untuk mengukur sampai
sejauh mana pengetahuan yang telah Anda miliki.
9) Apabila dari soal dalam cek kemampuan telah Anda kerjakan dan 70 %
terjawab dengan benar, maka Anda dapat langsung menuju Evaluasi
untuk mengerjakan soal-soal tersebut. Tetapi apabila hasil jawaban
Anda tidak mencapai 70 % benar, maka Anda harus mengikuti
kegiatan pemelajaran dalam modul ini.
10) Membaca dengan seksama uraian materi pada setiap kegiatan belajar.
Kemudian kerjakan soal-soal evaluasi sebagai sarana latihan.
11) Mencermati langkah–langkah kerja pada setiap kegiatan belajar
sebelum mengerjakan dan bila belum jelas tanyakan pada instruktur.
12) Mengerti apakah telah benar–benar memahami modul ini.
13) Untuk menjawab tes formatif usahakan memberi jawaban yang
singkat, jelas dan kerjakan sesuai dengan kemampuan Anda setelah
mempelajari modul ini.
14) Bila terdapat penugasan, kerjakan tugas tersebut dengan baik dan
bilamana perlu konsultasikan hasil tersebut pada guru/instruktur.
15) Catatlah kesulitan yang Anda dapatkan dalam modul ini untuk
ditanyakan pada guru pada saat kegiatan tatap muka. Bacalah
referensi lainnya yang berhubungan dengan materi modul agar Anda
mendapatkan tambahan pengetahuan.

b. Perlengkapan yang Harus Dipersiapkan

Guna menunjang keselamatan dan kelancaran tugas/pekerjaan yang harus

dilakukan, maka persiapkanlah seluruh perlengkapan yang diperlukan,
pelajarilah terlebih dahulu modul ini dan buku-buku yang menunjang.

c. Hasil Pelatihan

Peserta diklat mampu membangun halaman web dengan bahasa

pemrograman sesuai dengan kebutuhan.

2
 2. Peran Guru

Guru yang akan mengajarkan modul ini hendaknya mempersiapkan diri sebaik-
baiknya yaitu mencakup aspek strategi pemelajaran, penguasaan materi,
pemilihan metode, alat bantu media pemelajaran dan perangkat evaluasi.
Guru harus menyiapkan rancangan strategi pemelajaran yang mampu
mewujudkan peserta diklat terlibat aktif dalam proses pencapaian/ penguasaan
kompetensi yang telah diprogramkan. Penyusunan rancangan strategi
pemelajaran mengacu pada kriteria unjuk kerja (KUK) pada setiap sub
kompetensi yang ada dalam GBPP.

C. Tujuan Akhir
1. Peserta diklat mampu melakukan persiapan pemrograman berbasis web untuk
proses pembuatan sebuah web site.
2. Peserta diklat mampu menggunakan dan menerapkan fungsi dan operator
algoritma pemrograman pada aplikasi yang dibuat
3. Peserta diklat mampu menentukan struktur data pada aplikasi yang dibuat
4. Peserta diklat mampu menentukan basis data pada aplikasi yang dibuat
5. Peserta diklat mampu mengenali objek-objek web, tag-tag HTML dan script-script
pada pemrgraman berbasis web.
6. Peserta diklat mampu melakukan kombinasi objek-objek web, tag-tag HTML dan
script yang lain untuk membuat halaman-halaman web.
7. Peserta diklat mampu membangun halaman web dengan bahasa
pemrograman berbasis web

3
D. Kompetensi

SILABUS
NAMA SEKOLAH : SMK NEGERI 7 SEMARANG
MATA PELAJARAN : Pemrograman WEB
KELAS/SEMESTER : I/ 1 dan 2
STANDAR KOMPETENSI : Membuat dokumen dengan HTML sesuai spesifikasi
KODE KOMPETENSI :
ALOKASI WAKTU : 60 X 45 Menit

KOMPETENSI MATERI
INDIKATOR KEGIATAN PEMBELAJARAN PENILAIAN SUMBER
DASAR PEMBELAJARAN
BELAJAR
1. Menetapkan  Kegunaan dari dokumen dan  Kegunaan dari  Mengidentifikasi kegunaan dari dokumen  Program  Buku

 
pemakaian audiens diidentifikasi dokumen dan dan audiens sederhana HTML

  
dan struktur Bahasa HTML yang tepat audiens Program Dasar
dokumen

yang akan digunakan pada Bahasa HTML Menetapkan bahasa HTML yang tepat script dasar E-book


dokumen dan audiens Struktur dasar yang akan digunakan pada dokumen HTML

  
ditetapkan penulisan dokumen dan audiens Komputer

 
Struktur dasar dokumen Site map dokumen Modul ajar
sesuai persyaratan pengguna dikembangkan dan Membuat program sederhana dari script jobsheet


dirancang dengan klien dasar


Site map dokumen dikem-
bangkan dan dikonfirmasikan Merancang struktur dasar dokumen
dengan klien sesuai persyaratan pengguna

 Mengatahui scriptdasar HTML

 Mengkonfirmasikan Site map dokumen

dikembangkan dan dengan klien

4
 KOMPETENSI MATERI
INDIKATOR KEGIATAN PEMBELAJARAN PENILAIAN SUMBER
DASAR PEMBELAJARAN
BELAJAR
2. Membuat  Dokumen HTML dilengkapi  Dokumen HTML  Menlengkapi dokumen HTML dengan  Program  Buku

  
struktur dengan Head dan title dengan Head dan Head dan title sederhana HTML

 
dokumen Body pada dokumen dibuat, title Membuat Body pada dokumen Program Dasar


dengan teks dan paragraf sesuai Menambahkan teks dan paragraf sesuai dokumen E-book
bahasa HTML
 
kebutuhan ditambahkan Body pada kebutuhan sederhana HTML

 
Format dokumen menarik dan dokumen, teks dan Komputer


paragraf sesuai
 
mudah dibaca dibuat Format dokumen menarik dan mudah Modul ajar
Simbol khusus pada browser/ kebutuhan Dokumen penamaan standar. jobsheet
ditambahkan

platform ditambahkan dan


ditampilkan secara tepat Medesain Format dokumen menarik dan


Dokumen disimpan sesuai mudah dibaca dibuat
Simbol khusus pada

dengan penamaan standar.
browser/ platform Penambahan simbol khusus pada


browser/ platform
Mengatur itampilan secara tepat

 Penyimpanan dokumen disimpan sesuai

dengan penamaan standar.

5
 KOMPETENSI MATERI
INDIKATOR KEGIATAN PEMBELAJARAN PENILAIAN SUMBER
DASAR PEMBELAJARAN
BELAJAR
3. Memformat  Teks diformat untuk  Format teks dengan  Mempormat Teks untuk memenuhi  Program  Buku


dokumen dan memenuhi persyaratan HTML persyaratan penyajian pengguna sederhana HTML

  
menambahkan penyajian pengguna Pemberian campuran Dasar


obyek Background warna atau Background dan Memasang Background warna atau dari materi 3 E-book


gambar yang sesuai menurut warna pada gambar yang sesuai menurut Contoh HTML

 
persyaratan pengguna ( logo dokumen persyaratan pengguna ( logo peru- program Komputer


peru-sahaan, buku pedoman sahaan, buku pedoman perusahaan) insert object

Menempatkan objek Modul ajar


perusahaan) dipasang pada bidang desain Menempatkan Posisi setiap elemen (gambar dan jobsheet


Posisi setiap elemen pada pada halaman teks)


halaman dibuat lebih menarik Indent teks dan list (ordered, unordered,


Indent teks dan list (ordered, dan nested)


unordered, dan nested) dibuat Wrap teks di sekitar gambar digunakan


Gambar disisipkan (GIF, atau jarak di sekitar
JPEG, atau embedded image) Skala gambar dan perataan pada
dan dokumen diformat sesuai dokumen di format

 
persyaratan
Wrap teks di sekitar gambar Membuat setiap elemen pada halaman
digunakan atau ditambahkan dibuat lebih menarik

 
jarak di sekitar gambar
Skala gambar dan perataan Membuat Indent teks dan list (ordered,
pada dokumen di format unordered, dan nested)

 Menyisipkan gambar disisipkan (GIF,

JPEG, atau embedded image)

 Mempormat dokumen sesuai

persyaratan

 Menambahkan Wrap teks di sekitar

gambar

 Menambahkan jarak di sekitar gambar

 Mempormat skala gambar dan perataan

pada dokumen

6
NAMA SEKOLAH : SMK NEGERI 7 SEMARANG
MATA PELAJARAN : Pemrograman WEB
KELAS/SEMESTER : I/ 1 dan 2
STANDAR KOMPETENSI : Menerapkan dasar-dasar pembuatan web statis tingkat dasar
KODE KOMPETENSI :
ALOKASI WAKTU : 60 X 45 Menit

KOMPETENSI MATERI
INDIKATOR KEGIATAN PEMBELAJARAN PENILAIAN SUMBER
DASAR PEMBELAJARAN
BELAJAR
1. Menjelaskan  Konsep-konsep dan teknologi  Konsep dan teknologi  Menjelaskan Konsep-konsep dan teknologi  Kompilasi  Bukub

 Konsep klien dan 

konsep dasar web dijelaskan (web web web (web Server, URL, HTTP, HTML, program Pemrogra

 Mengetahui Cara bagaimana bandwidth

dan teknologi Server, URL, HTTP, HTML, Web browser , gateway ) man

 
dari Webpage. Web browser , gateway server pada teknologi HTML

 Kapasitas Bandwidth 
Perbedaan antara klien dan WEB mempengaruhi transmisi data dan gambar Komputer

 Menjelaskan perbedaan antara klien dan

server dijelas. pada layer Buku


dan kulaitas tampilan membuat

 Pemilihan software  Menjelaskan cara bagaimana bandwidth

Cara bagaimana bandwidth halaman WEB server halaman
mempengaruhi transmisi data WEB
dan gambar pada layar aplikasi perancangan mempengaruhi transmisi data dan gambar dengan

 Perbandingan local  Membandingkan ciri-ciri dan fungsi dari

dijelaskan. web pada layer Frontpage

 Ciri-ciri dan fungsi dari server dan remote software teks editor yang tersedia untuk
software teks editor yang server (hosting merancang web page

 Menjelaskan keuntungan dan kerugian

tersedia untuk merancang provider)
web page dibandingkan


running dari server yang dimiliki


dibandingkan server provider.

7
 KOMPETENSI MATERI
INDIKATOR KEGIATAN PEMBELAJARAN PENILAIAN SUMBER
DASAR PEMBELAJARAN
BELAJAR
2. Mempersiapkan  Software teks editor dan  Pemilihan teks  Mengidentifikasi software teks editor dan  sketsa  Bukub

 
pekerjaan browser sesuai dengan editor dan browser browser sesuai dengan kebutuhan disain Pemrogra
pembuatan web kebutuhan diidentifikasi Kinerja WEB Mempersiapkan software beroperasi untuk web man

   
Browser sesuai dengan standar operasi software HTML


Software beroperasi sesuai Desain layout Membuat Area kerja untuk membuat Komputer
dengan standar operasi halaman WEB dokumen web Buku

 
software membuat
Sketsa disain untuk web yang Mempersiapkan sketsa disain untuk web halaman

 
akan dibuat sudah disiapkan yang akan dibuat sudah disiapkan WEB
Data yang akan ditampilkan di Menyediakan data yang akan ditampilkan dengan


Frontpage

Web tersedia di Web
Area kerja untuk membuat Menyiapkan area kerja untuk membuat
dokumen web baru sudah dokumen web baru.

    
disiapkan.
3. Melakukan Proses pembuatan Web Proses pembuatan Memanagemen langkah langkah Proses Kompilasi Bukub


pembuatan sesuai dengan standar operasi Web sesuai pembuatan Web sesuai dengan standar program Pemrogra
dokumen web aplikasi dilakukan dengan standar operasi aplikasi Hasil Web man

  
baru operasi aplikasi standar HTML


Web yang dibuat tampil dilayar Membandingkan Web yang dibuat Komputer

 
sesuai dengan disain tampilan dilayar sesuai dengan disain Buku
Data yang tersedia tampil di Menampilkan data yang tersedia di layar membuat
layar Web Web halaman
WEB
dengan
Frontpage

8
 KOMPETENSI MATERI
INDIKATOR KEGIATAN PEMBELAJARAN PENILAIAN SUMBER
DASAR PEMBELAJARAN
BELAJAR
4. Menampilkan  Format URL (Uniform  Format URL  Membuat tampilan Format URL (Uniform  Kompilasi  Bukub


Web dalam Resource Locator) dijelaskan (Uniform Resource Resource Locator) program Pemrogra

  
browser Locator) Hasil Web man


Peran dari browser dalam Peran dari browser Mendemonstrasikan Peran dari browser standar HTML


membaca file-file Web dalam membaca dalam membaca file-file Web (text-only, Komputer


didemonstrasikan (text-only, file-file hypertext) dengan mengakses ke URL Buku


hypertext) dengan mengakses Perbandingan tertentu melalui menu yang tersedia membuat


ke URL tertentu melalui menu lokasi browser Mengatahui macam-macam browser web halaman
yang tersedia Mengetahui Peran dari browser dalam WEB
membaca file-file Web (text-only, dengan


hypertext) dengan mengakses ke URL Frontpage


Perbedaan browser tertentu melalui menu yang tersedia
mempengaruhi tampilan dari Mengidentifikasi perbedaan browser yang
halaman web dapat mempengaruhi tampilan dari halaman
diidentifikasi

web
Mengetahui Perbedaan browser mem-
pengaruhi tampilan dari halaman web

Keterangan
TM : Tatap Muka
PS : Praktek di Sekolah (2 jam praktik di sekolah setara dengan 1 jam tatap muka)
PI : Praktek di Industri (4 jam praktik di Du/ Di setara dengan 1 jam tatap muka)

9
F. Cek Kemampuan

I silah cek list (√) seperti pada tabel di bawah ini dengan sikap jujur dan dapat
dipertanggung jawabkan untuk mengetahui kemampuan awal yang telah dimiliki.

Saya dapat
Melakukan Bila
Standar Pekerjaan ini Jaw aban
Kompetensi Dasar
Kompetensi dengan “Ya”
Kompeten Kerjakan
Ya Tidak
1. Membuat 1. Menetapkan pemakaian Tes Formatif
dokumen dan struktur dokumen 1
dengan HTML 2. Membuat struktur
sesuai Tes Formatif
dokumen dengan bahasa
spesifikasi 1
HTML
3. Memformat dokumen dan Tes Formatif
menambahkan obyek 1
2. Menerapkan 1. Menjelaskan konsep dasar
Tes Formatif
dasar-dasar dan teknologi dari
2
pembuatan web Webpage.
statis tingkat 2. Mempersiapkan pekerjaan Tes Formatif
dasar pembuatan web 2
3. Melakukan pembuatan Tes Formatif
dokumen web baru 2
4. Menampilkan Web dalam Tes Formatif
browser 2

Apabila anda menjawab TI DAK pada salah satu pernyataan di atas, maka pelajarilah
modul ini.

i
 BAB I I
PEMELAJARAN

A. Rencana Pemelajaran

Kompetensi : Membuat Dokumen HTML sesuai dengan spesifikasi

Tanda
Tempat Alasan
Jenis Kegiatan Tanggal Waktu Tangan
Belajar Perubahan
Guru
Menetapkan pemakaian dan
struktur dokumen

Membuat struktur dokumen

dengan bahasa HTML

Membuat dokumen dengan

menambahkan objek

B. Kegiatan Belajar

1. Kegiatan Belajar 1:
Menetapkan pemakaian dan struktur dokumen

a. Tujuan Kegiatan Pemelajaran

1. Kegunaan dari dokumen dan audiens diidentifikasi
2. Bahasa HTML yang tepat yang akan digunakan pada dokumen dan audiens
ditetapkan
3. Struktur dasar dokumen sesuai persyaratan pengguna dirancang
4. Site map dokumen dikem-bangkan dan dikonfirmasikan dengan klien

b. Uraian Materi 1
1. HTML ( Hypertext Markup Language)
HTML atau Hypertext Marksup Language merupakan salah satu format yang
digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman
web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan
disebut sebagai Markup Language yakni bahasa yang mengandung tanda
(tag) tertentu yang digunakan untuk mengatur format tampilan suatu
dokumen.

ii
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan
untuk mentransfer data atau document yang berformat HTML dari web
server ke browser (I nternet Explorer, Netscape Navigator, NeoPlanet, dll).
Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan
melihat halaman web.
Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks
editor biasa. Namun sekarang ini di pasaran terdapat banyak sekali HTML
authoring (software yang digunakan untuk membuat atau mendesain
halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage
sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak
akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun
software-software tersebut semakin menawarkan kemudahan dalam
membuat halaman web, tetapi biasanya seseorang masih perlu untuk
mengedit halaman web tersebut secara manual. Terutama untuk halaman
web yang sangat komplek.
Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari
desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa
menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang
paling mudah adalah menggunakan Notepad. Setelah anda memahami betul
semua tag-tag dasar html, diakhir nanti kita akan belajar membuat halaman
web dengan menggunakan web tool.

Struktur Dasar HTML

Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara

tag kontainer. Yaitu diawali dengan < namatag> dan diakhiri dengan
< / namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi
elemen-elemen atau tag sebagai berikut:

< ht m l>
< head>
< t it le> Judul Halam an Web< / t it le>

< / head>

< body >

I SI Halam an WEB

< / body >

< / ht m l>

Keterangan:

< html> .. < / html> Mendefinisikan bahwa teks yang berada diantara
kedua tag tersebut adalah file HTML.

iii
< head> .. < / head> Sebagai informasi page header. Di dalam tag ini kita
bisa meletakkan tag-tag TITLE, BASE, I SI NDEX,
LI NK, SCRI PT, STYLE & META.

< title> .. < / title> Sebagai titel atau judul halaman/ form. Kalimat yang
terletak di dalam tag ini akan muncul pada bagian
paling atas browser Anda (pada title bar).

< body> .. < / body> Mendefinisikan teks beserta formatnya yang hendak
ditampilkan sebagai isi halaman web. Di dalam tag ini
bisa diletakkan berbagai page attribute seperti
bgcolor, background, text, link, vlink, alink,
leftmargin dan topmargin.
Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML
sederhana. I kuti langkah-langkah berikut ini:

1. Buat direktori dengan nama latihan di drive C:. Dan selanjutnya dalam
direktori ini kita akan menyimpan semua file-file latihan kita.
2. Buka Browser, misalnya I nternet Explorer atau Netscape Navigator.
3. Buka program aplikasi teks editor misalnya dalam latihan ini adalah
Notepad.
4. Mulai baris paling atas, tuliskan:
< ht m l>
< head>
< t it le> Lat ihan 1< / t it le>
< / head>
< body>
I ni adalah halam an w eb per t am a say a.
< / body>
< / ht m l>

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

iv
6. Selanjutnya pilih direktori latihan yang tadi kita buat.
7. Pada box File name, isikan nama filenya dengan Latihan1.html
8. Pada drop down list di Save as type, pilih All Files. Sehingga
tampilannya seperti berikut:

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

Untuk menjalankan kode-kode tersebut, silahkan buka browser seperti

I nternet Explorer, Mozila Firefox.

1. Klik menu File  Open

v
2. Setelah jendela Open terbuka, klik tombol Browse

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

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

vi
 Catatan:

 Semua dokumen HTML mempunyai ekstensi .html (atau .htm)

 Semua halaman web (homepage) mempunyai file Latihan1.html. File
Latihan1.html secara otomatis akan dipanggil ketika alamat sebuah
domain atau direktori tempat menyimpan file tersebut di buka di
browser.

Kode Warna

Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi

RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai
heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan
banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya
untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut:

Red Green Blue

FF FF 00

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

Warna Heksadesimal
White # FFFFFF
Black # 000000
Red # FF0000
Green # 00FF00
Blue # 0000FF
Magenta # FF00FF

vii
 Cyan # 00FFFF
Yellow # FFFF00

Anda dapat juga membuat campuran sendiri warna-warna berdasarkan

emajinasi anda. Yang penting anda mengikuti aturan diatas.

2. Pengaturan Halaman Web dan Teks

Untuk mendapatkan halaman web yang baik anda harus melakukan

pengaturan terhadap halaman web dan teks-teks didalamnya seperti
mengatur warna latar belakang halaman, memilih jenis dan ukuran huruf,
perataan, warna teks, menambahkan gambar dll. Tag-tag di bawah ini yang
biasa digunakan dalam pengaturan halaman web dan teks:

a. < body> , digunakan mendefinisikan teks beserta formatnya yang

hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa
diletakkan berbagai page attribute seperti bgcolor, background, text,
link, vlink, alink, leftmargin dan topmargin.

 Background = digunakan untuk mengatur latar belakang dengan

gambar/ image.
 Bgcolor = digunakan untuk mengatur warna latar belakang
dokumen, dengan warna putih sebagai default-nya.
 Teks = digunakan untuk mengatur warna teks dokumen,
dengan warna hitam sebagai warna default.
 Link = Untuk mengatur warna link dokumen dengan
warna biru sebagai warna default
 Vlink = Untuk mengatur warna visited link dokumen
dengan default ungu
 Alink = digunakan untuk mengatur warna active link
dokumen dengan default merah.

b. Heading: < Hn> ..< / Hn> Digunakan untuk mengatur ukuran huruf
pada header. "n" mempunyai nilai antara 1 - 6 atau antara < H1> sampai
< H6> , dengan < H1> merupakan ukuran terbesar dan < H6> merupakan
ukuran terkecil.

contoh1_1.html

< html>
< head>
< t it le> : : : Mem buat Heading Dok u m en HTML: : : < / t it le>

viii
 < / head>
< body bgcolor= # 0000 00 t ex t = # FFFFFF>
< h1> Headng Tingk at 1 < / h1>
< h2> Headng Tingk at 2 < / h2>
< h3> Headng Tingk at 3 < / h3>
< h4> Headng Tingk at 4 < / h4>
< h5> Headng Tingk at 5 < / h5>
< h6> Headng Tingk at 6 < / h6>
< / body >
< / ht m l>

Hasilnya akan terlihat seperti:

c. Paragraph Baru: < P> Digunakan untuk pindah alinea atau membuat
paragraf baru. Tag ini bisa diberi akhiran < / P> tapi juga bisa tidak diberi.
Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah,
kanan dan kiri-kanan, yaitu dengan attribut ALI GN. Attribut align
mempunyai nilai: LEFT, RI GHT, CENTER dan JUSTIFY.

d. Line Break: < BR> Digunakan untuk pindah ke baris baru.

ix
e. No Line Break: < NOBR> Bila digunakan tag ini maka teks yang
panjang tidak secara otomatis pindah baris bawahnya bila baris pertama
sudah terlalu panjang.

f. Font < FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag
FONT mempunyai attribut, yaitu: SI ZE, FACE, COLOR.

 SI ZE: Digunakan untuk mengatur ukuran font. Ukuran font yang

digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil
dan 7 merupakan ukuran terbesar.

 FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa
memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh
koma. Bila terdapat spasi yang terletak pada nama font maka harus
digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus
dipertimbangkan apakah font yang kita gunakan pada halaman web
kita nantinya akan terdapat pada komputer pengguna yang lain
(pengakses web kita). Pendeknya kita tidak usah menggunakan font-
font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila
Anda ingin menggunakan font yang sedikit "aneh" Anda bisa
menggunakan graphic.

 COLOR: Digunakan untuk mengatur warna font. Didefinisikan

dengan menggunakan nilai RGB/ HEX atau bisa juga langsung
menggunakan nama warna (red misalnya).

contoh1_2.html

< ht m l>
< head>
< t it le> : : : Mengat ur Uk ur an, Jenis dan Warna Font : : : < / t it le>
< / head>
< body >
< font size= 1 Face= arial color = red> Uk uran font 1< / fon t > < b r>
< font size= 2 Face= arial color = green> Uk uran font 2 < / font > < br>
< font size= 3 Face= arial color = blue> Uk uran font 3 < / font > < br>
< font size= 4 Face= v erdana color = red> Uk uran font 4 < / font > < br>
< font size= 5 Face= v erdana color = blue> Uk uran font 5 < / font > < br>
< font size= 6 Face= t ahom a color= green> Uk uran font 6 < / font > < br>
< font size= 7 Face= t ahom a color= red> Uk u ran font 7 < / font > < br>
< / body >
< / ht m l>

Hasilnya akan terlihat

x
 Contoh lainnya:
< font size= 2 face= "t im es_new_r om an " color = "# 0 066cc">

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

text". Attribut sama dengan attribut FONT. Tag FONT akan
mengoverwrite setting pada BASEFONT.
Contoh:
< basefont size= 2 face= "arial,helv et ica" color= "# ff0000" >

Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang
berhubungan dengan pengaturan teks, yaitu:

Perhatian: Semua tag di bawah ini membutuhkan tap penutup.

< B> Bold text

<I> I talic text
< U> Underscore
< TT> Typewriter
< S> Strikeout - draws a line through the text
< PRE> Preformatted Text < DFN> Definition
< BLI NK> Text berkedip (lebih baik jangan digunakan)
< STRONG> Strong
< ADDRESS>
I talic
< CI TE> Digunakan untuk quoting text

xi
 < CODE> Monospaced font (digunakan bila Anda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML
Anda)
< SAMP> Monospaced font (digunakan bila Anda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML
Anda)
< KBD> Monospaced font (digunakan bila Anda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML
Anda)
< BI G> Ukuran teks akan lebih besar satu ukuran
< SMALL> Ukuran teks akan lebih kecil satu ukuran
< SUP> Membuat tekssuperscript
< SUB> membuat tekssub script
< ABBREV> Abbreviations
< ACRONYM> Untuk akronim
< PERSON> Digunakan untuk indexing
< Q> Membuat short inline quotation
< VAR> Membuat variable name, selalu dalam italics.

h. < HR> , digunakan untuk membuat garis horisontal. Tag ini mempunyai
atribut SI ZE, WI DTH, ALI GN dan NOSHADE.
Atribut SI ZE digunakan untuk menentukan panjang garis dalam satuan
pixel. Atribut WI DTH digunakan untuk menentukan ketebalan garis.
Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan
tanpa bayang-bayang 3-D.

contoh1_3.html
< ht m l>
< head>
< t it le> : : : Mem buat Garis Horisont al: : : < / t it le>
< / head>
< body bgcolor= # fffccc>
< font size= 1 Face= t ahom a color= blue> Ahlan Wa Sahlan< / f ont >
< hr size= 1 widt h= 15 0 align= left >
< h1> < cen t er> ww w.sm k n1- k ot abek asi.com < / h 1>
< hr size= 5 align= cent er noshade>
< / body >
< / ht m l>

Hasilnya tampak sebagai berikut:

xii
 i. LI STS

Daftar/ list adalah merupakan kumpulan teks yang disusun sedemikian

rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga
berupa tanda-tanda khusus/ symbol.
Terdapat tiga tipe list yang dapat digunakan, yaitu:
 Unordered Lists: < UL> Untuk membuat daftar item dengan tanda
bullet (tidak bernomor). List entries didefinisikan dengan tag < LI> .
Pada jenis ini tidak memerlukan pengurutan data.
Bentuk item tanda pada Unordered List dapat diubah dengan
menggunakan atribut TYPE kedalam tag < UL> dengan nilai
“circle” untuk bentuk lingkaran tengahnya putih, “square” untuk
bentuk kotak padat hitam dan “disc” bentuk lingkaran pada warna
hitam.

contoh1_4.html

< ht m l>
< head>
< t it le> : : : Mem buat Undordered List : : : < / t it le>
< / head>
< body >
< b> < font size= 3 Face= t ah om a color= blue>
Jurusan TI K y ang ada di SMKN 1 Kot a Bek asi ada 3 Program St udi:
< / b>
< hr size= 2 widt h= 15 0 align= left >

xiii
 < ul t y pe= circle>
< li> Mult im edia
< / ul>
< ul t y pe= square>
< li> RPL
< / ul>
< ul t y pe= disc>
< li> TKJ
< / ul>
< / font >
< / body >
< / ht m l>

Hasil dari kode di atas adalah:

 Ordered Lists: < OL> Juga digunakan untuk membuat daftar item
bernomor, dengan tiap item dapat menggunakan angka arab atau
romawi. List entries juga didefinisikan dengan < LI> tag. Atribut
yang ada pada Ordered List adalah TYPE dan START.

contoh1_5.html

< ht m l>
< head>
< t it le> : : : Mem buat Ordered List : : : < / t it le>
< / head>
< body >

xiv
 < b> < font size= 2 Face= t ah om a color= black >
SMKN 1 Kot a Bek asi m em ilik i 3 Jurusan: < / b>
< hr size= 2 widt h= 15 0 align= left >
< ol t y pe= 1>
< li> TI K
< li> Mesin
< li> Ot om ot if
< / ol>
< hr size= 3 widt h= 50 0>
< b> < font size= 2 Face= t ah om a color= black >
Jurusan TI K m em ilik i 4 LAB Kom put er : < / b>
< ol st art = 4>
< li> LAB. Mult im edia
< li> LAB. RPL
< li> LAB. TKJ
< / ol>
< / font >
< / body >
< / ht m l>

Hasil dari kode di atas adalah:

Untuk attribut TYPE, dapat juga menggunakan:

1- Default numbers, 1, 2, 3, etc.

xv
 A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I - Romawi huruf besar. I , I I, II I , etc.
i- Romawi huruf kecil , i, ii, iii, etc.

 Definition Lists: < DL> , digunakan untuk menjelaskan istilah-

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

contoh1_6.html
< ht m l>
< head>
< t it le> : : : Mem buat Definit ion List : : : < / t it le>
< / head>
< body >
< dl>
< dt > Bagian Pert am a.
< dd> I si dari Bagian Pert am a.
< dt > Bagian Kedua.
< dd> I si dari Bagian Kedua
< / dl>
< / body >
< / ht m l>

Hasil dari kode di atas adalah:

 Preformatted Text: < PRE> . Digunakan untuk mengatur format

tampilan agar sesuai dengan aslinya.

xvi
 contoh1_7.html
< ht m l>
< head>
< t it le> Aplik asi dari &lt ; pre&gt ; t ag< / t it le>
< / head>
< body >
< h3> t anpa m enam bahk an pre< / h3>
Berak it -
rak it k e hulu
berenang- renag
k et epian, bersak it - sak it
dahulu, bersenag- senang k em udian
< p> < h3> dengan m enggunak an pre< / h3>
< pre>
Berak it -
rak it k e hulu
berenang- renag
k et epian, bersak it - sak it
dahulu, bersenag- senang k em udian
< / pre>
< / body >
< / ht m l>

Hasil dari kode di atas adalah:

 Extended Quotations: < BLOCKQUOTE> , digunakan untuk

membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.

contoh1_8.html
< ht m l>
< head> < t it le> : : : Mem buat Block quot e: : : < / t it le> < / head >

xvii
 < body >
< h3> Pengat uran Tek s< / h3>
< block qout e>
Unt uk m engat ur halam an w eb y ang baik , pengat uran t ek s dapat dilak uk an
dengan m enggunak an block qou t e .
< / block qout e>
< / body >
< / ht m l>

Hasilnya tampak seperti bnerikut ini:

3. Hypertext Link

Digunakan untuk membuat link/ penghubung antara suatu halaman dengan

halaman lain, ke URL lain, juga digunakan dalam satu halaman untuk
berpindah ke sub judul yang lain atau ke lokasi tertentu dalam satu halaman
yang sama.
Sintak tag link adalah sebagai berikut:
< a h re f= u r l_ t u j u a n > n a m a _ lin k < / a >

url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan
nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link
atau tombol penghubung. Tulisan yang terletak antara < A> dan < / A>
akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag
< body> . Adapun macam-macam link adalah sebagai berikut:

Link ke Dokumen Lain

Untuk membuat link/ penghubung dengan target ke dokumen/ halaman yang

berbeda, anda harus membuat dokumen yang dituju/ target dan disimpan
dalam direktori tertentu, baik pada direktori yang sama atau berbeda dengan
dokumen yang aktif sekarang. Untuk mencoba membuat link, silahkan buat
script berikut dan beri nama dengan link_dokumen_lain.html.
< ht m l>
< head>

xviii
 < t it le> : : : Lat ihan Mem buat Link Ke Dok um en Lain : : : < / t it le>
< / head>
< body bgcolor= # ffffd0>
< font face= arial size= 6 color= t ah om a>
< b> .: : : SMKN 1 Kot a Bek asi: : : . < br>
< font face= arial size= 4 color= blue>
< i> Suk ses it u didapat dari usaha dan k erj a k eras sert a doa< / i>
< font face= arial size= 1 color= t ah om a>
< hr size= 2 widt h= 10 0 align= left color= blue>
| < a href= link _dok um en_lain.ht m l> H o m e< / a>
| < a href= proli.ht m l> Program Keahlian< / a>
| < a href= ek st ra.ht m l> Ek st ra Kurik uler < / a> |
< hr> < p> < fon t face= v erdana size= 4 color= orange>
Ahlan wa Sahlan di web k am i ...
< / body >
< / ht m l>

Buat lagi file berikut dan beri nama dengan proli.html

< ht m l>
< head>
< t it le> : : : Lat ihan Mem buat Link Ke Dok um en Lain : : : < / t it le>
< / head>
< body bgcolor= # ffffd0>
< font face= arial size= 6 color= t ah om a>
< b> .: : : SMKN 1 Kot a Bek asi: : : . < br>
< font face= arial size= 4 color= blue>
< i> Suk ses it u didapat dari usaha dan k erj a k eras sert a doa< / i>
< font face= arial size= 1 color= t ah om a>
< hr size= 2 widt h= 10 0 align= left color= blue>
| < a href= link _dok um en_lain.ht m l> H o m e< / a>
| < a href= proli.ht m l> Program Keahlian< / a>
| < a href= ek st ra.ht m l> Ek st ra Kurik uler < / a> |
< hr> < p> < fon t face= v erdana size= 4 color= br own>
Program Keahlian< br >
< font size= 1 >
< ul t y pe= circle> < li> Rek ay asa Perangk at Lunak
< li> Mult im edia
< li> Tek nik Kom put er dan Jaringan
< li> Tek nik Mek anik Ot om ot if
< li> Tek nik Bodi Ot om ot if
< li> Tek nik Pem esinan
< li> Tek nik Las< / ul>
< / body >
< / ht m l>

Untuk melengkapi latihan kali ini, buat juga file berikut dan beri nama
ekstra.html
< ht m l>

xix
 < head>
< t it le> : : : Lat ihan Mem buat Link Ke Dok um en Lain : : : < / t it le>
< / head>
< body bgcolor= # ffffd0>
< font face= arial size= 6 color= t ah om a>
< b> .: : : SMKN 1 Kot a Bek asi: : : . < br>
< font face= arial size= 4 color= blue>
< i> Suk ses it u didapat dari usaha dan k erj a k eras sert a doa< / i>
< font face= arial size= 1 color= t ah om a>
< hr size= 2 widt h= 10 0 align= left color= blue>
| < a href= link _dok um en_lain.ht m l> H o m e< / a>
| < a href= proli.ht m l> Program Keahlian< / a>
| < a href= ek st ra.ht m l> Ek st ra Kurik uler < / a> |
< hr> < p> < fon t face= v erdana size= 4 color= orange>
Ek st ra Kurik uler< br>
< font size= 1 >
< ul t y pe= circle>
< li> Pram uk a
< li> Rohis
< li> PMR
< li> Pask ibra
< li> Box er
< / ul>
< / body >
< / ht m l>

Hasil dari kode-kode diatas adalah sebagai berikut:

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

xx
 Link ke bagian tertentu dalam dokumen yang sama

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

atau dapat ditulis lengkap:

< a href= ” belaj ar_php.ht m l# php” > Bab 1 < / a>

dan untuk nama anchornya:

< a nam e= ” php” > Ada apa dengan PHP?< / a>

Link ke alamat URL atau Website

Untuk membuat link ke alamat URL adalah dengan menambahkan:

http:/ / nama_URL.

Contoh:

< a href= ” ht t p: / / w ww.dik t i.org” > ww w.dik t i.org< / a>

< a href= ” ht t p: / / w ww.sm k n1- k bk s.com ” > w ww.sm k n1- k bk s. com < / a>

Link ke Alamat Email

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

Untuk membuat link ke alamat email hanya menambahkan atribut

mailto:alamat_email ke dalam tag < A HREF>

Misalnya:

< A HREF= "m ailt o: sm kn1- kbks.yahoo.com "> Kirim em ail< / a>

Link File yang akan didow nload

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

tersebut. Format penulisannya adalah < a href= nama_file>

xxii
 Misal:

< a href= ” ant ivirus.zip”> Download ant i virus< / a>

< a href= ” lat ihan.doc” > Download lat ihan Htm l< / a>
< a href= ” m ysql.exe” > Download MYSQL< / a>

4. Menyisipkan Gambar/ I mages

Digunakan untuk menampilkan image atau animasi gif pada halaman web
Anda. Tag yang digunakan adalah

< im g src= ” nam a file gam bar” >

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

contoh1_9.html
< ht m l>
< head>
< t it le> : : : m enam pilk an im ages: : : < / t it le>
< / head>
< body >
< b> < font size= 2 Face= t ah om a color= black >
< im g src= "gam bar1. j pg" alt = " aplik asi 3dm ak s">
< im g src= "ict .j pg" hspace= 10 v space= 5 widt h= 200 height = 254
align= "cent er " border= 2>
< / font >
< / body >
< / ht m l>

Tampilan dari contoh diatas adalah sebagai berikut:

xxiii
 5. Layout Halaman Web dengan Tabel ( Table)

Table merupakan cara untuk menampilkan informasi dalam halaman web

dengan bentuk kolom dan baris.
Membuat Tabel

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

 < TABLE>
Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut:
 align - perataan: rata kiri (left), tengah (center) atau kanan (right).

xxiv
  valign – mengatur bentuk perataan secara vertikal
 bgcolor – mengatur warna latar belakang (background) dari tabel.
 background – menentukan gambar yang digunakan sebagai
background tabel
 color – Untuk mengatur warna suatu sel dalam tabel
 border – menentukan ukuran border tabel (dalam pixel).
 row span – menggabungkan beberapa baris
 colspan – menggabungkan beberapa kolom
 cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
 cellspacing – mengatur spasi/jarak antar cell (dalam pixel).
 w idth – menentukan lebar tabel dalam pixel atau percent.
 height – Menentukan tinggi tabel

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

 < TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya
adalah:
 align – untuk menentukan perataan kolom
 background – untuk menentukan image yang digunakan sebagai latar
belakang dari kolom.
 bgcolor – untuk menentukan warna latar belakang
 colspan - lihat gambar contoh
 height – untuk mengatur ukuran tinggi cell dalam pixels.
 now rap – untuk membuat supaya isi dari kolom tetap berada pada
satu baris.
 row span - lihat gambar contoh
 valign – untuk mengatur perataan vertikal: top, middle atau bottom.
 w idth – untuk menentukan lebar kolom dalam pixel atau percen.

contoh1_10.html
< ht m l>
< head>
< t it le> : : : Pem buat an Table: : : < / t it le>
< / head>
< body >

xxv
 < font face= arial size= 2 color= t ah om a>
< t able>
< t r>
< t d> I ni cont oh t abel sederhana t anpa border< / t d>
< / t r>
< / t able>
< p>
< t able border= 1>
< t r>
< t d> I ni cont oh t abel sederhana dengan border< / t d>
< / t r>
< / t able>
< p>
< t able border= 1>
< t r>
< t d> No.< / t d>
< t d> Nam a< / t d>
< t d> Alam at < / t d >
< / t r>
< t r>
< t d> 1.< / t d>
< t d> Wahy u< / t d>
< t d> Bek asi< / t d>
< / t r>
< t r>
< t d> 3.< / t d>
< t d> Lesm ono< / t d>
< t d> Kranj i< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya adalah sebagai berikut:

xxvi
 contoh1_11.html
< ht m l>
< head>
< t it le> .: : : Belaj ar Mem buat Tabel: : : . < / t it le>
< / head>
< body >
< t able border= "1" cellpadding= "0 " cellspacing= "0" border color= "# ffffff"
widt h= "10 0% " height = "11 5">
< t r>
< t d widt h= "100% " height = "11 5" bordercolor= " # C0C0C0"
bgcolor= " # BDCED9 "> &nbsp; < / t d>
< / t r>
< / t able>
< font size= "1"> &nbsp; < / font >
< t able border= "0" cellpadding= "0 " cellspacing= "0" border color= "# 11111 1"
widt h= "10 0% " height = "43 1">
< t r>
< t d widt h= "23% " height = "307 " v align= "t op" >
< t able border= "1" cellpadding= "0 " cellspacing= "0"
bordercolor = "# BDCED9" widt h = "94% " height = "245 ">
< t r>
< t d widt h= "100% " height = "24 4"
bordercolor = "# C0C0C0 " bgcolor= "# BDCED9"> &nbsp; < / t d>
< / t r>
< / t able>
< font size= "1"> &nbsp; < / font >
< t able border= "1" cellpadding= "0 " cellspacing= "0"
bordercolor = "# BDCED9" widt h = "94% " height = "152 ">
< t r>
< t d widt h= "100% " height = "19 " bgcolor= "# BDCED9"
bordercolor = "# C0C0C0 "> &nbsp; < / t d>
< / t r>
< t r>
< t d widt h= "100% " height = "13 2" bordercolor= " # C0C0C0" >
&nbsp; < / t d>
< / t r>
< / t able>
< / t d>
< t d widt h= "77% " height = "307 " v align= "t op" >
< t able border= "1" cellpadding= "0 " cellspacing= "0" border color= "# ffffff"
widt h= "97% " height = "411 ">
< t r>
< t d widt h= "64% " height = "109 "> &nbsp; < / t d>
< t d widt h= "36% " height = "109 "> &nbsp; < / t d>
< / t r>
< t r>
< t d widt h= "64% " height = "301 " rowspan = "2" > &nbsp; < / t d>
< t d widt h= "36% " height = "24" bgcolor= " # BDCED9 "
bordercolor = "# C0C0C0 ">
< font size= "1"> &nbsp; < / font > < / t d>

xxvii
 < / t r>

< t r>
< t d widt h= "36% " height = "277 " bordercolor= "# C0C0 C0"> &nbsp;
< / t d>
< / t r>
< / t able>
< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya adalah:

xxviii
 Menambahkan Judul Tabel

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

xxix
 diletakkan dibawah suatu tabel dengan menambahkan atribut
ALI GN= BOTTOM pada elemen caption tersebut.
Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen
TABLE HEADER < TH> . Judul kolom terletak pada sel disebelah kiri atau
kolom pertama suatu tabel, sedangkan judul baris terletak pada baris
pertama suatu tabel. Judul baris atau judul kolom akan tercetak tebal.

contoh1_12.html
< ht m l>
< head>
< t it le> : : : Pem buat an Judul Table: : : < / t it le>
< / head>
< body >
< font face= arial size= 2 color= m aroon >
< t able border= 1>
< capt ion align= t op> < b> < u > Daft ar Alam at < / u> < / b> < / capt ion>
< t r>
< t h widt h= 40 > No.< / t d>
< t h widt h= 150 > Nam a< / t d>
< t h widt h= 200 > Alam at < / t d>
< / t r>
< t r>
< t d align= cent er> 1. < / t d>
< t d> Wahy u< / t d>
< t d> Bek asi< / t d>
< / t r>
< t r>
< t d align= cent er> 2. < / t d>
< t d> Lesm ono< / t d>
< t d> Kranj i< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya akan tampak sebagai berikut:

xxx
 contoh1_13.html
< ht m l>
< head>
< t it le> : : : Pem buat an Judul Table: : : < / t it le>
< / head>
< body >
< font face= arial size= 2 color= m aroon >
< t able border= 1>
< capt ion align= bot t om > < b> < u> Daft ar Alam at < / u> < / b > < / capt ion>
< t r>
< t h widt h= 60 align= left > No.< / t d>
< t d widt h= 150> 1.< / t d>
< t d widt h= 200> 2.< / t d>
< / t r>
< t r>
< t h align= left > Nam a< / t d>
< t d> Wahy u< / t d>
< t d> Lesm ono< / t d>
< / t r>
< t r>
< t h align= left > Alam at < / t d>
< t d> Bek asi< / t d>
< t d> Kranj i< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya akan tampak seperti berikut:

Mengatur Lebar dan Tinggi Suatu Tabel

Lebar tabel diatur dengan menggunakan atribut WI DTH dan untuk mengatur
tinggi table dengan atribut HEI GHT. Jika atribut WI DTH dan HEI GHT
digunakan dalam elemen TABLE nilainya menunjukkan lebar dan tinggi tabel

xxxi
 terhadap BROWSER sedangkan jika digunakan pada elemen TH dan TD,
nilainya merupakan lebar dan tinggi dari suatu tabel. Nilai atribut
mengunakan ukuran % (max 100%) dan ukuran pixel.

contoh1_14.html
< ht m l>
< head>
< t it le> : : : Mengat ur Lebar dan Tinggi Tabel: : : < / t it le>
< / head>
< body >
< font face= arial size= 2 color= t ah om a>
< t able border= 1 widt h= 100% >
< capt ion align= t op> < b> < u > Daft ar Alam at < / u> < / b> < / capt ion>
< t r>
< t h widt h= 40 > No.< / t d>
< t h widt h= 150 > Nam a< / t d>
< t h widt h= 200 > Alam at < / t d>
< / t r>
< t r>
< t d align= cent er> 1. < / t d>
< t d height = 50> Wahy u< / t d>
< t d height = 50> Bek asi< / t d>
< / t r>
< t r>
< t d align= cent er> 2. < / t d>
< t d height = 30> Lesm on o< / t d>
< t d height = 30> Kran j i< / t d >
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya tampak sebagai berikut:

Perataan dalam Tabel

xxxii
 Perataan dalam tabel dikenal dua macam, yaitu perataan secara horizontal
dengan atribut ALI GN dan perataan vertikal dengan atribut VALI GN, serta
untuk membuat suatu tabel posisinya menjadi ditengah-tengah layar browser.

contoh1_15.html
< ht m l>
< head>
< t it le> : : : Mem buat Perat aan Table: : : < / t it le>
< / head>
< body >
< font face= arial size= 2 color= t ah om a>
< t able border= 1 align= cent er>
< capt ion align= t op>
< b> Daft ar Alam at < / b>
< hr widt h= 11 0>
< / capt ion>
< t r>
< t h widt h= 40 > No.< / t d>
< t h widt h= 150 > Nam a< / t d>
< t h widt h= 200 > Alam at < / t d>
< / t r>
< t r>
< t d align= cent er> 1. < / t d>
< t d align= cent er v align= m iddle height = 50 > Wahy u< / t d>
< t d align= right v align= t op height = 50> Bek asi< / t d>
< / t r>
< t r>
< t d align= cent er> 2. < / t d>
< t d align= left v align= baseline height = 50> Lesm ono< / t d>
< t d align= left v align= bot t om height = 50 > Kran j i< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya seperti gambar berikut:

Membuat Warna Pada Tabel

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

Atribut Fungsi
BORDERCOLOR Mengubah warna keseluruhan border
BORDERCOLORLI GHT Mengubah warna border bagian atas dan kiri
BORDERCOLORDARK Mengubah warna border bagian bawah dan kanan

Penggabungan Baris/ Kolom

Untuk menggabungkan baris/ kolom (merge) digunakan atribut COLSPAN dan

ROWSPAN. COLSPAN digunakan untuk menggabung-kan beberapa kolom
menjadi 1 sedangan ROWSPAN menggabungkan beberapa baris menjadi 1.

Cellpadding Dan Cellspacing

CELLPADDI NG digunakan untuk mengatur spasi antara border dengan

tulisan, sedangkan CELLSPACI NG digunakan untuk mengatur spasi antar dua
buah sel.

contoh1_16.html
< ht m l>
< head>
< t it le> : : : Cont oh Merge, Cell dan Pedd: : : < / t it le>
< / head>
< body >
< t able border= 2 align= cent er bordercolor= # 0000 00 bgcolor= # FFFFFF cellspacing= 4
cellpadding= 8 widt h= 100% >
< font face= arial size= 2 color= black >
< t r>
< t d bgcolor= # EEEEEE colspan = 2 align= cent er > Kelas< / t d>
< t d bgcolor= # EEEEEE align= cent er rowspan= 2 > Ket erangan < / t d>
< / t r>
< t r>
< t d widt h= 200 bgcolor= # DFF9F9 align= cent er > I < / t d>
< t d widt h= 200 bgcolor= # DFF9F9 align= cent er > I I < / t d>
< / t r>
< t r>
< t d> Ali< / t d>
< t d> Um ar < / t d>
< t d align= cent er> Lunas< / t d>
< / t r>
< / t able>
< / body >
< / head>
< / ht m l>

Hasilnya adalah sebagai berikut:

xxxiv
 6. Membuat Frames

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

Aturan penggunaan atribut ROWS dan COLS pada frameset adalah:

< fram eset row s= ” t inggi_baris,t inggi_baris,…” >

< fram eset cols= ” lebar_ kolom , lebar_ kolom ,…” >

Atribut-atribut yang digunakan dalam FRAME adalah:

Atribut Fungsi
FRAMESET COLS Membuat frame vertikal dengan lebar kolom
tertentu
FRAMESET ROWS Membuat frame horizontal dengan tinggi baris
tertentu
FRAME SRC Memasukkan dokumen HTML ke dalam FRAME
NOFRAME Memasukkan body teks untuk browser yang

xxxv
 tidak dapat menampilkan frame

Model-model frame dan contoh pembuatannya:

1
< FRAMESET cols= "* ,140">

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

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

2
< FRAMESET cols= "100,* ">

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

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

3
< FRAMESET rows= "100,* ">
< FRAME SRC= "homepage.htm" NAME= "Frame1">

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

< / FRAMESET>

4
< FRAMESET rows= "* ,60">

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

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

5
< FRAMESET rows= "* ,60">

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

< FRAMESET cols= "50%,50% ">
< FRAME SRC= "menu.htm" NAME= "Frame2">
< FRAME SRC= "menu2.htm" NAME= "Frame3">
< / FRAMESET>
< / FRAMESET>

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

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

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

xxxvi
 7
< FRAMESET cols= "50%,50% ">

7 < FRAMESET rows= "50%,50%">

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

8
< FRAMESET rows= "15%,70%,15% ">
< FRAME SRC= "homepage.htm" NAME= "Frame1">
< FRAMESET cols= "15%,70%,15% ">

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

< FRAME SRC= "menu2.htm" NAME= "Frame3">
< FRAME SRC= "menu3.htm" NAME= "Frame4">
< / FRAMESET>
< FRAME SRC= "homepage.htm" NAME= "BIG">
< / FRAMESET>
< / FRAMESET>

Latihan Menggunakan FRAME

Buat file baru dengan nama latihan6.html, header.html, kiri.html, kanan.html,

bab1.html dan bab2.html dengan isi masing-masing sebagai berikut:

File latihan6.html

< ht m l>
< head>
< t it le> .: : Lat ihan Mem buat Fram e: : .< / t it le>
< / head>
< fram eset row s= 20% ,* fram espacing= "0" border= " 0" fram eborder= "0">
< fram e nam e= at as src= header.ht m l scrolling = "no" noresize>
< fram eset cols= 25% ,* fram espacing= "0" border= " 0" fram eborder= "0">
< fram e nam e= k iri sr c= k iri. ht m l scrolling= "no" noresize>
< fram e nam e= k anan src= k anan.ht m l scrolling= "n o" noresize>
< / fram eset >
< / fram eset >
< / ht m l>

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

xxxvii
 < frameset cols= 30%,* > mempunyai arti bahwa frame bawah dibagi lagi
menjadi dua kolom dengan ukuran 30% untuk frame kiri dan sisanya untuk
frame sebelah kanan.
Kalau file tersebut dijalankan hasilnya sebagai berikut:

Tampilan tersebut dikarenakan file-file yang dibutuhkan oleh frame belum

dibuat atau tidak ditemukan. Oleh karena itu lengkapi file-file sebagai berikut:

File h e a d e r.h t m l

< ht m l>
< head>
< t it le> .: : Lat ihan Mem buat Fram e: : .< / t it le>
< / head>
< body bgcolor= # EEEEEE>
< font face= arial size= 6 color= t ah om a>
< b> .: : : SMKN 1 Kot a Bek asi: : : . < / b> < br>
< font face= arial size= 4 color= orange>
< i> Suk ses it u didapat dari usaha dan k erj a k eras sert a doa< / i>
< / body >
< / ht m l>

xxxviii
 File k ir i.h t m l

< ht m l>
< head>
< t it le> : : : Lat ihan Mem buat Fram e: : : < / t it le>
< / head>
< body bgcolor= # ffffff>
< t able border= 1 widt h= "22 8" height = " 28" cellspacing= 0>
< t r>
< t d widt h= "218 " height = "22 " bordercolor= " # 8000 80" bgcolor= "# BDCED9" >
< b> < font face= " Tahom a" size= "2" > &nbsp; &nbsp; M e n u< / font > < / b>
< / t d>
< / t r>
< t r>
< t d widt h= "218 " height = "22 " bordercolor= " # 8000 80">
< b> < font face= " Tahom a" size= "2" > &nbsp; &nbsp;
< a href= k anan.ht m l t arget = k anan> H o m e< / a> < / font > < / b> < / t d>
< / t r>
< t r>
< t d widt h= "218 " height = "22 " bordercolor= " # 8000 80">
< b> < font face= " Tahom a" size= "2" >
&nbsp; &nbsp; < a href= proli.ht m l t arget = k anan> Program Keahlian< / a>
< / font > < / b> < / t d>
< / t r>
< t r>
< t d widt h= "218 " height = "22 " bordercolor= " # 8000 80">
< b> < font face= " Tahom a" size= "2" >
&nbsp; &nbsp; < a href= ek st ra.ht m l t arget = k anan> Ek st ra Kurik uler< / a>
< / font > < / b> < / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

File k a n a n .h t m l

< ht m l>
< head>
< t it le> : : : Lat ihan Mem buat Link Ke Dok um en Lain : : : < / t it le>
< / head>
< body bgcolor= # ffffff>
< t able border= 1 bordercolor = bordercolor= " # 800 080"
cellspacing= 0 cellpadding= 50 w idt h= 750 height = 450>
< t r>
< t d v align= t op>
< font face= v erdana size= 4 color= blue>
Selam at dat ang di web k am i ...
< / t d>
< / t r>
< / body >
< / ht m l>

xxxix
File p roli.h t m l

< ht m l>
< head>
< t it le> : : : Link Dok um en Lain: : : < / t it le>
< / head>
< body bgcolor= # ffffff>
< t able border= 1 bordercolor = bordercolor= " # 800 080"
cellspacing= 0 cellpadding= 50 w idt h= 750 height = 450>
< t r>
< t d v align= t op>
< font face= v erdana size= 4 color= blue>
Program Keahlian: < br>
< font size= 1 >
< ul t y pe= circle>
< li> Rek ay asa Perangk at Lunak
< li> Tek nik Elek t ronik a I ndust r i
< li> Tek nik Pem bangk it Tenaga List rik
< li> Tek nik Mek anik Ot om ot if
< li> Tek nik Bodi Ot om ot if
< li> Tek nik Pem esinan
< li> Tek nik Las
< / ul>
< / t d>
< / t r>
< / body >
< / ht m l>

File e k st ra .h t m l

< ht m l>
< head>
< t it le> : : : Link Dok um en Lain: : : < / t it le>
< / head>
< body bgcolor= # ffffff>
< t able border= 1 bordercolor = bordercolor= " # 800 080"
cellspacing= 0 cellpadding= 50 w idt h= 750 height = 450>
< t r>
< t d v align= t op>
< font face= v erdana size= 4 color= blue>
Ek st ra Kurik uler: < br >
< font size= 1 >
< ul t y pe= circle>
< li> Seni Bela Diri Tapak Suci
< li> Keagam aan
< li> Sepak Bola
< li> Bola Bask et
< li> Kepeny iaran
< / ul>
< / t d>
< / t r>

xl
 < / body >
< / ht m l>

Hasilnya adalah sebagai berikut :

7. Form Html

Digunakan untuk menerima masukan/ input dari user dan memproses hasil
inputan tersebut di server. User menerima informasi melalui sejumlah elemen
yang disebut kontrol. Kontrol ini dapat berupa TEXTBOX, CHECKBOX, RADIO
BUTTON, PUSH BUTTON, LI ST MENU dan lainnya.

Sintak penulisan form adalah:

< form m et hod= ” post at au get ” act ion= ” program _pem roses” >
elem en- elem en FORM
< / form >

Atribut METHOD mempunyai dua nilai yaitu POST dan GET. Metode GET
mengirimkan data pada server dengan cara meletakkan data pada bagian
akhir URL yang ditunjuk. Metode POST mengirimkan datanya secara terpisah.
Jika data masukan banyak, lebih disarankan untuk menggunakan metode
post. Atribut ACTI ON berisi URL dari program yang dipanggil oleh form
tersebut.

TextBOX

Textbox digunakan untuk memasukkan data string sebanyak satu baris. Cara
penulisannya adalah:

< input t y pe= t ex t nam e= t ex t box 1 size= x x v alue>

xli
 Atribut TYPE untuk menentukan jenis masukan yang berupa TEXT (textbox),
NAME adalah identifikasi/ penamaan elemen ini untuk dibaca oleh program
pemroses nantinya. Atribut VALUE untuk memberi nilai suatu masukan.
Sedangkan atribut SI ZE digunakan untuk menentukan panjang atau
banyaknya karakter sebuah masukan. Untuk menyembunyikan masukan yang
ditulis user dalam textbox, dapat menggunakan atribut TYPE= ”PASSWORD”,
sehingga tampilan dalam textbox menjadi karakter “* ”.

contoh1_17.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan TEXTBOX: : : < / t it le>
< / head>
< body >
< h3> BUKU TAMU< / h3>
< form m et hod= post >
< t able border= 0>
< t r>
< t d widt h= 70> Nam a< / t d>
< t d widt h= 10> : < / t d>
< t d widt h= 30> < input t y pe= t ex t nam e= nam a size= 30> < / t d>
< / t r>
< t r>
< t d widt h= 70> Alam at < / t d>
< t d widt h= 10> : < / t d>
< t d widt h= 30>
< input t y pe= t ex t nam e= alam at size= 30> < / t d>
< / t r>
< t r>
< t d widt h= 70> Hom epage< / t d>
< t d widt h= 10> : < / t d>
< t d widt h= 30>
< input t y pe= t ex t nam e= page size= 30> < / t d>
< / t r>
< / t able>
< / form >
< / body >
< / ht m l>

Tampilan untuk contoh diatas adalah:

xlii
 CHECKBOX

CheckBox digunakan untuk memberi beberapa pilihan kepada user, sehingga

user dapat memilih salah satu, lebih dari satu pilihan atau tidak memilih sama
sekali.

Tata cara penulisannya adalah:

< input t y pe= check box nam e= check box 1 v alue= on at au off check ed> Pilihan 1

Dimana attribut TYPE menentukan jenis masukan yang berupa CHECKBOX,

NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses
nantinya, VALUE menentukan apakah pada keadaan awal checkbox ini terpilih
(ON) atau tidak (OFF). Parameter CHECKED menentukan apakah checkBOX
sedang dicentang atau tidak

contoh1_18.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan CHECKBOX: : : < / t it le>
< / head>
< body >
< form m et hod= post >
Pilih Program Keahlian Anda< br>
< h3> Daft ar Program Keahlian Ju rusan TI K SMKN 1 Kot a Bek asi < / h3>
< p>
< input t y pe= check box nam e= c1 check ed> Rek ay asa Perang k at Lunak < br>
< input t y pe= check box nam e= c2> Mu lt im edia< br >
< input t y pe= check box nam e= c3> Tek nik Kom put er dan Jaringan< br>
< / form >
< / body >
< / ht m l>

Hasil contoh diatas adalah sebagai berikut:

xliii
 RADI O Button

Digunakan untuk membuat pilihan. User dapat memilih salah satu pilihan
yang tersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu
pilihan yang disediakan. Atribut CHECKED memberi tanda bahwa pilihan
tersebut sedang diaktifkan, VALUE adalah harga dari pilihan

contoh1_19.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan RADI O But t on: : : < / t it le>
< / head>
< body >
< form m et hod= post >
< h3> Pilih Salah sat u< br>
Pendidik an Terak hir Anda: < / h3>
< input t y pe= radio v alue= " SD" check ed nam e= sek olah> SD< br>
< input t y pe= radio v alue= " SLTP" nam e= sek olah> SLTP< br>
< input t y pe= radio v alue= " SMU" nam e= sek olah> SMU< br>
< input t y pe= radio v alue= " S1" nam e= sek olah > S1< br >
< input t y pe= radio v alue= "S2" nam e= sek olah > S2< br >
< / form >
< / body >
< / ht m l>

Hasil contoh program tersebut adalah:

xliv
 DROP-DOWN Menu

Digunakan untuk membuat menu pilihan. Cara menuliskannya adalah:

< select nam e= m enu1>
< opt ion v alue- pilihan1> Pilihan 1
< opt ion v alue- pilihan2> Pilihan 2
< opt ion v alue- pilihan3> Pilihan 3
dst …
< / select >

Tag OPTI ON berfungsi untuk menampilkan pilihan-pilihan yang akan tersedia.

Setiap pilihan ditentukan isinya dengan parameter VALUE.

contoh1_20.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan DROP- DOWN Menu: : : < / t it le>
< / head>
< body >
< form m et hod= post >
< h3> Pilih Salah sat u< br>
Jurusan: < / h 3>
< select nam e= j uru san>
< opt ion v alue= TI select ed> Tek nik I nform at ik a< / opt ion>
< opt ion v alue= MO> Mesin Ot om ot if< / opt ion>
< opt ion v alue= MP> Mesin Perk ak as< / opt ion >
< opt ion v alue= ML> Mesin Las< / opt ion>
< / select >
< / form >
< / body >
< / ht m l>

xlv
 Tampilan contoh diatas adalah sebagai berikut:

TEXT Area

Elemen ini digunakan untuk menampilkan masukan berupa textbox yang

mampu menerima masukan berupa string lebih dari satu baris.
Sintaknya adalah:

< t ex t area nam e= t ex t box 1 rows= x x cols= x x > I si Awal

< / t ex t area>

Parameter NAME adalah identifikasi dari elemen ini untuk dibaca oleh
program pemroses nantinya, COLS dan ROWS adalah ukuran kolom dan baris
textbox ini dalam banyaknya karakter

contoh1_21.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan Tex t Area: : : < / t it le>
< / head>
< body >
< form m et hod= post >
< h5> Kirim k an k rit ik dan saran Anda< / h5>
< t ex t area nam e= t ex t box 1 rows= 5 cols= 40>
< / t ex t area>
< / form >
< / body >

xlvi
 < / ht m l>

Tampilan contoh diatas adalah sebagai berikut:

Elemen Tombol

Elemen ini digunakan untuk menampilkan tombol yang dapat berupa tombol
SUMBIT untuk mengirimkan data ke pemroses di server, RESET untuk
mengulangi/ mengosongkan isian form atau NORMAL yang tidak berfungsi
apapun sebelum kita mendefinisikan sebuah fungsi untuknya.
Format penulisannya adalah:
< input t y pe= subm it v alue= OK nam e= t om bol1 > unt uk t om b ol SUBMI T
< input t y pe= reset v alue= reset nam e= t om bol2> u nt uk t om b ol RESET

contoh1_22.html
< ht m l>
< head>
< t it le> : : : Buk u Tam u: : : < / t it le>
< / head>
< body >
< h3> < p align= cent er> BUKU TAMU< / p > < / h3>
< form m et hod= post >
< t able border= 0 align= cent er widt h= 500>
< t r>
< t d widt h= 11% > Nam a< / t d>
< t d widt h= 3% > : < / t d>

xlvii
 < t d widt h= 86% > < input t y pe= t ex t nam e= nam a size= 20> < / t d>
< / t r>
< t r>
< t d widt h= 11% > Alam at < / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 86% >
< input t y pe= t ex t nam e= alam at size= 20> < / t d>
< / t r>
< t r>
< t d widt h= 11% > Em ail< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 86% > < input t y pe= t ex t nam e= em ail size= 20> < / t d>
< / t r>
< t r>
< t d widt h= 11% > Websit e< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 86% >
< input t y pe= t ex t nam e= pg size= 20> < / t d >
< / t r>
< t r>
< t d widt h= 11% v align= t op> Hom epagek u< / t d>
< t d widt h= 3% v align= t op> : < / t d>
< t d widt h= 86% >
< input t y pe= radio v alue= hebat nam e= saran check ed>
Bagus Sek ali< br>
< input t y pe= radio v alue= bagus nam e= saran >
Bagus< br>
< input t y pe= radio v alue= biasa nam e= saran>
Biasa Aj a< br> < / t d>
< / t r>
< / t able>
< p align= cent er>
< input t y pe= subm it v alue= k irim nam e= b1>
< input t y pe= reset v alue= bat al nam e= b2>
< hr>
< / form >
< / body >
< / ht m l>

Hasilnya adalah:

xlviii
 c. Rangkuman

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

d. Tugas
1. Kunjungi beberapa website (minimal 10 website). Amatilah website yang
telah anda kunjungi. Yang harus anda amati adalah meliputi:
a. Layout,
 Seberapa besar daya tarik dan unsur seni dari web yang anda amati.
 Bagaimana model layout web tersebut, berbentuk tabel atau frame?
b. Content/ I si, Apa saja isi dari web tersebut.
Silahkan catat hasil pengamatan anda.
2. Teliti profil sebuah organisasi/lembaga (misal: KUD, Pemerintah Kota, Sekolah
dan lain-lain). Catat semua hasil penelitian anda. Dari hasil penelitian anda,
silahkan buat website statis yang isinya adalah profile dari yang anda teliti.

xlix
 Bila perlu tawarkan website buatan anda kepada organisasi/lembaga
tersebut.
3. Silahkan cari dan download tutorial berbahasa I nggris di I nternet yang
berhubungan dengan web programming, (misalnya PHP, ASP dan lain-lain).

e. Tes Formatif

1. Jelaskan masing-masing fungsi dari tag-tag berikut:

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

f. Kunci Jaw aban Formatif 1

1. Fungsi dari tag:

l
 a. < h1> : digunakan untuk mengatur ukuran huruf pada header dengan
angka 1 berarti mempunyai ukuran paling besar.
b. < p> : digunakan untuk berpindah alinea atau membuat paragraf baru
c. < br> : Digunakan untuk pindah baris baru.
d. < hr> : digunakan untuk membuat garis horisontal
2. Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain,
dapat berupa teks maupun gambar.
Form, digunakan untuk mengumpulkan informasi dari pengunjung
(berinteraksi dengan pengunjung) karena form dapat berupa model isian
yang harus diisi pengunjung dan akan dibca oleh pemilik web.
Frame, merupakan pembagi halaman.
3. Frame adalah dokumen yang terdapat di dalam frameset dengan border yang
mengelilinginya. Sedangkan frameset, adalah suatu frame yang dapat
menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa
frameset yang lainnya.
4. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk
menentukan pilihan dari suatu daftar pilihan. Perbedaanya terletak pada
jumlah pilihan yang dapat dipilih. Pada checkbox, pengunjung halaman web
dapat memilih beberapa dari daftar pilihan, namun dengan radio button,
pengunjung hanya berhak menentukan satu pilihan saja.
5. Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan
dalam form untuk selanjutnya diolah oleh server. Dan tombol reset berfungsi
untuk mengosongkan dan atau mengembalikan ke nilai default data yang ada
dalam form.
6. Kode untuk halaman web tersebut adalah:
< ht m l>
< head>
< t it le> : : : Form Order: : : < / t it le>
< / head>
< body >
< font face= v erdana>
< h3 align= cent er> FORM ORDER BARANG
< form act ion= " m ailt o: j ack _delphi@y ahoo.com " m et hod= post >
< t able border= 2 cellpadding= 1>
< t r>
< t d rowspan= 2 > < font size= 2> I sik an Dat a- dat a Anda< / t d>
< t d> < input t y pe= t ex t nam e= "Nam aDepan" size= 20 > < / t d>
< t d> < input t y pe= t ex t nam e= "Nam aBelak ang" size= 20 > < / t d>
< t d> < input t y pe= t ex t nam e= "Usia" size= 3> < / t d>
< / t r>

< t r>
< t d> < font size= " - 2 "> Nam a Depan< / font > < / t d>
< t d> < font size= " - 2 "> Nam a Ak hir< / fon t > < / t d>

li
 < t d> < font size= " - 2 "> Um ur< / font > < / t d >
< / t r>
< t r>
< t d rowspan= 3 > < font size= 2> Bagaim ana Menghubungi Anda?< / t d>
< t d colspan= 4 v align= t op> < font size= 2> Alam at Rum ah :
< t ex t area nam e= "Jalan " rows= 2 cols= 30 > < / t ex t area> < / t d >
< / t r>
< t r>
< t d colspan= 2 > < font size= 2> Kot a:
< input t y pe= t ex t nam e= "k ot a" size= 20> < / t d>
< t d colspan= 2 > < font size= 2> Negara:
< input t y pe= t ex t nam e= "negara" size= 25> < / t d>
< / t r>
< t r>
< t d colspan= 2 > < font size= 2> Kode Pos:
< input t y pe= t ex t nam e= "k odepos" size= 10> < / t d>
< t d colspan= 2 > < font size= 2> Nom or Telepon
< input t y pe= t ex t nam e= "t elp1" size= 4> -
< input t y pe= t ex t nam e= "t elp2" size= 11> < / t d>
< / t r>

< t r>
< t d> < font size= 2> Credit Card
< input t y pe= radio nam e= CC v alue= Visa check ed> Visa
< input t y pe= radio nam e= CC v alue= Mast erCard check ed> M/ C< / t d>
< t d colspan= 2 align= cent er>
< input t y pe= t ex t nam e= nom or CC1 size= 4>
< input t y pe= t ex t nam e= nom or CC2 size= 4>
< input t y pe= t ex t nam e= nom or CC3 size= 4>
< input t y pe= t ex t nam e= nom or CC4 size= 4> < / t d>
< t d colspan= 2 align= cent er> < font size= 2> Tanggal Berak hir:
< input t y pe= t ex t nam e= blnak hir size= 2 >
< input t y pe= t ex t nam e= t hnak hir size= 2> < / t d>
< / t r>
< t r>
< t d> < font size= 2> Jenis Barang < / t d>
< t d colspan= 4 > < font size= 2>
< select m ult iple nam e= Merchandise size= 1>
< opt ion select ed> Pent ium I V
< opt ion> Pent ium I I I
< opt ion> Monit or
< opt ion> CD- ROM
< opt ion> Kam era Digit al
< opt ion> Pr int er
< opt ion> Mouse
< opt ion> Scanner
< / select > < / t d>
< / t r>
< t r>
< t d align= cent er colspan= 5>
< h1> Ter im ak asih At as Order Anda! < / h1>

lii
 < / t d>
< / t r>
< / t able> < p>
< cent er>
< input t y pe= "subm it " v alue= "Kirim ">
< input t y pe= "Reset " v alue= "Hapus I sian">
< / cent er>
< / form >
< / body >
< / ht m l>

g. Lembar Kerja 1

Alat dan Bahan

PC (Personal Computer) yang telah dilengkapi dengan web browser dan editor
teks Notepad.

Kesehatan dan Keselamatan Kerja

1) Berdo’alah sebelum memulai kegiatan belajar.

2) Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
3) Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung
dengan benar.
4) Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik
di dekat komputer (magnet, handphone, dan sebagainya).
5) Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain
game.
6) Setelah selesai, matikan komputer sesuai prosedur yang aman!

Langkah Kerja

1) Siapkanlah semua peralatan yang akan digunakan!

2) Periksa semua kabel penghubung pada PC.
3) Nyalakan PC dan jalankan program editor teks notepad dan web browser
I nternet Explorer.
4) Kerjakan Tugas 1 dan Tes Formatif 1 di atas.
5) Apabila menemui kesulitan dalam memahami materi yang ada, segera
tanyakan kepada instruktur.
6) Setelah selesai, matikan komputer dan rapikan seperti semula.

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

a. Tujuan Kegiatan Pemelajaran

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

b. Uraian Materi 2
1. Pendahuluan

Website dapat dibedakan menjadi dua yaitu Web Statis dan Web Dinamis.
Web Statis adalah web yang berisi informasi-informasi yang bersifat statis
(tetap), sedangkan Web Dinamis adalah web yang menampilkan informasi
yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan
user.
Biasanya untuk web statis yang ditonjolkan adalah sisi tampilan yang banyak
mengandung grafis sehingga untuk merancang web statis tidak diperlukan
kemampuan pemrograman yang handal. Yang dibutuhkan hanya kemampuan
design grafis/ web dan cita rasa seni belaka. Sedangkan untuk web dinamis
yang banyak ditonjolkan adalah pengolahan data sehingga dibutuhkan
kemampuan dalam pemrograman web.
Ada dua jenis pemrograman web, yaitu Server Side Programming dan Client
Side Programming. Pada Server Side Programming, semua sintaks dan
perintah program yang diberikan akan dijalankan/ diproses di Web Server,
kemudian hasilnya dikirimkan ke browser pengguna dalam bentuk HTML
biasa. Sehingga pengguna tidak dapat melihat kode asli yang ditulis dalam
bentuk server side programming tersebut. Yang tergolong dalam server side
programming seperti: CGI / Perl, Active Server Pages, Java Server Page, PHP,
ColdFussion dan lain-lain.
Sebaliknya, pada Client Side Programming semua sintaks dan perintah
program dijalankan di web browser, sehingga ketika client meminta dokumen
yang mengandung script, script tersebut akan diambil dari web server
 kemudian dijalankan di web browser yang bersangkutan. Contoh dari client
side programming seperti: JavaScript, VbScript, HTML.

2. Pengenalan PHP

PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan
pada serverside. Artinya semua sintaks yang kita berikan akan sepenuhnya
dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya
saja. Ketika seorang pengguna internet membuka suatu situs yang
menggunakan fasilitas server side scripting PHP, maka terlebih dahulu server
yang bersangkutan akan memproses semua perintah PHP di server lalu
mengirimkan hasilnya dalam format HTML ke web server pengguna internet
tadi. Sehingga kode asli yang ditulis dengan PHP tidak terlihat di browser
pengguna.
PHP merupakan software yang open source bebas. Jadi anda dapat merubah
source code dan mendistribusikan secara bebas dan gratis. PHP juga dapat
berjalan lintas platform, yaitu dapat digunakan dengan sistem operasi
(Windows dan Linux) dan web server apapun (misalnya: PWS, I I S, Apache
dll).
Adapun kelebihan-kelebihan dari PHP yaitu:
 Mudah dibuat dan berkecepatan tinggi
 PHP dapat berjalan lintas platform, yaitu dapat berjalan dalam sistem
operasi dan web server apapun.
 Dapat digunakan secara gratis.
 Termasuk bahasa yang embedded, yakni dapat diletakkan dalam tag
HTML.
 Termasuk server side programming, sehingga kode asli/ source code PHP
tidak dapat dlihat di browser pengguna, yang terlihat hanya kode dalam
format HTML.
 Dapat memanfaatkan sumber-sumber aplikasi yang dimiliki oleh server,
seperti misalnya untuk keperluan database connection. PHP dapat
melakukan koneksi dengan berbagai database seperti MySQL, Oracle,
Sybase, mSQL, Solid, Generic ODBC, Postgres SQL, dBase, Direct MS-
SQL, Velocis, I BM DB2, I nterbase, Frontbase, Empress, dan semua
database yang mempunyai profider ODBC seperti misalnya MS Access dan
lain-lain.
 PHP dapat melakukan semua aplikasi program CGI , seperti mengambil
nilai form, menghasilkan halaman web yang dinamis, mengirimkan dan
menerima cookies.
 PHP juga mendukung komunikasi dengan layanan lain melalui protokol
I MAP, SNMP, NNTP, POP3 dan HTTP dan lainnya.
3. I nstalasi Program

Untuk menjalankan PHP, dibutuhkan hal-hal berikut:

 Web Server
 Program aplikasi PHP
 Database server
 Program Aplikasi Database

Ke-empat komponen tersebut mutlak harus ada, jadi sebelum melakukan

pemrograman dan menjalankan PHP, komponen-komponen diatas harus
dinstall terlebih dahulu.
Untuk keempat software tersebut anda bebas memilih menurut yang anda
suka. Namun dalam modul ini yang akan dibahas hanya PhpTriad saja.
Kenapa PhpTriad? Karena disamping software tersebut adalah gratis juga
karena dalam satu paket program ini sudah terdiri dari 4 software yang kita
butuhkan, yaitu web server (dalam hal ini, Apache), Program PHP, Database
Server MySQL dan program aplikasi MySQL. Penginstalan PhpTriad sangat
mudah, sekali install semua program tersebut secara otomatis terinstall juga.
Cara instalasi PhpTriad adalah sebagai berikut:
a. Persiapkan master program PhpTriad. Jika belum ada, silahkan download
di internet. Anda dapat meminta bantuan search engine untuk mencari
program PhpTriad atau anda dapat mengunjungi situs
http:/ / www.download.com.
b. Setelah proses download selesai, buka windows explorer kemudian double
klik icon PhpTriad2-2-1.exe dan ikuti petunjuk yang diberikan.
 Proses instalasi ini pada dasarnya akan mengekstrak file-file ke direktori
tertentu, yaitu c:\ apache.
c. Setelah itu muncul jendela instalasi seperti pada gambar. Kotak licence
agreement tersebut merupakan kotak yang harus dibaca terlebih dahulu
karena berisikan
pengertian-
pengertian umum
mengenai lisensi
perangkat lunak
ini. Jika anda se-
tuju dengan
lisensi yang diberi-
kan, baru kita bisa
melanjutkan
instalasi dengan
klik tombol I Agree. Proses instalasi akan berjalan selama beberapa
menit. Tunggu proses tersebut hingga selesai.
d. Setelah proses selesai akan muncul pesan Setup Completed seperti pada
gambar dibawah ini. Klik tombol close untuk mengakhiri proses instalasi.

e. Selanjutnya lakukan beberapa langkah untuk mengaktifkan semua

komponen PhpTriad dalam komputer anda. Langkah pertama, jalankan
PHPTriad Control Panel, yang dapat dilakukan dari Start Menu
Program  PHP Triad  PHPTriad Control Panel. Atau melalui
I nternet Explorer, ketikkan http:/ / localhost:1005/ pada address bar.
PHPTriad Control Panel digunakan untuk melakukan pengaturan
terhadap berbagai fasilitas yang ada pada PhpTriad. Setelah control panel
dijalankan, akan muncul tampilan seperti pada gambar dibawah ini.
f. Setelah PhpTriad Control Panel aktif, lakukan langkah sebagai berikut:

 Klik “I nstall Apache as Service”.

Proses ini akan melakukan instalasi Apache sebagai service software.

 Klik “Start Apache”.

Proses ini akan melakukan aktifasi Apache sebagai webserver.

 Klik “Start MySQL”.

Pilih versi sistem operasi yang aktif dan sesuaikan dengan versi yang
ada pada komputer anda.

 Klik “Open Site w / default Brow ser”.

Bagian ini digunakan untuk mengecek apakah PHP sebagai sebuah
service sudah dapat digunakan Jika berhasil, maka akan muncul
tampilan sebagai berikut:
g. Langkah selanjutnya yang perlu anda lakukan adalah mengubah atau
mengatur direktori/ folder default untuk dokumen anda. I ni dilakukan agar
ketika kita membuka I nternet Explorer dan mengetikkan
http:/ / localhost pada address bar, maka yang akan dibuka adalah
document root yang posisinya di folder yang telah kita tentukan. Jika tidak
kita atur, maka default untuk document root adalah di direktori
“C:\ apache\ htdocs”. Artinya, dokumen yang diakses secara otomatis
oleh browser ketika memanggil localhost adalah dokumen-dokumen yang
berada pada folder tersebut. Dan secara otomatis pula, file yang pertama
kali dijalankan adalah file yang memiliki nama index.html, atau
index.htm atau index.php yang terdapat dalam folder tersebut.

Untuk mengatur document root, yang perlu anda lakukan adalah:

 Buat direktori/ folder baru yang akan kita jadikan document root.
Misalnya: “c:\ latihan”.

 Jalankan program aplikasi teks editor Notepad. Kemudian buka file

“httpd.conf” yang terletak di “c:\ apache\ conf”. Cari teks
DocumentRoot ”C:\ Apache\ htdocs” kemudian ganti teks tersebut
dengan DocumentRoot ”C:\ Latihan”. Simpan file ini dan tutup
kembali notepad anda. Sekarang anda bisa membuat file-file PHP yang
disimpan dalam direktori menurut selera anda sendiri.
h. Langkah terakhir yang tidak kalah pentingnya adalah mengaktifkan
MySQL. Jalankan windows explorer kemudian masuk ke direktori/ folder
C:\ apache\ mysql\ bin dan cari file winmysqladmin.exe. Jalankan file ini
untuk mengaktifkan MySql. Jika file ini belum pernah dijalankan
sebelumnya, maka akan muncul window form yang meminta ke anda agar
memasukkan nama user dan password. Isilah sesuai dengan keinginan
anda sendiri
dan jangan
lupa dicatat
agar anda tidak
melupakannya.

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

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

 <?
Script PHP
?>
 < ?php
Script PHP
?>
 < script language= ” php” >
Script PHP
< / scr ipt >

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

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

/ * k om ent ar * /
/ / k om ent ar
# k om ent ar

 Karakter adalah semua bentuk huruf, angka, spasi, tanda kontrol atau
simbol yang terdapat dalam tombol keyboard.

5. Variable

Variabel digunakan untuk menyimpan data sementara dan nilainya bisa

berubah-ubah setiap kali program dijalankan. Dalam PHP setiap nama
variable diawali tanda dollar ($) dan diikuti dengan nama variabelnya, tidak
memandang data tersebut apakah integer, real maupun string, PHP otomatis
akan mengkonversi data menurut tipenya. Misalnya nama variable a dalam
PHP ditulis dengan $a. Jenis suatu variable ditentukan pada saat jalannya
program dan tergantung pada konteks yang digunakan. Aturan penamaan
variabel dalam PHP:
 Diawali dengan tanda dolar ($)
 Penamaan variabel bersifat case sensitive
 Nama variabel hanya bisa diawali dengan huruf atau garis bawah, baru
dapat diikuti dengan beberapa huruf atau angka maupun garis bawah
yang panjangnya tidak terbatas.
 Tidak boleh menggunakan tanda baca.
 Tidak boleh menggunakan reserved word PHP seperti misalnya echo,
print, dan lain-lain.

Variabel dalam PHP tidak harus dideklarasikan terlebih dahulu sebelum

digunakan.
Contoh-contoh penulisan variabel:

Benar Salah
$variabel $var!abel
$_pilih $-pilih
$te93 $93te
$ini_itu $ini-itu

contoh2_1.php
< ht m l>
< head>
< t it le> Variabel dalam PHP< / t it le>
< body >
< ?php
/ / v ariabel bert ipe int eger
$a= "5";

/ / v ariabel bert ipe real

$b= "2.5";
/ / v ariabel bert ipe st ring
$k om ent ar= "Selam at Dat ang di PHP";
echo ( "Nilai v ariabel a adalah = $a < br> ") ; / / v ariabel bert ipe int eger
echo ( "Nilai v ariabel b adalah = $b < br> ") ; / / v ariabel bert ipe real
echo ( "Nilai v ariabel k om ent ar adalah = $k om ent ar < br> ") ; / / v ariabel bert ipe st ring
$hasil= $a+ $b;
echo ( "Hasil j um lah a dan b adalah = $hasil < br> ") ; / / v ariabel bert ipe double
$t gl = dat e( "d F Y") ; / / v ariabel bert ipe t anggal
$nam a = "SMK PGRI 3 Malang";
$garis= "= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ";
echo "< p> ";
echo $garis." < br> ";
echo $k om ent ar. " Di Lab ". $nam a. "< br> Belaj ar dengan giat y a.... < br> ";
echo $garis." < br> ";
echo "Tanggal ".$t gl;
?>
 hasilnya adalah:

6. Konstanta

Konstanta adalah variabel yang nilainya tetap.

Sintak:
Define ( “ nam a_k on st ant a” , ” nilai_k onst ant a” ) ;
Contoh:
< html>
< head>
< /head>
< body>
<?
Define (“kampus”,”SMK PGRI 3 Malang”);
Echo kampus;
?>
< / body>
< /html>

7. Type Data

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

PHP menyediakan perintah untuk melakukan konversi tipe data ke tipe data
yang lain dengan menggunakan perintah sebagai berikut:

settype(value,datatype)

dimana:
- value adalah nilai yang akan dikonversikan
- datatype adalah tipe data yang dikonversikan

Perhatikan contoh berikut:

contoh2_2.php
< ht m l>
< head>
< t it le> .: : Konv er si Ty pe Dat a: : . < / t it le>
< / head>
< body >
< font face= t ahom a size= 2 >
< ?php
$bay ar= "500.7 7 Rupiah";
print ( "Tipe Dat a St ring: $bay ar < br> \ n ") ;
set t y pe( $bay ar,"double") ;
print ( "Tipe Dat a Double: $bay ar < br> \ n") ;
set t y pe( $bay ar,"int eger") ;
print ( "Tipe Dat a I nt eger: $bay ar < br> \ n") ;
?>
< / body >
< / ht m l>

Hasil dari script diatas adalah:

9. Operator

Operator adalah simbol/ tanda yang digunakan untuk melakukan operasi-

operasi matematis atau operasi string. Sedangkan operand adalah data yang
dioperasikan atau dimanipulasi. Operator dapat dikelompokkan dalam 4
kategori, yaitu:
 a. Operator Aritmatika/ Arithmetic Operator
b. Operator Penugasan/ Assignment Operator
c. Operator Pembanding/ Comparison Operator
d. Operator Logika/ Logical Operator

 Operator Aritmatika/ Arithmetic Operator

Adalah operator yang digunakan dalam operasi matematika. Yang
termasuk operator ini adalah:
Ope r a t or Ope r a si
+ Penj um lahan
- Pengurangan
* Perk alian
/ Pem bagian
% Modulus
++ I ncrem ent 1
-- Decrem ent 1

 Operator Penugasan/ Assignment Operator

Operator penugasan berfungsi untuk memberikan nilai ke suatu variabel

atau variabel ke variabel. Simbol operator ini adalah “sama dengan” (= ).
Daftar operator penugasan seperti dalam tabel berikut:

Operator Fungsi Contoh

x + = 5;
 x = x + 5;
Unt uk m enam bah nilai v ariabel disebelah
+=
k iri dengan nilai sebelah k anan
x - = 5;
 x = x - 5;
Unt uk m engurangi nilai v ariabel disebelah
-=
k iri dengan nilai disebelah k anan
x .= ” php” ;
 x = x .” php” ;
Unt uk m elak uk an operasi penggabungan
.= ( concat enat ion) ant ara v ariabel disebelah
k iri dengan nilai disebelah k anan
x / = 5;
 x = x / 5;
Unt uk m em bagi nilai v ariabel di sebelah
/=
k iri dengan nilai sebelah k anan
X% = 5;
 x = x % 5;
Sisa hasil bagi ant ara n ilai v ariabel
%=
disebelah k iri dengan nilai disebelah k anan
X&= 5;
 x = x &5;
Unt uk m elak uk an operasi logik a AND
&= ant ara nilai v ariabel disebelah k iri dengan
nilai disebelah k anan
X| = 5;
 x = x | 5;
Unt uk m elak uk an operasi logik a OR an t ara
|= nilai v ariabel disebelah k iri dengan nilai
disebelah k anan
X^ = 5;
 x = x ^ 5;
Unt uk m elak uk an operasi logik a XOR
^= ant ara nilai v ariabel disebelah k iri dengan
nilai disebelah k anan

 Operator Pembanding/ Comparison Operator

Operator ini disebut juga operator relasional, yaitu operator yang

digunakan untuk membandingkan antara dua atau lebih operand (nilai,
 variabel, atau pernyataan) dan menghasilkan nilai True atau False.
Operator-operator yang termasuk operator pembanding adalah:

Operator Fungsi Contoh

$a= = $b;
== Sam a Dengan  t ru e , j ik a $a sam a
dengan $b
$a= = = $b;
 t ru e , j ik a $a sam a
=== I dent ik dengan $b, dan k eduany a
m em puny ai t ipe dat a
y ang sam a;
$a! = $b; at au
! = at au $a< > $b;
 t ru e , j ik a $a t idak sam a
Tidak Sam a Dengan
<>
dengan $b;
$a! = = $b;
 t ru e , j ik a $a t idak sam a
!= = Tidak I dent ik dengan $b, at au
k eduany a t idak m em ilik i
t ipe dat a y ang sam a;
$a< $b;
< Kurang Dari  t ru e , j ik a $a k urang dari
$b;
$a> $b;
> Lebih Dari  t ru e , j ik a $a lebih besar
dari $b;
$a< = $b;
<= Kurang Dari at au Sam a Dengan  t ru e , j ik a $a k urang dari
at au sam a dengan $b;
$a> = $b;
>= Lebih Dari at au Sam a Dengan  t ru e , j ik a $a lebih dari
at au sam a dengan $b;

 Operator Logika/ Logical Operator

Operator logika digunakan untuk membandingkan dua atau lebih

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

Operator Fungsi Contoh

&& at au $a && $b;
 t ru e , j ik a $a dan $b bernilai t ru e
Operasi Logik a AND
AND
$a | | $b; at au
$a or $b;
 t ru e , j ik a $a at au $b, salah sat u ny a
| | at au OR Operasi Logik a OR
bernilai t ru e ;
$a x or $b;
XOR Operasi Logik a XOR  t ru e , j ik a $a at au $b bernilai t ru e dan
salah sat uny a bernilai fa lse ;
! $a;
 t ru e , j ik a $a t idak benilai t ru e ;
! Operasi Logik a NOT
 Operator Bitw ise
Operator bitwise digunakan untuk operasi bilangan biner. Operator-
operator yang termasuk operator bitwise adalah:

Operator Arti
& Operat or AND
| Operat or OR
^ Operat or XOR
~ Operat or NOT
<< Operat or Shift Left ( geser k iri)
>> Operat or Shift Right ( geser k anan)

 Operator I ncrement/ Decrement

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

Operator Operasi Penggunaan

++ Pre/ Post Increment + + $a atau $a+ +
-- Pre/ Post Decrement --$b atau $b--

 Operator String

Hanya ada satu operator string, yaitu operator concatenation ( .), yakni
menggabungkan dua buah atau lebih string.
Contoh
< ?php
$a = “ Hallo” ;
$b = $a.” Selam at Dt ang di PHP” ;
/ / $b berisik an “ Hallo Selam at dat ang di PHP”
?>

 Kedudukan Operator

Setiap operator mempunyai kedudukan (operator precedence) dan

prioritas masing-masing yang digunakan untuk menentukan operator
manakah yang akan dieksekusi terlebih dahulu bila dalam sebuah
pernyataan terdapat dua atau lebih operator. Contoh, misalnya ada
persamaan matematika x= 2+ 5* 7. Maka nilai x adalah 37 bukan 49. Hal
ini karena kedudukan operator perkalian lebih tinggi dari pada operator
penjumlahan sehingga 5 harus dikalikan terlebih dahulu dengan 7, baru
dijumlah dengan 2; bukan 2 ditambah 5 baru dikali 7. Kedudukan
operator-operator tersebut seperti terlihat pada tabel berikut:
 Prioritas Operator
Te rt in gg i (), { }
~ , ! , + + , - - , $, &
* , ?, %
+, -
<>, <=, >=
= = , = = = , != , != =
&
^
!
&&
||
= , + = , - = , * = , / = , &= , | = , ^ = , .=
AND ( &&)
XOR ( | | )
Te re n da h OR

10. Dasar-dasar Struktur Program I nput-Output

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

I n pu t Pr ose s Ou t pu t

I nput-Output Sederhana

Sebagai contoh, kita akan membuat program sederhana untuk menghitung

luas segitiga berdasarkan flowchart berikut:

Mulai

I nput Alas
I nput Tinggi

Output
Cetak Luas

Proses Hitung Luas Segitiga

Luas= 0,5 * Alas * Tinggi

Selesai
contoh2_3.php
< ht m l>
< head>
< t it le> .: : Lat ihan m em buat input Out put : : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
/ / Mendek larasik an dat a input
$alas= 20 ;
$t inggi= 5;

/ / Proses hit ung luas segit iga

$luassegit iga= 0 .5* $alas*
$t inggi;

/ / Cet ak hasil
echo "Besar Alas = $alas
< br> ";
echo "Besar Tinggi = $t inggi
< br> ";
echo "Luas Segi Tiga Adalah = $luassegit iga< br> ";
?>
< / body >
< / ht m l>

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

I nput-Output dengan Form

Dengan memanfaatkan form yang terdapat dalam HTML, kita dapat membuat
program yang lebih interaktif. Sebagai contoh, program di contoh 2.3 akan
modifikasi sehingga lebih interaktif.
contoh2_4.php
< ht m l>
< head>
< t it le> .: : Menghit ung Luas Segi Tiga: : .< / t it le>
< / head>
< body >
< font face= v erdana>
< cent er> < h 3> < u > Menghit ung Luas Segit iga< / u> < / h3> < / cent er>
< form act ion= luassegit iga.php m et hod= post >
< t able align= cent er bgcolor = # cedadc bordercolor= # cfdbdd cellspacing= 5 >
< t r>
< t d> Masuk k an Alas< / t d>
< t d> : < / t d>
< t d> < input t y pe= t ex t nam e= alas size= 10 > < / t d>
< / t r>
< t r>
< t d> Masuk k an Tinggi< / t d>
< t d> : < / t d>
< t d> < input t y pe= t ex t nam e= t inggi size= 10> < / t d>
< / t r>
< t r>
< t d colspan= 3 align= cent er> < input t y pe= subm it v alue= hit ung> < / t d>
< / t r>
< / t able>
< / form >
< / body >
< / ht m l>

Ketika tombol HI TUNG diklik, program memanggil file luassegit iga.php

(perhatikan pada tag < form act ion= luassegit iga.php m et hod= post > ) yang akan
digunakan untuk menampung hasil perhitungan. Maka buat lagi file dan beri
nama luassegit iga.php dan simpan dalam satu direktori.

File luassegitiga.php
< ht m l>
< head>
< t it le> .: : Hasil Perhit ungan Luas Segi Tiga: : .< / t it le>
< / head>
< body >
< font face= v erdana>
< cent er>
< h3> < u> Luas Segit iga< / u > < / h3 >
< / cent er>
< form act ion= cont oh2_ 4.php m et hod= post >
<?
$luas= 0. 5* $alas* $t inggi;
echo "< t able align= cent er bgcolor= # cedadc bordercolor = # cfdbdd cellpadding= 0> ";
echo "< t r> ";
echo "< t d> Alas< / t d> ";
echo "< t d> : < / t d> ";
echo "< t d> $alas< / t d> ";
echo "< / t r > ";
echo "< t r> ";
echo "< t d> Tinggi< / t d> ";
echo "< t d> : < / t d> ";
echo "< t d> $t inggi< / t d> ";
echo "< / t r > ";
echo "< t r> ";
echo "< t d> Luas Segi Tiga< / t d> ";
echo "< t d> : < / t d> ";
echo "< t d> $luas< / t d> ";
echo "< / t r > " ;
echo "< t r> ";
echo "< t d colspan= 3 align= cent er> < input t y pe= subm it v alue= ulang> < / t d> " ;
echo "< / t r > ";
echo "< / t able> " ;
?>
< / form >
< / body >
< / ht m l>
 Hasilnya adalah:

dan tampilan setelah tombol hitung di-klik adalah:

11. Struktur Kontrol/ Kendali

Statement I F
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara
bersyarat atau sesuai dengan kondisi tertentu. Statement I F dibagi dua,
statement I F tunggal dan statement I F majemuk. Cara penulisan statement
I F tunggal adalah sebagai berikut:
if ( k ondisi)
{
st at em ent ;
}
Contoh:

Mulai

I nput Nilai

T
Apakah nilai > 70

Y
Kompeten

Selesai

contoh2_5.php
< ht m l>
< head>
< t it le> .: : Cont oh Selek si Kondisi: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< form act ion= nilai.php
m et hod= post > Masuk k an Nilai:
< input t y pe= t ex t nam e= nilai
size= 2 > < p>
< input t y pe= subm it
v alue= Proses>
< / form >
< / body >
< / ht m l>
Untuk memproses file diatas, buat script berikut dan simpan dengan nama
nilai.php
File nilai.php
< ht m l>
< head>
< t it le> .: : Cont oh Selek si Kondisi: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "Nilai Uj ian anda: $nilai< br> ";
if ( $nilai> 70)
{
echo "Anda Kom pet en< br> ";
}
?>
< / body >
< / ht m l>
Untuk statement IF majemuk atau dikenal dengan IF ... ELSE, digunakan jika
terdapat lebih dari satu kondisi yang akan dikerjakan. Sintaks struktur I F ...
Else adalah sebagai berikut:

if ( sy arat )
{
st at em ent
}
else
{
st at em ent lain
}

atau:
if ( sy arat pert am a)
{
st at em ent pert am a
}
elseif ( sy arat k edua)
{
st at em ent k edua
}
else
{
st at em ent lain
}

Mulai

I nput Nilai

T
Apakah nilai < 50

Y T
Apakah nilai < 70
Tidak Lulus

Y
Lulus dan Tidak Lulus dan
Kompeten Kompeten

Selesai
Sebagai contoh, kita modifikasi file nilai.php pada contoh 2_5 dan simpan
dengan nama nilai2.php

contoh2_6.php
< ht m l>
< head>
< t it le> .: : Cont oh Selek si Kondisi: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< form act ion= nilai2.php
m et hod= post >
Masuk k an Nilai:
< input t y pe= t ex t nam e= nilai
size= 2 > < p>
< input t y pe= subm it
v alue= Proses>
< / form >
< / body >
< / ht m l>

File nilai2.php:
< ht m l>
< head>
< t it le> .: : Cont oh Selek si Kondisi: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "Nilai Uj ian anda: $nilai< br> ";
if ( $nilai< 50)
{
echo "Anda Tidak Lulus< br > " ;
}
elseif ( $nilai< 70)
{
echo "Anda Lulus Tapi Tidak Kom pet en< br> ";
}
else
{
echo "Selam at Anda Lulus
dan Kom pet en";
}
?>
< / body >
< / ht m l>

Hasilnya adalah seperti gambar di atas:

Statement SWI TCH
Statement SWITCH digunakan untuk membandingkan suatu variable dengan
beberapa nilai serta menjalankan statement tertentu jika nilai variable sama
dengan nilai yang dibandingkan. Penggunaan statement SWI TCH hampir
sama dengan penggunaan statement I F, sehingga bisa digunakan sebagai
pengganti statement IF.
Untuk Keluar dari suatu blok statement dalam statement switch, dapat
mengunakan perintah BREAK
Struktur Switch adalah sebagai berikut:
swit ch ( v ariable)
case nilai:
st at em ent
case nilai:
st at em ant
case nilai:
st at em ent

contoh2_7.php
< ht m l>
< head>
< t it le> .: : St ruk t ur Kendali Swit ch: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
$dino= dat e( "l") ;
swit ch ( $dino)
{
case "Monday ":
$hari= "Senin" ; break ;
case "Tuesday ":
$hari= "Selasa";
break ;
case "Wednesday ":
$hari= "Rabu ";
break ;
case "Thu rsday ":
$hari= "Kam is";
break ;
case "Friday ":
$hari= "Ju m at ";
break ;
case "Sat urday ":
$hari= "Sabt u";
break ;
default :
$hari= "Minggu";
}
echo "< h3> Hari ini adalah hari < u> $ hari< / u > < / h3 > ";
?>
< / body >
< / ht m l>
Latihan-latihan
1. Membuat program penghitung discount
Program ini digunakan untuk mengetahui apakah pembeli dapat diskon
atau tidak. Besar diskon tersebut mengikuti aturan sebagai berikut: Jika
jumlah bayar  50.000 dapat diskon 5%, jika jumlah bayar  100.000
dapat diskon 10%, dan jika jumlah bayar  500.000 dapat diskon 50%.
Selain kreteria tersebut, diskonnya adalah 0%.
Untuk mengerjakan program tersebut, perhatikan flowchart berikut:

Mulai

Masukkan
Jumlah Bayar

T
 500000
JumlahBayar

Y
Diskon= 0.5* T
 100000
JumlahBayar
JumlahBayar

Y
Diskon= 0.1*
T
 50000
JumlahBayar
JumlahBayar

Y
Diskon= 0.05* Diskon= 0
JumlahBayar

TotalBayar=
JumlahBayar-Diskon

Selesai

Dari flowchart tersebut dapat kita buat script programnya, sebagai berikut:
contoh2_8.php
< ht m l>
< head>
< t it le> .: : Pr ogram Menghit ung Discou nt : : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< form > Ju m lah Bay ar
 < input t y pe= t ex t nam e= t ot albeli> < br > < br>
< input t y pe= subm it v alue= "Hit u ng Disk on ">
< / form >
< ?php
if ( isset ( $t ot albeli) )
{
$t oy ar= int v al( $t ot albeli) ;
$disk on= 0;
if ( $t oy ar> = 500 000)
$disk on= ( 0.5 * $t oy ar) ;
else
if ( $t oy ar> = 100 000)
$disk on= ( 0.1 * $t oy ar) ;
else
if ( $t oy ar> = 500 00)
$disk on= ( 0.0 5* $t oy ar) ;
else
print ( "Maaf Tidak Ada Disk on < br> \ n ") ;
print f( "Jum lah Bay ar = % d< br> \ n", $t oy ar) ;
print f( "Disk on = % d< br> \ n",$disk on) ;
$t ot albay ar= $t oy ar - $disk on;
print f( "< b> Tot al Bay ar = % d< br> < / b> \ n", $t ot albay ar) ;
}
?>
< / body >
< / ht m l>

2. Membuat Program kalkulator sederhana

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

Mulai

Masukkan
Nilai A dan B

Silahkan Pilih
Operasi Apa?

T
Pilihan=
Jumlah

Y
T
C= A + B Pilihan=
Kurang

Y
T
C= A - B Pilihan=
Kali

C= A * B C= A/ B

Hasil Adalah = C

Selesai

Dari flowchart tersebut, dapat kita buat programmnya sebagai berikut:

contoh2_9.php
< ht m l>
< head>
< t it le> : : : Operasi Arit m at ik a: : : < / t it le>
< / head>
< body >
< form act ion= operasi.php m et hod= post >
< cent er> < h 3> Operasi Arit m at ik A dan B< / h3> < / cent er >
< t able align= cent er bgcolor = # cedadc bordercolor= # cfdbdd>
< t r>
< t d> Masuk k an Nilai A < / t d>
< t d> < input t y pe= t ex t nam e= a size= 10> < / t d>
< / t r>
 < t r>
< t d> Masuk k an Nilai B < / t d>
< t d> < input t y pe= t ex t nam e= b size= 1 0> < / t d>
< / t r>
< t r>
< t d> Operasi< / t d>
< t d>
< select nam e= operasi>
< opt ion v alue= 1> Pen j um lahan [ a+ b] < / opt ion>
< opt ion v alue= 2> Pengurangan [ a- b] < / opt ion>
< opt ion v alue= 3>
Perk alian [ a* b] < / opt ion>
< opt ion v alue= 4>
Pem bagian [ a/ b] < / opt ion>
< / select >
< / t d>
< / t r>
< t r>
< t d colspan= 2 align= cent er>
< input t y pe= subm it
v alue= hit ung> < / t d>
< / t r>
< / t able>
< / form >
< / body >
< / ht m l>

Sekarang buat satu lagi program yang digunakan untuk memproses hasil
setelah ada penekenan tombol hitung. File tersebut simpan dengan nama
operasi.php.

File operasi.php
< ht m l>
< head>
< t it le> Hasil Operasi Arit m at ik a< / t it le>
< / head>
< body >
<?
if ( $operasi= = 1)
{
$c= $a+ $b;
$oper= '[ a + b] ';
}
elseif ( $operasi= = 2 )
{
$c= $a- $b;
$oper= '[ a - b] ';
}
elseif ( $operasi= = 3 )
{
$c= $a* $b;
$oper= '[ a * b] ';
}
else
{
$c= $a/ $b;
$oper= '[ a / b] ';
}
echo "Nilai A adalah = $a dan Nilai B adalah = $b< br> ";
echo "Hasil Operasi $oper adalah = $c< br> " ;
?>
< / body >
< / ht m l>

Statement WHI LE

Pernyataan ini digunakan untuk mengulangi sebuah perintah sampai jumlah

atau kondisi tertentu terpenuhi. Bentuk dasar dari statement While adalah
sebagai berikut:
while ( sy arat )
{
st at em ent
}

Arti dari statemant While adalah memberikan perintah untuk menjalankan

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

Mulai

Masukkan
Batasnya?

$genap= 0;

T
$genap < $batas

Y
Selesai
$genap= $genap+ 2

Bilanga genap dari 2 s/ d batas

adalah:$genap
contoh2_10.php

< ht m l>
< head>
< t it le> .: : Pr ogram Mencar i Bilangan Genap: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< form > Men cari Bilangan Genap Berapa:
< input t y pe= t ex t nam e= genap> < br> < br>
< input t y pe= subm it v alue= "Cari Bilangan Genap">
< / form >
< ?php
if ( isset ( $genap) )
{
$bilgen= int v al( $genap) ;
echo "Bilangan Genap dari 2 s/ d $bilgen adalah: ";
echo "< br> " ;
$gen= 0;
while ( $gen< $genap)
{
$gen= $gen+ 2;
echo "$gen";
echo " ";
}
}
?>
< / body >
< / ht m l>

Statement FOR

Perintah ini digunakan untuk mengulangi perintah dengan jumlah

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

for ( Nilai_Awal; Nilai_Ak hir; Count er)

Keterangan:

 Nilai_Awal : Batas awal perulangan

 Nilai_Akhir : Batas akhir perulangan
 Counter : Jumlah kenaikan yang akan ditambakan kepada batas awal
hingga mencapai batas akhir
contoh2_11.php

< ht m l>
< head>
< t it le> Lat ihan Perulangan dengan For< / t it le>
< / head>
< body >
Tanggal:
< select nam e= t anggal>
< opt ion v alue= 0 select ed> Tanggal
< ?php
/ / Bent uk Pilihan t anggal 1 sam pai dengan 31
for ( $i= 1; $i< 32; $i+ + )
echo "< opt ion v alue= $ i> $i" ;
?>
< / opt ion>
< / select >
< / body >
< / ht m l>

Hasilny a adalah:

Didalam struktur perulangan, terdapat beberapa pernyataan yang digunakan

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

Dengan n adalah parameter opsional yang nilainya digunakan jika

terdapat nested loop. Pernyataan break akan mengikuti urutan tingkatan
dimulai dari tingkat paling dalam menuju tingkat terluar.
 Continue, pernyataan ini digunakan untuk melewati proses iterasi dan
melanjutkan dengan iterasi berikutnya.
  Exit, pernyataan ini digunakan untuk mengakhiri seluruh proses eksekusi
yang sedang berjalan.

12. Procedure dan Fungsi

Dalam pembuatan program sering kali dibutuhkan beberapa perintah yang

digunakan berulang kali. Hal ini dapat dihindari dengan subrutin. Subrutin
adalah sekumpulan perintah yang diberi nama dan dapat dipanggil sewaktu-
waktu. Dalam pemrograman terdapat dua subrutin, yaitu prosedur dan
fungsi. Standar penulisan fungsi adalah:
funct ion nam a_fungsi( argum en)
{
k ode perint ah
}

contoh:
funct ion operasi_ j um lah( $x ,$y )
{
z= x + y ;
echo ( z) ;
}

Beberapa hal yang perlu diperhatikan dalam pembuatan fungsi, yaitu:

 Nama fungsi tidak boleh sama dengan nama-nama fungsi yang sudah ada
dalam PHP.
 Hanya boleh terdiri dari huruf, angka dan garis bawah
 Tidak boleh diawali dengan angka

contoh2_12.php
< ht m l>
< head>
< t it le> .: : Lat ihan Mem buat Fungsi: : .< / t it le>
< / head>
< body >
< font face= t ahom a size= 2 >
<?
/ / Fungsi y g dipanggil
funct ion operasi_ j um lah( $a,$b)
{
$c= $a+ $b;
echo ( "Hasil $a + $b = $c") ;
}
/ / Program Ut am a
/ / Unt uk Mem anggil Fungsi
operasi_j u m lah( 6, 3) ;
?>
< / body >
< / ht m l>
12.b. REQUI RE

Function Require digunakan untuk membaca nilai variable dan fungsi-fungsi

dari sebuah file lain.
Cara penulisan function Require adalah:

require( nam afile) ;

Function Require ini tidak dapat dimasukkan diadalam suatu struktur looping
misalnya while atau for. Karena hanya memperbolehkan pemangggilan file
yang sama tersebut hanya sekali saja.

contoh2_13.php
< ?php
$a= ” Say a sedang belaj ar PHP” ;
funct ion t ulist ebal( $t ek s)
{
echo( “ < b> $ t ek s< / b> ” ) ;
}
?>

contoh2_14.php
< ?php
require( “ cont oh2_13 .php” ) ;
t ulist ebal( “ I ni adalah t ulisan
t ebal” ) ;
echo( “ < br > ” ) ;
echo( $a) ;
?>

12.b. I NCLUDE

Function I nclude akan menyertakan isi suatu file tertentu. I nclude dapat
diletakkan didalam suatu looping misalkan dalam statement for atau while.

contoh2_15.php
<?
echo( "- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - < br > ") ;
echo( "PHP adalah bahasa script ing< br> ") ;
echo( "- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - < br > ") ;
echo( "< br > ") ;
?>

contoh2_16.php
< ?php
for ( $b= 1; $b< 5; $b+ + )
{
include( "cont oh 2_15.php") ;
}
?>
Hasilnya adalah:

12.c. Fungsi String

Fungsi string digunakan memanipulasi/ mengolah data string untuk berbagai

macam kebutuhan. Disini akan dibahas beberapa fungsi string yang sering
digunakan dalam membuat program aplikasi web. Fungsi-fungsi tersebut
adalah:

AddSlashes

Digunakan untuk menambahkan karakter backslash ( \ ) pada suatu string.

Hal ini penting digunakan pada query string untuk database, misalkan pada
MySQL. Beberapa karakter yang akan ditambahkan tanda backslash adalah
karakter tanda petik satu ( ‘ ), karakter petik dua ( “ ), backslash ( \ ) dan
karakter NULL.
Sintaks:
a ddsla sh e s( st r in g)

StripSlashes

Digunakan untuk menghilangkan karakter backslash ( \ ) pada suatu string.

Sintaks:

st rin g st ripsla sh e s( st rin g )

Crypt

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

Echo dan Print

Digunakan untuk mencetak/ menampilkan isi suatu string/ teks atau argumen
ke browser.
Sintaks:
e ch o( st r in g a rgu m e n 1 , st rin g a rgu m e n 2 , ….)
prin t ( st r in g a rgu m e n 1 , st rin g a r gu m e n 2 , ….)

Explode
Digunakan untuk memecah-mecah suatu string berdasarkan tanda pemisah
tertentu dan memasukkan hasilnya kedalam suatu variable array.
Sintaks:
e x plode ( st rin g pe m isa h , st r in g [ , in t lim it ] )

Contoh:
$nam ahari = “ m inggu senin selasa rabu k am is j um at sabt u ” ;
$hari = ex plode( “ ” , $nam ahari) ;

I mplode
Kegunaan fungsi ini adalah kebalikan daripada fungsi explode. Fungsi implode
digunakan untuk menghasilkan suatu string dari masing-masing elemen suatu
array. String yang dihasilkan tersebut dipisahkan oleh suatu string telah yang
ditentukan sebelumnya.
Sintaks:
im plo de ( st r in g p e m isa h , a rra y)

Printf dan Sprint

Digunakan untuk menampilkan output ke browser dengan format tertentu.

Sintaksnya adalah sebagai berikut:
Prin t f( form a t [ ,a rgu m e n ] )
Sp rin t ( fo rm a t [ , a rgu m e n ] )
Parameter format selalu ditandai dengan karakter persen (%), kemudian
diikuti oleh karakter tertentu yang memberikan spesifikasi untuk memberikan
hasil dengan format tertentu. Karakter pemberi spesifikasi tersebut adalah:

Karakter Keterangan
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
B
angk a biner
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
C
k arak t er dengan nilai ASCI I - ny a
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
d
angk a desim al
Argum en diperlak uk an sebagai double dan dit am pilk an sebagai
f
angk a float ing point
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
o
bilangan ok t al
s Argum en diperlak uk an dan dit am pilk an sebagai st ring
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
x
angk a hek sadesim al ( dengan huruf k ecil)
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
X
angk a hek sadesim al ( dengan huruf besar)

contoh2_17.php
< ht m l>
< head>
< t it le> .: : Lat ihan For m at St ring: : . < / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
$angk a1= 78.79;
$angk a2= 23.31;
$angk a= $angk a1+ $angk a2;
echo ( $angk a) ;
echo ( "< br> ") ;
$form at = prin t f( "% 01.2f",
$angk a) ;
echo( "$for m at < br> ") ;
$y ear= 1972;
$m ont h= 11;
$day = 9;
$t anggal= sprint f( "% 0 2d-
% 02d-
% 04d",$day ,$m ont h ,
$y ear) ;
echo ( $t anggal) ;
?>
< / body >
< / ht m l>

Angka didepan karakter “%” menunjukkan jumlah digit atau jumlah karakter
yang akan ditampilkan. Jika ada titik, menunjukkan jumlah angka dibelakang
koma. Misalnya, “%01.2f” menunjukkan bahwa bilangan tersebut
ditampilkan sebagai floating point dan harus ada dua angka dibelakang koma
yang ditampilkan. “%02d” menunjukkan bahwa bilangan tersebut
ditampilkan sebagai integer dan harus ada dua angka yang ditampilkan. Jadi
jika terdapat angka 8, maka akan diubah menjadi 08.

StripTags
Digunakan untuk menghilangkan kode-kode tag HTML pada suatu string.
Sintaks:

st ript a gs( st r in g [ , st r in g t a gs ya n g t id a k dih ila n gk a n ] )

StrLen
Digunakan untuk menghitung jumlah karakter suatu string.
Sintaks:

st rle n ( st r in g)

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

st rle n ( st r in g , su b st r in g)

Str_Repeat
Digunakan untuk mengulang isi suatu string.
Sintaks:

st r_ re pe a t ( st r in g , in t j u m la h pe ru la n ga n )

Str_Replace
Digunakan untuk mengganti suatu string dengan string yang lain.
Sintaks:

St r _ re p la ce ( t e rca ri, pe n ca ri,su b ye k )

StrRev
Digunakan untuk membalik urutan suatu string.
Sintaks:
st rre v( st rin g)

StrStr, StriStr dan StrChr

Digunakan untuk mencari keberadaan suatu string di dalam string lain.
Sintaks:
st rst r( t e r ca r i,pe n ca ri)
st rist r ( t e r ca ri, pe n ca ri)
st rch r ( t e r ca ri, pe n ca ri)
StrToLower
Digunakan untuk merubah suatu string menjadi huruf kecil (lowercase).
Sintaks:

st rt olo w e r( st rin g)

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

st rt ou ppe r( st r in g)

SubStr
Digunakan untuk mengambil suatu sub string dengan panjang tertentu dari
suatu string pada posisi tertentu pula.
Sintaks:

su bst r( st rin g, in t posisi , in t posisi)

Contoh:
subst r( “ ab cdefg” ,0,3) ; / / m engasilk an st ring “ abc”
subst r( “ ab cdefg” ,3,2) ; / / m enghasilk an st ring “ de”

SubStr_Count
Digunakan untuk menghitung jumlah sub string dalam suatu string
Sintaks:

su bst r_ cou n t ( st r in g , st rin g su bst r in g)

Contoh:
subst r_count ( “ This is a t est ” ,” is” ) ; / / m enghasilk an nilai 2

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

u cfirst ( st rin g )

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

u cw or ds( st r in g)
12.d. Fungsi Matematika

Yaitu fungsi-fungsi yang digunakan untuk memanipulasi bilangan-bilangan

dalam operasi matematis.

Fungsi Trigonometri
Fungsi trigonometri adalah fungsi-fungsi yang berhubungan dengan ilmu
trigonometri, yaitu antara lain:
 sin( sudut ) , m encari nilai sinus sebuah sudut
 cos( sudut ) , m encar i nilai cosinus sebuah sudut
 t an( sudut ) , m en cari nilai t angen sebuah sudut
 asin( sudut ) , m encari nilai arcus sinus sebuah sudut
 acos( sudut ) , m encar i nilai arcu s cosinus sebuah sudut
 at an( sudut ) , m en cari nilai arcus t angen sebuah sudut
 deg2rad( a) , m erubah besaran deraj at m enj adi radian
 rad2deg( a) , m erubah besaran radian m enj adi deraj at

Semua besar sudut yang dicari harus dalam bentuk radian.

contoh2_18.php
< ht m l>
< head>
< t it le> .: : Fung si- fungsi Tr igonom et ri: : .< / t it le>
< / head>
< body >
< h3> < u> Fungsi- fungsi Trigonom et ri< / u> < / h 3> < p>
< font face= v erdana size= 2>
< form > Masuk k an sudut y g dicari:
< input t y pe= t ex t nam e= sdt > < br> < br>
< input t y pe= subm it v alue= "Hit u ng">
< / form >
< ?php
if ( isset ( $sdt ) )
{
$sudut = int v al( $ sdt ) ;
$sudrad= deg2rad( $sudut ) ;
$sin= sin( $sudrad) ;
$cos= cos( $sudrad) ;
$t an= t an( $ sudrad) ;
$arcsin = asin( $sudrad) ;
$arccos= acos( $ sudrad) ;
$arct an= at an( $sudrad) ;
echo "Sudut $sudut sam a
dengan $sudrad radian< br> ";
print f( "sin( $ sudut ) =
% 01.4f< br> ",$ sin) ;
print f( "cos( $sudut ) =
% 01.4f< br> ",$ cos) ;
print f( "t an( $sudut ) =
% 01.4f< br> ",$ t an) ;
print f( "arc sin ( $sudut ) = % 01. 4f< br> ",$arcsin) ;
print f( "arc cos( $sudut ) = % 01.4f< br> " ,$arccos) ;
print f( "arc t an( $ sudut ) = % 01.4f< br> ",$ar ct an) ;
}
?>
< / body > < / ht m l>
Fungsi Pangkat dan Algoritma
Fungsi-fungsi yang digunakan untuk perhitungan pangkat dan logaritma.

$y
pow( $x ,$y ) , m encari hasil dari $x .

$x
ex p( $x ) , m encari nilai e
 log( $x ) , m encari nilai dari logarit m a $x
 sqrt ( $x ) , m encar i ak ar k uadrat $x .

Fungsi Base n
Fungsi yang digunakan untuk konversi suatu bilangan ke bilangan berbasis n.
 base_conv ert ( x ,y ,z) , m engubah bilangan x dari basis y m enj adi basis z.
 decbin( x ) , m engubah bilangan desim al k e bilangan biner
 dechex ( x ) , m engubah bilangan desim al k e bilangan hek sadesim al
 decoct ( x ) , m engubah bilangan desim al k e bilangan ok t al
 bindec( x ) , m engubah bilangan biner k e bilangan desim al
 hex dec( x ) , m engubah bilangan hek sadesim al k e bilangan desim al
 oct dec( x ) , m engubah bilangan ok t al k e bilangan desim al

contoh2_19.php
< ht m l>
< head>
< t it le> .: : Fung si- fungsi Tr igonom et ri: : .< / t it le>
< / head>
< body >
< h3> < u> Konv ersi Bilangan
< / u> < / h3 > < p>
< font face= v erdana size= 2>
< form >
Masuk k an bilangan y g dicari:
< input t y pe= t ex t nam e= bil>
< br> < br>
< input t y pe= subm it
v alue= "Conv ert ">
< / form >
< ?php
if ( isset ( $bil) )
{

$bilangan= int v al( $bil) ;

$baseconv ert = base_ conv ert ( $bilangan, 10,3) ;
$desbin= decbin( $bilangan) ;
$deshex = dechex ( $bilangan) ;
$desoct = decoct ( $bilangan) ;
print f( "Desim al $bilangan dalam basis 3 adalah = $baseconv ert < br> ") ;
print f( "Desim al $bilangan dalam basis 2 adalah = $desbin< br> ") ;
print f( "Desim al $bilangan dalam basis 16 adalah = $deshex < br> ") ;
print f( "Desim al $bilangan dalam basis 8 adalah = $desoct < br> ") ;
}
?>
< / body >
< / ht m l>
Fungsi Matematika Lainnya
Fungsi-fungsi matematika yang juga dikenal PHP, yaitu:
 abs( x ) , nilai absolut dari x
 ceil( x ) , unt uk m em bulat k an pecahan x k e at as
 floor( x ) , unt uk m em bulat k an pecahan x k e bawah
 round( x ,y ) , unt uk m em bulat k an pecahan x sam pai y angk a dibelak ang k om a
 pi( ) , sam a dengan  at au 22/ 7 at au k ira- k ira 3,14
 num ber_form at ( x ,y ,k ,r) , m enulisk an bilangan x dengan form at y angk a
dibelak ang k om a, dengan k adalah k om a dan r adalah pem isah ribuan

12.e. Fungsi Date dan Time

Fungsi date( )
Digunakan untuk mengambil tanggal dan jam sekarang. Hasil dari fungsi ini
adalah sebuah string yang berisi tanggal/ jam sesuai dengan format yang
diinginkan.
Sintaks:
da t e ( st rin g fo rm a t )

Format yang dikenal dalam fungsi date ini adalah sebagai berikut:

Karakter Keterangan
a am / pm
A AM / PM
B Swat ch I n t ernet t im e
d day of t he m ont h, 2 digit s wit h leading zeros; i.e. "01" t o " 3 1"
D day of t he week , t ex t ual, 3 let t ers; i.e. "Fri", “ Sun”
F m ont h, t ex t ual, long; i.e. "January ",” Nov em ber”
g hour, 12- hou r form at wit h out leading zeros; i.e. " 1" t o "12 "
G hour, 24- hou r form at wit h out leading zeros; i.e. " 0" t o "23 "
h hour, 12- hou r form at ; i.e. "0 1" t o "12 "
H hour, 24- hou r form at ; i.e. "0 0" t o "23 "
i m inut es; i.e. "0 0" t o "59 "
I ( capit al i) "1" if Day light Sav ings Tim e, "0 " ot herwise.
j day of t he m ont h wit hout leading zeros; i.e. "1" t o "31"
l ( lowercase L) day of t he week , t ex t ual, long; i.e. "Friday "
L boolean for whet her it is a leap y ear; i.e. "0" or "1"
m m ont h; i.e. "01 " t o "12 "
M m ont h, t ex t ual, 3 let t ers; i.e. " Jan", “ Mar ”
n m ont h wit h out leading zeros; i.e. "1 " t o "12 "
s seconds; i.e. "0 0" t o "59 "
S English ordinal suffix , t ex t ual, 2 charact er s; i.e. "t h" , "nd"
t num ber of day s in t he giv en m ont h; i.e. "28" t o "3 1"
T Tim ezone set t ing of t his m achine; i.e. "MDT"
U seconds sin ce t he epoch
w day of t he week , num eric, i.e. "0" ( Sunday ) t o "6" ( Sat urday )
Y y ear, 4 digit s; i.e. "1999"
y y ear, 2 digit s; i.e. "99"
z day of t he y ear; i.e. "0" t o "365"
Z t im ezone offset in seconds ( i.e. " - 432 00" t o "4 3200" )
Fungsi checkdate( )
Digunakan untuk memeriksa apakah format penulisan tanggal sudah benar.
Sintaksnya adalah:
ch e ck da t e ( $ bu la n ,$ h a ri, $ t a h u n )

contoh2_20.php
< ht m l>
< head>
< t it le> .: : Fung si Tim e dan Dat e: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "Sek arang....< br> ";
echo "Hari: ",dat e( l) ,"< br> ";
echo "Tanggal: ",dat e( 'd F Y') ," < br> ";
echo "Jam : ",dat e( 'h: i: s A') ;
echo "< hr> ";
$hari= 30;
$bulan= 2;
$t ahun= 200 5;
$v alidasi= check dat e( $bulan ,$hari,$ t ahun) ;
echo "Tanggal y ang dipilih: $hari - $bulan - $t ahun < br> ";
echo "Penulisan t anggal -
< b> < U> ";
if ( $v alidasi)
{
echo "benar";
} else
{
echo "salah" ;
}
echo "< / b> < / u > < br> ";
echo "Silahk an dibet ulk an
k em bali";
?>
< / body >
< / ht m l>

Fungsi getdate( )
Digunakan untuk menghasilkan waktu dengan keluaran bertipe array.
Sintaksnya adalah:
ch e ck da t e ( $ bu la n ,$ h a ri, $ t a h u n )

Karakter Keterangan
hours Jam
m day Hari
m inut es Menit
m on Bulan dalam digit
m ont h Bulan
seconds Det ik
wday Hari dalam digit
week day Hari
y day Hari k e- dari t ahun
y ear Tahun
contoh2_21.php
< ht m l>
< head>
< t it le> .: : Fung si get dat e: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "Sek arang Jam : ",dat e( 'h: i: s A') ;
echo "< hr> ";
$j am = get dat e( ) ;
echo "Selam at < b> < u > ";
if( $j am [ h ours] < = 9)
echo "Pagi";
else
if( $j am [ h ours] < = 14)
echo "Siang";
else
if( $j am [ h ours] < = 19)
echo "Sore";
else
echo "Malam ";

echo "< / b> < / u > Mr. Jack ";

?>
< / body >
< / ht m l>

12.f. Fungsi Variable

Fungsi variable digunakan untuk mengecek keberadaan variable. Fungsi-

fungsi yang termasuk fungsi variable adalah:

Fungsi Variable Keterangan

doublev al( $v ar) Mengubah v ariabel $v ar m enj adi double
em pt y ( $v ar) Mem erik sa apak ah v ariabel $v ar belum puny a nilai
isset ( $v ar) Mem erik sa apak ah v ariabel $v ar sudah didefinisik an
int v al( $v ar) Merubah v ariabel $v ar m enj adi int eger
get t y pe( $v ar) Mem erik sa t y pe v ariabel $v ar
I s_array ( $v ar) Mem erik sa apak ah $v ar berupa array
is_bool( $v ar) Mem erik sa apak ah $v ar bert ipe boolean
I s_double( $v ar) Mem erik sa apak ah $v ar bert ipe double
is_float ( $v ar) Mem erik sa apak ah $v ar bert ipe float
is_int ( $v ar) Mem erik sa apak ah $v ar bert ipe short int eger
I s_int eger( $v ar) Mem erik sa apak ah $v ar bert ipe int eger
is_long( $v ar) Mem erik sa apak ah $v ar bert ipe long int eger
is_num er ic( $v ar) Mem erik sa apak ah $v ar bert ipe num erik
I s_obj ect ( $v ar) Mem erik sa apak ah $v ar berupa obj ek
is_real( $v ar) Mem erik sa apak ah $v ar bert ipe real
is_resou rce( $v ar) Mem erik sa apak ah $v ar berupa resource
I s_st ring( $v ar) Mem erik sa apak ah $v ar bert ipe st ring
set t y pe( $v ar) Menent uk an t ipe v ariabel $v ar
st rv al( $v ar) Mengam bil nilai st ring dari $v ar
unset ( $v ar) Menghapus v ariabel $v ar
 12.g. Fungsi Mail

Digunakan untuk mengirimkan e-mail ke alamat e-mail tertentu.

Sintaks:
m a il( $ p e n e rim a , $ su bj e ct , $ isi_ e m a il[ , $ h e a de r] ) ;

Contoh:
$pengirim = “ From : say a@em ail.com ” ;
$t uj uan = “ anonk uncoro@y ahoo. com ” ;
$subj ect = “ Pem berit ahuan” ;
$isi = “ I ni adalah percobaan pengirim an e- m ail dengan m enggunak an PHP” ;
m ail( $t o,$subj ect ,$isi,$pengirim ) ;

13. Mengolah File/ data Teks

13.a. Membuka File

Untuk membuka file teks, perintah yang digunakan adalah fopen().

Sedangkan untuk menutup file adalah fclose(). Perhatikan contoh
berikut:

contoh2_22.php
< ht m l>
< head>
< t it le> .: : Mengelola Fungsi File: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "< b> < u > Menam pilk an isi file dat asiswa.dat < / b> < / u> < br> < br> " ;
if ( $file= fopen( "dat asiswa.dat ","r" ) )
{
while ( ! feof( $file) )
{
$st ring= fget s( $file, 255) ;
echo( $st ring) ;
}
fclose( $file) ;
}
else
{
echo "File gagal dibuk a";
}
?>
< / body >
< / ht m l>

Sebelum script diatas dijalankan, terlebih dahulu harus dibuat file

datasiswa.dat. Jika tidak dibuat dan script tetap dijalankan, maka akan
keluar pesan warning seperti dalam gambar diatas. Untuk itu, silahkan buat
file datasiswa.dat. dengan NotePad dan isi seperti dalam gambar berikut:
Setelah file tersebut disimpan, kembali jalankan file contoh2_22.php.
Sehingga akan didapatkan hasil seperti gambar berikut ini:

13.b. Memasukkan Data

Untuk memasukkan data pada file teks menggunakan perintah:

fpu t s( n a m a _ f ile , isi)

Perhatikan contoh berikut.

contoh2_23.php
< ht m l>
< head>
< t it le> .: : Mengelola File: : .< / t it le>
< / head>
< body >
< h3> < u> Mengelola File Tek s< / u > < / h3 > < p>
< font face= v erdana size= 2>
< form >
Masuk k an Nam a Siswa:
< input t y pe= t ex t nam e= isi> < br > < br>
< input t y pe= subm it v alue= "proses">
< / form >
<?
/ / v alidasi isi
if ( isset ( $isi) )
if ( em pt y ( $isi) )
echo "Dat a har us t erisi";
else
{
if( $berk as= fopen( "dat asiswa.dat "," r") )
{
/ / Mem asuk k an Dat a
$berk as= fopen( "dat asiswa.dat ","a+ ") ;
fput s( $berk as,$isi) ;
fput s( $berk as,"< br> ") ;
fclose( $berk as) ;

/ / m enam pilk an
$berk as= fopen( "dat asiswa.dat "," r") ;
while( ! feof( $berk as) )
{
$t ek s= fget s( $berk as,255) ;
echo ( $t ek s) ;
}
fclose( $berk as) ;
}
else
{
echo( "File gagal dibuk a") ;
}
}
?>
< / body >
< / ht m l>

Setelah dijalankan, maka hasilnya akan seperti gambar berikut:

I sikan data pada form input, kemudian klik tombol proses, maka akan
muncul gambar sebagai berikut:
14. Dasar-dasar MySQL

Dalam bahasa SQL pada umumnya informasi tersimpan dalam tabel-tabel

yang secara logik merupakan struktur dua dimensi terdiri dari baris (row atau
record) dan kolom (column atau field). Sedangkan dalam sebuah database
dapat terdiri dari beberapa table. MySQL adalah database jenis RDBMS
(Relational Database Management System). Jadi dalam MySQL tetap
menggunakan Table, Baris dan Kolom. Sebuah Database dalam MySQL
mengandung beberapa table dan satu table dalam database terdiri dari
sejumlah baris dan kolom.

14.a. Tipe Data

Tipe Data Numerik

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

Tipe Data Kisaran Nilai

Tinyint (-128) – 127 atau 0-225
Smallint (-32768) – 32767 atau 0 – 65535
Mediumint (-8388608)-8388607 atau 0-16777215
Int (-2147683648)-(2147683647) atau 0-4294967295
Bigint (-9223372036854775808)-(9223372036854775807) atau
0 – 18446744073709551615
Float(x) (-3.402823466E+ 38)-(-1.175494351E-38), 0, dan
1.175494351E-38 – 3.402823466E + 38
Float Idem
Double (-1.7976E+ 308)–(-2.22E-308),0,dan(2.22E-308)-(1.79E+ 308)
Tipe Data String

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

Tipe kolom Kisaran Nilai

CHAR 1 – 255 karakter

VARCHAR 1 – 255 karakter

TINYBLOB, TINYTEXT 1 – 255 karakter

BLOB, TEXT 1 – 65535 karakter

MEDIUMBLOB, MEDIUMTEXT 1 – 16777215 karakter

LONGBLOB, LONGTEXT 1 – 4294967295 karakter

ENUM('value1','value2',...) Maksimum 65535 karakter

SET('value1','value2',...) Maksimum 64 elemen

Tipe Data Waktu dan Tanggal

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

Tipe Data Kisaran Nilai

1000-01-01 00:00’ to ‘9999-12-31 23:59:59’
DATETIME
1000-01-01’ to ‘9999-12-31’
DATE 1970-01-01 00:00:00’ – 2037
TI MESTAMP -838:59:59’ to ‘838:59:59:59’
TI MEYEAR 1901-2155

14.b. Membuat Database dan Table

Untuk masuk ke dalam program MySQL pada prompt jalankan perintah

berikut ini:
1. Masuk pada direktori utama mysql, seperti perintah berikut:

C: \ WI NDOWS> cd\ apache\ m y sql\ bin

2. Kemudian ketikkan perintah seperti contoh berikut:

C: \ apache\ m y sql\ bin > m y sql

Kemudian akan masuk kedalam Prompt MySQL seperti tampilan dibawah ini:

Welcom e t o t he My SQL m onit or. Com m ands end wit h ; or \ g.

Your My SQL connect ion id is 1 t o serv er v ersion: 3.23.4 7- nt

Ty pe 'help; ' or '\ h' for help. Ty pe '\ c' t o clear t he buffer.

m y sql>

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

Setiap perintah SQL harus diakhiri dengan tanda titik-koma “;”.
Cara untuk membuat sebuah database baru adalah dengan perintah:

cre a t e da t a ba se n a m a da t a ba se ;

Contoh:

m y sql> creat e dat abase alam at ;

Query OK, 1 row affect ed ( 0.27 sec)

m y sql> _

Untuk mengaktifkan database dapat menggunakan perintah berikut ini:

u se n a m a da t a ba se ;

Contoh:

m y sql> use alam at ;

Dat abase changed
m y sql> _

Setelah database aktif, sebuah tabel baru dapat dibuat. Perintah untuk
membuat tabel baru adalah:
creat e t able nam at abel
(
st ruk t ur
);

Contoh:
Misalkan kita ingin menyimpan data anggota yaitu: nomor, nama, email,
alamat, kota. Sedangkan strukturnya seperti tabel dibawah ini:
Kolom/ Field Tipe Data Keterangan
nomor int(6), not null, Angka dengan panjang maksimal 6, sebagai
primary key primary key, dan tidak boleh kosong.
nama char(40), not null Teks dengan panjang maksimal 40 karakter
dan tidak boleh kosong
email char(25), not null Teks dengan panjang maksimal 25 karakter
dan tidak boleh kosong
alamat char(255), not null Teks dengan panjang maksimal 255 karakter
dan tidak boleh kosong
kota char(20), not null Teks dengan panjang maksimal 20 karakter
dan tidak boleh kosong

Perintah MySQL untuk membuat tabel seperti diatas adalah:

m y sql> creat e t able anggot a (

- > nom or int ( 6) not null prim ary k ey ,
- > nam a char( 40) not null,
- > em ail char( 25) not null,
- > alam at char( 255) not null,
- > k ot a char( 20) not null) ;
Query OK, 0 rows affect ed ( 0.33 sec)
m y sql> _
Sedangkan data yang akan diisikan dalam tabel anggota adalah sebagai
berikut:
No Nam a E- M a il Ala m a t Kot a
1. Wiluj eng Handay ani lulul@hot m ail. com Jl. Jant i Bar at 60 Malang
2. Rem y Dianning dian@plaza. com Jl. Derm o 7 Malang
3. Rat na Budi S. budi@ast aga. com Jl. Probolinggo 78 Lam ongan
4. Avicenna Ary a avis@yahoo. com Jl. Durian No. 10 Malang
5. Bayu bayu@ast aga. com Jl. Candi I I / 23 Sem arang
6. Yusuf ucuf @yahoo. com Jl. Raj aw ali 78 Moj oker t o
7. Ari Mulyaningsih ira@ast aga. com Jl. Lebani Waras 100 Gresik
8. Lat ief lat ief@hot m ail Jl. Pakis 172 Surabay a
9. Aj ie j ie@yahoo. com Jl. Kali Ut ik 99 Surabay a
10. Jam ‘I yat ul Khoir j ack _delphi@yahoo. com Jl. Agus Salim 33 Lam ongan
11. Sandra alex@hot m ail. com Jl. Adelaide 22 Malang
12. Paul paul@t elkom . net Jl. Mert oj oyo 88 Malang
13. Riza iza@yahoo. com Jl. Bunga Jom bang
14. M. Nur ullah nur ul@hot m ail. com Jl. Merak Pam ekasan 4 Madur a

Untuk memasukkan sebuah baris (record) kedalam tabel MySQL adalah

sebagai berikut:

in se rt in t o n a m a t a be l va lu e s( k o lom 1 , k o lom 2 , k olo m 3 ,…) ;

Contoh:

m y sql> insert int o anggot a

- > v alues( '1','Wiluj eng Handay ani','lulu@hot m ail.com ',' Jl. Jant i Barat 60',
- > 'Malang') ;
Query OK, 1 row affect ed ( 0.44 sec)

m y sql> _

14.c. Menampilkan I si Table

I si tabel dapat ditampilkan dengan menggunakan perintah SELECT, cara

penulisan perintah SELECT adalah:

se le ct k olom fro m n a m a t a b le ;
Contoh:

 Untuk menampilkan kolom (field) nomor dan nama pada tabel anggota
select nom or, nam a from anggot a;

 Untuk menampilkan semua kolom(field) pada tabel anggota

select * from anggot a;

 Untuk menampilkan semua kolom pada tabel anggota yang berada pada
kota ‘Surabaya’

select * from anggot a where k ot a= ’Surabay a’;

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

 Untuk menghitung jumlah record pada tabel anggota

select count ( * ) from anggot a;

 Untuk menampilkan kota pada tabel anggota

select k ot a from anggot a;

 Untuk menampilkan kota dengan tidak menampikan kota yang sama pada
tabel anggota

select dist inct k ot a from anggot a;

 Untuk menampilkan nama dan email yang mempunyai email di

‘yahoo.com’

select nam a,em ail from anggot a where em ail lik e ‘% y ahoo.com ’;

14.d. Menghapus Record

Untuk menghapus suatu record dengan kriteria tertentu digunakan perintah

sebagai berikut:

de le t e from n a m a t a be l w h e re k rit e ria ;

Contoh:

Menghapus record dari tabel anggota yang bernomor ‘3’

delet e from anggot a where nom or= ’3’;

14.e. Memodifikasi Record

Untuk memodifikasi (merubah) isi record tertentu adalah dengan

menggunakan perintah sebagai berikut:
u pda t e n a m a t a be l se t k o lom 1 = n ila iba ru 1 ,
k olom 2 = n ila iba ru 2 … w h e re k rit e ria ;

Contoh:
Merubah e-mail dari anggota yang bernomor 2 menjadi ‘[email protected]’.

updat e anggot a set em ail= ’dian@hot m ail.com ’ where nom or = ’2’;

14.f. Menghubungkan PHP dengan MySQL

Untuk menghubungkan dengan MySQL, telah disediakan beberapa fungsi oleh

PHP, yaitu antara lain:

 Fungsi mysql_connect()
Fungsi ini digunakan untuk menghubungkan PHP dengan MySql. Sintaksnya
adalah:

$koneksi=mysql_connect(host,user,password)

I si dari variabel $ h ost , $ u se rn a m e , $ pa ssw ord dapat disesuaikan sesuai

dengan setting pada MySQL server yang ada.

 Fungsi mysql_select_db()
Fungsi ini digunakan untuk memilih database yang akan digunakan. Nama
database dapat disesuaikan dengan setting pada MySql server yang ada.
Sintaksnya adalah:

mysql_select_db(namadatabase[,koneksi])

Parameter koneksi boleh tidak dituliskan, jika tidak dituliskan maka

hubungan yang terakhir yang dianggap sebagai hubungan aktif.

 Fungsi mysql_query()
Digunakan untuk melakukan perintah query dalam sebuah database.
Sintaksnya sebagai berikut:

$sql=mysql_query(perintah_sql[,koneksi])

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

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

$baris=mysql_fetch_assoc($sql)

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

$baris=mysql_fetch_row($sql)

 Fungsi mysql_num_fields()
Fungsi ini digunakan untuk menghitung jumlah field dalam sebuah database.
Sintaksnya adalah:

$jum_field=mysql_num_fields($sql)

 Fungsi mysql_num_rows()
Fungsi ini digunakan untuk menghitung jumlah record dalam database.
Sintaksnya adalah:

$jum_row=mysql_num_rows($sql)

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

mysql_close([koneksi])

 Fungsi mysql_create_db()
Fungsi ini digunakan untuk membuat database dengan script php. Sintaksnya
adalah:

mysql_create_db(nama_database)

Perhatikan contoh pada file contoh2_24.php berikut:

contoh2_24.php
< ht m l>
< head>
< t it le> .: : t es k onek si dengan serv er dat abase: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< h3> Tes k onek si dg m y sql dat abase serv er...< / h3> < p>
< form >
< input t y pe= radio nam e= t om bol Value= 1> Sam bung
< input t y pe= radio nam e= t om bol Value= 0> Put u s
< br> < br>
 < input t y pe= subm it Value= " OK ">
< / form >
<?
require( "k onek si.php") ;
$hub= open_connect ion( ) ;
$dat abasenam e= "alam at ";
if ( isset ( $t om bol) )
{
if ( $t om bol= = 1)
{
if ( $hub)
{
echo ( "Konek si dg Serv er Dat abase < b> < u> SUKSES< / b> < / u> < br> ") ;
$db= @m y sql_select _db( $dat abasenam e,$hub) ;
if ( $db) echo "Dat abase < b> < u> $dat abasenam e< / b> < / u> dit em uk an";
else echo "Dat abase < b> < u> $dat abasenam e< / b> < / u > TI DAK dit em uk an";
} else
echo ( "Konek si dg Serv er Dat abase < b> < u> GAGAL< / b> < / u> < br> ") ;
}
elseif ( $t om bol= = 0)
{
$m at i= @m y sql_close( $k onek si) ;
echo ( "Konek si Serv er Dat abase < b> < u> Dim at ik an< / b> < / u> < br> ") ;
}
}
?>
< / body >
< / ht m l>

Agar script diatas dapat dijalankan, silahkan buat juga script koneksi.php
berikut ini:
< ?php
funct ion open_connect ion( )
{
$host = "localhost ";
$usernam e= "root ";
$password= "";
$dat abasenam e= "alam at ";
$k onek si= @m y sql_connect
( $host ,$ usernam e,
$password) ;
if ( $k onek si)
$db= @m y sql_select _db
( $dat abasenam e,$k onek si)
or die ( "Dat abase
< b> $dat abasenam e< / b>
Tidak Dit em uk an") ;
ret urn $k onek si;
}
?>

Jika script diatas dijalankan dan koneksi dengan server database sukses
dilaku-kan serta data-base alamat sudah dibuat, maka hasilnya seperti
gambar diatas.
Untuk menampilkan isi tabel anggota dari database alamat yang telah dibuat
di sub bab 14.b, perhatikan contoh2_25 berikut ini.

contoh2_25.php
< ht m l>
< head>
< t it le> .: : Menam pilk an Dat a: : . < / t it le>
< / head>
< body >
< font face= arial size= 2>
< cent er> < h 3> DAFTAR ANGGOTA< / h3 > < / cent er>
< ?php

/ / - - - - - am bil isi dari file k onek si.php

require( "k onek si.php") ;

/ / - - - - - hubungk an k e dat abase

$k onek si= open_connect ion( ) ;

/ / - - - - - m enent uk an nam a t abel

$t ablenam e= "anggot a";

/ / - - - - - perint ah SQL dim asuk k an k e dalam v ariable st ring

$sql= "select * from $t ablenam e" ;

/ / - - - - - - j alank an perint ah SQL

$result = m y sql_query ( $sql) or die ( "Terdapat k esalahan pada perint ah SQL! ") ;

/ / - - - - - - put us hubungan dengan dat abase

m y sql_close( $k onek si) ;

/ / - - - - - - buat t am pilan t abel

echo( "< t able widt h = 100% cellspacing= 1 cellpadding= 2 bgcolor= # 00000 0> ") ;
echo( "< t r> < t d bgcolor = # CCCCCC> < b> No< / b> < / t d>
< t d bgcolor= # CCCCCC> < b> Nam a< / b> < / t d>
< t d bgcolor= # CCCCCC> < b> E- Mail< / b> < / t d>
< t d bgcolor= # CCCCCC> < b> Alam at < / b> < / t d>
< t d bgcolor= # CCCCCC> < b> Kot a< / b> < / t d> < / t r> ") ;

/ / - - - - - - am bil isi m asing- m asing record

while ( $row = m y sql_fet ch_obj ect ( $result ) )
{

/ / - - - - - m engam bil isi set iap k olom

$nom or = $row- > nom or;
$nam a= $r ow- > nam a;
$em ail= $r ow- > em ail;
$alam at = $ row- > alam at ;
$k ot a= $row - > k ot a;

/ / - - - - - - m enam pilk an di lay ar browser

echo( "< t r> < t d bgcolor = # FFFFFF> $ nom or< / t d>
< t d bgcolor= # FFFFFF> $nam a< / t d>
< t d bgcolor= # FFFFFF> $em ail< / t d>
< t d bgcolor= # FFFFFF> $alam at < / t d>
< t d bgcolor= # FFFFFF> $k ot a< / t d> < / t r> ") ;
}
echo( "< / t able> ") ;
?>
< / body >
< / ht m l>
Hasil dari script tersebut adalah:

Untuk menambahkan data pada tabel anggota, perhatikan contoh pada

contoh2_26.html berikut ini:

contoh2_26.html
< ht m l>
< head>
< t it le> .: : Tam bah Anggot a: : .< / t it le>
< / head>
< body bgcolor= "# FFFFFF" >
< form act ion= sim pan_anggot a.php m et hod= POST>
< font face= v erdana size= 2 color= "# 000 000" >
< h3 align= left >
TAMBAH DATA ANGGOTA
< / h3>
< / font >
< t able border= 0>
< t r>
< t d widt h= 15% > Nam a< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 82% > < input t y pe= t ex t nam e= nam a size= 15> < / t d>
< / t r>
< t r>
< t d widt h= 15% > Em ail< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 82% > < input t y pe= t ex t nam e= em ail size= 25> < / t d>
< / t r>
 < t r>
< t d widt h= 15% > Alam at < / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 82% > < input t y pe= t ex t nam e= alam at size= 50 > < / t d>
< / t r>
< t r>
< t d widt h= 15% > Kot a< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 82% > < input t y pe= t ex t nam e= k ot a size= 1 2> < / t d>
< / t r>
< t r>
< t d widt h= 15%
colspan= 3
align= cent er>
< hr> < / t d>
< / t r>
< t r>
< t d colspan= 3
align= right >
< input t y pe= subm it
v alue= "Sim pan">
< input t y pe= reset
v alue= "Reset ">
< / t d>
< / t r>
< / t able>
< / form >
< / body >
< / ht m l>

Sebelum script diatas dijalankan, jangan lupa untuk membuat juga script
simpan_anggota.php
< ht m l>
< head>
< t it le> .: : Sim pan Dat a: : . < / t it le>
< / head>
< body >
< font face= arial size= 2>
< cent er> < h 5> DATA BERHASI L DI TAMBAHKAN KE TABEL ANGGOTA< / h5> < / cent er>
< hr>
< ?php
/ / - - - - - am bil isi dari file k onek si.php
require( "k onek si.php") ;

/ / - - - - - hubungk an k e dat abase

$k onek si= open_connect ion( ) ;

/ / - - - - - m enent uk an nam a t abel

$t ablenam e= "anggot a";

/ / - - - - - m enghit ung j u m lah record

$sql1= " select * from $t ablenam e";
$hasil = @m y sql_query ( $sql1) or die ( "Terdapat k esalahan pada perint ah SQL! ") ;
$j m l= @m y sql_ num _r ows( $hasil) ;
$nom or = $j m l+ 1;
 / / - - - - - perint ah SQL unt uk m em asuk k an dat a k e t abel anggot a
$sql2= "in sert int o $t ablenam e( nom or,nam a,em ail,alam at ,k ot a) v alues ( '$nom or', ";
$sql2.= "'$ nam a','$em ail','$alam at ','$k ot a') " ;

/ / - - - - - - j alank an perint ah SQL unt uk m em asuk k an dat a k e tabel anggot a

$hasil = @m y sql_query ( $sql2) or die ( "Terdapat k esalahan pada perint ah SQL! ") ;

/ / - - - - - - put us hubungan dengan dat abase

m y sql_close( $k onek si) ;
?>
< cent er>
| < a href= cont oh2 _25.php t arget = _blank > Lihat Dat a< / a>
| < a href= cont oh2 _26.ht m l> Kem bali< / a> |
< / body >
< / ht m l>

15. Autentifikasi Menggunakan Session

Session digunakan untuk menyimpan atau mencatat variabel yang sama ke

halaman yang lain. Session biasanya dipakai untuk aplikasi-aplikasi yang
memerlukan keamanaan. Setiap pengunjung akan diperiksa terlebih dahulu
sebelum dapat mengakses sebuah halaman web. Jika tidak berhak, maka
halaman yang diminta pengunjung tidak dapat ditampilkan.
Untuk memulai session perintah yang digunakan adalah session_start().
Dan untuk mengakhiri session menggunakan perintah session_destroy().
Terdapat banyak fungsi yang berhubungan dengan session, yaitu:

15.a. Fungsi session_ start()

Berfungsi untuk memulai session. Sintaksnya adalah sebagai berikut:
session_ start()

15.b. Fungsi session_ destroy()

Berfungsi untuk mengakhiri session. Sintaksnya adalah sebagai berikut:
session_ destroy()
15.c. Fungsi session_ name()

Digunakan untuk mengambil atau menentukan nama sebuah session. Sintaksnya

adalah sebagai berikut:
session_ name([nama])
Jika argumen nama tidak disertakan, maka fungsi ini digunakan untuk mengambil
nama sebuah session dan jika tidak disertakan digunakan untuk memberi nama
pada session.

15.d. Fungsi session_ module_ name()

Digunakan untuk mengambil atau menentukan nama sebuah modul session.

Sintaksnya adalah sebagai berikut:
session_ module_ name([modul])
Jika argumen modul tidak disertakan, fungsi ini digunakan untuk mengambil
nama sebuah modul session dan jika tidak disertakan digunakan untuk memberi
nama pada modul session.

15.e. Fungsi session_ save_ path()

Digunakan untuk mengambil atau menentukan path dari direktori yang digunakan
untuk menyimpan data-data sebuah session. Sintaksnya adalah sebagai berikut:
session_save_path([path])

15.f. Fungsi session_ id()

Digunakan untuk mengambil atau menentukan identitas sebuah session.

Sintaksnya adalah sebagai berikut:
session_ id([id])

15.g. Fungsi session_ register()

Digunakan untuk mendaftarkan variabel ke dalam sebuah session. Sintaksnya

adalah sebagai berikut:
session_ register([namavar1[,namavar2...])
Argumen namavar1, namavar2 dan seterusnya berupa string yang menampung
nama variabel (tanpa tanda $ didepannya).

15.h. Fungsi session_ unregister()

Digunakan untuk menghilangkan sebuah variabel dari sebuah session, namun

session tersebut tetap ada. Sintaksnya adalah sebagai berikut:
session_ unregister(namavar)
15.i. Fungsi session_ unset()
Digunakan untuk menghilangkan nilai semua variabel yang ada dalam sebuah
session. Sintaksnya adalah sebagai berikut:
session_ unset()
15.j. Fungsi session_ is_ registered()
Digunakan untuk memeriksa apakah sebuah variabel telah didaftarkan pada
sebuah session. Sintaksnya adalah sebagai berikut:
session_ isregistered(namavar)
Argumen namavar berupa string yang merujuk nama variabel (tanpa tanda $
didepannya).

15.k. Contoh Penggunaan

Untuk memahami session, kita akan latihan membuat session dengan aplikasi
login. Yang perlu dbuat pertama kali adalah file admin.html.
File admin.html
< ht m l>
< head> < t it le> .: : Login Adm inist rat or: : .< / t it le> < / head>
< body bgcolor= "# FFFFFF" >
< form nam e= "form 1 " act ion = login.php m et hod= POST>
< t able widt h= "62% " border= 1 align= cent er
cellpadding= 0 cellspacing= 0 bgcolor= # ffffff bordercolor= pu rple>
< t d>
< t able widt h= "100% " border= 0 align= cent er cellpadding= 1 cellspacing= 1
bgcolor= # ffffff >
< t r bgcolor= m agent a>
< t d colspan= 2 > < div align= cent er> < st r ong> Login Adm in< / st rong> < / div > < / t d>
< / t r>
< t r bgcolor= # ffffff>
< t d widt h= 31% > User I D< / t d>
< t d widt h= 69% > < input t y pe= t ex t nam e= user id= adm in size= 25
m ax lengt h= 25> < / t d>
< / t r>
< t r bgcolor= # ffffff>
< t d widt h= 31% > Password< / t d>
< t d widt h= 69% > < input t y pe= password nam e= password
id= pass size= 25 m ax lengt h= 2 5> < / t d>
< / t r>
< t r>
< t d widt h= 15% colspan= 2 align= cen t er> < h r> < / t d>
< / t r>
< t r>
< t d colspan= 2 align= right > < input t y pe= subm it v alue= " Log in">
< input t y pe= reset v alue= "Reset "> < / t d>
< / t r>
< / t able>
< / t d>
< / t able>
< / form >
< / body >
< / ht m l>
Script tersebut jika dijalankan akan
tampak seperti gambar disamping

Selanjutnya buat file berikut:

File login.php
<?
session _st art ( ) ;
if ( em pt y ( $user) )
echo "Nam a User Belu m Di I si";
elseif ( em pt y ( $password) )
echo "Password Belum Di I si";
elseif ( $user= = " j ack " &
$password= = "only m e")
{
$m ast er= $user;
session _regist er( "m ast er") ;
header( "locat ion: halam an_ut am a.php" ) ;
ex it ( ) ;
}
else echo "Anda Tidak Terdaft ar";
?>

File halaman_utama.php
<?
session _st art ( ) ;
?>
< ht m l>
< head>
< t it le> .: : Halam an Ut am a: : .< / t it le>
< / head>
< body >
< font face= t ahom a size= 2 >
<?
if( ! session_is_ regist ered( "m ast er") )
echo "< h3> Ak ses Dit olak ...
< / h3> ";
else
{
echo "Welcom e < b>
$m ast er ... < / b> < br> ";
echo "< h3> HALAMAN
ADMI NI STRATOR< / h3> ";
echo "| < a href= hal1.php>
PAGE 1< / a> ";
echo "| < a href= hal2.php>
PAGE 2< / a> ";
echo "| < a href= logout .php>
logout < / a> | " ;
echo "< hr> ";
}
?>
< / body >
< / ht m l>
File hal1.php
<?
session _st art ( ) ;
?>
< ht m l>
< head>
< t it le> .: : Halam an 1: : .
< / t it le> < / head>
< body >
< font face= t ahom a size= 2 >
<?
if( ! session_is_ regist ered
( "m ast er ") )
echo "< h3> Ak ses Dit olak ...
< / h3> ";
else
{
echo "< font face=
t ahom a size= 2> ";
echo "< h3> PAGE 1< / h3> ";
echo "< p align= right >
| < a href= logout .php> logout < / a> | ";
echo "< hr> ";
echo "Nam a User < b > < u> $ m ast er < / b> < / u > ";
}
?>
< / body >
< / ht m l>

File hal2.php
<?
session _st art ( ) ;
?>
< ht m l>
< head>
< t it le> .: : Halam an 2: : .
< / t it le> < / head>
< body >
< font face= t ahom a size= 2 >
<?
if( ! session_is_ regist ered
( "m ast er ") )
echo "< h3> Ak ses Dit olak ...
< / h3> ";
else
{
echo "< font face=
t ahom a size= 2> ";
echo "< h3> PAGE
2< / h3> " ;
echo "< p align= right > | < a href= logout .php> logout < / a> | " ;
echo "< hr> "; echo "Nam a User < b> < u> $ m ast er< / b> < / u> " ;
}
?>
< / body >
< / ht m l>

File hal2.php
<?
session _st art ( ) ;
session _dest roy ( ) ;
header( "locat ion: adm in.h t m l") ;
?>
c. Rangkuman 2
 Bahasa pemrograman PHP terbukti sangat handal dalam membangun sebuah
program berbasis web
 Waktu yang digunakan untuk memproses data dan menjalankan perintah-
perintah query sangat cepat
 Dengan berjalan dalam sebuah web server, maka secara otomatis program ini
bersifat multiuser
 Database MySQL menyimpan data didalam direktori khusus yang terpisah dari
file program PHP sehingga keamanan data lebih terjamin
 Web server dan database server terpisah sehingga menyulitkan pihak luar
untuk mengakses data yang terdapat didalam database.
 Bahasa program PHP dan Database MySQL lebih fleksibel karena dapat
diakses oleh sistem operasi Windows maupun Linux.
 Bahasa program PHP dan MySQL adalah open source sehingga kita tidak
perlu mengeluarkan biaya tambahan untuk membeli software tersebut.
 Variable dalam PHP tidak perlu di-deklarasikan terlebih dahulu sebelum
digunakan.
 Dalam PHP mengenal lima macam tipe data yaitu: integer, float, string, array
dan objek.
 Struktur kontrol/kendali dalam php meliputi: statement I F, While, For, Switch,
Require dan I nclude.

d. Tugas
1. Buatlah aplikasi web dengan program PHP untuk menghitung jumlah
pengunjung yang telah mengunjungi halaman web kita. Counter yang kita
buat ini adalah untuk menghitung berapa kali suatu halaman situs web telah
ditampilkan. Untuk menyederhanakannya maka counter ditampilkan dalam
bentuk teks bukan grafik.

Algoritma:
a. Bila suatu halaman web ditampilkan maka terlebih dulu dibaca isi file
tertentu dan dibaca nilainya.
b. Tampilkan nilainya di layar browser
c. Tambahkan nilainya dengan 1
d. Simpan nilainya yang baru di file
e. Selesai

2. Buatlah aplikasi pendaftaran/ registrasi agar pengunjung mendapatkan hak

untuk memasuki halaman web yang kita buat. Untuk itu membuat aplikasi
tersebut anda harus mengikuti aturan-aturan sebagai berikut:
 Buat database dan tabel. Field-field tabel tersebut terdiri dari username,
password, nama, alamat, email dan level. Untuk level
dibedakan menjadi dua, yaitu user biasa dan administrator.
  Buat halaman Login seperti gambar dibawah ini. Tombol Login untuk
masuk ke halaman berikutnya jika user sudah terdaftar. Halaman yang
dikunjungi berdasarkan
level user, jika user LOGI N
adalah administrator
User Name
maka halaman yang
dibuka adalah halaman Passw ord
administrator jika user
Daftar Login
name adalah user biasa
maka yang dibuka
adalah halaman user biasa. Sedangkan tombol daftar, digunakan untuk
pendaftaran user baru bagi yang belum terdaftar.
 Buat halaman pendaftaran yang didalamnya terdapat Form Pendaftaran
User Baru seperti gambar berikut:

PENDAFTARAN ANGGOTA

User Name

Passw ord
Nama

Alamat

E-mail

Level  Administrator  User Biasa

Simpan Reset

 Setelah sukses melakukan pendaftaran, user dapat melakukan login sesuai

dengan level user masing-masing. Untuk halaman administrator terdapat
menu Lihat Data, Tambah Data, Edit Data, Hapus Data dan
Ganti Password. Sedangkan untuk halaman user biasa terdapat menu
Edit Data (miliknya sendiri) dan Ganti Password.
 Semua halaman yang dibuat di autentifikasi menggunakan session.

3. Buatlah buku tamu (guestbook) dengan langkah-langkah pembuatan buku

tamu sebagai berikut:
a. Membuat table MySQL yang akan menyimpan isi buku tamu
b. Membuat form pengisian buku tamu
c. Membuat program untuk menerima masukan data dari form yang telah kita
buat sebelumnya
d. Membuat program untuk menampilkan isi buku tamu.
e. Tes Formatif 2
1. Apa yang anda ketahui dengan Variable dan Konstanta ?.
2. Sebutkan macam-macam statement kendali dan apa fungsinya ?
3. Buatlah program untuk menghitung faktorial. Dengan algoritma sebagai
berikut:
 Membuat form dengan menggunakan tag FORM pada HTML. Dengan data
yang dimasukkan adalah nilai faktorial yang dicari. Misal seperti gambar
berikut:

 Data yang dimasukkan disimpan dalam variable dan dikirimkan ke sebuah

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

 Hasil dari perhitungan tersebut kemudian ditampilkan dalam form yang

lain, seperti pada gambar berikut:

 Gunakan statement perulangan untuk mengerjakan tugas diatas.

 Selesai
f. Kunci Jaw aban Formatif

 Variable digunakan untuk menyimpan data sementara dan nilainya bisa

berubah-ubah setiap kali program dijalankan. Dalam PHP, variable diawali
dengan $ dan diikuti dengan nama variablenya.
Konstanta adalah variable yang nilainya tetap.

 Statement kendali terdiri dari:

 Statement I F, digunakan untuk melakukan eksekusi suatu statement

secara bersyarat.
 Statement WHI LE, digunakan untuk melakukan perulangan dalam sebuah
statement sampai kondisi tertentu terpenuhi.
 Statement FOR, digunakan untuk mengulangi sejumlah blok statement
sampai jumlah atau kondisi terpenuhi. Fungsinya sama dengan statement
while. Bedanya, dalam statement for jumlah perulangan sudah diketahui
diawal dan harus dituliskan nilai awal dan nilai akhir dari variabel
penghitung.
 Statement SWI TCH, digunakan untuk membandingkan suatu variable
dengan beberapa nilai serta menjalankan statement tertentu jika nilai
variable sama dengan nilai yang dibandingkan.
 Statement REQUIRE, digunakan untuk membaca nilai variable dan fungsi-
fungsi dari sebuah file lain.
 Statement I NCLUDE, digunakan untuk menyertakan isi suatu file tertentu.

 Program untuk menghitung faktorial adalah:

File faktorial.php
< ht m l>
< head>
< t it le> : : : Pr ogram Fak t orial: : : < / t it le>
< / head>
< body >
< cent er>
< t able border= 1 widt h= 400 >
< t r>
< t d> < font face= t ahom a size= 2> < h 3> < u > < cent er > < br>
Mencari Fak t orial< / u> < / h3>
< form act ion= fak t or.php m et hod= post >
Masuk k an Nilai Fak t orial: < br>
< input t y pe= t ex t nam e= a size= 10 > < p>
< input t y pe= subm it v alue= "Hit u ng">
< / form >
< br>
< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>
 File hasil.php
< ht m l>
< head>
< t it le> : : : Pr ogram Fak t orial: : : < / t it le>
< / head>
< body >
< cent er>
< t able border= 1 widt h= 400 >
< t r>
< t d> < font face= t ahom a size= 2>
< h3> < u>
< cent er>
< br> Mencari Fak t orial< / u > < / h3 >
< form act ion= fak t orial.php m et hod= post >
<?
$c= 1;
if ( $a< 1)
{
$a= 0;
$c= 0;
};
echo "Fak t orial $a adalah: ";
for ( $b= 1; $b< $a+ 1 ; $b+ + )
{
$c= $c* $b;
}
echo( "= $ c") ;
?>
< p>
< input t y pe= subm it v alue= "Hit u ng Lagi">
< / form >
< br>
< / t d>
< / t able>
< / body >
< / ht m l>

g. Lembar Kerja 2

Alat dan Bahan

a. PC (Personal Computer) yang telah dilengkapi dengan web browser.

b. Editor Teks NotePad
c. Apache Web Server
d. Program PHP
e. Program MySQL

Kesehatan dan Keselamatan Kerja

a. Berdo’alah sebelum memulai kegiatan belajar.

b. Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
c. Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung
dengan benar.
d. Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik
di dekat komputer (magnet, handphone, dan sebagainya).
e. Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain
game.
f. Setelah selesai, matikan komputer sesuai prosedur yang aman!

Langkah Kerja

a. Siapkanlah semua peralatan yang akan digunakan!

b. Periksa semua kabel penghubung pada PC.
c. Nyalakan PC dan jalankan program web server, MySQL, PHP, editor notepad
dan web browser I nternet Explorer.
d. Kerjakan Tes Formatif 2 di atas.
e. Apabila menemui kesulitan dalam memahami materi yang ada, segera
tanyakan denga instruktur.
f. Setelah selesai, matikan komputer dan rapikan seperti semula.
3. Kegiatan Belajar 3:
Mengenal Software Web Design.

a. Tujuan Kegiatan Pemelajaran

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

b. Uraian Materi 3
1. Softw are Web Design

Software web design merupakan perangkat lunak yang berguna untuk

membangun/ membuat/ mendisain halaman-halaman web, baik yang bersifat
statis maupun dinamis. Saat ini terdapat berbagai macam software web
design yang dikeluarkan oleh vendor yang berbeda-beda. Setiap software
web design itu menawarkan berbagai macam fitur unggulannya masing-
masing. Software web design terpopuler yang ada saat ini antara lain: Adobe
I mage Ready, Macromedia Dreamweaver, Macromedia Fireworks, Microsoft
Frontpage dan lain sebagainya.

2. Mengenal Macromedia Dreamw eaver MX

Macromedia Dreamweaver yang merupakan salah satu software web design

terpopuler dipilih sebagai software web design yang akan digunakan dalam
proses pemelajaran dalam modul ini. Macromedia Dreamweaver dipilih karena
kompatibilitas dan dukungannya terhadap berbagai bahasa pemrograman
web, antara lain: ASP, JSP, CFM, ASP.NET, PHP, JavaScript, CSS dan XML
disamping keunggulan-keunggulan lainnya dibandingkan dengan software
web design yang lain. Saat ini Macromedia Dreamweaver telah sampai pada
versi 2004 yang lebih sering disebut dengan Macromedia Dreamweaver MX
2004.
Dreamweaver menjadi software utama yang digunakan oleh web designer
dan web programmer guna mengembangkan situs web. Ruang kerja, fasilitas
dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan
efektivitas dalam desain maupun pembangunan situs web. Dreamweaver juga
dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap.
Untuk dapat mengoperasikan Macromedia Dreamweaver, terlebih dahulu
harus dipastikan sudah terinstal di komputer praktikum. Apabila belum ada
Macromedia Dreamweaver yang terinstal, maka perlu dilakukan proses
instalasi. Terlebih dahulu harus dipersiapkan file instalasinya dan diikuti
dengan proses instalasi sesuai dengan installation manual yang ada. Setelah
Macromedia Dreamweaver terinstal, jalankan dengan klik 2 kali pada ikon
yang terdapat di desktop atau dapat juga dilakukan melalui Start Menu.

10
3. Workspace Dreamw eaver MX

Pertama kali dijalankan setelah proses instalasi selesai, user akan diberikan
pilihan Workspace Setup. Workspace Setup berfungsi untuk menentukan
workspace yang akan kita pakai selanjutnya, apakah Workspace
Dreamweaver MX apakah Workspace Dreamweaver 4. Di sini kita gunakan
Workspace Dreamweaver MX, apabila dikemudian hari kita ingin
menggunakan workspace Dreamweaver 4, kita dapat merubahnya melalui
Menu  Edit  Preferences.

Gambar 1. Workspace Setup

Workspace Dreamweaver MX tersebut memiliki tampilan window seperti pada

gambar 2. Window Dreamweaver MX ini dibagi menjadi 7 bagian, yaitu:
I nsert Bar, Document Toolbar, Document Window, Panel Groups, Tag
Selector, Property I nspector dan Files Panel.

Gambar 2. Window dan Panel Dreamweaver MX

11
 Keterangan Gambar:

1. I nsert bar, memuat tombol-tombol yang berfungsi untuk

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

Workspace Dreamweaver MX ini memberikan kesatuan tampilan antara

menu utama, panel, property inspector serta toolbar.

c. Rangkuman 3
Macromedia Dreamweaver yang telah sampai pada versi 2004 (MX) merupakan
software web design yang telah memiliki banyak dukungan terhadap banyak
bahasa pemrograman web. Panel-panel pada window Dreamweaver MX memiliki
peran masing-masing dalam membangun sebuah halaman web yang cantik,
sesuai dengan jiwa seni si pemakai.

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

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

12
f. Kunci Jaw aban Formatif 3

1. Software web design ; perangkat lunak yang berguna untuk

membangun/ membuat/ mendisain halaman-halaman web, baik yang bersifat
statis maupun dinamis.
2. Pemrograman web, adalah pembuatan halaman web yang didalamnya
mengandung unsur bahasa pemrograman disamping tetap menggunakan tag-
tag HTML. Biasanya pemrograman web bertujuan untuk membangun web-
web dinamis.
3. Software web design: Microsoft Frontpage, Macromedia Fireworks,
Macromedia Dreamweaver, Adobe I mageReady, Namo Web editor dan lain –
lain.

g. Lembar Kerja 3
Alat dan Bahan
Personal Computer (PC).

Kesehatan dan Keselamatan Kerja

1. Berdo’alah sebelum memulai kegiatan belajar.
2. Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
3. Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung
dengan benar.
4. Setelah selesai, matikan komputer sesuai prosedur!

Langkah Kerja
1. Siapkanlah semua peralatan yang dibutuhkan!
2. Periksa semua kabel penghubung pada komputer.
3. Nyalakan komputer dan pastikan komputer tersebut telah terkoneksi internet
dengan baik.
4. Pastikan PC yang anda pakai sudah memiliki software web design, jika belum
lakukanlah instalasi software yang dibutuhkan, yaitu: Macromedia
Dreamweaver MX .
5. Jalankan Macromedia Dreamweaver MX, amati dan catat bagian-bagian pada
window Dreamweaver MX. Jika mengalami kesulitan, tanyakan pada
instruktur.
6. Setelah selesai, laporkan hasil kerja Anda kepada instruktur.
7. Setelah diteliti matikan komputer dan rapikan seperti semula.

13
 BAB I I I
EVALUASI

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

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

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

C. Kunci Jaw aban Tes Tulis

1. Fungsi dari tag:

a. < h1> : digunakan untuk mengatur ukuran huruf pada header dengan angka
1 berarti mempunyai ukuran paling besar.
b. < p> : digunakan untuk berpindah alinea atau membuat paragraf baru
c. < br> : Digunakan untuk pindah baris baru.
d. < hr> : digunakan untuk membuat garis horisontal
2. Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain,
dapat berupa teks maupun gambar.
Form, digunakan untuk mengumpulkan informasi dari pengunjung (berinteraksi
dengan pengunjung) karena form dapat berupa model isian yang harus diisi
pengunjung dan akan dibca oleh pemilik web.
Frame, merupakan pembagi halaman.
3. Frame adalah dokumen yang terdapat di dalam frameset dengan border yang
mengelilinginya. Sedangkan frameset, adalah suatu frame yang dapat
menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa
frameset yang lainnya.
4. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk menentukan
pilihan dari suatu daftar pilihan. Perbedaanya terletak pada jumlah pilihan yang
dapat dipilih. Pada checkbox, pengunjung halaman web dapat memilih beberapa

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

16
D. Lembar Penilaian Tes Praktek

PEDOMAN PENI LAI AN

Nama Peserta :
No. Induk :
Program Keahlian : Rekayasa Perangkat Lunak

Nama Jenis Pekerjaan : Mengoperasikan bahasa pemrograman berbasis

w eb

Skor Skor
No. Aspek Penilaian Ket.
Maks Perolehan
1 2 3 4 5
I Perencanaan
1.1. Persiapan Hardware dan Software 5
1.2. Menganalisa jenis desain 5
Sub Total 10
II Membuat Layout
2.1. Penyiapan Layout 5
2.2. Menentukan warna dan gambar 5
Sub Total 10
III Proses (Sistematika & Cara Kerja)
3.1. Cara I nstalasi program aplikasi 5
3.2. Cara menyiapkan struktur data dan
5
algoritma program
3.3. Cara menyiapkan Database 5
3.4. Cara koding program 5
3.5. Cara melakukan layout 5
3.6. Cara menetapkan warna 5
Sub Total 30
IV Kualitas Produk Kerja
4.1. Halaman Web
 Layut halaman web 2,5
 Komposisi warna dan gambar 2,5
4.2. Data Base
 Desain model database 2,5
 Relation 2,5
 Query 2,5

17
 Skor Skor
No. Aspek Penilaian Ket.
Maks Perolehan
1 2 3 4 5
4.3. Bahasa Program
 Penggunaan server side script 2,5
 Program dibuat dengan efisien 2,5
4.4. Security
Keamanan Data
 Back up data 2,5
 Sistem data log 2,5
Keamanan Akses
 Autentifikasi user 2,5
 Pembatasan hak akses 2,5
4.5. Pekerjaan diselesaikan dengan waktu
2,5
yang telah ditentukan
Sub Total 30
V Sikap/ Etos Kerja
5.1. Tanggung jawab 2
5.2. Ketelitian 3
5.3. I nisiatif 3
5.4. Kemandirian 2
Sub Total 10
VI Laporan
6.1. Sistimatika penyusunan laporan 4
6.2. Kelengkapan bukti fisik 6
Sub Total 10
Total 100

18
 KRI TERI A PENI LAI AN

No. Aspek Penilaian Kriteria Penilaian Skor

I Perencanaan
1.3. Persiapan Hardware dan  Hardware dan Software
5
Software disiapkan sesuai kebutuhan
 Hardware dan Software
1
disiapkan sesuai kebutuhan
1.4. Menganalisa jenis desain  Merencanakan sesuai tahapan/
5
proses desain
 Tidak merencanakan tahapan/
1
proses desain
II Membuat Layout
2.1. Penyiapan Layout  Layout web disiapkan sesuai
5
prosedur
 Layout web tidak disiapkan
1
sesuai prosedur
2.2. Menentukan warna dan  Halaman web dilengkapi
5
gambar dengan warna dan gambar
 Halaman web tidak dilengkapai
1
dengan warna dan gambar
III Proses (Sistematika & Cara Kerja)
3.1. Cara I nstalasi program  Program aplikasi diinstall
aplikasi dengan benar sesuai dengan 5
kebutuhan
 Program aplikasi tidak diinstall
dengan benar sesuai dengan 1
kebutuhan
3.2. Cara menyiapkan struktur  Struktur data dan algoritma
data dan algoritma program program disiapkan sesuai 5
dengan rencana
 Struktur data dan algoritma
program disiapkan tidak sesuai 1
dengan rencana
3.3. Cara menyiapkan Database  Database disiapkan sesuai
5
dengan normalisasi database
 Database disiapkan tidak
sesuai dengan normalisasi 1
database
3.4. Cara koding program  Program di buat sesuai dengan
5
algoritma program dan efisien
 Program di buat tidak sesuai
dengan algoritma program dan 1
tidak efisien

19
No. Aspek Penilaian Kriteria Penilaian Skor
3.5. Cara melakukan layout  Layout memenuhi dasar-dasar
5
estetika
 Layout tidak memenuhi dasar-
1
dasar estetika
3.6. Cara menetapkan warna  Penggunaan warna memenuhi
5
harmoni warna
 Penggunaan warna tidak
1
harmoni
IV Kualitas Produk Kerja
4.1. Halaman Web
 Layut halaman web  Halaman web dibuat sesuai
2,5
dengan layout
 Halaman web tidak dibuat
0,5
sesuai dengan layout
 Komposisi warna dan  Komposisi warna dan gambar
2,5
gambar selaras
 Komposisi warna dan gambar
0,5
tidak selaras
4.2. Data Base
 Disain model database  Database dibuat mengguna-
2,5
kan/ sesuai DMD
 Database dibuat tidak meng-
0,5
gunakan/ sesuai DMD
 Relation  Menggunakan Database relasi 2,5
 Tidak menggunakan database
0,5
relasi
 Query  Menggunakan query data 2,5
 Tidak menggunakan query
0,5
data
4.3. Bahasa Program
 Penggunaan server side  Web dibuat dengan teknologi/
2,5
script bahasa server side script
 Web dibuat tidak dengan
teknologi/ bahasa server side 0,5
script
 Program dibuat dengan  Program dibuat se-efisien
2,5
efisien mungkin
 Program dibuat terlalu panjang 0,5
4.4. Security
Keamanan Data
 Back up data  Dalam halaman web terdapat
2,5
fasilitas aplikasi backup data
 Dalam halaman web tidak
terdapat fasilitas aplikasi 0,5
backup data

20
 No. Aspek Penilaian Kriteria Penilaian Skor
 Sistem data log  Terdapat fasilitas pencatatan
2,5
sistem data log
 Tidak terdapat fasilitas
0,5
pencatatan sistem data log
Keamanan Akses
 Autentifikasi user  Halaman web diberi fasilitas
2,5
autentifikasi user
 Halaman web tidak diberi
0,5
fasilitas autentifikasi user
 Pembatasan hak akses  Pemakai dbedakan hak
2,5
aksesnya
 Pemakai tidak dibedakan hak
0,5
aksesnya
4.5. Pekerjaan diselesaikan  Diselesaikan tepat waktu 2,5
dengan waktu yang telah  Diselesaikan tidak tepat waktu 0,5
ditentukan
V Sikap/ Etos Kerja
5.1. Tanggung jawab  Membereskan kembali alat dan
2
bahan yang dipergunakan
 Tidak membereskan alat dan
0,5
bahan yang dipergunakan
5.2. Ketelitian  Tidak banyak melakukan
3
kesalahan kerja
 Banyak melakukan kesalahan
0,5
kerja
5.3. I nisiatif  Memiliki inisiatif bekerja 3
 Kurang/ tidak memiliki inisiatif
0,5
kerja
5.4. Kemandirian  Bekerja tanpa banyak
2
diperintah
 Bekerja dengan banyak
0,5
diperintah
VI Laporan
6.1. Sistimatika penyusunan  Laporan disusun sesuai
laporan sistimatika yang telah 4
ditentukan
 Laporan disusun tanpa
1
sistimatika
6.2. Kelengkapan bukti fisik  Melampirkan bukti fisik hasil
6
penyusunan
 Tidak melampirkan bukti fisik 2
Kategori kelulusan:
70 – 79 : Memenuhi kriteria mininal. Dapat bekerja dengan bimbingan.
80 – 89 : Memenuhi kriteria minimal. Dapat bekerja tanpa bimbingan.
90 – 100 : Di atas kriteria minimal. Dapat bekerja tanpa bimbingan.

21
 BAB I V
PENUTUP

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

22
 DAFTAR PUSTAKA

1. Bimo Sunarfrihantono, ST, PHP dan MySQL Untuk WEB, Andi 2003
2. Bunafit Nugroho, PHP & MySQL Dengan Editor Dreamw eaver MX, Andi, 2004
3. Mico Pardosi, Bahasa Pemrograman I nternet, HTML dan Javascript, I ndah,
2001
4. MADCOMS, Aplikasi Manajemen Database Pendidikan Berbasis Web Dengan
PHP dan MySQL, Andi, 2005
5. Sutarman, S.Kom, Membangun Aplikasi Web Dengan PHP dan MySQL, Graha
I lmu, 2003
6. Teguh Wahyono, PHP TRI AD Fundamental (Memahami Pemrograman Web
Dengan PHP dan MySQL dalam 24 Jam), Gava Media, 2005
7. Visibooks, HTML and JavaScript for Visual Learners,
8. Yahya Kurniawan, ST, Aplikasi Web Database dengan PHP dan MySQL, Elex
Media Komputendo, 2003.
9. http:/ / www.ilmukomputer.com
10. http:/ / www.klik-kanan.com

23
G. Cek Kemampuan

I silah cek list (√) seperti pada tabel di bawah ini dengan sikap jujur dan dapat
dipertanggung jawabkan untuk mengetahui kemampuan awal yang telah dimiliki.

Saya dapat
Melakukan Bila
Standar Pekerjaan ini Jaw aban
Kompetensi Dasar
Kompetensi dengan “Ya”
Kompeten Kerjakan
Ya Tidak
3. Membuat 4. Menetapkan pemakaian Tes Formatif
dokumen dan struktur dokumen 1
dengan HTML 5. Membuat struktur
sesuai Tes Formatif
dokumen dengan bahasa
spesifikasi 1
HTML
6. Memformat dokumen dan Tes Formatif
menambahkan obyek 1
4. Menerapkan 5. Menjelaskan konsep dasar
Tes Formatif
dasar-dasar dan teknologi dari
2
pembuatan web Webpage.
statis tingkat 6. Mempersiapkan pekerjaan Tes Formatif
dasar pembuatan web 2
7. Melakukan pembuatan Tes Formatif
dokumen web baru 2
8. Menampilkan Web dalam Tes Formatif
browser 2

Apabila anda menjawab TI DAK pada salah satu pernyataan di atas, maka pelajarilah
modul ini.

24
 BAB I I
PEMELAJARAN

C. Rencana Pemelajaran

Kompetensi : Membuat Dokumen HTML sesuai dengan spesifikasi

Tanda
Tempat Alasan
Jenis Kegiatan Tanggal Waktu Tangan
Belajar Perubahan
Guru
Menetapkan pemakaian dan
struktur dokumen

Membuat struktur dokumen

dengan bahasa HTML

Membuat dokumen dengan

menambahkan objek

D. Kegiatan Belajar

3. Kegiatan Belajar 1:
Menetapkan pemakaian dan struktur dokumen

h. Tujuan Kegiatan Pemelajaran

5. Kegunaan dari dokumen dan audiens diidentifikasi
6. Bahasa HTML yang tepat yang akan digunakan pada dokumen dan audiens
ditetapkan
7. Struktur dasar dokumen sesuai persyaratan pengguna dirancang
8. Site map dokumen dikem-bangkan dan dikonfirmasikan dengan klien

i. Uraian Materi 1
1. HTML ( Hypertext Markup Language)
HTML atau Hypertext Marksup Language merupakan salah satu format yang
digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman
web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan
disebut sebagai Markup Language yakni bahasa yang mengandung tanda
(tag) tertentu yang digunakan untuk mengatur format tampilan suatu
dokumen.

25
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan
untuk mentransfer data atau document yang berformat HTML dari web
server ke browser (I nternet Explorer, Netscape Navigator, NeoPlanet, dll).
Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan
melihat halaman web.
Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks
editor biasa. Namun sekarang ini di pasaran terdapat banyak sekali HTML
authoring (software yang digunakan untuk membuat atau mendesain
halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage
sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak
akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun
software-software tersebut semakin menawarkan kemudahan dalam
membuat halaman web, tetapi biasanya seseorang masih perlu untuk
mengedit halaman web tersebut secara manual. Terutama untuk halaman
web yang sangat komplek.
Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari
desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa
menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang
paling mudah adalah menggunakan Notepad. Setelah anda memahami betul
semua tag-tag dasar html, diakhir nanti kita akan belajar membuat halaman
web dengan menggunakan web tool.

Struktur Dasar HTML

Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara

tag kontainer. Yaitu diawali dengan < namatag> dan diakhiri dengan
< / namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi
elemen-elemen atau tag sebagai berikut:

< ht m l>
< head>
< t it le> Judul Halam an Web< / t it le>

< / head>

< body >

I SI Halam an WEB

< / body >

< / ht m l>

Keterangan:

< html> .. < / html> Mendefinisikan bahwa teks yang berada diantara
kedua tag tersebut adalah file HTML.

26
< head> .. < / head> Sebagai informasi page header. Di dalam tag ini kita
bisa meletakkan tag-tag TITLE, BASE, I SI NDEX,
LI NK, SCRI PT, STYLE & META.

< title> .. < / title> Sebagai titel atau judul halaman/ form. Kalimat yang
terletak di dalam tag ini akan muncul pada bagian
paling atas browser Anda (pada title bar).

< body> .. < / body> Mendefinisikan teks beserta formatnya yang hendak
ditampilkan sebagai isi halaman web. Di dalam tag ini
bisa diletakkan berbagai page attribute seperti
bgcolor, background, text, link, vlink, alink,
leftmargin dan topmargin.
Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML
sederhana. I kuti langkah-langkah berikut ini:

10. Buat direktori dengan nama latihan di drive C:. Dan selanjutnya dalam
direktori ini kita akan menyimpan semua file-file latihan kita.
11. Buka Browser, misalnya I nternet Explorer atau Netscape Navigator.
12. Buka program aplikasi teks editor misalnya dalam latihan ini adalah
Notepad.
13. Mulai baris paling atas, tuliskan:
< ht m l>
< head>
< t it le> Lat ihan 1< / t it le>
< / head>
< body>
I ni adalah halam an w eb per t am a say a.
< / body>
< / ht m l>

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

27
15. Selanjutnya pilih direktori latihan yang tadi kita buat.
16. Pada box File name, isikan nama filenya dengan Latihan1.html
17. Pada drop down list di Save as type, pilih All Files. Sehingga
tampilannya seperti berikut:

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

Untuk menjalankan kode-kode tersebut, silahkan buka browser seperti

I nternet Explorer, Mozila Firefox.

1. Klik menu File  Open

28
2. Setelah jendela Open terbuka, klik tombol Browse

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

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

29
Catatan:

 Semua dokumen HTML mempunyai ekstensi .html (atau .htm)

 Semua halaman web (homepage) mempunyai file Latihan1.html. File
Latihan1.html secara otomatis akan dipanggil ketika alamat sebuah
domain atau direktori tempat menyimpan file tersebut di buka di
browser.

Kode Warna

Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi

RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai
heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan
banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya
untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut:

Red Green Blue

FF FF 00

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

Warna Heksadesimal
White # FFFFFF
Black # 000000
Red # FF0000
Green # 00FF00
Blue # 0000FF
Magenta # FF00FF

30
 Cyan # 00FFFF
Yellow # FFFF00

Anda dapat juga membuat campuran sendiri warna-warna berdasarkan

emajinasi anda. Yang penting anda mengikuti aturan diatas.

2. Pengaturan Halaman Web dan Teks

Untuk mendapatkan halaman web yang baik anda harus melakukan

pengaturan terhadap halaman web dan teks-teks didalamnya seperti
mengatur warna latar belakang halaman, memilih jenis dan ukuran huruf,
perataan, warna teks, menambahkan gambar dll. Tag-tag di bawah ini yang
biasa digunakan dalam pengaturan halaman web dan teks:

j. < body> , digunakan mendefinisikan teks beserta formatnya yang

hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa
diletakkan berbagai page attribute seperti bgcolor, background, text,
link, vlink, alink, leftmargin dan topmargin.

 Background = digunakan untuk mengatur latar belakang dengan

gambar/ image.
 Bgcolor = digunakan untuk mengatur warna latar belakang
dokumen, dengan warna putih sebagai default-nya.
 Teks = digunakan untuk mengatur warna teks dokumen,
dengan warna hitam sebagai warna default.
 Link = Untuk mengatur warna link dokumen dengan
warna biru sebagai warna default
 Vlink = Untuk mengatur warna visited link dokumen
dengan default ungu
 Alink = digunakan untuk mengatur warna active link
dokumen dengan default merah.

k. Heading: < Hn> ..< / Hn> Digunakan untuk mengatur ukuran huruf
pada header. "n" mempunyai nilai antara 1 - 6 atau antara < H1> sampai
< H6> , dengan < H1> merupakan ukuran terbesar dan < H6> merupakan
ukuran terkecil.

contoh1_23.html

< html>
< head>
< t it le> : : : Mem buat Heading Dok u m en HTML: : : < / t it le>

31
 < / head>
< body bgcolor= # 0000 00 t ex t = # FFFFFF>
< h1> Headng Tingk at 1 < / h1>
< h2> Headng Tingk at 2 < / h2>
< h3> Headng Tingk at 3 < / h3>
< h4> Headng Tingk at 4 < / h4>
< h5> Headng Tingk at 5 < / h5>
< h6> Headng Tingk at 6 < / h6>
< / body >
< / ht m l>

Hasilnya akan terlihat seperti:

l. Paragraph Baru: < P> Digunakan untuk pindah alinea atau membuat
paragraf baru. Tag ini bisa diberi akhiran < / P> tapi juga bisa tidak diberi.
Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah,
kanan dan kiri-kanan, yaitu dengan attribut ALI GN. Attribut align
mempunyai nilai: LEFT, RI GHT, CENTER dan JUSTIFY.

m. Line Break: < BR> Digunakan untuk pindah ke baris baru.

32
n. No Line Break: < NOBR> Bila digunakan tag ini maka teks yang
panjang tidak secara otomatis pindah baris bawahnya bila baris pertama
sudah terlalu panjang.

o. Font < FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag
FONT mempunyai attribut, yaitu: SI ZE, FACE, COLOR.

 SI ZE: Digunakan untuk mengatur ukuran font. Ukuran font yang

digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil
dan 7 merupakan ukuran terbesar.

 FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa
memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh
koma. Bila terdapat spasi yang terletak pada nama font maka harus
digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus
dipertimbangkan apakah font yang kita gunakan pada halaman web
kita nantinya akan terdapat pada komputer pengguna yang lain
(pengakses web kita). Pendeknya kita tidak usah menggunakan font-
font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila
Anda ingin menggunakan font yang sedikit "aneh" Anda bisa
menggunakan graphic.

 COLOR: Digunakan untuk mengatur warna font. Didefinisikan

dengan menggunakan nilai RGB/ HEX atau bisa juga langsung
menggunakan nama warna (red misalnya).

contoh1_24.html

< ht m l>
< head>
< t it le> : : : Mengat ur Uk ur an, Jenis dan Warna Font : : : < / t it le>
< / head>
< body >
< font size= 1 Face= arial color = red> Uk uran font 1< / fon t > < b r>
< font size= 2 Face= arial color = green> Uk uran font 2 < / font > < br>
< font size= 3 Face= arial color = blue> Uk uran font 3 < / font > < br>
< font size= 4 Face= v erdana color = red> Uk uran font 4 < / font > < br>
< font size= 5 Face= v erdana color = blue> Uk uran font 5 < / font > < br>
< font size= 6 Face= t ahom a color= green> Uk uran font 6 < / font > < br>
< font size= 7 Face= t ahom a color= red> Uk u ran font 7 < / font > < br>
< / body >
< / ht m l>

Hasilnya akan terlihat

33
 Contoh lainnya:
< font size= 2 face= "t im es_new_r om an " color = "# 0 066cc">

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

text". Attribut sama dengan attribut FONT. Tag FONT akan
mengoverwrite setting pada BASEFONT.
Contoh:
< basefont size= 2 face= "arial,helv et ica" color= "# ff0000" >

Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang
berhubungan dengan pengaturan teks, yaitu:

Perhatian: Semua tag di bawah ini membutuhkan tap penutup.

< B> Bold text

<I> I talic text
< U> Underscore
< TT> Typewriter
< S> Strikeout - draws a line through the text
< PRE> Preformatted Text < DFN> Definition
< BLI NK> Text berkedip (lebih baik jangan digunakan)
< STRONG> Strong
< ADDRESS>
I talic
< CI TE> Digunakan untuk quoting text

34
 < CODE> Monospaced font (digunakan bila Anda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML
Anda)
< SAMP> Monospaced font (digunakan bila Anda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML
Anda)
< KBD> Monospaced font (digunakan bila Anda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML
Anda)
< BI G> Ukuran teks akan lebih besar satu ukuran
< SMALL> Ukuran teks akan lebih kecil satu ukuran
< SUP> Membuat tekssuperscript
< SUB> membuat tekssub script
< ABBREV> Abbreviations
< ACRONYM> Untuk akronim
< PERSON> Digunakan untuk indexing
< Q> Membuat short inline quotation
< VAR> Membuat variable name, selalu dalam italics.

q. < HR> , digunakan untuk membuat garis horisontal. Tag ini mempunyai
atribut SI ZE, WI DTH, ALI GN dan NOSHADE.
Atribut SI ZE digunakan untuk menentukan panjang garis dalam satuan
pixel. Atribut WI DTH digunakan untuk menentukan ketebalan garis.
Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan
tanpa bayang-bayang 3-D.

contoh1_25.html
< ht m l>
< head>
< t it le> : : : Mem buat Garis Horisont al: : : < / t it le>
< / head>
< body bgcolor= # fffccc>
< font size= 1 Face= t ahom a color= blue> Ahlan Wa Sahlan< / f ont >
< hr size= 1 widt h= 15 0 align= left >
< h1> < cen t er> ww w.sm k n1- k ot abek asi.com < / h 1>
< hr size= 5 align= cent er noshade>
< / body >
< / ht m l>

Hasilnya tampak sebagai berikut:

35
r. LI STS

Daftar/ list adalah merupakan kumpulan teks yang disusun sedemikian

rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga
berupa tanda-tanda khusus/ symbol.
Terdapat tiga tipe list yang dapat digunakan, yaitu:
 Unordered Lists: < UL> Untuk membuat daftar item dengan tanda
bullet (tidak bernomor). List entries didefinisikan dengan tag < LI> .
Pada jenis ini tidak memerlukan pengurutan data.
Bentuk item tanda pada Unordered List dapat diubah dengan
menggunakan atribut TYPE kedalam tag < UL> dengan nilai
“circle” untuk bentuk lingkaran tengahnya putih, “square” untuk
bentuk kotak padat hitam dan “disc” bentuk lingkaran pada warna
hitam.

contoh1_26.html

< ht m l>
< head>
< t it le> : : : Mem buat Undordered List : : : < / t it le>
< / head>
< body >
< b> < font size= 3 Face= t ah om a color= blue>
Jurusan TI K y ang ada di SMKN 1 Kot a Bek asi ada 3 Program St udi:
< / b>
< hr size= 2 widt h= 15 0 align= left >

36
 < ul t y pe= circle>
< li> Mult im edia
< / ul>
< ul t y pe= square>
< li> RPL
< / ul>
< ul t y pe= disc>
< li> TKJ
< / ul>
< / font >
< / body >
< / ht m l>

Hasil dari kode di atas adalah:

 Ordered Lists: < OL> Juga digunakan untuk membuat daftar item
bernomor, dengan tiap item dapat menggunakan angka arab atau
romawi. List entries juga didefinisikan dengan < LI> tag. Atribut
yang ada pada Ordered List adalah TYPE dan START.

contoh1_27.html

< ht m l>
< head>
< t it le> : : : Mem buat Ordered List : : : < / t it le>
< / head>
< body >

37
< b> < font size= 2 Face= t ah om a color= black >
SMKN 1 Kot a Bek asi m em ilik i 3 Jurusan: < / b>
< hr size= 2 widt h= 15 0 align= left >
< ol t y pe= 1>
< li> TI K
< li> Mesin
< li> Ot om ot if
< / ol>
< hr size= 3 widt h= 50 0>
< b> < font size= 2 Face= t ah om a color= black >
Jurusan TI K m em ilik i 4 LAB Kom put er : < / b>
< ol st art = 4>
< li> LAB. Mult im edia
< li> LAB. RPL
< li> LAB. TKJ
< / ol>
< / font >
< / body >
< / ht m l>

Hasil dari kode di atas adalah:

Untuk attribut TYPE, dapat juga menggunakan:

1- Default numbers, 1, 2, 3, etc.

38
 A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I - Romawi huruf besar. I , I I, II I , etc.
i- Romawi huruf kecil , i, ii, iii, etc.

 Definition Lists: < DL> , digunakan untuk menjelaskan istilah-

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

contoh1_28.html
< ht m l>
< head>
< t it le> : : : Mem buat Definit ion List : : : < / t it le>
< / head>
< body >
< dl>
< dt > Bagian Pert am a.
< dd> I si dari Bagian Pert am a.
< dt > Bagian Kedua.
< dd> I si dari Bagian Kedua
< / dl>
< / body >
< / ht m l>

Hasil dari kode di atas adalah:

 Preformatted Text: < PRE> . Digunakan untuk mengatur format

tampilan agar sesuai dengan aslinya.

39
 contoh1_29.html
< ht m l>
< head>
< t it le> Aplik asi dari &lt ; pre&gt ; t ag< / t it le>
< / head>
< body >
< h3> t anpa m enam bahk an pre< / h3>
Berak it -
rak it k e hulu
berenang- renag
k et epian, bersak it - sak it
dahulu, bersenag- senang k em udian
< p> < h3> dengan m enggunak an pre< / h3>
< pre>
Berak it -
rak it k e hulu
berenang- renag
k et epian, bersak it - sak it
dahulu, bersenag- senang k em udian
< / pre>
< / body >
< / ht m l>

Hasil dari kode di atas adalah:

 Extended Quotations: < BLOCKQUOTE> , digunakan untuk

membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.

contoh1_30.html
< ht m l>
< head> < t it le> : : : Mem buat Block quot e: : : < / t it le> < / head >

40
 < body >
< h3> Pengat uran Tek s< / h3>
< block qout e>
Unt uk m engat ur halam an web y ang baik , pengat uran t ek s dapat dilak uk an
dengan m enggunak an block qou t e .
< / block qout e>
< / body >
< / ht m l>

Hasilnya tampak seperti bnerikut ini:

3. Hypertext Link

Digunakan untuk membuat link/ penghubung antara suatu halaman dengan

halaman lain, ke URL lain, juga digunakan dalam satu halaman untuk
berpindah ke sub judul yang lain atau ke lokasi tertentu dalam satu halaman
yang sama.
Sintak tag link adalah sebagai berikut:
< a h re f= u r l_ t u j u a n > n a m a _ lin k < / a >

url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan
nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link
atau tombol penghubung. Tulisan yang terletak antara < A> dan < / A>
akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag
< body> . Adapun macam-macam link adalah sebagai berikut:

Link ke Dokumen Lain

Untuk membuat link/ penghubung dengan target ke dokumen/ halaman yang

berbeda, anda harus membuat dokumen yang dituju/ target dan disimpan
dalam direktori tertentu, baik pada direktori yang sama atau berbeda dengan
dokumen yang aktif sekarang. Untuk mencoba membuat link, silahkan buat
script berikut dan beri nama dengan link_dokumen_lain.html.
< ht m l>
< head>

41
 < t it le> : : : Lat ihan Mem buat Link Ke Dok um en Lain : : : < / t it le>
< / head>
< body bgcolor= # ffffd0>
< font face= arial size= 6 color= t ah om a>
< b> .: : : SMKN 1 Kot a Bek asi: : : . < br>
< font face= arial size= 4 color= blue>
< i> Suk ses it u didapat dari usaha dan k erj a k eras sert a doa< / i>
< font face= arial size= 1 color= t ah om a>
< hr size= 2 widt h= 10 0 align= left color= blue>
| < a href= link _dok um en_lain.ht m l> H o m e< / a>
| < a href= proli.ht m l> Program Keahlian< / a>
| < a href= ek st ra.ht m l> Ek st ra Kurik uler < / a> |
< hr> < p> < fon t face= v erdana size= 4 color= orange>
Ahlan wa Sahlan di web k am i ...
< / body >
< / ht m l>

Buat lagi file berikut dan beri nama dengan proli.html

< ht m l>
< head>
< t it le> : : : Lat ihan Mem buat Link Ke Dok um en Lain : : : < / t it le>
< / head>
< body bgcolor= # ffffd0>
< font face= arial size= 6 color= t ah om a>
< b> .: : : SMKN 1 Kot a Bek asi: : : . < br>
< font face= arial size= 4 color= blue>
< i> Suk ses it u didapat dari usaha dan k erj a k eras sert a doa< / i>
< font face= arial size= 1 color= t ah om a>
< hr size= 2 widt h= 10 0 align= left color= blue>
| < a href= link _dok um en_lain.ht m l> H o m e< / a>
| < a href= proli.ht m l> Program Keahlian< / a>
| < a href= ek st ra.ht m l> Ek st ra Kurik uler < / a> |
< hr> < p> < fon t face= v erdana size= 4 color= br own>
Program Keahlian< br >
< font size= 1 >
< ul t y pe= circle> < li> Rek ay asa Perangk at Lunak
< li> Mult im edia
< li> Tek nik Kom put er dan Jaringan
< li> Tek nik Mek anik Ot om ot if
< li> Tek nik Bodi Ot om ot if
< li> Tek nik Pem esinan
< li> Tek nik Las< / ul>
< / body >
< / ht m l>

Untuk melengkapi latihan kali ini, buat juga file berikut dan beri nama
ekstra.html
< ht m l>

42
< head>
< t it le> : : : Lat ihan Mem buat Link Ke Dok um en Lain : : : < / t it le>
< / head>
< body bgcolor= # ffffd0>
< font face= arial size= 6 color= t ah om a>
< b> .: : : SMKN 1 Kot a Bek asi: : : . < br>
< font face= arial size= 4 color= blue>
< i> Suk ses it u didapat dari usaha dan k erj a k eras sert a doa< / i>
< font face= arial size= 1 color= t ah om a>
< hr size= 2 widt h= 10 0 align= left color= blue>
| < a href= link _dok um en_lain.ht m l> H o m e< / a>
| < a href= proli.ht m l> Program Keahlian< / a>
| < a href= ek st ra.ht m l> Ek st ra Kurik uler < / a> |
< hr> < p> < fon t face= v erdana size= 4 color= orange>
Ek st ra Kurik uler< br>
< font size= 1 >
< ul t y pe= circle>
< li> Pram uk a
< li> Rohis
< li> PMR
< li> Pask ibra
< li> Box er
< / ul>
< / body >
< / ht m l>

Hasil dari kode-kode diatas adalah sebagai berikut:

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

43
Link ke bagian tertentu dalam dokumen yang sama

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

atau dapat ditulis lengkap:

< a href= ” belaj ar_php.ht m l# php” > Bab 1 < / a>

dan untuk nama anchornya:

< a nam e= ” php” > Ada apa dengan PHP?< / a>

Link ke alamat URL atau Website

Untuk membuat link ke alamat URL adalah dengan menambahkan:

http:/ / nama_URL.

Contoh:

< a href= ” ht t p: / / w ww.dik t i.org” > ww w.dik t i.org< / a>

< a href= ” ht t p: / / w ww.sm k n1- k bk s.com ” > w ww.sm k n1- k bk s. com < / a>

Link ke Alamat Email

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

Untuk membuat link ke alamat email hanya menambahkan atribut

mailto:alamat_email ke dalam tag < A HREF>

Misalnya:

< A HREF= "m ailt o: sm kn1- kbks.yahoo.com "> Kirim em ail< / a>

Link File yang akan didow nload

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

tersebut. Format penulisannya adalah < a href= nama_file>

45
 Misal:

< a href= ” ant ivirus.zip”> Download ant i virus< / a>

< a href= ” lat ihan.doc” > Download lat ihan Htm l< / a>
< a href= ” m ysql.exe” > Download MYSQL< / a>

4. Menyisipkan Gambar/ I mages

Digunakan untuk menampilkan image atau animasi gif pada halaman web
Anda. Tag yang digunakan adalah

< im g src= ” nam a file gam bar” >

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

contoh1_31.html
< ht m l>
< head>
< t it le> : : : m enam pilk an im ages: : : < / t it le>
< / head>
< body >
< b> < font size= 2 Face= t ah om a color= black >
< im g src= "gam bar1. j pg" alt = "aplik asi 3dm ak s">
< im g src= "ict .j pg" hspace= 10 v space= 5 widt h= 200 height = 254
align= "cent er " border= 2>
< / font >
< / body >
< / ht m l>

Tampilan dari contoh diatas adalah sebagai berikut:

46
5. Layout Halaman Web dengan Tabel ( Table)

Table merupakan cara untuk menampilkan informasi dalam halaman web

dengan bentuk kolom dan baris.
Membuat Tabel

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

 < TABLE>
Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut:
 align - perataan: rata kiri (left), tengah (center) atau kanan (right).

47
  valign – mengatur bentuk perataan secara vertikal
 bgcolor – mengatur warna latar belakang (background) dari tabel.
 background – menentukan gambar yang digunakan sebagai
background tabel
 color – Untuk mengatur warna suatu sel dalam tabel
 border – menentukan ukuran border tabel (dalam pixel).
 row span – menggabungkan beberapa baris
 colspan – menggabungkan beberapa kolom
 cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
 cellspacing – mengatur spasi/jarak antar cell (dalam pixel).
 w idth – menentukan lebar tabel dalam pixel atau percent.
 height – Menentukan tinggi tabel

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

 < TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya
adalah:
 align – untuk menentukan perataan kolom
 background – untuk menentukan image yang digunakan sebagai latar
belakang dari kolom.
 bgcolor – untuk menentukan warna latar belakang
 colspan - lihat gambar contoh
 height – untuk mengatur ukuran tinggi cell dalam pixels.
 now rap – untuk membuat supaya isi dari kolom tetap berada pada
satu baris.
 row span - lihat gambar contoh
 valign – untuk mengatur perataan vertikal: top, middle atau bottom.
 w idth – untuk menentukan lebar kolom dalam pixel atau percen.

contoh1_32.html
< ht m l>
< head>
< t it le> : : : Pem buat an Table: : : < / t it le>
< / head>
< body >

48
< font face= arial size= 2 color= t ah om a>
< t able>
< t r>
< t d> I ni cont oh t abel sederhana t anpa border< / t d>
< / t r>
< / t able>
< p>
< t able border= 1>
< t r>
< t d> I ni cont oh t abel sederhana dengan border< / t d>
< / t r>
< / t able>
< p>
< t able border= 1>
< t r>
< t d> No.< / t d>
< t d> Nam a< / t d>
< t d> Alam at < / t d >
< / t r>
< t r>
< t d> 1.< / t d>
< t d> Wahy u< / t d>
< t d> Bek asi< / t d>
< / t r>
< t r>
< t d> 3.< / t d>
< t d> Lesm ono< / t d>
< t d> Kranj i< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya adalah sebagai berikut:

49
contoh1_33.html
< ht m l>
< head>
< t it le> .: : : Belaj ar Mem buat Tabel: : : . < / t it le>
< / head>
< body >
< t able border= "1" cellpadding= "0 " cellspacing= "0" border color= "# ffffff"
widt h= "10 0% " height = "11 5">
< t r>
< t d widt h= "100% " height = "11 5" bordercolor= " # C0C0C0"
bgcolor= " # BDCED9 "> &nbsp; < / t d>
< / t r>
< / t able>
< font size= "1"> &nbsp; < / font >
< t able border= "0" cellpadding= "0 " cellspacing= "0" border color= "# 11111 1"
widt h= "10 0% " height = "43 1">
< t r>
< t d widt h= "23% " height = "307 " v align= "t op" >
< t able border= "1" cellpadding= "0 " cellspacing= "0"
bordercolor = "# BDCED9" widt h = "94% " height = "245 ">
< t r>
< t d widt h= "100% " height = "24 4"
bordercolor = "# C0C0C0 " bgcolor= "# BDCED9"> &nbsp; < / t d>
< / t r>
< / t able>
< font size= "1"> &nbsp; < / font >
< t able border= "1" cellpadding= "0 " cellspacing= "0"
bordercolor = "# BDCED9" widt h = "94% " height = "152 ">
< t r>
< t d widt h= "100% " height = "19 " bgcolor= "# BDCED9"
bordercolor = "# C0C0C0 "> &nbsp; < / t d>
< / t r>
< t r>
< t d widt h= "100% " height = "13 2" bordercolor= " # C0C0C0" >
&nbsp; < / t d>
< / t r>
< / t able>
< / t d>
< t d widt h= "77% " height = "307 " v align= "t op" >
< t able border= "1" cellpadding= "0 " cellspacing= "0" border color= "# ffffff"
widt h= "97% " height = "411 ">
< t r>
< t d widt h= "64% " height = "109 "> &nbsp; < / t d>
< t d widt h= "36% " height = " 109 "> &nbsp; < / t d>
< / t r>
< t r>
< t d widt h= "64% " height = "301 " rowspan = "2" > &nbsp; < / t d>
< t d widt h= "36% " height = "24" bgcolor= " # BDCED9 "
bordercolor = "# C0C0C0 ">
< font size= "1"> &nbsp; < / font > < / t d>

50
 < / t r>

< t r>
< t d widt h= "36% " height = "277 " bordercolor= "# C0C0 C0"> &nbsp;
< / t d>
< / t r>
< / t able>
< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya adalah:

51
Menambahkan Judul Tabel

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

52
diletakkan dibawah suatu tabel dengan menambahkan atribut
ALI GN= BOTTOM pada elemen caption tersebut.
Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen
TABLE HEADER < TH> . Judul kolom terletak pada sel disebelah kiri atau
kolom pertama suatu tabel, sedangkan judul baris terletak pada baris
pertama suatu tabel. Judul baris atau judul kolom akan tercetak tebal.

contoh1_34.html
< ht m l>
< head>
< t it le> : : : Pem buat an Judul Table: : : < / t it le>
< / head>
< body >
< font face= arial size= 2 color= m aroon >
< t able border= 1>
< capt ion align= t op> < b> < u > Daft ar Alam at < / u> < / b> < / capt ion>
< t r>
< t h widt h= 40 > No.< / t d>
< t h widt h= 150 > Nam a< / t d>
< t h widt h= 200 > Alam at < / t d>
< / t r>
< t r>
< t d align= cent er> 1. < / t d>
< t d> Wahy u< / t d>
< t d> Bek asi< / t d>
< / t r>
< t r>
< t d align= cent er> 2. < / t d>
< t d> Lesm ono< / t d>
< t d> Kranj i< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya akan tampak sebagai berikut:

53
contoh1_35.html
< ht m l>
< head>
< t it le> : : : Pem buat an Judul Table: : : < / t it le>
< / head>
< body >
< font face= arial size= 2 color= m aroon >
< t able border= 1>
< capt ion align= bot t om > < b> < u> Daft ar Alam at < / u> < / b > < / capt ion>
< t r>
< t h widt h= 60 align= left > No.< / t d>
< t d widt h= 150> 1.< / t d>
< t d widt h= 200> 2.< / t d>
< / t r>
< t r>
< t h align= left > Nam a< / t d>
< t d> Wahy u< / t d>
< t d> Lesm ono< / t d>
< / t r>
< t r>
< t h align= left > Alam at < / t d>
< t d> Bek asi< / t d>
< t d> Kranj i< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya akan tampak seperti berikut:

Mengatur Lebar dan Tinggi Suatu Tabel

Lebar tabel diatur dengan menggunakan atribut WI DTH dan untuk mengatur
tinggi table dengan atribut HEI GHT. Jika atribut WI DTH dan HEI GHT
digunakan dalam elemen TABLE nilainya menunjukkan lebar dan tinggi tabel

54
terhadap BROWSER sedangkan jika digunakan pada elemen TH dan TD,
nilainya merupakan lebar dan tinggi dari suatu tabel. Nilai atribut
mengunakan ukuran % (max 100%) dan ukuran pixel.

contoh1_36.html
< ht m l>
< head>
< t it le> : : : Mengat ur Lebar dan Tinggi Tabel: : : < / t it le>
< / head>
< body >
< font face= arial size= 2 color= t ah om a>
< t able border= 1 widt h= 100% >
< capt ion align= t op> < b> < u > Daft ar Alam at < / u> < / b> < / capt ion>
< t r>
< t h widt h= 40 > No.< / t d>
< t h widt h= 150 > Nam a< / t d>
< t h widt h= 200 > Alam at < / t d>
< / t r>
< t r>
< t d align= cent er> 1. < / t d>
< t d height = 50> Wahy u< / t d>
< t d height = 50> Bek asi< / t d>
< / t r>
< t r>
< t d align= cent er> 2. < / t d>
< t d height = 30> Lesm on o< / t d>
< t d height = 30> Kran j i< / t d >
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya tampak sebagai berikut:

Perataan dalam Tabel

55
Perataan dalam tabel dikenal dua macam, yaitu perataan secara horizontal
dengan atribut ALI GN dan perataan vertikal dengan atribut VALI GN, serta
untuk membuat suatu tabel posisinya menjadi ditengah-tengah layar browser.

contoh1_37.html
< ht m l>
< head>
< t it le> : : : Mem buat Perat aan Table: : : < / t it le>
< / head>
< body >
< font face= arial size= 2 color= t ah om a>
< t able border= 1 align= cent er>
< capt ion align= t op>
< b> Daft ar Alam at < / b>
< hr widt h= 11 0>
< / capt ion>
< t r>
< t h widt h= 40 > No.< / t d>
< t h widt h= 150 > Nam a< / t d>
< t h widt h= 200 > Alam at < / t d>
< / t r>
< t r>
< t d align= cent er> 1. < / t d>
< t d align= cent er v align= m iddle height = 50 > Wahy u< / t d>
< t d align= right v align= t op height = 50> Bek asi< / t d>
< / t r>
< t r>
< t d align= cent er> 2. < / t d>
< t d align= left v align= baseline height = 50> Lesm ono< / t d>
< t d align= left v align= bot t om height = 50 > Kran j i< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

Hasilnya seperti gambar berikut:

Membuat Warna Pada Tabel

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

Atribut Fungsi
BORDERCOLOR Mengubah warna keseluruhan border
BORDERCOLORLI GHT Mengubah warna border bagian atas dan kiri
BORDERCOLORDARK Mengubah warna border bagian bawah dan kanan

Penggabungan Baris/ Kolom

Untuk menggabungkan baris/ kolom (merge) digunakan atribut COLSPAN dan

ROWSPAN. COLSPAN digunakan untuk menggabung-kan beberapa kolom
menjadi 1 sedangan ROWSPAN menggabungkan beberapa baris menjadi 1.

Cellpadding Dan Cellspacing

CELLPADDI NG digunakan untuk mengatur spasi antara border dengan

tulisan, sedangkan CELLSPACI NG digunakan untuk mengatur spasi antar dua
buah sel.

contoh1_38.html
< ht m l>
< head>
< t it le> : : : Cont oh Merge, Cell dan Pedd: : : < / t it le>
< / head>
< body >
< t able border= 2 align= cent er bordercolor= # 0000 00 bgcolor= # FFFFFF cellspacing= 4
cellpadding= 8 widt h= 100% >
< font face= arial size= 2 color= black >
< t r>
< t d bgcolor= # EEEEEE colspan = 2 align= cent er > Kelas< / t d>
< t d bgcolor= # EEEEEE align= cent er rowspan= 2 > Ket erangan < / t d>
< / t r>
< t r>
< t d widt h= 200 bgcolor= # DFF9F9 align= cent er > I < / t d>
< t d widt h= 200 bgcolor= # DFF9F9 align= cent er > I I < / t d>
< / t r>
< t r>
< t d> Ali< / t d>
< t d> Um ar < / t d>
< t d align= cent er> Lunas< / t d>
< / t r>
< / t able>
< / body >
< / head>
< / ht m l>

Hasilnya adalah sebagai berikut:

57
6. Membuat Frames

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

Aturan penggunaan atribut ROWS dan COLS pada frameset adalah:

< fram eset row s= ” t inggi_baris,t inggi_baris,…” >

< fram eset cols= ” lebar_ kolom , lebar_ kolom ,…” >

Atribut-atribut yang digunakan dalam FRAME adalah:

Atribut Fungsi
FRAMESET COLS Membuat frame vertikal dengan lebar kolom
tertentu
FRAMESET ROWS Membuat frame horizontal dengan tinggi baris
tertentu
FRAME SRC Memasukkan dokumen HTML ke dalam FRAME
NOFRAME Memasukkan body teks untuk browser yang

58
 tidak dapat menampilkan frame

Model-model frame dan contoh pembuatannya:

1
< FRAMESET cols= "* ,140">

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

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

2
< FRAMESET cols= "100,* ">

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

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

3
< FRAMESET rows= "100,* ">
< FRAME SRC= "homepage.htm" NAME= "Frame1">

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

< / FRAMESET>

4
< FRAMESET rows= "* ,60">

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

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

5
< FRAMESET rows= "* ,60">

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

< FRAMESET cols= "50%,50% ">
< FRAME SRC= "menu.htm" NAME= "Frame2">
< FRAME SRC= "menu2.htm" NAME= "Frame3">
< / FRAMESET>
< / FRAMESET>

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

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

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

59
 7
< FRAMESET cols= "50%,50% ">

7 < FRAMESET rows= "50%,50%">

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

8
< FRAMESET rows= "15%,70%,15% ">
< FRAME SRC= "homepage.htm" NAME= "Frame1">
< FRAMESET cols= "15%,70%,15% ">

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

< FRAME SRC= "menu2.htm" NAME= "Frame3">
< FRAME SRC= "menu3.htm" NAME= "Frame4">
< / FRAMESET>
< FRAME SRC= "homepage.htm" NAME= "BIG">
< / FRAMESET>
< / FRAMESET>

Latihan Menggunakan FRAME

Buat file baru dengan nama latihan6.html, header.html, kiri.html, kanan.html,

bab1.html dan bab2.html dengan isi masing-masing sebagai berikut:

File latihan6.html

< ht m l>
< head>
< t it le> .: : Lat ihan Mem buat Fram e: : .< / t it le>
< / head>
< fram eset row s= 20% ,* fram espacing= "0" border= " 0" fram eborder= "0">
< fram e nam e= at as src= header.ht m l scrolling = "no" noresize>
< fram eset cols= 25% ,* fram espacing= "0" border= " 0" fram eborder= "0">
< fram e nam e= k iri sr c= k iri. ht m l scrolling= "no" noresize>
< fram e nam e= k anan src= k anan.ht m l scrolling= "n o" noresize>
< / fram eset >
< / fram eset >
< / ht m l>

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

60
< frameset cols= 30%,* > mempunyai arti bahwa frame bawah dibagi lagi
menjadi dua kolom dengan ukuran 30% untuk frame kiri dan sisanya untuk
frame sebelah kanan.
Kalau file tersebut dijalankan hasilnya sebagai berikut:

Tampilan tersebut dikarenakan file-file yang dibutuhkan oleh frame belum

dibuat atau tidak ditemukan. Oleh karena itu lengkapi file-file sebagai berikut:

File h e a d e r.h t m l

< ht m l>
< head>
< t it le> .: : Lat ihan Mem buat Fram e: : .< / t it le>
< / head>
< body bgcolor= # EEEEEE>
< font face= arial size= 6 color= t ah om a>
< b> .: : : SMKN 1 Kot a Bek asi: : : . < / b> < br>
< font face= arial size= 4 color= orange>
< i> Suk ses it u didapat dari usaha dan k erj a k eras sert a doa< / i>
< / body >
< / ht m l>

61
File k ir i.h t m l

< ht m l>
< head>
< t it le> : : : Lat ihan Mem buat Fram e: : : < / t it le>
< / head>
< body bgcolor= # ffffff>
< t able border= 1 widt h= "22 8" height = " 28" cellspacing= 0>
< t r>
< t d widt h= "218 " height = "22 " bordercolor= " # 8000 80" bgcolor= "# BDCED9" >
< b> < font face= " Tahom a" size= "2" > &nbsp; &nbsp; M e n u< / font > < / b>
< / t d>
< / t r>
< t r>
< t d widt h= "218 " height = "22 " bordercolor= " # 8000 80">
< b> < font face= " Tahom a" size= "2" > &nbsp; &nbsp;
< a href= k anan.ht m l t arget = k anan> H o m e< / a> < / font > < / b> < / t d>
< / t r>
< t r>
< t d widt h= "218 " height = "22 " bordercolor= " # 8000 80">
< b> < font face= " Tahom a" size= "2" >
&nbsp; &nbsp; < a href= proli.ht m l t arget = k anan> Program Keahlian< / a>
< / font > < / b> < / t d>
< / t r>
< t r>
< t d widt h= "218 " height = "22 " bordercolor= " # 8000 80">
< b> < font face= " Tahom a" size= "2" >
&nbsp; &nbsp; < a href= ek st ra.ht m l t arget = k anan> Ek st ra Kurik uler< / a>
< / font > < / b> < / t d>
< / t r>
< / t able>
< / body >
< / ht m l>

File k a n a n .h t m l

< ht m l>
< head>
< t it le> : : : Lat ihan Mem buat Link Ke Dok um en Lain : : : < / t it le>
< / head>
< body bgcolor= # ffffff>
< t able border= 1 bordercolor = bordercolor= " # 800 080"
cellspacing= 0 cellpadding= 50 w idt h= 750 height = 450>
< t r>
< t d v align= t op>
< font face= v erdana size= 4 color= blue>
Selam at dat ang di web k am i ...
< / t d>
< / t r>
< / body >
< / ht m l>

62
File p roli.h t m l

< ht m l>
< head>
< t it le> : : : Link Dok um en Lain: : : < / t it le>
< / head>
< body bgcolor= # ffffff>
< t able border= 1 bordercolor = bordercolor= " # 800 080"
cellspacing= 0 cellpadding= 50 w idt h= 750 height = 450>
< t r>
< t d v align= t op>
< font face= v erdana size= 4 color= blue>
Program Keahlian: < br>
< font size= 1 >
< ul t y pe= circle>
< li> Rek ay asa Perangk at Lunak
< li> Tek nik Elek t ronik a I ndust r i
< li> Tek nik Pem bangk it Tenaga List rik
< li> Tek nik Mek anik Ot om ot if
< li> Tek nik Bodi Ot om ot if
< li> Tek nik Pem esinan
< li> Tek nik Las
< / ul>
< / t d>
< / t r>
< / body >
< / ht m l>

File e k st ra .h t m l

< ht m l>
< head>
< t it le> : : : Link Dok um en Lain: : : < / t it le>
< / head>
< body bgcolor= # ffffff>
< t able border= 1 bordercolor = bordercolor= " # 800 080"
cellspacing= 0 cellpadding= 50 w idt h= 750 height = 450>
< t r>
< t d v align= t op>
< font face= v erdana size= 4 color= blue>
Ek st ra Kurik uler: < br >
< font size= 1 >
< ul t y pe= circle>
< li> Seni Bela Diri Tapak Suci
< li> Keagam aan
< li> Sepak Bola
< li> Bola Bask et
< li> Kepeny iaran
< / ul>
< / t d>
< / t r>

63
 < / body >
< / ht m l>

Hasilnya adalah sebagai berikut :

7. Form Html

Digunakan untuk menerima masukan/ input dari user dan memproses hasil
inputan tersebut di server. User menerima informasi melalui sejumlah elemen
yang disebut kontrol. Kontrol ini dapat berupa TEXTBOX, CHECKBOX, RADIO
BUTTON, PUSH BUTTON, LI ST MENU dan lainnya.

Sintak penulisan form adalah:

< form m et hod= ” post at au get ” act ion= ” program _pem roses” >
elem en- elem en FORM
< / form >

Atribut METHOD mempunyai dua nilai yaitu POST dan GET. Metode GET
mengirimkan data pada server dengan cara meletakkan data pada bagian
akhir URL yang ditunjuk. Metode POST mengirimkan datanya secara terpisah.
Jika data masukan banyak, lebih disarankan untuk menggunakan metode
post. Atribut ACTI ON berisi URL dari program yang dipanggil oleh form
tersebut.

TextBOX

Textbox digunakan untuk memasukkan data string sebanyak satu baris. Cara
penulisannya adalah:

< input t y pe= t ex t nam e= t ex t box 1 size= x x v alue>

64
Atribut TYPE untuk menentukan jenis masukan yang berupa TEXT (textbox),
NAME adalah identifikasi/ penamaan elemen ini untuk dibaca oleh program
pemroses nantinya. Atribut VALUE untuk memberi nilai suatu masukan.
Sedangkan atribut SI ZE digunakan untuk menentukan panjang atau
banyaknya karakter sebuah masukan. Untuk menyembunyikan masukan yang
ditulis user dalam textbox, dapat menggunakan atribut TYPE= ”PASSWORD”,
sehingga tampilan dalam textbox menjadi karakter “* ”.

contoh1_39.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan TEXTBOX: : : < / t it le>
< / head>
< body >
< h3> BUKU TAMU< / h3>
< form m et hod= post >
< t able border= 0>
< t r>
< t d widt h= 70> Nam a< / t d>
< t d widt h= 10> : < / t d>
< t d widt h= 30> < input t y pe= t ex t nam e= nam a size= 30> < / t d>
< / t r>
< t r>
< t d widt h= 70> Alam at < / t d>
< t d widt h= 10> : < / t d>
< t d widt h= 30>
< input t y pe= t ex t nam e= alam at size= 30> < / t d>
< / t r>
< t r>
< t d widt h= 70> Hom epage< / t d>
< t d widt h= 10> : < / t d>
< t d widt h= 30>
< input t y pe= t ex t nam e= page size= 30> < / t d>
< / t r>
< / t able>
< / form >
< / body >
< / ht m l>

Tampilan untuk contoh diatas adalah:

65
CHECKBOX

CheckBox digunakan untuk memberi beberapa pilihan kepada user, sehingga

user dapat memilih salah satu, lebih dari satu pilihan atau tidak memilih sama
sekali.

Tata cara penulisannya adalah:

< input t y pe= check box nam e= check box 1 v alue= on at au off check ed> Pilihan 1

Dimana attribut TYPE menentukan jenis masukan yang berupa CHECKBOX,

NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses
nantinya, VALUE menentukan apakah pada keadaan awal checkbox ini terpilih
(ON) atau tidak (OFF). Parameter CHECKED menentukan apakah checkBOX
sedang dicentang atau tidak

contoh1_40.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan CHECKBOX: : : < / t it le>
< / head>
< body >
< form m et hod= post >
Pilih Program Keahlian Anda< br>
< h3> Daft ar Program Keahlian Ju rusan TI K SMKN 1 Kot a Bek asi < / h3>
< p>
< input t y pe= check box nam e= c1 check ed> Rek ay asa Perang k at Lunak < br>
< input t y pe= check box nam e= c2> Mu lt im edia< br >
< input t y pe= check box nam e= c3> Tek nik Kom put er dan Jaringan< br>
< / form >
< / body >
< / ht m l>

Hasil contoh diatas adalah sebagai berikut:

66
RADI O Button

Digunakan untuk membuat pilihan. User dapat memilih salah satu pilihan
yang tersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu
pilihan yang disediakan. Atribut CHECKED memberi tanda bahwa pilihan
tersebut sedang diaktifkan, VALUE adalah harga dari pilihan

contoh1_41.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan RADI O But t on: : : < / t it le>
< / head>
< body >
< form m et hod= post >
< h3> Pilih Salah sat u< br>
Pendidik an Terak hir Anda: < / h3>
< input t y pe= radio v alue= " SD" check ed nam e= sek olah> SD< br>
< input t y pe= radio v alue= " SLTP" nam e= sek olah> SLTP< br>
< input t y pe= radio v alue= " SMU" nam e= sek olah> SMU< br>
< input t y pe= radio v alue= " S1" nam e= sek olah > S1< br >
< input t y pe= radio v alue= "S2" nam e= sek olah > S2< br >
< / form >
< / body >
< / ht m l>

Hasil contoh program tersebut adalah:

67
DROP-DOWN Menu

Digunakan untuk membuat menu pilihan. Cara menuliskannya adalah:

< select nam e= m enu1>
< opt ion v alue- pilihan1> Pilihan 1
< opt ion v alue- pilihan2> Pilihan 2
< opt ion v alue- pilihan3> Pilihan 3
dst …
< / select >

Tag OPTI ON berfungsi untuk menampilkan pilihan-pilihan yang akan tersedia.

Setiap pilihan ditentukan isinya dengan parameter VALUE.

contoh1_42.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan DROP- DOWN Menu: : : < / t it le>
< / head>
< body >
< form m et hod= post >
< h3> Pilih Salah sat u< br>
Jurusan: < / h 3>
< select nam e= j uru san>
< opt ion v alue= TI select ed> Tek nik I nform at ik a< / opt ion>
< opt ion v alue= MO> Mesin Ot om ot if< / opt ion>
< opt ion v alue= MP> Mesin Perk ak as< / opt ion >
< opt ion v alue= ML> Mesin Las< / opt ion>
< / select >
< / form >
< / body >
< / ht m l>

68
Tampilan contoh diatas adalah sebagai berikut:

TEXT Area

Elemen ini digunakan untuk menampilkan masukan berupa textbox yang

mampu menerima masukan berupa string lebih dari satu baris.
Sintaknya adalah:

< t ex t area nam e= t ex t box 1 rows= x x cols= x x > I si Awal

< / t ex t area>

Parameter NAME adalah identifikasi dari elemen ini untuk dibaca oleh
program pemroses nantinya, COLS dan ROWS adalah ukuran kolom dan baris
textbox ini dalam banyaknya karakter

contoh1_43.html
< ht m l>
< head>
< t it le> : : : Form I nput dengan Tex t Area: : : < / t it le>
< / head>
< body >
< form m et hod= post >
< h5> Kirim k an k rit ik dan saran Anda< / h5>
< t ex t area nam e= t ex t box 1 rows= 5 cols= 40>
< / t ex t area>
< / form >
< / body >

69
< / ht m l>

Tampilan contoh diatas adalah sebagai berikut:

Elemen Tombol

Elemen ini digunakan untuk menampilkan tombol yang dapat berupa tombol
SUMBIT untuk mengirimkan data ke pemroses di server, RESET untuk
mengulangi/ mengosongkan isian form atau NORMAL yang tidak berfungsi
apapun sebelum kita mendefinisikan sebuah fungsi untuknya.
Format penulisannya adalah:
< input t y pe= subm it v alue= OK nam e= t om bol1 > unt uk t om b ol SUBMI T
< input t y pe= reset v alue= reset nam e= t om bol2> u nt uk t om b ol RESET

contoh1_44.html
< ht m l>
< head>
< t it le> : : : Buk u Tam u: : : < / t it le>
< / head>
< body >
< h3> < p align= cent er> BUKU TAMU< / p > < / h3>
< form m et hod= post >
< t able border= 0 align= cent er widt h= 500>
< t r>
< t d widt h= 11% > Nam a< / t d>
< t d widt h= 3% > : < / t d>

70
 < t d widt h= 86% > < input t y pe= t ex t nam e= nam a size= 20> < / t d>
< / t r>
< t r>
< t d widt h= 11% > Alam at < / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 86% >
< input t y pe= t ex t nam e= alam at size= 20> < / t d>
< / t r>
< t r>
< t d widt h= 11% > Em ail< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 86% > < input t y pe= t ex t nam e= em ail size= 20> < / t d>
< / t r>
< t r>
< t d widt h= 11% > Websit e< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 86% >
< input t y pe= t ex t nam e= pg size= 20> < / t d >
< / t r>
< t r>
< t d widt h= 11% v align= t op> Hom epagek u< / t d>
< t d widt h= 3% v align= t op> : < / t d>
< t d widt h= 86% >
< input t y pe= radio v alue= hebat nam e= saran check ed>
Bagus Sek ali< br>
< input t y pe= radio v alue= bagus nam e= saran >
Bagus< br>
< input t y pe= radio v alue= biasa nam e= saran>
Biasa Aj a< br> < / t d>
< / t r>
< / t able>
< p align= cent er>
< input t y pe= subm it v alue= k irim nam e= b1>
< input t y pe= reset v alue= bat al nam e= b2>
< hr>
< / form >
< / body >
< / ht m l>

Hasilnya adalah:

71
j. Rangkuman

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

k. Tugas
1. Kunjungi beberapa website (minimal 10 website). Amatilah website yang
telah anda kunjungi. Yang harus anda amati adalah meliputi:
a. Layout,
 Seberapa besar daya tarik dan unsur seni dari web yang anda amati.
 Bagaimana model layout web tersebut, berbentuk tabel atau frame?
b. Content/ I si, Apa saja isi dari web tersebut.
Silahkan catat hasil pengamatan anda.
2. Teliti profil sebuah organisasi/lembaga (misal: KUD, Pemerintah Kota, Sekolah
dan lain-lain). Catat semua hasil penelitian anda. Dari hasil penelitian anda,
silahkan buat website statis yang isinya adalah profile dari yang anda teliti.

72
 Bila perlu tawarkan website buatan anda kepada organisasi/lembaga
tersebut.
3. Silahkan cari dan download tutorial berbahasa I nggris di I nternet yang
berhubungan dengan web programming, (misalnya PHP, ASP dan lain-lain).

l. Tes Formatif

7. Jelaskan masing-masing fungsi dari tag-tag berikut:

e) < h1>
f) < p>
g) < br>
h) < hr>
8. Apakah fungsi dari link, form dan frame dalam pembuatan web?
9. Apa perbedaan frame dan frameset?
10. Apa perbedaan checkbox dan radio button?
11. Apakah fungsi dari tombol Submit dan Reset?
12. Buatlah halaman web seperti terlihat di gambar. Dalam gambar tersebut, jika
ada penekanan tombol kirim, maka hasilnya akan dikirimkan ke e-mail anda.

m. Kunci Jaw aban Formatif 1

7. Fungsi dari tag:

73
 a. < h1> : digunakan untuk mengatur ukuran huruf pada header dengan
angka 1 berarti mempunyai ukuran paling besar.
b. < p> : digunakan untuk berpindah alinea atau membuat paragraf baru
c. < br> : Digunakan untuk pindah baris baru.
d. < hr> : digunakan untuk membuat garis horisontal
8. Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain,
dapat berupa teks maupun gambar.
Form, digunakan untuk mengumpulkan informasi dari pengunjung
(berinteraksi dengan pengunjung) karena form dapat berupa model isian
yang harus diisi pengunjung dan akan dibca oleh pemilik web.
Frame, merupakan pembagi halaman.
9. Frame adalah dokumen yang terdapat di dalam frameset dengan border yang
mengelilinginya. Sedangkan frameset, adalah suatu frame yang dapat
menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa
frameset yang lainnya.
10. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk
menentukan pilihan dari suatu daftar pilihan. Perbedaanya terletak pada
jumlah pilihan yang dapat dipilih. Pada checkbox, pengunjung halaman web
dapat memilih beberapa dari daftar pilihan, namun dengan radio button,
pengunjung hanya berhak menentukan satu pilihan saja.
11. Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan
dalam form untuk selanjutnya diolah oleh server. Dan tombol reset berfungsi
untuk mengosongkan dan atau mengembalikan ke nilai default data yang ada
dalam form.
12. Kode untuk halaman web tersebut adalah:
< ht m l>
< head>
< t it le> : : : Form Order: : : < / t it le>
< / head>
< body >
< font face= v erdana>
< h3 align= cent er> FORM ORDER BARANG
< form act ion= " m ailt o: j ack _delphi@y ahoo.com " m et hod= post >
< t able border= 2 cellpadding= 1>
< t r>
< t d rowspan= 2 > < font size= 2> I sik an Dat a- dat a Anda< / t d>
< t d> < input t y pe= t ex t nam e= "Nam aDepan" size= 20 > < / t d>
< t d> < input t y pe= t ex t nam e= "Nam aBelak ang" size= 20 > < / t d>
< t d> < input t y pe= t ex t nam e= "Usia" size= 3> < / t d>
< / t r>

< t r>
< t d> < font size= " - 2 "> Nam a Depan< / font > < / t d>
< t d> < font size= " - 2 "> Nam a Ak hir< / fon t > < / t d>

74
 < t d> < font size= " - 2 "> Um ur< / font > < / t d >
< / t r>
< t r>
< t d rowspan= 3 > < font size= 2> Bagaim ana Menghubungi Anda?< / t d>
< t d colspan= 4 v align= t op> < font size= 2> Alam at Rum ah :
< t ex t area nam e= "Jalan " rows= 2 cols= 30 > < / t ex t area> < / t d >
< / t r>
< t r>
< t d colspan= 2 > < font size= 2> Kot a:
< input t y pe= t ex t nam e= "k ot a" size= 20> < / t d>
< t d colspan= 2 > < font size= 2> Negara:
< input t y pe= t ex t nam e= "negara" size= 25> < / t d>
< / t r>
< t r>
< t d colspan= 2 > < font size= 2> Kode Pos:
< input t y pe= t ex t nam e= "k odepos" size= 10> < / t d>
< t d colspan= 2 > < font size= 2> Nom or Telepon
< input t y pe= t ex t nam e= "t elp1" size= 4> -
< input t y pe= t ex t nam e= "t elp2" size= 11> < / t d>
< / t r>

< t r>
< t d> < font size= 2> Credit Card
< input t y pe= radio nam e= CC v alue= Visa check ed> Visa
< input t y pe= radio nam e= CC v alue= Mast erCard check ed> M/ C< / t d>
< t d colspan= 2 align= cent er>
< input t y pe= t ex t nam e= nom or CC1 size= 4>
< input t y pe= t ex t nam e= nom or CC2 size= 4>
< input t y pe= t ex t nam e= nom or CC3 size= 4>
< input t y pe= t ex t nam e= nom or CC4 size= 4> < / t d>
< t d colspan= 2 align= cent er> < font size= 2> Tanggal Berak hir:
< input t y pe= t ex t nam e= blnak hir size= 2 >
< input t y pe= t ex t nam e= t hnak hir size= 2> < / t d>
< / t r>
< t r>
< t d> < font size= 2> Jenis Barang < / t d>
< t d colspan= 4 > < font size= 2>
< select m ult iple nam e= Merchandise size= 1>
< opt ion select ed> Pent ium I V
< opt ion> Pent ium I I I
< opt ion> Monit or
< opt ion> CD- ROM
< opt ion> Kam era Digit al
< opt ion> Pr int er
< opt ion> Mouse
< opt ion> Scanner
< / select > < / t d>
< / t r>
< t r>
< t d align= cent er colspan= 5>
< h1> Ter im ak asih At as Order Anda! < / h1>

75
 < / t d>
< / t r>
< / t able> < p>
< cent er>
< input t y pe= "subm it " v alue= "Kirim ">
< input t y pe= "Reset " v alue= "Hapus I sian">
< / cent er>
< / form >
< / body >
< / ht m l>

n. Lembar Kerja 1

Alat dan Bahan

PC (Personal Computer) yang telah dilengkapi dengan web browser dan editor
teks Notepad.

Kesehatan dan Keselamatan Kerja

7) Berdo’alah sebelum memulai kegiatan belajar.

8) Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
9) Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung
dengan benar.
10) Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik
di dekat komputer (magnet, handphone, dan sebagainya).
11) Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain
game.
12) Setelah selesai, matikan komputer sesuai prosedur yang aman!

Langkah Kerja

7) Siapkanlah semua peralatan yang akan digunakan!

8) Periksa semua kabel penghubung pada PC.
9) Nyalakan PC dan jalankan program editor teks notepad dan web browser
I nternet Explorer.
10) Kerjakan Tugas 1 dan Tes Formatif 1 di atas.
11) Apabila menemui kesulitan dalam memahami materi yang ada, segera
tanyakan kepada instruktur.
12) Setelah selesai, matikan komputer dan rapikan seperti semula.

76
4. Kegiatan Belajar 2:
Membangun halaman web dengan bahasa pemrograman berbasis web

h. Tujuan Kegiatan Pemelajaran

7) Peserta diklat mampu mengenali objek-objek web, tag-tag HTML dan script-
script pada pemrgraman berbasis web.
8) Peserta diklat mampu menggunakan dan menerapkan fungsi dan operator
algoritma pemrograman pada aplikasi yang dibuat
9) Peserta diklat mampu menentukan struktur data pada aplikasi yang dibuat
10) Peserta diklat mampu menentukan basis data pada aplikasi yang dibuat
11) Peserta diklat mampu melakukan kombinasi objek-objek web, tag-tag HTML
dan script yang lain untuk membuat halaman-halaman web.
12) Peserta diklat mampu membangun halaman web dengan bahasa
pemrograman berbasis web

i. Uraian Materi 2
12. Pendahuluan

Website dapat dibedakan menjadi dua yaitu Web Statis dan Web Dinamis.
Web Statis adalah web yang berisi informasi-informasi yang bersifat statis
(tetap), sedangkan Web Dinamis adalah web yang menampilkan informasi
yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan
user.
Biasanya untuk web statis yang ditonjolkan adalah sisi tampilan yang banyak
mengandung grafis sehingga untuk merancang web statis tidak diperlukan
kemampuan pemrograman yang handal. Yang dibutuhkan hanya kemampuan
design grafis/ web dan cita rasa seni belaka. Sedangkan untuk web dinamis
yang banyak ditonjolkan adalah pengolahan data sehingga dibutuhkan
kemampuan dalam pemrograman web.
Ada dua jenis pemrograman web, yaitu Server Side Programming dan Client
Side Programming. Pada Server Side Programming, semua sintaks dan
perintah program yang diberikan akan dijalankan/ diproses di Web Server,
kemudian hasilnya dikirimkan ke browser pengguna dalam bentuk HTML
biasa. Sehingga pengguna tidak dapat melihat kode asli yang ditulis dalam
bentuk server side programming tersebut. Yang tergolong dalam server side
programming seperti: CGI / Perl, Active Server Pages, Java Server Page, PHP,
ColdFussion dan lain-lain.
Sebaliknya, pada Client Side Programming semua sintaks dan perintah
program dijalankan di web browser, sehingga ketika client meminta dokumen
yang mengandung script, script tersebut akan diambil dari web server
 kemudian dijalankan di web browser yang bersangkutan. Contoh dari client
side programming seperti: JavaScript, VbScript, HTML.

13. Pengenalan PHP

PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan
pada serverside. Artinya semua sintaks yang kita berikan akan sepenuhnya
dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya
saja. Ketika seorang pengguna internet membuka suatu situs yang
menggunakan fasilitas server side scripting PHP, maka terlebih dahulu server
yang bersangkutan akan memproses semua perintah PHP di server lalu
mengirimkan hasilnya dalam format HTML ke web server pengguna internet
tadi. Sehingga kode asli yang ditulis dengan PHP tidak terlihat di browser
pengguna.
PHP merupakan software yang open source bebas. Jadi anda dapat merubah
source code dan mendistribusikan secara bebas dan gratis. PHP juga dapat
berjalan lintas platform, yaitu dapat digunakan dengan sistem operasi
(Windows dan Linux) dan web server apapun (misalnya: PWS, I I S, Apache
dll).
Adapun kelebihan-kelebihan dari PHP yaitu:
 Mudah dibuat dan berkecepatan tinggi
 PHP dapat berjalan lintas platform, yaitu dapat berjalan dalam sistem
operasi dan web server apapun.
 Dapat digunakan secara gratis.
 Termasuk bahasa yang embedded, yakni dapat diletakkan dalam tag
HTML.
 Termasuk server side programming, sehingga kode asli/ source code PHP
tidak dapat dlihat di browser pengguna, yang terlihat hanya kode dalam
format HTML.
 Dapat memanfaatkan sumber-sumber aplikasi yang dimiliki oleh server,
seperti misalnya untuk keperluan database connection. PHP dapat
melakukan koneksi dengan berbagai database seperti MySQL, Oracle,
Sybase, mSQL, Solid, Generic ODBC, Postgres SQL, dBase, Direct MS-
SQL, Velocis, I BM DB2, I nterbase, Frontbase, Empress, dan semua
database yang mempunyai profider ODBC seperti misalnya MS Access dan
lain-lain.
 PHP dapat melakukan semua aplikasi program CGI , seperti mengambil
nilai form, menghasilkan halaman web yang dinamis, mengirimkan dan
menerima cookies.
 PHP juga mendukung komunikasi dengan layanan lain melalui protokol
I MAP, SNMP, NNTP, POP3 dan HTTP dan lainnya.
14. I nstalasi Program

Untuk menjalankan PHP, dibutuhkan hal-hal berikut:

 Web Server
 Program aplikasi PHP
 Database server
 Program Aplikasi Database

Ke-empat komponen tersebut mutlak harus ada, jadi sebelum melakukan

pemrograman dan menjalankan PHP, komponen-komponen diatas harus
dinstall terlebih dahulu.
Untuk keempat software tersebut anda bebas memilih menurut yang anda
suka. Namun dalam modul ini yang akan dibahas hanya PhpTriad saja.
Kenapa PhpTriad? Karena disamping software tersebut adalah gratis juga
karena dalam satu paket program ini sudah terdiri dari 4 software yang kita
butuhkan, yaitu web server (dalam hal ini, Apache), Program PHP, Database
Server MySQL dan program aplikasi MySQL. Penginstalan PhpTriad sangat
mudah, sekali install semua program tersebut secara otomatis terinstall juga.
Cara instalasi PhpTriad adalah sebagai berikut:
j. Persiapkan master program PhpTriad. Jika belum ada, silahkan download
di internet. Anda dapat meminta bantuan search engine untuk mencari
program PhpTriad atau anda dapat mengunjungi situs
http:/ / www.download.com.
k. Setelah proses download selesai, buka windows explorer kemudian double
klik icon PhpTriad2-2-1.exe dan ikuti petunjuk yang diberikan.
 Proses instalasi ini pada dasarnya akan mengekstrak file-file ke direktori
tertentu, yaitu c:\ apache.
l. Setelah itu muncul jendela instalasi seperti pada gambar. Kotak licence
agreement tersebut merupakan kotak yang harus dibaca terlebih dahulu
karena berisikan
pengertian-
pengertian umum
mengenai lisensi
perangkat lunak
ini. Jika anda se-
tuju dengan
lisensi yang diberi-
kan, baru kita bisa
melanjutkan
instalasi dengan
klik tombol I Agree. Proses instalasi akan berjalan selama beberapa
menit. Tunggu proses tersebut hingga selesai.
m. Setelah proses selesai akan muncul pesan Setup Completed seperti pada
gambar dibawah ini. Klik tombol close untuk mengakhiri proses instalasi.

n. Selanjutnya lakukan beberapa langkah untuk mengaktifkan semua

komponen PhpTriad dalam komputer anda. Langkah pertama, jalankan
PHPTriad Control Panel, yang dapat dilakukan dari Start Menu
Program  PHP Triad  PHPTriad Control Panel. Atau melalui
I nternet Explorer, ketikkan http:/ / localhost:1005/ pada address bar.
PHPTriad Control Panel digunakan untuk melakukan pengaturan
terhadap berbagai fasilitas yang ada pada PhpTriad. Setelah control panel
dijalankan, akan muncul tampilan seperti pada gambar dibawah ini.
o. Setelah PhpTriad Control Panel aktif, lakukan langkah sebagai berikut:

 Klik “I nstall Apache as Service”.

Proses ini akan melakukan instalasi Apache sebagai service software.

 Klik “Start Apache”.

Proses ini akan melakukan aktifasi Apache sebagai webserver.

 Klik “Start MySQL”.

Pilih versi sistem operasi yang aktif dan sesuaikan dengan versi yang
ada pada komputer anda.

 Klik “Open Site w / default Brow ser”.

Bagian ini digunakan untuk mengecek apakah PHP sebagai sebuah
service sudah dapat digunakan Jika berhasil, maka akan muncul
tampilan sebagai berikut:
p. Langkah selanjutnya yang perlu anda lakukan adalah mengubah atau
mengatur direktori/ folder default untuk dokumen anda. I ni dilakukan agar
ketika kita membuka I nternet Explorer dan mengetikkan
http:/ / localhost pada address bar, maka yang akan dibuka adalah
document root yang posisinya di folder yang telah kita tentukan. Jika tidak
kita atur, maka default untuk document root adalah di direktori
“C:\ apache\ htdocs”. Artinya, dokumen yang diakses secara otomatis
oleh browser ketika memanggil localhost adalah dokumen-dokumen yang
berada pada folder tersebut. Dan secara otomatis pula, file yang pertama
kali dijalankan adalah file yang memiliki nama index.html, atau
index.htm atau index.php yang terdapat dalam folder tersebut.

Untuk mengatur document root, yang perlu anda lakukan adalah:

 Buat direktori/ folder baru yang akan kita jadikan document root.
Misalnya: “c:\ latihan”.

 Jalankan program aplikasi teks editor Notepad. Kemudian buka file

“httpd.conf” yang terletak di “c:\ apache\ conf”. Cari teks
DocumentRoot ”C:\ Apache\ htdocs” kemudian ganti teks tersebut
dengan DocumentRoot ”C:\ Latihan”. Simpan file ini dan tutup
kembali notepad anda. Sekarang anda bisa membuat file-file PHP yang
disimpan dalam direktori menurut selera anda sendiri.
q. Langkah terakhir yang tidak kalah pentingnya adalah mengaktifkan
MySQL. Jalankan windows explorer kemudian masuk ke direktori/ folder
C:\ apache\ mysql\ bin dan cari file winmysqladmin.exe. Jalankan file ini
untuk mengaktifkan MySql. Jika file ini belum pernah dijalankan
sebelumnya, maka akan muncul window form yang meminta ke anda agar
memasukkan nama user dan password. Isilah sesuai dengan keinginan
anda sendiri
dan jangan
lupa dicatat
agar anda tidak
melupakannya.

Setelah anda
mengisinya, klik
ok. Dan
winmysql akan
segera aktif (terlihat di taskbar sebelah kanan dengan icon berwarna
hijau, jika berwarna merah berarti tidak jalan)
r. Ok, proses instalasi semua software yang kita butuhkan sekarang telah
selesai. Dan sekarang mari kita lanjutkan ke materi berikutnya.
15. Penulisan Script PHP

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

 <?
Script PHP
?>
 < ?php
Script PHP
?>
 < script language= ” php” >
Script PHP
< / scr ipt >

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

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

/ * k om ent ar * /
/ / k om ent ar
# k om ent ar

 Karakter adalah semua bentuk huruf, angka, spasi, tanda kontrol atau
simbol yang terdapat dalam tombol keyboard.

16. Variable

Variabel digunakan untuk menyimpan data sementara dan nilainya bisa

berubah-ubah setiap kali program dijalankan. Dalam PHP setiap nama
variable diawali tanda dollar ($) dan diikuti dengan nama variabelnya, tidak
memandang data tersebut apakah integer, real maupun string, PHP otomatis
akan mengkonversi data menurut tipenya. Misalnya nama variable a dalam
PHP ditulis dengan $a. Jenis suatu variable ditentukan pada saat jalannya
program dan tergantung pada konteks yang digunakan. Aturan penamaan
variabel dalam PHP:
 Diawali dengan tanda dolar ($)
 Penamaan variabel bersifat case sensitive
 Nama variabel hanya bisa diawali dengan huruf atau garis bawah, baru
dapat diikuti dengan beberapa huruf atau angka maupun garis bawah
yang panjangnya tidak terbatas.
 Tidak boleh menggunakan tanda baca.
 Tidak boleh menggunakan reserved word PHP seperti misalnya echo,
print, dan lain-lain.

Variabel dalam PHP tidak harus dideklarasikan terlebih dahulu sebelum

digunakan.
Contoh-contoh penulisan variabel:

Benar Salah
$variabel $var!abel
$_pilih $-pilih
$te93 $93te
$ini_itu $ini-itu

contoh2_26.php
< ht m l>
< head>
< t it le> Variabel dalam PHP< / t it le>
< body >
< ?php
/ / v ariabel bert ipe int eger
$a= "5";

/ / v ariabel bert ipe real

$b= "2.5";
/ / v ariabel bert ipe st ring
$k om ent ar= "Selam at Dat ang di PHP";
echo ( "Nilai v ariabel a adalah = $a < br> ") ; / / v ariabel bert ipe int eger
echo ( "Nilai v ariabel b adalah = $b < br> ") ; / / v ariabel bert ipe real
echo ( "Nilai v ariabel k om ent ar adalah = $k om ent ar < br> ") ; / / v ariabel bert ipe st ring
$hasil= $a+ $b;
echo ( "Hasil j um lah a dan b adalah = $hasil < br> ") ; / / v ariabel bert ipe double
$t gl = dat e( "d F Y") ; / / v ariabel bert ipe t anggal
$nam a = "SMK PGRI 3 Malang";
$garis= "= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ";
echo "< p> ";
echo $garis." < br> ";
echo $k om ent ar. " Di Lab ". $nam a. "< br> Belaj ar dengan giat y a.... < br> ";
echo $garis." < br> ";
echo "Tanggal ".$t gl;
?>
 hasilnya adalah:

17. Konstanta

Konstanta adalah variabel yang nilainya tetap.

Sintak:
Define ( “ nam a_k on st ant a” , ” nilai_k onst ant a” ) ;
Contoh:
< html>
< head>
< /head>
< body>
<?
Define (“kampus”,”SMK PGRI 3 Malang”);
Echo kampus;
?>
< / body>
< /html>

18. Type Data

PHP mengenal 4 tipe data skalar dan 2 tipe data compound. Tipe data skalar
adalah tipe data integer, floating point, string dan boolean. Sedangkan 2 tipe
data compound adalah array dan object. yaitu:
g. I nteger, tipe data yang menyatakan bilangan bulat.
h. Floating point/ double, tipe data yang menyatakan bilangan real/ pecahan
i. String, menyatakan tipe data teks yang berisi kumpulan beberapa karakter
j. Boolean, tipe data logika yang memiliki nilai true dan false.
k. Array adalah tipe data terstruktur yang berguna untuk menyimpan
sejumlah data yang bertipe sama.
l. Objek, merupakan instansiasi dari suatu class.
19. Konversi Type Data

PHP menyediakan perintah untuk melakukan konversi tipe data ke tipe data
yang lain dengan menggunakan perintah sebagai berikut:

settype(value,datatype)

dimana:
- value adalah nilai yang akan dikonversikan
- datatype adalah tipe data yang dikonversikan

Perhatikan contoh berikut:

contoh2_27.php
< ht m l>
< head>
< t it le> .: : Konv er si Ty pe Dat a: : . < / t it le>
< / head>
< body >
< font face= t ahom a size= 2 >
< ?php
$bay ar= "500.7 7 Rupiah";
print ( "Tipe Dat a St ring: $bay ar < br> \ n ") ;
set t y pe( $bay ar,"double") ;
print ( "Tipe Dat a Double: $bay ar < br> \ n") ;
set t y pe( $bay ar,"int eger") ;
print ( "Tipe Dat a I nt eger: $bay ar < br> \ n") ;
?>
< / body >
< / ht m l>

Hasil dari script diatas adalah:

20. Operator

Operator adalah simbol/ tanda yang digunakan untuk melakukan operasi-

operasi matematis atau operasi string. Sedangkan operand adalah data yang
dioperasikan atau dimanipulasi. Operator dapat dikelompokkan dalam 4
kategori, yaitu:
 e. Operator Aritmatika/ Arithmetic Operator
f. Operator Penugasan/ Assignment Operator
g. Operator Pembanding/ Comparison Operator
h. Operator Logika/ Logical Operator

 Operator Aritmatika/ Arithmetic Operator

Adalah operator yang digunakan dalam operasi matematika. Yang
termasuk operator ini adalah:
Ope r a t or Ope r a si
+ Penj um lahan
- Pengurangan
* Perk alian
/ Pem bagian
% Modulus
++ I ncrem ent 1
-- Decrem ent 1

 Operator Penugasan/ Assignment Operator

Operator penugasan berfungsi untuk memberikan nilai ke suatu variabel

atau variabel ke variabel. Simbol operator ini adalah “sama dengan” (= ).
Daftar operator penugasan seperti dalam tabel berikut:

Operator Fungsi Contoh

x + = 5;
 x = x + 5;
Unt uk m enam bah nilai v ariabel disebelah
+=
k iri dengan nilai sebelah k anan
x - = 5;
 x = x - 5;
Unt uk m engurangi nilai v ariabel disebelah
-=
k iri dengan nilai disebelah k anan
x .= ” php” ;
 x = x .” php” ;
Unt uk m elak uk an operasi penggabungan
.= ( concat enat ion) ant ara v ariabel disebelah
k iri dengan nilai disebelah k anan
x / = 5;
 x = x / 5;
Unt uk m em bagi nilai v ariabel di sebelah
/=
k iri dengan nilai sebelah k anan
X% = 5;
 x = x % 5;
Sisa hasil bagi ant ara n ilai v ariabel
%=
disebelah k iri dengan nilai disebelah k anan
X&= 5;
 x = x &5;
Unt uk m elak uk an operasi logik a AND
&= ant ara nilai v ariabel disebelah k iri dengan
nilai disebelah k anan
X| = 5;
 x = x | 5;
Unt uk m elak uk an operasi logik a OR an t ara
|= nilai v ariabel disebelah k iri dengan nilai
disebelah k anan
X^ = 5;
 x = x ^ 5;
Unt uk m elak uk an operasi logik a XOR
^= ant ara nilai v ariabel disebelah k iri dengan
nilai disebelah k anan

 Operator Pembanding/ Comparison Operator

Operator ini disebut juga operator relasional, yaitu operator yang

digunakan untuk membandingkan antara dua atau lebih operand (nilai,
 variabel, atau pernyataan) dan menghasilkan nilai True atau False.
Operator-operator yang termasuk operator pembanding adalah:

Operator Fungsi Contoh

$a= = $b;
== Sam a Dengan  t ru e , j ik a $a sam a
dengan $b
$a= = = $b;
 t ru e , j ik a $a sam a
=== I dent ik dengan $b, dan k eduany a
m em puny ai t ipe dat a
y ang sam a;
$a! = $b; at au
! = at au $a< > $b;
 t ru e , j ik a $a t idak sam a
Tidak Sam a Dengan
<>
dengan $b;
$a! = = $b;
 t ru e , j ik a $a t idak sam a
!= = Tidak I dent ik dengan $b, at au
k eduany a t idak m em ilik i
t ipe dat a y ang sam a;
$a< $b;
< Kurang Dari  t ru e , j ik a $a k urang dari
$b;
$a> $b;
> Lebih Dari  t ru e , j ik a $a lebih besar
dari $b;
$a< = $b;
<= Kurang Dari at au Sam a Dengan  t ru e , j ik a $a k urang dari
at au sam a dengan $b;
$a> = $b;
>= Lebih Dari at au Sam a Dengan  t ru e , j ik a $a lebih dari
at au sam a dengan $b;

 Operator Logika/ Logical Operator

Operator logika digunakan untuk membandingkan dua atau lebih

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

Operator Fungsi Contoh

&& at au $a && $b;
 t ru e , j ik a $a dan $b bernilai t ru e
Operasi Logik a AND
AND
$a | | $b; at au
$a or $b;
 t ru e , j ik a $a at au $b, salah sat u ny a
| | at au OR Operasi Logik a OR
bernilai t ru e ;
$a x or $b;
XOR Operasi Logik a XOR  t ru e , j ik a $a at au $b bernilai t ru e dan
salah sat uny a bernilai fa lse ;
! $a;
 t ru e , j ik a $a t idak benilai t ru e ;
! Operasi Logik a NOT
 Operator Bitw ise
Operator bitwise digunakan untuk operasi bilangan biner. Operator-
operator yang termasuk operator bitwise adalah:

Operator Arti
& Operat or AND
| Operat or OR
^ Operat or XOR
~ Operat or NOT
<< Operat or Shift Left ( geser k iri)
>> Operat or Shift Right ( geser k anan)

 Operator I ncrement/ Decrement

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

Operator Operasi Penggunaan

++ Pre/ Post Increment + + $a atau $a+ +
-- Pre/ Post Decrement --$b atau $b--

 Operator String

Hanya ada satu operator string, yaitu operator concatenation ( .), yakni
menggabungkan dua buah atau lebih string.
Contoh
< ?php
$a = “ Hallo” ;
$b = $a.” Selam at Dt ang di PHP” ;
/ / $b berisik an “ Hallo Selam at dat ang di PHP”
?>

 Kedudukan Operator

Setiap operator mempunyai kedudukan (operator precedence) dan

prioritas masing-masing yang digunakan untuk menentukan operator
manakah yang akan dieksekusi terlebih dahulu bila dalam sebuah
pernyataan terdapat dua atau lebih operator. Contoh, misalnya ada
persamaan matematika x= 2+ 5* 7. Maka nilai x adalah 37 bukan 49. Hal
ini karena kedudukan operator perkalian lebih tinggi dari pada operator
penjumlahan sehingga 5 harus dikalikan terlebih dahulu dengan 7, baru
dijumlah dengan 2; bukan 2 ditambah 5 baru dikali 7. Kedudukan
operator-operator tersebut seperti terlihat pada tabel berikut:
 Prioritas Operator
Te rt in gg i (), { }
~ , ! , + + , - - , $, &
* , ?, %
+, -
<>, <=, >=
= = , = = = , != , != =
&
^
!
&&
||
= , + = , - = , * = , / = , &= , | = , ^ = , .=
AND ( &&)
XOR ( | | )
Te re n da h OR

21. Dasar-dasar Struktur Program I nput-Output

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

I n pu t Pr ose s Ou t pu t

I nput-Output Sederhana

Sebagai contoh, kita akan membuat program sederhana untuk menghitung

luas segitiga berdasarkan flowchart berikut:

Mulai

I nput Alas
I nput Tinggi

Output
Cetak Luas

Proses Hitung Luas Segitiga

Luas= 0,5 * Alas * Tinggi

Selesai
contoh2_28.php
< ht m l>
< head>
< t it le> .: : Lat ihan m em buat input Out put : : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
/ / Mendek larasik an dat a input
$alas= 20 ;
$t inggi= 5;

/ / Proses hit ung luas segit iga

$luassegit iga= 0 .5* $alas*
$t inggi;

/ / Cet ak hasil
echo "Besar Alas = $alas
< br> ";
echo "Besar Tinggi = $t inggi
< br> ";
echo "Luas Segi Tiga Adalah = $luassegit iga< br> ";
?>
< / body >
< / ht m l>

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

I nput-Output dengan Form

Dengan memanfaatkan form yang terdapat dalam HTML, kita dapat membuat
program yang lebih interaktif. Sebagai contoh, program di contoh 2.3 akan
modifikasi sehingga lebih interaktif.
contoh2_29.php
< ht m l>
< head>
< t it le> .: : Menghit ung Luas Segi Tiga: : .< / t it le>
< / head>
< body >
< font face= v erdana>
< cent er> < h 3> < u > Menghit ung Luas Segit iga< / u> < / h3> < / cent er>
< form act ion= luassegit iga.php m et hod= post >
< t able align= cent er bgcolor = # cedadc bordercolor= # cfdbdd cellspacing= 5 >
< t r>
< t d> Masuk k an Alas< / t d>
< t d> : < / t d>
< t d> < input t y pe= t ex t nam e= alas size= 10 > < / t d>
< / t r>
< t r>
< t d> Masuk k an Tinggi< / t d>
< t d> : < / t d>
< t d> < input t y pe= t ex t nam e= t inggi size= 10> < / t d>
< / t r>
< t r>
< t d colspan= 3 align= cent er> < input t y pe= subm it v alue= hit ung> < / t d>
< / t r>
< / t able>
< / form >
< / body >
< / ht m l>

Ketika tombol HI TUNG diklik, program memanggil file luassegit iga.php

(perhatikan pada tag < form act ion= luassegit iga.php m et hod= post > ) yang akan
digunakan untuk menampung hasil perhitungan. Maka buat lagi file dan beri
nama luassegit iga.php dan simpan dalam satu direktori.

File luassegitiga.php
< ht m l>
< head>
< t it le> .: : Hasil Perhit ungan Luas Segi Tiga: : .< / t it le>
< / head>
< body >
< font face= v erdana>
< cent er>
< h3> < u> Luas Segit iga< / u > < / h3 >
< / cent er>
< form act ion= cont oh2_ 4.php m et hod= post >
<?
$luas= 0. 5* $alas* $t inggi;
echo "< t able align= cent er bgcolor= # cedadc bordercolor = # cfdbdd cellpadding= 0> ";
echo "< t r> ";
echo "< t d> Alas< / t d> ";
echo "< t d> : < / t d> ";
echo "< t d> $alas< / t d> ";
echo "< / t r > ";
echo "< t r> ";
echo "< t d> Tinggi< / t d> ";
echo "< t d> : < / t d> ";
echo "< t d> $t inggi< / t d> ";
echo "< / t r > ";
echo "< t r> ";
echo "< t d> Luas Segi Tiga< / t d> ";
echo "< t d> : < / t d> ";
echo "< t d> $luas< / t d> ";
echo "< / t r > ";
echo "< t r> ";
echo "< t d colspan= 3 align= cent er> < input t y pe= subm it v alue= ulang> < / t d> " ;
echo "< / t r > ";
echo "< / t able> " ;
?>
< / form >
< / body >
< / ht m l>
 Hasilnya adalah:

dan tampilan setelah tombol hitung di-klik adalah:

22. Struktur Kontrol/ Kendali

Statement I F
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara
bersyarat atau sesuai dengan kondisi tertentu. Statement I F dibagi dua,
statement I F tunggal dan statement I F majemuk. Cara penulisan statement
I F tunggal adalah sebagai berikut:
if ( k ondisi)
{
st at em ent ;
}
Contoh:

Mulai

I nput Nilai

T
Apakah nilai > 70

Y
Kompeten

Selesai

contoh2_30.php
< ht m l>
< head>
< t it le> .: : Cont oh Selek si Kondisi: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< form act ion= nilai.php
m et hod= post > Masuk k an Nilai:
< input t y pe= t ex t nam e= nilai
size= 2 > < p>
< input t y pe= subm it
v alue= Proses>
< / form >
< / body >
< / ht m l>
Untuk memproses file diatas, buat script berikut dan simpan dengan nama
nilai.php
File nilai.php
< ht m l>
< head>
< t it le> .: : Cont oh Selek si Kondisi: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "Nilai Uj ian anda: $nilai< br> ";
if ( $nilai> 70)
{
echo "Anda Kom pet en< br> ";
}
?>
< / body >
< / ht m l>
Untuk statement IF majemuk atau dikenal dengan IF ... ELSE, digunakan jika
terdapat lebih dari satu kondisi yang akan dikerjakan. Sintaks struktur I F ...
Else adalah sebagai berikut:

if ( sy arat )
{
st at em ent
}
else
{
st at em ent lain
}

atau:
if ( sy arat pert am a)
{
st at em ent pert am a
}
elseif ( sy arat k edua)
{
st at em ent k edua
}
else
{
st at em ent lain
}

Mulai

I nput Nilai

T
Apakah nilai < 50

Y T
Apakah nilai < 70
Tidak Lulus

Y
Lulus dan Tidak Lulus dan
Kompeten Kompeten

Selesai
Sebagai contoh, kita modifikasi file nilai.php pada contoh 2_5 dan simpan
dengan nama nilai2.php

contoh2_31.php
< ht m l>
< head>
< t it le> .: : Cont oh Selek si Kondisi: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< form act ion= nilai2.php
m et hod= post >
Masuk k an Nilai:
< input t y pe= t ex t nam e= nilai
size= 2 > < p>
< input t y pe= subm it
v alue= Proses>
< / form >
< / body >
< / ht m l>

File nilai2.php:
< ht m l>
< head>
< t it le> .: : Cont oh Selek si Kondisi: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "Nilai Uj ian anda: $nilai< br> ";
if ( $nilai< 50)
{
echo "Anda Tidak Lulus< br > ";
}
elseif ( $nilai< 70)
{
echo "Anda Lulus Tapi Tidak Kom pet en< br> ";
}
else
{
echo "Selam at Anda Lulus
dan Kom pet en";
}
?>
< / body >
< / ht m l>

Hasilnya adalah seperti gambar di atas:

Statement SWI TCH
Statement SWITCH digunakan untuk membandingkan suatu variable dengan
beberapa nilai serta menjalankan statement tertentu jika nilai variable sama
dengan nilai yang dibandingkan. Penggunaan statement SWI TCH hampir
sama dengan penggunaan statement I F, sehingga bisa digunakan sebagai
pengganti statement IF.
Untuk Keluar dari suatu blok statement dalam statement switch, dapat
mengunakan perintah BREAK
Struktur Switch adalah sebagai berikut:
swit ch ( v ariable)
case nilai:
st at em ent
case nilai:
st at em ant
case nilai:
st at em ent

contoh2_32.php
< ht m l>
< head>
< t it le> .: : St ruk t ur Kendali Swit ch: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
$dino= dat e( "l") ;
swit ch ( $dino)
{
case "Monday ":
$hari= "Senin" ; break ;
case "Tuesday ":
$hari= "Selasa";
break ;
case "Wednesday ":
$hari= "Rabu ";
break ;
case "Thu rsday ":
$hari= "Kam is";
break ;
case "Friday ":
$hari= "Ju m at ";
break ;
case "Sat urday ":
$hari= "Sabt u";
break ;
default :
$hari= "Minggu";
}
echo "< h3> Hari ini adalah hari < u> $ hari< / u > < / h3 > ";
?>
< / body >
< / ht m l>
Latihan-latihan
1. Membuat program penghitung discount
Program ini digunakan untuk mengetahui apakah pembeli dapat diskon
atau tidak. Besar diskon tersebut mengikuti aturan sebagai berikut: Jika
jumlah bayar  50.000 dapat diskon 5%, jika jumlah bayar  100.000
dapat diskon 10%, dan jika jumlah bayar  500.000 dapat diskon 50%.
Selain kreteria tersebut, diskonnya adalah 0%.
Untuk mengerjakan program tersebut, perhatikan flowchart berikut:

Mulai

Masukkan
Jumlah Bayar

T
 500000
JumlahBayar

Y
Diskon= 0.5* T
 100000
JumlahBayar
JumlahBayar

Y
Diskon= 0.1*
T
 50000
JumlahBayar
JumlahBayar

Y
Diskon= 0.05* Diskon= 0
JumlahBayar

TotalBayar=
JumlahBayar-Diskon

Selesai

Dari flowchart tersebut dapat kita buat script programnya, sebagai berikut:
contoh2_33.php
< ht m l>
< head>
< t it le> .: : Pr ogram Menghit ung Discou nt : : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< form > Ju m lah Bay ar
 < input t y pe= t ex t nam e= t ot albeli> < br > < br>
< input t y pe= subm it v alue= "Hit u ng Disk on ">
< / form >
< ?php
if ( isset ( $t ot albeli) )
{
$t oy ar= int v al( $t ot albeli) ;
$disk on= 0;
if ( $t oy ar> = 500 000)
$disk on= ( 0.5 * $t oy ar) ;
else
if ( $t oy ar> = 100 000)
$disk on= ( 0.1 * $t oy ar) ;
else
if ( $t oy ar> = 500 00)
$disk on= ( 0.0 5* $t oy ar) ;
else
print ( "Maaf Tidak Ada Disk on < br> \ n ") ;
print f( "Jum lah Bay ar = % d< br> \ n", $t oy ar) ;
print f( "Disk on = % d< br> \ n",$disk on) ;
$t ot albay ar= $t oy ar - $disk on;
print f( "< b> Tot al Bay ar = % d< br> < / b> \ n", $t ot albay ar) ;
}
?>
< / body >
< / ht m l>

2. Membuat Program kalkulator sederhana

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

Mulai

Masukkan
Nilai A dan B

Silahkan Pilih
Operasi Apa?

T
Pilihan=
Jumlah

Y
T
C= A + B Pilihan=
Kurang

Y
T
C= A - B Pilihan=
Kali

C= A * B C= A/ B

Hasil Adalah = C

Selesai

Dari flowchart tersebut, dapat kita buat programmnya sebagai berikut:

contoh2_34.php
< ht m l>
< head>
< t it le> : : : Operasi Arit m at ik a: : : < / t it le>
< / head>
< body >
< form act ion= operasi.php m et hod= post >
< cent er> < h 3> Operasi Arit m at ik A dan B< / h3> < / cent er >
< t able align= cent er bgcolor = # cedadc bordercolor= # cfdbdd>
< t r>
< t d> Masuk k an Nilai A < / t d>
< t d> < input t y pe= t ex t nam e= a size= 10> < / t d>
< / t r>
 < t r>
< t d> Masuk k an Nilai B < / t d>
< t d> < input t y pe= t ex t nam e= b size= 1 0> < / t d>
< / t r>
< t r>
< t d> Operasi< / t d>
< t d>
< select nam e= operasi>
< opt ion v alue= 1> Pen j um lahan [ a+ b] < / opt ion>
< opt ion v alue= 2> Pengurangan [ a- b] < / opt ion>
< opt ion v alue= 3>
Perk alian [ a* b] < / opt ion>
< opt ion v alue= 4>
Pem bagian [ a/ b] < / opt ion>
< / select >
< / t d>
< / t r>
< t r>
< t d colspan= 2 align= cent er>
< input t y pe= subm it
v alue= hit ung> < / t d>
< / t r>
< / t able>
< / form >
< / body >
< / ht m l>

Sekarang buat satu lagi program yang digunakan untuk memproses hasil
setelah ada penekenan tombol hitung. File tersebut simpan dengan nama
operasi.php.

File operasi.php
< ht m l>
< head>
< t it le> Hasil Operasi Arit m at ik a< / t it le>
< / head>
< body >
<?
if ( $operasi= = 1)
{
$c= $a+ $b;
$oper= '[ a + b] ';
}
elseif ( $operasi= = 2 )
{
$c= $a- $b;
$oper= '[ a - b] ';
}
elseif ( $operasi= = 3 )
{
$c= $a* $b;
$oper= '[ a * b] ';
}
else
{
$c= $a/ $b;
$oper= '[ a / b] ';
}
echo "Nilai A adalah = $a dan Nilai B adalah = $b< br> ";
echo "Hasil Operasi $oper adalah = $c< br> " ;
?>
< / body >
< / ht m l>

Statement WHI LE

Pernyataan ini digunakan untuk mengulangi sebuah perintah sampai jumlah

atau kondisi tertentu terpenuhi. Bentuk dasar dari statement While adalah
sebagai berikut:
while ( sy arat )
{
st at em ent
}

Arti dari statemant While adalah memberikan perintah untuk menjalankan

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

Mulai

Masukkan
Batasnya?

$genap= 0;

T
$genap < $batas

Y
Selesai
$genap= $genap+ 2

Bilanga genap dari 2 s/ d batas

adalah:$genap
contoh2_35.php

< ht m l>
< head>
< t it le> .: : Pr ogram Mencar i Bilangan Genap: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< form > Men cari Bilangan Genap Berapa:
< input t y pe= t ex t nam e= genap> < br> < br>
< input t y pe= subm it v alue= "Cari Bilangan Genap">
< / form >
< ?php
if ( isset ( $genap) )
{
$bilgen= int v al( $genap) ;
echo "Bilangan Genap dari 2 s/ d $bilgen adalah: ";
echo "< br> " ;
$gen= 0;
while ( $gen< $genap)
{
$gen= $gen+ 2;
echo "$gen";
echo " ";
}
}
?>
< / body >
< / ht m l>

Statement FOR

Perintah ini digunakan untuk mengulangi perintah dengan jumlah

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

for ( Nilai_Awal; Nilai_Ak hir; Count er)

Keterangan:

 Nilai_Awal : Batas awal perulangan

 Nilai_Akhir : Batas akhir perulangan
 Counter : Jumlah kenaikan yang akan ditambakan kepada batas awal
hingga mencapai batas akhir
contoh2_36.php

< ht m l>
< head>
< t it le> Lat ihan Perulangan dengan For< / t it le>
< / head>
< body >
Tanggal:
< select nam e= t anggal>
< opt ion v alue= 0 select ed> Tanggal
< ?php
/ / Bent uk Pilihan t anggal 1 sam pai dengan 31
for ( $i= 1; $i< 32; $i+ + )
echo "< opt ion v alue= $ i> $i" ;
?>
< / opt ion>
< / select >
< / body >
< / ht m l>

Hasilny a adalah:

Didalam struktur perulangan, terdapat beberapa pernyataan yang digunakan

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

Dengan n adalah parameter opsional yang nilainya digunakan jika

terdapat nested loop. Pernyataan break akan mengikuti urutan tingkatan
dimulai dari tingkat paling dalam menuju tingkat terluar.
 Continue, pernyataan ini digunakan untuk melewati proses iterasi dan
melanjutkan dengan iterasi berikutnya.
  Exit, pernyataan ini digunakan untuk mengakhiri seluruh proses eksekusi
yang sedang berjalan.

16. Procedure dan Fungsi

Dalam pembuatan program sering kali dibutuhkan beberapa perintah yang

digunakan berulang kali. Hal ini dapat dihindari dengan subrutin. Subrutin
adalah sekumpulan perintah yang diberi nama dan dapat dipanggil sewaktu-
waktu. Dalam pemrograman terdapat dua subrutin, yaitu prosedur dan
fungsi. Standar penulisan fungsi adalah:
funct ion nam a_fungsi( argum en)
{
k ode perint ah
}

contoh:
funct ion operasi_ j um lah( $x ,$y )
{
z= x + y ;
echo ( z) ;
}

Beberapa hal yang perlu diperhatikan dalam pembuatan fungsi, yaitu:

 Nama fungsi tidak boleh sama dengan nama-nama fungsi yang sudah ada
dalam PHP.
 Hanya boleh terdiri dari huruf, angka dan garis bawah
 Tidak boleh diawali dengan angka

contoh2_37.php
< ht m l>
< head>
< t it le> .: : Lat ihan Mem buat Fungsi: : .< / t it le>
< / head>
< body >
< font face= t ahom a size= 2 >
<?
/ / Fungsi y g dipanggil
funct ion operasi_ j um lah( $a,$b)
{
$c= $a+ $b;
echo ( "Hasil $a + $b = $c") ;
}
/ / Program Ut am a
/ / Unt uk Mem anggil Fungsi
operasi_j u m lah( 6, 3) ;
?>
< / body >
< / ht m l>
12.b. REQUI RE

Function Require digunakan untuk membaca nilai variable dan fungsi-fungsi

dari sebuah file lain.
Cara penulisan function Require adalah:

require( nam afile) ;

Function Require ini tidak dapat dimasukkan diadalam suatu struktur looping
misalnya while atau for. Karena hanya memperbolehkan pemangggilan file
yang sama tersebut hanya sekali saja.

contoh2_38.php
< ?php
$a= ” Say a sedang belaj ar PHP” ;
funct ion t ulist ebal( $t ek s)
{
echo( “ < b> $ t ek s< / b> ” ) ;
}
?>

contoh2_39.php
< ?php
require( “ cont oh2_13 .php” ) ;
t ulist ebal( “ I ni adalah t ulisan
t ebal” ) ;
echo( “ < br > ” ) ;
echo( $a) ;
?>

12.b. I NCLUDE

Function I nclude akan menyertakan isi suatu file tertentu. I nclude dapat
diletakkan didalam suatu looping misalkan dalam statement for atau while.

contoh2_40.php
<?
echo( "- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - < br > ") ;
echo( "PHP adalah bahasa script ing< br> ") ;
echo( "- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - < br > ") ;
echo( "< br > ") ;
?>

contoh2_41.php
< ?php
for ( $b= 1; $b< 5; $b+ + )
{
include( "cont oh 2_15.php") ;
}
?>
Hasilnya adalah:

12.h. Fungsi String

Fungsi string digunakan memanipulasi/ mengolah data string untuk berbagai

macam kebutuhan. Disini akan dibahas beberapa fungsi string yang sering
digunakan dalam membuat program aplikasi web. Fungsi-fungsi tersebut
adalah:

AddSlashes

Digunakan untuk menambahkan karakter backslash ( \ ) pada suatu string.

Hal ini penting digunakan pada query string untuk database, misalkan pada
MySQL. Beberapa karakter yang akan ditambahkan tanda backslash adalah
karakter tanda petik satu ( ‘ ), karakter petik dua ( “ ), backslash ( \ ) dan
karakter NULL.
Sintaks:
a ddsla sh e s( st r in g)

StripSlashes

Digunakan untuk menghilangkan karakter backslash ( \ ) pada suatu string.

Sintaks:

st rin g st ripsla sh e s( st rin g )

Crypt

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

Echo dan Print

Digunakan untuk mencetak/ menampilkan isi suatu string/ teks atau argumen
ke browser.
Sintaks:
e ch o( st r in g a rgu m e n 1 , st rin g a rgu m e n 2 , ….)
prin t ( st r in g a rgu m e n 1 , st rin g a r gu m e n 2 , ….)

Explode
Digunakan untuk memecah-mecah suatu string berdasarkan tanda pemisah
tertentu dan memasukkan hasilnya kedalam suatu variable array.
Sintaks:
e x plode ( st rin g pe m isa h , st r in g [ , in t lim it ] )

Contoh:
$nam ahari = “ m inggu senin selasa rabu k am is j um at sabt u ” ;
$hari = ex plode( “ ” , $nam ahari) ;

I mplode
Kegunaan fungsi ini adalah kebalikan daripada fungsi explode. Fungsi implode
digunakan untuk menghasilkan suatu string dari masing-masing elemen suatu
array. String yang dihasilkan tersebut dipisahkan oleh suatu string telah yang
ditentukan sebelumnya.
Sintaks:
im plo de ( st r in g p e m isa h , a rra y)

Printf dan Sprint

Digunakan untuk menampilkan output ke browser dengan format tertentu.

Sintaksnya adalah sebagai berikut:
Prin t f( form a t [ ,a rgu m e n ] )
Sp rin t ( fo rm a t [ , a rgu m e n ] )
Parameter format selalu ditandai dengan karakter persen (%), kemudian
diikuti oleh karakter tertentu yang memberikan spesifikasi untuk memberikan
hasil dengan format tertentu. Karakter pemberi spesifikasi tersebut adalah:

Karakter Keterangan
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
B
angk a biner
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
C
k arak t er dengan nilai ASCI I - ny a
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
d
angk a desim al
Argum en diperlak uk an sebagai double dan dit am pilk an sebagai
f
angk a float ing point
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
o
bilangan ok t al
s Argum en diperlak uk an dan dit am pilk an sebagai st ring
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
x
angk a hek sadesim al ( dengan huruf k ecil)
Argum en diperlak uk an sebagai int eger dan dit am pilk an sebagai
X
angk a hek sadesim al ( dengan huruf besar)

contoh2_42.php
< ht m l>
< head>
< t it le> .: : Lat ihan For m at St ring: : . < / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
$angk a1= 78.79;
$angk a2= 23.31;
$angk a= $angk a1+ $angk a2;
echo ( $angk a) ;
echo ( "< br> ") ;
$form at = prin t f( "% 01.2f",
$angk a) ;
echo( "$for m at < br> ") ;
$y ear= 1972;
$m ont h= 11;
$day = 9;
$t anggal= sprint f( "% 0 2d-
% 02d-
% 04d",$day ,$m ont h ,
$y ear) ;
echo ( $t anggal) ;
?>
< / body >
< / ht m l>

Angka didepan karakter “%” menunjukkan jumlah digit atau jumlah karakter
yang akan ditampilkan. Jika ada titik, menunjukkan jumlah angka dibelakang
koma. Misalnya, “%01.2f” menunjukkan bahwa bilangan tersebut
ditampilkan sebagai floating point dan harus ada dua angka dibelakang koma
yang ditampilkan. “%02d” menunjukkan bahwa bilangan tersebut
ditampilkan sebagai integer dan harus ada dua angka yang ditampilkan. Jadi
jika terdapat angka 8, maka akan diubah menjadi 08.

StripTags
Digunakan untuk menghilangkan kode-kode tag HTML pada suatu string.
Sintaks:

st ript a gs( st r in g [ , st r in g t a gs ya n g t id a k dih ila n gk a n ] )

StrLen
Digunakan untuk menghitung jumlah karakter suatu string.
Sintaks:

st rle n ( st r in g)

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

st rle n ( st r in g , su b st r in g)

Str_Repeat
Digunakan untuk mengulang isi suatu string.
Sintaks:

st r_ re pe a t ( st r in g , in t j u m la h pe ru la n ga n )

Str_Replace
Digunakan untuk mengganti suatu string dengan string yang lain.
Sintaks:

St r _ re p la ce ( t e rca ri, pe n ca ri,su b ye k )

StrRev
Digunakan untuk membalik urutan suatu string.
Sintaks:
st rre v( st rin g)

StrStr, StriStr dan StrChr

Digunakan untuk mencari keberadaan suatu string di dalam string lain.
Sintaks:
st rst r( t e r ca r i,pe n ca ri)
st rist r ( t e r ca ri, pe n ca ri)
st rch r ( t e r ca ri, pe n ca ri)
StrToLower
Digunakan untuk merubah suatu string menjadi huruf kecil (lowercase).
Sintaks:

st rt olo w e r( st rin g)

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

st rt ou ppe r( st r in g)

SubStr
Digunakan untuk mengambil suatu sub string dengan panjang tertentu dari
suatu string pada posisi tertentu pula.
Sintaks:

su bst r( st rin g, in t posisi , in t posisi)

Contoh:
subst r( “ ab cdefg” ,0,3) ; / / m engasilk an st ring “ abc”
subst r( “ ab cdefg” ,3,2) ; / / m enghasilk an st ring “ de”

SubStr_Count
Digunakan untuk menghitung jumlah sub string dalam suatu string
Sintaks:

su bst r_ cou n t ( st r in g , st rin g su bst r in g)

Contoh:
subst r_count ( “ This is a t est ” ,” is” ) ; / / m enghasilk an nilai 2

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

u cfirst ( st rin g )

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

u cw or ds( st r in g)
12.i. Fungsi Matematika

Yaitu fungsi-fungsi yang digunakan untuk memanipulasi bilangan-bilangan

dalam operasi matematis.

Fungsi Trigonometri
Fungsi trigonometri adalah fungsi-fungsi yang berhubungan dengan ilmu
trigonometri, yaitu antara lain:
 sin( sudut ) , m encari nilai sinus sebuah sudut
 cos( sudut ) , m encar i nilai cosinus sebuah sudut
 t an( sudut ) , m en cari nilai t angen sebuah sudut
 asin( sudut ) , m encari nilai arcus sinus sebuah sudut
 acos( sudut ) , m encar i nilai arcu s cosinus sebuah sudut
 at an( sudut ) , m en cari nilai arcus t angen sebuah sudut
 deg2rad( a) , m erubah besaran deraj at m enj adi radian
 rad2deg( a) , m erubah besaran radian m enj adi deraj at

Semua besar sudut yang dicari harus dalam bentuk radian.

contoh2_43.php
< ht m l>
< head>
< t it le> .: : Fung si- fungsi Tr igonom et ri: : .< / t it le>
< / head>
< body >
< h3> < u> Fungsi- fungsi Trigonom et ri< / u> < / h 3> < p>
< font face= v erdana size= 2>
< form > Masuk k an sudut y g dicari:
< input t y pe= t ex t nam e= sdt > < br> < br>
< input t y pe= subm it v alue= "Hit u ng">
< / form >
< ?php
if ( isset ( $sdt ) )
{
$sudut = int v al( $ sdt ) ;
$sudrad= deg2rad( $sudut ) ;
$sin= sin( $sudrad) ;
$cos= cos( $sudrad) ;
$t an= t an( $ sudrad) ;
$arcsin = asin( $sudrad) ;
$arccos= acos( $ sudrad) ;
$arct an= at an( $sudrad) ;
echo "Sudut $sudut sam a
dengan $sudrad radian< br> ";
print f( "sin( $ sudut ) =
% 01.4f< br> ",$ sin) ;
print f( "cos( $sudut ) =
% 01.4f< br> ",$ cos) ;
print f( "t an( $sudut ) =
% 01.4f< br> ",$ t an) ;
print f( "arc sin ( $sudut ) = % 01. 4f< br> ",$arcsin) ;
print f( "arc cos( $sudut ) = % 01.4f< br> " ,$arccos) ;
print f( "arc t an( $ sudut ) = % 01.4f< br> ",$ar ct an) ;
}
?>
< / body > < / ht m l>
Fungsi Pangkat dan Algoritma
Fungsi-fungsi yang digunakan untuk perhitungan pangkat dan logaritma.

$y
pow( $x ,$y ) , m encari hasil dari $x .

$x
ex p( $x ) , m encari nilai e
 log( $x ) , m encari nilai dari logarit m a $x
 sqrt ( $x ) , m encar i ak ar k uadrat $x .

Fungsi Base n
Fungsi yang digunakan untuk konversi suatu bilangan ke bilangan berbasis n.
 base_conv ert ( x ,y ,z) , m engubah bilangan x dari basis y m enj adi basis z.
 decbin( x ) , m engubah bilangan desim al k e bilangan biner
 dechex ( x ) , m engubah bilangan desim al k e bilangan hek sadesim al
 decoct ( x ) , m engubah bilangan desim al k e bilangan ok t al
 bindec( x ) , m engubah bilangan biner k e bilangan desim al
 hex dec( x ) , m engubah bilangan hek sadesim al k e bilangan desim al
 oct dec( x ) , m engubah bilangan ok t al k e bilangan desim al

contoh2_44.php
< ht m l>
< head>
< t it le> .: : Fung si- fungsi Tr igonom et ri: : .< / t it le>
< / head>
< body >
< h3> < u> Konv ersi Bilangan
< / u> < / h3 > < p>
< font face= v erdana size= 2>
< form >
Masuk k an bilangan y g dicari:
< input t y pe= t ex t nam e= bil>
< br> < br>
< input t y pe= subm it
v alue= "Conv ert ">
< / form >
< ?php
if ( isset ( $bil) )
{

$bilangan= int v al( $bil) ;

$baseconv ert = base_ conv ert ( $bilangan, 10,3) ;
$desbin= decbin( $bilangan) ;
$deshex = dechex ( $bilangan) ;
$desoct = decoct ( $bilangan) ;
print f( "Desim al $bilangan dalam basis 3 adalah = $baseconv ert < br> ") ;
print f( "Desim al $bilangan dalam basis 2 adalah = $desbin< br> ") ;
print f( "Desim al $bilangan dalam basis 16 adalah = $deshex < br> ") ;
print f( "Desim al $bilangan dalam basis 8 adalah = $desoct < br> ") ;
}
?>
< / body >
< / ht m l>
Fungsi Matematika Lainnya
Fungsi-fungsi matematika yang juga dikenal PHP, yaitu:
 abs( x ) , nilai absolut dari x
 ceil( x ) , unt uk m em bulat k an pecahan x k e at as
 floor( x ) , unt uk m em bulat k an pecahan x k e bawah
 round( x ,y ) , unt uk m em bulat k an pecahan x sam pai y angk a dibelak ang k om a
 pi( ) , sam a dengan  at au 22/ 7 at au k ira- k ira 3,14
 num ber_form at ( x ,y ,k ,r) , m enulisk an bilangan x dengan form at y angk a
dibelak ang k om a, dengan k adalah k om a dan r adalah pem isah ribuan

12.j. Fungsi Date dan Time

Fungsi date( )
Digunakan untuk mengambil tanggal dan jam sekarang. Hasil dari fungsi ini
adalah sebuah string yang berisi tanggal/ jam sesuai dengan format yang
diinginkan.
Sintaks:
da t e ( st rin g fo rm a t )

Format yang dikenal dalam fungsi date ini adalah sebagai berikut:

Karakter Keterangan
a am / pm
A AM / PM
B Swat ch I n t ernet t im e
d day of t he m ont h, 2 digit s wit h leading zeros; i.e. "01" t o " 3 1"
D day of t he week , t ex t ual, 3 let t ers; i.e. "Fri", “ Sun”
F m ont h, t ex t ual, long; i.e. "January ",” Nov em ber”
g hour, 12- hou r form at wit h out leading zeros; i.e. " 1" t o "12 "
G hour, 24- hou r form at wit h out leading zeros; i.e. " 0" t o "23 "
h hour, 12- hou r form at ; i.e. "0 1" t o "12 "
H hour, 24- hou r form at ; i.e. "0 0" t o "23 "
i m inut es; i.e. "0 0" t o "59 "
I ( capit al i) "1" if Day light Sav ings Tim e, "0 " ot herwise.
j day of t he m ont h wit hout leading zeros; i.e. "1" t o "31"
l ( lowercase L) day of t he week , t ex t ual, long; i.e. "Friday "
L boolean for whet her it is a leap y ear; i.e. "0" or "1"
m m ont h; i.e. "01 " t o "12 "
M m ont h, t ex t ual, 3 let t ers; i.e. " Jan", “ Mar ”
n m ont h wit h out leading zeros; i.e. "1 " t o "12 "
s seconds; i.e. "0 0" t o "59 "
S English ordinal suffix , t ex t ual, 2 charact er s; i.e. "t h" , "nd"
t num ber of day s in t he giv en m ont h; i.e. "28" t o "3 1"
T Tim ezone set t ing of t his m achine; i.e. "MDT"
U seconds sin ce t he epoch
w day of t he week , num eric, i.e. "0" ( Sunday ) t o "6" ( Sat urday )
Y y ear, 4 digit s; i.e. "1999"
y y ear, 2 digit s; i.e. "99"
z day of t he y ear; i.e. "0" t o "365"
Z t im ezone offset in seconds ( i.e. " - 432 00" t o "4 3200" )
Fungsi checkdate( )
Digunakan untuk memeriksa apakah format penulisan tanggal sudah benar.
Sintaksnya adalah:
ch e ck da t e ( $ bu la n ,$ h a ri, $ t a h u n )

contoh2_45.php
< ht m l>
< head>
< t it le> .: : Fung si Tim e dan Dat e: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "Sek arang....< br> ";
echo "Hari: ",dat e( l) ,"< br> ";
echo "Tanggal: ",dat e( 'd F Y') ," < br> ";
echo "Jam : ",dat e( 'h: i: s A') ;
echo "< hr> ";
$hari= 30;
$bulan= 2;
$t ahun= 200 5;
$v alidasi= check dat e( $bulan ,$hari,$ t ahun) ;
echo "Tanggal y ang dipilih: $hari - $bulan - $t ahun < br> ";
echo "Penulisan t anggal -
< b> < U> ";
if ( $v alidasi)
{
echo "benar";
} else
{
echo "salah" ;
}
echo "< / b> < / u > < br> ";
echo "Silahk an dibet ulk an
k em bali";
?>
< / body >
< / ht m l>

Fungsi getdate( )
Digunakan untuk menghasilkan waktu dengan keluaran bertipe array.
Sintaksnya adalah:
ch e ck da t e ( $ bu la n ,$ h a ri, $ t a h u n )

Karakter Keterangan
hours Jam
m day Hari
m inut es Menit
m on Bulan dalam digit
m ont h Bulan
seconds Det ik
wday Hari dalam digit
week day Hari
y day Hari k e- dari t ahun
y ear Tahun
contoh2_46.php
< ht m l>
< head>
< t it le> .: : Fung si get dat e: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "Sek arang Jam : ",dat e( 'h: i: s A') ;
echo "< hr> ";
$j am = get dat e( ) ;
echo "Selam at < b> < u > ";
if( $j am [ h ours] < = 9)
echo "Pagi";
else
if( $j am [ h ours] < = 14)
echo "Siang";
else
if( $j am [ h ours] < = 19)
echo "Sore";
else
echo "Malam ";

echo "< / b> < / u > Mr. Jack ";

?>
< / body >
< / ht m l>

12.k. Fungsi Variable

Fungsi variable digunakan untuk mengecek keberadaan variable. Fungsi-

fungsi yang termasuk fungsi variable adalah:

Fungsi Variable Keterangan

doublev al( $v ar) Mengubah v ariabel $v ar m enj adi double
em pt y ( $v ar) Mem erik sa apak ah v ariabel $v ar belum puny a nilai
isset ( $v ar) Mem erik sa apak ah v ariabel $v ar sudah didefinisik an
int v al( $v ar) Merubah v ariabel $v ar m enj adi int eger
get t y pe( $v ar) Mem erik sa t y pe v ariabel $v ar
I s_array ( $v ar) Mem erik sa apak ah $v ar berupa array
is_bool( $v ar) Mem erik sa apak ah $v ar bert ipe boolean
I s_double( $v ar) Mem erik sa apak ah $v ar bert ipe double
is_float ( $v ar) Mem erik sa apak ah $v ar bert ipe float
is_int ( $v ar) Mem erik sa apak ah $v ar bert ipe short int eger
I s_int eger( $v ar) Mem erik sa apak ah $v ar bert ipe int eger
is_long( $v ar) Mem erik sa apak ah $v ar bert ipe long int eger
is_num er ic( $v ar) Mem erik sa apak ah $v ar bert ipe num erik
I s_obj ect ( $v ar) Mem erik sa apak ah $v ar berupa obj ek
is_real( $v ar) Mem erik sa apak ah $v ar bert ipe real
is_resou rce( $v ar) Mem erik sa apak ah $v ar berupa resource
I s_st ring( $v ar) Mem erik sa apak ah $v ar bert ipe st ring
set t y pe( $v ar) Menent uk an t ipe v ariabel $v ar
st rv al( $v ar) Mengam bil nilai st ring dari $v ar
unset ( $v ar) Menghapus v ariabel $v ar
 12.l. Fungsi Mail

Digunakan untuk mengirimkan e-mail ke alamat e-mail tertentu.

Sintaks:
m a il( $ p e n e rim a , $ su bj e ct , $ isi_ e m a il[ , $ h e a de r] ) ;

Contoh:
$pengirim = “ From : say a@em ail.com ” ;
$t uj uan = “ anonk uncoro@y ahoo. com ” ;
$subj ect = “ Pem berit ahuan” ;
$isi = “ I ni adalah percobaan pengirim an e- m ail dengan m enggunak an PHP” ;
m ail( $t o,$subj ect ,$isi,$pengirim ) ;

17. Mengolah File/ data Teks

13.a. Membuka File

Untuk membuka file teks, perintah yang digunakan adalah fopen().

Sedangkan untuk menutup file adalah fclose(). Perhatikan contoh
berikut:

contoh2_47.php
< ht m l>
< head>
< t it le> .: : Mengelola Fungsi File: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
<?
echo "< b> < u > Menam pilk an isi file dat asiswa.dat < / b> < / u> < br> < br> " ;
if ( $file= fopen( "dat asiswa.dat ","r" ) )
{
while ( ! feof( $file) )
{
$st ring= fget s( $file, 255) ;
echo( $st ring) ;
}
fclose( $file) ;
}
else
{
echo "File gagal dibuk a";
}
?>
< / body >
< / ht m l>

Sebelum script diatas dijalankan, terlebih dahulu harus dibuat file

datasiswa.dat. Jika tidak dibuat dan script tetap dijalankan, maka akan
keluar pesan warning seperti dalam gambar diatas. Untuk itu, silahkan buat
file datasiswa.dat. dengan NotePad dan isi seperti dalam gambar berikut:
Setelah file tersebut disimpan, kembali jalankan file contoh2_22.php.
Sehingga akan didapatkan hasil seperti gambar berikut ini:

13.b. Memasukkan Data

Untuk memasukkan data pada file teks menggunakan perintah:

fpu t s( n a m a _ f ile , isi)

Perhatikan contoh berikut.

contoh2_48.php
< ht m l>
< head>
< t it le> .: : Mengelola File: : .< / t it le>
< / head>
< body >
< h3> < u> Mengelola File Tek s< / u > < / h3 > < p>
< font face= v erdana size= 2>
< form >
Masuk k an Nam a Siswa:
< input t y pe= t ex t nam e= isi> < br > < br>
< input t y pe= subm it v alue= "proses">
< / form >
<?
/ / v alidasi isi
if ( isset ( $isi) )
if ( em pt y ( $isi) )
echo "Dat a har us t erisi";
else
{
if( $berk as= fopen( "dat asiswa.dat "," r") )
{
/ / Mem asuk k an Dat a
$berk as= fopen( "dat asiswa.dat ","a+ ") ;
fput s( $berk as,$isi) ;
fput s( $berk as,"< br> ") ;
fclose( $berk as) ;

/ / m enam pilk an
$berk as= fopen( "dat asiswa.dat "," r") ;
while( ! feof( $berk as) )
{
$t ek s= fget s( $berk as,255) ;
echo ( $t ek s) ;
}
fclose( $berk as) ;
}
else
{
echo( "File gagal dibuk a") ;
}
}
?>
< / body >
< / ht m l>

Setelah dijalankan, maka hasilnya akan seperti gambar berikut:

I sikan data pada form input, kemudian klik tombol proses, maka akan
muncul gambar sebagai berikut:
18. Dasar-dasar MySQL

Dalam bahasa SQL pada umumnya informasi tersimpan dalam tabel-tabel

yang secara logik merupakan struktur dua dimensi terdiri dari baris (row atau
record) dan kolom (column atau field). Sedangkan dalam sebuah database
dapat terdiri dari beberapa table. MySQL adalah database jenis RDBMS
(Relational Database Management System). Jadi dalam MySQL tetap
menggunakan Table, Baris dan Kolom. Sebuah Database dalam MySQL
mengandung beberapa table dan satu table dalam database terdiri dari
sejumlah baris dan kolom.

14.a. Tipe Data

Tipe Data Numerik

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

Tipe Data Kisaran Nilai

Tinyint (-128) – 127 atau 0-225
Smallint (-32768) – 32767 atau 0 – 65535
Mediumint (-8388608)-8388607 atau 0-16777215
Int (-2147683648)-(2147683647) atau 0-4294967295
Bigint (-9223372036854775808)-(9223372036854775807) atau
0 – 18446744073709551615
Float(x) (-3.402823466E+ 38)-(-1.175494351E-38), 0, dan
1.175494351E-38 – 3.402823466E + 38
Float Idem
Double (-1.7976E+ 308)–(-2.22E-308),0,dan(2.22E-308)-(1.79E+ 308)
Tipe Data String

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

Tipe kolom Kisaran Nilai

CHAR 1 – 255 karakter

VARCHAR 1 – 255 karakter

TINYBLOB, TINYTEXT 1 – 255 karakter

BLOB, TEXT 1 – 65535 karakter

MEDIUMBLOB, MEDIUMTEXT 1 – 16777215 karakter

LONGBLOB, LONGTEXT 1 – 4294967295 karakter

ENUM('value1','value2',...) Maksimum 65535 karakter

SET('value1','value2',...) Maksimum 64 elemen

Tipe Data Waktu dan Tanggal

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

Tipe Data Kisaran Nilai

1000-01-01 00:00’ to ‘9999-12-31 23:59:59’
DATETIME
1000-01-01’ to ‘9999-12-31’
DATE 1970-01-01 00:00:00’ – 2037
TI MESTAMP -838:59:59’ to ‘838:59:59:59’
TI MEYEAR 1901-2155

14.b. Membuat Database dan Table

Untuk masuk ke dalam program MySQL pada prompt jalankan perintah

berikut ini:
1. Masuk pada direktori utama mysql, seperti perintah berikut:

C: \ WI NDOWS> cd\ apache\ m y sql\ bin

2. Kemudian ketikkan perintah seperti contoh berikut:

C: \ apache\ m y sql\ bin > m y sql

Kemudian akan masuk kedalam Prompt MySQL seperti tampilan dibawah ini:

Welcom e t o t he My SQL m onit or. Com m ands end wit h ; or \ g.

Your My SQL connect ion id is 1 t o serv er v ersion: 3.23.4 7- nt

Ty pe 'help; ' or '\ h' for help. Ty pe '\ c' t o clear t he buffer.

m y sql>

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

Setiap perintah SQL harus diakhiri dengan tanda titik-koma “;”.
Cara untuk membuat sebuah database baru adalah dengan perintah:

cre a t e da t a ba se n a m a da t a ba se ;

Contoh:

m y sql> creat e dat abase alam at ;

Query OK, 1 row affect ed ( 0.27 sec)

m y sql> _

Untuk mengaktifkan database dapat menggunakan perintah berikut ini:

u se n a m a da t a ba se ;

Contoh:

m y sql> use alam at ;

Dat abase changed
m y sql> _

Setelah database aktif, sebuah tabel baru dapat dibuat. Perintah untuk
membuat tabel baru adalah:
creat e t able nam at abel
(
st ruk t ur
);

Contoh:
Misalkan kita ingin menyimpan data anggota yaitu: nomor, nama, email,
alamat, kota. Sedangkan strukturnya seperti tabel dibawah ini:
Kolom/ Field Tipe Data Keterangan
nomor int(6), not null, Angka dengan panjang maksimal 6, sebagai
primary key primary key, dan tidak boleh kosong.
nama char(40), not null Teks dengan panjang maksimal 40 karakter
dan tidak boleh kosong
email char(25), not null Teks dengan panjang maksimal 25 karakter
dan tidak boleh kosong
alamat char(255), not null Teks dengan panjang maksimal 255 karakter
dan tidak boleh kosong
kota char(20), not null Teks dengan panjang maksimal 20 karakter
dan tidak boleh kosong

Perintah MySQL untuk membuat tabel seperti diatas adalah:

m y sql> creat e t able anggot a (

- > nom or int ( 6) not null prim ary k ey ,
- > nam a char( 40) not null,
- > em ail char( 25) not null,
- > alam at char( 255) not null,
- > k ot a char( 20) not null) ;
Query OK, 0 rows affect ed ( 0.33 sec)
m y sql> _
Sedangkan data yang akan diisikan dalam tabel anggota adalah sebagai
berikut:
No Nam a E- M a il Ala m a t Kot a
15. Wiluj eng Handay ani lulul@hot m ail. com Jl. Jant i Bar at 60 Malang
16. Rem y Dianning dian@plaza. com Jl. Derm o 7 Malang
17. Rat na Budi S. budi@ast aga. com Jl. Probolinggo 78 Lam ongan
18. Avicenna Ary a avis@yahoo. com Jl. Durian No. 10 Malang
19. Bayu bayu@ast aga. com Jl. Candi I I / 23 Sem arang
20. Yusuf ucuf @yahoo. com Jl. Raj aw ali 78 Moj oker t o
21. Ari Mulyaningsih ira@ast aga. com Jl. Lebani Waras 100 Gresik
22. Lat ief lat ief@hot m ail Jl. Pakis 172 Surabay a
23. Aj ie j ie@yahoo. com Jl. Kali Ut ik 99 Surabay a
24. Jam ‘I yat ul Khoir j ack _delphi@yahoo. com Jl. Agus Salim 33 Lam ongan
25. Sandra alex@hot m ail. com Jl. Adelaide 22 Malang
26. Paul paul@t elkom . net Jl. Mert oj oyo 88 Malang
27. Riza iza@yahoo. com Jl. Bunga Jom bang
28. M. Nur ullah nur ul@hot m ail. com Jl. Merak Pam ekasan 4 Madur a

Untuk memasukkan sebuah baris (record) kedalam tabel MySQL adalah

sebagai berikut:

in se rt in t o n a m a t a be l va lu e s( k o lom 1 , k o lom 2 , k olo m 3 ,…) ;

Contoh:

m y sql> insert int o anggot a

- > v alues( '1','Wiluj eng Handay ani','lulu@hot m ail.com ',' Jl. Jant i Barat 60',
- > 'Malang') ;
Query OK, 1 row affect ed ( 0.44 sec)

m y sql> _

14.c. Menampilkan I si Table

I si tabel dapat ditampilkan dengan menggunakan perintah SELECT, cara

penulisan perintah SELECT adalah:

se le ct k olom fro m n a m a t a b le ;
Contoh:

 Untuk menampilkan kolom (field) nomor dan nama pada tabel anggota
select nom or, nam a from anggot a;

 Untuk menampilkan semua kolom(field) pada tabel anggota

select * from anggot a;

 Untuk menampilkan semua kolom pada tabel anggota yang berada pada
kota ‘Surabaya’

select * from anggot a where k ot a= ’Surabay a’;

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

 Untuk menghitung jumlah record pada tabel anggota

select count ( * ) from anggot a;

 Untuk menampilkan kota pada tabel anggota

select k ot a from anggot a;

 Untuk menampilkan kota dengan tidak menampikan kota yang sama pada
tabel anggota

select dist inct k ot a from anggot a;

 Untuk menampilkan nama dan email yang mempunyai email di

‘yahoo.com’

select nam a,em ail from anggot a where em ail lik e ‘% y ahoo.com ’;

14.d. Menghapus Record

Untuk menghapus suatu record dengan kriteria tertentu digunakan perintah

sebagai berikut:

de le t e from n a m a t a be l w h e re k rit e ria ;

Contoh:

Menghapus record dari tabel anggota yang bernomor ‘3’

delet e from anggot a where nom or= ’3’;

14.e. Memodifikasi Record

Untuk memodifikasi (merubah) isi record tertentu adalah dengan

menggunakan perintah sebagai berikut:
u pda t e n a m a t a be l se t k o lom 1 = n ila iba ru 1 ,
k olom 2 = n ila iba ru 2 … w h e re k rit e ria ;

Contoh:
Merubah e-mail dari anggota yang bernomor 2 menjadi ‘[email protected]’.

updat e anggot a set em ail= ’dian@hot m ail.com ’ where nom or = ’2’;

14.f. Menghubungkan PHP dengan MySQL

Untuk menghubungkan dengan MySQL, telah disediakan beberapa fungsi oleh

PHP, yaitu antara lain:

 Fungsi mysql_connect()
Fungsi ini digunakan untuk menghubungkan PHP dengan MySql. Sintaksnya
adalah:

$koneksi=mysql_connect(host,user,password)

I si dari variabel $ h ost , $ u se rn a m e , $ pa ssw ord dapat disesuaikan sesuai

dengan setting pada MySQL server yang ada.

 Fungsi mysql_select_db()
Fungsi ini digunakan untuk memilih database yang akan digunakan. Nama
database dapat disesuaikan dengan setting pada MySql server yang ada.
Sintaksnya adalah:

mysql_select_db(namadatabase[,koneksi])

Parameter koneksi boleh tidak dituliskan, jika tidak dituliskan maka

hubungan yang terakhir yang dianggap sebagai hubungan aktif.

 Fungsi mysql_query()
Digunakan untuk melakukan perintah query dalam sebuah database.
Sintaksnya sebagai berikut:

$sql=mysql_query(perintah_sql[,koneksi])

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

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

$baris=mysql_fetch_assoc($sql)

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

$baris=mysql_fetch_row($sql)

 Fungsi mysql_num_fields()
Fungsi ini digunakan untuk menghitung jumlah field dalam sebuah database.
Sintaksnya adalah:

$jum_field=mysql_num_fields($sql)

 Fungsi mysql_num_rows()
Fungsi ini digunakan untuk menghitung jumlah record dalam database.
Sintaksnya adalah:

$jum_row=mysql_num_rows($sql)

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

mysql_close([koneksi])

 Fungsi mysql_create_db()
Fungsi ini digunakan untuk membuat database dengan script php. Sintaksnya
adalah:

mysql_create_db(nama_database)

Perhatikan contoh pada file contoh2_24.php berikut:

contoh2_49.php
< ht m l>
< head>
< t it le> .: : t es k onek si dengan serv er dat abase: : .< / t it le>
< / head>
< body >
< font face= v erdana size= 2>
< h3> Tes k onek si dg m y sql dat abase serv er...< / h3> < p>
< form >
< input t y pe= radio nam e= t om bol Value= 1> Sam bung
< input t y pe= radio nam e= t om bol Value= 0> Put u s
< br> < br>
 < input t y pe= subm it Value= " OK ">
< / form >
<?
require( "k onek si.php") ;
$hub= open_connect ion( ) ;
$dat abasenam e= "alam at ";
if ( isset ( $t om bol) )
{
if ( $t om bol= = 1)
{
if ( $hub)
{
echo ( "Konek si dg Serv er Dat abase < b> < u> SUKSES< / b> < / u> < br> ") ;
$db= @m y sql_select _db( $dat abasenam e,$hub) ;
if ( $db) echo "Dat abase < b> < u> $dat abasenam e< / b> < / u> dit em uk an";
else echo "Dat abase < b> < u> $dat abasenam e< / b> < / u > TI DAK dit em uk an";
} else
echo ( "Konek si dg Serv er Dat abase < b> < u> GAGAL< / b> < / u> < br> ") ;
}
elseif ( $t om bol= = 0)
{
$m at i= @m y sql_close( $k onek si) ;
echo ( "Konek si Serv er Dat abase < b> < u> Dim at ik an< / b> < / u> < br> ") ;
}
}
?>
< / body >
< / ht m l>

Agar script diatas dapat dijalankan, silahkan buat juga script koneksi.php
berikut ini:
< ?php
funct ion open_connect ion( )
{
$host = "localhost ";
$usernam e= "root ";
$password= "";
$dat abasenam e= "alam at ";
$k onek si= @m y sql_connect
( $host ,$ usernam e,
$password) ;
if ( $k onek si)
$db= @m y sql_select _db
( $dat abasenam e,$k onek si)
or die ( "Dat abase
< b> $dat abasenam e< / b>
Tidak Dit em uk an") ;
ret urn $k onek si;
}
?>

Jika script diatas dijalankan dan koneksi dengan server database sukses
dilaku-kan serta data-base alamat sudah dibuat, maka hasilnya seperti
gambar diatas.
Untuk menampilkan isi tabel anggota dari database alamat yang telah dibuat
di sub bab 14.b, perhatikan contoh2_25 berikut ini.

contoh2_50.php
< ht m l>
< head>
< t it le> .: : Menam pilk an Dat a: : . < / t it le>
< / head>
< body >
< font face= arial size= 2>
< cent er> < h 3> DAFTAR ANGGOTA< / h3 > < / cent er>
< ?php

/ / - - - - - am bil isi dari file k onek si.php

require( "k onek si.php") ;

/ / - - - - - hubungk an k e dat abase

$k onek si= open_connect ion( ) ;

/ / - - - - - m enent uk an nam a t abel

$t ablenam e= "anggot a";

/ / - - - - - perint ah SQL dim asuk k an k e dalam v ariable st ring

$sql= "select * from $t ablenam e" ;

/ / - - - - - - j alank an perint ah SQL

$result = m y sql_query ( $sql) or die ( "Terdapat k esalahan pada perint ah SQL! ") ;

/ / - - - - - - put us hubungan dengan dat abase

m y sql_close( $k onek si) ;

/ / - - - - - - buat t am pilan t abel

echo( "< t able widt h = 100% cellspacing= 1 cellpadding= 2 bgcolor= # 00000 0> ") ;
echo( "< t r> < t d bgcolor = # CCCCCC> < b> No< / b> < / t d>
< t d bgcolor= # CCCCCC> < b> Nam a< / b> < / t d>
< t d bgcolor= # CCCCCC> < b> E- Mail< / b> < / t d>
< t d bgcolor= # CCCCCC> < b> Alam at < / b> < / t d>
< t d bgcolor= # CCCCCC> < b> Kot a< / b> < / t d> < / t r> ") ;

/ / - - - - - - am bil isi m asing- m asing record

while ( $row = m y sql_fet ch_obj ect ( $result ) )
{

/ / - - - - - m engam bil isi set iap k olom

$nom or = $row- > nom or;
$nam a= $r ow- > nam a;
$em ail= $r ow- > em ail;
$alam at = $ row- > alam at ;
$k ot a= $row - > k ot a;

/ / - - - - - - m enam pilk an di lay ar browser

echo( "< t r> < t d bgcolor = # FFFFFF> $ nom or< / t d>
< t d bgcolor= # FFFFFF> $nam a< / t d>
< t d bgcolor= # FFFFFF> $em ail< / t d>
< t d bgcolor= # FFFFFF> $alam at < / t d>
< t d bgcolor= # FFFFFF> $k ot a< / t d> < / t r> ") ;
}
echo( "< / t able> ") ;
?>
< / body >
< / ht m l>
Hasil dari script tersebut adalah:

Untuk menambahkan data pada tabel anggota, perhatikan contoh pada

contoh2_26.html berikut ini:

contoh2_26.html
< ht m l>
< head>
< t it le> .: : Tam bah Anggot a: : .< / t it le>
< / head>
< body bgcolor= "# FFFFFF" >
< form act ion= sim pan_anggot a.php m et hod= POST>
< font face= v erdana size= 2 color= "# 000 000" >
< h3 align= left >
TAMBAH DATA ANGGOTA
< / h3>
< / font >
< t able border= 0>
< t r>
< t d widt h= 15% > Nam a< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 82% > < input t y pe= t ex t nam e= nam a size= 15> < / t d>
< / t r>
< t r>
< t d widt h= 15% > Em ail< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 82% > < input t y pe= t ex t nam e= em ail size= 25> < / t d>
< / t r>
 < t r>
< t d widt h= 15% > Alam at < / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 82% > < input t y pe= t ex t nam e= alam at size= 50 > < / t d>
< / t r>
< t r>
< t d widt h= 15% > Kot a< / t d>
< t d widt h= 3% > : < / t d>
< t d widt h= 82% > < input t y pe= t ex t nam e= k ot a size= 1 2> < / t d>
< / t r>
< t r>
< t d widt h= 15%
colspan= 3
align= cent er>
< hr> < / t d>
< / t r>
< t r>
< t d colspan= 3
align= right >
< input t y pe= subm it
v alue= "Sim pan">
< input t y pe= reset
v alue= "Reset ">
< / t d>
< / t r>
< / t able>
< / form >
< / body >
< / ht m l>

Sebelum script diatas dijalankan, jangan lupa untuk membuat juga script
simpan_anggota.php
< ht m l>
< head>
< t it le> .: : Sim pan Dat a: : . < / t it le>
< / head>
< body >
< font face= arial size= 2>
< cent er> < h 5> DATA BERHASI L DI TAMBAHKAN KE TABEL ANGGOTA< / h5> < / cent er>
< hr>
< ?php
/ / - - - - - am bil isi dari file k onek si.php
require( "k onek si.php") ;

/ / - - - - - hubungk an k e dat abase

$k onek si= open_connect ion( ) ;

/ / - - - - - m enent uk an nam a t abel

$t ablenam e= "anggot a";

/ / - - - - - m enghit ung j u m lah record

$sql1= " select * from $t ablenam e";
$hasil = @m y sql_query ( $sql1) or die ( "Terdapat k esalahan pada perint ah SQL! ") ;
$j m l= @m y sql_ num _r ows( $hasil) ;
$nom or = $j m l+ 1;
 / / - - - - - perint ah SQL unt uk m em asuk k an dat a k e t abel anggot a
$sql2= "in sert int o $t ablenam e( nom or,nam a,em ail,alam at ,k ot a) v alues ( '$nom or', ";
$sql2.= "'$ nam a','$em ail','$alam at ','$k ot a') " ;

/ / - - - - - - j alank an perint ah SQL unt uk m em asuk k an dat a k e tabel anggot a

$hasil = @m y sql_query ( $sql2) or die ( "Terdapat k esalahan pada perint ah SQL! ") ;

/ / - - - - - - put us hubungan dengan dat abase

m y sql_close( $k onek si) ;
?>
< cent er>
| < a href= cont oh2 _25.php t arget = _blank > Lihat Dat a< / a>
| < a href= cont oh2 _26.ht m l> Kem bali< / a> |
< / body >
< / ht m l>

19. Autentifikasi Menggunakan Session

Session digunakan untuk menyimpan atau mencatat variabel yang sama ke

halaman yang lain. Session biasanya dipakai untuk aplikasi-aplikasi yang
memerlukan keamanaan. Setiap pengunjung akan diperiksa terlebih dahulu
sebelum dapat mengakses sebuah halaman web. Jika tidak berhak, maka
halaman yang diminta pengunjung tidak dapat ditampilkan.
Untuk memulai session perintah yang digunakan adalah session_start().
Dan untuk mengakhiri session menggunakan perintah session_destroy().
Terdapat banyak fungsi yang berhubungan dengan session, yaitu:

15.l. Fungsi session_ start()

Berfungsi untuk memulai session. Sintaksnya adalah sebagai berikut:
session_ start()

15.m. Fungsi session_ destroy()

Berfungsi untuk mengakhiri session. Sintaksnya adalah sebagai berikut:
session_ destroy()
15.n. Fungsi session_ name()

Digunakan untuk mengambil atau menentukan nama sebuah session. Sintaksnya

adalah sebagai berikut:
session_ name([nama])
Jika argumen nama tidak disertakan, maka fungsi ini digunakan untuk mengambil
nama sebuah session dan jika tidak disertakan digunakan untuk memberi nama
pada session.

15.o. Fungsi session_ module_ name()

Digunakan untuk mengambil atau menentukan nama sebuah modul session.

Sintaksnya adalah sebagai berikut:
session_ module_ name([modul])
Jika argumen modul tidak disertakan, fungsi ini digunakan untuk mengambil
nama sebuah modul session dan jika tidak disertakan digunakan untuk memberi
nama pada modul session.

15.p. Fungsi session_ save_ path()

Digunakan untuk mengambil atau menentukan path dari direktori yang digunakan
untuk menyimpan data-data sebuah session. Sintaksnya adalah sebagai berikut:
session_save_path([path])

15.q. Fungsi session_ id()

Digunakan untuk mengambil atau menentukan identitas sebuah session.

Sintaksnya adalah sebagai berikut:
session_ id([id])

15.r. Fungsi session_ register()

Digunakan untuk mendaftarkan variabel ke dalam sebuah session. Sintaksnya

adalah sebagai berikut:
session_ register([namavar1[,namavar2...])
Argumen namavar1, namavar2 dan seterusnya berupa string yang menampung
nama variabel (tanpa tanda $ didepannya).

15.s. Fungsi session_ unregister()

Digunakan untuk menghilangkan sebuah variabel dari sebuah session, namun

session tersebut tetap ada. Sintaksnya adalah sebagai berikut:
session_ unregister(namavar)
15.t. Fungsi session_ unset()
Digunakan untuk menghilangkan nilai semua variabel yang ada dalam sebuah
session. Sintaksnya adalah sebagai berikut:
session_ unset()
15.u. Fungsi session_ is_ registered()
Digunakan untuk memeriksa apakah sebuah variabel telah didaftarkan pada
sebuah session. Sintaksnya adalah sebagai berikut:
session_ isregistered(namavar)
Argumen namavar berupa string yang merujuk nama variabel (tanpa tanda $
didepannya).

15.v. Contoh Penggunaan

Untuk memahami session, kita akan latihan membuat session dengan aplikasi
login. Yang perlu dbuat pertama kali adalah file admin.html.
File admin.html
< ht m l>
< head> < t it le> .: : Login Adm inist rat or: : .< / t it le> < / head>
< body bgcolor= "# FFFFFF" >
< form nam e= "form 1 " act ion = login.php m et hod= POST>
< t able widt h= "62% " border= 1 align= cent er
cellpadding= 0 cellspacing= 0 bgcolor= # ffffff bordercolor= pu rple>
< t d>
< t able widt h= "100% " border= 0 align= cent er cellpadding= 1 cellspacing= 1
bgcolor= # ffffff >
< t r bgcolor= m agent a>
< t d colspan= 2 > < div align= cent er> < st r ong> Login Adm in< / st rong> < / div > < / t d>
< / t r>
< t r bgcolor= # ffffff>
< t d widt h= 31% > User I D< / t d>
< t d widt h= 69% > < input t y pe= t ex t nam e= user id= adm in size= 25
m ax lengt h= 25> < / t d>
< / t r>
< t r bgcolor= # ffffff>
< t d widt h= 31% > Password< / t d>
< t d widt h= 69% > < input t y pe= password nam e= password
id= pass size= 25 m ax lengt h= 2 5> < / t d>
< / t r>
< t r>
< t d widt h= 15% colspan= 2 align= cen t er> < h r> < / t d>
< / t r>
< t r>
< t d colspan= 2 align= right > < input t y pe= subm it v alue= " Log in">
< input t y pe= reset v alue= "Reset "> < / t d>
< / t r>
< / t able>
< / t d>
< / t able>
< / form >
< / body >
< / ht m l>
Script tersebut jika dijalankan akan
tampak seperti gambar disamping

Selanjutnya buat file berikut:

File login.php
<?
session _st art ( ) ;
if ( em pt y ( $user) )
echo "Nam a User Belu m Di I si";
elseif ( em pt y ( $password) )
echo "Password Belum Di I si";
elseif ( $user= = " j ack " &
$password= = "only m e")
{
$m ast er= $user;
session _regist er( "m ast er") ;
header( "locat ion: halam an_ut am a.php" ) ;
ex it ( ) ;
}
else echo "Anda Tidak Terdaft ar";
?>

File halaman_utama.php
<?
session _st art ( ) ;
?>
< ht m l>
< head>
< t it le> .: : Halam an Ut am a: : .< / t it le>
< / head>
< body >
< font face= t ahom a size= 2 >
<?
if( ! session_is_ regist ered( "m ast er") )
echo "< h3> Ak ses Dit olak ...
< / h3> ";
else
{
echo "Welcom e < b>
$m ast er ... < / b> < br> ";
echo "< h3> HALAMAN
ADMI NI STRATOR< / h3> ";
echo "| < a href= hal1.php>
PAGE 1< / a> ";
echo "| < a href= hal2.php>
PAGE 2< / a> ";
echo "| < a href= logout .php>
logout < / a> | " ;
echo "< hr> ";
}
?>
< / body >
< / ht m l>
File hal1.php
<?
session _st art ( ) ;
?>
< ht m l>
< head>
< t it le> .: : Halam an 1: : .
< / t it le> < / head>
< body >
< font face= t ahom a size= 2 >
<?
if( ! session_is_ regist ered
( "m ast er ") )
echo "< h3> Ak ses Dit olak ...
< / h3> ";
else
{
echo "< font face=
t ahom a size= 2> ";
echo "< h3> PAGE 1< / h3> ";
echo "< p align= right >
| < a href= logout .php> logout < / a> | ";
echo "< hr> ";
echo "Nam a User < b > < u> $ m ast er < / b> < / u > ";
}
?>
< / body >
< / ht m l>

File hal2.php
<?
session _st art ( ) ;
?>
< ht m l>
< head>
< t it le> .: : Halam an 2: : .
< / t it le> < / head>
< body >
< font face= t ahom a size= 2 >
<?
if( ! session_is_ regist ered
( "m ast er ") )
echo "< h3> Ak ses Dit olak ...
< / h3> ";
else
{
echo "< font face=
t ahom a size= 2> ";
echo "< h3> PAGE
2< / h3> " ;
echo "< p align= right > | < a href= logout .php> logout < / a> | " ;
echo "< hr> "; echo "Nam a User < b> < u> $ m ast er< / b> < / u> " ;
}
?>
< / body >
< / ht m l>

File hal2.php
<?
session _st art ( ) ;
session _dest roy ( ) ;
header( "locat ion: adm in.h t m l") ;
?>
j. Rangkuman 2
 Bahasa pemrograman PHP terbukti sangat handal dalam membangun sebuah
program berbasis web
 Waktu yang digunakan untuk memproses data dan menjalankan perintah-
perintah query sangat cepat
 Dengan berjalan dalam sebuah web server, maka secara otomatis program ini
bersifat multiuser
 Database MySQL menyimpan data didalam direktori khusus yang terpisah dari
file program PHP sehingga keamanan data lebih terjamin
 Web server dan database server terpisah sehingga menyulitkan pihak luar
untuk mengakses data yang terdapat didalam database.
 Bahasa program PHP dan Database MySQL lebih fleksibel karena dapat
diakses oleh sistem operasi Windows maupun Linux.
 Bahasa program PHP dan MySQL adalah open source sehingga kita tidak
perlu mengeluarkan biaya tambahan untuk membeli software tersebut.
 Variable dalam PHP tidak perlu di-deklarasikan terlebih dahulu sebelum
digunakan.
 Dalam PHP mengenal lima macam tipe data yaitu: integer, float, string, array
dan objek.
 Struktur kontrol/kendali dalam php meliputi: statement I F, While, For, Switch,
Require dan I nclude.

k. Tugas
1. Buatlah aplikasi web dengan program PHP untuk menghitung jumlah
pengunjung yang telah mengunjungi halaman web kita. Counter yang kita
buat ini adalah untuk menghitung berapa kali suatu halaman situs web telah
ditampilkan. Untuk menyederhanakannya maka counter ditampilkan dalam
bentuk teks bukan grafik.

Algoritma:
f. Bila suatu halaman web ditampilkan maka terlebih dulu dibaca isi file
tertentu dan dibaca nilainya.
g. Tampilkan nilainya di layar browser
h. Tambahkan nilainya dengan 1
i. Simpan nilainya yang baru di file
j. Selesai

2. Buatlah aplikasi pendaftaran/ registrasi agar pengunjung mendapatkan hak

untuk memasuki halaman web yang kita buat. Untuk itu membuat aplikasi
tersebut anda harus mengikuti aturan-aturan sebagai berikut:
 Buat database dan tabel. Field-field tabel tersebut terdiri dari username,
password, nama, alamat, email dan level. Untuk level
dibedakan menjadi dua, yaitu user biasa dan administrator.
  Buat halaman Login seperti gambar dibawah ini. Tombol Login untuk
masuk ke halaman berikutnya jika user sudah terdaftar. Halaman yang
dikunjungi berdasarkan
level user, jika user LOGI N
adalah administrator
User Name
maka halaman yang
dibuka adalah halaman Passw ord
administrator jika user
Daftar Login
name adalah user biasa
maka yang dibuka
adalah halaman user biasa. Sedangkan tombol daftar, digunakan untuk
pendaftaran user baru bagi yang belum terdaftar.
 Buat halaman pendaftaran yang didalamnya terdapat Form Pendaftaran
User Baru seperti gambar berikut:

PENDAFTARAN ANGGOTA

User Name

Passw ord
Nama

Alamat

E-mail

Level  Administrator  User Biasa

Simpan Reset

 Setelah sukses melakukan pendaftaran, user dapat melakukan login sesuai

dengan level user masing-masing. Untuk halaman administrator terdapat
menu Lihat Data, Tambah Data, Edit Data, Hapus Data dan
Ganti Password. Sedangkan untuk halaman user biasa terdapat menu
Edit Data (miliknya sendiri) dan Ganti Password.
 Semua halaman yang dibuat di autentifikasi menggunakan session.

3. Buatlah buku tamu (guestbook) dengan langkah-langkah pembuatan buku

tamu sebagai berikut:
e. Membuat table MySQL yang akan menyimpan isi buku tamu
f. Membuat form pengisian buku tamu
g. Membuat program untuk menerima masukan data dari form yang telah kita
buat sebelumnya
h. Membuat program untuk menampilkan isi buku tamu.
l. Tes Formatif 2
4. Apa yang anda ketahui dengan Variable dan Konstanta ?.
5. Sebutkan macam-macam statement kendali dan apa fungsinya ?
6. Buatlah program untuk menghitung faktorial. Dengan algoritma sebagai
berikut:
 Membuat form dengan menggunakan tag FORM pada HTML. Dengan data
yang dimasukkan adalah nilai faktorial yang dicari. Misal seperti gambar
berikut:

 Data yang dimasukkan disimpan dalam variable dan dikirimkan ke sebuah

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

 Hasil dari perhitungan tersebut kemudian ditampilkan dalam form yang

lain, seperti pada gambar berikut:

 Gunakan statement perulangan untuk mengerjakan tugas diatas.

 Selesai
m. Kunci Jaw aban Formatif

 Variable digunakan untuk menyimpan data sementara dan nilainya bisa

berubah-ubah setiap kali program dijalankan. Dalam PHP, variable diawali
dengan $ dan diikuti dengan nama variablenya.
Konstanta adalah variable yang nilainya tetap.

 Statement kendali terdiri dari:

 Statement I F, digunakan untuk melakukan eksekusi suatu statement

secara bersyarat.
 Statement WHI LE, digunakan untuk melakukan perulangan dalam sebuah
statement sampai kondisi tertentu terpenuhi.
 Statement FOR, digunakan untuk mengulangi sejumlah blok statement
sampai jumlah atau kondisi terpenuhi. Fungsinya sama dengan statement
while. Bedanya, dalam statement for jumlah perulangan sudah diketahui
diawal dan harus dituliskan nilai awal dan nilai akhir dari variabel
penghitung.
 Statement SWI TCH, digunakan untuk membandingkan suatu variable
dengan beberapa nilai serta menjalankan statement tertentu jika nilai
variable sama dengan nilai yang dibandingkan.
 Statement REQUIRE, digunakan untuk membaca nilai variable dan fungsi-
fungsi dari sebuah file lain.
 Statement I NCLUDE, digunakan untuk menyertakan isi suatu file tertentu.

 Program untuk menghitung faktorial adalah:

File faktorial.php
< ht m l>
< head>
< t it le> : : : Pr ogram Fak t orial: : : < / t it le>
< / head>
< body >
< cent er>
< t able border= 1 widt h= 400 >
< t r>
< t d> < font face= t ahom a size= 2> < h 3> < u > < cent er > < br>
Mencari Fak t orial< / u> < / h3>
< form act ion= fak t or.php m et hod= post >
Masuk k an Nilai Fak t orial: < br>
< input t y pe= t ex t nam e= a size= 10 > < p>
< input t y pe= subm it v alue= "Hit u ng">
< / form >
< br>
< / t d>
< / t r>
< / t able>
< / body >
< / ht m l>
 File hasil.php
< ht m l>
< head>
< t it le> : : : Pr ogram Fak t orial: : : < / t it le>
< / head>
< body >
< cent er>
< t able border= 1 widt h= 400 >
< t r>
< t d> < font face= t ahom a size= 2>
< h3> < u>
< cent er>
< br> Mencari Fak t orial< / u > < / h3 >
< form act ion= fak t orial.php m et hod= post >
<?
$c= 1;
if ( $a< 1)
{
$a= 0;
$c= 0;
};
echo "Fak t orial $a adalah: ";
for ( $b= 1; $b< $a+ 1 ; $b+ + )
{
$c= $c* $b;
}
echo( "= $ c") ;
?>
< p>
< input t y pe= subm it v alue= "Hit u ng Lagi">
< / form >
< br>
< / t d>
< / t able>
< / body >
< / ht m l>

n. Lembar Kerja 2

Alat dan Bahan

f. PC (Personal Computer) yang telah dilengkapi dengan web browser.

g. Editor Teks NotePad
h. Apache Web Server
i. Program PHP
j. Program MySQL

Kesehatan dan Keselamatan Kerja

g. Berdo’alah sebelum memulai kegiatan belajar.

h. Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
i. Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung
dengan benar.
j. Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik
di dekat komputer (magnet, handphone, dan sebagainya).
k. Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain
game.
l. Setelah selesai, matikan komputer sesuai prosedur yang aman!

Langkah Kerja

g. Siapkanlah semua peralatan yang akan digunakan!

h. Periksa semua kabel penghubung pada PC.
i. Nyalakan PC dan jalankan program web server, MySQL, PHP, editor notepad
dan web browser I nternet Explorer.
j. Kerjakan Tes Formatif 2 di atas.
k. Apabila menemui kesulitan dalam memahami materi yang ada, segera
tanyakan denga instruktur.
l. Setelah selesai, matikan komputer dan rapikan seperti semula.
3. Kegiatan Belajar 3:
Mengenal Software Web Design.

h. Tujuan Kegiatan Pemelajaran

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

i. Uraian Materi 3
1. Softw are Web Design

Software web design merupakan perangkat lunak yang berguna untuk

membangun/ membuat/ mendisain halaman-halaman web, baik yang bersifat
statis maupun dinamis. Saat ini terdapat berbagai macam software web
design yang dikeluarkan oleh vendor yang berbeda-beda. Setiap software
web design itu menawarkan berbagai macam fitur unggulannya masing-
masing. Software web design terpopuler yang ada saat ini antara lain: Adobe
I mage Ready, Macromedia Dreamweaver, Macromedia Fireworks, Microsoft
Frontpage dan lain sebagainya.

2. Mengenal Macromedia Dreamw eaver MX

Macromedia Dreamweaver yang merupakan salah satu software web design

terpopuler dipilih sebagai software web design yang akan digunakan dalam
proses pemelajaran dalam modul ini. Macromedia Dreamweaver dipilih karena
kompatibilitas dan dukungannya terhadap berbagai bahasa pemrograman
web, antara lain: ASP, JSP, CFM, ASP.NET, PHP, JavaScript, CSS dan XML
disamping keunggulan-keunggulan lainnya dibandingkan dengan software
web design yang lain. Saat ini Macromedia Dreamweaver telah sampai pada
versi 2004 yang lebih sering disebut dengan Macromedia Dreamweaver MX
2004.
Dreamweaver menjadi software utama yang digunakan oleh web designer
dan web programmer guna mengembangkan situs web. Ruang kerja, fasilitas
dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan
efektivitas dalam desain maupun pembangunan situs web. Dreamweaver juga
dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap.
Untuk dapat mengoperasikan Macromedia Dreamweaver, terlebih dahulu
harus dipastikan sudah terinstal di komputer praktikum. Apabila belum ada
Macromedia Dreamweaver yang terinstal, maka perlu dilakukan proses
instalasi. Terlebih dahulu harus dipersiapkan file instalasinya dan diikuti
dengan proses instalasi sesuai dengan installation manual yang ada. Setelah
Macromedia Dreamweaver terinstal, jalankan dengan klik 2 kali pada ikon
yang terdapat di desktop atau dapat juga dilakukan melalui Start Menu.
3. Workspace Dreamw eaver MX

Pertama kali dijalankan setelah proses instalasi selesai, user akan diberikan
pilihan Workspace Setup. Workspace Setup berfungsi untuk menentukan
workspace yang akan kita pakai selanjutnya, apakah Workspace
Dreamweaver MX apakah Workspace Dreamweaver 4. Di sini kita gunakan
Workspace Dreamweaver MX, apabila dikemudian hari kita ingin
menggunakan workspace Dreamweaver 4, kita dapat merubahnya melalui
Menu  Edit  Preferences.

Gambar 1. Workspace Setup

Workspace Dreamweaver MX tersebut memiliki tampilan window seperti pada

gambar 2. Window Dreamweaver MX ini dibagi menjadi 7 bagian, yaitu:
I nsert Bar, Document Toolbar, Document Window, Panel Groups, Tag
Selector, Property I nspector dan Files Panel.

Gambar 2. Window dan Panel Dreamweaver MX

 Keterangan Gambar:

8. I nsert bar, memuat tombol-tombol yang berfungsi untuk

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

Workspace Dreamweaver MX ini memberikan kesatuan tampilan antara

menu utama, panel, property inspector serta toolbar.

j. Rangkuman 3
Macromedia Dreamweaver yang telah sampai pada versi 2004 (MX) merupakan
software web design yang telah memiliki banyak dukungan terhadap banyak
bahasa pemrograman web. Panel-panel pada window Dreamweaver MX memiliki
peran masing-masing dalam membangun sebuah halaman web yang cantik,
sesuai dengan jiwa seni si pemakai.

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

l. Tes Formatif 3
4. Apakah yang anda ketahui tentang software web design?
5. Apa yang anda ketahui tentang pemrograman web?
6. Sebutkan beberapa software web design yang anda ketahui!
m. Kunci Jaw aban Formatif 3

4. Software web design ; perangkat lunak yang berguna untuk

membangun/ membuat/ mendisain halaman-halaman web, baik yang bersifat
statis maupun dinamis.
5. Pemrograman web, adalah pembuatan halaman web yang didalamnya
mengandung unsur bahasa pemrograman disamping tetap menggunakan tag-
tag HTML. Biasanya pemrograman web bertujuan untuk membangun web-
web dinamis.
6. Software web design: Microsoft Frontpage, Macromedia Fireworks,
Macromedia Dreamweaver, Adobe I mageReady, Namo Web editor dan lain –
lain.

n. Lembar Kerja 3
Alat dan Bahan
Personal Computer (PC).

Kesehatan dan Keselamatan Kerja

5. Berdo’alah sebelum memulai kegiatan belajar.
6. Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
7. Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung
dengan benar.
8. Setelah selesai, matikan komputer sesuai prosedur!

Langkah Kerja
8. Siapkanlah semua peralatan yang dibutuhkan!
9. Periksa semua kabel penghubung pada komputer.
10. Nyalakan komputer dan pastikan komputer tersebut telah terkoneksi internet
dengan baik.
11. Pastikan PC yang anda pakai sudah memiliki software web design, jika belum
lakukanlah instalasi software yang dibutuhkan, yaitu: Macromedia
Dreamweaver MX .
12. Jalankan Macromedia Dreamweaver MX, amati dan catat bagian-bagian pada
window Dreamweaver MX. Jika mengalami kesulitan, tanyakan pada
instruktur.
13. Setelah selesai, laporkan hasil kerja Anda kepada instruktur.
14. Setelah diteliti matikan komputer dan rapikan seperti semula.
 BAB I I I
EVALUASI

E. Tes Tulis
Jawablah pertanyaan berikut ini dengan singkat dan jelas!
8. Jelaskan masing-masing fungsi dari tag-tag berikut:
a. < h1>
b. < p>
c. < br>
d. < hr>
9. Apakah fungsi dari link, form dan frame dalam pembuatan web?
10. Apa perbedaan frame dan frameset?
11. Apa perbedaan checkbox dan radio button?
12. Apakah fungsi dari tombol Submit dan Reset?
13. Apa yang anda ketahui dengan Variable dan Konstanta ?.
14. Sebutkan macam-macam statement kendali dan apa fungsinya ?

F. Tes Praktek
Buatlah halaman web dengan content yang lengkap. Web yang anda buat digunakan
untuk mengelola Sistem Administrasi Sisw a sekolah anda. Sebelum membuat
halaman web tersebut terlebih dahulu anda harus merencanakan disain dan layout
halaman web, struktur data dan algoritma program, serta menentukan model dan
skema data base (terdiri dari tabel dan field apa saja, relasi dan query-nya). Setelah
proyek anda selesai, silahkan membuat laporan dan serahkan ke guru pembimbing
anda masing-masing.
Ketentuan minimal dari program yang akan anda buat adalah bahwa program anda
nantinya minimal akan dibuka/ diakses oleh Administrator, Guru/ karyawan, Siswa dan
Orang Tua/ wali Siswa.
 Administrator
Memiliki hak akses tertinggi dalam program tersebut. Data-data yang dapat
dimasukkan dan diubah oleh administrator adalah:
1. Data Profile Sekolah
2. Data Guru/ Karyawan
3. Data Siswa
4. Data Orang Tua/ Wali Siswa
5. Data Jurusan
6. Data Kelas
7. Data Pelajaran
 8. Data Tempuh
9. Data Absensi
10. Data Nilai Siswa
11. Data User
 Guru/ karyaw an
Untuk user guru, data yang dapat dimasukkan dan diubah adalah:
1. Data Nilai untuk mata pelajaran yang diajar
2. Ubah Passwordnya sendiri
 Sisw a
User siswa hanya memiliki hak akses untuk melihat nilai dan absensinya sendiri.
Dan dapat merubah password milik siswa tersebut.
 Orang Tua/ w ali Sisw a
User Orang Tua/Wali memiliki hak akses untuk melihat nilai dan absensi
putranya. Dan dapat merubah password miliknya sendiri.
Ketentuan diatas adalah ketentuan minimal, silahkan dilengkapi sebagus mungkin.
Silahkan melakukan studi kasus di sekolah anda sendiri atau di sekolah lain untuk
membantu anda dalam melengkapi content halaman web dan untuk menentukan
field-field dari tabel yang diperlukan.

G. Kunci Jaw aban Tes Tulis

8. Fungsi dari tag:

a. < h1> : digunakan untuk mengatur ukuran huruf pada header dengan angka
1 berarti mempunyai ukuran paling besar.
b. < p> : digunakan untuk berpindah alinea atau membuat paragraf baru
c. < br> : Digunakan untuk pindah baris baru.
d. < hr> : digunakan untuk membuat garis horisontal
9. Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain,
dapat berupa teks maupun gambar.
Form, digunakan untuk mengumpulkan informasi dari pengunjung (berinteraksi
dengan pengunjung) karena form dapat berupa model isian yang harus diisi
pengunjung dan akan dibca oleh pemilik web.
Frame, merupakan pembagi halaman.
10. Frame adalah dokumen yang terdapat di dalam frameset dengan border yang
mengelilinginya. Sedangkan frameset, adalah suatu frame yang dapat
menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa
frameset yang lainnya.
11. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk menentukan
pilihan dari suatu daftar pilihan. Perbedaanya terletak pada jumlah pilihan yang
dapat dipilih. Pada checkbox, pengunjung halaman web dapat memilih beberapa
 dari daftar pilihan, namun dengan radio button, pengunjung hanya berhak
menentukan satu pilihan saja.
12. Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan dalam
form untuk selanjutnya diolah oleh server. Dan tombol reset berfungsi untuk
mengosongkan dan atau mengembalikan ke nilai default data yang ada dalam
form.
13. Variable digunakan untuk menyimpan data sementara dan nilainya bisa berubah-
ubah setiap kali program dijalankan. Dalam PHP, variable diawali dengan $ dan
diikuti dengan nama variablenya.
Konstanta adalah variable yang nilainya tetap.
14. Statement kendali terdiri dari:
g. Statement I F, digunakan untuk melakukan eksekusi suatu statement secara
bersyarat.
h. Statement WHI LE, digunakan untuk melakukan perulangan dalam sebuah
statement sampai kondisi tertentu terpenuhi.
i. Statement FOR, digunakan untuk mengulangi sejumlah blok statement sampai
jumlah atau kondisi terpenuhi. Fungsinya sama dengan statement while.
Bedanya, dalam statement for jumlah perulangan sudah diketahui diawal dan
harus dituliskan nilai awal dan nilai akhir dari variabel penghitung.
j. Statement SWI TCH, digunakan untuk membandingkan suatu variable dengan
beberapa nilai serta menjalankan statement tertentu jika nilai variable sama
dengan nilai yang dibandingkan.
k. Statement REQUIRE, digunakan untuk membaca nilai variable dan fungsi-
fungsi dari sebuah file lain.
l. Statement I NCLUDE, digunakan untuk menyertakan isi suatu file tertentu.
H. Lembar Penilaian Tes Praktek

PEDOMAN PENI LAI AN

Nama Peserta :
No. Induk :
Kompetensi Keahlian : Teknik Komputer dan Jaringan

Nama Jenis Pekerjaan : Pemrograman w eb

Skor Skor
No. Aspek Penilaian Ket.
Maks Perolehan
1 2 3 4 5
VI I Perencanaan
1.5. Persiapan Hardware dan Software 5
1.6. Menganalisa jenis desain 5
Sub Total 10
VI I I Membuat Layout
2.1. Penyiapan Layout 5
2.2. Menentukan warna dan gambar 5
Sub Total 10
IX Proses (Sistematika & Cara Kerja)
3.1. Cara I nstalasi program aplikasi 5
3.2. Cara menyiapkan struktur data dan
5
algoritma program
3.3. Cara menyiapkan Database 5
3.4. Cara koding program 5
3.5. Cara melakukan layout 5
3.6. Cara menetapkan warna 5
Sub Total 30
X Kualitas Produk Kerja
4.1. Halaman Web
 Layut halaman web 2,5
 Komposisi warna dan gambar 2,5
4.2. Data Base
 Desain model database 2,5
 Relation 2,5
 Query 2,5
 Skor Skor
No. Aspek Penilaian Ket.
Maks Perolehan
1 2 3 4 5
4.3. Bahasa Program
 Penggunaan server side script 2,5
 Program dibuat dengan efisien 2,5
4.4. Security
Keamanan Data
 Back up data 2,5
 Sistem data log 2,5
Keamanan Akses
 Autentifikasi user 2,5
 Pembatasan hak akses 2,5
4.5. Pekerjaan diselesaikan dengan waktu
2,5
yang telah ditentukan
Sub Total 30
XI Sikap/ Etos Kerja
5.1. Tanggung jawab 2
5.2. Ketelitian 3
5.3. I nisiatif 3
5.4. Kemandirian 2
Sub Total 10
XI I Laporan
6.1. Sistimatika penyusunan laporan 4
6.2. Kelengkapan bukti fisik 6
Sub Total 10
Total 100
 KRI TERI A PENI LAI AN

No. Aspek Penilaian Kriteria Penilaian Skor

VI I Perencanaan
1.7. Persiapan Hardware dan  Hardware dan Software
5
Software disiapkan sesuai kebutuhan
 Hardware dan Software
1
disiapkan sesuai kebutuhan
1.8. Menganalisa jenis desain  Merencanakan sesuai tahapan/
5
proses desain
 Tidak merencanakan tahapan/
1
proses desain
VI I I Membuat Layout
2.1. Penyiapan Layout  Layout web disiapkan sesuai
5
prosedur
 Layout web tidak disiapkan
1
sesuai prosedur
2.2. Menentukan warna dan  Halaman web dilengkapi
5
gambar dengan warna dan gambar
 Halaman web tidak dilengkapai
1
dengan warna dan gambar
IX Proses (Sistematika & Cara Kerja)
3.1. Cara I nstalasi program  Program aplikasi diinstall
aplikasi dengan benar sesuai dengan 5
kebutuhan
 Program aplikasi tidak diinstall
dengan benar sesuai dengan 1
kebutuhan
3.2. Cara menyiapkan struktur  Struktur data dan algoritma
data dan algoritma program program disiapkan sesuai 5
dengan rencana
 Struktur data dan algoritma
program disiapkan tidak sesuai 1
dengan rencana
3.3. Cara menyiapkan Database  Database disiapkan sesuai
5
dengan normalisasi database
 Database disiapkan tidak
sesuai dengan normalisasi 1
database
3.4. Cara koding program  Program di buat sesuai dengan
5
algoritma program dan efisien
 Program di buat tidak sesuai
dengan algoritma program dan 1
tidak efisien
No. Aspek Penilaian Kriteria Penilaian Skor
3.5. Cara melakukan layout  Layout memenuhi dasar-dasar
5
estetika
 Layout tidak memenuhi dasar-
1
dasar estetika
3.6. Cara menetapkan warna  Penggunaan warna memenuhi
5
harmoni warna
 Penggunaan warna tidak
1
harmoni
X Kualitas Produk Kerja
4.1. Halaman Web
 Layut halaman web  Halaman web dibuat sesuai
2,5
dengan layout
 Halaman web tidak dibuat
0,5
sesuai dengan layout
 Komposisi warna dan  Komposisi warna dan gambar
2,5
gambar selaras
 Komposisi warna dan gambar
0,5
tidak selaras
4.2. Data Base
 Disain model database  Database dibuat mengguna-
2,5
kan/ sesuai DMD
 Database dibuat tidak meng-
0,5
gunakan/ sesuai DMD
 Relation  Menggunakan Database relasi 2,5
 Tidak menggunakan database
0,5
relasi
 Query  Menggunakan query data 2,5
 Tidak menggunakan query
0,5
data
4.3. Bahasa Program
 Penggunaan server side  Web dibuat dengan teknologi/
2,5
script bahasa server side script
 Web dibuat tidak dengan
teknologi/ bahasa server side 0,5
script
 Program dibuat dengan  Program dibuat se-efisien
2,5
efisien mungkin
 Program dibuat terlalu panjang 0,5
4.4. Security
Keamanan Data
 Back up data  Dalam halaman web terdapat
2,5
fasilitas aplikasi backup data
 Dalam halaman web tidak
terdapat fasilitas aplikasi 0,5
backup data
 No. Aspek Penilaian Kriteria Penilaian Skor
 Sistem data log  Terdapat fasilitas pencatatan
2,5
sistem data log
 Tidak terdapat fasilitas
0,5
pencatatan sistem data log
Keamanan Akses
 Autentifikasi user  Halaman web diberi fasilitas
2,5
autentifikasi user
 Halaman web tidak diberi
0,5
fasilitas autentifikasi user
 Pembatasan hak akses  Pemakai dbedakan hak
2,5
aksesnya
 Pemakai tidak dibedakan hak
0,5
aksesnya
4.5. Pekerjaan diselesaikan  Diselesaikan tepat waktu 2,5
dengan waktu yang telah  Diselesaikan tidak tepat waktu 0,5
ditentukan
XI Sikap/ Etos Kerja
5.1. Tanggung jawab  Membereskan kembali alat dan
2
bahan yang dipergunakan
 Tidak membereskan alat dan
0,5
bahan yang dipergunakan
5.2. Ketelitian  Tidak banyak melakukan
3
kesalahan kerja
 Banyak melakukan kesalahan
0,5
kerja
5.3. I nisiatif  Memiliki inisiatif bekerja 3
 Kurang/ tidak memiliki inisiatif
0,5
kerja
5.4. Kemandirian  Bekerja tanpa banyak
2
diperintah
 Bekerja dengan banyak
0,5
diperintah
XI I Laporan
6.1. Sistimatika penyusunan  Laporan disusun sesuai
laporan sistimatika yang telah 4
ditentukan
 Laporan disusun tanpa
1
sistimatika
6.2. Kelengkapan bukti fisik  Melampirkan bukti fisik hasil
6
penyusunan
 Tidak melampirkan bukti fisik 2
Kategori kelulusan:
70 – 79 : Memenuhi kriteria mininal. Dapat bekerja dengan bimbingan.
80 – 89 : Memenuhi kriteria minimal. Dapat bekerja tanpa bimbingan.
90 – 100 : Di atas kriteria minimal. Dapat bekerja tanpa bimbingan.
 BAB I V
PENUTUP

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

11. Bimo Sunarfrihantono, ST, PHP dan MySQL Untuk WEB, Andi 2003
12. Bunafit Nugroho, PHP & MySQL Dengan Editor Dreamw eaver MX, Andi, 2004
13. Mico Pardosi, Bahasa Pemrograman I nternet, HTML dan Javascript, I ndah,
2001
14. MADCOMS, Aplikasi Manajemen Database Pendidikan Berbasis Web Dengan
PHP dan MySQL, Andi, 2005
15. Sutarman, S.Kom, Membangun Aplikasi Web Dengan PHP dan MySQL, Graha
I lmu, 2003
16. Teguh Wahyono, PHP TRI AD Fundamental (Memahami Pemrograman Web
Dengan PHP dan MySQL dalam 24 Jam), Gava Media, 2005
17. Visibooks, HTML and JavaScript for Visual Learners,
18. Yahya Kurniawan, ST, Aplikasi Web Database dengan PHP dan MySQL, Elex
Media Komputendo, 2003.
19. http:/ / www.ilmukomputer.com
20. http:/ / www.klik-kanan.com