Diktat Kuliah Peemmrrooggrraammaann WWeebb - fisika…fisika.unud.ac.id/diktat/teori/diktat prog web.pdfmembantu penyusunan diktat ini : -Bapak Ketua Jurusan Fisika FMIPA UNUD -Teman

Diktat Kuliah

PPeemmrrooggrraammaann WWeebb

IGA Widagda

Fisika FMIPA UNUD

2012

i

Kata Pengantar

Penulis memanjatkan puji syukur kepada Tuhan Yang Maha Esa, karena berkat

rahmat-Nya maka kami bisa menerbitkan Diktat kuliah Pemrograman Web. Kami berharap

semoga diktat kuliah ini dapat membantu mahasiswa Fisika FMIPA UNUD dalam menguasai

materi kuliah pemrograman web.

Kami juga menyampaikan terima kasih kepada semua pihak yang turut serta

membantu penyusunan diktat ini :

-Bapak Ketua Jurusan Fisika FMIPA UNUD

-Teman – teman dosen dan karyawan Jurusan Fisika, FMIPA, UNUD

-Istriku, Kusuma Dewi dan kedua anakku, Widya dan Lestari

Kami menyadari bahwa diktat ini masih banyak kekurangannya, untuk itu kami

sangat mohon kritik dan saran dari semua pihak untuk kesempurnaan diktat ini.

PENYUSUN

ii

DAFTAR ISI

KataPengantar...........................................................................................................................i

Daftar Isi ...................................................................................................................................ii

1 WWW (World Wide Web)................................................................................. 1

2 Pengenalan HTML............................................................................................... 3

3 Tag Dasar.............................................................................................................. 5

4 Format Teks dalam HTML................................................................................. 12

5 Entitas Karakter dalam HTML........................................................................... 17

6 Link HTML.........................................................................................................19

7 Image HTML...................................................................................................... 25

8 List dan Tabel......................................................................................................31

9 Frame.................................................................................................................. 49

10 Form.................................................................................................................... 54

11 CSS (Cascade Style Sheet)................................................................................. 62

12 HTML Dinamik.................................................................................................. 68

Daftar Pustaka

1.World Wide Web Pemrograman Web

1

<HTML>

<H1>Welcome</H1>

</HTML>

file abc.htm

HTTP

“Get”

Abc.htm

HTTP

“replay”

1 2

3

4

I. World Wide Web

1.1. Pendahuluan

World Wide Web (singkatnya : Web) adalah salah satu layanan yang didapatkan oleh

pemakai komputer ketika terhubung ke Internet. Web pada awalnya adalah ruang informasi

dalam internet. User dituntun untuk menemukan informasi dengan mengikuti link yang

disediakan dalam dokumen atau halaman web(web page) tersebut. Web merupakan standar

interface pada layanan-layanan yang ada di internet. Awalnya internet dipakai sebagai

penyedia informasi, kini digunakan untuk komunikasi baik lewat e-mail maupun chatting.

Disamping itu internet dapat dipakai sebagai media untuk melakukan transaksi bisnis (e-

commerce), transaksi bank (e-banking), penyedia informasi pemerintahan (e-goverment),

penyedia informasi literatur (e-library) dan lain-lainnya.

1.2.Proses Kerja Web

Untuk mendapatkan informasi dari suatu halaman Web maka akan melewati proses

seperti diperlihatkan gambar 1.1.

Informasi disimpan dalam dokumen yang disebut halaman-halaman web (web pages). Web

page adalah file-file yang disimpan dalam komputer yang disebut dengan server web.

Komputer yang membaca web page disebut dengan client web. Client web menampilkan

Client

Web Browser

URL: http//..//abc.htm

HTTPS

Server

Komputer

Internet

Web Browser

welcome

URL: http//..//abc.htm

<HTML>

<H1>Welcome</H1>

</HTML>

Temp file / memori

Hard Disk

Gambar 1.1. Proses Kerja Pengaksesan Informasi pada Web

1.World Wide Web Pemrograman Web

2

page dengan menggunakan program yang disebut browser web. Browser web yang sering

dipakai adalah Mozilla Firefox, Internet Explorer (IE), Netscape Navigator (NN), dll.

1.3. Server Web

Server web adalah komputer yang dipakai untuk menyimpan dokumen-dokumen

web, komputer ini akan melayani permintaan dokumen web dari kliennya. Browser web

berkomunikasi dengan server web lewat jaringan internet dengan menggunakan standar

komunikasi (protokol) yaitu HTTP (Hyper Text Transfer Protocol).

1.4. Browser Web

Browser web adalah software yang dipakai untuk menampilkan informasi dari server

web. Browser mengambil sebuah web page dari server dengan sebuah request (permintaan).

Sebuah request berisi alamat page (page address).Contoh sebuah page address adalah :

http:/www.kita.web.id/hal1.htm. Seluruh halaman web berisi instruksi bagaimana untuk

ditampilkan. Browser menampilkan page dengan membaca intstruksi ini. Instruksi ini

biasanya dinyatakan dengan bahasa HTML ( Hyper Text Markup Language).

2.Pengenalan HTML Pemrograman Web

3

II. PENGENALAN HTML

2.1. Dokumen HTML

HTML singkatan dari Hyper Text Markup Language. Dokumen HTML adalah file

teks murni yang dapat dibuat dengan editor teks sembarang seperti : notepad. Dokumen ini

dikenal sebagai halaman web (web page). File atau dokumen HTML dibuat dengan

mengetikkan dalam editor teks, kemudian dilanjutkan dengan memberi nama file dan

ekstensi htm atau html.Contoh : latihan.htm, myfirstweb.html.

2.2.Elemen HTML

Dokumen HTML disusun oleh elemen-elemen. Elemen-elemen ini dinyatakan

dengan tag. Beberapa contoh elemen atau tag dalam HTML adalah : head, body, table,

paragraf, dan list. Format penulisan tag dalam HTML adalah :

<nama tag>

Tag umumnya berpasangan yaitu : tag awal dan tag akhir, dimana format penulisannya

adalah :

<nama tag> … </nama tag>

Untuk membuat sebuah dokumen HTML biasanya paling tidak diperlukan 3 tag yaitu

<html>, <head>, dan <body> beserta tag-tag pasangannya. Elemen head berisi informasi

tentang dokumen tersebut, sedangkan elemen body berisi teks sebenarnya yang tersusun dari

table, paragraf, list, dan elemen lainnya. Secara umum dokumen HTML terdiri dari 2 bagian

yaitu bagian head dan bagian body. Sehingga setiap dokumen HTML akan mempunyai pola

sebagai berikut :

<html>

<head>

…informasi tentang dokumen HTML

</head>

<body>

…informasi yang ditampilkan dalam browser web

</body>

</html>

Setiap dokumen HTML harus diawali oleh tag <html> dan tag </html> di akhir dokumen.

Bagian head ditandai dengan tag <head> diawal, dan tag </head> di akhir. Bagian ini berisi

informasi tentang dokumen HTML nya. Biasanya informasi yang dituliskan adalah judul dari

2.Pengenalan HTML Pemrograman Web

4

dokumen. Judul ini ditampilkan pada caption bar dari window browser (lihat gambar 2.1).

Tag yang dipakai untuk menampilkan judul ini adalah tag <title> …</title>.

Bagian body ditandai dengan tag <body>…</body>. Bagian body ini merupakan elemen

terbesar dalam dokumen HTML. Elemen ini berisi isi dokumen yang akan ditampilkan

dalam browser web yang meliputi : paragraf, grafik, tabel, dan sebagainya. Sebagai contoh

awal untuk membuat dokumen HTML cobalah ketikkan teks di bawah ini dalam editor

notepad. Kemudian beri nama file tersebut dengan : contoh.htm. Selanjutnya jalankan

browser Internet Explorer dan buka (open) file : contoh.htm. Hasilnya dapat dilihat dalam

gambar 2.1.

<html>

<head>

<title>Judul Halaman web</title>

</head>

<body>

ini adalah home page pertama ku.

</body>

</html>

Gambar 2.1. Tampilan dari dokumen HTML : contoh.htm

Listing 2.1. contoh.htm

3.Tag Dasar HTML Pemrograman Web

5

III.Tag Dasar HTML

3.1 Tag-tag Dasar HTML

Tag atau elemen dasar merupakan komponen utama dari dokumen HTML. Dokumen

HTML pada dasarnya berisi teks informasi. Judul dokumen HTML disimpan dalam elemen

Head dengan tag <title>…</title>. Teks informasi disimpan dalam elemen Body dengan

menggunakan tag <body>…</body>. Teks informasi dalam elemen Body akan disusun

menjadi paragraf-paragraf dengan memakai tag <p>.

Beberapa tag dasar HTML seperti : html, head, title, body, paragraf, line break,

heading, garis datar, alignment, komentar, dll.

3.2 HTML

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen

HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskannya

sebagai tag pertama dalam dokumen HTML. Format penulisannya adalah :

<html>

…..

</html>

3.3 Head

Merupakan tag berikutnya setelah tag <html> untuk memberikan judul atau

keterangan tentang dokumen web yang akan ditampilkan. Format penulisannya adalah :

<head>

…..

</head>

3.4 Body

Merupakan bagian utama dalam dokumen web. Pada bagian ini semua isi dokumen

yang akan ditampilkan di dalam browser harus dituliskan. Format penulisannya adalah :

<body>

…..

</body>

3.5 Paragraf

Informasi yang akan ditampilkan dalam browser web harus mengikuti aturan atau

kaidah dalam penulisan. Misalnya satu pikiran utama biasanya disimpan dalam satu paragraf.

Format penulisannya adalah :

<p> …teks informasi… (tanpa tag penutup)

atau

<p> …teks informasi…</p> (dengan tag penutup)


6

Berikut ini adalah beberapa contoh dokumen HTML yang menggunakan tag dasar tersebut :



<html>

<head>

<title>sebuah contoh HTML sederhana</title>

</head>

<body>

<p> Selamat datang di dunia HTML.It's so easy and enjoyable </p>

</body>

</html>

Listing 3.2 (tag_dasar1.htm) memperlihatkan secara lebih rinci tentang tag paragraf. Hasil

eksekusinya ditampilkan dalam gambar 3.2.

 <html> <head> <title>Contoh penggunaan tag paragraf</title> </head> <body> <p> Ini adalah paragraf pertama</p> <p> Ini adalah paragraf kedua </p> <p> Ini adalah paragraf ketiga</p> </body> </html>

Listing 3.1 Tag_dasar.htm

Gambar 3.1 Hasil eksekusi Tag_dasar.htm

Listing 3.2 Tag_dasar1.htm


7

3.6 Line Break (Pindah Baris)

Kita dapat melakukan pindah atau ganti baris pada dokumen web. Untuk

menampilkan suatu teks agar ditampilkan pada baris yang baru dalam suatu paragraf maka

harus digunakan tag <br>. Format penulisannya adalah :

…teks informasi…<br> (tanpa tag penutup)

contoh pemakaian line break dapat dilihat dalam listing 3.3 (line_break.htm) berikut ini :

 <html> <head> <title>Contoh penggunaan tag line break</title> </head> <body> <p> Ini adalah baris pertama <br> Ini adalah baris kedua <br> Ini adalah baris ketiga </p> </body> </html>

Gambar 3.2 Hasil eksekusi Tag_dasar1.htm

listing 3.3 line_break.htm

Gambar 3.3 Hasil eksekusi line_break.htm


8

3.7 Heading

Teks dalam dokumen umumnya mempunyai judul topik. Pada dokumen HTML judul

ini disebut heading. Heading akan ditampilkan dengan huruf yang lebih besar dan ditebalkan

dibandingkan dengan huruf normal. Heading dipakai untuk menunjukkan tingkat keberartian

dari teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, diberi nomer 1 sampai

dengan 6. Nomer 1 merupakan heading terbesar. Format penulisan heading adalah :

<hn>…teks informasi…</hn> dimana n adalah nomer heading (1,2,…6)

Contoh pemakaian heading diperlihatkan dalam listing 3.4 (heading.htm) berikut ini :

 <html> <head> <title>Contoh penggunaan heading</title> </head> <body> <h1> Ini adalah heading 1 </h1> <h2> Ini adalah heading 2 </h2> <h3> Ini adalah heading 3 </h3> <h4> Ini adalah heading 4 </h4> <h5> Ini adalah heading 5 </h5> <h6> Ini adalah heading 6 </h6> </body> </html>

Hasil eksekusi dari heading.htm diperlihatkan dalam gambar 3.4.

Listing 3.4 heading.htm

Gambar 3.4 Hasil eksekusi heading.htm


9

Tag heading mempunyai atribut yang dipakai untuk mengatur letak heading dalam suatu

baris. Atribut yang dipakai adalah : align. Ada 3 opsi pengaturan yaitu :

Left (kiri)

Center (tengah)

Right (kanan)

Format penulisan heading dengan atribut align adalah :

<hn align=”left/right/center”> …teks informasi…</hn>

Contoh pemakaian atribut align dapat dilihat dalam listing 3.5 ( align.htm). Dan hasilnya

ditampilkan pada gambar 3.5.

 <html> <head> <title>Contoh penggunaan heading : align </title> </head> <body> <h2 align="center"> heading 2 di tengah </h2> <p> heading 2 diposisikan di tengah baris</p> <h1 align="right"> heading 1 di kanan </h1> <p>heading 1 diletakkan di kanan baris</p> </body> </html>

3.8 Garis horizontal (horizontal rule)

Sebuah garis dapat dibuat dalam halaman web. Garis ini biasanya digunakan sebagai

pemisah antar bagian atau paragraf. Tag yang dipakai untuk membuat garis adalah <hr>.

Listing 3.5 align.htm

Gambar 3.5 Hasil eksekusi align.htm


10

Adapun format penulisan tag <hr> adalah :

…teks informasi… <hr> …teks informasi

Contoh pemakaian tag <hr> dapat dilihat dalam listing 3.6 (garis.htm). Dan hasil eksekusi

dari file garis.htm dapat dilihat dalam gambar 3.6.

 <html> <head> <title>Contoh penggunaan garis horizontal</title> </head> <body> <p> Ini adalah contoh penggunaan garis </p> <hr> <p> ini adalah teks di bawah garis horizontal </p> </body> </html>

3.9 Komentar

Dalam suatu dokumen web ada sebagian teks dalam dokumen hanya berfungsi

sebagai catatan atau komentar terhadap dokumen itu sendiri. Catatan atau komentar ini tidak

akan ditampilkan dalam browser web. Format penulisan komentar adalah :



contoh penulisan komentar dalam dokumen HTML dapat dilihat dalam listing 3.7

(komentar.htm). Dan hasil eksekusi dari komentar.htm dapat dilihat dalam gambar 3.7

Gambar 3.6 Hasil eksekusi garis.htm

Listing 3.6 Garis.htm


11

 <html> <head> <title>Contoh penggunaan komentar</title> </head> <body>  <p> ini sebuah paragraf </p> </body> </html>

Latihan :

1.Buatlah sebuah dokumen HTML dimana jika dieksekusi dalam browser maka akan

menampilkan hasil seperti di bawah ini :

Listing 3.7 komentar.htm

Gambar 3.7 Hasil eksekusi komentar.htm

4.Format Text dalam HTML Pemrograman Web

12

IV. Format Teks dalam HTML

4.1 Format Teks

Format teks dalam dokumen HTML dapat dibuat secara khusus untuk menunjukkan

perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan dan

penekanan tersebut antara lain :

huruf miring (italic)

huruf tebal (bold)

huruf digarisbawahi

huruf dikecilkan

superscript

subscript

huruf diberi tekanan (emphasize) dll

Contoh pemformatan teks ditunjukkan dalam dokumen HTML format_teks.htm (listing 4.1).

Hasil eksekusi file Format_teks.htm diperlihatkan dalam gambar 4.1.

 <html> <body> <b> Ini Teks Tebal</b><br> <strong> Ini Teks Strong</strong><br> <big> Ini Teks besar </big> <br> <em> Ini Teks Emphasize</em> <br> <i> Ini teks miring </i> <br> <small>Ini teks small </small> <br> Teks ini berisi <sub> subscript </sub> <br> Teks ini berisi <sup> superscript</sup> <br> </body> </html>

Listing 4.1. Format_teks.htm

Gambar 4.1. Hasil eksekusi file Format_teks.htm


13

4.2 Teks Preformat

Untuk menampilkan teks di dalam browser web sesuai dengan dokumen web tersebut

di dalam editor teks, maka dapat digunakan tag <pre>….</pre>. Dengan tag <pre> yang

mempunyai kepanjangan “preformatted” maka spasi, baris baru, dan tab akan ditampilkan

sesuai dengan aslinya.

Secara default jarak antara suatu kata atau kalimat ketika ditampilkan dalam browser

web adalah sebesar satu spasi. Salah satu contoh penggunaan dari tag <pre> adalah untuk

menampilkan source program dalam web. Sebagai contoh akan diperlihatkan dalam listing

4.2 (preformat.htm) berikut ini.

 <html> <body> <pre> void Node :: Remove() { if (prev) prev->next = next; else if (parent) parent->setcontent(null); if (next) next->prev = prev; parent = null } </pre> </body> </html>

Hasilnya ditunjukkan dalam gambar 4.2.

Gambar 4.2. Hasil eksekusi file Preformmat.htm

Listing 4.2. Preformat.htm


14

4.3 Address

Untuk menampilkan sebuah alamat (address) pada web maka digunakan tag address.

Adapun format penulisannya adalah :

<address> …teks informasi…</address>

contoh pemakaian tag <address> diperlihatkan dalam listing 4.3 (address.htm). Sedangkan

hasil eksekusi dari listing tersebut diperlihatkan dalam gambar 4.3



<html>

<body>

<address>

Jurusan Fisika, FMIPA <br>

Universitas Udayana <br>

bukit Jimbaran <br>

Bali

</address>

</body>

</html>

4. 4 Singkatan (Acronym)

Untuk menampilkan data kepanjangan dari suatu singkatan pada halaman web kita

dapat memanfaatkan tag acronym (akronim) ditambah dengan atribut title. Adapun format

penulisannya adalah :

<acronym title = “teks kepanjangan”> …teks singkatan…</acronym>

Dengan memakai tag tersebut maka pada saat pointer mouse berada di atas singkatan

tersebut, maka kepanjangan dari singkatan tersebut akan ditampilkan mengambang di

atasnya. Adapun contoh pemakaian dari tag <acronym> adalah seperti diperlihatkan dalam

Gambar 4.3. Hasil eksekusi file Address.htm

Listing 4.3. Address.htm


15

listing 4.4 ( acronym.htm). Gambar 4.4 memperlihatkan hasil eksekusi file tersebut dalam

browser .

 <html> <body> <acronym title = "World Wide Web"> W W W </acronym> <br> <acronym title = "Indeks harga Saham Gabungan"> IHSG </acronym> </body> </html>

4.5 Kutipan (Quotation)

Untuk menampilkan suatu kutipan dalam halaman web adalah dengan memakai tag

quotation. Ada dua macam kutipan yaitu :

kutipan pendek – tag <q>

kutipan panjang – tag <blockquote>

Adapun format penulisannya adalah :

Kutipan pendek :

<q> …teks informasi…</q>

Kutipan panjang :

<blockquote> …teks informasi…</blockquote>

tag <blockquote> dipakai untuk membuat sebagian teks yang dikutip sebagai suatu blok

sendiri. Margin dari teks kutipan akan berubah untuk memisahkan dari teks yang lain.

Tag <quote> tidak melakukan sesuatu yang khusus.

Contoh pemakaian kutipan dalam dokumen HTML diperlihatkan dalam listing 4.5

(quot.html) . Dan hasil eksekusi dari file tersebut dapat dilihat dalam gambar 4.5.

Listing 4.4. file Acronym.htm

Gambar 4.4. Hasil eksekusi file Acronym.htm


16

 <html> <body> Ini adalah kutipan (quotation) panjang : <blockquote> baris 1 kutipan panjang baris 2 kutipan panjang baris 3 kutipan panjang baris 4 kutipan panjang baris 5 kutipan panjang </blockquote> ini adalah kutipan (quotation) pendek : <q> baris 1 kutipan pendek baris 2 kutipan pendek </q> </body> </html>

Listing 4.5. Hasil eksekusi file quot.htm

Gambar 4.5. Hasil eksekusi file quot.htm

5.Entitas Karakter HTML Pemrograman Web

17

V.Entitas Karakter HTML

5.1 Pengertian

Dalam HTML ada beberapa karakter yang mempunyai arti khusus seperti :

< (tanda lebih kecil) menyatakan awal tag

> (tanda lebih besar) menyatakan akhir tag

x menyatakan tanda kali

” menyatakan tanda kutip

dll

Jika kita menginginkan browser untuk menampilkan karakter-karakter tersebut kita harus

menyisipkan entitas karakter ke dalam source code HTML (listing). Entitas karakter terdiri

dari 3 bagian yaitu : sebuah ampersand (&), sebuah nama entitas atau sebuah # dan nomor

entitas, dan tanda titik koma (;). Contoh untuk menampilkan tanda lebih kecil (<) maka kita

harus menuliskan : < atau <

Kelebihan menggunakan nama dibandingkan nomor adalah nama lebih mudah diingat

dibandingkan nomor.

Kekurangannya adalah tidak semua browser mendukung nama entitas terbaru, sedangkan

dukungan untuk nomor entitas hampir ada pada setiap browser. Contoh penggunaan entitas

karakter diperlihatkan dalam listing 5.1 (entitas.htm). Sedangkan hasil eksekusi dari file

tersebut dapat dilihat dalam gambar 5.1.

 <html> <body> apakah A > B atau A < B ? </body> </html>

Listing 5.1. entitas.htm

Gambar 5.1. Hasil eksekusi entitas.htm


18

5.2 Entitas karakter yang sering digunakan

Beberapa entitas karakter yang sering digunakan dalam halaman web adalah seperti

diperlihatkan dalam tabel di bawah ini.

Hasil Keterangan Nama entitas Nomer entitas

© Copyright ©

® Registered trademark ® ®

™ Trademark ™

Non-breaking space (spasi) ¡

& Ampersand & &

» Angle quotation mark(left) « «

« Angle quotation mark(right) » »

” Tanda kutipan " "

< Lebih kecil < <

> Lebih besar > =

x Tanda kali × ×

÷ Tanda bagi ÷ ÷

Latihan :

1.Buatlah sebuah dokumen HTML dimana jika dibuka dalam browser maka akan

menampilkan hasil seperti di gambar bawah ini :


19

6.Link HTML Pemrograman Web

19

VI. Link HTML

Dokumen HTML memiliki kemampuan untuk memberikan link dari satu teks atau

gambar ke dokumen lain atau bagian lain dalam satu dokumen. Teks atau gambar yang

ditentukan sebagai link akan diberi warna dan garis bawah (highlight).

Dokumen HTML menggunakan tag hyperlink atau anchor untuk melakukan link

kepada dokumen lain dalam web. Disamping tag anchor maka kita perlu menyertakan atribut

href untuk menyatakan alamat link yang dituju. Format atau sintax dari hyperlink adalah :

<a href = “alamat_link”> …teks informasi… </a>

dimana alamat_link adalah alamat link yang akan dituju. Contoh :

<a href = http://www.microsoft.com> Alamat Microsfoft </a>

Ada 3 tipe link yaitu :

Link relatif

Link absolut

Link dalam dokumen yang sama

6.1 Link Relatif

Link relatif adalah suatu link dari suatu page ke page lain pada komputer yang sama.

Link jenis ini tidak memerlukan alamat internet yang lengkap. Jika dua page berada pada

direktori (folder) yang sama anda dapat menuliskan alamat file HTML secara langsung.

Contoh :

<a href = “file_contoh.htm” >Open File </a>

6.2 Link Absolut

Link absolut adalah suatu link dari suatu web page ke web page lain di internet.

Dalam hal ini kita harus menuliskan alamat internet secara lengkap. Berikut ini adalah

contohnya :

<a href = “http://www.microsoft.com” >Welcome to Microsoft </a>

Di bawah ini adalah contoh dokumen HTML tentang link (listing 6.1 link.htm).

<html>

<body>

<p><a href ="aboutsinga.htm">Welcome to Singapore </a></p>

<p><a href ="http://www.microsoft.com">Welcome to Microsoft </a></p>

</body>

</html>

listing 6.1 link.htm


20

Karena file link.htm salah satu linknya adalah menuju file aboutsinga.htm maka kita perlu

membuat file aboutsinga.htm juga. Adapun isi dari file aboutsinga.htm adalah seperti di

bawah ini :

<html>

<body>

<h3>About Singapore...</h3>

<blockquote>Singapore is one of the countries in southeast asia<br>

The Smallest but the fastest economic's growth<br>

Because of strategic location <br>

so well known as The "Triangle Gold" country

</blockquote>

</body>

</html>

Jika file link.htm dibuka dengan browser maka tampilannya adalah seperti gambar 6.1

Dan apabila ‘Welcome to Singapore’ diklik, maka akan menampilkan gambar 6.2

Gambar 6.1 hasil eksekusi link.htm

Gambar 6.2 Hasil link

listing 6.2 Aboutsinga.htm


21

6.3 Link dalam Dokumen yang Sama

Link jenis ini dibuat untuk dokumen yang panjang sekali, sehingga apabila dalam

browser web maka kita perlu melakukan penggulungan layar (scroll) secara berulang-ulang.

Untuk mengatasi hal itu kita bisa membuat link antar bagian, dengan menandai setiap bagian

tersebut dengan nama tertentu. Biasanya link jenis ini dipakai sebagai daftar isi suatu

dokumen. Dimana dengan mengklik daftar isi maka kita dapat langsung menuju isi lengkap

dari dokumen tersebut. Format atau sintaks dari link ini adalah :

<a name = “namabagian” >

<a href = “#namabagian” >…teks informasi…. </a></a>

dimana tanda # menunjukkan bahwa link tersebut menuju pada dokumen yang sama. Berikut

ini akan diberikan contoh dokumen HTML tentang pemakaian link jenis ini (listing 6.3)

<html>

<body>

<p>

<a name="top">

<a href="#B3">

Lihat bab 3

</a>

</a>

</p>

<h3>Bab 1</h3>

<p>

Penjelasan tentang bab 1<br>




Penjelasan tentang bab 1

</p>

<h3>Bab 2</h3>

<p>






</p>

<a name="B3">

<h3>Bab 3</h3>

<p>






</p>

<a href ="#top"> Kembali ke Atas </a>

</body>

</html>

Hasil dari file link2.htm jika dibuka dengan browser Internet Explorer adalah seperti

diperlihatkan dalam gambar 6.3.

Listing 6.3 link2.htm

22

Dan jika ‘lihat bab 3’ di klik maka akan memperlihatkan isi dari Bab 3 seperti ditunjukkan

dalam gambar 6.4.

Dan jika ‘Kembali ke Atas’ diklik maka akan kembali menampilkan gambar 6.3.

6.4 Membuka Link dengan Window Baru (Open in New Window)

Untuk melakukan link kepada page lain dengan membukanya pada window baru

dalam HTML dapat kita lakukan dengan mengeset atribut target = ”_blank”. Dengan

demikian pengunjung tidak harus meninggalkan web site kita saat membuka web site lain.

Format perintahnya adalah :

<a href = “alamat_link” target= ”_blank” >

Gambar 6.3 hasil eksekusi file link2.htm

Gambar 6.4 hasil link

Klik di sini

Klik di sini

23

contoh pemakaian link seperti ini dapat dilihat dalam dokumen HTML berikut ini (listing

6.4). Sementara hasilnya jika dibuka dengan browser Internet Explorer adalah seperti


<html>

<body>

<p><a href ="aboutsinga.htm" target= "_blank">Welcome to Singapore </a></p>

<p><a href ="http://www.microsoft.com" target = "_blank">Welcome to Microsoft

</a></p>

</body>

</html>

Pada gambar 6.5 diperlihatkan setelah ”Welcome to Singapore” diklik maka akan membuka

link pada window baru. Sehingga akan tampak 2 buah window.

6.5 Mengirim e-mail dengan Mailto

Untuk mengirim email ke sebuah alamat email tertentu dalam HTML kita dapat

menggunakan atribut : mailto. Adapun contoh dokumen HTML yang menampilkan

pemakaian mailto diperlihatkan dalam listing 6.5.

<html>

<body>

kirim email ke :<a href ="mailto:[email protected]?subject = Tanya Hasil test HTML">

[email protected] </a>

</body>

</html>

Listing 6.4 Link3.htm

Gambar 6.5 Hasil eksekusi Link3.htm

Listing 6.5 Link_mailto.htm

24

Hasil dari listing 6.5 jika dibuka dengan browser Internet Explorer adalah ditunjukkan dalam

gambar 6.6.

Gambar 6.6 Hasil eksekusi link_mailto.htm

7.Image HTML Pemrograman Web

25

VII. Image HTML

Pada umumnya sebuah halaman web dilengkapi dengan gambar – gambar (image)

sehingga membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu web site

tersebut. Biasanya browser web juga dapat menampilkan gambar disertai dengan teks (inline

image). Adapun gambar-gambar yang ditampilkan adalah yang mempunyai format XBM (X

bitmap), GIF, JPEG, PNG, dan lain-lain. Konsekuensi dari disertakannya gambar dalam web

page adalah diperlukannya waktu tambahan saat download.

Untuk menampilkan gambar digunakan tag <img> disertai dengan atribut src.

Format atau sintax dari tag ini adalah :

<img src = “namaimage”>

dimana namaimage adalah alamat URL dari file image yang akan ditampilkan.

7.1 Pengaturan Tampilan gambar : Alignment

Untuk mengatur tampilan gambar di dalam halaman web kita dapat memakai atribut

Align. Ada 3 opsi dalam atribut align yaitu : bottom, middle, top, left, center, dan right.

Format atau sintax dari atribut ini adalah :

<img src = “namaimage” align =”bottom|middle|top|left|center|right”>

Berikut ini adalah contoh dokumen HTML yang menggunakan atribut align(listing 7.1),

sedangkan hasilnya diperlihatkan dalam gambar 7.1.

<!—Image : align -->

<html>

<head>

<title>Contoh Image : align </title>

</head>

<body>

<p>Bendera Amerika

<image src = "../gambar/usa.gif" align="bottom"> </p>

<p>Bendera Amerika

<image src = "../gambar/usa.gif" align="middle"> </p>

<p>Bendera Amerika

<image src = "../gambar/usa.gif" align="top"> </p>

</body>

Listing 7.1 image_align.htm


26

Contoh berikut memperlihatkan pemakaian align : left, right, dan center (listing 7.2) dan

hasilnya dapat dilihat dalam gambar 7.2.

<!—Image : align 2 -->

<html>

<head>


</head>

<body>

<p>

<image src = "../gambar/usa.gif" align="left">Bendera Amerika di kiri </p>

<p>bendera Amerika

<image src = "../gambar/usa.gif" align="center"> di tengah </p>

<p>

<image src = "../gambar/usa.gif" align="right"> Bendera Amerika di kanan</p>

</body>

</html>

Gambar 7.1 hasil eksekusi image_align.htm

Listing 7.2 image_align2.htm

Gambar 7.2 Hasil eksekusi image_align2.htm


27

7.2 Pengaturan Ukuran Gambar

Untuk mengatur ukuran gambar dalam halaman web kita dapat memakai atribut

Height dan Width. Format atau sintax dari atribut ini adalah :

<img src = “namaimage” width =”nilai” height =”nilai”>

Berikut ini adalah contoh dokumen HTML yang menggunakan atribut height dan width

(listing 7.3).

<!—Image : width-height -->

<html>

<head>


</head>

<body>

<p>Bendera Inggris

<image src = "../gambar/great-britain.gif" width = "30" height="20"> </p>

<p>Bendera Inggris


<p>Bendera Inggris


</body>

</html>

Hasil eksekusi dari listing 7.3 (image_wh.htm) diperlihatkan dalam gambar 7.3 di bawah ini.

Listing 7.3 image_wh.htm

Gambar 7.3 hasil eksekusi image_wh.htm


28

7.3 Teks sebagai Alternatif bagi Image

Beberapa browser tidak mampu menampilkan gambar. Dan ada beberapa user yang

me- non aktifkan kemampuan menampilkan gambar dari browser untuk mempercepat proses

download halaman web. HTML menyediakan atribut untuk menampilkan teks sebagai

alternatif bagi image yaitu atribut ALT. Teks akan ditampilkan secara mengambang untuk

memberi tahu maksud dari gambar, dan teks ini ini akan muncul jika kita meletakkan pointer

mouse diatas gambar. Format atau sintax dari atribut ini adalah :

<img src = “namaimage” alt=”teks”>

Berikut ini adalah contoh dokumen HTML yang menggunakan atribut ALT (listing 7.4)

sedangkan hasilnya dapat dilihat dalam gambar 7.4.

<!—Image : alt -->

<html>

<head>

<title>Contoh Image : alt </title>

</head>

<body>

<p>Welcome to

<image src = "../gambar/usa.gif" alt="This Our Flag"> United States of America </p>

</body>

</html>

7.4 Image sebagai Link

Dalam halaman web, gambar dapat kita pakai untuk melakukan link ke dokumen

HTML atau halaman web yang lain. Di samping itu pembuatan menu dalam halaman web

Gambar 7.4 hasil eksekusi image_alt.htm

Listing 7.4 image_alt.htm


29

akan tampak lebih menarik jika ditampilkan dengan gambar. Dimana dengan mengklik salah

satu item kita akan melakukan link ke halaman web atau dokumen HTML yang lain. Format

atau sintaks untuk melakukan link dengan gambar adalah :

<a href=”dokumen_html”><img src = “namaimage” >

Dokumen HTML berikut akan memberikan contoh tentang pemakaian link dengan gambar.

Buatlah dulu file aboutsinga.htm (listing 7.5) di bawah ini. Kemudian buat file

image_link.htm (listing 7.6). Selanjutnya buka file image_link.htm dengan browser IE maka

hasilnya adalah seperti gambar 7.5.

<html>

<head>

<title>Contoh Image : Link </title>

</head>

<body>

<h3>About Singapore...</h3>

<blockquote>Singapore is one of the countries in southeast asia<br>

The Smallest but the fastest economic's growth<br>

Because of strategic location <br>

so well known as The "Triangle Gold" country

</blockquote>

</body>

</html>

<!—Image : link -->

<html>

<head>

<title>Contoh Image : Link </title>

</head>

<body>

<p>Welcome to The "Triangle Gold" Singapore

<a href ="aboutsinga.htm"><image src = "../gambar/singapore.gif">

</a> </p>

</body>

</html>

Listing 7.5 Aboutsinga.htm

Listing 7.6 Image_link.htm


30

Jika pointer mouse diarahkan pada gambar bendera dan mengkliknya maka akan dihasilkan

gambar 7.6.

Gambar 7.5 Hasil eksekusi Image_link.htm

Klik di sini

Gambar 7.6 Hasil link

8.List dan Tabel Pemrograman Web

31

VIII. LIST dan TABEL

8.1 LIST

Pada umumnya untuk menguraikan sesuatu dari hal yang umum ke hal yang lebih

terperinci kita memakai list (daftar). Dalam HTML dikenal 3 jenis list yaitu :

List dengan nomer (ordered list)

List tanpa nomer (unordered list)

List definisi (definition list)

8.1.1 List dengan Nomer (Ordered List)

List dengan nomer adalah model list yang setiap itemnya diberi nomer. Untuk

membuat list dengan nomer dalam HTML kita menggukan tag <ol>. Adapun sintax dari tag

<ol> ini adalah :

<ol >

<li> item_list1</li>


<li> item_listn</li>

</ol>

Nomer item secara default memakai angka 1, 2, 3, …. Model angka dalam list dapat diubah

dengan mengubah atribut type dalam list seperti diperlihatkan dalam tabel di bawah ini.

Tipe Arti

I Ditampilkan dengan angka Romawi huruf besar

i Ditampilkan dengan angka Romawi huruf kecil

a Ditampilkan dengan abjad huruf kecil

A Ditampilkan dengan abjad huruf besar

Sedangkan untuk mengatur nomer awal yang digunakan pada list kita memakai atribut start.

Untuk lebih jelasnya berikut ini akan diberikan contoh pemakaian list beserta atributnya

seperti diperlihatkan dalam listing 8.1.(file list_ol.htm).

 <html> <body> <h3> list dengan nomer</h3> <ol> <li>Pisang </li> <li>Apel </li> <li>Mangga </li> <li>Jeruk </li> </ol> <h3> list dengan nomer : huruf besar</h3> <ol type ="A"> <li>Pisang </li> <li>Apel </li>


32

<li>Mangga </li> <li>Jeruk </li> </ol> <h3> list dengan nomer : huruf romawi besar</h3> <ol type ="I"> <li>Pisang </li> <li>Apel </li> <li>Mangga </li> <li>Jeruk </li> </ol> <h3> list dengan nomer : huruf romawi kecil</h3> <ol type ="i"> <li>Pisang </li> <li>Apel </li> <li>Mangga </li> <li>Jeruk </li> </ol> </body> </html>

Sedangkan hasil dari list_ol.htm jika dibuka dalam browser adalah seperti diperlihatkan

dalam gambar 8.1

8.1.2 List tanpa Nomer (Unordered List)

List tanpa nomer adalah model list yang setiap itemnya tanpa diberi nomer. List tanpa

nomer sering disebut bulleted list. Untuk membuat list tanpa nomer dalam HTML kita

menggukan tag <ul>. Adapun sintax dari tag <ul> ini adalah :

<ul >



<li> item_listn</li>

</ul>

Listing 8.1 List_ol.htm

Gambar 8.1 Hasil eksekusi list_ol.htm


33

Setiap item dalam list tanpa nomer diberi bullet. Model bullet dalam list dapat diubah

dengan mengubah atribut type dalam list seperti diperlihatkan dalam tabel di bawah ini.

Tipe Bentuk bullet

Disc noktah tanpa arsiran di dalamnya

Circle Lingkaran

Square Kotak tanpa arsiran

Untuk lebih jelasnya berikut ini akan diberikan contoh pemakaian list beserta atributnya

seperti diperlihatkan dalam listing 8.2.(file list_ul.htm).

 <html> <body> <h3> list : bullet lingkaran diarsir</h3> <ul type ="disc"> <li>Pisang </li> <li>Apel </li> <li>Mangga </li> <li>Jeruk </li> </ul> <h3> list : bullet lingkaran tanpa arsiran</h3> <ul type ="circle"> <li>Pisang </li> <li>Apel </li> <li>Mangga </li> <li>Jeruk </li> </ul> <h3> list : bullet kotak tanpa arsiran</h3> <ul type ="square"> <li>Pisang </li> <li>Apel </li> <li>Mangga </li> <li>Jeruk </li> </ul> </body> </html>

Listing 8.2 list_ul.htm

Gambar 8.2 Hasil eksekusi list_ul.htm


34

8.1.3 List Definisi (Definition List)

List tanpa nomer adalah model list yang memberikan uraian terhadap suatu item

dalam list tersebut. Untuk membuat list definisi dalam HTML kita menggukan tag <dl>.

Adapun sintax dari tag <dl> ini adalah :

<dl > <dt> item_list1</dt> --definisi term

<dd> item_list2</dd> --definisi description

</dl>

Di bawah ini diberikan contoh pemakaian list definisi (listing 8.3). Dan hasilnya dapat dilihat

dalam gambar 8.3.

 <html> <body> <h3> list definisi</h3> <dl> <dt>Pisang </dt> <dd>pisang Ambon</dd> <dd>pisang Raja</dd> <dd>pisang kepok</dd> <dt>Apel </dt> <dd>Apel Fuji </dd> <dd>Apel Manalagi</dd> <dd>Apel New Zeeland</dd> </dl> </body> </html>

Gambar 8.3 Hasil eksekusi list_dl.htm

Listing 8.3 list_dl.htm


35

8.2 TABEL

Untuk menyajikan data dalam bentuk baris dan kolom maka digunakan elemen tabel.

Di dalam HTML elemen-elemen yang diperlukan untuk membuat tabel adalah :

Elemen Penjelasan

<table>…</table> Mendefinisikan sebuah tabel dalam HTML

<caption>…</caption> Mendefinisikan tulisan untuk judul tabel

<tr>…</tr> Membuat sebuah baris baru pada tabel

<td>…</td> Mendefinisikan sebuah kolom pada tabel

<th>…</th> Mendefinisikan sel header tabel

Elemen atau tag <table> mempunyai atribut yaitu :

Atribut Penjelasan

Border Mengatur ketebatan garis tepi tabel

Cellpadding Mengatur spasi atau jarak antara sel dan bordernya

Cellspacing Mengatur jarak antar sel

Background Memberi background pada tabel

Elemen atau tag <td> dan <th> memiliki beberapa atribut yaitu :

Atribut Penjelasan

Align = left|center|right Mengatur posisi horisontal data

Valign = top|middle|bottom Mengatur posisi vertikal data

Colspan = n Mengatur n lebar kolom

Rowspan = n Mengatur n tinggi baris

Nowrap Menonaktifkan pinggiran (wrapping) sel

8.2.1 Border

Untuk mengatur ukuran ketebalan garis pinggir dari tabel digunakan atribut border.

Adapun format dari atribut border adalah :

<table border = “tebal_border” > …</table>

Berikut ini akan diberikan contoh dokumen HTML (listing 8.4) tentang pembuatan tabel

dengan mengatur atribut border. Hasilnya dapat dilihat dalam gambar 8.4

<html> <body>


36

<h4>Border Normal</h4> <table border = ”1”> <tr> <td>Kesatu</td> <td>barisnya</td> </tr> <tr> <td>Kesatu</td> <td>barisnya</td> </tr> </table> <h4>Border Tebal</h4> <table border = ”8”> <tr> <td>Kesatu</td> <td>barisnya</td> </tr> <tr> <td>Kesatu</td> <td>barisnya</td> </tr> </table> <h4>Border Sangat Tebal</h4> <table border = ”0”> <tr> <td>Kesatu</td> <td>barisnya</td> </tr> <tr> <td>Kesatu</td> <td>barisnya</td> </tr> </table> </body> </html>

Listing 8.4 tabel_border.htm


37

8.2.2 Cellpadding

Untuk membuat spasi antara sel dan bordernya dipakai atribut Cellpadding. Adapun

format dari atribut ini adalah :

<table border = “tebal_border” cellpadding = “nilai”> …</table>

Berikut ini contoh dokumen HTML (listing 8.5) tentang pemakaian atribut cellpadding.

Hasilnya dapat dilihat dalam gambar 8.5.

<html> <body> <h4>Tanpa Cellpadding</h4> <table border = "1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>second</td> <td>Row</td> </tr> </table> <h4>Dengan Cellpadding</h4> <table border = "1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>second</td> <td>Row</td> </tr> </table> </body> </html>

Gambar 8.4 Hasil dari tabel_border.htm

Listing 8.5 Tabel_cellpad.htm


38

8.2.3 Cellspacing

Untuk membuat spasi atau jarak antara sel atribut Cellspacing. Adapun format dari

atribut ini adalah :

<table border = “tebal_border” cellspacing = “nilai”> …</table>

Berikut ini contoh dokumen HTML (listing 8.6) tentang pemakaian atribut cellspacing.


<html> <body> <h4>Tanpa Cellspacing</h4> <table border = "1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>second</td> <td>Row</td> </tr> </table> <h4>Dengan Cellspacing</h4> <table border = "1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>second</td> <td>Row</td> </tr> </table> </body> </html>

Gambar 8.5 Hasil dari tabel_cellpad.htm

Listing 8.6 Tabel_cellspacing.htm


39

8.2.4 Caption

Untuk menampilkan judul atau nama tabel digunakan tag Caption. Adapun format

dari tag caption adalah :

<table border = “tebal_border” >

<caption > Judul atau Nama tabel </caption>

</table>

Di bawah ini contoh dokumen HTML (listing 8.7) tentang pemakaian tag caption. Hasilnya

dapat dilihat dalam gambar 8.7.

<html> <body> <h4>Tabel dengan Caption</h4> <table border = "1"> <caption> My Caption</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>

Gambar 8.6 Hasil dari tabel_cellspacing.htm


40

8.2.5 Header

Berfungsi untuk menampilkan Header tabel atau judul tiap kolom tag <th>. Adapun

format dari Header adalah :


<tr>

<th>teks judul kolom-1</th>

<th>teks judul kolom-2</th>

<th>teks judul kolom-n</th>

</tr>

</table>

Di bawah ini contoh dokumen HTML (listing 8.8) tentang pemakaian tag <th>. Hasilnya


<html> <body> <h4>Tabel Header</h4> <table border = "1"> <tr> <th>Nama</td> <th>Telepon</td> </tr> <tr> <td>Budi Sanjaya</td> <td>0361-255521</td> </tr> </table>

<h4>Vertical Header</h4> <table border = "1"> <tr> <th>Nama</td> <td>Budi Sanjaya</td> </tr> <tr> <th>Telepon</td> <td>0361-255521</td> </tr> </table> </body> </html>

Listing 8.7 Tabel_caption.htm

Gambar 8.7 Hasil dari tabel_caption.htm

Listing 8.8 Tabel_header.htm


8.2.6 Pengaturan Lebar kolom (Colspan) dan Tinggi baris (rowspan)

Colspan dan rowspan merupakan atribut yang dipakai pada tag <th>. Atribut colspan

berfungsi untuk mengatur lebar kolom, sedangkan atribut rowspan dipakai untuk mengatur

tinggi baris. Adapun formatnya adalah :


<tr>

<th colspan=”lebar_kolom”>teks judul kolom</th>

</tr>

<tr>

<th rowspan=”tinggi_baris”>teks judul kolom</th>

</tr>

</table>



<html>

<body>

<h4>Lebar kolom : Colspan</h4>

<table border = "1">

<tr>

<th>Nama</td>

<th colspan = "2">Telepon</td>

</tr>

<tr>

<td>Budi Sanjaya</td>

<td>0361-255521</td>

<td>0361-255532</td>

</tr>

</table>

<h4>Tinggi Baris : rowspan</h4>


<tr>

<th>Nama</td>


</tr>

<tr>

<th rowspan="2">Telepon</td>

<td>0361-255521</td>

</tr>

Gambar 8.8 Hasil dari tabel_header.htm


<tr>

<td>0361-255532</td>

</tr>

</table>

</body>

</html>

8.2.7 Sel Kosong (empty cell)

Di dalam tabel sering kita jumpai sebuah sel sengaja dikosongkan. Adapun formatnya

adalah :

<table >

<tr>

<td></td>

</tr>

</table>



<html>

<body>

<h4>Sel kosong</h4>


<tr>


<td>0361-255521</td>

</tr>

<tr>

<td></td>

<td>0361-255532</td>

</tr>

</table>

</body>

</html>

Listing 8.9 Tabel_col_row.htm

Gambar 8.9 Hasil dari tabel_col_row.htm


8.2.8 Background Tabel

Untuk menampilkan background atau latar belakang pada tabel maka kita dapat

menggunakan atribut background. Adapun latar belakang yang dipakai adalah file gambar

(image). Adapun formatnya adalah :

<table border = “tebal_border” background =”nama_file_background”>

…teks informasi…

</table>

Di bawah ini contoh dokumen HTML (listing 8.11) tentang pemakaian atribut background.


<html>

<body>

<h4>BackGround Image</h4>

<table border = "1" background ="../gambar/bgsearch.gif">

<tr>


<td>0361-255521</td>

</tr>

<tr>

<td></td>

<td>0361-255532</td>

</tr>

</table>

</body>

</html>

Listing 8.10 Tabel_empty_cell.htm

Gambar 8.10 Hasil dari tabel_empty_cell.htm


8.2.9 Pengaturan Teks dalam Sel Tabel (Alignment)

Untuk mengatur tampilan teks dalam sel tabel maka kita dapat menggunakan atribut

Align pada tag <td>. Ada 3 jenis align yaitu : left, right, center. Formatnya adalah :

<table >

<td align = “left|center|right”> …teks informasi…</td>

</table>

Di bawah ini contoh dokumen HTML (listing 8.12) tentang pemakaian atribut align.

Hasilnya dapat dilihat dalam gambar 8.12. <html>

<body>

<table width = "400" border = "1">

<tr>

<th align = "left">Nomer</td>

<th align = "right">Nama </td>

<th align = "right">Alamat </td>

</tr>

<tr>

<td align = "left">1</td>

<td align = "right">Agus Sanjaya </td>

<td align = "right">Jln.Serpong damai 11 </td>

</tr>

<tr>


<td align = "right">Budi Hartono </td>

<td align = "right">Jln. M.T. Haryono 2 </td>

</tr>

<tr>


<td align = "right">Candra Hidayat </td>

<td align = "right">Jln. Pahlawan 15 </td>

Listing 8.11 Tabel_background.htm

Gambar 8.11 Hasil dari tabel_background.htm


</tr>

</table>

</body>

</html>

8.2.10 Atribut Frame

Untuk mengatur tipe frame dari border tabel maka kita bisa menggunakan atribut

frame. Formatnya adalah :

<table frame =”tipe_frame”>

</table>

Ada beberapa jenis tipe frame seperti diperlihatkan dalam tabel di bawah ini :

Tipe Frame Penjelasan

Border Frame seluruh sisi sel

Box Frame seluruh sisi sel

void Tanpa frame

Above Frame hanya di sisi atas sel

Below Frame hanya di sisi bawah sel

Hsides (horizontal sides) Frame di seluruh sisi horizontal sel

Vsides (vertical sides) Frame di seluruh sisi vertikal sel

Lhs (left horizontal side) Frame hanya di sisi kiri sel

Rhs (right horizontal side) Frame hanya di sisi kanan sel

Di bawah ini contoh dokumen HTML (listing 8.13) tentang pemakaian atribut frame.


<html>

<body>

<h4>frame : border</h4>

<table frame = "border">

Gambar 8.12 Hasil dari tabel_align.htm

Listing 8.12 Tabel_align.htm


27

<tr>

<td>baris</td>

<td>pertama</td>

</tr>

<tr>

<td>baris</td>

<td>kedua</td>

</tr>

</table>

<h4>frame : box</h4>

<table frame = "box">

<tr>

<td>baris</td>

<td>pertama</td>

</tr>

<tr>

<td>baris</td>

<td>kedua</td>

</tr>

</table>

<h4>frame : void</h4>

<table frame = "void">

<tr>

<td>baris</td>

<td>pertama</td>

</tr>

<tr>

<td>baris</td>

<td>kedua</td>

</tr>

</table>

<h4>frame : above</h4>

<table frame = "above">

<tr>

<td>baris</td>

<td>pertama</td>

</tr>

<tr>

<td>baris</td>

<td>kedua</td>

</tr>

</table>

<h4>frame : below</h4>

<table frame = "below">

<tr>

<td>baris</td>

<td>pertama</td>

</tr>

<tr>

<td>baris</td>

<td>kedua</td>

</tr>

</table>

<h4>frame : horizontal sides</h4>

<table frame = "hsides">

<tr>

<td>baris</td>

<td>pertama</td>

</tr>

<tr>

<td>baris</td>

<td>kedua</td>

</tr>

</table>

<h4>frame : vertical sides</h4>

<table frame = "vsides">

<tr>

<td>baris</td>

<td>pertama</td>

</tr>

<tr>

<td>baris</td>

<td>kedua</td>

</tr>

</table>

<h4>frame : left horizontal</h4>

<table frame = "lhs">

<tr>

<td>baris</td>

<td>pertama</td>

</tr>

<tr>

<td>baris</td>

<td>kedua</td>

</tr>

</table>

<h4>frame : right horizontal</h4>

<table frame = "rhs">

<tr>

<td>baris</td>

<td>pertama</td>

</tr>

<tr>

<td>baris</td>

<td>kedua</td>

</tr>

</table>

</body>

</html>

Listing 8.13 Tabel_frame.htm


Latihan :

1.Buatlah dokumen HTML untuk menampilkan sistem Kalender seperti gambar 8.14 di

bawah ini. Jika salah satu nama bulan : Januari, Februari,….,Desember, diklik maka akan

menampilkan tanggal pada bulan yang bersangkutan. Pada gambar tampak bulan Oktober,

Dan pada bulan Oktober tersebut terdapat beberapa tanggal penting. Dimana apabila

tanggal penting tersebut (misal : tanggal 31) dipilih akan menampilkan keterangan

peristiwa atau catatan pada tanggal tersebut (seperti gambar 8.15).

Gambar 8.13 Hasil dari tabel_frame.htm


Gambar 8.14 Sistem Kalender

Gambar 8.15 Tampilan tanggal 31 Oktober

9.Frame Pemrograman Web

49

IX. FRAME

Untuk menampilkan beberapa halaman web dalam satu browser kita dapat memakai

elemen frame. Window dalam browser akan dibagi menjadi beberapa sub windows. Model

ini biasanya dipakai untuk menampilkan detil informasi tanpa menghilangkan tampilan menu

utama. Adapun sintax dari frame adalah :

<frameset border = # {[rows|cols]={#,[#,…]]>

<Frame src = “url” name = “namaframe”>

</frameset>

9.1 Frame Kolom

Dalam frame kolom maka windows browser akan dibagi menjadi beberapa frame

kolom. Berikut ini adalah contoh dokumen HTML tentang frame kolom (listing 9.1).

<html> <frameset cols="25%,50%,25%"> <frame src="sun.htm"> <frame src="venus.htm"> <frame src="mercur.htm"> </frameset> </html>

Sementara itu masing-masing frame akan mengacu pada file HTML yang lain yaitu :

sun.htm., venus.htm, dan mercur.htm. Untuk itu kita perlu membuat file-file tersebut terlebih

dahulu.

<html> <body> <p> Selamat datang di matahari <br>Semoga matahari ini menyejukkan </p> <hr> Kembali ke <a href="coba_imagempap.html">tata surya</a> </body> </html> <html> <body> <p> Selamat datang di Planet Venus <br>Ini sepertinya Dewi Venus </p> <hr> Kembali ke <a href="coba_imagempap.html">tata surya</a> </body> </html>

Listing 9.1 Frame_kolom.htm

Listing 9.2 sun.htm

Listing 9.3 venus.htm


50

<html> <body> <p> Selamat datang di Planet Merkurius <br>Terasa Planet ini terbesar setelah matahari </p> <hr> Kembali ke <a href="coba_imagempap.html">tata surya</a> </body> </html>

Hasil dari listing 9.1 diperlihatkan dalam gambar 9.1 di bawah ini.

9.2 Frame Baris

Dalam frame baris maka windows browser akan dibagi menjadi beberapa frame

baris. Berikut ini adalah contoh dokumen HTML tentang frame baris (listing 9.2).

<html> <frameset rows="25%,50%,25%"> <frame src="sun.htm"> <frame src="venus.htm"> <frame src="mercur.htm"> </frameset> </html>

Hasil dari listing 9.5 ditunjukkan dalam gambar 9.2 berikut ini.

Gambar 9.1 Hasil eksekusi frame_kolom.htm

Listing 9.4 mercur.htm

Listing 9.5 Frame_baris.htm


51

9.3 Frame Navigasi

Dalam frame navigasi maka windows browser akan dibagi menjadi beberapa frame.

Frame pertama disebut sebagai frame navigasi yang berisi daftar link dan frame kedua

sebagai frame target. Berikut ini adalah contoh dokumen HTML tentang frame navigasi

(listing 9.6).

<html> <frameset cols="180,*" frameborder="1"> <frame src="tata_surya.htm"> <frame src="sun.htm" name="frame2"> </frameset> </html>

Frame pertama (navigasi) mengacu pada file HTML yaitu : tata_surya.htm dan frame

kedua (target) mengacu pada file : sun.htm. Dimana listing tata_surya.htm diperlihatkan

dalam listing 9.7 berikut ini :

<html> <body> <p> Selamat datang Tata Surya <br> </p> <hr> <a href="sun.htm" target="frame2">matahari</a><br> <a href="venus.htm" target="frame2">Venus</a> <br> <a href="mercur.htm" target="frame2">merkurius</a> </body> </html>

Gambar 9.2 Hasil eksekusi dari frame_baris.htm

Listing 9.6 Frame_navigasi.htm

Listing 9.7 tata_surya.htm


52

Hasil eksekusi dari listing 9.6 (frame_navigasi.htm) ditunjukkan dalam gambar 9.3 di bawah

ini.

Dalam gambar 9.3 tampak ada 3 link yaitu : matahari, venus, dan merkurius. Jika salah satu

dipilih (di-klik) maka akan menampilkan link yang bersesuaian pada frame target. Misalnya

jika venus di-klik maka akan menampilkan file venus.htm pada frame target (gambar 9.4).

Latihan :

1.Buatlah dokumen HTML untuk menampilkan sistem Kalender tahun 2007 dengan

menggunakan frame navigasi seperti diperlihatkan gambar 9.5 di bawah ini. Jika salah satu

nama bulan : Januari, Februari,….,Desember, diklik maka akan menampilkan tanggal pada

bulan yang bersangkutan pada frame target. Pada gambar tampak bulan Oktober 2007.

Gambar 9.3 Hasil eksekusi frame_navigasi.htm

Gambar 9.4 Hasil link venus.htm

Frame navigasi Frame target


53

10.Form Pemrograman Web

54

X. FORM

Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan atau

input dari pengguna web. Adapun sintax dari form adalah :

<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>

</FORM>

atribut ACTION : menyatakan alamat url (url address) yang akan dipakai sebagai

pemroses data input form.URL adalah lokasi dokumen yang akan

melakukan proses terhadap input dari form.

Atribut METHOD : untuk menyatakan bagaimana masukan atau input yang berasal dari

form dikirimkan ke program aplikasi CGI ( program aplikasi yang dapat

dijalankan oleh server web).

Dalam form terdapat beberapa tipe masukan antara lain :

Text

Radio button

Check box

Button

Text area , dll

Tiap-tiap jenis input atau masukan dinyatakan dengan atribut type dalam HTML.

10.1 Input T e x t

Digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai

yang dimasukkan dapat berupa angka maupun teks. Adapun format atau sintax dari input

text adalah :


<input type =”text” name = “nama_var” size = “panjang_text”>

</FORM>

atribut name : untuk membuat nama variabel sebagai tempat menyimpan teks

atribut size : untuk menyatakan panjang teks

Berikut ini adalah contoh dokumen HTML tentang form dengan input text (listing

10.1). Hasilnya dapat dilihat dalam gambar 10.1

 <html> <body> <form> Nama : <input type="text" name ="nama" size="10"> <br> Alamat : <input type="text" name ="alm" size="30">

55

</form> </body>

</html>

10.2 Input C h e c k b o x

Digunakan untuk memasukkan suatu nilai lewat beberapa pilihan. Kita bisa memilih

satu atau lebih pilihan yang disediakan. Adapun format atau sintax dari input check box

adalah :


<input type =”checkbox” name = “nama_var-1” [checked]>nama_pilihan-1

<input type =”checkbox” name = “nama_var-2” [checked]>nama_pilihan-2

<input type =”checkbox” name = “nama_var-n” [checked]>nama_pilihan-n

</FORM>

atribut name : untuk membuat nama variabel sebagai tempat menyimpan pilihan

atribut checked : bersifat optional, jika kita menuliskan atribut ini maka kita memilih

variabel tersebut

Berikut ini adalah contoh dokumen HTML tentang form dengan input check box

(listing 10.2). Hasilnya dapat dilihat dalam gambar 10.2

 <html> <body> HOBI <form> <input type="checkbox" name ="T" checked>Tenis <br> <input type="checkbox" name ="J">Jogging <br> <input type="checkbox" name ="R">Renang <br> <input type="checkbox" name ="B">Basket</form> </body> </html>

Listing 10.1 Form_text.htm

Gambar 10.1 Hasil eksekusi Form_text.htm

Listing 10.2 Form_cbox.htm


56

10.3 Input R a d i o b u t t o n

Hampir sama dengan check box, radio button (tombol radio) digunakan untuk

memasukkan suatu nilai lewat beberapa pilihan. Kita hanya bisa memilih satu pilihan dari

beberapa pilihan. Adapun format atau sintax dari input radio button adalah :


<input type =”radio” name = “nama_var” [checked]>nama_pilihan-1

<input type =”radio” name = “nama_var” [checked]>nama_pilihan-2

<input type =”radio” name = “nama_var” [checked]>nama_pilihan-n

</FORM>

atribut name : untuk membuat nama variabel sebagai tempat menyimpan pilihan

atribut checked : bersifat optional, jika kita menuliskan atribut ini maka kita memilih

variabel tersebut

Berikut ini adalah contoh dokumen HTML tentang form dengan input radio button


 <html> <body> AGAMA <form> <input type="radio" name ="agm" checked>Hindu <br> <input type="radio" name ="agm" >Islam <br> <input type="radio" name ="agm" >Kristen <br> <input type="radio" name ="agm" >Budha </form> </body> </html>

Gambar 10.2 Hasil eksekusi Form_cbox.htm

Listing 10.3 Form_radio.htm

57

10.4 Input B u t t o n

Digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form. Ada 2

macam tipe button yaitu : Submit dan Reset. Tombol Submit dipakai untuk memanggil url

setelah input selesai dimasukkan. Sedangkan tombol Reset digunakan untuk menginisialisasi

setiap elemen pada form.Adapun format atau sintax dari input button submit dan reset

adalah :


<input type =”submit” value = “teks” >

<input type =”reset” value = “teks” >

</FORM>

atribut value : untuk menampilkan teks sebagai nama tombol

teks : teks judul dari tombol

Berikut ini adalah contoh dokumen HTML tentang form dengan input button submit

dan reset (listing 10.4). Hasilnya dapat dilihat dalam gambar 10.4

 <html> <body> <form action="form_action.asp" method = "get"> Masukkan nama : <input type="text" name ="nama"> <br> Masukkan alamat : <input type="tex" name ="alm"> <br> <input type="submit" value ="kirim"> <input type="reset" value ="reset"> </form> </body> </html>

Gambar 10.3 Hasil eksekusi Form_radio.htm

Listing 10.4 Form_button.htm


58

10.5 Input D r o p d o w n b o x

Digunakan untuk memasukkan suatu nilai lewat beberapa pilihan.Adapun format atau

sintax dari input Dropdown box adalah :


<select name = “nama_var” >

<option value = “nama_option-1” [selected]>option-1

<option value = “nama_option-2” [selected]>option-2

…

<option value = “nama_option-n” [selected]>option-n

</select>

</FORM>

Berikut ini adalah contoh dokumen HTML tentang form dengan input dropdown box


 <html> <body> Merek mobil yang anda suka : <form > <select name ="cars"> <option value ="volvo">Volvo <option value ="toyota">toyota <option value ="fiat" selected>fiat <option value ="audi">audi </select> </form> </body> </html>

Gambar 10.4 Hasil eksekusi Form_button.htm

Listing 10.5 Form_dropdown.htm

59

10.6 Input t e x t a r e a

Digunakan untuk memasukkan suatu data berupa teks atau memo.Adapun format

atau sintax dari input text area adalah :


<textarea rows = “nilai” cols = “nilai” >

…teks_informasi…

</textarea>

</FORM>

Berikut ini adalah contoh dokumen HTML tentang form dengan input text area

(listing 10.6). Hasilnya dapat dilihat dalam gambar 10.6.

 <html> <body> Keterangan <form> <textarea rows="5" cols="50"> Pendidikan terakhir S2 Program Magister Ilmu komputer di Universitas Gadjah Mada Jogyakarta </textarea> </form> </body> </html>

Gambar 10.5 Hasil eksekusi Form_dropdown.htm

Listing 10.6 Form_textarea.htm


60

10.7 Input I m a g e

Digunakan untuk mengganti tombol (button), berupa tombol yang berbentuk

gambar.Adapun format atau sintax dari input image adalah :


<input type = “image” src=”url_address”>

</FORM>

s r c : alamat url dari file gambar yang akan dipakai.

Berikut ini adalah contoh dokumen HTML tentang form dengan input image (listing

10.7). Hasilnya dapat dilihat dalam gambar 10.7.

 <html> <body> <form action="form_action.asp" method = "get"> Masukkan nama : <input type="text" name ="nama"> <br> Masukkan alamat : <input type="text" name ="alm"> <br> <input type="image" src="../gambar/usa.gif"> </form> </body> </html>

Gambar 10.6 Hasil eksekusi Form_textarea.htm

Listing 10.7 Form_image.htm

61

Gambar 10.7 Hasil eksekusi Form_image.htm

11.CSS (Cascade Style Sheet) Pemrograman Web

62

XI. CSS (Cascade Style Sheet)

CSS merupakan fitur (feature) baru dari HTML. Hal ini diperlukan setelah melihat

perkembangan dari HTML menjadi kurang praktis karena Web Pages terlalu banyak

dibebani oleh hal-hal yang berhubungan dengan faktor tampilan (style) seperti font, color,

background, dan lain-lain. Untuk itu akan lebih efisien jika pengaturan tampilan/style

tersebut dikelola secara terpisah.

11.1 Aturan Penggunaan CSS

Secara umum CSS disusun oleh 3 bagian yaitu :

Selector , yaitu elemen (tag) yang akan didefinisikan

Property, yaitu atribut yang akan diubah

Value, yaitu nilai yang akan diberikan pada atribut

Adapun format atau sintax dari penulisan CSS adalah

SELECTOR {PROPERTY : VALUE}

Contoh : Body { color : black}

Jika nilai terdiri dari beberapa kata, maka gunakan tanda petik ganda.

Contoh : P { font-family : ”sans serif”}

Jika lebih dari satu property pisahkan dengan titik koma (semi colon).

Contoh : P { text-align : center; color : red}

Jika ingin lebih mudah dibaca maka dapat ditulis seperti berikut :

Contoh : P

{

text-align : center

color:black

font-family : arial

}

atau jika selector dikelompokkan seperti contoh berikut ini :

Contoh : H1, H2, H3, H4, H5, H6

{

Color:green

}

Jika menggunakan atribut class (dalam definisi CSS).

Contoh : P.kanan {text-align : right}

P.kiri {text-align : left}

Berikut ini adalah contoh sintax HTML menggunakan definisi diatas : <P class=”kanan”> Paragraf ini akan dicetak rata kanan</p>

<P class=”kiri”> Paragraf ini akan dicetak rata kiri</p>

Jika menggunakan ID atribut.


63

Contoh : #kanan {text-align : right}

Berikut ini adalah contoh sintax HTML menggunakan definisi diatas :

<p id=”kanan”> Paragraf ini akan dicetak rata kanan</p>

<h3 id=”kanan”> Header ini juga akan dicetak rata kanan</h3>

11.2 Style Sheet External

CSS external adalah file HTML yang didefinisikan secara terpisah menjadi sebuah

file. Adapun extensi dari file ini adalah “.css”. Berikut ini adalah contoh pemakaian style

sheet eksternal dengan nama : ex1.css. File ini akan dipakai untuk mengatur tampilan/style

dari file HTML yang bernama : coba_cssex1.htm.

Body {background-color : yellow}

h1{font-size : 36 pt}

h2{color : blue}

P{margin-left :50 px}

<!—coba_cssex1.htm--> <html> <head> <link rel =”stylesheet” type=”text/css” href=”ex1.css”> </head> <body> <h1> This header is 36 pt </h1> <h2> This header is Blue </h1> <p> this paragraph has a left margin of 50 pixels</p> </body>

</html>

Hasilnya dapat dilihat dalam gambar 11.1 berikut ini :

Listing 11.2 coba_cssex1.htm

Listing 11.1 ex1.css

Gambar 11.1 Hasil eksekusi coba_cssex1.htm


64

Listing 11.3 di bawah ini adalah contoh lain dari CSS. Sedangkan listing 11.4 adalah file

HTML yang menggunakan file CSS tersebut.

Body {background-color : tan} h1{color : marron;font-size : 36 pt} h2{color : navy} P{font-size: 11 pt;margin-left :15 px} a:link{color:green} a:visited{color:yellow} a:active{color:blue} a:hover{color:black}

 <html> <head> <link rel="stylesheet" type="text/css" href="ex2.css"> </head> <body> <h1>ini adalah head 1 </h1> <h2>head 2 warna biru </h2> <p>Paragraf ini punya left margin 15 pixels dan font size 11 pt</p> <p><a href="http://www.microsoft.com" target="_blank"> ini adalah link</a></p> </body>

</html>

Hasil eksekusi dari listing 11.4 diperlihatkan dalam gambar 11.2.

Listing 11.4 coba_cssex2.htm

Listing 11.3 ex2.css

Gambar 11.2 hasil eksekusi coba_cssex2.htm


65

11.3 Style Sheet Internal

CSS internal didefinisikan secara langsung di dalam file HTML. Berikut ini adalah

contoh pemakaian style sheet yang didefinisikan secara internal .

 <html> <head> <style type="text/css"> body{background-image: url("../gambar/bground.gif")} hr{color:sienna} p{font-size: 11 pt; margin-left: 15 px} </style> </head> <body> <p>Paragraf ini punya left margin 15 pixels dan font size 11 pt</p> <hr> </body> </html>

Hasilnya dapat dilihat dalam gambar 11.3 berikut ini :

Gambar 11.3 Hasil eksekusi coba_cssin1.htm

Listing 11.5 coba_cssin1.htm

12.HTML Dinamik Pemrograman Web

66

XIII. HTML DINAMIK

Selama ini pada bab-bab sebelumnya kita sudah membahas bagaimana merancang

Web yang sifatnya statik. Yang mana banyak berhubungan dengan masalah desain, layout,

dan seni. Jika ingin mengubah atau memperbaiki desain dan layout web site tersebut maka

akan dilakukan secara manual. Permasalahannya adalah bagaimana meng-update dan

memperbaiki data yang ada di dalam web site tersebut. Dalam hal inilah kita perlu

melakukan pemrograman halaman web sehingga bersifat dinamik. Dalam pemrograman web

dinamik ini kita bisa mengelola data seperti : menambah, mengubah, maupun menghapus.

Sehingga informasi yang disajikan dalam halaman web selalu uptodate (terbaru)

Ada banyak software pendukung untuk merancang web yang bersifat dinamik

misalnya : ASP, PHP, Java Script, VB script, dan lain-lain. Dalam bab ini kita akan

membahas yaitu : PHP.

Dalam PHP data-data akan disimpan di dalam database server seperti : MySQL.

Selanjutnya dengan PHP kita akan membuat sebuah program untuk mengakses database

dalam server tersebut. Program tersebut sering disebut dengan script . Script tersebut

kemudian dapat kita panggil dari program atau file HTML.

Dalam file HTML elemen yang dapat kita gunakan untuk memasukkan input dari

user adalah elemen Form . Data masukan ini akan dikirim ke server saat melakukan request.

Dan saat server menerima request, maka request tersebut bukanlah suatu file HTML tetapi

suatu aplikasi yang harus dijalankan (script PHP), yang bisa menerima data-data masukan

yang disertakan dalam request sebagai parameter dari aplikasi (script PHP) yang harus

dijalankan tadi. Adapun langkah-langkah pembuatan Web dinamik dengan PHP adalah

seperti berikut ini.

13.1 Instalasi software PHP

Untuk meng-install PHP maka diperlukan program XAMPP. Disini kita akan

memakai xampp versi 1.8. Pertam kiat klik file : xampp-win32-1.8.1-VC9-instal ler

Setelah itu ikuti langkah-langkah selanjutnya selama proses instalasi. Setelah proses instalasi

selesai maka anda tidak saja menginstall PHP tetapi juga secara langsung sudah menginstall

APACHE sebagai web servernya dan MySQL sebagai database servernya.

13.2 Membuat database dan tabel dengan MySQL

Untuk membuat database dengan PHP maka langkah-langkahnya adalah :

1.Jalankan web server Apache dengan jalan : Klik Start>All Program>PHPTriad>Apache

Console>Start Apache


67

2.Jalankan salah satu browser web misalnya : mozilla firefox, setelah itu pada bagian

address ketikkan alamat : http://localhost/phpmyadmin, maka akan muncul tampilan

seperti gambar 13.1

3.Pada text box create new database ketikkan : karyawan. Kemudian klik tombol Create.

Berarti anda sudah membuat database baru dengan nama : karyawan. Setelah itu akan

muncul tampilan seperti gambar 13.2

Gambar 13.1

Gambar 13.2


68

4.Pada text box Create Table on database karyawan ketiklah pada

name : karyawan.

Fields : 3

Kemudian klik Go. Berarti kita sudah membuat tabel karyawan dengan jumlah field 3

buah. Selanjutnya akan muncul tampilan seperti gambar 13.3

5.Pada kolom -kolom ketikkan :

Field Type Length/values Primary

Nik Varchar 4

Nama Varchar 30

Alamat Varchar 50

Berarti kita sudah membuat 3 field yaitu : nik, nama, alamat. Dimana field nik sebagai

primary key

Setelah itu klik tombol : Save

Dengan demikian dari 5 langkah tersebut diatas maka kita sudah membuat database yang

bernama karyawan dan tabel yang bernama karyawan.

13.3 Membuat Form untuk memasukkan data ke dalam tabel Karyawan

Untuk mengisi tabel karyawan dalam database karyawan kita perlu membuat form.

Adapun rancangan form yang ingin kita buat adalah seperti gambar 13.4.

Gambar 13.3


69

untuk membuat form seperti itu maka kita harus membuat sebuah file HTML seperti listing

13.1 berikut ini :



<html>

<head>

<title> Form entry pegawai</title>

</head>

<body>

<h1>Form Entry Data Pegawai</h1>

<form action="http:\\localhost\isi_pegawai.php" method="post">

<table>

<tr>

<td>NIK</td>

<td><input type="text" name="nik" size="10" maxlength="4"</td>

</tr>

<tr>

<td>Nama</td>

<td><input type="text" name="nama" size="20" maxlength="30"</td>

</tr>

<tr>

<td>Alamat</td>

<td><input type="text" name="alamat" size="50" maxlength="50"</td>

</tr>

<tr>

<td colspan><input type="submit" value="simpan"</td>

</tr>

</table>

</form>

</body>

</html>

Gambar 13.4 Rancangan Form

Listing 13.1. forminputpegawai.htm


70

Ingat, simpanlah file forminputpegawai.htm tersebut di directori : c:\apache\htdocs

Dari listing 13.1 (forminputpegawai.htm) dapat dilihat bahwa ketika tombol simpan

ditekan maka akan memanggil program/script PHP dengan nama : isi_pegawai.php.

Untuk itu terlebih dahulu kita perlu membuat file isi_pegawai.php tersebut. Untuk itu

buatlah file tersebut pada editor notepad. Dimana isi dari file tersebut adalah seperti listing

13.2 di bawah ini.

<?php

$host="localhost";

$userdb="root";

$passdb="";

$namadb="karyawan";

$sambung=mysql_connect($host,$userdb,$passdb);

mysql_select_db($namadb,$sambung);

$nik1=$_POST[nik];

$nama1=$_POST[nama];

$alamat1=$_POST[alamat];

$sql="insert into karyawan (

nik ,nama,alamat

) values('$nik1','$nama1','$alamat1')";

$hasil=mysql_query($sql);

if ($hasil)

{

echo "tabel berhasil diisi";

}

else

{

echo "tabel gagal diisi";

}

?>

Ingat! Simpan file : isi_pegawai.php di directori : c:\apache\htdocs

Jalankan listing 13.1 (forminputpegawai.htm) dalam browser Internet Explorer maka akan

muncul tampilan seperti gambar 13.5. Pada text box isikan data – data berikut ini :

Nik : 0001

Nama : Budi Darmanto

Alamat : Jln Pecenongan 11

Kemudian klik tombol Simpan. Jika data-data tersebut berhasil disimpan maka akan

muncul pesan : ”Tabel berhasil diisi”. Maka data-data tersebut akan disimpan dalam tabel

karyawan.

Listing 13.2. isi_pegawai.php


71

Untuk melihat hasil penyimpanan data tersebut dalam tabel karyawan caranya adalah :

1.Dalam Internet Explorer bukalah database karyawan dengan cara mengetikkan

http://localhost/phpmyadmin pada bagian address kemudian klik Go. Sehingga akan

muncul tampilan seperti gambar 13.6.

2.Klik database karyawan (lihat gambar 13.6), maka akan muncul tampilan seperti


Gambar 13.5 Hasil eksekusi forminputpegawai.htm

Gambar 13.6 Buka database

Klik database

karyawan


72

2.Klik browse (lihat gambar 13.7) maka akan muncul tampilan isi record dari tabel

karyawan seperti diperlihatkan dalam tabel 13.8

Dapat dilihat dalam gambar 13.8 bahwa tabel karyawan telah berisi 1 record.

13.4 Membuat Form untuk mengedit data dalam tabel Karyawan

Untuk mengedit atau mengubah data dalam tabel karyawan maka kita perlu membuat

sebuah form. Adapun rancangan form adalah seperti gambar 13.9.

Gambar 13.7 Lihat isi tabel karyawan

Klik browse

Gambar 13.8 Isi record tabel karyawan


73

Adapun file HTML untuk menghasilkan rancangan form tersebut adalah seperti

diperlihatkan dalam listing 13.3 di bawah ini.



<html>

<head>

<title> Form edit pegawai</title>

</head>

<body>

<h1>Form Edit Data Pegawai</h1>

<form action="http:\\localhost\edit_pegawai.php" method="post">

<table>

<tr>

<td>NIK </td>


</tr>

<tr>

<td colspan><input type="submit" value="edit"</td>

</tr>

</table>

</form>

</body>

</html>

Dapat dilihat dalam listing 13.3 bahwa jika tombol edit ditekan maka akan menjalankan

file edit_pegawai.php. Adapun listing dari file edit_pegawai.php adalah seperti


<?php

$host="localhost";

$userdb="root";

$passdb="";

Gambar 13.9 Rancangan form edit

Listing 13.3 Formeditpegawai.htm


74

$namadb="karyawan";



$nik1=$_POST[nik];

$sql="select * from karyawan where nik=$nik1";


while ($row=mysql_fetch_array($hasil))

{

$nik=$row['nik'];

$nama=$row['nama'];

$alamat=$row['alamat'];

}

?>

<html>

<head>

<title>Form Edit Data Pegawai</title>

</head>

<body>

<form action="http:\\localhost\simpan_edit_pegawai.php" method="post">

<table>

<tr>

<td>NIK</td>

<td><input type="text" name="nik" value= "<?php echo "$nik"; ?>"></td>

</tr>

<tr>

<td>Nama</td>

<td><input type="text" name="nama" value= "<?php echo "$nama";

?>"></td>

</tr>

<tr>

<td>Alamat</td>

<td><input type="text" name="alamat" value= "<?php echo "$alamat";

?>"></td>

</tr>

<tr>


</tr>

</table>

</form>

</body>

</html>

Dalam listing 13.4 (edit_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik

maka akan menjalankan file : simpan_edit_pegawai.php . Adapun listing dari file

tersebut adalah sebagai berikut :

<?php

$host="localhost";

$userdb="root";

$passdb="";

$namadb="karyawan";



$nik1=$_POST[nik];

Listing 13.4 edit_pegawai.php


75

$sql="update karyawan set

nama='$_POST[nama]',

alamat='$_POST[alamat]'

where nik=$nik1";


if ($hasil)

{

echo"data berhasil diedit";

}

else

{

echo"data gagal diedit";

}

?>

Untuk melihat proses pengeditan data dalam tabel karyawan maka lakukan langkah-

langkah berikut :

1.Jalankan file HTML formeditpegawai.htm, maka akan muncul tampilan seperti gambar

13.10.

Pada text box NIK coba masukkan : 0001. Kemudian klik tombol edit, maka akan muncul

tampilan seperti gambar 13.11

Listing 13.4 simpan_edit_pegawai.php

Gambar 13.10 hasil eksekusi formeditpegawai.htm


76

cobalah untuk mengubah data-data dalam text box nama dan alamat misalnya :

nama : Budi Raharjo

Alamat : Jln Pecenongan 25

Selanjutnya klik tombol simpan. Jika data berhasil diedit maka menampilkan pesan :

”data berhasil diedit ”.

Untuk melihat hasil perubahan yang telah kita lakukan terhadap data dengan nik : 0001

tersebut maka kita dapat membuka tabel karyawan dengan cara seperti yang sama seperti

saat kita melihat isi dari tabel karyawan. Ternyata tabel karyawan sekarang isinya telah

berubah seperti diperlihatkan dalam gambar 13.12.

Gambar 13.11 Hasil ketika tombol edit diklik

Gambar 13.12 Isi tabel karyawan setelah proses edit


77

13.5 Membuat Form untuk menghapus data dalam tabel Karyawan

Untuk menghapus data atau record dalam tabel karyawan maka kita perlu membuat

sebuah form. Adapun rancangan form adalah seperti gambar 13.13.

Adapun file HTML untuk menghasilkan rancangan form tersebut adalah seperti




<html>

<head>

<title> Form Hapus data pegawai</title>

</head>

<body>

<h1>Form Hapus Data Pegawai</h1>

<form action="http:\\localhost\hapus_pegawai.php" method="post">

<table>

<tr>

<td>NIK </td>


</tr>

<tr>

<td colspan><input type="submit" value="lihat"</td>

</tr>

</table>

</form>

</body>

</html>

Dapat dilihat dalam listing 13.5 bahwa jika tombol lihat ditekan maka akan menjalankan

file hapus_pegawai.php. Adapun listing dari file hapus_pegawai.php adalah seperti


<?php

$host="localhost";

$userdb="root";

Gambar 13.13 Rancangan Form Hapus tabel karyawan

Listing 13.5 Formhapuspegawai.htm


78

$passdb="";

$namadb="karyawan";



$nik1=$_POST[nik];

$sql="select * from karyawan where nik=$nik1";


while ($row=mysql_fetch_array($hasil))

{

$nik=$row['nik'];

$nama=$row['nama'];

$alamat=$row['alamat'];

}

?>

<html>

<head>

<title>Form Hapus Data Pegawai</title>

</head>

<body>

<form action="http:\\localhost\simpan_hapus_pegawai.php" method="post">

<table>

<tr>

<td>NIK</td>

<td><input type="text" name="nik" value= "<? echo "$nik"; ?>"></td>

</tr>

<tr>

<td>Nama</td>

<td><input type="text" name="nama" value= "<? echo "$nama";

?>"></td>

</tr>

<tr>

<td>Alamat</td>

<td><input type="text" name="alamat" value= "<? echo "$alamat";

?>"></td>

</tr>

<tr>


</tr>

</table>

</form>

</body>

</html>

Dalam listing 13.6 (hapus_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik

maka akan menjalankan file : simpan_hapus_pegawai.php . Adapun listing dari file

tersebut adalah sebagai berikut :

<?php

$host="localhost";

$userdb="root";

$passdb="";

Listing 13.6 hapus_pegawai.php


79

$namadb="karyawan";



$nik1=$_POST[nik];

$sql="delete from karyawan

where nik=$nik1";


if ($hasil)

{

echo"data berhasil dihapus";

}

else

{

echo"data gagal dihapus";

}

?>?>

Untuk melihat proses penghapusan data atau record dalam tabel karyawan maka lakukan

langkah-langkah berikut :

1.Jalankan file HTML formhapuspegawai.htm, maka akan muncul tampilan seperti

gambar 13.14.

Pada text box NIK coba masukkan : 0001. Kemudian klik tombol lihat, maka akan muncul

tampilan seperti gambar 13.15

Listing 13.7 simpan_hapus_pegawai.php

Gambar 13.14 hasil eksekusi formhapuspegawai.htm


80

2.Klik tombol hapus. Jika data berhasil dihapus maka akan menghasilkan pesan : ”data

berhasil dihapus ”. Dengan demikian data atau record karyawan dengan nik : 0001

akan terhapus dari tabel karyawan. Untuk membuktikannya coba lihat isi tabel karyawan

dengan cara seperti yang sudah dijelaskan sebelumnya.

Gambar 13.15 hasil eksekusi jika tombol lihat diklik

Documents

Diktat Kuliah Peemmrrooggrraammaann WWeebb - fisika…fisika.unud.ac.id/diktat/teori/diktat prog web.pdfmembantu penyusunan diktat ini : -Bapak Ketua Jurusan Fisika FMIPA UNUD -Teman