Praktikum Pemrograman Web

Politeknik Telkom
Praktikum Pemrograman Web
1 DESAIN HALAMAN WEB
Overview
Sebuah aplikasi web dibangun menggunakan tag HTML. Pada praktikum

pertama ini akan dipelajari bagaimana membuat dokumen HTML sederhana,
memformat tampilan pada dokumen HTML dan membuat list yang yang biasa
kita gunakan untuk menampilkan daftar dengan urutan tertentu. Untuk
praktikum ini akan menggunakan notepad sebagai HTML editornya.
Tujuan
1.
2.
3.
4.
5.
6.
Mengenal dasar-dasar HTML

Mengenal HTML Editor
Membuat dokumen HTML dan melakukan pemformatan dokumen yang
sederhana.
Membuat teks preformat dan karakter spesial
Membuat list pada dokumen HTML
Membuat list bersarang pada dokumen HTML
Desain Halaman Web
1-1
Politeknik Telkom
1.1
Pengenalan HTML
1.1.1
Format Penulisan Dokumen HTML
Untuk membuat suatu halaman HTML standar digunakan tag

<html>, <head>, <body> beserta tag penutupnya masing-masing. Susunan tag
tag tersebut membentuk dokumen HTML sebagai berikut :
<html>
<head>
... informasi tentang dokumen HTML
</head>
<body>
... informasi yang akan ditampilkan di web browser
</body>
</html>
1.1.2
Memulai Membuat Dokumen dengan Format HTML
Langkah langkah untuk memulai membuat dokumen HTML sebagai

berikut :
1. Buka notepad sebagai editor dokumen HTML.
2. Buat skrip sederhana seperti di bawah ini di notepad :
Contoh 1.1 Dokumen HTML Sederhana
<html>
<head>
<title>Halaman Web Pertamaku</title>
</head>
<body>
Ini adalah halaman web pertamaku
</body>
</html>
3.
Simpan dokumen yang telah dibuat dengan menggunakan ekstensi

.htm atau .html
Desain Halaman Web
1-2
Politeknik Telkom
Gambar 1.1 Penyimpanan Dokumen HTML

Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka
dokumen tersebut menggunakan web browser.
Judul Dokumen
HTML
4.
Informasi
yang
dituliskan
pada
tag
<body>
Gambar 1.2 Hasil Eksekusi Contoh 1.1
Desain Halaman Web
1-3
Politeknik Telkom
5.
1.2
1.2.1
Alamat file yang diakses ditunjukkan pada url. Untuk contoh diatas,
url
yang
dimaksud
adalah
D:\WDM\TPSDP
2005\HTML\contoh_1.1.htm
Tag Tag Dasar HTML

Heading
Contoh 1.2 Menggunakan Heading

<html>
<head>
<title>Menggunakan Heading</title>
</head>
<body>
Dokumen HTML berikut ini menggunakan heading
<h1>Heading 1</h1>
<h2 align=right>Heading 2</h2>
<h3 align=center>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan
hasil seperti pada gambar di bawah ini :

Desain Halaman Web
1-4
Politeknik Telkom
1.2.2
Paragraf
Contoh 1.3 Memformat paragraf

<html>
<head>
<title>Memformat Paragraf</title>
</head>
<body>
<p>Paragraf Pertama</p>
<p>Paragraf pertama ini menggunakan rataan kiri.</p>
<p></p>
<p align=center>Paragraf Kedua</p>
<p align=center>Paragraf kedua ini menggunakan rataan
tengah</p>
<p></p>
<p align=right>Paragraf Ketiga</p>
<p align=right>Paragraf ketiga ini menggunakan rataan
kanan</p>
</body>
</html>
Hasil :
1.2.3
Line Break
Contoh 1.4 Menggunakan Line Break

<html>
Desain Halaman Web
1-5
Politeknik Telkom
<head>
<title>Menggunakan Line Break</title>
</head>
<body>
Menggunakan Line Break<br><br>
Dengan menggunakan line break, kita dapat memindahkan
kalimat<br>
setelah elemen tersebut satu baris di bawahnya.<br>
seperti halnya menggunakan ENTER pada word processing.
</body>
</html>
Hasil :
1.2.4
Preformatted Text
Contoh 1.5 Menggunakan Preformatted Text

<html>
<head>
<title>Menggunakan Preformatted Text</title>
</head>
<body>
<pre>
Dokumen HTML ini menggunakan Preformatted Text
Dimana informasi yang ditampilkan pada web browser
Sesuai dengan apa yang dituliskan pada editor
Apakah tag ini mempermudah penyampaian informasi
Melalui dokumen HTML ?
</pre>
</body>
</html>
Desain Halaman Web
1-6
Politeknik Telkom
Hasil :
1.2.5
Memformat Bentuk Tulisan
Contoh 1.6 Memformat Tulisan

<html>
<head>
<title>Memformat Tulisan</title>
</head>
<body>

<b>Tulisan ini akan tercetak tebal</b>
<p>

<i>Tulisan ini akan tercetak miring</i>
<p>

<u>Pada tulisan ini terdapat garis bawah</u>
<p>

Dalam matematika, x pangkat 2 ditulis dengan X <sup>2</sup>
<p>

Rumus kimia untuk oxygen adalah O <sub>2</sub>
</body>
</html>
Desain Halaman Web
1-7
Politeknik Telkom
D:/dokumen/contoh_1.6.htm
1.2.6
Tag Font
Contoh 1.7 Menambahkan atribut pada tag font

<html>
<head>
<title>Mengolah Font dengan Properties Font</title>
</head>
<body>
<font size="1" face=verdana color=#FF0000>Tulisan ini
dengan font size adalah 1, face Verdana dan berwarna
merah</font>
<br>
<font size="4" face=arial color=green>Tulisan ini dengan
font size adalah 4, <br>face arial dan berwarna hijau</font>
</body>
</html>
Desain Halaman Web
1-8
Politeknik Telkom
1.2.7
Horizontal Rules
Contoh 1.8 Menambahkan Garis Horisontal

<html>
<head>
<title>Horizontal Rules</title>
</head>
<body>
Menambahkan garis horisontal pada dokumen HTML
<hr size="15">
<hr width="100" align=left>
<hr color="blue">
<h color="red" size="3" width="300" noshade>
</body>
</html>
Hasil :

Desain Halaman Web
1-9
Politeknik Telkom
1.3
List
List merupakan bentuk umum yang biasa kita gunakan untuk

menampilkan daftar dengan urutan tertentu. Dalam HTML, dikenal 3 (tiga)
istilah list : ordered list, unordered list dan definition list.
1.3.1
List Tanpa Urutan (Unordered Lists)
Contoh 1.9 Menggunakan Unordered List

<html>
<head>
<title>Menggunakan List</title>
</head>
<body>
<h3>Menggunakan Unordered List</h3>
<hr>
<h4>Ordered List dengan Type Default</h4>
<ul>
<li>Manchester United</li>
<li>Chelsea</li>
<li>Arsenal</li>
</ul>
<h4>Unordered List dengan Type Circle</h4>
<ul type="circle">
<li>Juventus</li>
<li>AC Milan</li>
<li>AS Roma</li>
</ul>
<h4>Unordered List dengan Type Disc</h4>
<ul type="disc">
<li>Real Madrid</li>
<li>Barcelona</li>
<li>Malaga</li>
</ul>
<h4>Unordered List dengan Type Square</h4>
<ul type="square">
<li>PSV</li>
<li>Ajax Amsterdam</li>
<li>Feyenord</li>
</ul>
</body>
</html>
Desain Halaman Web
1-10
Politeknik Telkom
Desain Halaman Web
1-11
Politeknik Telkom
1.3.2
List Berurut (Ordered Lists)
Contoh 1.10 Menggunakan Ordered List

<html>
<head>
<title>Menggunakan List</title>
</head>
<body>
<h3>Menggunakan Ordered List</h3>
<hr>
<h4>Ordered List dengan Type Default</h4>
<ol>
<li>Nasi Goreng</li>
<li>Nasi Rames</li>
<li>Pecel Lele</li>
</ol>
<h4>Ordered List dengan Type a</h4>
<ol type="a">
<li>Nasi Rames</li>
<li>Pecel Lele</li>
</ol>
<h4>Ordered List dengan Type I</h4>
<ol type="I">
<li>Nasi Rames</li>
<li>Pecel Lele</li>
</ol>
<h4>Ordered List dengan Menambahkan Atribut Start</h4>
<ol start="4">
<li>Nasi Rames</li>
<li>Pecel Lele</li>
</ol>
</body>
</html>
Desain Halaman Web
1-12
Politeknik Telkom
Desain Halaman Web
1-13
Politeknik Telkom
1.3.3
Definition Lists
Contoh 1.11 Menggunakan Definition List :

<HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
<h3>Membuat Definition Lists</h3>
<DL>
<DT> HTTP
<DD> HyperText Transfer Protocol
<DT> FTP
<DD> File Transfer Protocol
</DL>
</BODY>
</HTML>
Hasil :
1.3.4
List Bersarang (Nested Lists)
Dalam pemakaian list, kita dapat menggabungkan penggunaan

unordered list dan ordered list dalam bentuk list bersarang.
Desain Halaman Web
1-14
Politeknik Telkom
Jurnal
1.
Buatlah halaman HTML untuk menampilkan teks di bawah ini :

H2O
X2 + 4X + 4
Linux adalah sistem operasi yang bersifat open source.
2.
Buatlah dokumen HTML dengan tampilan sebagai berikut :

Keterangan : garis berwarna merah
Desain Halaman Web
1-15
Politeknik Telkom
2 LINK DAN GAMBAR
Overview
Kemudahan dalam aplikasi berbasis web salah satunya adalah bisa

menghubungkan satu dokumen dengan dokumen lainnya, baik dalam satu
server aplikasi web maupun dengan server aplikasi web yang berbeda di
seluruh dunia maya.
HTML menyediakan hypertext link yang merupakan daerah teks (ataupun
gambar) yang bisa link (menyambungkan) ke dokumen HTML yang lain.
Seiring berkembangnya teknologi internet, bukan hanya teks dan gambar yang
bisa link ke dokumen tertentu, file multimedia pun sudah dapat dibuat link ke
dokumen yang diinginkan.
Tujuan
1.
2.
3.
4.
5.
Membuat link antar dokumen HTML

Relative Links versus Absolute Pathnames.
Membuat link ke bagian tertentu dari dokumen (anchor) yang sama
Memasukan gambar ke halaman HTML
Membuat link dari gambar
Link dan Gambar
2-1
Politeknik Telkom
2.1
Link
Kekuatan utama dokumen HTML terletak pada hypertext link atau

hyperlink atau lebih singkat lagi disebut link. Dengan hyperlink ini kita bisa
membuka dokumen HTML lain atau langsung menuju ke bagian tertentu
sebuah dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu
ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut
(secara default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis
penulisan :
<A href=url_tujuan> nama_link </A>
Beberapa atribut yang dapat ditambahkan dalam tag <a> diantaranya :

Atribut
Href
Name
Target
Title
2.1.1
Kegunaan
Menunjukkan url yang dituju
Memberikan nama pada bagian tertentu pada dokumen
Menunjukkan target ditampilkannya link
Menunjukkan title dari link ketika cursor digerakkan di
sekitar area hyperlink
Membuat Link antar Dokumen HTML
Contoh membuat link ini, dapat dilihat dari script di bawah ini,
sebelumnya siapkan halaman html dengan nama jur_MI.htm, jur_KA.htm,
jur_TK.htm (disimpan di direktori /web/prodi/) dan simpan script dibawah ini
dengan nama file Link.htm :
<html>
<head> <title> Politeknik Telkom </title> </head>
<body>
<a href="http://www.politekniktelkom.ac.id">
<img src="poltek.gif" width="100" height="100"
alt="Politeknik Telkom" align=left>
</A>
<center>
<h3>Politeknik Telkom</h3>
<h5>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung</h5>
<hr>
[ <a href="jur_MI.htm"> Manajemen Informatika </a> ]
[ <a href="jur_KA.htm" target="_blank"> Komputer Akuntansi
</a> ]
[ <a href="D:/web/jur_TK.htm"> Teknik Komputer </a> ]
<br><br>
Link dan Gambar
2-2
Politeknik Telkom
[ <a href="mailto:baa@politekniktelkom.ac.id"> BAA </a> ]

[ <a href=http://www.dikti.org target="_blank">Dikti</a> ]
</center>
</body>
</html>
Pada contoh diatas menu Manajemen Informatika dan Komputerisasi

Akuntansi merupakan Relative Link, menu BAA merupakan link ke alamat
email, menu Teknik Komputer dan menu Dikti merupakan link dengan
Absolute Pathnames sedangkan logo Politeknik Telkom merupakan gambar
yang bisa link ke alamat web tertentu.
Untuk tampilan script diatas pada browsernya akan tampak seperti ini :
Gambar 2-1 Contoh link ke dokumen tertentu
2.1.2
Membuat Link ke Bagian Tertentu dalam Dokumen
Seringkali halaman web adalah halaman yang panjang dan selalu

membukanya dari posisi awal akan sangat melelahkan bagi pengguna. Untuk
itu akan lebih memudahkan bila kita langsung merujuk pada bagian tertentu
sebuah halaman web. Caranya dengan menyisipkan Tag Anchor <a> dengan
atribut "name" di bagian dokumen yang akan dituju.
Berikut ini sintaksisnya :
<a name="nama_section"> </a>
Link dan Gambar
2-3
Politeknik Telkom
Untuk menggunakan link yang akan merujuk ke bagian dokumen itu,

ditambahkan '#nama_section" menjadi :
<a href="sebuah_halaman.html#nama_section">langsung ke
nama section</a>
Cobalah script berikut ini :

<HTML>
<HEAD>
<TITLE>Membuat Link Ke Bagian dalam Dokumen</TITLE>
</HEAD>
<BODY>
<H4>Membuat Link ke Bagian dalam Dokumen</H4>
<A NAME="bab1"></A>
<B>Bab 1</B><BR>
Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.<BR>
Mulai dari membuat dokumen HTML yang sederhana sampai membuat
sebuah web.<Br>
Sebagai pendahuluan, coba klik link ini untuk
<A HREF="#sejarah">menuju ke bagian lain</A> pada dokumen ini..
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<A NAME="sejarah"></A>
<B>1.1 Sekilas Sejarah Internet</B><BR>
Bab ini adalah bagian lain pada dokumen yang dituju ketika link
pada Bab 1 diklik.<BR>
Untuk kembali ke Bab 1, klik <A HREF="#bab1">disini</A>
</BODY>
</HTML>
Link dan Gambar
2-4
Politeknik Telkom
Gambar 2-2 Contoh link ke dokumen yang sama
2.2
Gambar
Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>.

Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp,
jpeg, pcx, gif, psd, dan sebagainya. Pada umumnya, perancang web hanya
menggunakan kombinasi dari tiga format file gambar saja yaitu jpeg, gif dan
psd.
Sintaksis:
Link dan Gambar
2-5
Politeknik Telkom
<IMG src="url_file" width="img_width" height="img_height"

vspace="10" hspace="10" alt="alt_teks">
Contoh Menambahkan Image ke Dokumen HTML

<html>
<head> <title> Menambahkan Image </title> </head>
<body>
<h4>Menambahkan image ke dalam dokumen HTML</h4>
<img src="Clock-hands.bmp" width="150" height="120">
<br>
<h4>Mengatur border pada image</h4>
<img src="Clock-hands.bmp" border="5">
<br>
<h4>Alternating Text</a>
pada image di bawah ini terdapat alternating text.
silahkan gerakkan mouse melewati image<br>
<img src="Clock-hands.bmp" alt="Alternating Text">
</body>
</html>
Gambar 2-3 Menambahkan image

Link dan Gambar
2-6
Politeknik Telkom
2.2.1
Gambar sebagai Hyperlink

Contoh penerapan gambar sebagai hyperlink adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE>Halaman Awal</TITLE>
</HEAD>
<BODY>
<H4>Selamat Datang di Situs Pribadi Saya</H4>
2untuk bisa menjelajahi situs ini,
silahkan klik pada gambar berikut
<A HREF="contoh_4.2.htm">
<IMG SRC="lambang_poltek_telkom.bmp"
ALT="Link Menggunakan Image"></A>
<BR><BR>
Selamat menikmati penjelajahan di situs ini.
</BODY>
</HTML>
Hasilnya seperti gambar di bawah ini :
Gambar 2-4 Menambahkan image
Link dan Gambar
2-7
Politeknik Telkom
Jurnal
3.
Buatlah link untuk masing-masing menu pada gambar di bawah ini :
Gambar 2-5 Studi Kasus Hyperlink

4.
Berikan contoh penggunaan gambar sebagai hyperlink ke dokumen yang

sama!
Link dan Gambar
2-8
Politeknik Telkom
3 FORM
Overview
Pada praktikum ini akan mempelajari pembuatan dokumen HTML yang lebih
interaktif dan menarik. Dokumen HTML harus mampu menyediakan fasilitas
yang dapat menerima masukan atau isian data dari user. Data isian dari
pengguna ini untuk kemudian dapat diproses lebih lanjut menjadi informasi
yang dibutuhkan baik oleh user maupun oleh pemilik web itu sendiri.
Pengguna web dapat memasukkan inputan pada dokumen HTML melalui
elemen form.
Tujuan
7.
8.
9.
Membuat form pada dokumen HTML

Mengerti cara penggunaan form pada halaman dokumen HTML.
Mampu menggunakan Input Field sesuai kegunaannya.
Form
3-1
Politeknik Telkom
3.1
Form
Form merupakan media untuk menampung elemen - elemen yang

terdapat didalamnya. Informasi yang diisikan oleh pengguna akan dikirimkan
ke server melalui form ini.
Sintaks umum pembuatan form pada dokumen HTML :
<form action=_url_ method=get|post enctype=>
... elemen elemen yang ditambahkan dalan form ...
</form>
3.2
Jenis Inputan dalam Form
3.2.1
Text
Jenis inputan type text digunakan untuk menerima masukan dari user
berupa data yang berupa huruf, angka dan simbol untuk dikirim ke server.
Contoh 4.1 Menambahkan Elemen Text
<html>
<head>
<title>Menambahkan Elemen Text</title>
</head>
<body>
nama : <input type="text" name="nama">
<br>
nim : <input type="text" name="nim" value="901" maxlength="9"
size="9">
</body>
</html>
Gbr. Hasil Eksekusi Contoh 4.1

Form
3-2
Politeknik Telkom
3.2.2
Password
Dengan menggunakan elemen input dengan type password, isian
pada text box akan diubah menjadi tanda bintang (*). Elemen ini biasanya
digunakan untuk pengisian password.
Contoh 4.2 Menyembunyikan Password
<html>
<head>
<title>Menyembunyikan Password</title>
</head>
<body>
Password Anda : <input type="password" name="nama"
size="30" maxlength="15">
</body>
</html>

3.2.3
Radio
Dengan menggunakan elemen radio, pada form disediakan beberapa
pilihan, namun hanya satu yang dapat dipilih dari pilihan tersebut.
Contoh 4.3 Menampilkan Pilihan pada Dokumen HTML
<html>
<head>
<title>Menambahkan Pilihan pada Dokumen HTML</title>
</head>
<body>
Jenis kelamin :
Form
3-3
Politeknik Telkom
<br><input type="radio" name="jns_kelamin" value="L"

checked>Laki- laki
<br><input type="radio" name="jns_kelamin" value="P">Perempuan
</body>
</html>

3.2.4
Checkbox
Berbeda dengan elemen radio, elemen checkbox menyediakan
beberapa pilihan yang dapat dipilih lebih dari 1 (satu). Masing masing elemen
checkbox harus mempunyai nama yang berbeda satu sama lain.
Contoh 4.4 Pilihan Ganda pada Dokumen HTML
<html>
<head>
<title>Pilihan Ganda pada Dokumen HTML</title>
</head>
<body>
Hobi Anda :
<br><input type="checkbox" name="hobi1" value="baca"
checked>Baca
<br><input type="checkbox" name="hobi2"
value="belanja">Belanja
<br><input type="checkbox" name="hobi3" value="coding"
checked>Coding
<br><input type="checkbox" name="hobi4" value="nonton">Nonton
</body>
</html>
Form
3-4
Politeknik Telkom

3.2.5 Button
Ada 4 (empat) jenis varian pada elemen ini :
- Submit
Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di
atribut action.
- Reset
Tombol ini berfungsi untuk mengembalikan form ke kondisi awal
(mengosongkan nilai semua elemen yang ada pada form)
- Button
Tombol ini berfungsi untuk membuat form lebih interaktif dengan
memanggil script lain.
- Image
Menggunakan gambar sebagai pengganti tombol.
Contoh 4.5 Menambahkan Tombol di Dokumen HTML
<html>
<head>
<html>
<head>
<title>Menambahkan Tombol di Dokumen HTML</title>
Form
3-5
Politeknik Telkom
</head>
<body>
<input type="submit" value ="Kirim" name="Submit">
<input type="reset" value ="Ulangi" name ="Reset">
<input type="button" value ="Batal" name ="Cancel">
<input
type="image"
name="Gambar"
src="lambang_profesional.bmp"
width="50" height="50">
</form>
</body>
</html>

3.2.6
Textarea
Untuk mendapatkan masukan dari user dengan karakter dalam
jumlah banyak (masukan berupa kalimat yang panjangnya lebih dari 255
karakter) dibutuhkan elemen yang mampu menampung inputan tersebut.
Dalam dokumen HTML disediakan elemen yang mampu menampung inputan
tersebut. Elemen tersebut dinamai textarea.
Contoh 4.6 Menerima Masukan yang Panjang
<html>
<head>
<title>Menerima Masukan yang Panjang</title>
</head>
<body>
Form
3-6
Politeknik Telkom
Deskripsi diri :
<br>
<textarea
name="deskripsi"
cols="25"
deskripsi diri Anda disini</textarea>
</body>
</html>
rows="5">Tuliskan

3.2.7
Select
Pada dokumen HTML disediakan elemen untuk membentuk pilihan
dalam bentuk dropdown. Tag yang digunakan untuk membuat pilihan dalam
bentuk dropdown adalah tag <select>.
Contoh 4.7 Pilihan Menggunakan Dropdown
<html>
<head>
<title>Pilihan Menggunakan Dropdown</title>
</head>
<body>
Peminatan pilih salah satu:
<br>
<select name="peminatan">
<option value="wm">Web Master</option>
<option value="db">Database Management</option>
Form
3-7
Politeknik Telkom
<option value="cnm">Computer Network Management</option>

</select>
<br>
Kemampuan :
<br>
<select size="4" name="kemampuan" multiple>
<option value="asp">asp</option>
<option value="php">php</option>
<option value="mysql">mysql</option>
<option value="oracle">oracle</option>
<option value="hardware">hardware</option>
<option value="jaringan">jaringan</option>
</select>
</body>
</html>
Form
3-8
Politeknik Telkom
Rangkuman
1.
2.
3.
Form digunakan untuk menerima masukan berupa informasi atau data

dari pengguna.
User memasukkan informasi melalui sejumlah elemen yang disebut
kontrol. Kontrol ini dapat berupa input field TEXT, PASSWORD,
CHECKBOX, RADIO BUTTON, BUTTON, TEXTAREA, LIST MENU.
Terdapat dua atribut metoda penanganan form, yaitu metoda GET dan
metoda POST.
Form
3-9
Politeknik Telkom
Jurnal
5.
Buatlah sebuah form lengkap seperti pada gambar di bawah ini :
Form
3-10
Politeknik Telkom
4 LAYOUT HALAMAN WEB
Overview
Untuk membuat desain halaman web, dapat dibuat menggunakan tabel dan
frame. Hasil tampilan tidak ada perbedaan, namun pada proses pengaksesan
halaman web mungkin akan berpengaruh terhadap waktu yang diperlukan.
Tabel merupakan cara untuk menampilkan informasi dalam halaman web
dengan bentuk kolom dan baris. Hampir semua web site yang berkualitas
dan profesional, dirancang dengan menggunakan tabel. Layaknya sebuah
spreadsheet yang memiliki sel dan berisi angka-angka, tabel dalam web juga
mempunyai sel yang berisi link, gambar dan text.
Frame akan membagi satu halaman HTML menjadi beberapa dokumen
HTML, yang masing-masing bagian frame dihubungkan dengan dokumen
HTML yang terpisah.
Tujuan
10.
11.
12.
13.
Membuat dan memformat tabel pada halaman dokumen HTML

Memahami pembuatan frame pada dokumen HTML
Memahami penggunaan frame
Memahami pembagian tampilan layar ke dalam beberapa bagian, yang
masing-masing dihubungkan dengan dokumen HTML yang terpisah
14. Mengatur border pada frame
15. Menentukan target frame cells dari hypertext links
Tabel dan Frame
4-1
Politeknik Telkom
4.1
4.1.1
Tabel
Membuat Tabel dan Judul 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> .
Susunan sederhana dalam membuat tabel di dokumen HTML sebagai berikut :
<TABLE>
<TH>... berisi judul tabel</TH>
<TR>
<TD>
... berisi informasi yang ditampilkan di web
browser
</TD>
</TR>
</TABLE>
Cobalah eksekusi contoh penerapan pembuatan tabel berikut ini :

<html>
<head> <title>::: Pembuatan Table:::</title> </head>
<body>
<font face=arial size=2 color=maroon>
<table border=1>
<caption align=top><b><u>Daftar Alamat</u></b></caption>
<tr bgcolor=yellow>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td>Raihan Umar</td>
<td>Tarogong Garut</td>
</tr>
<tr bgcolor='sky blue'>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom Gresik</td>
</tr>
<tr>
<td>Ananda Denira</td>
<td>Cicadas Bandung</td>
</tr>
<tr bgcolor='sky blue'>
Tabel dan Frame
4-2
Politeknik Telkom
<td>Ari Wibowo</td>
<td>Sariwangi Tangerang</td>
</tr>
</table>
</body>
</html>
Gambar 4-1 Hasil eksekusi pembuatan Tabel
4.1.2
Memformat Baris dan Kolom
Setiap tabel pasti terdiri atas baris baris yang diwakili dengan tag
<TR> dan juga kolom-kolom yang diwakili oleh tag <TD>. Setiap baris dan
kolom pada tabel memiliki atribut masing-masing.
Contoh penerapan memformat baris dan kolom :
<HTML>
<HEAD>
<TITLE> Memformat Baris dan Kolom </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=5>
<CAPTION>Daftar Order Barang</CAPTION>
<TH>No</TH>
<TH>Barang</TH>
<TH>Jenis</TH>
<TH>Harga</TH>
<TH>Jumlah</TH>
<TH>Total Harga</TH>
Tabel dan Frame
4-3
Politeknik Telkom
<TR>
<TD ALIGN=CENTER>1</TD>
<TD>Pocari Sweat</TD>
<TD ROWSPAN=2>Minuman</TD>
<TD>Rp. 4500</TD>
<TD ALIGN=RIGHT>5</TD>
<TD>Rp. 22500</TD>
</TR>
<TR>
<TD>Nutrisari Jus Jeruk</TD>
<TD>Rp. 2450</TD>
<TD>Rp. 7350</TD>
</TR>
<TR>
<TD>Kacang Kulit Garuda</TD>
<TD ROWSPAN=3>Makanan</TD>
<TD>Rp. 9800</TD>
<TD>Rp. 19600</TD>
</TR>
<TR>
<TD>Tango Coklat</TD>
<TD>Rp. 2750</TD>
<TD>Rp. 2750</TD>
</TR>
<TR>
<TD>Snack Ringan</TD>
<TD>Rp. 6450</TD>
<TD>Rp. 12900</TD>
</TR>
<TR HEIGHT=30 BORDERCOLOR="RED">
<TD COLSPAN=5 BGCOLOR="GRAY"><B>TOTAL</B></TD>
<TD BGCOLOR="GRAY"><B>Rp. 65100</B></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tabel dan Frame
4-4
Politeknik Telkom
4.1.3
Lebih Lanjut dengan Tabel
Pada bagian ini kita akan mempelajari bagaimana menambahkan

gambar pada sebuah tabel. Tabel dalam halaman web dapat berisi hyperlink,
gambar, gambar yang menunjuk pada hyperlink dan teks dengan huruf yang
berwarna. Sebagai contoh, berikut ini akan ditunjukkan penggunaan tabel
dengan berbagai macam konten :
<HTML>
<HEAD>
<TITLE> Menyisipkan Gambar pada Tabel </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2>
<CAPTION> Dokumentasi Fotograpi </CAPTION>
<TR>
<TH>1.</TH>
<TH>2.</TH>
Tabel dan Frame
4-5
Politeknik Telkom
<TH>3.</TH>
</TR>
<TR>
<TD>Pemandangan Awan</TD>
<TD>Hutan Lindung</TD>
<TD>Pinguin</TD> </TR>
<TR>
<TD ALIGN=CENTER>
<IMG SRC="dock.jpg" width="100" height="100"></TD>
<TD ALIGN=CENTER>
<IMG SRC="forest.jpg" width="100" height="100"></TD>
<TD ALIGN=CENTER>
<A HREF="Student.html">
<IMG SRC="image.jpg" ALT="Pinguin"></A></TD> </TR>
</TABLE>
</BODY>
</HTML>
Tabel dan Frame
4-6
Politeknik Telkom
4.2
Frame
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.
Sintaks umum yang digunakan untuk membuat frame :
<HTML>
<HEAD>
</HEAD>
<FRAMESET BORDER=# { [ROWS | COLS] } = { #,[#,[...]] }>
<FRAME SRC=url NAME=FrameName>
</FRAMESET>
</HTML>
Tabel 4-1 Atribut-atribut pada Frame

Atribut
Fungsi
FRAMESET COLS
Membuat frame vertikal dengan lebar kolom

tertentu
FRAMESET ROWS
Membuat frame horizontal dengan tinggi baris

tertentu
FRAME SRC
Memasukkan dokumen HTML ke dalam FRAME
NOFRAME
Memasukkan body teks untuk browser yang tidak

dapat menampilkan frame
Contoh Penerapan :
Sebelum mencoba membuat frame, silahkan buat beberapa dokumen web
yang nanti akan ditampilkan di tiap frame. Misalkan terdapat tiga halaman yang
akan ditampilkan yang terdiri dari halaman header.htm, menu.htm, main.htm,
jur_mi.htm.
1. header.htm
<html>
<head>
<title> Header Politeknik Telkom </title>
</head>
Tabel dan Frame
4-7
Politeknik Telkom
<body>
<center>
<h3>Politeknik Telkom</h3>
<h5>Jl. Telekomunikasi No. 1 Dayeuh Kolot
Bandung</h5>
<hr>
</center>
</body>
</html>
2.
main.htm
<html>
<head>
<title>Main Politel</title>
</head>
<body>
<h3>Selamat datang di Politeknik Telkom</h3>
Saat ini kami berlokasi di Kampus Politeknik Telkom
<br>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung.<br>
Beberapa jurusan yang terdapat di Politeknik Telkom
diantaranya :
<ol>
<li>Jurusan Manajemen Informatika</li>
<li>Jurusan Komputer Akuntansi</li>
<li>Jurusan Teknik Komputer</li>
</ol>
</body>
</html>
3.
jur_mi.htm
<html>
<head>
<title>Jurusan Manajemen Informatika</title>
</head>
<body>
<h3>Jurusan Manajemen Informatika</h3>
<hr>
Jurusan ini berkonsentrasi untuk mencetak lulusan yang
mampu menguasai teknologi ICT yang handal dan siap pakai.
Kurikulum yang dipersiapkan untuk mencapai tujuan tersebut
seperti diperlihatkan pada tabel berikut ini :
<table width="100%" border="1" cellpadding="1"
cellspacing="1">
Tabel dan Frame
4-8
Politeknik Telkom
<tr bgcolor="#e2e2e2">
<td>Tahapan</td>
<td>Mata Kuliah / Praktikum</td>
</tr>
<tr>
<td rowspan="7">Semester 1</td>
<td>Algoritma Pemrograman</td>
</tr>
<tr><td>Bahasa Inggris</td></tr>
<tr><td>Pengenalan Komputer</td></tr>
<tr><td>Praktikum Pascal</td></tr>
<tr><td>Praktikum Pengenalan Komputer</td></tr>
<tr><td>Praktikum Aplikasi Internet</td></tr>
<tr><td>Praktikum Dasar Jaringan Komputer</td></tr>
</table>
</body>
</html>
4.
menu.htm
<html>
<head>
<title> Header Politeknik Telkom </title>
</head>
<body>
[ <a href="_menu.html"> Home </a> ]<br>
[
<a
href="Jur_MI.htm"
target="main">
Informatika </a> ]<br>
[ <a href="#"> Komputer Akuntansi </a> ]<br>
[ <a href="#"> Teknik Komputer </a> ]
</center>
</body>
</html>
5.
Manajemen
home.htm
<html>
<head>
<title>Menggunakan Frame</title>
</head>
<frameset rows=100,*>
<frame src="header.htm" scrolling="no" name="atas">
<frameset cols=250,*>
<frame src="menu.htm" name="kiri">
<frame src="main.htm" name="main">
Tabel dan Frame
4-9
Politeknik Telkom
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html></html>
Gambar 4-4 Hasil eksekusi pembuatan Frame
Tabel dan Frame
4-10
Politeknik Telkom
Jurnal
Gambar 4-5 Halaman Studi Kasus Layout Web

6.
7.
Buatlah layout web seperti di atas dengan menggunakan tabel!

Buatlah layout web seperti di atas dengan menggunakan frame!
Ketentuan : untuk target frame dari menu Program Keahlian adalah di
bagian kanan. Untuk target frame dari Unit Kegiatan Mahasiswa adalah
di halaman window yang baru
Tabel dan Frame
4-11
Politeknik Telkom
5 CSS (CASCADING STYLE SHEETS)

Overview
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan
untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup.
CSS diperkenalkan untuk pengembangan website pada tahun 1996. Nama
CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat
diletakkan secara berurutan, yang kemudian akan membentuk hubungan
parent-child pada setiap style.
Penggunaan yang paling umum dari CSS adalah untuk memformat halaman
web yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World
Wide Web Consortium (W3C). CSS memungkinkan halaman yang sama untuk
ditampilkan dengan cara yang berbeda untuk metode presentasi yang
berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser
basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML
atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi
gaya tampilan atau skema warna dengan menggunakan CSS.
Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas
browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati
dengan standar CSS.
Tujuan
16. Memberikan uraian tentang konsep dasar, sintaks CSS, dan

pemanfaatannya untuk representasi dan layout dokumen pada lingkungan
web
17. Mahasiswa mampu membuat halaman web dan mengimplementasikan
CSS untuk menambahkan style pada halaman web tersebut
Cascading Style Sheet (CSS)
5-1
Politeknik Telkom
5.1
Penempatan CSS
Terdapat 3 (tiga) cara penempatan CSS pada halaman web, ketiga cara
ini dapat digunakan untuk memformat halaman web dengan style yang
diinginkan.
5.1.1
Inline Style Sheet
CSS dalam posisi inline style sheet dituliskan menjadi satu dengan
halaman web yang akan diatur style-nya dan menjadi bagian dari body.
Penulisan style dilakukan dengan cara menambahkan atribut title pada elemen
(tag) HTML yang akan diatur style-nya. Oleh karena itu, untuk
mengimplementasikan CSS pada halaman web, semua tag harus diformat
secara independen.
Dengan menggunakan model penempatan inline style sheet, jika ada
sebuah tag HTML yang digunakan berulang kali dalam sebuah halaman web,
pembuat website dapat mengimplementasikan style yang berbeda pada tag
tersebut. Ketika menggunakan inline style sheet untuk memanipulasi halaman
web, pembuat web hanya dapat menggunakan satu property saja pada tag
HTML yang akan dimanipulasi.
5.1.2
Embedded Style Sheet
Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS
dalam posisi embedded style sheet juga menjadi satu dengan halaman web yang
akan diatur style-nya, hanya saja, posisi CSS menjadi bagian dari header
(berada diantara tag <head>) dengan menambahkan tag <style
type=text/css>.
Dengan menggunakan model penempatan CSS sebagai embedded style
sheet, pembuat web cukup satu kali mendefinisikan style yang akan dikenakan
pada tag tag yang berada dalam halaman web. Jika ada sebuah tag yang
digunakan secara berulang, secara otomatis akan mempunya style yang sama,
berbeda dengan model inline style sheet yang mengharuskan pembuat web
menentukan style pada tag tag yang digunakan berulang kali dan
memungkinkan untuk menentukan style yang berbeda pada tag tersebut.
5.1.3
Linked Style Sheet
Berbeda dengan 2 (dua) model penempatan CSS sebelumnya,

menggunakan linked style sheet berarti harus menyediakan sebuah file CSS
khsusus berisi berbagai format style yang terpisah dari halaman web. File ini
5-2
Politeknik Telkom
nantinya akan dipanggil oleh halaman web yang membutuhkan pengaturan

style.
Dengan menggunakan model ini, style akan terpusat pada sebuah file,
sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di
semua halaman web yang dibuat, tetapi cukup dengan merubah style yang
didefinisikan pada file CSS.
5.2
Penggunaan CSS pada Halaman Web
Seorang pembuat web dapat memilih salah satu dari ketiga

penempatan CSS yang tersedia, atau bahkan dapat menggunakan dua atau tiga
penempatan secara bersama sama dalam sebuah halaman web jika
diperlukan.
5.2.1
Memanipulasi Font
Salah satu tag HTML yang biasa digunakan untuk memanipulasi font
adalah paragraf (<p>). Beberapa tag yang lain juga memungkinkan untuk
dimanipulasi atau ditambahkan CSS untuk memanipulasi font jika pada tag
HTML tersebut akan berisi tulisan / text, seperti : <th><td>, <a>, <li>,
<h1><h6>, dan tag tag lain yang memungkinkan berisi text.
Bentuk manipulasi font yang dimungkinkan dapat dilihat pada tabel di
bawah ini :
Tabel 5-1 Property Font
Nama Property
Font-family
Value
Nama font
Font-size
Nilai integer dengan

pilihan satuan :
em|pt|px|%
Oblique|italic|normal
Normal|small-caps
Font-style
Font-variant
Font-weight
Normal|bold|bolder|100900
Contoh Penggunaan
P { font-family: arial.
Helvetica}
P {font-size:24em}
P {font-style:italic}
P {font-variant:smallcaps}
P {font-weight:bold}
5-3
Politeknik Telkom
5.2.1.1 Menggunakan Inline Style Sheet

Contoh penggunaan CSS untuk memanipulasi
memposisikan CSS pada inline style sheet sebagai berikut :
font
dengan
Contoh 5-1 Menggunakan sebuah property untuk memanipulasi font.

<htm>
<head>
<title>CSS untuk memanipulasi font</title>
</head>
<body>
<h3 style="font-family:'Courier New', Courier ">Peresmian
Politeknik Telkom</h3>
<p style="font-family:Verdana, Arial, Helvetica, sansserif">Politeknik Telkom lahir pada tanggal 27 September 2007
dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara
yang diselenggarakan di PT Telkom Jl. Japati</p>
<p style="font-size:16px">Pada acara ini, dihadiri juga oleh
perwakilan siswa yang berasal dari program pelatihan yang
berada di bawah Yayasan Pendidikan Telkom, yaitu Program
Profesional STT Telkom dan NIIT & Telkom Center (NTC) </p>
<p style="font-style:italic">Pada acara ini pula, Direktur PT
Telkom berkesempatan untuk mencoba Online Test yang nantinya
akan digunakan oleh Politeknik Telkom untuk seleksi/test guna
menyaring calon - calon mahasiswa Politeknik Telkom</p>
</body>
</html>
Jika dijalankan pada web browser, akan didapatkan hasil seperti yang
ditampilkan pada gambar di bawah ini :
5-4
Politeknik Telkom
Gambar 5-1 CSS sebuah property untuk memanipulasi font.
5.2.1.2 Menggunakan Embedded Style Sheet

Jika akan memanipulasi font menggunakan CSS yang ditempatkan pada
embedded style sheet, pembuat website harus mendefinisikan semua property
yang akan digunakan pada tag <style> pada bagian header.
Berikut ini adalah contoh CSS untuk memanipulasi font dan
ditempatkan pada embedded style sheet :
Contoh 5-2 Memanipulasi font dengan memberikan sebuah nilai pada selector
<html>
<head>
<style type="text/css">
p {
font-family:Verdana, Arial, Helvetica, sans-serif
}
td {
font-weight:bold
}
a {
font-size:24px
}
</style>
</head>
<body>
5-5
Politeknik Telkom
<h2>Peresmian Politeknik Telkom</h2>

<p>Politeknik Telkom lahir pada tanggal 27 September 2007
dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara
yang diselenggarakan di PT Telkom Jl. Japati</p>
<table width="100%">
<tr>
<td>
Pada acara ini, dihadiri juga oleh perwakilan siswa yang
berasal dari program pelatihan yang berada di bawah
Yayasan Pendidikan Telkom, yaitu Program Profesional STT
Telkom dan NIIT & Telkom Center (NTC)
</td>
</tr>
<tr>
<td>
Pada acara ini pula, Direktur PT Telkom berkesempatan
untuk mencoba Online Test yang nantinya akan digunakan
oleh Politeknik Telkom untuk seleksi/test guna menyaring
calon - calon mahasiswa Politeknik Telkom
</td>
</tr>
</table>
<br>
Untuk mencoba menggunakan aplikasi Online Test, silahkan klik
link di bawah ini :<br>
<a href="http://www.politekniktelkom.ac.id/olt">Online Test</a>
</body>
</html>
Gambar 5-2 Memanipulasi font dengan memberikan sebuah nilai

pada selector
5-6
Politeknik Telkom
Selain mengisikan sebuah nilai pada selector, ketika menempatkan CSS

sebagai embedded style sheet, pembuat website dapat mengisikan beberapa
nilai sekaligus pada selector yang diinginkan.
Contoh berikut ini menunjukkan penggunaan beberapa nilai pada
sebuah selector.
Contoh 5-3 Memanipulasi font dengan mengisikan beberapa nilai pada sebuah
selector
<html>
<head>
td {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
}
a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold
}
</style>
</head>
<body>
<tr>
<td>
Politeknik Telkom lahir pada tanggal 27 September 2007
dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang
diselenggarakan di PT Telkom Jl. Japati<br>
</td>
</tr><tr><td>
Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal
dari program pelatihan yang berada di bawah Yayasan Pendidikan
Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom
Center (NTC) <br> </td>
</tr>
<tr>
<td>
Pada acara ini pula, Direktur PT Telkom berkesempatan untuk
mencoba Online Test yang nantinya akan digunakan oleh Politeknik
Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa
Politeknik Telkom <br>
</td>
</tr>
<tr>
<td>Untuk kembali ke berita sebelumnya, <a
5-7
Politeknik Telkom
href="CSS_manipulasi_font2.html">silahkan klik disini</a></td>

</tr>
</table>
</body>
</html>
Gambar 5-3 Memanipulasi font dengan mengisikan beberapa nilai

pada sebuah selector
Selain menggunakan selector yang bertipe tag/elemen, jika penempatan
CSS pada embedded style sheet, pembuat website dapat pula menggunakan
selector tipe lain, seperti : selector bebas, class, atau ID.
Contoh di bawah ini menunjukkan penggunaan tipe selector selain
tag/elemen untuk memanipulasi font.
Contoh 5-4 Memanipulasi font dengan menggunakan selector bebas, class,
dan ID
<html>
<head>
tulisan_miring {
font-size:12px;
font-style:italic;
}
. cetak_tebal {
5-8
Politeknik Telkom
font-size:12px;
font-weight:bold
}
#14pt {
font-size:14pt;
}
</style>
</head>
<body>
<tr>
<td>
<tulisan_miring>
dengan diresmikan oleh Direktur PT Telkom dalam sebuah
acara yang diselenggarakan di PT Telkom Jl.Japati
</tulisan_miring><br>
</td>
</tr>
<tr>
<td class="cetak_tebal">
Telkom dan NIIT & Telkom Center (NTC) <br>
</td>
</tr>
<tr>
<td id="14pt">
calon - calon mahasiswa Politeknik Telkom <br>
</td>
</tr>
</table>
</body>
</html>
5-9
Politeknik Telkom
Gambar 5-4 Memanipulasi font dengan menggunakan selector

bebas, class, dan ID
5.2.1.3 Menggunakan Linked Style Sheet

Menggunakan linked style sheet sama halnya memindahkan style
style yang didefinisikan pada selector di bagian header menjadi sebuah file
yang akan digunakan secara berulang ulang oleh halaman web yang
membutuhkan.
Berikut adalah langkah langkah yang dapat digunakan dalam
menggunakan linked style sheet untuk memanipulasi font.
Langkah 1. Menyiapkan file untuk mendefinisikan style
/* CSS Document */
tulisan_miring {
font-size:12px;
font-style:italic;
}
.cetak_tebal {
font-size:12px;
font-weight:bold
}
#14pt {
font-size:14pt;
5-10
Politeknik Telkom
}
p {
font-family:Verdana, Arial, Helvetica, sans-serif
}
td {
font-weight:bold
}
a {
font-size:24px
}
Langkah 2. Simpan file yang berisi define style tersebut dengan nama
mystle.css
Langkah 3. Pemanggilan file CSS ke dalam halaman web
<html>
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<tr>
<td>
<tulisan_miring>
acara yang diselenggarakan di PT Telkom Jl.Japati
</tulisan_miring><br>
</td>
</tr>
<tr>
<td class="cetak_tebal">
</td>
</tr>
<tr>
<td id="14pt">
calon - calon mahasiswa Politeknik Telkom <br>
</td>
</tr>
</table>
5-11
Politeknik Telkom
</body>
</html>
Jika script pada langkah ketiga dijalankan di web browser, hasil yang
akan didapatkan sama seperti yang diperlihatkan pada Gambar 5-4.
Coba perhatikan perbedaan penggunaan CSS pada contoh 5-4 dengan
langkah 3 menggunakan linked style sheet !
5.2.2
Memanipulasi Color dan Background
Bentuk lain dari memanipulasi halaman web adalah dengan

menentukan warna pada tulisan, menambahkan warna background, atau
dengan menambahkan gambar sebagai background.
Beberapa property yang bisa digunakan untuk memanipulasi beberapa
hal di atas, ditampilkan pada tabel di bawah ini.
Tabel 5-2 Property Color dan Background
Nama
Property
Backgroundcolor
BackgroundImage
Value
Contoh Penggunaan
Rangkaian 6 digit
heksadesimal atau nama
warna
url dimana image disimpan
Body {
Background-color : green;
}
Backgroundattachment
Fixed|scroll|inherit
BackgroundRepeat
Inherit|repeat|norepeat|repeat-x|repeat-y
Backgroundposition
Bottom|center|left|right|top
|inherit
Color
Rangkaian 6 digit
Body {
Background-image :
url(gambar1.jpg);
}
Body {
Background-attachment :
scroll;
}
Body {
Background-repeat :
repeat;
Background-image :
url(image/gambar1.jpg);
}
Body {
Background-repeat : norepeat;
Background-image :
url(image/gambar1.jpg);
Background-position :
bottom center
}
H1 { color : red }
5-12
Politeknik Telkom

warna
Seorang pembuat website dapat menerapkan property property
(yang tertera pada tabel di atas) kepada selector secara individu ataupun
menggunakan beberapa property secara bersama sama pada sebuah
selector.
Contoh 5-5 Memanipulasi color dan background halaman web
<html>
<head>
<title>CSS untuk memanipulasi color dan background</title>
.warna_background {
background-color:#00CCFF
}
.mewarnai_tulisan {
color:red
}
.background_bergambar {
background-image:url(mawar.jpg);
background-repeat:no-repeat
}
.background_bergambar_bawah {
background-image:url(mawar.jpg);
background-position:right;
background-repeat:repeat-y
}
</style>
</head>
<body>
<tr>
<td class="mewarnai_tulisan">
acara yang diselenggarakan di PT Telkom Jl.
Japati<br>
</td>
</tr>
<tr>
<td class="warna_background">
5-13
Politeknik Telkom
</td>
</tr>
</table>
<br>
<table width="100%" border=1>
<tr>
<td height="350" width="50%" class="background_bergambar"
valign="bottom">
Acara yang diselenggarakan terasa meriah dengan dihadir
kurang lebih 450 tamu undangan dan sekitar 100 wartawan
dari media cetak dan elektronik
</td>
<td class="background_bergambar_bawah"> </td>
</tr>
</table>
</body>
</html>
5-14
Politeknik Telkom
Gambar 5-5 Memanipulasi color dan background halaman web
5-15
Politeknik Telkom
5.2.3
Memanipulasi List
Memanipulasi list juga dapat dilakukan dengan menggunakan CSS.

Bentuk manipulasi yang diperbolehkan kepada list adalah menentukan bentuk
bullet dari list dan posisi list.
Tabel berikut menunjukkan property property yang dapat digunakan
untuk memanipulasi list.
Tabel 5-3 Property list

Nama
Property
List-styletype
List-styleimage
List-styleposition
Value
Contoh Penggunaan
Disc|circle|square|lowerroman|upperroman|none|loweralpha|upper-alpha
url dimana image disimpan
atau none
Ul {
List-style-type : disc ;
}
Inside|outside
Ul {
List-style-image :
url(gambar1.jpg) ;
}
Ul {
List-style-position :
inside;
}
Contoh penggunaan property untuk memanipulasi list diperlihatkan

pada contoh di bawah ini :
Contoh 5-6 Memanipulasi list
<html>
<head>
<title>CSS untuk memanipulasi list</title>
.bullet1 {
list-style-type:square
}
.bullet2 {
list-style-position:inside;
list-style-type:circle
}
.bullet_image {
list-style-image:url(mawar2.gif)
}
</style>
</head>
5-16
Politeknik Telkom
<body>
<tr>
<td>
Pada peresmian Poiteknik Telkom dihadiri :
<ul>
<li class="bullet1">Dirjen DIKTI</li>
<li class="bullet1">Jajaran PT Telkom</li>
<li class="bullet2">GM Keuangan</li>
<li class="bullet2">GM Pemasaran</li>
</ul>
</td>
</tr>
<tr>
<td>
Selain itu juga dihadiri beberapa wartawan dari media cetak
dan media elektronik :
<ul class="bullet_image">
<li>Media Cetak</li>
<li class="bullet2">Pikiran Rakyat</li>
<li class="bullet2">Kompas</li>
<li>Media Elektronik</li>
<ul class="bullet1">
<li>RCTI</li>
<li>Trans TV</li>
</ul>
</ul>
</td>
</tr>
</table>
</body>
</html>
5-17
Politeknik Telkom
Gambar 5-6 Memanipulasi list
5.2.4
Memanipulasi Text
Bentuk manipulasi text merupakan pelengkap yang dapat digunakan

untuk memanipulasi tulisan secara lebih kompleks. Jika pada manipulasi font
hanya menentukan jenis dan ukuran font yang digunakan, maka pada
manipulasi text, bentuk tulisan secara keseluruhan dapat dimanipulasi dengan
lebih kompleks.
Tabel di bawah ini menggambarkan property yang digunakan untuk
memanipulasi text.
Tabel 5-4 Property text
5-18
Politeknik Telkom
Nama
Property
Color
Value
Contoh Penggunaan
P {
color :red;
}
text-align
Rangkaian 6 digit
warna
Left|right|center|justify
textdecoration
None|underline|overline|lin
e-through|blink
texttransform
None|capitalize|,uppercase|l
owercase)
Letterspacing
Nilai integer dengan pilihan

satuan : em|pt|px|%
Text-indent
Nilai integer dengan pilihan

satuan : em|pt|px|%
P {
Text-decoration :overline;
}
P {
Text-transform :
capitalize;
}
P {
letter-spacing : 20px;
}
P {
Text-indent : 50px;
}
P {
Text-align :justify;
}
Contoh 5-7 Memanipulasi text

<html>
<head>
<title>CSS untuk memanipulasi text</title>
td {
text-align:justify;
color:#000000
}
.lowercase {
text-transform:lowercase;
text-indent:30px
}
.capitalize {
text-transform:capitalize
}
h3 {
text-decoration:overline;
text-align:center;
text-transform:uppercase;
letter-spacing:4px;
}
</style>
</head>
5-19
Politeknik Telkom
<body>
<tr>
<td class="lowercase">
acara yang diselenggarakan di PT Telkom Jl.
Japati<br>
</td>
</tr><tr>
<td class="capitalize">
</td>
</tr>
</table>
</body>
</html>
5.2.5
Gambar 5-7 Memanipulasi text
Memanipulasi Tabel
Bentuk manipulasi pada tabel yang paling sering digunakan adalah

memanipulasi border (garis tepi) tabel.
5-20
Politeknik Telkom
Tabel berikut ini menampilkan property yang dapat digunakan untuk

memanipulasi tabel.
Tabel 5-5 Property tabel
Nama
Property
border-style
Value
Contoh Penggunaan
None|dotted|dashed|solid|do
uble|groove|ridge|inset|outset
borderbottom-style
None|dotted|dashed|solid|do
uble|groove|ridge|inset|outset
borderbottomwidth
borderbottomcolor
Nilai integer dan satuan

ukuran
.b1 {
Border-style-type :
groove ;
}
.b1 {
Border-bottom-style :
groove ;}
.b1 {
border-bottom-width
:10px;
}
.b1 {
border-bottom-color
:red;
}
Rangkaian 6 digit
warna
Contoh 5-8 Memanipulasi tabel

<html>
<head>
<title>CSS untuk memanipulasi text</title>
td {
border-color:#000099;
border-spacing:10px;
}
.garis_putus {
border-left-style:dashed;
border-bottom-style:dashed;
border-right-style:dashed;
border-top-style:dashed
}
.garis2 {
border:double;
border-color:#000000
}
</style>
</head>
<body>
<h3>Daftar Perusahaan Rekanan Politeknik Telkom</h3>
<table width="100%" border="0">
5-21
Politeknik Telkom
<tr>
<td>Bank BNI 46</td>
</tr>
<tr>
<td class="garis_putus" height="60">PT Bumida Bumi
Putera</td>
</tr>
<tr>
<td class="garis2" height="40">PT Telkom</td>
</tr>
</table>
</body>
</html>
Gambar 5-8 Memanipulasi tabel
5-22
Politeknik Telkom
Rangkuman
4. Untuk memanipulasi elemen elemen yang ada dalam halaman web

dapat menggunakan CSS (Cascading Style Sheets)
5. Terdapat 3 (tiga) penempatan CSS pada halaman web dengan perbedaan
6.
perbedaan yang ditampilkan pada tabel perbandingan di bawah ini :

Inline
Style Embedded Style Linked
Style
Sheet
Sheet
Sheet
Penulisan CSS
Dalam elemen Menjadi bagian Terpisah dengan
/ tag pada file header dari file file HTML
HTML
HTML
Pengubahan
Pada setiap tag Pada
bagian Pada file yang
style
pada tiap file header tiap file digunakan untuk
HTML
HTML
menyimpan
style-nya
saja,
tanpa merubah
file HTML
Penggunaan
Hanya
satu Memungkinkan
Memungkinkan
property
property yang penggunaan
penggunaan
bisa digunakan
beberapa
beberapa
property
property
sekaligus
sekaligus
Kemudahan
Lebih
susah Lebih
mudah Paling
mudah,
peng-update-an karena harus daripada inline karena
style
mengganti
style
sheet pengubahan
semua
style karena
yang style dilakukan
pada tag yang pengubahan
pada satu file
ada dalam file style dilakukan saja
HTML
pada
bagian
header
Dalam memanipulasi objek objek yang ada pada file HTML,
diperbolehkan menggunakan beberapa property secara bersamaan.
5-23
Politeknik Telkom
Jurnal
Amati penggunaan CSS pada website yang sudah Anda pilih, kemudian
lakukanlah modifikasi modifikasi style pada website tersebut. Minimal
modifikasi yang dilakukan adalah 15 (lima belas) bentuk, kemudian tulis dan
laporkan modifikasi yang Anda lakukan dan perubahan yang dihasilkan dari
modifikasi tersebut.
5-24
Politeknik Telkom
6 Javascript -1
6-25
Politeknik Telkom
7 Javascript -2
7-26
Politeknik Telkom
8 Object, Frame dan Form pada JavaScript
Overview
Untuk menangani permintaan dan pengolahan input data dari user, JavaScript
menyediakan objek-objek yang dapat digunakan sesuai kebutuhan. Pada
sebuah web berbasis basisdata, dibutuhkan pula penanganan form validasi
input dari user dan kemudian dilakukan pengiriman ke server.
Tujuan
1.
2.
3.
4.
5.
6.
7.
8.
9.
Mengerti esensi penggunaan Objek dalam JavaScript.

Mampu menciptakan objek sendiri.
Mampu membuat properti dan metoda untuk suatu objek.
Mampu menggunakan objek-objek bawaan pada JavaScript.
Memahami Hirarki Objek Browser dan Objek HTML.
Mengenal Macam-macam Objek Browser pada JavaScript.
Mengerti esensi penggunaan Frame dalam JavaScript.
Mengerti esensi penggunaan Form dalam JavaScript.
Mampu memecahkan masalah dengan menggunakan Frame dan Form
serta mengimplementasikan ke dalam program JavaScript.
8-27
Politeknik Telkom
8.1
Penggunaan Object
Cara mendefinisikan objek :

nama_objek.nama_properti
Mendefinisikan objek dengan fungsi :

function nama_objek(nama_properti1, nama_properti2)
{
this.nama_properti1 = nama_properti1;
this.nama_properti = nama_properti2;
}
Contoh :
<HTML>
<HEAD>
<TITLE> ::Menciptakan Objek:: </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-// Definisi objek Mahasiswa
function Mahasiswa(NIM, Nama, Umur)
{
this.NIM
= NIM;
this.Nama
= Nama;
this.Umur
= Umur;
}
//Menulis properti-properti objek
function Tulis (objek)
{
for (var j in objek)
document.writeln (objek[j]);
document.writeln (" ");
}
//-->
</SCRIPT></HEAD>
<BODY>
<!-document.writeln ("<PRE>");
8-28
Politeknik Telkom
// menciptakan instan objek mahasiswa

var Mahasiswa1 = new Mahasiswa("90401010", "Adhit", 18);
var Mahasiswa2 = new Mahasiswa("90101013", "Budi", 18);
var Mahasiswa3 = new Mahasiswa("90201025", "Wati", 19);
//menuliskan masing-masing instan objek ke jendela browser
document.writeln ('Nilai objek Mahasiswa1');
Tulis (Mahasiswa1);
Tulis (Mahasiswa2);
Tulis (Mahasiswa3);
/*mengisi kembali objek Mahasiswa1 dengan nilai baru
--> array assosiatif */
document.writeln ('Nilai Baru objek Mahasiswa1');
Mahasiswa1["NIM"] = "90401056";
Mahasiswa1["Nama"] = "Faishal";
Mahasiswa1["Umur"] = 17;
Tulis (Mahasiswa1);
document.writeln ("</PRE>");
//-->
</SCRIPT>
</BODY>
</HTML>
Output :
8-29
Politeknik Telkom
8.1.1
Metoda
Pada JavaScript kita dapat membuat satu metoda untuk satu jenis
objek yang kita buat sendiri, dengan menggunakan fungsi sebagai properti dari
satu objek, perhatikan contoh di bawah ini :
<HTML>
<HEAD>
<TITLE> ::Menciptakan Objek:: </TITLE>

</SCRIPT></HEAD>
<BODY>
<!-document.writeln ("<PRE>");
8-31
Politeknik Telkom
// menciptakan instan objek mahasiswa

var Mahasiswa1 = new Mahasiswa("30401010", "Adhit", 18);
var Mahasiswa2 = new Mahasiswa("30101013", "Budi", 18);
var Mahasiswa3 = new Mahasiswa("30201025", "Wati", 19);
// mengisi metoda Universitas pada objek Mahasiswa1
Mahasiswa1.Universitas("Politeknik Telkom",
"Jl.Telekomunikasi No.1 Bandung");
Mahasiswa1.TampilkanInfo();
document.writeln ("</PRE>");
//-->
</SCRIPT>
</BODY>
</HTML>
Output :
Untuk menghapus instan objek yang telah kita buat yaitu dengan memberi
nilai null, contoh :
Mahasiswa1
Mahasiswa2
Mahasiswa3
= null;
= null;
= null;
8-32
Politeknik Telkom
8.1.2
Object Browser
Objek ini telah disediakan oleh JavaScript, sehingga memudahkan

programmer untuk penggunaannya. Berikut ini adalah contoh penerapannya :
<HTML>
<HEAD>
<TITLE> ::Properti Status dari Objek window:: </TITLE>
<!-var tanda
= 0;
var posisi = 0;
var IsAnim = false;
var IsKanan = true;
var kata
= "";
function evTimeOut(){
if (IsKanan)
status = kata.substring(0,posisi);
else
status = kata.substring(posisi, posisi + kata.length);
if (posisi++ > kata.length)
{
posisi
= 0;
IsKanan = !IsKanan;
}
tanda = setTimeout("evTimeOut()",250);
IsAnim = true;
}
function evMulai(){
kata = document.frform.txKata.value;
evSelesai();
evTimeOut();
}
function evSelesai(){
if (IsAnim)
{
clearTimeout (tanda);
IsAnim = false;
posisi = 0;
IsKanan = true;
8-33
Politeknik Telkom
status = "";
}
}
//-->
</SCRIPT></HEAD>
<BODY>
<FORM NAME="frform">
Teks berikut akan ditampilkan pada <I>status bar</I>
<BR>
<INPUT TYPE="text" NAME="txKata" SIZE=50 MAXLENGTH=100>
<BR><BR>
<INPUT TYPE="button" VALUE="Mulai" onClick="evMulai()">
<INPUT TYPE="button" VALUE="Selesai" onClick="evSelesai()">
</FORM>
</BODY>
</HTML>
Output :
8.2
Penanganan Frame dan Form pada JavaScript
8.2.1
Window dan Frame
Contoh penerapan
menggunakan frame :
1.
objek
window
pada
halaman
web
yang
Buat halaman frameset, beri nama frame_javascript.html
8-34
Politeknik Telkom
<html>
<head>
<title>Tutorial JavaScript</title>
<frameset cols=175,*>
<frame src="menu.html" name="kiri">
<frame src="topik1.html" name="kanan">
</frameset>
</head>
</html>
2.
Buat halaman untuk frame bagian kiri

<html>
<head>
<script language="JavaScript">
function buka(x) {
top.kanan.location=x;
// membuka halaman x pada frame kanan
return false
}
</script>
</head>
<body>
<h1>Daftar Isi</h1>
<a href="" onclick="return buka('topik1.html')">
Memasukan JavaScript ke dalam HTML</a><hr>
Variabel dan Literal</a><hr>
Ekspresi dan Operator</a><hr>
Struktur Kendali dan Fungsi</a><hr>
</body>
</html>
3.
Buat halaman untuk frame bagian kanan

<html>
<head>
<title> New Document </title>
</head>
<body>
Ini Halaman untuk Topik 1
</body>
</html>
8-35
Politeknik Telkom
8.2.2
Form
Contoh penerapan objek window pada form HTML :
<html>
<head>
<title> Mengubah Temperatur </title>
</head>
<body>
<form>
Farenheit: <input type="text" name="F" value="32"><br>
Celcius: <input type="text" name="C" value="0" ><br>
<input type="button" name="FtoC" value="To Celcius"
onClick="C.value = 100/(212-32) * (F.value - 32 )">
<input type="button" name="CtoF" value="To Farenheit"
onClick="F.value = (212-32)/100 * C.value + 32 ">
</form>
</body>
</html>
Hasil keluaran :
8-36
Politeknik Telkom
Rangkuman
7.
JavaScript memperlakukan elemen-elemen yang tampil di jendela

navigator kita sebagai suatu objek.
8. Programer dapat menciptakan sendiri objek yang ingin ditampilkan dalam
halaman web, tetapi JavaScript juga menyediakan objek yang telah
terdefinisi.
9. Setiap objek mempunyai metoda yaitu suatu fungsi yang diasosiasikan
dengan satu objek, satu aksi yang bisa di eksekusi pada satu objek.
10. Untuk menangani frame dan form pada JavaScript, programer tinggal
menggunakan objek browser beserta metoda ataupun properti yang
sesuai dengan kebutuhan.
8-37
Politeknik Telkom
Jurnal
8.
Buatlah objek initBuku yang mempunyai tiga properti, yaitu Judul,

Penulis, dan Harga. Di samping itu, tambahlah dua metoda, yaitu Tulis
untuk menulis nilai dari properti-properti objek ini dan Ubah untuk
mengubah properti initBuku. Tampilkan hasil keluaran dengan
menggunakan metode objek window alert()!
Output :
Judul
: Tip dan Trik Pemrograman JavaScript
Penulis
: Budi Raharjo
Harga
: 25500
Judul Buku diubah
Judul
: Dasar-dasar Pemrograman JavaScript
Penulis
: Budi Raharjo
Harga
: 25500
9.
Buat sebuah program pengecekan tanggal, yang meminta user

memasukkan suatu tanggal (pada kotak teks Tanggal, Bulan dan Tahun).
Tambahkan sebuah tombol dengan value [Tekan ini]. Setelah
memasukkan sembarang tanggal dan klik tombol [Tekan ini], halaman
akan menampilkan informasi yang berhubungan dengan tanggal yang user
masukkan.
Perhatikan :
a. Tanggal yang dimasukkan antara 1 31
b. Bulan yang dimasukkan antara 1 12
c. Tahun yang dimasukkan minimal tahun 1970
d. Program dapat mengecek sah tidaknya tanggal yang
dimasukkan user, sebagai contoh, bila user memasukkan
tanggal 31 Juni 2004, program menyatakan bahwa tanggal
yang dimasukkan salah (Juni hanya memiliki tanggal sampai
dengan 30). Contoh lain, tanggal 29 Februari 2003 juga
tidak sah (2003 bukan tahun kabisat sehingga bulan Februari
hanya sampai tanggal 28)
8-38
Politeknik Telkom
Output :
10. Modifikasi program no.2 dimana tanggal, bulan dan tahun dimasukkan
melalui objek window dengan metoda prompt()!
8-39
Politeknik Telkom
9 Pengantar Pemrograman Web dengan PHP
Overview
PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada
serverside. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan
pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja. Ketika
seorang pengguna internet membuka suatu situs yang menggunakan fasilitas
server side scripting PHP, maka terlebih dahulu server yang bersangkutan
akan memproses semua perintah PHP di server lalu mengirimkan hasilnya
dalam format HTML ke web server pengguna internet tadi. Sehingga kode asli
yang ditulis dengan PHP tidak terlihat di browser pengguna.
PHP merupakan software yang open source bebas. Jadi anda dapat merubah
source code dan mendistribusikan secara bebas dan gratis. PHP juga dapat
berjalan lintas platform, yaitu dapat digunakan dengan sistem operasi
(Windows dan Linux) dan web server apapun (misalnya: PWS, IIS, Apache).
Tujuan
10. Memahami cara melakukan instalasi Apache Web Server, PHP dan
11.
12.
13.
14.
15.
16.
17.
MySQL
Memahami cara melakukan konfigurasi pada web server
Mampu membuat halaman web sederhana dengan PHP
Mengenal Tipe Data PHP
Mengenal Variable PHP
Menggunakan Operator Aritmatika
Menggunakan Operator Logika
Menggunakan Operator Penggabungan String
Pengantar Pemrograman Web dengan PHP
9-1
Politeknik Telkom
9.1
Pengenalan Lingkungan Kerja Web Server
9.1.1
Instalasi Apache Web Server, PHP dan MySQL sebagai

DBMS pendukung
Untuk menjalankan PHP, dibutuhkan beberapa perangkat lunak hal

sebagai berikut :
a.
b.
c.
Apache Web Server

PHP (www.php.net)
MySQL (http://www.mysql.com).
Tiap versi paket baik apache, php ataupun mysql terkadang

mempunyai cara instalasi yang berbeda-beda. Pada praktikum ini, kita akan
menggunakan versi paket dibawah ini:
apache_2.2.3-win32-x86-no_ssl.msi
php-5.2.0-Win32.zip
mysql-5.0.27-win32.exe
Berikut ini merupakan langkah-langkah instalasi pada platform
windows xp profesional edtion service pack 2.
1. Install web server
Lakukan instalasi apache web server dan pilih typical installation. Setelah
selesai jalankan web browser dan ketikan (pilih salah satu cara dibawah ini)
http://localhost
http://127.0.0.1
http://[ip komputer anda] misal http://192.168.0.5
Setelah anda tekan enter, apa yang anda lihat? Pada kondisi normal,
web server anda telah aktif, untuk mengetahui status web server apakah
dalam keadaan start atau stop. Anda dapat melihatnya dari windows service.
Gambar 10.1 Window Service

9-2
Politeknik Telkom
Sekarang anda coba membuat file web html yang kemudian anda
letakan ke web server, sehingga client lain di jaringan dapat mengaksesnya.
Buat file index1.html yang berisi:
<h1>Web server Apache</h1>
Kemudian letakan pada direktori htdocs web server. (Secara default

berada
pada
C:\Program
Files\Apache
Software
Foundation\Apache2.2\htdocs\). Selanjutnya coba akses dari browser
dengan mengetikan http://localhost/index1.html. Apakah sudah tampak
seperti yang seharusnya? Coba akses dari client lain yang terhubung ke web
server anda. Jangan lupa untuk menuliskan alamat web servernya. (misal:
http://192.168.0.5/index1.html).
Sekarang kita akan mencoba, apakah web server yang telah dibuat
dapat mengintepretasikan script php. Sekarang buat file lagi dengan nama
index2.php yang berisi:
<?
Hi <? echo "PHP "; ?> Developer
?>
Jangan lupa letakan di htdocs kemudian coba akses melalui browser

(dengan alamat http://localhost/index2.php). Apa yang tertulis disana?
Pada tahap ini pada kondisi normal, komputer anda telah menjadi web server.
2. Install paket PHP
Sebelum menginstal paket PHP, anda perlu membaca file install.txt
yang disertakan bersama paket PHP. File tersebut berisi langkah instalasi yang
terkadang terdapat perbedaan antara versi satu dengan lainnya. Buka file
tersebut dan cari baris yang menjelaskan cara installasi PHP versi yang akan
diinstal dengan web server yang digunakan.
Pada modul ini, akan dijelaskan bagaimana menginstall paket PHP
sebagai module di apache web server.
a. Unzip file php-5.2.0-Win32.zip ke c:\php
b. Rename php.ini-dist menjadi php.ini
c. Buka file httpd.conf dengan text editor (secara default terdapat
pada C:\Program Files\Apache Software Foundation\Apache2.2\conf)
d. Tambahkan statement dibawah ini pada baris terakhir httpd.conf
LoadModule php5_module "C:/php/php5apache2_2.dll"
AddType application/x-httpd-php .php
PHPIniDir "C:/php/"
e. Save file tersebut dan restart apache. Perlu anda perhatikan bahwa
setiap anda merubah konfigurasi file httpd.conf anda perlu
melakukan restart web server.
9-3
Politeknik Telkom
Selanjutnya anda dapat mencoba mengakses script php yang tadi

dibuat (http://localhost/index2.php). Apa yang tertulis disana? Pada tahap
ini dengan kondisi normal, engine PHP telah menjadi module di apache web
server sehingga anda dapat membuat web berbasis PHP.
Selanjutnya, anda ingin membuat website php dengan database. Maka
anda harus menginstal DBMSnya.
3. Install MySQL 5
Run mysql-5.0.27-win32.exe untuk menginstalnya, pilih typical
installation dan ikuti langkah instalasi serta isikan password sesuai kebutuhan.
Pada modul ini, kita sepakat password root mysql server kita adalah root.
Setelah instalasi buat file dengan nama db.php yang berisi:
<?php
$conn = mysql_connect('localhost', 'root', 'root');
if (!$conn) {
die('Tidak dapat koneksi ke mysql: ' . mysql_error());
}
echo 'Koneksi ke mysql berhasil';
mysql_close($conn);
?>
Coba akses dari browser (http://localhost/db.php). Apa yang

tertulis disana? Pada saat ini dengan kondisi normal, mysql telah terinstal. Tapi
coba anda lihat, jika script tersebut dijalankan maka akan tampil pesan error.
Hal ini menandakan bahwa PHP tidak mengenal fungsi

mysql_connect(). Pada PHP5, fungsi-fungsi untuk berkomunikasi dengan
mysql secara default tidak aktif, fungsi tersebut merupakan fungsi terpisah.
Kumpulan fungsi mysql tersebut terdapat pada DLL yang perlu diinstal dan
diaktifkan jika ingin digunakan. Lakukan modifikasi pada file php.ini yang
terdapat pada C:\php\.
Buka file php.ini dengan text editor, kemudian lakukan search
php_mysql.dll. File ekstension pada php biasanya berupa DLL dengan prefix
php_. Setelah anda temukan php_mysql.dll, hilangkan tanda titik koma di
depannya seperti gambar dibawah:
9-4
Politeknik Telkom
Kemudian pastikan bahwa file php_mysql.dll terdapat pada direktori

ext di direktori paket php. (c:\php\ext\).
Cari text extension_dir kemudian ubah, dari ./ menjadi

c:/php/ext/ agar php dapat menemukan direktori DLL.
Karena DLL mysql mempunyai DLL tambahan dengan nama
libmysql.dll, selanjutnya letakan file libmysql.dll yang terdapat pada c:\php\
ke c:\windows\system32. Lakukan restart werbserver dan refresh browser
yang membuka http://localhost/db.php.
Gambar 10.2 Hasil Eksekusi Koneksi ke Database Server

Pada tahap ini dengan kondisi normal, extension mysql telah aktif
dan dapat digunakan oleh PHP. Kesimpulannya, lingkungan pengembangan
aplikasi web berbasis PHP dengan DBMS mysql telah siap digunakan.
9.1.2
Konfigurasi Wen Server

Setelah melalui bagian sebelumnya instalasi paket WAMP (Windows
Apache MySQL PHP) selesai dilaksanakan. Pada bagian ini akan sedikit ditinjau
9-5
Politeknik Telkom
kustomisasi konfigurasi apa yang dapat dilakukan pada web server apache.
Konfigurasi web server apache dapat dilakukan dengan memodifikasi
beberapa baris pada file httpd.conf. Pada file httpd.conf terdapat beberapa
directive yang dapat dikustomisasi. Directive merupakan instruksi-instruksi
yang diberikan kepada apache agar ia dapat berfungsi sebagaimana mestinya
dan membantu memberi lokasi sumber daya yang dibutuhkan. Dibawah ini
akan dijelaskan fungsionalitas beberapa directive yang ada:
a. ThreadsPerChild Directive
Jumlah thread yang bekerja pada server. Nilai default = 250
b. MaxRequestsPerChild Directive
Jumlah maximum request suatu proses ke server. Nilai default 0, dengan
kata lain web server tidak membatasi batas maximum requestnya.
c.
Listen Directive
Memberikan fasilitas kepada admin untuk melakukan bind apache ke ip
adddress dan port tertentu. Disini secara default ditulis 80 (karena
protocol http menggunakan port 80). Dari sini administrator dapat
merubah port web servernya, misalnya karena ia menginstal web server
produk lain dan web server lamanya dirubah menjadi listen 6800 agar
tidak crash.
d.
ServerAdmin Directive
Merupakan ditulis berupa alamat email dari administrator. Text ini akan
muncul pada saat terjadi error request web page. Informasi ini berguna
bagi client yang ingin mencari informasi karena web page yang ia buka
error. Dengan adanya informasi alamat email tersebut, ia dapat mengirim
keluhannya kepada admin.
e.
DocumentRoot Directive
Merupakan direktori tempat menyimpan file-file web yang dapat diakses
melalui web server. Secara default terdapat pada: C:\Program
Files\Apache Software Foundation\Apache2.2\htdocs\. Path ini dapat
9-6
Politeknik Telkom
anda ganti misalnya ke D:\www. Temukan text dengan tulisan seperti

dibawah dan ubah:
Cari lagi tulisan seperti dibawah dan ubah:
f.
DirectoryIndex Directive
Merupakan file yang diakses ketika directory direquest. Default value:
index.html. Dari sini bisa kita tambahkan misalnya index.php, home.php
Setelah melakukan modifikasi terhadap file httpd.conf, jangan lupa untuk

melakukan restart web server.
Instalasi yang dilakukan diatas adalah instalasi manual per paket. Pada
saat modul ini dibuat sudah banyak developer PHP yang membuat paket
bundle instalasi WAMP/LAMP (Linux Apache MySQL PHP). Berikut
merupakan contoh paket bundle WAMP:
Apache Friends XAMPP
PHP EasyWindows Installer
Apache2Triad
PHPStar
Web-Developer Server Suite
IBserver
PortableWebAp
Appserv
WOS Portable
WinServ
The Uniform Server
PHPTriad for Windows
Sumber:
http://www.hotscripts.com/PHP/Software_and_Servers/Installation_Kits/inde
x.html
9.1.3 Membuat halaman web sederhana dengan PHP
Contoh penggunaan:
<HTML>
<HEAD> <TITLE>symfony project</TITLE> </HEAD>
<BODY>
<p>Mari kita belajar
<?php
echo 'server side scripting';//perintah menampilkan teks
?>
menggunakan PHP </p>
</BODY>
</HTML>
9-7
Politeknik Telkom
Hasil Keluaran :
9.2
Tipe data
PHP mengenal 8 jenis tipe data antara lain : boolean, integer, float,
array, string, object, resource dan NULL.
Contoh penerapan tipe data pada PHP :
<?php
$ia
$ib
$ic
$id
=
=
=
=
4;
-20;
0232;
0x5DF
//
//
//
//
decimal
decimal negatif
octal
hexadecimal
$jumlah = $ia + 3;
If ( $jumlah == 7 ) {
echo 'Benar';
}else{
echo 'Salah';
}
// Single quoted
echo 'simple string single quoted </br>';
echo 'penggunan single quoted untuk penulisan script pada
baris baru </br>';
echo 'Budi berkata, "I\'ll do the PHP code" </br>';
echo 'PHP ini terletak di C:\\php\ </br>';
echo 'Untuk single quoted \n tidak dianggap sebagai baris
baru <br />';
echo 'Bentuk variabel seperti $var tidak akan ditulis
valuenya <br />';
// Double quoted
echo "Baris pertama \n Baris \t dengan tab \r Baris baru yang
menggunakan return <br />";
echo "DLL library ekstension terdapat pada C:\php\ext\
</br>";
$nama = "Gajah";
echo "Variabel \$nama mempunyai value $nama. </br>";
9-8
Politeknik Telkom
// Heredoc syntax
echo <<<BATAS
$nama adalah salah satu binatang dengan postur tubuh besar.
BATAS;
?>
Contoh penggunaan array di PHP :

<?php
// Contoh simple array dengan key dan value yang bervariasi
$a = array("Band" => "Blink",
"code" => 182,
5 => " + 311 + ",
14 => 5000
);
echo $a["Band"]; // Blink
echo $a["code"]; // 182
echo $a[5];
// + 311 +
echo $a[14];
// 5000
// Contoh penggunaan array didalam array
$aa = array("music" => array(1=>"Jazz", 2=>"Classic",
3=>"Metal"),
"sport" => array(2=>"basketball", 2=>"golf",
3=>"airsoftgun")
);
echo $aa["music"][3]; // Metal
echo $aa["music"][1]; // Jazz
echo $aa["sport"][3]; // airsoftgun
?>
9.3
Variable PHP
Variable PHP selalu dimulai dengan karakter $ dan bersifat casesensitive. Contoh penggunaan variable di PHP :
<?
$_wait = 'Pagi';
$ = &$_wait;
echo $;
echo $_wait;
// Contoh variable yang diisi string

// Reference $_wait via $ (ASCII 140).
// Value $ dan $_wait akan sama
$ = "Selamat $_wait"; // $ dirubah

echo $; // Value $ dan $_wait akan sama-sama berubah
echo $_wait;
?>
Pada baris ke dua diberikan contoh melakukan assign value ke variable

dengan cara by reference. Variable $_wait diisi pagi, kemudian variable $
diisi reference $_wait, sehingga nanti nilai $_wait dan $ akan selalu sama
meskipun terjadi perubahan pada salah satunya.
9-9
Politeknik Telkom
9.4
Operator
Pada praktikum ini akan dipraktekkan penggunaan operator aritmatika,

operator logika dan operator konkatenasi/penggabungan string di PHP.
Contoh penggunaan operator di PHP :
<?php
$a = 20;
$b = 5;
$c = $a * $b;
echo $c;
// $c = 100;
// Contoh penggunaan .
$a = "Paris van ";
$a = $a."Java!";
echo "$a";
// Paris van Java!
//
$b
$b
if
Contoh penggunaan .=
= "Bandung ";
.= "Bermartabat!";
($b = "Bandung" || $b = "Jakarta") {
echo "$b"; }
// Bandung Bermartabat!
?>
Jurnal
11. Tuliskan secara singkat langkah-langkah instalasi perangkat lunak untuk

menjalankan PHP pada komputer Anda!
12. Buatlah program untuk menghitung volume sebuah tabung!
13. Buatlah array arrBuku yang mempunyai tiga key, yaitu Judul, Penulis,
dan Harga. Isi value dari key tersebut dengan nilai seperti pada output
di bawah ini. Kemudian ubah value judulnya dan tampilkan kembali ke
layar.
Output :
Judul
: Tip dan Trik Pemrograman PHP
Penulis
: Onno W Purbo
Harga
: 50500
Judul Buku diubah
Judul
: Dasar-dasar Pemrograman PHP
Penulis
: Onno W Purbo
Harga
: 50500
9-10
Politeknik Telkom
10 Struktur Kontrol dan Fungsi
Overview
Pada pemrograman web PHP disediakan struktur kontrol berupa statemen

kondisional untuk menyelesaikan masalah pemilihan terhadap kasus tertentu
dan statemen pengulangan yang dapat digunakan misalnya untuk menampilkan
isi dari sebuah basis data.
Untuk memudahkan pengaturan struktur program dalam PHP, user dapat
membuat fungsi maupun menggunakan fungsi bawaan PHP yang dapat
dipanggil setiap kali dibutuhkan.
Tujuan
18. Mengerti esensi penggunaan Percabangan (pemilihan/kodisional) dalam
PHP.
19. Memahami bentuk umum Percabangan.
20. Mampu memecahkan masalah sederhana dengan menggunakan
Percabangan dan mengimplementasikan ke dalam program PHP.

21. Mengerti esensi penggunaan Pengulangan (Looping) dalam PHP.
22. Memahami bentuk umum Pengulangan.
23. Mampu memecahkan masalah sederhana dengan menggunakan
24.
25.
26.
27.
28.
29.
Pengulangan dan mengimplementasikan ke dalam program PHP.

Memahami penggunaan Fungsi.
Memahami parameter pada fungsi dalam PHP.
Memahami bentukbentuk fungsi bawaan dalam PHP.
Mampu mengimplementasikan Fungsi pada suatu studi kasus PHP.
Mengerti esensi penggunaan class di PHP.
Membuat sebuah class yang memiliki field dan fungsi.
10-1
Politeknik Telkom
10.1 Kondisional
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement
secara bersyarat atau sesuai dengan kondisi tertentu. Statement yang
berkaitan dengan kondisional yaitu statement if else elseif dan statement
switch. Contoh menggunakan statement if else elseif sebagai berikut :
<?php
$warna = "hitam";
if ($warna == "merah") {
echo "warna adalah merah";
} elseif ($warna == "biru") {
echo "warna adalah biru";
} else {
echo "warna bukan merah atau biru";
}
// alternatif penggunaan if
if ($warna == "merah") :
elseif ($warna == "biru") :
else:
endif;
?>
Contoh menggunakan statement switch :

<?
switch ($warna){
case "merah":
break;
case "biru":
break;
default:
break;
}
?>
10.2 Pengulangan
Statement pengulangan ini digunakan untuk mengulangi sebuah
perintah sampai jumlah atau kondisi tertentu terpenuhi. Yang termasuk ke
dalam statement pengulangan adalah for, while, do-while dan foreach.
Contoh menggunakan statement while :
<?php
10-2
Politeknik Telkom
$genap = 4;
if (isset($genap))
{
$bilgen=intval($genap);
echo "Bilangan Genap dari 2 s/d $bilgen adalah: ";
echo "<br>";
$gen=0;
while ($gen<$genap)
{
$gen=$gen+2;
echo "$gen";
echo " ";
}
}
?>
Contoh menggunakan statement for :

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

Dalam pembuatan program sering kali dibutuhkan beberapa perintah
yang digunakan berulang kali. Hal ini dapat dihindari dengan subrutin. Subrutin
adalah sekumpulan perintah yang diberi nama dan dapat dipanggil sewaktuwaktu. Dalam pemrograman PHP terdapat subrutin, yaitu fungsi.
Contoh :
<?php
// Contoh fungsi tanpa parameter
function dowrite(){
echo "Simple PHP function";
}
dowrite(); // Pemanggilan fungsi
// Contoh fungsi dengan parameter
function dosum($a,$b){
10-3
Politeknik Telkom
return $a+$b;
}
echo dosum(4,2);
dipanggil
?>
//
Menampilkan
nilai
dari
fungsi
yang
10.4 Menggunakan fungsi bawaan PHP

Fungsi bawaan yang akan dibahas pada praktikum kali ini adalah fungsi
matematika dan fungsi string.
Contoh fungsi pengolahan matematika :
<?php
echo ceil(7.6); //menghasilkan 7
echo decbin(109); //menghasilkan 1101101
echo mt_rand(1, 10); // menghasilkan angka random antara 1-10
?>
Contoh fungsi pengolahan string :

<?php
$mk = "alpro siskom comnet oracle netadmin matdis";
$arr = explode(" ",$mk, 5);
foreach ($arr as $vass) {
echo "<br />$vass";
}
echo nl2br("Teknik \n Informatika");
$kata2 = "Bahasa Pemrograman Web menggunakan ASP";
echo "Kalimat : ".$kata2."<br />";
echo str_replace("ASP", "PHP",$kata2);
echo "Panjang Kalimat ".strlen($kata2)."karakter";
?>
10.5 Class
Class sering disebut juga sebagai objek. Penggunaan objek dapat
mempercepat proses pembuatan program, karena user dapat memakai objek
yang telah didefinisikan untuk membuat objek yang lain. Contoh :
<?php
class sepeda {
var $roda="2";
var $warna="kuning";
var $harga;
function UbahWarna($warnaBaru) {
$this->warna=$warnaBaru;
}
function UbahHarga($hargaBaru) {
$this->harga=$hargaBaru;
}
}
echo "<p>Sepeda";
$kendaraan = new sepeda;
10-4
Politeknik Telkom
echo "<p>Jumlah Roda: ".$kendaraan->roda."<br>";

echo "Warna: ".$kendaraan->warna."<br>";
echo "<p>Setelah perintah \"\$kendaraan->UbahWarna(\"merah\")\"
<br>";
$kendaraan->UbahWarna("merah");
echo "Warna: ".$kendaraan->warna."<br>";
?>
Jurnal
14. 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%.
Contoh keluaran :
15. Membuat Program untuk menampilkan kelipatan sebuah bilangan.

Program akan meminta masukan berupa sebuah nilai yang akan diproses
untuk menghasilkan kelipatan bilangan tersebut sampai 5 bilangan.
Contoh :
Masukan
:4
10-5
Politeknik Telkom
Keluaran
:8
12
16
20
24
Masukan
Keluaran
:7
: 14
21
28
35
42
16. Membuat Program kalkulator sederhana.

Program yang akan dibuat 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. (clue : gunakan fungsi untuk membuat
masing-masing operasi aritmatika)
Contoh keluaran :
10-6
Politeknik Telkom
11 Mengolah Data Dalam Form
Overview
Proses pengolahan data dalam PHP akan dilakukan di sisi server. Jika ada
request data dari client, maka data akan diteruskan ke server untuk diproses,
kemudian server akan me-response dengan mengembalikan hasilnya ke sisi
client.
Form ini akan sangat berguna pada saat kita akan mengolah web yang
mempunyai basis data, karena dengan menggunakan form user dapat
memasukkan jumlah data yang banyak.
Terdapat dua cara menangkap variabel pada form, yaitu dengan menggunakan
metode get dan metode post.
Tujuan
30. Memahami kegunaan elemen elemen dalam form

31. Mengolah data yang dimasukkan melalui form
Mengolah Data dalam Form
11-1
Politeknik Telkom
11.1 Menyiapkan Form

Form menyediakan berbagai komponen yang dapat digunakan untuk
menerima masukkan data dari user. Untuk mendeklarasikan sebuah form
dapat digunakan dua cara, yaitu form dalam tag HTML dan form yang
disisipkan pada sintak PHP.
11.1.1 Menangkap Variabel dari Form

Ada dua cara menangkap variabel dari form, yaitu dengan
menggunakan metode get dan metode post. Metode Get merupakan sebuah
atribut yang dimiliki oleh form. Dengan menggunakan metode GET, maka
data yang diisi di dalam form akan dikirimkan ke server dengan cara
diletakkan di belakang URL. Penggunaan metode ini tidak menjamin keamanan
data. Dengan menggunakan metode POST maka data yang diisi di dalam form
akan dikirim ke server secara terpisah, artinya data tidak terlihat di belakang
URL.
Kerjakan contoh skrip-skrip berikut ini :
Skrip inputdata.php
<HTML>
<HEAD>
<TITLE>Menangkap variabel dari form</TITLE>
</HEAD>
<BODY>
<FORM METHOD = GET ACTION = proses.php>
Nama: <input type = text name = nama size = 15>
NIM : <input type = text name = nim size = 15>
Program Studi : <input type = text name = prodi size = 15>
<input type = submit value = Proses>
</FORM>
</BODY>
</HTML>
Skrip proses.php
<?php
if ($prodi==Sistem Informasi || $prodi==Teknik Informatika)
{
echo('Nama Anda : <B>'.$nama. '</B>');
echo('NIM : '.$nim);
echo('Program Studi : '.$prodi);
}
Else
11-2
Politeknik Telkom
{
echo(Anda tidak memiliki hak akses);
}
?>
Contoh diatas menggunakan metode GET. Pertama-tama, jalankan dulu skrip

inputdata.php, lalu masukkan nama, NIM, Program Studi dan klik tombol
Proses. Perhatikan Addressbar untuk metode GET.
Setelah tombol Proses di klik, nama yang dimasukkan akan disimpan sebagai
variabel, sehingga dapat diolah dan ditampilkan sesuai dengan keinginan.
Untuk melihat perbedaan penggunaan metode GET dan metode
POST, ubah metode GET pada skrip inputdata.php dengan metode POST
seperti di bawah ini :
<FORM METHOD = GET ACTION = proses.php>
Menjadi :
<FORM METHOD = POST ACTION = proses.php>
Jalankan lagi skrip inputdata.html, masukkan nama, NIM, Program Studi, lalu
tekan tombol Proses, perhatikan pada Addressbar perbedaan metode GET
dan metode POST.
11-3
Politeknik Telkom
Latihan
17. Buat halaman Login seperti gambar dibawah ini. Tombol Login untuk
masuk ke halaman berikutnya jika user adalah administrator atau umum.
Halaman berikutnya setelah login tergantung pada jenis user, jika user
adalah administrator maka halaman yang dibuka adalah halaman
administrator dengan pesan Selamat datang administrator, jika user
name adalah umum maka yang dibuka adalah halaman user biasa dengan
pesan Selamat datang user. Sedangkan tombol daftar, digunakan untuk
pendaftaran user baru bagi yang belum terdaftar.
LOGIN
User Name
Password
Daftar
Login
Gambar 12-1 Form untuk Login

18. Buat halaman pendaftaran yang didalamnya terdapat Form Pendaftaran
User Baru seperti gambar berikut (metode GET, action simpan.php):
PENDAFTARAN ANGGOTA
User Name
Password
Nama
Alamat
E-mail
Level
Administrator User Biasa

Simpan
Reset
11-4
Politeknik Telkom
Gambar 12-2 Form untuk Pendaftaran User
11-5
Politeknik Telkom
12 Keamanan pada Web
12-1
Politeknik Telkom
13 MySQL dengan PHP
Overview
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.
Tujuan
1.
2.
3.
4.
5.
6.
7.
8.
Menggunakan MySQL untuk mengelola database

Mampu membuat database pada MySQL
Mampu membuat tabel pada MySQL melalui aplikasi web
Mampu memasukkan data ke dalam tabel di database MySQL
Mampu menampilkan data dari table
Mampu melakukan proses pencarian data pada table
Mampu melakukan delete data pada tabel
Mampu melakukan update data pada tabel
13-1
Politeknik Telkom
13.1 Tes Koneksi ke server MySQL

Untuk menjalankan MySQL, klik ganda pada file winmysqladmin.exe
yang terletak di folder C:\apache\mysql\bin\winmysqladmin.exe. Tanda bahwa
MySQL aktif, lihat ikon lampu lalu lintas dengan warna hijau yang terletak di
sebelah kanan bawah dari desktop Windows.
Contoh koneksi ke MySQL (KoneksiMySQL.php):
<?php
$koneksi = mysql_connect(("localhost","","");
if ($koneksi) {
echo("Koneksi ke server MySQL sukses");
}
else {
echo("Koneksi ke server MySQL gagal");
}
?>
13.2 Membuat Database pada MySQL

Database digunakan sebagai tempat untuk menampung data atau tabeltabel.
Contoh membuat database pada MySQL :
<?php
include("KoneksiMySQL.php");
$buatdb = mysql_create_db("APOTEK_DB");
if ($buatdb) {
echo("<BRDatabase dengan nama :
<B>APOTEK_DB</B> sukses dibuat");
}
else
{
echo("<BR>Database dengan nama :
<B>APOTEK_DB</B> gagal dibuat");
}
?>
13.3 Membuat Tabel pada MySQL

Setelah berhasil membuat database, maka langkah selanjutnya adalah
membuat tabel-tabel. Contoh :
Skrip BuatTabel.php
13-2
Politeknik Telkom
<?php
include(KoneksiMySQL.php);
$pilihdb = mysql_select_db(APOTEK_DB) or die(Database
APOTEK_DB tidak ditemukan);
$buattabel = CREATE TABLE obat(kdobat char(5) PRIMARY KEY,
namaobat char(50), harga int(9) );
$tabel = mysql_db_query(APOTEK_DB,$buattabel);
if($tabel){
echo(<BR><BR>Tabel dengan nama : <B>obat</B> sukses
dibuat!);
}
else {
echo(<BR><BR>Tabel dengan nama : <B>mahasiswa</B> gagal
dibuat!);
}
?>
13.4 Insert Data

Langkah selanjutnya yaitu melakukan pengisian data ke dalam tabel
obat yang masih berupa tabel kosong. Untuk lebih jelasnya, cobalah skripskrip berikut, FormInput.php digunakan untuk membuat form yang menerima
masukan data, sedangkan InputObat.php untuk proses menambahkan data ke
tabel obat :
Skrip FormInput.php
<HTML>
<HEAD> <TITLE>Memasukkan data ke tabel obat</TITLE> </HEAD>
<BODY>
<B>INPUT DATA MAHASISWA</B><BR>
<FORM METHOD = POST ACTION = InputObat.php>
<TABLE BORDER = 0>
<TR>
<TD>KODE OBAT :</TD>
<TD><INPUT TYPE = TEXT NAME = kdobat SIZE = 10></TD>
</TR>
<TR>
<TD>NAMA OBAT :</TD>
<TD><INPUT TYPE = TEXT NAME = nmobat SIZE = 20></TD>
</TR>
<TR>
<TD>HARGA :</TD>
<TD><INPUT TYPE = TEXT NAME = harga SIZE = 10></TD>
</TR>
13-3
Politeknik Telkom
<TR>
<TD><INPUT TYPE = SUBMIT NAME =submit VALUE =INPUT></TD>
<TD><INPUT TYPE = RESET NAME = reset VALUE = BATAL></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Skrip InputObat.php
<?php
mysql_connect("localhost","","");
mysql_select_db("APOTEK_DB") or die("Database tidak ada");
$perintah="INSERT INTO obat(kdobat,namaobat,harga)
VALUES('$kdobat','$nmobat','$harga')";
$isi_data=mysql_query($perintah);
if(isset($isi_data))
{
echo("Data Obat :<BR>");
echo("Kode Obat : $kdobat<BR>");
echo("Nama Obat : $nmobat<BR>");
echo("Harga : $harga<BR>");
echo("Telah dimasukan ke dalam table obat <BR>");
echo("<FORM METHOD = POST ACTION = FormInput.php>");
echo("<INPUT TYPE=SUBMIT NAME=SUBMIT VALUE='Daftar
Lagi'></FORM>");
}
else {
echo("Data obat gagal dimasukkan ke dalam tabel");
}
?>
13.5 View Data

Setelah melakukan pengisian data ke dalam tabel, langkah berikutnya
kita akan melihat/menampilkan data yang ada di dalam tabel, cobalah skrip
berikut :
Skrip TampilObat.php
<?php
echo("DATA OBAT<HR><BR><BR>");
echo("<TABLE BORDER=1>");
echo("<TR><TD>KODE</TD><TD> OBAT</TD><TD>HARGA</TD></TR>");
mysql_select_db("APOTEK_DB");
$perintah="SELECT * FROM obat ORDER BY kodeobat";
$tampil_data=mysql_query($perintah);
13-4
Politeknik Telkom
while($data=mysql_fetch_row($tampil_data)){
echo("<TR> <TD>$data[0]</TD> <TD>$data[1]</TD>
<TD>$data[2]</TD></TR>");
}
echo("</TABLE>");
?>
Pada saat skrip TampilObat.php dijalankan, maka skrip akan menampilkan

data yang ada di dalam tabel obat.
13.6 Searching Data

Searching data dimaksudkan untuk mencari data yang ada pada tabel
sehingga bisa menemukan informasi dengan cepat. Cobalah skrip berikut:
Skrip FormCari.php
<HTML>
<HEAD> <TITLE>Mencari data obat</TITLE> </HEAD>
<BODY>
<FORM METHOD=POST ACTION=CariObat.php>
Masukkan Kode Obat :<BR>
<INPUT TYPE=TEXT NAME=cari SIZE=20><BR>
<INPUT TYPE=submit NAME=submit VALUE=CARI>
</FORM>
</BODY>
</HTML>
Skrip CariObat.php
<?php
echo("<H3>HASIL PENCARIAN</H3>");
$perintah="SELECT * FROM obat WHERE kodeobat like '%$cari%'";
$hasil=mysql_query($perintah);
$jumlah=mysql_num_rows($hasil);
if($jumlah>0){
echo("Data yang ditemukan : $jumlah<BR><HR>");
while($data=mysql_fetch_row($hasil)) {
echo("Nama Obat : $data[1]<BR>");
echo("Harga
: $data[2]<BR>");
}
} else {
echo("Maaf, data yang anda cari tidak ada");
}
?>
13-5
Politeknik Telkom
Pada saat skrip FormCari.php dijalankan, maka ada perintah untuk

memasukkan kode obat yang akan dicari. Bila nim yang dimasukkan pada
tampilan skrip FormCari.php ada pada tabel obat, maka akan ditampilkan
nama obat dan harga dari obat yang bersangkutan.
13.7 Delete Data

Data yang ada di dalam tabel tidak hanya bisa ditambah atau bahkan
diubah. Data tersebut juga bisa untuk dihapus. Untuk lebih jelasnya, cobalah
skrip-skrip berikut :
Skrip TampilDelete.php
<?php
while($data=mysql_fetch_row($tampil_data)) {
echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD>
<TD>$data[2]</TD>");
echo("<TD><a href=\"HapusObat.php?id=$data[0]\">
Hapus</a></TD></TR>");
}
echo("</TABLE>");
?>
Skrip HapusObat.php
<?php
$perintah="DELETE FROM obat where kodeobat=$id";
$hapus=mysql_query($perintah);
header("Location:TampilDelete.php");
?>
Jika skrip TampilDelete.php dijalankan, maka akan ditampilkan data

yang ada di dalam tabel obat. Link untuk hapus terletak di setiap baris pada
data yang ditampilkan. Bila link hapus di pilih, maka data yang berada satu
baris dengan link hapus tersebut akan dihapus dari tabel obat.
13.8 Update Data

Perintah update data dilakukan untuk mengubah data yang ada di
dalam tabel. Seperti halnya input data, pada pengolahan data diperlukan suatu
13-6
Politeknik Telkom
antarmuka untuk menampilkan data yang akan diubah. Cobalah skrip-skrip

berikut :
Skrip TampilUpdate.php
<?php
while($data=mysql_fetch_row($tampil_data)) {
echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD>
<TD>$data[2]</TD>");
echo("<TD><ahref=\"FormEdit.php?id=$data[0]\">Ubah</a>
</TD></TR>");
}
echo("</TABLE>");
?>
Skrip FormEdit.php
<?php
$perintah="SELECT * FROM obat where kodeobat='$id'";
$hasil=mysql_query($perintah);
$baris=mysql_fetch_array($hasil);
?>
<HTML>
<B>Pengeditan Data Obat</B><HR><BR>
<FORM method=post action=EditObat.php>
<input type=hidden name="id"
value="<?echo"$baris[kodeobat]"?>">
Nama Obat : <input type=text name=namaobat size=20
value="<?echo"$baris[namaobat]" ?>"><BR>
Harga
: <input type=text name=harga size=20
value="<?echo"$baris[harga]" ?>"><BR><BR>
<input type=submit name=edit value=Simpan>
</HTML>
Skrip EditObat.php
<?php
$ubah = "UPDATE obat SET namaobat='$namaobat',harga='$harga'
13-7
Politeknik Telkom
where kodeobat='$id'";
mysql_query($ubah);
header("location:TampilUpdate.php");
?>
Untuk mengubah data pada halaman TampilUpdate.php, pilih link ubah yang
berada satu baris dengan data yang ingin diubah. Pada saat link diklik, maka
akan merefer ke skrip FormEdit.php.
Bila tombol Simpan di klik pada FormEdit.php, maka akan menjalankan skrip
EditObat.php. Skrip EditObat.php akan mengupdate data sesuai dengan
inputan user pada skrip FormEdit.php.
13-8
Politeknik Telkom
Jurnal
19.
20.
21.
22.
Lihat kembali jurnal pada Bab XII. Buatlah aplikasi pendaftaran/registrasi

agar pengunjung mendapatkan hak untuk memasuki halaman web yang di
buat. Untuk membuat aplikasi tersebut Anda harus mengikuti aturanaturan sebagai berikut :
Buat database dan tabel menggunakan sintak PHP. Field-field tabel
tersebut terdiri dari username, password, nama, alamat, email dan level.
Untuk level dibedakan menjadi dua, yaitu user biasa dan administrator.
Gunakan form login yang telah Anda buat pada praktikum sebelumnya.
Gunakan form pendaftaran anggota untuk daftar yang telah Anda buat
pada praktikum sebelumnya.
Setelah sukses melakukan pendaftaran, user dapat melakukan login sesuai
dengan level user masing-masing. Untuk halaman administrator akan
menampilkan data anggota yang telah mendaftar disertai dengan menu
edit dan delete data pada setiap baris datanya, terdapat juga menu
Tambah Data dan Ganti Password. Sedangkan untuk halaman user biasa
terdapat menu Edit Data (miliknya sendiri) dan Ganti Password.
13-9

Praktikum Pemrograman Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktikum Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Politeknik Telkom