Pemrograman Web

Pemrograman Web
September 17, 2012 by www.raemond.co.cc

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 HTMLPoliteknik Telkom Praktikum Pemrograman
Web
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 .htmlPoliteknik Telkom Praktikum Pemrograman Web
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.1Politeknik Telkom Praktikum Pemrograman Web
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 :
Gambar 1.4 Hasil Eksekusi Contoh 1.3
1.2.3 Line Break
Contoh 1.4 Menggunakan Line Break
<html>Politeknik Telkom Praktikum Pemrograman Web
<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>Politeknik Telkom Praktikum Pemrograman Web
Hasil :
1.2.5 Memformat Bentuk Tulisan
Contoh 1.6 Memformat Tulisan
<html>
<head>
<title>Memformat Tulisan</title>
</head>
<body>
<! membuat tulisan menjadi tebal >
<b>Tulisan ini akan tercetak tebal</b>
<p>
<! membuat tulisan menjadi miring >
<i>Tulisan ini akan tercetak miring</i>
<p>
<! menggarisbawahi tulisan >
<u>Pada tulisan ini terdapat garis bawah</u>
<p>
<! membuat superscript >
Dalam matematika, x pangkat 2 ditulis dengan X <sup>2</sup>
<p>
<! membuat subscript >
Rumus kimia untuk oxygen adalah O <sub>2</sub>
</body>
</html>
hasil seperti pada gambar di bawah ini :Politeknik Telkom Praktikum Pemrograman Web
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.htmPoliteknik Telkom Praktikum Pemrograman Web
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. Politeknik Telkom Praktikum
Pemrograman Web
Jurnal
1. Buatlah halaman HTML untuk menampilkan teks di bawah ini :
H2O
X
2
+ 4X + 4
Linux adalah sistem operasi yang bersifat open source.

2. Buatlah dokumen HTML dengan tampilan sebagai berikut :
Keterangan : garis berwarna merahPoliteknik Telkom Praktikum Pemrograman Web
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 gambarPoliteknik Telkom Praktikum Pemrograman Web
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>Politeknik Telkom Praktikum Pemrograman Web
Link dan Gambar 2-3
[ <a href="mailto:baa@politekniktelkom.ac.id"> BAA </a> ]
[ <a href=http://www.dikti.org target="_blank">Dikti</a> ]
</center>
</body>
</html>
Pada contoh diatas menu Manajemen Informatika dan Komputerisasi
Akuntansi merupakan Relative Link, menu BAA merupakan link ke alamat
email, menu Teknik Komputer dan menu Dikti merupakan link dengan
Absolute Pathnames sedangkan logo Politeknik Telkom merupakan gambar
yang bisa link ke alamat web tertentu.
Untuk tampilan script diatas pada browsernya akan tampak seperti ini :
Gambar 2-1 Contoh link ke dokumen tertentu
2.1.2 Membuat Link ke Bagian Tertentu dalam Dokumen
Seringkali halaman web adalah halaman yang panjang dan selalu
membukanya dari posisi awal akan sangat melelahkan bagi pengguna. Untuk
itu akan lebih memudahkan bila kita langsung merujuk pada bagian tertentu
sebuah halaman web. Caranya dengan menyisipkan Tag Anchor <a> dengan
atribut name di bagian dokumen yang akan dituju.
Berikut ini sintaksisnya :
<a name=nama_section> </a>Politeknik Telkom Praktikum Pemrograman Web
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>Politeknik Telkom Praktikum Pemrograman Web
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: Politeknik Telkom Praktikum Pemrograman Web
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 imagePoliteknik Telkom Praktikum Pemrograman Web
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 imagePoliteknik Telkom Praktikum Pemrograman Web
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!Politeknik Telkom Praktikum Pemrograman Web
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.Politeknik Telkom Praktikum
Pemrograman Web
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.1Politeknik Telkom Praktikum Pemrograman Web
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>
Gbr. Hasil Eksekusi Contoh 4.2
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 :Politeknik Telkom Praktikum Pemrograman Web
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>
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>Politeknik Telkom Praktikum
Pemrograman Web
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>Politeknik Telkom Praktikum Pemrograman Web
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>Politeknik Telkom Praktikum
Pemrograman Web
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>
Gbr. Hasil Eksekusi Contoh 4.7Politeknik Telkom Praktikum Pemrograman Web
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. Politeknik Telkom Praktikum Pemrograman Web
Form 3-10
Jurnal
5. Buatlah sebuah form lengkap seperti pada gambar di bawah ini :Politeknik Telkom Praktikum
Pemrograman Web
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 linksPoliteknik Telkom Praktikum
Pemrograman Web
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>Politeknik Telkom Praktikum Pemrograman Web
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>Politeknik Telkom Praktikum Pemrograman Web
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>
Tabel dan Frame 4-5
Gambar 4-2 Hasil eksekusi pembuatan Tabel
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>Politeknik Telkom Praktikum Pemrograman Web
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>
Gambar 4-3 Hasil eksekusi pembuatan TabelPoliteknik Telkom Praktikum Pemrograman Web
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>Politeknik Telkom Praktikum Pemrograman Web
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>Politeknik Telkom Praktikum Pemrograman Web
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>Politeknik Telkom Praktikum Pemrograman Web
Tabel dan Frame 4-10
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html></html>
Gambar 4-4 Hasil eksekusi pembuatan FramePoliteknik Telkom Praktikum Pemrograman Web
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 baruPoliteknik Telkom Praktikum Pemrograman Web
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 tersebutPoliteknik Telkom Praktikum
Pemrograman Web
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 Politeknik Telkom
Praktikum Pemrograman Web
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:smallcaps}
Font-weight Normal|bold|bolder|100-
900
P {font-weight:bold}Politeknik Telkom Praktikum Pemrograman Web
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>
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>Politeknik Telkom Praktikum Pemrograman Web
<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 selectorPoliteknik Telkom Praktikum Pemrograman Web
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>
<table width=100%>
<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 Politeknik Telkom Praktikum Pemrograman Web
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-family:Verdana, Arial, Helvetica, sans-serif;Politeknik Telkom Praktikum Pemrograman
Web
font-size:12px;
font-weight:bold
}
#14pt {
font-size:14pt;
}
</style>
</head>
<body>
<table width=100%>
<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>
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-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold
}
#14pt {
font-size:14pt;Politeknik Telkom Praktikum Pemrograman Web
}
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>
<table width=100%>
<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>Politeknik Telkom Praktikum Pemrograman Web
</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
Backgroundcolor
Rangkaian 6 digit
heksadesimal atau nama
warna
Body {
Background-color : green;
}
BackgroundImage
url dimana image disimpan Body {
Background-image :
url(gambar1.jpg);
}
Backgroundattachment
Fixed|scroll|inherit Body {
Background-attachment :
scroll;
}
BackgroundRepeat
Inherit|repeat|norepeat|repeat-x|repeat-y
Body {
Background-repeat :
repeat;
Background-image :
url(image/gambar1.jpg);
}
Backgroundposition
Bottom|center|left|right|top
|inherit
Body {
Background-repeat : norepeat;
Background-image :
url(image/gambar1.jpg);
Background-position :
bottom center
}
Color Rangkaian 6 digit H1 { color : red }Politeknik Telkom Praktikum Pemrograman Web
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>
<table width=100%>
<tr>
<td class=mewarnai_tulisan>
acara yang diselenggarakan di PT Telkom Jl.
Japati<br>
</td>
</tr>
<tr>
<td class=warna_background>
warnaPoliteknik Telkom Praktikum Pemrograman Web
</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>
Gambar 5-5 Memanipulasi color dan background halaman webPoliteknik Telkom Praktikum
Pemrograman 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-styletype
Disc|circle|square|lowerroman|upperroman|none|loweralpha|upper-alpha
Ul {
List-style-type : disc ;
}
List-styleimage
url dimana image disimpan
atau none
Ul {
List-style-image :
url(gambar1.jpg) ;
}
List-styleposition
Inside|outside Ul {
List-style-position :
inside;
}Politeknik Telkom Praktikum Pemrograman Web
<body>
<table width=100%>
<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>
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 textPoliteknik Telkom Praktikum Pemrograman Web
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
warna
P {
color :red;
}
text-align Left|right|center|justify P {
Text-align :justify;
}
textdecoration
None|underline|overline|lin
e-through|blink
P {
Text-decoration :overline;
}
texttransform
None|capitalize|,uppercase|l
owercase)
P {
Text-transform :
capitalize;
}
Letterspacing
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>
<table width=100%>
<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.Politeknik Telkom Praktikum Pemrograman Web
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 ;
}
borderbottom-style
None|dotted|dashed|solid|do
uble|groove|ridge|inset|outset
.b1 {
Border-bottom-style :
groove ;}
borderbottomwidth
Nilai integer dan satuan
ukuran
.b1 {
border-bottom-width
:10px;
}
borderbottomcolor
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 tabelPoliteknik Telkom Praktikum Pemrograman Web
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.Politeknik Telkom Praktikum
Pemrograman Web
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.Politeknik Telkom Praktikum Pemrograman Web
6 Javascript -1Politeknik Telkom Praktikum Pemrograman Web
7 Javascript -2Politeknik Telkom Praktikum Pemrograman Web
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.Politeknik Telkom Praktikum
Pemrograman Web
8.1 Penggunaan Object
Cara mendefinisikan objek :
nama_objek.nama_properti
Mendefinisikan objek dengan fungsi :
function nama_objek(nama_properti1, nama_properti2)
{
this.nama_properti1 = nama_properti1;
this.nama_properti = nama_properti2;
}
Contoh :
<HTML>
<HEAD>
<TITLE> ::Menciptakan Objek:: </TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!
// Definisi objek Mahasiswa
function Mahasiswa(NIM, Nama, Umur)
{
this.NIM = NIM;
this.Nama = Nama;
this.Umur = Umur;
}
//Menulis properti-properti objek
function Tulis (objek)
{
for (var j in objek)
document.writeln (objek[j]);
document.writeln ( );
}
//>
</SCRIPT></HEAD>
<BODY>
<!
document.writeln (<PRE>);Politeknik Telkom Praktikum Pemrograman Web
// 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 :Politeknik Telkom Praktikum Pemrograman Web
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>
<!Politeknik Telkom Praktikum Pemrograman Web
// 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>);Politeknik Telkom Praktikum Pemrograman Web
// 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;Politeknik Telkom Praktikum Pemrograman Web
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;Politeknik Telkom Praktikum Pemrograman Web
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.htmlPoliteknik Telkom Praktikum
Pemrograman Web
<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>
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 :Politeknik Telkom Praktikum Pemrograman Web
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.Politeknik Telkom Praktikum Pemrograman Web
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)Politeknik Telkom Praktikum Pemrograman Web
Output :
10. Modifikasi program no.2 dimana tanggal, bulan dan tahun dimasukkan
melalui objek window dengan metoda prompt()!Politeknik Telkom Praktikum Pemrograman
Web
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 StringPoliteknik Telkom Praktikum Pemrograman
Web
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://%5Bip 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 ServicePoliteknik Telkom Praktikum Pemrograman Web
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.Politeknik Telkom Praktikum Pemrograman Web
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:Politeknik Telkom Praktikum Pemrograman Web
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 Politeknik
Telkom Praktikum Pemrograman Web
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 Politeknik Telkom
anda ganti misalnya ke D:\www. Temukan text dengan tulisan seperti
dibawah dan ubah:
Cari lagi tulisan seperti dibawah dan ubah:
f. DirectoryIndex Directive
Merupakan file yang diakses ketika directory direquest. Default value:
index.html. Dari sini bisa kita tambahkan misalnya index.php, home.php
Setelah melakukan modifikasi terhadap file httpd.conf, jangan lupa untuk
melakukan restart web server.
Instalasi yang dilakukan diatas adalah instalasi manual per paket. Pada
saat modul ini dibuat sudah banyak developer PHP yang membuat paket
bundle instalasi WAMP/LAMP (Linux Apache MySQL PHP). Berikut
merupakan contoh paket bundle WAMP:
Apache Friends XAMPP
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>
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>;Politeknik Telkom Praktikum
Pemrograman Web
// Heredoc syntax
echo <<<BATAS
$nama adalah salah satu binatang dengan postur tubuh besar.
BATAS;
?>
Contoh penggunaan array di PHP :
<?php
// Contoh simple array dengan key dan value yang bervariasi
$a = array(Band => Blink,
code => 182,
5 => + 311 + ,
14 => 5000
);
echo $a["Band"]; // Blink
echo $a["code"]; // 182
echo $a[5]; // + 311 +
echo $a[14]; // 5000
// Contoh penggunaan array didalam array
$aa = array(music => array(1=>Jazz, 2=>Classic,
3=>Metal),
sport => array(2=>basketball, 2=>golf,
3=>airsoftgun)
);
echo $aa["music"][3]; // Metal
echo $aa["music"][1]; // Jazz
echo $aa["sport"][3]; // airsoftgun
?>
9.3 Variable PHP
Variable PHP selalu dimulai dengan karakter $ dan bersifat casesensitive. Contoh penggunaan
variable di PHP :
<?
$_wait = Pagi'; // 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.Politeknik Telkom Praktikum Pemrograman Web
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 : 50500Politeknik Telkom Praktikum Pemrograman Web
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 bentukbentuk 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.Politeknik Telkom Praktikum
Pemrograman Web
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 :
<?phpPoliteknik Telkom Praktikum Pemrograman Web
$genap = 4;
if (isset($genap))
{
$bilgen=intval($genap);
echo Bilangan Genap dari 2 s/d $bilgen adalah: ;
echo <br>;
$gen=0;
while ($gen<$genap)
{
$gen=$gen+2;
echo $gen;
echo ;
}
}
?>
Contoh menggunakan statement for :
<html>
<head>
<title>Latihan Perulangan dengan For</title>
</head>
<body>
Tanggal:
<select name=tanggal>
<option value=0 selected>Tanggal
<?php
//Bentuk Pilihan tanggal 1 sampai dengan 31
for ($i=1;$i<32;$i++)
echo <option value=$i>$i;
?>
</option>
</select>
</body>
</html>
10.3 Membuat Fungsi
Dalam pembuatan program sering kali dibutuhkan beberapa perintah
yang digunakan berulang kali. Hal ini dapat dihindari dengan subrutin. Subrutin
adalah sekumpulan perintah yang diberi nama dan dapat dipanggil sewaktuwaktu. Dalam
pemrograman PHP terdapat subrutin, yaitu fungsi.
Contoh :
<?php
// Contoh fungsi tanpa parameter
function dowrite(){
echo Simple PHP function;
}
dowrite(); // Pemanggilan fungsi
// Contoh fungsi dengan parameter
function dosum($a,$b){Politeknik Telkom Praktikum Pemrograman Web
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; Politeknik Telkom Praktikum Pemrograman Web
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 : 4Politeknik Telkom Praktikum Pemrograman Web
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 :Politeknik Telkom Praktikum Pemrograman Web
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 formPoliteknik Telkom Praktikum Pemrograman
Web
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);
}
ElsePoliteknik Telkom Praktikum Pemrograman Web
{
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.Politeknik Telkom Praktikum Pemrograman Web
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
Daftar Login
Simpan
PENDAFTARAN ANGGOTA
User Name
Password
Nama
Alamat
E-mail
User Biasa Administrator Level
ResetPoliteknik Telkom Praktikum Pemrograman Web
Gambar 12-2 Form untuk Pendaftaran UserPoliteknik Telkom Praktikum Pemrograman Web
12 Keamanan pada WebPoliteknik Telkom Praktikum Pemrograman 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 tabelPoliteknik Telkom Praktikum Pemrograman Web
13.1 Tes Koneksi ke server MySQL
Untuk menjalankan MySQL, klik ganda pada file winmysqladmin.exe
yang terletak di folder C:\apache\mysql\bin\winmysqladmin.exe. Tanda bahwa
MySQL aktif, lihat ikon lampu lalu lintas dengan warna hijau yang terletak di
sebelah kanan bawah dari desktop Windows.
Contoh koneksi ke MySQL (KoneksiMySQL.php):
<?php
$koneksi = mysql_connect((localhost,,);
if ($koneksi) {
echo(Koneksi ke server MySQL sukses);
}
else {
echo(Koneksi ke server MySQL gagal);
}
?>
13.2 Membuat Database pada MySQL
Database digunakan sebagai tempat untuk menampung data atau tabeltabel.
Contoh membuat database pada MySQL :
<?php
include(KoneksiMySQL.php);
$buatdb = mysql_create_db(APOTEK_DB);
if ($buatdb) {
echo(<BRDatabase dengan nama :
<B>APOTEK_DB</B> sukses dibuat);
}
else {
echo(<BR>Database dengan nama :
<B>APOTEK_DB</B> gagal dibuat);
}
?>
13.3 Membuat Tabel pada MySQL
Setelah berhasil membuat database, maka langkah selanjutnya adalah
membuat tabel-tabel. Contoh :
Skrip BuatTabel.phpPoliteknik Telkom Praktikum Pemrograman Web
<?php
include(KoneksiMySQL.php);
$pilihdb = mysql_select_db(APOTEK_DB) or die(Database
APOTEK_DB tidak ditemukan);
$buattabel = CREATE TABLE obat(kdobat char(5) PRIMARY KEY,
namaobat char(50), harga int(9) );
$tabel = mysql_db_query(APOTEK_DB,$buattabel);
if($tabel){
echo(<BR><BR>Tabel dengan nama : <B>obat</B> sukses
dibuat!);
}
else {
echo(<BR><BR>Tabel dengan nama : <B>mahasiswa</B> gagal
dibuat!);
}
?>
13.4 Insert Data
Langkah selanjutnya yaitu melakukan pengisian data ke dalam tabel
obat yang masih berupa tabel kosong. Untuk lebih jelasnya, cobalah skripskrip berikut,
FormInput.php digunakan untuk membuat form yang menerima
masukan data, sedangkan InputObat.php untuk proses menambahkan data ke
tabel obat :
Skrip FormInput.php
<HTML>
<HEAD> <TITLE>Memasukkan data ke tabel obat</TITLE> </HEAD>
<BODY>
<B>INPUT DATA MAHASISWA</B><BR>
<FORM METHOD = POST ACTION = InputObat.php>
<TABLE BORDER = 0>
<TR>
<TD>KODE OBAT :</TD>
<TD><INPUT TYPE = TEXT NAME = kdobat SIZE = 10></TD>
</TR>
<TR>
<TD>NAMA OBAT :</TD>
<TD><INPUT TYPE = TEXT NAME = nmobat SIZE = 20></TD>
</TR>
<TR>
<TD>HARGA :</TD>
<TD><INPUT TYPE = TEXT NAME = harga SIZE = 10></TD>
</TR>Politeknik Telkom Praktikum Pemrograman Web
<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);Politeknik Telkom Praktikum Pemrograman Web
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);
}
?>Politeknik Telkom Praktikum Pemrograman Web
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
$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>);
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 Politeknik Telkom
antarmuka untuk menampilkan data yang akan diubah. Cobalah skrip-skrip
berikut :
Skrip TampilUpdate.php
<?php
$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>);
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 Politeknik Telkom
where kodeobat=$id';
mysql_query($ubah);
header(location:TampilUpdate.php);
?>
Untuk mengubah data pada halaman TampilUpdate.php, pilih link ubah yang
berada satu baris dengan data yang ingin diubah. Pada saat link diklik, maka
akan merefer ke skrip FormEdit.php.
Bila tombol Simpan di klik pada FormEdit.php, maka akan menjalankan skrip
EditObat.php. Skrip EditObat.php akan mengupdate data sesuai dengan
inputan user pada skrip FormEdit.php.Politeknik Telkom Praktikum Pemrograman Web
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 aturanaturan 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.

Pemrograman Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrograman Web

September 17, 2012 by www.raemond.co.cc

Anda mungkin juga menyukai