Download - Andino Maseleno - Modul Web Programming

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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="V5" name="R1">35 Tahun<b r>

</p>

</body>

</html>

Web Programming


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="88%"><input type="text" name="asal" siz e="20"></td>

</tr>

Web Programming


18

Andino Maseleno

Bersambung..

Sambungan..

<tr>

<td width="8%">Email</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


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


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


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


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


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


<FRAME SRC="framelink.html">

<FRAME name="isi">

</FRAMESET>

Web Programming


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


<FRAME SRC="framelink.html">

<FRAME NAME="isi">

</FRAMESET>

<FRAME SRC="footer.html">

</FRAMESET>

<NOFRAMES>

Browser anda tidak dapat menampilkan frame.

</NOFRAMES>

</HTML>

Web Programming


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


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


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


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>


table { font-family: verdana; font-size:10px }

</style>

</head>

<body>

......

</body>

</html>

Web Programming


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


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


31

Andino Maseleno

500

600

700

800

900

Contoh :

<html>

<head>

<title>Latihan CSS 1 – Font Properties</title>


.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


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.


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


33

Andino Maseleno

blink

text-indent Membuat indent teks pada baris awal length

Bersambung…

Sambungan..


text-transform Untuk melakukan konversi terhadap teks none

capitalize

uppercase

lowercase

Contoh :

<html>

<head>

<title>Latihan CSS 2 – Text Properties</title>


.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


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.






datang dari negara lain. 3) Era tanpa batas <i>(b orderless




memenangkan persaingan untuk karir kerja yang ber martabat.

</p>

</body>

</html>

Web Programming


35

Andino Maseleno


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


36

Andino Maseleno

Bersambung..

Sambungan..


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







yang datang dari negara lain. 3) Era tanpa batas <i>(borderless





</p>

</body>

</html>

Web Programming


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.


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>


.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


38

Andino Maseleno

Bersambung..

Sambungan..

body

{

margin-top: 3cm; margin-right: 3cm;

margin-bottom: 3cm; margin-left: 3cm

}

</style>

</head>

<body>







datang dari negara lain. 3) Era tanpa batas <i>(b orderless





</p>

</body>

</html>

Web Programming


39

Andino Maseleno

e. Border Properties

Border properties digunakan untuk menspesifikasikan style, warna, dan lebar pada sebuah

elemen border.


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


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


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>


table {font-family: verdana; font-size: 10pt}

.garis1

{

border-bottom: solid 1px red; border-top: solid 1px red;

Web Programming


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>


</tr>

Web Programming


42

Andino Maseleno

Bersambung..

Sambungan..

<tr>

<td class="garis2">Tembaga</td>

<td align="center" class="garis2">64 kbps</td>


</tr>

<tr>

<td class="garis2">Tembaga</td>

<td align="center" class="garis2">64 kbps</td>


</tr>

</table>

</font>

</body>

</html>

Web Programming


43

Andino Maseleno

f. Padding Properties

Padding Properties digunakan untuk mengatur spasi antara border dengan elemennya dan

elemen dengan isi. Nilai negatif tidak diperbolehkan.


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>


.garis

{

font-family: verdana; font-size: 10pt; padding-top: 3px;

padding-right: 5px; padding-bottom: 3px; padding-left: 5px

}

</style>

</head>

Web Programming


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>


</tr>

<tr>

<td class="garis">Tembaga</td>

<td align="center" class="garis">64 kbps</td>


</tr>

</table>

</font>

</body>

Web Programming


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


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


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


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


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


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


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


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



?>

<html>

<head>

<title>Contoh operasi dengan ++ dan --</title>

</head>

<body>

<?php

Web Programming


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(2 + ++$x); print("<br>");

print("x = $x <p>");

print("Contoh operasi dengan menggunakan -- :<br>") ;

$x = 77;


$x--;

print("x = $x");

?>

</body>

</html>

Web Programming


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


CHAR(M) M byte, 0 <= M <= 255 0 − 255 karakter

Web Programming


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


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


70

Andino Maseleno

Skrip di atas disimpan dengan nama buat_database.php.

3. Untuk membuat tabel, dapat diketikkan perintah berikut :

Web Programming


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


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


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


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

?>

Download - Andino Maseleno - Modul Web Programming

Top Related