Anda di halaman 1dari 145

Web Programming

DAFTAR ISI

BAB 1 : Pengenalan Internet .................................................................................................................................... 6

1.1 Pengertian Internet.......................................................................................................................................... 7

1.2 Sejarah Internet ................................................................................................................................................ 7

1.3 Situs Web dan Halaman Web ........................................................................................................................ 8

1.3.1 Halaman Web............................................................................................................................................ 8

1.3.2 Situs Web ................................................................................................................................................... 8

1.4 Cara Kerja Halaman Web ............................................................................................................................... 8

1.5 Macam Macam Halaman Web....................................................................................................................... 9

BAB 2 : Menggunakan HTML ................................................................................................................................. 10

2.1 Pengertian dan Sejarah HTML .................................................................................................................... 11

2.2 Bersiap-Siap ..................................................................................................................................................... 12

2.2.1 Alternatif Text Editor ........................................................................................................................... 13

2.2.2 Alternatif Web Browser ...................................................................................................................... 14

2.3 “Halo, Dunia!”................................................................................................................................................... 15

2.4 Struktur Dokumen HTML ............................................................................................................................ 16

2.4.1 Mengunjungi Kembali “Halo, Dunia!”.............................................................................................. 18

2.5 Bekerja dengan Teks ..................................................................................................................................... 18

2.5.1 Membuat Paragraf................................................................................................................................. 19

2.5.2 Membuat Judul ....................................................................................................................................... 19

2.5.3 Membuat Daftar ..................................................................................................................................... 20

2.5.4 Memformat Teks.................................................................................................................................... 22

2.6 Bekerja dengan Link ...................................................................................................................................... 28

Diklat Web Programmer 1


CEP –CCIT FTUI
Web Programming

2.7 Bekerja dengan Gambar ............................................................................................................................... 30

2.8 Bekerja dengan Tabel .................................................................................................................................... 31

2.9 Bekerja dengan Formulir ............................................................................................................................. 33

2.10 Bekerja dengan Peta ................................................................................................................................. 36

BAB 3 : Menggunakan CSS ...................................................................................................................................... 39

3.1 Pengertian CSS ................................................................................................................................................. 40

3.2 Membuat dan Menghubungkan File CSS ................................................................................................. 40

3.3 Aturan CSS ........................................................................................................................................................ 42

3.3.1 Selector ..................................................................................................................................................... 42

3.3.2 Property dan Value ............................................................................................................................... 44

3.4 Menggunakan Warna .................................................................................................................................... 44

3.5 Memformat Teks ............................................................................................................................................. 46

3.6 Memberikan Margin ...................................................................................................................................... 48

3.7 Memberikan Border dan Padding ............................................................................................................. 49

3.8 Menggunakan Pseudo-Class ........................................................................................................................ 50

3.9 Menggunakan Gambar Latar....................................................................................................................... 52

BAB 4 : Mengatur Tata Letak Halaman Web .................................................................................................... 54

4.1 Membuat Kolom.............................................................................................................................................. 55

4.1.1 Kolom untuk Tata Letak ...................................................................................................................... 55

4.1.2 Kolom untuk Teks ................................................................................................................................. 59

BAB 5 : Pengenalan Basis Data ............................................................................................................................. 62

5.1 Pengertian Basis Data ................................................................................................................................... 63

5.2 Komponen dalam Basis Data ...................................................................................................................... 63

Diklat Web Programmer 2


CEP –CCIT FTUI
Web Programming

5.3 Relasi antar Tabel ........................................................................................................................................... 64

5.3.1 One-to-One Relationship..................................................................................................................... 65

5.3.2 One-to-Many Relationship.................................................................................................................. 65

5.3.3 Many-to-Many Relationship............................................................................................................... 65

BAB 6 : Menggunakan SQL ..................................................................................................................................... 67

6.1 Pengertian SQL ................................................................................................................................................ 68

6.2 Bekerja dengan Skema .................................................................................................................................. 68

6.3 Bekerja dengan Tabel .................................................................................................................................... 68

6.3.1 Membuat Tabel ...................................................................................................................................... 69

6.3.2 Mengubah Tabel .................................................................................................................................... 70

6.3.3 Menghapus Tabel .................................................................................................................................. 71

6.4 Bekerja dengan Data...................................................................................................................................... 72

6.4.1 Memasukkan Data ................................................................................................................................. 72

6.4.2 Mengambil Data ..................................................................................................................................... 72

6.4.3 Mengubah Data ...................................................................................................................................... 75

6.4.4 Menghapus Data .................................................................................................................................... 75

6.5 Menggunakan phpMyAdmin ....................................................................................................................... 76

6.5.1 Bekerja dengan Pengguna .................................................................................................................. 76

BAB 7 : Menggunakan PHP..................................................................................................................................... 80

7.1 Pengertian PHP ............................................................................................................................................... 81

7.2 Halo, Dunia! ...................................................................................................................................................... 81

7.3 Mendokumentasikan Dokumen PHP........................................................................................................ 83

7.4 Menggunakan Variabel ................................................................................................................................. 84

Diklat Web Programmer 3


CEP –CCIT FTUI
Web Programming

7.4.1 Tipe Data dalam Variabel.................................................................................................................... 86

7.5 Berkerja dengan Angka ................................................................................................................................ 87

7.6 Bekerja dengan String ................................................................................................................................... 88

7.7 Bekerja dengan Tanggal dan Waktu ......................................................................................................... 90

7.8 Memproses Formulir ..................................................................................................................................... 92

7.9 Membuat Halaman Dinamis ........................................................................................................................ 94

7.10 Menggunakan Array.................................................................................................................................. 96

7.10.1 Map ........................................................................................................................................................ 97

7.10.2 Array Multidimensi .......................................................................................................................... 98

7.11 Mengatur Alur program ........................................................................................................................... 99

7.11.1 Menggunakan Kondisi .................................................................................................................. 100

7.11.2 Menggunakan Percabangan ....................................................................................................... 102

7.11.3 Menggunakan Pengulangan ....................................................................................................... 106

7.12 Menggunakan Fungsi ............................................................................................................................. 110

BAB 8 : Menghubungkan PHP dengan Basis Data........................................................................................ 112

8.1 Membuat Koneksi ........................................................................................................................................ 112

8.2 Mengambil Data ........................................................................................................................................... 114

8.3 Memasukkan Data ....................................................................................................................................... 118

8.4 Mengubah Data ............................................................................................................................................ 120

8.5 Menghapus Data .......................................................................................................................................... 123

BAB 9 : Lebih Lanjut dengan PHP ..................................................................................................................... 125

9.1 Menggunakan Session ................................................................................................................................ 126

9.2 Menerima Upload Berkas .......................................................................................................................... 130

Diklat Web Programmer 4


CEP –CCIT FTUI
Web Programming

9.3 Mengirim E-Mail .......................................................................................................................................... 131

BAB 10 : Mendeploy Situs Web........................................................................................................................ 132

10.1 Membuat Akun......................................................................................................................................... 133

10.2 Mendeploy Basis Data ........................................................................................................................... 137

10.3 Mendeploy Situs Web ............................................................................................................................ 141

Diklat Web Programmer 5


CEP –CCIT FTUI
Web Programming

BAB 1 : PENGENALAN INTERNET

Diklat Web Programmer 6


CEP –CCIT FTUI
Web Programming

1.1 PENGERTIAN INTERNET

Internet adalah gabungan dari banyak jaringan-jaringan komputer yang terhubung secara global,
mulai dari jaringan komputer pribadi perseorangan, perusahaan, pendidikan, hingga pemerintahan.
Internet digunakan untuk saling bertukar informasi antara sebuah komputer dengan komputer lainnya
di berbagai belahan dunia dengan sangat cepat.

1.2 SEJARAH INTERNET

Cikal bakal internet berasal dari sebuah proyek yang dilaksanakan oleh DARPA (Defense Advanced
Research Project Agancy), sebuah agensi dari departemen pertahanan Amerika Serikat pada tahun
1958. Proyek ini bertujuan untuk menghubungkan komputer-komputer yang terdapat pada setiap
markas militer tentara Amerika Serikat sehingga proses komunikasi dan manajemen informasi dapat
terlaksana dengan lebih baik. Jaringan komputer antar markas tersebut dikenal dengan nama ARPANET.

Melihat kesuksesan dari ARPANET dalam mempercepat proses komunikasi jarak jauh, dunia bisnis
mulai tertarik dan berusaha untuk membuat jaringan yang serupa. Pada Maret 1976, ITU (International
Telecommunication Union), sebuah organisasi internasional yang berfungsi untuk mengatur standar
komunikasi, meresmikan sebuah protokol yang dinamakan X.25. Protokol ini berfungsi untuk
menetapkan standar komunikasi antar komputer melalui kabel telepon. Protokol ini pertama kali
digunakan oleh Kantor Pos Inggris, Western Union, dan Tymnet pada tahun 1978.

Dalam waktu singkat, protokol X.25 berkembang dengan pesat dan mulai menjangkau konsumen
pribadi pada tahun 1979. Walaupun begitu, layanan yang disediakan hanyalah berupa layanan surat
elektronik (e-mail) dan papan pesan (BBS/Bulletin Board System).

Sekitar tahun 1980, protokol TCP/IP telah berkembang menjadi sebuah protokol standar yang
dapat digunakan oleh setiap komputer, dan secara efektif telah menggeser protokol-protokol
komunikasi lainnya yang pada saat itu saling berbeda-beda tergantung dari masing-masing produsen
komputer. Walaupun begitu, proses komunikasi yang terjadi antara satu komputer dengan komputer
lainnya masih bersifat terbatas dan internal saja.

Internet yang seperti dikenal sekarang ini dipelopori oleh seorang ahli fisika dari Inggris yang
bernama Tim Berners-Lee dari CERN, sebuah lembaga penelitian tenaga nuklir Eropa. Pada awalnya ia
ingin mempermudah proses pertukaran informasi penelitian antara satu lembaga dengan lembaga
lainnya. Untuk mencapati tujuannya, ia memulai sebuah proyek yang dinamakan World Wide Web
(WWW), yaitu sebuah sistem yang dapat digunakan untuk bertukar informasi tidak hanya melalui surat
eletronik dan papan pesan tetapi juga melalui halaman-halaman atau artikel-artikel yang dapat dengan
mudah dibaca oleh setiap orang seperti halaman web yang dikenal sekarang ini.

Pada saat ini, World Wide Web telah berkembang sangat pesat dan merevolusi proses komunikasi
yang telah ada. Pada tahun 2010, diperkirakan ada 1.97 miliar orang pengguna internet aktif.

Diklat Web Programmer 7


CEP –CCIT FTUI
Web Programming

1.3 SITUS WEB DAN HALAMAN WEB

Jika berbicara mengenai internet, tentunya situs web (website) dan halaman web (webpage) adalah
istilah-istilah yang tidak dapat dipisahkan. Namun tahukan Anda bahwa keduanya adalah hal yang
sangat berbeda?

1.3.1 HALAMAN WEB

Halaman web adalah sebuah dokumen yang paling umum dan paling penting di dalam internet.
Halaman web berisikan berbagai macam informasi dalam berbagai bentuk dan media. Mulai dari teks,
gambar, audio, video dan bahkan media interaktif.

Halaman web pada umumnya menggunakan format dokumen HTML (Hypertext Markup Language)
yang akan Anda pelajari pada bab selanjutnya. Untuk menampilkan sebuah halaman web, Anda akan
memerlukan sebuah aplikasi khusus yang dikenal dengan istilah peramban web (web browser).
Aplikasi peramban akan mengambil halaman yang Anda inginkan dari internet dan menampilkannya
pada layar monitor dari komputer Anda. Halaman web pada umumnya juga saling terhubung dengan
halaman web lainnya melalui sebuah tautan (link) yang dikenal dengan istilah hyperlink.

1.3.2 SITUS WEB

Jika halaman web diibaratkan sebagai sebuah halaman, maka situs web dapat diibaratkan sebagai
sebuah buku. Sebuah situs web memiliki banyak halaman web yang memiliki informasi yang serupa
dan saling berhubungan.

Sebagai contoh, situs web dari Universitas Indonesia memiliki halaman-halaman web yang
berisikan informasi tentang berbagai progam studi yang terdapat pada Universitas Indonesia. Situs web
Universitas Indonesia tentunya tidak memiliki informasi tentang harga mobil dari produsen Toyota.

1.4 CARA KERJA HALAMAN WEB

Apabila Anda membuka sebuah halaman web dengan menggunakan peramban web Anda, maka
secara garis besar akan terjadi proses sebagai berikut :

1. Anda memasukkan URL dari halaman web yang inginkan Anda buka pada peramban web Anda.

2. Peramban web akan mencari alamat server dari situs web yang memiliki halaman web tersebut

3. Peramban web akan meminta halaman web yang Anda inginkan dari server tersebut.

4. Server akan memproses permintaan tersebut dan mengirimkan hasilnya kepada peramban web.

5. Peramban web akan memproses data yang didapatkan dari server tersebut dan
menampilkannya pada layar monitor.

Diklat Web Programmer 8


CEP –CCIT FTUI
Web Programming

1.5 MACAM MACAM HALAMAN WEB

Pada dasarnya, ada dua macam halaman web, yaitu halaman web statis dan halaman web dinamis.
Sesuai dengan namanya, isi atau konten yang terdapat pada halaman web statis bersifat tetap dan tidak
berganti-ganti, sedangkan isi atau konten yang terdapat pada halaman web dinamis akan berganti-ganti
sesuai dengan kondisi dan/atau keadaan tertentu.

Sebagai contoh, apabila Anda membuka halaman web dari situs surat elektronik seperti Gmail,
maka halaman tersebut akan menampilkan surat-surat yang Anda memiliki. Sedangkan apabila teman
Anda membuka halaman web yang sama, maka surat-surat yang akan ditampilkan adalah surat-surat
yang dimiliki oleh teman Anda. Inilah yang dimaksud dengan halaman web dinamis, satu halaman yang
sama tetapi dapat menampilkan isi atau konten yang berbeda.

Sebuah halaman web dinamis memerlukan sebuah skrip atau program yang akan dijalankan pada
server web untuk menentukan konten yang akan dimasukkan ke dalam halaman web. Ada banyak
bahasa pemrograman yang dapat digunakan untuk melakukan hal ini, salah satu di antaranya yang
paling populer adalah PHP (PHP: Hypertext Preprocessor). Selain PHP, ada pula bahasa-bahasa lainnya
seperti ASP.NET, Perl, Python, Ruby, Java, ColdFusion, dan sebagainya.

Diklat Web Programmer 9


CEP –CCIT FTUI
Web Programming

BAB 2 : MENGGUNAKAN HTML

Diklat Web Programmer 10


CEP –CCIT FTUI
Web Programming

2.1 PENGERTIAN DAN SEJARAH HTML

Jika Anda ingin membuat sebuah halaman web, maka bahasa HTML adalah sebuah bahasa yang
harus Anda pelajari. Semua halaman web yang Anda temui di dalam jaringan Internet sebenarnya
adalah sebuah dokumen teks yang dibuat dengan menggunakan bahasa HTML. Dokumen teks HTML
tersebut selanjutnya akan diterjemahkan oleh aplikasi web browser menjadi sebuah rangkaian teks,
gambar, audio, dan bahkan video yang Anda kenali sebagai sebuah halaman web.

HTML sendiri adalah kepanjangan dari HyperText Markup Language, yang memiliki arti sebagai
beikut :

• Hyper
Dalam bahasa Inggris berarti sesuatu yang sangat aktif. Hal ini memiliki maksud bahwa HTML
adalah sebuah bahasa yang dapat membawa Anda kemana saja dan kapan saja dalam dunia
maya.

• Text
Menandakan bahwa HTML adalah suatu kumpulan dari teks.

• Markup
Bahasa HTML adalah sebuah bahasa markup, yaitu sebuah bahasa yang dapat digunakan untuk
memberikan markup atau keterangan tambahan pada sesuatu. Misalkan, huruf yang bercetak
tebal, keterangan warna, paragraf, gambar, dan sebagainya.

• Language
Seperti namanya, HTML adalah sebuah ...bahasa.

HTML pertama kali ditemukan pada tahun 1990 oleh sebuah ahli fisika dari Inggris yang bernama
Tim Berners Lee. Pada awalnya, bahasa HTML tidaklah dimaksudkan untuk membuat sebuah halaman
web yang seperti Anda kenal seperti sekarang ini. Melainkan, HTML dirancang untuk mempermudah
proses pertukaran dokumen dan informasi penelitian antara suatu lembaga penelitian dengan lembaga
penelitian lainnya melalui jaringan Internet.

Tidak lama setelah bahasa ini ditemukan, para pelaku bisnis mulai tertarik dengan kemampuan
yang dimiliki oleh HTML, dan bermaksud untuk menggunakan bahasa tersebut untuk urusan bisnis,
seperti untuk beriklan dan memberikan informasi-informasi seputar perusahaannya. Setelah itu, HTML
mulai berkembang secara pesat dan menjadi tulang punggung dari Internet pada jaman sekarang.
Bahkan, sampai sekarang pun HTML masih terus berkembang dengan pesat.

Proses perkembangan dari HTML diatur oleh sebuah lembaga internasional yang bernama W3C
(World Wide Web Consortium). Lembaga ini berfungsi untuk menjaga agar HTML tetap menjadi sebuah
standar internasional sebagai sebuah bahasa untuk membuat halaman web. Dengan adanya standar ini,
setiap pembuat web dapat memastikan bahwa halaman web yang telah dibuat olehnya dapat
ditampilkan pada setiap pengunjung sesuai dengan keinginannya, tidak peduli perangkat keras atau
perangkat lunak apapun yang digunakan oleh pengunjung tersebut.

Diklat Web Programmer 11


CEP –CCIT FTUI
Web Programming

Bahasa HTML yang akan dipelajari dalam buku ini adalah hasil perkembangan yang terbaru dari
HTML, yaitu HTML5. Berbeda dengan versi-versi HTML yang sebelumnya seperti HTML 4.01 atau
XHTML (eXtended HyperText Markup Language, bahasa HTML yang telah ditambahkan kegunaannya)
1.0 dan 1.1, HTML5 memiliki banyak fitur multimedia terbaru yang dapat membuat sebuah halaman
web menjadi lebih menarik dan interaktif.

Sekilas, HTML terlihat sebagai sebuah bahasa yang memiliki kemampuan yang hebat. Namun,
sebenarnya bahasa HTML memiliki banyak kekurangan dan keterbatasan didalamnya. Oleh karena itu,
untuk membuat sebuah halaman web yang menarik, Anda akan memerlukan bahasa-bahasa lain yang
dapat digunakan untuk menutupi kekurangan dan keterbatasan yang ada pada HTML.

Sebagai contoh, halaman web yang hanya dibuat dengan hanya menggunakan bahasa HTML tidak
dapat memiliki tampilan yang menarik. Oleh karena itu, seringkali HTML digabungkan dengan
dokumen CSS (Cascading Style Sheet) yang dapat digunakan untuk mempercantik tampilan dari sebuah
halaman web. HTML tidak dapat membuat animasi pada halaman web. Untuk ini, dapat digunakan
teknologi JavaScript, Flash, atau Silverlight. HTML sendiri juga tidak dapat berinteraksi dengan
pengunjung atau menampilkan data-data yang terdapat pada sebuah database. Jika Anda ingin
membuat halaman web Anda dapat melakukan hal tersebut, maka Anda perlu menggabungkan HTML
dengan sebuah bahasa pemrograman server seperti PHP, ASP, Java, Python, Ruby, dan sebagainya.

2.2 BERSIAP-SIAP

Untuk membuat sebuah halaman web dengan menggunakan bahasa HTML, Anda akan memerlukan
dua buah aplikasi yang sangat penting, yaitu aplikasi text editor dan aplikasi web browser. Aplikasi text
editor akan digunakan untuk membuat dokumen HTML dimana nantinya Anda akan mengetik kode-
kode yang terdapat pada bahasa HTML. Sedangkan aplikasi web browser akan digunakan untuk
menampilkan dokumen HTML yang telah Anda buat sebagai halaman web.

Untungnya, jika Anda menggunakan sebuah sistem komputer yang menggunakan sistem operasi
berbasis Microsoft Windows (versi apa saja, mulai dari Windows 95 sampai Windows 7), Apple Mac OS
X, atau bahkan berbagai macam distro dari Linux, Anda sudah memiliki kedua aplikasi tersebut pada
komputer Anda.

Pada sistem operasi Microsoft Windows, Anda sudah memiliki aplikasi Notepad sebagai text editor
dan Internet Explorer sebagai web browser. Pada sistem operasi Apple Mac OSX, ada TextEdit sebagai
(seperti yang Anda duga) text editor dan Safari sebagai web browser. Jika Anda menggunakan sistem
operasi berbasis Linux, pilihannya lebih beragam lagi. Anda mungkin akan memiliki Gedit, Kate,
Mousepad, atau Leafpad sebagai text editor Anda tergantung dari distro yang Anda gunakan. Untuk web
browser pada Linux, umumnya menggunakan Firefox.

Walaupun begitu, apabila Anda merasa aplikasi-aplikasi tersebut masih memiliki kekurangan,
tentunya Anda dapat menggunakan aplikasi text editor dan web browser lain yang sesuai dengan
keinginan Anda.

Diklat Web Programmer 12


CEP –CCIT FTUI
Web Programming

2.2.1 ALTERNATIF TEXT EDITOR

Pada dasarnya, Anda dapat menggunakan aplikasi text editor apapun untuk membuat sebuah
halaman web dengan menggunakan bahasa HTML. Namun, ada baiknya Anda menggunakan aplikasi
text editor yang dikhususkan untuk pemrograman, yaitu aplikasi text editor yang memiliki fitur syntax
highlighting dan line numbering.

Fitur syntax highlighting atau pewarnaan sintaks/teks adalah suatu fitur utama yang perlu
diperhatikan dalam memilih sebuah aplikasi text editor. Dengan adanya fitur ini, kode-kode HTML yang
Anda ketikkan akan diberikan warna yang berbeda-beda sesuai dengan fungsinya. Pemberian warna ini
dapat digunakan untuk membantu Anda melihat struktur dan mencari kesalahan dari sebuah dokumen
HTML.

Selain syntax highlighting, fitur lain yang perlu diperhatikan adalah fitur line numbering. Melalui
fitur ini, aplikasi text editor akan memberikan nomor baris pada setiap baris kode yang Anda buat. Pada
awalnya, fitur ini mungkin terlihat sepele, namun fitur ini akan menjadi sangat berguna setelah Anda
mempelajari pemrograman halaman web dengan PHP, karena jika ada suatu kesalahan pada halaman
web Anda, PHP akan memberitahukan letak kesalahan tersebut melalui nomor baris. Jika text editor
Anda tidak memiliki fitur ini, tentu akan sulit untuk mengetahui letak dari kesalahan tersebut.

Mungkin Anda pernah mendengar sebuah aplikasi yang bernama Adobe Dreamweaver atau
Microsoft Frontpage (yang notabene sudah berganti nama menjadi Microsoft Expression Web). Pada
aplikasi-aplikasi tersebut, Anda dapat membuat sebuah halaman web secara visual dan tanpa perlu
mengetahui bahasa HTML, cukup melakukan drag-and-drop komponen tampilan yang Anda inginkan
pada halaman web Anda dan program tersebut akan menerjemahkannya menjadi kode-kode HTML
secara otomatis. Aplikasi-aplikasi seperti ini dikenal dengan istilah WYSIWYG (What You See Is What
You Get).

Walaupun terdengar menarik, perlu diperhatikan bahwa penggunaan aplikasi-aplikasi ini tidaklah
dianjurkan jika Anda ingin belajar membuat sebuah halaman web dengan menggunakan HTML. Kode
HTML yang dibuat secara otomatis oleh WYSIWYG pada umumnya sangatlah berantakan dan tidak
memenuhi standar HTML yang ditetapkan oleh W3C, menjadikan halaman web Anda akan memiliki
tampilan yang tidak konsisten pada aplikasi web browser yang berbeda-beda. Selain itu, jika Anda tidak
memahami struktur dari dokumen HTML yang dibuat secara otomatis tersebut, Anda akan sangat sulit
menggabungkan pemrograman PHP pada halaman tersebut.

Dalam buku ini, penulis akan menggunakan aplikasi text editor yang bernama Notepad++. Penulis
menggunakan aplikasi ini karena aplikasi ini telah memiliki fitur-fitur pemrograman yang lengkap,
tentu saja, diantaranya adalah fitur syntax highlighting dan line numbering. Selain itu, aplikasi ini juga
dapat Anda peroleh dengan gratis, karena aplikasi ini adalah aplikasi yang bersifat open-source. Anda
dapat mendapatkan aplikasi ini melalui situs web http://notepad-plus-plus.org/.

Selain Notepad++, ada banyak aplikasi text editor sejenis yang dapat Anda peroleh secara gratis,
seperti Gedit (http://projects.gnome.org/gedit/), jEdit (http://www.jedit.org/), Komodo Edit
(http://www.activestate.com/komodo-edit), Notepad2 (http://www.flos-freeware.ch/notepad2.html),

Diklat Web Programmer 13


CEP –CCIT FTUI
Web Programming

Programmer’s Notepad (http://www.pnotepad.org/), SciTE (http://www.scintilla.org/SciTE.html),


dan banyak lainnya. Pilihlah aplikasi text editor yang paling cocok dengan Anda.

2.2.2 ALTERNATIF WEB BROWSER

Sebagai seorang pembuat web, tentunya Anda ingin situs web Anda diakses oleh banyak orang.
Setiap orang yang mengunjungi halaman web Anda tentunya akan menggunakan aplikasi web browser
yang berbeda-beda. Ada orang yang menggunakan Firefox, ada yang menggunakan Opera, Safari,
Chrome, Internet Explorer, dan sebagainya. Anda haruslah memastikan bahwa halaman web Anda akan
tampil dengan baik dan benar sesuai dengan yang Anda inginkan pada setiap aplikasi web browser
tersebut.

Oleh karena itu, idealnya Anda juga harus memiliki banyak aplikasi web browser untuk mencoba
apakah halaman web Anda memiliki tampilan yang konsisten atau tidak. Untungnya, hampir semua
aplikasi web browser dapat Anda peroleh dengan gratis. Namun, pastikanlah Anda selalu menggunakan
versi terbaru dari aplikasi web browser tersebut.

Anda dapat mendapatkan Firefox pada situs http://www.mozilla.com/id/firefox/, Opera pada


http://www.opera.com/, Chrome pada http://www.google.com/chrome/, dan Safari pada
http://www.apple.com/safari/.

Diklat Web Programmer 14


CEP –CCIT FTUI
Web Programming

2.3 “HALO, DUNIA!”

Sebuah program “Halo, Dunia!” dapat dikatakan menjadi sebuah tradisi yang tidak dapat dipisahkan
dalam mempelajari sebuah bahasa komputer. Program halo dunia pada dasarnya adalah sebuah
program yang sangat sederhana, program ini berfungsi untuk menampilkan teks “Halo, Dunia!” pada
layar monitor. Dalam HTML, yang bukan merupakan sebuah bahasa pemrograman, tentunya Anda tidak
akan membuat sebuah program halo dunia. Melainkan, karena HTML adalah sebuah bahasa yang
digunakan untuk membuat halaman web, maka Anda akan membuat sebuah halaman web yang
menampilkan teks “Halo, Dunia!”.

Untuk membuat halaman tersebut, pertama-tama bukalah aplikasi text editor favorit Anda dan
buatlah sebuah dokumen HTML yang berisikan kode-kode seperti yang terdapat di bawah ini. Jangan
khawatir jika Anda tidak memahami makna dari kode-kode HTML tersebut, Anda akan segera
mempelajarinya dalam bagian selanjutnya.

<!doctype html>

<html>
<head>
<title>Halo, Dunia!</title>
</head>
<body>
Belajar HTML sangat mudah dan menyenangkan!
</body>
</html>

Setalah itu. simpanlah dokumen yang telah Anda buat tersebut tersebut dengan nama
halo_dunia.html. Anda dapat menyimpan dokumen tersebut dimana saja sesuai dengan keinginan
Anda. Perlu diperhatikan disini bahwa Anda harus menyimpan dokumen tersebut dengan ekstensi.html,
hal ini ditujukan untuk memberitahukan kepada komputer bahwa dokumen tersebut adalah sebuah
dokumen HTML.

Jika sudah, bukalah dokumen tersebut dengan menggunakan peramban web Anda dengan
melakukan drag-n-drop dari jendela file manager (Windows Explorer jika Anda menggunakan
Windows) ke jendela web browser Anda. Jika semua berjalan dengan baik, Anda akan melihat tulisan
“Belajar HTML sangat mudah dan menyenangkan!” pada web browser Anda. Selamat, Anda telah
berhasil membuat halaman web pertama Anda!

Diklat Web Programmer 15


CEP –CCIT FTUI
Web Programming

2.4 STRUKTUR DOKUMEN HTML

Sebuah halaman web yang dibuat dengan menggunakan HTML pada dasarnya terdiri dari banyak
komponen-komponen yang dikenal dengan istilah elemen. Elemen dapat dikatakan sebagai sebuah
bagian dari suatu halaman web. Elemen dapat berupa sebuah teks, gambar, link, atau bahkan
komponen multimedia seperti audio atau video. Dalam sebuah dokumen HTML, kumpulan dari elemen-
elemen ini akan disusun dengan sedemikian rupa sehingga dapat dimengerti dan ditampilkan oleh web
browser.

Elemen sendiri terdiri dari beberapa bagian, yaitu tag dan konten. Agar dapat lebih memahami
bentuk dari sebuah elemen pada sebuah dokumen HTML, perhatikanlah diagram berikut ini :

Elemen

Start Tag Konten End Tag


<strong> Google </strong>

Tag adalah sebuah label yang diberikan pada sebuah konten. Tag adalah komponen yang terdapat
didalam tanda < dan >. Tag berfungsi untuk memberikan keterangan tambahan terhadap sebuah
konten atau isi dari sebuah halaman tambahan. Sebagai contoh, tag <strong></strong> berfungsi
untuk memberi keterangan pada web browser bahwa segala sesuatu yang ada di dalamnya akan
ditampilkan dengan menggunakan huruf yang bercetak tebal (bold). Pada contoh diatas, teks “Google”
akan ditampilkan dengan cetak tebal.

Sebuah tag pada umumnya terdiri dari dua macam, yaitu start tag dan end tag. Start tag dan end tag
akan mengawali dan mengakhiri konten yang akan diberikan keterangan tambahan oleh tag tersebut.
Pada penulisannya, end tag selalu akan menggunakan simbol garis miring. Sekarang perhatikanlah
contoh berikut ini :

<strong>Facebook</strong> Twitter

Pada contoh diatas, teks “Facebook” akan ditampilkan dengan bercetak tebal, karena terdapat
diantara tag <strong></strong>. Sedangkan, teks “Twitter” tidak akan ditampilkan dengan cetak tebal
karena tidak berada di dalam tag <strong></strong>.

Walaupun begitu, ada pula beberapa elemen HTML yang tagnya hanya terdiri dari satu buah tag saja,
tanpa adanya pasangan start tag dan end tag, sebagai contoh, <br> yang berfungsi untuk membuat
baris baru diantara teks. Tag seperti ini dikenal dengan istilah self-closing tag karena tag tersebut
menutup atau mengakhiri dirinya sendiri dengan sebuah tanda garis miring yang dituliskan sebelum
tanda kurung siku penutup.

Selain itu, sebuah tag juga dapat memiliki satu atau lebih atribut. Atribut berfungsi untuk
memberikan informasi tambahan kepada sebuah elemen. Perhatikanlah diagram berikut ini :

Diklat Web Programmer 16


CEP –CCIT FTUI
Web Programming

Elemen
Start Tag End
Konten
Atribut Tag
<a href="http://google.com"> Google </a>

Pada diagram di atas, tag <a></a> berfungsi untuk membuat sebuah link pada halaman web.
Penggunaan tag di atas pada sebuah halaman web, akan menghasilkan sebuah link dengan teks “Google”
yang apabila diklik, akan memindahkan Anda ke alamat web http://google.com. Perlu diperhatikan
bahwa alamat tujuan http://google.com dituliskan pada sebuah atribut yang bernama href (hypertext
reference).

Atribut sendiri pada dasarnya terdiri dari dua buah bagian, yaitu name dan value. Pada contoh
diatas, href adalah sebuah attribute name sedangkan http://google.com adalah sebuah attribute value.
Dalam penulisannya, attribute value diletakkan di dalam sepasang tanda kutip dua. Jika dituangkan
dalam sebuah diagram, maka akan menjadi seperti berikut ini :

Elemen
Start Tag
Atribut End
Konten
Name Value Tag

<a href = "http://google.com"> Google </a>

Selain itu, konten atau isi yang terdapat pada sebuah elemen tidaklah terbatas pada teks saja.
Melainkan, sebuah elemen bisa saja berisikan elemen lainnya. Perhatikanlah contoh berikut ini :

<strong>
<em>
Belajar HTML
</em>
</strong>

Pada contoh di atas, konten yang terdapat pada elemen strong adalah elemen lain, yaitu elemen em
yang berfungsi untuk membuat teks menjadi bercetak miring. Penggabungan kedua buah elemen ini
akan menjadikan teks “Belajar HTML” yang terletak di dalamnya ditampilkan dengan cetak tebal dan
miring.

Dalam penggunaan elemen yang memiliki elemen lain di dalamnya, perlu diperhatikan urutan
penutupan masing-masing tag dari elemen-elemen tersebut. Penutupan tag ini mengikuti aturan yang
dikenal dengan istilah FILO (First In, Last Out), dimana tag yang dibuka pertama kali akan ditutup
terakhir kali. Untuk lebih jelasnya, perhatikanlah contoh berikut ini :

Benar : Salah :
<strong> <strong>
<em> <em>
Satu Satu
</em> </strong>
</strong> </em>

Diklat Web Programmer 17


CEP –CCIT FTUI
Web Programming

2.4.1 MENGUNJUNGI KEMBALI “HALO, DUNIA!”

Setelah Anda memahami struktur dari sebuah dokumen HTML, marilah kita membahas kembali
mengenai elemen-elemen yang terdapat pada halaman “Halo, Dunia!” yang telah Anda buat sebelumnya.

<!doctype html>

Elemen doctype berfungsi untuk memberitahukan versi HTML yang digunakan dalam sebuah
halaman web. Penulisan doctype seperti diatas akan memberitahukan kepada web browser bahwa
halaman web Anda menggunakan HTML 5. Apabila elemen ini tidak digunakan, maka web browser
bekerja dalam quirks mode, dimana nantinya akan menghasilkan tampilan yang tidak sesuai dengan
keinginan Anda.

<html> ... </html>

Elemen html berfungsi untuk menandakan awal dan akhir dari sebuah dokumen HTML.

<head> ... </head>

Elemen head berfungsi untuk menandakan bagian kepala (anggaplah seperti kepala/kop surat) dari
sebuah halaman web. Semua yang terdapat di dalam bagian ini tidak akan tampil pada web browser
dan hanya berfungsi untuk memberikan keterangan atau informasi tambahan mengenai halaman web
tersebut, seperti identitas pembuat, hak cipta, judul halaman, dan sebagainya.

<title> ... </title>

Elemen title berfungsi untuk memberikan judul pada sebuah halaman web. Judul ini biasa akan
tampil pada bagian tab dari web browser dan berfungsi untuk mempermudah pengunjung halaman
web untuk mengenali halaman web Anda dari halaman-halaman yang terdapat pada tab lainnya.
Elemen ini hanya dapat diletakkan di dalam elemen head karena elemen ini hanya berfungsi sebagai
informasi tambahan.

<body> ... </body>

Jika elemen head dapat diibaratkan sebagai kepala surat, maka elemen body adalah badan atau isi
dari surat tersebut. Semua yang terdapat di dalam elemen ini akan ditampilkan pada web browser. Di
dalam elemen inilah nantinya Anda akan membuat isi dari halaman web Anda.

2.5 BEKERJA DENGAN TEKS

Fungsi utama dari sebuah halaman web adalah menyampaikan suatu informasi kepada orang lain
melalui Internet. Untuk menyampaikan informasi tersebut, tentunya Anda akan memerlukan teks atau
tulisan-tulisan yang berisikan informasi tersebut.

Pada contoh halaman “Halo, Dunia!” yang telah Anda buat, Anda hanya meletakkan teks dengan
begitu saja di dalam elemen body. Ini bukanlah cara yang terbaik untuk meletakkan teks di dalam
sebuah halaman web, melainkan, Anda harus meletakkan teks di dalam elemen yang khusus yang

Diklat Web Programmer 18


CEP –CCIT FTUI
Web Programming

berfungsi untuk memberikan makna semantis kepada teks tersebut. Maksudnya adalah bahwa Anda
harus menjelaskan apakah fungsi dari teks tersebut, apakah teks itu berfungsi sebagai judul bab, judul
subbab, paragraf isi, keterangan, daftar, atau tabel.

2.5.1 MEMBUAT PARAGRAF

Paragraf dalam sebuah halaman web didefinisikan dengan menggunakan elemen p(paragraph).
Penggunaan elemen ini sangatlah mudah, Anda cukup memberikan tag <p> pada awal dari setiap
paragraf yang ingin Anda buat.

SINTAKS :
<p>teks paragraf

CONTOH :
<!doctype html>

<html>

<head>
<title>Paragraf</title>
</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.

<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis
placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna
sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit
amet est augue.

<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae
euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed
nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.

</body>

</html>

2.5.2 MEMBUAT JUDUL

Dalam HTML, ada 6 elemen yang dapat Anda gunakan untuk memberikan judul pada paragraf Anda,
yaitu elemen h1, h2, h3, h4, h5, dan h6. Dimana elemen h1 berfungsi sebagai judul utama dan h6
berfungsi sebagai judul subbab tingkatan keenam. Berbeda dengan elemen p, Anda perlu menggunakan
start tag dan end tag pada elemen judul.

Dalam pembuatan judul, perlu diperhatikan bahwa Anda juga harus menggunakan judul-judul
subbab secara berurutan. Sebagai contoh, judul h4 haruslah menjadi subbab dari judul h3, dimana h3
sendiri adalah subbab dari judul h2.

Diklat Web Programmer 19


CEP –CCIT FTUI
Web Programming

SINTAKS :
<h1>teks judul</h1>

CONTOH :
<!doctype html>

<html>

<head>
<title>Judul</title>
</head>

<body>

<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.

<h2>Dolor sit Amet</h2>


<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis
placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna
sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit
amet est augue.

<h2>Consectetur Adipiscing Elit</h2>


<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae
euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed
nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.

</body>

</html>

2.5.3 MEMBUAT DAFTAR

Selain paragraf dan judul, Anda juga dapat membuat daftar pada halaman web Anda. Ada tiga
macam elemen yang dapat Anda gunakan untuk membuat daftar, yaitu elemen ul(unordered list)yang
berfungsi untukuntuk membuat daftar yang tidak terurut, elemen ol(ordered list)yang berfungsi untuk
untuk membuat daftar yang berurut, dan elemen li(list item) yang berfungsi untuk membuat isi pada
sebuah daftar.

Dalam penggunaannya, Anda akan terlebih dahulu mendefinisikan jenis daftar yang ingin Anda buat
(terurut atau tidak terurut) dengan menggunakan elemen ul atau ol, lalu Anda menamabahkan isi ke
dalam daftar tersebut dengan menggunakan elemen li.

SINTAKS :
<ul>
<li>isi pertama
<li>isi kedua
</ul>

Diklat Web Programmer 20


CEP –CCIT FTUI
Web Programming

<ol>
<li>isi pertama
<li>isi kedua
</ol>

CONTOH :
<!doctype html>

<html>

<head>
<title>Daftar</title>
</head>

<body>

<h1>Contoh daftar</h1>

<h2>Tidak terurut</h2>
<ul>
<li>Lorem ipsum
<li>Dolor sit amet
<li>Consectetur adipiscing elit
</ul>

<h2>Terurut</h2>
<ol>
<li>Lorem ipsum
<li>Dolor sit amet
<li>Consectetur adipiscing elit
</ol>

<h2>Daftar di dalam daftar</h2>


<ul>
<li>Lorem
<li>Ipsum :
<ul>
<li>Dolor
<li>Sit
</ul>
<li>Amet :
<ol>
<li>Consectetur
<li>Adipiscing :
<ul>
<li>Elit
<li>Etiam
</ul>
<li>Aliquam
</ol>
<li>Vitae
</ul>

</body>

</html>

Diklat Web Programmer 21


CEP –CCIT FTUI
Web Programming

2.5.4 MEMFORMAT TEKS

Sampai saat ini, halaman-halaman web yang telah Anda buat mungkin terasa hambar karena hanya
berupa teks biasa saja tanpa adanya format khusus dan penggunaan warna dan jenis serta ukuran huruf
yang menarik. Sekarang, marilah mencoba memformat teks yang terdapat pada halaman web Anda agar
halaman web Anda menjadi lebih menarik.

2.5.4.1 CETAK TEBAL DAN MIRING

Penggunaan huruf yang bercetak tebal dan miring dapat membantu Anda untuk memberikan
penekanan pada suatu bagian dari sebuah teks. Untuk membuat efek seperti ini, Anda akan
memerlukan elemen strong dan em. Elemen strong berfungsi untuk membuat cetak tebal dan elemen
em berfungsi untuk membuat cetak miring.

SINTAKS :
<strong>teks</strong>
<em>teks</em>

CONTOH :
<!doctype html>

<html>

<head>
<title>Cetak Tebal dan Miring</title>
</head>

<body>
<p>Teks ini menggunakan cetak <strong>tebal</strong>
<p>Teks ini menggunakan cetak <em>miring</em>
<p>Teks ini menggunakan cetak <strong><em>tebal dan miring</em></strong>
</body>

</html>

2.5.4.2 JENIS, UKURAN, DAN BERAT HURUF

Untuk mengatur jenis dan ukuran huruf dari sebuah teks, Anda dapat menambahkan atribut style
pada elemen yang ingin Anda atur jenis dan ukuran hurufnya. Atribut style, sesuai namanya, adalah
sebuah atribut yang berfungsi untuk memberikan format atau “gaya” pada elemen-elemen yang
terletak di dalam sebuah halaman web.

Atribut ini memiliki banyak nilai atribut yang dapat Anda gunakan, namun, marilah terlebih dahulu
berkenalan dengan nilai atribut font-family yang berfungsi untuk mengatur jenis huruf, dan nilai
atribut font-size yang berfungsi untuk mengatur ukuran huruf.

Dalam penulisan nilai-nilai atribut dari atribut style, Anda perlu mengakhiri setiap nilai atribut
dengan menggunakan sebuah tanda titik koma (;).

Diklat Web Programmer 22


CEP –CCIT FTUI
Web Programming

SINTAKS :
<elemen style="font-family: jenis huruf; font-size: ukuran huruf;">teks</elemen>

CONTOH :
<!doctype html>

<html>

<head>
<title>Jenis dan Ukuran Huruf</title>
</head>

<body>
<p style="font-family: Georgia; font-size: 14pt;">
Georgia adalah contoh jenis huruf serif
<p style="font-family: Trebuchet MS; font-size: 10pt;">
Trebuchet MS adalah contoh jenis huruf sans-serif
<p style="font-family: Consolas; font-size: 16pt;">
Consolas adalah contoh jenis huruf <strong>monospace</strong>
</body>

</html>

Selain dengan menggunakan elemen strong, Anda juga dapat membuat teks bercetak tebal dengan
mengatur “berat” huruf dengan menggunakan nilai atribut font-weight. Walaupun begitu, perlu
diperhatikan bahwa penggunaan utama dari nilai atribut ini bukanlah untuk membuat huruf bercetak
tebal melainkan untuk membuat huruf yang sudah bercetak tebal dari awal (seperti pada elemen h1)
menjadi tidak bercetak tebal.

SINTAKS :
<elemen style="font-weight: bobot huruf;">teks</elemen>

OPSI BOBOT HURUF :


bold -> Bercetak tebal
normal ->Tidak bercetak tebal

CONTOH :
<!doctype html>

<html>

<head>
<title>Bobot huruf</title>
</head>

<body style="font-family: Trebuchet MS; font-size: 12pt;">

<h1>Judul ini bercetak tebal</h1>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.

<h1 style="font-weight: normal">Judul ini tidak bercetak tebal</h1>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus

Diklat Web Programmer 23


CEP –CCIT FTUI
Web Programming

pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.

</body>

</html>

Bila Anda perhatikan contoh di atas, dapat diketahui bahwa atribut style yang diberikan pada suatu
elemen akan diterapkan pula kepada elemen-elemen lain yang berada di dalam elemen tersebut. Dalam
contoh ini, atribut style="font-family: Trebuchet MS; font-size: 12pt;" pada elemen
body juga akan diterapkan pada elemen h1 dan p yang terdapat di dalamnya.

2.5.4.3 VARIASI DAN DEKORASI TEKS

Selain menentukan jenis dan ukuran huruf, Anda juga bisa menentukan variasi dan dekorasi dari
sebuah teks dengan menggunakan nilai atribut font-variant dan text-decoration pada atribut style.
Perlu diketahui bahwa Anda dapat menggabungkan berbagai macam nilai atribut pada atribut style
sesuai dengan kebutuhan Anda.

SINTAKS :
<elemen style="font-variant: variasi; text-decoration: dekorasi;">teks</elemen>

OPSI VARIASI :
small-caps -> Huruf kecil kapital

OPSI DEKORASI :
underline -> Bergaris bawah
overline -> Bergaris atas
line-through -> Dicoret
blink -> Berkedap-kedip

CONTOH :
<!doctype html>

<html>

<head>
<title>Variasi dan Dekorasi Teks</title>
</head>

<body style="font-family: Trebuchet MS; font-size: 14pt;">


<ul>
<li style="font-variant: small-caps;">Kapital kecil
<li style="text-decoration: underline;">Bergaris bawah
<li style="text-decoration: line-through;">Dicoret
<li style="font-size: 24pt; text-decoration: blink">Halo, Dunia!
</ul>
</body>

</html>

Diklat Web Programmer 24


CEP –CCIT FTUI
Web Programming

2.5.4.4 PERATAAN TEKS

Anda juga dapat mengatur perataan dari teks yang terdapat di dalam halaman web Anda.
Selayaknya pengaturan perataan teks yang terdapat di dalam sebuah aplikasi word prosesor, Anda
dapat membuat teks Anda menjadi rata kiri, rata tengah, rata kanan, maupun justify (rata kanan dan
kiri). Nilai atribut style yang digunakan kali ini adalah text-align.

SINTAKS :
<elemen style="text-align: perataan;">teks</elemen>

OPSI PERATAAN :
left -> Rata kiri
center -> Rata tengah
right -> Rata kanan
justify -> Rata kiri dan kanan

CONTOH :
<!doctype html>

<html>

<head>
<title>Perataan Teks</title>
</head>

<body style="font-family: Trebuchet MS; font-size: 12pt;">

<h1>Rata kiri</h1>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum
dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis
justo elit, in dictum metus.

<h1>Rata tengah</h1>
<p style="text-align: center;">Nulla non sem risus, vitae fermentum nisl. Etiam
aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at
diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo
commodo vehicula. Donec sit amet est augue.

<h1>Rata kanan</h1>
<p style="text-align: right;">Aliquam mattis mollis luctus. Integer venenatis elit
non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst.
Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra
venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.

<h1>Rata kiri dan kanan <em>(justify)</em></h1>


<p style="text-align: justify;">Curabitur at tortor dui. Nunc turpis justo, luctus
quis eleifend sit amet, egestas sed justo. Morbi dapibus augue ac diam interdum
consequat. Suspendisse nisl lorem, rutrum ut tempus at, venenatis id neque. Nulla
fermentum molestie lacus, laoreet rhoncus sapien porta vel. Integer quis mi ac arcu
adipiscing lacinia nec a arcu.

</body>

</html>

Diklat Web Programmer 25


CEP –CCIT FTUI
Web Programming

Jika Anda perhatikan, apabila nilai atribut text-align tidak digunakan, secara otomatis web browser
akan menganggap teks tersebut menggunakan perataan rata kiri.

2.5.4.5 INDENTASI PARAGRAF

Aturan penulisan paragraf di dalam Bahasa Indonesia mengharuskan baris pertama dari setiap
paragraf diberikan indentasi (dibuat menjorok ke dalam) seperti halnya paragraf yang terdapat di
dalam modul ini. Untuk melakukan hal ini, Anda dapat menggunakan nilai atribut text-indent.

SINTAKS :
<elemen style="text-indent: jarak;">teks</elemen>

CONTOH :
<!doctype html>

<html>

<head>
<title>Indentasi Paragraf</title>
</head>

<body style="font-family: Trebuchet MS; font-size: 12pt;">

<h1>Paragraf tanpa indentasi</h1>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.

<h1>Paragraf dengan indentasi 1em</h1>


<p style="text-indent: 1em;">Nulla non sem risus, vitae fermentum nisl. Etiam
aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at
diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo
commodo vehicula. Donec sit amet est augue.

<h2>Paragraf dengan indentasi 2em</h2>


<p style="text-indent: 2em;">Curabitur at tortor dui. Nunc turpis justo, luctus
quis eleifend sit amet, egestas sed justo. Morbi dapibus augue ac diam interdum
consequat. Suspendisse nisl lorem, rutrum ut tempus at, venenatis id neque. Nulla
fermentum molestie lacus, laoreet rhoncus sapien porta vel. Integer quis mi ac arcu
adipiscing lacinia nec a arcu.

</body>

</html>

2.5.4.6 JARAK ANTAR BARIS

Selain perataan teks dan indentasi paragraf, Anda juga dapat mengatur jarak antara suatu baris
dengan baris lainnya di dalam sebuah paragraf (line spacing). Nilai atribut yang dapat Anda gunakan
untuk mengatur hal ini adalah line-height.

SINTAKS :
<elemen style="line-height: jarak;">teks</elemen>

Diklat Web Programmer 26


CEP –CCIT FTUI
Web Programming

CONTOH :
<!doctype html>

<html>

<head>
<title>Jarak Antar Baris</title>
</head>

<body style="font-family: Trebuchet MS; font-size: 12pt;">

<h1>Paragraf tanpa pengaturan jarak antar baris</h1>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.

<h1>Paragraf dengan jarak antar baris 1 spasi</h1>


<p style="line-height: 1em;">Nulla non sem risus, vitae fermentum nisl. Etiam
aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at
diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo
commodo vehicula. Donec sit amet est augue.

<h1>Paragraf dengan jarak antar baris 1.5 spasi</h1>


<p style="line-height: 1.5em;">Curabitur at tortor dui. Nunc turpis justo, luctus
quis eleifend sit amet, egestas sed justo. Morbi dapibus augue ac diam interdum
consequat. Suspendisse nisl lorem, rutrum ut tempus at, venenatis id neque. Nulla
fermentum molestie lacus, laoreet rhoncus sapien porta vel. Integer quis mi ac arcu
adipiscing lacinia nec a arcu.

</body>

</html>

2.5.4.7 PENGGUNAAN WARNA

Ada dua macam warna yang dapat Anda berikan kepada teks di dalam halaman web Anda, yaitu
warna latar belakan dan warna teks. Untuk memberikan warna latar belakang, Anda akan
menggunakan nilai atribut background, sedangkan untuk warna teks Anda akan menggunakan nilai
atribut color.

SINTAKS :
<elemen style="background: warna; color: warna;">teks</elemen>

OPSI WARNA :
white, silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue,
navy, fuchsia, purple

CONTOH :
<!doctype html>

<html>

<head>
<title>Penggunaan Warna</title>
</head>

Diklat Web Programmer 27


CEP –CCIT FTUI
Web Programming

<body style="background: black; color: white; font-family: Trebuchet MS; font-size:


12pt;">

<h1 style="color: red;">Lorem Ipsum</h1>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.

<h1 style="background: green;">Dolor sit Amet</h1>


<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis
placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna
sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit
amet est augue.

<h1 style="background: blue; color: black;">Consectetur Adipiscing Elit</h1>


<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae
euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed
nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.

</body>

</html>

2.6 BEKERJA DENGAN LINK

Sebuah situs web pada umumnya terdiri dari beberapa halaman web yang saling berkaitan, untuk
mempermudah pengunjung situs web Anda berpindah dari satu halaman ke halaman lainnya, Anda
dapat membuat link atau tautan dengan menggunakan elemen a(anchor).

Elemen a akan memerlukan sebuah atribut yang bernama href(hypertext reference). Atribut ini
berfungsi untuk menetukan alamat tujuan dari suatu link yang juga dikenal dengan istilah URL (Uniform
Resource Locator). Ada dua macam alamat tujuan yang dapat digunakan, yaitu absolute URL, dan relative
URL.

Sebelum mengenal lebih lanjut tentang berbagai macam alamat tujuan, marilah terlebih dahulu
mengetahui dasar pembuatan sebuah link.

SINTAKS :
<a href="alamat_tujuan">teks</a>

CONTOH :
<!doctype html>

<html>

<head>
<title>Link</title>
</head>

<body>
<h1>Selamat datang!</h1>

Diklat Web Programmer 28


CEP –CCIT FTUI
Web Programming

<p>Silahkan pilih halaman yang ingin Anda kunjungi :


<ul>
<li><a href="profil.html">Profil</a>
<li><a href="galeri.html">Galeri Foto</a>
<li><a href="http://saya.blogspot.com">Blog</a>
<li><a href="http://www.facebook.com/saya">Facebook</a>
</ul>
</body>

</html>

Penggunaan relative URL akan menjadikan alamat halaman tempat asal link menjadi referensi.
Untuk lebih memahami penggunaan alamat relatif, perhatikan bagan berikut ini :

www.contoh.com

menu.html berita.html galeri.html berita galeri

2010.html laut.html

2011.html hutan.html

Anggaplah bagan di atas adalah struktur dari sebuah situs web www.contoh.com, dimana berita
dan galeri adalah sebuah folder/direktori. Berdasarkan pada bagan di atas, perhatikanlah contoh
berikut ini :

• Apabila dari halaman menu.html Anda ingin membuat tautan menuju halaman galeri.html,
maka Anda dapat menggunakan <a href=”galeri.html”>. Untuk tujuan yang berada dalam
folder yang sama, maka cukup dituliskan seperti ini.

• Apabila dari halaman menu.html Anda ingin membuat link menuju halaman 2010.html,
maka Anda dapat menggunakan <a href=”berita/2010.html”>. Untuk tujuan yang berada
dalam folder yang berbeda, namun folder tersebut masih satu tingkatan dengan lokasi
dokumen awal, maka perlu dituliskan nama folder dokumen tujuan.

• Apabila dari halaman 2010.html Anda ingin membuat link menuju halaman berita.html,
maka Anda dapat menggunakan <a href=”../berita.html”>. Untuk tujuan yang berada pada
folder lain yang memiliki tingkatan yang lebih tinggi, maka perlu dituliskan .. yang berarti
satu folder diatas.

• Apabila dari halaman 2010.html Anda ingin membuat link menuju halaman laut.html,
maka Anda dapat menggunakan <a href=”../galeri/laut.html”>. Ini adalah kombinasi dari
perintah “naik ke satu folder diatas” dan “masuk ke dalam folder galeri”.

Diklat Web Programmer 29


Web Programming

Sedangkan penggunaan absolute URL akan menggunakan referensi lengkap dan tidak
memperdulikan lokasi dari dokumen awal. Sebagai contoh, halaman hutan.html pada contoh diatas
dapat diakses dengan menggunakan <a href=”http://www.contoh.com/galeri/hutan.html”>.

Sebuah link tidak hanya dapat mengubungkan sebuah halaman web dengan halaman web lainnya.
Tautan juga dapat digunakan untuk menguhubungkan sebuah halaman web dengan berkas audio, video,
gambar, dan sebagainya.

2.7 BEKERJA DENGAN GAMBAR

Sebuah halaman web yang hanya berisikan teks saja tentunya terasa hambar dan membosankan.
Penambahan gambar yang relevan terhadap informasi yang ingin Anda sampaikan kepada pengunjung
situs web Anda tentunya dapat memberikan nilai lebih, sesuai dengan pepatah “sebuah gambar lebih
bermakna dari pada seribu kata”.

Untuk menambahkan gambar pada halaman web Anda, Anda dapat menggunakan elemen
img(image). Pada elemen ini, Anda harus memberikan sebuah atribut src(source) yang berfungsi untuk
menentukan lokasi gambar yang dituju. Penggunaan atribut ini pada dasarnya sama dengan
penggunaan atribut href pada elemen a, hanya saja, Anda hanya dapat mengarahkan alamat tujuannya
terhadap sebuah file gambar saja.

Anda dapat menggunakan format gambar apa saja, baik itu jpg / jpeg, png, maupun gif. Walaupun
begitu, ada baiknya Anda memastikan terlebih dahulu bahwa ukuran file gambar yang Anda gunakan
tidak terlalu besar. Penggunaan gambar dengan ukuran file yang terlalu besar tentunya juga akan
memerlukan waktu yang lama untuk ditampilkan pada pengunjung Anda yang tidak memiliki koneksi
internet dengan kecepatan yang tinggi.

SINTAKS :
<img src="alamat_gambar">

CONTOH :
<!doctype html>

<html>

<head>
<title>Gambar</title>
</head>

<body>
<h1>Social Network</h1>
<h2>Facebook</h2>
<a href="http://facebook.com/"><img src="facebook.png"></a>
<h2>Twitter</h2>
<a href="http://twitter.com"><img src="twitter.png"></a>
</body>

</html>

Diklat Web Programmer 30


CEP –CCIT FTUI
Web Programming

2.8 BEKERJA DENGAN TABEL

Selain daftar dan gambar, Anda juga dapat menambahkan tabel pada halaman web Anda. Sistem
pembuatan tabel dengan menggunakan HTML menyerupai sistem pembuatan tabel dalam aplikasi
spreadsheet seperti Microsoft Excel, dimana sebuah tabel terdiri dari baris (row), kolom (column), dan
sel (cell).

Untuk sebuah tabel, Anda akan memerlukan beberapa elemen, yaitu elemen table, tr(table row),
th(table header), dan td (table data). Elemen table berfungsi untuk mendefinisikan sebuah tabel.
Elemen tr berfungsi untuk mendefinisikan sebuah baris dari suatu tabel. Elemen th berfungsi untuk
mendefinisikan sebuah kolom judul. Elemen td berfungsi untuk mendefinisikan sebuah kolom data.

Elemen table dapat menggunakan atribut tambahan border yang berfungsi untuk menentukan
ketebalan garis pembatas pada tabel tersebut. Selain itu, Anda juga dapat menggunakan atribut
tambahan width untuk menentukan lebar dari suatu tabel. Atribut tambahan width juga dapat
digunakan pada elemen th untuk mengatur lebar dari suatu kolom. Untuk elemen th dan td, Anda juga
dapat menggunakan atribut align yang berfungsi untuk mengatur perataan dari suatu kolom.

SINTAKS :
<table border="ukuran_garis" width="lebar">
<tr>
<th width="lebar" align="perataan">judul</th>
</tr>
<tr>
<td align="perataan">isi</td>
</tr>
</table>

OPSI UKURAN GARIS :


0 ->tanpa garis
1 sampai 10 -> dengan garis, semakin besar semakin tebal

OPSI LEBAR :
%-> menggunakan persentase
px -> menggunakan satuan piksel

OPSI PERATAAN :
left -> Rata kiri
center -> Rata tengah
right -> Rata kanan

CONTOH :
<!doctype html>

<html>

<head>
<title>Daftar Barang</title>
</head>

<body>

<h1>Daftar Barang PT. Untung Untungan</h1>

Diklat Web Programmer 31


CEP –CCIT FTUI
Web Programming

<table border="1" width="50%">


<tr>
<th width="10%">No.</th>
<th width="50%">Nama Barang</th>
<th width="10%">Jumlah</th>
<th width="30%">Harga Satuan</th>
</tr>
<tr>
<td>1</td>
<td>Komputer</td>
<td>50</td>
<td>Rp 5.000.000,00</td>
</tr>
<tr>
<td>2</td>
<td>Printer Multifungsi</td>
<td>5</td>
<td>Rp 750.000,00</td>
</tr>
<tr>
<td>3</td>
<td>Pendingin Ruangan</td>
<td>5</td>
<td>Rp 2.000.000,00</td>
</tr>
</table>

</body>

</html>

Anda mungkin pernah menemukan sebuah tabel yang memiliki sel yang tergabung (merged). Untuk
membuat tabel seperti itu pada halaman web Anda, Anda dapat menggunakan atribut tambahan
rowspan atau colspan pada elemen th atau td pada sel yang ingin Anda gabungkan. Dimana atribut
rowspan berfungsi untuk menggabungkan baris (satu sel menggunakan lebih dari satu baris) dan
atribut colspan berfungsi untuk menggabungkan kolom (satu sel menggunakan lebih dari satu kolom).

SINTAKS :
<td rowspan="jumlah_baris" colspan="jumlah_kolom">teks</td>

CONTOH :
<doctype html>

<html>

<head>
<title>Daftar Nilai</title>
</head>

<body>

<h1>Daftar Nilai Siswa Kelas XII iA 5</h1>

<table border="1" width="50%">


<tr>
<th width="10%" rowspan="2">No.</th>

Diklat Web Programmer 32


CEP –CCIT FTUI
Web Programming

<th width="40%" rowspan="2">Nama Siswa</th>


<th width="30%" colspan="3">Nilai</th>
<th width="20%" rowspan="2">Rata-Rata</th>
</tr>
<tr>
<th width="10%">MTK</th>
<th width="10%">B.Ind</th>
<th width="10%">B.Ing</th>
</tr>
<tr>
<td>1</td>
<td>Azani Z. Ramsan</td>
<td>80</td>
<td>85</td>
<td>90</td>
<td>85.00</td>
</tr>
<tr>
<td>2</td>
<td>Hardi Mulyana</td>
<td>90</td>
<td>90</td>
<td>70</td>
<td>83.33</td>
</tr>
<tr>
<td>3</td>
<td>Rangga Satria</td>
<td>70</td>
<td>95</td>
<td>95</td>
<td>86.67</td>
</tr>
</table>

</body>

</html>

2.9 BEKERJA DENGAN FORMULIR

Formulir dapat digunakan untuk meminta masukan berbagai macam data dan informasi dari
pengunjung situs web Anda. Sebagai contoh adalah formulir pendaftaran, login, pencarian, kontak, dan
sebagainya. Ada beberapa elemen yang dapat Anda gunakan untuk membuat formulir, yaitu elemen
form, input, textarea, select, dan option.

<form action="..." method="..."> ... </form>

Elemen form berfungsi untuk membuat formulir. Elemen ini memerlukan dua buah atribut, yaitu
atribut action dan method.

Atribut action berfungsi untuk menentukan halaman yang akan digunakan untuk memproses data
yang dikirimkan melalui formulir tersebut. Nilai dari atribut ini memiliki aturan yang sama dengan
atribut href pada elemen a dan atribut src pada elemen img.

Diklat Web Programmer 33


CEP –CCIT FTUI
Web Programming

Atribut method berfungsi untuk menentukan metode pengiriman data dari halaman formulir ke
halaman pemroses. Nilai dari atribut ini ada dua, yaitu post dan get. Post lebih umum digunakan
karena data yang dikirimkan lebih aman daripada menggunakan get.

<input name="..." type="text/password" size="..." maxlength="...">

Elemen input adalah elemen paling dasar untuk memasukkan data pada sebuah formulir. Pada
contoh diatas, elemen input menggunakan empat buah atribut, yaitu atribut name, type, size, dan
maxlength. Sebenarnya, atribut yang wajib digunakan pada elemen ini hanyalah name dan type saja.
Atribut size dan maxlength bersifat sebagai tambahan saja.

Atribut name berfungsi untuk menentukan nama dari variabel yang akan digunakan oleh halaman
pemroses. Lebih lanjut mengenai atribut ini akan Anda pelajari pada Bab 7. Pastikanlah Anda
memberikan nama yang jelas dan mudah dimengerti. Peraturan lainnya yang perlu diperhatikan adalah
jangan menggunakan spasi dalam atribut ini.

Atribut type berfungsi untuk menentukan tipe dari data yang akan dimasukkan. Ada bebera[a nilai
yang dapat digunakan pada atribut ini, diantaranya adalah text danpassword. Jika menggunakan nilai
text maka data yang akan dimasukkan berupa teks biasa, sedangkan jika menggunakan nilai password
maka data yang akan dimasukkan akan disembunyikan.

Atribut size berfungsi untuk menentukan ukuran dari tempat masukan data. Ukuran ini dihitung
dalam satuan karakter. Sedangkan atribut maxlength berfungsi untuk menentukan jumlah karakter
maksimal yang dapat dimasukkan.

<input name="..." type="radio" value="...">

Jika menggunakan nilai radio pada atribut type, maka elemen input akan menampilkan radio button.
Radio button memerlukan sebuah atribut lain, yaitu atribut value. Atribut ini berfungsi untuk
menentukan nilai dari variabel pada atribut name. Dari beberapa radio button yang memiliki nilai
atribut name yang sama, hanya dapat dipilih satu saja.

<textarea name="... " rows="..." cols="..."> ... </textarea>

Elemen textarea berfungsi untuk memasukkan data yang panjang. Sama seperti elemen input,
elemen ini juga memiliki atribut name. Atribut lainnya pada elemen ini adalah atribut rows yang
berfungsi untuk menentukan ukuran tinggi textarea dan atribut cols yang berfungsi untuk menentukan
ukuran lebar textarea. Semua yang terdapat dalam elemen ini akan ditampilkan di dalamnya.

<select name="..."> ... </select>

Elemen select berfungsi untuk membuat drop-down menu. Elemen ini juga memiliki atribut name
seperti elemen input dan textarea.

<option value="..."> ... </option>

Diklat Web Programmer 34


CEP –CCIT FTUI
Web Programming

Elemen option berfungsi untuk menentukan sebuah pilihan di dalam elemen select. Elemen ini
memiliki atribut value seperti pada radio button. Elemen select dan option bekerja seperti elemen ul/ol
dan li.

<input type="reset" value="...">

Jika menggunakan nilai reset pada atribut type, maka elemen input ini akan menampilkan sebuah
tombol yang berfungsi untuk mengosongkan data pada formulir. Berbeda dengan atribut value pada
radio button dan drop-down menu, atribut value pada elemen ini berfungsi untuk menentukan teks
yang terdapat pada tombol tersebut.

<input type="submit" value="...">

Jika menggunakan nilai submit pada atribut type, maka elemen input ini akan menampilkan sebuah
tombol yang berfungsi untuk mengirimkan data formulir pada halaman pemroses. Sama seperti reset,
atribut value pada elemen ini berfungsi untuk menentukan teks yang terdapat pada tombol tersebut.

CONTOH :
<!doctype html>

<html>

<head>
<title>Formulir Pendaftaran</title>
</head>

<body>

<h1>Formulir Pendaftaran</h1>

<form action="proses_daftar.php" method="post">


<p>
Nama : <br>
<input name="nama" type="text" size="50" maxlength="100">
<p>
Jenis Kelamin : <br>
<input name="jenis_kelamin" type="radio" value="p"> Pria
<input name="jenis_kelamin" type="radio" value="w"> Wanita
<p>
Alamat : <br>
<textarea name="alamat" rows="5" cols="50"></textarea>
<p>
Agama : <br>
<select name="agama">
<option value="islam">Islam</option>
<option value="katolik">Kristen Katolik</option>
<option value="protestan">Kristen Protestan</option>
<option value="hindu">Hindu</option>
<option value="buddha">Buddha</option>
<option value="lainnya">Lainnya</option>
</select>
<p>
Kata Sandi : <br>
<input name="sandi" type="password" size="50" maxlength="100">
<p>

Diklat Web Programmer 35


CEP –CCIT FTUI
Web Programming

Konfirmasi Kata Sandi : <br>


<input name="konfirmasi_sandi" type="password" size="50" maxlength="100">

<p>
<input type="reset" value="Hapus">
<input type="submit" value="Kirim">
</form>

</body>

</html>

2.10 BEKERJA DENGAN PETA

Peta dalam sebuah halaman web dapat dijadikan sebuah metode alternatif untuk mendapatkan
masukkan data dari pengguna situs web Anda. Walaupun begitu, proses pembuatan peta dengan
menggunakan bahasa HTML sangatlah rumit, terutama apabila Anda melakukannya secara manual.

Oleh karena itu, untuk mempermudah proses pembuatan peta pada halaman web, akan digunakan
sebuah aplikasi tambahan yang bernama ImageMap. Aplikasi ini dapat Anda dapatkan secara gratis dari
http://code.google.com/p/imgmap/. Namun, Anda akan memerlukan Adobe AIR untuk
menjalankannya. Adobe AIR juga dapat didapatkan secara gratis dari http://get.adobe.com/air/.

Berikut adalah langkah-langkah untuk membuat sebuah peta HTML dengan menggunakan
ImageMap :

1. Jalankan aplikasi ImageMap hingga tampil jendela utamanya. Pilih


menu File > Get Image From File.. untuk memilih berkas gambar
peta.

2. Pilih berkas gambar peta yang Anda inginkan lalu tekan tombol
Open,

Diklat Web Programmer 36


CEP –CCIT FTUI
Web Programming

3. Pilih bentuk area yang Anda inginkan, peta HTML mendukung 3


macam bentuk area, yaitu kotak, lingkaran, dan poligon (tidak
beraturan).

4. Tandai area yang Anda inginkan dengan menggunakan klik kiri.


Pada titik yang terakhir, gunakan Shift + klik kiri untuk
mengakhiri mode penandaan.
5. Di bagian atas, masukan tujuan tautan pada kolom Href.
6. Ulangi proses penandaan hingga semua area telah ditandai.

7. Jika proses penandaan sudah selesai salin perintah yang tertera


pada bagian code, lalu gunakanlah perintah tersebut dalam
dokumen HTML.

Setelah Anda menyiapkan gambar peta dengan menggunakan ImageMap, tentunya Anda harus
membuat sebuah halaman web untuk menampilkan peta tersebut. Buatlah dokumen HTML baru
sebagai berikut :

<!doctype html>
<html>
<head>
<title>Peta Indonesia</title>
</head>
<body>
<h1>Peta Indonesia</h1>
<p>
<img src="peta.gif" usemap="#indonesia">

Diklat Web Programmer 37


CEP –CCIT FTUI
Web Programming

<map name="indonesia"><area shape="poly" alt="" title=""


coords="154,214,170,206,277,222,273,255,144,228" href="jawa.html" target="" /><area
shape="poly" alt="" title=""
coords="132,216,168,202,168,178,196,180,196,163,173,162,166,149,152,151,138,142,145,133,
127,121,61,67,42,65,24,58,29,103,92,178" href="sumatra.html" target="" /><area
shape="poly" alt="" title=""
coords="208,104,193,139,221,180,265,185,275,195,300,184,305,156,319,142,319,130,331,130,
331,117,319,108,311,94,315,79,286,78,281,97,272,115,252,114,229,122,218,118"
href="kalimantan.html" target="" /><area shape="poly" alt="" title=""
coords="335,209,351,210,349,177,364,200,387,193,365,161,375,156,388,165,395,163,387,136,
351,149,349,136,398,133,414,113,407,105,392,121,353,113,337,122,331,144,324,162,324,182,
331,188" href="sulawesi.html" target="" /><area shape="poly" alt="" title=""
coords="608,169,609,259,586,246,559,256,557,235,572,230,553,204,499,192,477,146,499,135,
574,154,594,161" href="papua.html" target="" /><area shape="rect" alt="" title=""
coords="419,97,470,196" href="maluku.html" target="" /><area shape="rect" alt=""
title="" coords="277,234,291,252" href="bali.html" target="" /><area shape="poly" alt=""
title=""
coords="295,245,311,231,349,236,380,234,421,229,438,227,435,238,400,246,406,262,374,281,
331,267,321,252,300,256" href="nusatenggara.html" target="" />map>

</body>
</html>

Pastikan Anda mengganti tag map yang dihasilkan dari ImageMap menjadi sesuai dengan contoh.

<img src="..." usemap="#..." />

Atribut tambahan usemap pada elemen image menandakan bahwa gambar tersebut adalah sebuah
peta. Dimana nilai dari atribut ini adalah nama dari peta yang bersangkutan.

<map name="indonesia"> ... </map>

Elemen map berfungsi untuk mendefinisikan sebuah peta. Elemen ini memerlukan sebuah atribut,
yaitu atribut name yang berfungsi untuk memberikan nama terhadap peta tersebut.

<area shape="..." alt="..." title="..." coords="..." href="..." target="..." />

Elemen area berfungsi untuk mendefinisikan sebuah area. Atribut dasar dari elemen ini adalah
atribut shape yang berfungsi untuk menentukan bentuk area dan atribut coords yang berfungsi untuk
menentukan koordinat X dan Y dari titik sudut area tersebut. Atribut alt, title, href, dan target
memiliki fungsi yang sama dengan atribut pada elemen a.

Diklat Web Programmer 38


CEP –CCIT FTUI
Web Programming

BAB 3 : MENGGUNAKAN CSS

Diklat Web Programmer 39


CEP –CCIT FTUI
Web Programming

3.1 PENGERTIAN CSS

Pada bab sebelumnya, Anda sudah mempelajari cara memberikan format dan warna pada elemen-
elemen yang terdapat di dalam halaman web Anda dengan menggunakan atribut style. Sebenarnya,
penggunaan atribut style ini bukanlah merupakan cara yang efisien untuk memformat sebuah halaman
web. Bayangkan, jika Anda memiliki 20 halaman di dalam website Anda, dan Anda ingin merubah jenis
huruf dari semua halaman tersebut, maka Anda harus mengedit semua halaman tersebut. Bagaimana
jika Anda memiliki 100 halaman? Tentunya hal ini akan memakan waktu yang banyak.

Untuk mengatasi masalah tersebut, Anda dapat menggunakan CSS (Cascading Style Sheet) sebagai
sebuah suplemen terhadap halaman-halaman web Anda. Dengan menggunakan CSS, Anda dapat
memisahkan isi dan format tampilan dari halaman web Anda, dimana nantinya HTML hanya digunakan
untuk membuat isi dari halaman Anda dan format tampilannya diletakkan di dalam sebuah file CSS
yang terpisah.

Dengan adanya pemisahan antara isi dengan format seperti ini tentunya akan mempermudah Anda
untuk mengubah-ubah isi maupun tampilan dari halaman web Anda. Hal ini dikarenakan sebuah file
CSS dapat digunakan berkali-kali oleh banyak halaman web sekaligus, sehingga perubahan yang Anda
berikan pada file CSS akan berpengaruh terhadap semua halaman web yang menggunakan file CSS
tersebut. Menjadikan proses desain menjadi lebih efisien.

Sama halnya dengan HTML, CSS juga distandarisasi oleh W3C. Standar CSS yang paling baru adalah
CSS versi 2.1 yang diresmikan pada tanggal 19 Juli 2007.

3.2 MEMBUAT DAN MENGHUBUNGKAN FILE CSS

Seperti yang sudah dijelaskan sebelumnya, file CSS akan berada terpisah dengan file-file HTML yang
Anda miliki. Oleh karena itu Anda harus menghubungkan file HTML yang ingin Anda format dengan
sebuah file CSS.

Namun, Sebelum Anda dapat menghubungkan file HTML dengan file CSS, tentunya Anda harus
membuat file CSS yang ingin Anda hubungkan terlebih dahulu. Proses pembuatan file CSS sangatlah
mudah, Anda cukup menggunakan text editor favorit Anda dan menyimpannya dengan menggunakan
ekstensi .css. Sebagai awal, cobalah membuat sebuah file CSS yang berisikan sebagai berikut :

h1 {
color: red;
}

h2 {
color: green;
}

p {
color: blue;
}

Diklat Web Programmer 40


CEP –CCIT FTUI
Web Programming

Lalu simpanlah dengan nama tampilan.css di dalam folder yang sama dengan file HTML yang ingin
Anda hubungkan dengan file CSS tersebut. Jika Anda perhatikan baik-baik, Anda akan menggunakan
nilai-nilai atribut yang terdapat pada atribut style di dalam sebuah file CSS. Dalam contoh ini, akan
digunakan nilai atribut color yang berfungsi untuk memberikan warna pada suatu teks.

Setelah itu, Anda dapat menghubungkan file-file HTML dengan file CSS tersebut. Proses
menghubungkan file HTML dengan file CSS tersebut dapat Anda lakukan dengan menggunakan elemen
link yang diletakkan pada elemen head dalam file HTML Anda. Elemen ini akan memerlukan beberapa
atribut, yaitu href, rel, dan type. Atribut href memiliki fungsi yang sama seperti atribut href pada
elemen a, yaitu untuk menentukan alaman dari file CSS yang akan ingin dihubungkan. Sedangkan
elemen rel dan type berfungsi untuk memberikan keterangan bahwa ini adalah sebuah file tampilan
(stylesheet) dengan tipe file CSS.

SINTAKS :
<link href="alamat_file_css" rel="stylesheet" type="text/css">

CONTOH :
<!doctype html>

<html>

<head>
<title>Judul</title>
<link href="tampilan.css" rel="stylesheet" type="text/css" />
</head>

<body>

<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.

<h2>Dolor sit Amet</h2>


<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis
placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna
sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit
amet est augue.

<h2>Consectetur Adipiscing Elit</h2>


<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae
euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed
nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.

</body>

</html>

Diklat Web Programmer 41


CEP –CCIT FTUI
Web Programming

3.3 ATURAN CSS

Sebuah file CSS memiliki struktur yang berbeda dengan file HTML. Jika pada sebuah file HTML Anda
akan menggunakan tag, atribut, dan elemen, maka dalam sebuah file CSS Anda akan menggunakan
suatu aturan khusus yang dikenal dengan istilah CSS Rule, atau aturan CSS, dimana aturan tersebut
terdiri dari berbagai macam komponen, yaitu selector, property, dan value. Secara garis besar, sintaks
untuk menuliskan sebuah aturan CSS sangatlah sederhana, yaitu :

selector { property: value; }

3.3.1 SELECTOR

Selector berfungsi untuk menentukan elemen atau komponen HTML manakah yang akan
diberlakukan sebuah aturan CSS. Ada tiga macam selector yang dapat Anda gunakan, yaitu tag selector,
class selector, dan ID selector.

3.3.1.1 TAG SELECTOR

Tag selector adalah sebuah selector yang akan menerapkan aturan CSS kepada sebuah tag atau
elemen yang terdapat pada file HTML. Perhatikanlah contoh berikut ini :

body { ... }

Selector ini akan menerapkan aturan CSS untuk elemen body dan semua elemen lain yang terdapat
di dalamnya.

form p { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p dan semua elemen lain yang terdapat di
dalamnya apabila elemen p tersebut terletak di dalam elemen form.

ul li p { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p dan semua elemen lain yang terdapat di
dalamnya apabila elemen p terletak di dalam elemen li yang juga terletak di dalam elemen ul.

Dalam penggunaanya, sebuah aturan yang diberikan dengan menggunakan tag selector akan
berlaku untuk semua elemen sesuai yang terdapat di dalam file HTML Anda. Sebagai contoh, apabila di
dalam sebuah file HTML terdapat sepuluh buah paragraf dengan menggunakan elemen p, dan di dalam
file CSS yang dihubungkan memiliki aturan untuk elemen p, maka semua paragraf yang terdapat di
dalam file HTML tersebut akan memiliki format yang sama sesuai dengan aturan yang diterapkan pada
file CSS.

Mungkin ada kalanya Anda ingin memberikan warna merah pada paragraf pertama dan warna biru
pada paragraf kedua. Jika hanya menggunakan tag selector, maka tentunya hal ini tidak dapat dilakukan.
Untuk melakukan hal seperti ini Anda dapat menggunakan class selector atau ID selector.

Diklat Web Programmer 42


CEP –CCIT FTUI
Web Programming

3.3.1.2 CLASS SELECTOR

Class selector adalah sebuah selector yang akan menerapkan aturan CSS kepada semua tag atau
elemen yang memiliki atribut class yang sesuai. Untuk menggunakan aturan seperti ini, Anda harus
memberikan atribut tambahan class untuk setiap elemen HTML dimana Anda ingin memberlakukan
aturan yang terdapat pada file CSS.

SINTAKS :
<elemen class="nama_kelas">

CONTOH :
<p class="merah">

Untuk membuat aturan CSS seperti ini sangatlah mudah, class selector selalu diawali dengan sebuah
titik. Perhatikanlah contoh berikut ini :

.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk
atribut classnya.

p.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut
classnya

p .red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk
atribut classnya apabila elemen tersebut berada di dalam elemen p.

form p.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut
classnya apabila elemen tersebut berada di dalam elemen form.

form.login p.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut
classnya apabila elemen tersebut berada di dalam elemen form yang memiliki nilai login untuk atribut
classnya.

3.3.1.3 ID SELECTOR

ID selector pada dasarnya selector memiliki fungsi yang sama dengan class selector, hanya saja
atribut tambahan yang digunakan pada elemen-elemen yang tedapat di dalam file HTML adalah atribut
id.

Diklat Web Programmer 43


CEP –CCIT FTUI
Web Programming

SINTAKS :
<elemen id="nama_id">

CONTOH :
<p id="merah">

Selectornya sendiri menggunakan tanda pagar (#). Perhatikanlah contoh berikut ini :

#home { ... }

Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai home untuk
atribut IDnya.

p#green { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai green untuk atribut
IDnya.

3.3.2 PROPERTY DAN VALUE

Properti (property) berfungsi untuk menentukan faktor tampilan yang ingin dirubah, seperti warna
dan jenis tulisan, warna latar belakang, posisi dan sebagainya. Nilai dari sebuah property disebut
dengan istilah value.

Dalam penulisannya, property dan value selalu berpasangan, dipisahkan oleh sebuah titik dua, dan
diakhiri dengan sebuah titik koma. Sebuah aturan CSS juga dapat memiliki lebih dari satu properti.
Perhatikanlah contoh berikut ini :

body { background: black; }

Aturan dengan ini memiliki sebuah properti, yaitu background dengan nilai (value) black.

h1 { border-bottom: 1px dotted; color: red; }

Aturan dengan ini memiliki dua buah properti, yaitu border-bottom dengan nilai (value) 1px
dotted dan color dengan nilai red.

3.4 MENGGUNAKAN WARNA

Pemilihan warna yang tepat dapat membuat halaman web Anda menjadi lebih menarik untuk
dilihat. Walaupun begitu, perlu diperhatikan bahwa pemilihan warna adalah sebuah hal yang subjektif.
Warna yang menurut Anda bagus bisa jadi tidak disukai oleh pengunjung halaman web Anda. Seperti
yang sudah Anda pelajari sebelumnya, ada dua properti yang dapat Anda gunakan untuk memberikan
warna pada halaman web Anda, yaitu property background dan color.

SINTAKS :
selector { background: value; }

Diklat Web Programmer 44


CEP –CCIT FTUI
Web Programming

CONTOH :
.merah { color: red; }
.jingga { color: rgb(255, 127, 0); }
.kuning { color: #ffff00; }
.hijau { color: #0f0; }
.biru { color: #0000ff; }
.nila { color: rgb(127, 0, 255); }
.ungu { color: purple; }

Properti background berfungsi untuk menentukan warna latar balakang. Nilai yang dapat
digunakan pada properti ini ada empat macam, yaitu nama warna, kode RGB, kode heksadesimal, dan
kode heksadesimal pendek.

Ada 18 nama warna yang dapat digunakan, yaitu aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white,yellow, dan transparent. Penggunaan
nama warna hanya menyediakan jumlah warna yang sangat terbatas, walaupun bagitu, penggunaan
nama warna seperti ini sangat mudah dipahami.

Dalam penggunaan kode RGB, maka warna akan didefinisikan dalam bentuk rgb(red, green, blue).
Angka pertama menentukan intensitas warna merah, angka kedua untuk hijau, dan angka ketiga untuk
biru, dimana angka-angka ini berkisar dari 0 (intensitas terendah) hingga 255 (intensitas tertinggi).

Kode heksadesimal adalah cara yang paling umum digunakan, kode ini akan mendefinisikan sebuah
warna dalam bentuk #RRGGBB. Dua karakter pertama menentukan intensitas warna merah, dua
karakter kedua untung hijau, dan dua huruf karakter untuk biru. Karakter yang digunakan adalah 0
(intensitas terendah), 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E dan F (intensitas tertinggi). Kode heksadesimal
singkat menyingkat 6 karakter pada kode heksadesimal menjadi 3 karakter dalam bentuk #RGB.

SINTAKS :
selector { color: value; }

Sedangkan properti color berfungsi untuk menentukan warna huruf. Nilai yang digunakan pada
properti ini sama dengan nilai yang digunakan pada properti background.

Diklat Web Programmer 45


CEP –CCIT FTUI
Web Programming

3.5 MEMFORMAT TEKS

Selain warna, Anda juga dapat memformat teks yang ada dalam halaman web Anda dengan
menggunakan CSS. Anda dapat merubah jenis, ukuran, dan bahkan dekorasi huruf.Kesemua properti ini
juga telah Anda pelajari pada bab sebelumnya.

SINTAKS :
selector { font-family: value; }

CONTOH :
body { font-family: "trebuchet ms", "verdana", "sans-serif"; }
.trebuchet { font-family: "verdana"; }
.times { font-family: "times new roman"; }
.courier { font-family: "courier new"; }

Properti font-family berfungsi untuk menentukan jenis huruf. Jenis huruf dituliskan di dalam tanda
kutip dua. Anda dapat memberikan lebih dari satu jenis huruf dengan menggunakan spasi sebagai
pemisah. Jenis huruf tambahan yang diberikan akan berfungsi sebagai alternatif apabila jenis huruf
yang sebelumnya tidak ditemukan pada komputer yang digunakan oleh pengunjung halaman web Anda.

SINTAKS :
selector { font-size: value; }

CONTOH :
h1 { font-size: xx-large; }
h2 { font-size: 16pt; }
p { font-size: 16px; }

Property font-size berfungsi untuk menentukan ukuran huruf. Ukuran huruf dapat dinyatakan
dalam tiga macam satuan, yaitu nama ukuran, pt, dan px.

Ada 7 nama ukuran yang dapat digunakan, mulai dari yang terbesar xx-large, x-large, large,
medium, small, x-small, hingga yang terkecil xx-small. Sama seperti penggunaan nama warna,
penggunaan nama ukuran huruf memberikan pilihan yang lebih sedikit tetapi mudah untuk dipahami.

Satuan pt (point) adalah satuan ukuran huruf yang umum digunakan dalam tipografi (percetakan),
sedangkan satuan px (pixel/piksel) adalah satuan ukuran huruf berdasarkan jumlah piksel dari sebuah
karakter. Untuk kedua satuan ini, semakin besar nilainya maka akan semakin besar pula ukuran
hurufnya.

SINTAKS :
selector { font-weight: value; }

CONTOH :
.tebal { font-weight: bold; }

Property font-weight dengan nilai bold memiliki fungsi yang sama dengan tag strong, yaitu
memberikan cetak tebal kepada sebuah teks. Untuk mengembalikan seperti semula dapat
menggunakan nilai normal.

Diklat Web Programmer 46


CEP –CCIT FTUI
Web Programming

SINTAKS :
selector { font-style: value; }

CONTOH :
.miring { font-style: italic; }

Property font-style dengan nilai italic memiliki fungsi yang sama dengan tag em, yaitu memberikan
cetak miring kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai
normal.

SINTAKS :
selector { font-variant: value; }

CONTOH :
.kapital-kecil { font-variant: small-caps; }

Property font-variant dengan nilai small-caps berfungsi untuk memberikan efek kapital kecil
(small-caps) kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai
normal.

SINTAKS :
selector { text-deocation: value; }

CONTOH :
.garis-bawah { text-decoration: underline; }
.garis-tengah { text-decoration: line-through; }
.garis-atas { text-decoration: overline; }
.kedip { text-decoration: blink; }

Property text-decoration berfungsi untuk memberikan dekorasi tambahan terhadap sebuah teks.
Nilai yang dapat digunakan adalah underline (garis-bawah), overline (garis-atas), line-through
(garis-tengah), blink (berkedap-kedip), dan none (tanpa dekorasi).

SINTAKS :
selector { text-transform: value; }

CONTOH :
.kapital { text-transform: uppercase; }

Property text-transform berfungsi untuk merubah kapitalisasi huruf dari sebuah teks. Nilai yang
dapat digunakan adalah capitalize (Huruf Besar Pada Awal Kata), uppercase (BESAR SEMUA),
lowercase (kecil semua), dan none (tanpa perubahan).

SINTAKS :
selector { text-align: value; }

CONTOH :
.rata-tengah { text-align: center; }
.rata-kanan { text-align: left; }

Property text-align berfungsi untuk mengatur proses perataan dari sebuah teks. Nilai yang dapat
digunakan adalah left (rata kiri), center (rata tengah), right (rata kanan), dan justify (rata kiri dan
kanan).

Diklat Web Programmer 47


CEP –CCIT FTUI
Web Programming

SINTAKS :
selector { text-indent: value; }

CONTOH :
.rata-kiri {
text-indent: 100px;
text-align: left;
}

.rata-kanan-kiri {
text-indent: 50pt;
text-align: justify;
}

Property text-indent berfungsi untuk memberikan indentasi pada baris pertama dari sebuah
paragraf menggunakan satuan pt atau px.

3.6 MEMBERIKAN MARGIN

Margin dapat digunakan untuk mengatur jarak antara sebuah elemen dengan elemen lainnya pada
sebuah halaman web. Pemberian jarak yang tepat tentunya dapat digunakan untuk membuat isi dari
halaman web Anda mudah dibaca.

Properti margin digunakan untuk memberikan jarak. Satuan yang digunakan adalah px (piksel).
Jika Anda ingin mengatur jarak dengan lebih mendetail, Anda dapat menggunakan properti margin-top
(jarak dengan elemen yang berada di atas), margin-bottom (bawah), margin-left (kiri), dan margin-
right (kanan).

SINTAKS :
selector { margin: value; }
selector{ margin-top: value; margin-bottom: value; margin-left: value; margin-right:
value; }

CONTOH (HTML) :
<!doctype html>

<html>

<head>
<title>Galeri Foto</title>
<link href="margin.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Galeri Foto</h1>
<img src="foto1.jpg">
<img src="foto2.jpg">
<br>
<img src="foto3.jpg">
<img src="foto4.jpg">
<br>
</body>

Diklat Web Programmer 48


CEP –CCIT FTUI
Web Programming

</html>

CONTOH (CSS) :
h1 {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
}

img { margin: 10px; }

3.7 MEMBERIKAN BORDER DAN PADDING

Selain margin, Anda juga dapat memberikan border dan padding untuk memberikan batasan yang
lebih jelas lagi antara sebuah elemen dengan elemen lain yang terdapat pada halaman web Anda.
Margin, border, dan padding dalam kesatuannya disebut dengan istilah box-model. Untuk lebih jelas
mengenai perbedaan diantaranya, perhatikanlah diagram berikut ini :

Padding adalah jarak yang membatasi antara isi dari sebuah elemen dengan border, sedangkan
margin adalah jarak yang membatasi antara border dengan elemen lainnya.

SINTAKS :
selector { border: ketebalan tipe warna; }
selector{ border-top: ketebalan tipe warna; border-bottom: ketebalan tipe warna; border-
left: ketebalan tipe warna; border-right: ketebalan tipe warna; }

Properti border berfungsi untuk memberikan garis batas atau bingkai terhadap sebuah elemen.
Properti ini memerlukan tiga buah nilai yang harus ditulis secara berurutan, yaitu ketebalan dalam
satuan px, diikuti tipe yang dapat berupa solid (garis lurus), dotted (titik-titik), dashed (garis putus-
putus), dan none (tanpa border), dan diakhiri dengan warnagaris. Seperti halnya dengan properti
margin, Anda juga dapan menggunakan properti boder secara mendetail.

Diklat Web Programmer 49


CEP –CCIT FTUI
Web Programming

SINTAKS :
selector { padding: value; }
selector{ padding-top: value; padding-bottom: value; padding-left: value; padding-right:
value; }

Properti padding berfungsi untuk memberikan jarak antara garis batas atau bingkai dengan isi dari
sebuah elemen. Satuan yang digunakan adalah px (piksel). Properti padding juga dapat digunakan
secara mendetail.

CONTOH (HTML) :
<!doctype html>

<html>

<head>
<title>Galeri Foto</title>
<link href="border.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Galeri Foto</h1>
<img src="foto1.jpg">
<img src="foto2.jpg">
<br>
<img src="foto3.jpg">
<img src="foto4.jpg">
<br>
</body>

</html>

CONTOH (CSS) :
h1 {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
}

img {
margin: 5px;
border: 5px solid #729fcf;
padding: 5px;
}

3.8 MENGGUNAKAN PSEUDO-CLASS

Ketika Anda membuat link dalam halaman web, umumnya link tersebut berwarna biru, tetapi
setelah link tersebut diklik, maka warnanya akan berubah menjadi ungu. Hal ini sebenarnya
dimaksudkan untuk mempermudah pengunjung halaman web Anda untuk membedakan link mana
yang sudah dikunjungi dan mana yang belum dikunjungi. Apabila warna yang tersebut tidak serasi
dengan warna-warna lain yang digunakan pada halaman web Anda, tentunya Anda ingin merubahnya.

Untuk melakukan hal ini, Anda dapat menggunakan bantuan pseudo-class, yaitu sebuah kelas khusus
yang berfungsi untuk memberikan aturan CSS pada sebuah elemen berdasarkan dari keadaan elemen

Diklat Web Programmer 50


CEP –CCIT FTUI
Web Programming

tersebut. Misalkan keadaan jika kursor mouse berada di atas elemen tersebut, atau keadaan link yang
telah dikunjungi.Penulisan psseudo-class selalu diawali dengan tanda titik dua.

SINTAKS :
selector:hover {property:value; }

Pseudo-class :hover berfungsi untuk membedakan aturan CSS yang diberikan kepada sebuah
elemen apabila kursor (penunjuk) mouse berada di atas elemen tersebut. Pseudo-class hover dapat
digunakan untuk semua selector.

SINTAKS :
a:visited {property:value; }

Pseudo-class :visited berfungsi untuk membedakan aturan CSS yang diberikan kepada elemen a
apabila link tersebut sudah pernah dikunjungi. Berbeda dengan :hover, pseudo-class ini hanya dapat
digunakan untuk tag selector a saja.

CONTOH (HTML) :
<!doctype html>

<html>

<head>
<title>Link</title>
<link href="pseudo_class.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Selamat datang!</h1>
<p>Silahkan pilih halaman yang ingin Anda kunjungi :
<ul>
<li><a href="profil.html">Profil</a>
<li><a href="galeri.html">Galeri Foto</a>
<li><a href="http://saya.blogspot.com">Blog</a>
<li><a href="http://www.facebook.com/saya">Facebook</a>
</ul>
</body>

</html>

CONTOH (CSS) :
a {
color: #204a87;
text-decoration: none;
}

a:hover {
color: #729fcf;
text-decoration: underline;
}

a:visited {
color: #204a87;
text-decoration: none;
}

Diklat Web Programmer 51


CEP –CCIT FTUI
Web Programming

3.9 MENGGUNAKAN GAMBAR LATAR

Gambar latar yang tepat juga dapat menjadi sebuah sentuhan tersendiri yang dapat membuat
halaman web Anda tampil lebih menarik. Walaupun begitu, penggunaan gambar latar sebaiknya tidak
berlebihan, karena pengguaan gambar latar yang tidak baik akan membuat teks yang terdapat pada
halaman web Anda menjadi sulit untuk dibaca.

SINTAKS :
selector {background-image: url('alamat_gambar'); }

Properti background-image berfungsi untuk memberikan gambar latar belakang kepada sebuah
elemen. Nilai dari url menggunakan konsep yang sama seperti nilai dari atribut src pada elemen img.

SINTAKS :
selector { background_repeat: value; }

Properti background-repeat berfungsi untuk mengulang gambar latar berdasarkan nilai properti
ini. Nilai yang dapat digunakan adalah repeat-x (mengulang secara horizontal), repeat-y (mengulang
secara vertikal), repeat (mengulang secara horizontal dan vertikal), dan no-repeat (tidak mengulang).

CONTOH (HTML) :
<!doctype html>

<html>

<head>
<title>Judul</title>
<link href="latar.css" rel="stylesheet" type="text/css" />
</head>

<body>

<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.

<h2>Dolor sit Amet</h2>


<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis
placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna
sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit
amet est augue.

<h2>Consectetur Adipiscing Elit</h2>


<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae
euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed
nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.

</body>

</html>

Diklat Web Programmer 52


CEP –CCIT FTUI
Web Programming

CONTOH (CSS) :
body {
background-image: url('gradasi.png');
background-repeat: repeat-x;
font-family: "trebuchet ms";
font-size: 14px;
}

h1 {
margin-top: 50px;
margin-bottom: 10px;
border-bottom: 1px solid;
padding-bottom: 3px;
font-weight: normal;
}

h2 {
margin-bottom: -15px;
font-weight: normal;
}

Diklat Web Programmer 53


CEP –CCIT FTUI
Web Programming

BAB 4 : MENGATUR TATA LETAK HALAMAN WEB

Diklat Web Programmer 54


CEP –CCIT FTUI
Web Programming

4.1 MEMBUAT KOLOM

Pada bab 3, Anda sudah belajar dasar-dasar dari CSS yang dapat digunakan untuk memberikan
format tampilan kepada halaman web Anda. Namun, mungkin Anda merasa tata letak dari halaman web
Anda masih bersifat sangat sederhana, yaitu terus menerus dari atas ke bawah tanpa ada variasi seperti
kolom, menu navigasi, dan sebagainya.

Dahulu, pengaturan tata letak dari sebuah halaman web dibuat dengan menggunakan banyak tabel
yang saling berhubungan antara satu dengan lainnya. Pada saat itu metode ini memang dinilai cukup
efektif, namun penggunaan tabel seperti ini ternyata adalah hal yang salah. Elemen tabel yang
didefinisikan dalam sebuah dokumen HTML hanya berfungsi untuk menampilkan data yang bersifat
tabular, bukanlah berfungsi untuk mengatur tata letak halaman web.

Oleh karena itu, ditemukanlah sebuah teknik baru yang dapat digunakan untuk mengatur tata letak
dari sebuah halaman web dengan menggunakan CSS. Teknik ini dikenal dengan istilah CSS layout atau
tableless layout. Teknik ini menggunakan elemen HTML div dan properti tertentu dari CSS untuk
menghasilkan efek tata letak yang tidak kalah dan bahkan jauh lebih baik apabila dibandingkan dengan
menggunakan tabel.

4.1.1 KOLOM UNTUK TATA LETAK

Pengelompokkan elemen-elemen dari sebuah halaman HTML ke dalam beberapa bagian adalah
dasar dari tata letak sebuah halaman web. Bagian-bagian tersebut antara lain adalah bagian judul,
navigasi, isi atau konten, dan penutup (header). Berikut adalah contoh dari beberapa macam tata letak
sebuah halaman web :

Judul Judul Judul


Navigasi
Navigasi Isi Isi Navigasi
Isi

Penutup
Penutup Penutup

Dasar dari pembuatan tata letak seperti ini adalah penggunaan kolom. Kolom dapat dibuat dengan
membuat elemen div untuk setiap bagian dan memberikan properti CSS yang tepat untuk setiap
elemen tersebut. Cobalah terlebih dahulu membuat sebuah halaman web sebagai berikut :

CONTOH HTML :
<!doctype html>

<html>

<head>

Diklat Web Programmer 55


CEP –CCIT FTUI
Web Programming

<title>Layout 1</title>
<link href="layout1.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="judul">
<h1>Lorem Ipsum</h1>
<h2>Lorem Ipsum Dolor sit Amet, Consectetur Adipiscing Elit</h2>
</div>

<div class="navigasi">
<h1>Menu Utama</h1>
<ul>
<li><a href="#">Lorem Ipsum</a>
<li><a href="#">Dolor sit Amet</a>
<li><a href="#">Consectetur</a>
<li><a href="#">Adispiscing Elit</a>
</ul>
</div>

<div class="isi">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum
tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus.
Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in
dictum metus.
<h2>Dolor sit Amet</h2>
<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis
placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna
sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit
amet est augue.
<h2>Consectetur Adipiscing Elit</h2>
<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum
vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc
sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.
</div>

<div class="penutup">
<p class="tengah">Halaman ini dibuat oleh saya
</div>

</body>

</html>

CONTOH CSS :
* { margin: 0px; padding: 0px; }

body {
width: 960px; margin: auto;
background-image: url('gradasi.png'); background-repeat: repeat-x;
padding: 20px;
color: #2e3436; font-family: "trebuchet ms"; font-size: 10pt;
}

a { color: #204a87; text-decoration: none; }


a:hover { color: #729fcf; text-decoration: underline; }

Diklat Web Programmer 56


CEP –CCIT FTUI
Web Programming

a:visited { color: #204a87; text-decoration: none; }

.judul { margin-bottom: 20px; border-bottom: solid 1px; padding-bottom: 10px; }


.judul h1 { font-size: 24pt; font-weight: normal; }
.judul h2 { font-size: 12pt; font-weight: normal; }

.navigasi { float: left; width: 180px; margin-right: 20px; }


.navigasi h1 {
margin-bottom: 5px; padding-left: 10px;
background-color: #729fcf; color: #ffffff;
font-size: 12pt; font-weight: normal;
}
.navigasi ul { margin-left: 20px; }

.isi { float: left; width: 760px; margin-bottom: 10px; }


.isi h1 {
margin-bottom: 5px; padding-left: 20px;
background-color: #729fcf; color: #ffffff;
font-size: 12pt; font-weight: normal;
}
.isi p { margin-bottom: 10px; text-indent: 20px; }

.penutup { clear: both; border-top: solid 1px; padding-top: 10px; }


.penutup p { text-align: center; }

Pada contoh di atas, halaman web dibagi manjadi empat bagian, yaitu judul, navigasi, isi dan
penutup dengan menggunakan tata letak sebagai berikut :

Lebar Total : 960px

Judul

Navigasi

Lebar :
180px Isi
Lebar : 760px

Batas
kanan :
20px

Penutup

Berdasarkan kepada statistik pada bulan Juni tahun 2010, 24% pengguna Internet masih
menggunakan layar monitor dengan resolusi 1024x768 piksel. Anda sebagai seorang pengembang web
tentunya harus dapat memenuhi kebutuhan setiap pengunjung web Anda. Lebar halaman 960px adalah
ukuran yang cocok untuk resolusi 1024x768 dan juga tidak terlihat buruk pada resolusi yang lebih
tinggi.

Diklat Web Programmer 57


CEP –CCIT FTUI
Web Programming

Sekarang marilah kita membahasa satu-persatu langkah-langkah yang diperlukan untuk membuat
tata letak seperti halaman web di atas.

SINTAKS :
<div class="nama_kelas">isi</div>

Elemen div (division) berfungsi untuk mengelompokkan beberapa elemen menjadi sebuah bagian
dari halaman web. Elemen ini pada umumnya menggunakan atribut class untuk menentukan aturan
CSS yang berlaku dalam elemen tersebut. Selain class, atribut id juga dapat digunakan dalam elemen ini.

Pada contoh di atas, halaman web tersebut dikelompokkan ke dalam beberapa bagian, yaitu bagian
judul, navigasi, isi, dan penutup dengan menggunakan elemen div pada setiap bagiannya.

SINTAKS :
* { margin: 0px; padding: 0px; }

Selector * adalah sebuah selector khusus dimana aturan CSS dalam selector ini akan berlaku kepada
semua elemen yang tedapat dalam halaman web.

Pada contoh di atas, digunakan properti margin dan padding dengan nilai 0px. Hal ini
dimaksudkan untuk mengatur ulang margin dan padding yang sudah ada secara otomatis pada setiap
aplikasi web browser. Margin dan padding otomatis ini akan berbeda-beda ukurannya tergantung dari
web browser yang digunakan. Oleh karena itu, ada baiknya Anda mengatur ulang margin dan padding
ini agar tampilan halaman web Anda akan sama untuk setiap web browser.

SINTAKS :
selector { width: lebar; }

Properti width berfungsi untuk menentukan ukuran lebar dari sebuah elemen. Satuan yang
digunakan dapat berupa px, pt dan % (persentasi).

SINTAKS :
selector { margin: auto; }

Properti margin dengan nilai auto berfungsi untuk meletakkan elemen pada bagian tengah secara
otomatis. Hal ini sangat berguna apibila ukuran lebar dari halaman web Anda lebih kecil daripada
resolusi monitor yang digunakan oleh pengunjung halaman web Anda. Jika Anda tidak menggunakan
properti ini, maka halaman web Anda akan tertampil di bagian kiri.

SINTAKS :
selector { float: left; }

Properti float berfungsi untuk membuat sebuah elemen “mengambang”, maksudnya adalah, elemen
yang mengambang tersebut akan ditampilkan secara bertumpuk dengan elemen lainnya. Mudahnya,
gunakanlah properti ini untuk setiap bagian yang ingin Anda buat sebagai sebuah kolom. Pada contoh
di atas, properti ini digunakan pada bagian navigasi dan isi.

SINTAKS :
selector { clear: both; }

Diklat Web Programmer 58


CEP –CCIT FTUI
Web Programming

Properti clear berfungsi untuk mengakhiri elemen yang “mengambang”.

Pada contoh di atas, bagian penutup sudah tidak lagi menggunakan kolom sehingga diberikan
aturan CSS dengan propeti clear: both. Jika setelah kolom selesai tidak ada elemen lagi, maka properti
ini tidak perlu digunakan.

4.1.2 KOLOM UNTUK TEKS

Kolom tidak hanya dapat digunakan untuk mengatur tata letak utama dari sebuah halaman web,
tetapi kolom juga dapat digunakan untuk membuat kolom teks seperti pada surat kabar dan majalah.
Anda juga dapat membuat sebuah kolom di dalam kolom lainnya. Cobalah contoh berikut ini :

CONTOH HTML :
<!doctype html>

<html>

<head>

<title>Layout 2</title>
<link href="layout2.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="judul">
<h1>Lorem Ipsum</h1>
<h2>Lorem Ipsum Dolor sit Amet, Consectetur Adipiscing Elit</h2>
</div>

<div class="navigasi">
<h1>Menu Utama</h1>
<ul>
<li><a href="#">Lorem Ipsum</a>
<li><a href="#">Dolor sit Amet</a>
<li><a href="#">Consectetur</a>
<li><a href="#">Adispiscing Elit</a>
</ul>
</div>

<div class="isi">
<div class="kolom-1">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum
tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus.
Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in
dictum metus.
</div>
<div class="kolom-2">
<h2>Dolor sit Amet</h2>
<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel
mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet
magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec
sit amet est augue.
</div>

Diklat Web Programmer 59


CEP –CCIT FTUI
Web Programming

<div class="kolom-3">
<h2>Consectetur Adipiscing Elit</h2>
<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum
vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc
sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.
</div>
<div class="tanpa-kolom">
<h2>Dolor sit Amet</h2>
<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel
mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet
magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec
sit amet est augue.
</div>
</div>

<div class="penutup">
<p class="tengah">Halaman ini dibuat oleh saya
</div>

</body>

</html>

CONTOH CSS :
* { margin: 0px; padding: 0px; }

body {
width: 960px; margin: auto;
background-image: url('gradasi.png'); background-repeat: repeat-x;
padding: 20px;
color: #2e3436; font-family: "trebuchet ms"; font-size: 10pt;
}

a { color: #204a87; text-decoration: none; }


a:hover { color: #729fcf; text-decoration: underline; }
a:visited { color: #204a87; text-decoration: none; }

.judul { margin-bottom: 20px; border-bottom: solid 1px; padding-bottom: 10px; }


.judul h1 { font-size: 24pt; font-weight: normal; }
.judul h2 { font-size: 12pt; font-weight: normal; }

.navigasi { float: left; width: 180px; margin-right: 20px; }


.navigasi h1 {
margin-bottom: 5px; padding-left: 10px;
background-color: #729fcf; color: #ffffff;
font-size: 12pt; font-weight: normal;
}
.navigasi ul { margin-left: 20px; }

.isi { float: left; width: 760px; margin-bottom: 10px; }


.isi h1 {
margin-bottom: 5px; padding-left: 20px;
background-color: #729fcf; color: #ffffff;
font-size: 12pt; font-weight: normal;
}
.isi p { margin-bottom: 10px; text-indent: 20px; }

.kolom-1 { float:left; width: 245px; margin-right: 10px; }

Diklat Web Programmer 60


CEP –CCIT FTUI
Web Programming

.kolom-2 { float:left; width: 245px; margin-right: 10px; }


.kolom-3 { float:left; width: 245px; }
.tanpa-kolom { clear: both; }

.penutup { clear: both; border-top: solid 1px; padding-top: 10px; }


.penutup p { text-align: center; }

Diklat Web Programmer 61


CEP –CCIT FTUI
Web Programming

BAB 5 : PENGENALAN BASIS DATA

Diklat Web Programmer 62


CEP –CCIT FTUI
Web Programming

5.1 PENGERTIAN BASIS DATA

Basis data, atau yang juga dikenal dengan istilah database, adalah sebuah kumpulan dari banyak
data-data yang terorganisir berdasarkan aturan-aturan tertentu. Sebuah halaman atau situs web yang
bersifat dinamis akan menggunakan basis data sebagai tempat untuk menyimpan data.

Basis data sendiri bukanlah merupakan sebuah aplikasi, melainkan hanyalah sebuah konsep
tentang bagaimana menyimpan dan mengorganisir data. Aplikasi yang berfungsi untuk membuat dan
mengatur data-data yang berada di dalam sebuah basis data disebut dengan Database Management
System (DBMS / sistem manajemen basis data).

Sebagian besar dari aplikasi DBMS menggunakan konsep penyimpanan data yang dikenal dengan
istilah Relational Database Management System (RDBMS / sistem manajemen basis data relasional).
Konsep RDBMS ditemukan oleh E. F. Codd, seorang ahli komputer Inggris pada tahun 1970 melalui
karya tulisnya yang berjudul “A Relational Model of Data for Large Shared Data Banks”. Berdasarkan
konsep ini, data disimpan dalam tabel-tabel yang saling berhubungan.

Ada banyak aplikasi yang termasukan ke dalam kategori DBMS, diantaranya adalah Microsoft
Access, Microsoft SQL Server, Oracle DB, IBM DB2, PostgreSQL, dan MySQL. Namun, MySQL adalah
sebuah aplikasi DBMS yang paling populer untuk penggunaan situs web. Hampir semua penyedia
layanan hosting yang ada mendukung penggunaan aplikasi DBMS ini.

5.2 KOMPONEN DALAM BASIS DATA

Setiap basis data yang ada memiliki berbagai macam komponen yang digunakan untuk menyimpan
dan mengorganisir data. Dalam sistem manajemen basis data relasional, tabel adalah komponen yang
paling penting di dalamnya. Tabel sendiri terdiri dari beberapa komponen lain yang lebih kecil, yaitu
baris (row) dan kolom (column). Sedangkan tabel-tabel yang saling berhubungan satu sama lainnya
akan tergabung dalam sebuah skema.

Sebuah tabel berfungsi untuk menyimpan sekumpulan data dari entitas yang sama. Entitas, atau
yang juga dikenal dengan istilah entity, dapat dikatakan sebagai sebuah benda yang dapat berdiri
sendiri dan dibedakan antara satu dengan lainnya (dapat diidentifikasi). Mudahnya, Anda dapat
menganggap entitas sebagai sebuah objek di dunia nyata, sebagai contoh, “siswa” adalah sebuah entitas,
“barang” adalah sebuah entitas, “lagu” adalah sebuah entitas dan sebagainya.

Setiap entitas akan memiliki sifat atau karakteristik unik di dalamnya. Sifat atau karakteristik dari
sebuah entitas dikenal dengan istilah atribut. Sebagai contoh, entitas siswa dapat memiliki atribut
berupa nomor induk, nama, jenis kelamin, dan tempat & tanggal lahir, sedangkan entitas sebuah barang
dapat memiliki atribut berupa nomor kode, nama barang, harga satuan, dan berat. Dalam sistem
manajemen basis data relasional, atribut dari sebuah entitas akan menjadi sebuah kolom dari suatu
tabel.

Jika kolom dari suatu tabel merepresentasikan atribut dari sebuah entitas, maka baris dari suatu
tabel dalam sistem manajemen basis data relasional merepresentasikan sebuah data. Setiap data yang

Diklat Web Programmer 63


CEP –CCIT FTUI
Web Programming

tersimpan dalam tabel tersebut harus memiliki minimal satu buah atribut yang memiliki nilai yang unik,
dimana maksud dari unik disini adalah tidak ada data yang memiliki nilai sama untuk sebuah atribut.
Sebagai contoh, tidak boleh ada siswa yang memiliki nomor induk yang sama. Atribut yang unik seperti
ini berfungsi agar sistem manajemen basis data dapat membedakan (mengidentifikasi) antara satu data
dengan lainnya. Atribut seperti ini dikenal dengan istilah primary key.

Selanjutnya, tabel-tabel yang saling berhubungan satu sama lain akan membentuk sebuah skema.
Skema digunakan untuk memisahkan tabel-tabel yang ada di dalam sebuah basis data secara fungsional.
Sebagai contoh, tabel siswa, nilai, dan mata pelajaran dapat tergabung dalam sebuah skema basis data
pendidikan, sedangkan tabel barang, pelanggan, dan transaksi dapat tergabung dalam sebuah skema
basis data penjualan. Sebuah aplikasi yang menggunakan sebuah sistem manajemen basis data untuk
menyimpan datanya pada umumnya akan berinteraksi dengan sebuah skema saja. Dalam beberapa
sistem manajemen basis data, skema juga dikenal dengan istilah database.

5.3 RELASI ANTAR TABEL

Seperti yang sudah dijelaskan sebelumnya sistem manajemen basis data relasional adalah sebuah
sistem manajemen basis data yang menyimpan tabel-tabel yang saling berhubungan. Maksud dari
berhubungan disini adalah sebuah data yang tersimpan dalam sebuah tabel memiliki hubungan dengan
data lain yang tersimpan dalam tabel yang berlainan pula. Sebagai contoh, setiap data siswa yang
disimpan di dalam tabel siswa akan memiliki hubungan dengan data nilai yang tersimpan di dalam
tabel nilai.

Untuk dapat menghubungkan data dari sebuah tabel dengan data pada tabel lainnya, sistem
manajemen basis data menggunakan sebuah atribut tambahan yang dikenal dengan istilah foreign key.
Atribut foreign key pada sebuah data berisikan referensi terhadap sebuah nilai primary key dari data
yang berhubungan pada tabel lainnya. Perhatikanlah ilustrasi berikut ini :

Pegawai
Kode Nama Kepala
Kepala Bagian
P1 Zahriah KB1
Kode Nama
P2 Yayuk KB2
KB1 Andi
P3 Windi KB1
KB2 Budi
P4 Vina KB1
P5 Umang KB2

Pada ilustrasi di atas nilai primary key dari tabel kepala bagian (KB1 dan KB2) digunakan sebagai
referensi pada tabel pegawai. Nilai dari primary key yang dijadikan referensi seperti inilah yang dikenal
dengan istilah foreign key.

Ada tiga macam relasi atau hubungan yang dapat dimiliki oleh sebuah data dalam suatu tabel, yaitu
hubungan satu-satu (one-to-one relationship), hubungan satu dengan banyak (one-to-many relationship),
dan hubungan banyak dengan banyak (many-to-many relationship).

Diklat Web Programmer 64


CEP –CCIT FTUI
Web Programming

5.3.1 ONE-TO-ONE RELATIONSHIP

Sesuai dengan namanya, hubungan satu-satu, atau yang juga dikenal dengan istilah one-to-one
relationship, adalah hubungan dari sebuah data dalam sebuah tabel dengan tepat satu data lain yang
berada dalam tabel yang berbeda. Sebagai contoh, setiap departemen hanya dikepalai satu orang
menteri, dan satu orang menteri hanya dapat mengepalai satu buah departemen.

Agar dapat lebih memahami one-to-one relationship, perhatikanlah ilustrasi berikut ini :

Departemen Pejabat
Kode Nama Kepala Kode Nama
A Keuangan P2 P1 Andi
B Pertahanan P3 P2 Budi
C Agama P1 P3 Cecep

5.3.2 ONE-TO-MANY RELATIONSHIP

Dalam one-to-many relationship, sebuah data dapat berhubungan dengan satu atau lebih data
lainnya, namun tidak sebaliknya. Sebagai contoh, sebuah kepala bagian dapat memiliki beberapa orang
anak buah, namun seorang anak buah hanya dapat memiliki satu kepala bagian saja.

Pegawai
Kode Nama Kepala
Kepala Bagian
P1 Zahriah KB1
Kode Nama
P2 Yayuk KB2
KB1 Andi
P3 Windi KB1
KB2 Budi
P4 Vina KB1
P5 Umang KB2

5.3.3 MANY-TO-MANY RELATIONSHIP

Jika dalam one-to-many relationship hanya sebuah data saja yang dapat berhubungan dengan
beberapa data lainnya dan tidak sebaliknya, maka dalam many-to-many relationship berlaku
sebaliknya. Sebagai contoh, seorang pelanggan dapat membeli berbagai macam produk yang berbeda-
beda, dan sebuah produk yang sama dapat dibeli oleh beberapa orang pelanggan yang berbeda-beda
pula.

Agar dapat lebih memahami many-to-many relationship, perhatikanlah ilustrasi berikut ini :

Barang
Kode Nama Pembeli
Pembeli
BR1 Laptop A1
Kode Nama
BR2 HP A1
A1 Andi
BR1 Laptop A2
A2 Budi
BR3 TV A1
BR3 TV A2

Diklat Web Programmer 65


CEP –CCIT FTUI
Web Programming

Dalam many-to-many relationship, akan diperlukan sebuah tabel perantara yang berfungsi untuk
menyimpan atribut tambahan apabila diperlukan. Kembali ke contoh di atas, dapat dilihat bahwa ada
banyak data yang berulang yang terdapat pada kedua macam tabel. Data yang berulang-ulang seperti
ini tentunya dapat menyebabkan berbagai macam masalah yang tidak diinginkan. Untuk many-to-many
relationship seperti ini ada baiknya jika dibuat sebuah tabel sementara seperti pada ilustrasi berikut
ini :

Barang Transaksi Pembeli


Kode Nama Barang Pembeli Jumlah Kode Nama
BR1 Laptop BR1 A1 2 A1 Andi
BR2 HP BR2 A1 1 A2 Budi
BR3 TV BR1 A2 2
BR2 A2 1
BR3 A2 1

Diklat Web Programmer 66


CEP –CCIT FTUI
Web Programming

BAB 6 : MENGGUNAKAN SQL

Diklat Web Programmer 67


CEP –CCIT FTUI
Web Programming

6.1 PENGERTIAN SQL

SQL (Structured Query Language), adalah sebuah bahasa khusus yang dapat digunakan untuk
berkomunikasi dan berinteraksi dengan sebuah sistem manajemen basis data. Perlu diperhatikan
bahwa SQL bukanlah merupakan sebuah bahasa pemrograman, tetapi SQL hanyalah sebuah bahasa
perantara yang dapat digunakan untuk mengambil dan memanipulasi data yang tersimpan di dalam
sebuah basis data.

Bahasa SQL adalah sebuah bahasa yang bersifat standar, maksudnya adalah setiap aplikasi sistem
manajemen basis data dapat mengenali dan menjalankan perintah-perintah yang diberikan dalam
bahasa SQL. Walaupun begitu, pada umumnya setiap aplikasi sistem manajemen basis data memiliki
perintah-perintah tambahan yang hanya dimiliki oleh aplikasi itu saja. Sebagai contoh, aplikasi MS SQL
Server memiliki fitur SQL tambahan yang dinamakan Transact-SQL atau T-SQL. Perintah-perintah
tambahan tersebut hanya dapat dimengerti oleh aplikasi yang bersangkutan saja, perintah-perintah
tambahan tersebut tidak akan dapat dimengerti oleh aplikasi sistem manajemen basis data lainnya.

6.2 BEKERJA DENGAN SKEMA

Sebelum Anda dapat membuat tabel dan memasukkan data dengan menggunakan MySQL, Anda
perlu terlebih dahulu membuat skema untuk menyimpan tabel-tabel yang ingin Anda buat terlebih
dahulu. Hanya ada dua perintah yang umum digunakan dalam berkerja dengan skema, yaitu perintah
CREATE SCHEMA dan DROP SCHEMA.

Perintah CREATE SCHEMA berfungsi untuk membuat skema baru. Sedangkan perintah DROP
SCHEMA berfungsi untuk menghapus sebuah skema yang telah ada lengkap beserta tabel-tabel dan
seluruh data yang terdapat di dalamnya. Berhati-hatilah dalam menggunakan perintah DROP SCHEMA
karena apabila sebuah skema sudah di hapus, maka tidak akan dapat dikembalikan lagi seperti semula.

SINTAKS :
CREATE SCHEMA nama_skema

CONTOH :
CREATE SCHEMA data_toko

SINTAKS :
DROP SCHEMA nama_skema

CONTOH :
DROP SCHEMA data_toko

6.3 BEKERJA DENGAN TABEL

Dalam bekerja dengan tabel, ada tiga perintah penting yang perlu Anda ketahui, yaitu perintah
CREATE TABLE, ALTER TABLE, dan DROP TABLE.

Diklat Web Programmer 68


CEP –CCIT FTUI
Web Programming

6.3.1 MEMBUAT TABEL

Perintah CREATE TABLE berfungsi untuk membuat tabel di dalam sebuah skema. Perintah ini
diikuti dengan nama tabel yang ingin dibuat dan daftar kolom-kolom yang terdapat di dalamnya.

SINTAKS :

CREATE TABLEnama_tabel (
nama_kolom_1 tipe_data_kolom_1 keterangan_kolom_1,
nama_kolom_2 tipe_data_kolom_2 keterangan_kolom_2,
nama_kolom_3 tipe_data_kolom_3 keterangan_kolom_3,
...
)

CONTOH :

CREATE TABLE barang (


kode_barang INT AUTO_INCREMENT PRIMARY KEY,
kode_kategori_barang INT NOT NULL REFERENCES kategori(kode) ON UPDATE CASCADE ON
DELETE CASCADE,
nama_barang VARCHAR(100) NOT NULL,
harga_satuan DECIMAL(10,2) UNSIGNED NOT NULL,
keterangan TEXT
)

Contoh diatas akan membuat sebuah tabel yang bernama barang yang memiliki 4 buah kolom, yaitu
kolom kode_barang, nama_barang, harga_satuan, dan keterangan.

• Kolom kode barang memiliki tipe data INT (integer/bilangan bulat) dengan keterangan tambahan
AUTO_INCREMENT yang berfungsi untuk memasukkan nilai kedalam kolom tersebut secara
otomatis berurutan dan keterangan PRIMARY KEY yang berfungsi untuk menjadikan kolom
tersebut sebagai primary key.

• Kolom kategori barang memiliki tipe data INT. Keterangan NOT NULL berfungsi untuk menjadikan
kolom ini harus diisi dan tidak boleh dikosongkan. Keterangan REFERENCES berfungsi untuk
menjadikan kolom ini sebagai foreign key dengan referensi ke kolom primary key kode yang
terdapat pada tabel kategori. Keterangan ON UPDATE CASCADE berfungsi untuk merubah nilai
dari kolom ini secara otomatis apabila nilai dari kolom yang direferensikan pada tabel lain berubah.
Keterangan ON DELETE CASCADE berfungsi untuk menghapus secara otomatis data yang
berhubungan dengan data yang direferensikan apabila data yang direferensikan tersebut ikut
dihapus.

• Kolom nama barang memiliki tipe data VARCHAR (teks) dengan panjang maksimum 100
huruf/karakter. Kolom ini harus diisi dan tidak boleh dikosongkan.

• Kolom harga satuan memiliki tipe data DECIMAL (bilangan desimal) sepanjang 10 angka dengan 2
angka di belakag koma. Keterangan UNSIGNED berfungsi untuk menjadikan sebuah tipe data angka
hanya dapat menerima bilangan positif saja. Kolom ini juga harus diisi dan tidak boleh dikosongkan.

Diklat Web Programmer 69


CEP –CCIT FTUI
Web Programming

• Kolom keterangan memiliki tipe data TEXT (teks) dengan panjang tidak terbatas. Kolom ini boleh
tidak diisi.

Berikut adalah daftar tipe data yang dapat Anda gunakan dalam membuat tabel :

Nama Keterangan Rentang Nilai


-127 to 127
TINYINT
[0 to 255 UNSIGNED]
-32,768 to 32,767
SMALLINT
[0 to 65,535]
-8,388,608 to 8,388,607
MEDIUMINT Bilangan bulat
[0 to 16,777,215]
-/+2.147E+9
INT
[0 to 4.294E+9]
-/+9.223E+18
BIGINT
[0 to 18.45E+18]
Min=+/-1.175E-38
FLOAT
Bilangan real Max=+/-3.403E+38
DOUBLE Min=+/-2.225E-308
DECIMAL Bilangan desimal Max=+/-1.798E+308
CHAR Karakter dengan panjang tetap 0 – 255
Karakter dengan panjang
VARCHAR 0 – 255
berbeda
TEXT 0 – 65,535
MEDIUMTEXT Teks 0 – 16,777,215
LONGTEXT 0 – 4,294,967,295
DATE "1000-01-01" - "9999-12-31"
"1000-01-01 00:00:00" -
DATETIME
Waktu dan tanggal "9999-12-31 23:59:59"
TIME "-838:59:59" - "838:59:59"
YEAR 1900 - 2155
19700101000000 -
TIMESTAMP UNIX timestamp
2037+
BOOL Benar/salah 0-1

6.3.2 MENGUBAH TABEL

Perintah ALTER TABLE berfungsi untuk mengubah struktur dari suatu tabel. Ada tiga macam
perubahan yang dapat dilakukan, yaitu menambah kolom, mengubah kolom dan menghapus kolom.
Perlu diperhatikan bahwa menggunakan perintah ALTER TABLE terhadap sebuah tabel yang sudah
memiliki data dapat menyebabkan kerusakan dan/atau kehilangan data yang terdapat di dalamnya.
Oleh karena itu, pastikanlah struktur semua tabel Anda sudah benar sebelum mulai memasukkan data
ke dalamnya.

SINTAKS :
ALTER TABLEnama_tabelADDnama_kolom tipe_data_kolom keterangan_kolom

CONTOH :
ALTER TABLE barang ADD berat INT UNSIGNED NOT NULL
Perintah di atas berfungsi untuk menambahkan kolom berat dengan tipe data INT berjenis
UNSIGNED dan harus diisi.

Diklat Web Programmer 70


CEP –CCIT FTUI
Web Programming

SINTAKS :
ALTER TABLEnama_tabelCHANGEnama_kolom tipe_data_kolom keterangan_kolom

CONTOH :
ALTER TABLE barang CHANGE harga_satuan INT UNSIGNED NOT NULL
Perintah di atas berfungsi untuk mengubah tipe data kolom harga_satuan menjadi INT berjenis
UNSIGNED dan harus diisi.

SINTAKS :
ALTER TABLEnama_tabelDROPnama_kolom

CONTOH :
ALTER TABLE barang DROP keterangan
Perintah di atas berfungsi untuk menghapus kolom keterangan dari tabel barang.

6.3.3 MENGHAPUS TABEL

Perintah DROP TABLE berfungsi untuk menghapus semua tabel beserta data-data yang terdapat di
dalamnya.

SINTAKS :
DROP TABLE nama_tabel
CONTOH :
DROP TABLEproduk

Diklat Web Programmer 71


CEP –CCIT FTUI
Web Programming

6.4 BEKERJA DENGAN DATA

Ada empat macam operasi utama yang dapat dilakukan terhadap data yang tersimpan di dalam
sebuah tabel, yaitu create (memasukkan data), read (membaca data), update (mengubah data), dan
delete (menghapus data). Keempat operasi ini kerap disebut dengan istilah CRUD. Perintah-perintah
yang akan digunakan adalah perintah INSERTINTO, SELECT, UPDATE, dan DELETEFROM.

6.4.1 MEMASUKKAN DATA

Perintah INSERT INTO berfungsi untuk memasukkan data ke dalam tabel. Ada dua macam cara
penggunaan perintah ini, yaitu dengan memasukkan data ke semua kolom atau hanya memasukkan
data ke kolom-kolom tertentu saja.

SINTAKS :
INSERT INTOnama_tabelVALUES (nilai_kolom_1, nilai_kolom_2, nilai_kolom_3, ...)

CONTOH :
INSERT INTO siswa VALUES (NULL, 'Ann Example', 'Jakarta', '04/08/1983', 'P')

Perintah di atas berfungsi untuk memasukkan nilai ke dalam tabel siswa. Penggunaan NULL berarti
nilai di dalam kolom tersebut akan dikosongkan. Untuk kolom yang menggunakan keterangan
AUTO_INCREMENT, harus digunakan nilai NULL sehingga sistem basis data akan memberikan nilai ke
dalam kolom tersebut secara otomatis. Perlu diperhatikan bahwa untuk data dengan tipe teks seperti
CHAR, VARCHAR, DATE, dan TEXT, Anda perlu menggunakan sebuah tanda kutip ('). Tanda kutip ini
berfungsi untuk membedakan nilai teks dengan nilai angka.

SINTAKS :
INSERT INTOnama_tabelVALUES (nilai_kolom_1, nilai_kolom_2, nilai_kolom_3, ...)

CONTOH :
INSERT INTO siswa VALUES (NULL, 'Ann Example', 'Jakarta', '04/08/1983', 'P')

6.4.2 MENGAMBIL DATA

Perintah SELECT berfungsi untuk mengambil data dari sebuah tabel. Ada banyak cara penggunaan
perintah SELECT tergantung dari kriteria data yang ingin diambil.

SINTAKS :
SELECT * FROMnama_tabel

CONTOH :
SELECT * FROM barang

Penggunaan perintah SELECT dengan bentuk ini akan mengambil semua data dan kolom yang
terdapat di dalam sebuah tabel. Pada contoh di atas, akan ditampilkan semua data yang terdapat di
dalam tabel barang.

SINTAKS :
SELECTkolom_1, kolom_2, kolom_3, ...FROMnama_tabel

Diklat Web Programmer 72


CEP –CCIT FTUI
Web Programming

CONTOH :
SELECT kode_barang, nama_barang FROM barang

Perintah SELECT seperti ini berfungsi untuk mengambil data dari sebuah tabel, namun hanya dari
kolom-kolom tertentu saja. Pada contoh di atas, akan ditampilkan kolom kode_barang, dan
nama_barang dari semua data yang terdapay di dalam tabel barang.

SINTAKS :
SELECT *|kolomFROMnama_tabelWHEREkondisi

CONTOH :
SELECT * FROM barang WHERE kode_kategori_barang = 1
SELECT * FROM barang WHERE harga_satuan >= 500.000
SELECT kode_barang, nama_barang, harga_satuan FROM barang WHERE nama_barang = 'Intel
Core i7-2600K'

Perintah SELECT seperti ini berfungsi untuk mengambil data dari sebuah tabel yang memenuhi
sebuah kondisi tertentu.

SINTAKS :
SELECT*|kolomFROMnama_tabelWHEREnama_kolomLIKEnilai

CONTOH :
SELECT * FROM barang WHERE nama_barang LIKE 'A%'
SELECT * FROM barang WHERE nama_barang LIKE '??7?'

Perintah SELECT seperti ini berfungsi untuk mencari data berdasarkan suatu nilai. Pada contoh
pertama, akan dilakukan pencarian terhadap barang dengan nama barang yang berawal dengan huruf A.
Tanda % berfungsi sebagai pengganti (wildcard) untuk satu atau lebih karakter. Sedangkan pada
contoh kedua akan dilakukan pencarian terhadap barang dengan nama barang yang terdiri dari empat
karakter dan karakter ketiga dari nama barang tersebut adalah 7. Tanda ? Berfungsi sebagai pengganti
untuk satu karakter.

SINTAKS :
SELECT*|kolomFROMnama_tabelWHEREkondisi_1AND|ORkondisi_2

CONTOH :
SELECT * FROM barang WHERE harga_satuan >= 100000 AND harga_satuan < 500000
SELECT * FROM barang WHERE nama_barang LIKE '%Radeon%' OR kode_kategori_barang = 16
SELECT * FROM barang WGERE nama_barang LIKE '%Intel%' AND kode_kategori_barang = 3 AND
harga_satuan <= 1500000

Perintah SELECT seperti ini berfungsi untuk mengambil data berdasarkan beberapa kondisi. Jika
menggunakan AND maka kedua kondisi harus terpenuhi, sedangkan jika menggunakan OR maka cukup
satu kondisi saja yang terpebuhi.

SINTAKS :
SELECT*|kolomFROMnama_tabelWHEREnama_kolomBETWEENnilai_bawahANDnilai_atas

CONTOH :
SELECT * FROM barang WHERE harga_satuan BETWEEN 500000 AND 750000
SELECT * FROM barang WHERE nama_barang BETWEEN 'd' AND 'j'

Diklat Web Programmer 73


CEP –CCIT FTUI
Web Programming

Perintah SELECT seperti ini berfungsi untuk mengambil data berdasarkan rentang dari suatu nilai.

SINTAKS :
SELECT*|kolom FROMnama_tabelWHEREnama_kolomIN(nilai_1, nilai_2, nilai_3, ...)

CONTOH :
SELECT * FROM barang WHERE kode_kategory_barang IN (1, 2, 3)

Perintah SELECT seperti ini berfungsi untuk mengambil data yang memiliki suatu nilai tertentu.

SINTAKS :
SELECT*|kolom FROMnama_tabelWHEREnama_kolomNOTIN(nilai_1, nilai_2, nilai_3, ...)

CONTOH :
SELECT * FROM barang WHERE kode_kategory_barang NOT IN (1, 2, 3, 5, 7, 9)

Perintah SELECT seperti ini berfungsi untuk mengambil data yang tidak memiliki suatu nilai
tertentu. Perintah ini adalah kebalikan dari perintah SELECT yang menggunakan IN.

SINTAKS :
SELECT *|kolomFROMnama_tabelWHEREnama_kolom IS NULL

CONTOH :
SELECT * FROM barang WHERE keterangan IS NULL

Perintah SELECT seperti ini berfungsi untuk mengambil data yang memiliki nilai yang kosong pada
suatu kolom.

SINTAKS :
SELECT *|kolomFROMnama_tabelWHEREnama_kolom IS NOT NULL

CONTOH :
SELECT * FROM barang WHERE keterangan IS NOT NULL

Perintah SELECT seperti ini berfungsi untuk mengambil data yang memiliki nilai (tidak kosong)
pada suatu kolom.Perintah ini adalah kebalikan dari perintah SELECT yang menggunakan IS NULL.

SINTAKS :
SELECT*|kolomFROMnama_tabel kondisiORDER BYnama_kolom[DESC]

CONTOH :
SELECT * FROM barang ORDER BY harga_satuan
SELECT kode_barang, nama_barang, harga_satuan WHERE kode_kategori_barang = 13 ORDER BY
harga_satuan DESC

Perintah SELECT seperti ini berfungsi untuk mengambil data dan menurutkannya berdasarkan
suatu kolom secara menaik (A sampai Z). Jika keterangan tambahan DESC digunakan, maka pengurutan
akan berjalan secara menurun (A sampai Z).

SINTAKS :
SELECTAVG|SUM|MAX|MIN|COUNT(kolom) FROMnama_tabel kondisi

Diklat Web Programmer 74


CEP –CCIT FTUI
Web Programming

CONTOH :
SELECT AVG(harga_satuan) FROM barang
SELECT MAX(harga_satuan) FROM barang WHERE kode_kategori_barang = 4
SELECT COUNT(kode_barang) FROM barang WHERE harga_satuan <= 250000

Perintah SELECT seperti ini berfungsi untuk menghitung rata-rata (AVG), jumlah (SUM), nilai
tertinggi (MAX), nilai terendah (MIN), dan jumlah data (COUNT) pada suatu kolom.

SINTAKS :
SELECTy.nama_kolom_1, y.nama_kolom_2, ..., x.nama_kolom_1, x.nama_kolom_2
FROMnama_tabel_1 x
JOINnama_tabel_2 y ON x.foreign_key = y.primary_key

CONTOH :
SELECT k.kode_kategori, k.nama_kategori, b.kode_barang, b.nama_barang, b.harga_satuan
FROM barang b
JOIN kategori k ON b.kode_kategori_barang = k.kode_kategori

Perintah SELECT seperti ini berfungsi untuk mengambil dari dari beberapa tabel yang memiliki
hubungan secara sekaligus.

6.4.3 MENGUBAH DATA

Perintah UPDATE berfungsi untuk mengubah data yang terdapat di dalam sebuah tabel. Perlu
diperhatikan bahwa apabila tidak menggunakan kondisi dalam perintah ini, maka semua data yang
terdapat di dalam tabel tersebut akan terubah.

SINTAKS :
UPDATEnama_tabel
SETnama_kolom_1 = nilai_kolom_1, nama_kolom_2 = nilai_kolom_2, ...
WHERE kondisi

CONTOH :
UPDATE barang
SET nama_barang = 'nVidia GeForce GTX460 1GB'
WHERE kode_barang = 431

UPDATE barang
SET harga_satuan = 1500000, berat = 10
WHERE nama_barang LIKE 'Lian-Li%'

6.4.4 MENGHAPUS DATA

Perintah DELETE FROM berfungsi untuk menghapus data yang terdapat di dalam sebuah tabel.
Sama halnya dengan perintah UPDATE, apabila tidak menggunakan kondisi dalam perintah ini, maka
semua data yang terdapat di dalam tabel tersebut akan terhapus.

SINTAKS :
DELETE FROMnama_tabel
WHEREkondisi

CONTOH :
DELETE FROM barang

Diklat Web Programmer 75


CEP –CCIT FTUI
Web Programming

WHERE kode_kategori_barang = 5

DELETE FROM barang


WHERE kode_barang IN (1, 56, 75, 32)

6.5 MENGGUNAKAN PHPMYADMIN

Melakukan manajemen data yang terdapat di dalam sebuah basis data secara manual dengan
menggunakan perintah SQL sebenarnya bukanlah metode yang paling efisien. Perintah SQL sebaiknya
hanya digunakan oleh program aplikasi untuk mengakses data, bukan untuk melakukan manajemen
terhadap data.

Untuk melakukan manajemen terhadap data yang disimpan dengan menggunakan sistem
manajemen basis data MySQL, Anda dapat menggunakan phpMyAdmin. PhpMyAdmin adalah sebuah
aplikasi berbasis web yang dapat mempermudah proses manajemen data di dalam sebuah basis data
MySQL. Anda cukup melakukan klik melalui tampilannya tanpa perlu menggunakan perintah SQL.
PhpMyAdmin pada umumnya juga sudah diukung oleh banyak penyedia layanan hosting.

6.5.1 BEKERJA DENGAN PENGGUNA

Agar data yang terdapat di dalam basis data Anda dapat digunakan oleh sebuah program aplikasi,
Anda harus terlebih dahulu membuat sebuah akun pengguna untuk aplikasi tersebut. Berikut adalah
langkah-langkah untuk membuat pengguna dengan menggunakan phpMyAdmin :

1. Dari jendela awal phpMyAdmin, pilih


tab Privileges.

Diklat Web Programmer 76


Web Programming

2. Klik tautan Add a New User.

3. Masukkan username pengguna.


4. Pilih Localhost.
5. Masukkan kata sandi pengguna.

6. Tekan tombol Go pada bagian kanan


bawah untuk melanjutkan.

Diklat Web Programmer 77


Web Programming

7. Pilih nama skema yang akan


digunakan.

8. Ceklis kolom SELECT, INSERT,


UPDATE, dan DELETE.
9. Tekan Go untuk menyelesaikan
proses pembuatan pengguna baru.

Berikut adalah langkah-langkah untuk menghapus pengguna dengan menggunakan phpMyAdmin :

Diklat Web Programmer 78


Web Programming

10. Dari jendela awal phpMyAdmin, pilih


tab Privileges.
11. Ceklis user yang ingin dihapus.
12. Tekan tombol Go yang berada di
kanan bawah.

Diklat Web Programmer 79


Web Programming

BAB 7 : MENGGUNAKAN PHP

Diklat Web Programmer 80


CEP –CCIT FTUI
Web Programming

7.1 PENGERTIAN PHP

PHP, singkatan berulang dari PHP: Hypertext Preprocessor, adalah sebuah bahasa pemrograman
yang didesain secara spesifik untuk membuat sebuah situs web yang bersifat dinamis dan interaktif.
PHP adalah bahasa pemrograman web yang sangat populer, bahkan dapat dikatakan sebagai bahasa
pemrograman web yang paling banyak digunakan. Menurut survei dari Netcraft, ada lebih dari 20 juta
situs web yang dibuat dengan menggunakan PHP pada tahun 2007.

PHP pertama kali dikembangkan oleh Rasmus Lerdorf pada tahun 1995, dimana pada saat itu
kepanjangan dari PHP masih berupa Personal Home Page. PHP pada awalnya hanyalah ditujukan untuk
membuat sebuah situs web pribadi yang sederhana, namun PHP ternyata menjadi sangat populer dan
kemudian berkembang menjadi sebuah bahasa pemrograman web yang lengkap seperti sekarang ini.

Salah satu faktor utama yang berada di belakang kesuksesan ini adalah PHP merupakan sebuah
perangkat lunak free and open source. Semua orang dapat mendapatkan dan menggunakan PHP dengan
gratis dan bebas. PHP sendiri saat ini masih terus dikembangkan dengan dukungan dari sebuah
perusahaan yang bernama Zend Technologies.

Dalam penggunaannya, PHP akan menyisipkan perintah-perintah khusus di dalam sebuah dokumen
HTML. Perintah-perintah PHP pada umumnya dikenal dengan istilah PHP statement (pernyataan PHP).
Sebuah dokumen HTML yang telah disisipkan pernyataan-pernyataan PHP akan menjadi sebuah
dokumen PHP atau yang juga dikenal dengan istilah PHP script.

7.2 HALO, DUNIA!

Seperti halnya ketika Anda mempelajari bahasa HTML, marilah terlebih dahulu membuat sebuah
program “Halo, Dunia!” dengan menggunakan bahasa PHP. Untuk membuat sebuah dokumen PHP,
caranya tidak jauh berbeda dengan membuat sebuah dokumen HTML. Anda cukup membuka aplikasi
penyunting berkas Anda dan mengetikkan skrip PHP dan HTML di dalamnya. Cobalah membuat sebuah
dokumen baru sebagai berikut ini :

<!doctype html>
<html>
<head>
<title>Halo, Dunia!</title>
</head>
<body>
<?php echo 'Halo, Dunia!'; ?>
</body>
</html>

Jika Anda menyimpan sebuah dokumen HTML dengan ekstensi berkas .html, maka untuk sebuah
dokumen PHP Anda perlu menggunakan ekstensi berkas .php. Oleh karena itu, simpanlah dokumen
tersebut dengan nama halo.php.

Sebuah halaman web yang menggunakan PHP tidak dapat langsung dibuka dengan menggunakan
peramban web. Hal ini disebabkan karena pernyataan-pernyataan PHP yang terdapat di dalamnya tidak

Diklat Web Programmer 81


CEP –CCIT FTUI
Web Programming

dapat dimengerti oleh sebuah peramban web. Melainkan, pernyataan-pernyataan tersebut harus
terlebih dahulu diproses oleh sebuah server web. Setelah proses selesai, barulah hasilnya dikirmkan ke
peramban web dalam bentuk dokumen HTML biasa.

Pada aplikasi server web Apache, semua dokumen PHP yang akan diproses cukup diletakkan di
dalam folder htdocs. Oleh karena itu, simpanlah dokumen PHP Anda pada folder ini. Jika Anda
melakukan instalasi Apache dengan menggunakan XAMPP pada sistem operasi Windows, folder ini
akan terletak di dalam C:\xampp.

Selain menyimpan dokumen PHP pada lokasi yang benar, Anda juga perlu menjalankan Apache
terlebih dahulu. Untuk melakukan ini, Anda dapat membuka aplikasi XAMPP Control Panel dari Start
Menu Anda. Pada jendela XAMPP Control Panel, nyalakanah server web Apache (dan MySQL, jika Anda
memerlukana) dengan menekan tombol Start yang ada pada masing-masing komponen.

Jika dokumen PHP sudah disimpan pada lokasi dan benar dan Apache sudah berjalan, bukalah
peramban web Anda lalu arahkan ke alamat http://localhost/halo.php untuk meminta Apache
memproses dokumen tersebut dan mengirimkan hasilnya ke peramban web Anda. Perlu diketahui
bahwa alamat localhost disini berarti server web tersebut berada pada komputer yang sama dengan
peramban web yang digunakan. Jika semua berjalan dengan lancar dan Anda dapat melihat teks “Halo,
Dunia!” pada peramban web Anda, maka Anda telah berhasil membuat halaman web dinamis pertama
Anda dengan menggunakan PHP. Selamat!

<?php ... ?>

Tag ini adalah tag khusus yang digunakan untuk menyisipkan pernyataan-pernyataan PHP di antara
kode-kode HTML. Anda dapat menyisipkan sebanyak apapun pernyataan-pernyataan PHP yang Anda
inginkan di dalam tag ini. Anda juga diperbolehkan untuk menggunakan tag ini sebanyak yang Anda
inginkan di dalam sebuah dokumen PHP.

Perlu diperhatikan bahwa semua yang berada di dalam tag ini tidak akan dimunculkan pada
peramban web Anda. Jika Anda penasaran, cobalah melihat kode sumber dari halaman tersebut pada
peramban web Anda dengan melakukan klik kanan dan memilih lihat kode sumber halaman atau
view page source. Penyembunyian pernyataan-pernyataan PHP seperti ini akan menjadikan halaman
web dinamis Anda aman karena pengguna tidak akan dapat mengetahui proses yang dilakukan pada
server web.

Selain itu, perlu diketahui bahwa tag ini dapat diletakkan di mana saja, baik itu diluar elemen HTML,
di dalam sebuah tag, atau bahkan di dalam sebuah atribut. Sebagai contoh :

<a href="<?php echo 'http://www.php.net'; ?>">Situs web resmi PHP</a>

echo ...
Pernyataan echo berfungsi untuk menampilkan sesuatu di dalam peramban web. Perintah ini dapat
digunakan untuk menampilkan hasil dari proses yang telah dilakukan pada sebuah halaman web
dinamis.

Diklat Web Programmer 82


CEP –CCIT FTUI
Web Programming

Anda dapat menampilkan apa saja dengan menggunakan perintah echo, baik itu angka, teks, atau
bahkan tag dan elemen HTML. Hanya saja, untuk menampilkan data berupa teks (termasuk di
dalamnya tag dan elemen HTML), Anda perlu meletakkannya di dalam sepasang tanda kutip satu (‘).

Perlu diperhatikan bahwa setiap pernyataan PHP harus diakhiri dengan tanda titik dua seperti
halnya sebuah properti pada CSS. Tanda titik dua yang terlupakan adalah kesalahan kecil namun
fatal yang sering terjadi, terutama apabila Anda baru mempelajari PHP. Perhatikanlah setiap
pernyataan PHP yang Anda buat dengan teliti dan pastikan Anda sudah mengakhirinya dengan
tanda titik dua.

7.3 MENDOKUMENTASIKAN DOKUMEN PHP

Di dalam sebuah bahasa pemrograman (termasuk PHP), dokumentasi digunakan untuk


memperjelas tujuan dan cara kerja dari sebuah program (halaman web dinamis termasuk ke dalam
sebuah program). Pada sebuah program yang rumit, proses pendokumentasian memegang peranan
yang sangat penting. Dokumentasi dari sebuah program dapat digunakan sebagai referensi oleh
programmer lain untuk memahamami program tersebut. Selain itu, dokumentasi juga dapat digunakan
oleh sang programmer asli untuk memahami kembali program tersebut apabila ia sudah lama (dan
lupa) tidak melihat program tersebut.

Proses pendokumentasian dilakukan dengan menambahkan komentar-komentar pada bagian-


bagian dari program yang dirasa perlu untuk diberikan penjelasan tambahan. Di dalam bahasa PHP, ada
dua cara yang dapat digunakan untuk memberikan komentar, yaitu pemberian komentar perbaris dan
pemberian komentar blok.

Untuk memberikan sebaris komentar pada sebuah bagian dari dokumen PHP, Anda cukup
mengawali baris tersebut dengan dua buah garis miring (//) atau sebuah tanda pagar (#).
Perhatikanlah contoh berikut :

<?php
// Tampilkan teks "Halo, Dunia!"
echo 'Halo, Dunia!'; # Komentar juga dapat setelah sebuah pernyataan
?>

Baris ke-2 pada contoh diatas adalah sebuah baris komentar, sedangkan baris ke-3 adalah sebuah
pernyataan PHP dengan sebuah komentar yang diletakkan di akhirnya. Perlu diperhatikan bahwa Anda
tidak perlu mengakhiri sebuah komentar dengan tanda titik koma.

Kadangkala, Anda mungkin ingin memberikan sebuah komentar yang cukup panjang, mungkin
terdiri dari beberapa baris dan paragraf. Untuk komentar seperti ini, Anda dapat membuat sebuah blok
komentar. Anda dapat membuat blok komentar dengan menuliskan komentar-komentar Anda diantara
simbol /* dan */. Perhatikanlah contoh berikut :

<?php
/*
Halaman web "Halo, Dunia!"
Versi 1.0

Diklat Web Programmer 83


CEP –CCIT FTUI
Web Programming

Dibuat oleh : Agus P. Purnomo


Tanggal : 1 Januari 2010
*/
?>

Pada contoh di atas, semua yang berada di dalam tanda /* dan */ adalah sebuah komentar. Seperti
halnya dengan komentar baris, Anda juga tidak perlu memberikan tanda titik koma pada komentar blok.

7.4 MENGGUNAKAN VARIABEL

Variabel adalah sebuah tempat yang dapat digunakan untuk menyimpan suatu data atau informasi.
Variabel dapat dikatakan sebagai fondasi utama dari sebuah halaman web dinamis. Dengan
menggunakan variabel, Anda dapat membuat halaman web Anda menampilkan konten yang berbeda
tergantung dari berbagai macam situasi.

Anggaplah Anda membuat sebuah formulir yang meminta nama dari pengguna dengan
menggunakan sebuah HTML, kemudian Anda menyimpan nama tersebut di dalam variabel agar dapat
digunakan untuk keperluan lain. Kemudian, halaman web Anda akan mengingat pengguna-pengguna
yang sudah pernah berkunjung dan menampilkan pesan “Selamat Datang Kembali!” kepada pengguna-
pengguna tersebut, sedangkan apabila pengguna tersebut baru pertama kali berkunjung maka halaman
web akan menampilkan pesan “Selamat Datang!” saja.

Menggunakan variabel dalam PHP sangatlah mudah, Anda cukup memberikan nama dan nilai atau
data yang ingin disimpan saja. Sebagai contoh, jika Anda ingin membuat sebuah variabel bernama
$harga dan menyimpan nilai 5000 di dalamnya, maka Anda cukup menuliskan sebuah pernyataan
sederhana sebagai berikut :

$harga = 5000;

Seperti halnya dengan penggunaan pernyataan echo, apabila Anda ingin menyimpan data berupa
teks Anda perlu menggunakan tanda kutip satu seperti contoh berikut ini :

$nama = 'Andi Pratama';

Perlu diperhatikan bahwa ada beberapa aturan-aturan yang perlu ditaati dalam pemberian nama
kepada sebuah variabel di dalam PHP, yaitu :

• Nama variabel harus diawali dengan tanda dolar ($). Hal ini dimaksudkan untuk membedakan
nama variabel dengan penyataan-pernyataan PHP.

• Nama variabel harus mencerminkan makna dari nilai yang akan disimpan di dalamnya. Sebagai
contoh, jika Anda ingin menyimpan tanggal lahir seseorang, maka gunakanlah nama variabel
$tanggal_lahir, jangan gunakan nama yang tidak relevan seperti $ayam_goreng atau nama yang
sulit dipahami seperti $x.

• Nama variabel hanya dapat berisikan huruf (A-Z), angka (0-9) dan garis bawah (_) saja. Sebagai
contoh, nama variabel $diskon50% bukanlah nama variabel yang benar.

Diklat Web Programmer 84


CEP –CCIT FTUI
Web Programming

• Huruf besar dan huruf kecil di dalam bahasa PHP memiliki makna yang berbeda. Variabel
$nama dan $Nama adalah dua buah variabel yang berbeda. Oleh karena itu, sangat disarankan
agar Anda selalu menggunakan huruf kecil dalam memberikan nama untuk sebuah variabel.

• Walaupun nama variabel dapat menggunakan angka, karakter pertama dari nama variabel
harus berupa huruf atau garis bawah saja. Sebagai contoh, $jumlah_orang dan $_harga adalah
nama variabel yang benar, sedangkan $1bulan adalah nama variabel yang salah.

• Jika nama variabel terdiri dari dua buah kata atau lebih, maka pisahkanlah antara satu kata
dengan kata lainnya dengan menggunakan garis bawah. Sebagai contoh,
$alamat_rumah_pertama tentu lebih mudah dibaca daripada $alamatrumahpertama.

Sesuai dengan namanya, variabel dapat memiliki nilai yang berubah-ubah. Misalkan Anda ingin
membuat sebuah variabel bernama $x dengan nilai awal 7, namun, entah kenapa Anda ingin merubah
nilainya menjadi 700, maka Anda cukup melakukan hal berikut ini :

$x = 7 // Nilai variabel $x saat ini adalah 7


$x = 700 // Sekarang variabel $x memiliki nilai 700

Selain itu, untuk menampilkan nilai dari suatu variabel, Anda cukup menggunakan penyataan echo
sebagai berikut :

echo $harga;

Agar dapat lebih memahami penggunaan variabel dalam PHP, buatlah sebuah dokumen PHP baru
sebagai berikut :

<?php
$x = 1;
$y = 'Halo, Dunia!';
?>

<!doctype html>

<html>

<head>
<title>Pemberian Nilai</title>
</head>

<body>

<p>Pada awalnya variabel $x memiliki nilai <?php echo $x; ?>

<?php $x = 'PHP itu gampang gampang susah'; ?>


<p>Sekarang variabel $x memiliki nilai <?php echo $x; ?>

<?php $x = '<a href="http://www.google.com">Google</a>'; ?>


<p>Sekarang variabel $x memiliki nilai <?php echo $x; ?>

<?php
$x = 123;
$x = 456;

Diklat Web Programmer 85


CEP –CCIT FTUI
Web Programming

?>
<p>Sekarang variabel $x memiliki nilai <?php echo $x; ?>

<?php $x = $y; ?>


<p>Sekarang variabel $x memiliki nilai <?php echo $x; ?>

<p>Dan variabel $y memiliki nilai <?php echo $y; ?>

</body>

</html>

Simpanlah dengan nama variabel.php. Lalu bukalah dengan peramban web Anda.

7.4.1 TIPE DATA DALAM VARIABEL

Data yang disimpan di dalam suatu variabel dapat diklasifikasikan ke dalam beberapa macam tipe.
Perbedaan tipe data ini digunakan untuk membedakan operasi-operasi yang dapat dilakukan terhadap
data-data tersebut.

Sebagai contoh, data dengan tipe angka dapat dikalikan dan memberikan hasil yang berarti misal, 5
x 3 = 15. Namun, bagaimana jika data tersebut adalah teks? Dapatkah sebuah teks dikalikan? Apakah
hasil dari ‘a’ x ‘buku’? Jika hal ini dilakukan, maka PHP akan memberikan pesan kesalahan yang
memberitahu bahwa operasi perkalian tidak dapat dilakukan untuk data dengan tipe teks.

Berikut adalah tipe-tipe data yang dapat dikenali oleh PHP :

• Integer atau bilangan bulat, yaitu bilangan yang tidak memiliki nilai desimal. Contoh : -457, 0, 7,
dan sebagainya.

• Float atau bilangan real, yaitu bilangan yang memiliki nilai desimal. Contoh : -1.79, 457.1, 3.14,
dan sebagainya.

• String atau teks, yaitu suatu rangkaian dari satu karakter/huruf atau lebih. Dalam penulisannya,
string harus diletakkan di antara sepasang tanda kutip satu (‘). Perlu diketahui bahwa angka
yang diletakkan di dalam tanda kutip satu akan menjadi string. Sebagain contoh, 127 adalah
sebuah integer sedangkan ‘127’ adalah sebuah string.

• Boolean, yaitu nilai benar (TRUE) dan salah (FALSE).

Pada bahasa pemrograman lain, seperti C++ dan Java misalnya, Anda perlu menuliskan tipe data
dari suatu variabel secara eksplisit. Dengan PHP, Anda tidak perlu melakukan ini. PHP dapat mengenali
tipe data dari suatu variabel secara otomatis. Bahkan, PHP dapat beradaptasi terhadap perubahan tipe
data dari suatu variabel secara otomatis. Sebagai contoh :

$x = 10;
$y = 15;
$z = $x - $y; // Nilai $z sekarang adalah -5
$x = 'Halo!'
$z = $x - $y; // Terjadi kesalahan

Diklat Web Programmer 86


CEP –CCIT FTUI
Web Programming

7.5 BERKERJA DENGAN ANGKA

Yang dimaksud dengan angka disini adalah data bertipe integer dan float. Anda dapat melakukan
berbagai macam operasi matematika pada tipe data tersebut dengan menggunakan PHP. Operasi yang
dapat dilakukan antara lain adalah penjumlahan (+), pengurangan (-), perkalian (*), pembagian (/), dan
menghitung sisa pembagian (%).

Penggunaan berbagai operasi matematika tersebut sangatlah sederhana. Perhatikanlah beberapa


contoh berikut ini :

$hasil = 10 + 7; // Variabel $hasil akan memiliki nilai 17


$x = 7;
$hasil = $hasil * $x; // Variabel $hasil akan memiliki nilai 119
echo 14 % 3; // Akan ditampilkan sisa pembagian 14 dengan 3;

PHP juga memiliki aturan prioritas operator yang sama dengan aturan prioritas operator yang ada
di dalam matematika. Sebagai contoh, 5 + 3 * 2 akan menghasilkan nilai 11, bukan 16. Hal ini
dikarenakan operator perkalian (*) memiliki tingkat prioritas yang lebih tinggi apabila dibandingkan
dengan operator penjumlahan (+). Untuk menghindari kebingungan dalam hal ini, Anda dapat
menggunakan tanda kurung sebagai alat bantu :

$hasil = (5 + 3) * 2;

Selain operator-operator yang tentunya sudah Anda ketahui seperti di atas, ada pula beberapa
operator unik yang terdapat di dalam PHP, yaitu :

• Operator pintasan (+= dan -=). Sesuai dengan namanya, operator pintasan (shorthand operator)
dapat digunakan untuk menyingkat operasi tertentu. Operator += berfungsi untuk
menambahkan suatu nilai ke dalam suatu variabel sedangkan operator -= berfungsi untuk
mengurangi suatu nilai dari suatu variabel. Perhatikanlah contoh berikut ini :

$x = 7;
$x = $x + 4; // Nilai $x saat ini adalah 11
$x += 4; // Sama dengan $x = $x + 4, nilai $x saat ini adalah 15

$y = 5
$y = $y - $x; // Nilai $y saat ini adalah -10
$y -= $x // Sama dengan $y = $y - $x, nilai $y saat ini adalah -25

• Operator peningkatan dan penurunan (++ dan --). Sesuai dengan namanya, operator-operator
tersebut berfungsi untuk meningkatkan atau menurunkan nilai dari suatu variabel sebanyak 1.
Perhatikanlah contoh berikut ini :

$x = 12;
$x += 1; // Nilai $x saat ini adalah 13
$x++; // Sama dengan $x += 1, nilai $x saat ini adalah 14
$x--; // Sama dengan $x -= 1, nilai $x saat ini adalah 13

Anda juga dapat melakukan berbagai macam operasi matematika tingkat tinggi dengan
menggunakan fungsi-fungsi matematis yang sudah disediakan oleh PHP. Beberapa fungsi tersebut

Diklat Web Programmer 87


CEP –CCIT FTUI
Web Programming

antara lain adalah fungsi trigonometri (sin, cos, tan, asin, acos, atan, sinh, cosh, dan tanh), fungsi
logaritma (log), dan fungsi untuk mencari akar kuadrat (sqrt). Penggunaan dari fungsi-fungsi tersebut
sangatlah sederhana, seperti pada contoh-contoh berikut ini :

$x = sin(90);
$y = sqrt(128) + (7 * 2) - 250;
$z = sin(log(70));

7.6 BEKERJA DENGAN STRING

Seperti yang sudah dijelaskan sebelumnya, string adalah rangkaian dari satu atau lebih
huruf/karakter. Berbeda dengan data dengan tipe angka, operasi aritmatika tidak dapat digunakan
untuk data dengan tipe string. Namun, ada sebuah operasi khusus yang dapat dilakukan oleh string,
yaitu operasi penggabungan dengan menggunakan operator tanda titik (.).

Berikut adalah contoh dari penggunaan operator penggabungan tersebut :

$nama_depan = 'Joni';
$nama_belakang = 'Subejo';
$nama_lengkap = $nama_depan . $nama_belakang;

Nilai dari variabel $nama_lengkap pada contoh di atas adalah ‘JoniSubejo’. Hal ini dikarenakan
operasi penggabungan string tidak akan menambahkan spasi atau karakter apapun kepada hasil
penggabungan. Oleh karena itu, Anda perlu menyisipkan spasi secara manual di antara kedua string
tersebut seperti pada contoh berikut ini :

$nama_lengkap = $nama_depan . ' ' . $nama_belakang;

Anda juga dapat menggunakan operator pintasan penggabungan (.=) untuk menggabungkan string :

$teks = 'Halo, ';


$teks .= 'Dunia!'; // Nilai $teks sekarang adalah 'Halo, Dunia!'

Sejalan dengan fungsi-fungsi matematis yang dapat digunakan untuk mengolah angka, ada pula
fungsi-fungsi string yang dapat digunakan untuk mengolah teks. Diantaranya adalah :

• strlen(), fungsi ini dapat digunakan untuk mengetahui panjang dari suatu string termasuk spasi.
Contoh :

$teks = 'Lorem Ipsum';


$panjang_teks = strlen($teks); // Cara 1, menggunakan variabel
$panjang_teks = strlen('Lorem Ipsum') // Cara 2, langsung memasukkan string

• str_word_count(), berfungsi untuk menghitung jumlah kata yang terdapat dari suatu string.
Sama dengan fungsi strlen(), Anda dapat menghitung string yang disimpan dalam sebuah
variabel atau langsung memasukkan string ke dalam fungsi. Contoh :

$teks = 'Lorem Ipsum';


$jumlah_kata = str_word_count($teks); // Jumlah kata adalah 2

Diklat Web Programmer 88


CEP –CCIT FTUI
Web Programming

• strpos(), berfungsi untuk mencari posisi dari sebuah karakter. Berbeda dengan fungsi-fungsi
yang telah Anda pelajari sebelumnya, fungsi ini memerlukan dua buah masukan, yaitu masukan
teks asal dan karakter yang ingin dicari Perlu diperhatikan bahwa karakter pertama dari sebuah
string menduduki posisi 0, bukan 1. Perhatikanlah contoh berikut ini :

$teks = 'Lorem Ipsum';


$posisi = strpos($teks, 'r'); // Posisi dari r adalah 2

/* Apabila ada dua karakter yang sama, maka yang berlaku adalah karakter yang pertama
kali ditemukan */
$posisi = strpos($teks, 'm'); // Posisi dari m adalah 4

/* Apabila karakter tidak ditemukan, maka strpos() akan menghasilkan nilai boolean FALSE
*/
$posisi = strpos($teks, '7'); // Posisi dari 7 adalah FALSE

• substr(), berfungsi untuk mengambil sebagian teks dari suatu string. Fungsi ini memerlukan
tiga buah masukan, yaitu teks asal, posisi memulai pengambilan, dan jumlah huruf yang akan
diambil termasuk spasi. Contoh :

$teks = 'Lorem Ipsum';


$sebagian = substr($teks, 2, 3); // Hasilnya adalah 'rem'
$sebagian = substr($teks, 0, 7); // Hasilnya adalah 'Lorem i'

/* fungsi substr juga dapat mengambil sebagian teks mulai dari kanan apabila digunakan
seperti ini */
$sebagian = substr($teks, -5); // Hasilnya adalah 'Ipsum'

• strreplace(), berfungsi untuk mengganti sebagian teks dengan teks lainnya. Masukan-masukan
yang diperlukan oleh fungsi ini adalah teks yang akan diganti, teks pengganti, dan teks asal.
Contoh :

$teks = 'Lorem Ipsum';


$baru = strreplace('m', 'n', $teks); // Hasilnya adalah 'Loren Ipsun'
$baru = strreplace('ore', 'ustu', $teks); // Hasilnya adalah 'Lustum Ipsum'

• strtolower() dan strtoupper(), adalah fungsi yang dapat digunakan untuk merubah jenis huruf
dari suatu teks. strtolower berfungsi untuk mengubah jenis huruf dari suatu teks menjadi huruf
kecil semua dan strtoupper berfungsi untuk mengubah menjadi huruf besar semua. Contoh :

$teks = 'Lorem Ipsum';


$besar = strtoupper($teks); // Hasilnya adalah 'LOREM IPSUM'
$kecil = strtolower('Lorem Ipsum'); // Hasilnya adalah 'lorem ipsum'

• strrev(), berfungsi untuk membalikkan suatu string. Contoh :

$teks = 'Lorem Ipsum';


$sket = strrev($teks); //Hasilnya adalah 'muspI meroL'

• empty(), berfungsi untuk mengetahui apakah sebuah string kosong atau tidak. Fungsi ini akan
menghasilkan nilai dengan tipe data boolean (TRUE/FALSE). Contoh :

$teks = 'Lorem Ipsum';


$kosong = '';
$cek = empty($teks) // FALSE

Diklat Web Programmer 89


CEP –CCIT FTUI
Web Programming

$cek = empty($kosong) // TRUE


$cek = empty($x) // TRUE karena variabel $x tidak pernah ada

7.7 BEKERJA DENGAN TANGGAL DAN WAKTU

Data dan informasi dalam bentuk tanggal dan waktu mungkin dapat menjadi salah satu komponen
yang penting di dalam sebuah situs web. Hanya saja, pada umumnya sebuah server web dan sistem
manajemen basis data akan menyimpan data tanggal dan waktu dalam bentuk timestamp yang tidak
mudah dibaca oleh manusia.

Timestamp, atau yang juga dikenal dengan istilah UNIX timestamp, adalah sebuah cara untuk
menyimpan tanggal pada sebuah sistem komputer dengan menghitung jumlah detik yang telah berlalu
dari tanggal 1 Januari 1970 jam 00:00 GMT. Dengan cara seperti ini, proses perhitungan tanggal yang
akan menjadi lebih mudah dikerjakan oleh sebuah sistem komputer, namun penulisan tanggal seperti
ini cukup sulit untuk dipahami oleh manusia.

Untungnya, PHP memiliki fungsi-fungsi tanggal dan waktu yang dapat mempermudah Anda untuk
menkonversi tanggal dan waktu dalam bentuk timestamp ke dalam bentuk yang dapat dimengerti oleh
manusia dan sebaliknya. Berikut adalah beberapa dari fungsi-fungsi tersebut :

• date(), berfungsi untuk mengubah data tanggal dan waktu dalam bentuk timestamp (integer)
menjadi bentuk yang dapat dimengerti oleh manusia (string). Fungsi ini memerlukan dua buah
masukan, yaitu format dan nilai dari tanggal dan waktu yang akan ditampilkan. Namun,
masukan kedua (nilai dari tanggal/waktu) tidak harus digunakan. Apabila masukan kedua ini
tidak digunakan, maka fungsi date() akan menggunakan tanggal dan waktu sekarang. Contoh :

echo date('m/d/Y'); // Menampilkan teks '01/01/2010'


$waktu = date('H:i:s'); // Nilai dari variabel $waktu adalah '08:00:00'
echo date('m/d:s:H-Y'); // Menampilkan teks '01/01/00:08-2010'

Seperti yang diperagakan pada contoh ketiga di atas, Anda dapat dengan bebas menentukan
format dari tanggal dan waktu yang akan ditampilkan. Berikut adalah simbol-simbol yang
digunakan untuk mewakilkan masing-masing satuan waktu :

Simbol Satuan Waktu Contoh


M Nama bulan disingkat Jan
F Nama bulan penuh January
M Bulan dengan nol di depan 02 atau 12
N Bulan tanpa nol di depan 2 atau 11
d Tanggal dengan nol di depan 07 atau 26
j Tanggal tanpa nol di depan 16 atau 31
l Nama hari penuh Saturday
D Nama hari disingkat Sat
w Hari dalam minggu (0 = Minggu sampai 6 = Sabtu) 3 (Rabu)
Y Tahun empat angka 2010
y Tahun dua angka 10
g Jam (AM/PM) tanpa nol di depan 3 atau 10
G Jam (24H) tanpa nol di depan 3 atau 15

Diklat Web Programmer 90


CEP –CCIT FTUI
Web Programming

h Jam (AM/PM) dengan nol di depan 03 atau 10


H Jam (24H) dengan nol di depan 03 atau 23
i Menit 05 atau 54
s Detik 05 atau 54
a AM/PM dalam huruf kecil am
A AM/PM dalam huruf besar PM
U UNIX timestamp 1056244941

• strtotime(), berfungsi untuk mengubah data tanggal dan waktu dari bentuk string menjadi
timestamp. Fungsi ini adalah fungsi yang canggih, Anda dapat memberikan berbagai macam
masukan seperti teks tanggal, kata kunci, hingga perhitungan tanggal. Agar lebih jelas mengenai
penggunaan fungsi ini, perhatikanlah contoh-contoh berikut ini :

$timestamp = strtotime('3 Jan 2010');


$timestamp = strtotime('today');
$timestamp = strtotime('now + 10 hours');
$timestamp = strtotime('04:03:52 + 5 minutes + 10 seconds');
$timestamp = strtotime('3 Jan 2010 - 16 weeks');

Fungsi strtotime() akan sangat berguna jika digabungkan dengan fungsi date(). Dengan
menggabungkan kedua fungsi ini, Anda dapat memformat tanggal dan waktu apa saja yang
Anda inginkan. Berikut adalah contoh penggunaanya :

echo date('d/m/Y', strtotime('tomorrow')) // Menampilkan tanggal besok


echo date('l', strtotime('4 Aug 1983')) // Menampilkan nama hari pada tanggal 4 Agustus
1983

Agar Anda dapat lebih memahami berbagai operasi dengan tanggal, buatlah sebuah dokumen PHP
baru sebagai berikut ini :

<?php
$hari_ini = date('m/d/Y');
$saat_ini = date('H:i:s');
?>
<!doctype html>
<html>
<head>
<title>Tanggal dan Waktu</title>
</head>
<body>
<p>
Tanggal sekarang : <?php echo $hari_ini; ?><br />
Waktu sekarang : <?php echo $saat_ini; ?><br />
Tanggal lahir Anda : <?php echo date('d/m/Y', strtotime('4 Aug 1983')); ?><br
/>
Besok adalah hari : <?php echo date('l', strtotime('tomorrow')); ?><br />
50 jam dari sekarang adalah : <?php echo date('d/m/Y H:i:s', strtotime('now +
50 hours')); ?><br />
Usia Anda saat ini adalah : <?php echo (strtotime('now') - strtotime('4 Aug
1983')) / 31556926; ?> tahun<br />

</body>
</html>

Diklat Web Programmer 91


CEP –CCIT FTUI
Web Programming

Simpanlah dengan nama tanggal.php lalu bukalah dengan peramban web Anda.

7.8 MEMPROSES FORMULIR

Agar sebuah halaman web menjadi interaktif, tentunya Anda akan memerlukan masukan data dari
pengunjung halaman web Anda. Anda dapat melakukan hal ini dengan menggunakan formulir HTML
yang diletakkan pada halaman web Anda. Namun, untuk dapat menerima dan memproses data yang
telah dimasukkan tersebut, Anda akan memerlukan bantuan dari PHP.

Agar sebuah formulir dapat mengirimkan data yang selanjutnya akan diproses, seorang pengunjung
harus melakukan aksi submit terlebih dahulu. Aksi ini dapat dilakukan dengan menekan tombol <input
type=”submit” /> pada formulir tersebut. Selanjutnya, data tersebut akan dikirim ke dokumen
pemroses yang namanya terdapat pada atribut action di dalam elemen form.

Sebagai contoh, pada sebuah formulir dengan elemen form <form action=”proses.php”
method=”post”>, data dari formulir akan dikirimkan ke sebuah dokumen php proses.php, dimana
pada dokumen inilah semua pemrosesan data yang dikirim akan dilakukan.

Selain itu, Anda juga harus memperhatikan atribut name yang terdapat pada komponen-komponen
formulir seperti textbox, textarea, radio button, dan sebagainya. Atribut inilah yang nantinya akan
memberikan akses kepada PHP untuk mendapatkan data yang terkandung di dalamnya. Pastikanlah
Anda memberikan nilai atribut name yang relevan dan mudah dipahami.

PHP dapat mengakses data yang dikirimkan oleh sebuah formulir dengan menggunakan sebuah
variabel khusus yang bernama $_POST. Sebagai contoh, perhatikanlah sebuah dokumen HTML seperti
berikut ini :

<!doctype html>
<html>
<head>
<title>Formulir Sederhana</title>
</head>
<body>
<h1>Formulir Sederhana</h1>
<form action="proses_formulir.php" method="post">
<p>
Masukkan Nama Anda : <br />
<input name="nama" type="text" size="50" maxlength="100" />
<p><input type="submit" value="Kirim" />
</form>
</body>
</html>

Formulir yang tedapat pada halaman tersebut memiliki sebuah komponen masukan data dengan
nama nama. Anda dapat mengakses data ini melalui dokumen PHP proses_formulir.php dengan cara
sebagai berikut :

$nama = $_POST['nama']; // Simpan masukan data ke dalam variabel $name

Diklat Web Programmer 92


CEP –CCIT FTUI
Web Programming

Agar dapat lebih memahami proses tersebut secara lebih menyeluruh, cobalah Anda membuat
sebuah dokumen HTML sebagai berikut :

<!doctype html>
<html>
<head>
<title>Formulir Pendaftaran</title>
</head>
<body>
<h1>Formulir Pendaftaran </h1>
<form action="proses_formulir.php" method="post">
<p>
Masukkan Nama Anda : <br />
<input name="nama" type="text" size="50" maxlength="100" />

<p>
Masukkan Alamat Anda : <br />
<textarea name="alamat"></textarea>

<p>
Masukkan Jenis Kelamin Anda : <br />
<input type="radio" name="jenis_kelamin" value="Laki-Laki" />
<input type="radio" name="jenis_kelamin" value="Perempuan" />

<p>
Masukkan Agama Anda : <br />
<select name="agama">
<option value="Islam">Islam</option>
<option value="Kristen Katolik">Kristen Katolik</option>
<option value="Kristen Protestan">Kristen Protestan</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
<option value="Lainnya">Lainnya</option>
</select>

<p><input type="submit" value="Kirim" />


</form>
</body>
</html>

Simpanlah dengan nama formulir.html. Lalu buatlah dokumen pemroses proses_formulir.php


sebagai berikut :

<!doctype html>
<html>
<head>
<title>Proses Pendaftaran</title>
</head>
<body>
<h1>Selamat bergabung!</h1>
<hr />
<h2>Harap periksa kembali data diri yang telah Anda masukkan berikut ini :</h2>
<p>
<ul>
<li>Nama : <?php echo $_POST['nama']; ?></li>
<li>Alamat : <?php echo $_POST['alamat']; ?></li>

Diklat Web Programmer 93


CEP –CCIT FTUI
Web Programming

<li>Jenis Kelamin : <?php echo $_POST['jenis_kelamin']; ?></li>


<li>Agama : <?php echo $_POST['agama']; ?></li>
</ul>

</body>
</html>

Simpanlah lalu bukalah halaman formulir dengan peramban web Anda dan cobalah mengisi
formulir tesebut.

7.9 MEMBUAT HALAMAN DINAMIS

Anggaplah Anda akan membuat sebuah situs web penjualan online. Anda tentunya akan
memerlukan banyak halaman untuk menampilkan masing-masing produk yang ingin Anda jual. Jika
halaman web yang berfungsi untuk menampilkan produk-produk tersebut bersifat statis, maka
tentunya Anda perlu membuat sebuah halaman untuk masing-masing produk. Bayangkan jika Anda
memiliki ratusan produk, tentu akan sangat melelahkan dan memakan waktu untuk membuat semua
halaman tersebut.

Namun, dengan menggunakan sebuah halaman yang bersifat dinamis, Anda cukup membuat sebuah
halaman produk saja, dimana nantinya halaman tersebut dapat digunakan untuk menampilkan
berbagai jenis produk yang ada. Hal ini dapat dilakukan dengan memberikan keterangan tambahan
berupa produk mana yang akan ditampilkan oleh halaman tersebut, selanjutnya PHP akan memproses
keterangan tambahan tersebut dan menyesuaikan isi dari halaman tersebut untuk menampilkan
produk yang sesuai.

Keterangan tambahan seperti ini dikenal dengan istilah querystring. Querystring dapat diletakkan
pada alamat dari sebuah halaman web. Berikut adalah contoh dari penggunaan querystring pada
sebuah alamat halaman web :

http://www.tokosaya.com/lihat_barang.php?kode_barang=10

Alamat halaman web di atas akan membuka dokumen lihat_barang.php sekaligus memberikan
querystring berupa kode_barang dengan nilai 10 kepada halaman tersebut. Dapat Anda perhatikan
bahwa di antara nama dokumen dengan querystring dipisahkan dengan sebuah tanda tanya. Sedangkan
bentuk dari querystring sendiri mirip dengan bentuk dari sebuah variabel, hanya saja Anda tidak perlu
memberikan tanda dolar ($) di depan nama sebuah querystring. Selain itu, Anda juga perlu
memberikan tanda kutip untuk data dengan tipe string.

Terkadang, Anda mungkin akan memerlukan lebih dari satu nilai untuk diberikan melalui
querystring. Untungnya, Anda dapat memberikan lebih dari satu nilai kepada sebuah querystring
seperti pada contoh berikut ini :

http://www.tokosaya.com/daftar_barang.php?urutkan=harga&cara=menurun&jumlah_perhalaman=1
0

Diklat Web Programmer 94


CEP –CCIT FTUI
Web Programming

Alamat halaman web diatas memiliki tiga buah querystring, yaitu urutkan dengan nilai harga, cara
dengan nilai menurun, dan jumlah_perhalaman dengan nilai 10. Untuk memisahkan sebuah
querystring dengan querystring lainnya, Anda dapat menggunakan tanda ampersand (&).

Lalu bagaimanakan PHP dapat memproses querystring ini? Ternyata cara pemrosesan data yang
terdapat pada querystring mirip dengan pemrosesan data pada formulir. Jika untuk formulir Anda akan
menggunakan variabel $_POST, maka untuk querystring Anda cukup menggantinya dengan variabel
$_GET, selebihnya, pemakaiannya akan sama :

$metode_pengurutan = $_GET['urutkan'];
$cara_pengurutan = $_GET['menurun'];
$jumlah_perhalaman = $_GET['jumlah_perhalaman'];

Sekarang marilah kita mencoba menerapkan konsep ini untuk membuat sebuah halaman yang
dinamis. Pertama-tama buatlah sebuah halaman HTML sebagai berikut :

<!doctype html>
<html>
<head>
<title>Undian tanpa Undian</title>
</head>
<body>
<h1>Silahkan Pilih Hadiah Anda</h1>
<ul>
<li><a href="proses_hadiah.php?hadiah=mobil">Mobil sport</a></li>
<li><a href="proses_hadiah.php?hadiah=rumah">Rumah mewah</a></li>
<li><a href="proses_hadiah.php?hadiah=pesawat">Pesawat pribadi</a></li>
</ul>
</body>
</html>

Simpanlah dengan nama hadiah.html. Jika Anda perhatikan, tatutan yang terdapat pada halaman
ini mengarah kepada sebuah dokumen PHP yang bernama proses_query.php, maka buatlah dokumen
tersebut sebagai berikut :

<!doctype html>
<html>
<head>
<title>Undian tanpa Undian</title>
</head>
<body>
<h1>Selamat!</h1>
<p>Anda telah mendapatkan sebuah <?php echo $_GET['hadiah']; ?>
<a href="hadiah.html">Kembali ke Pilihan Hadiah</a>
</body>
</html>

Simpanlah dan bukalah halaman hadiah.html dengan peramban web Anda, cobalah menggunakan
tautan-tautan yang ada. Perhatikan dengan baik perubahan URL pada peramban web Anda. Cobalah
mengubah nilai dari querystring langsung dari peramban web Anda. Apakah yang terjadi?

Diklat Web Programmer 95


CEP –CCIT FTUI
Web Programming

7.10 MENGGUNAKAN ARRAY

Larik atau yang juga dikenal dengan istilah Array adalah sebuah variabel yang memiliki lebih dari
satu nilai. Sebuah nilai di dalam array dikenal dengan istilah elemen. Elemen tidak terbatas kepada
sebuah nilai saja, sebuah array bahkan dapat memiliki banyak array-array sebagai sebuah elemen di
dalamnya. Array seperti ini disebut dengan istilah array multidimensi.

Sebuah elemen pada sebuah array dapat direferensikan dengan menggunakan sebuah indeks.
Indeks dapat diibaratkan sebagai nomor urut dari sebuah elemen. Agar dapat lebih memahami makna
dari array, elemen, dan indeks, perhatikanlah ilustrasi berikut ini :

$anggota
Nilai Andi Budi Cici Dedi Emil
Indeks 0 1 2 3 4
Elemen Elemen Elemen Elemen Elemen

$anggota adalah sebuah array yang memiliki 5 elemen, yaitu Andi, Budi, Cici, Dedi, dan Emil. Andi
memiliki nomor indeks 0, Budi memiliki nomor indeks 1, Cici memiliki nomor indeks 2 dan seterusnya.
Perlu diperhatikan bahwa nomor indeks pada sebuah array dimulai dari 0.

Ada beberapa cara yang dapat Anda gunakan untuk membuat sebuah array dalam PHP. Cara yang
pertama adalah membuat array dan langsung memasukkan elemen-elemen dari array tersebut seperti
pada contoh berikut ini :

$anggota = array('Andi', 'Budi', 'Cici', 'Dedi', 'Emil');

Cara kedua adalah dengan membuat sebuah array kosong, baru kemudian memasukkan elemen -
elemen dari array tersebut sesuai dengan kebutuhan. Contoh :

$anggota = array(); // Membuat sebuah array kosong


$anggota[] = 'Andi' // Menambahkan elemen 'Andi' pada array
$anggota[] = 'Budi' // Menambahkan elemen 'Budi' pada array
$anggota[] = 'Cici' // Menambahkan elemen 'Cici' pada array

Pada dasarnya, array memiliki sifat yang sama dengan variabel. Anda dapat memanipulasi elemen
yang terdapat pada suatu array dengen mereferensikan kepada indeksnya seperti contoh berikut ini :

$anggota = array('Andi', 'Budi', 'Cici', 'Dedi', 'Emil');


$anggota[1] = 'Rudi' // Nilai dari elemen pada indeks 1 sekarang adalah 'Rudi'
$anggota[] = 'Fahri' // Menambahkan elemen 'Fahri' pada array (index 5)
$anggota[5] = 'Cecep' // Nilai dari elemen pada indeks 5 sekarang adalah 'Cecep'

Untuk menghapus sebuah elemen dari sebuah array dengan menggunakan fungsi unset() seperti
pada contoh berikut ini :

$anggota = array('Andi', 'Budi', 'Cici', 'Dedi', 'Emil');


echo $anggota[2] // Menampilkan elemen 'Cici'
unset($anggota[2]); // Menghapus elemen 'Cici'

Diklat Web Programmer 96


CEP –CCIT FTUI
Web Programming

echo $anggota[2] // Tidak menampilkan apa-apa


echo $anggota[3] // Menampilkan elemen 'Dedi'

Dalam menggunakan array, ada sebuah fungsi yang sangat berguna, yaitu fungsi sizeof(). Fungsi ini
dapat digunakan untuk mengetahui jumlah elemen yang terdapat di dalam sebuah array. Berikut adalah
contoh penggunaan fungsi ini :

$anggota = array('Andi', 'Budi', 'Cici', 'Dedi', 'Emil');


echo sizeof($anggota); // Hasilnya adalah 5

Agar Anda dapat lebih memahami prinsip penggunaan array, marilah mencoba menerapkannya
dengan membuat sebuah dokumen PHP sebagai berikut :

<html>
<head>
<title>Daftar Anggota</title>
</head>
<body>
<h1>Daftar Anggota Sebelum Regenerasi</h1>
<ul>
<li><?php echo $anggota[0]; ?></li>
<li><?php echo $anggota[1]; ?></li>
<li><?php echo $anggota[2]; ?></li>
<li><?php echo $anggota[3]; ?></li>
<li><?php echo $anggota[4]; ?></li>
</ul>
<h1>Daftar Anggota Setelah Regenerasi</h1>
<?php
$anggota[3] = 'Cecep';
$anggota[] = 'Farah';
unset($anggota[0]);
?>
<ul>
<li><?php echo $anggota[0]; ?></li>
<li><?php echo $anggota[1]; ?></li>
<li><?php echo $anggota[2]; ?></li>
<li><?php echo $anggota[3]; ?></li>
<li><?php echo $anggota[4]; ?></li>
<li><?php echo $anggota[5]; ?></li>
</ul>
</body>
</html>

7.10.1MAP

Dalam menggunakan array, mungkin Anda merasa sulit untuk mengingat indeks dari sebuah
elemen di dalam array yang cukup besar. Untuk mengatasi masalah ini, PHP menyediakan sebuah
fasilitas yang dinamakan map. Dengan menggunakan map, Anda dapat mendefinisikan sendiri indeks
yang akan digunakan untuk setiap elemen dari sebuah array. Untuk lebih jelasnya, perhatikanlah
ilustrasi berikut :

Diklat Web Programmer 97


CEP –CCIT FTUI
Web Programming

$anggota
Nilai Andi Budi Cici Dedi Emil
Indeks Direktur Wadir Sekretaris Bendahara Satpam

Jika pada array standar Anda dapat menggunakan $anggota[0], $anggota[1], dan seterusnya, maka
pada sebuah map Anda dapat merefensikan sebuah elemen dengan indeks yang telah Anda tetapkan
sendiri, seperi $anggota['Direktur'], $anggota['Wadir'], dan seterusnya.

Sama seperti array, Anda dapat membuat map dengan langsung memasukkan elemen-elemen yang
terdapat di dalamnya atau dengan membuat map kosong terlebih dahulu baru kemudian memasukkan
elemen-elemennya satu persatu. Perhatikanlah beberapa contoh berikut ini :

// Membuat map dengan cara pertama


$anggota = array(
'Direktur' => 'Andi', // Perhatikan penggunaan tanda panah
'Wadir' => 'Budi',
'Sekretaris' => 'Cici',
'Bendahara' => 'Dedi',
'Satpam' => 'Emil'
);

// Membuat map dengan cara kedua


$anggota = array();
$anggota['Direktur'] = 'Andi'; // Perhatikan penggunaan sama dengan
$anggota['Wadir'] = 'Budi';
$anggota['Sekretaris'] = 'Cici';
$anggota['Bendahara'] = 'Dedi';
$anggota['Satpam'] = 'Emil';

Anda juga dapat melakukan manipulasi dan menghapus elemen-elemen yang terdapat pada map
dengan cara yang sama seperti pada penggunaan array, hanya saya, Anda sekarang dapat
mereferensikan sebuah elemen dengan menggunakan indeks yang Anda buat sendiri.

7.10.2ARRAY MULTIDIMENSI

Seperti yang sudah dijelaskan sebelumnya, array multidimensi adalah array yang memiliki elemen-
elemen berupa array. Array multidimensi juga dikenal dengan istilah matriks. Untuk lebih jelas
mengenai array multidimensi, perhatikanlah ilustrasi berikut ini :

$karyawan
Anton Bayu Cinta
0
0 1 2
Dedi Eki Firdaus
1
0 1 2
Gogon Heri Intan
2
0 1 2

Array $karyawan memiliki tiga buah elemen, dimana masing-masing elemen ini juga merupakan
sebuah array yang memiliki beberapa elemen. Array seperti ini dinamakan dengan array berdimensi
dua. Tentu saja, jika diinginkan Anda dapat membuat array dengan jumlah dimensi yang tidak terbatas.

Diklat Web Programmer 98


CEP –CCIT FTUI
Web Programming

Berikut adalah contoh penggunaan array dengan dua dimensi seperti di atas pada PHP :

// Membuat array dua dimensi


$karyawan = array(
array('Anton' , 'Bayu', 'Cinta'),
array('Dedi' , 'Eki', 'Firdaus'),
array('Gogon' , 'Heri', 'Intan')
);

// Manipulasi data
$karyawan[0][2] = 'Pandu';

// Menambah elemen tingkat pertama


$karyawan[] = array('Joni', 'Kiki');
// Menambah elemen tingkat kedua
$karyawan[3][] = 'Lulu';

// Menghapus elemen
unset($karyawan[2][1]);
unset($karyawan[0]);

Selain array multidimensi, Anda juga dapat membuat map multidimensi dengan seperti berikut ini :

// Membuat map dua dimensi


$karyawan = array(
'Penjualan' => array(
'Bos' => 'Anton',
'Wakil' => 'Bayu',
'Pegawai' => 'Cinta'
),
'Produksi' => array(
'Tukang Kayu' => 'Dedi',
'Tukang Besi' => 'Eki',
'Tukang Bolos' =>'Firdaus'
),
'Keuangan' => array(
'Jual beli' => 'Gogon',
'Exim' => 'Heri',
'Bank' => 'Intan'
)
);

7.11 MENGATUR ALUR PROGRAM

Hingga saat ini, Anda sudah mempelajari bagaimana membuat sebuah halaman web dinamis yang
sederhana dengan menggunakan PHP. Namun, ada kalanya Anda memerlukan sebuah halaman yang
lebih kompleks. Misalkan Anda ingin menampilkan halaman web yang berbeda untuk pengunjung biasa
dengan anggota. Atau mungkin Anda ingin mengulang sebuah aksi berkali-kali tanpa perlu menulis
ulang aksi tersebut.

Sebagai contoh, anggaplah Anda ingin mempunyai sebuah halaman web yang akan menyapa setiap
pengunjung yang datang. Anda ingin menyapa pengunjung dengan kata “Selamat Pagi!” jika pengunjung
tersebut membuka halaman web Anda pagi hari, “Selamat Siang!” pada siang hari, “Selamat Sore!” pada

Diklat Web Programmer 99


CEP –CCIT FTUI
Web Programming

sore hari dan “Selamat Malam!” pada malam hari. Untuk itu, Anda tentunya menginginkan sesuatu
seperti ini :

jika sekarang pagi hari :


echo 'Selamat Pagi!';
sedangkan jika sekarang siang hari :
echo 'Selamat Siang!';
sedangkan jika sekarang sore hari :
echo 'Selamat Sore!';
sedangkan sekarang malam hari :
echo 'Selamat Malam!';

Atau mungkin Anda ingin menampilkan data-data yang terdapat di dalam sebuah basis data, namun,
karena Anda tidak mengetahui secara pasti jumlah data yang terdapat di dalamnya dan kemungkinan
jumlah data yang dapat terus berubah-ubah, Anda mungkin menginginkan sesuatu seperti ini :

untuk setiap data barang yang ada :


echo $nama_barang;
echo $harga_satuan;

Anda dapat melakukan hal-hal diatas dengan mengatur alur dari sebuah program PHP. Ada dua
macam pengaturan alur program yang dapat Anda gunakan, yaitu percabangan dan pengulangan.
Namun, sebelum masuk lebih jauh ke dalam percabangan dan pengulangan, marilah terlebih dahulu
mengenal apa yang dimaksud dengan kondisi.

7.11.1MENGGUNAKAN KONDISI

Kondisi adalah sebuah pernyataan khusus dalam PHP yang berfungsi untuk menguji atau
mengevaluasi apakah pernyataan tersebut benar atau salah. Kondisi adalah komponen paling penting
dari percabangan dan pengulangan, dimana kondisi akan menentukan apakah aksi apa saja yang harus
dilakukan dan berapa kali suatu aksi harus diulang.

Dalam membuat sebuah kondisi, Anda akan menanyakan sebuah pertanyaan yang akan
membandingkan beberapa nilai, misalkan :

• Apakah nilai dari variabel $x sama dengan nilai dari variabel $y?

• Apakah hari ini adalah hari Minggu?

• Apakah panjang dari sebuah string lebih besar daripada 10 karakter?

Untuk melakukan perbandingan-perbandingan seperti di atas, Anda akan memerlukan sebuah


operasi yang dinamakan dengan operasi perbandingan (comparison). Operasi seperti akan
menghasilkan sebuah nilai dengan tipe data boolean, yaitu benar/TRUE, dan salah/FALSE.

Berikut adalah operator-operator yang dapat digunakan dalam operasi perbandingan :

• Operator ==, berfungsi untuk mengetahui apakah dua buah nilai adalah nilai yang sama.

Diklat Web Programmer 100


CEP –CCIT FTUI
Web Programming

• Operator != dan <>, berfungsi untuk mengetahui apakah dua buah nilai adalah nilai yang
berbeda.

• Operator > dan <, berfungsi untuk mengetahui apakah sebuah nilai lebih besar atau lebih kecil
dari nilai lainnya.

• Operator >= dan <=, berfungsi untuk mengetahui apakah sebuah nilai lebih besar atau kecil atau
sama dengan nilai lainnya.

• Operator !, berfungsi untuk membalikkan nilai kebenaran dari suatu kondisi. TRUE akan
menjadi FALSE dan FALSE akan menjadi TRUE. Mudahnya, dapat dibacah sebagai “not” atau
“tidak”.

Perlu diperhatikan bahwa operasi perbandingan hanya dapat dilakukan jika kedua nilai yang
dibandingkan memiliki tipe data yang sama. Apabila Anda mencoba untuk membandingkan dua nilai
yang memiliki tipe data yang berbeda, seperti membandingkan angka dengan string, maka akan terjadi
sebuah kesalahan.

Berikut adalah beberapa contoh dari operasi perbandingan :

$a == $b;
strlen($teks) >= 20;
!empty($teks);
12 < 7;
$nama !='Toto';

Terkadang, Anda akan memerlukan sebuah operasi perbandingan yang membandingkan banyak hal.
Sebagai contoh, kriteria seorang siswa untuk mendapatkan beasiswa adalah memiliki nilai rata-rata
diatas 70 dan tidak pernah bolos. Anda mungkin akan memerlukan sebuah operasi perbandingan
sebagai berikut :

$nilai_rata_rata > 70 dan $tidak_pernah_bolos;

Untuk melakukan hal seperti itu, Anda dapat menggunakan operator penggabungan kondisi berikut
ini :

• Operator && (dan), operasi dengan operator ini akan memberikan nilai TRUE jika semua
kondisi yang ada terpenuhi, selain itu, operator ini akan memberikan nilai FALSE. Contoh :

// Perhatikan penggunaan kurung berikut ini


($nilai_rata_rata > 70) && ($bolos == 0);

// Dengan tiga kondisi


($a > 90) && ($b <= 60) && (strlen($c) == 10);

• Operator || (atau), operasi dengan operator ini akan memberikan nilai TRUE jika ada salah satu
saja dari kondisi yang terpenuhi. Jika tidak ada kondisi yang terpenuhi maka operator ini akan
memberikan nilai FALSE. Contoh :

($nilai_rata_rata < 50) || ($bolos >= 10);

Diklat Web Programmer 101


CEP –CCIT FTUI
Web Programming

// Gabungan
($a > 90) && ($b <= 60) && ((strlen($c) == 10) || ($x != 5));

7.11.2MENGGUNAKAN PERCABANGAN

Sesuai dengan namanya, dengan menggunakan percabangan Anda dapat membuat sebuah halaman
web yang dapat melakukan aksi yang berbeda-beda tergantung dari suatu kondisi tertentu. Hal seperti
ini juga dikenal dengan istilah pengambilan keputusan atau decision making.

Di dalam bahasa PHP, ada dua macam percabangan yang dapat dilakukan, yaitu percabangan
dengan menggunakan pernyataan if dan percabangan dengan menggunakan pernyataan switch.

7.11.2.1 PERCABANGAN DENGAN IF

Penyataan if akan mengevaluasi sebuah kondisi dan melakukan serangkaian aksi (blok) apabila
kondisi tersebut terpenuhi. Berikut adalah bentuk penulisan dari pernyataan if :

if ( kondisi ) {
aksi
} elseif ( kondisi ) {
aksi
} else {
aksi
}

Sebuah pernyataan if terdiri dari tiga bagian, yaitu :

• Bagian if, pada bagian ini akan dilakukan pengujian terhadap suatu kondisi dan apabila kondisi
tersebut terpenuhi maka serangkaian aksi akan dilakukan. Bagian ini adalah bagian paling dasar
dan harus digunakan dalam setiap pernyataan if. Berikut adalah contoh penggunaan bagian ini :

if ($a == $b) {
echo 'Bilangan A dan B memiliki nilai yang sama!';
}

Pada contoh di atas, apabila variabel $a dan $b memiliki nilai yang sama, maka pernyataan
echo yang terdapat di dalam blok di bawahnya akan dijalankan. Sedangkan apabila variabel $a
dan $b tidak memiliki nilai yang sama, maka tidak akan ada aksi yang diambil dan program akan
terus berjalan ke pernyataan selanjutnya (percabangan telah selesai).

Perlu diperhatikan bahwa sebuah blok diawali dan diakhiri dengan sebuah kurung kurawal.
Di dalam sebuah blok dapat diletakkan berbagai macam pernyataan dengan jumlah yang tidak
terbatas, bahkan, Anda dapat meletakkan penyataan if kedua di dalam sebuah blok jika
diperlukan.

• Bagian elseif, apabila kondisi yang berada pada bagian sebelumnya tidak terpenuhi, maka akan
dilakukan pengujian terhadap kondisi yang terdapat di bagian ini. Penggunaan bagian ini dalam
suatu pernyataan if tidaklah diharuskan, Anda cukup menggunakan bagian ini seperlunya saja.
Namun, jika memang diperlukan, Anda dapat menggunakan bagian ini lebih dari satu kali.

Diklat Web Programmer 102


CEP –CCIT FTUI
Web Programming

Bagian ini dapat digunakan jika Anda ingin membuat sebuah percabangan dengan banyak
cabang. Contoh :

if ($a == $b) {
echo 'Bilangan A dan B memiliki nilai yang sama!';
} elseif ($a < $b) {
echo 'Bilangan A lebih kecil dari bilangan B!';
} elseif ($a > $b) {
echo 'Bilangan A lebih besar dari bilangan B!';
}

Pada contoh di atas, pertama-tama akan dilakukan pengujian apakah variabel $a memiliki
nilai yang sama dengan variabel $b. Jika ya, maka pernyataan echo yang pertama akan
dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian
apakah variabel $a lebih kecil dari variabel $b. Jika ya, maka pernyataan echo yang kedua akan
dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian
apakah variabel $a lebih besar dari variabel $b. Jika ya, maka pernyataan echo yang ketiga akan
dijalankan dan kemudian percabangan berakhir. Jika tidak juga, maka tidak akan ada aksi yang
dijalankan dan percabangan akan berakhir, melanjutkan ke pernyataan selanjutnya.

• Bagian else, apabila semua kondisi yang berada pada bagian-bagian sebelumnya tidak ada yang
terpenuhi, maka akan dilakukan aksi yang terdapat pada blok bagian ini. Sama seperti
penggunaan blok elseif, penggunaan blok ini juga tidak diharusnkan. Namun, dalam setiap
pernyataan if hanya boleh ada satu blok else saja. Perhatikanlah contoh berikut ini :

if ($a == $b) {
echo 'Bilangan A dan B memiliki nilai yang sama!';
} else {
echo 'Bilangan A dan B memiliki nilai yang berbeda!';
}

Pada contoh di atas, apabila variabel $a dan $b memiliki nilai yang sama, maka pernyataan
echo yang pertama akan dijalankan, sedangkan jika tidak, maka pernyataan echo yang kedua
akan dijalankan.

if ($a == $b) {
echo 'Bilangan A dan B memiliki nilai yang sama!';
} elseif ($a < $b) {
echo 'Bilangan A lebih kecil dari bilangan B!';
} elseif ($a > $b) {
echo 'Bilangan A lebih besar dari bilangan B!';
} else {
echo 'Bilangan A dan B memiliki nilai yang tidak jelas!';
}

Pada contoh di atas, pertama-tama akan dilakukan pengujian apakah variabel $a memiliki
nilai yang sama dengan variabel $b. Jika ya, maka pernyataan echo yang pertama akan
dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian
apakah variabel $a lebih kecil dari variabel $b. Jika ya, maka pernyataan echo yang kedua akan
dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian
apakah variabel $a lebih besar dari variabel $b. Jika ya, maka pernyataan echo yang ketiga akan

Diklat Web Programmer 103


CEP –CCIT FTUI
Web Programming

dijalankan dan kemudian percabangan berakhir. Jika tidak juga, pernyataan echo yang keempat
akan dijalankan dan kemudian percabangan berakhir, melanjutkan ke pernyataan selanjutnya.

Seperti yang sudah dijelaskan sebelumnya, Anda dapat meletakkan penyataan if lagi di dalam
sebuah penyataan if. Penggunaan pernyataan yang berlapis-lapis seperti ini disebut dengan istilang
penyataan bersarang (nested statement). Berikut adalah contoh penggunaan if bersarang :

if (!empty($_POST['username'])) {
if ((strlen($_POST['username']) > 20) {
echo 'Username maksimal 20 karakter!';
}
if ((strlen($_POST['username']) < 6) {
echo 'Username minimal 6 karakter!';
}
) else {
echo 'Username harus diisi!';
}

Pada contoh yang terdapat di awal bagian 1.11, dikatakan bahwa dengan menggunakan
percabangan Anda dapat menampilkan halaman dengan tampilan yang berbeda-beda tergantung dari
suatu kodisi. Untuk melakukan hal ini, Anda dapat membuat pernyataan if yang “melewati batas”.
Maksud dari melewati batas disini adalah pernyataan if tersebut melewati batasan tag <?php dan ?>
seperti yang dicontohkan pada dokumen PHP berikut ini :

<?php
$sekarang = date('G');
?>
<!doctype html>
<html>
<head>
<title>Halaman Awal</title>
</head>
<body>
<?php if (($sekarang >= 2) && ($sekarang < 10)) { ?>
<h1>Selamat Pagi!</h1>
<?php } elseif (($sekarang >= 10) && ($sekarang < 10)) { ?>
<h1>Selamat Siang!</h1>
<?php } elseif (($sekarang >= 15) && ($sekarang < 15)) { ?>
<h1>Selamat Sore!</h1>
<?php } elseif (($sekarang >= 18) && ($sekarang < 18)) { ?>
<h1>Selamat Malam!</h1>
<?php } ?>
</body>
</html>

Pada contoh di atas, dapat dilihat bawah blok-blok yang terdapat pada pernyataan if melewati
batasan tag <?php dan ?>. Jika jam sekarang lebih besar atau sama dengan jam 2 dan lebih kecil dari jam
10, maka blok HTML pertama (“Selamat Pagi!”) akan ditampilkan, sedangkan apabila jam sekarang
lebih besar atau sama dengan jam 10 dan lebih kecil dari jam 15, maka blok HTML kedua (“Selamat
Siang!”) akan ditampilkan, begitu seterusnya.

Diklat Web Programmer 104


CEP –CCIT FTUI
Web Programming

Dengan menggunakan cara seperti ini, Anda dapat menyisipkan blok HTML yang besar di dalam
sebuah percabangan, menjadikan proses perubahan konten dari sebuah halaman berdasarkan suatu
kondisi lebih mudah dilakukan.

7.11.2.2 PERCABANGAN DENGAN SWITCH

Berbeda dengan pernyataan if yang akan menguji sebuah kondisi untuk menentukan aksi yang akan
diambil, penyataan switch akan mengevaluasi nilai dari sebuah variabel dan mengambil aksi tertentu
berdasarkan nilai tersebut. Berikut adalah bentuk dari penulisan pernyataan switch :

switch ( variabel ) {
case nilai :
aksi
break;
case nilai :
aksi
break;
...
default :
aksi
break;
}

Berikut adalah penjelasan dari bagian-bagian yang terdapat di dalam pernyataan ini :

• Bagian switch, bagian ini akan menerima variabel yang akan dievaluasikan nilainya. Bagian ini
harus digunakan dalam setiap pernyataan switch.

• Bagian case, bagian ini akan mengevaluasikan nilai dari variabel yang diberikan pada bagian
swicth terhadap suatu nilai. Jik variabel tersebut memiliki nilai yang sama dengan nilai yang
dievaluasikan, maka aksi tertentu akan diambil. Berbeda dengan penyataan if dimana suatu
blok aksi diawali dan diakhiri dengan kurung kurawal, blok aksi oada pernyataan switch diawali
dengan tanda titik dua dan diakhiri dengan pernyataan break. Sebuah pernyataan switch
setidaknya harus memiliki satu baru bagian case. Anda dapat menggunakan sebanyak mungkin
bagian case sesuai dengan kebutuhan.

• Bagian default, bagian ini memiliki fungsi yang sama dengan bagian pada pernyataan if. Apabila
tidak ada nilai yang dipenuhi oleh sebuah variabel, maka aksi pada bagian inilah yang akan
dikerjakan. Bagian ini tidak harus digunakan pada setiap pernyataan switch.

Agar dapat lebih memahami penggunaan pernyataan switch, perhatikanlah contoh berikut ini :

switch ($kode_provinsi) {
case 'DKI':
$ongkos_kirim = 0;
break;
case 'JBR':
$ongkos_kirim = 50000;
break;
case 'JTG':
$ongkos_kirim = 100000;

Diklat Web Programmer 105


CEP –CCIT FTUI
Web Programming

break;
case 'JTM':
$ongkos_kirim = 200000;
break;
default:
echo 'Maaf, kami tidak melayani pengiriman ke daerah Anda.';
break;
}

Pada contoh di atas, akan dilakukan evaluasi terhadap nilai dari variabel $kode_provinsi. Jika nilai
dari variabel tersebut adalah ‘DKI’, maka akan dilakukan aksi $ongkos_kirim = 0;. Jika nilai dari variabel
tersebut adalah ‘JBR, maka akan dilakukan aksi $ongkos_kirim = 50000; dan seterusnya. Jika tidak ada
nilai yang dipenuhi, maka akan dilakukan aksi echo 'Maaf, kami tidak melayani pengiriman ke daerah
Anda.';

7.11.3MENGGUNAKAN PENGULANGAN

Pengulangan dapat digunakan untuk mengulang sebagian dari suatu program sebanyak jumlah yang
ditentukan. Dengan menggunakan pengulangan kode yang akan dituliskan akan menjadi semakin
sedikit. Sebagai contoh, anggaplah Anda harus membuat sebuah halaman web yang akan menampilkan
pilihan tahun dari 1900 hingga 2000, akankah Anda membuatnya seperti ini?

...
<select name="tahun">
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
...
<option value="2000">2000</option>
</select>
...

Tentu tidak bukan? Anda mungkin menginginkan sesuatu yang praktis seperti ini :

...
<select name="tahun">
<?php lakukan untuk angka 1900 sampai 2000 { ?>
<option value="<?php echo $angka_sekarang; ?>"><?php echo
$angka_sekarang; ?>"></option>
<?php } ?>
</select>
...

Selain itu, pengulangan juga dapat dilakukan untuk hal yang belum diketahui akan diulang berapa
kali seperti yang dicontohkan pada awal bagian ini.

Ada tiga macam pengulangan yang dapat dilakukan dalam bahasa PHP. Yaitu pengulangan dengan
menggunakan for, pengulangan dengan menggunakan while, dan pengulangan dengan menggunakan
do ... while.

7.11.3.1 PENGULANGAN DENGAN FOR

Diklat Web Programmer 106


CEP –CCIT FTUI
Web Programming

Pengulangan dengan pernyataan for adalah sebuah pengulangan yang menggunakan sebuah
variabel bantuan sebagai penghitung. Dengan pengulangan ini Anda akan menentukan nilai awal dari
penghitung, kondisi dimana pengulangan akan terus dilakukan, dan perubahan nilai dari penghitung
untuk setiap pengulangan yang dilakukan.

Berikut adalah bentuk penulisan penyataan for :

for ( nilai awal ; kondisi pengulangan ; perubahan nilai ) {


aksi yang diulang
}

Berikut adalah penjelasan dari tiga parameter yang harus Anda tentukan :

• Nilai awal, dalam parameter ini Anda akan membuat sebuah variabel penghitung dan
memberikan nilai awal untuk variabel tersebut. Sebagai contoh, Anda dapat menggunakan
pernyataan seperti $i = 1.

• Kondisi pengulangan, yaitu kondisi dari variabel penghitung yang harus dipenuhi untuk
melakukan pengulangan. Sebagai contoh, apabila Anda menggunakan pernyataan $i <= 10,
maka pengulangan akan terus dilakukan selagi nilai dari variabel penghitung lebih kecil atau
sama dengan sepuluh.

• Perubahan nilai, Anda harus menentukan perubahan nilai dari variabel pernghitung setiap kali
aksi berulang. Sebagai contoh, apabila Anda menggunakan pernyataan $i++, maka nilai dari
variabel penghitung akan bertambah satu setiap kali aksi berulang.

Contoh berikut akan menyelesaikan masalah penulisan tahun yang telah dibicarakan sebelumnya :

...
<select name="tahun">
<?php for ($i = 1900; $i <= 2000; $i++) { ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?>"></option>
<?php } ?>
</select>
...

Pada contoh di atas, pengulangan akan dimulai dengan nilai awal 1900 untuk variabel penghitung,
pengulangan akan terus berlanjut selama nilai variabel penghitung ini masih lebih kecil atau sama
dengan 2000, dimana setiap kali aksi berulang maka nilai dari variabel tersebut akan bertambah satu.

Jika Anda perhatikan, pernyataan for juga dapat “melewati batas” seperti pernyataan if. Selain itu,
Anda juga dapat membuat pernyataan for yang bersarang, dimana di dalam blok aksi dari sebuah
pernyataan for terdapat pernyataan for lainnya. Kedua aturan ini juga berlaku untuk metode
pengulangan lainnya.

Berikut adalah contoh dari pernyataan for yang bersarang:

$for ($i = 1; $i <= 10; $i++) {


echo '<h1>Perkalian ' . $i . '</h1>';
for ($j = 1; $j <= 10; $j++) {

Diklat Web Programmer 107


CEP –CCIT FTUI
Web Programming

echo $i . ' x ' . $j . ' = ' . $i * $j;


}
}

Pada contoh di atas, untuk setiap pengulangan dengan penghitung i, akan dilakukan pengulangan
dengan penghitung j. Cobalah menggunakan contoh diatas pada sebuah halaman web agar Anda dapat
memahaminya dengan lebih jelas.

7.11.3.2 PENGULANGAN DENGAN WHILE

Berbeda dengan pengulangan for yang menggunakan variabel penghitung, pengulangan while tidak
menggunakan variabel penghitung, melainkan akan melakukan evaluasi terhadap suatu kondisi.
Pengulangan akan terus dilakukan selama kondisi tersebut dievaluasikan sebagai TRUE.

Berikut adalah bentuk penulisan perulangan dengan while :

while ( kondisi ) {
aksi
}

Pernyataan ini memiliki cara kerja yang sama dengan pernyataan if. Apabila kondisi terpenuhi maka
aksi akan terus diulang salama kondisi tersebut terpenuhi. Sedangkan apabila kondisi tidak terpenuhi
maka tidak akan ada aksi yang diambil dan program akan melanjutkan ke pernyataan berikutnya.

Perhatikanlah contoh berikut ini :

$a = 0;
$b = 10;
while ($a < $b) {
echo 'A masih lebih kecil daripada B';
$a++;
$b--;
}

Pada contoh di atas, aksi yang berada di dalam blok akan terus diulang selagi nilai dari variabel $a
masih lebih kecil dari variabel $b.

7.11.3.3 PENGULANGAN DENGAN DO ... WHILE

Pengulangan dengan pernyataan do ... while memiliki kemiripan dengan pengulangan dengan
menggunakan pernyataan while, yaitu pengulangan akan terus dilakukan apabila kondisi yang
dievaluasikan terpenuhi.

Hanya saja, jika pada pernyataan while suatu kondisi tidak terpenuhi aksi yang berada di dalam
blok pengulangan tidak akan dilakukan sama sekali, maka pada pernyataan do ... while aksi yang berada
di dalam blok pengulangan akan dilakukan sebanyak minimal satu kali.Hal ini dikarenakan pada
pernyataan while kondisi akan dievaluasikan terlebih dahulu sebelum aksi, sedangkan pada pernyataan
do ... while kondisi akan dievaluasikan setelah aksi pertama dilakukan.

Diklat Web Programmer 108


CEP –CCIT FTUI
Web Programming

Berikut adalah bentuk penulisan pernyataan do ... while :

do {
aksi
} while ( kondisi );

Pengulangan dengan metode ini pada umumnya lebih jarang ditemukan apabila dibandingkan
dengan pengulangan lainnya.

7.11.3.4 PENGULANGAN DAN ARRAY

Selain ketiga metode pengulangan di atas, ada satu metode pengulangan yang dapat digunakan
untuk “berjalan” di dalam sebuah array. Metode pengulangan ini dapat digunakan untuk membaca atau
memanipulasi semua elemen yang terdapat di dalam sebuah array dengan mudah.

Pengulangan seperti ini dapat dilakukan dengan menggunakan pernyataan foreach. Berikut adalah
bentuk penulisan pernyataan tersebut :

foreach ( array as variabel sementara ) {


aksi
}

Dalam pengulangan ini, setiap elemen yang terdapat di dalam sebuah array akan ditempatkan ke
dalam sebuah variabel sementara. Dengan menggunakan variabel sementara, Anda akan dapat
membaca atau memanipulasi elemen-elemen dari sebuah array dengan lebih mudah.

Sebagai contoh, jika Anda ingin menampilkan semua elemen dari sebuah array Anda mungkin akan
melakukan hal berikut ini :

$buah = array('pisang', 'apel', 'jeruk', 'mangga', 'stroberi');


echo $buah[0];
echo $buah[1];
echo $buah[2];
echo $buah[3];
echo $buah[4];

Namun, cara seperti itu bukanlah cara yang baik, karena memiliki ketergantungan terhadap jumlah
elemen dari euatu array. Anda dapat memperbaikinya sebagai berikut :

$buah = array('pisang', 'apel', 'jeruk', 'mangga', 'stroberi');


for ($i = 0; $i <= len($buah); $i++) {
echo $buah[i];
}

Cukup baik, namun mungkin agak membingungkan. Cobalah menggunakan pernyataan foreach
seperti berikut ini :

$buah = array('pisang', 'apel', 'jeruk', 'mangga', 'stroberi');


foreach ($buah as $elemen_buah) {

Diklat Web Programmer 109


CEP –CCIT FTUI
Web Programming

echo $elemen_buah;
}

Dengan menggunakan pernyataan foreach seperti contoh di atas, Anda dapat membaca atau
memanipulasi semua elemen yang terdapat di dalam sebuah array dengan lebih mudah.

7.12 MENGGUNAKAN FUNGSI

Di dalam sebuah halaman web dinamis, terkadang diperlukan beberapa proses yang sama pada
beberapa halaman yang berbeda. Sebagai contoh, pada setiap halaman khusus anggota, selalu dilakukan
pengecekan apakah pengunjung yang membuka halaman tersebut memang terdaftar sebagai anggota
atau tidak. Jika ya, pengunjung tersebut akan memiliki akses terhadap halaman tersebut, selain itu,
pengunjung akan diarahkan ke halaman login.

Tentu saja, Anda dapat melakukan proses duplikasi (baca: copypaste) dari proses-proses tersebut
untuk setiap halaman yang memerlukan proses tersebut. Hanya saja, proses duplikasi ini tentunya
bukanlah metode yang paling efisien. Apabila Anda melakukan perubahan pada satu halaman, Anda
juga harus melakukan perubahan yang sama untuk halaman yang lain. Hal ini tentunya dapat
menyebabkan kesalahan yang terjadi karena adanya halaman yang belum ikut mencerminkan
perubahan pada halaman lainnya.

Untuk menanggulangi masalah ini, Anda dapat menggunakan sebuah fungsi. Fungsi adalah
serangkaian pernyataan-pernyataan PHP yang dapat digunakan untuk melakukan suatu proses. Dengan
menggunakan fungsi, Anda cukup menuliskan proses tersebut satu kali saja pada sebuah dokumen
utama yang nantinya akan dibagi-bagikan kepada halaman-halaman yang memerlukan fungsi tersebut
dengan menggunakan pernyataan include.

Selain untuk melakukan sebuah proses, Anda juga dapat menggunakan fungsi untuk menampilkan
komponen-komponen yang umum pada setiap halaman web, misalkan bagian kepala, navigasi dan kaki
(footer).

Anda dapat membuat sebuah fungsi dengan mengikuti bentuk penulisan berikut :

fuction namafungsi() {
aksi;
return;
}

Sebagai contoh, Anda dapat membuat sebuah fungsi untuk menampilkan bagian navigasi pada
halaman web seperti contoh berikut ini :

function tampilkan_navigasi() {

echo '<ul class="navigasi">';


echo '<li><a href="index.php">Halaman Utama</a></li>';
echo '<li><a href="profil.php">Profil</a></li>';
echo '<li><a href="blog.php">Blog</a></li>';
echo '<li><a href="foto.php">Koleksi Foto</a></li>';
echo '<li><a href="download.php">Download</a></li>';

Diklat Web Programmer 110


CEP –CCIT FTUI
Web Programming

echo '</ul>';

return;

Pemberian nama fungsi memiliki aturan yang mirip dengan pemberian nama variabel. Hanya saja,
nama dari fungsi tidak diawali dengan tanda dolar ($), melainkan diakhiri dengan sepasang tanda
kurung. Pernyataan return pada akhir sebuah fungsi digunakan sebagai penanda bahwa proses yang
telah dikerjakan oleh fungsi tersebut telah selesai.

Fungsi dapat diletakkan di mana saja di dalam sebuah dokumen PHP. Namun, tempat terbaik untuk
melatakkan fungsi umum yang digunakan pada beberapa halaman web sekaligus adalah pada sebuah
dokumen khusus yang berekstensi .inc. Dokumen ini pada umumnya ditempatkan di dalam sebuah
folder bernama include di dalam folder utama sebuah situs web.

Setelah Anda membuat fungsi-fungsi umum pada sebuah dokumen utama, Anda perlu memberikan
referensi terhadap dokumen tersebut pada setiap halaman web yang akan menggunakan fungsi-fungsi
yang terdapat di dalamnya. Anda dapat melakukan hal ini dengan meletakkan pernyataan seperti
contoh berikut pada bagian paling awal sebuah dokumen PHP :

include('include/fungsi_umum.inc');

Dengan ini, barulah Anda dapat memanggil fungsi tersebut melalui halaman web yang bersangkutan.
Untuk memanggil sebuah fungsi, Anda cukup menuliskan nama dari fungsi yang ingin dipanggil.
Sebagai contoh :

tampilkan_navigasi();

Diklat Web Programmer 111


CEP –CCIT FTUI
Web Programming

BAB 8 : MENGHUBUNGKAN PHP DENGAN BASIS DATA

Jika hanya digunakan secara mandiri, PHP tidak dapat menangani penyimpanan data dalam jumlah
besar dengan baik. Oleh karena itu, PHP hampir selalu digunakan bersamaan dengan sebuah sistem
basis data. Dalam hal ini, sistem basis data akan menangani segala proses yang berhubungan dengan
pengambilan dan penyimpanan data, sedangkan PHP akan berinteraksi dengan pengunjung situs web
untuk menangani segala macam logika dan alur program untuk memberikan data dan informasi yang
tepat kepada pengunjung.

Kemampuan untuk berinteraksi dan berkomunikasi dengan berbagai macam sistem basis data
adalah salah satu dari kelebihan PHP yang membuatnya sangat populer. PHP dapat berinteraksi dengan
hampir seluruh sistem basis data yang ada di dunia, namun, penggunaan sistem basis data MySQL
adalah sebuah kombinasi yang paling umum ditemukan. Hal ini dikarenakan keduanya adalah sebuah
perangkat lunak free and open source yang dapat didapatkan dengan gratis.

Dikarenakan kemampuan PHP untuk berinteraksi dengan basis data yang sangat baik, proses yang
diperlukan untuk melakukan hal tersebut pun relatif mudah. Pada dasarnya Anda cukup memerlukan
tiga buah langkah saja, yaitu :

• Membuat koneksi dengan sistem basis data,

• Melakukan proses pengambilan atau manipulasi data, dan

• Menutup koneksi dengan sistem basis data.

8.1 MEMBUAT KONEKSI

Dikarenakan proses membuat koneksi akan sangat sering digunakan oleh banyak halaman web
yang terdapat di dalam sebuah situs web, Ada baiknya jika Anda membuat sebuah fungsi khusus untuk
membuat koneksi database pada dokumen .inc Anda.

Berikut adalah contoh dari sebuah fungsi untuk melakukan koneksi dengan sistem basis data :

function buka_koneksi() {
$koneksi = mysqli_connect('localhost', 'pengguna', 'katasandi', 'namaskema');
if (!$koneksi) {
die('Tidak dapat membuat koneksi dengan sistem basis data!');
}
return $koneksi;
}

$koneksi = mysqli_connect(server, pengguna, sandi, skema);

Fungsi mysqli_connect() digunakan untuk membuat koneksi dengan sistem basis data MySQL.
Fungsi ini memerlukan empat buah masukan data, yaitu nama server basis data (biasanya localhost jika
berada pada komputer yang sama dengan aplikasi server web), nama pengguna basis data, kata sandi
pengguna basis data, dan nama skema atau basis data yang akan digunakan.

Diklat Web Programmer 112


CEP –CCIT FTUI
Web Programming

Fungsi ini akan menghasilkan sebuah referensi koneksi yang akan disimpan di dalam sebuah
variabel. Variabel ini nantinya akan digunakan untuk mengambil dan memanipulasi data serta menutup
koneksi.

if (!$koneksi) {
die('Tidak dapat membuat koneksi dengan sistem basis data!');
}

Pernyataan if ini akan memeriksa apakah koneksi berhasil dibuat atau tidak. Jika koneksi tidak
berhasil dibuat maka seluruh proses pada halaman web akan dihentikan dengan menggunakan fungsi
die(). Hal ini dilakukan untuk menjaga keamanan data dari serangan pihak yang tidak bertanggung
jawab.

return $koneksi;

Pernyataan ini berfungsi untuk mengembalikan referensi koneksi kepada halaman web yang
memanggil fungsi ini untuk selanjutnya digunakan untuk oleh halaman web tersebut.

Layaknya sebuah pintu yang harus ditutup kembali setelah dibuka, koneksi dengan sistem basis
data pun harus segera ditutup setelah selesai digunakan. Hal ini dimaksudkan untuk menjaga sumber
daya dan keamanan dari data yang terdapat di dalamnya.

Berikut adalah contoh dari sebuah fungsi yang dapat digunakan untuk menutup koneksi dengan
sistem basis data :

function tutup_koneksi($koneksi) {
mysqli_close($koneksi);
return;
}

mysqli_close($koneksi);

Koneksi dengan sebuah sistem basis data dapat dilakukan dengan memanggil fungsi mysqli_close().
Fungsi ini memerlukan sebuah masukan berupa referensi koneksi dengan sistem basis data.

Setelah membuat kedua fungsi tersebut, marilah kita mencoba untuk melakukan koneksi ke sistem
basis data pada sebuah halaman web. Buatlah sebuah dokumen PHP baru berdasarkan dengan contoh
berikut ini :

<?php
// Gunakan dokumen db.inc
include('db.inc');
// Buka koneksi, simpan referensi dalam variabel $koneksi
$koneksi = buka_koneksi();
// Jalankan perintah SQL, simpan hasil dalam variabel $hasil

Diklat Web Programmer 113


CEP –CCIT FTUI
Web Programming

$hasil = mysqli_query($koneksi, 'SELECT * FROM product');


?>

<!doctype html>
<html>
<head>
<title>Tes Koneksi Database</title>
</head>
<body>
<h1>Tes Koneksi Database</h1>
<p>
<?php
if ($hasil) { // Jika ada hasil
echo 'SUKSES!';
} else { // Jika tidak ada hasil
echo 'GAGAL!';
}
?>

</body>
</html>

<?php
// Hapus data dari hasil
mysqli_free_result($hasil);
// Jangan lupa menutup koneksi!
tutup_koneksi($koneksi);
?>

Sesuaikanlah nama dokumen inc dan perintah SQL yang digunakan dengan keperluan Anda.
Simpanlah dengan nama tes_koneksi.php lalu bukalah dengan peramban web Anda.

8.2 MENGAMBIL DATA

Proses pengambilan data dari sistem basis data ke dalam sebuah halaman web dinamis dengan PHP
tidaklah sulit. Anda cukup menggunakan perintah SQL SELECT sesuai dengan kebutuhan Anda.

Berikut adalah contoh pengambilan data dari suatu tabel dan menampilkannya ke dalam sebuah
halaman web :

<?php
include('db.inc');
$koneksi = buka_koneksi();
$sql = 'SELECT * FROM product WHERE product_category_id = 6';
$hasil = mysqli_query($koneksi, $sql);
?>

<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Daftar Barang</h1>
<table border="1">

Diklat Web Programmer 114


CEP –CCIT FTUI
Web Programming

<tr>
<td>Kode</td>
<td>Nama Barang</td>
<td>Harga Satuan</td>
<td>Aksi</td>
</tr>
<?php while ($data = mysqli_fetch_assoc($hasil)) { ?>
<tr>
<td><?php echo $data['product_id']; ?></td>
<td><?php echo $data['product_name']; ?></td>
<td><?php echo $data['product_price']; ?></td>
<td>
<a href="ubah.php?product_id=<?php echo $data['product_id']; ?>">Ubah</a>
<a href="hapus.php?product_id=<?php echo
$data['product_id']; ?>">Hapus</a>
</td>
</tr>
<?php } ?>
</table>
</body>
</html>

<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
?>

$koneksi = buka_koneksi();

Membuka koneksi dengan sistem basis data.

$sql = 'SELECT * FROM product WHERE product_category_id = 6';

Mempersiapkan perintah SQL yang akan digunakan.

$hasil = mysqli_query($koneksi, $sql);

Fungsi mysqli_query() digunakan untuk menjalankan perintah SQL terhadap sistem basis data
yang sudah terkoneksi. Hasil dari perintah ini akan disimpan di dalam variabel $hasil.

while ($data = mysqli_fetch_assoc($hasil)) { ... }

Fungsi mysqli_fetch_assoc() digunakan untuk mengambil satu baris data dari hasil perintah SQL
menjadi sebuah map, dimana nama kolom akan menjadi indeks dan data pada kolom akan menjadi nilai
elemen. Hasil dari perintah ini akan disimpan di dalam sebuah variabel bernama $data.

Penggunaan pengulangan while disini dimaksudkan untuk mengulang proses penampilan data
selagi masih ada data yang dapat ditampilkan. Jika data sudah habis maka pengulangan akan berhenti.

echo $data['product_id'];

Menampilkan data pada halaman web.

Diklat Web Programmer 115


CEP –CCIT FTUI
Web Programming

<a href="ubah.php?product_id=<?php echo $data['product_id']; ?>">Ubah</a>


<a href="hapus.php?product_id=<?php echo $data['product_id']; ?>">Hapus</a>

Kedua tautan ini digunakan untuk menuju ke halaman dinamis yang dapat digunakan untuk
mengubah atau menghapus data produk.

mysqli_free_result($hasil);

Fungsi mysqli_free_result() digunakan untuk menghapus penyimpanan hasil sementara di dalam


memori. Hal ini diperlukan untuk menghemat penggunaan memori pada server.

tutup_koneksi($koneksi);

Menutup koneksi dengan sistem basis data.

Sebagai sebuah halaman web dinamis, tentunya Anda juga dapat menggunakan masukan dari
pengguna sebagai parameter tambahan untuk mengambil data. Berikut adalah contoh untuk mencari
data berdasarkan kata kunci yang diberikan oleh pengguna melalui formulir :

<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Pencarian Barang</h1>
<form action="proses_cari.php" method="post">
<p>
Masukkan Kata Kunci Pencarian : <br />
<input name="kata_kunci" type="text" size="50" maxlength="100" />

<p><input type="submit" value="Cari" />


</form>
</body>
</html>

Formulir tersebut akan diproses oleh dokumen PHP berikut ini :

<?php
include('umum.inc');
$koneksi = buka_koneksi();
$kata_kunci = mysqli_real_escape_string($koneksi, $_POST['kata_kunci']);
$sql = 'SELECT * FROM product WHERE product_name LIKE "%' . $kata_kunci . '%"';
$hasil = mysqli_query($koneksi, $sql);
?>

<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Hasil Pencarian</h1>

Diklat Web Programmer 116


CEP –CCIT FTUI
Web Programming

<?php if (mysqli_num_rows($hasil) == 0) { ?>


<h2>Maaf, tidak ada hasil yang ditemukan</h2>
<?php } else { ?>
<p>Ditemukan <?php echo mysqli_num_rows($hasil); ?> hasil :
<table border="1">
<tr>
<td>Kode</td>
<td>Nama Barang</td>
<td>Harga Satuan</td>
<td>Aksi</td>
</tr>
<?php while ($data = mysqli_fetch_assoc($hasil)) { ?>
<tr>
<td><?php echo $data['product_id']; ?></td>
<td><?php echo $data['product_name']; ?></td>
<td><?php echo $data['product_price']; ?></td>
<td>
<a href="ubah.php?product_id=<?php echo
$data['product_id']; ?>">Ubah</a>
<a href="hapus.php?product_id=<?php echo
$data['product_id']; ?>">Hapus</a>
</td>
</tr>
<?php } ?>
</table>
<?php } ?>
</body>
</html>

<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
?>

$kata_kunci = mysqli_real_escape_string($koneksi, $_POST['kata_kunci']);

Perlu diperhatikan bahwa fungsi mysqli_real_escape_string() adalah sebuah fungsi yang sangat
penting digunakan untuk “membersihkan” data yang dimasukkan oleh seorang pengunjung dari potensi
serangan SQL Injection yang sangat berbahaya. Untuk setiap perintah SQL yang akan menggunakan
masukkan dari pengguna, pastikan Anda menggunakan cara seperti ini untuk mengambil datanya dari
formulir.

Tentu saja, Anda juga dapat menggunakan variabel $_GET untuk memasukkan data dari querystring
ke dalam perintah SQL.

$sql = 'SELECT * FROM product WHERE product_name LIKE "%' . $kata_kunci . '%"';

Perintah SQL ini menambahkan masukkan dari pengguna sebagai keterangan tambahan untuk
pencarian. Sekali lagi, pastikan bahwa masukkan tersebut sudah diamankan.

mysqli_num_rows($hasil);

Fungsi mysqli_num_rows() berfungsi untuk menghitung jumlah hasil yang didapatkan.

Diklat Web Programmer 117


CEP –CCIT FTUI
Web Programming

8.3 MEMASUKKAN DATA

Memasukkan data ke dalam sistem basis data dengan menggunakan PHP tidaklah jauh berbeda,
Anda cukup mengirimkan data-data yang diperlukan kepada dokumen PHP yang akan memproses data
tersebut dengan menggunakan formulir ataupun querystring. Hanya saja, pastikan data yang
dimasukkan oleh pengunjung tersebut sudah baik dan benar.

Perhatikanlah contoh formulir untuk memasukkan data berikut ini :

<?php
include('umum.inc');
$koneksi = buka_koneksi();
$sql = 'SELECT * FROM category';
$hasil = mysqli_query($koneksi, $sql);
?>

<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Penambahan Data Barang</h1>
<form action="proses_tambah.php" method="post">
<p>
Nama Barang : <br />
<input name="product_name" type="text" size="50" maxlength="100" />

<p>
Kategori : <br />
<select name="product_category_id">
<?php while ($data = mysqli_fetch_assoc($hasil)) { ?>
<option value="<?php echo $data["category_id"]; ?>">
<?php echo $data["category_name"]; ?>
</option>
<?php } ?>
</select>

<p>
Harga Satuan: <br />
<input name="product_price" type="text" size="50" maxlength="100" />

<p>
Keterangan : <br />
<textarea name="product_description"></textarea>

<p><input type="submit" value="Simpan" />


</form>
</body>
</html>

<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);

Diklat Web Programmer 118


CEP –CCIT FTUI
Web Programming

?>

Formulir contoh di atas melakukan koneksi ke sistem basis data untuk mengambil data-data
kategori produk yang ada untuk dijadikan pilihan di dalam formulir. Formulir tersebut kemudian akan
diproses oleh dokumen PHP berikut ini :

<?php
include('umum.inc');
$koneksi = buka_koneksi();

// Ambil data dari formulit


$product_name= mysqli_real_escape_string($koneksi, $_POST['product_name']);
$product_category_id = mysqli_real_escape_string($koneksi,
$_POST['product_category_id']);
$product_price = mysqli_real_escape_string($koneksi, $_POST['product_price']);
$product_description = mysqli_real_escape_string($koneksi,
$_POST['product_description']);

// Array untuk menyimpan daftar kesalahan


$error = array();

// Periksa kebenaran data nama produk


if (empty($product_name)) {
$error[] = 'Nama produk harus diisi!';
}

// Periksa kebenaran data kategori produk


$sql = 'SELECT * FROM category WHERE category_id = ' . $product_category_id;
$hasil = mysqli_query($koneksi, $sql);
if (mysqli_num_rows($hasil) == 0) {
$error[] = 'Kategori produk salah!';
}

// Periksa kebenaran data harga produk


if ($product_price <= 0) {
$error[] = 'Harga produk tidak boleh 0 atau negatif!';
}

// Jika tidak ada kesalahan, masukkan data


if (sizeof($error) == 0) {
$sql = 'INSERT INTO product VALUES (NULL, "' . $product_category_id . '", "' .
$product_name . '", "' . $product_description . '", "' . $product_price . '")';
mysqli_query($koneksi, $sql);
}
?>

<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<?php if (sizeof($error) == 0) { ?>
<h1>Produk baru telah berhasil ditambahkan!</h1>
<?php } else { ?>
<h1>Tidak dapat menambah data produk!</h1>
<ul>
<?php foreach ($error as $e) { ?>

Diklat Web Programmer 119


CEP –CCIT FTUI
Web Programming

<li><?php echo $e; ?></li>


<?php } ?>
</ul>
<?php } ?>
</body>
</html>

<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
?>

Hal yang paling penting dalam memasukkan data adalah memastikan semua data yang dimasukkan
oleh pengguna sudah benar. Kesalahan pada pemasukan data yang tidak ditanggulangi dapat
menyebabkan rusaknya data pada basis data Anda.

$sql = 'INSERT INTO product VALUES (NULL, "' . $product_category_id . '", "' .
$product_name . '", "' . $product_description . '", "' . $product_price . '")';

Memasukkan data ke dalam basis data menggunakan PHP cukup dengan membuat sebuah perintah
SQL INSERT.

mysqli_query($koneksi, $sql);

Untuk memasukkan data, tidak ada hasil yang dikembalikan sehingga tidak memerlukan sebuah
variabel untuk menampung hasil.

8.4 MENGUBAH DATA

Pada prinsipnya, sebuah dokumen yang digunakan untuk melakukan pengubahan data sangatlah
mirip dengan dokumen yang digunakan untuk memasukkan data. Perbedaannya hanya terletak pada
perintah SQL yang digunakan dan halaman formulirnya dimana pada formulir tersebut akan
ditampilkan data yang sebelumnya.

Berikut adalah contoh dari halaman formulir tersebut :

<?php
include('umum.inc');

// Hanya lakukan koneksi jika ada querystring


if (!empty($_GET['product_id'])) {

$koneksi = buka_koneksi();

// Ambil pilihan produk yang akan diubah dari querystring


$product_id = mysqli_real_escape_string($koneksi, $_GET['product_id']);

// Ambil data produk tersebut

Diklat Web Programmer 120


CEP –CCIT FTUI
Web Programming

$sql_product = 'SELECT * FROM product WHERE product_id = ' . $product_id;


$hasil_product = mysqli_query($koneksi, $sql_product);

// Ambil data kategori


$sql_category = 'SELECT * FROM category';
$hasil_category = mysqli_query($koneksi, $sql_category);

?>

<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Pengubahan Data Barang</h1>
<?php if ((empty($_GET['product_id'])) || mysqli_num_rows($hasil_product) == 0)
{ ?>
<p>Tidak ada barang yang dipilih!
<?php } else {
$data_product = mysqli_fetch_assoc($hasil_product);
?>
<form action="proses_ubah.php" method="post">
<input type="hidden" name="product_id" value="<?php echo
$data_product['product_id']; ?>"; ?>
<p>
Nama Barang : <br />
<input name="product_name" type="text" size="50" maxlength="100"
value="<?php echo $data_product['product_name']; ?>" />

<p>
Kategori : <br />
<select name="product_category_id">
<?php while ($data_category = mysqli_fetch_assoc($hasil_category)) { ?>
<option value="<?php echo $data_category["category_id"]; ?>" <?php if
($data_category["category_id"] == $data_product["product_category_id"]) { echo
'selected="selected"'; } ?>>
<?php echo $data_category["category_name"]; ?>
</option>
<?php } ?>
</select>

<p>
Harga Satuan: <br />
<input name="product_price" type="text" size="50" maxlength="100"
value="<?php echo $data_product['product_price']; ?>" />

<p>
Keterangan : <br />
<textarea name="product_description"><?php echo
$data_product['product_description']; ?></textarea>

<p><input type="submit" value="Ubah" />


</form>
<?php } ?>
</body>
</html>

Diklat Web Programmer 121


CEP –CCIT FTUI
Web Programming

<?php
mysqli_free_result($hasil_product);
mysqli_free_result($hasil_category);
tutup_koneksi($koneksi);
?>

<input type="hidden" name="product_id" value="<?php echo


$data_product['product_id']; ?>"; ?>

Elemen input dengan type hidden pada formulir tersebut akan digunakan sebagai referensi produk
yang akan diubat untuk dokumen pemroses.

Formulir tersebut akan diproses oleh sebuah dokumen PHP seperti berikut :

<?php
include('umum.inc');
$koneksi = buka_koneksi();

// Ambil data dari formulir


$product_id= mysqli_real_escape_string($koneksi, $_POST['product_id']);
$product_name= mysqli_real_escape_string($koneksi, $_POST['product_name']);
$product_category_id = mysqli_real_escape_string($koneksi,
$_POST['product_category_id']);
$product_price = mysqli_real_escape_string($koneksi, $_POST['product_price']);
$product_description = mysqli_real_escape_string($koneksi,
$_POST['product_description']);

// Array untuk menyimpan daftar kesalahan


$error = array();

// Periksa kebenaran data kode produk


if (empty($product_id)) {
$error[] = 'Nama produk harus diisi!';
}

// Periksa kebenaran data nama produk


if (empty($product_name)) {
$error[] = 'Nama produk harus diisi!';
}

// Periksa kebenaran data kategori produk


$sql = 'SELECT * FROM category WHERE category_id = ' . $product_category_id;
$hasil = mysqli_query($koneksi, $sql);
if (mysqli_num_rows($hasil) == 0) {
$error[] = 'Kategori produk salah!';
}

// Periksa kebenaran data harga produk


if ($product_price <= 0) {
$error[] = 'Harga produk tidak boleh 0 atau negatif!';
}

Diklat Web Programmer 122


CEP –CCIT FTUI
Web Programming

// Jika tidak ada kesalahan, ubah data


if (sizeof($error) == 0) {
$sql = 'UPDATE product SET product_category_id = "' . $product_category_id . '",
product_name = "' . $product_name . '", product_description = "' . $product_description .
'", product_price = "' . $product_price . '" WHERE product_id = "' . $product_id . '"';
mysqli_query($koneksi, $sql);
}
?>

<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<?php if (sizeof($error) == 0) { ?>
<h1>Produk telah berhasil diubah!</h1>
<?php } else { ?>
<h1>Tidak dapat mengubah data produk!</h1>
<ul>
<?php foreach ($error as $e) { ?>
<li><?php echo $e; ?></li>
<?php } ?>
</ul>
<?php } ?>
</body>
</html>

<?php
tutup_koneksi($koneksi);
?>

mysqli_query($koneksi, $sql);

Untuk mengubah data, tidak ada hasil yang akan didapatkan dari perintah SQL, oleh karena itu,
Anda tidak memerlukan variabel untuk menyimpan hasil tersebut.

8.5 MENGHAPUS DATA

Jika dibandingkan dengan proses-proses sebelumnya, proses penghapusan data pada sebuah sistem
basis data dengan menggunakan PHP relatif lebih mudah. Hal ini dikarenakan Anda tidak memerlukan
sebuah halaman formulir untuk melakukannya. Melainkan, Anda hanya memerlukan sebuah dokumen
untuk memproses penghapusan tersebut.

Berikut adalah contoh dari dokumen tersebut :

<?php
include('umum.inc');

// Hanya lakukan koneksi jika ada querystring


if (!empty($_GET['product_id'])) {

Diklat Web Programmer 123


CEP –CCIT FTUI
Web Programming

$koneksi = buka_koneksi();

// Ambil pilihan produk yang akan diubah dari querystring


$product_id = mysqli_real_escape_string($koneksi, $_GET['product_id']);

// Hapus data
$sql = 'DELETE FROM product WHERE product_id = ' . $product_id;
mysqli_query($koneksi, $sql);

?>

<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<?php if (empty($_GET['product_id']) { ?>
<p>Tidak ada barang yang dipilih!
<?php } else { ?>
<h1>Data produk telah dihapus!</h1>
<?php } ?>
</body>
</html>

<?php
tutup_koneksi($koneksi);
?>

Diklat Web Programmer 124


CEP –CCIT FTUI
Web Programming

BAB 9 : LEBIH LANJUT DENGAN PHP

Diklat Web Programmer 125


CEP –CCIT FTUI
Web Programming

9.1 MENGGUNAKAN SESSION

Session dapat dikatakan sebagai waktu kunjungan dari seorang pengunjung situs web. Session
dimulai sejak seorang pengunjung tiba di situs Anda hingga ia pergi. Di dalam sebuah session, ada
kalanya Anda ingin menyimpan beberapa informasi tentang pengunjung tersebut, misalkan identitas
dan tingkatan hak akses dari pengunjung tersebut.

Dengan menggunakan session, Anda dapat menyimpan informasi-informasi tersebut di


dalamsebuah variabel khusus yang bernama $_SESSION. Variabel ini bersifat unik bagi setiap
pengunjung, seorang pengunjung akan memiliki nilai dari variabel session yang berbeda-beda dengan
pengunjung lainnya. Untuk melakukan ini, PHP akan memberikan sebuah kode identifikasi unik kepada
setiap pengunjung yang dikenal dengan istilah PHPSESSID. Tidak akan ada pengunjung yang memiliki
nilai PHPSESSID yang sama.

Sifat dari variabel session yang unik seperti ini menjadikannya sangat ideal untuk digunakan untuk
menyimpan informasi login dan hak akses dari suatu pengunjung. Dengan menyimpan data tertentu
yang menandakan seorang pengunjung telah melakukan login, Anda dapat menyesuaikan tampilan dari
halaman web Anda dan membedakan dengan pengunjung lainnya yang belum melakukan login.

Sebelum Anda dapat menggunakan session, Anda harus memberikan sebuah perintah kepada PHP
yang berfungsi untuk mengaktifkan fitur session. Dikarenakan Anda harus mengaktifkan fitur session
untuk semua halaman yang Ada, ada baiknya Anda meletakkan perintah ini di bagian awal dokumen inc
Anda. Berikut adalah perintah yang digunakan :

session_start();

Setelah Anda mengaktifkan fitur session, barulah Anda dapat menggunakan session pada halaman
web Anda. Menggunakan session sangatlah sederhana, Anda dapat menyimpan dan mengambil data
dari variabel session selayaknya Anda menggunakan sebuah map. Variabel session sendiri dapat
diakses dari seluruh halaman web yang Anda miliki dan akan menyimpan nilai yang sama untuk
masing-masing pengguna.

Berikut adalah contoh penggunaan session :

// Tambahkan elemen dengan indeks 'nama_pengguna' pada session


$_SESSION['nama_pengguna'] = 'Joko';

// Menampilkan nilai yang sudah disimpan pada session


echo $_SESSION['nama_pengguna'];

Setelah sebuah session selesai, Anda dapat menghapus semua data yang terdapat pada variabel
session sekaligus membuat nilai dari PHPSESSID yang sudah diberikan kepada pengunjung tersebut
tidak berlaku lagi. Berikut adalah perintah yang digunakan untuk melakukan hal tersebut :

session_destroy();

Diklat Web Programmer 126


CEP –CCIT FTUI
Web Programming

Agar lebih dapat memahami penggunaan session marilah mencoba menerapkannya pada sebuah
halaman web. Pertama-tama buatlah sebuah formulir sederhana seperti berikut ini :

<?php session_start(); ?>

<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<form action="home.php" method="post">
<p>
Masukkan Nama Anda : <br />
<input name="nama" type="text" size="50" maxlength="100" />

<p><input type="submit" value="Login" />


</form>
</body>
</html>

Simpanlah dengan nama login.php. Lalu buatlah halaman lain bernama home.php seperti berikut
ini :

<?php
session_start();
// Simpan nama dalam session
if (empty($_SESSION['nama'])) {
$_SESSION['nama'] = $_POST['nama'];
}
?>

<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<h1>Halo, <?php echo $_SESSION['nama']; ?>!</h1>
<a href="logout.php">Logout</a>
</body>
</html>

Buatlah satu halaman lain untuk melakukan logout dengan nama logout.php seperti berikut :

<?php
session_start();
// Hapus sesi
session_destroy();
?>

<!doctype html>
<html>
<head>
<title>Situs Saya</title>

Diklat Web Programmer 127


CEP –CCIT FTUI
Web Programming

</head>
<body>
<h1>Selamat jalan!</h1>
</body>
</html>

Jika sudah, bukalah halaman login.php, masukkanlah nama Anda dan kirimkan data formulir.
Cobalah menutup peramban web Anda lalu membuka kembali halaman home.php. Masih dapatkan
Anda melihat nama Anda? Sekarang cobalah melakukan logout dan membuka kembali halaman
home.php. Bagaimana hasilnya?

Jika Anda sudah dapat memahami dasar dari penggunaan session, marilah mencoba untuk
membuat halaman untuk login dan logout yang “sebenarnya”. Secara konsep, pembuatan halaman-
halaman tersebut tidaklah jauh berbeda dengan contoh yang sudah Anda kerjakan. Hanya saja,
diperlukan tambahan koneksi ke sistem basis data untuk mendapatkan kombinasi nama pengguna dan
kata sandi yang tepat.

Berikut adalah sebuah contoh dari halaman untuk melakukan login :

<?php include('umum.inc'); ?>

<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<form action="proses_login.php" method="post">
<p>
Masukkan Nama Pengguna : <br />
<input name="nama_pengguna" type="text" size="50" maxlength="100" />

<p>
Masukkan Kata Sandi : <br />
<input name="kata_sandi" type="password" size="50" maxlength="100" />

<p><input type="submit" value="Login" />


</form>
</body>
</html>

Data dari formulir login yang tedapat pada halaman tersebut akan diproses sebagai berikut :

<?php
include('umum.inc');
$koneksi = buka_koneksi();

// Ambil data dari formulir


$nama_pengguna = mysqli_real_escape_string($koneksi, $_POST['nama_pengguna']);
$kata_sandi = mysqli_real_escape_string($koneksi, $_POST['kata_sandi']);

// Ambil data dari basis data

Diklat Web Programmer 128


CEP –CCIT FTUI
Web Programming

$sql = 'SELECT * FROM pengguna WHERE nama_pengguna = "' . $nama_pengguna . '" AND
kata_sandi = "' . $kata_sandi '"';
$hasil = mysqli_query($koneksi, $sql);

// Periksa apakah ada pengguna dengan kombinasi nama dan sandi yang benar
if (mysqli_num_rows($hasil) == 1) {
// Simpan identitas pengguna dalam session
$_SESSION['nama_pengguna'] = $nama_pengguna;
}

?>

<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<?php if (!empty($_SESSION['nama_pengguna'])) { ?>
<h1>Halo, <?php echo $_SESSION['nama']; ?>!</h1>
<a href="home.php">Lanjutkan ke halaman utama</a>
<?php } else { ?>
<h1>Login gagal!</h1>
<?php } ?>
</body>
</html>

<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
?>

Berikut adalah sebuah contoh halaman yang memeriksa apakah seorang pengguna sudah
melakukan login atau belum :

<?php
include('umum.inc');

// Periksa pengguna
if (empty($_SESSION['nama_pengguna'])) {
// Jika belum login, arahkan ke halaman login
header("Location: login.php");
}
?>

<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<h1>Selamat Datang di Member Area!</h1>
</body>
</html>

Diklat Web Programmer 129


CEP –CCIT FTUI
Web Programming

Dapat dilihat bahawa proses untuk memeriksa apakah seorang pengguna sudah melakukan login
atau belum sangatlah sederhana, yaitu cukup dengan memeriksa apakah sudah ada variabel sesi yang
tepat atau tidak.

header("Location: login.php");

Fungsi header() dapat digunakan untuk mengarahkan peramban web secara otomatis ke halaman
lain.

Sedangkan untuk melakukan logout prosesnya sama seperti contoh yang sudah diberikan
sebelumnya, yaitu cukup dengan memanggil fungsi session_destroy().

9.2 MENERIMA UPLOAD BERKAS

Kadangkala, sebuah halaman web dinamis akan membutuhkan sebuah berkas dari pengguna.
Sebagai contoh, pada halaman profil seorang pengguna, ia dapat mengupload berkas fotonya sendiri
untuk dipasang pada halaman tersebut. Dengan menggunakan PHP, sebuah halaman web dapat
menerima berkas yang diupload oleh seorang pengguna dan menyimpannya di dalam server web.

Untuk menerima berkas dari pengguna, Anda akan memerlukan sebuah formulir khusus seperti
pada contoh berikut ini :

<form enctype="multipart/form-data" action="proses_berkas.php" method="post">


<input type="file" name="berkas" />
<input type="submit" value="Upload" />
</form>

Dapat dilihat bahwa ada atribut tambahan enctype dengan nilai multipart/form-data pada
elemen formulir diatas. Atribut ini berfungsi untuk menandakan bahwa formulir ini akan mengirimkan
berkas untuk selanjutnya diproses oleh server web. Berkas tersebut sendiri dapat dimasukkan oleh
pengguna dengan menggunakan elemen input dengan atribut type yang memiliki nilai file.

Berbeda dengan data pada formulir biasa yang dapat Anda akses melalui variabel $_POST, untuk
merngakses berkas yang telah diupload oleh pengguna Anda akan menggunakan variabel $_FILES.
Dengan menggunakan variabel ini, Anda dapat mendapatkan informas-informasi mengenai berkas yang
telah diupload tersebut, seperti nama berkas, jenis berkas, lokasi penyimpanan sementara berkas, dan
ukuran berkas seperti berikut ini :

$_FILES['berkas']['name']; // mendapatkan nama berkas


$_FILES['berkas']['tipe']; // mendapatkan tipe berkas
$_FILES['berkas']['tmp_name']; // mendapatkan sementara penyimpanan berkas
$_FILES['berkas']['size']; // mendapatkan ukuran berkas

Diklat Web Programmer 130


CEP –CCIT FTUI
Web Programming

Perlu diketahui bahwa berkas yang diupload oleh pengguna akan segera dihapus apabila pengguna
berpindah halaman. Hal ini disebabkan karena untuk setiap berkas yang diupload pengguna, PHP hanya
menyimpannya secara sementara saja. Jika Anda ingin menyimpan berkas tersebut secara permanen,
Anda harus memindahkan lokasi berkas tersebut dari lokasi penyimpanan sementara ke lokasi yang
Anda inginkan. Untuk melakukan hal seperti ini, Anda dapat menggunakan fungsi seperti pada contoh
berikut ini :

move_uploaded_file($_FILES['berkas']['tmp_name'], 'c:\xampp\htdocs\situssaya\berkas');

Dalam membuat sebuah halaman yang dapat menerima berkas yang diupload dari pengguna, Anda
harus ekstra hati-hati. Tentunya Anda tidak ingin pengguna Anda mengupload berkas yang berbahaya
seperti virus ke dalam server web Anda. Untuk itu, Anda dapat membatasi jenis berkas yang dapat
diupload oleh pengguna dengan menggunakan fungsi ereg() seperti pada contoh berikut ini :

// Periksa apakah berkas tersebut adalah sebuah gambar


if (ereg('image', $_FILES['berkas']['type'] {
// Jika ya, simpan berkas
$nama_berkas = 'foto_' . $_SESSION['nama_pengguna'];
move_uploaded_file($_FILES['berkas']['tmp_name'],
'c:\xampp\htdocs\situssaya\foto\' . $nama_berkas);
} else {
echo 'Maaf, kami hanya menerima gambar saja!';
}

9.3 MENGIRIM E-MAIL

Dengan menggunakan PHP, Anda dapat mengirimkan e-mail dari halaman web Anda dengan mudah.
Hanya saja, perlu diperhatikan bahwa tidak semua layanan hosting yang Anda mendukung penggunaan
fungsi ini. Konsultasikanlah terlebih dahulu dengan layanan hosting Anda apakah Anda dapat mengirim
e-mail dengan PHP atau tidak.

Berikut adalah contoh perintah yang dapat digunakan untuk mengirim sebuah e-mail :

// Menyiapkan isi pesan


$tujuan = 'agus.perwira@eng.ui.ac.id';
$judul = 'Hanya mencoba';
$pesan = 'Bagaimana, e-mail ini sampai atau tidak?';
// Mengirim e-mail
mail($tujuan, $judul, $pesan);

Diklat Web Programmer 131


CEP –CCIT FTUI
Web Programming

BAB 10 : MENDEPLOY SITUS WEB

Diklat Web Programmer 132


CEP –CCIT FTUI
Web Programming

Setelah Anda membuat sebuah situs web, tentunya Anda ingin meletakkan situs web Anda di
Internet agar dapat dibuka oleh banyak orang. Untuk ini, Anda harus mendeploy atau memasang situs
web Anda kepada sebuah server web yang terhubung dengan Internet.

Tentu saja, Anda dapat membuat server web Anda sendiri, namun untuk sebuah situs web pribadi
biasanya ini bukanlah pilihan yang tepat karena Anda harus menyediakan sebuah komputer untuk
menjadi server dan tentunya sebuah koneksi internet selama 24 jam terus-menerus. Untuk itu, Anda
dapat menggunakan jasa dari sebuah perusahaan yang menyediakan layanan hosting atau yang juga
dikenal dengan istilah web hosting company.

Ada sangat banyak perusahaan seperti ini baik yang bertaraf lokal maupun internasional. Tarif yang
ditawarkan pun sangat beragam, mulai dari gratis hingga puluhan juta rupiah per bulannya. Hosting
yang gratis tentunya akan sangat menggiurkan, namun pada umumnya fitur yang disediakan sangat
minim dan perusahaan tersebut akan menyelipkan iklan mereka secara paksa pada halaman web Anda.

Dalam modul ini, penulis memilih layanan hosting gratis dari Byethost. Walaupun gratis, fitur yang
disediakannya sudah sangat lumayan, yaitu kapasitas penyimpanan data sebanyak 5500 MB, koneksi
untuk transfer data sebanyak 200 GB per bulan, dukungan untuk PHP dan MySQL dengan maksimum 5
skema, dan yang paling menarik, bebas iklan. Layanan hosting ini dapat Anda akses melalui situs
http://www.byethost.com/.

Selain layanan web hosting, Anda juga akan memerlukan sebuah domain. Domain adalah sebuah
alamat internet yang dapat Anda gunakan untuk situs web Anda. Untuk domain yang
berakhiran .com, .net, .co.id, dan sebagainya, Anda harus membayar biaya sewa domain pertahunnya.
Namun, Jika Anda menggunakan layanan web hosting gratis, Anda akan mendapatkan sebuah domain
yang gratis pula. Hanya saja, nama domain ini agak lebih panjang dan tidak akan sebagus domain yang
berbayar.

10.1 MEMBUAT AKUN

Langkah pertama untuk menjadikan situs Anda “live” di Internet adalah dengan membuat akun pada
layanan hosting Anda, dalam hal ini http://www.byethost.com/. Prosesnya sendiri cukup sederhana
dan cepat. Namun, Anda diharuskan untuk mempunyai sebuah alamat e-mail aktif terlebih dahulu.

Berikut adalah proses pembuatan akun pada http://www.byethost.com/:

Diklat Web Programmer 133


CEP –CCIT FTUI
Web Programming

1. Melalui halaman utama situs


byethost, tekan tombol Sign up here

2. Masukkan data-data pada formulir


dengan benar, lalu tekan tombol
Register

3. Tekan tombol Click Me to Continu

Diklat Web Programmer 134


Web Programming

4. Masukkan kode keamanan yang


ditampilkan lalu tekan tombol
Register untuk melanjutkan.

5. Akan ada pesan yang


memberitahukan bahwa e-mail
untuk mengkonfirmasi proses
pendaftaran Anda telah dikirimkan
kepada Anda.

6. Periksalah e-mail Anda untuk


mendapatkan e-mail konfirmasi
tersebut, lalu buka link konfirmasi
yang terdapat di dalamnya.

Diklat Web Programmer 135


Web Programming

7. Masukkan kode keamanan yang


ditampilkan lalu tekan tombol
Register untuk melanjutkan.

8. Akan muncul informasi penting


mengenai akun Anda. Ingatlah
informasi yang ada di dalam
halaman ini dengan baik lalu tekan
link Click here to log into your
VistaPanel untuk melanjutkan.

9. Masukkan username dan password


Anda berdasarkan informasi yang
terdapat pada halaman sebelumnya
lalu tekan Login untuk melanjutkan.

Diklat Web Programmer 136


Web Programming

10. Selamat! Dengan ini Anda telah


berhasil membuat akun pada
layanan hosting Byethost.
11. Untuk sementara, lakukan proses
Logout terlebih dahulu.

10.2 MENDEPLOY BASIS DATA

Setelah Anda telah berhasil membuat akun pada penyedia layanan hosting, Langkah selanjutnya
adalah untuk mendeploy atau memasang basis data yang akan digunakan pada situs web Anda. Berikut
adalah proses untuk melakukan hal tersebut :

1. Bukalah aplikasi phpMyAdmin Anda.


2. Pilih skema basis data yang ingin
Anda deploy, lalu tekan tombol
Ekspor.

Diklat Web Programmer 137


Web Programming

3. Ceklik pilihan kirimkan ke lalu


tekan tombol Go untuk melanjutkan.

4. Simpanlah berkas sql dari skema


basis data Anda. Berkas ini nantinya
akan digunakan untuk memindahkan
skema Anda ke penyedia layanan
hosting.

5. Bukalah control panel penyedia


layanan hosting Anda (dalam hal ini
byethost), lalu pilih MySQL
Database.

Diklat Web Programmer 138


Web Programming

6. Masukkan nama skema basis data


yang ingin Anda buat lalu tekan
tombol Create Database untuk
melanjutkan.

7. Akan muncul pesan konfirmasi


bahwa skema basis data Anda telah
berhasil dibuat. Ingatlah baik-baik
nama dari skema tersebut.

8. Kembalilah ke halaman awal control


panel dan pada kali ini, pilihlah
phpMyAdmin.

Diklat Web Programmer 139


Web Programming

9. Tekan link Connect Now untuk


melanjutkan

10. Anda akan dibawa menuju aplikasi


phpMyAdmin yang terdapat pada
penyedia layanan internet Anda,
tekan tombol Import untuk
melanjutkan.

11. Pilih berkas sql yang sudah Anda


buat sebelumnya lalu tekan tombol
Go untuk mentransfer data.

Diklat Web Programmer 140


Web Programming

12. Akan ada pesan konfirmasi bahwa


data Anda sudah berhasil ditransfer.

13. Untuk memastikannya, tekan tombol


Stuktur dan periksalah apakah data
yang telah ditransfer sudah benar
atau belum.

Setelah Anda telah berhasil mentransfer basis data Anda, Anda perlu menyesuaikan pengaturan
agar halaman-halaman web Anda dapat melakukan koneksi terhadap basis data Anda pada layanan
hosting Anda. Untuk melakukan hal ini, suntinglah dokumen inc Anda dan ubahlah informasi pada
fungsi koneksi basis data Anda sesuai dengan informasi yang disediakan oleh layanan hosting Anda,
sebagai contoh :

function buka_koneksi() {
$koneksi = mysqli_connect('sql108.byethost31.com', 'b31_189754', 'rahasiadong',
'b31_189754_tokosaya');
if (!$koneksi) {
die('Tidak dapat membuat koneksi dengan sistem basis data!');
}
return $koneksi;
}

10.3 MENDEPLOY SITUS WEB

Diklat Web Programmer 141


Web Programming

Langkah selanjutnya adalah mengupload dokumen-dokumen HTML, CSS dan PHP Anda ke penyedia
layanan hosting Anda. Anda dapat melakukan hal ini dengan melakukan langkah-langkah berikut ini :

1. Pertama-tama persiapkan dokumen-


dokumen Anda dengan
mengkompresinya menjadi sebuah
file ZIP dengan menggunakan
aplikasi kompresei berkas seperti
WINRAR.

2. Buka control panel Anda, pilih


Online File Manager.

3. Anda akan dibawa ke aplikasi yang


dapat digunakan untuk
memanejemen berkas-berkas yang
tedapat pada situs web Anda. Pilih
folder htdocs untuk melanjutkan.
Folder ini memiliko fungsi yang
sama dengan folder htdocs pada
XAMPP Anda.

Diklat Web Programmer 142


Web Programming

4. Dapat Anda lihat bahwa ada


beberapa berkas yang sudah
tersedia. Tentunya Anda perlu untuk
menghapus berkas-berkas tersebut
terlebih dahulu.

5. Untuk melakuan itu, Anda dapat


menceklis berkas index.htm lalu
tekan tombol Delete.

6. Tekan tombol ceklis untuk


melakukan konfirmasi penghapusan
berkas.

Diklat Web Programmer 143


Web Programming

7. Akan muncul pesan bahwa proses


penghapusan berkas telah berhasil,
tekan tombol tanda panah kiri
untuk kembali ke folder.

8. Tekan tombol upload.

9. Pilih berkas ZIP Anda lalu tekan


tombol ceklis untuk memulai proses
upload.

Diklat Web Programmer 144


Web Programming

10. Akan muncul pesan konfirmasi


bahwa berkas-berkas Anda telah
berhasil diupload. Tekan tombol
tanda panah kiri untuk kembali ke
folder.

11. Pastikan bahwa semua berkas-


berkas Anda telah terupload dengan
baik.

12. Cobalah membuka situs web Anda


dengan mengetikan alamat sesuai
nama domain yang telah diberikan
untuk Anda. Jika semua berjalan
dengan baik, maka Anda telah
memiliki sebuah situs web di
Internet. Selamat!

Diklat Web Programmer 145

Anda mungkin juga menyukai