Istilah desain muncul sebagai hasil pola industri masal yang dimiliki serta pemikiran 

modernisme dengan azas spesialisasinya. Secara singkat istilah desain dapat diartikan sebagai 

hasil karya manusia yang harus dapat berfungsi untuk memecahkan suatu masalah (problem 

solving). Pada awalnya desain disebut sebagai seni terapan (applied arts), untuk membedakan 

dengan seni murni (fine arts). Namun setelah perkembangan industri moderen terjadi proses 

sosialisasi yang memisahkan seni terapan menjadi sebuah bidang tersendiri yang dinamakan 

desain. 

 

2. Pengertian WWW (World Wide Web) 

Merupakan kumpulan web server dari seluruh dunia yang berfungsi menyediakan data 

dan informasi untuk digunakan bersama-sama. 

 

3. Pengertian Web 

Fasilitas hypertext yang mampu menampilkan data berupa teks, gambar, suara, animasi, 

dan multimedia lainnya, di mana di antara data-data ini  saling terkait dan berhubungan 

satu dengan yang lainnya. Untuk memudahkan dalam membaca data ini  diperlukan 

sebuah web browser seperti Internet Explorer, Netscape, Opera, maupun Mozilla Firefox. 

 

4. Pengertian Website 

Merupakan tempat penyimpanan data dan informasi berdasarkan topik tertentu. 

Diibaratkan web site ini seperti buku yang berisi topik tertentu. Web Pages (halaman web) : 

merupakan sebuah halaman khusus dari situs web tertentu. Diibaratkan halaman web ini seperti 

halaman khusus dari buku. Homepage : merupakan sampul halaman yang berisi daftar isi atau 

menu dari sebuah situs web. 

 

5. Pengertian Web Design 

Adalah sebuah ilmu yang kompleks dalam hal merencanakan dan memproduksi situs 

web, termasuk di dalamnya tehnical development, struktur informasi, desain visual dan 

penyampaian informasi didalam jaringan internet. 


 

B. Profesi yang berhubungan dengan situs web 

a. Web Programmer 

 b. Web Administrator 

 c. Web Master 

 

C. pemakaian   Web Dewasa ini 

Situs web banyak diperlukan untuk berbagai kepentingan berkaitan dengan 

penyampaian informasi, mulai dari perusahaan besar/ kecil, lembaga pemerintah, pendidikan, 

dunia hiburan dsb. Situs web juga terbukti menjadi media informasi yang diminati karena 

sifatnya yang menarik, interaktif, jangkauannya global dan informasinya up to date. 

 

D. Yang harus dikuasai oleh seorang Web Designer 

 

1. Penguasaan cita rasa seni 

a. Web designer harus mampu menciptakan keindahan di dalam halaman web, sehingga 

pengguna mudah tertarik untuk membaca dan memahami informasi yang ada. 

 

b. Web desainer mampu memilih warna yang baik dan memadukannya dengan warna lain, 

sehingga tercipta perpaduan warna yang serasi namun tidak terkesan menyolok.  

 

c. Web desainer mampu membuat bentuk atau sketsa yang baik dari bentuk dasar halaman 

web. 

 

d. Web designer harus mampu menggabungkan imajinasi atau ide orisinil dengan ide dari pihak 

klien yang memesan desain, sehingga halaman web memberikan nilai tambah bagi pihak klien. 

 

e. Web designer mampu menempatkan komponen multimedia pada bagian-bagian tertentu, 

sehingga halaman web menjadi lebih menarik. 

 

 

 

 


 

2. Penguasaan tool pendukung perancangan web 

 

a. Mampu menggunakan program aplikasi untuk mengatur layout web, seperti ; Ms. Frontpage,  

Macromedia Dreamwweaver, Adobe Go Live, Page maker, dsb. 

 

b. Mampu menggunakan program aplikasi untuk membuat animasi web, seperti ; Macromedia 

Flash, Macromedia Director, Swish, dsb. 

 

c. Mampu menggunakan program aplikasi untuk membuat desain grafis, seperti ; Adobe 

Photoshop, AutoCad, Corel Draw, Adobe Ilustrator, Free Hand, dsb. d. Mampu menggunakan 

program aplikasi untuk mengolah suara. 

 

3. Penguasaan teknik membuat interface web 

 

a. Seorang Web designer harus memiliki wawasan dalam bidang IMK (Interaksi Manusia dan 

Komputer), sehingga dapat membuat desain web yang user friendly.  

 

b. Seorang Web designer harus memahami setiap komponen-komponen dasar pembentuk 

situs web, seperti bahasa HTML, pemakaian   image, multimedia 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

PERTEMUAN – 2 

E. Prinsip-prinsip Web desain 

 

1. Situs web dibuat untuk pengguna 

a. Seorang web designer harus mem-fokuskan desainnya pada kepentingan pengguna. 

b. Harus memertimbangkan karakter pengguna, baik dari latar belakang, budaya,  

pendidikan dan kepentingan yang berbeda. 

 c. Pertimbangan utama dalam perancangan adalah pengguna yang paling banyak. 

 

2. Utility dan Usability 

a. Utility adalah kegunaan atau fungsionalitas web.  

b. Usability adalah sifat situs web yang mendukung kemampuan pengguna dalam 

memanipulasi situs web, sehingga pengguna memperoleh apa yang diperlukan. 

c. Situs web yang dibuat harus mempertimbangkan kedua aspek ini untuk mencapai 

tujuan dari pembuatan situs web. 

 

3. Correctness 

a. Tidak ada kesalahan dalam penulisan script HTML. 

 b. Gambar-gambar yang ditampilkan sesuai yang diharapkan. 

 c. Elemen-elemen yang interaktif (Javascript, CGI dll) dapat berfungsi dengan benar. 

 d. Tidak ada kesalahan dalam sistem navigasi (link yang kosong atau broken link) 

 

4. Batasan Media internet dan web 

Browser 

 a. Rancangan situs web dibuat tidak hanya mendukung satu jenis browser saja. 

 b. Mempertimbangkan setting browser pengguna, sehingga halaman web dapat tampil 

dengan lebih maksimal. 

c. Buatlah situs web dengan teknologi yang compatible dan dapat didownload oleh 

sebagian besar pengguna, sehingga bisa diterima oleh lebih banyak pengguna. 

 

Bandwidth 

d. Membuat halaman yang dapat diload browser secara cepat. 


 

 e. Beberapa tag-tag HTML (khususnya image dan table) ada atribut yang akan 

membantu browser untuk menampilkan halaman web walaupun belum seluruh 

halaman di-load secara lengkap dari web server. 

 f. Menggunakan format citra yang efisien. 

 

5. Situs harus memperhatikan aspek GUI 

a. Harus menggunakan prinsip-prinsip yang telah dikenal oleh pengguna. Baik dari sisi 

simbol, bahasa, warna, icon dsbnya. 

 

b. Harus mudah dipahami pada saat pertama kali pengguna mengunjungi situs web 

ini , sehingga pengguna akan merasa enjoy untuk mengunjungi halaman web 

ini . 

 

6. Struktur Link dan Navigasi 

7. Alat bantu 

8. Tampilan Visual 

9. Kombinasi tampilan, isi, teknologi, kegunaan dan tujuan 

 

F. Unsur-Unsur Website 

1. Domain name 

Domain name atau biasa disebut nama domain adalah alamat permanen situs di dunia 

internet yang digunakan untuk mengidentifikasi sebuah situs atau dengan kata lain domain 

name adalah alamat yang digunakan untuk menemukan situs kita pada dunia internet. Istilah 

yang umum digunakan adalah URL (Uniform Resource Locator). Contoh sebuah URL adalah 

http://www.yahoo.com--dapat juga tanpa www— 

 

a. Generic Domains (.com .edu .gov .mil .org)  

Merupakan domain name yang berakhiran dengan .Com .Net .Org .Edu .Mil atau 

.Gov. Jenis domain ini sering juga disebut top level domain dan domain ini tidak 

berafiliasi berdasarkan negara, sehingga siapapun dapat mendaftar. .com : merupakan 

top level domain yang ditujukan untuk kebutuhan "commercial". .edu : merupakan 

domain yang ditujukan untuk kebutuhan dunia pendidikan (education) .gov : merupakan 


 

domain untuk pemerintahan (government) .mil : merupakan domain untuk kebutuhan 

angkatan bersenjata (military) .org : domain untuk organisasi atau lembaga non profit 

(Organization). 

 

b. Country-Specific Domains (.co.id .ac.id sch.id .co.my) 

Yaitu domain yang berkaitan dengan dua huruf ekstensi, dan sering juga disebut 

second level domain, seperti .id(Indonesia), .au(Australia), .jp(Jepang) dan lain lain. 

Domain ini dioperasikan dan di daftarkan dimasing negara. Di Indonesia, domain-

domain ini berakhiran, .co.id, .ac.id, .go.id, .mil.id, .or.id, dan pada akhir-akhir ini 

ditambah dengan war.net.id, .mil.id, dan web.id. pemakaian   dari masing-masing 

akhiran ini  berbeda tergantung pengguna dan pengunaannya, antara lain 

x .co.id : Untuk Badan Usaha yang mempunyai badan hukum sah .ac.id 

x Untuk Lembaga Pendidikan .go.id : Khusus untuk Lembaga Pemerintahan 

Republik Indonesia .mil.id 

x Khusus untuk Lembaga Militer Republik Indonesia .or.id 

x Untuk segala macam organisasi yand tidak termasuk dalam kategori 

"ac.id","co.id","go.id","mil.id" dan lain .war.net.id 

x untuk industri warung internet di Indonesia .sch.id : khusus untuk Lembaga 

Pendidikan yang menyelenggarakan pendidikan seperti SD, SMP dan atau SMU. 

x web.id : Ditujukan bagi badan usaha, organisasi ataupun perseorangan yang 

melakukan kegiatannya di Worl Wide Web. 

 

2. Hosting 

Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk tempat 

menyimpan berbagai data, file-file, gambar dan lain sebagainya yang akan ditampilkan di situs. 

Besarnya data yang bisa dimasukkan tergantung dari besarnya hosting yang disewa/dipunyai, 

semakin besar hosting semakin besar pula data yang dapat dimasukkan dan ditampilkan dalam 

situs. Hosting juga diperoleh dengan menyewa. Besarnya hosting ditentukan ruangan harddisk 

dengan ukuran MB(Mega Byte) atau GB(Giga Byte). Lama penyewaan hosting ratarata dihitung 

per tahun. Penyewaan hosting dilakukan dari perusahaan-perusahaan penyewa web hosting 

yang banyak dijumpai baik di Indonesia maupun Luar Negri. 

 


 

3. Scripts/Bahasa Program 

Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah dalam situs yang 

pada saat diakses. Jenis scripts sangat menentukan statis, dinamis atau interaktifnya sebuah 

situs. Semakin banyak ragam scripts yang digunakan maka akan terlihat situs semakin dinamis, 

dan interaktif serta terlihat bagus. Bagusnya situs dapat terlihat dengan tanggapan pengunjung 

serta frekwensi kunjungan. Beragam scripts saat ini telah hadir untuk mendukung kualitas situs. 

Jenis jenis scripts yang banyak dipakai para designer antara lain HTML, ASP, PHP, JSP, Java 

Scripts, Java applets dsb. 

 Bahasa dasar yang dipakai setiap situs adalah HTML sedangkan ASP dan lainnya 

merupakan bahasa pendukung yang bertindak sebagai pengatur dinamis, dan interaktifnya situs. 

Scripts ASP, PHP, JSP atau lainnya bisa dibuat sendiri, bisa juga dibeli dari para penjual scripts 

yang biasanya berada di luar negri. Harga Scripts rata-rata sangat mahal karena sulitnya 

membuat, biasanya mencapai puluhan juta. Scripts ini biasanya digunakan untuk membangun 

portal berita, artikel, forum diskusi, buku tamu, anggota organisasi, email, mailing list dan lain 

sebagainya yang memerlukan update setiap saat. 

 

4. Design Web 

Setelah melakukan penyewaan domain dan hosting serta penguasaan scripts, unsur 

situs yang paling penting dan utama adalah design. Design web sangat menentukan kualitas dan 

keindahan situs. Design sangat berpengaruh kepada penilaian pengunjung akan bagus tidaknya 

sebuah web site. Untuk membuat situs biasanya dapat dilakukan sendiri atau menyewa jasa 

web designer. 

 

 Saat ini sangat banyak jasa web designer, terutama di kota-kota besar. Perlu diketahui 

bahwa kualitas situs sangat ditentukan oleh kualitas designer. Semakin banyak penguasaan web 

designer tentang beragam program/software pendukung pembuatan situs maka akan dihasilkan 

situs yang semakin berkualitas, demikian pula sebaliknya. Jasa web designer ini yang umumnya 

memerlukan biaya yang tertinggi dari seluruh biaya pembangunan situs dan semuanya itu 

tergantung kualitas designer. 

 

 

 


 

5. Publikasi 

Keberadaan situs tidak ada gunanya dibangun tanpa dikunjungi atau dikenal oleh 

masyarakat atau pengunjung internet. Karena efektif tidaknya situs sangat tergantung dari 

besarnya pengunjung dan komentar yang masuk. Untuk mengenalkan situs kepada masyarakat 

memerlukan apa yang disebut publikasi atau promosi.  

 

Publikasi situs di masyarakat dapat dilakukan dengan berbagai cara seperti dengan 

pamlet-pamlet, selebaran, baliho dan lain sebagainya tapi cara ini bisa dikatakan masih kurang 

efektif dan sangat terbatas. cara yang biasanya dilakukan dan paling efektif dengan tak terbatas 

ruang atau waktu adalah publikasi langsung di internet melalui search engine-search engine 

(mesin pencari, spt : Yahoo, Google, Search Indonesia, dsb) Cara publikasi di search engine ada 

yang gratis dan ada pula yang membayar. Yang gratis biasanya terbatas dan cukup lama untuk 

bisa masuk dan dikenali di search engine terkenal seperti Yahoo atau Google. Cara efektif 

publikasi adalah dengan membayar, walaupun harus sedikit mengeluarkan akan tetapi situs 

cepat masuk ke search engine dan dikenal oleh pengunjung. 

 

G. Pemeliharaan Web Site atau Situs 

Untuk mendukung kelanjutan dari situs diperlukan pemeliharaan setiap waktu sesuai 

yang diinginkan seperti penambahan informasi, berita, artikel, link, gambar atau lain sebagainya. 

Tanpa pemeliharaan yang baik situs akan terkesan membosankan atau monoton juga akan 

segera ditinggal pengunjung. Pemeliharaan situs dapat dilakukan per periode tertentu seperti 

tiap hari, tiap minggu atau tiap bulan sekali secara rutin atau secara periodik saja tergantung 

kebutuhan (tidak rutin). Pemeliharaan rutin biasanya dipakai oleh situs-situs berita, penyedia 

artikel, organisasi atau lembaga pemerintah. Sedangkan pemeliharaan periodik biasanya untuk 

situssitus pribadi, penjualan/e-commerce, dan lain sebagainya. 

 

 

 

 

 

 

 


 

10 

PERTEMUAN – 3 

A. HTML 

1. 3 Mekanisme WWW bekerja 

a. Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, 

Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW. 

b. Address WWW memiliki aturan penamaan alamat web yaitu URL yang di gunakan sebagai 

standard alamat internet. 

 c. HTML digunakan untuk membuat document yang bisa di akses melalui web 

 

2. HTML 

Hypertext Markup Language merupakan standard bahasa yang di gunakan untuk 

menampilkan document web, yang bisa anda lakukan:  

a. Mengontrol tampilan dari web page dan contentnya. 

 b. Mempublikasikan document secara online sehingga bisa di akses  

c. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi 

secara online. 

d. Menambahkan object-object seperti image, audio, video dan juga java applet 

dalamdocument HTML. 

 

3. Browser 

Browser merupakan software yang di install di mesin client yang berfungsi untuk 

menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya 

Internet Explorer, Netscape Navigator dan masih banyak yang lainnya. 

 

4. Editor 

Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor 

yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad. 

 

5. CSS 

Cascading Style Sheet (CSS) adalah mekanisme sederhana style sheet yang mengijinkan 

desiner dan user untuk menempatkan style, misalnya huruf, warna dan spasi ke dalam dokumen 

HTML. Aturan dalam CSS terdiri atas 2 bagian utama, yaitu:  


 

11 

a. Selektor, yaitu sebuah string yang mengidentifikasi apakah sebuah elemen 

berhubungan dengan aturan yang akan diimplementasikan. Contoh, H1  

b. Deklarasi, yaitu properti misalnya font-size dengan nilai yang sesuai misalnya 12pt. 

Contoh, font-size: 12pt 

 

6. Istilah-istilah dalam HTML 

a. Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan 

tanda lebih kecil ͟͞ (tag akhir).Tag kontainer: <Ŷaŵatag>…..</Ŷaŵetag> 

 

b. Element – Jenis-jenis dari tag. HTML mempunyai banyak elemen untuk berbagai 

keperluan dengan berbagai bentuk pemakaian  .  

 

c. Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen 

biasanya akan mempunyai banyak atribut. 

 

7. pemakaian   komentar: 

Format: <!....> 

Fungsi:  

x Memberi nama aplikasi 

x Mendeskripsikan tujuan pengkodean tertentu di dalam file  

x Memberi nama pengarang  

x Memberi tanggal pembuatan 

x Memberi nomer versi 

x Memberi informasi hak cipta 

 

x Untuk warna latar belakang 

x Untuk heading 

x Untuk paragraph 

x Untuk preformatted text  

x Untuk blockquote  

x Untuk break  


 

12 

x Untuk font 

x Untuk format dokumen  

x Untuk garis pemisah horizontal 

x Untuk list/daftar  

x Untuk memuat gambar 

x Untuk hypertext link  

x Dan lain-lain 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

13 

 

PERTEMUAN – 4 

B. HTML 

 9. Membuat warna latar belakang 

 

 

 

 

 

 

 

 

 

 

10.Membuat warna latar belakang (dengan gambar) 

 

 

 

 

 

 

 

 

 

 

 

 


 

14 

11.Heading (Untuk judul atau sub judul dalam dokumen HTML) 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

12.Paragraf 

 

 

 

 

 

 

 

 

 


 

15 

 

 

 

 

 

13.Membuat Tabel 

 

 

 

 

 

 

Silahkan ketik diantara dan seperti dibawah ini: 

 

 

 

Silahkan ketik diantara dan seperti dibawah ini: 

 

 

 

 

 

Silahkan ketik diantara dan seperti dibawah ini: 

 

 

 

 


 

16 

  

 

 

 

 

 

 

 

 

 

 

14.Preformatted Text 

 

Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML: 

<pƌev>….</pƌev> 

 

15.Blockquote 

 

Untuk menulis kutipan teks: 

<ďlaĐkƋuote>…..</ďlaĐkƋuote> 

 

16.Break 

 

Untuk menulis teks pada baris berikutnya: 

<br> 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

17 

PERTEMUAN – 5 

 

C. HTML 

 

17.Font 

 

 

 

 

 

 

 

18.Format dokumen 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

19.Garis pemisah horizontal 

Garis horisontal untuk memisahkan teks dengan teks lain. 

 

 

 

20.List/Daftar 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

18 

21.Memuat Gambar 

Memuat gambar ke dalam halaman Web 

 

 

 

 

 

 

 

 

 

 

 

 

 

22. Tag Tabel (Table) – layout 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

19 

23.Desain/Layout Halaman 

 

 

 

 

 

 

 

 

 

 

 

 

 

24.Struktur Link 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5.Hypertext Link 

Format: 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

20 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

21 

 

PERTEMUAN – 6 

 

D. HTML 

26.frame & frameset 

x Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan 

x Setiap dokumen ditampilkan dalam sebuah frame 

x Sebuah frameset menentukan tata letak, ukuran, dan banyaknya frame yang akan 

ditampilkan 

x Di dalam frameset boleh ada frameset lain (beranak) 

Skema dasar dokumen frameset : 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

22 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

27.iframe (inline frame) 

 

x Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen lain 

(anak) 

x Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe 

x Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen Skema dasar 

dokumen dengan iframe : 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

23 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

24 

PERTEMUAN- 7 

 

E. HTML 

28.Form 

x Sebuah dokumen interaktif dapat menangani input dari user 

x Analoginya : bahwa dokumen adalah sebuah formulir isian 

x Sebuah dokumen dapat mengandung satu atau beberapa form 

x Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll) 

x Setiap form dapat menghimpun satu atau beberapa elemen input 

x Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input 

x Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani 

data isian yang dikirim (di-submit). 

 

Skema dasar dokumen form : 

 

 

 

 

 

 

 

Contoh sebuah form sederhana untuk meminta nama user : 

 

 

 

 

 

Output : 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

25 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Output : 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

26 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

27 

PERTEMUAN – 8 

 

F. HTML 

29.Karakteristik data input 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

30. Tag input 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

28 

 31. Tag textarea, select, button 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

32.Link pada bidang gambar 

Link dapat didefinisikan pada satu atau beberapa area pada sebuah bidang gambar 

Skema : 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

29 

 

 

 

 

 

 

 

 

 

 

 

33.Pengelompokan elemen dokumen 

x Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan 

untuk menambahkan struktur lojik pada dokumen 

x Pengelompokkan ada dua jenis : 

 

 

 

x <div> dan <span> biasanya digunakan dengan parameter id dan class 

x Struktur lojik ini dapat digunakan untuk :  

- mempermudah menginterpretasi isi dokumen 

-  memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

30 

PERTEMUAN – 9 

 

G. CMS (Content Management System) 

Secara sederhana dapat dikatakan bahwa Content Management System (CMS) adalah 

suatu sistem yang dapat mengelola seluruh isi dan tampilan suatu website. Untuk mengerti 

secara lebih mendalam mengenai CMS, perlu diketahui : 

 

1. Pengertian dari Content atau Isi  

2. Maksud dari kata management, dan  

3. Apa yang dimaksud dengan Sistem 

 

1. Apa itu content 

Content secara esensi adalah setiap jenis informasi digital yang digunakan untuk 

mengisi setiap halaman. Dapat berupa teks, gambar, animasi, suara dan lain-lain. Atau 

dengan kata lain semua hal yang akan diperlihatkan ke publik melalui internet, intranet 

atau extranet. 

 

2. Apa itu Content Management ? 

Content Management atau pengelolaan isi suatu website adalah penggabungan 

aturan, proses dan alur kerja oleh webmaster atau sistem terdistribusi, sehingga pemilik 

atau penyumbang isi dapat membuat, mengubah serta mem-publish seluruh isi halaman 

sesuai dengan aturan system. 

 

3. Apa itu Content Management System ? 

Sistem itu sendiri dijelaskan sebagai suatu alat atau gabungan dari alat yang 

efisien, efektif dan memudahkan pembuatan halaman web menggunakan sistem 

pengelolaan isi website. Kesimpulannya dapat dikatakan bahwa CMS adalah suatu alat 

yang dapat memusatkan kemampuan teknis dan menyebarkan kemampuan nonteknis 

kepada anggota tim untuk membuat, mengubah, mengelola dan mem-publish sejumlah 

isi website seperti teks, gambar, animasi, suara dan lain-lain dengan aturan, proses dan 

alur kerja yang sudah baku sehingga website dapat terlihat sesuai keinginan. 

 

4. Mengapa Kita Membutuhkan CMS ? 

Teknologi dan metode lama untuk membangun halaman web tidak hanya 

menghabiskan banyak waktu tetapi juga tidak efisien dan biaya yang besar. Contohnnya, 

mengubah kata pada halaman web dengan metode lama harus dilakukan oleh 

seseorang yang mengerti HTML. Proses ini bukan hanya menghambat seluruh 

pembuatan informasi dan isi oleh webmaster tapi juga tidak efektif karena banyak 

waktu terbuang. Keinginan untuk meningkatkan jumlah informasi dalam website dan 

kebutuhan untuk menggabungkan sistem menjadi lebih besar dan kompleks ke dalam 

proses web 

 

publishing telah mengubah situasi ini ke suatu kesimpulan bahwa tim pengelola 

website tidak lagi dapat menampung permintaan yang terus meningkat. Situasi ini tidak 

berbeda jauh dengan keadaan di tahun 60-an ketika kita masih menggunakan mesin 

ketik untuk membuat dokumen. Kenyataannya setelah itu menyebabkan dibuatnya 

sistem pengolah kata. Dengan situasi yang sama, akhirnya banyak yang menyadari 


 

31 

keuntungan menggunakan sistem CMS. Perusahaan yang tidak memilih untuk 

mempelajari teknologi baru ini akan ketinggalan, sama seperti dulu ketika banyak yang 

enggan mempelajari sistem pengolah kata dibanding menggunakan mesin ketik manual. 

Websitenya akan menjadi terhambat, ketinggalan berita dan jarang ter-update. Efeknya 

terlihat ketika pengujung tidak lagi mau mengakses website yang informasinya itu-itu 

saja. 

 

5. Keuntungan Menggunakan CMS 

 

Dengan CMS, informasi yang ditampilkan secara online tetap up-todate, 

konsisten dan mempunyai nilai informasi terkini. Seperti berbagai situs berita di 

internet, informasi dikirim dari detik-ke-detik dan pengunjung dapat melihat berita 

paling baru yang jauh lebih fresh dibanding koran yang terbit pada hari yang sama. 

Efeknya dapat terasa saat meningkatnya kepercayaan dan kepuasan pengujung dengan 

memberikan informasi yang konsisten dan benar, juga meningkatnya nilai persepsi 

positif terhadap informasi yang tersedia. 

 

Beberapa keuntungan lain seperti di bawah ini :  

- Menambah berita atau artikel dapat dilakukan dari mana saja oleh member atau 

user yang diberi hak untuk mem-posting berita. 

- Webmaster dapat lebih konsen pada sisi teknologi nya saja, sedangkan konten atau 

isi dapat diberikan wewenang nya kepada user tertentu. 

- Dengan CMS artikel dan berita dapat diatur berdasarkan criteria tertentu, 

masingmasing pemilik berita bertanggung jawab dengan informasi yang mereka 

kirim ke website  

- Pemilik website memegang kendali penuh terhadap isi dan tampilan website 

- CMS didesain untuk pemilik website yang tidak memiliki keahlian teknis 

pemrograman 

 

 6. Masa Depan CMS 

 

Konsep Content Management System akan semakin banyak digunakan. 

Publikasi suatu artikel akan semakin cepat karena sifatnya yang dinamis. Makin banyak 

CMS yang bersifat Open Source membuatnya semakin popular. Beberapa CMS bahkan 

mempunyai varian yang semakin lama semakin diffrensiasi, cenderung mengarah ke 

simplikasi pengelolaan yang semakin membaik. Tidak sedikit CMS yang bersifat 

komersial. Tentunya hal ini akan semakin menguatkan posisi CMS yang juga bermain di 

sisi enterprise, sebagai engine website-website kelas berat. Di masa depan harga CMS 

komersial akan semakin murah dan terstandarisasi. Semakin lama CMS akan semakin 

konsisten, professional dan jenisnya akan semakin banyak dan lebih spesifik seperti 

hypermedia, penanganan dokumen elektronik, software engineering, marketing dan 

desain bisnis proses. 

 

 

 

 

 

 


 

32 

PERTEMUAN – 10 

 

H. CMS (Content Management System) 

 

1. Pengenalan Joomla 

Joomla adalah sebuah Content Managemen System yang dapat digunankan oleh siapa 

saja untuk keperluan pembuatan website, mulai dari yang sangat sederhana sampai dengan 

website yang sangat kompleks. Berikut beberapa jenis website yang dapat dibangun dengan 

Joomla. 

½ Website corporate atau portal  

½ Website e-commerce 

½ Website untuk perusahaan kecil  

½ Website untuk organisasi Non-profit 

½ Website untuk Pemerintah 

½ Website untuk keperluan internet  

½ Website untuk sekolah dan Perguruan Tinggi 

½ Website Pribadi atau blog 

½ Website untuk komunitas dan portal  

½ Website untuk majalah, koran, dan tabloid, dll 

 

 

Begitu banyak aplikasi yang dapt ditangani oleh Joomla, tak heran kalau Joomla menjadi 

pilihan banyak orang dalam pembuatan website-nya. Di samping itu, Joomla juga mudah di 

installasi, mudah dalam pengelolaannya dan dapat dimodifikasi sesuai kebutuhan kita. Oleh 

karaen itu Joomla mempunyai prinsip, fleksibel, simple, elegant, customizable, dan powerful. 

Joomla merupakan pengembangan dari open source project Mambo, yang dahulu sering disebut 

sebagai Mambo Open Source atau MOS. Mambo sebenarnya dikembangkan oleh sebuah 

perusahaan yang bernama Miro. Miro memberikannya kepada komunitas open source 

(komunitas pengembang) sebuah variant WCMS yang gratis untuk dikembankan. Setelah 

menyerahkannya pada komunitas, MOS berkembang dengan baik. Pada bulan Agustus 2005 

terjadi perselisihan prinsip antara pihak komunitas pengembang MOS dengan MIRO. Akibat 

perbedaan prinsip ini, beberapa orang tim MOS keluar dari project ini  dan akhirnya 

membentuk project open source baru yang diberi nama Joomla. Kata Joomla sendiri diambil dari 

kata Jumla, bahasa Suaheli dari penduduk Kenya dan Tanzania di benua Afrika yang berarti ͞all 

this together͟. 

 

 

 

 

 

 

 

 

 

 

 

 


 

33 

 

2. Struktur File dan Direktori Joomla 

 

Pada bagian ini kita belajar tentang struktur file dan direktori yang digunakan oleh 

Joomla. Seperti kita ketahur Joomla adalah sebuah website content management yang 

powerfull, maka sudah pasti mempunyai banyak file dan direktori. 

 

a. Struktur File 

 

File yang kita bahas adalah file-file penting yang terletak di root direktori server Joomla, 

yaitu : Index.php, merupakan file utama untuk menampilkan halaman web Joomla. Beberapa 

pengaturan joomla terdapat pada file ini. Jika kita mengakses file ini, berarti kita membuka 

halaman depan website Joomla. 

 

 Misalnya www.lintau.com/index.php. Configuration.php, merupakan file yang 

terbentuk saat kita melakukan proses instalasi Joomla. Pada file ini terdapat pengaturan untuk 

koneksi ke database, dan pengaturan penting lainnya. Jika file ini rusak, website Joomla tidak 

akan berfungsi. Copyright.php, file ini berisi tentang hak cipta website CMs Joomla, walaupun 

sebenarnya lebih tepat disebut copyleft. License.php, file ini berisi informasi tentang lisensi 

website CMS Joomla Mainbody.php, ini merupakan file pendukung yang sangat penting dalam 

mengatur tampilan berita di website.Joomla. Pathway.php, sebuah file yang berfungsi untuk 

menggmbarkan urutan proses aplikasi yang ada di Joomla. 

 

 

b. Struktur Direktori 

 

Joomla mempunyai beberapa direktori yang mempunyai fungsi tersendiri. Setiap 

direktori mempunyai subdirektori dan file-file pendukung sesuai fungsinya. Berikut ini adalah 

struktur direktori Joomla. 

 

x Administrator, ini merupakan direktori khusus administrator untuk keperluan 

pengelolaan website Joomla. Mulai dari proses installasi modul, komponen. 

Mambot, bahasa sampai dengan proses maintenance web secara keseluruhan. 

x Cache, sebuah direktori khusus yang berfungsi untuk menyimpan data 

sementara di computer pengguna, tujuannya adalah mempercepat proses 

loading web jika dibuka pada waktu lain fungsinya sama dengan memori 

computer. 

x Components, merupakan direktori tempat menyimpan seluruh komponen yang 

terinstall di website Joomla. 

x Editor, sebuah direktori yang berfungsi untuk menyimpan berbagai editor yang 

diinstall pada website Joomla. 5. Help, sebuah direktori khusus untuk 

menampilkan bantuan jika kita menemukan Kendala dalam menggunakan 

Joomla. 

x Images, adalah direktori tempat menampung file-file gambar guna keperluan 

website Joomla. 

x Includes, ini merupakan direktori pendukung bagi aplikasi joomla yang lainnya. 


 

34 

x Installation, direktori yang digunakan dalam proses installasi website Joomla. 

Jika proses installasi selesai, direktori ini sebaiknya dihapus, untuk 

mempertimbangkan keamanan web dimasa dating 

x Language, sebuah direktori khusus untuk menampung jenis-jenis bahasa yang 

dapat digunakan di website yang multi bahasa. 

x Mambots, sebuah direktori untuk menampung tool tambahan dari Joomla, 

Misalnya, mos images, mos pagebreak,dll 

x Media, sebuah direktori yang diperuntukkan untuk menyimpan dan 

mengupload filefile ke dalam website Joomla, baik file gambar maupun teks. 

x Modules, tempat menyimpan modul-modul yang terinstal di website Joomla. 

x Templates, tempat menyimpan semua template yang terinstal di website 

Joomla. 

 

 

c. Istilah-Istilah Penting Pada Joomla 

 

Banyak istilah-istilah yang kedengaran baru, jika kita betul-betul pemula dengan 

Joomla. Agar pemahaman kita terhadap Joomla lebih mudah, berikut ini diberikan 

penjelasan terhadap beberapa istilah yang akan sering digunakan nantinya. 

 

x Module, adalah bagian unit fungsi dari Joomla yang berguna untuk 

menampilkan fiturfitur utam Joomla serta menampilkan beberapa 

komponen terkait. Secara default, Joomla telah menyediakan be berapa 

modul, seperti modul banner,menu, login, newsfeed, statistic, 

arsip,sindikasi, polling dan lain sebagainya serta modul yang disediakan 

oleh pihak ketiga. 

x Component, adalah sebuah aplikasi yang menambah nilai guna Joomla. 

Sebuah component mempunyai konfigurasi di bagian jendela 

administratornya. Misalnya komponen weblink, content form, polling 

dan lain sebagainya 

x Mambots, sebuah unit fungsi Joomla yang disisipkan unutk 

memanipulasi ataupun menterjemahkan konten yang diproses sebelum 

ditaŵpilkaŶ.Seperti,Maŵďotseditor,Mosiŵage,dsď… 

x Template, sebuah aplikasi yang berfungsi untuk mengatur tampilan 

website Joomla secara keseluruhan. Template ini mirip dengan istilah 

Theme di Windows atau skin di Winamp. Pada template ini diatur 

sedemikian rupa sehingga website dapat tampil sesuai keinginan kita 

x Content, semua berita/artikel/module/komponen yang terdapat dalam 

website secara keseluruhan 

 

 

 

 

 

 

 

 


 

35 

3. Aplikasi Pendukung Joomla 

 

Seperti telah kita bahas di awal, joomla adalah salah satu website bersifat Content 

Management System (CMS) yang sangat banyak digunakan saat ini. Sebagai suatu CMS yang 

berlisensi GNU(General Public License) http://www.gnu.org/copyleft/gpl.html#SEC1, semua 

aplikasi pendukungnya adalah aplikasi berlisensi yang sama. Berikut ini adalah aplikasi 

pendukung yang mutlak ada sebelum Joomla diinstal pada computer Anda. 

 

a. Aplikasi PHP, aplikasi PHP mutlak diperlukan karana Joomla sendiri dibuat 

menggunakan bahasa pemrograman PHP. Aplikasi PHP ini dapat anda download di 

website resminya, www.php.net. Untuk langsung menuju ke link download-nya, silakan 

saja buka url: http://www.php.net/downloads.php. 

 

 

 

 

 

 

 

b. Web Server Apache, karena Joomla menggunakan bahasa pemrograman PHP, 

diperlukan sebuah server untuk mendukung aplikasi ini . PHP adalah bahasa 

pemrograman web bersifat server side. Aplikasi server yang dibutuhkan oleh Joomla 

adalah Apache. Silahkan download di alamat www.apache.org. Sedangkan link 

downloadnya dapat anda dapat akses pada http://httpd.apache.org/download.cgi. 

 

 

 

 

 

 

 

c. Database MySQL, yang merupakan pilihan Joomla tempat menyimpan seluruh 

content web. MySQL merupakan Relational Database Management System yang 

berlisensi GNU/GPL dan dapat di download secara gratis di www.mysql.com. Sedangkan 

link downloadnya, dapat anda akses pada http://dev.mysql.com. 

 

 

 

 

 

 

 

Pastikan semua aplikasi di atas sudah anda download dan telah terinstal dengan 

baik di computer anda. Jika anda mendownload file ini  secara satu per satu, 

artinya kita juga menginstal secara satu per satu. Namun untuk memudahkan, saat ini 

banyak juga beredar software ini  yang bersifat multi aplikasi, artinya dengan sekali 

install, ketiga aplikasi pendukung langsung terinstal dan terkonfigurasi dengan baik. 

Aplikasi ini  adalah PHPTRIAD, WAMP, (Window Apache Mysql dan PHP), LAMP 


 

36 

(Linux Apache Mysql dan PHP), XAMPP, EasyPHP, Dongkrak. Semua aplikasi ini dapat 

digunakan di Joomla, namun perhatikan versinya. Yang terbaik tentu aplikasi dengan 

versi yang lebih baru dan stabil. Dalam modul ini kita akan menggunakan software 

WAMP. 

 

 

 

 

PERTEMUAN – 11 

 

I. CMS (Content Management System) 

 

4. Instalasi Joomla 

a. Buka program Internet Explorer, ketikkan alamat website Joomla pada address bar, 

yaitu www.joomla.org, lalu klik enter. 

 

b. Lihat pada menu di sebelah kiri bawah website, menu ini  adalah menu untuk 

mendownload file package Joomla versi 1.0.13. Lalu dobel klik pada menu ini . 

 

 

 

 

 

 

 

 

 

 

c. Lakukan download kemudian simpan file ke direktori lokal Anda 

 

d. Ekstrak file package Joomla dari direktori di atas ke dalam folder yang telah anda buat 

 

e. Setelah folder Joomla telah ter-Ekstrak ke dalam folder tadi, lalu ketikkan perintah 

͞localhost/joomla͟ pada Address Bar Internet Explorer, dan tekan Enter 

 

f. Selanjutnya akan muncul tampilan layar seperti di bawah ini, pilih Next 

 

 

 

 

 

 

 

 

 

 


 

37 

g. Setelah itu, pilih Next pada tampilan layar sebagai berikut 

 

 

 

 

 

 

 

h. Lalu isi kotak isian yang telah disediakan. Kotak isian ͞Host Name͟ diisi dengan 

͞Localhost͟, kotak isian ͞MySQL User Name͟ diisi dengan nama user dari MySQL, kotak 

isian ͞MySQL Password͟ diisi dengan password dari MySQL, dan kotak isian ͞MySQL 

Database Name͟ diisi dengan nama folder tempat kita meng-ekstrak file Joomla tadi. 

Sedangkan kotak isian yang terakhir tidak perlu kita ubah 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

i. Isikan nama website yang kita inginkan pada kotak isian yang disediakan, lalu pilih 

Next 

 

 

 

 

 

 

 

 

 

 

 

 

 

j. Pada tampilan selanjutnya, akan muncul beberapa kotak isian. Kotak isian ͞URL͟ dan 

͞Path͟ tidak perlu diubah, karena akan mengubah semua settingan direktori dari 


 

38 

Joomla. Kotak isian ͞Your E-mail͟ diisi alamat e-mail kita, dan ͞Admin Password͟ diisi 

dengan password yang akan kita gunakan pada saat login sebagai administrator. Default 

password yang terdapat pada kotak isian ͞Admin Password͟ dapat kita ubah sendiri 

sesuai keinginan agar mudah kita ingat. 

 

 

 

 

 

 

 

 

 

 

 

k. Berikutnya akan tampil jendela yang memberitahukan bahwa anda telah sukses 

menginstall Joomla. 

 

 

 

 

 

 

 

 

 

 

 

 

 

Pada jendela di atas terdapat username dan password yang harus anda ingat untuk 

membuka jendela Control Panel dari Joomla. 

 

I. Setelah selesai, tutup jendela ini  dan buka jendela explorer baru. Hapus folder 

͞Installation͟ yang terdapat di dalam folder Joomla yang telah kita buat tadi.  

 

m. Setelah itu ketikkan alamat / URL Control Panel Joomla 

(contoh,http://localhost/joomla/administrator) kita pada address bar dan tekan Enter 

  

n. Setelah itu, akan keluar tampilan Login untuk masuk pada jendela Control Panel 

Joomla. Masukkan username dan password yang tadi telah kita setting, lalu klik Login. 

 

 


 

39 

 

 

 

 

 

 

 

o. Dan jendela Control Panel akan terbuka. Disini anda dapat mengedit apa saja tentang 

website joomla anda 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

40 

 

PERTEMUAN – 12 

 

J. CMS (Content Management System) 

 

5. Instalasi Template Joomla 

 

a. Login pada joomla yang telah kita install sebagai administrator.  

b. Dari halaman administrator, pilih menu Installer > Template – Site 

 

 

 

 

 

 

 

 

 

 

 

c. Kemudian muncul jendela Installer > Template-Site seperti gambar sebagai berikut : 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

41 

 

d. Klik Browse untuk memilih template yang telah di download. Perhatikan gambar 

berikut : 

 

 

 

 

 

 

Kemudian klik Upload File & Install. Perhatikan gambar berikut : 

 

 

 

 

 

 

 

 

 

Pesan Upload template – Success menandadakan proses upload dan installasi template 

telah berhasil. 

 

e.KeŵudiaŶklikCoŶtiŶue… 

 

f. Untuk mengaktifkan template, Login sebagai administrator pada Joomla yang telah 

diinstal, pilih menu Site > Template Manager > Site Templates. Perhatikan gambar 

berikut : 

 

 

 

 

 

 

 

 

 

 

 

 

g. atau dengan ĐaraklikCoŶtiŶue…setelahprosesiŶstalasiteŵplateďaruselesai. 

 

h. Setelah muncul halaman Template Manager, klik option di sebelah kiri template yang 

diinginkan, kemudian klik tombol default. Perhatikan gambar beserta keterangan 

berikut ini 

 


 

42 

 

 

 

 

 

 

 

 

 

Status pada keterangan gambar di atas, menandakan bahwa template mana yang 

dijadikan template default pada Joomla.Pada keadaan di atas dapat dijelaskan bahwa 

sgspringtime telah di pilih sebagai template joomla. Buka halaman web anda untuk 

melihat hasil akhirnya. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

43 

PERTEMUAN – 13 

Dasar Pemrograman PHP 

Pemrograman berbasis web dengan PHP 

 

PHP, 'PHP: Hypertext Preprocessor', merupakan bahasa pemrograman web dinamis layaknya 

ASP, JSP, Perl dan sebagainya. Lalu mengapa harus menggunakan bahasa pemrograman, apa HTML saja 

tidak cukup ? Ya, tentu saja HTML tidak cukup, salah satunya adalah karena sifat HTML yang statis. 

HTML hanya berguna untuk desain, saat kita browsing, maka yang kita lihat itu sebenarnya adalah 

interprestasi dari HTML. Sebagai contoh saat kita menggunakan YahooMail untuk mengirim email, maka 

tampilan yang dapat kita lihat ini  merupakan interprestasi dari HTML, sedangkan untuk dapat 

mengirim email, digunakan bahasa pemrograman web seperti PHP. 

 

Disini kita anggap HTML statis, sedang PHP dinamis. Sebelumnya kita harus menyamakan persepsi 

mengenai dinamis disini, yang dimaksud dinamis disini bukannya web yang dapat gerak-gerak, tetapi 

dinamis berarti web yang dapat diubah-ubah tanpa mengubah langsung kedalam file webnya. PHP akhir-

akhir ini semakin populer, jutaan web didunia menggunakannya, hal ini disebabkan oleh berbagai 

keunggulan PHP, diantaranya kemudahannya untuk dipelajari, gratis, kecepatan yang dapat diandalkan, 

dan sebagainya. 

 

PHP HELLO WORLD 

Kode PHP dapat disatukan dengan kode HTML sehingga mempermudah pemrogram dalam pengerjaan 

web. Sekarang kita akan membuat halaman php pertama kita. 

 

 

 

 

 

 

 

 

 

 

 

Ketik dan simpan script diatas dengan nama hello.php pada folder htdocs apache anda. Panggil 

script php anda menggunakan browser dengan url : http://localhost/hello.php 

 

 

 

 

 

 

 

 

 

 


 

44 

Dari script diatas dapat kita ketahui bahwa script php diawali tengan tanda <? dan diakhiri dengan ?> , 

tanda ini  untuk memisahkan antara script php dan script html. Script yang berada didalam tanda 

<? dan ?> akan dieksekusi sebagai script php. Echo, di PHP berfungsi untuk menuliskan sesuatu ke 

browser. Saat hello.php kita browse dan dilihat sourcecode-nya maka akan tempil seperti dibawah ini: 

 

 

 

 

 

 

 

 

 

 

 

Hal ini berarti bahwa user yang mem-browse script php hanya akan melihat scriptnya sebagai script 

html, sedangkan script php-nya tidak terlihat. Berbeda dengan HTML, script PHP membedakan antara 

huruf besar dan huruf kecil, karenanya kita harus berhati-hati dalam penulisan script PHP. 

 

Sebaiknya kita selalu menuliskan script PHP dalam huruf kecil, karena lebih enak dibaca dan cenderung 

konstan sehingga kemungkinan salahnya lebih kecil. 

 

Variabel, Konstanta dan Tipe data dalam PHP 

VARIABEL 

Variabel didalam PHP dinyatakan dengan tanda $ diikuti nama variabel, pada PHP variable tidak perlu 

dideklarasikan, sehingga mempermudah untuk programmer pemula. Misalnya kita ingin menyimpan 

nilai Pi kedalam variabel $Pi , maka kita tinggal menuliskan $pi = 3.14; pada script PHP. 

 

KONSTANTA 

Konstanta fungsinya hampir sama dengan variabel, hanya saja nilai konstanta selalu tetap, tidak 

bisa diubah-ubah. Untuk mendefinisikan konstanta digunakan fungsi define(). Nilai Pi yang disimpan 

dalam variabel $pi diatas sebenarnya lebih cocok bila disimpan dalam konstanta, karena nilai Pi selalu 

tetap. 

define("pi", 3.14); 

 

TIPE DATA 

PHP mengenal berbagai macam tipe data, mulai dari integer, float, string, array, dan object. Tipe data 

integer meliputi semua bilangan bulat, float meliputi semua bilangan pecahan, string untuk karakter 

atau kumpulan karakter, array untuk kumpulan data, sedangkan tipe data object untuk pemrograman 

berorientasi object yang tidak akan kita bahas lebih jauh pada buku ini. 

 

Tipe data string harus selalu diapit tanda petik tunggal atau tanda petik ganda. Coba perhatikan script 

hello.php, pada baris echo "...."; terdapat kumpulan karakter yang diapit tanda petik, kumpulan karakter 

ini  bertipe data string. Dalam PHP kita akan sering menggunakan tipe data array. Tipe data array 

digunakan untuk menyimpan banyak data dalam satu variabel, sebagai contoh untuk memasukkan 

daftar siswa kedalam suatu variabel, perhatikan script dibawah : 


 

45 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Anda tidak perlu khawatir jika belum tahu maksud dari perintah for dari script diatas, kita akan 

membahasnya pada bab berikutnya. Pada script diatas pertama-tama dimasukkan data siswa kedalam 

variabel array $siswa, kemudian ditampilkan nilainya kebrowser. Lebih jauh kita akan membahas tipe 

data array pada bab-bab berikutnya. 

 

VARIABEL DARI FORM HTML 


 

46 

Untuk mengirimkan variabel dari satu halaman ke halaman lainnya atau kehalaman itu sendiri biasa 

digunakan form HTML. Form HTML akan mengirimkan variabel ke webserver, sehingga di webserver 

variabel ini  menjadi input yang akan diolah oleh script PHP yang anda buat. Berikut adalah contoh 

pemakaian   variabel dalam form : 

 

 

 

Ketik dan simpanlah ke form_variabel.php, kemudian coba isi formnya dan klik tombol submit, amati 

apa yang terjadi


 

47 

 

 

 

 

 

 


 

48 

 

 

Saat tombol submit diklik, form akan mengirim variabel ke file tujuan yang tertera pada atribut 

action pada form. Karena pada script diatas atribut action menunjuk ke form_variabel.php (file itu 

sendiri) maka variabel dikirim ke file form_variabel.php. File form_variabel.php mengirim beberapa 

variabel, yaitu variabel $nama, email, $alamat, $pesan, dan $submit, yang kemudian variabel-variabel 

ini  dicetak apabila tombol submit sudah diklik. Apabila tombol submit sudah diklik, maka variabel 

$submit akan bernilai TRUE, hal ini digunakan untuk mengecek apakah tombol submit sudah diklik atau 

belum. 

 

OPERATOR dan STATEMENT 

OPERATOR 

Operator berguna untuk melakukan suatu operasi pada suatu nilai. Operator di PHP sangatlah umum 

sehingga mudah untuk dipahami. Disini kita akan membahas operator yang sering digunakan. 

Operator Aritmatika 

$x + $y ; //untuk penjumlahan 

$x - $y ; //untuk pengurangan 

$x * $y ; //untuk perkalian 

$x / $y ; //untuk pembagian 

$x % $y ; //untuk sisa hasil bagi 

Operator Assignment 

$x = $y ; 

$x += 1; //sama dengan $x = $x + 1; 

$x -= 1; //sama dengan $x = $x - 1; 

$x *= 1; //sama dengan $x = $x * 1; 

$x /= 1; //sama dengan $x = $x / 1; 

 


 

49 

Operator Perbandingan 

$x == $y; //sama dengan, jika $x sama dengan $y akan menghasilkan TRUE, jika 

tidak sama menghasilkan FALSE 

$x === $y; //identik 

$x != $y; //tidak sama dengan 

$x < $y; //lebih kecil dari 

$x > $y; //lebih besar dari 

$x <= $y; //lebih kecil atau sama dengan 

$x >= $y; //lebih besar atau sama dengan 

 

Operator Increment dan Decrement 

$x++; //operasi dilaksanakan, baru nilai $x ditambah satu 

$x--; //operasi dilaksanakan, baru nilai $x dikurang satu 

++$x; //sama dengan nilai $x ditambah satu baru operasi dijalankan 

--$x; //sama dengan nilai $x dikurang satu baru operasi dijalankan 

 

STATEMENT 

Statement digunakan untuk mengontrol alur program. Beberapa statement PHP diadopsi dari 

bahasa C, sehingga bagi anda yang sudah pernah menggunakan C akan jauh lebih mudah dalam 

memahami statement di PHP. Pada bab ini hanya akan dibahas sekilas mengenai statement, lebih dalam 

kita akan melanjutkannya bersamaan dalam pembuatan aplikasi. 

 

Statemenet if 

if, yang berarti jika, digunakan untuk mengecek apakah suatu syarat dalam if terpenuhi, apabila 

dipenuhi maka suatu operasi dilakukan, perhatikan contoh dibawah : 

 

Statement if .. else 

Seperti halnya statement if, statement if .. else akan mengecek apakah syarat pada if terpenuhi, jika ya 

maka operasi dibawah if dilakukan, jika tidak maka operasi yang dibawah else yang dilakukan. 

 

Statement switch 

Statement switch digunakan untuk membandingkan syarat dengan berbagai nilai. 

 

 

 

 

 


 

50 

 

While Loop 

While, akan mengeksekusi suatu perintah secara berulang-ulang, sampai kondisi pada while tidak 

terpenuhi. 

 

 

Program ini  akan menuliskan nilai hingga i lebih besar dari 10. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

51 

For Loop 

For digunakan untuk looping dengan memasukkan nilai awal, selama syaratnya terpenuhi. 

Bentuk umum For adalah sebagai berikut : 

 

 

syarat1 merupakan nilai awal, dijalankan sekali saat operasi loop dilakukan. 

syarat2 merupakan kondisi yang selalu dicek setiap looping, apabila syarat terpenuhi maka operasi 

dilakukan dan mengeksekusi syarat3, jika tidak maka looping berhenti. Syarat 1 hingga 3 diatas tidak 

harus diisi, anda bisa mengosongkannya. 

Perhatikan contoh berikut:

 

 

Pada saat looping akan dijalankan, nilai $i diset menjadi 0; kemudian dicek apakah syarat kedua 

memenuhi, jika ya maka operasi echo dilakukan kemudian nilai $i dinaikkan 1 (syarat3 : 

$i++),jika tidak looping berhenti. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

52 

 

FUNGSI 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

53 

Perhatikan program diatas! Program diatas menghitung nilai x1 dan x2 dari suatu nilai a, b, c 

yang dimasukkan, kemudian menuliskan hasilnya ke browser. Operasi ini  dilakukan berulang kali, 

dan anda harus menuliskannya sebanyak data yang ingin anda hitung, hal ini tentu saja sangat tidak 

efisien, karenanyalah di PHP terdapat fungsi. Fungsi berguna untuk mengumpulkan operasi, yang dapat 

menerima masukan(input) dan mengeluarkan output. Fungsi akan sangat membantu dalam 

pemrograman berskala besar, karena fungsi yang pernah dibuat dapat dipakai kembali(reusable). 

Program diatas dapat disederhanakan menggunakan fungsi sbb: 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Program diatas melakukan operasi persis sama dengan program sebelumnya. Coba perhatikan 

pemanggilan fungsi hitung_abc() yang pertama! Pemanggilan fungsi disertai pemasukan argumen 

sebagai input, yaitu untuk argumen variabel $a dimasukkan nilai 2, $b dimasukkan nilai 3, $c 

dimasukkan nilai 1. Sehingga pada fungsi hitung_abc() akan dihitung rumus abc dari ketiga masukan 

tadi.