HALAMAN PENGESAHAN

Judul Buku Ajar

Mata Kuliah
Kode Mata Kuliah
Nama Penulis
NIP

:
:
:
:
:

Pemrograman Internet
Pemrograman Internet
TE055218
I Made Arsa Suyadnya, ST., M.Eng.
198512152012121001

Menyetujui:
Ketua Jurusan
Teknik Elektro dan Komputer
Fakultas Teknik Unud

Ir. Nyoman Setiawan, MT.

NIP. 196312291991031001

ii

PRAKATA

KONTRAK PERKULIAHAN

Puji syukur penulis panjatkan ke hadapan Tuhan Yang Maha Esa,

karena atas rahmat dan restu-Nya penulis dapat menyelesaikan buku ajar
Pemrograman Internet ini. Belum adanya buku ajar sebagai acuan untuk
mata kuliah Pemrograman Internet mendorong penulis untuk menyelesaikan
buku ini.
Pemrograman Internet merupakan salah satu mata kuliah dalam
kurikulum Jurusan Teknik Elektro dan Komputer Universitas Udayana.
Mata kuliah ini bertujuan agar mahasiswa mampu memahami konsep dasar
internet dan mampu menerapkan konsep pemrograman web dalam
mengembangkan perangkat lunak berbasis web. Sesuai dengan tujuan
tersebut, buku ajar ini tersusun atas beberapa bagian yakni dimulai dari
pengenalan internet dan teknlogi web, kemudian pada bagian berikutnya
dibahas mengenai HTML (Hypertext Markup Language), CSS (Cascading
Style Sheet), dasar pemrograman PHP, basis data dalam pemrograman web
dengan MySQL, JavaScript, web CMS (Content Management System), web
framework dengan CodeIgniter dan web services.
Buku ajar ini ditujukan kepada khalayak yang ingin memahami
mengenai konsep pemrograman web dan pengembangan perangkat lunak
berbasis web, terutama bagi mahasiswa Jurusan Teknik Elektro dan
Komputer Universitas Udayana. Buku ajar ini diharapkan dapat menjadi
acuan untuk membantu mahasiswa dalam perkuliahan.
Buku ajar ini dapat diselesaikan dengan baik berkat dukungan dari
berbagai pihak. Penulis dalam kesempatan ini ingin menyampaikan ucapan
terima kasih kepada semua pihak dan terutama kepada Jurusan Teknik
Elektro dan Komputer Universitas Udayana.
Semoga buku ajar ini dapat bermanfaat bagi semua pihak yang
membutuhkan. Penulis menyadari, dalam penulisan buku ajar ini masih
banyak terdapat kekurangan. Penulis sangat mengharapkan saran yang
bersifat membangun demi kesempuranaan buku ajar ini.
Bukit Jimbaran, Oktober 2014
Penulis

iii

Nama Mata Kuliah

Kode Mata Kuliah
Bobot sks
Semester
Hari Pertemuan/Jam
Tempat Pertemuan
Koordinator MK

: Pemrograman Internet
: TE055218
: 3 SKS
: V (Lima)
: ................
: ................
: I Made Arsa Suyadnya, ST., M.Eng.

1.

Manfaat Mata Kuliah

Manfaat yang diperoleh setelah menempuh mata kuliah ini, mahasiswa
mampu mengetahui dan memahami konsep dasar internet dan pemrograman
web. Selain itu, mahasiswa mampu menerapkan konsep pemrograman web
dalam mengembangkan perangkat lunak berbasis web.
2.

Deskripsi Mata Kuliah

Mata kuliah ini memberikan pengetahuan mengenai konsep dasar
internet dan pemrograman web, serta pemanfaatannnya untuk
mendistribusikan informasi. Ruang Lingkup Mata Kuliah Pemrograman
Internet akan membahas mengenai internet dan teknologi web, HTML, CSS,
pemrograman PHP, basis data dalam pemrograman web, JavaScript dalam
pemrograman web, Web CMS (Content management System), Web
Framework dan Web Service.
3.

Standar Kompetensi dan Kompetensi Dasar

Standar Kompetensi Mata Kuliah ini adalah mahasiswa mampu
mengetahui dan memahami konsep dasar internet dan pemrograman web.
Selain itu, mahasiswa mampu menerapkan konsep pemrograman web dalam
mengembangkan perangkat lunak berbasis web.
Sedangkan kompetensi dasarnya adalah mahasiswa mampu
menjelaskan konsep dasar internet dan pemrograman web, memahami
tentang konsep dasar HTML dan memahami konsep web statis,
memahami konsep CSS (Cascading Style Sheet) dan menerapkan dalam
halaman web HTML, memahami dan menggunakan konsep dasar bahasa
pemrograman PHP dalam pemrograman berbasis web, memahami konsep
basis data dan pemanfaatannya dalam pemrograman web, mengetahui
Javascript dan mampu menggunakan dalam pemrograman web, mengetahui
dan memahami konsep Content Management System (CMS), mengetahui
dan memahami konsep web application framework, mengetahui dan
memahami konsep web services.
iv

4.

Strategi Perkuliahan
Strategi perkuliahan ini banyak menggunakan diskusi dan pemecahan
masalah (problem solving learning). Perkuliahan dilaksanakan dengan tatap
muka, diskusi, dan pemecahan masalah. Materi kuliah dan bahan bacaan
wajib diiformasikan pada awal perkuliahan. Untuk menambah pemahaman
materi kuliah, mahasiswa di berikan tugas-tugas berupa tugas-tugas
terstruktur dan tugas mandiri yang kemudian akan didiskusikan pada kuliah
berikutnya.

12. Beighley, L. 2007. Head First SQL. California: O'Reilly.

13. Boiko, Bob. 2005. Content Management Bible, 2nd Edition. Indiana:
Wiley Publishing, Inc.
14. Buku-buku tentang HTML/XHTML, CSS, JavaScript, PHP, dan
pemrograman web lainnya
15. Berbagai sumber dari internet.

5.

7.
1.

Tugas-Tugas
Tugas Mandiri Membuat Personal Webpage
Tugas individu untuk membuat sebuah personal webpage dengan
menerapkan HTML, CSS dan JavaScript, kemudian mem-publish web
tersebut di internet memanfaatkan domain dan hosting gratis yang
banyak tersedia di internet.

6.

2.

Tugas Kelompok Membuat Web Dinamis

Tugas dikerjakan berkelompok maksimum 3 orang. Buatlah sebuah
website dinamis dengan topik tertentu, misalnya website dinamis untuk
profil sebuah perusahaan. Website Profil Perusahaan adalah website
yang menyajikan informasi untuk publik mengenai profil perusahaan
serta layanan yang dimilikinya. Pilihlah sebuah contoh perusahaan yang
akan dibuatkan web profil perusahaannya. Ada banyak jenis perusahaan
yang dapat dipilih, misalnya ada perusahaan yang bergerak dalam
bidang pariwisata, industri, bisnis penjualan barang/perdagangan,
perbankan, dan sebagainya. Content dalam website perusahaan ini
dikelola melalui sebuah halaman administrator dan memanfaatkan basis
data di dalamnya. Tugas dikumpulkan dalam bentuk laporan dan situs
online (web yang dibuat di-upload ke internet/web hosting gratis).
Tugas ini akan dipresentasikan pada hari tertentu menurut kesepakatan.

Materi Pokok
Materi pokok terdiri atas konsep dasar internet dan teknologi web,
HTML, CSS, pemrograman PHP, basis data dalam pemrograman web,
JavaScript dalam pemrograman web, CMS (Content management System),
Web Framework dan Web Service.
Bahan Bacaan
Buku/bahan bacaan dalam perkuliahan ini adalah sebagai berikut:
1. Deitel, P.J., Deitel, H.M. 2008. Internet & World Wide Web How to
Program Fourth Edition. New Jersey: Prentice Hall.
2. Cerami, E. 2002. Web Services Essentials. California: O'Reilly.
3. Richards, R. 2006. Pro PHP XML and Web Services. California:
Apress.
4. Kadir, A. 2008. Dasar Pemrograman Web Dinamis Menggunakan
PHP. Yogyakarta: Andi Offset.
5. Kadir, A. 2011. From Zero to a Pro: CSS - Tip dan Trik untuk
Menyertakan Cascading Style Sheet dalam Halaman web. Yogyakarta:
Andi Offset.
6. Beighley, Lynn dan Morrison, Michael. 2009. Head First PHP &
MySQL. California: OReilly Media, Inc.
7. Kadir, A. 2009. Mastering Ajax dan PHP. Yogyakarta: Andi Offset.
8. Sidik, B. 2012. Framework Codeigniter. Bandung: Penerbit
Informatika.
9. Larsen, Rob. 2013. Beginning HTML & CSS. Indiana: John Wiley &
Sons, Inc.
10. Sidik, B. dan Pohan, H.I. 2007. Pemrograman Web dengan HTML.
Bandung: Penerbit Informatika.
11. Mansfield, R. 2005. CSS Web Design For Dummies. New Jersey: Wiley
Publishing.
v

8.

Kriteria dan Standar Penilaian

Penilaian dilakukan berdasarkan ujian tertulis, lisan, penilaian/evaluasi
terhadap proses pembelajaran, dan unjuk sikap dengan komponen sebagai
berikut:
Keaktifan
Quiz
Tugas
UTS
UAS

: 10%
: 10%
: 30%
: 25%
: 25%
vi

Terkait dengan Standar Penilaian digunakan sistem Penilaian Acuan

Patokan (PAP). Hasil evaluasi dikategorikan sebagai berikut :
Angka Mutu
(skala 0-10)
80 100
65 79
55 64
40 54
0 39
9.

Angka Mutu
(skala 0-4)
4
3
2
1
0

Huruf Mutu
(Skala Kualitatif)
A
B
C
D
E

Rancangan Acara Perkuliahan (RAP)

No.
1
2
3
5
6
7
8
9
10
11
12

Pokok Bahasan
Kontrak perkuliahan
Internet dan Teknologi Web
HTML (HyperText Markup Language)
CSS (Cascading Style Sheet)
Dasar Pemrograman PHP
UTS
Basis Data dalam Pemrograman Web
dengan MySQL
JavaScript
Web CMS (Content Management System)
Web Framework dengan CodeIgniter
Web Services
UAS

Minggu KeI
II - III
IV - V
VI - VII
VIII

5.
6.
7.
8.
9.

Tidak diperkenakan melakukan keributan di kelas dalam bentuk apapun

selama perkuliahan berlangsung, kecuali pada saat diskusi.
Mahasiswa wajib hadir minimal 75 % dari tatap muka.
Tidak ada tes/tugas tambahan/ujian susulan dan sejenisnya kecuali ada
pemberitahuan atau alasan yang jelas.
Hasil evaluasi mahasiswa wajib dikembalikan pada mahasiswa 2
minggu setelah ujian berakhir.
Protes nilai dilayani paling lama 1 minggu setelah nilai keluar.

10. Lain-lain
Apabila ada hal-hal yang diluar kesepakatan ini untuk perlu disepakati,
dapat dibicarakan secara teknis pada saat setiap acara perkuliahan. Apabila
ada perubahan isi kontrak perkuliahan, akan ada pemberitahuan terlebih
dahulu.
Kontrak perkuliahan ini dapat dilaksanakan, mulai dari disampaikan
kesepakatan ini.

Wakil Mahasiswa,

Bukit Jimbaran,................................
Dosen Pengampu

........................................
NIM. ..............................

I Made Arsa Suyadnya,ST.,M.Eng.

NIP. 19851215 201212 1 001

IX - X
XI
XII
XIII - XIV
XV
XVI

10. Tata Tertib Mahasiswa dan Dosen

1. Mahasiswa diwajibkan menggunakan pakaian berkerah (tidak oblong)
dan pantas pada waktu mengikuti perkuliahan di kelas.
2. Mahasiswa tidak diperkenankan memakai sandal baik waktu mengikuti
perkuliahan maupun pada waktu praktikum, atau menghadap dosen
untuk bimbingan maupun konsultasi akademik.
3. Pada waktu perkuliahan semua handphone harus dalam keadaan
mati/silent.
4. Keterlambatan masuk di kelas hanya diijinkan maksimal 15 menit dari
jadwal. Lewat dari batas tersebut mahasiswa boleh masuk tapi tidak
mendapat presensi.
vii

viii

SILABUS

ix

xi

xii

SATUAN ACARA PERKULIAHAN (SAP)

Pemrograman Internet
TE055218
3 x 50 menit = 150 menit
1
Mahasiswa dapat :
Mengetahui mengenai sejarah perkembangan
internet dan web
Memahami tentang konsep server side dan
client side dalam pemrograman web
Memahami konsep URL, HTTP, dan WWW
Memahami tentang konsep domain dan
hosting
Memahami tentang halaman web statis dan
web dinamis
Pengenalan Internet dan Teknologi Web
6. Materi Pokok
Sejarah perkembangan internet
Konsep dasar server side dan client side
Konsep dasar URL, HTTP, dan WWW
Konsep Domain dan Hosting
Web Statis dan web dinamis
Bahasa Pemrograman Web
7. Pengalaman
Mempelajari dan mendiskusikan sejarah
Belajar
perkembangan internet
Mempelajari dan mendiskusikan konsep dasar
server side dan client side
Mempelajari dan mendiskusikan konsep dasar
URL, HTTP, dan WWW
Mempelajari konsep domain dan hosting
Mempelajari dan mendiskusikan web statis
dan web dinamis
Strategi Pembelajaran
Media dan
Kegiatan
Alat
Tahapan
Kegiatan Dosen
Mahasiswa
Pembelajaran
(1)
(2)
(3)
(4)
Pembukaan Menyampaikan
Melihat,
SAP, Silabus,
silabus, SAP,
mendengarkan
Rencana dan
1. Mata Kuliah
2. Kode Mata Kuliah
3. Waktu Pertemuan
4. Pertemuan Ke5. Indikator
Pencapaian

xiii

xiv

Penyajian

Penutup

Post Test
Referensi

Kontrak Kuliah,
Penilaian dan SOP
Dosen; memberikan
ulasan umum isi
mata kuliah
Pengenalan Internet
dan Teknologi Web
Mengulas mengenai
internet dan
teknologi web mulai
dari sejarah
perkembangannya,
konsep dasar server
side dan client side,
konsep URL, HTTP,
WWW, Domain,
Hosting, web statis,
web dinamis hingga
bahasa pemrograman
web; fasilitator,
mediator dan
motivator diskusi
Merangkum isi
pokok bahasan,
memberikan evaluasi
dan memberikan
materi tugas latihan
terstruktur/mandiri

penjelasan, serta
mencatat

Melihat,
mendengarkan
penjelasan,
mencatat,
bertanya, dan
berdiskusi

Jadwal study
guide,
Texbook,
Tugas
Terstruktur,
Diktat, Slide
Presentasi
sda

Menyimak,
sda
mengajukan
pertanyaan dan
pendapat,
menjawab
pertanyaan
evaluasi
Ujian tertulis, lisan, penilaian/evaluasi terhadap proses
pembelajaran, dan penilaian terhadap unjuk sikap
Deitel, P.J., Deitel, H.M. 2008. Internet & World Wide
Web How to Program Fourth Edition. New Jersey:
Prentice Hall.
Kadir, A. 2008. Dasar Pemrograman Web Dinamis
Menggunakan PHP. Yogyakarta: Andi Offset.

xv

Pemrograman Internet
TE055218
2 x 3 x 50 menit = 300 menit
2 dan 3
Mahasiswa dapat :
Memahami konsep dasar HTML
Menerapkan penggunaan tag-tag HTML
Menampilkan informasi dengan
menggunakan HTML
Membuat halaman web statis dengan
menggunakan HTML
Pengenalan HTML (HyperText Markup
6. Materi Pokok
Language)
Konsep struktur HTML
Tag-tag HTML
Atribut dasar HTML
Konsep web statis
7. Pengalaman
Mempelajari dan mendiskusikan struktur
Belajar
HTML dan penerapannya dalam
pemrograman web
Mempelajari tag-tag HTML
Mempelajari dan mendiskusikan atribut dasar
dalam HTML
Mempelajari dan mendiskusikan web statis
Strategi Pembelajaran
Media dan
Kegiatan
Alat
Tahapan
Kegiatan Dosen
Mahasiswa
Pembelajaran
(1)
(2)
(3)
(4)
Pembukaan Memberikan ulasan
Melihat,
SAP,
umum isi kuliah,
mendengarkan
Silabus,
materi pokok dan
penjelasan, serta
Rencana dan
kaitannya dengan isi
mencatat
Jadwal study
kuliah yang lain
guide,
Texbook,
Tugas
Terstruktur,
Diktat, Slide
Presentasi
1. Mata Kuliah
2. Kode Mata Kuliah
3. Waktu Pertemuan
4. Pertemuan Ke5. Indikator
Pencapaian

xvi

Penyajian

Penutup

Post Test
Referensi

Mengulas mengenai
HTML termasuk
struktur HTML, tagtag HTML dan
penerapannya dalam
pemrograman web;
fasilitator, mediator
dan motivator
diskusi.
Merangkum isi
pokok bahasan,
memberikan evaluasi
dan memberikan
materi tugas latihan
terstruktur/mandiri

Melihat,
mendengarkan
penjelasan,
mencatat,
bertanya, dan
berdiskusi

sda

Menyimak,
sda
mengajukan
pertanyaan dan
pendapat,
menjawab
pertanyaan
evaluasi
Ujian tertulis, lisan, penilaian/evaluasi terhadap proses
pembelajaran, dan penilaian terhadap unjuk sikap
Larsen, Rob. 2013. Beginning HTML & CSS. Indiana:
John Wiley & Sons, Inc.
Sidik, B. 2007. Pemrograman Web dengan HTML.
Bandung: Penerbit Informatika.

Tahapan
(1)
Pembukaan

Penyajian

Penutup
1. Mata Kuliah
2. Kode Mata Kuliah
3. Waktu Pertemuan
4. Pertemuan Ke5. Indikator
Pencapaian

6. Materi Pokok

7. Pengalaman
Belajar

Pemrograman Internet
TE055218
2 x 3 x 50 menit = 300 menit
4 dan 5
Mahasiswa dapat :
Menjelaskan dan menggunakan CSS pada
halaman web
Memahami penggunaan selector pada CSS
Menerapkan CSS dalam HTML
Pengenalan CSS (Cascading Style Sheet)
Konsep CSS
Selector
Konsep CSS pada HTML
Mempelajari konsep CSS
Mempelajari konsep selector
xvii

Post Test
Referensi

Mempelajari konsep CSS pada HTML

Strategi Pembelajaran
Media dan
Kegiatan
Alat
Kegiatan Dosen
Mahasiswa
Pembelajaran
(2)
(3)
(4)
Memberikan ulasan
Melihat,
SAP,
umum isi kuliah,
mendengarkan
Silabus,
materi pokok dan
penjelasan, serta
Rencana dan
kaitannya dengan isi
mencatat
Jadwal study
kuliah yang lain
guide, Slide
Presentasi
Mengulas tentang
Melihat,
sda
CSS (Cascading
mendengarkan
Style Sheet),
penjelasan,
penggunaan selector
mencatat,
pada CSS dan
bertanya, dan
penerapan CSS
berdiskusi
dalam HTML;
fasilitator, mediator
dan motivator
diskusi.
Merangkum isi
Menyimak,
sda
pokok bahasan,
mengajukan
memberikan evaluasi pertanyaan dan
dan memberikan
pendapat,
materi tugas latihan
menjawab
terstruktur/mandiri
pertanyaan
evaluasi
Ujian tertulis, lisan, penilaian/evaluasi terhadap proses
pembelajaran, dan penilaian terhadap unjuk sikap
Mansfield, R. 2005. CSS Web Design For Dummies.
New Jersey: Wiley Publishing.
Larsen, Rob. 2013. Beginning HTML & CSS. Indiana:
John Wiley & Sons, Inc.
Kadir, A. 2011. From Zero to A Pro: CSS - Tip dan Trik
untuk Menyertakan Cascading Style Sheet dalam
Halaman web. Yogyakarta: Andi Offset.
xviii

Pemrograman Internet
TE055218
2 x 3 x 50 menit = 300 menit
6 dan 7
Mahasiswa dapat :
Memahami struktur PHP dan mampu
menggunakan bahasa pemrograman PHP
Memahami bentuk variabel, tipe data,
operator dan pencetakan pada PHP
Menjelaskan fungsi instruksi utama dalam
PHP
Menerapkan bahasa pemrograman PHP ke
dalam HTML dan pemrograman web dinamis
Menjelaskan penggunaan parameter URL
sebagai parameter variabel
Pemrograman PHP
6. Materi Pokok
Konsep konsep dasar bahasa pemrograman
PHP
Tipe data dan operator dalam PHP
Instruksi seleksi dan perulangan dalam PHP
Penerapan PHP dalam HTML untuk
penanganan form
URL sebagai parameter nilai
7. Pengalaman
Mempelajari struktur dan konsep dasar bahasa
Belajar
pemrograman PHP
Mempelajari tipe data dan operator dalam
PHP
Mempelajari konsep instruksi seleksi dan
perulangan dalam PHP
Mempelajari penerapan PHP dalam HTML
untuk penanganan form
Mengenal URL sebagai parameter nilai
Strategi Pembelajaran
Media dan
Kegiatan
Tahapan
Kegiatan Dosen
Alat
Mahasiswa
Pembelajaran
(1)
(2)
(3)
(4)
Pembukaan Memberikan ulasan
Melihat,
SAP, Silabus,
umum isi kuliah,
mendengarkan
Rencana dan
1. Mata Kuliah
2. Kode Mata Kuliah
3. Waktu Pertemuan
4. Pertemuan Ke5. Indikator
Pencapaian

xix

Penyajian

Penutup

Post Test
Referensi

materi pokok dan

penjelasan, serta
Jadwal study
kaitannya dengan isi
mencatat
guide, Slide
kuliah yang lain
Presentasi
Mengulas tentang
Melihat,
sda
struktur, konsep dasar mendengarkan
bahasa pemrograman penjelasan,
PHP, Penerapan PHP mencatat,
dalam HTML untuk
bertanya, dan
penanganan form;
berdiskusi
fasilitator, mediator
dan motivator diskusi
sda
Merangkum isi pokok Menyimak,
bahasan, memberikan mengajukan
evaluasi dan
pertanyaan dan
pendapat,
memberikan materi
tugas latihan
menjawab
terstruktur dan
pertanyaan
mandiri
evaluasi
Ujian tertulis, lisan, penilaian/evaluasi terhadap proses
pembelajaran, dan penilaian terhadap unjuk sikap
Kadir, A. 2008. Dasar Pemrograman Web Dinamis
Menggunakan PHP. Yogyakarta: Andi Offset.
Kadir, A. 2009. Mastering Ajax dan PHP. Yogyakarta:
Andi Offset.

1. Mata Kuliah
2. Kode Mata Kuliah
3. Waktu Pertemuan
4. Pertemuan Ke5. Indikator
Pencapaian

Pemrograman Internet
TE055218
2 x 3 x 50 menit = 300 menit
9 dan 10
Mahasiswa dapat :
Memahami tentang penggunaan DBMS
MySQL untuk pembuatan database dan tabel
Menerapkan operasi database yang terdiri dari
CRUD (Create, Read, Update, Delete) tabel
beserta struktur di dalamnya dalam database
MySQL
Menggunakan konsep penanganan database
MySQL dalam bahasa pemrograman PHP
xx

Basis Data dalam Pemrograman Web

DBMS MySQL
Tabel
Operasi CRUD (Create, Read, Update,
Delete) DBMS MySQL
7. Pengalaman
Mempelajari penggunaan DBMS MySQL
Belajar
untuk pembuatan database dan tabel
Mempelajari operasi database yang terdiri dari
CRUD (Create, Read, Update, Delete)
Mempelajari operasi database dalam aplikasi
PHP
Strategi Pembelajaran
Media dan
Kegiatan
Tahapan
Kegiatan Dosen
Alat
Mahasiswa
Pembelajaran
(1)
(2)
(3)
(4)
Pembukaan Memberikan ulasan
Melihat,
SAP, Silabus,
umum isi kuliah,
mendengarkan
Kontrak
materi pokok dan
penjelasan, serta
Kuliah, Tugas
kaitannya dengan isi
mencatat
terstruktur,
kuliah yang lain
Texbook,
Jurnal,
Diktat, Slide
presentasi.
Penyajian
Memberikan ulasan
Melihat,
sda
tentang konsep basis
mendengarkan
data, penggunaan
penjelasan,
DBMS MySQL
mencatat,
untuk pembuatan
bertanya, dan
berdiskusi
database dan tabel,
serta operasi database
dalam aplikasi PHP;
fasilitator, mediator
dan motivator
diskusi.
Penutup
Merangkum isi
Menyimak,
sda
pokok bahasan,
mengajukan
memberikan evaluasi pertanyaan dan
dan memberikan
pendapat,
materi tugas latihan
menjawab

terstruktur/mandiri

6. Materi Pokok

xxi

Post Test
Referensi

pertanyaan
evaluasi
Ujian tertulis, lisan, penilaian/evaluasi terhadap proses
pembelajaran, dan penilaian terhadap unjuk sikap
Beighley, Lynn dan Morrison, Michael. 2009. Head
First PHP & MySQL. California: OReilly Media, Inc.
Beighley, L. 2007. Head First SQL. California:
O'Reilly.
Kadir, A. 2008. Dasar Pemrograman Web Dinamis
Menggunakan PHP. Yogyakarta: Andi Offset.

1. Mata Kuliah
2. Kode Mata Kuliah
3. Waktu Pertemuan
4. Pertemuan Ke5. Indikator
Pencapaian

6. Materi Pokok

7. Pengalaman
Belajar

Pemrograman Internet
TE055218
3 x 50 menit = 150 menit
11
Mahasiswa dapat :
Memahami konsep dan menggunakan
javascript
Memahami dan menerapkan penggunaan
variabel, tipe data, operator, separator,
instruksi seleksi dan looping dalam
JavaScript
Menerapkan penggunaan jQuery sebagai salah
satu JavaScript library
Menerapkan JavaScript dalam HTML dan
Pemrograman PHP
Pengenalan JavaScript
Konsep JavaScript
Variabel, tipe data, operator, separator, dan
instruksi seleksi, dan looping dalam
JavaScript
jQuery sebagai salah satu JavaScript library
JavaScript dalam HTML dan Pemrograman
PHP
Mempelajari konsep pemrograman JavaScript
Mempelajari variabel, tipe data, operator,
separator, dan instruksi seleksi, dan looping
xxii

Tahapan
(1)
Pembukaan

Penyajian

Penutup

Post Test
Referensi

dalam JavaScript
Mempelajari jQuery sebagai salah satu
JavaScript library
Mempelajari penerapan JavaScript dalam
HTML dan Pemrograman PHP
Strategi Pembelajaran
Media dan
Kegiatan
Alat
Kegiatan Dosen
Mahasiswa
Pembelajaran
(2)
(3)
(4)
Memberikan ulasan
Melihat,
SAP, Silabus,
umum isi kuliah,
mendengarkan
Kontrak
materi pokok dan
penjelasan, serta
Kuliah, Tugas
kaitannya dengan isi
mencatat
terstruktur,
kuliah yang lain
Texbook,
Jurnal,
Diktat, Slide
presentasi.
Memberikan ulasan
Melihat,
sda
tentang konsep
mendengarkan
pemrograman
penjelasan,
JavaScript, penerapan mencatat,
JavaScript dalam
bertanya, dan
HTML dan
berdiskusi
pemrograman PHP;
fasilitator, mediator
dan motivator
diskusi.
Merangkum isi
Menyimak,
sda
pokok bahasan,
mengajukan
memberikan evaluasi pertanyaan dan
dan memberikan
pendapat,
materi tugas latihan
menjawab
terstruktur/mandiri
pertanyaan
evaluasi
Ujian tertulis, lisan, penilaian/evaluasi terhadap proses
pembelajaran, dan penilaian terhadap unjuk sikap
Wilton, Paul dan McPeak, Jeremy. 2007. Beginning
JavaScript, Third Edition. Indiana: Wiley Publishing.
xxiii

Morrison, Michael. 2008. Head First JavaScript.

California: OReilly Media, Inc.
Kadir, A. 2009. Mastering Ajax dan PHP. Yogyakarta:
Andi Offset.

Pemrograman Internet
TE055218
3 x 50 menit = 150 menit
12
Mahasiswa dapat memahami CMS dan mampu
menerapkan dalam pemrograman web yang
dinamis
CMS (Content Management System)
6. Materi Pokok
Konsep Aplikasi Web berbasis CMS
7. Pengalaman
Mempelajari dan mendiskusikan content
Belajar
management system sebagai pendukung dalam
pemrograman web yang dinamis
Strategi Pembelajaran
Media dan
Kegiatan
Tahapan
Kegiatan Dosen
Alat
Mahasiswa
Pembelajaran
(1)
(2)
(3)
(4)
Pembukaan Memberikan ulasan
Melihat,
SAP,
umum isi kuliah,
mendengarkan
Silabus,
materi pokok dan
penjelasan, serta
Kontrak
kaitannya dengan isi mencatat
Kuliah,
kuliah yang lain
Tugas
terstruktur,
Texbook,
Jurnal,
Diktat, Slide
presentasi.
Penyajian
Memberikan ulasan
Melihat,
sda
tentang konsep CMS mendengarkan
(Content
penjelasan,
Management
mencatat, bertanya,
System); fasilitator,
dan berdiskusi
mediator dan
1. Mata Kuliah
2. Kode Mata Kuliah
3. Waktu Pertemuan
4. Pertemuan Ke5. Indikator
Pencapaian

xxiv

Penutup

Post Test
Referensi

motivator diskusi.
Merangkum isi
pokok bahasan,
memberikan evaluasi
dan memberikan
materi tugas latihan
terstruktur/mandiri

Menyimak,
sda
mengajukan
pertanyaan dan
pendapat,
menjawab
pertanyaan
evaluasi
Ujian tertulis, lisan, penilaian/evaluasi terhadap proses
pembelajaran, dan penilaian terhadap unjuk sikap
Boiko, Bob. 2005. Content Management Bible, 2nd
Edition. Indiana: Wiley Publishing, Inc.
Kadir, A. 2008. Dasar Pemrograman Web Dinamis
Menggunakan PHP. Yogyakarta: Andi Offset.

Pemrograman Internet
TE055218
2 x 3 x 50 menit = 300 menit
13 dan 14
Mahasiswa dapat :
Memahami konsep web application
framework
Menerapkan salah satu PHP Framework dalam
pemrograman web yang dinamis
Web Framework
6. Materi Pokok
Konsep Aplikasi Web berbasis framework
7. Pengalaman
Mempelajari dan mendiskusikan konsep web
Belajar
application framework
Mempelajari dan mengenal contoh-contoh
aplikasi web yang menggunakan web
application framework
Strategi Pembelajaran
Media dan
Kegiatan
Tahapan
Kegiatan Dosen
Alat
Mahasiswa
Pembelajaran
(1)
(2)
(3)
(4)
Pembukaan Memberikan ulasan
Melihat,
SAP,
umum isi kuliah,
mendengarkan
Silabus,
xxv

1. Mata Kuliah
2. Kode Mata Kuliah
3. Waktu Pertemuan
4. Pertemuan Ke5. Indikator
Pencapaian

Penyajian

Penutup

Post Test
Referensi

materi pokok dan

kaitannya dengan isi
kuliah yang lain

penjelasan, serta
mencatat

Memberikan ulasan
tentang web
application
framework dan
penerapan salah satu
PHP Framework
dalam pemrograman
web yang dinamis
(Codeigniter);
fasilitator, mediator
dan motivator
diskusi.
Merangkum isi
pokok bahasan,
memberikan evaluasi
dan memberikan
materi tugas latihan
terstruktur/mandiri

Melihat,
mendengarkan
penjelasan,
mencatat, bertanya,
dan berdiskusi

Kontrak
Kuliah,
Tugas
terstruktur,
Texbook,
Jurnal,
Diktat, Slide
presentasi.
sda

Menyimak,
sda
mengajukan
pertanyaan dan
pendapat,
menjawab
pertanyaan
evaluasi
Ujian tertulis, lisan, penilaian/evaluasi terhadap proses
pembelajaran, dan penilaian terhadap unjuk sikap
Foster, Rob. 2013. CodeIgniter 2 Cookbook.
Birmingham: Packt Publishing Ltd.
Sidik, B. 2012. Framework Codeigniter. Bandung:
Penerbit Informatika.

1. Mata Kuliah
2. Kode Mata Kuliah
3. Waktu Pertemuan
4. Pertemuan Ke-

Pemrograman Internet
TE055218
3 x 50 menit = 150 menit
15
xxvi

Mahasiswa dapat :
Menjelaskan manfaat dan pengertian web
service
Menjelaskan mengenai XML
Menjelaskan penggunaan SOAP dan WSDL
Membangun web services sederhana
Web Services
6. Materi Pokok
Pengenalan web service, SOA dan
arsitekturnya
Pengenalan XML
SOAP dan WSDL
7. Pengalaman
Mempelajari dan mendiskusikan konsep SOA
Belajar
(Service Oriented Architecture) dan web
services
Mempelajari dan mendiskusikan mengenai
XML, SOAP dan WSDL
Strategi Pembelajaran
Media dan
Kegiatan
Alat
Tahapan
Kegiatan Dosen
Mahasiswa
Pembelajaran
(1)
(2)
(3)
(4)
Pembukaan Memberikan ulasan
Melihat,
SAP, Silabus,
umum isi kuliah,
mendengarkan
Kontrak
materi pokok dan
penjelasan, serta
Kuliah, Tugas
kaitannya dengan isi
mencatat
terstruktur,
kuliah yang lain
Texbook,
Jurnal,
Diktat, Slide
presentasi.
Penyajian
Memberikan ulasan
Melihat,
sda
tentang konsep SOA
mendengarkan
(Service Oriented
penjelasan,
Architecture) dan
mencatat,
web services;
bertanya, dan
fasilitator, mediator
berdiskusi
dan motivator
diskusi.
Penutup
Merangkum isi
Menyimak,
sda
pokok bahasan,
mengajukan
memberikan evaluasi pertanyaan dan

dan memberikan
materi tugas latihan
terstruktur/mandiri

5. Indikator
Pencapaian

xxvii

Post Test
Referensi

pendapat,
menjawab
pertanyaan
evaluasi
Ujian tertulis, lisan, penilaian/evaluasi terhadap proses
pembelajaran, dan penilaian terhadap unjuk sikap
Cerami, E. 2002. Web Services Essentials. California:
O'Reilly.
Richards, R. 2006. Pro PHP XML and Web Services.
California: Apress.

xxviii

BAB I INTERNET DAN TEKNOLOGI WEB ......................................... 1

1.1 Internet ............................................................................................ 1
1.1.1 Perkembangan Internet............................................................. 1
1.1.2 Teknologi Internet .................................................................... 3
1.2 WWW (World Wide Web).............................................................. 5
1.2.1 Web Server dan Web Client (Web Browser) ........................... 6
1.2.2 Protokol Transfer ..................................................................... 7
1.2.3 Domain Name System (DNS) .................................................. 8
1.2.4 Hosting ................................................................................... 10
1.2.5 Cara Kerja WWW .................................................................. 10
1.3 Konsep Pemrograman Web ........................................................... 11
1.3.1 Web Statis dan Web Dinamis................................................. 12
1.3.2 Client Side Programming ....................................................... 12
1.3.3 Server Side Programming ...................................................... 13
1.4 Rangkuman.................................................................................... 14
1.5 Tugas/Soal Latihan ........................................................................ 14
1.6 Daftar Bacaan ................................................................................ 14
BAB II HTML (HYPERTEXT MARKUP LANGUAGE)..................... 16
2.1 Pengenalan HTML ........................................................................ 16
2.2 Pengenalan Tag HTML ................................................................. 17
2.3 Struktur Dokumen HTML ............................................................. 17
2.4 Elemen Dasar HTML .................................................................... 18
2.5 Format Teks................................................................................... 24
2.6 HTML Style .................................................................................. 28
2.7 Grouping Elemen .......................................................................... 29
2.8 Memuat Gambar ............................................................................ 30
2.9 Tabel .............................................................................................. 32
2.10 Form .............................................................................................. 34
2.11 Validasi Markup HTML ................................................................ 38
2.12 Rangkuman.................................................................................... 39

2.13 Tugas/Soal Latihan ........................................................................ 40

2.14 Daftar Bacaan ................................................................................ 42
BAB III CSS (CASCADING STYLE SHEET) ....................................... 43
3.1 Pengenalan CSS ............................................................................ 43
3.2 Cara Kerja CSS ............................................................................. 43
3.3 Penempatan CSS ........................................................................... 44
3.3.1 Inline Style ............................................................................. 44
3.3.2 Internal Style .......................................................................... 44
3.3.3 Import Style............................................................................ 45
3.3.4 External Style ......................................................................... 46
3.4 Selector .......................................................................................... 46
3.4.1 Selector ID ............................................................................. 47
3.4.2 Selector Class ......................................................................... 48
3.4.3 Selector HTML ...................................................................... 48
3.5 Box Model ..................................................................................... 49
3.6 Typography ................................................................................... 54
3.7 CSS Image ..................................................................................... 57
3.8 Floating ......................................................................................... 62
3.9 Positioning ..................................................................................... 66
3.10 Pseudo-class .................................................................................. 74
3.11 Pseudo-element ............................................................................. 76
3.12 Rangkuman.................................................................................... 77
3.13 Tugas/Soal Latihan ........................................................................ 77
3.14 Daftar Bacaan ................................................................................ 78
BAB IV DASAR PEMROGRAMAN PHP .............................................. 79
4.1 Pengenalan PHP ............................................................................ 79
4.2 Struktur Dasar Script PHP ............................................................. 80
4.3 Operator......................................................................................... 84
4.4 Statement Kontrol.......................................................................... 87
4.5 Array ............................................................................................. 92
4.6 POST dan GET Request ................................................................ 95
4.7 Cookie ........................................................................................... 98
4.8 Session......................................................................................... 100
4.9 Function....................................................................................... 103
4.10 Teknik Modularitas ..................................................................... 104
4.11 Rangkuman.................................................................................. 105
4.12 Tugas/Soal Latihan ...................................................................... 106
4.13 Daftar Bacaan .............................................................................. 107
BAB V BASIS DATA DALAM PEMROGRAMAN WEB DENGAN
MYSQL ........................................................................................ 108
5.1 Pengenalan Basis Data ................................................................ 108

xxix

xxx

DAFTAR ISI
HALAMAN PENGESAHAN....................................................................... i
PRAKATA ................................................................................................. iii
KONTRAK PERKULIAHAN ................................................................... iv
SILABUS ..................................................................................................... ix
SATUAN ACARA PERKULIAHAN (SAP) .......................................... xiv
DAFTAR ISI ........................................................................................... xxix
DAFTAR GAMBAR ........................................................................... xxxiii
DAFTAR TABEL .................................................................................. xxxv

5.1.1 Sistem Basis Data ................................................................. 108

5.1.2 DBMS (Database Management System) .............................. 109
5.1.3 Basis Data Relasional ........................................................... 110
5.1.4 SQL ...................................................................................... 110
5.1.5 Impelementasi Database Menggunakan DBMS MySQL ..... 114
5.2 Insert Data dengan PHP - MySQL .............................................. 118
5.3 Menampilkan Data dengan PHP - MySQL ................................. 122
5.4 Update Data dengan PHP - MySQL ............................................ 124
5.5 Hapus Data dengan PHP - MySQL ............................................. 126
5.6 Rangkuman.................................................................................. 127
5.7 Tugas/Soal Latihan ...................................................................... 128
5.8 Daftar Bacaan .............................................................................. 129
BAB VI JAVASCRIPT ........................................................................... 130
6.1 Pengenalan JavaScript ................................................................. 130
6.2 Penulisan JavaScript .................................................................... 130
6.3 Tipe Data dan Variabel................................................................ 132
6.4 Operator pada Javascript ............................................................. 134
6.5 Statement Kondisional dan Perulangan ....................................... 136
6.6 Fungsi .......................................................................................... 139
6.7 Penanganan Event ....................................................................... 140
6.8 Object String ............................................................................... 142
6.9 Object Window ........................................................................... 147
6.10 Dynamic HTML .......................................................................... 151
6.11 Penanganan Form ........................................................................ 153
6.12 jQuery .......................................................................................... 156
6.12.1 Sintaks jQuery ...................................................................... 157
6.12.2 jQuery Selectors ................................................................... 158
6.12.3 jQuery Events ....................................................................... 159
6.12.4 Efek-Efek dengan jQuery ..................................................... 159
6.12.5 Manipulasi HTML dengan jQuery ....................................... 161
6.12.6 Manipulasi CSS dengan jQuery ........................................... 163
6.13 Pengenalan AJAX ....................................................................... 164
6.14 Rangkuman.................................................................................. 168
6.15 Tugas/Soal Latihan ...................................................................... 169
6.16 Daftar Bacaan .............................................................................. 170
BAB VII CMS (CONTENT MANAGEMENT SYSTEM)................... 171
7.1 CMS (Content Management System) .......................................... 171
7.2 Web CMS (Content Management System) .................................. 172
7.3 Kelebihan dan Kekurangan CMS (Content Management
System)...... .................................................................................. 174
7.4 Penyediaan CMS (Content Management System) ....................... 175

7.5 Rangkuman.................................................................................. 177

7.6 Tugas/Soal Latihan ...................................................................... 177
7.7 Daftar Bacaan .............................................................................. 177
BAB VIII WEB FRAMEWORK DENGAN CODEIGNITER ............ 179
8.1 Pengenalan Framework ............................................................... 179
8.2 Pengenalan CodeIgniter .............................................................. 180
8.3 MVC (Model View Controller) Pattern....................................... 181
8.4 PHP dan Pemrograman Berorientasi Objek ................................ 183
8.4.1 Objek .................................................................................... 184
8.4.2 Class ..................................................................................... 184
8.4.3 Inheritance ............................................................................ 186
8.5 Instalasi dan Konfigurasi CodeIgniter ......................................... 187
8.5.1 Struktur Direktori CodeIgniter ............................................. 188
8.5.2 Konfigurasi CodeIgniter ....................................................... 189
8.5.3 Kesepakatan Coding (Coding Standart) CodeIgniter ........... 192
8.6 CodeIgniter Helper dan Library .................................................. 193
8.7 Hello CodeIgniter ........................................................................ 194
8.8 Membangun Aplikasi Sederhana Dengan CodeIgniter ............... 200
8.9 Rangkuman.................................................................................. 203
8.10 Tugas/Soal Latihan ...................................................................... 204
8.11 Daftar Bacaan .............................................................................. 204
BAB IX WEB SERVICES ...................................................................... 206
9.1 SOA (Service Oriented Architecture).......................................... 206
9.2 Web Service ................................................................................ 208
9.3 XML (eXtensible Markup Language) ......................................... 210
9.4 SOAP (Simple Object Access Protocol) ..................................... 213
9.5 WSDL (Web Service Description Language) ............................. 215
9.6 Web Service PHP Dengan NuSOAP Toolkit .............................. 218
9.6.1 Mengenal NuSOAP .............................................................. 218
9.6.2 Instalasi dan Konfigurasi NuSOAP ...................................... 219
9.6.3 Pemrograman SOAP dan WSDL Client Server ................... 219
9.7 Rangkuman.................................................................................. 226
9.8 Tugas/Soal Latihan ...................................................................... 226
9.9 Daftar Bacaan .............................................................................. 227
PENUTUP ................................................................................................ 228
DATA DIRI .............................................................................................. 229

xxxi

xxxii

Gambar 1.1 Jaringan Internet ........................................................................ 1

Gambar 1.2 Grafik pengguna internet dunia - 2014 Q2................................. 3
Gambar 1.3 Pemecahan Data menjadi paket-paket ....................................... 4
Gambar 1.4 Model TCP/IP ............................................................................ 5
Gambar 1.5 Hirarki DNS (Domain Name System) ....................................... 8
Gambar 1.6 Cara kerja DNS (Domain Name System) .................................. 9
Gambar 1.7 Cara kerja WWW..................................................................... 10
Gambar 2.1 Heading pada dokumen HTML ............................................... 19
Gambar 2.2 Paragraf dalam HTML ............................................................. 20
Gambar 2.3 Contoh ordered list ................................................................... 22
Gambar 2.4 Contoh unordered list ............................................................... 23
Gambar 2.5 Contoh list/daftar bersarang ..................................................... 24
Gambar 2.6 Gambar ditampilkan pada browser .......................................... 30
Gambar 2.7 Menyimpan gambar pada folder images .................................. 31
Gambar 2.8 Tabel dengan penggabungan baris dan kolom ......................... 33
Gambar 2.9 Contoh label pada form ............................................................ 34
Gambar 2.10 Contoh penggunaan text input ............................................... 35
Gambar 2.11 Contoh penggunaan textarea .................................................. 35
Gambar 2.12 Contoh penggunaan combo box ............................................. 36
Gambar 2.13 Contoh penggunaan radio button ........................................... 36
Gambar 2.14 Contoh submit button ............................................................. 37
Gambar 2.15 Contoh form dengan elemen kontrol di dalamnya ................. 38
Gambar 2.16 Validator HTML dari W3C.................................................... 39
Gambar 3.1 Contoh kode CSS ..................................................................... 47
Gambar 3.2 Ilustrasi box model ................................................................... 49
Gambar 3.3 Penambahan margin-bottom pada .box .................................... 50
Gambar 3.4 Pemberian padding pada .box .................................................. 51
Gambar 3.5 Penambahan border pada .box ................................................. 53
Gambar 3.6 Skema box model ..................................................................... 54
Gambar 3.7 Font jenis serif memiliki kait di setiap ujungnya ..................... 55
Gambar 3.8 Font jenis sans serif .................................................................. 56
Gambar 3.9 Background terus diulang untuk memenuhi ukuran elemen .... 58
Gambar 3.10 Repeat x akan mengulang background secara horisontal ....... 58
Gambar 3.11 Repeat y akan mengulang background secara vertikal .......... 59
Gambar 3.12 No repeat, background tidak diulang ..................................... 59
Gambar 3.13 Background bergeser selebar sebesar 50px dari kiri
(horisontal) dan sebesar 20px ke bawah (vertikal) ...................................... 60
Gambar 3.14 Contoh penggunaan image sprite ........................................... 62
Gambar 3.15 Penambahan float akan mempengaruhi elemen di sekitarnya 63

Gambar 3.16 Permasalahan saat menerapkan floating ................................ 64

Gambar 3.17 Penyelesaian masalah floating ............................................... 65
Gambar 3.18 Box static tidak dapat ditentukan posisinya ........................... 67
Gambar 3.19 Penempatan position relative memungkinkan penempatan box
..................................................................................................................... 68
Gambar 3.20 Child elemen akan berada di dalam parent-nya ..................... 69
Gambar 3.21 #box2 akan terlepas dari parent ketika ditambahkan position
absolute ........................................................................................................ 70
Gambar 3.22 Posisi absolute dapat dibatasi oleh elemen dengan ................ 71
Gambar 3.23 Pengaturan posisi dengan absolute......................................... 72
Gambar 3.24 Contoh kasus penggunaan absolute position.......................... 72
Gambar 3.25 Penggunaan position fixed ..................................................... 74
Gambar 3.26 Pseudo-Class :hover memberikan efek ketika cursor berada di
atas elemen .................................................................................................. 75
Gambar 3.27 Pemberian pseudo class :first-child dan :last-child ................ 76
Gambar 4.1 Prinsip kerja PHP .................................................................... 80
Gambar 4.2 Gambaran array........................................................................ 92
Gambar 4.3 Hasil proses dari POST request ............................................... 96
Gambar 4.4 Hasil proses dari GET request ................................................. 97
Gambar 4.5 Mengawali dan mengakhiri session ....................................... 101
Gambar 4.6 Hasil pemanggilan unreg.php ................................................ 102
Gambar 4.7 Gambaran penggunaan konsep modularitas........................... 104
Gambar 5.1 Hubungan antara tabel Branch dengan tabel Staff ................. 110
Gambar 5.2 Pembuatan database dengan phpmyadmin............................. 115
Gambar 5.3 Database db_coba berhasil dibuat .......................................... 115
Gambar 5.4 Fasilitas untuk pembuatan tabel pada database ...................... 116
Gambar 5.5 Pengisian struktur tabel tb_pelanggan ................................... 116
Gambar 5.6 Tabel tb_pelanggan berhasil dibuat ....................................... 117
Gambar 5.7 Fasilitas eksekusi query secara manual pada phpmyadmin ... 117
Gambar 5.8 Perintah SQL untuk membuat database dblatihan ................. 119
Gambar 5.9 Membuat tabel tb_barang pada database dblatihan................ 119
Gambar 5.10 Form insert/tambah data barang ........................................... 122
Gambar 5.11 Tampil data barang .............................................................. 124
Gambar 5.12 Form update data barang ...................................................... 126
Gambar 6.1 Aplikasi sederhana penghitung kata dengan JavaScript......... 146
Gambar 6.2 Window alert dengan JavaScript............................................ 150
Gambar 6.3 Window confirm dengan JavaScript ...................................... 150
Gambar 6.4 Window prompt dengan JavaScript ....................................... 150
Gambar 6.5 Komunikasi synchronous aplikasi web konvensional ............ 164
Gambar 6.6 Komunikasi asynchronous AJAX .......................................... 167
Gambar 6.7 Perbandingan model aplikasi web konvensional dan AJAX.. 167

xxxiii

xxxiv

DAFTAR GAMBAR

Gambar 7.1 Struktur CMS (Content Management System) ...................... 172

Gambar 7.2 Model Web CMS ................................................................... 173
Gambar 8.1 Perbandingan PHP Biasa dan CodeIgniter ............................. 182
Gambar 8.2 Alur kerja aplikasi berbasis MVC .......................................... 182
Gambar 8.3 Alur kerja CodeIgniter ........................................................... 183
Gambar 8.4 Tampilan standar hasil instalasi CodeIgniter ......................... 188
Gambar 8.5 Struktur direktori hasil instalasi CodeIgniter ......................... 188
Gambar 8.6 URL dalam CodeIgniter ......................................................... 194
Gambar 8.7 Hello CodeIgniter dengan controller ...................................... 195
Gambar 8.8 Hello CodeIgniter dengan controller dan view ...................... 198
Gambar 8.9 Hello CodeIgniter dengan model, view dan controller .......... 200
Gambar 8.10 Aplikasi sederhana CodeIgniter untuk menampilkan .......... 203
Gambar 9.1 Enkapsulasi bussiness process dengan service ...................... 207
Gambar 9.2 Arsitektur web service............................................................ 209
Gambar 9.3 Empat layer komponen protokol pada web service ............... 210
Gambar 9.4 Tampilan dokumen XML pada browser ................................ 211
Gambar 9.5 Struktur XML dalam SOAP................................................... 214
Gambar 9.6 Posisi SOAP dalam aplikasi ................................................... 214
Gambar 9.7 Aplikasi server dengan WSDL yang ditampilkan .................. 223
Gambar 9.8 Detail operasi pada item service yang disediakan .................. 223
Gambar 9.9 Hasil eksekusi aplikasi client web service ............................. 225

BAB I
INTERNET DAN TEKNOLOGI WEB
1
INTERNET DAN TEKNOLOGI WEB
RINGKASAN
Internet atau Interconnected Network dapat diartikan sebagai
kumpulan dari berbagai jaringan komputer yang saling interkoneksi yang
mencakup seluruh dunia (jaringan global). WWW (World Wide Web) atau
disebut web merupakan salah satu bentuk layanan berbasis hypertext yang
dapat diakses melalui internet. Pemrograman web adalah proses untuk
membangun suatu aplikasi berbasis web.
1.1 Internet
Internet atau Interconnected Network dapat diartikan sebagai
kumpulan dari berbagai jaringan komputer yang saling interkoneksi yang
mencakup seluruh dunia (jaringan global) dengan melalui jalur
telekomunikasi seperti telepon, fiber-optic, wireless dan lainnya. Jaringan
internet memungkinkan pemakai komputer di seluruh dunia dapat
berinteraksi dan saling berbagi informasi. Gambar 1.1 berikut ini merupakan
ilustrasi dari jaringan internet.
`
client
LAN

server

DAFTAR TABEL
Tabel 1.1 Kelebihan dan kekurangan aplikasi berbasis web ........................ 11
Tabel 2.1 Perkembangan versi HTML ........................................................ 16
Tabel 4.1 Operator Aritmetika pada PHP .................................................... 84
Tabel 4.2 Operator Penugasan pada PHP .................................................... 86
Tabel 4.3 Operator Perbandingan pada PHP ............................................... 86
Tabel 4.4 Operator Logika pada PHP .......................................................... 87
Tabel 4.5 Perbedaan antara Metode POST dan GET................................... 97
Tabel 6.1 Operator Aritmetika pada JavaScript ......................................... 134
Tabel 6.2 Operator Pemberian Nilai (Assignment) pada JavaScript ......... 134
Tabel 6.3 Operator Pembanding pada JavaScript ...................................... 135
Tabel 6.4 Operator Logika pada JavaScript ............................................... 136

Mobile
Network

client

Internet
client

Wireless
LAN
WAN

client

LAN

LAN

ISP LAN

client

server

client
PSTN

`
client

modem

server

client

client

server

Gambar 1.1 Jaringan Internet

1.1.1 Perkembangan Internet
Sejarah internet dimulai pada tahun 1969, ketika Departemen
Pertahanan Amerika, U.S. Defense Advanced Research Projects Agency

xxxv
1

(DARPA) memutuskan mengadakan riset untuk menghubungkan sejumlah

komputer sehingga membentuk jaringan organik. Program riset ini dikenal
dengan nama ARPANET (Advanced Research Project Agency Network).
Pada tahun 1970, sudah lebih dari 10 komputer yang berhasil dihubungkan
satu sama lain sehingga dapat saling berkomunikasi dan membentuk sebuah
jaringan.
Pada tahun 1972, Roy Tomlinson berhasil menyempurnakan program
e-mail yang ia ciptakan untuk ARPANET. Program e-mail ini begitu mudah
sehingga langsung menjadi populer. Pada tahun yang sama, icon @ juga
diperkenalkan sebagai lambang penting yang menunjukkan "at" atau "pada".
Tahun 1973, jaringan komputer ARPANET kemudian mulai dikembangkan
ke luar Amerika Serikat. Komputer University College di London
merupakan komputer pertama yang ada di luar Amerika yang menjadi
anggota jaringan ARPANET. Pada tahun yang sama, dua orang ahli
komputer yakni Vinton Cerf dan Bob Kahn mempresentasikan sebuah
gagasan yang lebih besar, yang menjadi cikal bakal pemikiran internet. Ide
ini dipresentasikan untuk pertama kalinya di Universitas Sussex.
Hari bersejarah berikutnya adalah tanggal 26 Maret 1976, ketika Ratu
Inggris berhasil mengirimkan e-mail dari Royal Signals and Radar
Establishment di Malvern. Setahun kemudian, sudah lebih dari 100
komputer yang bergabung di ARPANET membentuk sebuah jaringan atau
network. Pada tahun 1979, Tom Truscott, Jim Ellis dan Steve Bellovin,
menciptakan newsgroups pertama yang diberi nama USENET. Tahun 1981
France Telecom menciptakan gebrakan dengan meluncurkan telpon televisi
pertama, dimana orang bisa saling menelpon sambil berhubungan dengan
video link.
Semakin banyaknya komputer yang terhubung ke jaringan, maka
dibutuhkan sebuah protokol resmi yang diakui oleh semua jaringan. Pada
tahun 1982 dibentuk Transmission Control Protocol atau TCP dan Internet
Protokol atau IP. Selanjutnya, untuk menyeragamkan alamat di jaringan
komputer yang ada, maka pada tahun 1984 diperkenalkan sistem nama
domain, yang dikenal dengan DNS atau Domain Name System.
Pada tahun 1987 jumlah komputer yang tersambung ke jaringan
melonjak 10 kali lipat menjadi 10.000 lebih. Kemudian tahun 1988, Jarko
Oikarinen dari Finland menemukan dan sekaligus memperkenalkan IRC
atau Internet Relay Chat. Setahun kemudian, jumlah komputer yang saling
berhubungan kembali melonjak 10 kali lipat dalam setahun. Tak kurang dari
100.000 komputer kini membentuk sebuah jaringan. Pada tahun 1989 adalah
tahun yang paling bersejarah, ketika Tim Berners Lee menemukan program
editor dan browser yang bisa menjelajah antara satu komputer dengan

komputer yang lainnya, yang membentuk jaringan itu. Program inilah yang
disebut WWW atau World Wide Web.
Pada tahun 1992, komputer yang saling tersambung membentuk
jaringan sudah melampaui satu juta komputer, dan di tahun yang sama
muncul istilah surfing the internet. Tahun 1994, situs internet telah tumbuh
menjadi 3000 alamat halaman, dan untuk pertama kalinya virtual shopping
atau e-retail muncul di internet. Hingga bulan Juli tahun 2004, jumlah host
internet telah mencapai 280 juta host.
Perkembangan internet selanjutnya hingga saat ini sangatlah pesat, hal
ini dapat dilihat dari jumlah pengguna internet di seluruh dunia yang telah
mencapai 3 milyar pengguna. Perkembangan teknologi jaringan komputer,
juga mendukung besarnya angka penetrasi pengguna internet. Pada Gambar
1.2 ditunjukkan grafik jumlah pengguna internet di seluruh dunia yang
dikelompokkan berdasarkan wilayah geografis.

Gambar 1.2 Grafik pengguna internet dunia - 2014 Q2

(Sumber: www.internetworldstats.com/stats.htm)
1.1.2 Teknologi Internet
Internet dibangun didasarkan pada 3 teknologi kunci, yakni: teknologi
client/server, packet switching, dan protokol TCP/IP.
Client/Server adalah teknologi pendistribusian kerja aplikasi antara
dua komputer atau lebih, yang dihubungkan oleh jaringan komunikasi,

dimana yang satu akan bertindak sebagai client atau peminta layanan, dan
yang lainnya sebagai Server, atau pemberi layanan. Baik client ataupun
server memiliki pemroses atau CPU sendiri, sedangkan jaringan yang
digunakan bisa berupa jaringan lokal (LAN) ataupun jaringan yang lebih
luas lagi (WAN).
Internet merupakan sebuah jaringan packet switching. Packet
switching merupakan sebuah teknik komunikasi data, dimana data
ditransmisikan ke dalam paket-paket data dan apabila terdapat suatu data
atau message yang panjang dan melebihi kapasitas transmisi akan dipotong
menjadi barisan-barisan paket yang kecil. Setiap paket yang dikirim
ditambahkan informasi kendali. Informasi kendali ini, dalam bentuk yang
paling minim, digunakan untuk membantu proses pencarian rute (routing)
dalam suatu jaringan sehingga pesan dapat sampai ke alamat tujuan. Contoh
pemecahan data menjadi paket-paket data ditunjukkan pada Gambar 1.3.

terdiri dari protokol-protokol yang saling berkaitan seperti TCP/IP ini

kemudian dikenal dengan protocol suite. Dalam protokol TCP/IP digunakan
skema pengalamatan sederhana yang disebut sebagai alamat IP (IP
Address). Gambar 1.4 berikut ini merupakan model TCP/IP.

Gambar 1.4 Model TCP/IP

Gambar 1.3 Pemecahan Data menjadi paket-paket

Protokol jaringan atau network protocol merupakan sebuah aturan
yang mendefinisikan beberapa fungsi yang ada dalam sebuah jaringan
komputer, misalnya mengirim pesan, data, informasi dan fungsi lain yang
harus dipenuhi oleh sisi pengirim (transmitter) dan sisi penerima (receiver)
agar komunikasi berlangsung dengan benar. Protokol dapat diterapkan pada
perangkat keras, perangkat lunak atau kombinasi dari keduanya.
TCP/IP atau Transmission Control Protocol/Internet Protocol
merupakan standar komunikasi data yang digunakan dalam proses tukarmenukar data dari satu komputer ke komputer lain di dalam jaringan
internet. TCP/IP dan protokol-protokol yang berkaitan membentuk sebuah
sistem yang komplit yang mendefinisikan bagaimana seharusnya data-data
diproses, dikirim, dan diterima dalam suatu jaringan TCP/IP. Sistem yang

1.2 WWW (World Wide Web)

WWW (World Wide Web) atau disebut web merupakan salah satu
bentuk layanan berbasis hypertext yang dapat diakses melalui internet.
WWW sering dianggap sama dengan internet secara keseluruhan, walaupun
sebenarnya WWW hanyalah bagian dari internet.
Ide berawal dari konsep hypertext yang disampaikan oleh Ted Nelson.
Hal ini diilhami dari cara standar membaca buku yakni secara linear yang
dimulai dari halaman pertama. Konsep hypertext adalah untuk
memungkinkan seseorang untuk membaca atau mengeksplorasi secara
nonlinear. Konsep utamanya bahwa hypertext mengandung "link" ke teks
lain. Dengan mengikuti link tersebut, pembaca tidak dibatasi untuk
mengikuti urutan tertentu. Hypertext mungkin saja berisi link yang tidak
selalu mengarah pada teks lain, tapi dapat juga berupa suara atau file video.
Sejarah Web bermula di European Laboratory for Particle Physics
(lebih dikenal dengan nama CERN), di kota Geneva dekat perbatasan
Perancis dan Swiss. Pada bulan Maret 1989, Tim Berners Lee dari CERN
mengusulkan suatu proposal sistem distribusi informasi di internet yang
memungkinkan para anggotanya yang tersebar di seluruh dunia dapat saling
berbagi informasi. Sistem distribusi informasi inilah yang selanjutnya

dikenal sebagai World Wide Web dimana konsep hypertext dipadukan

dengan internet. Ada tiga komponen utama dalam World Wide Web, yakni:
1. HTTP (Hypertext Transfer Protocol)
HTTP adalah protokol yang digunakan untuk bertukar informasi antara
browser dan server. Protokol HTTP menggunakan TCP/IP untuk
mencari dan membuat sambungan antara browser dan server. Pesan
yang dikirim antara browser dan server, yakni pesan permintaan
(request messages) atau pesan respon (respon messages). Ada dua jenis
HTTP command atau disebut dengan method, yakni POST dan GET.
Secara mendasar fungsi POST digunakan untuk mengirimkan data ke
server, sedangkan GET digunakan untuk mengambil data dari server.
Protokol HTTP merupakan protokol standar yang digunakan untuk
mengakses dokumen HTML.
2. HTML (Hypertext Markup Language)
HTML merupakan standar bahasa yang digunakan untuk menampilkan
halaman web pada web browser.
3. URL (Uniform Resource Locator)
URL adalah sarana yang digunakan untuk menentukan lokasi informasi
pada suatu web server. URL dapat diibaratkan sebagai suatu alamat,
dimana alamat tersebut terdiri dari:
a) Protokol yang digunakan oleh web browser untuk mengambil
informasi
b) Nama komputer (server) dimana informasi tersebut berada
c) Jalur/path serta nama file dari suatu informasi

server, Apache Tomcat, Nginx, Xitami, Internet Information Services (IIS),

dan Lighttpd.
Web browser merupakan aplikasi web client yang menyediakan
pengguna sebuah antarmuka dimana web browser akan mengirimkan
permintaan (request) ke server dan menampilkan respon dari server. Ketika
pengguna meminta server (sebagai contoh, mendapatkan dokumen, atau
mungkin mengirim (submit) sebuah form), maka web browser yang
memformat permintaan tersebut ke dalam sesuatu yang server dapat
mengerti. Begitu server telah selesai memproses permintaan dan kemudian
mengirim respon, web browser mengambil data yang diperlukan dari respon
yang diberikan server dan kemudian merendernya untuk ditampilkan ke
pengguna. Adapun beberapa software web browser yang populer,
diantaranya: Mozilla Firefox, Google Chrome, Safari, Internet Explorer, dan
Opera.

Format umum dari suatu URL adalah sebagai berikut.

protokol_transfer://nama_host/path/nama_file
Contoh:
http://www.unud.ac.id/teknik/index.html
Keterangan:
http : protokol yang digunakan
www.unud.ac.id : nama host atau server komputer
teknik : jalur/path/lokasi spesisfik dari informasi yang dicari
index.html : nama file
1.2.1 Web Server dan Web Client (Web Browser)
Web server merupakan software yang memberikan layanan data yang
berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal
dengan web browser dan mengirimkan kembali hasilnya dalam bentuk
halaman-halaman web yang umumnya berbentuk dokumen HTML. Adapun
beberapa software web server yang populer, diantaranya: Apache HTTP

1.2.2 Protokol Transfer

Protokol transfer adalah suatu protokol yang digunakan untuk
pengiriman informasi di internet. HTTP adalah salah satu protokol transfer
yang merupakan standar untuk mengakses suatu dokumen web. Selain
protokol HTTP, dalam internet juga dikenal beberapa protokol lain,
diantaranya adalah:
1. FTP (File Transfer Protocol)
FTP merupakan suatu protokol yang berfungsi untuk melakukan
pertukaran file dalam suatu network yang mendukung protokol TCP/IP.
Dua hal penting yang ada dalam FTP adalah FTP server dan FTP client.
FTP server menjalankan software yang digunakan untuk pertukaran
file, yang selalu siap memberian layanan FTP apabila mendapat request
dari FTP client. FTP client adalah komputer yang me-request koneksi
ke FTP server untuk tujuan pertukaran file (meng-upload atau mendownload file).
2. Telnet (Telecommunication Network)
Telnet merupakan protokol yang memfasilitasi akses remote login ke
komputer host dalam sebuah jaringan komputer. Protokol telnet
merupakan protokol yang berbasis teks dan berjalan di atas TCP/IP.
3. NNTP (Network News Transfer Protocol)
NNTP merupakan protokol yang digunakan untuk mendistribusikan
berita di Usenet. Usenet adalah suatu sistem yang dirancang sebagai
forum diskusi dengan berdasarkan pada topik-topik yang disebut
newsgroup.

1.2.3 Domain Name System (DNS)

Domain merupakan penamaan yang diberikan untuk identifikasi nama
server komputer (web server atau mail server) pada jaringan komputer atau
pada jaringan internet. Domain digunakan untuk mempermudah pengguna
dalam mengakses ke server tanpa harus mengingat alamat IP server yang
berupa deretan angka (misalnya: 103.29.196.229). Domain kadang disebut
juga sebagai URL/alamat website. Secara umum domain name terdiri atas
dua jenis yaitu:
1. Generic Top-Level Domains (gTLDs)
gTLDs merupakan domain-domain level tertinggi di internet dan
berlaku secara internasional, seperti .com: komersial, .edu: pendidikan,
.org: organisasi atau lembaga non-profit, .travel: industri wisata, dan
lainnya
2. Country Top-Level Domains (ccTLDs)
cTLDs berlaku hanya di wilayah teritorial/negara tertentu. Sebagai
contoh, cTLDs untuk Indonesia: .id, Inggris: .uk, Perancis: .fr, dan
sebagainya. Karena berlaku secara teritorial/negara, setiap
teritorial/negara memiliki aturan yang berbeda-beda mengenai sistem
penamaan dan pendaftaran untuk cTLDs ini.
Domain Name System (DNS) merupakan sistem berbentuk database
terdistribusi
yang
akan
memetakan/mengkonversikan
nama
host/mesin/domain ke alamat IP (Internet Protocol) dan sebaliknya. Struktur
database DNS berbentuk hierarki atau pohon yang memiliki beberapa
cabang seperti terlihat pada Gambar 1.5. Cabang-cabang ini mewakili
domain, dan dapat berupa host, subdomain, ataupun top level domain.

Domain teratas adalah root. Domain ini diwakili oleh titik.

Selanjutnya, domain yang terletak tepat di bawah root disebut top level
domain. Beberapa contoh top level domain ini antara lain com, edu, gov,
dan lain-lain. Turunan dari top level domain disebut subdomain. Domain
yang terletak setelah top level domain adalah second level domain, dan
domain yang berada di bawah second level domain disebut third level
domain, begitu seterusnya.
Ada tiga belas (13) root server utama yang disebar ke seluruh dunia
dan dibagi-bagi untuk melayani area negara tertentu, generic Top Level
Domains (gTLDs) tertentu atau blok IP Address tertentu. Antara satu root
server ini dengan yang lain saling terhubung dan saling memperbaharui
datanya masing-masing (www.root-servers.org).
Secara sederhana cara kerja DNS dapat dilihat pada Gambar 1.6
berikut ini.

Gambar 1.5 Hirarki DNS (Domain Name System)

Gambar 1.6 Cara kerja DNS (Domain Name System)

DNS menggunakan relasi client-server untuk resolusi nama. Pada saat
client mencari satu host, maka client akan mengirimkan query ke server
DNS. Query adalah satu permintaan untuk resolusi nama yang dikirimkan
ke server DNS.
1. Pada komputer client, sebuah program aplikasi misalnya http, meminta
pemetaan IP Address (forward lookup query). Sebuah program aplikasi
pada host yang mengakses domain system disebut sebagai resolver,
resolver menghubungi DNS server, yang biasa disebut name server.
2. Name server mengecek ke local database, jika ditemukan, name server
mengembalikan IP Address ke resolver jika tidak ditemukan akan
meneruskan query tersebut ke name server root server.
3. Terakhir barulah client bisa secara langsung menghubungi sebuah
website atau server yang diminta dengan menggunakan IP Address
yang diberikan oleh DNS server.

10
1.2.4 Hosting
Hosting adalah sebuah istilah layanan berbasis internet berupa tempat
penyimpanan data atau tempat menjalankan aplikasi di tempat terpusat yang
biasa disebut dengan server. Hosting juga dapat dikatakan sebagai sebuah
space atau ruang di internet yang dapat digunakan untuk menyimpan
beberapa file yang berhubungan dengan website, antara lain seperti file
HTML, PHP, musik, video, gambar ataupun yang lainnya.
Hosting sendiri melibatkan server, atau komputer yang disimpan di
tempat khusus dilengkapi sistem pendingin dan hardware yang mampu
bekerja secara terus menerus selama 24 jam. Server hosting dilengkapi
dengan koneksi internet berkecepatan tinggi agar dapat memproses semua
request.
1.2.5 Cara Kerja WWW
Saat pengguna mengunjungi sebuah situs web, misalnya
http://ee.unud.ac.id, ada proses "di balik layar" yang tidak diketahui oleh
pengguna. Proses tersebut cukup kompleks yang melibatkan beberapa
entitas dalam sistem WWW, seperti web browser, DNS, jaringan internet,
web server, dan database server. Proses yang terjadi hingga seorang
pengguna dapat menampilkan halaman web secara utuh dalam web browser
dapat ditunjukkan secara sederhana seperti pada Gambar 1.7 berikut ini.

11
4.
5.

6.

Setelah terhubung, web browser mengirimkan HTTP request

Server menjawab dengan mengirim HTTP response (berisi header dan
isi dokumen). Untuk dokumen yang terdiri atas beberapa file (misalnya
dokumen bergambar), web browser harus mengirimkan HTTP request
lagi untuk setiap file.
Web browser menampilkan keseluruhan isi halaman web kepada
pengguna.

1.3 Konsep Pemrograman Web

Pemrograman web atau web programming adalah proses menulis,
mencoba, memeriksa dan memperbaiki (debug), serta memelihara kode
untuk membuat suatu aplikasi berbasis web. Aplikasi berbasis web
merupakan aplikasi yang dibuat dengan memanfaatkan mekanisme dan
aplikasi yang telah ada pada sistem web (WWW). Membuat aplikasi
berbasis web berarti:
1. Memperkaya fungsi web server dengan cara menambahkan program
pada dokumen web yang akan dieksekusi oleh server ketika file
dokumen web tersebut diakses oleh web server.Misalnya, program yang
mengambil data ke basis data untuk ditampilkan ke web browser.
2. Memperkaya interaktivitas dokumen dengan cara menambahkan
program pada dokumen web yang akan dieksekusi oleh web browser
ketika file dokumen tersebut ditampilkan oleh web browser. Misalnya,
program yang memvalidasi data masukan pada form sebelum di-submit
ke web server.
Adapun kelebihan dan kekurangan dari aplikasi berbasis web
ditunjukkan pada Tabel 1.1.

.
Gambar 1.7 Cara kerja WWW
Secara kronologis, urutan proses-proses yang terjadi pada Gambar 1.7
adalah sebagai berikut.
1. Pengguna membuka alamat website/URL melalui web browser.
Kemudian web browser dalam hal ini sebagai resolver akan
menghubungi DNS server
2. DNS server memberikan respon berupa IP Address ke resolver
3. Web browser menghubungi atau membuka koneksi ke server yang
tersebut pada URL (berdasarkan IP Address yang diperoleh dari DNS
server)

Tabel 1.1 Kelebihan dan kekurangan aplikasi berbasis web

Kelebihan
Kekurangan
Platform Independent, artinya
Antarmuka yang dapat dibuat
aplikasi berbasis web dapat
terbatas sesuai spesifikasi standar
dijalankan dari berbagai sistem
untuk membuat dokumen web
dan dan keterbatasan kemampuan
operasi, seperti Windows, Linux,
web browser untuk
Mac OS, cukup dengan
menggunakan web browser dan
menampilkannya
Terbatasnya kecepatan internet
tidak memerlukan instalasi
(jaringan) mungkin membuat
aplikasi client khusus
Dapat diakses kapan pun dan
respon aplikasi menjadi lambat
dari mana pun selama ada
internet

12

13

Beberapa teknologi pembangun aplikasi berbasis web, diantarannya:

web client (web browser), web server, URL (Uniform Resource Locator),
HTTP (Hypertext Transfer Protocol), HTML (Hypertext Markup
Language), CSS/ Cascading Style Sheet (suatu mekanisme untuk
menambahkan style (misalnya font, warna, jarak, posisi) pada dokumen
web) dan pemrograman web (server side scripting, client side scripting, dan
plug-ins).

operasi tersebut atau menyediakan input, atau server kekurangan kekuatan

pemrosesan untuk melakukan operasi yang tepat waktu untuk seluruh client
yang harus dilayaninya. Sebagai tambahan, jika operasi dapat dilakukan
oleh client tanpa mengirim data melalui jaringan, maka hal itu memakan
waktu yang lebih sedikit, menggunakan lebih kecil bandwidth dan
mengurangi resiko keamanan.
Dalam client side programming dikenal pula istilah client side
scripting yang umumnya mengacu kepada kelas dari program komputer
pada web yang dieksekusi pada sisi client-side oleh web browser pengguna.
Web browser mengidentifikasi dan menjalankan script program yang
disisipkan dalam dokumen web (yang diterima dari server), dan dapat
meng-update tampilan dokumen web di komputer pengguna tanpa
mengirimkan request baru kepada web server. Contoh bahasa client-side
scripting diantaranya: JavaScript, VBScript, dan JScript
Selain client-side scripting, ada pula yang disebut dengan plug-ins
untuk membantu eksekusi program di sisi client. Web browser menjalankan
file program dengan bantuan plug-in viewer/player dan menyediakan suatu
area di dalam dokumen web sebagai tempat menampilkan antarmuka
program tersebut. Contoh plug-ins diantaranya: Java Applet, ActiveX, Flash
Player, dan Microsoft Silverlight.

1.3.1 Web Statis dan Web Dinamis

Web statis adalah website dimana pengguna tidak dapat mengubah
konten dari web tersebut secara langsung menggunakan web browser.
Interaksi yang terjadi antara pengguna dan server hanyalah seputar
pemrosesan link saja. Konten dari halaman-halaman web tersebut tidak
tersimpan dalam database. Data dan informasi yang ada pada web statis
tidak berubah-ubah kecuali diubah sintaksnya. Dokumen web yang dikirim
kepada client akan sama isinya dengan apa yang ada di web server. Contoh
dari web statis adalah web yang berisi profil perusahaan. Dalam web profil
perusahaan hanya ada beberapa halaman saja dan kontennya hampir tidak
pernah berubah karena konten langsung diletakan dalam file HTML saja.
Dalam web dinamis, interaksi yang terjadi antara pengguna dan server
sangat kompleks. Pengguna dapat mengubah konten dari halaman tertentu
dengan menggunakan web browser. Request (permintaan) dari pengguna
dapat diproses oleh server yang kemudian ditampilkan dalam isi yang
berbeda-beda menurut alur programnya. Konten dalam halaman-halaman
web disimpan dalam database. Web dinamis, memiliki data dan informasi
yang berbeda-beda tergantung input yang disampaikan client. Dokumen
yang sampai di client akan berbeda dengan dokumen yang ada di web
server. Contoh dari web dinamis adalah portal berita dan jejaring sosial.
Dalam web tersebut, konten halamannya sering diperbaharui (di-update)
oleh pemilik atau penggunanya. Bahkan untuk jejaring sosial sangat sering
di-update setiap harinya.
1.3.2 Client Side Programming
Dalam jaringan komputer, kata client side mengacu kepada operasi
yang dilakukan oleh client pada satu hubungan client-server. Secara
umum, suatu client adalah satu aplikasi komputer, seperti web browser yang
berjalan pada satu komputer lokal dari pengguna atau workstation dan
terhubung ke suatu server.
Operasi dapat dilakukan oleh client-side karena operasi tersebut
membutuhkan akses ke informasi atau fungsi yang tersedia pada client tetapi
tidak pada server, karena pengguna membutuhkan observasi terhadap

1.3.3 Server Side Programming

Terminologi server-side memiliki arti operasi yang dilakukan oleh
server di dalam sebuah hubungan "client-server". Umumnya, sebuah server
adalah program/aplikasi, seperti web server, yang berada pada sebuah
remote server, yang dapat dijangkau oleh komputer lokal milik pengguna.
Operasi dilakukan pada sisi server, karena memerlukan akses atas informasi
atau fungsi yang tidak tersedia pada client, atau pada aplikasi yang tidak
dapat dilakukan pada client-side. Operasi server-side juga meliputi proses
dan penyimpanan data dari client ke suatu server.
Server-side scripting adalah teknologi web werver dimana request
oleh pengguna dipenuhi dengan cara menjalankan script langsung pada web
server untuk menghasilkan halaman HTML dinamis. Umumnya digunakan
untuk membangun website interaktif yang terhubung pada database atau
media penyimpanan data lainnya. Keuntungan utama dari server-side script
adalah kemampuan untuk mengatur response berdasarkan keperluan
pengguna, hak akses, atau query ke dalam data store. Adapun beberapa
bahasa yang termasuk ke dalam server-side scripting diantaranya: PHP
(Hypertext PreProcessor), ASP (Active Server Page), JSP (Java Server
Page), Phyton dan Ruby.

14
1.4 Rangkuman
1. Internet atau Interconnected Network dapat diartikan sebagai kumpulan
dari berbagai jaringan komputer yang saling interkoneksi yang
mencakup seluruh dunia (jaringan global) dengan melalui jalur
telekomunikasi seperti telepon, fiber-optic, wireless dan lainnya.
2. Internet dibangun didasarkan pada 3 teknologi kunci, yakni: teknologi
client/server, packet switching, dan protokol TCP/IP.
3. WWW (World Wide Web) atau disebut web merupakan salah satu
bentuk layanan berbasis hypertext yang dapat diakses melalui internet.
4. Ada tiga komponen utama dalam World Wide Web, yakni: HTTP
(Hypertext Transfer Protocol), HTML (Hypertext Markup Language)
dan URL (Uniform Resource Locator).
5. Web server merupakan software yang memberikan layanan data yang
berfungsi menerima permintaan HTTP atau HTTPS dari klien yang
dikenal dengan web browser dan mengirimkan kembali hasilnya dalam
bentuk halaman-halaman web yang umumnya berbentuk dokumen
HTML.
6. Domain Name System (DNS) merupakan sistem berbentuk database
terdistribusi yang akan memetakan atau mengkonversikan nama
host/mesin/domain ke alamat IP (Internet Protocol) dan sebaliknya.
7. Pemrograman web atau web programming adalah proses menulis,
mencoba, memeriksa dan memperbaiki (debug), serta memelihara kode
untuk membuat suatu aplikasi berbasis web.
8. Aplikasi berbasis web merupakan aplikasi yang dibuat dengan
memanfaatkan mekanisme dan aplikasi yang telah ada pada sistem web
(WWW).
1.5 Tugas/Soal Latihan
1. Jelaskan apa yang dimaksud dengan internet!
2. Jelaskan bagaimana cara kerja WWW, sehingga suatu halaman web
dapat ditampilkan secara utuh dalam web browser!
3. Sebutkan kelebihan dan kekurangan dari aplikasi berbasis web!
4. Jelaskan apa perbedaan antara web statis dan web dinamis!
5. Jelaskan apa perbedaan antara client side scripting dengan server side
scripting!
1.6 Daftar Bacaan
1. Deitel, P.J., Deitel, H.M. 2008. Internet & World Wide Web How to
Program Fourth Edition. New Jersey: Prentice Hall.
2. Tanenbaum, Andrew S. 2011. Computer Networks, 5th Ed. PrenticeHall International.

15
3.
4.
5.

Honda, Gail and Martin, Kipp. 2002. Internet and Web Technology:
The Basics. http://www.informit.com/articles/article.aspx?p=27569.
Diakses tanggal 29 Juli 2014.
Stiawan, Deris. 2007. Mengenal Domain & DNS (Domain Name
Services).
http://deris.unsri.ac.id/materi/jarkom/domain&DNS.pdf.
Diakses tanggal 29 Juli 2014.
Baker, Greg. 2013. Web Development Notes. http://www2.cs.sfu.ca/
~ggbaker/zju/web/. Diakses tanggal 2 Agustus 2014.

17
BAB II
HTML (HYPERTEXT MARKUP LANGUAGE)
2
HTML (HYPERTEXT MARKUP LANGUAGE)
RINGKASAN
HTML (Hyper Text Markup Language) adalah sebuah bahasa markup
(penanda) berbasis text atau bisa juga disebut sebagai formatting language
(bahasa untuk memformat) yang digunakan untuk membuat sebuah halaman
web dan menampilkan berbagai informasi di dalam sebuah browser Internet.
HTML adalah sebuah standar yang digunakan secara luas untuk
menampilkan halaman web dan HTML bukanlah bahasa pemrograman.
2.1 Pengenalan HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa markup
(penanda) berbasis text atau bisa juga disebut sebagai formatting language
(bahasa untuk memformat) yang digunakan untuk membuat sebuah halaman
web dan menampilkan berbagai informasi di dalam sebuah browser Internet.
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan
dipopulerkan pertama kali oleh browser Mosaic. Bermula dari sebuah
bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan yang disebut dengan SGML (Standard Generalized Markup
Language), HTML adalah sebuah standar yang digunakan secara luas untuk
menampilkan halaman web. HTML saat ini merupakan standar Internet
yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web
Consortium (W3C). HTML bukanlah bahasa pemrograman, melainkan
bahasa markup/formatting.
Semenjak tahun 1990, HTML mengalami perkembangan yang sangat
pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan
dan fasilitas yang lebih baik dari versi sebelumnya. Pada Tabel 2.1 berikut
merupakan perkembangan versi HTML.

File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html.

Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan ekstensi
*.html maka anda membuat file yang berformat HTML.
2.2 Pengenalan Tag HTML
Seperti yang telah dijelaskan sebelumnya, bahwa HTML adalah
bahasa Markup, artinya bahasa HTML hanya digunakan untuk me-markup
suatu dokumen. Sebagai penyederhanaan dapat dianalogikan dengan
pembuatan dokumen di Microsoft Word atau aplikasi Word Processing
lainnya.
Ketika membuat sebuah dokumen word, biasanya kita melakukan
formatting pada teks. seperti menebalkan teks, memiringkan, memberi garis
bawah, membuat penjudulan (heading), membuat list (haftar) dan lain
sebagainya. Pada HTML, formatting ini bisa kita sebut dengan proses
markup dan akan dilakukan dengan menggunakan tag HTML. Misalnya,
untuk mem-format suatu teks menjadi miring menggunakan tag <em> atau
<i> seperti berikut:
Website <em>pertama</em> saya
<em> .. </em> disebut

dengan tag HTML, yang digunakan untuk memarkup(memformat) dokumen HTML. Perhatikan bahwa setiap tag
memiliki pasangan yakni tag penutupnya. Artinya hanya teks yang berada di
dalam tag tersebut yang akan diberi format miring. Tag penutup ditandai
dengan penambahan tanda slash (/) sebelum nama tag-nya. Namun ada
beberapa tag spesial yang tidak memiliki tag penutup, seperti: <br> atau
<img>. Berikut ini adalah anatomi dari tag HTML:
<namatag atribut="nilai Atribut">
Isi atau Konten
</namatag>

Tabel 2.1 Perkembangan versi HTML

Versi
HTML
HTML 2.0
HTML 3.2
HTML 4.01
XHTML
HTML 5

Tahun
1991
1995
1997
1999
2000
2014

16

Setiap tag HTML bisa menjadi "isi" dari tag HTML lainnya, untuk membuat
suatu hierarki dari dokumen HTML. Dalam setiap tag HTML bisa
disisipkan berbagai atribut yang berfungsi untuk menampung informasiinformasi tertentu, misalnya atribut id dan class yang berfungsi untuk
memberi nama suatu tag sebagai referensi CSS atau JavaScript nantinya.
2.3 Struktur Dokumen HTML
Suatu dokumen HTML juga mempunyai aturan dalam penulisannya,
ada beberapa tag yang harus dituliskan dan sudah menjadi ketentuan.

18
HTML tag tidak bersifat case sensitive tapi disarankan untuk menuliskannya
secara lowercase. Berikut ini merupakan struktur dari sebuah dokumen
HTML.
<!DOCTYPE html>
<html>
<head>
<title>Judul File HTML</title>
</head>
<body>
<h1>Ini adalah heading</h1>
<p>Website <strong><em>pertama</em></strong> saya</p>
<p>Ini adalah paragraf lainnya.</p>
</body>
</html>

Berikut penjelasan struktur dokumen HTML tersebut.

<!DOCTYPE html>

Merupakan tag awal dari setiap dokumen HTML, tag ini berfungsi untuk
menginformasikan pada browser bahwa dokumen yang sedang dibuka
adalah dokumen HTML. Tag ini perlu dicantumkan di setiap dokumen
HTML yang akan dibuat.
<html> .. </html>

Awal dari isi dokumen HTML dimulai dari bagian ini, semua kode HTML
yang akan dibuat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap
tag harus memiliki tag penutup.

19
1.

Heading
Heading, digunakan untuk memberikan penjudulan pada suatu
dokumen HTML. Untuk memformat penjudulan dalam HTML,
menggunakan tag <h1> untuk judul utama dan untuk judul subbabnya
anda dapat menggunakan tag <h2> sampai dengan <h6>. Setiap level
judul memiliki ukuran huruf yang berbeda-beda (namun nantinya masih
dapat merubah ukurannya melalui CSS).
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>Bab 1 : Pendahuluan</h1>
<h2>1.1 Latar Belakang</h2>
<p>Paragraf pendahuluan, bla..bla..
<h2>1.2 Pokok Permasalahan</h2>
<p>Paragraf pendahuluan, bla..bla..
<h1>Bab 2 : Pembahasan</h1>
<h2>2.1 Teori dan Konsep</h2>
<p>Paragraf pendahuluan, bla..bla..
<h2>2.2 Algoritma Pemrograman</h2>
<p>Paragraf pendahuluan, bla..bla..
</body>
</html>

</p>
</p>

</p>
</p>

Hasilnya dapat dilihat pada Gambar 2.1 berikut ini.

<head> .. </head>

Tag head akan digunakan untuk menyimpan berbagai informasi tentang

dokumen HTML. Apa yang terdapat di dalam tag ini, tidak akan
ditampilkan secara langsung pada web browser.
<title> .. </title>

Salah satu contoh informasi yang terdapat di dalam tag Head adalah title.
Title akan menampilkan teks pada judul browser atau pada tab browser.
<body> .. </body>

Tag body merupakan tag pembuka dari badan dokumen HTML. Apa yang
ingin ditampilkan pada browser akan ditulis di dalam tag ini.
2.4 Elemen Dasar HTML
Adapun beberapa elemen-elemen dasar yang digunakan dalam
dokumen HTML adalah sebagai berikut.

Gambar 2.1 Heading pada dokumen HTML

20
2.

21
Contoh link ke dokumen lain:

Paragraf
Untuk menformat teks menjadi paragraf digunakan tag <p> . . . </p>.
Contoh:

dokumen1.html
<!DOCTYPE html>
<html>
<head>
<title>Document 1</title>
</head>
<body>
<a href="dokumen2.html"> Klik untuk melihat dokumen 2</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

dokumen2.html
<!DOCTYPE html>
<html>
<head>
<title>Document 2</title>
</head>
<body>
<a href="dokumen1.html"> Kembali ke dokumen 2</a>
</body>
</html>

Hasilnya dapat dilihat pada Gambar 2.2 berikut ini.

Link ke section tertentu dalam dokumen

Untuk membuat link ke section tertentu dalam satu document gunakan
property name untuk membuat nama tujuan dari link.
Sintak name anchor:
<a name ="nama">Topic name</a>

Gambar 2.2 Paragraf dalam HTML

Untuk membuat link ke name :

<a href="#nama">menuju ke Topic name</a>

3.

Link
Link digunakan untuk menghubungkan halaman web satu dengan
halaman web lainnya. Ada dua jenis link address, yakni:
Absolute address - merupakan full internet address (URL) yang
meliputi protocol, network location dan path dan nama file.
Contoh: http ://www.yahoo.com/index.html
Relative address - URL yang tidak menyebutkan protocol dan
network locationya (hanya path dan nama filenya).
Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan
menambahkan tag <a> pada teks yang ingin kita buat menjadi link.
Contoh:
<a href="URL">Hypertext</a>

4.

List
Sebuah daftar dapat memiliki penomoran atau hanya sebuah simbol
berupa lingkaran atau bentuk lainnya. Dalam HTML, daftar yang
menggunakan penomoran disebut dengan ordered list dan yang
menggunakan simbol disebut dengan unordered list.
1.

Ordered List
Ordered list atau Daftar berurutan dapat dibuat dengan
menggunakan tag <ol> (singkatan dari ordered list) dan untuk
setiap listnya kita gunakan tag <li> (singkatan dari list item/item
daftar). Sebagai contoh, perhatikan kode HTML berikut :

22

23

<h2>Yang harus dilakukan hari ini</h2>

<ol>
<li>Pergi ke pasar</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ol>

Penomoran daftar akan dilakukan secara otomatis ketika anda

menambahkan daftar item. Dan jika ditampilkan pada browser,
maka yang akan diperoleh hasil seperti Gambar 2.3 berikut.
Gambar 2.4 Contoh unordered list
3.

Definition List
Berbeda dengan ordered list dan unordered list yang memiliki
struktur sama, definition list memiliki struktur tersendiri. Biasanya
definition list ini digunakan untuk membuat daftar istilah beserta
definisinya seperti halnya dalam kamus.
<dl>
<dt>Test</dt>
<dd>Test</dd>
</dl>

Gambar 2.3 Contoh ordered list

2.

Tag dt (definition term) digunakan untuk menampung istilah yang

akan didefinisikan, dan tag dd digunakan untuk menuliskan definisi
dari dt sebelumnya. Berikut contoh penggunaan dari definition list.

Unordered List
Berbeda dengan daftar berurut, unordered list akan menandai
setiap item dengan simbol. Baik berupa lingkaran atau persegi
(masih bisa dirubah dengan CSS). Untuk membuat daftar tidak
berurut digunakan tag <ul> dan seperti tag <ol>, item yang terdapat
di dalamnya harus diapit dengan tag <li>.
Contoh:
<h2>Yang harus dilakukan hari ini</h2>
<ul>
<li>Pergi ke pasar</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ul>

Secara default, item akan ditandai dengan lingkaran seperti terlihat

pada Gambar 2.4.

<dl>
<dt>Manga</dt>
<dd>Manga (baca: man- ga, atau ma- ng-ga)
merupakan kata komik dalam bahasa Jepang; di luar
Jepang, kata tersebut digunakan khusus untuk
membicarakan tentang komik Jepang. </dd>
<dt>Mangaka</dt>
<dd>Mangaka (baca: man-ga-ka, atau ma-ng-ga-ka)
adalah orang yang menggambar manga</dd>
</dl>

4.

List/Daftar bersarang
Sebuah daftar bisa saja memiliki daftar lagi di dalam itemnya, atau
biasa disebut dengan daftar/list bersarang (nested list).
Contoh:
<!DOCTYPE html>
<html>
<head>

24
<title>List/Daftar</title>
</head>
<body>
<h2>Yang harus dilakukan hari ini</h2>
<ol>
<li>Pergi ke pasar
<ul>
<li>Beli sayuran</li>
<li>Beli kertas
<ol>
<li>A4</li>
<li>Legal</li>
</ol>
</li>
<li>Beli tinta</li>
</ul>
</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ol>
</body>
</html>

25
1.

Break
Tag <br> digunakan untuk memulai baris baru pada document HTML,
tag ini fungsinya mirip dengan carriage return.
<!DOCTYPE html>
<html>
<body>
<p>
To break lines<br>in a text,<br>use the br element.
</p>
</body>
</html>

Hasil output:

2.

Hasilnya dapat dilihat pada Gambar 2.5 berikut ini.

Bold
Untuk membuat teks menjadi bold/tebal digunakan tag <b>...</b> atau
<strong>...</strong>
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>

Hasil output:

3.
Gambar 2.5 Contoh list/daftar bersarang
2.5 Format Teks
Adapun beberapa elemen-elemen yang digunakan dalam memformat
teks dalam dokumen HTML adalah sebagai berikut.

Italic
Untuk membuat teks menjadi miring digunakan tag <i>...</i> atau
<em>...</em>
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>

26

27

Hasil output:

Hasil output:

7.
4.

Underline
Untuk membuat teks bergaris bawah digunakan tag <u>...</u> atau
<ins>...</ins>

Deleted
Untuk menandai deleted teks digunakan tag <del>...</del>
<!DOCTYPE html>
<html>
<body>
<p>The del element represent deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><u>This text is underline.</u></p>
</body>
</html>

Hasil output:

Hasil output:
8.
5.

Superscript
Untuk membuat superscript teks digunakan tag ^...
<!DOCTYPE html>
<html>
<body>
<p>This is ^{superscripted} text.</p>
</body>
</html>

Hasil output:

6.

Subscript
Untuk membuat subscript teks digunakan tag _...
<!DOCTYPE html>
<html>
<body>
<p>This is _subscripted text.</p>
</body>
</html>

Quotes / Indenatasi
Untuk membuat indentasi paragraf dapat menggunakan tag
<blockquote> ... </blockquote> dan untuk indentasi pendek digunakan
tag <q>...</q>
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q
element.</p>
<p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
<p>Browsers usually indent blockquote elements.</p>
<blockquote>
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
</body>
</html>

28

29

Hasil output:

<p style="font-size:160%">This is a paragraph.</p>

</body>

Text Alignment
Properti text-align mendefinisikan perataan teks untuk sebuah elemen
HTML.
<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>

2.6 HTML Style

Setiap elemen HTML memiliki style default (warna latar belakang
putih dan warna teks hitam). Mengubah style default elemen HTML, dapat
dilakukan dengan atribut style.
style="property:value"
dimana property merupakan

suatu property CSS dan value merupakan

suatu value CSS.

Berikut ini beberapa contoh penggunaan HTML style.
Text Color
Properti color mendefinisikan warna teks yang akan digunakan untuk
elemen HTML.
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>

Font
Properti font-family mendefinisikan font yang akan digunakan untuk
elemen HTML.
<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>

Text Size
Properti font-size mendefinisikan ukuran teks yang akan digunakan
untuk elemen HTML.
<body>
<h1 style="font-size:300%">This is a heading</h1>

2.7 Grouping Elemen

Tag div dan span digunakan untuk mengelompokkan elemen-elemen
HTML. Span digunakan untuk mendefinisikan inline content sementara div
digunakan untuk block-level content.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p>My mother has <span style="color:blue;fontweight:bold">blue</span> eyes.</p>
<p>This is some text.</p>
<div style="color:blue">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>

Hasil output:

30

31

2.8 Memuat Gambar

Untuk memuat/menampilkan sebuah gambar digunakan tag <img>.
Pada tag <img> digunakan atribut src untuk menyimpan lokasi gambar.
Selanjutnya untuk memasukkan nilai pada atribut, digunakan operator sama
dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip. Tag
<img> termasuk ke dalam tag spesial dan tidak memiliki tag penutup
(disebut juga sebagai self closed tag).

Dan atribut lainnya adalah atribut width dan height, yang berfungsi untuk
menentukan lebar dan tinggi dari gambar tersebut.

<img src="url">

<img src="logo.png" alt="Ini adalah teks alternatif"

width="362" height="123">

Lokasi penyimpanan gambar dapat berada pada suatu folder. Penulisan

lokasi file gambar sesuai dengan folder penyimpanan gambar perlu
dilakukan agar gambar dapat ditampilkan pada browser. Misalnya gambar
disimpan pada sebuah folder seperti Gambar 2.7 berikut ini.

Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Memuat Gambar</title>
</head>
<body>
<p>Ini adalah contoh pemuatan gambar pada file HTML<p>
<img src="logo.jpeg">
</body>
</html>

Hasil yang diperoleh dapat dilihat pada Gambar 2.6 berikut ini.
Gambar 2.7 Menyimpan gambar pada folder images
Maka yang perlu anda lakukan adalah menambahkan nama folder tersebut
diikuti dengan tanda slash (/) dan nama file gambar yang akan dimuat:
<img src="images/logo.png" alt="Ini adalah teks alternatif">

Jika dalam folder tersebut terdapat folder lagi, dan gambar yang ingin
dimuat ada di dalamnya maka penulisannya menjadi seperti berikut:

Gambar 2.6 Gambar ditampilkan pada browser

Setiap tag <img>, selain memiliki atribut src untuk menyimpan lokasi
gambar, juga harus menyertakan atribut alt yang akan digunakan sebagai
teks alternatif ketika gambar tidak berhasil dimuat atau gambar hilang.

<img src="images/folder1/folder2/logo.png" alt="Ini adalah teks

alternatif">

Selain penggunaan lokasi gambar seperti di atas, dapat juga menampilkan

gambar yang sudah terdapat di internet, penulisan seperti ini disebut dengan
hotlinking misalnya:
<img src="http://webku.web.id/images/gambar.jpg" alt="logo">

<img src="logo.png" alt="Ini adalah teks alternatif">

32
2.9 Tabel
Untuk menampilkan data dengan tipe tabel dalam HTML, maka
menggunakan tag <table>.
<table></table>

Untuk membuat baris tabel, digunakan tag

(ditulis di dalam tag table).

33
<td>Rian</td>
</tr>
</table>
</body>
</html>

Hasil yang diperoleh dapat dilihat pada Gambar 2.7 berikut ini.
<tr>

singkatan dari table row

<table>
<tr></tr>
</table>

Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya

tag <td> (table data) yang digunakan di dalam tag <tr>.
<table>
<tr>
<td>No</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
</table>

Untuk menyatukan kolom atau baris (merge-cell) kita tambahkan atribut

colspan (untuk merge horizontally-secara horizontal) atau rowspan (untuk
merge vertically).
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan=2>No</td>
<td colspan=2>Jenis Kelamin</td>
<td rowspan=2>Nama</td>
</tr>
<tr>
<td>L</td>
<td>P</td>
</tr>
<tr>
<td>1</td>
<td>L</td>
<td></td>

Gambar 2.8 Tabel dengan penggabungan baris dan kolom

Agar format tabel sesuai dengan ketentuan, maka dapat menggunakan tag
untuk baris yang menjadi judul tabel, <tbody> untuk data/isi dari
tabel dan <tfoot> untuk kaki tabel (bisa diisi sama dengan thead atau
lainnya). Selain tag-tag tersebut, ada pula tag <th> untuk menyatakan suatu
header cell dalam tabel. Teks yang berada dalam elemen <th> diset secara
default menjadi bold dan rata tengah.
<thead>

...
<table border="1">
<thead>
<tr>
<th rowspan=2>No</th>
<th colspan=2>Jenis Kelamin</th>
<th rowspan=2>Nama</th>
</tr>
<tr>
<th>L</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>L</td>
<td></td>
<td>Rian</td>
</tr>
</tbody>
</table>
...

34

35

2.10 Form
Pembuatan sebuah form diawali dengan tag <form>, dan setiap
kontrol-kontrol yang dibutuhkan ditempatkan di dalam tag ini.

Jika text input yang akan ditampilkan ingin memiliki nilai, maka
tuliskan nilai tersebut di dalam atribut value.

<form>
<h1>Formulir Pendaftaran</h1>

</form>

Dengan begitu, ketika halaman dibuka, text input ini secara otomatis
akan terisi dengan nilai dari atribut value, seperti contoh yang
ditampilkan pada Gambar 2.10 berikut ini.

<input type="text" name="nama" value="Budi Santosa" />

Setiap control pada form dapat dibuat dengan menggunakan tag

Dan yang membedakan tipe dari control tersebut berada pada
atribut type (tipe kontrol). Berikut ini adalah sebagian tipe kontrol yang
biasa ditemui :

<input>.

1.

Label
Label digunakan untuk memberikan keterangan pada setiap input yang
ada. Berikut pada Gambar 2.9, ditunjukkan yang disebut dengan label.
Gambar 2.10 Contoh penggunaan text input
3.

Gambar 2.9 Contoh label pada form

<label for="Name"> Keterangan Input </label>

Text Area
Sama halnya dengan text input, namun text area dapat diisi lebih dari
satu baris, cocok digunakan untuk isian yang panjang, seperti alamat,
deskripsi, atau biodata. Berbeda dengan kontrol lainnya yang
menggunakan tag <input>, text area memiliki tag sendiri yaitu
<textarea>...</textarea>. Dan apa yang terdapat di dalam tag ini
adalah value dari kontrol tersebut. Pada Gambar 2.11 merupakan
contoh penggunaan text area.
<label for="alamat">Alamat Lengkap</label>
<textarea name="alamat"></textarea>

Atribut for diisi dengan isi dari atribut name pada kontrol yang ingin
diberi label.
2.

Text Input
Control input ini dapat diisi dengan teks yang memiliki kata yang tidak
terlalu panjang atau hanya satu baris, biasa digunakan dalam form
pencarian, nama dan lain sebagainya.
<label for="nama">Nama Lengkap</label>
<input type="text" name="nama" />

Gambar 2.11 Contoh penggunaan textarea

36
4.

Combo Box
Combo Box adalah kontrol yang memiliki pilihan ketika diklik.
Pembuatannya sama seperti pembuatan Daftar/List namun dengan tag
yang berbeda. Gambar 2.12 merupakan contoh penggunaan combo box.
<label for="kota">Kota</label>
<select name="kota">
<option>Jakarta</option>
<option>Bandung</option>
<option>Denpasar</option>
<option>Tasikmalaya</option>
</select>

37
6.

Submit Button
Submit button digunakan untuk mengirimkan form ke form-handler.
Form-handler biasanya berupa sebuah halaman pada sisi server yang
berisi script untuk memproses data input. Form-handler ditentukan
sesuai dengan atribut action dan method pada form. Method atribut
menspesifikasikan HTTP method (GET atau POST) yang digunakan
untuk mengirimkan form. Gambar 2.14 merupakan contoh submit
button.
<input type="submit" value="Kirim Data" />

5.

Gambar 2.12 Contoh penggunaan combo box

Radio Button
Radio button merupakan kontrol yang memperbolehkan pengguna
memilih satu dari sejumlah pilihan. Gambar 2.13 merupakan contoh
penggunaan radio button.
<label for="jeniskelamin">Jenis Kelamin</label>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female

Gambar 2.13 Contoh penggunaan radio button

Gambar 2.14 Contoh submit button

Apabila seluruh kontrol sebelumnya digabungkan ke dalam form, maka
form lengkap tersebut akan tampil seperti Gambar 2.15.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
<label for="nama">Nama Lengkap</label>
<input type="text" name="nama" /><br />
<label for="alamat">Alamat Lengkap</label>
<textarea name="alamat"></textarea><br />
<label for="kota">Kota</label>
<select name="kota">
<option>Jakarta</option>
<option>Bandung</option>
<option>Denpasar</option>
<option>Tasikmalaya</option>
</select><br />
<label for="jeniskelamin">Jenis Kelamin</label>

38

39

<input type="radio" name="sex" value="male" checked>Male

<input type="radio" name="sex" value="female">Female<br />
<input type="submit" value="Kirim Data" />
</form>
</body>
</html>

Gambar 2.16 Validator HTML dari W3C

Gambar 2.15 Contoh form dengan elemen kontrol di dalamnya

2.11 Validasi Markup HTML
Validasi markup adalah proses dimana kode HTML yang dibuat
dilakukan validasi apakah sudah benar atau belum oleh aplikasi validator
dari W3C (World Wide Web Consortium). Validasi ini sangatlah diperlukan
untuk memeriksa apakah ada yang salah dengan markup HTML yang telah
dibuat atau ada beberapa bagian yang terlewat seperti penutup tag, atribut
dan lain sebagainya.
Sebagian orang berpendapat bahwa markup HTML yang valid akan
mempercepat proses loading website dan lebih bersahabat dengan Search
Engine.
Untuk melakukan validasi, dapat melalui alamat berikut:
http://validator.w3.org/. Selanjutnya akan dibawa ke halaman validator
HTML dari W3C seperti Gambar 2.16.

Ada tiga cara pengujian Markup HTML, yakni dengan

mengetikkan alamat file HTML yang akan diuji (Validate by URL),
opsi ini adalah untuk memvalidasi halaman HTML yang sudah "online"
atau website yang sudah online. Cara kedua adalah dengan meng-upload
file HTML yang dibuat (Validate by file upload), dan validator akan
memvalidasi kode HTML yang terdapat dalam file tersebut, dan cara
terakhir adalah dengan mengetikkan langsung kode HTML dan
memvalidasinya (Validate by direct input).
2.12 Rangkuman
1. HTML (Hyper Text Markup Language) adalah sebuah bahasa markup
(penanda) berbasis text atau bisa juga disebut sebagai formatting
language (bahasa untuk memformat) yang digunakan untuk membuat
sebuah halaman web dan menampilkan berbagai informasi di dalam
sebuah browser Internet.
2. HTML bukanlah bahasa pemrograman, melainkan bahasa
markup/formatting. Pada HTML, formatting dapat disebut dengan
proses markup dan akan dilakukan dengan menggunakan tag HTML.
Setiap tag memiliki pasangan yakni tag penutupnya. Tag penutup
ditandai dengan penambahan tanda slash (/) sebelum nama tag-nya,
contoh: <em> .. </em>.
3. Ada banyak elemen untuk menyusun suatu dokumen HTML,
diantaranya tag paragraf, heading, link, list, img, table, form, dan
lainnya.

40

41

2.13 Tugas/Soal Latihan

1. Buatlah sebuah dokumen HTML untuk tulisan berikut ini dan simpan
file dengan nama: lulusan_kompetitif.html
Lulusan S-1 yang Kompetitif
Sebuah perenungan untuk anda para mahasiswa
SEKITAR 15-20 tahun yang lalu, lulusan Strata 1 (S-1) dapat dipastikan
bisa memperoleh pekerjaan yang enak dengan cepat. Enak di sini
maksudnya mendapatkan jabatan dan gaji yang baik. Namun, sekarang
keadaan berubah. Tidak sedikit lulusan sarjana yang menganggur karena
tidak mendapat pekerjaan dan tidak bisa membuka usaha sendiri. Untuk
menutupi kenyataan menganggur, beberapa penganggur mencoba melucu
dengan mengatakan bekerja di perumtel, kependekan dari penunggu rumah
dan telenovela. Menganggurnya lulusan S-1 tidak saja akibat kondisi di
luar, tetapi juga akibat kondisi dari dalam diri lulusan S-1 itu. Banyak
mahasiswa yang tidak menyiapkan diri dan mentalnya selama kuliah
sehingga ketika lulus tidak tahu ke arah mana harus melangkah.
Sesungguhnya apa yang dipikirkan para lulusan SMU ketika memasuki
bangku kuliah dan bidang studi yang dipilihnya? Menjadi tukang insinyur
seperti si Doel anak sekolahan? Lalu, ke mana setelah itu?

Kuliah

Lulus kuliah

Kerja

Mencari pekerjaan

kemudian menikah, dan seterusnya.

Ketentuan:
Menggunakan format dokumen HTML 5
Font menggunakan jenis: Verdana
Menggunakan Tabel dan List
Warna disesuaikan dengan contoh di atas. (Biru : #33CCFF ,
Hijau : #66FF99)
3.

Buatlah form dengan menggunakan HTML seperti tampilan berikut ini

(simpan file dengan nama: form_pelanggan.html).

Apakah para mahasiswa itu terkungkung dalam situasi dunianya sendiri

tanpa melihat dunia di luarnya seperti adanya pasar global yang dinamis dan
menuntut daya saing sangat kompetitif? Siapkan mereka menyambut pasar
bebas ASEAN (AFTA) tahun 2015? Pedulikah mereka pada pengakuan
kualitas kelulusan mereka oleh negara lain yang sangat penting untuk
persaingan global dan pasar bebas? Pedulikah mereka pada posisi sumber
daya manusia (SDM) Indonesia di antara SDM bangsa lain?
2.

Buatlah sebuah dokumen HTML untuk menampilkan informasi seperti

pada gambar berikut ini dan simpan file dengan nama: infoktp.html.

Ketentuan:
Menggunakan format dokumen HTML 5
Menggunakan tabel

42
2.14 Daftar Bacaan
1. Larsen, Rob. 2013. Beginning HTML & CSS. Indiana: John Wiley &
Sons, Inc.
2. Robson, Elisabeth dan Freeman, Eric. 2102. Head First HTML and
CSS. California: OReilly Media, Inc.
3. Ariona, Rian. 2013. Belajar HTML dan CSS: Tutorial Fundamental
Dalam Mempelajari HTML & CSS. http://www.ariona.net/ebookbelajar-html-dan-css. Diakses tanggal 10 Agustus 2014.
4. W3Schools. HTML Tutorial. http://www.w3schools.com/html/. Diakses
tanggal 10 Agustus 2014.

BAB III
CSS (CASCADING STYLE SHEET)
3
CSS (CASCADING STYLE SHEET)
RINGKASAN
CSS (Cascading Style Sheets) digunakan oleh para web designer untuk
mengatur style elemen yang ada dalam halaman web, mulai dari memformat
text, sampai pada memformat layout. Tujuan dari penggunaan CSS ini
adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu.
Dalam penulisan CSS, digunakan selector untuk menentukan elemen/tag
HTML yang ingin diberi style.
3.1 Pengenalan CSS
CSS atau Cascading Style Sheets adalah sebuah dokumen yang berisi
aturan yang digunakan untuk memisahkan isi dengan layout dalam halamanhalamn web yang dibuat. CSS memperkenalkan "template" yang berupa
style untuk dibuat dan mengizinkan penulisan kode yang lebih mudah dari
halaman-halaman web yang dirancang. CSS mampu menciptakan halaman
yang tampak sama pada resolusi layar yang berbeda dari pengunjung
berbeda tanpa memerlukan penggunaan tabel seperti pada html klasik.
Saat ini CSS merupakan style yang banyak digunakan dikarenakan
berbagai kemudahan dan lengkapnya atribut yang dimilikinya, disamping
berbagai kemudahan lain yang ditawarkannya. Penggunaan CSS dalam web
akan lebih efisien dikarenakan CSS dapat digunakan secara berulang pada
tag-tag tertentu, sehingga tidak perlu mengetikkan ulang seluruh perintah
pemformatan seperti halnya dalam html klasik.
3.2 Cara Kerja CSS
Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan
style sebagai penentu dari font, warna, dan format-format lain untuk
memformat atribut sebuah halaman web yang dibuat. Tiap style memiliki
dua buah elemen dasar, yaitu "selector" dan "declaration".
Sebuah selector biasanya adalah tag HTML, sementara declaration
adalah satu atau beberapa perintah/nilai dari CSS yang menunjukkan type
bentuk yang diaplikasikan pada selector. Declaration ini biasanya ditandai
tanda kurung kurawal "{ }", dan perintah atau nilai CSS yang berbeda
dispisahkan satu dengan lain dengan menggunakan titik koma ";" seperti
terlihat pada contoh berikut.
<style type="text/css">
.teks {
font-family:verdana;

43

44
color:blue;
}
</style>

Pada contoh tersebut terlihat bahwa .teks adalah selector, {fontfamily:verdana;color:blue;} adalah declaration.
Selector-selector dan style dalam CSS akan dimasukkan dalam sebuah
tempat yang sama dalam isi dokumen HTML atau dibuat di luar dokumen
HTML yang nantinya akan dipanggil untuk menentukan isi tampilan
dokumen HTML. Selanjutnya, dengan hanya menunjuk pada selectorselector maka akan mengaktifkan sebuah style yang diinginkan.
3.3 Penempatan CSS
Menempatkan style CSS dalam dokumen web yang dibuat dalam
bahasa HTML dapat dilakukan dengan beberapa cara dan tingkatan yang
berbeda sesuai dengan keinginan, diantaranya adalah menggunakan inline
style, internal style, external style, dan juga teknik importing dengan
internal style.
3.3.1 Inline Style
Inline style adalah CSS yang dibuat dalam sebuah tag HTML yang
hanya berlaku untuk dokumen yang diapitnya saja. Biasanya teknik ini
digunakan pada pemformatan khusus pada sebuah elemen HTML dan tidak
digunakan untuk memformat seluruh elemen dalam dokumen web.
Contohnya adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<p style="font-family:Arial; font-size:20px; backgroundcolor:yellow;">Penerapan Inline Style</p>
</body>
</html>

3.3.2 Internal Style

Pada teknik ini, style CSS diletakkan pada tengah tag antara tag
<head> dan </head>. Aturan-aturan dalam style ini diatur sedemikian rupa
untuk digunakan pada suatu tempat maupun untuk keseluruhan situs.
Contoh dari teknik ini terlihat pada contoh berikut.

45
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style>
<!-.teks{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
color: white;
background-color: blue;
}
-->
</style>
</head>
<body>
<div class="teks">Penerapan Internal Style</div>
</body>
</html>

Maksud dari <!-- aturan CSS --> di atas adalah agar browser yang
tidak mendukung CSS tidak menampilkan perintah-perintah CSS, jadi
perintah CSS di dalam <!-- --> akan dianggap sebagai komentar HTML
biasa dan tidak akan ditampilkan dalam browser.
3.3.3 Import Style
Dengan teknik ini sebuah style tidak disimpan pada halaman tersebut,
namun untuk menghubungkannya dengan halaman web yang dibuat,
digunakan perintah import yang terdapat pada style CSS, seperti pada
contoh berikut.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style>
<!-@import url('/css/styles.css');
-->
</style>
</head>
<body>
<div class="teks">Penerapan Internal Style</div>
</body>
</html>

Pada teknik di atas, dokumen HTML akan mengambil atau import

style CSS untuk dipergunakan dalam dokumen tersebut. Pada contoh di

46

47

atas, dokumen akan mengimpor file style dengan nama style yang
berekstensi .css dengan menggunakan perintah:

mendefinisikan selector, sementara value adalah nilai atau harga dari sebuah
property.

@import url('/css/styles.css');

3.3.4 External Style

Dengan menggunakan teknik ini, maka dapat memanggil style CSS
pada file CSS yang diinginkan dengan menggunakan perintah "link rel"
yang berfungsi megnhubungkan ke dalam sebuah style CSS eksternal
dengan nama yang telah kita tentukan seperti pada contoh berikut.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
...

Dalam contoh di atas, kita menghubungkan sebuah dokumen HTML

dengan sebuah style eksternal dengan nama style.css yang telah dibuat
sedemikian rupa sehingga style tersebut dihubungkan untuk menformat
tampilan dalam dokumen HTML tersebut.
3.4 Selector
Jika dalam HTML mengenal adanya tag-tag yang menyusun sebuah
dokumen HTML, maka dalam CSS juga mengenalnya dengan sebutan
selector. Selector adalah nama-nama yang diberikan untuk style-style yang
berbeda, baik itu style internal maupun eksternal. Dalam style tujuan, harus
ditentukan bagaimana tiap selector seharusnya bekerja (yang dinamakan
properties) di dalam tanda { } (curly barcket) yang dapat memiliki nilai
berupa font, warna dan lainnya. kemudian dalam body di halaman web,
arahkan ke selector-selector ini untuk mengaktifkan style tersebut.
CSS memiliki aturan tersendiri dalam penulisan sintaknya. Penulisan
sintak tersebut terbagi ke dalam tiga bagian, yaitu selector, property, dan
value. Sebagai penjelas coba perhatikan Gambar 3.1 dan contoh berikut.
selector {property: value}

Selector dalam CSS adalah elemen yang akan didefinisikan dalam

style CSS, sedangkan elemen ini dapat berupa tag HTML maupun class.
Sedangkan property dalam CSS adalah atribut yang berfungsi untuk

Gambar 3.1 Contoh kode CSS

3.4.1 Selector ID
Selector id digunakan untuk menentukan style bagian unik dari html.
Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah
halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada
sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja.
Selector ID pada syntax CSS ditandai dengan "#".
Contoh selector ID:
#par1
{
text-align:center;
color:red;
}

Pada bagian dokumen HTML, untuk menggunakan style tersebut, misalnya

pada sebuah paragraph, bisa dituliskan:
<p id="par1">Ini adalah sebuah paragraph</p>

Selain itu, penerapannya juga dapat menggunakan atribut

<div>, seperti pada contoh berikut.

<span>

ataupun

<span id="par1">Ini adalah contoh teks</span>

<div id="par1">Ini adalah contoh teks</div>

Penulisan nama id sebaiknya tidak diawali dengan nomor, karena tidak akan
dikenali pada browser Mozilla Firefox.

48
3.4.2 Selector Class
Selector class digunakan untuk menentukan style dari sebuah group
elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada
sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa
kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class
dituliskan dengan ditandai dengan tanda titik "." .
Contoh selector class:
.komentar
{
text-align:left;
color:red;
}

49
menambahkan atribut id="nama_id" ataupun atribut class
karena browser secara otomatis akan mencari tag yang akan
diberi style.

perlu

="nama_class"

3.5 Box Model

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS,
istilah "box model" digunakan ketika berbicara tentang desain dan tata letak.
CSS box model pada dasarnya adalah kotak yang membungkus di sekitar
elemen HTML, dan terdiri dari: margin, borders, padding dan konten yang
sebenarnya. Model kotak memungkinkan kita untuk menambahkan batas
elemen, dan untuk menentukan ruang antara unsur-unsur. Perhatikan
Gambar 3.2 yang mengilustrasikan box model.

Pada bagian dokumen web, misalnya akan diterapkan pada paragraph dan
pada sebuah div dalam sebuah dokumen web yang sama, dapat dituliskan:
<p class="komentar"> Ini adalah paragraph komentar </p>
<div class="komentar">Ini bagian komentar</p>

Bagian mana saja dari sebuah dokumen html yang memanggil class ini,
akan memiliki style yang sama, yakni sesuai aturan tersebut, maka tulisan
akan berada di tengah dan berwarna merah. Pada kondisi lain, apabila
menginginkan sebuah class hanya berlaku pada sebuah paragraph saja.
Untuk bagian div tidak berlaku. Aturan tersebut bisa kita tuliskan sebagai
berikut:
p.komentar {text-align:center;}

Aturan ini akan berlaku bagi setiap paragraph <p> yang memiliki
class="komentar" saja.
3.4.3 Selector HTML
Berbeda dengan selector ID dan selector class, selector HTML akan
mempengaruhi tag HTML yang diberi style. Untuk lebih jelasnya, berikut
contoh kodenya:
p {
font-family: Arial;font-size:10pt;
}

Kode di atas akan membuat semua tag <p> (paragraf) agar

ditampilkan menggunakan font Arial dengan ukuran 10pt (point). Jadi tidak

Gambar 3.2 Ilustrasi box model

Margin
Property margin digunakan untuk memberikan jarak antar elemen/tag
HTML. Misalnya jarak antar <div>dan tag-tag HTML lainnya.
Contoh:
<html>
<head>
<title>Margin</title>
<style>
.box{
background-color:green;
color: yellow;

50
width:100px;
height:100px;
margin-bottom: 50px;
}
}
</style>
</head>
<body>
<div class="box">Box ke satu</div>
<div class="box">Box ke dua</div>
</body>
</html>

Berikut pada Gambar 3.3 adalah tampilan yang diperoleh.

51

Padding
Property padding digunakan untuk memberikan jarak di sekitar content
HTML. Sebagai contoh, kita tambahkan kode CSS berikut pada class
box sebelumnya.
.box{
background-color:green;
color: yellow;
width:100px;
height:100px;
margin-bottom:50px;
padding-left: 20px;
}

Berikut pada Gambar 3.4 adalah tampilan yang diperoleh.

Gambar 3.3 Penambahan margin-bottom pada .box

Dari Gambar 3.3 terlihat jarak antara box ke satu dan box ke dua
sedikit berjauhan, karena ditambahkan margin bawah (margin-bottom)
sebesar 50px. Untuk melihat perbedaan ketika memberikan margin atau
tidak, maka dapat menghapus property margin-bottom dan perhatikan
perbedaannya. Selain margin-bottom, dapat juga diberikan jarak dari
kanan (right), kiri (left), dan atas (top), seperti berikut ini.
margin-top:20px;
margin-right:30px;
margin-bottom:50px;
margin-left:40px;

Gambar 3.4 Pemberian padding pada .box

Dari Gambar 3.4 terlihat jarak antara teks (content) yang berada dalam
box. Perlu diperhatikan juga, bahwa ketika menambahkan padding,
ukuran .box juga akan berubah. Misalnya kita menentukan ukuran lebar
dari .box sebesar 100px. Ketika kita menambahkan padding-left sebesar
20px, maka total lebar dari .box tersebut menjadi 120px.
Jadi jika menginginkan ukuran .box tetap 100px, maka harus
menghitung ulang width dari box tersebut. Misalnya diubah menjadi
80px. Dengan begitu, 80px + 20px menjadi 100px.

52

CSS-Shorthand
Pada pembahasan sebelumnya, dapat disimpulkan bahwa setiap
property dapat memiliki lebih dari satu jenis, misalnya margin dapat
memiliki 4 jenis: margin-top, margin-right, margin-bottom, dan marginleft.
Daripada menuliskan seluruh property tersebut, maka dapat
menggunakan CSS-Shorthand yaitu menggabungkan seluruh value (top,
right, bottom, dan left) ke dalam satu property. Sebagai contoh, kita
akan menggunakan CSS-shorthand untuk property margin menjadi
seperti berikut:

53
border-color: black;
border-style: solid;
border-width: 5px;

Namun dapat juga menggunakan CSS shorthand sehingga menjadi

seperti berikut:
border: width style color;

Jadi jika diubah contoh kode di atas menjadi CSS-shorthand, kodenya

menjadi seperti berikut:
border : 5px

solid

black;

margin : 20px 30px 50px 40px;

Masing-masing dari nilai tersebut adalah :

Apabila property border ini ditambahkan pada kode class .box

sebelumnyasehinggaakan mendapatkan hasil seperti berikut ini.

margin : top right bottom left;

Contoh lainnya:
margin:10px 5px 15px 20px;
o top margin berukuran 10px
o right margin berukuran 5px
o bottom margin berukuran 15px
o left margin berukuran 20px
margin:10px 5px 15px;
o top margin berukuran 10px
o right dan left margins berukuran 5px
o bottom margin berukuran 15px
margin:10px 5px;
o top dan bottom margins are 10px
o right and left margins are 5px
margin:10px;
o all four margins are 10px
Penggunaan nilai seperti ini juga berlaku pada padding, dan propertyproperty sejenis lainnya.

Border
Property border digunakan untuk memberikan garis pinggir pada
elemen, setidaknya ada tiga property yang harus diset, yaitu color,
style dan width.

Gambar 3.5 Penambahan border pada .box

Sama halnya dengan padding, penambahan property border juga akan
merubah ukuran dari .box. Ketika ingin membuat ukuran lebar .box
tetap 100px, maka harus menghitung ulang width dari .box tersebut.

54
Dengan memberikan border pada seluruh sisi .box, artinya jika
ditentukan ukuran border sebesar 5px, maka 10px (untuk width, karena
5px untuk left, dan 5px untuk right) akan ditambahkan pada ukuran
.box tersebut, sehingga ukuran .box berubah kembali menjadi 110px.
Untuk itu kurangi width dari .box tersebut menjadi 70px
sehingga: 70px (width) + 20px (padding) + 10px (border) = 100px.
Adapun skema box model dari kasus di atas adalah seperti ditunjukan
pada Gambar 3.6 berikut ini.

55
Contohnya:
font-family: calibri, arial, tahoma, verdana, sans-serif;

Ketika font jenis calibri tidak ditemukan, maka yang akan digunakan
adalah arial, ketika tidak ditemukan font arial maka tahoma yang akan
digunakan, begitu seterusnya sampai kita tentukan jenis font yang dipakai,
sans-serif atau serif dan browser akan menggunakan font yang sesuai
dengan jenis yang disebutkan (serif atau sans-serif). Perlu diperhatikan,
ketika nama font memiliki spasi, maka kita harus memberikan tanda
petik/kutip pada nama font tersebut. Misalnya "Lucida Sans Unicode".
Dalam typography jenis font dibagi menjadi dua yakni serif dan sansserif. Bagian ini akan menjelaskan secara singkat perbedaan dari kedua jenis
font ini.

Serif
Kata Serif bisa diartikan sebagai kait, jadi jenis huruf serif memiliki
kait disetiap ujung hurufnya. Font jenis serif yang paling terkenal
adalah Times New Roman. Perhatikan detail hurufnya seperti terlihat
pada Gambar 3.7 berikut ini.

Gambar 3.6 Skema box model

3.6 Typography
Secara default (bawaan), halaman web yang dibuat akan menggunakan
font standar yaitu Times New Roman. Namun dapat pula merubahnya
dengan property font-family. Berikut contoh penggunaan property fontfamily:

Gambar 3.7 Font jenis serif memiliki kait di setiap ujungnya

font-family: calibri;

Namun perlu diperhatikan bahwa tidak semua PC memiliki font yang

kita tentukan, misalnya ketika menentukan font-family dengan calibri, maka
pada PC dengan sistem operasi Linux, tidak akan ditemukan font-tersebut.
Untuk itu, dapat diberikan lebih dari satu jenis font, font-font yang
disebutkan selanjutnya akan menjadi pengganti ketika font sebelumnya
tidak ditemukan.

Font jenis ini bisa digunakan untuk teks dengan konteks formal atau
gaya klasik. Namun dapat memadupadankan jenis font ini sehingga
memberikan kesan tertentu pada halaman web.
Sans-serif
Arti dari sans, adalah tanpa. Jadi sans-serif bisa diartikan sebagai
jenis font tanpa kait seperti terlihat pada Gambar 3.8. Yang paling
umum digunakan untuk jenis sans-serif adalah Arial.

56

57
Dan untuk membuat text menjadi rata kiri, tengah atau kanan, kita gunakan
property text align. Nilai yang dapat digunakan adalah left, center, right, dan
justify untuk rata kiri-kanan.
text-align : center;

Untuk menentukan ukuran font, digunakan property font-size :

3.7 CSS Image

Bagian ini akan membahas bagaimana menggunakan sebuah gambar
menjadi background untuk suatu elemen. Pada bagian ini dibahas
penggunaan background-image, background-repeat, background-position,
dan image sprite.

font-size : 12px;

a.

Gambar 3.8 Font jenis sans serif

Selain itu dapat menggunakan satuan pt (point) untuk ukuran font :

background-image
Untuk memanggil gambar sebagai background dari elemen, digunakan
property background-image. Perhatikan contoh penggunaan property
ini:

font-size : 12pt;
background-image : url('background.jpeg');

Font yang digunakan pun dapat ditentukan ketebalannya dengan

menggunakan property font-weight. Nilai yang bisa dipakai pada property
ini adalah normal, bold, bolder.

Ketika menggunakan gambar dengan ukuran kecil maka

gambar background ditampilkan secara berulang untuk memenuhi
seluruh element tersebut.

font-weight : bold;

Bukan tidak mungkin untuk mengatur kerning atau jarak antar huruf. Dalam
CSS bisa merubah jarak antar huruf dengan property letter-spacing.
letter-spacing : 15px;

Semakin besar nilai pixel yang diberikan semakin jauh jarak antar huruf.
Selain itu dapat pula menggunakan nilai negatif untuk memperdekat jarak
antar huruf.
letter-spacing : -2px;

Sedangkan untuk memberikan jarak antar baris, kita gunakan property lineheight.
line-height : 30px;

Contoh:
<html>
<head>
<title>Background</title>
<style type="text/css">
#box{
width : 300px;
height :300px;
background-image : url('background.jpeg');
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

Hasilnya terlihat seperti pada Gambar 3.9.

58

59
Pengulangan secara vertikal, dapat dilakukan dengan menambahkan
kode CSS berikut ini.
background-repeat : repeat-y;

Hasilnya dapat dilihat pada Gambar 3.11 berikut ini.

Gambar 3.9 Background terus diulang untuk memenuhi ukuran elemen

b. background-repeat
Pengulangan
gambar
background
dapat diatur
dengan
menggunakan property background-repeat. Pengulangan gambar
dapat dilakukan secara horisontal (sesuai sumbu x) atau secara
vertikal (y) atau dapat pula tidak mengulangi background tersebut.
Pengulangan secara horisontal,
menambahkan kode CSS berikut ini.

dapat

dilakukan

dengan

background-repeat : repeat-x;

Hasilnya dapat dilihat pada Gambar 3.10 berikut ini.

Gambar 3.11 Repeat y akan mengulang background secara vertikal

Gambar background juga dapat tidak dilakukan pengulangan, yang
dilakukan dengan menambahkan kode CSS berikut ini.
background-repeat : no-repeat;

Hasilnya dapat dilihat pada Gambar 3.12 berikut ini.

Gambar 3.10 Repeat x akan mengulang background secara horisontal

Gambar 3.12 No repeat, background tidak diulang

c.

60

61

background-position
Posisi gambar background dapat ditentukan letaknya dengan
menentukan property value-nya, seperti: left top, left center, left
bottom, right top, right center, right bottom, center top, center center,
center bottom. Selain itu, dapat pula digunakan value yang berupa jarak
x (horisontal) dan y (vertikal).

d. Image Sprite
Image Sprite adalah sekumpulan gambar berbeda yang disatukan dalam
satu file gambar. Teknik ini dilakukan untuk mempercepat loading
website tanpa harus memanggil beberapa file gambar yang banyak.
Cukup menggunakan satu gambar dan kemudian menentukan bagian
gambar yang ingin ditampilkan.

background-position: value;

Sebagai contoh, kode berikut akan menggeser background-image

sebesar 50px dari kiri (horisontal) dan sebesar 20px ke bawah
(vertikal).

Contoh:
Daripada menggunakan tiga gambar terpisah, maka dapat menggunakan
gambar tunggal ini ("img_navsprites.gif"):

background-position-x : 50px 20px;

atau dengan kode CSS lengkap:

.....
<style type="text/css">
#box{
width : 300px;
height :300px;
background-image : url('background.jpeg');
background-repeat : no-repeat;
background-position : 50px 20px;
}
</style>
.....

Hasil yang diperoleh dapat dilihat pada Gambar 3.13 berikut ini.

Dengan CSS maka dapat ditentukan bagian dari gambar yang ingin
digunakan, seperti pada kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<div id="home"></div><br />
<div id="next"></div>
</body>
</html>

Dari kode tersebut, hasil yang diperoleh dapat dilihat pada Gambar
3.14.
Gambar 3.13 Background bergeser selebar sebesar 50px dari kiri
(horisontal) dan sebesar 20px ke bawah (vertikal)

62

63

Gambar 3.15 Penambahan float akan mempengaruhi elemen di sekitarnya

Gambar 3.14 Contoh penggunaan image sprite
3.8 Floating
CSS float digunakan untuk mengatur letak posisi suatu elemen HTML,
baik di posisi sebelah kiri atau sebelah kanan.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Image Sprite</title>
<style>
img {
float: left;
padding: 10px;
}
</style>
</head>
<body>
<img src="logo.jpeg" alt="gambar" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere, magna sed
pulvinar ultricies, purus lectus malesuada libero, sit amet
commodomagna eros quis urna.</p>
</body>
</html>

Style yang ditambahkan akan membuat elemen image berada pada posisi
sebelah kiri, dan paragraf akan naik ke atas dan berada di sebelah kanan
image, seperti terlihat pada Gambar 3.15.

Permasalahan pada floating

Ada satu permasalahan ketika menambahkan floating pada suatu
elemen, permasalahan ini dapat ditemui seperti contoh kasus berikut.
<!DOCTYPE html>
<html>
<head>
<title>Floating</title>
<style>
#wrapper{
width : 960px;
margin : 0 auto;
/*agar wrapper tetap berada di tengah */
}
#header {
width:100%;
height:50px;
background: orange;
margin-bottom: 10px;
}
#content{
padding:20px;
background : green;
margin-bottom : 10px;
}
#artikel{
width : 600px;
height : 700px;
float : left;
background: orange;
}
#sidebar {
width : 300px;
height: 200px;
float : right;

64
background: orange;
}
#footer{
width : 100%;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="artikel"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Apabila contoh file tersebut dibuka pada browser, maka tampilan yang
diperoleh adalah seperti Gambar 3.16 berikut ini.

65
yang ada, dan perhatikan bahwa #artikel dan #sidebar berada di dalam
#content.
Hal ini dikarenakan penambahkan floating pada #artikel dan
#sidebar, sehingga #content menganggap tidak ada elemen di dalamnya.
Ada dua cara untuk menyelesaikan kasus ini:
1.

Menambahkan style overflow:hidden pada #content

#content{

overflow:hidden;
}

2.

Menambahkan div kosong dengan style clear:both; sebelum penutup

content

<div id="sidebar"></div>
<div style="clear:both;"></div>
</div>

Hasil yang diperoleh setelah dilakukan perbaikan dapat dilihat pada Gambar
3.17 berikut ini.

Gambar 3.16 Permasalahan saat menerapkan floating

Pada Gambar 3.16, dapat diperhatikan bahwa #content tidak
memenuhi isi dari #artikel dan #sidebar. Seharusnya tinggi #content
otomatis sama dengan tinggi dari elemen tertinggi di dalamnya, dalam kasus
ini adalah artikel dengan tinggi 700px. Dengan begitu seharusnya tinggi dari
#content adalah 740px (ditambah dengan padding-top dan paddingbottom). Jika anda tidak mengerti cobalah untuk membuang property float

Gambar 3.17 Penyelesaian masalah floating

Dari contoh kasus sebelumnya, jadi float berarti melayang. Ketika
memberikan float pada elemen maka elemen tersebut seolah-olah melayang
dan elemen di atasnya (parent) menganggap tidak ada elemen di
dalamnya (child).

66

67

<style>
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

CSS Reset
Setiap browser memiliki style atau file CSS yang akan diterapkan pada
setiap halaman web yang dibuka. Keberadaan style yang dimiliki browser
ini sangat membantu namun terkadang juga membingungkan bagi sebagian
orang.
CSS Reset berfungsi untuk mereset atau mengatur ulang seluruh
property-property yang telah disetting oleh browser, seperti margin,
padding, warna huruf (link) ukuran huruf heading dan lain sebagainya.
Perhatikan CSS contoh berikut.
* {
margin:0;
padding:0;

Ketika tidak memberikan nilai pada properti position, maka secara

default, #box memiliki position:static, jadi tidak dapat
menggunakan properti top, right, bottom dan left untuk
menentukan posisi #box tersebut. Hasil yang diperoleh dapat dilihat
pada Gambar 3.18 berikut ini.

Selector bintang (*) digunakan untuk memberikan style pada seluruh

elemen/tag HTML. Dalam kasus ini, akan mengatur ulang margin dan
padding menjadi 0 pada seluruh elemen HTML yang ada.
3.9 Positioning
CSS positioning property memungkinkan untuk mengatur posisi suatu
elemen. Juga dapat menempatkan sebuah elemen di belakang lainnya, dan
menentukan apa yang harus terjadi ketika sebuah elemen konten terlalu
besar. Elemen dapat diposisikan menggunakan properti top, bottom, left,
dan right. Namun, properti ini tidak akan bekerja kecuali properti position
diatur terlebih dahulu. Elemen akan memiliki posisi berbeda tergantung
metode posisi yang digunakan.

1.

Ada empat metode posisi yang berbeda, yaitu:

Static
Secara default, seluruh elemen/tag HTML memiliki positioning static.
Artinya belum bisa atau tidak dapat menentukan posisi elemen tersebut.
Ketika ingin merubah posisi dari elemen tersebut maka harus
memberikan position:relative dan selanjutnya baru dapat menggunakan
properti top, right, bottom, dan left untuk menentukan posisi elemen
yang bersangkutan.
Sebagai contoh perhatikan kode HTML dan CSS berikut.
<!DOCTYPE html>
<html>
<head>
<title>Positioning</title>

Gambar 3.18 Box static tidak dapat ditentukan posisinya

2.

Relative
Elemen posisi yang diset dengan properti position:relative, maka letak
elemen tersebut relatif terhadap posisi normal. Letaknya juga
disesuaikan dengan nilai yang diset untuk properti top, right, bottom
dan left.

68
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Positioning</title>
<style>
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
position : relative;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

Perhatikan bahwa box bergeser 100px dari atas dan 200px dari kiri.
Hasil yang diperoleh dapat dilihat pada Gambar 3.19 berikut ini.

69
Sebagai contoh perhatikan kode HTML dan CSS berikut.
<!DOCTYPE html>
<html>
<head>
<title>Positioning</title>
<style>
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
}
#box2{
background : yellow;
width : 50px;
height : 50px;
top : 100px;
left : 200px;
}
</style>
</head>
<body>
<div id="box">
<div id="box2"></div>
</div>
</body>
</html>

Hasil yang diperoleh dapat dilihat pada Gambar 3.20 berikut ini.

Gambar 3.19 Penempatan position relative memungkinkan

penempatan box
3.

Absolute
Penambahan position:absolute akan membuat elemen tersebut terlepas
dari aturan penempatan elemen dan dibatasi oleh parent yang memiliki
positioning relative.

Gambar 3.20 Child elemen akan berada di dalam parent-nya

70
#box2 secara aturan ditampilkan berada di dalam div #box, #box2 dapat
terlepas dari aturan tersebut dengan menambahkan positioning absolute.

71
Hasil yang diperoleh dapat dilihat pada Gambar 3.22 berikut ini.

Contoh:
#box2{
background : yellow;
width : 50px;
height : 50px;
position : absolute;
bottom : 0;
right : 200px;
}

Hasil yang diperoleh dapat dilihat pada Gambar 3.21 berikut ini.

Gambar 3.22 Posisi absolute dapat dibatasi oleh elemen dengan

posisi relative
Seperti terlihat pada Gambar 3.22, sekarang #box2 berada di kanan
bawah parentnya #box. Selanjutnya, dapa pula mencoba untuk
menggunakan nilai negative untuk mendapat efek tertentu.
Contoh:

Gambar 3.21 #box2 akan terlepas dari parent ketika ditambahkan

position absolute
Pada Gambar 3.21 terlihat #box2 akan terlepas dari aturan penempatan
elemen (keluar dari #box) dan berada di kanan bawah browser. Untuk
membatasi pergerakan dari #box2 yang memiliki positioning absolute,
maka harus menambahkan positioning relative pada parentnya yakni
#box.
Contoh:
#box{
background : green;
width : 300px;
height : 300px;
position : relative;
}

<!DOCTYPE html>
<html>
<head>
<title>Positioning</title>
<style>
#box{
background : green;
width : 300px;
height : 300px;
position : relative;
}
#box2{
width:50px;
height:50px;
background:yellow;
position:absolute;
bottom: -25px;
right:20px;
}
</style>
</head>

72
<body>
<div id="box">
<div id="box2"></div>
</div>
</body>
</html>

Hasil yang diperoleh dapat dilihat pada Gambar 3.23 berikut ini.

73
Pada contoh tersebut tombol untuk sharing via facebook atau twitter
dan nomor posting ditampilkan berjajar secara vertical dan setengah
keluar dari kotak artikel.
4.

Fixed
Sifat dari position fixed hampir sama dengan absolute, namun posisi
dari elemen fixed akan tetap berada posisi yang ditentukan walaupun
browser di-zoom-in/out atau di-scroll ke atas atau ke bawah.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Positioning</title>
<style>
#box{
background : green;
width : 300px;
height : 300px;
position : relative;
}

Gambar 3.23 Pengaturan posisi dengan absolute

Perhatikan contoh penggunaan absolute position yang sering ditemukan
di internet berikut :

#box2{
width:50px;
height:50px;
background:yellow;
position:absolute;
bottom: -25px;
right:20px;
}
#social{
width:30px;
height:100px;
background:red;
position:fixed;
left:0;
top:100px;
}
</style>
</head>
<body>
<div id="box">
<div id="box2"></div>
<div id="social"></div>
</div>
</body>
</html>

Gambar 3.24 Contoh kasus penggunaan absolute position

74

75

Hasil yang diperoleh dapat dilihat pada Gambar 3.25 berikut ini.

Gambar 3.26 Pseudo-Class :hover memberikan efek ketika cursor berada di

atas elemen

Pseudo-Class untuk Link/Anchor

Ada beberapa pseudo-class untuk anchor/link yakni :
/* untuk link yang belum di klik */
a:link { color: blue; }
/* untuk link yang sudah di klik */
a:visited { color:green; }

/* ketika cursor berada di atas link */

a:hover { color:red; }

Gambar 3.25 Penggunaan position fixed

/* ketika link dalam keadaan aktif atau terpilih */

a:active { color: orange; }

Pada Gambar 3.25, terlihat #social ditempatkan pada sisi sebelah kiri,
dimana memiliki positioning fixed. Jadi walaupun browser di-zoomin/out atau di-scroll ke atas atau ke bawah maka #social akan tetap
berada pada posisi tersebut.

Perhatikan juga urutan ketika penulisan semua pseudo class

tersebut (Jika bermaksud menuliskan seluruh pseudo class untuk
link):
:hover harus ditulis sesudah :link dan :visited
:active harus ditulis sesudah :hover.

3.10 Pseudo-class
Pseudo Class digunakan untuk memberikan efek-efek tertentu pada
selector. Misalnya efek ketika cursor berada di atas suatu elemen (hover),
ketika cursor meng-klik suatu elemen dan lain sebagainya.

Jika tidak demikian maka efek tersebut tidak akan berjalan dengan
baik.

Berikut adalah cara penulisan pseudo class :

selector:pseudo-class { property:value; }

Misalnya akan menambahkan pseudo-class :hover pada sebuah link:

a:hover {
color : red;
}

Style tersebut akan memberikan efek perubahan warna link menjadi merah
ketika cursor berada di atasnya, seperti terlihat pada Gambar 3.26.

Pseudo-Class :first-child dan :last-child

Selain pseudo-class untuk link/anchor ada juga pseudo class :firstchild dan :last-child. Keduanya digunakan untuk memilih elemen
pertama dan terakhir dari suatu selector.
Misalnya mempunyai sebuah unordered list (ul), dengan beberapa
list-item di dalamnya. Selanjutnya dapat memberikan style khusus
untuk list-item yang pertama dan yang terakhir dengan
menggunakan :first-child dan :last-child.
<ul>
<li>Item ke 1</li>

76
<li>Item
<li>Item
<li>Item
<li>Item
</ul>

ke
ke
ke
ke

2</li>
3</li>
4</li>
5</li>

Dan jika menambahkan style berikut:

ul li:first-child{
color:green;
}
ul li:last-child{
color:orange;
}

Maka hasil yang diperoleh dapat dilihat pada Gambar 3.27 berikut ini.

Gambar 3.27 Pemberian pseudo class :first-child dan :last-child

Pada Gambar 3.17, terlihat list-item yang pertama akan memiliki
warna huruf hijau dan yang terakhir memiliki warna orange.
3.11 Pseudo-element
Pseudo-element digunakan untuk memberikan style untuk bagian
khusus dari sebuah elemen. Pseudo element dalam CSS ditempatkan dalam
sebuah selector, sama seperti pada pseudo class. Penulisannya adalah
sebagai berikut.
selector:pseudo-element {
property:value;
}

Contoh penggunaan pseudo element adalah mengatur style untuk huruf dan
baris pertama. Untuk membuat huruf besar dan huruf tebal baris pertama
pada paragraf dapat dilakukan dengan menggunakan kode berikut.
p:first-letter { color: #ff0000; font-size: xx-large; }
p:first-line {font-weight: bold;}

77
3.12 Rangkuman
1. CSS atau Cascading Style Sheets adalah sebuah dokumen yang berisi
aturan yang digunakan untuk memisahkan isi dengan layout dalam
halaman-halamn web yang dibuat. CSS memperkenalkan "template"
yang berupa style untuk dibuat dan mengizinkan penulisan kode yang
lebih mudah dari halaman-halaman web yang dirancang.
2. CSS hanya membutuhkan style sebagi penentu dari font, warna, dan
format-format lain untuk memformat atribut sebuah halaman web yang
dibuat. Tiap style memiliki dua buah elemen dasar, yaitu "selector" dan
"declaration".
3. Penempatan style CSS dalam dokumen web yang dibuat dalam bahasa
HTML dapat dilakukan dengan beberapa cara dan tingkatan yang
berbeda sesuai dengan keinginan, diantaranya adalah menggunakan
inline style, internal style, external style, dan juga teknik importing
dengan internal style.
4. CSS memiliki aturan tersendiri dalam penulisan sintaknya. Penulisan
sintak tersebut terbagi ke dalam tiga bagian, yaitu selector, property,
dan value.
5. Selector dalam CSS adalah elemen yang akan didefinisikan dalam style
CSS, sedangkan elemen ini dapat berupa tag HTML maupun class.
Sedangkan property dalam CSS adalah atribut yang berfungsi untuk
mendefinisikan selector, sementara value adalah nilai atau harga dari
sebuah property. Ada beberapa jenis selector dalam CSS, yakni selector
id, selector class, dan selector HTML
3.13 Tugas/Soal Latihan
1. Jelaskan apa kelebihan penggunaan CSS dalam membuat halamanhalaman web!
2. Sebutkan dan jelasakan cara penempatan style CSS dalam dokumen
web!
3. Jelaskan apa yang dimaksud dengan selector dalam style CSS!
4. Ada beberapa jenis selector dalam CSS, yakni selector id, selector class,
dan selector HTML. Jelaskan apa perbedaan dari ketiga jenis selector
tersebut!
5. Buatlah sebuah website pribadi bersifat statis dengan memanfaatkan
HTML dan CSS!
Ketentuan: Desain layout dapat anda tentukan sendiri. Dalam website
tersebut minimal terdapat halaman: Home, Profil, dan Kontak. Anda
dapat menambahkan halaman lain yang relevan.

78
3.14 Daftar Bacaan
1. Mansfield, Richard. 2005. CSS Web Design For Dummies. Indiana:
Wiley Publishing, Inc.
2. Larsen, Rob. 2013. Beginning HTML & CSS. Indiana: John Wiley &
Sons, Inc.
3. Robson, Elisabeth dan Freeman, Eric. 2012. Head First HTML and
CSS. California: OReilly Media, Inc.
4. Kadir, Abdul. 2011. From Zero to a Pro: CSS - Tip dan Trik untuk
Menyertakan Cascading Style Sheet dalam Halaman web. Yogyakarta:
Penerbit Andi.
5. Ariona, Rian. 2013. Belajar HTML dan CSS: Tutorial Fundamental
Dalam Mempelajari HTML & CSS. http://www.ariona.net/ebookbelajar-html-dan-css. Diakses tanggal 10 Agustus 2014.
6. W3Schools. CSS Tutorial. http://www.w3schools.com/css/default.asp.
Diakses tanggal 12 Agustus 2014.

BAB IV
DASAR PEMROGRAMAN PHP
4
DASAR PEMROGRAMAN PHP
RINGKASAN
PHP atau merupakan singkatan rekursif dari PHP : Hypertext
Preprocessor adalah suatu bahasa pemrograman yang termasuk kategori
server side programming, dimana nantinya script/program akan dijalankan
oleh server dan hasil pengolahan script/program tersebut akan dikirim ke
client sebagai output. Secara khusus, PHP dirancang untuk membentuk web
dinamis. Berbeda dengan HTML yang hanya bisa menampilkan konten
statis, PHP bisa berinteraksi dengan database, file dan folder, sehingga
membuat PHP bisa menampilkan konten yang dinamis dari sebuah website.
4.1 Pengenalan PHP
Bahasa pemrograman PHP diciptakan oleh Rasmus Lerdorf, pada
tahun 1995. PHP atau merupakan singkatan rekursif dari PHP : Hypertext
Preprocessor adalah suatu bahasa pemrograman yang termasuk kategori
server side programming. Server side programming adalah jenis bahasa
pemrograman yang nantinya script/program tersebut akan dijalankan oleh
server. Selanjutnya hasil pengolahan script/program tersebut akan dikirim
ke client sebagai output.
Secara khusus, PHP dirancang untuk membentuk web dinamis.
Berbeda dengan HTML yang hanya bisa menampilkan konten statis, PHP
bisa berinteraksi dengan database, file dan folder, sehingga membuat PHP
bisa menampilkan konten yang dinamis dari sebuah website. PHP adalah
bahasa scripting, bukan bahasa tag-based seperti HTML. PHP termasuk
bahasa yang cross-platform, ini artinya PHP bisa berjalan pada sistem
operasi yang berbeda-beda (Windows, Linux, ataupun Mac). Program PHP
ditulis dalam file plain text (teks biasa) dan mempunyai akhiran ".php".
Untuk dapat berjalan, PHP membutuhkan web server, yang bertugas
untuk memproses file-file php dan mengirimkan hasil pemrosesan dalam
bentuk HTML untuk ditampilkan di browser client. Secara sederhana,
prinsip kerja PHP dapat dilihat pada Gambar 4.1. Web server sendiri adalah
software yang di-install pada komputer server yang berada di jaringan
intranet atau internet yang berfungsi untuk melayani permintaan-permintaan
web dari client. Web server yang paling banyak digunakan saat ini untuk
PHP adalah "Apache" (www.apache.org). Selain Apache, PHP juga
memerlukan PHP binary (www.php.net) yang bisa dikonfigurasikan sebagai
modul Apache atau pun sebagai aplikasi CGI (Common Gateway Interface).
Untuk media penyimpanan datanya (database server), PHP biasa

79

80

81

menggunakan "MySQL" (www.mysql.com) walaupun PHP juga

mendukung banyak DBMS (Database Management System) lainnya.
Untuk meng-install dan mengkonfigurasi ketiga software tersebut
(Apache, MySQL, PHP) agar dapat berjalan dan saling terhubung, memang
cukup sulit. Maka dari itu dibuatlah paket software LAMP, XAMPP,
MAMP, WAMP, dan lain-lain untuk membantu proses instalasi dan
konfigurasi. Dalam satu kali instalasi, sudah mencakup ketiga software
tersebut dan sudah dikonfigurasi untuk keperluan lingkungan
pengembangan aplikasi web. Sehingga, programmer web hanya tinggal
menulis program PHP dan langsung menjalankan atau melakukan tes
terhadap program yang ditulis tersebut melalui web browser. Untuk
mendapatkan paket software web server tersebut dapat men-download dari
website yang bersangkutan (untuk XAMPP: http://www.apachefriends.org
dan untuk WampServer: http://www.wampserver.com/en/).

Blok scripting PHP selalu diawali dengan <?php dan diakhiri dengan
Blok scripting PHP dapat ditempatkan dimana saja di dalam dokumen.
Setiap baris kode PHP harus diakhiri dengan semikolon (;). Semikolon ini
merupakan separator yang digunakan untuk membedakan satu instruksi
dengan instruksi lainnya.
Script PHP yang dibuat harus disimpan dalam ekstensi .php.
Apabila tidak, maka script tidak akan bisa dijalankan dan hanya dianggap
sebagai teks biasa. Dahulu script PHP dapat juga disimpan dalam bentuk
ekstensi .php3, namun hal ini berlaku untuk PHP versi 3.x saja. Sejak
rilis 4.x ke atas, ekstensi tersebut tidak digunakan lagi.
Untuk dapat dijalankan, script PHP yang dibuat harus diletakkan
dalam root direktori dari web server. Sebagai contoh, apabila
menggunakan XAMPP yang di-install pada komputer local (localhost)
dengan sistem operasi Windows, script PHP diletakkan dalam direktori
C:\xampp\htdocs.
?>.

Contoh script PHP dalam dokumen HTML:

<html>
<head>
<title>Halaman PHP pertamaku</title>
</head>
<body>
<h1>Script PHP dalam HTML</h1>
<?php
echo "Hello World!";
echo "Hello World!";
echo "Hello World!";
echo "Hello World!";
echo "Hello World!";
?>
</body>
</html>

Gambar 4.1 Prinsip kerja PHP

4.2 Struktur Dasar Script PHP
Kode PHP disimpan sebagai plain text dalam format ASCII, sehingga
kode PHP dapat ditulis hampir di semua editor text seperti windows
notepad, windows wordpad, Notepad++, dan lainnya. Kode PHP adalah
kode yang disertakan di sebuah halaman HTML dan kode tersebut
dijalankan oleh server sebelum dikirim ke browser. Kode-kode PHP
dituliskan diantara tanda berikut ini.
<?php ..... ?>

Pada contoh script di atas, karena dalam dokumen HTML di atas

terdapat script PHP, maka file di atas nantinya juga harus disimpan
menggunakan ekstensi .php, bukan .htm atau .html. Misalnyadisimpan
dengan nama test1.php dalam folder 'test' dan untuk memanggilnya
menggunakan URL http://localhost/test/test1.php
a.

Penggunaan variabel
Variabel dalam pemrograman digunakan untuk menyimpan suatu nilai
dan jika suatu saat nilai tersebut diperlukan kembali untuk proses
perhitungan, maka cukup memanggil nama variabel tersebut.

82
Dalam PHP, nama suatu variabel ditandai dengan tanda $. Berikut ini
adalah sintaks untuk menyimpan nilai ke dalam suatu variabel (dikenal juga
dengan istilah assignment).
$namaVariabel = nilai;

Adapun beberapa aturan penulisan nama variabel adalah sebagai

berikut:
Nama variabel harus diawali dengan huruf atau underscore ( _ )
Nama variabel hanya boleh dituliskan dengan alpha numeric a-z, A-Z,
0-9 dan underscore
Nama variabel yang terdiri lebih dari satu kata, dapat dipisahkan
dengan underscore
Berikut ini beberapa contoh menyimpan nilai ke dalam variabel.

83
$sebuah_bilangan = 4;
$bilanganYangLain = 8.567;
$teks2 = $teks;
echo $teks;
echo "<br />" . $sebuah_bilangan;
echo "<br />Isi dari variabel \$bilanganYangLain : " .
$bilanganYangLain;
echo "<br />Isi dari variabel \$teks2 adalah : " . $teks2;
?>

Keterangan:
Tanda titik (dot) digunakan untuk menggabungkan string. Dalam hal
ini, nilai yang akan ditampilkan dianggap sebagai suatu string.
Tanda backslash (\) di depan $ pada script di atas digunakan untuk
menampilkan tanda $ ke dalam browser.

<?php
$teks = "Hello World!";
$sebuah_bilangan = 4;
$bilanganYangLain = 8.567;
$teks2 = $teks;
?>

Menyisipkan komentar dalam script PHP

Seperti halnya bahasa pemrograman yang lain, komentar dalam suatu
kode PHP tidak akan dieksekusi atau diproses. Biasanya komentar
digunakan untuk memberikan deskripsi tentang script secara keseluruhan
atau memberikan penjelasan pada baris perintah tertentu.

Keterangan:
Perintah pertama digunakan untuk menyimpan nilai berupa string ke
dalam variabel bernama $teks.
Perintah kedua digunakan untuk menyimpan nilai berupa bilangan bulat
4 ke dalam variabel bernama $sebuah_bilangan.
Perintah ketiga digunakan untuk menyimpan nilai berupa bilangan riil
8.567 ke dalam variabel bernama $bilanganYanglain.
Perintah keempat digunakan untuk menyimpan nilai yang tersimpan
dalam variabel $teks, dalam hal ini juga "Hello World!".

Terdapat dua cara memberikan komentar dalam PHP, yaitu:

Menggunakan tanda // di depan teks komentar. Perintah ini hanya bisa
berlaku untuk komentar dalam satu baris
Menggunakan tanda /* di depan teks komentar dan diakhiri dengan */.
Perintah ini dapat digunakan untuk komentar yang terdiri lebih dari satu
baris.

Catatan Penting:
Besar kecilnya huruf dalam nama variabel sangat berpengaruh. Maksudnya
misalnya membuat variabel $a dengan $A, keduanya adalah berbeda. Sifat
ini dinamakan case sensitive.
b. Menampilkan nilai variabel
Untuk menampilkan nilai yang telah tersimpan dalam variabel,
digunakan echo. Berikut ini contoh penggunaannya:
<?php
$teks = "Hello World!";

c.

Contoh:
<?php
echo "Hello World!"; // perintah ini akan mencetak Hello World!
?>
Contoh yang lain:
<?php
/*
Berikut ini adalah perintah
untuk menampilkan teks Hello World
pada browser
*/
echo "Hello World!";
?>

84
4.3 Operator
Operator adalah simbol yang digunakan dalam program untuk
melakukan suatu operasi, misalnya penjumlahan atau perkalian,
perbandingan kesamaan dua buah nilai, atau bahkan memberikan nilai ke
variabel. Nilai yang dioperasikan oleh operator (disebut operand atau
argumen) bersama-sama operator membentuk ekspresi (ungkapan). sebagai
contoh:
2 + 3 * 4

disebut ekspresi. Tanda + dan * disebut operator, sedangkan 2, 3 dan 4

adalah operand atau argumen.
Ada beberapa macam operator yang bisa digunakan, diantaranya
adalah operator aritmetika, operator penugasan, operator perbandingan dan
operator logika.
a.

Operator Aritmetika
Operator aritmetika digunakan untuk operasi perhitungan yang
melibatkan nilai berupa bilangan atau dalam operasi matematika. Ada
beberapa macam operator aritmetika seperti terlihat pada Tabel 4.1 berikut
ini.
Tabel 4.1 Operator Aritmetika pada PHP
Operator
Makna
Contoh
Penjumlahan
+
2+4
Pengurangan
6-2
Perkalian
*
5*3
Pembagian
/
15 / 3
Modulus/sisa
hasil
bagi
%
43 % 10
Increment
x=5;
x++
++
Decrement
x=5; x-
Contoh script:
<?php
$penjumlahan
$pengurangan
$perkalian =
$pembagian =
$modulus = 5
echo "Hasil:
echo "Hasil:
echo "Hasil:

85
echo "Hasil: 15 / 3 = " . $pembagian."<br>";
echo "Hasil: 5 % 2 = " . $modulus;
?>

Tingkat Presedensi
Perlu berhati-hati dalam menggunakan operator aritmetika, terutama
jika menggunakan lebih dari satu operator yang berbeda dalam satu
statement perhitungan, sebagai contoh script berikut ini:
<?php
$a = 3 + 4 * 5 6;
echo $a;
?>

Apabila script di atas dijalankan, maka hasil yang muncul bukan 29,
tapi 17. Hal ini terjadi, karena operasi aritmatik yang dikerjakan terlebih
dahulu adalah perkalian (*). Perkalian memiliki tingkat presedensi yang
lebih tinggi daripada + dan -. Setelah perkalian dikerjakan, maka operasi
yang dikerjakan adalah + dan -. Keduanya, + dan -, memiliki tingkat
presedensi yang sama. Jika kedua operator memiliki pesedensi yang sama,
maka bagian yang lebih kiri akan dikerjakan lebih dahulu. Operator lainnya
yang memiliki presedensi yang sama dengan perkalian adalah pembagian (/)
dan modulo (%). Agar bagian operasi tertentu dari statement perhitungan
dikerjakan lebih dahulu maka dapat menggunakan tanda kurung, seperti
contoh berikut.
<?php
$a = (3 + 4) * 5 6;
echo $a;
?>

Operator Pre/Post Increment dan Decrement

Operator ini hanya digunakan pada proses increment maupun
decrement dengan tingkat 1. Berikut ini adalah operator yang termasuk
jenis ini:
$x++;

= 2 + 4;
= 6 - 2;
5 * 3;
15 / 3;
% 2;
2 + 4 = " . $penjumlahan."<br>";
6 - 2 = " . $pengurangan."<br>";
5 * 3 = " . $perkalian."<br>";

ekuivalen dengan $x

+= 1;

atau $x

= $x + 1;

-= 1;

atau $x

= $x 1;

$x--;

ekuivalen dengan $x
Contoh:
<?php

86
$x = 4;
$x++;
echo "Nilai x yang baru : ". $x;
$x = 4;
$x--;
echo "Nilai x yang baru : ". $x;
?>

87
d. Operator Logika
Operator logika biasa digunakan untuk menggabungkan kondisi
berganda dan menghasilkan sebuah ekspresi yang bernilai benar atau salah.
Berikut pada Tabel 4.4 ditampilkan operator yang termasuk ke dalam
kelompok operator logika.

Operator
&&

b. Operasi Penugasan (Assignment Operators)

Salah satu operator penugasan yang sering ditemui adalah operator =,
yang digunakan untuk memberikan nilai ke suatu variabel. Selain itu, PHP
menyediakan operator yang terkait dengan pemberian nilai ke suatu variabel
sebagaimana diperlihatkan pada Tabel 4.2.

Operator
+=
-=
*=
/=
%=
.=

Tabel 4.2 Operator Penugasan pada PHP

Contoh
Operasi yang ekuivalen
$x += 2;
$x = $x + 2;
$x -= 4;
$x = $x - 4;
$x *= 3;
$x = $x * 3;
$x /= 2;
$x = $x / 2;
$x %= 5;
$x = $x % 5;
$my_str.="hello";
$my_str = $my_str . "hello";

c.

Operasi Perbandingan (Comparison Operators)

Operator perbandingan atau dikenal juga sebagai operator relasional
adalah operator yang digunakan untuk melakukan perbandingan dua buah
operand dan menghasilkan nilai benar atau salah (true atau false). Yang
termasuk ke dalam kelompok operator ini, dapat dilihat pada Tabel 4.3.

Operator
==
!=
>
<
>=
<=

Tabel 4.3 Operator Perbandingan pada PHP

Keterangan
Contoh
sama dengan
5==8 returns false
tidak sama dengan
5!=8 returns true
lebih besar dari
5>8 returns false
kurang dari
5<8 returns true
kurang dari dengan
5>=8 returns false
kurang dari dengan
5<=8 returns true

||
!

Tabel 4.4 Operator Logika pada PHP

Keterangan
Contoh
and
x=6; y=3
(x < 10 && y > 1)
returns true
or
x=6; y=3
(x==5 || y==5) returns
false
not
x=6; y=3
!(x==y) returns true

Operator and atau && menghasilkan nilai benar jika kedua operand
bernilai benar. Operator or atau || menghasilkan nilai benar apabila ada
salah satu operand yang bernilai benar.
4.4 Statement Kontrol
Dalam dunia pemrograman umumnya, terdapat 2 jenis statement
kontrol yaitu: statement kontrol kondisional (bersyarat) dan statement
kontrol perulangan (looping).
Statement kontrol kondisional adalah statement kontrol yang
digunakan untuk mengatur kapan suatu perintah akan dijalankan. Dengan
statement ini kita bisa mengatur kapan suatu perintah akan dijalankan, yaitu
ketika telah dipenuhinya suatu syarat tertentu. Sedangkan statement kontrol
perulangan digunakan untuk mengatur perintah yang dijalankan secara
berulang-ulang.
Dalam PHP, terdapat dua buah statement kontrol yang termasuk
statement kontrol kondisional, yaitu IF dan SWITCH. Sedangkan yang
termasuk statement kontrol perulangan adalah: FOR, WHILE, DO WHILE
dan FOREACH.
a.

Statement If
Pernyataan if biasa digunakan untuk mengambil keputusan
berdasarkan suatu kondisi. PHP memiliki tiga macam bentuk if, yaitu:
if
Bentuk pertama if berupa:

88
if (condition) {
code to be executed if condition is true;
}

Contoh:
<html>
<body>
<?php
$total_beli = 200000;
$keterangan = "Tidak dapat diskon";
if ($total_beli >= 100000){
$keterangan = "Dapat diskon";
}
echo $keterangan;
?>
</body>
</html>

if-else
Bentuk ini digunakan apabila ingin menjalankan suatu tindakan tertentu
bila kondisi bernilai benar dan menjalankan tindakan yang lain kalau
kondisi bernilai salah.
Bentuk pernyataan:
if (condition) {
code to be executed if condition is true;
} else {
code to be executed if condition is false;
}

Contoh:
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri"){
echo "Have a nice weekend!";
} else {
echo "Have a nice day!";
}
?>
</body>
</html>

if-elseif
Pernyataan if-elseif sangat bermanfaat untuk melakukan pengambilan
keputusan yang melibatkan banyak alternatif.

89
Bentuk pernyataan:
if (condition) {
code to be executed if condition is true;
} elseif (condition) {
code to be executed if condition is true;
} else {
code to be executed if condition is false;
}

Contoh:
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri"){
echo "Have a nice weekend!";
}elseif ($d=="Sun"){
echo "Have a nice Sunday!";
}else{
echo "Have a nice day!";
}
?>
</body>
</html>

b. Statement Switch
Switch digunakan untuk melakukan suatu aksi dari beberapa aksi yang
berbeda berdasarkan pada satu atau lebih kondisi yang berbeda.
Bentuk pernyataan:
switch (n) {
case label1:
code to be
break;
case label2:
code to be
break;
case label3:
code to be
break;
...
default:
code to be
}

Contoh:
<html>
<body>
<?php
$favcolor = "red";

executed if n=label1;

executed if n=label2;

executed if n=label3;

executed if n is different from all labels;

90
switch ($favcolor)
case "red":
echo "Your
break;
case "blue":
echo "Your
break;
case "green":
echo "Your
break;
default:
echo "Your
green!";
}
?>
</body>
</html>

{
favorite color is red!";

91
d. Statement Do While
Pernyataan do-while mempunyai kegunaan yang serupa dengan
pernyataan while. Bentuk pernyataannya:
do {

favorite color is blue!";

code to be executed;
} while (condition is true);

favorite color is green!";

Perulangan akan berakhir jika kondisi atau ekspresi (yang diuji

sesudah pernyataan atau kode dijalankan) bernilai salah. Dalam perulangan
do-while, paling tidak pernyataan dalam { } akan dieksekusi sekali.

favorite color is neither red, blue, or

c.

Statement While
Pernyataan while merupakan salah satu pernyataan yang berguna
untuk melakukan suatu perulangan. Adapun bentuk pernyataannya:

Contoh berikut ini menunjukkan penggunaan do-while untuk

menampilkan bilangan 1 hingga 5.
<html>
<body>
<?php
$x = 1;
do{

while (condition is true) {

code to be executed;
}

Pernyataan while akan memeriksa nilai kondisi/ekspresi terlebih

dahulu. jika bernilai benar maka pernyataan-pernyataan atau kode yang
tedapat dalam { } akan dijalankan dan kemudian kondisi/ekspresi dievaluasi
lagi. Proses ini diulang terus-menerus sampai kondisi atau ekspresi bernilai
salah.
Contoh berikut ini menunjukkan penggunaan while untuk
menampilkan bilangan 1 hingga 5.
<html>
<body>
<?php
$x = 1;
while($x <= 5) {
echo "Bilangan: $x <br>";
$x++;
}
?>
</body>
</html>

echo "Bilangan: $x <br>";

$x++;
}while ($x <= 5);
?>
</body>
</html>

e.

Statement For
Pernyataan for juga merupakan pernyataan yang biasa digunakan
untuk menangani perulangan proses. Bentuk pernyataannya:
for (initialization; condition; increment) {
code to be executed;
}

Statatemen for bekerja sebagai berikut :

1. Inisialisasi sebagai nilai awal
2. Kondisi diuji, jika bernilai true (benar), maka perulangan dilakukan
dengan mengerjakan blok pernyataan jika bernilai false (salah) maka
perulangan berhenti dan blok pernyataan dilewati
3. Jika blok pernyataan hanya terdiri satu baris maka tanda kurung
kurawal dapat ditiadakan
4. Increment merupakan nilai penambahan atau pengurangan untuk
mengulangi pengerjaan blok pernyataan jika kondisi masih terpenuhi.

92
Contoh berikut ini menunjukkan penggunaan for untuk menampilkan
bilangan 0 hingga 10.
<html>
<body>
<?php
for ($x = 0; $x <= 10; $x++) {
echo "Bilangan: $x <br>";
}
?>
</body>
</html>

4.5 Array
Selama ini bentuk variabel yang dibuat untuk menyimpan suatu value
atau nilai adalah berbentuk tunggal. Maksudnya, satu variabel hanya bisa
untuk menyimpan sebuah value saja. Misalkan sebuah value telah disimpan
atau di-assign ke dalam sebuah variabel, selanjutnya variabel tersebut akan
di-assign kembali dengan sebuah value yang lain, maka value yang
sebelumnya akan ditimpa oleh value yang baru.
Berbeda dengan variabel, array adalah suatu wadah yang dapat
menampung sejumlah nilai. Misalkan suatu variabel bernama X bertipe data
array, maka X ini dapat dibayangkan seperti Gambar 4.2 berikut.

93
$kota[] = "Solo";
$kota[] = "Bandung";
$kota[] = "Bogor";

Keempat pernyataan di atas dapat juga ditulis menjadi:

$kota[0]
$kota[1]
$kota[2]
$kota[3]

=
=
=
=

"Yogya";
"Solo";
"Bandung";
"Bogor";

atau dapat ditulis menjadi:

$kota = array(0=>"Yogya",1=>"Solo",2=>"Bandung",3=>"Bogor");

Angka yang diletakkan di dalam tanda [ ] merupakan kunci atau

indeks dari array. Pada praktiknya, indeks tidak harus dimulai dari nol.
Bahkan dapat menciptakan indeks yang tidak urut. Misalnya:
$wadah[10] = 60;
$wadah[17] = 65;
$wadah[25] = 55;

Perlu diketahui, apabila menuliskan pernyataan seperti:

$wadah[] = 67;

maka indeks yang akan digunakan berupa indeks tertinggi dari elemenelemen array yang sudah terbentuk ditambah dengan satu. Jadi, sekiranya
menuliskan empat pernyataan berikut:
Gambar 4.2 Gambaran array
Dalam terminologi array, array X di atas dikatakan mempunyai
beberapa buah elemen yang berhingga yakni sejumlah N. Setiap elemen
dikenali dengan indeks-nya: 0,1,2,3,...,N-1. PHP secara bawaan
menggunakan indeks dimulai dengan nol.

Menciptakan array
Suatu array dapat diciptakan dengan menggunakan konstruksi array.
Sebagai contoh, array yang berisi 4 buah kota dapat dibentuk dengan
menggunakan pernyataan berikut.

$wadah[10] = 60;
$wadah[3] = 65;
$wadah[8] = 55;
$wadah[] = 67;

maka angka 67 akan disimpan ke elemen array yang memiliki indeks berupa
11 (10 + 1).

Mengambil isi array

Untuk mengambil isi array, dapat menggunakan notasi berikut ini.

$nama_array[indeks]

$kota = array("Yogya","Solo","Bandung","Bogor");

Contoh:
Alternatif lainnya, dapat menggunakan sederetan pernyataan berikut.
$kota[] = "Yogya";

<?php
$x = array(10, 12, 3, 44, 50, "hallo");

94

95

// akan menampilkan value pada indeks ke-0, yaitu 10

echo $x[0];

$hari["Tuesday"] = "Selasa";
$hari["Wednesday"] = "Rabu";

// akan menampilkan value pada indeks ke-5, yaitu 'hallo'

echo $x[5];

echo $hari["Tuesday"];
?>

// mengganti value pada indeks ke-2 dengan value yang baru (-3)
$x[2] = -3;

4.6 POST dan GET Request

POST dan GET merupakan metode yang digunakan untuk
mengirimkan nilai variabel/data ke halaman lain untuk diproses lebih lanjut.
Dalam bagian ini akan dibahas perbedaan diantara kedua metode tersebut.

// akan menghasilkan -3 (yang tampil bukan 3 karena sudah

// ditimpa -3)
echo $x[2];
?>

Mengetahui jumlah elemen array

PHP menyediakan fungsi bernama count() yang berguna untuk
mendapatkan jumlah elemen array. Fungsi ini memerlukan argumen berupa
array bersangkutan. Sebagai contoh:
<?php
$musik = array("Jazz","Blues","Fusion");
echo "Jumlah elemen : ".count($musik);
?>

akan menampilkan tulisan: "Jumlah elemen = 3", yang menyatakan bahwa

jumlah elemen array musik adalah 3.
Adapun contoh lain penggunaan fungsi count() untuk menampilkan isi
atau nilai dari suatu array menggunakan mekanisme perulangan adalah
sebagai berikut.
<?php
$kota = array("Yogya","Solo","Bandung","Bogor");
$jumlah = count($kota);
for ($i=0; $i<$jumlah; $i++){
echo "Elemen berindeks $i : $kota[$i] <br>";
}
?>

Array dengan indeks berupa string

Sejauh ini, contoh penggunaan array masih menggunakan indeks
bertipe integer. Selain indeks bertipe integer, PHP juga memperkenankan
indeks bertipe string.
Contoh:
<?php
$hari["Sunday"] = "Minggu";
$hari["Monday"] = "Senin";

POST Request
Untuk dapat memahami POST request perhatikan contoh berikut ini.
Dalam contoh ini, akan membuat sebuah form yang digunakan untuk login.
login.php
<html>
<title>POST Request</title>
<body>
Silakan Login dengan Username dan Password Anda
<form action="view.php" method="POST">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Login"/></td>
</tr>
</table>
</form>
</body>
</html>

Pada form di atas dapat dilihat bahwa terdapat dua komponen dalam
form, yang masing-masing memiliki nama 'username' dan 'password'
(perhatikan atribut name="" pada komponen). Keduanya merupakan
komponen form berbentuk text box. Selanjutnya, perhatikan bagian atribut
action="proses.php". Atribut ini memiliki makna bahwa apabila tombol
Login tersebut diklik, maka data yang diisikan pada form nantinya akan
dikirim dan diolah pada script bernama view.php.

96
view.php
<html>
<title>POST Request</title>
<body>
Username : <?php echo $_POST["username"]; ?><br/>
Password : <?php echo $_POST["password"]; ?>
</body>
</html>

Untuk mengetahui hasilnya, buka login.php melalui browser (pastikan

kedua file ini: login.php dan view.php tersimpan di direktori htdocs pada
web server). Kemudian sebagai input untuk username dan password,
masing-masing adalah budi dan elektro. Setelah itu, klik tombol Login
untuk mengirimkan data. Hasilnya dapat dilihat pada Gambar 4.2 berikut
ini.

Gambar 4.3 Hasil proses dari POST request

97
</tr>
<tr>
<td></td>
<td><input type="submit" value="Login"/></td>
</tr>
</table>
</form>
</body>
</html>

Jadi yang dirubah hanya atribut method, menjadi method="GET". Dan

kemudian merubah file view.php seperti berikut ini.
view.php
<html>
<title>POST Request</title>
<body>
Username : <?php echo $_GET["username"]; ?><br/>
Password : <?php echo $_GET["password"]; ?>
</body>
</html>

Selanjutnya dengan menggunakan input yang sama seperti pada contoh

sebelumnya maka hasil yang diperoleh dapat dilihat pada Gambar 4.3.
Perhatikan hasil pada Gambar 4.3 dan Gambar 4.2, keduanya memberikan
hasil yang sama. Perbedaannya, apabila menggunakan metode GET, maka
nilai variabel ditampilkan pada URL sedangkan metode POST tidak
menampilkan nilai variabel tersebut.

GET Request
Untuk dapat memahami GET request maka contoh sebelumnya yakni
file login.php akan dirubah menjadi seperti berikut ini.

login.php
<html>
<title>GET Request</title>
<body>
Silakan Login dengan Username dan Password Anda
<form action="view.php" method="GET">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"/></td>

Gambar 4.4 Hasil proses dari GET request

Adapun beberapa perbedaan lainnya antara metode POST dan GET
dapat dilihat pada Tabel 4.1 berikut ini.
Tabel 4.5 Perbedaan antara Metode POST dan GET
POST
GET
Nilai variabel tidak ditampilkan Nilai variabel ditampilkan di
di URL
URL sehingga user dapat dengan
Lebih aman
mudah memasukkan nilai

98
Panjang dari URL string tidak
dibatasi
Pengambilan variabel dengan
$_POST
Biasanya untuk input data
melalui form
Digunakan untuk mengirim
data-data penting seperti
password

variabel baru
Kurang aman
Panjang URL string dibatasi
maksimum sampai 2048 karakter
Pengambilan variabel dengan
$_GET
Biasanya untuk input data
melalui link
Digunakan untuk mengirim datadata yang tidak sensitif

4.7 Cookie
Cookie adalah sepotong data yang disimpan pada komputer milik
pengunjung dan digunakan oleh halaman web dalam mengingat suatu
informasi. Dengan mengakses data yang disimpan pada komputer
pengunjung inilah, suatu server bisa mendapatkan kembali informasi yang
pernah dikirimkan ke client. Cookie biasanya digunakan untuk menciptakan
sesi yang memungkinkan sesorang dapat masuk ke halaman-halaman lain
tanpa perlu melakukan login kembali.

99

Mengakses cookie
Untuk mengakses
$_COOKIE.

cookie,

perlu

menggunakan

super

global

$_COOKIE["nama_cookie"];

Contoh:
<?php
if isset($_COOKIE["mycookie"]){
echo $_COOKIE["mycookie"];
}else{
echo "Cookie Tidak Ada";
}
?>

Script di atas digunakan untuk menampilkan value dari cookie bernama

"mycookie" apabila cookie tersebut ada (masih tersimpan dalam komputer),
sedangkan bila sudah tidak ada maka tampilkan "Cookie Tidak Ada".

Menciptakan cookie
Untuk menciptakan sebuah cookie, dapat menggunakan setcookie()
dengan format sebagai berikut.

Menambahkan tanggal kadaluarsa

Secara default, cookie hanya diingat sampai browser berakhir. Agar
data tetap diingat walaupun browser berakhir, maka perlu mengatur waktu
kadaluarsanya. Hal ini bisa dilakukan dengan menggunakan setcookie(),
yaitu dengan memberikan waktu kadaluarsa pada argumen ketiga.
Susunannya seperti berikut.

setcookie (nama_cookie, nilai_cookie);

setcookie (nama_cookie, nilai_cookie, waktu_kadaluarsa);

Dalam hal ini, nama_cookie berupa string yang menyatakan nama

cookie yang akan diciptakan dan nilai_cookie menyatakan nilai yang akan
disimpan pada nama cookie.

Contoh:

Contoh:
<?php
setcookie("nama", "Demi Moore");
echo "Cookie telah terbentuk ";
?>

Script di atas digunakan untuk menciptakan cookie bernama nama dan

isinya berupa "Demi Moore".
Perlu diketahui bahwa pemanggilan fungsi setcookie() perlu dilakukan
sebelum teks HTML, mengingat cookie merupakan bagian dari header
HTTP.

<?php
setcookie("nama", "Demi Moore", time() + 3600);
echo "Cookie telah terbentuk ";
?>

Script di atas digunakan untuk menciptakan cookie bernama nama dan

isinya berupa "Demi Moore" dengan masa kadaluarsa adalah 1 jam dimulai
dari sekarang. time() digunakan untuk memperoleh waktu sekarang, 3600
menyatakan jumlah detik dalam 1 jam.

Menghapus cookie
Untuk menghapus suatu cookie, gunakan setcookie() dengan
menyebutkan nama cookie pada argumen pertama, string kosong pada
argumen kedua dan kadaluarsa diset ke waktu sebelumnya (masa lampau)
pada argumen ketiga.

100
Contoh:
<?php
// set kadaluarsa ke satu jam yang lalu
setcookie("nama", "", time() - 3600);
?>
<html>
<body>

101
echo "Session_ID : ".session_id()."<br>";
session_destroy();
echo "Setelah session ditutup <br>";
echo "Session_ID : ".session_id();
?>

Hasil pemanggilan script di atas, dapat dilihat pada Gambar 4.5 berikut ini.

<?php
echo "Cookie 'nama' telah dihapus.";
?>
</body>
</html>

4.8 Session
PHP menyediakan pustaka yang berguna untuk membentuk sebuah
sesi dengan menggunakan session. Berbeda dengan cookie (yang
menyimpan data pada client), session diimplementasikan dengan
menyimpan data pada server. Dengan demikian, tidak perlu ada komunikasi
bolak-balik antara web server dan client ketika web server membutuhkan
data tersebut.
Setiap kali session dibentuk, akan terdapat referensi yang menunjuk ke
session bersangkutan. Referensi ini dikenal dengan sebutan SID (Session
Identifier) atau pengenal session. Nomor referensi ini dapat dibayangkan
seperti nomor transaksi ketika mendapatkan faktur pembelian barang.

Gambar 4.5 Mengawali dan mengakhiri session

Mendaftarkan variabel session

Untuk mendaftarkan variabel session, cukup menggunakan
superglobal $_SESSION. Misalnya variabel yang ingin digunakan bernama
var_x, maka dapat dituliskan sebagai berikut.
varsession.php

Mengawali dan mengakhiri session

Salah satu cara untuk mengawali sebuah session yaitu dengan
memanggil fungsi bernama session_start(), seperti berikut.

<?php
session_start();

session_start();

echo "Session_ID : ".session_id()."<br>";

echo "Isi Variabel Session : ".$_SESSION["var_x"];
?>

Adapun utnuk mengakhiri sebuah session, dapat memanggil fungsi

bernama session_destroy(), seperti berikut.
session_destroy();

Session juga berakhir ketika browser ditutup. Untuk mengetahui

pengenal session, dapat memanggil fungsi bernama session_id(). Fungsi ini
akan memberikan string yang menyatakan pengenal session.
Contoh:
<?php
session_start();

$_SESSION["var_x"] = "123456";

Mengakses variabel session

Seandainya suatu variabel session telah dibentuk oleh suatu script,
variabel ini dapat diakses oleh script lain dengan mula-mula melakukan
pemanggilan fungsi session_start() kemudian variabel session dapat
diperoleh melalui $_SESSION.
Contoh:
bacasession.php
<?php
session_start();
echo "Session_ID : ".session_id()."<br>";
echo "Variabel session var_x diakses dari bacasession.php: ";

102
if (isset($_SESSION["var_x"])){
echo $_SESSION["var_x"];
}else{
echo "Tidak ada";
}
?>

Perhatikan bahwa variabel var_x diakses melalui $_SESSION. Untuk

mengetahui keberadaan variabel session tersebut, dapat mengujinya dengan
fungsi isset().

103
4.9 Function
Script yang berukuran besar uumnya melibatkan fungsi-fungsi yang
diciptakan sendiri oleh pemrogram. Fungsi adalah blok kode yang ditujukan
untuk melaksanakan suatu tugas tertentu. Dengan menciptakan fungsi, yang
dibuat sekali, fungsi dapat dipanggil berkali-kali di bagian mana pun dalam
script.
Fungsi dapat dideklarasikan dengan menggunakan pernyataan
function. Bentuk pendeklarasiannya adalah sebagai berikut.

function nama_function(parameter)
{
..
..
return variabel;
}

<?php
session_start();
echo "Session_ID : ".session_id()."<br>";
echo "Variabel session var_x diakses dari unreg.php:
".$_SESSION["var_x"]."<br>";

Setiap function pasti dan harus memiliki nama function. Nama

function ini nantinya akan dipanggil oleh program utama bila akan
digunakan. Parameter di sini sifatnya optional (boleh ada, boleh tidak).
Parameter ini ibaratnya input yang akan diolah oleh function. Sedangkan
return variabel merupakan perintah untuk memberikan hasil setelah
dikerjakan oleh function. Dalam hal ini perintah return variabel ini juga
bersifat optional (boleh ada, boleh tidak). return variabel ini perlu
digunakan bila hasil dari pengolahan function ini akan digunakan untuk
proses yang lain dalam program. Sedangkan bila hasil dari function tidak
akan digunakan oleh program, maka tidak perlu diberikan perintah ini.

Membuang variabel session

Untuk menghilangkan suatu variabel session, cukup menggunakan
unset() terhadap variabel tersebut melalui $_SESSION.
Contoh:
unreg.php

unset($_SESSION["var_x"]);
echo "Variabel session var_x setelah di-unregister: ";
if (isset($_SESSION["var_x"])){
echo $_SESSION["var_x"]."<br>";
}else{
echo "Tidak ada <br>";
}
echo "Session_ID : ".session_id();
?>

Hasil pemanggilan script di atas, dapat dilihat pada Gambar 4.6 berikut ini.

Contoh:
Memerlukan return variabel:
<?php
function jumlah($a, $b){
$c = $a + $b;
return $c;
}
echo "Hasil penjumlahannya = ".jumlah(3, 5);
?>

Tidak memerlukan return variabel:

Gambar 4.6 Hasil pemanggilan unreg.php

<?php
function tulis($x){
echo "Anda menampilkan ". $x . "<br>";
}
tulis("Hello World..");
tulis("Apa kabar?");
?>

104

105

4.10 Teknik Modularitas

Konsep modularitas dalam pemrograman diperlukan untuk
mempermudah dalam pengorganisasian script/program. Adapun prinsip dari
konsep ini adalah meletakkan beberapa perintah yang menjalankan suatu
tugas khusus ke dalam modul atau file script tersendiri. Setiap kali modul
tersebut dibutuhkan, maka hanya menyisipkan modul tersebut ke dalam
script yang sedang dibuat dengan cara memanggilnya.

bilangan.php. Selanjutnya modul ini akan di-include-kan ke dalam script

penjumlahan.

Adapun cara memanggil modul dengan menggunakan perintah:

jumlah.php

include "namafilemodul.php";

Perhatikan gambaran penggunaan konsep modularitas berikut ini:

Misalkan kita membuat modul dan disimpan dalam script bernama
modulku.php. Selanjutnya kita juga membuat script tertentu katakanlah
diberi nama file scriptku.php. Kebetulan dalam scriptku.php kita
membutuhkan modulku.php, maka skema yang terjadi dapat dilihat pada
Gambar 4.7 berikut ini.

Gambar 4.7 Gambaran penggunaan konsep modularitas

Dari skema di atas, jelas tampak bahwa bila kita memberikan perintah
include "modulku.php"; dalam scriptku.php, maka akan identik dengan bila
kita menyisipkan script yang ada dalam modulku.php ke dalam scriptku.php
secara manual.
Contoh:
Dalam contoh ini, akan digunakan konsep modularitas untuk membuat
script operasi aritmatika penjumlahan dari 2 buah bilangan. Untuk input
bilangannya disimpan dalam modul tersendiri, misalkan dinamakan

bilangan.php
<?php
$bil1 = 10;
$bil2 = 5;
?>

<?php
include "bilangan.php";
$hasil = $bil1 + $bil2;
echo "Hasil penjumlahannya adalah : ".$hasil;
?>

Bentuk script jumlahkan.php di atas akan identik dengan script berikut ini.
<?php
$bil1 = 10;
$bil2 = 5;
$hasil = $bil1 + $bil2;
echo "Hasil penjumlahannya adalah : ".$hasil;
?>

4.11 Rangkuman
1. PHP atau merupakan singkatan rekursif dari PHP : Hypertext
Preprocessor adalah suatu bahasa pemrograman yang termasuk
kategori server side programming. Server side programming adalah
jenis bahasa pemrograman yang nantinya script/program tersebut akan
dijalankan oleh server. Selanjutnya hasil pengolahan script/program
tersebut akan dikirim ke client sebagai output.
2. PHP dirancang untuk membentuk web dinamis. Berbeda dengan HTML
yang hanya bisa menampilkan konten statis, PHP bisa berinteraksi
dengan database, file dan folder, sehingga membuat PHP bisa
menampilkan konten yang dinamis dari sebuah website.
3. Kode PHP adalah kode yang disertakan di sebuah halaman HTML dan
kode tersebut dijalankan oleh server sebelum dikirim ke browser.
4. Blok scripting PHP selalu diawali dengan <?php dan diakhiri dengan
?>. Blok scripting PHP dapat ditempatkan dimana saja di dalam
dokumen. Setiap baris kode PHP harus diakhiri dengan semikolon (;).
Semikolon ini merupakan separator yang digunakan untuk
membedakan satu instruksi dengan instruksi lainnya.

5.

106

107

Script PHP yang dibuat harus disimpan dalam ekstensi .php. Apabila
tidak, maka script tidak akan bisa dijalankan dan hanya dianggap
sebagai teks biasa.

menampilkan apa yang telah diisikan dalam form tersebut. Berikut

contoh output script apabila nama yang diisikan adalah "Joko".
Terimakasih Joko sudah mengisi form pendaftaran.

4.12 Tugas/Soal Latihan

1. Ibu ingin mengambil uang tabungan sejumlah Rp. 1.575.250,- yang
dimilikinya di sebuah bank. Misalkan pada saat itu uang pecahan yang
berlaku adalah Rp. 100.000,-; Rp. 50.000,-; Rp. 20.000,-; Rp. 5.000,-;
Rp. 100,- dan Rp. 50. Dengan menggunakan script PHP, tentukan
banyaknya masing-masing uang pecahan yang diperoleh ibu tadi!

Nama Lengkap
Tempat Lahir
Tanggal Lahir
Alamat Rumah
Jenis Kelamin
Asal Sekolah
Nilai UAN

Lengkapi script berikut:

<?php
$jumlahUang = 1575250;
.
.
.
echo "Jumlah Rp. 100.000 : ".$a. "<br />";
echo "Jumlah Rp. 50.000 : ".$b. "<br />";
echo "Jumlah Rp. 20.000 : ".$c. "<br />";
echo "Jumlah Rp. 5.000 : ".$d. "<br />";
echo "Jumlah Rp. 100 : ".$e. "<br />";
echo "Jumlah Rp. 50 : ".$f. "<br />";
?>

Keterangan:
$a adalah variabel yang menyatakan jumlah pecahan Rp. 100.000,$b adalah variabel yang menyatakan jumlah pecahan Rp. 50.000,$c adalah variabel yang menyatakan jumlah pecahan Rp. 20.000,$d adalah variabel yang menyatakan jumlah pecahan Rp. 5.000,$e adalah variabel yang menyatakan jumlah pecahan Rp. 100,$f adalah variabel yang menyatakan jumlah pecahan Rp. 50,2.

Rancanglah sebuah form untuk pendaftaran online mahasiswa baru

dalam universitas X. Data yang nantinya dimasukkan dalam form
pendaftaran adalah: Nama Lengkap (text box), Tempat Lahir (text box),
Tanggal Lahir (text box, format: dd-mm-yyyy), Alamat Rumah (text
area), Jenis Kelamin (gunakan radio button: pria/wanita), Asal Sekolah
(text box), Nilai UAN (text box). Tambahkan pula sebuah
button submit dan button reset.
Apabila data sudah diisi dan selanjutnya diklik tombol submit, maka
kirim data ke sebuah script PHP (menggunakan method POST) untuk

3.

: Joko
: XXX
: TGL-BLN-THN
: XXX
: Pria
: XXX
: XXX

Terdapat bilangan-bilangan seperti: 283, 182, 381, 119, 391, 591,

123, 124, 284, 215, 312. Buatlah script dalam PHP untuk menampilkan
bilangan terbesar, bilangan terkecil dan menghitung rata-rata dari
bilangan-bilangan tersebut. Untuk menyelesaikan kasus ini, gunakan
konsep array.

4.13 Daftar Bacaan

1. Gilmore, W. Jason. 2008. Beginning PHP and MySQL: From Novice to
Professional, Third Edition. California: Apress.
2. Beighley, Lynn dan Morrison, Michael. 2009. Head First PHP &
MySQL. California: OReilly Media, Inc.
3. Kadir, Abdul. 2008. Dasar Pemrograman Web Dinamis Menggunakan
PHP. Yogyakarta: Penerbit Andi.
4. Yuana,
Rosihan
Ari.
2012.
Tutorial
PHP
Dasar.
http://blog.rosihanari.net/download-tutorial-php-dasar-gratis/. Diakses
tanggal 22 Agustus 2014
5. W3Schools. PHP 5 Tutorial. http://www.w3schools.com/php/
default.asp. Diakses tanggal 22 Agustus 2014.

109
BAB V
BASIS DATA DALAM PEMROGRAMAN WEB
DENGAN MYSQL
5

BASIS DATA DALAM PEMROGRAMAN WEB DENGAN MYSQL

RINGKASAN
Basis data (database) dapat didefinisikan sebagai himpunan kelompok
data yang saling berhubungan yang yang disimpan secara bersama tanpa
pengulangan (redundancy) yang diorganisasi sedemikian rupa sehingga
kelak dapat dimanfaatkan dengan cepat dan mudah untuk memenuhi
berbagai kebutuhan. Basis data disimpan dalam media penyimpanan
elektronis. Dalam pengelolaan basis data secara fisik tidak dilakukan oleh
pemakai secara langsung, tetapi ditangani oleh sebuah perangkat lunak
(sistem) yang khusus yang disebut DBMS (Database Management System).
Untuk pembangunan aplikasi web dinamis maka digunakan database untuk
menyimpan konten dari halaman web. Salah satu implementasi yang banyak
digunakan dalam pembangunan aplikasi web dinamis adalah memadukan
pemrograman PHP dengan penggunaan DBMS MySQL.
5.1 Pengenalan Basis Data
Basis data terdiri atas 2 kata, yaitu Basis dan Data. Basis kurang lebih
dapat diartikan sebagai markas atau gudang, sedangkan Data adalah
representasi fakta dunia nyata yang mewakili suatu objek seperti manusia
(pegawai, siswa, pembeli, pelanggan), barang, hewan, peristiwa, konsep,
keadaan dan sebagainya yang diwujudkan dalam bentuk angka, huruf,
simbol, teks, gambar, bunyi, atau kombinasinya.
Sebagai satu kesatuan istilah, basis data (database) sendiri dapat
didefinisikan dalam sejumlah sudut pandang seperti:
Himpunan kelompok data (arsip) yang saling berhubungan yang
diorganisasi sedemikian rupa agar kelak dapat dimanfaatkan kembali
dengan cepat dan mudah.
Kumpulan data yang saling berhubungan yang disimpan secara bersama
sedemikian rupa dan tanpa pengulangan (redundansi) yang tidak
perlu, untuk memenuhi berbagai kebutuhan.
Kumpulan tabel yang saling berhubungan yang disimpan dalam media
penyimpanan elektronis.
5.1.1 Sistem Basis Data
Basis data hanyalah sebuah objek yang pasif. Ia ada karena ada
pembuatnya. Ia tidak akan pernah berguna jika tidak ada pengelola dan
penggeraknya. Yang menjadi pengelola atau penggeraknya secara langsung
108

adalah program/aplikasi (software). Gabungan keduanya (basis data dan

pengelolanya) menghasilkan sebuah sistem. Karena itu, secara umum
sebuah sistem basis data merupakan sistem yang terdiri atas kumpulan tabel
data yang saling berhubungan (dalam sebuah basis data di sebuah sistem
komputer) dan sekumpulan program (yang biasa disebut DBMS/Dabatase
Management System) yang memungkinkan beberapa pemakai dan/atau
program lain untuk mengakses dan memanipulasi tabel-tabel data tersebut.
Adapun secara lengkap, sebuah sistem basis data terdiri atas
komponen-komponen utama sebagai berikut.
1. Perangkat Keras (Hardware)
2. Sistem Operasi (Operating System)
3. Basis Data (Database)
4. Sistem (Aplikasi/Perangkat Lunak) Pengelola Basis Data (DBMS)
5. Pemakai (User)
6. Aplikasi (Perangkat Lunak) lain (yang bersifat opsional, artinya tidak
harus ada)
5.1.2 DBMS (Database Management System)
Pengelolaan basis data secara fisik tidak dilakukan oleh pemakai
secara langsung, tetapi ditangani oleh sebuah perangkat lunak (sistem) yang
khusus. Perangkat lunak inilah (disebut DBMS/Database Management
System) yang akan menentukan bagaimana data diorganisasikan, disimpan,
diubah dan diambil kembali. DBMS juga menerapkan mekanisme
pengamanan data, pemakaian data secara bersama, pemaksaan
keakuratan/konsistensi data, dan sebagaianya.
Perangkat lunak yang termasuk DBMS diantaranya Microsoft SQL
Server, Oracle Database, IBM DB2, MySQL, dan PostgreSQL. Pembahasan
dalam buku ajar ini menggunakan DBMS MySQL.
MySQL adalah sebuah implementasi dari sistem manajemen basis data
relasional yang didistribusikan secara gratis di bawah lisensi GPL (General
Public License). Dengan kehandalan, kecepatan dan kemudahan
penggunaannya, MySQL menjadi pilihan utama bagi banyak pengembang
perangkat lunak dan aplikasi baik di platform web maupun desktop. MySQL
pertama kali dibuat dan dikembangkan di Swedia, yaitu oleh David Axmark,
Allan Larsson dan Michael "Monty" Widenius. Mereka mengembangkan
MySQL sejak tahun 1980-an. Saat ini versi MySQL yang sudah stabil
mencapai versi 5.x. Informasi lengkap mengenai MySQL dapat diperoleh
melalui situs resminya: http://www.mysql.com/.

110

111

5.1.3 Basis Data Relasional

Salah satu jenis basis data yang populer saat ini adalah basis data
relasional (relational database). Basis data relasional adalah jenis basis data
yang menggunakan model relasional. Pada model relasional, data disusun
dalam bentuk sejumlah relasi atau tabel. Setiap tabel tersusun atas sejumlah
baris dan kolom. Baris mewakili datu kesatuan data dan kolom menyatakan
bagian-bagian yang menyusun sebuah baris.
Pada model relasional, satu tabel bisa berhubungan dengan tabel lain.
Hubungan dibentuk melalui mekanisme kunci primer (primary key) dan
kunci asing/tamu (foreign key). Kunci primer adalah suatu kolom (atau
gabungan beberapa kolom) yang dapat digunakan untuk membedakan antara
satu baris dengan baris yang lain. Berikut ini, pada Gambar 5.1 merupakan
bentuk model relasional, yakni hubungan antara tabel Branch dengan tabel
Staff.

atas sejumlah perintah (statement) yang diformulasikan dan dapat diberikan

user dan dikenali/diproses oleh DBMS untuk melakukan suatu aksi tertentu.
SQL atau Structured Query Language merupakan bahasa standar yang
digunakan untuk mengakses basis data relasional dan bersifat nonprosedural. Pengaksesan data dapat dilakukan dengan bentuk perintah yang
sederhana. Perintah SQL ini sering juga disingkat dengan sebutan 'query'.
Adapun perintah atau instruksi SQL dapat dikelompokkan berdasarkan
jenis dan fungsinya. Terdapat 3 jenis perintah dasar SQL, yakni DDL (Data
Definition Language), DML (Data Manipulation Language) dan DCL
(Data Control Language).
1.

DDL (Data Definition Language)

DDL digunakan untuk mendefinisikan, mengubah, serta
menghapus basis data dan objek-objek yang diperlukan dalam basis data,
misalnya tabel, view, user, dan sebagainya. Secara umum, DDL yang
digunakan adalah CREATE untuk membuat objek baru, USE untuk
menggunakan objek, ALTER untuk mengubah objek yang sudah ada,
dan DROP untuk menghapus objek. DDL biasanya digunakan oleh
administrator basis data dalam pembuatan sebuah basis data.

CREATE
CREATE digunakan untuk membuat basis data maupun objek-objek
basis data. Perintah SQL yang umum digunakan adalah:
CREATE DATABASE nama_basis_data

Perintah CREATE
baru.

DATABASE

digunakan untuk membuat sebuah basis data

CREATE TABLE membuat tabel baru pada basis data yang sedang aktif.
Secara umum, perintah ini memiliki bentuk:

Gambar 5.1 Hubungan antara tabel Branch dengan tabel Staff

5.1.4 SQL
DBMS merupakan perantara bagi pemakai dengan basis data dalam
disk. Cara berinteraksi antara pemakai dengan basis data tersebut diatur
dalam suatu bahasa khusus yang ditetapkan oleh perusahaan pembuat
DBMS. Bahasa itu dapat kita sebut sebagai bahasa basis data yang terdiri

CREATE TABLE [nama_tabel]

(
nama_field1 tipe_data [,
nama_field2 tipe_data,
...]
[CONSTRAINT nama_field constraints]
)

dengan:
o nama_field adalah nama kolom (field) yang akan dibuat. Beberapa
sistem manajemen basis data mengizinkan penggunaan spasi dan
karakter non huruf pada nama kolom.

112
o tipe_data tergantung implementasi sistem manajemen basis data.
Misalnya, pada MySQL, tipe data dapat berupa VARCHAR, TEXT,
BLOB, ENUM, dan sebagainya.
o constraints adalah batasan-batasan yang diberikan untuk tiap kolom.
Ini juga tergantung implementasi sistem manajemen basis data,
misalnya NOT NULL, UNIQUE, dan sebagainya. Ini dapat
digunakan untuk mendefinisikan kunci primer (primary key) dan
kunci asing (foreign key).
o Satu tabel boleh tidak memiliki kunci primer sama sekali, namun
sangat disarankan mendefinisikan paling tidak satu kolom sebagai
kunci primer.
Contoh:
CREATE TABLE tbl_pelanggan (
id_pelanggan VARCHAR(5) NOT NULL,
nama_pelanggan VARCHAR(25) NOT NULL,
alamat VARCHAR(50) NOT NULL,
no_hp VARCHAR(15) NOT NULL,
PRIMARY KEY (id_pelanggan))

ALTER
Perintah alter digunakan untuk merubah struktur tabel yang telah dibuat
sebelumnya dengan perintah CREATE. Berikut perintah SQL yang
digunakan, diantaranya:
Merubah tipe data kolom:
ALTER TABLE nama_tabel MODIFY nama_kolom tipe_data_baru;

Merubah nama kolom tabel:

ALTER TABLE nama_tabel CHANGE nama_kolom nama_kolom_baru
tipe_data;

Merubah nama tabel:

ALTER TABLE nama_tabel_lama RENAME TO nama_tabel_baru;

Menambahkan kolom baru pada tabel:

ALTER TABLE nama_tabel ADD nama_kolom_baru tipe_data;

Menghapus kolom tabel:

ALTER TABLE nama_tabel DROP nama_kolom;

DROP
Perintah drop digunakan untuk menghapus basis data maupun objekobjek basis data. Berikut perintah SQL yang digunakan, diantaranya:

113
Menghapus database:
DROP DATABASE nama_database;

Menghapus tabel:
DROP TABLE nama_tabel;

2.

DML (Data Manipulation Language)

DML digunakan untuk memanipulasi data yang ada dalam suatu
tabel. Perintah yang umum dilakukan adalah untuk menampilkan data
(SELECT), menambahkan data baru (INSERT), mengubah data yang sudah
ada (UPDATE), dan menghapus data (DELETE).

SELECT
SELECT adalah perintah yang paling sering digunakan pada SQL,
sehingga terkadang istilah query dirujukkan pada perintah SELECT.
SELECT digunakan untuk menampilkan data dari satu atau lebih tabel,
biasanya dalam sebuah basis data yang sama. Secara umum, perintah
SELECT memiliki bentuk lengkap seperti berikut ini.
SELECT [nama_tabel|alias.]nama_field1 [AS alias1] [,
nama_field2, ...]
FROM nama_tabel1 [AS alias1] [INNER|LEFT|RIGHT JOIN tabel2
ON kondisi_penghubung]
[, nama_tabel3 [AS alias3], ...]
[WHERE kondisi]
[ORDER BY nama_field1 [ASC|DESC][, nama_field2 [ASC|DESC],
...]]
[GROUP BY nama_field1[, nama_field2, ...]]
[HAVING kondisi_aggregat]

dengan:
o kondisi adalah syarat yang harus dipenuhi suatu data agar
ditampilkan.
o kondisi_aggregat adalah syarat khusus untuk fungsi aggregat,
contoh fungsi agregat: SUM untuk menghitung total nominal data,
COUNT untuk menghitung jumlah kemunculan data, AVG untuk
menghitung rata-rata sekelompok data, MAX dan MIN untuk
mendapatkan nilai maksimum/minimum dari sekelompok data
Kondisi dapat dihubungkan dengan operator logika, misalnya AND,
OR, dan sebagainya.
Contoh:
SELECT * FROM tbl_pelanggan
WHERE id_pelanggan = 'P0005'

114

115

Perintah SQL tersebut berarti menampilkan seluruh data (tanda asterik

* untuk menampilkan seluruh kolom tabel) dari tabel pelanggan yang
memiliki ID pelanggan: P0005.

menyediakan fasilitas kepada pengembang aplikasi untuk mengeksekusi

query secara manual. Pengetahuan tentang SQL mutlak diperlukan bagi
pengembang aplikasi database, mengingat aplikasi yang menggunakan
database tetap berinteraksi dengan database melalui SQL.
Adapun untuk tool phpmyadmin, apabila telah meng-install
menggunakan paket XAMPP pada komputer lokal, maka dapat diakses
melalui URL: http://localhost/phpmyadmin. Untuk pembuatan database dan
tabel menggunakan phpmyadmin diawali dengan proses crate database
seperti terlihat pada Gambar 5.2 berikut ini (dengan asumsi pengguna telah
berhasil login pada aplikasi phpmyadmin).

INSERT
Untuk menyimpan data dalam tabel dipergunakan sintaks:
INSERT INTO [nama_table] ([daftar_field]) VALUES
([daftar_nilai])

Contoh:
INSERT INTO test (nama, alamat, password) VALUES ('test',
'alamat', 'pass');

UPDATE
Untuk mengubah data menggunakan sintaks:
UPDATE [nama_table] SET [nama_kolom]=[nilai] WHERE [kondisi]

Contoh:
UPDATE user SET password="123456" WHERE username="abc";

DELETE
Untuk menghapus data dipergunakan sintaks:
DELETE FROM [nama_table] WHERE [kondisi]

Contoh:
DELETE FROM TEST WHERE NAMA='test';

3.

DCL (Data Control Language)

DCL merupakan jenis instruksi SQL yang berkaitan dengan
manajemen hak akses dan pengguna (user) yang dapat mengakses database
maupun tabel. Contoh perintah SQL yang termasuk dalam DCL,
diantaranya: GRANT dan REVOKE
5.1.5 Impelementasi Database Menggunakan DBMS MySQL
Implementasi database, seperti menciptakan database, membuat tabel,
memodifikasi tabel, menghapus tabel dan lainnya dapat dilakukan dengan
menggunakan perintah SQL yang termasuk dalam kelompok DDL (Data
Definition Language). Selain menggunakan perintah SQL, implementasi
database dapat dilakukan menggunakan suatu tool yang dirancang untuk
memudahkan proses tersebut. Apabila implementasi database menggunakan
DBMS MySQL, salah satu tool seperti phpmyadmin yang berbasis web juga
cukup membantu dalam mengimplementasikan database tanpa
menggunakan SQL. Namun, dalam tool phpmyadmin juga tetap

Gambar 5.2 Pembuatan database dengan phpmyadmin

Setelah database berhasil dibuat, maka database db_coba akan muncul pada
daftar database yang ada di sebelah kiri, seperti terlihat pada Gambar 5.3.

Gambar 5.3 Database db_coba berhasil dibuat

116

117

Selanjutnya, dengan mengklik database db_coba pada daftar tersebut, maka

akan tampil fasilitas untuk menambahkan tabel, seperti tampak pada
Gambar 5.4.

Setelah melengkapi struktur tabel, untuk menyimpan/menambahkan tabel

tersebut ke database dilakukan dengan menekan tombol Save yang ada pada
bagian bawah. Apabila tabel berhasil disimpan, maka tabel tersebut akan
tampil pada list tabel, seperti terlihat pada Gambar 5.6.

Gambar 5.6 Tabel tb_pelanggan berhasil dibuat

Gambar 5.4 Fasilitas untuk pembuatan tabel pada database

Misalkan nama tabel yang akan ditambahkan adalah tb_pelanggan dengan
jumlam kolom sebanyak 5, setelah menekan tombol Go maka pengguna
akan dibawa menuju ke fasilitas untuk mengisi struktur tabel tersebut,
seperti terlihat pada Gambar 5.5 berikut ini.

Untuk melakukan pembuatan/menambahkan tabel baru pada database

db_coba dapat dilakukan dengan langkah-langkah yang sama seperti
sebelumnya.
Selain pembuatan tabel tanpa menggunakan SQL, phpmyadmin juga
menyediakan fasilitas untuk melakukan eksekusi query atau perntah SQL
secara manual. Hal ini dapat dilakukan dengan mengklik tab SQL pada
halaman phpmyadmin, seperti terlihat pada Gambar 5.7.

Gambar 5.7 Fasilitas eksekusi query secara manual pada phpmyadmin

Gambar 5.5 Pengisian struktur tabel tb_pelanggan

118

119

5.2 Insert Data dengan PHP - MySQL

Setelah mengenal beberapa bentuk perintah SQL untuk memanipulasi
atau mengolah data di MySQL, pada bagian ini akan diperkenalkan
bagaimana menerapkan konsep tersebut yang terintegrasi dengan script
PHP.
Pada bagian ini, akan diawali dengan konsep inserting data ke MySQL
melalui PHP. Kasus yang akan digunakan adalah pengelolaan data barang.
Kasus ini juga akan digunakan pada konsep menampilkan data, update data
dan hapus data.
Pembuatan tabel pada database
Sebelum melakukan proses insert data, maka perlu dibuat terlebih
dahulu tabel untuk penyimpanan data di database. Adapun struktur tabel
yang dibutuhkan adalah sebagai berikut.
id_barang
nama_barang
stok
harga_satuan

int(11)
varchar(50)
smallint(6)
int(11)

auto increment

primary key

Selanjutnya struktur tabel tersebut kita konversi ke dalam bentuk

perintah SQL seperti berikut ini.

Gambar 5.8 Perintah SQL untuk membuat database dblatihan

Setelah itu dengan cara yang sama, kita inputkan perintah SQL untuk
membuat tabel barang seperti terlihat pada Gambar 5.9 berikut ini.

CREATE TABLE `tb_barang` (

`id_barang` INT(11) NOT NULL AUTO_INCREMENT,
`nama_barang` VARCHAR(50) NOT NULL,
`stok` SMALLINT(6) NOT NULL DEFAULT '0',
`harga_satuan` INT(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id_barang`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB;

Adapun untuk pembuatan database dan tabel, dapat menggunakan tool

phpmyadmin. Database yang dibuat adalah dengan nama dblatihan. Dalam
hal ini akan digunakan fasilitas eksekusi query secara manual yang
disediakan oleh phpmyadmin. Perintah SQL untuk membuat database
adalah sebagai berikut.
CREATE DATABASE dblatihan;

Input dan eksekusi perintah SQL ini, dapat dilihat seperti pada Gambar 5.8
(dengan asumsi telah berhasil login/masuk ke aplikasi phpmyadmin).
Eksekusi dilakukan dengan menekan tombol Go.

Gambar 5.9 Membuat tabel tb_barang pada database dblatihan

120

121

Pada perintah SQL yang di-inputkan terdapat perintah USE. Perintah USE ini
digunakan untuk menset penggunaan objek database dblatihan yang telah
dibuat sebelumnya.

Berikut ini contoh script PHP untuk menjalankan query SQL untuk insert
data ke tabel MySQL.

Koneksi PHP ke MySQL

Setelah database dan tabel berhasil dibuat, selanjutnya akan dibahas
mengenai koneksi dari PHP ke MySQL. Untuk dapat melakukan koneksi
dari PHP ke MySQL digunakan ekstensi MySQLi. Huruf i pada bagian
akhir artinya Improved (yang disempurnakan dari versi ekstensi
sebelumnya).
Perintah PHP untuk koneksi ke MySQL adalah:
mysqli_connect(host,username,password,dbname);

Keterangan:
o host : nama komputer dimana DBMS MySQL berada, apabila
berada di komputer lokal maka nama hostnya: 'localhost', atau bisa
diisi dengan alamat IP server database MySQL.
o username : nama user yang memiliki hak akses ke DBMS MySQL
o password : password untuk nama user yang memiliki hak akses ke
DBMS MySQL
o dbname : nama database yang digunakan
Contoh dalam script PHP:
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "root";
$mysql_database = "dblatihan";
$conn = mysqli_connect($mysql_hostname, $mysql_user,
$mysql_password, $mysql_database) or die("Koneksi ke database
gagal!");
?>

Sebaiknya script di atas disimpan dalam file script tersendiri, misalkan

configdb.php. Selanjutnya script tersebut dapat di-includekan ke dalam
script lain yang di dalamnya terdapat query-query SQL.

Menjalankan query SQL di PHP

Setelah melakukan koneksi dari PHP ke MySQL, selanjutnya kita bisa
menjalankan query melalui script PHP. Untuk mejalankan query SQL di
PHP, dapat menggunakan perintah:
mysqli_query(connection,query);

<?php
include "configdb.php";
$query = "INSERT INTO namaTabel(field1, field2) VALUES(value1,
value2) ";
mysql_query($conn,$query);
?>

Insert data barang

Setelah mengetahui teknik koneksi ke database, selanjutnya adalah
mengimplementasikan konsep inserting data ke MySQL melalui script PHP
yang diintegrasikan dengan form input. Berikut ini contoh script PHP
beserta form input dalam HTML untuk insert data barang.
insert.php
<?php
include "configdb.php";
if (isset($_POST['act'])) {
$namabarang = $_POST['nmbrg'];
$stokbarang = $_POST['stkbrg'];
$hargasatuan = $_POST['hrgbrg'];
$sql = "INSERT INTO tb_barang(nama_barang,stok,harga_satuan)
VALUES('$namabarang',$stokbarang,$hargasatuan)";
$ex = mysqli_query($conn,$sql) or die("Insert data gagal!");
$result = mysqli_affected_rows($conn);
//cek jika eksekusi query berhasil dilakukan
if ($result>0) {
echo "<script>alert('Insert/Tambah data berhasil..');
location.href='tampil.php'; </script>";
} else {
echo "<script>alert('Insert/Tambah data gagal..');
</script>";
}
}
?>
<h2>Insert/Tambah Data Barang</h2>
<form method="post">
<table border="1">
<tr><td>Nama Barang</td><td><input type="text" name="nmbrg"
/></td></tr>
<tr><td>Stok</td><td><input type="text" name="stkbrg"
/></td></tr>
<tr><td>Harga Satuan</td><td><input type="text" name="hrgbrg"
/></td></tr>
<tr><td colspan="2"><input type="submit" name="act"
value="Save" onClick="return confirm('Apakah benar akan
menambahkan data ini?')" />

122
<input type="button" value="Kembali"
onclick="self.history.back()" /></td></tr>
</table>
</form>

Hasil form input data barang dapat dilihat pada Gambar 5.10 berikut ini.

123
4.

Tampilkan data dari proses fetching sesuai nama field yang ada dalam
array

Berikut ini contoh script PHP untuk menampilkan data barang.

tampil.php

Gambar 5.10 Form insert/tambah data barang

Dalam script tersebut, setelah form input data barang diisi dan kemudian
menekan tombol Save maka nilai input data tersebut akan dikirimkan
menggunakan method POST untuk diproses pada bagian script PHP. Nilainilai yang diinputkan akan ditambahkan ke tb_barang dengan query SQL
INSERT. Apabila query berhasil dieksekusi, maka akan menampilkan alert:
"Insert/Tambah data berhasil" dan kemudian diarahkan menuju ke halaman
tampil.php untuk menampilkan data barang yang berhasil ditambahkan.
5.3 Menampilkan Data dengan PHP - MySQL
Konsep menampilkan data dengan script PHP ini adalah
menggabungkan query SELECT di SQL yang dijalankan dalam script PHP.
Konsep dasar menampilkan data dengan script PHP ini adalah
1. Membuat query SQL untuk menampilkan data (menggunakan
SELECT)
2. Jalankan query tersebut dengan menggunakan mysqli_query() di PHP
3. Baca data hasil query tersebut dengan proses fetching. Gunakan
perintah mysqli_fetch_array() di PHP. Hasil dari mysqli_fetch_array()
ini adalah suatu nilai dalam bentuk array asosiatif dengan nama field
tabel sebagai indeksnya

<!DOCTYPE html>
<html>
<head>
<title>Tampil Data Barang</title>
</head>
<body>
<h2>Tampil Data Barang</h2>
<table border="1">
<thead>
<tr>
<th>ID Barang</th>
<th>Nama Barang</th>
<th>Stok</th>
<th>Harga Satuan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
include "configdb.php";
$res = mysqli_query($conn,"SELECT * FROM tb_barang");
while ($row = mysqli_fetch_array($res)){
?>
<tr>
<td><?php echo $row['id_barang']; ?></td>
<td><?php echo $row['nama_barang']; ?></td>
<td><?php echo $row['stok']; ?></td>
<td><?php echo $row['harga_satuan']; ?></td>
<td>
<a href="update.php?id=<?php echo $row['id_barang'];
?>">Edit</a> |
<a href="action.php?id=<?php echo $row['id_barang'];
?>" onClick="return confirm('Apakah benar akan
menghapus data ini?')">Delete</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</body>
</html>

124
Hasil dari script tampil.php di atas dapat dilihat pada Gambar 5.11 berikut
ini.

125
<a href="update.php?id=<?php echo $row['id_barang'];
?>">Edit</a>

Link yang ditambahkan tersebut menuju ke script update.php dengan

parameter acuan untuk update data adalah id barang.
Berikut ini merupakan contoh script PHP untuk menampilkan form edit data
dan sekaligus untuk memproses update data tersebut.
update.php

Gambar 5.11 Tampil data barang

Dalam script tersebut, proses fetching data menggunakan fungsi
mysqli_fetch_array() dilakukan per baris data dari hasil query. Sehingga
untuk mem-fetching semua data hasil query, digunakan looping WHILE.
Selama masih ada baris data hasil query yang bisa di-fetch, maka looping ini
akan terus berjalan dan baru akan berhenti bila sudah tidak ada baris lagi
yang bisa di-fetch (akhir dari baris data). Setiap kali data di-fetch,
selanjutnya langsung ditampilkan dengan echo. Selain itu, pada setiap baris
akan ditambahkan link (kolom aksi) untuk melakukan edit dan delete data.
5.4 Update Data dengan PHP - MySQL
Proses update suatu data dengan menggunakan script PHP dan
MySQL biasanya memiliki mekanisme sebagai berikut:
1. Tampilkan list data terlebih dahulu
2. Membuat sebuah link pada setiap baris data yang menuju ke proses
update. Link tersebut memuat sebuah parameter yang di dalamnya
terdapat value yang nantinya digunakan sebagai acuan dalam proses
update data.
3. Selanjutnya apabila link tersebut diklik akan muncul form berisi data
yang akan di-edit.
Dari contoh script PHP sebelumnya: tampil.php, yang digunakan untuk
menampilkan data barang telah ditambahkan link pada setiap baris data
menuju ke proses update.

<?php
include "configdb.php";
if(isset($_GET['id'])){
$idbrg = mysqli_real_escape_string($conn,$_GET['id']);
if (isset($_POST['act'])) {
$idbrg = mysqli_real_escape_string($conn,$_POST['idbrg']);
$namabarang = $_POST['nmbrg'];
$stokbarang = $_POST['stkbrg'];
$hargasatuan = $_POST['hrgbrg'];
$sql = "UPDATE tb_barang SET nama_barang = '$namabarang',
stok = $stokbarang, harga_satuan = $hargasatuan
WHERE id_barang = '$idbrg'";
$ex = mysqli_query($conn,$sql) or die("Update data
gagal!");
$result = mysqli_affected_rows($conn);
//cek jika eksekusi query berhasil dilakukan
if ($result>0) {
echo "<script>alert('Update data berhasil..');
location.href='tampil.php'; </script>";
} else {
echo "<script>alert('Update data gagal..'); </script>";
}
}
$res = mysqli_query($conn,"SELECT * FROM tb_barang WHERE
id_barang=".$idbrg);
$row = mysqli_fetch_array($res);
?>
<h2>Update Data Barang</h2>
<form method="post">
<table border="1">
<tr><td>ID Barang</td><td><input type="text" name="idbrg"
readonly value="<?php echo $row['id_barang']; ?>" /></td></tr>
<tr><td>Nama Barang</td><td><input type="text" name="nmbrg"
value="<?php echo $row['nama_barang']; ?>" /></td></tr>
<tr><td>Stok</td><td><input type="text" name="stkbrg"
value="<?php echo $row['stok']; ?>" /></td></tr>
<tr><td>Harga Satuan</td><td><input type="text" name="hrgbrg"
value="<?php echo $row['harga_satuan']; ?>" /></td></tr>

126

127

<tr><td colspan="2"><input type="submit" name="act"

value="Update" onClick="return confirm('Apakah benar akan mengupdate data ini?')" />
<input type="button" value="Kembali"
onclick="self.history.back()" /></td></tr>
</table>
</form>
<?php
}
?>

yang memuat sebuah parameter yang di dalamnya terdapat value yang

nantinya digunakan sebagai acuan dalam proses delete data.
Dari contoh script PHP sebelumnya: tampil.php, yang digunakan
untuk menampilkan data barang telah ditambahkan link pada setiap baris
data menuju ke proses delete.

Dari script tersebut, dapat dilihat bahwa terdapat pengecekan terhadap

parameter id barang: isset($_GET['id']). Apabila $_GET['id'] telah diset
maka akan mengembalikan nilai true dan mengeksekusi query SELECT
untuk mengambil data barang sesuai dengan parameter id barang. Data
barang kemudian ditampilkan dalam form untuk selanjutnya dapat di-edit
dan dikirimkan ke proses update data. Berikut ini, pada Gambar 5.12
merupakan form edit data barang yang ditampilkan setelah mengklik link
edit pada kolom aksi (halaman tampil data barang).

Link yang ditambahkan tersebut menuju ke script delete.php dengan

parameter acuan untuk delete data adalah id barang.

Gambar 5.12 Form update data barang

5.5 Hapus Data dengan PHP - MySQL
Konsep utama dari proses penghapusan data MySQL dengan PHP
adalah menjalankan query SQL DELETE pada script PHP. Hampir sama
dengan proses update data, untuk melakukan proses delete memerlukan link

<a href="action.php?id=<?php echo $row['id_barang']; ?>"

onClick="return confirm('Apakah benar akan menghapus data
ini?')">Delete</a>

Berikut ini merupakan contoh script PHP untuk melakukan proses delete
data barang.
<?php
include "configdb.php";
if(isset($_GET['id'])){
$id = mysqli_real_escape_string($_GET['id']);
$sql = "DELETE FROM tb_barang WHERE id_barang='$id'";
$ex = mysqli_query($conn,$sql) or die("Delete data gagal!");
$result = mysqli_affected_rows($conn);
//cek jika eksekusi query berhasil dilakukan
if ($result>0) {
echo "<script>alert('Delete data berhasil..');
location.href='tampil.php'; </script>";
} else {
echo "<script>alert('Delete data gagal..'); </script>"
}
}
?>

Dari script tersebut, untuk melakukan proses delete data menggunakan id

barang sebagai acuan. Hal ini dapat dilihat pada query SQL: "DELETE FROM
tb_barang WHERE id_barang='$id'", variabel $id merupakan variabel
yang berisikan id barang. Apabila proses delete data ini berhasil, maka akan
menampilkan alert: "Delete data berhasil" dan kemudian diarahkan menuju
ke halaman tampil.php untuk menampilkan keseluruhan data barang.
5.6 Rangkuman
1. Basis data (database) dapat didefinisikan sebagai himpunan kelompok
data yang saling berhubungan yang yang disimpan secara bersama
tanpa pengulangan (redundancy) yang diorganisasi sedemikian rupa
sehingga kelak dapat dimanfaatkan dengan cepat dan mudah untuk

128

2.

3.

4.

5.

5.7
1.
2.
3.

4.

memenuhi berbagai kebutuhan. Basis data disimpan dalam media

penyimpanan elektronis.
Sebuah sistem basis data merupakan sistem yang terdiri atas kumpulan
tabel data yang saling berhubungan (dalam sebuah basis data di sebuah
sistem komputer) dan sekumpulan program (yang biasa disebut
DBMS/Dabatase Management System) yang memungkinkan beberapa
pemakai dan/atau program lain untuk mengakses dan memanipulasi
tabel-tabel data tersebut.
Basis data relasional adalah jenis basis data yang menggunakan model
relasional. Pada model relasional, data disusun dalam bentuk sejumlah
relasi atau tabel. Setiap tabel tersusun atas sejumlah baris dan kolom.
Baris mewakili datu kesatuan data dan kolom menyatakan bagianbagian yang menyusun sebuah baris. Pada model relasional, satu tabel
bisa berhubungan dengan tabel lain. Hubungan dibentuk melalui
mekanisme kunci primer (primary key) dan kunci asing/tamu (foreign
key).
SQL atau Structured Query Language merupakan bahasa standar yang
digunakan untuk mengakses basis data relasional dan bersifat nonprosedural. Pengaksesan data dapat dilakukan dengan bentuk perintah
yang sederhana. Perintah SQL ini sering juga disingkat dengan sebutan
'query'. Terdapat 3 jenis perintah dasar SQL, yakni DDL (Data
Definition Language), DML (Data Manipulation Language) dan DCL
(Data Control Language).
MySQL adalah sebuah implementasi dari sistem manajemen basis data
relasional yang didistribusikan secara gratis di bawah lisensi GPL
(General Public License). Dengan kehandalan, kecepatan dan
kemudahan penggunaannya, MySQL menjadi pilihan utama bagi
banyak pengembang perangkat lunak dan aplikasi baik di platform web
maupun desktop. MySQL sering dipadukan dengan bahasa
pemrograman PHP untuk membangun aplikasi web dinamis.
Tugas/Soal Latihan
Apa yang dimaksud dengan basis data dan sistem basis data?
Apa yang dimaksud dengan basis data relasional?
Terdapat 3 jenis perintah dasar SQL : DDL (Data Definition
Language), DML (Data Manipulation Language) dan DCL (Data
Control Language). Jelaskan secara singkat 3 jenis perintah dasar SQL
tersebut!
Buatlah sebuah aplikasi sederhana berbasis web untuk menangani
keperluan pengisian buku tamu (guestbook). Data yang diisikan dalam
form adalah sebagai berikut.

129
Nama
Email
Website
Komentar
Adapun tabel dalam database untuk menyimpan data isian buku tamu
tersebut terdiri atas beberapa field sebagai berikut.
Id
Nama
Email
Website
Tanggal
Komentar

integer
varchar(30)
varchar(30)
varchar(30)
datetime
text

auto increment

primary key

Keterangan:
Field "tanggal" digunakan untuk menyimpan informasi tanggal dan
waktu kapan komentar tersebut dikirim (tanggal ini secara otomatis
membaca tanggal dan waktu ketika komentar buku tamu di-submit).
5.8 Daftar Bacaan
1. Gilmore, W. Jason. 2008. Beginning PHP and MySQL: From Novice to
Professional, Third Edition. California: Apress.
2. Beighley, Lynn dan Morrison, Michael. 2009. Head First PHP &
MySQL. California: OReilly Media, Inc.
3. Beighley, L. 2007. Head First SQL. California: O'Reilly.
4. Kadir, Abdul. 2008. Dasar Pemrograman Web Dinamis Menggunakan
PHP. Yogyakarta: Penerbit Andi.
5. Fatansyah. 2012. Basis Data. Bandung: Penerbit Informatika
6. Solichin, Achmad. 2009. Pemrograman Web dengan PHP dan MySQL.
http://achmatim.net/2009/04/15/buku-gratis-pemrograman-web-denganphp-dan-mysql/. Diakses tanggal 28 Agustus 2014
7. Solichin, Achmad. 2010. MySQL 5, Dari Pemula Hingga Mahir.
http://achmatim.net/2010/01/30/buku-gratis-mysql-5-dari-pemulahingga-mahir/. Diakses tanggal 28 Agustus 2014
8. Yuana,
Rosihan
Ari.
2012.
Tutorial
PHP
Dasar.
http://blog.rosihanari.net/download-tutorial-php-dasar-gratis/. Diakses
tanggal 22 Agustus 2014

131
BAB VI
JAVASCRIPT
6

JAVASCRIPT

RINGKASAN
JavaScript adalah bahasa script yang dapat berjalan pada sisi client
(browser) dan termasuk dalam kelompok client side scripting. Secara
umum, penggunaan JavaScript adalah untuk menciptakan keinteraktifan
halaman web dengan user, misalnya untuk validasi input data dalam form
yang dilakukan user, memberikan efek mouse over pada suatu image atau
link, dan lainnya.
6.1 Pengenalan JavaScript
JavaScript adalah bahasa script yang dapat berjalan pada sisi client
(browser) dan termasuk dalam kelompok client side scripting. Pada
awalnya, JavaScript mulai diperkenalkan di browser Netscape Navigator 2.
Namun pada waktu itu namanya bukan JavaScript, melainkan LiveScript.
Mengingat saat itu teknologi Java sedang tren, maka pihak Netscape
memutuskan untuk mengganti LiveScript menjadi JavaScript.
JavaScript bukanlah bahasa Java dan merupakan dua bahasa yang
berbeda. JavaScript diinterpretasikan oleh klien (kodenya bisa dilihat pada
sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil
kompilasinyalah yang dijalankan oleh klien.
Alasan utama memilih JavaScript adalah karena faktor penggunaan
dan ketersediaan. Maksudnya adalah kebanyakan web browser sudah
mendukung bahasa ini, sebut saja IE, Netscape, Firefox, Opera, Chrome dan
lain-lain. Sehingga dapat diasumsikan bahwa kebanyakan user atau
pengguna membuka halaman web dengan web browser yang telah
mendukung JavaScript. Secara umum, penggunaan JavaScript adalah untuk
menciptakan keinteraktifan halaman web dengan user, misalnya untuk
validasi input data dalam form yang dilakukan user, memberikan efek
mouse over pada suatu image atau link, dan lainnya.
6.2 Penulisan JavaScript
Ada dua jenis cara untuk menuliskan kode JavaScript, yakni pertama
kode JavaScript ditulis dalam file yang terpisah dengan HTML, dan kedua
kode JavaScript ditulis langsung dalam dokumen HTML.
Kode JavaScript yang ditulis di luar HTML disebut Eksternal
JavaScript dengan ektensi file .js. Dalam HTML, penulisan script diawali
dengan <script> </script>. Script yang akan dijalankan harus diletakkan
diantara <script> dan </script>. Tag <script> memiliki beberapa atribut,
namun yang terpenting adalah atribut language dan type. Karena JavaScript
130

bukan satu-satunya bahasa scripting, maka sangatlah perlu untuk

memberitahukan kepada browser bahwa bahasa script yang digunakan
adalah JavaScript dan selanjutnya browser akan menjalankan modul
pendukung Javascript untuk memprosesnya. Sehingga untuk Javascript,
pada tag <script> perlulah ditambahkan atribut berikut ini:
<script language="JavaScript" type="text/javascript">

Script dapat diletakkan di tag <body> dan atau di tag <head> pada bagian
halaman HTML.
Contoh 1
<script language="JavaScript" type="text/javascript">
alert("Belajar Javascript");
</script>

Pada contoh 2 berikut, script di tulis pada bagian <body>.

Contoh 2
<!DOCTYPE html>
<html>
<body>
...
<script language=JavaScript type=text/javascript>
document.write(<h1> Belajar Javascript</h1>);
</script>
...
</body>
</html>

Untuk penulisan eksternal JavaScript adalah sebagai berikut.

<script type="text/javascript" src="namafile.js"></script>

Komentar pada suatu script tidak akan dieksekusi oleh JavaScript.

Komentar ditambahkan pada script untuk memberikan penjelasan script atau
membuat script tidak dieksekusi. Untuk memberikan komentar yang hanya
satu baris gunakan //.
Berikut contoh memberi komentar satu baris.
Contoh 3
// Write to a heading:
document.getElementById("myH1").innerHTML="Selamat datang di
Homepage Saya";
// Write to a paragraph:
document.getElementById("myP").innerHTML="Ini adalah paragraph
saya.";
Contoh 4

132

133

var x=5; // mendeklarasikan x dan memasangkannya dengan 5

var y=x+2; // mendeklarasikan y dan memasangkannya dengan x+2

Contoh 2
var namakota="Malang";

Untuk memberikan komentar lebih dari satu baris, gunakan /* dan */. Jadi
script yang terletak di antara /* dan */ akan dianggap sebagai komentar.
Berikut contoh memberi komentar yang lebih dari satu baris.

Contoh 3
var namakota="malang", propinsi="Jawa Timur", kode="3", x=6.23;

Contoh 5
/*
Kode berikut akan ditulis ke heading dan paragraph.
Dan akan menampilkan halaman homepage
*/
document.getElementById("myH1").innerHTML="Selamat datang di
Homepage Saya";
document.getElementById("myP").innerHTML=" Ini adalah paragraph
saya.";

6.3 Tipe Data dan Variabel

Seperti halnya di bahasa pemrograman yang lain, dalam JavaScript
juga dikenal dengan beberapa nama tipe data dan variabel. Penggunaan
variabel terkait dengan penyimpanan value atau data dalam memori
komputer yang senantiasa dapat di-load. Sedangkan tipe data terkait dengan
jenis data atau value yang disimpan dalam variabel.
a.

Deklarasi Variabel
Dalam JavaScript, setip kali akan menggunakan variabel, langkah
pertama yang harus dilakukan adalah mendeklarasikan keberadaan nama
variabel. Hal ini perlu dilakukan karena dengan adanya deklarasi nama
variabel, komputer akan menyediakan beberapa bagian memori untuk
menyimpan nilai pada nama variabel tersebut. Untuk mendeklarasikan
variabel digunakan kata var. Dalam mendeklarasikan nama variabel ada
beberapa aturan yang harus diperhatian, yaitu :
1. Nama variabel harus dimulai dengan huruf
2. Nama variabel juga dapat dimulai dengan $ dan _
3. Nama variabel adalah casesensitie (memperhatian besar kecilnya huruf)
4. Jangan gunakan Reserved Word atau kata tercadang sebagai nama
variabel. Kata tercadang adalah kata yang sudah built in dalam
Javascript yang sudah bermakna khusus. Pelanggaran hal ini akan
mengakibatkan error.
Contoh 1
var namakota;
namakota="Malang";

Pada contoh 1 di atas, dideklarasikan variabel namakota. Pada awal

pendeklarasian, nilai dari variabel namakota adalah null (kosong).
Kemudian variabel namakota diberi nilai Malang. Untuk memberikan nilai
pada suatu variabel digunakan tanda petik dua (") apabila tie datanya berupa
string. Pada contoh 2 mendeklarasikan variabel namakota yang sekaligus
memberi nilai pada variabel namakota. Contoh 3 di atas mendeklarasikan
beberapa variabel sekaligus. Untuk mendeklarasikan beberapa variabel
digunakan tanda koma (,) untuk memisahkan variabel satu dengan yang
lainnya.
b. Tipe Data
Tipe data pada JavaScript meliput : String, Integer, Float, Array,
Object dan Booleans. Tipe data string adalah data yang memuat karakter,
misalnya "Malang". String adalah sebarang text yang ada di dalam tanda
petik, baik petik ganda () maupun petik tunggal (). Tipe data integer dan
float merupakan tipe data numerik. Dalam mendeklarasikan tipe data object
digunakan tanda kurung kurawal ({ } ). Setiap properti dalam tipe data
object dipisahkan dengan menggunakan tanda koma (, ). Tipe data Booleans
terdiri dari dua nilai, yaitu true atau false. Berikut beberapa contoh
penggunaan tipe data pada JavaScript.
Contoh 4
var namakota="Malang"; // tipe data string
var propinsi='Jawa Timur';
// tipe data string
var x1=34;
// tipe data integer
var x2=3.14;
// tipe data float
var y=123e4;
// tipe data integer
var x=true;
// tipe data boolean
Contoh 5
//berikut beberapa cara mendeklarasikan Array
var mobil=new Array();
mobil[0]="Toyota";
mobil[1]="Daihatsu";
mobil[2]="Honda";
var bulan=new Array("Januari","Febuari","Maret","April");
var kampus=["UGM", "ITB, "UNUD","UNSOED","UNRAM"];
Contoh 6
var klien={nama:"Pamungkas", sex:"Laki-Laki", id:"5758"};

134

135

Pada contoh sebelumnya dideklarasikan beberapa variabel dengan berbagai

tipe data. Pada contoh 4 dideklarasikan variabel dengan tipe data string,
integer, float dan Boolean. Contoh 5 mendeklarasikan tipe data jenis array,
dan beberapa cara variasi penulisannya. Pendeklarasian variabel dengan tipe
data object dicontohkan pada contoh 6.

c.

6.4 Operator pada Javascript

a. Operator Aritmetika
Operator aritmetika digunakan untuk melakukan operasi aritmatika
antara variabel dan atau nilai. Misal diberikan y = 5, Tabel 6.1 berikut
menjelaskan tentang operator aritmetika.

Contoh 1
//untuk menambahkan dua atau lebih variabel tipe String,
gunakan operator + txt1="Selamat Datang";
txt2="Di Jurusan Matematika"; txt3=txt1+" "+txt2;

+
*
/
%
++
--

Deskripsi
Penjumlahan
Pengurangan
Perkalian
Pembagian
Modulus (Sisa bagi)
Increment
Decrement

Contoh
x=y+2
x=y 2
x=y*2
x=y/2
x=y%2
x=++y
x=y++
x=--y
x=y--

Nilai x
7
3
10
2.5
1
6
5
4
5

Nilai y
5
5
5
5
5
6
6
4
4

b. Operator Pemberian Nilai (assignment)

Operator pemberian nilai digunakan untuk memberikan nilai pada
variabel. Dalam contoh berikut, diberikan x = 10, dan y = 5. Tabel 6.2
berikut menjelaskan operator pemberian nilai.
Tabel 6.2 Operator Pemberian Nilai (Assignment) pada JavaScript
Operator
=

Contoh

Sama dengan

Hasil
x=5

x=y

x/=y

x=x/y

x=2

%=

x%=y

x=x%y

x=0

Operator + yang digunakan pada tipe data String

Operator + juga dapat digunakan untuk menambahkan variabel bertipe
data string atau nilai text.

Hasil dari script di atas adalah : Selamat Datang Di Jurusan Matematika

Tabel 6.1 Operator Aritmetika pada JavaScript

Operator

/=

+=

x+=y

x=x+y

x=15

-=

x -=y

x=x y

x=5

*=

x*=y

x=x*y

x=50

Contoh 2
//menambahkan String dan Bilangan
x=5+5;
y="5"+5;
z="angka "+5;

Hasil dari script di atas adalah :

10
55
angka 5

d. Operator Pembanding
Operator pembanding digunakan dalam pernyataan logika untuk
menentukan kesamaan atau perbedaan diantara nilai-nilai. Diberikan nilai
X = 5, Tabel 6.3 di bawah ini menjelaskan operator pembanding.
Tabel 6.3 Operator Pembanding pada JavaScript
Operator
==
===

!=

Deskripsi
Sama dengan
Sama persis dengan (nilai
dan tipe data)
Tidak sama dengan

Pembanding

Balikan

x==8

False

x==5

True

x==="5"

False

x===5

True

x!=8

True

136
!==

Tidak sama dengan (nilai

atau tipe data)

x!=="5"

True

x!==5

False

>

Lebih besar dari

x>8

False

<

Lebih kecil dari

x<8

True

Lebih besar sama dengan

x>=8

False

Lebih kecil sama dengan

x<=8

True

137
if(x == 10){
alert("Hai Apa kabar");
}
</script>

if(kondisi){
kode yang dijalankan jika benar
}else{
kode yang dijalankan jika salah
}

Contoh :

e.

Operator Logika
Operator logika digunakan untuk menunjukkan nilai kebenaran
antara beberapa variabel atau beberapa nilai. Diberikan nilai x = 6 dan y =
3, Tabel 6.4 di bawah menjelaskan operator logika.

<script> var x = 5;
if(x == 10){
alert("Hai Apa kabar");
}else{
alert("x tidak sama dengan 10");
}
</script>

Tabel 6.4 Operator Logika pada JavaScript

Operator

Deskripsi

Pembanding

Balikan

&&

Dan

(x < 10 && y > 1)

True

||

Atau

(x == 5 || y == 5)

False

Negasi/Ingkaran

!(x==y)

True

f.

Operator Bersyarat
Javascript juga memuat operator bersyarat yang memberikan suatu
nilai ke suatu variabel berdasarkan kondisi yang sama.
Sintaksnya:
NamaVariabel=(syarat)?nilai 1: nilai 2

6.5 Statement Kondisional dan Perulangan

a. Kondisional
Kondisional berguna untuk mengecek suatu kondisi dan melakukan
suatu kode jika kondisi tersebut benar atau salah.
if
Sintaks :
if(kondisi){
kode yang dijalankan jika benar
}

Contoh:
<script> var x = 10;

if - else
Sintaks :

if - else if - else
Sintaks :
if(kondisi 1){
kode yang dijalankan
}else if(kondisi 2){
kode yang dijalankan
}else if(kondisi 3){
kode yang dijalankan
}else{
kode jika salah satu
benar
}

jika kondisi 1 benar

jika kondisi 2 benar
jika kondisi 3 benar
kondisi di atas tidak ada yang

Contoh :
<script>
var nilai = 80;
if(nilai >= 85){
alert("A");
}else if(nilai >= 70 && nilai < 85){
alert("B");
}else if(nilai >= 60 && nilai < 70){
alert("C");
}else{
alert("D");
}
</script>

138

139
Contoh :

switch
Sama seperti if - else if - else, berguna jika membutuhkan kondisi yang
banyak.

<script>
for (i = 1; i <= 10; i++) {
document.write(i);
}
</script>

Sintaks :
switch(ekspresi){
case kondisi1
kode yang
break;
case kondisi2
kode yang
break;
case kondisi3
kode yang
break;
}

:
dijalankan jika kondisi1 benar;
:
dijalankan jika kondisi2 benar;
:
dijalankan jika kondisi3 benar;

while
Berguna untuk menjalankan suatu kode terus menerus selama kondisi
bernilai TRUE.
Sintaks :
while(kondisi){
kode untuk dijalankan;
}

Contoh:

Contoh :

<script>
var buah = "mangga";
switch (buah) {
case "apple":
alert("buahnya adalah apple");
break;
case "mangga":
alert("buahnya adalah mangga");
break;
case "jambu":
alert("buahnya adalah jambu"); break;
}
</script>

<script> var i=1; while(i<=5)

{
document.write(Nomor : "+i +"<br />");
i++;
}
</script>

b. Perulangan
Perulangan adalah suatu blok perintah atau kode yang diulang selama
syarat bernilai TRUE. Dalam Javascript, perulangan ini dapat dinyatakan
dalam 2 bentuk, yaitu dengan for dan while.

6.6 Fungsi
Function adalah bagian subprogram yang melaksanakan suatu tugas
tertentu. Setiap saat ketika diperlukan, function ini dapat dipanggil dengan
cara menuliskan nama functionnya saja, disertai dengan parameter apabila
ada.
Sintaks:
function nama_fungsi(parameter){
kode-kode javascript
}

for
Berguna untuk perulangan dengan nilai awalan tertentu, dan dilakukan
hingga kondisi tertentu.

Contoh 1:

Sintaks :

//untuk menjalankan fungsi, cukup tulis namafungsi

tes();
</script>

for(awal; kondisi; increment/decrement)

{
kode untuk dijalankan
}

<script> function tes(){

document.write("Hello World!");
}

Contoh 2:
<script>
function kalikan(x,y){

140

141

z = x * y;
alert("Hasil kali "+x+" * "+y+" = "+z);
}
kalikan(5,3);
</script>

6.7 Penanganan Event

Penanganan Event atau Event Handler adalah kemampuan JavaScript
untuk mendeteksi event atau kejadian-kejadian yang terjadi di halaman web,
kemudian menangani atau melakukan suatu proses jika terdeteksi suatu
event. Event di web bisa macam-macam, seperti klik, double klik,
menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML,
dan sebagainya.

Berikut ini beberapa contoh penangan event menggunakan JavaScript.

1. onclick
Pada contoh berikut ketika user mengklik elemen/komponen button
akan menampilkan window alert.
<script>
function inform(){
alert("Hai anda mengklik saya");
}
</script>

Sintaknya:
nama_event="kode javascript"

Contoh:

<form>
<input type="button" name="test" value="Click me"
onclick="inform()">
</form>

<html>
<body>
<a href="http://www.google.com"
onclick="alert('hello')">google</a>
</body>
</html>

Pada contoh berikut ketika user mengklik elemen/komponen radio

button akan mengubah warna latar halaman web.
<html>
<body>
<form name="go">
<input type="radio" name="C1"
onclick="document.bgColor='lightblue'">
<input type="radio" name="C1"
onclick="document.bgColor='lightyellow'">
<input type="radio" name="C1"
onclick="document.bgColor='lightgreen'">
</form>
</body>
</html>

Pada contoh di atas ada sebuah link google, yang jika diklik (onclick) maka
akan dieksekusi kode JavaScript alert('hello').
Ada macam-macam event yang bisa terjadi pada halaman web atau objek
HTML, yaitu sebagai berikut:
onblur
onchange
onclick
ondblclick
onerror
onfocus
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
onmouseout

onmouseover
onmouseup
onreset
onresize
onselect
onsubmit
onunload

2.

onload
Event onload akan dieksekusi jika suatu objek telah di-load, pada
contoh berikut menempatkan event onload pada tag <body>, artinya
jika halaman web sudah di-load semua, maka dieksekusi kode
JavaScript.
<html>
<head><title>Body onload example</title>
</head>

142
<body onload="alert('Halaman ini telah selesai di
loading')">
Welcome to my page
</body>
</html>

3.

onmouseover dan onmouseout

Onmouseover berguna untuk mendeteksi apakah pointer mouse berada
di atas suatu objek HTML, onmouseout berguna untuk mendeteksi
apakah pointer mouse keluar dari objek HTML, contoh:
<html>
<body>
<table>
<tr onmouseover="this.bgColor='lightblue'"
onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
<td>Baris pertama</td>
</tr>
<tr>
<td>Baris kedua</td>
</tr>
</body>
</html>

4.

onunload
Biasanya berguna untuk mendeteksi jika user meninggalkan atau
menutup suatu halaman web.
<html>
<body onunload="alert('Thank you. Please come back to this
site and visit us soon, ok?')">
<h1>Welcome</h1>
</body>
</html>

6.8 Object String

a. Memformat Teks dengan JavaScript
Untuk membantu melakukan formatting terhadap teks, JavaScript
menyediakan beberapa metode formatting.
Properti
length

Deskripsi
Menghasilkan jumlah karakter dari suatu string atau teks

143
big()

Menghasilkan string dengan diapit tag <big>.

blink()

Menghasilkan string dengan diapit tag <blink>

bold()

Menghasilkan string dengan diapit tag <b>

fixed()

Menghasilkan string dengan diapit tag <tt>

fontcolor(warna)

Menghasilkan string dengan diapit tag

<font color="warna">

fontsize(size)

Menghasilkan string dengan diapit tag

<font size="size">

italics()

Menghasilkan string dengan diapit tag <i>

link(url)

Menghasilkan string dengan diapit tag <a href="url">

small()

Menghasilkan string dengan diapit tag <small>

strike()

Menghasilkan string dengan diapit tag <strike>

sub()

Menghasilkan string dengan diapit tag <sub>

sup()

Menghasilkan string dengan diapit tag <sup>

toLowerCase()

Mengubah string menjadi huruf kecil semua.

toUpperCase()

Mengubah string menjadu huruf besar semua

Berikut ini beberapa contoh penggunaan metode formatting teks.

Contoh 1:
<script>
var teks = "denpasar";
panjang = teks.length;
alert(panjang);
</script>

Metode

Deskripsi

Output:
Menampilkan alert window yang berisi panjang teks: 8

anchor(nama)

Menghasilkan string dengan diapit tag

<a name="nama">

Contoh 2:
<script>
var message="Welcome to our site!";

144
document.write(message);
</script>

Output:
Welcome to our site!

145
concat(teks1, teks2,...)

Menggabungkan satu atau lebih string-string

(teks1, teks2, dan sebagainya).

fromCharCode(c1, c2,...)

Meghasilkan string yang dibuat menggunakan

urutan dari nilai unicode

Contoh 3:
<script>
var message="Welcome to our site!"
document.write(message.toUpperCase())
</script>

indexOf(substr, [start])

Output:
WELCOME TO OUR SITE!
match(regexp)

Contoh 4:
<script>
var message="Welcome to our site!";
var format=message.toUpperCase();
var size=1;
for (i=0;i<message.length;i++){
document.write(format.charAt(i).fontsize(size).bold());
if (size<7){
size++
}else{
size=1
}
}

replace( regexp,
replacetext)

Mencari dan menukar string yang dicari

berdasarkan pola regular expression.

search(regexp)

Mengetes apakah pola regular expression cocok

pada suatu string, jika cocok akan
menghasilkan index dari yang cocok, jika tidak
ada yang cocok menghasilkan -1.

slice(start, [end])

Menghasilkan substring dari suau string

berdasarkan "start" dan "end" argument.

split(delimiter, [limit])

Memotong-motong string berdasarkan

pembatas yang ditentukan, hasilnya dalam
bentuk array.

substr(start, [length])

Menghasilkan karakter atau substring dari suatu

string yang dimulai dari "start" sampai panjang
length yang ditentukan.

Output:

LCO

WE

ME TO OUR SITE!

b. Penanganan Objek String

Sebelumnya telah dibahas metode string yang berkaitan dengan format
teks. Berikutnya adalah metode objek string lainnya yang berfungsi untuk
menangani dan memanipulasi objek string.
Metode
charAt(x)
charCodeAt(x)

Deskripsi
Menghasilkan karakter pada posisi x dari suatu
string.
Menghasilkan nilai Unicode value dari karakter
pada posisi x dari suatu string.

Mencari dan (jika ditemukan) menghasilkan

nomor index number dari karakter atau
substring yang di dalam string. Jika tidak
ditemukan, hasilnya -1. "Start" adalah argument
opsional,posisi awal di string untuk memulai
pencarian , defaultnya adalah 0
Mengeksekusi suatu pencarian untuk string
berdasarkan pola regular expression.
Menghasikan suatu array informasi, jika tidak
ditemukan menghasilkan null.

Berikut ini beberapa contoh penggunaan metode penanganan objek string.

1. Validasi email
Pada contoh berikut, melakukan pengecekan validasi email. Cara
pengecekannya adalah memeriksa apakah string yang diinput
mengandung karakter @ atau titik (.)
<form name="test"
onSubmit="checkemail(this.test2.value);return false">
<input type="text" size=20 name="test2">

146
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function checkemail(email){
if (email.indexOf("@")!=-1 && email.indexOf(".")!=-1)
alert("bagus!");
else
alert("Bukan email");
}
</script>

2.

Menghitung kata
Pada contoh berikut, melakukan penghitungan kata, caranya adalah
mengambil isi suatu textarea, lalu memotong-motong isinya dengan
metode split. Hasilnya dapat dilihat pada Gambar 6.1.
<form name="wordcount">
<textarea rows="12" name="wordcount2" cols="38"
wrap="virtual"></textarea><br>
<input type="button" value="Hitung kata" onClick="hitung()">
<input type="text" name="wordcount3" size="20">
</form>
<script type="text/javascript">
function hitung(){
var formcontent=document.wordcount.wordcount2.value;
isi=formcontent.split(" ");
document.wordcount.wordcount3.value=isi.length;
}
</script>

147
c.

Parse String ke Integer dan Float

parseInt, untuk mengubah string menjadi integer dan parseFloat, untuk
mengubah string menjadi float.
Contoh :
<script type="text/javascript">
document.write(parseInt("10") + "<br />");
document.write(parseInt("10.00") + "<br />");
document.write(parseInt("10.33") + "<br />");
document.write(parseInt("34 45 66") + "<br />");
document.write(parseInt(" 60 ") + "<br />");
document.write(parseInt("40 years") + "<br />");
document.write(parseInt("He was 40") + "<br />");
document.write("<br />");
document.write(parseInt("10")+ "<br />");
document.write(parseInt("10",10)+ "<br />");
document.write(parseInt("010")+ "<br />");
document.write(parseInt("10",8)+ "<br />");
document.write(parseInt("0x10")+ "<br />");
document.write(parseInt("10",16)+ "<br />");
</script>

6.9 Object Window

a. Membuka Window di JavaScript
Untuk membuka window di JavaScript adalah dengan metode open().
Sintaks:
window.open(url, nama_window, konfigurasi);

Contoh:
window.open("http://www.google.com","windowku","width=300,
height=200");

Untuk konfigurasi yang bisa diset sebagai berikut:

Gambar 6.1 Aplikasi sederhana penghitung kata dengan JavaScript

Konfigurasi

Deskripsi

width

Lebar window

height

Tinggi window

Nilai
Lebar window dalam
pixel
Tinggi window dalam
pixel

148
toolbar

Menampilkan toolbar browser

1 atau 0

menubar

Menampilkan menubar browser 1 atau 0

scrollbars

Apakah menampilkan
scrollbars

1 atau 0

resizable

Men-set apakah bisa window

diubah-ubah ukurannya

1 atau 0

Contoh:
<html>
<body>
<script>
function bukawindow(){
window.open("http://www.google.com","google","width=400,
height=300,toolbar=1");
}
</script>
<input type="button" onclick="bukawindow()" value="buka">
</body>
</html>

b. Mereload, Menutup, Meloading Halaman Baru, Print

Untuk mereload window adalah dengan cara:
window.location.reload()

Untuk menutup window adalah dengan cara:

window.close()

Untuk meloading halaman baru adalah:

window.location="urlkamu.com"

Kode di atas akan sama jika anda mengklik suatu link:

<a

href="urlkamu.com">urlkamu</a>

Untuk mengeprint halaman web

149
Untuk mengakses window parent gunakan window.opener
Contoh:
induk.html
<html>
<head>
<title>Test</title>
<script language="javascript">
function buka(){
var x = window.open('anak.html', 'newWindow',
'height=300,width=300');
}
</script>
</head>
<body>
<form name=formulir>
<INPUT type=button value="buka window" name=submit1
onClick="buka();">
<input type=text name=kotak id=kotak>
</form>
</body>
</html>

anak.html
<html>
<head>
<title>testing</title>
<script language=javascript>
function setInduk(){
window.opener.document.getElementById("kotak").value =
document.getElementById("inputan").value;
}
</script>
</head>
<body>
<form name=myForm>
<input type=text name="inputan" id="inputan">
<input type=button value="Click Me" onClick="setInduk();">
</form>
</body>
</html>

window.print()

d. Alert, Confirm, dan Prompt

c.

Komunikasi Antar Window

Adakalanya ketika membuka window baru, perlu melakukan
komunikasi data ke window parent-nya, atau bisa mengakses dan
memanipulasi objek di window parent.

alert : digunakan untuk menampilkan window alert

Contoh:
<script>
alert("Hellow World!!");
</script>

150
Hasil:

6.10 Dynamic HTML

a. Mengakses dan Manipulasi Objek HTML
Untuk
mengakses
objek
HTML,
dapat
menggunakan
document.getElementById("id_objek") atau document.getElementsByName
("nama_objek").
Gambar 6.2 Window alert dengan JavaScript

151

confirm, digunakan untuk memunculkan window konfirmasi atau

semacam pertanyaan yang jawabannya antara OK atau Cancel
Contoh:
<script type="text/javascript">
var x=window.confirm("Apakah anda baik-baik saja?");
if (x)
window.alert("Good!");
else
window.alert("Too bad");
</script>

Hasil:

Contoh:
<html>
<head>
<script type="text/javascript">
function getElement(){
var x=document.getElementById("myHeader") alert("Ini
adalah elemen " + x.tagName);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getElement()">
Klik saya untuk lihat nama tag saya</h1>
</body>
</html>

Berikut metode-metode untuk memanipulasi objek HTML.

innerHTML: untuk mendapatkan isi teks atau html suatu objek atau
tag HTML
Contoh:
Gambar 6.3 Window confirm dengan JavaScript

prompt, digunakan untuk meminta inputan melalui window

Contoh:
<script type="text/javascript">
var y=window.prompt("Masukkan nama anda");
window.alert(y);
</script>

Hasil:

Gambar 6.4 Window prompt dengan JavaScript

<html>
<head>
<script type="text/javascript">
function lihatisi(){
isi = document.getElementById("kepala").innerHTML;
alert(isi);
}
function tukarisi(){
document.getElementById("kepala").innerHTML = "Tulisan
Ini diganti";
}
</script>
</head>
<body>
<h1 id="kepala">Selamat Datang user!!</h1>
<input type="button" onclick="lihatisi()" value="Lihat isi
H1">
<input type="button" onclick="tukarisi()" value="Tukar isi
H1">
</body>
</html>

152

value: untuk mengambil atau memanipulasi nilai suatu input form.

Contoh:
<html>
<head>
<script type="text/javascript">
function lihatisi(){
isi = document.getElementById("teks").value;
alert(isi);
}
function tukarisi(){
document.getElementById("teks").value = "Tulisan Ini
diganti";
}
</script>
</head>
<body>
Ketik tulisan di form di bawah:<br>
<input type=text name="teks" id="teks">
<input type="button" onclick="lihatisi()" value="Lihat">
<input type="button" onclick="tukarisi()" value="Tukar">
</body>
</html>

b. Memanipulasi Style atau CSS Objek HTML

Untuk melakukan manipulasi style atau CSS suatu objek dengan
JavaScript, dapat dilakukan dengan cara:
objekHTML.style.namaStyle = "style yang diset"
objekHTML.namaStyle = "style yang diset"

atau
document.getElementById("namaid").style.namaStyle = "style yang
diset"
document.getElementById("namaid").namaStyle = "style yang
diset"

153

Mengubah warna latar td

Contoh:
<html>
<head>
</head>
<body>
<table border=1 width=500 bgcolor="yellow">
<tr>
<td onmouseover="this.bgColor='red'"
onmouseout="this.bgColor='yellow'">Supriyanto</td>
</tr>
<tr>
<td onmouseover="this.bgColor='red'"
onmouseout="this.bgColor='yellow'">Deni Hariyadi</td>

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

Mengubah warna latar halaman web

Contoh:
<html>
<head>
<script>
function ubah(){
document.bgColor = "lightblue";
}
</script>
</head>
<body>
<input type="button" onclick="ubah()" value="ubah">
</body>
</html>

Mengubah posisi objek

Contoh:
<html>
<head>
<script>
function ubah(){
document.getElementById("kotak").style.top = 300;
document.getElementById("kotak").style.left = 300;
}
</script>
</head>
<body>
<input type="button" onclick="ubah()" value="ubah">
<div id="kotak"
style="position:absolute;top:50;left:50;backgroundcolor:yellow;width:50;height:50">
</div>
</body>
</html>

6.11 Penanganan Form

a. Penanganan CheckBox
Mendeteksi apakah checkbox sudah di-check
Sintaksnya:
checkboxObject.checked=true|false

Contoh:
<html>
<head>
<script type="text/javascript">
function check(){

154
document.getElementById("myCheck").checked=true
}
function uncheck(){
document.getElementById("myCheck").checked=false
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="Check
Checkbox" />
<input type="button" onclick="uncheck()"
value="Uncheck Checkbox" />
</form>
</body>
</html>

Mengambil nilai checkbox

Contoh:
<html>
<head>
<script type="text/javascript">
function createOrder(){
coffee=document.forms[0].coffee;
txt="";
for (i=0;i<coffee.length;++ i){
if (coffee[i].checked){
txt=txt + coffee[i].value + " "; }
}
document.getElementById("order").value="You ordered a
coffee with " + txt;
}
</script>
</head>
<body>
<p>How would you like your coffee?</p>
<form>
<input type="checkbox" name="coffee" value="cream">With
cream<br />
<input type="checkbox" name="coffee" value="sugar">With
sugar<br />
<br />
<input type="button" onclick="createOrder()" value="Send
order">
<br /><br />
<input type="text" id="order" size="50">
</form>
</body>
</html>

155
b. Penanganan Input Radio
Contoh:
<html>
<head>
<script type="text/javascript">
function setkelamin(jenis){
document.getElementById("kelaminmu").value = jenis;
}
</script>
</head>
<body>
jenis Kelamin:
<br>
<input type=radio value="Laki-laki" name="kelamin"
onclick="setkelamin(this.value)">Laki-laki<br>
<input type=radio value="Perempuan" name="kelamin"
onclick="setkelamin(this.value)">Perempuan<br>
<input type=text id="kelaminmu">
</body>
</html>

c.

Penanganan Select Box

Mengambil nilai select box
Contoh:
<html>
<head>
<script type="text/javascript">
function favBrowser(){
var mylist=document.getElementById("myList");
document.getElementById("favorite").value=mylist.options
[mylist.selectedIndex].text;
}
</script>
</head>
<body>
<form>
Select your favorite browser:
<select id="myList" onchange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
<p>Your favorite browser is: <input type="text"
id="favorite" size="20"></p>
</form>
</body>
</html>

156

157

Menghapus option dari dropdown list

Contoh:

Berikut merupakan contoh sederhana pemograman dengan menggunakan

jQuery.

<html>
<head>
<script type="text/javascript">
function removeOption(){
var x=document.getElementById("mySelect");
x.remove(x.selectedIndex);
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
<option>Melon</option>
</select>
<input type="button" onclick="removeOption()" value="Remove
option">
</form>
</body>
</html>

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>

6.12 jQuery
jQuery adalah JavaScript library, jQuery mempunyai semboyan "write
less, do more". jQuery dirancang untuk memperingkas kode-kode
JavaScript. jQuery adalah JavaScript library yang cepat dan ringan untuk
menangani dokumen HTML, menangani event, membuat animasi dan
interakasi AJAX. jQuery dirancang untuk mengubah cara menulis
JavaScript. Library jQuery mempunyai kemampuan :
Kemudahan mengakses elemen-elemen HTML
Memanipulasi elemen HTML
Memanipulasi CSS
Penanganan event HTML
Efek-efek JavaScript dan animasi
Modifikasi HTML DOM
AJAX
Menyederhanakan kode JavaScript lainnya
Untuk memulai mempelajari jQuery, diperlukan file jquery.js yang
dapat diperoleh dari situs http://www.jquery.com. Dimana setiap menulis
kode JavaScript dengan menggunakan jQuery harus menyertakan atau
memasukkan file jquery.js ke dalam kode JavaScript yang dibuat.
<script type="text/javascript" src="jquery.js"></script>

6.12.1 Sintaks jQuery

Sintaks jQuery biasanya dibuat untuk memilih elemen-elemen HTML
dan melakukan aksi terhadap elemen yang dipilih.
Sintaks :
$(selector).action()

Tanda dollar, untuk mendefinisikan jQuery

(selector), untuk menunjukkan elemen yang dipilih atau dituju
action(), adalah jQuery action yang akan dilakukan terhadap elemen
yang dipilih.
Contoh :
$(this).hide() menyembunyikan elemen saat ini
$("p").hide() menyembunyikan semua paragraf atau konten dari
$(".test").hide() menyembunyikan elemen yang mempunyai

tag <p>

class="test"
$("#test").show()

menampilkan elemen yang mempunyai id="test"

Karena hampir segala sesuatu yang dilakukan bila menggunakan jQuery

membaca atau memanipulasi document object model (DOM), maka perlu
memastikan bahwa penambahan event segera dilakukan setelah DOM siap.

158
Untuk melakukan hal tersebut, perlu menambahkan kode ready event untuk
dokumen.
$(document).ready(function(){
//kode anda di sini
});

Kode di atas berarti kode dijalankan apabila halaman HTML telah di-load
semuanya. Atau dengan kode JavaScript biasanya seperti ini :
window.onload = function(){ //kode anda di sini }

159
jQuery Attribute Selectors
jQuery mirip dengan XPath dalam hal memilih elemen berdasarkan atribut
yang ada.
$("[href]") memilih semua elemen dengan atribut href.
$("[href='#']") memilih semua elemen dengan atribut href bernilai="#".
$("[href!='#']") memilih semua elemen dengan atribut href dengan nilai
tidak sama dengan "#".
$("[href$='.jpg']") memilih semua elemen dengan atribut href yang
mengandung ".jpg".

Contoh kode jQuery:

$(".tombol1").click(function(){
$("p").hide(1000);
});

Kode $(".tombol1")adalah jQuery selektor. Dimana memilih elemen yang

mempunyai class="tombol1" untuk diberikan suatu event. $ sendiri adalah
alias untuk jQuery class. Oleh karena $()untuk membuat objek jQuery.
Kemudian ditambahkan fungsi click(). Fungsi ini berguna untuk
memberikan event onclick untuk elemen yang telah dipilih (dalam hal ini
adalah elemen yang mempunyai class='tombol1'). Dan kemudian
melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi
artinya apabila elemen dengan class="tombol1" diklik maka melakukan
fungsi $("p").hide(1000); Fungsi hide() dan show() adalah fungsi built in
dari jQuery.
6.12.2 jQuery Selectors
jQuery element selectors dan attribute selectors memungkinkan untuk
memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama
atribut atau konten. Selectors memungkinkan untuk memanipulasi elemen
HTML sebagai kelompok atau sebagai elemen tunggal. Pada penjelasan
sebelumnya telah ditunjukkan contoh cara memilih elemen HTML
menggunakan jQuery.
Berikut ini beberapa contoh jQuery selector.
jQuery Element Selectors
jQuery mirip dengan CSS dalam hal memilih elemen HTML.
$("p") memilih semua elemen <p>
$("p.intro") memilih semua elemen <p> yang mempunyai class="intro".
$("p#demo") memilih elemen <p> yang mempunyai id="demo".

6.12.3 jQuery Events

Salah satu kemampuan utama jQuery adalah menangani event. Dalam
pemograman jQuery, biasanya kode-kode pemograman diletakkan di dalam
penanganan event yang terjadi pada suatu atau kelompok elemen yang
dipilih.
Hampir-hampir mirip dengan Visual Basic, biasanya suatu kode
dijalankan apabila ada sesuatu yang terjadi (event) pada suatu elemen.
Misalnya, kalau ada tombol di klik, maka action atau kode apa yang
dijalankan, apabila ada combox dipilih, kode apa yang dijalankan, pada
contoh jQuery sebelumnya :
$(".tombol1").click(function(){
$("p").hide(1000);
});

Kode di atas berarti apabila terjadi event mengklik elemen yang mempunyai
class=tombol1, maka lakukan fungsi hide() terhadap semua element <p>.
Berikut ini beberapa event-event yang dapat terjadi dari elemen HTML.
$(document).ready(function)
$(selector).change(function)
$(selector).click(function)
$(selector).dblclick(function)
$(selector).keydown(function)
$(selector).keypress(function)
$(selector).keyup(function)
$(selector).load(function)
$(selector).mouseout(function)
$(selector).mouseover(function)
$(selector).select(function)
$(selector).submit(function)
$(selector).unload(function)

6.12.4 Efek-Efek dengan jQuery

Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang
siap pakai. Biasanya untuk membuat efek memudar di JavaScript harus

160

161

membuat kode yang lumayan panjang. Tapi dengan menggunakan jQuery

cukup menggunakan fungsi $(selector).fadeIn().

6.12.5 Manipulasi HTML dengan jQuery

jQuery mempunyai kemampuan yang powerfull dalam hal
memanipulasi, mengambil atau menambah konten, dan sebagainya terhadap
HTML.

Berikut salah satu efek siap pakai yang disediakan oleh jQuery.
jQuery show() Effect
Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur
elemen yang tersembunyi melalui CSS adalah display:none (bukan
visibility:hidden).
Sintaks:
$(selector).show(speed,callback)

Parameter
speed

callback

Deskripsi
Opsional. Menentukan kecepatan elemen muncul dari hidden
ke visible. Defaultnya adalah 0.
Nilainya bisa berupa:
milliseconds (contoh : 1500)
"slow"
"normal"
"fast"
Opsional. Suatu fungsi yang akan dijalankann apabila efek
show selesai dijalankan.

Contoh:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").show(1000,tampilkanAlert);
});
});
function tampilkanAlert(){
alert("Paragraf sekarang muncul");
}
</script>
</head>
<body>
<p style="display:none">Ini adalah paragraph tersembunyi.</p>
<button class="tombol1">Show</button>
</body>
</html>

Berikut beberapa contoh penggunaan fungsi untuk memanipulasi HTML.

html()
Untuk me-set konten (biasanya disebut innerHTML) dari elemen HTML
yang dipilih dapat menggunakan $(selector).html(content). Apabila
parameter content tidak ditentukan maka fungsi html() berguna untuk
mendapatkan konten dari HTML.
Contoh:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#lihat").click(function(){
var isinya = $("#paragraf").html();
alert(isinya);
});
$("#isikan").click(function(){
var isilagi = $("#isi").val();
alert(isilagi);
$("#paragraf").html(isilagi);
});
});
</script>
<body>
<button id="lihat">Lihat</button>
<p id="paragraf">
jQuery
mempunyai
kemampuan
yang
powerfull
dalam
hal
memanipulasi,mengambil atau menambah konten, dan sebagainya
terhadap HTML
</p>
Teks :
<input type="text" id="isi">
<button id="isikan">Isikan</button>
</body>
</html>

val()
Pada contoh di atas terdapat kode:
var isilagi = $("#isi").val();

Kode ini berarti kita mengambil nilai dari <input type="text" id="isi">
dan memasukkannya ke variabel isilagi. Sama dengan fungsi html(),

162
apabila memasukkan nilai dari val(), maka artinya me-set nilai dari elemen
yang dipilih. Biasanya val() digunakan pada elemen-elemen HTML
<input>, contoh :
$("#isi").val("hallo apa kabar");

Kode di atas berarti men-set nilai

"hallo apa kabar".

<input type="text" id="isi">

dengan

attr()
Dengan menggunakan fungsi attr(), memberikan kemudahan untuk
mendapatkan nilai dari suatu properti elemen HTML yang dipilih.
Sintaks :
$(selector).attr(properties,nilai);

Parameter properties adalah nama properti yang ingin diambil atau di-set.
Contoh properti misalnya: id, class, title, src, href dan sebagainya.
Parameter nilai, apabila diisi artinya me-set nilai properti, apabila kosong
artinya mengambil nilai properti tersebut.
Contoh:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.link').click(function(){
var id=$(this).attr("id");
var class=$(this).attr("class");
var href=$(this).attr("href");
alert(id);
alert(class);
alert(href);
});
});
</script>
<a href="http://ee.unud.ac.id" class="link" id="13">link</a>
</body>
</html>

addClass()
Berguna untuk menambahkan atau mengubah class untuk elemen yang
dipilih.
Sintaks :
$(selector).addClass(namakelas)

163
Contoh:
<html>
<head>
<style>
.besar
{
font-size:106px;
}
.kecil
{
font-size:12px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.ubahclass').click(function(){
$(".besar").addClass("kecil");
});
});
</script>
<a href="#" class="ubahclass" >Klik </a>
<div class="besar">ee.unud.ac.id</div>
</body>
</html>

6.12.6 Manipulasi CSS dengan jQuery

jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS.
Salah satunya memanipulasi properti CSS Ada 3 fungsi utama dalam jQuery
untuk melakukan manipulasi properti CSS:
$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)

Fungsi css() berguna untuk mendapatkan atau men-set sebuah properti CSS
atau lebih untuk elemen yang dipilih. Jika parameter name dan value diisi,
artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk
properti CSS lebih dari satu, bisa menggunakan {properties}. Jika hanya
untuk mendapatkan nilai dari properti CSS yang diinginkan dari elemen
yang dipilih cukup mengisikan parameter name saja.
Contoh:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tombol1").click(function(){

164
$(".p1").css("color","red");
$(".p2").css({"color":"white","backgroundcolor":"#ff8954","font-family":"Arial","fontsize":"20px",
"padding":"5px"});
});
$("#tombol2").click(function(){
var nilai = $(".p1").css("color");
alert(nilai);
});
});
</script>
</head>
<body>
<p class="p1">Paragraf ini cuma berubah satu properti CSS</p>
<p class="p2">Paragraf ini cuma berubah banyak properti CSS</p>
<button id="tombol1">ubah CSS paragraf</button>
<button id="tombol2">Ambil nilai CSS paragraf 1</button>
</body>
</html>

6.13 Pengenalan AJAX

AJAX adalah singkatan dari Asynchronous JavaScript and XML yaitu
pendekatan baru dalam aplikasi web yang berbeda dengan aplikasi web
konvensional.
Aplikasi web konvensional bekerja secara synchronously seperti
ditampilkan pada Gambar 6.5 berikut ini.

Gambar 6.5 Komunikasi synchronous aplikasi web konvensional

165
Model interkasi antara user dan browser pada web konvensional
adalah sebagai berikut:
1. Setiap kali browser mengirimkan request ke server, user menunggu
sampai browser menerima response dari server. Setelah response
diterima, halaman browser akan di-refresh untuk menampilkan
response tersebut. Semakin kompleks request user, maka semakin lama
user menunggu. Proses ini disebut juga Click-Wait-Refresh
2. Model komunikasi antara browser dan server adalah synchronous
request/response. Artinya, setelah request dikirim ke server, aplikasi
tidak dapat digunakan user sampai rangkaian request dan response
selesai. Aplikasi dapat digunakan kembali setelah browser selesai
menerima response, yang ditampilkan dalam bentuk halaman baru.
Akibat dari model interaksi tersebut antara lain:
1. Selama halaman baru di-refresh, user kehilangan halaman sebelumnya,
juga kehilangan posisi terakhir dari posisi scroll (jika halaman tersebut
dapat di scroll).
2. Penggunaan aplikasi terasa lambat karena adanya waktu menunggu
response halaman baru. Selain itu, aplikasi terasa tidak interaktif dalam
memberikan feedback kepada user.
Berdasarkan masalah tersebut, dikembangkan beberapa alternatif
solusi dengan satu tujuan, yaitu membuat model interaksi aplikasi web
semakin interaktif. Salah satu solusi tersebut adalah Asysnchronous
Javascript and XML (AJAX). Keunggulan AJAX antara lain:
Menghemat waktu dalam menampilkan halaman yang berisi data yang
diminta user karena hanya data yang diminta saja yang dikirim dari
server.
Data terbaru dari server dapat ditampilkan di client tanpa user
melakukan refresh pada browser.
Tidak diperlukan plug-in khusus pada browser untuk menjalankan
karena diadopsi oleh browser-browser umum seperti Mozilla Firefox,
Microsoft Internet Explorer dan Opera.
AJAX dibangun dengan teknologi pemrograman web sebagai berikut:
1. JavaScript
JavaScript adalah bahasa pemrograman script yang berjalan di sisi
client. Kegunanaan utama dari script ini adalah untuk menjalankan
fungsi yang akan digunakan oleh halaman HTML dengan kemampuan
untuk mengakses Document Object Model (DOM). Penggunaannya
antara lain menampilkan jendela popup yang dapat diatur ukuran,

166

167

posisi, dan tampilannya; memvalidasi masukan user pada form; dan

memanipulasi image saat pointer mouse melawati image tersebut. Pada
AJAX, Javascript dijalankan apabila ada event yang terjadi pada
halaman web dan berfungsi mengintegrasikan teknologi lain agar AJAX
dapat beroperasi.
2.

DOM (Document Object Model)

Standar model objek untuk memetakan struktur objek pada dokumen
seperti HTML dan XML dalam bentuk tree. Dengan DOM ini, objekobjek pada dokumen tersebut dapat diakses secara bebas tanpa
memperhatikan hirarki parent dan child dalam tree objek tersebut.
Struktur ini harus disimpan dalam buffer browser agar objek dapat
diakses kapan saja selama aktif dan bebas hirarki. Pada AJAX, DOM
berfungsi bagi Javascript untuk mengakses objek pada halaman web
dan memanipulasinya sesuai kebutuhan.

3.

CSS (Cascading Style Sheet)

CSS adalah bahasa standar World Wide Web Consortium (W3C) yang
mendefinisikan tampilan dokumen markup language seperti HTML dan
XML. Tampilan yang dimaksud antara lain ukuran, warna background,
warna huruf, dan posisi pada halaman dokumen. Properti CSS dari
objek dokumen dapat dimanipulasi oleh JavaScript melalui DOM.

4.

Gambar 6.6 Komunikasi asynchronous AJAX

Perbedaan antara aplikasi web model konvensional dengan aplikasi

web yang sudah menggunakan AJAX dapat dilihat pada Gambar 6.7.

XMLHttpRequest
XMLHttpRequest adalah objek JavaScript yang memungkinkan
terjadinya komunikasi asynchronous antara browser dan server.
Komunikasi asynchronous memungkinkan user tetap dapat
menggunakan aplikasi selama browser mengirim request dan menerima
response dari server. Hal ini dimungkinkan karena tipe komunikasi ini
dilakukan di background, atau dengan kata lain permintaan data ke
server (data fetching) tidak menggangu tampilan aplikasi. Model
komunikasi asynchronous digambarkan pada Gambar 6.6.
XMLHttpRequest berkomunikasi dengan server menggunakan method
standar HTTP, yakni GET dan POST.

Gambar 6.7 Perbandingan model aplikasi web konvensional dan AJAX

168
Pada model konvensional, client mengirimkan request HTTP, dan
server mengembalikan response beserta format tampilan halamannya yang
diwakili oleh file HTML dan CSS. Pada model AJAX, client yang
dilengkapi dengan AJAX Engine (berupa kode JavaScript) akan
mengirimkan request HTTP ke server. Server memberikan response, yang
dalam Gambar 2.6 berupa data berformat XML, yang akan diterima AJAX
Engine. AJAX Engine kemudian akan memproses data tersebut, lalu
menampilkannya ke client dengan pengaturan sesuai format HTML dan
CSS yang sudah diterima pada saat pertama kali client meminta request ke
server.
AJAX cocok digunakan untuk aplikasi web yang memiliki kebutuhan
berikut.
1. Validasi data ke server secara real time
Masukan user dapat segera divalidasi sebelum seluruh form dikirim.
Hal ini meningkatkan efisiensi transfer data karena sekarang data-data
pada form yang dikirim sudah valid.
2. Auto-completion
Selagi user mengetikkan masukan ke suatu form input dalam bentuk
satu huruf atau lebih, AJAX dapat memunculkan usulan dalam bentuk
kata/kalimat yang menyambung huruf tersebut sehingga membentuk
kata yang lengkap.
3. Melihat data detail
Berdasarkan pilihan user, detail dari suatu data tampilan dapat segera
diminta dari server dan ditampilkan.
4. Menampilkan data yang relatif cepat berubah.
Data skor pertandingan, bursa saham, prakiraan cuaca, atau nilai tukar
rupiah merupakan data yang relatif cepat berubah. Dengan AJAX, tidak
perlu me-refresh halaman untuk memperbarui data-data tersebut karena
tampilan user segera berubah menyesuaikan dengan data-data yang
baru.
5. Komponen GUI dan kontrol interaktif
Komponen GUI seperti menu, progress bar, atau struktur tree dapat
dioperasikan tanpa refresh halaman.
6.14 Rangkuman
1. JavaScript adalah bahasa script yang dapat berjalan pada sisi client
(browser) dan termasuk dalam kelompok client side scripting.
JavaScript bukanlah bahasa Java dan merupakan dua bahasa yang
berbeda. JavaScript diinterpretasikan oleh klien (kodenya bisa dilihat
pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan
hasil kompilasinyalah yang dijalankan oleh klien.

169
2.

3.
4.

5.

Secara umum, penggunaan JavaScript adalah untuk menciptakan

keinteraktifan halaman web dengan user, misalnya untuk validasi input
data dalam form yang dilakukan user, memberikan efek mouse over
pada suatu image atau link, dan lainnya.
Ada dua jenis cara untuk menuliskan kode JavaScript, yakni pertama
kode JavaScript ditulis dalam file yang terpisah dengan HTML, dan
kedua kode JavaScript ditulis langsung dalam dokumen HTML.
jQuery adalah JavaScript library, jQuery mempunyai semboyan "write
less, do more". jQuery dirancang untuk memperingkas kode-kode
JavaScript. jQuery adalah JavaScript library yang cepat dan ringan
untuk menangani dokumen HTML, menangani event, membuat animasi
dan interakasi AJAX. JQuery dirancang untuk mengubah cara menulis
JavaScript.
AJAX adalah singkatan dari Asynchronous JavaScript and XML yaitu
pendekatan baru dalam aplikasi web yang berbeda dengan aplikasi web
konvensional. Pada model konvensional, client mengirimkan request
HTTP, dan server mengembalikan response beserta format tampilan
halamannya yang diwakili oleh file HTML dan CSS. Pada model
AJAX, client yang dilengkapi dengan AJAX Engine (berupa kode
JavaScript) akan mengirimkan request HTTP ke server. Server
memberikan response berupa data berformat XML, yang akan diterima
AJAX Engine. AJAX Engine kemudian akan memproses data tersebut,
lalu menampilkannya ke client dengan pengaturan sesuai format HTML
dan CSS yang sudah diterima pada saat pertama kali client meminta
request ke server.

6.15 Tugas/Soal Latihan

1. Buatlah halaman html (dengan form) untuk mengkonversi nilai angka
menjadi nilai huruf dengan menggunakan JavaScript. Berikut aturan
konversi yang harus dipenuhi.
Konversi:
0-40
=E
41-55
=D
56-60
=C
61-65
= BC
66-70
=B
71-80
= AB
81-100
=A
2. Buatlah halaman html untuk menampilkan aplikasi program kalkulator
sederhana dengan menggunakan JavaScript (gunakan library jQuery).
Contoh tampilannya adalah sebagai berikut.

170

Bil 1 dan Bil 2 diinputkan melalui text box, diisi dengan angka, bila
tombol + atau atau x atau / ditekan, maka akan dilakukan proses
perhitungan dan hasilnya langsung ditampilkan pada text box hasil,
(bilangan hasil ini merupakan operasi aritmetika sesuai dengan tombol
yang ditekan).
6.16 Daftar Bacaan
1. Wilton, Paul dan McPeak, Jeremy. 2007. Beginning JavaScript, Third
Edition. Indiana: Wiley Publishing, Inc.
2. Morrison, Michael. 2008. Head First JavaScript. California: OReilly
Media, Inc.
3. Kadir, Abdul. 2009. Mastering Ajax dan PHP. Yogyakarta: Penerbit
Andi.
4. Desrizal. Javascript Guide. http://blog.codingwear.com. Diakses
tanggal 5 September 2014
5. Desrizal.
Panduan
Lengkap
PHP
Ajax
jQuery.
http://blog.codingwear.com. Diakses tanggal 5 September 2014
6. Yuana,
Rosihan
Ari.
2012.
Tutorial
JavaScript.
http://blog.rosihanari.net/download-tutorial-javascript-gratis/. Diakses
tanggal 6 September 2014

BAB VII
WEB CMS (CONTENT MANAGEMENT SYSTEM)
7
CMS (CONTENT MANAGEMENT SYSTEM)
RINGKASAN
Content management merujuk pada proses pembuatan, penyuntingan,
penyimpanan, pengaturan dan publikasi dari berbagai jenis konten/media
(teks, gambar, video, dan lain-lain). Content management system merupakan
suatu aplikasi yang digunakan untuk mengelola konten. Web CMS
merupakan sebuah aplikasi yang digunakan untuk membuat, mengelola,
menyimpan, dan mempublikasikan konten melalui halaman web. Web CMS
memisahkan konten dari mekanisme penyajiannya, dimana pengguna dapat
mengelola kontennya tanpa membutuhkan pengetahuan teknis mengenai
HTML maupun pemrograman web.
7.1 CMS (Content Management System)
Content pada dasarnya adalah semua jenis atau unit informasi digital
yang dapat berupa teks, gambar, grafik, video, suara, dokumen, dan lain
sebagainya atau apapun yang dapat dikelola dalam format elektronik.
Content Management diartikan sebagai pengelolaan secara efektif
setiap content dengan menggabungkan suatu aturan, proses dan alur kerja.
Content management merujuk pada proses pembuatan, penyuntingan,
penyimpanan, pengaturan dan publikasi dari berbagai jenis konten/media
(teks, gambar, video, dan lain-lain). Sedangkan content management system
merupakan suatu alat yang digunakan untuk mengelola konten. CMS adalah
aplikasi komputer dengan proses/alur kerja tertentu yang digunakan untuk
membuat, menyunting, mengelola, dan mempublikasikan berbagai jenis
media digital dan teks elektronik. Sebuah CMS bertanggung jawab atas
pengumpulan, manajemen, dan publikasi suatu konten informasi.
Sebuah CMS terdiri dari berbagai subsistem, adapun tiga subsistem
utama yang ada dalam sebuah CMS yakni: Collection, Management dan
Publishing. Struktur dari sebuah CMS dapat dilihat pada Gambar 7.1.
1. Collection
Merupakan sebuah subsistem yang menangani pembuatan atau upaya
untuk memperoleh/menyediakan informasi. Subsistem ini menyediakan
dukungan untuk proses pembuatan konten, alur kerja, sindikasi dan
integrasi sumber eksternal. Selain itu, subsistem ini juga memberikan
dukungan kepada proses konversi antara format yang berbeda serta
untuk penggabungan isi dari sumber yang berbeda dalam struktur
tertentu.

171

172

173

2. Management
Merupakan subsistem yang menangani pengelolaan dan pengendalian
repositori informasi, kelompok pengguna, dan dukungan proses terhadap
subsistem lainnya. Subsistem ini menangani pendefinisian dan
pengendalian alur informasi yang digunakan oleh subsistem lainnya,
serta definisi parameter untuk fungsi sistem.
3. Publishing
Merupakan subsistem yang menangani pengelolaan publikasi dari
produk informasi digital baik secara otomatis atau semi otomatis.
Subsistem ini menggunakan model berbasis template dan memberikan
pilihan personalisasi bagi pengguna serta kemungkinan publikasi untuk
berbagai platform.

untuk menyederhanakan publikasi konten pada halaman web, dimana

mendukung pembuat konten untuk mengirimkan kontennya tanpa
membutuhkan pengetahuan teknis mengenai HTML maupun mekanisme
upload suatu file. Dengan kata lain, web CMS memisahkan konten dari
mekanisme penyajiannya.
Secara umum, sebuah web CMS memiliki dua buah elemen, yaitu:
1. Content Management Application (CMA)
Elemen CMA memungkinkan manajer konten atau penulis, yang tidak
memiliki pengetahuan teknis mengenai HTML maupun pemrograman
web, dapat mengelola pembuatan, modifikasi, dan penghapusan konten
dari sebuah website tanpa perlu memiliki kemampuan sebagi seorang
webmaster.
2. Content Delivery Application (CDA)
Elemen CDA menggunakan dan mengkompilasi informasi untuk
ditampilkan sehingga memperbaharui isi atau konten dari website.
Dalam web CMS, secara mendasar menggunakan model berbasis
template. Web CMS menyediakan antarmuka untuk pembuat konten untuk
menambahkan konten dan menyimpan konten ke dalam database. Konten
tersebut kemudian ditampilkan ke pengguna akhir pada sebuah template
halaman web. Model web CMS dapat dilihat pada Gambar 7.2.

Gambar 7.2 Model Web CMS

Gambar 7.1 Struktur CMS (Content Management System)
7.2 Web CMS (Content Management System)
Web CMS merupakan sebuah aplikasi yang digunakan untuk
membuat, mengelola, menyimpan, dan mempublikasikan konten melalui
halaman web. Jenis konten web dapat berisi teks, gambar dan foto, video
atau audio, dan lainnya. Web CMS merupakan sebuah CMS yang didesain

Adapun beberapa fitur yang terdapat pada Web CMS adalah sebagai
berikut.
1. Pengaturan template
Web CMS menyediakan fitur untuk melakukan pengaturan template.
Konten akan ditampilkan sesuai template yang digunakan. Pengguna
juga dapat menambahkan template baru dan mengaktifkan template
tertentu yang dipilih.

2.

3.

4.

5.

6.

7.

174

175

Penyuntingan konten
Konten yang terpisah dari mekanisme penyajian, membuat konten
menjadi lebih mudah dan cepat untuk diubah dan dimanipulasi.
Sebagian besar aplikasi web CMS menyertakan tool editor WYSIWYG
yang mengakomodasi pengguna untuk membuat dan merubah konten
dengan mudah.
Perluasan fungsional (plugin/modul)
Sebagian besar aplikasi web CMS menyediakan fitur plugin atau modul
yang dapat dengan mudah di-install untuk menambahkan suatu
fungsionalitas aplikasi.
Upgrade aplikasi
Web CMS menyediakan fasilitas untuk dapat menerima informasi
update aplikasi dan juga melakukan upgrade aplikasi web CMS
tersebut.
Manajemen proses/alur kerja
Merupakan fitur untuk pengaturan proses/alur kerja dalam CMS.
Sebagai contoh, pembuat konten/penulis dapat membuat atau
mengirimkan artikel, tetapi artikel tersbut dapat dipublikasikan setelah
redaktur menyetujuinya. Dalam hal ini, terkait pula dengan pengaturan
hak akses pengguna.
Manajemen dokumen
Web CMS menyediakan cara untuk mengelola siklus hidup dokumen
dari pembuatan dokumen, revisi, publikasi, arsip, dan penghapusan
dokumen.
Virtualisasi konten
Web CMS menyediakan sarana yang memungkinkan pengguna untuk
dapat bekerja dengan salinan virtual dari konten, misalnya dokumen.
Hal ini juga, memungkinkan perubahan pada beberapa sumber daya
yang saling tekait untuk dapat dilihat maupun dijalankan secara
bersama.

isi dari dan ke database dengan menggunakan antarmuka pengguna

yang sederhana.
CMS memungkinkan pemeliharaan konten web dilakukan dengan
mudah dan efisien untuk memenuhi kebutuhan bisnis.
CMS memberikan tampilan presentasi dan tata letak halaman web yang
konsisten di seluruh situs dengan memisahkan tugas desain halaman
web dari tugas pembuatan konten.
CMS membantu pengembang web untuk berkonsentrasi pada aspek
yang lebih penting dari situs web seperti arsitektur web, desain,
navigasi dan kegunaan dari website tanpa khawatir tentang membuat
dan memperbarui informasi pada website.

7.3 Kelebihan dan Kekurangan CMS (Content Management System)

Adapun kelebihan dari CMS (Content Management System) adalah
sebagai berikut.
1. CMS membantu penulis konten untuk memperbarui atau
mempublikasikan informasi ke website tanpa perlu memiliki
pengetahuan mengenai pemrograman web, yang pada gilirannya
mengurangi biaya bantuan profesional.
2. CMS memungkinkan penulis konten untuk berkonsentrasi untuk
menulis informasi tanpa khawatir tentang desain website. Penulis
konten dapat dengan mudah menambahkan, mengedit, dan menghapus

3.
4.
5.

Sedangkan kekurangan dari CMS (Content Management System)

adalah sebagai berikut.
1. Beberapa CMS cenderung bekerja lebih lambat dari website statis.
Namun, masalah ini dapat diselesaikan dengan memungkinkan penulis
konten untuk mempublikasikan situs seperti halnya HTML statis atau
memilih CMS yang menggunakan URL yang search engine friendly.
2. Beberapa CMS memiliki harga yang cukup mahal, bahkan solusi open
source akan cenderung memerlukan instalasi dan pengaturan biaya.
3. CMS memerlukan lebih banyak memori, penggunaan CPU untuk
sistem ini terus digunakan oleh sejumlah pengguna yang secara
bersamaan menggunakan sistem untuk pembaruan konten/isi web.
4. Adanya kesulitan untuk membangun sebuah CMS yang berfungsi
penuh dalam batas waktu atau anggaran yang telah ditentukan
7.4 Penyediaan CMS (Content Management System)
CMS dapat dikembangkan dengan menggunakan salah satu bahasa
pemrograman web yang tersedia seperti PHP, JAVA, ASP.Net, dan lainnya.
Dalam hubungannya dengan teknologi penyimpanan data atau database,
dapat menggunakan DBMS seperti Oracle atau MySQL. Selain itu,
penyediaan CMS juga dapat dilakukan dengan membeli dari vendor.
Adapun beberapa pendekatan yang digunakan dalam penyediaan suatu
aplikasi CMS adalah sebagai berikut.
1. Pengembangan internal untuk aplikasi CMS
Pengembangan CMS secara internal oleh sebuah organisasi atau
perusahaan bisa menjadi sebuah pilihan yang layak untuk
dipertimbangkan, walaupun pilihan ini menjadi hal yang sangat sulit
dan tidak mudah dilakukan oleh banyak organisasi atau perusahaan.
Pertimbangan melakukan pengembangan internal, karena organisasi
atau perusahaan telah memiliki tim pengembangan aplikasi dalam

2.

3.

4.

176

177

perusahaannya. Tentunya hal ini akan menghemat pembiayaan untuk

pengembangan aplikasi CMS. Pemeliharaan sistem termasuk
pembaharuan sistem juga dapat dilakukan oleh tim internal.
Melakukan pembelian untuk aplikasi CMS
Pembelian produk komersial dari aplikasi CMS merupakan cara yang
paling mudah dan pilihan yang dapat diandalkan karena aplikasi yang
ditawarkan telah sepenuhnya teruji dan bebas dari bug serta tentunya
dukungan dari vendor. Beberapa contoh aplikasi CMS berbayar, seperti
Kentico, Telerik Sitefinity, Ingeniux, dan lainnya. Namun sebagian
besar aplikasi CMS komersial memiliki harga yang mahal, tentunya
perlu organisasi atau perusahaan perlu menyesuaikan dengan kebutuhan
dan anggaran yang tersedia.
Melakukan Outsourcing untuk pengembangan aplikasi CMS
Pengembangan aplikasi CMS dengan melakukan outsourcing ke sebuah
vendor tentunya membutuhkan biaya yang besar dan juga berisiko. Ada
sejumlah faktor yang perlu dipertimbangkan sebelum melakukan
outsourcing, diantaranya:
Proyek pengembangan bisa saja gagal memenuhi tenggat waktu
karena adanya keterlambatan penyelesaian aplikasi.
Aplikasi yang dikembangkan mungkin tidak seperti yang
diharapkan pengguna.
Pengembangan aplikasi dapat pula melebihi anggaran yang tersedia
dan menjadi mahal, sehingga aplikasi yang dikembangkan tidak
dapat diselesaikan.
Aplikasi yang dikembangkan mungkin tidak dapat memenuhi
perubahan kebutuhan pengguna di masa mendatang.
Beberapa faktor yang telah disebutkan sebelumnya dapat
menyebabkan biaya tambahan yang harus dikeluarkan untuk pihak
eksternal perusahaan atau organisasi dalam melakukan pemeliharaan
aplikasi.
Menggunakan aplikasi open source CMS
Ada beberapa aplikasi CMS gratis yang tersedia untuk digunakan,
dimodifikasi, didistribusikan dan memiliki kemampuan yang tidak
kalah dengan aplikasi komersial. Namun tetap dibutuhkan biaya untuk
implementasi dan sebagian besar open source CMS memerlukan
hosting server berbasis Linux dan dukungan teknologi database. Selain
itu, tidak semua fitur atau fungsionalitas aplikasi yang dibutuhkan oleh
perusahaan atau organisasi tersedia pada aplikasi open source CMS.
Beberapa contoh aplikasi open source CMS, diantaranya: Drupal,
WordPress, Joomla, dan Moodle.

7.5 Rangkuman
1. Content pada dasarnya adalah semua jenis atau unit informasi digital
yang dapat berupa teks, gambar, grafik, video, suara, dokumen, dan lain
sebagainya atau apapun yang dapat dikelola dalam format elektronik.
2. Content management merujuk pada proses pembuatan, penyuntingan,
penyimpanan, pengaturan dan publikasi dari berbagai jenis
konten/media (teks, gambar, video, dan lain-lain). Sedangkan content
management system merupakan suatu alat yang digunakan untuk
mengelola konten.
3. Sebuah CMS terdiri dari berbagai subsistem, adapun tiga subsistem
utama yang ada dalam sebuah CMS yakni: Collection, Management
dan Publishing.
4. Web CMS merupakan sebuah aplikasi yang digunakan untuk membuat,
mengelola, menyimpan, dan mempublikasikan konten melalui halaman
web. Secara umum, sebuah web CMS memiliki dua buah elemen, yakni
Content Management Application (CMA) dan Content Delivery
Application (CDA).
5. Ada beberapa pendekatan yang digunakan dalam penyediaan suatu
aplikasi CMS, yakni: pengembangan internal untuk aplikasi CMS,
melakukan pembelian untuk aplikasi CMS, melakukan Outsourcing
untuk pengembangan aplikasi CMS, dan menggunakan aplikasi open
source CMS.
7.6 Tugas/Soal Latihan
1. Jelaskan apa yang dimaksud dengan CMS (Content Management
System) dan apa yang dimaksud dengan web CMS!
2. Sebutkan dan jelaskan tiga subsistem utama yang ada dalam sebuah
CMS!
3. Apa perbedaan antara elemen Content Management Application (CMA)
dengan Content Delivery Application (CDA) dalam web CMS?
4. Sebutkan dan jelaskan beberapa fitur yang terdapat pada web CMS!
5. Sebutkan kelebihan dan kekurangan dari aplikasi CMS!
6. Sebutkan dan jelaskan beberapa pendekatan yang digunakan dalam
penyediaan suatu aplikasi CMS!
7.7 Daftar Bacaan
1. Boiko, Bob. 2005. Content Management Bible, 2nd Edition. Indiana:
Wiley Publishing, Inc.
2. Mican, Daniel, Tomai, Nicolae, and Coros, Robert Ioan. 2009. Web
Content Management Systems, a Collaborative Environment in the
Information Society. Informatica Economica Journal Vol. 13(2): 20-31

178
3.
4.

Powel, Wayne dan Gill, Chriss. 2003. Web Content Management

Systems
in
Higher
Education.
https://net.educause.edu/ir
/library/pdf/eqm0325.pdf. Diakses tanggal 15 September 2014
Singhal, Niraj, Mohan, Tanmeya, dan Sarkar, Subham. 2010. A
Comparative Study Based on Open Source Content Management
Systems. Indian Journal of Computer Science and Engineering (IJCSE),
Vol. 1(4):267-276.

BAB VIII
PENGENALAN WEB FRAMEWORK
DENGAN CODEIGNITER
8
WEB FRAMEWORK DENGAN CODEIGNITER
RINGKASAN
Framework dapat diartikan sebagai koleksi atau kumpulan potonganpotongan program yang disusun atau diorganisasikan sedemikian rupa,
sehingga dapat digunakan untuk membantu membuat aplikasi utuh tanpa
harus membuat semua kodenya dari awal. CodeIgniter (CI) merupakan salah
satu web framework PHP yang banyak digunakan saat ini. CodeIgniter
dibuat berdasarkan kaidah Model-View-Controller (MVC). Dengan MVC,
maka memungkinkan pemisahan antara layer application logic dan
presentation. CodeIgniter menyediakan sekumpulan library yang dapat
digunakan untuk membantu dalam pengembangan aplikasi berbasis web.
8.1 Pengenalan Framework
Framework adalah sebuah struktur konseptual dasar yang digunakan
untuk memecahkan sebuah permasalahan. Framework dapat diartikan pula
sebagai koleksi atau kumpulan potongan-potongan program yang disusun
atau diorganisasikan sedemikian rupa, sehingga dapat digunakan untuk
membantu membuat aplikasi utuh tanpa harus membuat semua kodenya dari
awal.
Salah satu alasan mengapa menggunakan framework terutama dalam
membangun sebuah aplikasi adalah kemudahan yang ditawarkan. Dalam
sebuah framework biasanya sudah tersedia struktur aplikasi yang baik,
standard coding, best practice dan design pattern dan common function.
Dengan menggunakan framework pengembang aplikasi dapat langsung
fokus kepada business process yang dihadapi tanpa harus berpikir banyak
mengenai masalah struktur aplikasi, standar coding dan lain-lain.
Dengan memanfaatkan design pattern dan common function yang telah
ada di dalam framework maka hal tersebut dapat mempercepat proses
pengembangan aplikasi. Pengembang aplikasi tidak perlu membuat sesuatu
fungsionalitas yang bersifat umum. Tanpa disadari ketika membangun
sebuah aplikasi banyak fungsionalitas yang telah dibangun itu ternyata sama
atau berulang-ulang. Dengan pengelempokkan tersebut dapat mempercepat
pengembangan aplikasi.
Selain kemudahan dan kecepatan dalam membangun sistem, dengan
menggunakan framework tertentu, tim pengembang aplikasi dapat
menyeragamkan cara untuk mengimplementasikan kode program. Dengan
framework semua anggota tim pengembang aplikasi akan dipaksa untuk
patuh kepada sebuah kesepakatan. Selain itu juga akan memudahkan
179

180
pengembang lain untuk mempelajari dan mengubah aplikasi yang telah
dibuat apabila kode yang dihasilkan konsisten dan patuh pada sebuah aturan
tertentu.
8.2 Pengenalan CodeIgniter
CodeIgniter (CI) merupakan sebuah web application framework yang
bersifat open source dengan menggunakan PHP, suatu kerangka untuk
bekerja atau membuat aplikasi dengan menggunakan PHP yang lebih
sistematis. Tujuan utama pengembangan Codeigniter adalah untuk
membantu developer untuk mengerjakan aplikasi lebih cepat daripada
menulis semua kode dari awal. Codeigniter menyediakan berbagai macam
library yang dapat mempermudah dalam pengembangan aplikasi.
CodeIgniter pertama kali dibuat oleh Rick Ellis dan diperkenalkan kepada
publik pada tanggal 28 Pebruari 2006 dan saat ini versi rilis terakhir adalah
2.2.1
yang
dapat
diperoleh
dari
situs
resminya
(http://www.codeigniter.com/)
CodeIgniter sangat ringan, terstruktur, mudah dipelajari, dokumentasi
lengkap dan dukungan yang luar biasa dari forum CodeIgniter. Selain itu
CodeIgniter juga memiliki fitur-fitur lainya yang sangat bermanfaat, antara
lain:
Menggunakan Pattern MVC. Dengan menggunakan pattern MVC ini,
struktur kode yang dihasilkan menjadi lebih terstruktur dan memiliki
standar yang jelas.
URL Friendly. URL yang dihasilkan sangat url friendly. Pada
CodeIgniter diminimalisasi penggunaan $_GET dan digantikan dengan
URI (Universal Resource Identifier).
Kemudahan. Kemudahan dalam mempelajari, membuat library dan
helper, memodifikasi serta meng-integrasikan Library dan helper.
Jika membandingkan antara CodeIgniter dengan frameworkframework lainnya maka beberapa poin yang membuat CodeIgniter unggul
adalah:
Kecepatan. Berdasarkan hasil benchmark CodeIgniter merupakan salah
satu framework PHP tercepat yang ada saat ini.
Mudah dimodifikasi dan beradaptasi. Sangat mudah memodifikasi
behavior framework ini.Tidak membutuhkan server requirement
dengan spesifikasi yang rumit serta mudah mengadopsi library lainnya.
Dokumentasi lengkap dan jelas. CodeIgniter telah menyediakan
sebuah panduan yang lengkap mengenai CodeIgniter yang dapat dilihat
pada bagian user guide.

181

Learning Curve Rendah. CodeIgniter sangat mudah dipelajari. Dalam

pemilihan framework hal ini sangat penting diperhatikan karena dalam
pengembangan aplikasi, sebuah tim pengembang harus memperhatikan
skill dari seluruh anggotanya. Jika sebuah framework sangat sulit
dipelajari
maka
akan
beresiko
untuk memperlambat tim
pengembangan aplikasi.

8.3 MVC (Model View Controller) Pattern

MVC adalah konsep dasar yang harus diketahui sebelum mengenal
CodeIgniter. MVC adalah singkatan dari Model View Controller. MVC
sebenarnya adalah sebuah pattern/teknik pemogramanan yang memisahkan
bussiness logic (alur pikir), data logic (penyimpanan data) dan presentation
logic (antarmuka aplikasi) atau secara sederhana adalah memisahkan antara
desain, data dan proses. Adapun komponen-komponen MVC antara lain:
1. Model
Model berhubungan dengan data dan interaksi ke database. Model
juga merepresentasikan struktur data dari aplikasi yang bisa berupa
basis data maupun data lain, misalnya dalam bentuk file teks atau file
XML. Biasanya di dalam model akan berisi class dan fungsi untuk
mengambil, melakukan update dan menghapus data dalam database.
Sebuah aplikasi web biasanya menggunakan database dalam
menyimpan data, maka pada bagian Model biasanya akan berhubungan
dengan perintah-perintah query SQL.
2. View
View berhubungan dengan segala sesuatu yang akan ditampilkan ke enduser, biasanya berupa halaman web. Dalam view pengembang harus
menghindari adanya logika atau pemrosesan data. View hanya
mengandung variabel-variabel berisi data yang siap ditampilkan. View
dapat dikatakan sebagai halaman website yang dibuat dengan
menggunakan HTML dan bantuan CSS atau JavaScript. Dalam view
harus menghindari adanya kode untuk melakukan koneksi ke database.
View hanya dikhususkan untuk menampilkan data-data hasil dari model
dan controller
3. Controller
Controller bertindak sebagai penghubung data dan view. Dalam
Controller inilah terdapat class-class dan fungsi-fungsi yang memproses
permintaan dari View ke dalam struktur data di dalam Model. Controller
juga tidak boleh berisi kode untuk mengakses basis data karena tugas
mengakses data telah diserahkan kepada model. Tugas controller adalah
menyediakan berbagai variabel yang akan ditampilkan di view,
memanggil model untuk melakukan akses ke basis data, menyediakan

182

183

penanganan kesalahan/error, mengerjakan proses logika dari aplikasi

serta melakukan validasi atau pengecekan terhadap input.

Jika dipetakan, alur kerja aplikasi berbasis MVC akan tampak seperti
Gambar 8.2. Browser berinteraksi melalui controller. Controller-lah yang
akan menerima dan membalas semua request dari browser. Untuk data
maka controller akan meminta ke model dan untuk UI/template akan
meminta ke view. Jadi otak dari aplikasi ada di controller, antarmuka
aplikasi ada di view dan data ada di model. Ketika browser meminta
sebuah halaman web maka router akan mencarikan controller mana yang
harus menangani request tersebut. Setelah itu barulah controller
menggunakan model untuk mengakses data dan view untuk menampilkan
data tersebut.
Berikut pada Gambar 8.3 merupakan alur kerja bagaimana CodeIgniter
mengimplementasi model MVC.

Gambar 8.1 Perbandingan PHP Biasa dan CodeIgniter

Pada Gambar 8.1 ditampilkan perbandingan antara pemrograman
dengan PHP biasa dan menggunakan framework CodeIgniter. Pada eksekusi
PHP, biasanya pemrogram akan me-load semua library dan fungsi yang
dibutuhkan kemudian digabungkan ke dalam kode HTML untuk dieksekusi
oleh PHP. Untuk kasus sederhana cara tersebut masih baik-baik saja, tetapi
ketika aplikasi tersebut menjadi kompleks/rumit maka akan sulit
memeliharanya jika tidak didukung oleh arsitektur aplikasi yang baik. Hal
tersebut bisa terjadi disebabkan oleh kode yang sama namun dibuat
berulang- ulang, kode tidak konsisten dan lain-lain.

Gambar 8.3 Alur kerja CodeIgniter

1.
2.
3.
4.
5.
6.

Gambar 8.2 Alur kerja aplikasi berbasis MVC

index.php berlaku sebagai controller di depan, yang menginisialisasi

sumber saya yang dibutuhkan untuk menjalankan CodeIgniter.
Router akan memeriksa request HTTP untuk menentukan apa yang
harus dilakukan dengan request tersebut.
Jika ada file cache, maka file langsung dikirimkan kepada browser
dengan memotong eksekusi sistem normal.
Keamanan. Sebelum suatu aplikasi controller dipanggil, request HTTP
dan data dikirimkan oleh pengguna disaring (filter) terlebih dahulu
untuk keamanan.
Controller akan memuat model, librari inti, helper dan sumber daya
lainnya yang diperlukan untuk memproses request tersebut.
View terakhir dirender kemudian dikirimkan kepada browser untuk
ditampilkan. Jika caching didefinisikan, maka view akan di-cache
terlebih dahulu, setelah itu baru dikirimkan ke browser.

8.4 PHP dan Pemrograman Berorientasi Objek

Syarat utama untuk menguasai CodeIgniter adalah memahami PHP
dan konsep Object Oriented Programming. Pada bagian ini akan membahas
sedikit mengenai PHP dan OOP.

184

185

Pemrograman Berorientasi Objek atau Object Oriented Programming

(OOP) merupakan paradigma pemrograman yang berorientasikan kepada
obyek. Semua data dan fungsi pada paradigma ini dibungkus dalam kelaskelas atau obyek-obyek. Bandingkan dengan logika pemrograman
terstruktur, setiap obyek dapat menerima pesan, memproses data, dan
mengirim pesan ke obyek lainnya. OOP diciptakan untuk mengatasi
keterbatasan pada bahasa pemrograman tradisional. Konsep dari OOP
sendiri adalah semua pemecahan masalah dibagi ke dalam obyek. Dalam
konsep OOP, data dan fungsi-fungsi yang akan mengoperasikannya
digabungkan menjadi satu kesatuan yang dapat disebut sebagai obyek.

kelas, kemudian diakhiri dengan kurung kurawal. Di dalam kurung kurawal

dapat dituliskan kode-kode (berisi property dan method) agar kelas tersebut
dapat bekerja seperti yang diinginkan.
Kode-kode di dalam sebuah kelas terbagi menjadi dua kelompok, yaitu
property dan method. Property adalah suatu wadah penyimpanan di dalam
kelas yang bisa menampung informasi. Sederhananya property itu bisa
disebut sebagai variabel di dalam kelas. Sedangkan method adalah fungsi
yang ada di dalam kelas. Perhatikan contoh berikut.

8.4.1 Objek
Sederhananya, sebuah obyek adalah kumpulan dari variabel dan fungsi
yang dibungkus menjadi satu entitas. Entitas tersebut dapat berupa variabel
biasa. Sebuah obyek diciptakan melalui sebuah kelas atau dengan istilah
instance of class. Objek memiliki 2 elemen utama, yaitu:
1. Attributes atau Properties merupakan nilai-nilai yang tersimpan
dalam objek tersebut dan secara langsung maupun tidak langsung
menentukan karakteristik dari obyek tersebut.
2. Method merupakan suatu aksi yang akan dijalankan atau dikerjakan
oleh obyek tersebut.
8.4.2 Class
Class dapat didefinisikan sebagai struktur data atau cetak biru dari
suatu obyek. Lebih jelasnya adalah sebuah bentuk dasar atau blueprint yang
mendefinisikan variabel, method umum pada semua obyek. Obyek sendiri
adalah kumpulan variabel dan fungsi yang dihasilkan dari template khusus
atau disebut class. Obyek adalah elemen pada saat run-time yang akan
diciptakan, dimanipulasi, dan dibuang/di-destroy ketika eksekusi. Adapun
class merupakan definisi statik dari himpunan obyek yang mungkin
diciptakan sebagai instantiasi dari class.
Perhatikan contoh class di berikut ini.
<?php
/** Contoh kelas **/
class Kendaraan{}
/*** end of class ***/
?>

Contoh di atas memperlihatkan bagaimana mendefinisikan sebuah class.

Pada contoh di atas, dibuat sebuah kelas bernama Kendaraan. Dalam
pembuatan kelas, menggunakan kata kunci class yang diikuti oleh nama

<?php
/** contoh kelas **/
class kendaraan{
/*** property class ***/
private $warna;
private $jumlah_pintu; private $jumlah_roda; public $harga;
public $merk;
/*** method class ***/
public function construct(){
echo "ini adalah object kendaraan. <br />";
}
public function set_harga($harga){
$this->harga = $harga;
}
public function show_harga(){
echo "harga kendaraan : Rp.".$this->harga.". <br />";
}
public function jalan(){
echo "brrroooooom!!!";
}
}
/*** end of class ***/
/** contoh object **/
#membuat object $saya_adalah_object dari class kendaraan
$saya_adalah_object= new kendaraan;
$saya_adalah_object->set_harga(100000);
$saya_adalah_object->show_harga();
$saya_adalah_object->jalan();
?>

Setiap property dan method memiliki identifier. Identifier-lah yang

mengatur bagaimana properti dan method digunakan. Identifier tersebut
adalah public, private dan protected. Private berarti method atau properti

186

187

yang ada di dalam suatu kelas hanya dapat diakses di dalam kelasnya.
Sedangkan pada method atau properti yang bersifat public berarti method
atau properti tersebut dapat diakses di dalam dan di luar kelas. Properti yang
bersifat protected berarti method atau properti tersebut hanya dapat diakses
di dalam kelasnya dan pada kelas turunannya.

dari kelas induknya, pada kelas anak juga dapat ditambahkan fungsi baru
yaitu fungsi Hai.

8.4.3 Inheritance
Inheritance atau dikenal sebagai pewarisan adalah suatu cara untuk
membuat sebuah kelas yang baru dengan menggunakan kelas lain yang
sebelumnya sudah dibuat. Pada hubungan inheritance, sebuah class turunan
mewarisi kelas leluhur (parent class). Oleh karena mewarisi, maka semua
atribut dan method class dari induk akan dibawa (kecuali yang bersifat
private), secara intrinsik menjadi bagian dari class anak. Adapun
keuntungan yang didapat dari inheritance adalah dapat menambah fitur baru
pada kelas anak dan mengubah atau mengganti fitur yang diwarisi dari kelas
induk. Adapun contoh kelas yang menggunakan konsep inheritance adalah
sebagai berikut.
<?php
/* inheritance.php */
class Bapak {
private $nama ="Bapak"; function Bapak($n) {
$this->nama = $n;
}
function Hallo() {
echo "Halo, saya $this->nama <br>";
}
}
class Anak extends Bapak {
function Hai(){
echo "hai dari kelas anak";
}
}
$test = new Anak("Anak dari Bapak");
$test->Hallo();
?>

Jika diperhatikan pada kode di atas, untuk melakukan pewarisan

menggunakan keyword extends. Kelas anak merupakan turunan dari kelas
bapak. Pada kelas anak sama sekali tidak memiliki fungsi Hallo, tetapi
karena parentnya memiliki fungsi tersebut maka kelas anak dapat
menggunakan fungsi tersebut. Selain menggunakan fungsi yang diturunkan

8.5 Instalasi dan Konfigurasi CodeIgniter

Agar dapat menggunakan CodeIgniter, maka harus melakukan
instalasi dan konfigurasi terhadap CodeIgniter terlebih dahulu. Instalasi
CodeIgniter dapat dilakukan dengan mudah. Dengan menggunakan
konfigurasi default saja maka CodeIgniter sudah dapat berjalan pada web
server. Hal-hal yang harus dipersiapkan dalam instalasi CodeIgniter adalah
sebagai berikut.
1. Mempersiapkan web server
PHP merupakan bahasa pemrograman web yang berjalan di sisi server
oleh karena itu untuk dapat menjalankan aplikasi web yang dibangun
dengan menggunakan PHP, maka komputer harus ter-install aplikasi
web server yang mendukung PHP. Ada banyak aplikasi web server
yang dapat digunakan, salah satu yang populer adalah web server
Apache. Untuk mempermudah instalasi dapat menggunakan paket
instalasi web server dan database seperti XAMPP, WAMP, atau
lainnya.
2. Download paket CodeIgniter
Paket framework CodeIgniter (CI) dapat di-download dari situsnya:
http://www.codeigniter.com/download. Unduhlah paket CI terbaru,
dalam penyusunan materi buku ajar ini menggunakan CodeIgniter
2.2.1.
3. Instalasi CodeIgniter
Setelah diunduh, maka lakukan pemasangan paket CI ke dalam
direktori tempat aplikasi akan dibuat. Sebagai contoh, dalam buku ajar
ini digunakan XAMPP dan akan menggunakan direktori dengan nama
ci211 sebagai direktori untuk bekerja atau belajar menggunakan CI.
Direktori tersebut dibuat di bawah direktori c:\xampp\htdocs. Selain itu,
dalam buku ajar ini, asumsi instalasi dilakukan pada komputer dengan
sistem operasi Windows 7. Instalasi CI cukup dilakukan dengan
melakukan ekstraks paket CI dalam suatu direktori yang sudah kita
tentukan tersebut.
Untuk menguji instalasi CI telah benar atau belum, cukup
menggunakan browser, kemudian masukkan URL pada browser yakni
http://alamatserver/ci221. Alamat server yang digunakan dalam kasus ini
adalah komputer lokal, sehingga dapat menggunakan http://localhost/ci221.
Pada Gambar 8.4 merupakan tampilan default dari suatu hasil instalasi
CodeIgniter yang standar, dimana menampilkan pesan selamat datang.

188

Gambar 8.4 Tampilan standar hasil instalasi CodeIgniter

8.5.1 Struktur Direktori CodeIgniter
Adapun struktur direktori hasil instalasi CodeIgniter pada direktori
ci221 yang ada dalam c:\xampp\htdocs\ dapat dilihat pada Gambar 8.5
berikut ini.

Gambar 8.5 Struktur direktori hasil instalasi CodeIgniter

189
Ada 3 direktori sertaan dari CI, yakni application, system, dan
user_guide. Dari ketiga direktori tersebut, maka direktori user_guide dapat
dihapus, jika proses pembuatan aplikasi dengan Ci telah selesai. Direktori
user_guide hanya berisi dokumentasi bagaimana menggunakan CI; direktori
ini perlu ada untuk membantu pengembang aplikasi untuk mengetahui cara
penggunaan library class dan fungsi yang dimiliki CI. Apabila memiliki
rujukan di tempat lain untuk dokumentasinya, amak direktori ini dapat
dihapus karena ukurannya cukup besar.
Direktori system merupakan direktori inti dari semua librari class dan
fungsi yang dimiliki oleh CI untuk dapat digunakan untuk mengembangkan
aplikasi. Direktori application merupakan direktori tempat pemrogram
membuat aplikasi dengan menggunakan CI, termasuk di dalamnya
pemrogram dapat menambahkan librari class dan fungsi tambahan, apabila
librari class dan fungsi yang disediakan oleh CI tidak memadai untuk
kebutuhan program yang dibuat.
Selain ketiga direktori yang telah disebutkan, maka ada sebuah file
yang tidak boleh dihapus, yaitu file index.php. File index.php inilah yang
akan melakukan proses pengarahan (dispatch) suatu aplikasi yang dibuat
untuk dijalankan; jika tidak disebutkan, maka file index.php ini akan
menjalankan aplikasi default yang telah disediakan atau didefinisikan oleh
pemrogram.
8.5.2 Konfigurasi CodeIgniter
Walaupun CodeIgniter dapat berjalan dengan konfigurasi default,
tetapi untuk sebuah aplikasi yang nyata harus tetap melakukan konfigurasi,
setidaknya pada bagian base_url dan router. Pengaturan base_url dan
router sangat berguna ketika proses pengembangan aplikasi yang banyak
menggunakan helper dan library.
File konfigurasi terletak dalam folder application/config. Adapun filefile yang terdapat dalam direktori tersebut dan sering digunakan antara lain:
1. config.php.
Pada file konfigurasi config.php berisi konfigurasi secara umum
mengenai CodeIgniter, seperti peletakkan baseurl, suffix, front
controller, serta metode yang digunakan URI dan lain-lain. Adapun
konfigurasi-konfigurasi yang perlu diperhatikan adalah:
$config[base_url] - Konfigurasi ini berisi alamat URL sebuah
aplikasi. Jika menggunakan helper URL maka konfigurasi ini
harus diset dengan benar. Contoh: aplikasi akan diakses dengan
menggunakan domain www.contoh.com/app_ci maka pada
konfigurasi ini harus diisikan:
$config['base_url']="http://www.contoh.com/app_ci/";

190

191

Tetapi jika ingin menggunakan base url yang lebih fleksibel maka
dapat menggantinya dengan variabel server. Contoh:

harus meload library database sebelum library loader. Hal

tersebut bisa dilakukan melalui hook.
$config['subclass_prefix'] = 'MY_'. Jika ingin mengubah atau
meng-extend library CodeIgniter maka library tersebut harus
memliki prefik yang sama dengan konfigurasi ini.
$config['permitted_uri_chars']. Konfigurasi ini bertujuan untuk
keamanan CodeIgniter. Konfigurasi ini menentukan karakter apa
saja yang bolah digunakan di dalam URI.
$config['log_threshold']. Konfigurasi ini menentukan bagaimana
sistem log CodeIgniter bekerja. Sistem log ini sangat membantu
dalam proses pengembangan terutama ketika debugging. Jika diset
0 maka tidak ada proses log error di CodeIgniter. Jika diset 1 maka
yang dicatat hanyalah pesan-pesan kesalahan yang termasuk
kesalahan PHP. Jika diset 2 maka akan menampilkan semua pesan
debug dan pesan kesalahan CodeIgniter dan PHP. Jika diset 3 maka
log yang berisi informasi seperti sebuah library telah di-load juga
akan ditampilkan. Jika diset 4 maka semuanya akan di-log mulai
dari error, pesan debug sampai yang bersifat informasi.
$config['log_path']. Konfigurasi ini digunakan untuk menentukan
dimana log akan diletakkan. Jika diisi kosong maka secara default
akan diletakkan di application/logs/. Harus diingat bahwa harus
mengubah tingkat hak akses dari direktori tersebut menjadi dapat
ditulisi/ writeable jika menggunakan fasilitas log.
Konfigurasi session. Session di CodeIgniter menggunakan cookies
jadi dapat diset waktu hidup cookies/expire, nama cookies dan lainlain melalui konfigurasi ini.
autoload.php
Konfigurasi ini bertujuan untuk menentukan sumber daya apa yang
akan di-load secara otomatis. Cara penggunaannya sederhana, misalnya
apabila ingin me-load library database, pagination dan lain-lain secara
otomatis maka cukup mengubah $autoload['libraries'] menjadi:

$config['base_url']="http://".$_SERVER['HTTP_HOST'].
str_replace(basename($_SERVER['SCRIPT_NAME']),"",
$_SERVER['SCRIPT_NAME']);

$config[index_php] - Konfigurasi ini berisi file yang menjadi front

controller. Konfigurasi ini berhubungan dengan base_url. Jika
menggunakan .htaccess untuk mempercantik URL maka isi variabel
ini harus dikosongkan.
$config['uri_protocol'] - Konfigurasi ini bertujuan untuk
menentukan bagaimana library URI bekerja. CodeIgniter dapat
menangkap URI yang diberikan melalui 4 cara yaitu PATH_INFO,
QUERY_STRING, REQUEST_URI dan ORIG_PATH_INFO.
Masing-masing cara mempunyai kelebihan dan kekurangan
masing-masing, bahkan tidak semua web server mendukung
semua cara tersebut, oleh karena itu secara default digunakan
pilihan auto. Tetapi jika aplikasi membutuhkan sesuatu yang lebih
custom maka pemilihan metode URI secara langsung akan lebih
baik.
$config['url_suffix'] - Konfigurasi ini bertujuan untuk
menambahkan akhiran pada URL. Contoh: apabila mempunyai
sebuah controller page, maka controller tersebut akan diakses
melalui http://localhost/index.php/page, dengan menambahkan
url_suffix berisi html maka URL tadi dapat juga diakses melalui
http://localhost/index.php/page.html.
$config['language'] - Secara default CodeIgniter sudah
mendukung banyak bahasa/multi language. Pengembang aplikasi
dapat mengubah pesan-pesan yang ada di dalam CodeIgniter
dengan bahasa yang dikehendaki. Untuk mengubah bahasa tersebut
cukup dengan mendownload paket bahasa yang diinginkan lalu
uraikan di dalam direktori system/languages/[nama_lang] lalu
tinggal mengubah nama_lang di config.
$config['enable_hooks']
Konfigurasi
ini
bertujuan
mengaktifkan/menonaktifkan hook pada CodeIgniter. Hook dapat
dikatakan sebagai event-event yang terjadi pada CodeIgniter,
dimana bisa meletakkan fungsi di dalamnya. Hook akan
bermanfaat sekali ketika ingin mengubah perilaku CodeIgniter
maupun untuk logging event. Contoh: apabila ingin mengubah
urutan loading library dimana telah meng-extend library router
untuk menggunakan database dalam aturan routing-nya, artinya

2.

$autoload['libraries']=array('database','pagination')

3.

routes.php
Konfigurasi pada file ini bertujuan untuk menentukan tujuan routing
oleh library route akan dilakukan. Hal paling sederhana yang harus
dilakukan adalah mengubah default controller (controller yang akan
dijalankan ketika tidak ada URI yang diberikan oleh browser).
Misalnya website beralamat: www.situsku.web.id, maka ketika
membuka website tersebut secara otomatis CodeIgniter akan
mengalihkan ke controller default, karena tidak disertakan di dalam
URL. Adapun yang perlu diubah adalah
$route['default_controller']="welcome";

192
8.5.3 Kesepakatan Coding (Coding Standart) CodeIgniter
Sebelum melakukan coding menggunakan CodeIgniter maka ada
baiknya untuk mengetahui apa saja kesepakatan-kesepakatan yang ada pada
CodeIgniter. Kesepakatan-kesepakatan tersebut akan membuat kode yang
dibuat lebih mudah dipahami oleh pengembang lainnya. Adapun
kesepakaatan tersebut diantaranya:
1. PHP Closing Tag
Ketika akan menulis library, helper, controller ataupun model maka
sebaiknya tidak menggunakan tanda penutup pada dokumen php ?>.
Hal tersebut dilakukan untuk mencegah adanya spasi atau karakter yang
tidak diinginkan pada kode sehingga membuat aplikasi error.
Pengembang aplikasi juga disarankan untuk memberikan infomasi
tentang akhir dokumen dan berisi path dokumen tersebut.
Contoh salah:
<?php echo "Here's my code!"; ?>

Contoh Benar:
<?php echo "Here's my code!";

/* End of file myfile.php */

/* Location: ./system/modules/mymodule/myfile.php */

2.

Penamaan Class dan Method

Penamaan Class harus dimulai dengan huruf besar. Jika class
menggunakan beberapa kata maka kata-kata tersebut dipisahkan
menggunakan underscore dan bukan camel case.
Contoh salah:
class superclass
class SuperClass

Contoh benar:
class Super_class

Aturan diatas juga berlaku untuk method contohnya

Contoh kurang tepat:
//tidak deskriptif dan tidak menggunakan underscore
function fileproperties()
//tidak deskriptif dan underscore CamelCase
function fileProperties()

193
//kurang underscore
function getfileproperties()
//menggunakan CamelCase
function getFileProperties()
//terlalu panjang
get_the_file_properties_from_the_file()

Contoh tepat:
//deskriptif,menggunakan underscore,dan
function get_file_properties()

huruf kecil

8.6 CodeIgniter Helper dan Library

CodeIgniter menyediakan dua jenis sarana yang dapat digunakan
untuk membantu proses pengembangan aplikasi, antara lain:
1. Library
Library dapat dikatakan sebagai kumpulan tools yang dapat digunakan
untuk membantu sebuah proses. CodeIgniter telah menyediakan banyak
library yang dapat digunakan secara langsung. Library pada dasarnya
adalah sebuah kelas yang diletakkan di dalam folder system/libraries
atau application/libraries. Library yang terletak di dalam folder system
merupakan library bawaan dari CodeIgniter yang secara default diberi
awalan CI_. Untuk library buatan sendiri harus diletakkan di dalam
folder application/libraries.
2. Helper
Helper adalah kumpulan fungsi yang diletakkan di dalam folder
system/helpers atau applications/helpers. Biasanya helper sering
digunakan dalam view untuk membantu proses-proses yang berulang,
seperti generate html, url, security, dan lain-lain.
Agar dapat menggunakan librarydan helper, maka keduanya harus diload terlebih dahulu. Ada dua cara yang dapat dilakukan untuk men-load
sebuah library dan helper antara lain:
1. Menambahkan pada konfigurasi autoload
Menambahkan sebuah library di autoload berarti seluruh aplikasi akan
dapat menggunakan library tersebut secara langsung. Sebaiknya library
yang di-load dengan cara ini adalah jenis library yang dipakai di seluruh
aplikasi seperti login, template, dan lain-lain.
2. Menggunakan perintah loader library
Library loader dapat digunakan untuk men-load library. Library loader
adalah sebuah library CodeIgniter yang otomatis di-load. Loader
berfungsi sebagai pengatur dari sumberdaya-sumberdaya yang ada di

194
dalam CodeIgniter seperti Model, View, Library, dan Helper. Cara
penggunaannya adalah:
$this->load->library('nama_library');
$this->load->helper('nama_helper');

Nama library dan helper harus diisi dengan huruf kecil. Ketika sebuah
library sudah di-load maka library tersebut menjadi property pada
object Controller. Adapun cara penggunaannya adalah sebagai berikut.

195

$this->nama_library->fungsi();

8.7 Hello CodeIgniter

Bagian ini akan membahas bagaimana memulai coding dengan
menggunkan prinsip MVC pada CodeIgniter. Contoh sederhana yang
dibahas adalah bagaimana menampilkan tulisan "Hello CodeIgniter!" pada
browser.
1.

Hanya menggunakan Controller

Mengapa memulai dengan hanya controller? Karena etiap program
dengan MVC, maka program utama adalah komponen C (Controller), view
dan model adalah komponen pendukung untuk membuat program menjadi
lebih terstruktur. Semua program dibuat dengan menjalankan atau
memanggil controller yang akan mengatur berikutnya akan memanggil atau
menggunakan bagian model dan atau view, jika diperlukan. Sebuah kelas
controller adalah sebuah file yang terletak di dalam folder
application/controller dan memiliki nama file yang sama dengan nama
kelasnya dan dikaitkan dengan URL.
Segmen-segment pada URL pada CodeIgniter mencerminkan
controller yang dipanggil. Contoh: http://www.domainsaya.com/
class/fungsi/id maka domain tersebut dapat dipecah menjadi beberapa
bagian-bagian seperti terlihat pada Gambar 8.6 berikut ini.

Adapun komponen-komponen URL pada Gambar 8.6 adalah

Konfigurasi Base Url, bagian ini merupakan url yang diset pada
konfigurasi base_url yang berupakan url paling dasar untuk mengakses
web atau aplikasi yang dibangun.
Segmen URI pertama yaitu class. Class tersebut merupakan nama kelas
controller yang akan kita panggil. Apabila segmen ini kosong maka
akan digantikan dengan default controller yang telah diset pada
konfigurasi router.php.
Segmen URI kedua yaitu fungsi dari class controller yang telah
dipanggil pada segmen URI pertama. Apabila segment kedua ini
kosong maka fungsi yang dipanggil adalah fungsi index dari kelas
controller tersebut.
Segmen URI ketiga biasanya berisi parameter dari fungsi. Jika fungsi
dari controller yang dipanggil mempunyai parameter maka
parameternya harus dimasukkan sebagai segment URI sesuai urutan.

Untuk lebih jelasnya, dapat dilihat pada contoh kode berikut ini.
<?php
class Hello extends CI_Controller{
function __construct()
{
parent::__construct();
}
function index(){
echo "<h1>Hello CodeIgniter!</h1>";
}
}
/* End of file hello.php */
/* Location: ./application/controllers/hello.php */

Selanjutnya, aplikasi dijalankan dengan memanggil controller-nya yakni

dengan
alamat:
http://localhost/ci221/index.php/hello
sehingga
memperoleh hasil seperti pada Gambar 8.7 berikut ini.

Gambar 8.6 URL dalam CodeIgniter

Gambar 8.7 Hello CodeIgniter dengan controller

196
Secara sekilas, maka controller yang dibuat adalah seperti
membungkus program script hello.php dengan pernyataan class yang di
dalamnya terdapat fungsi index().
2.

Menggunakan Controller dan View

Contoh berikut ini adalah contoh penggunaan controller dan view
untuk menampilkan tulisan "Hello CodeIgniter!".
Tanpa variabel
Berikut kode untuk controller, dengan nama file hello.php dan disimpan
pada direktori: c:\xampp\htdocs\ci221\application\controllers.
<?php
class Hello extends CI_Controller{
function __construct()
{
parent::__construct();
}
function index(){
this->load->view("view_hello");
}
}
/* End of file hello.php */
/* Location: ./application/controllers/hello.php */

Berikut kode untuk view dengan nama file view_hello.php dan

disimpan pada direktori: c:\xampp\htdocs\ci221\application\views.
<html>
<head>
<title>Hello CodeIgniter!</title>
</head>
<body>
<h1>Hello CodeIgniter!</h1>
</body>
</html>

Jika diperhatikan, maka file view hanya memisahkan bagian HTML

saja menjadi satu file tersendiri dan disimpan pada folder khusus yang
telah ditetapkan oleh CI.
View

dipanggil oleh controller dengan menggunakan fungsi

Pada controller di atas, saat melakukan load suatu view,
tidak perlu menuliskan ekstensi .php-nya karena CI akan secara
otomatis mencari file view yang telah diset, yang memiliki ekstensi
.php pada folder application\views. Pemanggilan aplikasi dilakukan
dengan memanggil controller-nya, dimana memperoleh hasil yang sama
seperti pada Gambar 8.7 sebelumnya.

load->view().

197

Dengan variabel
Pemisahan menjadi controller dan view, sebenarnya bukan sekedar
memisahkan 2 buah file saja. Tetapi dapat dibuat untuk menjadi lebih
fleksibel, dimana controller tidak sekedar menjadi pemanggil dan view
tidak sekedar untuk menampilkan dokumen HTML saja.
Contoh controller dan view berikut digunakan untuk menunjukkan
tidak sekedar pemisahan 2 file saja, tetapi kita bisa menunjukkan sedikit
fleksibilitas, yaitu adanya peluang kemudahan untuk melakukan
perubahan atau perbaikan aplikasi untuk menampilkan pesan yang
diinginkan.
Berikut kode untuk controller, dengan nama file hellovar.php dan
disimpan pada direktori: c:\xampp\htdocs\ci221\application\controllers.
<?php
class Hellovar extends CI_Controller{
function __construct()
{
parent::__construct();
}
function index(){
$data=array();
$data["hello"]="Hello CodeIgniter!";
$this->load->view("view_hellovar",$data);
}
}
/* End of file hellovar.php */
/* Location: ./application/controllers/hellovar.php */

Dalam file controller ini, dilakukan modifikasi dengan membuat sebuah

variabel array asosiatif $data, kemudianmendefinisikan sebuah elemn
yang menggunakan kunci (key) hello, yang akan diisi atau menyimpan
kalimat "Hello CodeIgniter!". Kemudian pada saat memanggil view,
ditambahkan $data sebagai parameter kedua.
Berikut kode untuk view dengan nama file view_hellovar.php dan
disimpan pada direktori: c:\xampp\htdocs\ci221\application\views.
<html>
<head>
<title>Hello CodeIgniter!</title>
</head>
<body>
<h1><?php echo $hello; ?> </h1>
</body>
</html>

198
Pada file view, jadi ada sebuah variabel dengan nama $hello
menggantikan tulisan "Hello CodeIgniter!". CI memudahkan
pemrogram untuk mendefinisikan setiap variabel yang akan muncul di
dalam file view sebagai key dari variabel array yang akan menjadi
parameter dari $this->load->view(). Pada contoh sebelumnya,
terdapat key "hello" dalam array $data, yang menjadi parameter dari
load->view(). Pada view, pemrogram dapat menggunakan key dari
elemn array tersebut sebagai variabel. Dengan teknik seperti ini,
pemrogram dapat mendefinisikan banyak variabel untuk suatu view
dengan membuat banyak key dalam array yang akanmenjadi parameter
load->view().
Berikut ini pada Gambar 8.8 merupakan tampilan aplikasi setelah
dijalankan
dengan
memasukkan
URL
pada
browser:
http://localhost/ci221/index.php/hellovar.

199
function katakata(){
$kalimat = $this->vhello." I'm from model";
return $kalimat;
}
}
/* End of file model_hello.php */
/* Location: ./application/models/model_hello.php */

Berikut kode untuk view dengan nama file view_hellovar.php dan disimpan
pada direktori: c:\xampp\htdocs\ci221\application\views.
<html>
<head>
<title>Hello CodeIgniter!</title>
</head>
<body>
<h1><?php echo $hello1; ?> </h1>
<h2><?php echo $hello2; ?> </h2>
</body>
</html>

Berikut kode untuk controller, dengan nama file helloprop.php dan disimpan
pada direktori: c:\xampp\htdocs\ci221\application\controllers.
<?php
class Helloprop extends CI_Controller{
function __construct()
{
parent::__construct();
}

Gambar 8.8 Hello CodeIgniter dengan controller dan view

3.

Menggunakan Controller, View dan Model

Setelah sebelumnya membuat program dengan menggunakan dua
komponen yakni controller dan view, dalam bagian ini akan dibuat
komponen model sehingga dapat menjadi sebuah program utuh dengan
konsep MVC.
Model dibuat untuk menyediakan data yang akan diberikan kepada
controller yang akan memintanya. Data yang akan diberikan kepada
controller yang meminta bisa disediakan dari suatu fungsi, bisa juga dari
suatu properti atau variabel dalam objek model.
Berikut kode untuk model, dengan nama file model_hello.php dan disimpan
pada direktori: c:\xampp\htdocs\ci221\application\models.
<?php
class Model_hello extends CI_Model{
var $vhello = "Hello CodeIgniter!";

function index(){
$this->load->model("model_hello");
$data = array();
$data["hello1"]=$this->model_hello->vhello;
$data["hello2"]=$this->model_hello->katakata();
$this->load->view("view_hellovar",$data);
}
}
/* End of file helloprop.php */
/* Location: ./application/controllers/helloprop.php */

Pada controller di atas, ditambahkan perintah yaitu $this->load->model()

yang akan menghasilkan objek model dengan nama file model. Selanjutnya,
properti dalam objek model dapat diakses dengan menggunakan $this>namamodel->namaproperti sedangkan fungsi dapat diakses dengan
menggunakan $this->namamodel->namafungsi.

200
Berikut ini pada Gambar 8.9 merupakan tampilan aplikasi setelah dijalankan
dengan memasukkan URL pada browser:
http://localhost/ci221/
index.php/helloprop.

201
2.

Melakukan konfigurasi
Setelah pembuatan database selesai, lakukan konfigurasi untuk
aplikasi. File konfigurasi ada pada folder application\config. Berikut
beberapa konfigurasi yang dilakukan.
Konfigurasi pada file autoload.php
Pada file autoload.php, carilah bagian Auto-load Libraries, kemudian
ubah konfigurasi menjadi:
$autoload['libraries'] = array('database');

Gambar 8.9 Hello CodeIgniter dengan model, view dan controller

8.8 Membangun Aplikasi Sederhana Dengan CodeIgniter
Bagian ini akan membahas mengenai pembangunan aplikasi sederhana
yang melibatkan database menggunakan framework CodeIgniter. Dalam
kasus ini adalah menampilkan data mahasiswa. Adapun langkah-langkah
dalam membangun aplikasi sederhana ini adalah sebagai berikut.
Membuat database yang diperlukan
Pembuatan database pada DBMS MySQL dapat dilakukan dengan
menggunakan tools seperti PHPMyAdmin yang berbasis web atau
HeidiSQL yang berbasis desktop maupun tools lainnya. Buatlah database
dengan nama: latihan_ci. Adapun struktur tabel mahasiswa yang digunakan
dan query untuk insert data adalah sebagai berikut.

Konfigurasi ini dimaksudkan agar librari database dapat di-load secara

otomatis.
Konfigurasi pada file database.php
Konfigurasi ini untuk melakukan pengaturan mengenai koneksi ke
database. Konfigurasi koneksi yang dilakukan adalah sebagai berikut.
$db['default']['hostname'] = 'localhost';
// sesuaikan dengan web server anda
$db['default']['username'] = 'root';
$db['default']['password'] = '';
// nama database yang telah dibuat
$db['default']['database'] = 'latihan_ci';
$db['default']['dbdriver'] = 'mysql';

1.

CREATE TABLE `tb_mahasiswa` (

`nim` VARCHAR(10) NOT NULL,
`nama` VARCHAR(25) NULL,
`jurusan` VARCHAR(20) NULL,
`alamat` VARCHAR(50) NULL,
PRIMARY KEY (`nim`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB;
INSERT INTO `tb_mahasiswa` (`nim`, `nama`, `jurusan`, `alamat`)
VALUES ('1119451010', 'Budi Setyadi', 'Teknik Elektro',
'Denpasar');
INSERT INTO `tb_mahasiswa` (`nim`, `nama`, `jurusan`, `alamat`)
VALUES ('1119451011', 'Adhi Darmawan', 'Teknik Elektro',
'Jimbaran');
INSERT INTO `tb_mahasiswa` (`nim`, `nama`, `jurusan`, `alamat`)
VALUES ('1119451012', 'Ratna Novianti', 'Teknik Elektro',
'Gianyar');

3.

Membuat model
Setelah semua pengaturan dilakukan, langkah berikutnya adalah
membuat file model. Nama file model-nya adalah mahasiswa_model.php
yang disimpan pada direktori: c:\xampp\htdocs\ci221\application\models.
<?php
class Mahasiswa_model extends CI_Model{
function tampilData()
{
$query=$this->db->get('tb_mahasiswa');
if ($query->num_rows()>0)
{
return $query->result();
}
else{
return array();
}
}
}
/* End of file model_mahasiswa.php */
/* Location: ./application/models/model_mahasiswa.php */

202

203

Fungsi tampil data yang ada pada class Mahasiswa_model adalah untuk
mengambil seluruh data mahasiswa yang ada pada database dan mereturnkannya dalam bentuk array.

<td>NIM</td>
<td>Nama</td>
<td>Jurusan</td>
<td>Alamat</td>
</tr>
<tr>
<?php foreach ($data as $row):?>
<td><?php echo $row->nim;?></td>
<td><?php echo $row->nama;?></td>
<td><?php echo $row->jurusan;?></td>
<td><?php echo $row->alamat;?></td>
</tr>
<?php endforeach;?>
</table>

4.

Membuat controller
Pada file controller yang dibuat akan melakukan load terhadap model
yang telah dibuat sebelumnya. Hal ini dimaksudkan untuk mengambil data
mahasiswa dan kemudian menampilkannya melalui view. Berikut
merupakan kode dari file controller yang disimpan dengan nama
mahasiswa.php pada direktori: c:\xampp\htdocs\ci221\application\
controllers.
<?php
class Mahasiswa extends CI_Controller{
function __construct()
{
parent::__construct();
// konstruktor: berbagai perintah yang ada di dalam
// fungsi ini akan selalu dipanggil di saat objek
// Mahasiswa dibuat

</body>
</html>

Aplikasi yang telah selesai dibuat, dapat dijalankan dengan memanggil

controller-nya menggunakan URL: http://localhost/ci221/index.php/
mahasiswa. Hasil yang diperoleh dapat dilihat pada Gambar 8.10 berikut
ini.

$this->load->model('mahasiswa_model');
}
function index(){
$data['data']=$this->mahasiswa_model->tampilData();
$this->load->view('mahasiswa_view',$data);
}
}
/* End of file mahasiswa.php */
/* Location: ./application/controllers/mahasiswa.php */

5.

Membuat view
Langkah terakhir adalah membuat file view. Kode pada file view
dimaksudkan untuk menampilkan seluruh data mahasiswa dalam bentuk
tabel. Berikut merupakan kode dari file view yang disimpan pada direktori:
c:\xampp\htdocs\ci221\application\views dengan nama mahasiswa_
view.php.
<!DOCTYPE HTML>
<html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<table width="40%" border="1">
<tr>

Gambar 8.10 Aplikasi sederhana CodeIgniter untuk menampilkan

data mahasiswa
8.9 Rangkuman
1. Framework adalah sebuah struktur konseptual dasar yang digunakan
untuk memecahkan sebuah permasalahan. Framework dapat diartikan
pula sebagai koleksi atau kumpulan potongan-potongan program yang
disusun atau diorganisasikan sedemikian rupa, sehingga dapat

204

2.

3.

4.

digunakan untuk membantu membuat aplikasi utuh tanpa harus

membuat semua kodenya dari awal.
Salah satu alasan mengapa menggunakan framework terutama dalam
membangun sebuah aplikasi adalah kemudahan yang ditawarkan.
Dalam sebuah framework biasanya sudah tersedia struktur aplikasi
yang baik, standard coding, best practice dan design pattern dan
common function.
CodeIgniter (CI) merupakan sebuah web application framework yang
bersifat open source dengan menggunakan PHP, suatu kerangka untuk
bekerja atau membuat aplikasi dengan menggunakan PHP yang lebih
sistematis. CodeIgniter menggunakan pattern MVC.
MVC adalah singkatan dari Model View Controller. MVC sebenarnya
adalah sebuah pattern/teknik pemogramanan yang memisahkan
bussiness logic (alur pikir), data logic (penyimpanan data) dan
presentation logic (antarmuka aplikasi) atau secara sederhana adalah
memisahkan antara desain, data dan proses.

8.10 Tugas/Soal Latihan

1. Apa yang dimaksud dengan framework dan sebutkan kelebihan
penggunaan framework dalam pembangunan sebuah aplikasi!
2. Jelaskan konsep MVC (Model View Controller) yang digunakan pada
web framework CodeIgniter!
3. Cobalah untuk membuat sebuah aplikasi CRUD (Create Retreive
Update Delete) menggunakan framework CodeIgniter untuk
menyimpan data pelanggan. Struktur tabel dalam database yang
digunakan untuk menyimpan data pelanggan adalah sebagai berikut.
CREATE TABLE IF NOT EXISTS `pelanggan` (
`id_pelanggan` int(10) unsigned NOT NULL AUTO_INCREMENT,
`nama_pelanggan` varchar(25) NOT NULL,
`alamat` varchar(50) NOT NULL,
`no_hp` varchar(15) NOT NULL,
PRIMARY KEY (`id_pelanggan`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

8.11 Daftar Bacaan

1. Foster, Rob. 2013. CodeIgniter 2 Cookbook. Birmingham: Packt
Publishing Ltd.
2. Orr, Eli dan Zadik, Yehuda. 2013. Programming with CodeIgniter
MVC. Birmingham: Packt Publishing Ltd.
3. Sidik, Betha. 2012. Framework CodeIgniter. Bandung: Penerbit
Informatika.

205
4.

Daqiqil, Ibnu. Framework CodeIgniter: Sebuah Panduan dan Best

Practice. http://koder.web.id/buku-codeigniter-gratis/. Diakses tanggal
20 September 2014

207
BAB IX
WEB SERVICES
9

WEB SERVICES

permasalahan terkait service yang harus dapat ditangani, yaitu bagaimana

service berhubungan, bagaimana service berkomunikasi, bagaimana service
didesain, dan bagaimana pesan antar service didefinisikan.

RINGKASAN
SOA atau Service Oriented Architecture adalah sebuah arsitektur yang
merepresentasikan fungsi dalam bentuk layanan. Salah satu teknologi yang
dapat digunakan untuk mengimplementasikan SOA adalah web service.
Web service adalah suatu sistem perangkat lunak yang dirancang untuk
mendukung interoperabilitas dan interaksi antar sistem pada suatu jaringan.
Web service menyediakan layanan (dalam bentuk informasi) kepada sistem
lain, sehingga sistem lain dapat berinteraksi dengan sistem tersebut melalui
layanan-layanan (service) yang disediakan.
9.1 SOA (Service Oriented Architecture)
SOA atau Service Oriented Architecture adalah sebuah arsitektur yang
merepresentasikan fungsi dalam bentuk layanan. Fungsi menunjukkan
abstraksi aktivitas sesuatu yang secara alami dilakukan oleh
aplikasi/program, individu, dan organisasi. Layanan mengabstraksi fungsi
dan dapat menunjukkan bentuk hubungan yang bermakna antara dua pihak
yang berkomunikasi (peminta dan penyedia layanan).
SOA juga dapat diartikan sebagai arsitektur software yang dibangun
menggunakan prinsip-prinsip perancangan berorientasi service (layanan),
sedangkan orientasi service merupakan konsep dalam rekayasa software
yang merepresentasikan pendekatan berbeda untuk memisahkan
kepentingan. Hal ini berarti bahwa fungsionalitas sistem dipecah ke dalam
unit logik yang lebih kecil yang dinamakan service. Service-service ini lepas
satu sama lain, tetapi mempunyai kemampuan untuk berinteraksi satu sama
lain melalui mekanisme komunikasi tertentu. Karena hal tersebut, SOA
didefinisikan dengan komponen service, descriptions, dan messages.
Service berkomunikasi dengan yang lain melalui message yang
memungkinkan interaksi antar services, yang ditetapkan oleh description.
Dua service berkomunikasi satu sama lain yang diacu sebagai service
requestor dan service provider. Service requestor adalah service yang
memanggil service lain, sedangkan yang dipanggil disebut service provider.
Service sendiri dapat dipandang sebagai enkapsulasi lojik dari satu
atau sekumpulan aktivitas tertentu (seperti terlihat pada Gambar 9.1).
Otomasi bisnis merupakan sekumpulan aktivitas yang disusun dalam
langkah-langkah sebagai implementasi proses bisnis. Setelah seluruh
permasalahan dapat dibagi dalam beberapa service, solusi dari permasalahan
tersebut harus bisa diselesaikan dengan memungkinkan seluruh service
berpartisipasi dalam sebuah orkestrasi. Untuk itu ada beberapa
206

Gambar 9.1 Enkapsulasi bussiness process dengan service

Pembagian berdasarkan service ini sesungguhnya bukan sesuatu yang
baru, karena telah banyak diterapkan. Namun hal baru dari pendekatan
service-oriented ini terkait dengan sifat-sifat yang dimilikinya, yaitu:
1. Loosely coupled, yaitu setiap service berdiri sendiri secara independen
dan tidak tergantung service lain untuk berjalan. Ketergantungan
diminimalisir sehingga hanya butuh mekanisme komunikasi satu
dengan lainnya.
2. Service contract, yaitu setiap service memiliki kesepakatan mengenai
cara untuk komunikasi.
3. Autonomy, yaitu service memiliki hak penuh terhadap semua lojik yang
dienkapsulasi.
4. Abstraction, yaitu service tidak memperlihatkan bagaimana lojik
diimplementasi di dalamnya.
5. Reusability, yaitu lojik dibagi menjadi sekumpulan service yang dapat
memudahkan reuse (penggunaan kembali).
6. Statelessness, yaitu service tidak memiliki status tertentu terkait dengan
aktivitas yang dilakukannya.

7.

208

209

Discoverability, yaitu service didesain untuk deskriptif sehingga bisa

ditemukan dan diakses melalui mekanisme pencarian tertentu.

Web service bersandar pada konsep SOA (Service Oriented

Architecture). Web service memiliki tiga entitas dalam arsitekturnya (seperti
ditunjukkan pada Gambar 9.2) yaitu:
1. Service Provider (penyedia layanan): berfungsi untuk menyediakan
layanan/service dan mengolah sebuah registry agar layanan-layanan
tersebut dapat tersedia.
2. Service Registry: berfungsi sebagai lokasi yang mendeskripsikan semua
layanan/service yang telah di-register.
3. Service Requestor: Peminta layanan yang mencari dan menemukan
layanan yang dibutuhkan serta menggunakan layanan tersebut.

SOA terdiri atas sekumpulan service. Namun sekumpulan service

tidak cukup untuk membentuk sebuah arsitektur ini. SOA terdiri atas empat
komponen, yaitu:
1. Message, yaitu data yang dibutuhkan untuk menyelesaikan sebagian
atau sebuah unit kerja, yang dipertukarkan antara satu service dengan
yang lainnya.
2. Operation, yaitu fungsi-fungsi yang dimiliki oleh sebuah service untuk
memproses message hingga menghasilkan sesuatu. Fungsi-fungsi inilah
yang nantinya akan saling berinteraksi untuk menyelesaikan sebuah
unit kerja.
3. Service, merepresentasikan sekumpulan operation yang berhubungan
untuk menyelesaikan sekumpulan unit kerja yang berhubungan.
4. Process, merupakan bussiness rule yang menentukan operasi mana
yang digunakan untuk mencapai tujuan tertentu.
9.2 Web Service
Web service adalah suatu sistem perangkat lunak yang dirancang
untuk mendukung interoperabilitas dan interaksi antar sistem pada suatu
jaringan. Web service menyediakan layanan (dalam bentuk informasi)
kepada sistem lain, sehingga sistem lain dapat berinteraksi dengan sistem
tersebut melalui layanan-layanan (service) yang disediakan. Web service
menyimpan data informasi dalam format XML, sehingga data ini dapat
diakses oleh sistem lain walaupun berbeda platform, sistem operasi, maupun
bahasa compiler.
Beberapa alasan mengapa digunakannya web service adalah sebagai
berikut.
1. Web service dapat digunakan untuk mentransformasikan satu atau
beberapa bisnis logic atau class dan objek yang terpisah dalam satu
ruang lingkup yang menjadi satu, sehingga tingkat keamanan dapat
ditangani dengan baik.
2. Web service memiliki kemudahan dalam proses deployment-nya,
karena tidak memerlukan registrasi khusus ke dalam suatu sistem
operasi. Web service cukup di-upload ke web server dan siap diakses
oleh pihak-pihak yang telah diberikan otorisasi.
3. Web service berjalan di port 80 yang merupakan protokol standar
HTTP, dengan demikian web service tidak memerlukan konfigurasi
khusus di sisi firewall.

Gambar 9.2 Arsitektur web service

Secara umum, web service memiliki tiga operasi yang terlibat di
dalamnya, yaitu:
1. Publish/Unpublish: Menerbitkan/menghapus layanan ke dalam atau
dari registry.
2. Find: Service requestor mencari dan menemukan layanan yang
dibutuhkan.
3. Bind: Service requestor setelah menemukan layanan yang dicarinya,
kemudian melakukan binding ke service provider untuk melakukan
interaksi dan mengakses layanan/service yang disediakan oleh service
provider.
Web service secara keseluruhan memiliki empat layer komponen
protokol seperti ditunjukkan pada Gambar 9.3, yaitu:
1. Layer 1: Protokol internet standar seperti HTTP, TCP/IP

2.
3.
4.

210

211

Layer 2: Simple Object Access Protocol (SOAP), merupakan protokol

akses objek berbasis XML yang digunakan untuk proses pertukaran
data/informasi antar layanan.
Layer 3: Web Service Definition Language (WSDL), merupakan suatu
standar bahasa dalam format XML yang berfungsi untuk
mendeskripsikan seluruh layanan yang tersedia.
Layer 4: Universal Description, Discovery and Integration
(UDDI) adalah suatu directory service yang digunakan untuk
meregistrasikan dan mencari web service.

Berikut ini adalah contoh sebuah dokumen XML untuk informasi

contact person:

Gambar 9.3 Empat layer komponen protokol pada web service

9.3 XML (eXtensible Markup Language)
XML terletak pada inti web service, yang digunakan untuk
mendeskripsikan data. Fungsi utama dari XML adalah komunikasi antar
aplikasi, integrasi data, dan komunikasi aplikasi eksternal dengan partner
luaran. Dengan standarisasi XML, aplikasi-aplikasi yang berbeda dapat
dengan mudah berkomunikasi antar satu dengan yang lain.
XML adalah singkatan dari eXtensible Markup Language. Bahasa
markup adalah sekumpulan aturan-aturan yang mendefinisikan suatu sintaks
yang digunakan untuk menjelaskan, dan mendeskripsikan teks atau data
dalam sebuah dokumen melalui penggunaan tag. Bahasa markup lain yang
populer seperti HTML, menggambarkan kepada browser web tentang
bagaimana menampilkan format teks, data, dan grafik ke layar komputer
ketika sedang mengunjungi sebuah situs web. XML adalah sebuah bahasa
markup yang digunakan untuk mengolah metadata (informasi tentang data)
yang menggambarkan struktur dan maksud/tujuan data yang terdapat dalam
dokumen XML, namun bukan menggambarkan format tampilan data
tersebut. XML adalah sebuah standar sederhana yang digunakan untuk
medeskrippsikan data teks dengan cara self-describing (deskripsi diri). XML
juga dapat digunakan untuk mendefinisikan domain tertentu lainnya, seperti
musik, matematika, keuangan dan lain-lain yang menggunakan bahasa
markup terstruktur.

<?xml version="1.0" encoding="ISO-8859-1"?>

<contact>
<name>Arsa Suyadnya</name>
<company>Universitas Udayana</company>
<address>Jl. Teuku Umar No. 54</address>
<city>Denpasar</city>
<state>Indonesia</state>
<zip>80113</zip>
<phone>08155761388</phone>
<email>[email protected]</email>
</contact>

Perhatikan bagaimana mudahnya untuk mengerti tentang makna

informasi dan strukturnya pada dokumen XML di atas, sehingga juga akan
mudah bagi komputer untuk mengerti dokumen XML ini.
Seperti halnya HTML, XML juga menggunakan elemen yang ditandai
dengan tag pembuka (diawali dengan < dan diakhiri dengan >), tag
penutup(diawali dengan </ diakhiri >) dan atribut elemen (parameter
yang dinyatakan dalam tag pembuka misal <person id="3344">). Hanya
bedanya, HTML medefinisikan dari awal tag dan atribut yang dipakai di
dalamnya, sedangkan pada XML menggunakan tag dan atribut yang dapat
ditentukan sendiri. Berikut ini pada Gambar 9.4 adalah tampilan dokumen
XML di atas apabila dijalankan pada sebuah browser.

Gambar 9.4 Tampilan dokumen XML pada browser

212

213

Adapun berikut ini merupakan contoh sebuah struktur dokumen XML.

pemrograman, dan datanya dapat ditransfer dengan mudah melalui protokol

standar internet seperti HTTP tanpa dibatasi oleh firewall.

<?xml version="1.0" encoding="ISO-8859-1"?>

<email>

Standard Header

Elemen root

<to>Agus Purwanto</to>
<from>Arsa Suyadnya</from>
<subject>Hallo</subject>
<message>Selamat Pagi</message>
</email>

Elemen child

Baris pertama pada dokumen XML di atas adalah deklarasi standar

header yang mendefinisikan versi XML dan karakter encoding yang
digunakan dalam dokumen XML. Dalam dokumen ini, XML mengacu pada
versi 1.0 dan menggunakan standar encoding karakter set ISO-8859-1
(Latin-1/West European). Baris selanjutnya menggambarkan elemen induk
(root) dokumen "<email>..</email>", sebagaimana kita menyebut bahwa
"Dokumen ini adalah sebuah Email". Kemudian baris ke 3-6
menggambarkan elemen anak (child) dari elemen induk dokumen.
Tag pada dokumen XML bersifat case sensitif di mana tag pembuka
dan tag penutup harus ekivalen. Seperti contoh tag pembuka "<email>"
harus ditutup dengan tag "</email>".
Berikut ini adalah contoh penulisan dokumen XML yang tidak benar:
"<email>.</Email>"
"<email>.</EMAIL>"
"<Email>.</email>"

Berikut ini adalah contoh penulisan dokumen XML yang benar:

"<email>.</email>"
"<EMAIL>.</EMAIL>"
"<Email>.</Email>"

Sifat XML yang mudah untuk dibaca dan ditulis baik oleh manusia
maupun komputer, maka XML merupakan sebuah format yang dapat
digunakan untuk pertukaran data (interchange) antar aplikasi dan platform
yang berbeda (platform independent). Metode deskripsi data XML (selfdescribing) membuatnya menjadi pilihan efektif untuk bisnis ke bisnis,
solusi antar jaringan, e-business, dan aplikasi terdistribusi. XML juga
bersifat dapat diperluas (extensible), dapat digunakan pada semua bahasa

9.4 SOAP (Simple Object Access Protocol)

SOAP (Simple Object Access Protocol) adalah standar untuk bertukar
pesan-pesan berbasis XML melalui jaringan komputer atau sebuah jalan
untuk program yang berjalan pada suatu sistem operasi (OS) untuk
berkomunikasi dengan program pada OS yang sama maupun berbeda
dengan menggunakan HTTP dan XML sebagai mekanisme untuk
pertukaran data.
SOAP menspesifikan secara jelas bagaimana cara untuk meng-encode
header HHTP dan file XML sehingga program pada suatu komputer dapat
memanggil program pada pada komputer lain dan mengirimkan informasi,
dan bagaimana program yang dipanggil memberikan tanggapan.
SOAP adalah protokol ringan yang ditujukan untuk pertukaran
informasi struktur pada lingkup desentralisasi, dan terdistribusi. SOAP
menggunakan teknologi XML utuk mendefinisikan rangka kerja pemesanan
terekstrensi di mana menyediakan konstruksi pesan yang dapat
dipertukarkan pada protokol berbeda. Rangka kerja dirancang bebas dari
model pemrograman dan spesifikasi implementasi semantik.
Secara konseptual SOAP dapat dianggap sebagai DCOM (Distributed
Component Object Model) versi XML. SOAP merupakan mekanisme lain
yang memungkinkan penggunaan remote procedure call. SOAP bersifat
netral platform, netral bahasa dan tidak bergantung pada suatu objek model.
Sehingga SOAP-enabled distributed application dapat menjangkau beragam
operating sistem, dimana terdiri dari objek yang berasal dari vendor yang
berbeda, ditulis pada bahasa yang berbeda, dan didasarkan pada objek
model yang berbeda Distributed Component Object Model.
SOAP menjadi sangat mudah diterima oleh berbagai pihak terutama
oleh berbagai vendor TI dikarenakan protokol ini memanfaatkan berbagai
teknologi yang sudah ada sebelumnya dan sudah banyak digunakan.
Misalnya untuk protokol transport, yang paling banyak digunakan adalah
HTTP, walaupun dimungkinkan untuk menggunakan protokol transport
lainnya. Sedangkan untuk format data atau message digunakan XML yang
tidak diragukan lagi manfaat dan perannya di dalam pertukaran data.
Dengan demikian, tidaklah terlalu mengherankan bila kemudian SOAP
dianggap sebagai solusi penyelamat untuk mengatasi berbagai masalah yang
dihadapi oleh teknologi teknologi pendahulunya.
Adapun struktur XML dalam SOAP ditunjukkan pada Gambar 9.5
berikut ini.

214

Gambar 9.5 Struktur XML dalam SOAP

Pesan SOAP berbentuk seperti sebuah envelope yang berisi header
(optional) dan body (required). Header berisi blok informasi yang
berhubungan dengan bagaimana pesan tersebut diproses. Hal ini meliputi
pe-routingan dan delivery setting, authentication atau authorization
assertions, dan transaction contexts. Body berisi pesan sebenarnya yang
dikirim dan diproses. Semua yang dapat ditampilkan dengan sintaks XML
dapat dimasukkan dalam pesan body.
Setiap elemen Envelope harus berisi tepat satu elemen Body. Elemen
Body dapat berisi sebanyak mungkin child nodes yang diperlukan. Isi dari
elemen Body adalah pesan. Elemen Body ditentukan dalam suatu cara
dimana dapat berisi valid dan wellformed XML yang telah dibatasi oleh
suatu namespace (qualified).
Jika sebuah Envelope berisi elemen Header, harus berisi tidak lebih
dari satu, dan harus tampak pada first child dari Envelope, sebelum elemen
Body. Header dapat berisi valid, well-formed, dan dibatasi dengan
namespace XML dimana hendak dimasukkan oleh pencipta pesan SOAP.
Setiap elemen yang berada dalam Header disebut blok header. Tujuan
dari blok header adalah untuk memberitahukan infomasi yang berhubungan
dengan pemrosesan pesan SOAP. Berikut pada Gambar 9.6 ditunjukkan
posisi SOAP dalam aplikasi.

215
9.5 WSDL (Web Service Description Language)
WSDL merupakan kependekan dari Web Services Description
Language. WSDL adalah bahasa berbasis XML untuk mendeskripsikan web
services dan bagaimana untuk mengaksesnya. WSDL membantu konsumer
web service untuk memakai/menggunakan layanan web service. WSDL
menspesifikasikan lokasi service dan operasi (methods) yang disediakan
oleh web service.
Sebagai protokol komunikasi dan format pesan yang distandarkan
pada komunitas web, WSDL menjadi lebih tepat dan penting untuk
mendeskripsikan model komunikasi dalam beberapa langkah yang
terstruktur (dalam memprogram web service). WSDL menyediakan
kebutuhan ini dengan mendefinisikan bentuk XML untuk mendeskripsikan
layanan jaringan sebagai kumpulan-kumpulan titik akhir (endpoints)
komunikasi yang mampu melakukan pertukaran pesan. Hal tersebut sangat
membantu komunikasi antara dua teknologi pada platform-platform secara
umum. Definisi layanan WSDL menyediakan dokumentasi untuk sistem
terdistribusi dan berfungsi sebagai panduan untuk mengotomatisasi rincian
yang terlibat dalam komunikasi antar aplikasi.
WSDL sering digunakan pada kombinasi SOAP dan XML schema
untuk menyediakan web service di internet. Aplikasi client yang terhubung
ke sebuah web service dapat membaca file WSDL untuk menentukan
operasi apa saja yang tersedia pada server. Tipe-tipe data khusus yang
digunakan di-embed pada file WSDL dalam bentuk XML schema. Client
kemudian dapat menggunakan SOAP untuk memanggil operasi-operasi
yang terdaftar pada file WSDL secara aktual menggunakan XML atau
HTTP.
Adapun struktur utama dari dokumen WSDL terlihat seperti berikut
ini.
<definitions>
<types>
definition of types........
</types>
<message>
definition of a message....
</message>
<portType>
definition of a port.......
</portType>

Gambar 9.6 Posisi SOAP dalam aplikasi

216

217

<binding>
definition of a binding....
</binding>

<documentation>Melakukan penjumlahan dua buah

bilangan</documentation>
<input message="tns:jumlahkanRequest"/>
<output message="tns:jumlahkanResponse"/>
</operation>
<operation name="kurangkan">
<documentation>Melakukan pengurangan dua buah
bilangan</documentation>
<input message="tns:kurangkanRequest"/>
<output message="tns:kurangkanResponse"/>
</operation>
</portType>

<service>
definition of a service....
</service>
</definitions>

1.

Elemen Types
Elemen <types> ini digunakan sebagai penampung untuk
mendefinisikan berbagai tipe data yang akan digunakan dalam
pertukaran pesan. Contoh :
<types>
<xsd:schema targetNamespace="urn:WS_Perhitungan_WSDL">
<xsd:import
namespace="http://schemas.xmlsoap.org/soap/encoding/"/>
<xsd:import namespace="http://schemas.xmlsoap.org/wsdl/"/>
</xsd:schema>
</types>

2.

Elemen Message
Elemen <message> dalam sebuah file WSDL mendeskripsikan isi
logika dari pesan-pesan yang saling berhubungan. Tiap-tiap elemen
<message> terdiri dari bagian-bagian logika yang dideskripsikan dalam
elemen anak (child element) <part>. Tiap-tiap element <part>
mempunyai atribut name dan type yang menspesifikasikan nama dari
elemen <part> itu sendiri dan tipe datanya. Jika sebuah elemen
<message> mempunyai banyak bagian logika maka perlu
dispesifikasikan banyak elemen <part> untuk masing-masing bagian
logika. Contoh:
<message name="jumlahkanRequest">
<part name="x" type="xsd:decimal"/>
<part name="y" type="xsd:decimal"/>
</message>
<message name="jumlahkanResponse">
<part name="return" type="xsd:decimal"/>
</message>

3.

Elemen Port Type

Elemen <portType> mengidentifikasikan kumpulan operasi, dimana
masing-masing operasi dipisahkan elemen anak <operation>. Contoh:
<portType name="WS_PerhitunganPortType">
<operation name="jumlahkan">

4.

Elemen Binding
Untuk setiap elemen <portType> yang mengidentifikasi sebuah operasi
dihubungkan dengan elemen <binding> yang menyediakan detail
protokol operasi tersebut. Sebagai contoh elemen <binding> :
<binding name="WS_PerhitunganBinding"
type="tns:WS_PerhitunganPortType">
<soap:binding style="rpc"
transport="http://schemas.xmlsoap.org/soap/http"/>
<operation name="jumlahkan">
<soap:operation soapAction="urn:WS_Perhitungan_WSDL/
jumlahkan" style="rpc"/>
<input>
<soap:body use="encoded"
namespace="urn:WS_Perhitungan_WSDL"
encodingStyle="http://schemas.xmlsoap.org/soap/encoding/
"/>
</input>
<output>
<soap:body use="encoded"
namespace="urn:WS_Perhitungan_WSDL"
encodingStyle="http://schemas.xmlsoap.org/soap/encoding/
"/>
</output>
</operation>
<operation name="kurangkan">
<soap:operation soapAction="urn:WS_Perhitungan_WSDL/
kurangkan" style="rpc"/>
<input>
<soap:body use="encoded"
namespace="urn:WS_Perhitungan_WSDL"
encodingStyle="http://schemas.xmlsoap.org/soap/encoding/
"/>
</input>
<output>
<soap:body use="encoded"
namespace="urn:WS_Perhitungan_WSDL"

218
encodingStyle="http://schemas.xmlsoap.org/soap/encoding/
"/>
</output>
</operation>
</binding>

5.

Elemen Service
Ketika client melakukan request sebuah operasi dari server, maka harus
mengidentifikasikan service, port dari service dan operasi yang akan
dieksekusi. Client menggunakan elemen <service> untuk menyediakan
informasi ini. Setiap elemen <service> berisikan elemen anak <port>
dan elemen <port> mempunyai dua atribut dan satu elemen anak.
Atribut name menyediakan nama khusus dari port yang telah
terdefinisi, sedangkan atribut binding menunjuk pada binding yang
telah dispesifisikan sebelumnya pada elemen <binding>. Contoh
elemen service :
<service name="WS_Perhitungan">
<port name="WS_PerhitunganPort"
binding="tns:WS_PerhitunganBinding">
<soap:address location="http://localhost/nusoap/
server.php"/>
</port>
</service>

9.6 Web Service PHP Dengan NuSOAP Toolkit

9.6.1 Mengenal NuSOAP
NuSOAP adalah sebuah kumpulan class-class PHP yang
memungkinkan user untuk mengirim dan menerima pesan SOAP melalui
protokol HTTP. NuSOAP dibuat oleh NuSphere dan Dietrich Ayala yang
didistribusikan sebagai open source toolkit di bawah lisensi GNU LGPL.
Salah satu keuntungan dari NuSOAP adalah bahwa NuSOAP bukan
merupakan PHP extension, sehingga penggunaannya tidak membutuhkan
registrasi khusus ke sistem operasi maupun web server. NuSOAP ditulis
dalam kode PHP murni sehingga semua developer web dapat mengunakan
tool ini tanpa tergantung pada jenis web server yang digunakan.
NuSOAP merupakan toolkit web service berbasis komponen.
NuSOAP memiliki sebuah class dasar yang menyediakan method seperti
serialisasi variabel dan pemaketan SOAP-Envelope. Interaksi web service
dilakukan dengan class client yang disebut dengan class "nusoap_client"
dan class server yang disebut dengan class "nusoap_server". Class-class ini
mengizinkan user untuk melakukan proses pengiriman dan penerimaan

219
pesan-pesan SOAP dengan bantuan beberapa class-class pendukung lainnya
untuk melengkapi proses tersebut.
Operasi-operasi pengiriman pesan SOAP dijalankan dengan
melibatkan paramater nama operasi yang diinginkan melalui method call().
Jika web service yang dituju menyediakan sebuah file WSDL, maka class
"nusoap_client" akan mengacu langsung pada URL file WSDL tersebut dan
menggunakan class "wsdl" untuk mem-parsing file WSDL dan mengekstrak
seluruh datanya. Class "wsdl" menyediakan method-method untuk
mengekstrak data per-operasi dan per-binding.
Class nusoap_client menggunakan data dari file WSDL untuk
menerjemahkan
parameter-parameternya sekaligus menyusun SOAP
envelope ketika user mengeksekusi suatu pemanggilan service. Ketika
pemanggilan ini dieksekusi, class "nusoap_client" menggunakan
"soap_transport_http" untuk mengirim pesan SOAP request dan menerima
pesan SOAP response. Selanjutnya pesan SOAP response yang diterima diparsing dengan menggunakan class "nusoap_parser".
9.6.2 Instalasi dan Konfigurasi NuSOAP
Instalasi dan konfigurasi NuSOAP dapat dilakukan dengan beberapa
tahap berikut:
Mengunduh NuSOAP dari situs:
http://sourceforge.net/projects/nusoap/
Ekstrak file zip, dimanaakan mendapatkan sebuah folder bernama
/lib. Di dalam folder /lib inilah kumpulan-kumpulan class NuSOAP
tersimpan.
Copy folder /lib ke lokasi direktori tertentu
Lakukan include class dalam kode PHP:
require_once('lib/nusoap.php');

9.6.3 Pemrograman SOAP dan WSDL Client Server

Setelah melakukan instalasi NuSOAP, selanjutnya adalah mencoba
sebuah pemrograman web service SOAP dan WSDL client-server sederhana
yang menyediakan sebuah service untuk melakukan perhitungan
(penjumlahan dan pengurangan).
Sebagai contoh, kita akan membuat 2 aplikasi sederhana, yaitu aplikasi
server (server.php) dan aplikasi client (client.php).
Berikut ini merupakan code untuk server.php.
<?php
// meng-includekan file berisi class nusoap
require_once('lib/nusoap.php');

220
// instansiasi class soap untuk server
$server = new nusoap_server();
$server->configureWSDL("WS_Perhitungan",
"urn:WS_Perhitungan_WSDL");
// meregistrasi 'method' untuk proses penjumlahan
// dengan nama 'jumlahkan'
$server->register(
// method name
'jumlahkan',
// input parameters
array('x' => 'xsd:decimal','y' => 'xsd:decimal'),
// output parameters
array('return' => 'xsd:decimal'),
// namespace
'urn:WS_Perhitungan_WSDL',
// SOAPAction
'urn:WS_Perhitungan_WSDL/jumlahkan',
// style
'rpc',
// use
'encoded',
// documentation
'Melakukan penjumlahan dua buah bilangan'
);

// meregistrasi 'method' untuk proses pengurangan

// dengan nama 'kurangkan'
$server->register(
// method name
'kurangkan',
// input parameters
array('x' => 'xsd:decimal','y' => 'xsd:decimal'),
// output parameters
array('return' => 'xsd:decimal'),
// namespace
'urn:WS_Perhitungan_WSDL',
// SOAPAction
'urn:WS_Perhitungan_WSDL/kurangkan',
// style
'rpc',
// use
'encoded',
// documentation
'Melakukan pengurangan dua buah bilangan'
);
// detil isi method 'jumlahkan' dan 'kurangkan'
function jumlahkan($x, $y) {
return $x + $y;
}

221
function kurangkan($x, $y) {
return $x - $y;
}
// memberikan response service
$HTTP_RAW_POST_DATA = isset($HTTP_RAW_POST_DATA) ?
$HTTP_RAW_POST_DATA : '';
$server->service($HTTP_RAW_POST_DATA);
?>

Pada kode yang ada pada file server.php, aplikasi menyediakan service
dengan menggunakan WSDL dengan cara mengeksekusi method
"configureWSDL": $server->configureWSDL("WS_Perhitungan", "urn:
WS_Perhitungan_WSDL");

WSDL yang dikonfigurasi menggunakan dua parameter input. Parameter

pertama menggambarkan nama web service yaitu "WS_Perhitungan", dan
parameter kedua yang bersifat optional yang menggambarkan namespace
WSDL, yaitu "WS_Perhitungan_WSDL".
Setelah melakukan konfigurasi WSDL, selanjutnya aplikasi server
melakukan registrasi semua service yang disediakan sekaligus
mendefinisikan detail pengoperasiannya:
// meregistrasi 'method' untuk proses penjumlahan
// dengan nama 'jumlahkan'
$server->register(
// method name
'jumlahkan',
// input parameters
array('x' => 'xsd:decimal','y' => 'xsd:decimal'),
// output parameters
array('return' => 'xsd:decimal'),
// namespace
'urn:WS_Perhitungan_WSDL',
// SOAPAction
'urn:WS_Perhitungan_WSDL/jumlahkan',
// style
'rpc',
// use
'encoded',
// documentation
'Melakukan penjumlahan dua buah bilangan'
);
...... dst (potongan kode)

222

223

Dalam men-generate WSDL, parameter-parameter pengoperasian yang

digunakan pada tiap-tiap service harus didefinisikan. Parameter tersebut
adalah:
register($name,$in=array(),$out=array(),$namespace=false,$soapa
ction=false,$style=false,$use=false,$documentation='',$encoding
Style='')

Keterangan:
name
in

:
:

out

namespace

soapaction

style
use

:
:

documentation
encodingstyle

:
:

Nama method service yang disediakan

Nilai input berupa array asosiatif (param name
=> param type)
Nilai output berupa array asosiatif (param name
=> param type)
Informasi namespace pada service yang
disediakan
Informasi soap action pada service yang
disediakan
Optional style atau bernilai false
Optional use (decoded | literal) atau bernilai
false
Optional deskripsi dokumentasi WSDL
Optional style encoding

Gambar 9.7 Aplikasi server dengan WSDL yang ditampilkan

melalui browser

Setelah melakukan registrasi service dan mendefinisikan semua detail

pengoperasiannya, selanjutnya aplikasi server menyediakan method service:
function jumlahkan($x, $y) {
return $x + $y;
}
function kurangkan($x, $y) {
return $x - $y;
}

Untuk melihat detail semua service yang disediakan oleh aplikasi server
yang dibuat, dilakukan dengan cara mengetikkan pada browser web URL
yang mengacu pada file aplikasi server tersebut. Dalam contoh ini URL
tersebut adalah "http://localhost/nusoap/server.php". Hasilnya dapat dilihat
pada Gambar 9.7 dan Gambar 9.8.
Gambar 9.8 Detail operasi pada item service yang disediakan

224

225

Berikut ini merupakan code untuk client.php.

<html>
<head>
<title>Contoh NuSOAP Web Service </title>
</head>
<body>
<!-- form pencarian data -->
<form method="post" action="client.php">
<table border="1">
<tr><td colspan="2">Inputkan Bilangan:</td></tr>
<tr><td>Input Bilangan I</td><td><input type="text"
name="bil1"></td></tr>
<tr><td>Input Bilangan II</td><td><input type="text"
name="bil2"></td></tr>
<tr><td colspan="2"><input type="submit" name="submit"
value="Hitung"></td></tr>
</table>
</form>
<?php
if (isset($_POST['bil1']) && !empty($_POST['bil1'])
&& isset($_POST['bil2']) && !empty($_POST['bil1']) ){
require_once('lib/nusoap.php');
// dua bilangan yang akan dijumlahkan
$bil1 = $_POST['bil1'];
$bil2 = $_POST['bil2'];
// instansiasi obyek untuk class nusoap client
$client = new nusoap_client('http://localhost/nusoap/
server.php?wsdl',true);
// proses call method 'jumlahkan' dan 'kurangkan'
// di script server.php yang ada di komputer server
$result1 = $client->call('jumlahkan',
array('x' => $bil1, 'y' => $bil2));

}
}
}else{
echo "Input angka masih kosong!";
}
?>
</body>
</html>

Perhatikan pada contoh aplikasi client, aplikasi client mengeksekusi

class "nusoap_client" dengan memasukkan parameter URL yang mengacu
pada URL lokasi aplikasi server dengan menambahkan parameter "?wsdl"
yang mengindikasikan bahwa aplikasi server menggunakan WSDL:
$client = new nusoap_client('http://localhost/nusoap/
server.php?wsdl',true);

Setelah mengeksekusi class "nusoap_client", selanjutnya aplikasi

client melakukan pemanggilan service dengan mengeksekusi method "call":
// proses call method 'jumlahkan' dan 'kurangkan'
// di script server.php yang ada di komputer server
$result1 = $client->call('jumlahkan',
array('x' => $bil1, 'y' => $bil2));
$result2 = $client->call('kurangkan',
array('x' => $bil1, 'y' => $bil2));

Pada kode di atas, variabel $bil1 dan $bil2 merupakan variabel untuk
menampung dua buah bilangan yang diinputkan user melalui sebuah form.
Kedua variabel ini digunakan sebagai parameter input pada pemanggilan
service "jumlahkan" dan "kurangkan". Hasil dari aplikasi "client.php" yang
dijalankan melalui browser dan dengan input parameter bil1 = 5 dan bil2= 4
dapat dilihat pada Gambar 9.9 berikut ini.

$result2 = $client->call('kurangkan',
array('x' => $bil1, 'y' => $bil2));
$err = $client->getError();
if($err){
echo $client->getError();
}else{
if($result1!=null && ($result2!=null ||
$result2==0)){
echo "<p>Hasil penjumlahan ".$bil1." dan
".$bil2." adalah ".$result1."</p>";
echo "<p>Hasil pengurangan ".$bil1." dan
".$bil2." adalah ".$result2."</p>";
}else{
echo "Error result..";

Gambar 9.9 Hasil eksekusi aplikasi client web service

226
9.7 Rangkuman
1. SOA atau Service Oriented Architecture adalah sebuah arsitektur yang
merepresentasikan fungsi dalam bentuk layanan. Fungsi menunjukkan
abstraksi aktivitas sesuatu yang secara alami dilakukan oleh
aplikasi/program, individu, dan organisasi. Layanan mengabstraksi
fungsi dan dapat menunjukkan bentuk hubungan yang bermakna antara
dua pihak yang berkomunikasi (peminta dan penyedia layanan).
2. Web service adalah suatu sistem perangkat lunak yang dirancang untuk
mendukung interoperabilitas dan interaksi antar sistem pada suatu
jaringan. Web service menyediakan layanan (dalam bentuk informasi)
kepada sistem lain, sehingga sistem lain dapat berinteraksi dengan
sistem tersebut melalui layanan-layanan (service) yang disediakan. Web
service menyimpan data informasi dalam format XML, sehingga data
ini dapat diakses oleh sistem lain walaupun berbeda platform, sistem
operasi, maupun bahasa compiler.
3. XML adalah singkatan dari eXtensible Markup Language. Bahasa
markup adalah sekumpulan aturan-aturan yang mendefinisikan suatu
sintaks yang digunakan untuk menjelaskan, dan mendeskripsikan teks
atau data dalam sebuah dokumen melalui penggunaan tag.
4. SOAP (Simple Object Access Protocol) adalah standar untuk bertukar
pesan-pesan berbasis XML melalui jaringan komputer atau sebuah jalan
untuk program yang berjalan pada suatu sistem operasi (OS) untuk
berkomunikasi dengan program pada OS yang sama maupun berbeda
dengan menggunakan HTTP dan XML sebagai mekanisme untuk
pertukaran data.
5. WSDL merupakan kependekan dari Web Services Description
Language. WSDL adalah bahasa berbasis XML untuk mendeskripsikan
web services dan bagaimana untuk mengaksesnya. WSDL membantu
konsumer web service untuk memakai/menggunakan layanan web
service. WSDL menspesifikasikan lokasi service dan operasi (methods)
yang disediakan oleh web service.
9.8 Tugas/Soal Latihan
1. Apa yang dimaksud dengan SOA atau Service Oriented Architecture
dan web service? Bagaimana kaitan antara SOA dengan web service?
2. Sebutkan dan jelaskan komponen-komponen yang terdapat dalam SOA!
3. Sebutkan dan jelaskan tiga entitas dalam arsitektur web service dan
jelaskan tiga operasi yang terlibat di dalamnya!
4. Sebutkan dan jelaskan empat layer komponen protokol pada web
service!

227
5.

Bualah sebuah web service sederhana (server dan client) dengan

menggunakan NuSOAP toolkit untuk menyediakan layanan pencarian
data pegawai berdasarkan inputan NIP dan menampilkan data yang
ditemukan. Adapun struktur tabel pegawai yang digunakan dan query
untuk insert data adalah sebagai berikut.
CREATE TABLE `tb_pegawai` (
`nip` VARCHAR(5) NOT NULL,
`nama` VARCHAR(25) NULL,
`bagian` VARCHAR(20) NULL,
`alamat` VARCHAR(50) NULL,
PRIMARY KEY (`nim`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB;
INSERT
VALUES
INSERT
VALUES
INSERT
VALUES

INTO `tb_pegawai` (`nip`, `nama`, `bagian`, `alamat`)

('P0001', Susi Susanti', 'Marketing', 'Denpasar');
INTO `tb_pegawai` (`nip`, `nama`, `bagian`, `alamat`)
('P0002', 'Herliyanti', 'Keuangan', 'Nusa Dua');
INTO `tb_pegawai` (`nip`, `nama`, `bagian`, `alamat`)
('P0003', 'Budi Susanto', 'Inventori', 'Gianyar');

9.9 Daftar Bacaan

1. Erl, Thomas. 2005. Service-Oriented Architecture (SOA): Concepts,
Technology, and Design. New Jersey: Prentice Hall PTR.
2. Richards, Robert. 2006. Pro PHP XML and Web Services. California:
Apress.
3. Mitchell, Lorna Jane. 2013. PHP Web Services. California: OReilly
Media, Inc.
4. Kreger, Heather. Web Services Conceptual Architecture.
http://www.cs.uoi.gr/~pvassil/downloads/WebServices/Tutorials/WebS
ervicesConceptualArchitecture.pdf. Diakses tanggal 26 September 2014

PENUTUP
Buku ajar ini tersusun atas beberapa materi pokok, dimulai dari
pengenalan internet dan teknlogi web, HTML (Hypertext Markup
Language), CSS (Cascading Style Sheet), dasar pemrograman PHP, basis
data dalam pemrograman web dengan MySQL, JavaScript, web CMS
(Content Management System), web framework dengan CodeIgniter dan
web services. Dengan materi-materi pokok yang telah dibahas dalam buku
ajar ini, diharapkan mahasiswa maupun pembaca dapat memperoleh
pemahaman mengenai konsep dasar internet, teknologi web dan
pemrograman web.

DATA DIRI

2.
3.
4.
5.
6.
7.
8.

Nama lengkap (dengan

gelar)
Jabatan fungsional
Jabatan struktural
NIP/NIK/Identitas lainnya
NIDN
Tempat dan tanggal lahir
Alamat rumah
Nomor telepon/faks/HP

9.

Alamat kantor

10.
11.

Nomor telepon/faks
Alamat email
Lulusan yang telah
dihasilkan

1.

12.

13.

228

Mata kuliah yang diampu

I Made Arsa Suyadnya,ST., M.Eng. L/P

Dosen
19851215 201212 1 001
0015128502
Denpasar, 15 Desember 1985
Jl. P. Misol Gang XIII No. 8 Denpasar
081804036010
Program Studi Teknik Elektro,
Fakultas Teknik Universitas
Udayana, Kampus Bukit Jimbaran,
Badung, Bali.
0361-703315
[email protected]
S-1 = 10 orang; S-2 = - orang;
S-3 = - orang
1. Pemrograman Internet
2. Sistem Informasi Geografis
Berbasis Web
3. Basis Data
4. Teknologi Informasi
5. Pemrograman Java dan Teknologi
Bergerak

229