andino maseleno - modul web programming
Post on 20-Oct-2014
1.373 views
DESCRIPTION
TRANSCRIPT
WEB PROGRAMMING
HTML, CSS, PHP DAN MySQL
DISUSUN OLEH
Andino Maseleno
FAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO
UNIVERSITAS GADJAH MADA
2007
Web Programming
HTML, CSS, PHP dan MySQL
2
Andino Maseleno
H T M L (HyperText Markup Language)
HTML ( HyperText Markup Language ) merupakan suatu format data yang digunakan
untuk membuat dokumen yang dapat dibaca dari suatu platform komputer ke platform komputer
yang lain tanpa melakukan perubahan apapun, format data ini dapat menampilkan halaman web
dengan menggunakan program khusus untuk aplikasi internet yang disebut web browser. Dalam
menuliskan HTML, yang diperlukan hanyalah sebuah text editor yang baik, seperti menggunakan
NotePad (Windows) atau text editor vi (Linux).
Dalam penulisannya, HTML terdiri dari tanda-tanda (tag) yang berpasangan yang dimulai
dengan simbol <tag> dan diakhiri dengan </tag> dan penulisannya bersifat non-case-
sensitive, namun demikian dalam penulisannya harus konsisten antara penggunaan huruf besar
dan huruf kecil. Berikut ini adalah contoh penulisan HTML yang sederhana :
• Heading
Tag heading biasanya berfungsi untuk memformat Heading (judul / sub judul) dokumen
HTML, format penulisannya adalah sebagai berikut :
<html>
<head>
<title>Judul pada title bar web browser</title>
</head>
<body>Bagian ini merupakan isi dokumen HTML
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
3
Andino Maseleno
• Paragraf
Untuk memformat paragraf digunakan <P>, sedangkan untuk menentukan posisi tulisan
dapat digunakan atribut ALIGN dan diikuti dengan posisi yang diinginkan.
Selain itu ada juga tag <BR> untuk pindah baris, <HR> untuk membuat garis horisontal
dan tag <PRE> untuk menampilkan teks sama dengan yang dituliskan dalam dokumen HTML.
<html>
<head><title>Latihan Heading</title>
</head>
<body> <H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
4
Andino Maseleno
Contoh :
• Font
Untuk mengatur jenis, warna dan ukuran suatu font, digunakan tag <FONT> yang
memiliki beberapa atribut seperti <FACE> dan <COLOR> dan <SIZE> .
Atribut <FACE> digunakan untuk menentukan jenis huruf yang akan digunakan, misalnya
untuk jenis huruf Comic Sans MS, maka dituliskan <FONT FACE="Comic Sans MS"> .
<html>
<head><title>Latihan Heading</title></head>
<body>
<p align="left">Tulisan ini rata kiri dokumen </p>
<p align="center">Tulisan ini berada di tengah doku men</p>
<p align="right">Tulisan ini rata kanan dokumen</p>
<br>Saya sudah<br>
ganti baris</p>
<pre><---------->
| u u |
| v |
<---------->
</pre>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
5
Andino Maseleno
Contoh :
Atribut <COLOR> digunakan untuk menentukan warna font dengan diikuti nama warna,
misalnya warna merah dengan <FONT COLOR="#FF0000"> .
Atribut <SIZE> digunakan untuk menentukan ukuran font dengan diikuti ukuran yang
diinginkan, misalnya dengan <FONT SIZE="3"> .
• Warna Dokumen
HTML menyediakan atribut untuk mengatur warna dasar (background) dari halaman web,
atribut tersebut diletakkan pada tag <BODY> agar efeknya dapat dilihat di seluruh dokumen.
<html>
<head><title>Latihan Font</title></head>
<body><p>
<font face=Courier New, Courier, COLOR=#FF0000 SIZE =1> Ini menggunakan Font Courier New warna MERAH dan ukurannya 1 </font ></p><p>
<font face=Courier New, Courier, COLOR=#0066FF SIZE =3>Ini menggunakan Font Courier New warna BIRU dan ukurannya 3
</font>
</p>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
6
Andino Maseleno
Atribut Fungsi
BGCOLOR Menentukan warna background halaman web
BACKGROUND Menentukan gambar/image yang akan dipasang sebagai background
halaman web
TEXT Menentukan warna teks normal
LINK Menentukan warna teks yang berfungsi sebagai link
ALINK Menentukan warna teks link ketika diklik
VLINK Menentukan warna teks link setelah diklik
• Link
Link pada halaman web berfungsi untuk menghubungkan antara satu halaman dengan
halaman lain. Untuk link ini HTML menyediakan tag <A> (Anchor) diikuti dengan atribut HREF
untuk menghubungkan dengan halaman lainnya dan NAME untuk memberikan nama pada tulisan
dalam dokumen HTML untuk mempermudah navigasi.
Contoh pembuatan link :
<html>
<head><title>Latihan Link</title>
</head>
<body>
<a name="top">Bagian ini ditandai dengan TOP</a><p>
<a href="font.html">Link ke file font.html</a><p>
<a href="#top">Link ke tempat yang ditandai</a>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
7
Andino Maseleno
• List (Daftar)
HTML menyediakan tag untuk membuat list (daftar), misalnya jika ingin membuat daftar
barang seperti : meja, kursi atau komputer. Jenis list dalam HTML dibagi menjadi :
1. Ordered List
Merupakan daftar yang pada setiap bagiannya disertai dengan penomoran, diawali dengan tag
<OL> dan setiap item dalam list selalu diawali dengan <LI> , jenis list yang dipakai tergantung
dengan TYPE yang dituliskan dalam tag <OL>.
misalnya : A = a, b, c
I = i, ii, iii
2. Unordered List
Pada setiap item dalam list ditandai dengan pemakaian bullet, yang diawali dengan tag <UL>
dan setiap item dalam list dimulai dengan tag <LI> dan juga memiliki beberapa jenis TYPE
(circle, disk, square dan standard).
Web Programming
HTML, CSS, PHP dan MySQL
8
Andino Maseleno
Contoh penggunaan list :
3. Menu List
<html>
<head>
<title>Latihan List</title>
</head>
<body>
DI bawah ini menggunakan ORDERED LIST :
<ol type=a>
<li>Apel
<li>Mangga
<li>Semangka
</ol>
Di bawah ini menggunakan UNORDERED LIST :
<ul type=square>
<li>Apel
<li>Mangga
<li>Semangka
</ul>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
9
Andino Maseleno
List dapat dibuat dalam beberapa tipe yang didukung oleh HTML dan web browser,
perbedaannya utamanya terletak pada identifikasi HTML. Pada kebanyakan browser akan
menampilkan <MENU> yang mirip dengan tipe unordered list.
Sama seperti list sebelumnya, menu list menyediakan line breaks di awal dan di
akhir menu container. Yang membedakan pada list ini, setiap elemen dari list
merupakan link ke halaman web lain.
4. Definition List
Sering disebut sebagai glossary list, yang menyediakan format penulisan seperti metode
penulisan dalam kamus, berupa identifiable term dan indented definition paragraph. Format
<HTML>
<HEAD><TITLE>Contoh Menu Listing</TITLE></HEAD>
<BODY>
<MENU>
<LH><EM>Planet-planet dalam Sistem Tata Surya :</EM><BR>
<LI><A HREF="mercury.htm">Mercury</A>
<LI><A HREF="venus.htm"> Venus </A>
<LI><A HREF="earth.htm"> Earth </A>
<LI><A HREF="mars.htm"> Mars </A>
<LI><A HREF="jupiter.htm"> Jupiter </A>
<LI><A HREF="saturn.htm"> Saturn </A>
<LI><A HREF="uranus.htm"> Uranus </A>
<LI><A HREF="neptune.htm"> Neptune </A>
<LI><A HREF="pluto.htm"> Pluto </A>
</MENU>
</BODY>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
10
Andino Maseleno
list seperti ini biasanya digunakan untuk menampilkan hasil pencarian terhadap data yang
disertai dengan deskripsinya, seperti katalog buku.
• Menampilkan Gambar
Pada situs web, dapat juga ditampilkan gambar. HTML menyediakan fasilitas untuk
menampilkan gambar pada halaman web dengan tag <IMG>.
HTML>
<HEAD><TITLE>Definition List Example</TITLE></HEAD>
<BODY>
<DL>
<DT>Mercury
<DD>The smallest of the planets and the one n earest the sun,
having a sidereal period of revolution about the sun of 88.0
days at a mean distance of 58.3 million kilometers.
<DT>Venus
<DD>The second planet from the sun, having an average radius
of 6,052 kilometers (3,760 miles), a mass 0.8 15 times that
of Earth.
<DT>Earth
<DD>The third planet from the sun, having a s idereal period
of revolution about the sun of 365.26 days at a mean
distance of approximately 149 million kilomet ers.
</DL>
</BODY>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
11
Andino Maseleno
Penulisan tag ini diikuti dengan bermacam-macam atribut seperti :
- SRC, untuk menentukan lokasi gambar yang akan ditampilkan
- ALT, sebagai teks pengganti apabila ada browser yang tidak mendukung grafik
- BORDER, untuk memberikan border di sekeliling gambar
- HSPACE dan VSPACE, untuk menentukan jarak spasi dengan obyek di sekitar gambar
secara horisontal ataupun vertika
Contoh program :
• Membuat Tabel
Penggunaan tabel dapat mempermudah dalam mendesain halaman web, untuk membuat
tabel, HTML menyediakan tag <TABLE> yang memiliki beberapa atribut yaitu :
- BORDER, untuk menentukan ukuran garis tabel
- HEIGHT, menentukan lebar tabel
- WEIGHT, menentukan tinggi tabel
- BGCOLOR, menentukan background tabel
- BACKGROUND, menentukan gambar untuk background tabel
Untuk membuat baris, setelah tag <TABLE> dapat digunakan tag <TR>, sedangkan
untuk membuat kolom digunakan tag <TD>. Sebagian besar atribut dalam tag
<TABLE> dapat digunakan dalam tag <TR> maupun tag <TD>.
<html>
<head>
<title>Latihan Menampilkan Gambar</title>
</head>
<body>
<img src="creative.JPG" align="left hspace=20 vspac e=1"><p></p>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
12
Andino Maseleno
Untuk menggabungkan baris dan kolom (merge), digunakan atribut COLSPAN untuk
menggabungkan beberapa kolom menjadi satu dan ROWSPAN untuk menggabungkan
beberapa baris menjadi satu.
CELLPADDING, digunakan untuk mengatur spasi antara border dengan tulisan,
sedangkan CELLSPACING digunakan untuk mengatur spasi antar dua buah sel.
Contoh :
• Form Input
<html>
<head>
<title>Latihan Membuat Tabel</title></head>
<body>
<table border="2" cellspacing="3" cellpadding="2" w idth="100%">
<tr>
<td bgcolor="#0033FF" colspan="2" align="center">Ke las</td>
<td bgcolor="#FF0000" align="center" rowspan="2">Ke t</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
</tr>
</table>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
13
Andino Maseleno
Tag <form> dan <input> digunakan bersama-sama untuk meminta masukan dari
user untuk kemudian dikirim ke server. Tag <form> membuat kerangkanya sedangkan
tag <input> menyediakan elemen antarmuka dengan user.
Pada situs yang menyediakan buku tamu bagi pengunjungnya. Digunakan formulir yang
dibuat dengan menggunakan elemen <form> dan <input> . Standar penulisannya adalah :
Form Text Box
Text box merupakan salah satu jenis kontrol untuk memasukkan data. HTML menyediakan
tag <INPUT> dengan atribut TYPE=”text” untuk membuat kotak input. Jika TYPE
merupakan jenis dari input yang diberikan, maka atribut VALUE digunakan untuk memberi
nilai suatu input, dan atribut SIZE untuk menentukan batas terpanjang sebuah masukan.
Nilai VALUE juga menjadi tulisan yang tampak pada browser.
<Form method =”POST/GET” ACTION=”URL_Address”>
…
…
</Form>
Web Programming
HTML, CSS, PHP dan MySQL
14
Andino Maseleno
<html>
<head><title>Form Input dengan Text Box </title></h ead>
<body><h1>
<p>Rancangan Buku Tamu</p></h1>
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="11%">Nama</td><td width="3%">:</td>
<td width="86%"><input type="text name="nama" size ="20"> </td>
</tr>
<tr>
<td width="11%">Alamat</td><td width="3%">:</td>
<td width="86%"><input type="text value="jakarta" name="alamat" size="20">
</td>
</tr>
<tr>
<td width="11%">Sekolah</td><td width="3%">:</td>
<td width="86%"><input type="text name="sekolah" s ize="20">
</td>
</tr>
</table>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
15
Andino Maseleno
Form Check Box
Selain atribut TYPE bernilai text dan password, anda bisa memberi nilai atribut
TYPE dengan checkbox yang digunakan untuk memberi user pilihan. Dengan
menggunakan checkbox, user bisa memilih salah satu pilihan, lebih dari satu pilihan,
atau tidak memilih semua pilihan.
Form Radio Button
Jika atribut TYPE =”checkbox” diganti dengan TYPE=”radio” , maka user harus
memilih salah satu pilihan yang tersedia. User tidak bisa memilih kurang atau lebih dari satu
pilihan. Atribut checked memberi tanda bahwa pilihan tersebut sedang diaktifkan.
<html>
<head><title>Form Input dengan Check Box</title></h ead>
<body>
<p><h1>Pilih yang anda suka</h1></p><p>Daftar Jurus an</p><p>
<input Type="checkbox" Name="C1">checked>Teknik Ele ktro<br>
<input Type="checkbox" Name="C2">checked>Pertanian< br>
<input Type="checkbox" Name="C3">checked>Kedokteran <br>
<input Type="checkbox" Name="C1">checked>Teknik Inf ormatika<br>
</p>
</body>
Web Programming
HTML, CSS, PHP dan MySQL
16
Andino Maseleno
Form Text Area
Merupakan form untuk membentuk area yang dapat digunakan nuntuk menuliskan
sekumpulan teks dan nantinya dapat dijadikan sebagai input pada halaman web.
<html>
<head><title>Form Input dengan Radio Button</title> </head>
<body>
<p>Pilih salah satu </p>
<p>Usia anda :</p>
<p>
<input type="radio" value="V1" checked name="R1">15 Tahun<br>
<input type="radio" value="V2" name="R1">15-19 Tahu n<br>
<input type="radio" value="V3" name="R1">19-25 Tahu n<br>
<input type="radio" value="V4" name="R1">25-35 Tahu n<br>
<input type="radio" value="V5" name="R1">35 Tahun<b r>
</p>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
17
Andino Maseleno
Form Submit dan Reset
Setiap form harus memiliki minimal tombol submit atau tombol reset. Lebih baik jika
keduanya digunakan bersama. Kedua tombol diatas dibuat dengan menggunakan atribut
TYPE=”submit” dan TYPE =”reset” . Tombol submit digunakan ketika user telah
selesai mengisi formulir dan ingin mengirimkan ke server, sedangkan tombol reset
digunakan ketika user ingin menghapus semua masukan yang telah ditulis.
<html>
<head><title>Membuat Text Area</title></head>
<body>
<p>Ketik pesan anda dalam kotak di bawah ini : <br>
<textarea name=comments rows=8 cols=50></textarea>
</body>
</html>
<html>
<head><title>Buku Tamu</title></head>
<body>
<h2>
<p align="center"> Buku Tamu </p>
</h2>
<form method="post" action="thanks.html">
<table border="0" cellpadding="2" width="100%">
<tr>
<td width="8%">Nama</td>
<td width="4%">:</td>
<td width="88%"><input type="text" name="nama" siz e="20"></td>
</tr>
<tr>
<td width="8%">Asal</td>
<td width="4%">:</td>
<td width="88%"><input type="text" name="asal" siz e="20"></td>
</tr>
Web Programming
HTML, CSS, PHP dan MySQL
18
Andino Maseleno
Bersambung..
Sambungan..
<tr>
<td width="8%">Email</td>
<td width="4%">:</td>
<td width="88%"><input type="text" name="email" si ze="20"></td>
</tr>
<tr>
<td width="8%" Valign="top">Penilaian</td>
<td width="4%" valign="top">:</td>
<td width="88%">
<input type="radio" value="V1" checked name="R1">B agus<br>
<input type="radio" value="V2" name="R1">Bagus seka li<br>
<input type="radio" value="V3" name="R1">Biasa sa ja<br>
</td>
</tr>
</table>
<p><input type="submit" value="kirim" name="B1">
<input type="reset" value="Batal" name="B2"></P>
</form>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
19
Andino Maseleno
Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukan
dari user yang kemudian dikirim ke server. Tag <FORM> akan membuat kerangkanya,
sedangkan tag <INPUT> akan menyediakan elemen antarmuka dengan user.
Atribut METHOD memiliki dua nilai, yaitu POST dan GET. Metode GET mengirimkan
data pada sever dengan cara meletakkan data pada bagian akhir URL (Uniform Resource
Locator) yang ditunjuk. Pada metode POST akan mengirimkan datanya secara terpisah.
Sedangkan atribut ACTION akan berisi URL dari program yang dipanggil oleh form tersebut.
Dari form Buku Tamu, maka akan dipanggil form thanks.html, yang merupakan hasil
aksi dari form Buku Tamu <form method="post" action="thanks.html"> .
• Membuat Fieldset
Merupakan fungsi untuk membuat sebuah form yang terbagi menjadi beberapa
bagian.
<html>
<head><title>Halaman Terima Kasih</title></head>
<body>
<h2><p align="center">TERIMA KASIH ...</h2>
</body>
</html>
<html>
<head>
<title>Fieldset</title>
</head>
<body>
<h2><p align="center">Membuat Field Set</p></h2>
<form method="post" action="thanks.html">
<fieldset>
<legend>Formulir Informasi</legend>
Web Programming
HTML, CSS, PHP dan MySQL
20
Andino Maseleno
Bersambung..
Sambungan...
<table>
<tr><td>
<label for=name>Nama :</label>
</td>
<td>
<input type=text name=name ID=name>
</td>
</tr>
<tr><td>
<label for=email>E-mail :</label>
</td>
<td>
<input type=text name=email ID=email>
</td>
</tr>
<tr><td>
<label for=addr>Pesan :</label>
</td>
<td>
<textarea name=address ID=addr rows=4 cols=40></tex tarea>
</td>
</tr>
</table>
</fieldset>
Web Programming
HTML, CSS, PHP dan MySQL
21
Andino Maseleno
Bersambung..
Sambungan..
<fieldset>
<legend>Informasi Kartu Kredit</legend><p>
<label>
<input type=radio name=card value=visa>Visa
</label>
<label>
<input type=radio name=card value=mc>Master Card
</label><br>
<label>Nomor Kartu :<input type=t ext name=number>
</label><br>
<label>
Batas Pemakaian : <input type=text name=number>
</label>
</p>
</fieldset>
<p align="center">
<input type=submit value="Kirim">
<input type=reset value="Hapus saja">
</p>
</form>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
22
Andino Maseleno
• Membuat Frame
Frame dalam HTML berfungsi untuk membuat beberapa windows yang independen
dalam sebuah tampilan halaman web, sehingga pada setiap windows dapat dilakukan
pengaturan atau perubahan tanpa mempengaruhi windows yang lain.
Fungsi frame hampir menyerupai tabel dalam HTML, frame memiliki kelebihan
dalam mengorganisasi data dan mengorganisasi browser dalam menampilkan window
karena frame berfungsi untuk menampilkan window yang lebih independen, dan setiap
window dapat berisi file HTML lain sebagai isinya. Atau dengan kata lain, sebuah
frame lebih menyerupai mini browser.
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.html">
<FRAMESET COLS="25%,75%">
<FRAME SRC="radiobutton.html">
<FRAME SRC="thanks.html">
</FRAMESET>
<FRAME SRC="footer.html">
</FRAMESET>
<NOFRAMES>
Browser anda tidak dapat menampilkan frame.
</NOFRAMES>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
23
Andino Maseleno
Membuat Target Hyperlink
Dalam frameset, suatu dokumen dapat dibuka pada suatu frame tertentu tanpa
menutup frame yang ada saat ini, atau dengan kata lain suatu dokumen dapat diarahkan
untuk terbuka pada frame tertentu.
Atribut untuk mengarahkan dokumen tersebut adalah atribut TARGET,
sedangkan lokasi frame yang dituju dibuat dengan menggunakan atribut NAME.
Dari program ini, sebuah frameset akan terbagi menjadi 2 kolom frame, yaitu
kolom frame yang berisi file framelink.html dan kolom frame yang dinamai " isi " .
<FRAMESET COLS="25%,75%">
<FRAME SRC="framelink.html">
<FRAME name="isi">
</FRAMESET>
Web Programming
HTML, CSS, PHP dan MySQL
24
Andino Maseleno
Dari program di atas akan memberikan nama (atribut NAME) " isi " pada suatu
frame, kemudian untuk menampilkan suatu dokumen web ke frame " isi " digunakan
atribut TARGET, misalkan pada file framelink.html buat sebuah link yang hasil dari link
tersebut nantinya akan ditampilkan pada frame " isi " .
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="header.html">
<FRAMESET COLS="25%,75%">
<FRAME SRC="framelink.html">
<FRAME NAME="isi">
</FRAMESET>
<FRAME SRC="footer.html">
</FRAMESET>
<NOFRAMES>
Browser anda tidak dapat menampilkan frame.
</NOFRAMES>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
25
Andino Maseleno
Program di atas akan menghasilkan dokumen framelink.html, pada dokumen ini
berisi link yang targetnya akan ditampilkan pada frame " isi " .
<HTML>
<HEAD><TITLE>File Framelink</TITLE></HEAD>
<body>
<a href="radiobutton.html" target="isi">
Klik di sini untuk menampilkan radio button</a><p>
<a href="checkbox.html" target="isi">
Klik di sini untuk menampilkan checkbox</a>
<a href="thanks.html" target="isi">
Klik di sini untuk menampilkan penutup</a>
</body>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
26
Andino Maseleno
C S S (Cascading Style Sheet)
Pengenalan CSS
• CSS ( Cascading Style Sheet ) adalah kumpulan format (style) yang digunakan untuk mengatur
tampilan atau isi halaman web, style ini dapat digunakan untuk mendefinisikan teks, jenis
huruf, ukuran dan warna tertentu pada sebuah halaman web.
• Elemen dasar CSS secara umum dibagi menjadi :
1. Selector, adalah tag/elemen normal pada HTML, yaitu tag yang akan didefinisikan.
2. Deklarasi, adalah satu atau beberapa perintah/nilai dari CSS yang menunjukkan
type/bentuk yang diaplikasikan pada selector, yang terdiri dari :
a. Properti (property)
b. Nilai properti (value)
Antara properti dan nilai dipisahkan dengan titik dua ( : ) seperti contoh di bawah ini :
body {color: black}
Jika nilai terdiri dari beberapa kata, digunakan beberapa tanda kutip ganda ( “ ) :
p {font-family: “times new roman”}
Jika terdapat lebih dari satu properti, maka dipisahkan dengan dengan titik koma ( ; ) :
p {text-align: center; color: red}
• Penggunaan Kelas
Kelas digunakan untuk mendefiniskan suatu style, bentuk pendefinisian kelas :
selector { property: value }
Web Programming
HTML, CSS, PHP dan MySQL
27
Andino Maseleno
Cara memberi nama kelas :
• Dapat mengandung huruf, angka, atau karakter garis bawah.
• Karakter pertama harus huruf atau karakter garis bawah.
• Tidak boleh mengandung spasi.
Contoh :
Metode Penulisan CSS
Dalam CSS, format umum penulisan tag CSS adalah :
<html>
<head>
<title>Penggunaan Class</title>
<style type="text/css">
.kapital { text-transform: uppercase }
.garis_bawah { text-decoration: underline }
</style>
</head>
<body>
<p class="kapital">Huruf Kapital </p>
<span class="garis_bawah">Garis Bawah </span>
</body>
</html>
.nama_kelas { property: value }
<STYLE type=”text/css”>
… definisi style …
</STYLE>
Web Programming
HTML, CSS, PHP dan MySQL
28
Andino Maseleno
Dalam meletakkan informasi style (CSS) ke dalam dokumen HTML, dapat digunakan tiga cara, yaitu
:
a. Inline Style
Inline style merupakan CSS style yang disisipkan pada elemen web tertentu dalam sebuah
dokumen.
Contoh :
b. Internal Style
Internal style merupakan CSS style yang disisipkan langsung pada header dokumen HTML
(diantara tag <head> ... </head> ).
Contoh :
......
<p style="font-family: verdana; color: blue">
Paragraph ini berwarna biru
</p>
<html>
<head>
<title>Internal CSS Style</title>
<style type="text/css">
table { font-family: verdana; font-size:10px }
</style>
</head>
<body>
......
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
29
Andino Maseleno
c. Eksternal Style
Eksternal style merupakan CSS Style yang disimpan terpisah dengan dokumen HTML.
Contoh :
eksternal.css ( file CSS )
eksternal.html ( File HTML yang memanggil file CSS )
/* Dokumen CSS */
hr { color: sienna }
p { font-family: verdana; color: blue }
table { font-family: verdana; font-size: 10pt }
.judul { font-family: verdana; font-size: 14pt }
<html>
<head>
<title>Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="eksternal.css">
</head>
<body>
......
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
30
Andino Maseleno
Model Pemformatan pada CSS
a. Font Properties
Font properties digunakan untuk merubah jenis huruf, ketebalan, ukuran dan style pada text.
Property Keterangan Nilai
font-family Menentukan jenis huruf Jenis huruf standar (Arial,
Verdana, Times New
Roman)
font-size Menentukan ukuran font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
font-style Mengatur teks agar dimiringkan atau tidak normal
italic
font-weight Menebalkan atau menipiskan teks normal
bold
bolder
lighter
100
200
300
400
Web Programming
HTML, CSS, PHP dan MySQL
31
Andino Maseleno
500
600
700
800
900
Contoh :
<html>
<head>
<title>Latihan CSS 1 – Font Properties</title>
<style type="text/css">
.judul
{
font-family: verdana;
font-size: 20pt;
font-style: italic;
font-weight: bold
}
.paragraf { font-family: verdana; font-size: 10pt }
</style>
</head>
<body>
<div align="center" class="judul">PEMBUKAAN</div>
<p align="justify" class="paragraf">
Era globalisasi pada Milenium III memberikan ciri -ciri sebagai
tantangan yang harus dihadapi yaitu; 1) Perdagang an bebas antar
negara. 2) Persaingan SDM yang semakin ketat, buk an saja bersaing
sesama SDM domestik, melainkan juga bersaing meng hadapi SDM yang
yang datang dari negara lain. 3) Era tanpa batas <i>(borderless
country)</i> menghadapkan kita pada pergaulan int ernasional lintas
budaya <i>(cross culture) </i>,menjadikan hanya S DM yang
profesional dan berkualitas internasional saja ya ng akan
memenangkan persaingan untuk karir kerja yang berma rtabat.
Web Programming
HTML, CSS, PHP dan MySQL
32
Andino Maseleno
b. Text properties
Text properties digunakan untuk mengontrol segala bentuk dari text, seperti merubah warna
text, menambah atau mengurangi spasi diantara karakter pada teks, mengatur peletekkan
text, mendekorasi text, indent text pada baris awal dan lain-lain.
Property Keterangan Nilai
color Untuk mengatur warna teks nama warna
Kode RGB
letter-spacing Menambah atau mengurangi spasi diantara
karakter pada teks
normal
length
text-align Mengatur peletekkan teks left
right
center
justify
text-decoration Mendekorasi teks None
underline
overline
line-through
</p>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
33
Andino Maseleno
blink
text-indent Membuat indent teks pada baris awal length
Bersambung…
Sambungan..
Property Keterangan Nilai
text-transform Untuk melakukan konversi terhadap teks none
capitalize
uppercase
lowercase
Contoh :
<html>
<head>
<title>Latihan CSS 2 – Text Properties</title>
<style type="text/css">
.judul
{
font-family: verdana; font-size: 20pt; font-style: italic;
font-weight:bold; color:#000099; letter-spacing: 5px;
text-align: center; text-decoration: underline
}
.paragraf { font-family: verdana; font-size: 10pt; text-indent: 30px}
</style>
</head>
<body>
<div class="judul">PEMBUKAAN</div>
Web Programming
HTML, CSS, PHP dan MySQL
34
Andino Maseleno
Bersambung..
Sambungan..
c. Background Properties
Background properties digunakan untuk mengontrol warna latar belakang dari sebuah
elemen, set sebuah gambar menjadi latar belakang, mengulang gambar latar belakang secara
vertikal atau horizontal, dan memposisikan gambar latar belakang dalam sebuah halaman.
<p align="justify" class="paragraf">
Era globalisasi pada Milenium III memberikan ciri -ciri sebagai
tantangan yang harus dihadapi yaitu; 1) Perdagang an bebas antar
negara. 2) Persaingan SDM yang semakin ketat, buk an saja bersaing
sesama SDM domestik, melainkan juga bersaing meng hadapi SDM yang
datang dari negara lain. 3) Era tanpa batas <i>(b orderless
country)</i> menghadapkan kita pada pergaulan int ernasional lintas
budaya <i>(cross culture) </i>,menjadikan hanya S DM yang
profesional dan berkualitas internasional saja ya ng akan
memenangkan persaingan untuk karir kerja yang ber martabat.
</p>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
35
Andino Maseleno
Property Keterangan Nilai
background-color Mengatur warna latar belakang nama warna
kode RGB
Transparent
background-image Menset sebuah gambar menjadi latar
belakang
url(nama_file_gambar)
background-repeat Mengatur bagaimana gambar
background diulang
repeat
repeat-x
repeat-y
no-repeat
background-position Mengatur posisi gambar latar
belakang dalam sebuah halaman web
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Contoh :
<html>
<head>
<title>Latihan CSS 3 – Background Properties</title >
Web Programming
HTML, CSS, PHP dan MySQL
36
Andino Maseleno
Bersambung..
Sambungan..
<style type="text/css">
.judul
{ font-family: verdana; font-size: 20pt; font-style: italic;
font-weight:bold; color:#000099; background-color: #FFFF99
}
.paragraf { font-family: verdana; font-size: 10pt; text-indent: 30px }
body {background-image: url(bk.gif)}
</style>
</head>
<body>
<div align="center" class="judul">PEMBUKAAN</div>
<p align="justify" class="paragraf">
Era globalisasi pada Milenium III memberikan ciri -ciri sebagai
tantangan yang harus dihadapi yaitu; 1) Perdagang an bebas antar
negara. 2) Persaingan SDM yang semakin ketat, buk an saja bersaing
sesama SDM domestik, melainkan juga bersaing meng hadapi SDM yang
yang datang dari negara lain. 3) Era tanpa batas <i>(borderless
country)</i> menghadapkan kita pada pergaulan int ernasional lintas
budaya <i>(cross culture) </i>,menjadikan hanya S DM yang
profesional dan berkualitas internasional saja ya ng akan
memenangkan persaingan untuk karir kerja yang ber martabat.
</p>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
37
Andino Maseleno
d. Margin Properties
Margin Properties digunakan untuk mendefinisikan margin disekitar elemen spasi, sehingga
dimungkinkan untuk menggunakan nilai negatif untuk saling melengkapi isi nilai.
Property Keterangan Nilai
margin-bottom Mengatur margin bawah sebuah elemen Length ( % )
margin-left Mengatur margin kiri sebuah elemen Length ( % )
margin-right Mengatur margin kanan sebuah elemen Length ( % )
margin-top Mengatur margin atas sebuah elemen Length ( % )
Contoh :
<html>
<head>
<title>Latihan CSS 4 – Margin Properties</title>
<style type="text/css">
.judul
{
font-family: verdana; font-size: 20pt; font-style: italic;
font-weight:bold; color:#000099;
}
.paragraf { font-family: verdana; font-size: 10pt; text-indent: 30px }
Web Programming
HTML, CSS, PHP dan MySQL
38
Andino Maseleno
Bersambung..
Sambungan..
body
{
margin-top: 3cm; margin-right: 3cm;
margin-bottom: 3cm; margin-left: 3cm
}
</style>
</head>
<body>
<div align="center" class="judul">PEMBUKAAN</div>
<p align="justify" class="paragraf">
Era globalisasi pada Milenium III memberikan ciri -ciri sebagai
tantangan yang harus dihadapi yaitu; 1) Perdagang an bebas antar
negara. 2) Persaingan SDM yang semakin ketat, buk an saja bersaing
sesama SDM domestik, melainkan juga bersaing meng hadapi SDM yang
datang dari negara lain. 3) Era tanpa batas <i>(b orderless
country)</i> menghadapkan kita pada pergaulan int ernasional lintas
budaya <i>(cross culture) </i>,menjadikan hanya S DM yang
profesional dan berkualitas internasional saja ya ng akan
memenangkan persaingan untuk karir kerja yang ber martabat.
</p>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
39
Andino Maseleno
e. Border Properties
Border properties digunakan untuk menspesifikasikan style, warna, dan lebar pada sebuah
elemen border.
Property Keterangan Nilai
border-style Mengatur style border Hidden
Dotted
Dashed
solid
double
groove
ridge
inset
outset
border-color Mengatur warna border Color
border-width Mengatur ketebalan border Thin
medium
thick
length
border-bottom-color Mengatur warna border pada sisi bawah border-color
Web Programming
HTML, CSS, PHP dan MySQL
40
Andino Maseleno
border-bottom-style Mengatur style border pada sisi bawah border-style
border-bottom-width Mengaturan ketebalan border pada sisi
bawah
border-width
Bersambung..
Sambungan..
Property Keterangan Nilai
border-left-color Mengatur warna border pada sisi kiri border-color
border-left-style Mengatur style border pada sisi kiri border-style
border-left-width Mengatur ketebalan border pada sisi kiri border-width
border-right-color Mengatur warna border pada sisi kanan border-color
border-right-style Mengatur style border pada sisi kanan border-style
border-right-width Mengatur ketebalan style pada sisi kanan border-width
border-top-color Mengatur warna border pada sisi atas border-color
border-top-style Mengatur style border pada sisi atas border-style
border-top-width Mengatur ketebalan border pada sisi atas border-width
Contoh :
<html>
<head>
<title>CSS Border</title>
<style type="text/css">
table {font-family: verdana; font-size: 10pt}
.garis1
{
border-bottom: solid 1px red; border-top: solid 1px red;
Web Programming
HTML, CSS, PHP dan MySQL
41
Andino Maseleno
Bersambung…
Sambungan..
background-color:#FFFF99
}
.garis2 { border-bottom: solid 1px red}
</style>
</head>
<body>
<table bordercolor="#000000" width="350" cellpaddin g="3"
cellspacing="0" border="0">
<tr>
<th width="40%" class="garis1">Tipe Layanan</th>
<th width="30%" class="garis1">Bandwidth</th>
<th width="30%" class="garis1">Rp/Bulan</th>
</tr>
<tr>
<td class="garis2">Emas</td>
<td align="center" class="garis2">512 Kbps</td>
<td align="center" class="garis2">11.500.000</td>
</tr>
<tr>
<td class="garis2">Perunggu</td>
<td align="center" class="garis2">128 Kbps</td>
<td align="center" class="garis2">5.000.000</td>
</tr>
Web Programming
HTML, CSS, PHP dan MySQL
42
Andino Maseleno
Bersambung..
Sambungan..
<tr>
<td class="garis2">Tembaga</td>
<td align="center" class="garis2">64 kbps</td>
<td align="center" class="garis2">3.500.000</td>
</tr>
<tr>
<td class="garis2">Tembaga</td>
<td align="center" class="garis2">64 kbps</td>
<td align="center" class="garis2">3.500.000</td>
</tr>
</table>
</font>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
43
Andino Maseleno
f. Padding Properties
Padding Properties digunakan untuk mengatur spasi antara border dengan elemennya dan
elemen dengan isi. Nilai negatif tidak diperbolehkan.
Property Keterangan Nilai
padding-bottom Mengatur jarak spasi dari sisi bawah Length ( % )
padding-left Mengatur jarak spasi dari sisi kiri Length ( % )
padding-right Mengatur jarak spasi dari sisi kanan Length ( % )
padding-top Mengatur jarak spasi dari sisi atas Length ( % )
Contoh :
<html>
<head>
<title>CSS Padding</title>
<style type="text/css">
.garis
{
font-family: verdana; font-size: 10pt; padding-top: 3px;
padding-right: 5px; padding-bottom: 3px; padding-left: 5px
}
</style>
</head>
Web Programming
HTML, CSS, PHP dan MySQL
44
Andino Maseleno
Bersambung..
Sambungan..
<body>
<table border="1" bordercolor="#000000" width="350" cellspacing="0">
<tr>
<th width="40%" class="garis">Tipe Layanan</th>
<th width="30%" class="garis">Bandwidth</th>
<th width="30%" class="garis">Rp/Bulan</th>
</tr>
<tr>
<td class="garis">Emas</td>
<td align="center" class="garis">512 Kbps</td>
<td align="center" class="garis">11.500.000</td>
</tr>
<tr>
<td class="garis">Perunggu</td>
<td align="center" class="garis">128 Kbps</td>
<td align="center" class="garis">5.000.000</td>
</tr>
<tr>
<td class="garis">Tembaga</td>
<td align="center" class="garis">64 kbps</td>
<td align="center" class="garis">3.500.000</td>
</tr>
</table>
</font>
</body>
Web Programming
HTML, CSS, PHP dan MySQL
45
Andino Maseleno
P H P (PHP: Hypertext Preprocessor)
PHP (PHP: Hypertext Preprocessor) adalah bahasa pemrograman yang ditempel di
HTML. Tujuan bahasa ini adalah membolehkan pengelola web untuk menulis halaman
dinamis secara cepat.
Fasilitas PHP yang pasti adalah integrasinya dengan mesin database yang membuat
halaman web dengan dukungan database dengan mudah. Mesin database yang didukung :
- Oracle - Generic ODBC - Dbase
- Sybase - Adabas - Unix DBM
- mSQL - FilePro - PostGreSQL
- MySQL - Velocis
- Solid - Database dengan Interface ODBC
Selain kemudahan penulisan dan akses database, PHP juga menyediakan fasilitas-fasilitas
seperti :
1. Autentifikasi HTTP.
Fasilitas ini memungkinkan kita untuk mengirimkan pesan "Authentification Required" dari
server pada browser klien yang akan menampilkan Window untuk memasukkan user name dan
password.
Web Programming
HTML, CSS, PHP dan MySQL
46
Andino Maseleno
2. Upload File
PHP juga mendukung fasilitas upload yang mudah dimana PHP dapat menerima form
upload dan menciptakan file temporary di server, dan selanjutnya terserah programmer untuk
memutuskan apakah file temporary tadi akan dihapus atau dicopy ke lokasi yang diinginkan.
4. HTTP Cookie
PHP juga mendukung Cookies, yaitu mekanisme untuk menyimpan data dalam remote
browser dan mengidentifikasi apa yang dikembalikan user.
5. Penanganan Kesalahan
Semua ekspresi PHP, jika terdapat kesalahan penulisan akan mengembalikan pesan
kesalahan (error) jika dipanggil.
Script Pertama
Script PHP adalah sebuah blok, yang diawali dengan <?php dan diakhiri dengan
?>. Contoh paling sederhana adalah script berikut :
<?php adalah perintah untuk memulai PHP. Beberapa server memang diset untuk
memperbolehkan penggunaan perintah <? tanpa tambahan kata "php ".
Perintah berikutnya adalah print ("Script PHP pertama… ! "); Perhatikan
perintah, Bentuk perintahnya adalah menggunakan kurung buka dan kurung tutup,
kemudian diakhiri dengan tanda titik koma ( ; ). Apa yang berada di antara kurung akan
ditampilkan di layar browser. Tanda petik harus digunakan kalau apa yang ingin
ditampilkan berupa "string", bukan variabel. Misalnya tulisan di atas. Di sini perlu
<?php
print(“Script PHP pertama… !”);
?>
Web Programming
HTML, CSS, PHP dan MySQL
47
Andino Maseleno
diperhatikan bahwa setiap baris perintah dalam script PHP harus diakhiri dengan tanda titik
koma.
Perintah terakhir pada script di atas adalah ?>. Ini adalah perintah yang selalu
digunakan untuk menutup blok kode PHP anda. Kemudian masukkan blok script di atas ke
dalam file html sehingga keseluruhan file akan berbentuk sebagai berikut :
Kemudian simpan file tersebut dengan ekstension php, dan jalankan file anda
menggunakan dengan menggunakan web browser.
<HTML> <HEAD></HEAD>
<BODY> <?php
print ("Script PHP pertama… !"); ?> </BODY> </HTML>
<html>
<head><title>Ambil tanggal hari ini</title>
</head>
<body>
<?php
printf("Tanggal hari ini : %s ", Date("d F Y"));
?>
<p>Kita mulai belajar PHP
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
48
Andino Maseleno
Dalam penulisannya, kita dapat menambah komentar dalam script PHP kita tanpa
mempengaruhi proses yang dikerjakan. Komentar dalam PHP dapat diawali dengan tanda // yang
harus mengawali setiap baris. Jadi karakter apapun yang anda tulis setelah tanda // akan diabaikan
dan dianggap sekedar komentar. Syaratnya harus berada pada baris yang sama.
Komentar juga dapat diberikan di antara tanda /* dan */ tanpa harus berada pada
baris yang sama
Variabel dan Penggunaannya
Variabel adalah sebuah tempat di memori untuk menyimpan data yang nilainya dapat
berubah-ubah Variabel diawali oleh kata tertentu dengan aturan penulisan sebagai berikut :
1. Variabel dimulai dengan tanda dolar ($).
2. Harus dimulai dengan huruf atau underscore ( _ ).
3. Tidak boleh menggunakan tanda baca.
4. Tidak boleh mengandung spasi.
<html>
<body>
Teks di sini adalah teks HTML biasa. Anda dapat men ulis apapun di
sini. Namun setelah ini
anda mulai masuk ke blok script PHP.<p>
<?php
/* Sekarang akan menampilkan perintah "phpinfo()". Perintah ini akan
memberikan hasil berupa konfigurasi PHP yang anda g unakan.
Informasi ini akan bermanfaat saat anda melakukan
troubleshooting.*/
phpinfo();
?>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
49
Andino Maseleno
5. Case sensitive atau membedakan huruf besar dan huruf kecil dibedakan.
Benar Salah
$variabel $var!abel
$pilih $-pilih
$si2006 $2006si
$bulan_1 $bulan 1
Contoh penggunaan variabel dalam script PHP adalah sebagai berikut :
Pada kode di atas, diberi nama variabel dengan nama "$keadaan ". Kemudian variabel itu
diisi dengan kata "saya bingung tentang PHP " dan menampilkan hasilnya menggunakan
perintah print . Di sini perlu anda perhatikan bahwa saat melakukan perintah print, variabel
tidak diapit oleh tanda petik maupun koma di atas.
Kemudian berikutnya isi variabel $keadaan diubah dengan memasukkan kata
"saya jadi tambah bingung ", dan kembali variabel tersebut ditampilkan dengan
perintah print .
Tipe Data
Tipe data dasar pada PHP ada 3 macam, yaitu :
a. integer : menyatakan tipe data bilangan bulat dengan angkauan antara –2 milyar hingga +2
milyar.
<?php
$keadaan = "saya bingung tentang PHP";
print ("Sebelum membaca modul ini, $keadaan");
print ("<p>");
Web Programming
HTML, CSS, PHP dan MySQL
50
Andino Maseleno
b. double : menyatakan tipe data bilangan real atau bilangan yang mempunyai bagian pecahan.
c. string : menyatakan tipe data teks (karakter yang tidak menyatakan bilangan).
Tipe Data Contoh Keterangan
Integer $jumlah = 10;
$nilai = -5;
Bilangan bulat
Double $skor = 90.00;
$bunga = 12.50;
Bilangan real
String $kota = “Bandar Lampung”;
$motto = “Nyaman”;
Karakter, kalimat
<html>
<head>
<title>Menghitung LuasSegitiga</title>
</head>
<body>
Menghitung Luas Segitiga<p>
<?
$alas = 10;
$tinggi = 8;
$luas = $alas*$tinggi/2;
?>
Panjang ALas :<?=$alas?><br>
Tinggi : <?=$tinggi?><br>
Luas Segitiga : <?=$luas?><br>
Web Programming
HTML, CSS, PHP dan MySQL
51
Andino Maseleno
Operator Aritmatika
Operator digunakan untuk memanipulasi nilai suatu variabel. Variabel yang nilainya
dimodifikasi oleh operator disebut operand.
Contoh penggunaan operator misalnya 13 – 3. Nilai 13 dan 3 merupakan operand dan
tanda “–“ disebut operator.
Operator Operasi
+ Penambahan
_ Pengurangan
* Perkalian
/ Pembagian
% Sisa Pembagian
++ Penambahan dengan 1
-- Pengurangan dengan 1
Script berikut memberikan gambaran tentang penggunaan operator aritmatika :
<html>
<head>
<title>Operator Aritmatika</title>
</head>
<body>
<?php
Web Programming
HTML, CSS, PHP dan MySQL
52
Andino Maseleno
Bersambung..
Sambungan..
Operator + + dan – – dikenakan pada variabel. Kedua operator ini dapat berkedudukan
sebagai awalan atau akhiran.
printf("6 - 1 = %d <br>", 6-1);
print("<br>Perkalian :<br>\n");
printf("6 * 2 = %d <br>", 6*1);
printf("6 * 2.5 = %d <br>", 6*2.5);
print("<br>Pembagian :<br>");
print("6 / 4 = "); print(6/4); print("<br>");
print("6 / 4.0 = "); print(6/4.0); print("<br>");
print("6 % 5 = "); print(6%5); print("<br>");
print("6 % 4 = "); print(6%4); print("<br>");
print("6 % 3 = "); print(6%3); print("<br>");
?>
<html>
<head>
<title>Contoh operasi dengan ++ dan --</title>
</head>
<body>
<?php
Web Programming
HTML, CSS, PHP dan MySQL
53
Andino Maseleno
Bersambung..
Sambungan..
print("x = $x <br>");
print(2 + $x++); print("<br>");
print("x = $x <p>");
print("Efek ++ sebagai awalan :<br>");
$x = 77;
print("x = $x <br>");
print(2 + ++$x); print("<br>");
print("x = $x <p>");
print("Contoh operasi dengan menggunakan -- :<br>") ;
$x = 77;
print("x = $x <br>");
$x--;
print("x = $x");
?>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
54
Andino Maseleno
Menerima Input dari Form
Dalam form selalu ada value yang nantinya akan dijadikan sebagai variabel oleh PHP.
Variabel inilah yang akan diproses oleh PHP, tergantung pada pengunaan program PHP tersebut.
Bersambung..
Sambungan..
<body>
<form method=post action="input1.php">
Nama : <input type="text" name="nama"><br>
Alamat : <input type="text" name="alamat"><p>
Jenis Kelamin :<br>
<input type="radio" name="jenkel" value="pria">Pria <br>
<input type="radio" name="jenkel" value="wanita">Wa nita<p>
Hobi :<br>
<input type="checkbox" name="hobi" value="makan">Ma kan<br>
<input type="checkbox" name="hobi" value="tidur">Ti dur<br>
<input type="checkbox" name="hobi" value="lain">Lai n-lain<p>
<input type="submit" value="Kirim">
<input type="reset" value="Ulangi">
</form>
<p><hr><br><h4>Hasil Pengisian Form :</h4><p>
<?php
if(isset($nama)){
echo("Nama anda : $nama<br>");
echo("Alamat : $alamat<br>");
echo("Jenis Kelamin : $jenkel<br>");
echo("Hobi : $hobi<br>");
}
<html>
<head>
<title>Form Input Satu</title>
</head>
Web Programming
HTML, CSS, PHP dan MySQL
55
Andino Maseleno
Dari program ini, name yang terdapat di dalam form secara otomatis diubah oleh PHP ke
dalam variabel-variabel, sehingga memudahkan dalam mengidentifikasi data yang dikirim oleh
form. Sedangkan untuk fungsi dari function isset() adalah untuk mengecek apakah variabel
yang tekirim sudah memiliki nilai. Jika variabel tersebut telah terkirim, maka PHP akan
mengeksekusi program yang terdapat di antara { dan }.
Dengan menggunakan PHP, juga bisa dikirimakn suatu nilai yang ditangani oleh formulir
dan kemudian nilai dikirim ke skrip yang lain, sebagai contoh :
<HTML>
<HEAD>
<TITLE>Latihan Input Data</TITLE>
</HEAD>
<FORM ACTION=salam.php METHOD=get>
Tuliskan Nama Anda :
<INPUT TYPE=TEXT NAME=nama_pemakai><P>
<INPUT TYPE=SUBMIT Value="Kirim">
</FORM>
</BODY>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
56
Andino Maseleno
Selanjutnya simpan skrip di atas dengan tetap menggunakan ekstensi .php, kemudian buat
juga skrip berikut, dan simpan sebagai salam.php :
Bersambung..
Sambungan..
Dari penggunaan form input sebelumnya, cobalah untuk merubah METHOD yang
digunakan dalam pengiriman form, coba dengan menggunakan METHOD POST atau GET,
kemudian lihat perbedaannya, terutama pada bagian combo address dari browser.
Pernyataan Berkondisi
Dalam PHP, dapat digunakan untuk mendukung pengambilan keputusan yang melibatkan
pemilihan lebih dari satu alternatif, seperti pada contoh sederhana berikut :
<HTML>
<HEAD>
<TITLE>Latihan Menampilkan Variabel</TITLE>
</HEAD>
<BODY>
<HTML>
<HEAD>
<TITLE>Latihan Menentukan Pernyataan Berkondisi</TI TLE>
</HEAD>
Hari ini,
<?php
$nama_hari = date("D");
if ($nama_hari == "Wed")
print(" adalah hari <b>Rabu");
else
<?php
print("Selamat mencoba, <B>$nama_pemakai</B>");
?>
</BODY>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
57
Andino Maseleno
Pernyataan Perulangan (Loop)
Untuk melakukan proses pengulangan , dapat menggunakan pernyataan for .
<HTML>
<HEAD>
<TITLE>Pengulangan dengan for</TITLE>
</HEAD>
<BODY>
Penulisan dimulai dari angka terkecil dengan ukuran
yang sesuai :<p>
<?php
for($i = 1; $i <= 7; $i = $i + 1)
print("<FONT SIZE=$i> $i </FONT><BR>");
print("Selesai ...");
?>
</BODY>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
58
Andino Maseleno
PERNYATAAN KONTROL
Pernyataan kontrol yang digunakan dalam PHP dapat digunakan untuk melakukan proses
pengambilan keputusan (if dan switch) serta pengulangan suatu proses (while, do-while, for).
Pernyataan if
Bentuk ini berupa :
Pada bentuk ini, berlaku aturan sebagai berikut :
- Bagian pernyataan akan dijalankan hanya jika bagian ekspresi bernilai benar.
- Nilai selain nol atau kososng dianggap sebagai nilai benar.
- Dalam PHP, konstanta TRUE menyatakan benar dan FALSE menyatakan salah.
if (ekspresi)
pernyataan
<HTML>
<HEAD>
<TITLE>Contoh Pernyataan if</TITLE>
</HEAD>
<BODY>
<FORM>
Besar Pembelian :
<INPUT TYPE=TEXT NAME=total_beli><BR><BR>
<INPUT TYPE=SUBMIT VALUE="Hitung Besar Diskon">
</FORM><hr><br>
<?php
if (isset($total_beli))
{
$total_beli = intval($total_beli);
$diskon = 0;
if ($total_beli >= 100000)
$diskon = intval(0.1 * $total_beli);
printf("Besarnya Diskon = %d <BR>\n", $disk on);
printf("Harga yang harus dibayarkan = %d <BR>\n ",
Web Programming
HTML, CSS, PHP dan MySQL
59
Andino Maseleno
Pernyataan if - else
Pernyataan if yang melibatkan bagian else, digunakan untuk menjalankan suatu tindakan
tertentu bila kondisi bernilai benar dan menjalankan tindakan yang lain bila kondisi bernilai salah,
bentuk pernyataan ini adalah sebagai berikut :
atau
pada bentuk ini :
- bagian pernyataan_1 dijalankan jika ekspresi bernilai benar
- bagian pernyataan_2 dijalankan jika ekspresi bernilai salah
if (ekspresi)
pernyataan_1
else
if (ekspresi)
{
pernyataan_1
}
<HTML>
<HEAD>
<TITLE>Contoh Pernyataan if - else</TITLE>
</HEAD>
<BODY>
<FORM>
Besar Pembelian :
<INPUT TYPE=TEXT NAME=total_beli><BR><BR>
<INPUT TYPE=SUBMIT VALUE="Hitung Besar Diskon">
</FORM><hr><br>
Web Programming
HTML, CSS, PHP dan MySQL
60
Andino Maseleno
Bersambung..
Sambungan..
\
Pernyataan if – elseif
Pernyataan if – elseif digunakan untuk melakukan pengambilan keputusan yang
melibatkan banyak alternatif.
$total_beli = intval($total_beli);
if ($total_beli >= 100000)
$diskon = intval (0.1 * $total_beli);
else
$diskon = 0;
printf("Besarnya Diskon = %d <BR>\n", $disk on);
printf("Harga yang harus dibayarkan = %d <BR>\n ",
$total_beli - $diskon);
}
?>
</BODY>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
61
Andino Maseleno
Bersambung..
Sambungan..
<HTML>
<HEAD>
<TITLE>Menentukan Nama Hari dengan if - elseif</TIT LE>
</HEAD>Hari ini adalah hari <b>
<?php
$nama_hari = date("l");
if ($nama_hari == "Sunday")
print("Minggu");
elseif ($nama_hari == "Monday")
print("Senin");
elseif ($nama_hari == "Tuesday")
print("Selasa");
elseif ($nama_hari == "Wednesday")
print("Rabu");
elseif ($nama_hari == "Thursday")
print("Kamis");
elseif ($nama_hari == "Friday")
print("Jumat");
else
print("Sabtu");
?>
</BODY>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
62
Andino Maseleno
Pada skrip di atas, pernyataan if-elseif digunakan untuk menentukan nama hari sekarang,
yang diperoleh dari penanggalan sistem, baru kemudian dari nama hari yang diperoleh diganti
nilainya ke dalam bahasa Indonesia.
Pernyataan switch
Secara umum pernyataan switch digunakan bila melibatkan banyak alternatif seperti pada
pernyataan if-elseif, dengan pernyataan sebagai berikut :
<HTML>
<HEAD>
<TITLE>Menentukan Nama Hari dengan Switch</TITLE>
</HEAD> Hari ini adalah hari <b>
<?php
$nama_hari = date("l");
switch ($nama_hari) {
case "Sunday" :
print("Minggu");
break;
switch (ekspresi)
{
case ekspresi_case_1 :
pernyataan_1;
break;
case ekspresi_case_2 :
. . .
default
pernyataan_n;
}
Web Programming
HTML, CSS, PHP dan MySQL
63
Andino Maseleno
Bersambung..
Sambungan..
break;
case "Wednesday" :
print("Rabu");
break;
case "Thursday" :
print("Kamis");
break;
case "Friday" :
print("Jumat");
break;
default :
print("Sabtu"); }
?>
</BODY>
</HTML>
Web Programming
HTML, CSS, PHP dan MySQL
64
Andino Maseleno
Database mySQL
Database sangatlah penting dalam pembuatan software, karena memungkinkan
pengolahan dan penyimpanan data yang terorganisasi secara optimal. Situs-situs web yang
menyimpan dan menampilkan informasi dalam jumlah besar memerlukan database supaya
informasi yang ada dapat diolah, disimpan dan terorganisasi dengan baik.
MySQL merupakan Relational Database Management System (RDBMS) yang
dikembangkan oleh sebuah perusahaan pengembangan perangkat lunak dan konsultan
database bernama MySQL AB yang bertempat di Swedia. MySQL didistribusikan secara
gratis di bawah lisensi GPL (General Public License), dimana setiap orang bebas
menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat closed
source atau komersial.
Suatu sistem relational database menyimpan data pada tabel berbeda dan tidak
meletakkannya pada satu tabel saja. Hal ini meningkatkan kecepatan dan fleksibilitas.
Tabel-tabel tersebut dihubungkan dengan suatu relasi yang didefiniskan sehingga dapat
mengkombinasikan data dari beberapa tabel pada suatu saat. MySQL menggunakan
Web Programming
HTML, CSS, PHP dan MySQL
65
Andino Maseleno
standar SQL (Structures Query Language), yaitu bahasa standar yang paling banyak
digunakan untuk mengakses database.
Sebagai database server yang memiliki konsep database modern, MySQL memiliki
banyak sekali keistimewaan. Berikut ini beberapa keistimewaan yang dimiliki MySQL :
a. Portability
MySQL dapat berjalan stabil pada berbagai sistem operasi di antaranya adalah
Windows, Linux, FreeBSD, Mac OS X Server, Solaris, Amiga, HP-UX dan masih
banyak lagi.
b. Open Source
MySQL didistribusikan secara open source di bawah lisensi GPL sehingga dapat
digunakan secara gratis.
c. Multiuser
MySQL dapat digunakan oleh beberapa user dalam waktu yang bersamaan tanpa
mengalami masalah atau konflik. Hal ini memungkinkan MySQL dapat diakses client
secara bersamaan.
d. Performace Tuning
MySQL memiliki kecepatan yang menakjubkan dalam menangani query sederhana,
dengan kata lain dapat memproses lebih banyak query per satuan waktu.
e. Column Types
MySQL memiliki tipe kolom yang sangat kompleks, seperti signed/unsigned integer,
float, double, char, varchar, text, blob, date, time, datetime, timestamp, year, set serta
enum.
f. Command dan Functions
MySQL memiliki operator dan fungsi secara penuh yang mendukung perintah SELECT
dan WHERE dalam query.
g. Security
MySQL memiliki beberapa lapisan sekuritas seperti level subnetmask, nama host, dan
izin akses user dengan sistem perizinan yang mendetail serta password terenkripsi.
h. Scalability dan Limits
Web Programming
HTML, CSS, PHP dan MySQL
66
Andino Maseleno
MySQL mampu menangani basis data dalam skala besar, dengan jumlah records lebih
dari 50 juta dan 60 ribu tabel serta 5 milyar baris. Selain itu, batas indeks yang dapat
ditampung mencapai 32 indeks pada tiap tabelnya.
i. Connectivity
MySQL dapat melakukan koneksi dengan client menggunakan protokol TCP/IP, Unix
socket (Unix), atau Named Piped (NT).
j. Client dan Tools
MySQL melengkapi dengan berbagai tool yang dapat digunakan untuk administrasi
database, dan pada setiap tool yang ada disertakan petunjuk online.
k. Struktur Tabel
MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani ALTER TABLE
dibandingkan DBMS lainnya semacam PostgreSQL ataupun Oracle.
Tipe Kolom pada mySQL
a. Tipe Numerik
Tipe Kolom Penggunaan Memori Range Data
TINYINT 1 byte 0 − 255
SMALLINT 2 byte 0 − 65535
MEDIUMINT 3 byte 0 − 16777215
INT, INTEGER 4 byte 0 − 4294967295
BIGINT 8 byte 0 − 18446744073709551615
FLOAT(p) 4 byte jika 0 <= p <= 24,
8 byte jika 25 <= p <= 53
FLOAT 4 byte 1.175494351E-38 −
Web Programming
HTML, CSS, PHP dan MySQL
67
Andino Maseleno
3.402823466E+38.
DOUBLE
[PRECISION], item
REAL
8 byte 2.2250738585072014E-308 −
1.7976931348623157E+308
DECIMAL(M,D) ,
NUMERIC(M,D)
M+2 bytes jika D > 0,
M+1 bytes jika D = 0
(D+2, jika M < D)
b. Tipe Tanggal dan Waktu
Tipe Kolom Penggunaan Memori Range Data
DATE 3 byte '1000-01-01' − '9999-12-31'
DATETIME 8 byte '1000-01-01 00:00:00' − '9999-12-31 23:59:59'
TIMESTAMP 4 byte '1970-01-01 00:00:00' − '2037-01-01 00:00:00'
TIME 3 byte '-838:59:59' − '838:59:59'
YEAR 1 byte 1901 − 2155
c. Tipe Data String
Tipe Kolom Penggunaan Memori Range Data
CHAR(M) M byte, 0 <= M <= 255 0 − 255 karakter
Web Programming
HTML, CSS, PHP dan MySQL
68
Andino Maseleno
VARCHAR(M) L+1 byte, dimana L <= M dan
0 <= M <= 255 0 − 255 karakter
TINYBLOB , TINYTEXT L+1 byte, dimana L < 2^8 0 − 255 karakter
BLOB, TEXT L+2 byte, dimana L < 2^16 0 − 65,535 karakter
MEDIUMBLOB ,
MEDIUMTEXT L+3 byte, dimana L < 2^24 0 − 16,777,215 karakter
LONGBLOB, LONGTEXT L+4 byte, dimana L < 2^32 0 − 4GB karakter
Integrasi PHP & mySQL
Aplikasi Sistem Informasi Sederhana Menggunakan PHP dan mySQL
Untuk membuat aplikasi sistem informasi sedehana dapat dilakukan dengan langkah-
langkah berikut :
1. Membuat tes koneksi ke server database mySQL
<?php
$koneksi_oke = mysql_connect (“localhost”,””,””);
//username dan password dikosongin aja ya..
If ($koneksi_oke)
{
echo (“Koneksi ke database mySQL <b>SUKSES..!</b>”) ;
}
else
{
echo (“Koneksi ke database mySQL <b>GAGAL..!</b>”);
}
Web Programming
HTML, CSS, PHP dan MySQL
69
Andino Maseleno
Kemudian skrip ini disimpan dengan nama koneksi.php. Skrip ini nantinya akan
ditampilkan pada web browser.
2. Membuat database
Setelah koneksi ke database mySQL berhasil, dilanjutkan dengan membuat database dengan
menuliskan skrip berikut :
<?php
include (“koneksi.php”);
$buat_db = mysql_create_db (“latihan”);
if ($buat_db)
{
echo (“<br><br>Database dengan nama <b>latihan</b> SUKSES dibuat”);
}
else
{
echo (“<br><br>Database dengan nama <b>latihan</b> GAGAL dibuat”);
}
?>
Web Programming
HTML, CSS, PHP dan MySQL
70
Andino Maseleno
Skrip di atas disimpan dengan nama buat_database.php.
3. Untuk membuat tabel, dapat diketikkan perintah berikut :
Web Programming
HTML, CSS, PHP dan MySQL
71
Andino Maseleno
<?
include (“koneksi.php”);
$pilih_db = mysql_select_db (“latihan”) or die
(“Database latihan tidak dtemukan”);
$buat_tabel = “CREATE TABLE anggota (no int (10) AU TO_INCREMENT KEY, nama char (50), email char (50))”;
$tabel = mysql_db_query (“latihan”, $buat_tabel);
if ($tabel)
{
echo (“<br><br>Tabel dengan nama <b>anggota</b> SUK SES dibuat”);
}
else
{
echo (“<br><br>Tabel dengan nama <b>anggota</b> GAG AL dibuat”);
}
?>
Simpan file di atas dengan nama buat_tabel.php.
4. Membuat form input data anggota
Web Programming
HTML, CSS, PHP dan MySQL
72
Andino Maseleno
Setelah tabel selesai dibuat, maka mulai dapat disi dengan data, maka buatlah form untuk
pengisian data sebagai berikut :
<html>
<head>
<title>Form Input</title>
</head>
<body>
<b>Pendaftaran Anggota Baru :</b><p>
<form method=post action=”input_anggota.php”>
Nama : <input type=text name=nama size=20><br>
E-mail : <input type=text name=email size=20><p>
<input type=submit name=submit value=”Daftar”>
<input type=reset name=reset value=”Batal”>
</body>
</html>
Web Programming
HTML, CSS, PHP dan MySQL
73
Andino Maseleno
Simpan form di atas dengan nama form_input.php. Setelah form pengisian data ini, buat juga
file dengan skrip di bawah ini dan simpan dengan nama input_anggota.php :
Dari kedua file ini, setelah penginputan data pada form_input.php, maka dapat
dilanjutkan dengan memproses data hasil input pada input_anggota.php. pada bagian ini data
yang di-inputkan tadi akan disimpan ke dalam tabel dan kemudian ditampilkan kembali ke
penguna.
<?php
mysql_connect (“localhost”,””,””);
mysql_select_db (“latihan”) or die (“Database tidak ada”);
$perintah = “INSERT INTO anggota (nama,email) value s (‘$nama’,’$email’)”;
$isi_data = mysql_query ($perintah);
if (isset ($isi_data))
{
echo (“Selamat ! Anda telah terdaftar, data anda :< p>”);
echo (“Nama : <b>$nama</b><br>”);
echo (“E-mail : <b>$email</b><p>”);
echo (“<form method=post action=”tampil_anggota.php >”);
echo (“<input type=submit name=submit value=”Lihat Data”></form>”);
echo (“<form method=post action=”form_input.php>”);
echo (“<input type=submit name=submit value=”Daftar Lagi”></form>”);
}
else
{
Echo (“Pendaftaran GAGAL…!”);
}
?>
Web Programming
HTML, CSS, PHP dan MySQL
74
Andino Maseleno
5. Menampilkan data anggota
Untuk melihat apa yang teah diinputkan ke dalam tabel, dapat ditampilkan dengan skrip
berikut :
<?php
echo (“Daftar Anggota <b>Latihan</b> :<p>”);
echo (“<table border=1>”);
echo (“<tr><td>No.</td><td>Nama</td><td>E-mail</td> </tr>”);
mysql_connect (“localhost”,””,””);
mysql_select_db (“latihan”);
$perintah = “SELECT * FROM anggota ORDER BY no”;
$tampil_data = mysql_query ($perintah);
while ($data = mysql_fetch_row ($tampil_data))
{
echo (“<tr><td>$data[0]</td><td>$data[1]</td><td>$data2[ 2]</td></tr>”);
}
echo (“</table>”);
?>