web_ti

1 STMIK IBBI – Marwa Halim, S.T.

SISTEM BERBASIS WEB

Menggunakan HTML, PHP, dan MySQL

Di dalam desain web, tidak akan bisa lepas dengan yang namanya HTML (Hypertext

Markup Language). HTML adalah bahasa standar yang digunakan untuk

menyusun/membangun suatu halaman web. Meskipun telah muncul software-software yang

dapat digunakan untuk membangun suatu halaman web tanpa susah-susah memperhatikan

struktur HTML-nya, tidak ada salahnya kalau HTML itu sendiri dipelajari. Manfaat yang

diperoleh apabila mempelajari HTML selain mampu membangun halaman web, juga dapat

dikembangkan untuk pemrograman web. Pemrograman web akan selalu terkait dengan HTML

tersebut. Pemrograman web biasanya dikembangkan untuk membangun web yang dinamis.

Setiap homepage yang dikunjungi, pasti bisa dijumpai HTML-nya yang selanjutnya disebut

SOURCE.

A. Struktur HTML

Bahasa HTML (tag) dapat ditulis/dibuat melalui berbagai macam word editor, misalnya

Notepad, Wordpad, PHP Designer 2005, dll. Tag-tag tersebut dapat dituliskan dengan huruf

besar ataupun huruf kecil. Setelah tag HTML ditulis dengan menggunakan Notepad atau word

editor yang lain, simpanlah file tersebut dengan format file nama_file.htm atau nama_file.html

Sebagai contoh, file HTML tersebut disimpan dengan nama index.htm atau index.html

Adapun struktur HTML adalah sbb:

<HTML> <HEAD> <META> <TITLE> … </TITLE> </HEAD> <BODY> </BODY>

HYPERTEXT MARKUP LANGUAGE (HTML) </HTML>

Keterangan:

HTML

HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Dalam

setiap file HTML akan selalu didahului dengan tag <HTML>. Tag ini akan membuat web

browser mencoba untuk membaca file yang ada didalam tag tersebut untuk ditampilkan dalam

web browser. Pada akhir baris jangan lupa Anda harus selalu mengakhiri tag <HTML> dengan

</HTML>. Sehingga akan kelihatan bahwa pada setiap tag HTML akan selalu :

<HTML> untuk mengakhiri : </HTML>


Penulisan Tag HTML adalah incasesensitive. Artinya, <HTML> akan sama dengan <html> atau

<Html>. Untuk selanjutnya akan dibagi menjadi 2 seksi: head dan body.

HEAD

Header akan berfungsi sebagai tanda pengenal pada halaman yang akan Anda buat.

Untuk mendefinisikan header dalam tag HTML maka anda harus menambahkan <HEAD> dan

</HEAD> tag di bawah tag <HTML> dan akan menjadi seperti berikut :

<HTML> <HEAD> </HEAD> </HTML>

BODY

Pada bagian body merupakan bagian dimana Anda dapat menuliskan berbagai text yang

ingin Anda tampilkan pada halaman web. Untuk mendefinisikan body harus diketikan tag

<BODY> dan ditutup dengan tag </BODY> dibawah tag header, sehingga akan terlihat :

<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

Untuk menamai atau memberikan judul pada halaman web yang akan Anda buat maka

digunakan tag <TITTLE> dan </TITTLE>. Judul ini akan terlihat pada sudut kiri atas pada

halaman web. Tag <TITTLE > akan berada di dalam tag <HEAD>. Kini saatnya Anda membuat

halaman web Anda yang pertama. Bukalah Notepad dari Start Menu dan ketik kode html di

bawah ini, kemudian simpanlah di C:\My Documents\hello.htm. Ingat! Nama filenya adalah

hello.htm, bukanlah hello.htm.txt atau hello.txt.

<HTML> <HEAD> <TITTLE>Selamat datang pada HomePage Saya</TITTLE> </HEAD> <BODY> Halo semua, Bagaimana kabar Anda sekalian? </BODY> </HTML>

B. Penyunting Text

Berikut ini berbagai macam tag yang dapat digunakan untuk penyuntingan teks.

1. Heading

Fungsi : untuk membuat/memilih ukuran teks, umumnya untuk judul karena ukurannya yang

besar.

Sintaks :

<H1> … </H1>,

<H2> … </H2>,


<H3> … </H3>, s/d

<H6> … </H6>

Ket : Semakin besar angka 1 s/d 6 maka semakin kecil ukuran hurufnya.

Contoh :

<HTML> <HEAD> <TITLE>Penyuntingan teks dengan Heading</TITLE> </HEAD> <BODY> <H1>Teks ini ditulis dengan H1</H1> <H2>Teks ini ditulis dengan H2</H2> </BODY> </HTML>

Coba hasilnya Anda lihat di browser, selanjutnya bandingkan apabila digunakan

<H3>…</H3>, <H4>…</H4>, dst.

2. Garis horizontal

Fungsi : membuat garis horizontal penuh pada layar/halaman web

Sintaks : <HR>

Contoh :

<HTML> <HEAD> <TITLE>Garis Horizontal</TITLE> </HEAD> <BODY> <H1>Di bawah tulisan ini ada garis horizontal</H1> <HR> </BODY> </HTML>

Ket : Penulisan <HR> bisa terletak dibawah suatu teks atau di sampingnya.

Contoh :

<HTML> <HEAD> <TITLE>Penyuntingan teks dengan Heading</TITLE> </HEAD> <BODY> <H1>Di bawah tulisan ini ada garis horizontal</H1><HR> </BODY> </HTML>

Coba Anda bandingkan apakah kedua contoh di atas ada bedanya?

3. Teks miring (Italic)

Sintaks : <I> … </I>

Contoh :

<HTML> <HEAD> <TITLE>Penyuntingan teks dengan italic</TITLE> </HEAD> <BODY> <H1><I>Teks ini ditulis dengan H1 dan miring</I></H1>


</BODY> </HTML>

4. Teks tebal (bold)

Sintaks : <B> … </B>

Contoh :

<HTML> <HEAD> <TITLE>Penyuntingan teks dengan bold</TITLE> </HEAD> <BODY> <H1><B>Teks ini ditulis dengan H1 dan bold</B></H1> </BODY> </HTML>

Apabila diinginkan suatu teks miring dan tebal, perhatikan penulisan berikut ini.

<HTML> <HEAD> <TITLE>Penyuntingan teks dengan italic dan bold</TITLE> </HEAD> <BODY> <H1><I><B>Teks ini ditulis dengan H1, miring dan tebal</B></I></H1> </BODY> </HTML>

Penulisan <I>, <B> dan </I>, </B> bisa dibolak-balik,

misalnya

<I><B>Teks ini ditulis dengan H1, miring dan tebal </B></I>

atau

<B><I>Teks ini ditulis dengan H1, miring dan tebal </I></B>

atau

<I><B>Teks ini ditulis dengan H1, miring dan tebal </I></B>

atau

<B><I>Teks ini ditulis dengan H1, miring dan tebal </B></I>

5. Teks dengan garis bawah (underlined)

Sintaks : <U> … </U>

Contoh :

<HTML> <HEAD> <TITLE>Penyuntingan teks dengan underline</TITLE> </HEAD> <BODY> <H1><U>Teks ini ditulis dengan H1 dan bergaris bawah</U></H1> </BODY> </HTML>

Apabila suatu teks dengan gabungan sifat bold, italic, dan underlined maka

penulisannya


<HTML> <HEAD> <TITLE>Penyuntingan teks dengan bold, italic, dan bergaris bawah </TITLE> </HEAD> <BODY> <H1><I><B><U>Teks ini ditulis dengan H1, bold, italic dan miring </U></B></I></H1> </BODY> </HTML>

6. Center

Fungsi : membuat teks (tunggal) berada di tengah halaman

Sintaks : <center> … </center>

Contoh :

<HTML> <HEAD> <TITLE>Teks Center</TITLE> </HEAD> <BODY> <CENTER>Tulisan ini berada di tengah</CENTER> </BODY> </HTML>

7. Paragraf

Fungsi : untuk memisahkan paragraf yang satu dengan yang lain

Sintaks : <P> … </P>

Contoh :

<HTML> <HEAD> <TITLE>Paragraf</TITLE> </HEAD> <BODY> <H1>Contoh paragraf</H1><HR> <P>Di dalam desain web, tidak akan bisa lepas dengan yang namanya HTML (Hypertext Markup Language). HTML adalah bahasa standar yang digunakan untuk menyusun/membangun suatu halaman web.</P> <P> Meskipun telah muncul software-software yang dapat digunakan untuk membangun suatu halaman web tanpa susah-susah memperhatikan struktur HTML-nya, tidak ada salahnya kalau HTML itu sendiri dipelajari.</P> </BODY> </HTML>

8. Alignment

Fungsi : untuk mengatur format tampilan teks/paragraf apakah rata kiri,

kanan, kiri dan kanan, atau tengah,

Sintaks :

<P ALIGN=right>…</P> untuk rata kanan

<P ALIGN=left>…</P> untuk rata kiri

<P ALIGN=center>…</P> untuk rata tengah


<P ALIGN=justify>…</P> untuk rata kiri dan kanan

atau

<H? ALIGN=right>…</H?>

<H? ALIGN=left>…</H?>

<H? ALIGN=center>…</H?>

<H? ALIGN=justify>…</H?>

Contoh :

<HTML> <HEAD> <TITLE>Alignment Paragraf</TITLE> </HEAD> <BODY> <H1 ALIGN=right>Contoh paragraf</H1><HR> <P ALIGN=justify>Di dalam desain web, tidak akan bisa lepas dengan yang namanya HTML (Hypertext Markup Language). HTML adalah bahasa standar yang digunakan untuk menyusun/membangun suatu halaman web.</P> <P ALIGN=justify> Meskipun telah muncul software-software yang dapat digunakan untuk membangun suatu halaman web tanpa susah-susah memperhatikan struktur HTML-nya, tidak ada salahnya kalau HTML itu sendiri dipelajari.</P> </BODY> </HTML>

9. Jenis dan ukuran huruf

Fungsi : Untuk mengubah jenis huruf dan ukuran huruf

Sintaks : <FONT FACE=”jenis_huruf” SIZE=”ukuran_huruf”> ... </FONT>

*)

Jenis_huruf : Times new roman, arial, verdana, dll

Ukuran_huruf : 1, 2, 3, 4, ...

Contoh :

<HTML> <HEAD> <TITLE>Jenis dan Ukuran Fontasi</TITLE> </HEAD> <BODY> <FONT FACE=”Verdana” SIZE=”1”> Teks ini ditulis dengan jenis huruf Verdana dan ukuran 1 pt </FONT><BR><BR> <FONT FACE=”Arial” SIZE=”3”> Teks ini ditulis dengan jenis huruf Arial dan ukuran 3 pt </FONT> </BODY> </HTML>

10. Superscripts

Fungsi : membuat teks naik (indeks atas)

Sintaks : <SUP> ... </SUP>

Contoh :

<HTML> <HEAD> <TITLE>Superscripts</TITLE> </HEAD> <BODY> Persamaan x<SUP>2</SUP>+2x-4=0 adalah salah satu bentuk persamaan kuadrat


</BODY> </HTML>

11. Subscripts

Fungsi : membuat teks turun (indeks bawah)

Sintaks : <SUB> ... </SUB>

Contoh :

<HTML> <HEAD> <TITLE>Subscripts</TITLE> </HEAD> <BODY> Rumus kimia asam sulfat adalah H<SUB>2</SUB>SO<SUB>4</SUB> </BODY> </HTML>

12. List/daftar

Fungsi : membuat daftar/list

Sintaks :

Untuk daftar yang memperhatikan urutan (Ordered List)

<OL>

<LI> item 1 </LI>

<LI> item 2 </LI>

<LI> item 3 </LI>

<LI> item 4 </LI>

</OL>

Untuk daftar yang tidak memperhatikan urutan (Unordered List)

<UL>

<LI> item 1 </LI>

<LI> item 2 </LI>

<LI> item 3 </LI>

<LI> item 4 </LI>

</UL>

Contoh :

<HTML> <HEAD><TITLE>Daftar/List</TITLE></HEAD> <BODY> Contoh list yang urut: <BR> <OL>

<LI>Item 1 </LI> <LI>Item 2 </LI> <LI>Item 3 </LI> <LI>Item 4 </LI>

</OL> <BR><BR> Contoh list yang tak urut: <BR> <UL>

<LI>Item 1 </LI> <LI>Item 2 </LI> <LI>Item 3 </LI> <LI>Item 4 </LI>

</UL>


</BODY> </HTML>

13. Blockquote <blockquote>…</blockquote>

Tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan menggunakan tag

ini maka Anda akan mendapati browser menampilkan teks yang menjorok ke dalam

(mengidentifikasi teks).

Contoh :

<HTML> <HEAD <TITLE>Blockquote</TITLE> </HEAD> <BODY> <H2>Aspek dalam Interface</H2> <BLOCKQUOTE>Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut. </BLOCKQUOTE> </BODY> </HTML>

14. Preformated Text <pre>…</pre>

Digunakan untuk menampilkan teks sama seperti yang Anda ketikan dalam dokumen

HTML. Browser akan menampilkan dalam font monospace (biasanya courier new).

<HTML> <HEAD> <TITLE>performatted text</TITLE> </HEAD> <BODY> <PRE>Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut. </PRE> </BODY> </HTML>

15. Begin Row <br>

Digunakan untuk menulis teks pada baris berikutnya. Tag <BR> akan membuat baris baru

tanpa memberikan ruang kosong di bawahnya.

Contoh :

<HTML> <HEAD> <TITLE>Begin Row</TITLE> </HEAD> <BODY> <P>Dalam perancangan suatu antarmuka terdapat <BR>akses-akses penting yang harus diperhatikan. <BR>Aspek-aspek tersebut akan sangat menunjang


<BR>dalam hasil dari perancangan perangkat lunak tersebut. </P> </BODY> </HTML>

C. Membuat Tabel

Table dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk yang

ringkas dan mudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag penutupnya

</TABLE>.

Tag <TABLE> mewakili beberapa bagian penting :

• <CAPTION> …</CAPTION> digunakan untuk membentuk judul table. Judul table akan

terletak di luar table di bagian atas atau di bagian bawah.

• <TH>…</TH> digunakan untuk meletakkan judul table di bagian paling atas atau bagian

paling kiri dari table.

• <TD> …</TD> digunakan sebagai tempat menulis data atau informasi dalam table.

<html> <head> <title>Tabel</title> </head> <body> <table> <caption>seputar liga italia</caption> <tr>

<th>nama klub</th> <th>berita</th>

</tr> <tr>

<td>Ac milan</td> <td>Ac milan mengalahkan Intermilan di semifinal liga champion</td>

</tr> <tr>

<td>Juventus</td> <td>Juventus juara liga italia musim 2002/2003</td>

</tr> <td>

<tr>Roma</tr> <tr>Roma akan berhadapan dengan Milan di final copa italia</tr>

</td> </table> </body> </html>

Table ALIGN dan WIDTH

Dalam perataan horizontal menggunakan atribut ALIGN, dimana bisa bernilai left untuk

perataan kiri, right untuk perataan kanan. Untuk perataan vertical Anda dapat menggunakan

VALIGN, bernilai TOP untuk perataan atas, bernilai MIDDLE untuk perataan tengah dan

BOTTOM untuk perataan bawah. Sedangkan untuk WIDTH digunakan untuk mengatur lebar


table biasanya dinyatakan dalam (%) atau dinyatakan dengan pixel yang berarti ukuran

sesungguhnya.

<html> <head> <title>Tabel dengan width dan align</title> </head> <body> <table width="88%" height="210"> <tr>

<td width="30%" height="110" valign="top">lihatlah valign="top"<br> jangan kamu malu pada sesuatu yang tidak kamu ketahui </td> <td width="34%" height="110" valign="middle">bandingkan dengan valign="middle"<br> </td> <td width="36%" height="110" valign="bottom">bagaimana dengan valign="bottom"<br> </td>

</tr> </table> </body> </html>

Table CELLSPACING dan CELLPADDING

Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat

diantara dua buah cell. CELLPADDING digunakan untuk mengatur jumlah spasi yang terdapat

antar batas/ border dengan isi atau teks di dalam cell tersebut.

<html> <head> <title>cellspacing dan cellpadding</title> </head> <body> <table width="85%" border="3" cellspacing="5" cellpadding="5"> <tr>

<td width="43%">baris 1, kolom 1</td> <td width="57%">baris1, kolom 2</td>

</tr> <tr>

<td>baris 2, kolom 1</td> <td>baris 2, kolom 2</td>

</tr> </table> </body> </html>

Table COLSPAN dan ROWSPAN

Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1 kolom.

ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu.

<html> <head> <title>colspan dan rowspan</title> </head> <body> <table width="85%" border="3" cellspacing="5" cellpadding="5"> <tr>

<td width="43%" rowspan="2">baris 1, kolom 1 <p>baris 2, kolom 1</td>


<td width="57%">baris 1, kolom 1</td> </tr> <tr>

<td width="57%">baris 2, kolom 2</td> </tr> <tr>

<td width="100%" colspan="2">baris 3, kolom 1 <p> baris 3, kolom 2</td> </tr> </table> </body> </html>

Table COLOR

Selain warna pada background, border juga bisa ditentukan warnanya. Untuk background

digunakan atribut BGCOLOR dan untuk memberi warna pada border digunakan atribut

BORDER COLOR.

<html> <body> <table width="100%" border="3" cellpadding="5" cellspacing="5" bordercolor="#FF0000"> <tr>

<td width="50%" bgcolor="#808080"> </td> <td width="50%"> </td>

</tr> <tr>

<td width="50%"> </td> <td width="50%" bgcolor="#008080"> </td>

</tr> </table> <table width="100%" border="3" cellpadding="5" cellspacing="5" bordercolorlight="008080" bordercolordark="800080"> <tr>

<td width="100%"> </td> </tr> </table> </body> </html>

D. Link

Link adalah suatu metode dalam perancangan website untuk menghu-bungkan file yang

satu dengan file yang lain, atau menghubungkan halaman dengan gambar yang berada pada

lokasi yang berbeda.

Sintaks :

<A HREF="lokasi halaman atau URL" TARGET=_BLANK>Nama Link</A>

Contoh:

<A HREF="index2.htm">Klik di sini</A>

Contoh di atas adalah membuat link ke halaman index2.htm. Artinya ketika diklik "Klik di sini"

selanjutnya akan tampil isi dari halaman index2.htm (berada dalam 1 direktori yang sama dengan

file yang berisi link tersebut).


<A HREF="http://www.yahoo.com" TARGET=_BLANK>www.yahoo.com</A>

Contoh di atas adalah untuk membuat link ke situs yahoo.com

E. Menampilkan Gambar

Untuk memasukkan/insert gambar ke dalam halaman web digunakan sintaks

<IMG SRC="lokasi gambar">

Keterangan:

"lokasi gambar" berisi letak file gambar, bisa berupa direktori maupun URL dan nama filenya.

Contoh :

<IMG SRC="gambar1.jpg">

Tag HTML di atas adalah untuk menyisipkan gambar dengan nama file gambar1.jpg ke

dalam halaman web. Adapun file gambar1.jpg berada dalam 1 direktori yang sama dengan

halaman yang ada tag tersebut.

<IMG SRC="http://myweb.com/image/gambar2.gif">

Tag HTML di atas untuk menyisipkan file gambar dengan letaknya seperti yang ditulis

dalam URL. Berikut beberapa atribut yang dapat disisipkan pada <IMG>

Atribut Fungsi

BORDER = ukuran Memberi border/garis tepi gambar

WIDTH = ukuran Menyatakan ukuran lebar gambar

HEIGHT = ukuran Menyatakan ukuran tinggi gambar

ALIGN = [left | center | right] Mengatur letak gambar

NB: Nilai 'ukuran' pada BORDER = 0, 1, 2, … Apabila BORDER = 0 maka border tidak

muncul. Nilai 'ukuran' pada WIDTH dan HEIGHT adalah ukuran pixel

Contoh

<IMG SRC="gambar2.gif" BORDER=1 WIDTH=200 HEIGHT=100 ALIGN=LEFT>

Tag di atas untuk menyisipkan gambar dengan nama file gambar gambar2.gif, diberi

border, lebar dan tinggi adalah 200 dan 100 pixel, serta letak gambar berada di sebelah kiri

halaman.

Form <form>…</form>

Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukan dari user

untuk dikirim ke server. Tag <FORM> membuat kerangka dan tag <INPUT> menyediakan

elemen antarmuka dengan user. Untuk standar penulisan form adalah sebagai berikut :

<FORM METHOD =”POST/GET” ACTION =”URL”> … … … </FORM>

Atribut METHOD memiliki 2 nilai POST dan GET. Metode GET mengirimkan data

pada server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk. Metode POST


mengirimkan datanya secara terpisah. Jika masukan banyak maka disarankan Anda

menggunakan POST. ACTION akan berisi URL dari program yang dipanggil form tersebut.

Input teks <input type=”text”>

Textbox adalah salah satu jenis control untuk memasukkan data. HTML menyediakan tag

<INPUT> dengan atribut TYPE=”text” untuk membuat kotak input. Untuk atribut VALUE

digunakan untuk memberi nilai input, dan SIZE digunakan utuk menentukan batas terpanjang

dari sebuah masukan.

Contoh :

<html> <head> <TITLE>form input dengan textbox</TITLE> <body> <p>Rancangan awal BUKU TAMU</p> <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%" height="22">Alamat</td> <td width="3%">:</td> <td width="86"><input type="text" value="jember" name="alamat" size="20"></td>

</tr> <tr>

<td width="11%">Sekolah</td> <td width="3%">:</td> <td width="86"><input type="text" name="sekolah" size="20"></td>

</tr> </table> </body> </head> </html>

Input Checkbox <input type=”checkbox”>

Anda juga bisa memberikan atribut TYPE dengan menggunakan Checkbox yang

berfungsi untuk memberikan user pilihan.

Contoh :

<html> <head> <title>Check Box</title> </head> <body> <p>Berikan poling !</p> <p>Daftar mobil</p> <p> <input type="checkbox" name="c1" checked>mercedes<br> <input type="checkbox" name="c2" checked>bmw<br> <input type="checkbox" name="c3" checked>honda<br> <input type="checkbox" name="c4" checked>toyota </p>


</body> </html>

Input Radio Button <input type=”radio”>

Jika atribut TYPE=”checkbox” diganti dengan TYPE=”radio”, maka user harus memilih salah

satu pilihan yang tersedia. User tidak bisa memilih lebih dari satu pilihan. Atribut CHECKED

digunakan memberi tanda bahwa pilihan tersebut sedang diaktifkan.

Contoh :

<html> <head> <title>Radio Button</title> </head> <body> <p>berikan piihan Anda</p> <p>Rentang Usia</p> <p> <input type="radio" value="v1" checked name="R1">15 tahun<br> <input type="radio" value="v2" checked name="R1">15-19 tahun<br> <input type="radio" value="v3" checked name="R1">19-25 tahun <br> <input type="radio" value="v4" checked name="R1">25-30 tahun<br> </p> </body> </html>

CSS (Cascading Style Sheets)

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu

artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain

yang saling berhubungan.

Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-

kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman

HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan fontarial untuk

tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus

merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.

Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup

merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.

Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-

kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser

yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan


menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web

anda terlihat baik di semua browser.

Salah satu tingkat dasar dari CSS (Cascading Style Sheet) adalah mengetahui cara

mengunakannya untuk Background, Text, Fonts, Links, Lists, dan Tables. Di artikel kali ini mari

kita bahas satu persatu cara penggunaan style css tersebut

Style untuk Background

Properti CSS untuk background digunakan utuk membuat efek background (latar belakang) dari

sebuah elemen HTML. Properti yang digunakan untuk membuat efek pada background adalah :

background-color

background-image

background-repeat

background-attachment

background-position

Properti background-color mendefinisikan warna dari sebuah elemen HTML. Untuk membuat

warna background dari sebuah halaman web maka properti ini digunakan pada selector body

HTML. contoh penggunaanya adalah sebagai berikut :

body {background-color:#000000;}

Warna background dapat digunakan dengan :

nama dari warna dalam english seperti "black", "blue" dan sebagainya

nilai dari RGB (Red, Green, Blue) seperti (255,255,255)

nilai Hex dari warna seferti "#000000", "#FFFFFF" dan sebagainya (saya biasa

menggunakan ini dan nilai warna saya ambil dari photshop)

Selain digunakan pada selector body, elemen html lainya juga bisa di beri properti ini. Di bawah

ini merupakan contoh penggunaan background-color untuk beberapa elemen HTM

h1 {background-color:#000000;} p {background-color:#000000;} div {background-color:#000000;}

properti kedua dari background adalah background-image, properti ini menggunakan gambar

untuk memberi background pada sebuah elemen. Penggunaan dari properti background-image

adalah sebagai berikut :

body {background-image:url('gambar.gif');}

Pada opsi default gambar akan diulang terus sehingga background dengan gambar ini akan

melatari isi dari elemen HTML. Jiga tidak ingin mengulang gambar background dan hanya ingin

mengulang background secara horizontal atau vertical maka bisa kita gunakan

properti background-repeat berikut contoh penggunaanya

/* Pengulangan gambar secara horizontal */ body { background-image:url('gambar.gif'); background-repeat:repeat-x; }


/* Pengulangan gambar secara vertical */ body { background-image:url('gambar.png'); background-repeat:repeat-y; } /* Background tidak ada Pengulangan*/ body { background-image:url('gambar.jpg'); background-repeat:no-repeat; }

Jika ingin mengatur posisi background gambar untuk tetap berada di tempatnya atau bisa di

scroll maka kita bisa menggunakan properti background-attachment. cara penggunaanya

adalah dengan memberi nilai scroll, fixed, atau inherit pada background-attachment seperti

contoh berikut

body { background-image:url('gambar.png'); background-attachment:fixed; }

Properti terakhir dari css background adalah background-position, properti ini digunakan untuk

mengatur posisi gambar background apakah di atas sebelah kanan, di atas sebelah kiri, di bawah

sebelah kanan, di bawah sebelah kiri dan lain sebagainya. Nilai untuk properti background-

position adalah sebagai berikut : left top, left center, left bottom, right top, right center, right

bottom, center top, center center, center bottom, x% y%, xpos ypos, inherit. contoh

penggunaanya adalah sebagai berikut

body { background-image:url('gambar.png'); background-position:center top; }

selain dengan penulisan kode pada contoh-contoh di atas untuk mempersingkat penulisan style

background juga bisa seperti contoh di bawah

body { body {background:#ffffff url('gambar.png') no-repeat right top;} }

Style untuk Text

Properti CSS untuk Text dan nilai dari masing-masing properti CSS untuk text adalah sebagai

berikut

Deskripsi / Kegunaan Properti Nilai Properti

color Mengatur warna dari text

Nilai untuk properti ini adalah warna seperti

yang saya jelaskan diatas pada properti

background-color

direction Mengatur arah dari Text ltr

rtl


line-height Mengatur jarak baris text

normal

number

length

%

letter-spacing Untuk menambah atau mengurangi jarak

spasi dari karakter text

normal

length

text-align Mengatur alignment text dalam sebuah

elemen HTML

left

right

center

justify

text-decoration Menambah dekorasi/hiasan text

none

underline

overline

line-through

blink

text-indent Memberi jarak untuk baris kalimat pertama

dari text yang ada dalam elemen HTML

length

%

text-shadow Digunakan untuk memberi bayangan pada

text

none

color

length

vertical-align Mengatur garis vertical dari suatu elemen

baseline

sub

super

top

text-top

middle

bottom

text-bottom

length

%

white-space Mengatur bagaimana space putih didalam

elemen HTML ditampilkan

normal

pre

nowrap

word-spacing Menambah atau mengurangi spasi antar kata normal

length

Contoh penggunaan css pada text bisa di lihat di bawah

h1 {color:#00ff00;} p.date {text-align:right;} a {text-decoration:none;}

Bisa juga anda menggunakan beberapa variasi untuk mendekorasi tampilan heading paragraph

seperti berikut:

h1 {text-decoration:blink;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:overline;}

o h1 disebut sebagai selector atau tag elemen HTML yang di pilih untuk di format.

o Color merupakan properti CSS

o blue adalah nilai dari properti CSS

o Setiap deklarasi atau statement CSS di buat didalam tanda kurawa { }

o Setiap properti diakhiri dengan tanda titik koma ;


Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag

HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser.

CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */

/* comment : membuat heading */ h1 { color :blue; font-size:18px; }

Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya

langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk

menspesifikasikan selector khusus yang disebut class dan id.

selector id digunakan untuk menempatkan style pada element yang unik (catatan penting : pada

satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama)

attribut id dari elemen HTML di definisikan dengan tanda pagar #. contoh penggunaanya

misalkan kita memiliki sebuah tag HTML sebagai berikut :

<p id="parameter">ini paragraph</p>

definisi id diatas pada CSS akan ditulis sebagai berikut :

#parameter { text-align:center; color:red; font-size:12px; font-weight:bold; }

Style untuk Font

Cara menuliskan style font pada CSS adalah sebagai berikut

#parameter { font-size:12px; font-weight:bold; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } /*penulisan pendek */ #parameter { font: normal medium bold "Trebuchet MS", Arial, Helvetica, sans-serif; }

Properti CSS untuk font dan nilai dari masing-masing properti CSS untuk font adalah sebagai

berikut

Deskripsi / Kegunaan Properti Nilai Properti

font Mengatur font untuk suatu elemen HTML

atau keseluruhan elemen HTML

font-style

font-variant

font-weight

font-size/line-height

font-family

caption

icon

menu

message-box

small-caption

status-bar

inherit

font-family Mendefinisikan font family (kelompok

font) untuk text

family-name

generic-family

inherit


font-size Mengatur ukuran font

xx-small

x-small

small

medium

large

x-large

xx-large

smaller

larger

length

%

inherit

font-style Mengatur gaya dari font

normal

italic

oblique

inherit

font-variant Mengatur apakah text ingin di tampilkan

secara small caps atau tidak

normal

small-caps

inherit

font-weight Mengatur ukuran bobot dari font

normal

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

inherit

Style untuk Links

Kita dapat menggunakan properti color, font, background dan sebagainmya untuk Style CSS

Links. Kita bisa menggunakan varian style CSS berbeda tergantung pada situasi link tersebut

misalkan gaya khusus pada saat di hover (link ditunjuk mouse), active (url link sama dengan

halaman yang sedang di buka), visited (url link yang pernah dikunjungi) dan sebagainya.

dibawah ini beberapa contoh penggunaan Style CSS untuk Link <a href="link-url"></a>

a:link {color:#FF9900; text-decoration:none; } /* link belum di kunjungi */ a:visited {color:#99FF00; text-decoration:underline; } /* link yang sudah di kunjungi*/ a:hover {color:#FF0000; font-size: 20px; } /* link yang ditunjuk mouse */ a:active {color:#000000; background-color:#FFF000; } /* link yang di pilih */

Style untuk List

Pada HTML ada dua cara dalam membuat list (daftar) yaitu dengan cara unordered lists (daftar

yang ditandai dengan bulatan hitam kecil sebagai penomorannya) dan ordered lists (daftar yang

ditandai dengan huruf dan angka sebagai penomorannya).

contoh penulisan list pada HTML adalah sebagai berikut

<ul class="lingkaran"> <li>daftar ke-satu</li> <li>daftar ke-dua</li> <li>daftar seterusnya</li> </ul>


contoh menuliskan style untuk list pada CSS adalah sebagai berikut

ul.lingkaran {list-style-type: circle;} ul.bulatan {list-style-type: square;} ol.hurufromawi {list-style-type: upper-roman;} ol.hurufkecil {list-style-type: lower-alpha;}

Nilai untuk style List - unordered lists dapat dilihat pada table di bawah

Nilai Keterangan

none Tidak ada penandaan

disc ditandai dengan lingkar bulatan

circle ditandai dengan lingkar bulatan hitam

square ditandai dengan tanda persegi

Nilai untuk style List - ordered lists dapat dilihat pada table di bawah

Value Description

armenian ditandai dengan nomor Armenian

decimal ditandai dengan nomor

decimal-leading-zero ditandai dengan nomor dengan awalan 0 di depannya (01, 02, 03)

georgian ditandai dengan nomo Georgia (an, ban, gan)

lower-alpha ditandai dengan huruf abjad kecil (a, b, c, d, e)

lower-greek ditandai dengan huruf yunani kecil (alpha, beta, gamma)

lower-latin ditandai dengan huruf latin kecil (a, b, c, d, e)

lower-roman ditandai dengan huruf romawi kecil(i, ii, iii, iv, v)

upper-alpha ditandai dengan huruf abjad besar (A, B, C, D, E)

upper-latin ditandai dengan huruf latin besar (A, B, C, D, E)

upper-roman ditandai dengan huruf romawi besar (I, II, III, IV, V)

Adapun property untuk Sttyle list pada CSS adalah sebagai berikut

Keterangan Nilai

list-style

Mendeklarasikan pengaturan semua daftar

properti

list-style-type

list-style-position

list-style-image

inherit

list-style-image

menggunakan image sebagai icon untuk

penandaan

URL

none

inherit

list-style-

position menentukan posisi tanda pada daftar

inside

outside

inherit

list-style-type

Menentukan tanda yang akan digunakan

pada daftar

none

disc

circle

square

decimal

decimal-leading-zero

armenian

georgian

lower-alpha

upper-alpha

lower-greek

lower-latin

upper-latin


lower-roman

upper-roman

inherit

Style untuk Table

Untuk menentukan style border pada table dalam CSS kita bisa menggunakan property border,

width, font dan lainnya. properti berikut ini beberapa contoh poperti yang bisa kita gunakan

untuk table, tr, th, maupun td

table.ex1 { border-collapse:collapse; width:100%; } table,th,td{ border: 1px solid black; } th,td{ height:50px; vertical-align:bottom; padding:5px; }

HYPERTEXT PREPROCESSOR

Banyak pemakai internet yang sudah memiliki homepage di internet. Namun sebagian

besar web yang mereka miliki adalah web statis. Kebanyakan mereka masih belum memahami

bagaimana web yang dinamis. Ciri-ciri web dinamis adalah adanya interaksi antara user dengan

sistem/pemilik web, dapat menampilkan informasi-informasi dari database, halaman-halaman

web dapat berubah secara otomatis.

Untuk mendukung web dinamis dibutuhkan suatu pemrograman web. Berdasarkan

tempat dijalankannya perintah-perintah dalam pemrograman web, terdapat 2 jenis kategori:

1. Client side programming

2. Server side programming

Pada client side programming, script programnya dijalankan di client atau dalam hal ini

adalah browser internetnya. Contoh kategori ini adalah pemrograman javascript, java applet.

Sedangkan server side programming script programnya dijalankan di server.

Beberapa bahasa pemrograman yang termasuk kategori ini adalah Perl (the oldest), CGI, PHP,

ASP, Phyton.

PHP (PHP: Hypertext Preprocessor) diciptakan oleh Rasmus Lerdorf. PHP awal mulanya

hanya digunakan oleh penciptanya untuk mencatat pengunjung pada hompagenya (semacam hit

counter). Rasmus salah seorang yang mendukung opensource, maka ia mengeluarkan Personal

Home Page (PHP) Tools versi 1.0. PHP terus dikembangkan dan sampai saat ini versinya sudah

mencapai 5.0 PHP memiliki beberapa kelebihan dibanding server side programming lain, yaitu

mudah dibuat dan kecepatan prosesnya yang tinggi. Selain itu PHP juga support pada banyak OS


seperti Unix/Linux, Win 98, Win NT dan turunannya, Macintosh. PHP juga dapat dijalankan

bersama dengan web server seperti PWS (Personal Web Server), Apache, IIS. Kelebihan yang

lain adalah PHP dapat diletakkan dalam tag HTML atau dikatakan PHP merupakan bahasa yang

embedded.

A. Memulai PHP

Kita bisa menggunakan Notepad untuk membuat script PHP, meskipun ada software

editor lain yang lebih canggih misalnya PHP Designer, dll. Kode PHP diawali dengan tanda <?

dan diakhiri dengan ?>. Cara lain adalah diawali dengan <?php dan diakhiri dengan ?>.

Berikut contoh script PHP sederhana:

coba1.php

<?PHP echo "Ini adalah script PHP saya yang pertama<BR>"; echo "Saya sedang belajar PHP"; ?>

Simpan dan jalankan di browser, lihat apa yang tampak. Fungsi echo adalah mencetak terhadap

teks yang diapit oleh tanda " ke dalam browser. Script PHP bisa juga ditulis dalam tag HTML.

coba2.php

<html> <head><title>contoh script PHP dalam html</head> </head> <body> <?PHP Echo "ini adalah teks yang disisipkan ke dalam tag HTML"; ?> </body> </html>

B. Mengenal Variabel

Dalam PHP, variabel yang akan digunakan tidak didefinisikan terlebih dahulu. Variabel

dalam PHP bersifat case-sensitive artinya besar kecil huruf berpengaruh. Setiap nama variabel

dalam PHP diawali dengan $. Contoh $variabel1, $var1, $var2. Perlu diingat bahwa $VAR10 itu

berbeda dengan $Var10 (ingat sifat case-sensitive).

Contoh script

var1.php

<?PHP $a = 100; $b = 50; $c = $a+$b; echo "Isi dari variabel a = $a<br>"; echo "Isi dari variabel b = $b<br>"; echo "a + b = $c"; ?>

Lihat apa yang tampak!! Bagaimana bila kita ingin mencetak di browser $a?? sertakan tanda \$

di depan a. Sehingga scriptnya menjadi


var2.php

<?PHP $a = 100; $b = 50; $c = $a+$b; echo "Isi dari variabel \$a = $a<br>"; echo "Isi dari variabel \$b = $b<br>"; echo "\$a + \$b = $c"; ?>

Bandingkan perbedaan tampilan dari var1.php dengan var2.php!

1. Tipe data variabel

Pada contoh var1.php dan var2.php di atas, tipe data dari variabel $a, $b, dan $c adalah

integer (bulat) karena assignment terhadap ketiganya melibatkan bilangan bulat (100, 50,

serta 100+50). Berikut contoh variabel yang bertipe data real.

var3.php

<?PHP $x = 1.25; $y = 10; $z = $x+$y; echo "Isi dari variabel \$x = $x<br>"; echo "Isi dari variabel \$y = $y<br>"; echo "\$x + \$y = $z"; ?>

Pada contoh diatas, variabel $x bertipe data real karena diassign oleh nilai 1.25 (real), akan

tetapi $y bertipe data integer karena diassign oleh nilai 10 (integer). Sedangkan $z bertipe

data real karena real+integer dihasilkan real. Untuk assignment dengan tipe data

string/char, perhatikan contoh berikut:

var4.php

<?PHP $text1 = "Pemrograman web"; $text2 = "dengan PHP"; echo "Isi dari variabel \$text1 = $text1<br>"; echo "Isi dari variabel \$text2 = $text2<br>"; echo "Gabungan dari \$text1 dan \$text2 adalah = $text1 $text2"; ?>

2. Menerima masukan user

Secara umum masukan dari user melalui sebuah form yang kemudian akan disubmit untuk

selanjutnya diproses oleh script PHP, dan akhirnya diperoleh suatu output yang ditampilkan

pada browser. Sebagai contoh, kita akan membuat aplikasi web interaktif yang meminta user

memasukkan 2 buah bilangan sebarang, kemudian script PHP akan memberikan output hasil

jumlahan 2 buah bilangan tersebut. Untuk itu, terlebih dahulu kita membuat form dan

simpan sebagai file form.html

form.html

<html> <head><title>Form Penjumlahan</title></head>


<body> <form method=post action=form.php> Bilangan pertama <input type=text name=bil1><br> Bilangan kedua <input type=text name=bil2><br> <input type=submit name=submit value=Jumlahkan> <input type=reset name=reset value=Hapus> </form> </body> </html>

Sedangkan script untuk pengolahan input (form.php) isinya adalah sbb:

form.php

<?PHP $bil1=$_POST['bil1']; $bil2=$_POST['bil2']; $hasil = $bil1 + $bil2; echo "Hasil jumlahan adalah $hasil"; ?>

Perhatikan isi dari form.html di atas! Pada bagian action diisi oleh form.php, ini artinya

ketika tombol submit/jumlahkan diklik maka selanjutnya input bil1 dan bil2 (dari name)

dikirim ke file form.php untuk diproses. Selain menggunakan form untuk memberikan input,

kita juga bisa menggunakan url untuk memberikan input. Coba ketikkan url berikut pada

address browser Anda http://…/form.php?bil1=10&&bil2=50 Maksud dari url tersebut

adalah memanggil file form.php serta memberikan nilai pada variabel bil1 dan bil2 dalam

file tersebut dengan nilai masing-masing 10 dan 50. Selanjutnya browser akan menampilkan

hasil jumlahan yang adalah 60.

3. Operator Aritmatika

+ penjumlahan

- pengurangan

* perkalian

/ pembagian

% modulo

++ increment, contoh: a++ sama artinya

dengan a = a+1

-- decrement, contoh: a-- sama artinya

dengan a = a-1

4. Operator Logika

&& and

|| or

== sama dengan

!= tidak sama dengan

< lebih kecil

> lebih besar

<= lebih kecil sama dengan

>= lebih besar sama dengan

XOR xor (exclusive OR)


C. Struktur Kontrol

Seperti halnya bahasa pemrograman yang lain, struktur kontrol pada PHP meliputi

kondisional (IF … ) dan looping/perulangan.

1. Kondisional

Ada 3 macam tipe kondisional, yaitu

a. IF

Sintaks:

IF (kondisi)

{

Aksi

}

Keterangan: Aksi akan dijalankan apabila kondisi bernilai TRUE.

Contoh:

File : if1.php

<?PHP $x = 100; $y = 150; if ($x < $y) { echo "y lebih besar daripada x"; } ?>

b. IF … ELSE …

Sintaks:

If (kondisi)

{

Aksi 1

}

else {

Aksi 2

}

Keterangan:

Apabila kondisi bernilai TRUE maka yang akan dijalankan adalah Aksi 1, sedangkan

bila kondisi bernilai FALSE maka yang akan dijalankan adalah Aksi2.

Contoh:

if2.php

<?PHP $x = 100; $y = 50; if ($x < $y) { echo "y lebih besar daripada x"; }

else { echo "y lebih kecil daripada x"; } ?>

IF … ELSE … juga bisa berbentuk

if (kondisi1)

{

aksi 1


}

else if (kondisi2)

{

aksi 2

}

else

{

aksi 3

}

Keterangan:

Apabila kondisi1 bernilai TRUE, maka aksi 1 dijalankan. Aksi 2 akan dijalankan

apabila kondisi1 bernilai FALSE dan kondisi2 bernilai TRUE. Sedangkan Aksi 3 akan

dijalankan apabila kondisi1 dan kondisi2 bernilai FALSE.

Contoh:

if3.php

<?PHP $nilai = 75; if ($nilai >= 80) { $nilai_huruf = "A"; } else if ($nilai >= 70) { $nilai_huruf = "B"; } else if ($nilai >= 60) { $nilai_huruf = "C"; } else if ($nilai >= 40) { $nilai_huruf = "D"; } else { $nilai_huruf = "E"; } echo "Nilai Angka = $nilai<br>Nilai Huruf = $nilai_huruf"; ?>

Dengan menggunakan kondisional IF … ELSE kita dapat membuat script PHP dalam

satu file yang isinya form dan script pengolahannya. Sebagai contoh, kita akan membuat

script yang hampir sama dengan contoh terdahulu yaitu meminta user memasukkan 2

bilangan sebarang kemudian akan tampil hasil jumlahan kedua bilangan tersebut.

input1.php

<?PHP echo "<html><head><title>Contoh masukan dan proses dalam satu file</title></head><body>"; If ($submit1) {

$hasil = $bil1 + $bil2; echo "Hasil jumlahan kedua bilangan adalah $hasil";

} else {

echo "<form method=post action=$PHP_SELF> Bilangan pertama <input type=text name=bil1><br> Bilangan kedua <input type=text name=bil2><br> <input type=submit name=submit1 value=Jumlahkan> <input type=reset name=reset value=Hapus></form><br>";

} echo "</body></html>"; ?>


Keterangan:

Pertama kali file input1.php dipanggil di browser, akan tampil form karena pada

awalnya nilai dari variabel $submit1 adalah FALSE. Setelah diklik disubmit maka nilai

$submit1 adalah TRUE (perhatikan name=submit1 pada <input type=submit

name=submit1 value=Jumlahkan>), maka akan tampil hasil jumlahan kedua

bilangan, sedangkan form tidak kelihatan. $PHP_SELF merupakan variabel yang

isinya adalah nama file itu sendiri yaitu input1.php. Jadi dalam hal ini apabila kita

mengisikan action=input1.php akan sama dengan bila diisi action=$PHP_SELF.

Perhatikan contoh berikut yang memiliki kasus yang hampir sama dengan di atas.

input2.php

<?PHP echo "<html><head><title>Contoh masukan dan proses dalam satu file</title></head><body>"; echo "<form method=post action=$PHP_SELF> Bilangan pertama <input type=text name=bil1><br> Bilangan kedua <input type=text name=bil2><br<input type=submit name=submit1 value=Jumlahkan><input type=reset name=reset value=Hapus></form><br>"; If ($submit1) { $hasil = $bil1 + $bil2; echo "Hasil jumlahan kedua bilangan adalah $hasil"; } echo "</body></html>"; ?>

Ketika script di atas dijalankan pertama kali maka akan tampil form. Hasil jumlahan

tidak tampak karena kondisi $submit1 masih FALSE. Setelah disubmit, masih akan

tampak form dengan hasil jumlahan di bawah form tersebut. Bandingkan dengan script

sebelumnya. Hal ini dikarenakan tampilan form tidak ditentukan oleh suatu kondisi

(tidak di dalam IF… ELSE…). Sedangkan dalam script sebelumnya, form terletak di IF

… ELSE …

c. Switch

SWITCH juga hampir sama dengan IF …

Struktur SWITCH adalah

Switch(kondisi)

{

case konstanta1 :

pernyataan1;

break;

case konstanta2 :

pernyataan2;

break;

case konstanta3 :

pernyataan3;

break;

.

default :

pernyataan default;

}


Keterangan:

Pernyataan1 akan dijalankan apabila dipenuhi kondisi = konstanta1, demikian pula

untuk pernyataan2 dan pernyataan3. Sedangkan apabila tidak ada konstanta yang

memenuhi kondisi, maka yang akan dijalankan adalah pernyataan default.

Perhatikan contoh script di bawah ini!

switch1.php

<?PHP echo "<html><head><title>Contoh Switch 1</title></head><body>"; echo "<a href=$PHP_SELF?op=link1>ini adalah link1</a><br>"; echo "<a href=$PHP_SELF?op=link2>ini adalah link2</a><br>"; echo "<a href=$PHP_SELF?op=link3>ini adalah link3</a><br><br>"; switch ($op) {

case "link1" : echo "Anda telah mengklik link1<br>"; echo "Silakan Anda klik yang lain"; break;



default : echo "Anda belum mengklik link"; } echo "</body></html>"; ?>

2. Looping (Perulangan)

Yang termasuk dalam struktur looping adalah FOR dan WHILE…, dan DO … WHILE…

a. FOR

Sintaks:

FOR (nilai awal; kondisi; increment)

{

pernyataan1;

pernyataan2;

}

Keterangan:

Pernyataan1 dan pernyataan2, dst akan terus dijalankan selama kondisi yang

diberikan bernilai TRUE.

Perhatikan contoh berikut:

loop1.php

<?PHP For($i=0;$i<=10;$i++) {

echo "$i<br>"; } ?>


Pada contoh di atas, nilai awal dari $i adalah 0, incrementnya adalah naik satu-satu

(karena $i++ sama dengan $i = $i +1). Selama kondisi $i <= 10 bernilai TRUE maka

akan terus mencetak nilai $i. Nilai $i pertama yang tercetak adalah 1 (bukan 0) karena

pada iterasi pertama langsung terkena increment (ditambah 1).

b. While

Sintaks:

While(kondisi)

{

pernyataan1;

pernyataan2;

}

Keterangan:

Pernyataan1, pernyataan2, dst akan terus dijalankan selama kondisi bernilai TRUE.

Contoh:

loop2.php

<?PHP echo "<html><head><title>Contoh WHILE</title></head><body>"; $j = 1; while($j<=7) {

echo "<font face=verdana size=$j>Teks ini berukuran $j</font><br>"; $j++;

} echo "</body></html>"; ?>

c. Do ... While ...

Sintaks:

DO

{

pernyataan1;

pernyataan2;

}

WHILE(kondisi);

Hampir sama dengan WHILE, namun perbedaannya adalah paling tidak sekali

pernyataan1, pernyataan2, dst akan dijalankan. Hal ini karena pengecekan kondisi

berada di akhir, beda halnya dengan WHILE sebelumnya. Pada WHILE sebelumnya,

sebelum masuk perulangan dicek dulu apakah kondisinya TRUE atau FALSE.

Sedangkan pada DO … WHILE, dikerjakan dulu baru dicek.

Contoh:

Pernyataan WHILE dari script sebelumnya juga dapat dinyatakan sebagai DO

… WHILE

loop3.php

<?PHP echo "<html><head><title>Contoh DO… WHILE</title></head><body>"; $j = 1;


do {

echo "<font face=verdana size=$j>Teks ini berukuran $j</font><br>"; $j++; } while($j<=7); echo "</body></html>"; ?>

D. Modulasi

Modularisasi dalam pemrograman umum dilakukan dan sangat diperlukan untuk

mempermudah debugging dan pengembangan program. Modularisasi berarti melakukan

pembuatan program berdasarkan modul-modul. Modul dapat berupa fungsi maupun prosedur.

Dengan memiliki modul-modul ini diharapkan pemrogram dapat dengan mudah dan cepat

mengembangkan aplikasi-aplikasi yang dibutuhkan. Setiap kali ada modul tambahan,

pemrogram harus mengumpulkannya dalam suatu library menjadi semacam koleksi. Sehingga

saat dibutuhkan pemrogram cukup menggabunggabungkannya saja.

1. Require

Require adalah suatu bentuk fungsi untuk menggabungkan suatu script PHP atau teks dari

file lain dengan script PHP yang memanggilnya. Script atau file yang digabung tidak harus

berisi script program PHP.

Teknik require cocok untuk membuat template yang memudahkan proses pengembangan

aplikasi dengan menggunakan template. Pemrogram dan desainer web dapat dengan mudah

melakukan kerja tim untuk membangun suatu situs web.

Contoh:

Diinginkan tampilan untuk halaman web yang kita bangun mempunyai konsistensi pada

layout, bahwa ada header dan footer, dan pada bagian tengah ada isinya. Untuk itu kita dapat

membagi untuk bagian header dan footer sebagai file tersendiri. Setiap halaman yang akan

ditampilkan dapat memanggil/menggabungkan header dan footer ini dengan menggunakan

require.

Header.php

<html> <head><title>Demo Require</title> </head> <body> <h1>Judul</h1> Ini adalah contoh penggunaan require<BR>

Footer.php

<p> </p> <hr> <small>Copyright 2003 - By CV. Benang Ruwet</small> </body> </html>

isi.php

<?PHP


Require "header.php"; ?> <hr> Selamat Datang <p> Bagian ini merupakan bagian isi I</p> <a href=isi2.php>Klik di sini</a> <?PHP Require "footer.php"; ?>

isi2.php

<?PHP Require "header.php"; ?> <hr> Selamat Datang <p> Bagian ini merupakan bagian isi II</p> <a href=isi.php>Klik di sini</a> <?PHP Require "footer.php"; ?>

2. Include

Sintak : include(“header.php”);

isi3.php

<?PHP include ("header.php"); ?> <hr> Selamat Datang <p> Bagian ini merupakan bagian isi III</p> <a href=isi.php>Klik di sini</a> <?PHP include ("footer.php"); ?>

SQL Pendahuluan

Mysql adalah sebuah Database Open Source populer di dunia. Penggunaan nya sebagai

database bahasa pemrograman populer seperti PHP dan Java adalah hal umum. Untuk

memudahkan penggunaan Mysql, terdapat Software open source berbasis GUI, yakni

phpmyadmin, yang dapat di download secara gratis di situs www.phpmyadmin.net. Phpmyadmin

ini juga terdapat secara default pada Xampp (www.apachefriends.org), yaitu software yang

membundle apache,php dan mysql serta Perl, di tambah modul-modul tambahan.

Database Mysql dan Phpmyadmin

Pengertian

Database : Database adalah sebuah system yang di buat untuk mengorganisasi,

menyimpan dan menarik data dengan mudah. Database terdiri dari kumplan data yang

terorganisir untuk 1 atau lebih penggunaan, dalam bentuk digital. Database digital di manage

menggunakan Database Management System (DBMS), yang menyimpan isi database,


mengizinkan pembuatan dan maintenance data dan pencarian dan akses yang lain. Beberapa

Database yang ada saat ini adalah : Mysql, Sql Server, Ms.Access, Oracle, dan PostgreSql.

Pengenalan MySQL

MySQL adalah salah satu jenis database server yang sangat terkenal. MySQL

menggunakan bahasa SQL untuk mengakses database nya. Lisensi Mysql adalah FOSS License

Exception dan ada juga yang versi komersial nya. Tag Mysql adalah “The World's most popular

open source database”.

MySQL tersedia untuk beberapa platform, di antara nya adalah untuk versi windows dan

versi linux. Untuk melakukan administrasi secara lebih mudah terhadap Mysql, anda dapat

menggunakan software tertentu, di antara nya adalah phpmyadmin dan mysql yog. Pada

kesempatan kali ini, kita akan menggunakan phpmyadmin, yang terdapat dalam bundle xampp,

yang dapat di peroleh di www.apachefriends.org.

Phpmyadmin.

Phpmyadmin adalah sebuah aplikasi open source yang berfungsi untuk memudahkan

manajemen MySQL. Dengan menggunakan phpmyadmin, anda dapat membuat database,

membuat tabel, menginsert, menghapus dan mengupdate data dengan GUI dan terasa lebih

mudah, tanpa perlu mengetikkan perintah SQL secara manual.

PhpMyadmin dapat di download secaara free di http://www.phpmyadmin.net. Saat

tulisan ini di buat, versi phpmyadmin terbaru adalah phpmyadmin 3.3.10. Karena berbasis web,

maka phpmyadmin dapat di jalankan di banyak OS, selama dapat menjalankan webserver dan

Mysql.

Xampp

Xampp adalah sebuah paket kumpulan software yang terdiri dari apache, mysql,

phpmyadmin, php, Perl, Freetype2,dll. Xampp berfungsi untuk memudahkan instalasi

lingkungan php, di mana biasa nya lingkungan pengembangan web memerlukan

php,apache,mysql dan phpmyadmin serta software-software yang terkait dengan pengembangan

web. Dengan menggunakan xampp, kita tidak perlu menginstall aplikasi-aplikasi tsb satu

persatu.

Paket aplikasi perlu di extract dan di install terlebih dahulu, dengan memilih jenis xampp

sesuai dengan jenis OS nya.Setelah sukses menginstall xampp, kita dapat langsung mengaktifkan

Mysql dengancara mengaktifikan xampp. Pada Linux, cara mengaktifkan Mysql dan

phpMyadmin sbb :

1. Login ke user root

2. Masuk ke direktory /opt/lampp

3. Ketik : #./lampp start

4. Maka akan memulai xampp , termasuk mengaktifkan phpmyadmin.

5. Selanjutnya, anda bisa masuk ke phpmyadmin, dengan cara :

http://localhost/phpmyadmin


Pada Windows, untuk mengaktifkan phpmyadmin dengan cara sbb :

1. Aktifkan phpmyadmin pada Panel

2. Ketik : http://localhost/phpmyadmin

Maka akan terlihat tampilan layar seperti ini :

Gambar VII.1 : Tampilan tables sebuah database

Membuat Database :

Membuat Database, dapat di lakukan dengan cara :

1. Klik link localhost pada bagian atas dan isilah nama database baru nya.

Membuat dan Mengelola Tabel

Setelah kita membuat Database, maka selanjut nya adalah kita akan mencoba membuat Tabel,

sbb :

1. Pilih Database dan masukkan nama tabel pada kolom yang tersedia.

2. Masukkan jumlah fields nya.

3. Isilah nama field, pilih jenis type dan isi jumlah length nya.

4. Tentukan juga primary field nya

Untuk mengisi data di dalam sebuah tabel, dapat dengan mengklick link insert. Tabel adalah

sebuah set elemen data (nilai) yang di organisasikan menggunakan sebuah model vertikal

(kolom) atau di sebut field dan horizontal (baris). Sebuah tabel memiliki jumlah kolom tertentu .

Tabel dapat juga di sebut dengan Relasi.

Sebuah database dapat memiliki 1 atau lebih Tabel. Sebuah tabel dapat memiliki feature sbb :

- Primary key : Sebuah key yang unique yang menyatakan id dari setiap baris

- auto_increment : Sebuah field yang bertambah nilai 1 secara otomatis, ketika ada data

yang di masukkan.

Beberapa Feature yang ada di dalam phpmyadmin adalah sbb :


- Feature menjalankan SQL secara manual

- Status Information

- Pengaturan Hak akses user

- Export dan Import database dan table

Database Mysql dan Phpmyadmin

Tipe Data

Pada Mysql, terdapat beberapa tipe data yang dapat di gunakan di dalam pembuatan tabel.

Contoh pada tabel Mahasiswa :

Pada tipe data integer, dapat di peroleh informasi sbb :

No Nama Tipe Data Storage

Bytes

Range Value (Signed/Unsigned)

1 Tinyint 1 -128 – 127 / 0 - 255

2 smallint 2 -32768 – 32767 / 0 - 65535

3 mediumint 3 -8388608 – 8388607 / 0 - 16777215

4 int 4 -2147483648 – 2147483647 /

0 - 4294967295

5 bigint 8 -9223372036854775808 –

9223372036854775807 /

0 - 18446744073709551615

Tipe data lain yang ada pada Mysql adalah sbb :

Data float :

- Float

- Real

- Double

- Decimal

Data String :

- Varchar

- Text

- Date

Pengoperasian Database I

Untuk mengoperasikan database Mysql dengan phpmyadmin, kita perlu mengerti bahasa

SQL, walaupun kita tetap bisa memanage database tanpa SQL, namun untuk kepentingan

pemrograman dan pengolahan database lebih lanjut, SQL adalah hal yang penting untuk di

ketahui.


Pengertian SQL

SQL (Structured Query Language) adalah sebuah bahasa scripting yang di pergunakan untuk

mengolah database. Database besar seperti Mysql, PostgreSQL dan SQL Server sudah

menggunakan SQL untuk mengolah database nya. SQL yang di pergunakan software database

tsb adalah sama kecuali sedikit perbedaan di beberapa tempat.

Pada kesempatan kali ini, kita akan menggunakan SQL pada Mysql. Kita akan menggunakan

database sbb :

Nama Database : test

nama tabel : mahasiswa

struktur tabel :

No Field Tipe Data Length/Values Keterangan

1 Nrp Varchar 15 PK

2 Nama Varchar 40

3 tempat_lahir Varchar 35

4 tgl_lahir Date

5 Alamat Varchar 50

6 no_telp Varchar 50

Berikut adalah beberapa syntax di dalam SQL, yaitu :

create database

Fungsi : Untuk membuat database

Struktur : create database nama_database

Keterangan : Untuk membuat sebuah database

Contoh : create database test

create table

Fungsi : Untuk membuat sebuah tabel

Struktur : create table nama_tabel (field1 tipe data(jumlah karakter), field2 tipe data

(jumlah karalter));

contoh : create tabel siswa (nama varchar(45), alamat varchar(60));

Select

Fungsi : Untuk menampilkan isi dari sebuah tabel

Struktur : select nama_kolom from nama_tabel

Keterangan : Untuk menampilkan data di nama kolom di tabel nama_tabel

Contoh : select nama from mahasiswa

Keterangan : Menampilkan isi nama di tabel mahasiswa.

Select nrp,nama from mahasiswa

Keterangan : Menampilkan isi nrp dan nama di tabel mahasiswa

Untuk menampilkan semua field, gunakan *.


where

Fungsi : Untuk filter dengan kriteria mana saja, sebuah tabel di tampilkan

Contoh : select * from mahasiswa where nama=”Akhmad Sofwan”

Perintah where dapat di gunakan untuk perintah select, update dan delete.

and

Fungsi : Untuk penghubung operator and atau dan

Perintah and dapat di gunakan untuk perintah select, update dan delete

or

Fungsi : Untuk penghubung operator or

Perintah or dapat di gunakan untuk perintah select, update dan delete

Tabel hasil nilai dari and dan or

Nilai A Nilai B Or And

0 0 0 0

1 0 1 0

0 1 1 0

1 1 1 1

Contoh : select nama, alamat from mahasiswa where nama=”Budiman” and

tempat_lahir=”Jakarta”

Keterangan : Menampilkan nama dan alamat dari tabel mahasiswa untuk nama Budiman

dan tempat lahir di Jakarta

order

Fungsi : Untuk mengurutkan data ascending atau descending berdasarkan field

tertentu.

Struktur : select * from nama_tabel order by field1

Perintah order umum nya di gunakan pada perintah select.

Contoh : select * from mahasiswa order by nama

Keterangan : Menampilkan data tabel mahasiswa dan mengurutkan data nya berdasarkan

nama

Insert

Fungsi : Untuk memasukkan data ke dalam sebuah tabel

Struktur : insert into nama_tabel (field1,field2,field3) values (“nilai1”,”nilai2”,”nilai3”)

Contoh : insert into mahasiswa (nrp,nama,tempat_lahir) values (“101101”,”andi

ali”,”jakarta”)

Keterangan : Memasukkan nilai 101101 ke field nrp, andi ali ke field nama dan jakarta ke

field tempat_lahir.

Update

Fungsi : Untuk mengupdate isi dari sebuah tabel.


Struktur : update nama_tabel set field1=”isi1”

contoh : update mahasiswa set tempat_lahir=”Surabaya”

Keterangan : merubah field tempat lahir menjadi surabaya

update mahasiswa set tempat_lahir=”Surabaya” where nama=”Budiman”

Keterangan : merubah field tempat lahir menjadi surabaya yang nama nya adalah Budiman

Delete

Fungsi : Untuk menghapus sebuah atau beberapa record dalam sebuah tabel

Struktur : delete from nama_tabel

Contoh : delete from mahasiswa where nama=”Budiman”

Keterangan : Menghapus isi dari tabel mahasiswa yang nama nya adalah Budiman

Pengoperasian Database II

Kita akan menggunakan tabel mahasiswa dengan nilai sbb :

Nrp nama tempat_lahir tgl_lahir alamat no_telp

1011500001 Budiman Jakarta 27 Juni 1990 Jl.Beo No.11 021- 888888

1011500006 Siti Aminah Semarang 1 Juni 1991 Jl.Kerinci No.15 021.78787878

1011500018 Ujang Bandung 2 Juni 1992 Jl.Kerbau No.8 021-7355375

1011500019 Dino Surabaya 4 Juni 1990 Jl.Kecapi No.18 021-7459087

1011500025 Dini Jogjakarta 6 Juni 1990 Jl.Rambutan No.99 021-7767981

1011500044 Amin Jakarta 1 Juli 1991 Jl.Sungai No.100 021-7756789

Between

Fungsi : Untuk memilih data pada range tertentu

Struktur : select field1,field2 from nama_tabel where field 2 between nilai1 and nilai2

Contoh : select nrp,nama from mahasiswa where right(nrp,3) between '001' and '006'

Keterangan : Menampilkan field nrp dan nama dari tabel mahasiswa yang memiliki nilai

nrp dari kanan di antara '001' dan '006'

Hasil nya akan tampil sbb :

nrp nama

1011500001 Budiman

1011500006 Siti Aminah

Max

Fungsi : Untuk menampilkan nilai terbesar dari suatu field dengan tipe apa saja, tidak

hanya untuk tipe numerik saja.

Struktur : select max(nama_field) from nama_tabel

Contoh : select max(nrp) from mahasiswa

Keterangan : Menampilkan nrp maximal yang di ambil dari nilai nrp.



max(nrp)

1011500044

Min

Fungsi : Untuk menampilkan nilai terkecil dari suatu field

Struktur : select min(nama_field) from nama_tabel

Contoh : select min(nrp) from mahasiswa

Keterangan : Menampilkan nrp minimal yang di ambil dari nilai nrp.


min(nrp)

1011500001

Sum

Fungsi : Untuk menampilkan jumlah dari sebuah field

Struktur : select sum(nama_field) from mahasiswa

Contoh : select sum(nilai) from nilai

Keterangan : Menjumlahkan data field nilai dari tabel nilai

Maka akan menghasilkan output sbb :

sum(nilai)

505

Group by

Fungsi : Untuk menampilkan jumlah sebuah nilai dan di group berdasarkan suatu field

tertentu.

Struktur : select nama_field1,sum(nama_field2) as nama_nilai from nama_tabel group

by nama_field1

Contoh : select nrp,sum(nilai) as jumlah_nilai from nilai group by nrp

Keterangan : Menampilkan field nrp dan jumlah dari field nilai di group berdasarkan nrp.

Hasil :

nrp jumlah_nilai

1011500001 185

1011500006 170

1011500025 70

1011500044 80

Having

Fungsi : Untuk memfilter tampilan berdasarkan nilai group by

Struktur : select nama_field1,sum(nama_field2) as nama_nilai from nama_tabel group

by nama_field1 having sum(nama_field2)>number

Contoh : select nrp,sum(nilai) as jumlah_nilai from nilai group by nrp having

sum(nilai)>100


Keterangan : Menampilkan field nrp dan jumlah dari field nilai di group berdasarkan nrp

dengan kriteria penjumlahan nilai masing-masing nrp lebih dari 100.

As

Fungsi : Untuk memberi nama lain kepada sebuah tabel atau field, dengan maksud

untuk menyingkat penamaan atau memberi nama lain.

Struktur : select nama_field1 as nama_field2 from nama_tabel1

Contoh : select nrp,nama as nama_mahasiswa from mahasiswa

Keterangan : Merename field nama menjadi nama_mahasiswa

Hasil :

nama_mahasiswa

Budiman

Siti Aminah

Ujang

Dino

Dini

Amin

Use

Fungsi : Untuk menggunakan sebuah database, terutama jika database yang akan

dipergunakan tersebut belum aktif.

Struktur : use nama_database

Contoh : use mahasiswa

Length

Fungsi : Untuk menghitung banyak karakter data yang di tampilkan, termasuk spasi.

Struktur : select length(nama_field) from nama_tabel

Contoh : select nama,length(nama) as panjang_nama from mahasiswa

Hasil :

nama panjang_nama

Budiman 7

Siti Aminah 11

Ujang 5

Dino 4

Dini 4

Amin 4

Trim

Fungsi : Untuk menghapus spasi pada sebuah karakter

Struktur : select trim(karakter) from nama_tabel

contoh : select trim(“ Sofwan “) as hasilnya;


Hasil :

Sofwan

Terdapat varian nya, yaitu :

Ltrim → Untuk menghilangkan spasi yang terletak di sebelah kiri dari sebuah karakter.

Rtrim → Untuk menghilangkan spasi yang terletak di sebelah kanan dari sebuah

karakter.

PENGOPERASIAN DATABASE III

A. Mengoperasikan database dengan tabel lebih dari 1

Seringkali dalam menampilkan sebuah data, kita perlu menggunakan lebih dari 1 tabel,

bisa 2, 3 atau lebih, karena data yang akan di tampilkan terletak pada beberapa tabel dan setiap

tabel memiliki keterkaitan melalui primary key dan foreign key nya.

Contoh :

Terdapat 2 tabel, yaitu :

Tabel : mahasiswa

Nrp nama tempat_lahir tgl_lahir alamat no_telp

1011500001 Budiman Jakarta 27 Juni 1990 Jl.Beo No.11 021- 888888

1011500006 Siti Aminah Semarang 1 Juni 1991 Jl.Kerinci No.15 021.78787878

1011500018 Ujang Bandung 2 Juni 1992 Jl.Kerbau No.8 021-7355375

1011500019 Dino Surabaya 4 Juni 1990 Jl.Kecapi No.18 021-7459087

1011500025 Dini Jogjakarta 6 Juni 1990 Jl.Rambutan No.99 021-7767981

1011500044 Amin Jakarta 1 Juli 1991 Jl.Sungai No.100 021-7756789

Tabel : nilai_algoritma

Id Nrp nilai

1 1011500001 80

2 1011500006 70

3 1011500018 60

4 1011500044 90

Kita akan menampilkan data sbb :

Nrp,nama dan nilai yang hanya berisi record yang ada nilai nya di tabel nilai_algoritma.

1. Inner Join

Fungsi : Untuk menampilkan 1 atau lebih field di 2 atau lebih abel yang berbeda,

dengan mengacu kepada sebuah field yang memiliki data yang sama . Data

yang ditampilkan adalah data yang ada di kedua tabel tsb.

Contoh : Dalam kedua tabel tsb, kita akan menampilkan data sbb :

nrp,nama dan nilai.

Field nrp dan nama di ambil dari tabel mahasiswa

Field nilai di ambil dari tabel nilai_algoritma

Command : select a.nrp,a.nama,b.nilai from mahasiswa as a inner join nilai_algoritma

as b on a.nrp=b.nrp


Keterangan : Menampilkan field nrp, nama dan nilai berdasarkan kesamaan nrp pada

kedua tabel yang masing-masing memiliki data pada field nya. Jika ada

data yang tidak ada nilai nya, maka tidak di tampilkan.

Hasil :

nrp nama nilai

1011500001 Budiman 100

1011500001 Budiman 85

1011500006 Siti Aminah 90


1011500025 Dini 70

1011500044 Amin 80

2. left outer join

Fungsi : Untuk menampilkan 1 atau lebih field di 2 atau lebih tabel yang berbeda,


yang ditampilkan adalah data yang ada di tabel yang di sebelah kiri atau

yang pertama kali disebut pada perintah SQL.

Command : select a.nrp,a.nama,b.nilai from mahasiswa as a left outer join

nilai_algoritma as b on a.nrp=b.nrp

nrp nama nilai

1011500001 Budiman 100

1011500001 Budiman 85



1011500018 Ujang NULL

1011500019 Dino NULL

1011500025 Dini 70

1011500044 Amin 80

Pada hasil di atas, terdapat nilai NULL, itu karena syntax left outer join menjadikan tabel

yang sebelah kiri atau yang pertama kali di sebut (tabel : mahasiswa) sebagai referensi.

Dan jika tidak ada nilai nya berdasarkan tabel nilai_algoritma, maka data tetap akan di

tampilkan, namun nilai nya adalah NULL.

3. right outer join

Fungsi : Untuk menampilkan 1 atau lebih field di 2 atau lebih tabel yang berbeda,


yang ditampilkan adalah data yang ada di tabel yang di sebelah kanan atau

yang urutan kedua di sebut pada perintah SQL.

Command : select a.nrp,a.nama,b.nilai from mahasiswa as a right outer join

nilai_algoritma as b on a.nrp=b.nrp

nrp nama nilai

1011500001 Budiman 100



1011500001 Budiman 85


1011500018 Dini 70

1011500019 Amin 80

Pada hasil di atas, terdapat nilai NULL, itu karena syntax left outer join menjadikan tabel

yang sebelah kanan atau yang kedua kali di sebut (tabel : nilai_algoritma) sebagai

referensi. Dan jika tidak ada nilai nya berdasarkan tabel nilai_algoritma, maka data tetap

akan di tampilkan, namun nilai nya adalah NULL. Pada contoh di atas, kebetulan data nrp

di tabel nilai, juga ada nrp nya di tabel mahasiswa.

4. Join

Untuk mengambil data dari field pada 1 atau lebih tabel yang berbeda, dapat

menggunakan command dengan where. Contoh :

Menampilkan nrp,nama dan nilai.

Data-data nya di ambil dari nrp yang sama yang ada di kedua tabel tsb.

Contoh : select a.nrp,a.nama,b.nilai from mahasiswa as a right outer join nilai as b on

a.nrp=b.nrp

Hasil yang tampil adalah :

nrp nama nilai

1011500001 Budiman 100


1011500001 Budiman 85


1011500025 Dini 70

1011500044 Amin 80

Keterangan :

Hasil yang tampil adalah field nrp, nama dan nilai, yang mana, data-data nya di ambil

dari kedua tabel yang nrp nya sama. Cara ini menghasilkan hasil yang sama dengan inner

join.

Pada perintah penggabungan tabel di atas (inner join, left outer join, right outer join dan

where), dapat juga di terapkan pada 3, 4 atau lebih tabel. Yang penting, antara 1 tabel

dengan tabel yang lainnya, memiliki field yang sama, sebagai acuan atau kunci untuk

mengambil data.

B. Mengisi sebuah tabel dengan mengambil data di tabel lain

Misalkan kita akan membuat sebuah tabel yang bernama mahasiswa_a. Tabel ini

memiliki struktur sbb : nrp (varchar (10)) dan nama (varchar(40)) Tabel mahasiswa_a ini berisi

data yang di ambil dari tabel mahasiswa yang memiliki huruf awalan “A”. Untuk itu, kita dapat

menggunakan perintah berikut :

insert into mahasiswa_a (nrp,nama) select nrp,nama from mahasiswa where left(nama,2)=”A”


PENGOPERASIAN DATABASE IV

1. Syntax SQL

Pada bab ini, kita kembali mempelajari beberapa syntax SQL, yaitu :

Count,Concatenate,left,right,substring. Untuk tabel yang di gunakan dalam contoh script di

bawah, kita menggunakan tabel Mahasiswa dan nilai_algoritma, di bab XI di atas.

a. Count

Struktur : count(nama_field)

Keterangan : Menghitung jumlah record pada field tertentu

Contoh : select count(nrp) from mahasiswa

Hasil :

count(nrp)

7

b. Concatenate

Struktur : concat (nama_field,”keterangan”)

Keterangan : Menambahkan string tertentu pada data sebuah field

Contoh : select concat(nrp ,” mhs”) as hasil from mahasiswa

Hasil :

1011500001 mhs

1011500006 mhs

1011500018 mhs

1011500019 mhs

1011500025 mhs

1011500044 mhs

1011500008 mhs

c. left

Struktur : left(karakter, jumlah_karakter)

Keterangan : Mengambil karakter dari sebelah kiri

Contoh : select left(nrp,3) as hasil from mahasiswa

Hasil :

hasil

101

101

101

101

d. right

Struktur : right (karakter,jumlah_karakter)

Keterangan : Mengambil karakter dari sebelah kanan

Contoh : select right(nrp,3) as hasil from mahasiswa


hasil

001

006

018

019

025

044

008

e. substring

Struktur : substring(karakter,angka 1,angka 2)

Keterangan : Untuk mengambil karakter yang di mulai pada angka1, dengan panjang angka

2.

Contoh : substring(“Jakarta”,2,4);

2. Index

Index di pergunakan di dalam database untuk mempercepat pencarian sebuah data. Index

dalam database sama dengan index di dalam sebuah buku. Jika pada sebuah buku tentang

Binatang dan kita mencari semut, maka dari pada kita membuka halaman buku tersebut satu

persatu hingga kita mencari bab tentang semut, maka lebih baik dan lebih cepat, kita melihat

index, di halaman berapa bab Semut ada dan setelah itu, kita membuka halaman yang tertera

di index pada buku tsb. Maka proses pencarian menjadi lebih cepat. Sebuah index dapat

berdasarkan pada 1 atau lebih kolom.

Membuat index

Misal, pada tabel mahasiswa, kita akan membuat index pada nrp.

Create index idx_mahasiswa_nrp on mahasiswa (nrp)

Strategi membuat Index

a. Membuat index pada kolom yang bertipe integer Integer mengambil space lebih sedikit,

sehingga query berjalan lebih cepat.

b. Menjaga index agar sesempit mungkin Index yang lebih sempit membutuhkan sedikit

space, membutuhkan waktu yang lebih sedikit untuk proses.

c. Urutan kolom adalah penting Untuk index yang memiliki beberapa kolom, urutan kolom

di dalam index adalah penting. Penggunaan terbaik, adalah menggunakan kolom dengan

kardinalitas yang paling rendah sebagai index pertama dan kardinalitas tertinggi sebagai

yang terakhir. Untuk mengetahui kardinalitas sebuah kolom, dapat menggunakan perintah

distinct.

d. Kolom yang di setting index tidak bernilai NOT NULL

3. View

View adalah tabel bayangan atau virtual tabel. Sebuah view terdiri dari baris dan kolom,

seperti tabel. Perbedaan antara view dan tabel adalah, view di definisikan terletak di atas dari


tabel lain dan tidak memegang data secara real atau dengan kata lain, data sesungguh nya

berupa numerik dan karakter tidak berada di view. Jika data berubah di tabel sebenar nya,

maka view juga ikut berubah.

Keuntungan menggunakan view adalah :

a. Mudah di gunakan

View menyembunyikan ke kompleksitasan sebuah tabel dari end user, sehingga end

user tidak merasa berat melihat tabel yang kompleks.

b. Menghemat space

Views mengambil sedikit sekali space untuk di simpan, karena mereka tidak

menyimpan data sebenar nya.

c. Menambah keamanan data

Views hanya dapat kolom tertentu yang berada di dalam tabel, jadi hanya kolom yang

tidak sensitif yang di insert dan di ekspos ke dalam end user.

Perintah Membuat view

create view view_name as select nama_kolom(s) from table_name where condition

Contoh :

create view view_mhs as select nrp,nama from mahasiswa where tempat_lahir=”Jakarta”

Perintah update view

Sama dengan create view. Jika sebuah view di buat kembali, itu arti nya view tersebut di

update. Update di gunakan jika terdapat perubahan pada view, misal : penambahan field.

Menghapus view

drop view nama_view

Stored Procedure

Pengertian

Stored Procedure adalah sebuah kelompok kode SQL yang di simpan di katalog database

dan dapat di panggil kemudian oleh program, trigger atau bahkan stored procedure.

Sebuah Stored Procedure yang memanggil diri nya sendiri di sebut rekursif stored procedure.

Mysql sendiri mendukung penggunaan Stored Procedure sejak MySQL versi 5.x ke atas.

Keuntungan penggunaan Stored Procedure

Meningkatkan performance aplikasi.

Sebuah Stored Procedure di simpan dan di compile di katalog database yang mana dapat di

eksekusi lebih cepat di bandingkan SQL yang tidak di compile dari kode aplikasi.

Mengurangi traffic antara aplikasi dan database server.

Aplikasi hanya mengirim nama stored procedure untuk mengeksekusi SQL.

Dapat di gunakan kembali dan transparent ke aplikasi yang ingin menggunakan nya.

Aman.


Penggunaan Stored Procedure dapat di akses hak nya oleh aplikasi oleh Database

Administrator

Kerugian penggunaan Stored Procedure

Dapat mengakibatkan Database server membutuhkan memory dan prosessor lebih tinggi.

Stored procedure hanya berisi SQL deklaratif, sehingga sangat sulit untuk menulis sebuah

procedure dengan kompleksitas logika, seperti bahasa pemrograman yang di gunakan untuk

memprogram aplikasi.

Stored procedure tidak dapat di debug di hampir RDBMS, termasuk MySQL.

Membutuhkan keahlian khusus untuk menulis dan me maintain stored procedure yang tidak

setiap developer memiliki, sehingga dapat membuat ribet.

Membuat Stored Procedure

delimeter // create procedure nama_mhs() begin select * from mahasiswa; end // delimeter ;

Kita memulai nya dengan delimeter // dan di akhiri dengan // delimeter ; Body sql di mulai

dengan begin dan di akhiri dengen end.

Memanggil Stored Procedure

call nama_stored_procedure( )

Contoh :

call nama_mhs( );

Variabel di Stored Procedure

Variabel di gunakan untuk menyimpan prosedure ke penyimpanan hasil dengan segera. Anda

dapat mendeklarasikan sebuah variabel dengan syntax berikut :

DECLARE nama variabel tipe data (ukuran) DEFAULT nilai default;

Contoh :

DECLARE total_sales INT DEFAULT 0

Memberi Nilai ke variabel

Terdapat beberapa cara memberi nilai ke variabel, yaitu dengan cara :

- SET

Contoh :

DECLARE total_count INT DEFAULT 0 SET total_count =0 - SELECT … INTO DECLARE total_product INT DEFAULT 0 SELECT COUNT(*) INTO total_products FROM products


Ruang Lingkup Variabel

Sebuah variabel hanya berlaku di dalam ruang lingkup nya masing-masing, yaitu di antara

BEGIN dan END. Sebuah variabel yang di awali dengan tanda @, di sebut dengan variabel

session, yang tetap ada hingga session berakhir.

Parameter dalam Stored Procedure

Paramater, terdiri dari 3 bentuk, yaitu :

IN : Mode Default. Dapat di gunakan di dalam sebuah stored procedure, namun stored

procedure tidak dapat merubah nilai nya.

OUT : Parameter ini dapat di rubah oleh sebuah stored procedure yang di lewati nya.

INOUT : Dapat melewati stored procedure dan mendapatkan kembali nilai nya yang berbeda

dari program yang memanggil.

Syntax untuk mendefinisikan sebuah parameter:

MODE nama_parameter tipe_parameter (ukuran parameter)

Contoh :

DELIMETER // CREATE PROCEDURE tahun_mahasiswa(IN tahun_nrp VARCHAR (255)) BEGIN SELECT nrp,nama FROM mahasiswa WHERE left(nrp,2)=tahun_nrp END // DELIMETER ;

Dalam contoh di atas, kita mendapatkan, nrp dan nama yang filter nya adalah

left(nrp,2)=tahun_nrp Untuk memanggil nya, kita menggunakan :

CALL tahun_mahasiswa('10')

Conditional Control

Di Bahasa Pemrograman, Conditional Control adalah hal yang umum keberadaan nya. Stored

Procedure juga memiliki Conditional Control tsb. Penggunaan Conditional Control, menjadikan

kita dapat mengeksekusi sebuah perintah berdasarkan kriteria tertentu.

IF Statement

IF expression

THEN commands

END IF

IF expression

THEN commands

ELSE commands

END IF

Contoh :

CREATE PROCEDURE procedure1 (IN parameter1 INTEGER) BEGIN DECLARE variabel CHAR(10); IF parameter1=17 THEN SET variable1=”birds”;


ELSE SET variable1=”beasts”; END IF INSERT INTO table1 VALUES (variable1); END

CASE Statement

CASE

WHEN expression THEN commands

…

WHEN expression THEN commands

END CASE

Contoh :

SELECT nrp,nama CASE WHEN left(nrp,2)=”10” THEN SELECT “Tahun 2010” WHEN left(nrp,2)= “11” THEN SELECT “Tahun 2011” END CASE FROM mahasiswa

Menghubungkan Database MySQL dengan PHP

Selain dapat di gunakan sendiri untuk pengolahan data, Database juga dapat dihubungkan

dengan bahasa pemrograman untuk membuat sebuah aplikasi. Peran database di dalam

pembuatan aplikasi adalah sama, tetap sebagai penyimpan data. Di dalam pembuatan aplikasi,

terdapat berbagai macam operasi data dengan menggunakan bahasa SQL, seperti memasukkan ,

menampilkan dan menghapus data.

Sejak lama, database sudah menjadi penyimpanan data bagi aplikasi, selain file. MySQL sendiri

dapat berhubungan dengan beberapa bahasa pemrograman, seperti Visual Basic, Gambas, Visual

Foxpro, Java dan PHP.

Pada kesempatan kali ini, akan di tampilkan teknik menghubungkan bahasa pemrograman PHP

dengan database Mysql. Penulis mengasumsikan, pembaca sudah dapat mengeksekusi file php

dengan sebuah web server di dalam sebuah web browser.

Script menghubungan database dan menampilkan isi data

<?php $hubung_db=mysql_connect("localhost","root","opan"); if (!$hubung_db) die ("Database MySQL tidak dapat di buka"); $pilih_db=mysql_select_db("test"); if (! $pilih_db) die ("Database test tidak dapat di pilih"); $hasil=mysql_query("select * from mahasiswa"); while ($db=mysql_fetch_array($hasil)) { echo $db["nrp"]."<br/>";

} ?>

Script di atas menerangkan tentang mengakses database dan menampilkan isi dari sebuah tabel.

Script php dapat di gabungkan dengan script lain, seperti javascript, html dan css serta SQL. Dan

untuk membuat sebuah aplikasi web yang tangguh, kita memang harus menggunakan script-


script tsb. Pada pembahasan selanjut nya, akan di bahas mengenai Insert, Update dan Delete,

dengan bantuan script html, selain php dan SQL.

Memasukkan Data ke dalam tabel

Membuat Form input data

<html> <head> <title>Entry Data</title> </head> <body> <form method="post" action="proses.php"> <table> <tr> <td>Nrp</td><td>:</td><td><input type="text" name="vnrp" size="15"/></td> </tr> <tr> <td>Nama</td><td>:</td><td><input type="text" name="vnama” size="25"/></td> </tr> <tr> <td colspan="3"><input type="submit" value="Simpan"> <input type="reset" value="Reset" > </td> </tr> </table> </form> </body> </html>

Keterangan :

Script di atas adalah script html, yang membuat form untuk input data. Tampilan dari script di

atas adalah :

Ketika nrp dan nama telah di isi, lalu user menekan tombol simpan, maka akan menjalankan

script php, dengan nama file proses.php.

<?php $hubung_db=mysql_connect("localhost","root","opan"); if (!$hubung_db) die ("Database MySQL tidak dapat di buka"); $pilih_db=mysql_select_db("test"); if (! $pilih_db) die ("Database test tidak dapat di pilih"); if (isset($_POST['vnrp'])) { $xnrp=$_POST['vnrp']; } if (isset($_POST['vnama'])) { $xnama=$_POST['vnama']; } // Memasukkan data ke dalam tabel // $query_masuk="insert into mahasiswa_a (nrp,nama) values ('$xnrp','$xnama')"; $jalan_query=mysql_query($query_masuk); if ($jalan_query)


{ echo 'Data Berhasil di Simpan'; } else { echo 'Data Gagal di simpan'; }

?>