politeknik telkom praktikum pemrograman web · dalam matematika, x pangkat 2 ditulis dengan x 2 ...

Politeknik Telkom Praktikum Pemrograman Web

Desain Halaman Web 1-1

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. Mengenal dasar-dasar HTML

2. Mengenal HTML Editor

3. Membuat dokumen HTML dan melakukan pemformatan dokumen yang

sederhana.

4. Membuat teks preformat dan karakter spesial

5. Membuat list pada dokumen HTML

6. Membuat list bersarang pada dokumen HTML



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



Gambar 1.1 Penyimpanan Dokumen HTML

4. Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka

dokumen tersebut menggunakan web browser.

Judul Dokumen

HTML

Informasi

yang

dituliskan

pada

tag

<body>

Gambar 1.2 Hasil Eksekusi Contoh 1.1



5. Alamat file yang diakses ditunjukkan pada url. Untuk contoh diatas,

url yang dimaksud adalah D:\WDM\TPSDP

2005\HTML\contoh_1.1.htm

1.2 Tag – Tag Dasar HTML

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




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>



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

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>




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>



D:/dokumen/contoh_1.6.htm




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 :




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>





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>





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.



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


Link dan Gambar 2-1

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. Membuat link antar dokumen HTML

2. Relative Links versus Absolute Pathnames.

3. Membuat link ke bagian tertentu dari dokumen (anchor) yang sama

4. Memasukan gambar ke halaman HTML

5. Membuat link dari gambar


Link dan Gambar 2-2

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 Kegunaan

Href Menunjukkan url yang dituju

Name Memberikan nama pada bagian tertentu pada dokumen

Target Menunjukkan target ditampilkannya link

Title Menunjukkan title dari link ketika cursor digerakkan di

sekitar area hyperlink

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

[ <a href="mailto:[email protected]"> 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-4

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

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

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

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

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!


Form 3-1

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. Membuat form pada dokumen HTML

8. Mengerti cara penggunaan form pada halaman dokumen HTML.

9. Mampu menggunakan Input Field sesuai kegunaannya.


Form 3-2

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

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

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




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

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

Deskripsi diri :

<br>

<textarea name="deskripsi" cols="25" rows="5">Tuliskan

deskripsi diri Anda disini</textarea>

</body>

</html>




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

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

Rangkuman

1. Form digunakan untuk menerima masukan berupa informasi atau data

dari pengguna.

2. User memasukkan informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa input field TEXT, PASSWORD,

CHECKBOX, RADIO BUTTON, BUTTON, TEXTAREA, LIST MENU.

3. Terdapat dua atribut metoda penanganan form, yaitu metoda GET dan

metoda POST.


Form 3-10

Jurnal

5. Buatlah sebuah form lengkap seperti pada gambar di bawah ini :


Tabel dan Frame 4-1

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. Membuat dan memformat tabel pada halaman dokumen HTML

11. Memahami pembuatan frame pada dokumen HTML

12. Memahami penggunaan frame

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

4.1 Tabel

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


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

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


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

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

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

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

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

Informatika </a> ]<br>

[ <a href="#"> Komputer Akuntansi </a> ]<br>

[ <a href="#"> Teknik Komputer </a> ]

</center>

</body>

</html>

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

</frameset>

</frameset>

<noframes><body>

</body></noframes>

</html></html>

Gambar 4-4 Hasil eksekusi pembuatan Frame


Tabel dan Frame 4-11

Jurnal

Gambar 4-5 Halaman Studi Kasus Layout Web

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

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


Cascading Style Sheet (CSS) 5-1

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



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



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 Value Contoh Penggunaan

Font-family Nama font P { font-family: arial.

Helvetica}

Font-size Nilai integer dengan

pilihan satuan :

em|pt|px|%

P {font-size:24em}

Font-style Oblique|italic|normal P {font-style:italic}

Font-variant Normal|small-caps P {font-variant:small-

caps}

Font-weight Normal|bold|bolder|100-

900

P {font-weight:bold}



5.2.1.1 Menggunakan Inline Style Sheet

Contoh penggunaan CSS untuk memanipulasi font dengan

memposisikan CSS pada inline style sheet sebagai berikut :

Contoh 5-1 Menggunakan sebuah property untuk memanipulasi font.

Jika dijalankan pada web browser, akan didapatkan hasil seperti yang

ditampilkan pada gambar di bawah ini :

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

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



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>



<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



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



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 {




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>



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;



}

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>



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

Value Contoh Penggunaan

Background-

color

Rangkaian 6 digit

heksadesimal atau nama

warna

Body {

Background-color : green;

}

Background-

Image

url dimana image disimpan Body {

Background-image :

url(gambar1.jpg);

}

Background-

attachment

Fixed|scroll|inherit Body {

Background-attachment :

scroll;

}

Background-

Repeat

Inherit|repeat|no-

repeat|repeat-x|repeat-y

Body {

Background-repeat :

repeat;

Background-image :

url(image/gambar1.jpg);

}

Background-

position

Bottom|center|left|right|top

|inherit

Body {

Background-repeat : no-

repeat;

Background-image :

url(image/gambar1.jpg);

Background-position :

bottom center

}

Color Rangkaian 6 digit H1 { color : red }



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






warna



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



Gambar 5-5 Memanipulasi color dan background halaman web



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

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>

Nama

Property


List-style-

type

Disc|circle|square|lower-

roman|upper-

roman|none|lower-

alpha|upper-alpha

Ul {

List-style-type : disc ;

}

List-style-

image

url dimana image disimpan

atau none

Ul {

List-style-image :

url(gambar1.jpg) ;

}

List-style-

position

Inside|outside Ul {

List-style-position :

inside;

}



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



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



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>

Nama

Property


Color Rangkaian 6 digit

heksadesimal atau nama warna

P {

color :red;

}

text-align Left|right|center|justify P {

Text-align :justify;

}

text-

decoration

None|underline|overline|lin

e-through|blink

P {

Text-decoration :overline;

}

text-

transform

None|capitalize|,uppercase|l

owercase)

P {

Text-transform :

capitalize;

}

Letter-

spacing

Nilai integer dengan pilihan

satuan : em|pt|px|%

P {

letter-spacing : 20px;

}

Text-indent Nilai integer dengan pilihan

satuan : em|pt|px|%

P {

Text-indent : 50px;

}



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

Gambar 5-7 Memanipulasi text

5.2.5 Memanipulasi Tabel

Bentuk manipulasi pada tabel yang paling sering digunakan adalah

memanipulasi border (garis tepi) tabel.



Tabel berikut ini menampilkan property yang dapat digunakan untuk

memanipulasi tabel.

Tabel 5-5 Property tabel

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

Nama

Property


border-style None|dotted|dashed|solid|do

uble|groove|ridge|inset|outset

.b1 {

Border-style-type :

groove ;

}

border-

bottom-style

None|dotted|dashed|solid|do

uble|groove|ridge|inset|outset

.b1 {

Border-bottom-style :

groove ;}

border-

bottom-

width

Nilai integer dan satuan

ukuran

.b1 {

border-bottom-width

:10px;

}

border-

bottom-

color

Rangkaian 6 digit


warna

.b1 {

border-bottom-color

:red;

}



<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



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

– perbedaan yang ditampilkan pada tabel perbandingan di bawah ini : Inline Style

Sheet

Embedded Style

Sheet

Linked Style

Sheet

Penulisan CSS Dalam elemen

/ tag pada file

HTML

Menjadi bagian

header dari file

HTML

Terpisah dengan

file HTML

Pengubahan

style

Pada setiap tag

pada tiap file

HTML

Pada bagian

header tiap file

HTML

Pada file yang

digunakan untuk

menyimpan

style-nya saja,

tanpa merubah

file HTML

Penggunaan

property

Hanya satu

property yang

bisa digunakan

Memungkinkan

penggunaan

beberapa

property

sekaligus

Memungkinkan

penggunaan

beberapa

property

sekaligus

Kemudahan

peng-update-an

style

Lebih susah

karena harus

mengganti

semua style

pada tag yang

ada dalam file

HTML

Lebih mudah

daripada inline

style sheet

karena yang

pengubahan

style dilakukan

pada bagian

header

Paling mudah,

karena

pengubahan

style dilakukan

pada satu file

saja

6. Dalam memanipulasi objek – objek yang ada pada file HTML,

diperbolehkan menggunakan beberapa property secara bersamaan.



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.



6 Javascript -1



7 Javascript -2



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. Mengerti esensi penggunaan Objek dalam JavaScript.

2. Mampu menciptakan objek sendiri.

3. Mampu membuat properti dan metoda untuk suatu objek.

4. Mampu menggunakan objek-objek bawaan pada JavaScript.

5. Memahami Hirarki Objek Browser dan Objek HTML.

6. Mengenal Macam-macam Objek Browser pada JavaScript.

7. Mengerti esensi penggunaan Frame dalam JavaScript.

8. Mengerti esensi penggunaan Form dalam JavaScript.

9. Mampu memecahkan masalah dengan menggunakan Frame dan Form

serta mengimplementasikan ke dalam program JavaScript.

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



</SCRIPT></HEAD>

<BODY>


<!--

document.writeln ("<PRE>");



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


<!--

// Definisi objek Mahasiswa

function Mahasiswa(NIM, Nama, Umur)

{

//deklarasi properti

this.NIM = NIM;

this.Nama = Nama;

this.Umur = Umur;

//deklarasi metoda

this.Universitas = UniversitasObj;

this.TampilkanInfo = TampilkanInfo;

}

//Menulis properti-properti objek

function Tulis (objek)

{

for (var j in objek)

document.writeln (objek[j]);

document.writeln (" ");

}

//metoda universitas

function UniversitasObj(NamaUniv, AlamatUniv)

{

this.NamaUniv = NamaUniv;

this.AlamatUniv = AlamatUniv;

}

//menampilkan info

function TampilkanInfo()

{

alert(this.Nama + ' dengan NIM: ' + this.NIM + ', kuliah di

: ' + this.NamaUniv + ' alamat : ' + this.AlamatUniv);

}

//-->

</SCRIPT></HEAD>

<BODY>


<!--

document.writeln ("<PRE>");



// 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 = null;

Mahasiswa2 = null;

Mahasiswa3 = null;

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;



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 objek window pada halaman web yang

menggunakan frame :

1. Buat halaman frameset, beri nama frame_javascript.html



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



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.



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)



Output :

10. Modifikasi program no.2 dimana tanggal, bulan dan tahun dimasukkan

melalui objek window dengan metoda prompt()!


Pengantar Pemrograman Web dengan PHP 9-1

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

MySQL

11. Memahami cara melakukan konfigurasi pada web server

12. Mampu membuat halaman web sederhana dengan PHP

13. Mengenal Tipe Data PHP

14. Mengenal Variable PHP

15. Menggunakan Operator Aritmatika

16. Menggunakan Operator Logika

17. Menggunakan Operator Penggabungan String



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. Apache Web Server

b. PHP (www.php.net)

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



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.



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:



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



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



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

Apache2Triad

Web-Developer Server Suite

PortableWebAp

WOS Portable

The Uniform Server

PHP EasyWindows Installer

PHPStar

IBserver

Appserv

WinServ

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>

http://www.hotscripts.com/PHP/Software_and_Servers/Installation_Kits/index.html

http://www.hotscripts.com/PHP/Software_and_Servers/Installation_Kits/index.html



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 = 4; // decimal

$ib = -20; // decimal negatif

$ic = 0232; // octal

$id = 0x5DF // 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>";



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

sensitive. Contoh penggunaan variable di PHP : <?

$_wait = 'Pagi'; // Contoh variable yang diisi string

$Œ = &$_wait; // Reference $_wait via $Œ (ASCII 140).

echo $Œ; // Value $Œ dan $_wait akan sama

echo $_wait;

$Œ = "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.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!

// Contoh penggunaan .=

$b = "Bandung ";

$b .= "Bermartabat!";

if ($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



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

Pengulangan dan mengimplementasikan ke dalam program PHP.

24. Memahami penggunaan Fungsi.

25. Memahami parameter pada fungsi dalam PHP.

26. Memahami bentuk–bentuk fungsi bawaan dalam PHP.

27. Mampu mengimplementasikan Fungsi pada suatu studi kasus PHP.

28. Mengerti esensi penggunaan class di PHP.

29. Membuat sebuah class yang memiliki field dan fungsi.



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



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

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



return $a+$b;

}

echo dosum(4,2); // Menampilkan nilai dari fungsi yang

dipanggil

?>

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;



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



Keluaran : 8 12 16 20 24

Masukan : 7

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


Mengolah Data dalam Form 11-1

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



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



{

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.



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.

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

LOGIN

User Name

Password

Login Daftar

Simpan

PENDAFTARAN ANGGOTA

User Name

Password

Nama

Alamat

E-mail

Level Administrator User Biasa

Reset



Gambar 12-2 Form untuk Pendaftaran User



12 Keamanan pada Web



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. Menggunakan MySQL untuk mengelola database

2. Mampu membuat database pada MySQL

3. Mampu membuat tabel pada MySQL melalui aplikasi web

4. Mampu memasukkan data ke dalam tabel di database MySQL

5. Mampu menampilkan data dari table

6. Mampu melakukan proses pencarian data pada table

7. Mampu melakukan delete data pada tabel

8. Mampu melakukan update data pada tabel



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

tabel.

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



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

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



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



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

}

?>



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



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'



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.



Jurnal

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

aturan sebagai berikut :

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

20. Gunakan form login yang telah Anda buat pada praktikum sebelumnya.

21. Gunakan form pendaftaran anggota untuk daftar yang telah Anda buat

pada praktikum sebelumnya.

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

politeknik telkom praktikum pemrograman web · dalam matematika, x pangkat 2 ditulis dengan x 2 ...

Documents