DAFTAR ISI
Internet adalah gabungan dari banyak jaringan-jaringan komputer yang terhubung secara global,
mulai dari jaringan komputer pribadi perseorangan, perusahaan, pendidikan, hingga pemerintahan.
Internet digunakan untuk saling bertukar informasi antara sebuah komputer dengan komputer lainnya
di berbagai belahan dunia dengan sangat cepat.
Cikal bakal internet berasal dari sebuah proyek yang dilaksanakan oleh DARPA (Defense Advanced
Research Project Agancy), sebuah agensi dari departemen pertahanan Amerika Serikat pada tahun
1958. Proyek ini bertujuan untuk menghubungkan komputer-komputer yang terdapat pada setiap
markas militer tentara Amerika Serikat sehingga proses komunikasi dan manajemen informasi dapat
terlaksana dengan lebih baik. Jaringan komputer antar markas tersebut dikenal dengan nama ARPANET.
Melihat kesuksesan dari ARPANET dalam mempercepat proses komunikasi jarak jauh, dunia bisnis
mulai tertarik dan berusaha untuk membuat jaringan yang serupa. Pada Maret 1976, ITU (International
Telecommunication Union), sebuah organisasi internasional yang berfungsi untuk mengatur standar
komunikasi, meresmikan sebuah protokol yang dinamakan X.25. Protokol ini berfungsi untuk
menetapkan standar komunikasi antar komputer melalui kabel telepon. Protokol ini pertama kali
digunakan oleh Kantor Pos Inggris, Western Union, dan Tymnet pada tahun 1978.
Dalam waktu singkat, protokol X.25 berkembang dengan pesat dan mulai menjangkau konsumen
pribadi pada tahun 1979. Walaupun begitu, layanan yang disediakan hanyalah berupa layanan surat
elektronik (e-mail) dan papan pesan (BBS/Bulletin Board System).
Sekitar tahun 1980, protokol TCP/IP telah berkembang menjadi sebuah protokol standar yang
dapat digunakan oleh setiap komputer, dan secara efektif telah menggeser protokol-protokol
komunikasi lainnya yang pada saat itu saling berbeda-beda tergantung dari masing-masing produsen
komputer. Walaupun begitu, proses komunikasi yang terjadi antara satu komputer dengan komputer
lainnya masih bersifat terbatas dan internal saja.
Internet yang seperti dikenal sekarang ini dipelopori oleh seorang ahli fisika dari Inggris yang
bernama Tim Berners-Lee dari CERN, sebuah lembaga penelitian tenaga nuklir Eropa. Pada awalnya ia
ingin mempermudah proses pertukaran informasi penelitian antara satu lembaga dengan lembaga
lainnya. Untuk mencapati tujuannya, ia memulai sebuah proyek yang dinamakan World Wide Web
(WWW), yaitu sebuah sistem yang dapat digunakan untuk bertukar informasi tidak hanya melalui surat
eletronik dan papan pesan tetapi juga melalui halaman-halaman atau artikel-artikel yang dapat dengan
mudah dibaca oleh setiap orang seperti halaman web yang dikenal sekarang ini.
Pada saat ini, World Wide Web telah berkembang sangat pesat dan merevolusi proses komunikasi
yang telah ada. Pada tahun 2010, diperkirakan ada 1.97 miliar orang pengguna internet aktif.
Jika berbicara mengenai internet, tentunya situs web (website) dan halaman web (webpage) adalah
istilah-istilah yang tidak dapat dipisahkan. Namun tahukan Anda bahwa keduanya adalah hal yang
sangat berbeda?
Halaman web adalah sebuah dokumen yang paling umum dan paling penting di dalam internet.
Halaman web berisikan berbagai macam informasi dalam berbagai bentuk dan media. Mulai dari teks,
gambar, audio, video dan bahkan media interaktif.
Halaman web pada umumnya menggunakan format dokumen HTML (Hypertext Markup Language)
yang akan Anda pelajari pada bab selanjutnya. Untuk menampilkan sebuah halaman web, Anda akan
memerlukan sebuah aplikasi khusus yang dikenal dengan istilah peramban web (web browser).
Aplikasi peramban akan mengambil halaman yang Anda inginkan dari internet dan menampilkannya
pada layar monitor dari komputer Anda. Halaman web pada umumnya juga saling terhubung dengan
halaman web lainnya melalui sebuah tautan (link) yang dikenal dengan istilah hyperlink.
Jika halaman web diibaratkan sebagai sebuah halaman, maka situs web dapat diibaratkan sebagai
sebuah buku. Sebuah situs web memiliki banyak halaman web yang memiliki informasi yang serupa
dan saling berhubungan.
Sebagai contoh, situs web dari Universitas Indonesia memiliki halaman-halaman web yang
berisikan informasi tentang berbagai progam studi yang terdapat pada Universitas Indonesia. Situs web
Universitas Indonesia tentunya tidak memiliki informasi tentang harga mobil dari produsen Toyota.
Apabila Anda membuka sebuah halaman web dengan menggunakan peramban web Anda, maka
secara garis besar akan terjadi proses sebagai berikut :
1. Anda memasukkan URL dari halaman web yang inginkan Anda buka pada peramban web Anda.
2. Peramban web akan mencari alamat server dari situs web yang memiliki halaman web tersebut
3. Peramban web akan meminta halaman web yang Anda inginkan dari server tersebut.
4. Server akan memproses permintaan tersebut dan mengirimkan hasilnya kepada peramban web.
5. Peramban web akan memproses data yang didapatkan dari server tersebut dan
menampilkannya pada layar monitor.
Pada dasarnya, ada dua macam halaman web, yaitu halaman web statis dan halaman web dinamis.
Sesuai dengan namanya, isi atau konten yang terdapat pada halaman web statis bersifat tetap dan tidak
berganti-ganti, sedangkan isi atau konten yang terdapat pada halaman web dinamis akan berganti-ganti
sesuai dengan kondisi dan/atau keadaan tertentu.
Sebagai contoh, apabila Anda membuka halaman web dari situs surat elektronik seperti Gmail,
maka halaman tersebut akan menampilkan surat-surat yang Anda memiliki. Sedangkan apabila teman
Anda membuka halaman web yang sama, maka surat-surat yang akan ditampilkan adalah surat-surat
yang dimiliki oleh teman Anda. Inilah yang dimaksud dengan halaman web dinamis, satu halaman yang
sama tetapi dapat menampilkan isi atau konten yang berbeda.
Sebuah halaman web dinamis memerlukan sebuah skrip atau program yang akan dijalankan pada
server web untuk menentukan konten yang akan dimasukkan ke dalam halaman web. Ada banyak
bahasa pemrograman yang dapat digunakan untuk melakukan hal ini, salah satu di antaranya yang
paling populer adalah PHP (PHP: Hypertext Preprocessor). Selain PHP, ada pula bahasa-bahasa lainnya
seperti ASP.NET, Perl, Python, Ruby, Java, ColdFusion, dan sebagainya.
Jika Anda ingin membuat sebuah halaman web, maka bahasa HTML adalah sebuah bahasa yang
harus Anda pelajari. Semua halaman web yang Anda temui di dalam jaringan Internet sebenarnya
adalah sebuah dokumen teks yang dibuat dengan menggunakan bahasa HTML. Dokumen teks HTML
tersebut selanjutnya akan diterjemahkan oleh aplikasi web browser menjadi sebuah rangkaian teks,
gambar, audio, dan bahkan video yang Anda kenali sebagai sebuah halaman web.
HTML sendiri adalah kepanjangan dari HyperText Markup Language, yang memiliki arti sebagai
beikut :
• Hyper
Dalam bahasa Inggris berarti sesuatu yang sangat aktif. Hal ini memiliki maksud bahwa HTML
adalah sebuah bahasa yang dapat membawa Anda kemana saja dan kapan saja dalam dunia
maya.
• Text
Menandakan bahwa HTML adalah suatu kumpulan dari teks.
• Markup
Bahasa HTML adalah sebuah bahasa markup, yaitu sebuah bahasa yang dapat digunakan untuk
memberikan markup atau keterangan tambahan pada sesuatu. Misalkan, huruf yang bercetak
tebal, keterangan warna, paragraf, gambar, dan sebagainya.
• Language
Seperti namanya, HTML adalah sebuah ...bahasa.
HTML pertama kali ditemukan pada tahun 1990 oleh sebuah ahli fisika dari Inggris yang bernama
Tim Berners Lee. Pada awalnya, bahasa HTML tidaklah dimaksudkan untuk membuat sebuah halaman
web yang seperti Anda kenal seperti sekarang ini. Melainkan, HTML dirancang untuk mempermudah
proses pertukaran dokumen dan informasi penelitian antara suatu lembaga penelitian dengan lembaga
penelitian lainnya melalui jaringan Internet.
Tidak lama setelah bahasa ini ditemukan, para pelaku bisnis mulai tertarik dengan kemampuan
yang dimiliki oleh HTML, dan bermaksud untuk menggunakan bahasa tersebut untuk urusan bisnis,
seperti untuk beriklan dan memberikan informasi-informasi seputar perusahaannya. Setelah itu, HTML
mulai berkembang secara pesat dan menjadi tulang punggung dari Internet pada jaman sekarang.
Bahkan, sampai sekarang pun HTML masih terus berkembang dengan pesat.
Proses perkembangan dari HTML diatur oleh sebuah lembaga internasional yang bernama W3C
(World Wide Web Consortium). Lembaga ini berfungsi untuk menjaga agar HTML tetap menjadi sebuah
standar internasional sebagai sebuah bahasa untuk membuat halaman web. Dengan adanya standar ini,
setiap pembuat web dapat memastikan bahwa halaman web yang telah dibuat olehnya dapat
ditampilkan pada setiap pengunjung sesuai dengan keinginannya, tidak peduli perangkat keras atau
perangkat lunak apapun yang digunakan oleh pengunjung tersebut.
Bahasa HTML yang akan dipelajari dalam buku ini adalah hasil perkembangan yang terbaru dari
HTML, yaitu HTML5. Berbeda dengan versi-versi HTML yang sebelumnya seperti HTML 4.01 atau
XHTML (eXtended HyperText Markup Language, bahasa HTML yang telah ditambahkan kegunaannya)
1.0 dan 1.1, HTML5 memiliki banyak fitur multimedia terbaru yang dapat membuat sebuah halaman
web menjadi lebih menarik dan interaktif.
Sekilas, HTML terlihat sebagai sebuah bahasa yang memiliki kemampuan yang hebat. Namun,
sebenarnya bahasa HTML memiliki banyak kekurangan dan keterbatasan didalamnya. Oleh karena itu,
untuk membuat sebuah halaman web yang menarik, Anda akan memerlukan bahasa-bahasa lain yang
dapat digunakan untuk menutupi kekurangan dan keterbatasan yang ada pada HTML.
Sebagai contoh, halaman web yang hanya dibuat dengan hanya menggunakan bahasa HTML tidak
dapat memiliki tampilan yang menarik. Oleh karena itu, seringkali HTML digabungkan dengan
dokumen CSS (Cascading Style Sheet) yang dapat digunakan untuk mempercantik tampilan dari sebuah
halaman web. HTML tidak dapat membuat animasi pada halaman web. Untuk ini, dapat digunakan
teknologi JavaScript, Flash, atau Silverlight. HTML sendiri juga tidak dapat berinteraksi dengan
pengunjung atau menampilkan data-data yang terdapat pada sebuah database. Jika Anda ingin
membuat halaman web Anda dapat melakukan hal tersebut, maka Anda perlu menggabungkan HTML
dengan sebuah bahasa pemrograman server seperti PHP, ASP, Java, Python, Ruby, dan sebagainya.
2.2 BERSIAP-SIAP
Untuk membuat sebuah halaman web dengan menggunakan bahasa HTML, Anda akan memerlukan
dua buah aplikasi yang sangat penting, yaitu aplikasi text editor dan aplikasi web browser. Aplikasi text
editor akan digunakan untuk membuat dokumen HTML dimana nantinya Anda akan mengetik kode-
kode yang terdapat pada bahasa HTML. Sedangkan aplikasi web browser akan digunakan untuk
menampilkan dokumen HTML yang telah Anda buat sebagai halaman web.
Untungnya, jika Anda menggunakan sebuah sistem komputer yang menggunakan sistem operasi
berbasis Microsoft Windows (versi apa saja, mulai dari Windows 95 sampai Windows 7), Apple Mac OS
X, atau bahkan berbagai macam distro dari Linux, Anda sudah memiliki kedua aplikasi tersebut pada
komputer Anda.
Pada sistem operasi Microsoft Windows, Anda sudah memiliki aplikasi Notepad sebagai text editor
dan Internet Explorer sebagai web browser. Pada sistem operasi Apple Mac OSX, ada TextEdit sebagai
(seperti yang Anda duga) text editor dan Safari sebagai web browser. Jika Anda menggunakan sistem
operasi berbasis Linux, pilihannya lebih beragam lagi. Anda mungkin akan memiliki Gedit, Kate,
Mousepad, atau Leafpad sebagai text editor Anda tergantung dari distro yang Anda gunakan. Untuk web
browser pada Linux, umumnya menggunakan Firefox.
Walaupun begitu, apabila Anda merasa aplikasi-aplikasi tersebut masih memiliki kekurangan,
tentunya Anda dapat menggunakan aplikasi text editor dan web browser lain yang sesuai dengan
keinginan Anda.
Pada dasarnya, Anda dapat menggunakan aplikasi text editor apapun untuk membuat sebuah
halaman web dengan menggunakan bahasa HTML. Namun, ada baiknya Anda menggunakan aplikasi
text editor yang dikhususkan untuk pemrograman, yaitu aplikasi text editor yang memiliki fitur syntax
highlighting dan line numbering.
Fitur syntax highlighting atau pewarnaan sintaks/teks adalah suatu fitur utama yang perlu
diperhatikan dalam memilih sebuah aplikasi text editor. Dengan adanya fitur ini, kode-kode HTML yang
Anda ketikkan akan diberikan warna yang berbeda-beda sesuai dengan fungsinya. Pemberian warna ini
dapat digunakan untuk membantu Anda melihat struktur dan mencari kesalahan dari sebuah dokumen
HTML.
Selain syntax highlighting, fitur lain yang perlu diperhatikan adalah fitur line numbering. Melalui
fitur ini, aplikasi text editor akan memberikan nomor baris pada setiap baris kode yang Anda buat. Pada
awalnya, fitur ini mungkin terlihat sepele, namun fitur ini akan menjadi sangat berguna setelah Anda
mempelajari pemrograman halaman web dengan PHP, karena jika ada suatu kesalahan pada halaman
web Anda, PHP akan memberitahukan letak kesalahan tersebut melalui nomor baris. Jika text editor
Anda tidak memiliki fitur ini, tentu akan sulit untuk mengetahui letak dari kesalahan tersebut.
Mungkin Anda pernah mendengar sebuah aplikasi yang bernama Adobe Dreamweaver atau
Microsoft Frontpage (yang notabene sudah berganti nama menjadi Microsoft Expression Web). Pada
aplikasi-aplikasi tersebut, Anda dapat membuat sebuah halaman web secara visual dan tanpa perlu
mengetahui bahasa HTML, cukup melakukan drag-and-drop komponen tampilan yang Anda inginkan
pada halaman web Anda dan program tersebut akan menerjemahkannya menjadi kode-kode HTML
secara otomatis. Aplikasi-aplikasi seperti ini dikenal dengan istilah WYSIWYG (What You See Is What
You Get).
Walaupun terdengar menarik, perlu diperhatikan bahwa penggunaan aplikasi-aplikasi ini tidaklah
dianjurkan jika Anda ingin belajar membuat sebuah halaman web dengan menggunakan HTML. Kode
HTML yang dibuat secara otomatis oleh WYSIWYG pada umumnya sangatlah berantakan dan tidak
memenuhi standar HTML yang ditetapkan oleh W3C, menjadikan halaman web Anda akan memiliki
tampilan yang tidak konsisten pada aplikasi web browser yang berbeda-beda. Selain itu, jika Anda tidak
memahami struktur dari dokumen HTML yang dibuat secara otomatis tersebut, Anda akan sangat sulit
menggabungkan pemrograman PHP pada halaman tersebut.
Dalam buku ini, penulis akan menggunakan aplikasi text editor yang bernama Notepad++. Penulis
menggunakan aplikasi ini karena aplikasi ini telah memiliki fitur-fitur pemrograman yang lengkap,
tentu saja, diantaranya adalah fitur syntax highlighting dan line numbering. Selain itu, aplikasi ini juga
dapat Anda peroleh dengan gratis, karena aplikasi ini adalah aplikasi yang bersifat open-source. Anda
dapat mendapatkan aplikasi ini melalui situs web http://notepad-plus-plus.org/.
Selain Notepad++, ada banyak aplikasi text editor sejenis yang dapat Anda peroleh secara gratis,
seperti Gedit (http://projects.gnome.org/gedit/), jEdit (http://www.jedit.org/), Komodo Edit
(http://www.activestate.com/komodo-edit), Notepad2 (http://www.flos-freeware.ch/notepad2.html),
Sebagai seorang pembuat web, tentunya Anda ingin situs web Anda diakses oleh banyak orang.
Setiap orang yang mengunjungi halaman web Anda tentunya akan menggunakan aplikasi web browser
yang berbeda-beda. Ada orang yang menggunakan Firefox, ada yang menggunakan Opera, Safari,
Chrome, Internet Explorer, dan sebagainya. Anda haruslah memastikan bahwa halaman web Anda akan
tampil dengan baik dan benar sesuai dengan yang Anda inginkan pada setiap aplikasi web browser
tersebut.
Oleh karena itu, idealnya Anda juga harus memiliki banyak aplikasi web browser untuk mencoba
apakah halaman web Anda memiliki tampilan yang konsisten atau tidak. Untungnya, hampir semua
aplikasi web browser dapat Anda peroleh dengan gratis. Namun, pastikanlah Anda selalu menggunakan
versi terbaru dari aplikasi web browser tersebut.
Sebuah program “Halo, Dunia!” dapat dikatakan menjadi sebuah tradisi yang tidak dapat dipisahkan
dalam mempelajari sebuah bahasa komputer. Program halo dunia pada dasarnya adalah sebuah
program yang sangat sederhana, program ini berfungsi untuk menampilkan teks “Halo, Dunia!” pada
layar monitor. Dalam HTML, yang bukan merupakan sebuah bahasa pemrograman, tentunya Anda tidak
akan membuat sebuah program halo dunia. Melainkan, karena HTML adalah sebuah bahasa yang
digunakan untuk membuat halaman web, maka Anda akan membuat sebuah halaman web yang
menampilkan teks “Halo, Dunia!”.
Untuk membuat halaman tersebut, pertama-tama bukalah aplikasi text editor favorit Anda dan
buatlah sebuah dokumen HTML yang berisikan kode-kode seperti yang terdapat di bawah ini. Jangan
khawatir jika Anda tidak memahami makna dari kode-kode HTML tersebut, Anda akan segera
mempelajarinya dalam bagian selanjutnya.
<!doctype html>
<html>
<head>
<title>Halo, Dunia!</title>
</head>
<body>
Belajar HTML sangat mudah dan menyenangkan!
</body>
</html>
Setalah itu. simpanlah dokumen yang telah Anda buat tersebut tersebut dengan nama
halo_dunia.html. Anda dapat menyimpan dokumen tersebut dimana saja sesuai dengan keinginan
Anda. Perlu diperhatikan disini bahwa Anda harus menyimpan dokumen tersebut dengan ekstensi.html,
hal ini ditujukan untuk memberitahukan kepada komputer bahwa dokumen tersebut adalah sebuah
dokumen HTML.
Jika sudah, bukalah dokumen tersebut dengan menggunakan peramban web Anda dengan
melakukan drag-n-drop dari jendela file manager (Windows Explorer jika Anda menggunakan
Windows) ke jendela web browser Anda. Jika semua berjalan dengan baik, Anda akan melihat tulisan
“Belajar HTML sangat mudah dan menyenangkan!” pada web browser Anda. Selamat, Anda telah
berhasil membuat halaman web pertama Anda!
Sebuah halaman web yang dibuat dengan menggunakan HTML pada dasarnya terdiri dari banyak
komponen-komponen yang dikenal dengan istilah elemen. Elemen dapat dikatakan sebagai sebuah
bagian dari suatu halaman web. Elemen dapat berupa sebuah teks, gambar, link, atau bahkan
komponen multimedia seperti audio atau video. Dalam sebuah dokumen HTML, kumpulan dari elemen-
elemen ini akan disusun dengan sedemikian rupa sehingga dapat dimengerti dan ditampilkan oleh web
browser.
Elemen sendiri terdiri dari beberapa bagian, yaitu tag dan konten. Agar dapat lebih memahami
bentuk dari sebuah elemen pada sebuah dokumen HTML, perhatikanlah diagram berikut ini :
Elemen
Tag adalah sebuah label yang diberikan pada sebuah konten. Tag adalah komponen yang terdapat
didalam tanda < dan >. Tag berfungsi untuk memberikan keterangan tambahan terhadap sebuah
konten atau isi dari sebuah halaman tambahan. Sebagai contoh, tag <strong></strong> berfungsi
untuk memberi keterangan pada web browser bahwa segala sesuatu yang ada di dalamnya akan
ditampilkan dengan menggunakan huruf yang bercetak tebal (bold). Pada contoh diatas, teks “Google”
akan ditampilkan dengan cetak tebal.
Sebuah tag pada umumnya terdiri dari dua macam, yaitu start tag dan end tag. Start tag dan end tag
akan mengawali dan mengakhiri konten yang akan diberikan keterangan tambahan oleh tag tersebut.
Pada penulisannya, end tag selalu akan menggunakan simbol garis miring. Sekarang perhatikanlah
contoh berikut ini :
<strong>Facebook</strong> Twitter
Pada contoh diatas, teks “Facebook” akan ditampilkan dengan bercetak tebal, karena terdapat
diantara tag <strong></strong>. Sedangkan, teks “Twitter” tidak akan ditampilkan dengan cetak tebal
karena tidak berada di dalam tag <strong></strong>.
Walaupun begitu, ada pula beberapa elemen HTML yang tagnya hanya terdiri dari satu buah tag saja,
tanpa adanya pasangan start tag dan end tag, sebagai contoh, <br> yang berfungsi untuk membuat
baris baru diantara teks. Tag seperti ini dikenal dengan istilah self-closing tag karena tag tersebut
menutup atau mengakhiri dirinya sendiri dengan sebuah tanda garis miring yang dituliskan sebelum
tanda kurung siku penutup.
Selain itu, sebuah tag juga dapat memiliki satu atau lebih atribut. Atribut berfungsi untuk
memberikan informasi tambahan kepada sebuah elemen. Perhatikanlah diagram berikut ini :
Elemen
Start Tag End
Konten
Atribut Tag
<a href="http://google.com"> Google </a>
Pada diagram di atas, tag <a></a> berfungsi untuk membuat sebuah link pada halaman web.
Penggunaan tag di atas pada sebuah halaman web, akan menghasilkan sebuah link dengan teks “Google”
yang apabila diklik, akan memindahkan Anda ke alamat web http://google.com. Perlu diperhatikan
bahwa alamat tujuan http://google.com dituliskan pada sebuah atribut yang bernama href (hypertext
reference).
Atribut sendiri pada dasarnya terdiri dari dua buah bagian, yaitu name dan value. Pada contoh
diatas, href adalah sebuah attribute name sedangkan http://google.com adalah sebuah attribute value.
Dalam penulisannya, attribute value diletakkan di dalam sepasang tanda kutip dua. Jika dituangkan
dalam sebuah diagram, maka akan menjadi seperti berikut ini :
Elemen
Start Tag
Atribut End
Konten
Name Value Tag
Selain itu, konten atau isi yang terdapat pada sebuah elemen tidaklah terbatas pada teks saja.
Melainkan, sebuah elemen bisa saja berisikan elemen lainnya. Perhatikanlah contoh berikut ini :
<strong>
<em>
Belajar HTML
</em>
</strong>
Pada contoh di atas, konten yang terdapat pada elemen strong adalah elemen lain, yaitu elemen em
yang berfungsi untuk membuat teks menjadi bercetak miring. Penggabungan kedua buah elemen ini
akan menjadikan teks “Belajar HTML” yang terletak di dalamnya ditampilkan dengan cetak tebal dan
miring.
Dalam penggunaan elemen yang memiliki elemen lain di dalamnya, perlu diperhatikan urutan
penutupan masing-masing tag dari elemen-elemen tersebut. Penutupan tag ini mengikuti aturan yang
dikenal dengan istilah FILO (First In, Last Out), dimana tag yang dibuka pertama kali akan ditutup
terakhir kali. Untuk lebih jelasnya, perhatikanlah contoh berikut ini :
Benar : Salah :
<strong> <strong>
<em> <em>
Satu Satu
</em> </strong>
</strong> </em>
Setelah Anda memahami struktur dari sebuah dokumen HTML, marilah kita membahas kembali
mengenai elemen-elemen yang terdapat pada halaman “Halo, Dunia!” yang telah Anda buat sebelumnya.
<!doctype html>
Elemen doctype berfungsi untuk memberitahukan versi HTML yang digunakan dalam sebuah
halaman web. Penulisan doctype seperti diatas akan memberitahukan kepada web browser bahwa
halaman web Anda menggunakan HTML 5. Apabila elemen ini tidak digunakan, maka web browser
bekerja dalam quirks mode, dimana nantinya akan menghasilkan tampilan yang tidak sesuai dengan
keinginan Anda.
Elemen html berfungsi untuk menandakan awal dan akhir dari sebuah dokumen HTML.
Elemen head berfungsi untuk menandakan bagian kepala (anggaplah seperti kepala/kop surat) dari
sebuah halaman web. Semua yang terdapat di dalam bagian ini tidak akan tampil pada web browser
dan hanya berfungsi untuk memberikan keterangan atau informasi tambahan mengenai halaman web
tersebut, seperti identitas pembuat, hak cipta, judul halaman, dan sebagainya.
Elemen title berfungsi untuk memberikan judul pada sebuah halaman web. Judul ini biasa akan
tampil pada bagian tab dari web browser dan berfungsi untuk mempermudah pengunjung halaman
web untuk mengenali halaman web Anda dari halaman-halaman yang terdapat pada tab lainnya.
Elemen ini hanya dapat diletakkan di dalam elemen head karena elemen ini hanya berfungsi sebagai
informasi tambahan.
Jika elemen head dapat diibaratkan sebagai kepala surat, maka elemen body adalah badan atau isi
dari surat tersebut. Semua yang terdapat di dalam elemen ini akan ditampilkan pada web browser. Di
dalam elemen inilah nantinya Anda akan membuat isi dari halaman web Anda.
Fungsi utama dari sebuah halaman web adalah menyampaikan suatu informasi kepada orang lain
melalui Internet. Untuk menyampaikan informasi tersebut, tentunya Anda akan memerlukan teks atau
tulisan-tulisan yang berisikan informasi tersebut.
Pada contoh halaman “Halo, Dunia!” yang telah Anda buat, Anda hanya meletakkan teks dengan
begitu saja di dalam elemen body. Ini bukanlah cara yang terbaik untuk meletakkan teks di dalam
sebuah halaman web, melainkan, Anda harus meletakkan teks di dalam elemen yang khusus yang
berfungsi untuk memberikan makna semantis kepada teks tersebut. Maksudnya adalah bahwa Anda
harus menjelaskan apakah fungsi dari teks tersebut, apakah teks itu berfungsi sebagai judul bab, judul
subbab, paragraf isi, keterangan, daftar, atau tabel.
Paragraf dalam sebuah halaman web didefinisikan dengan menggunakan elemen p(paragraph).
Penggunaan elemen ini sangatlah mudah, Anda cukup memberikan tag <p> pada awal dari setiap
paragraf yang ingin Anda buat.
SINTAKS :
<p>teks paragraf
CONTOH :
<!doctype html>
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.
<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis
placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna
sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit
amet est augue.
<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae
euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed
nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.
</body>
</html>
Dalam HTML, ada 6 elemen yang dapat Anda gunakan untuk memberikan judul pada paragraf Anda,
yaitu elemen h1, h2, h3, h4, h5, dan h6. Dimana elemen h1 berfungsi sebagai judul utama dan h6
berfungsi sebagai judul subbab tingkatan keenam. Berbeda dengan elemen p, Anda perlu menggunakan
start tag dan end tag pada elemen judul.
Dalam pembuatan judul, perlu diperhatikan bahwa Anda juga harus menggunakan judul-judul
subbab secara berurutan. Sebagai contoh, judul h4 haruslah menjadi subbab dari judul h3, dimana h3
sendiri adalah subbab dari judul h2.
SINTAKS :
<h1>teks judul</h1>
CONTOH :
<!doctype html>
<html>
<head>
<title>Judul</title>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.
</body>
</html>
Selain paragraf dan judul, Anda juga dapat membuat daftar pada halaman web Anda. Ada tiga
macam elemen yang dapat Anda gunakan untuk membuat daftar, yaitu elemen ul(unordered list)yang
berfungsi untukuntuk membuat daftar yang tidak terurut, elemen ol(ordered list)yang berfungsi untuk
untuk membuat daftar yang berurut, dan elemen li(list item) yang berfungsi untuk membuat isi pada
sebuah daftar.
Dalam penggunaannya, Anda akan terlebih dahulu mendefinisikan jenis daftar yang ingin Anda buat
(terurut atau tidak terurut) dengan menggunakan elemen ul atau ol, lalu Anda menamabahkan isi ke
dalam daftar tersebut dengan menggunakan elemen li.
SINTAKS :
<ul>
<li>isi pertama
<li>isi kedua
</ul>
<ol>
<li>isi pertama
<li>isi kedua
</ol>
CONTOH :
<!doctype html>
<html>
<head>
<title>Daftar</title>
</head>
<body>
<h1>Contoh daftar</h1>
<h2>Tidak terurut</h2>
<ul>
<li>Lorem ipsum
<li>Dolor sit amet
<li>Consectetur adipiscing elit
</ul>
<h2>Terurut</h2>
<ol>
<li>Lorem ipsum
<li>Dolor sit amet
<li>Consectetur adipiscing elit
</ol>
</body>
</html>
Sampai saat ini, halaman-halaman web yang telah Anda buat mungkin terasa hambar karena hanya
berupa teks biasa saja tanpa adanya format khusus dan penggunaan warna dan jenis serta ukuran huruf
yang menarik. Sekarang, marilah mencoba memformat teks yang terdapat pada halaman web Anda agar
halaman web Anda menjadi lebih menarik.
Penggunaan huruf yang bercetak tebal dan miring dapat membantu Anda untuk memberikan
penekanan pada suatu bagian dari sebuah teks. Untuk membuat efek seperti ini, Anda akan
memerlukan elemen strong dan em. Elemen strong berfungsi untuk membuat cetak tebal dan elemen
em berfungsi untuk membuat cetak miring.
SINTAKS :
<strong>teks</strong>
<em>teks</em>
CONTOH :
<!doctype html>
<html>
<head>
<title>Cetak Tebal dan Miring</title>
</head>
<body>
<p>Teks ini menggunakan cetak <strong>tebal</strong>
<p>Teks ini menggunakan cetak <em>miring</em>
<p>Teks ini menggunakan cetak <strong><em>tebal dan miring</em></strong>
</body>
</html>
Untuk mengatur jenis dan ukuran huruf dari sebuah teks, Anda dapat menambahkan atribut style
pada elemen yang ingin Anda atur jenis dan ukuran hurufnya. Atribut style, sesuai namanya, adalah
sebuah atribut yang berfungsi untuk memberikan format atau “gaya” pada elemen-elemen yang
terletak di dalam sebuah halaman web.
Atribut ini memiliki banyak nilai atribut yang dapat Anda gunakan, namun, marilah terlebih dahulu
berkenalan dengan nilai atribut font-family yang berfungsi untuk mengatur jenis huruf, dan nilai
atribut font-size yang berfungsi untuk mengatur ukuran huruf.
Dalam penulisan nilai-nilai atribut dari atribut style, Anda perlu mengakhiri setiap nilai atribut
dengan menggunakan sebuah tanda titik koma (;).
SINTAKS :
<elemen style="font-family: jenis huruf; font-size: ukuran huruf;">teks</elemen>
CONTOH :
<!doctype html>
<html>
<head>
<title>Jenis dan Ukuran Huruf</title>
</head>
<body>
<p style="font-family: Georgia; font-size: 14pt;">
Georgia adalah contoh jenis huruf serif
<p style="font-family: Trebuchet MS; font-size: 10pt;">
Trebuchet MS adalah contoh jenis huruf sans-serif
<p style="font-family: Consolas; font-size: 16pt;">
Consolas adalah contoh jenis huruf <strong>monospace</strong>
</body>
</html>
Selain dengan menggunakan elemen strong, Anda juga dapat membuat teks bercetak tebal dengan
mengatur “berat” huruf dengan menggunakan nilai atribut font-weight. Walaupun begitu, perlu
diperhatikan bahwa penggunaan utama dari nilai atribut ini bukanlah untuk membuat huruf bercetak
tebal melainkan untuk membuat huruf yang sudah bercetak tebal dari awal (seperti pada elemen h1)
menjadi tidak bercetak tebal.
SINTAKS :
<elemen style="font-weight: bobot huruf;">teks</elemen>
CONTOH :
<!doctype html>
<html>
<head>
<title>Bobot huruf</title>
</head>
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.
</body>
</html>
Bila Anda perhatikan contoh di atas, dapat diketahui bahwa atribut style yang diberikan pada suatu
elemen akan diterapkan pula kepada elemen-elemen lain yang berada di dalam elemen tersebut. Dalam
contoh ini, atribut style="font-family: Trebuchet MS; font-size: 12pt;" pada elemen
body juga akan diterapkan pada elemen h1 dan p yang terdapat di dalamnya.
Selain menentukan jenis dan ukuran huruf, Anda juga bisa menentukan variasi dan dekorasi dari
sebuah teks dengan menggunakan nilai atribut font-variant dan text-decoration pada atribut style.
Perlu diketahui bahwa Anda dapat menggabungkan berbagai macam nilai atribut pada atribut style
sesuai dengan kebutuhan Anda.
SINTAKS :
<elemen style="font-variant: variasi; text-decoration: dekorasi;">teks</elemen>
OPSI VARIASI :
small-caps -> Huruf kecil kapital
OPSI DEKORASI :
underline -> Bergaris bawah
overline -> Bergaris atas
line-through -> Dicoret
blink -> Berkedap-kedip
CONTOH :
<!doctype html>
<html>
<head>
<title>Variasi dan Dekorasi Teks</title>
</head>
</html>
Anda juga dapat mengatur perataan dari teks yang terdapat di dalam halaman web Anda.
Selayaknya pengaturan perataan teks yang terdapat di dalam sebuah aplikasi word prosesor, Anda
dapat membuat teks Anda menjadi rata kiri, rata tengah, rata kanan, maupun justify (rata kanan dan
kiri). Nilai atribut style yang digunakan kali ini adalah text-align.
SINTAKS :
<elemen style="text-align: perataan;">teks</elemen>
OPSI PERATAAN :
left -> Rata kiri
center -> Rata tengah
right -> Rata kanan
justify -> Rata kiri dan kanan
CONTOH :
<!doctype html>
<html>
<head>
<title>Perataan Teks</title>
</head>
<h1>Rata kiri</h1>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum
dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis
justo elit, in dictum metus.
<h1>Rata tengah</h1>
<p style="text-align: center;">Nulla non sem risus, vitae fermentum nisl. Etiam
aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at
diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo
commodo vehicula. Donec sit amet est augue.
<h1>Rata kanan</h1>
<p style="text-align: right;">Aliquam mattis mollis luctus. Integer venenatis elit
non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst.
Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra
venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.
</body>
</html>
Jika Anda perhatikan, apabila nilai atribut text-align tidak digunakan, secara otomatis web browser
akan menganggap teks tersebut menggunakan perataan rata kiri.
Aturan penulisan paragraf di dalam Bahasa Indonesia mengharuskan baris pertama dari setiap
paragraf diberikan indentasi (dibuat menjorok ke dalam) seperti halnya paragraf yang terdapat di
dalam modul ini. Untuk melakukan hal ini, Anda dapat menggunakan nilai atribut text-indent.
SINTAKS :
<elemen style="text-indent: jarak;">teks</elemen>
CONTOH :
<!doctype html>
<html>
<head>
<title>Indentasi Paragraf</title>
</head>
</body>
</html>
Selain perataan teks dan indentasi paragraf, Anda juga dapat mengatur jarak antara suatu baris
dengan baris lainnya di dalam sebuah paragraf (line spacing). Nilai atribut yang dapat Anda gunakan
untuk mengatur hal ini adalah line-height.
SINTAKS :
<elemen style="line-height: jarak;">teks</elemen>
CONTOH :
<!doctype html>
<html>
<head>
<title>Jarak Antar Baris</title>
</head>
</body>
</html>
Ada dua macam warna yang dapat Anda berikan kepada teks di dalam halaman web Anda, yaitu
warna latar belakan dan warna teks. Untuk memberikan warna latar belakang, Anda akan
menggunakan nilai atribut background, sedangkan untuk warna teks Anda akan menggunakan nilai
atribut color.
SINTAKS :
<elemen style="background: warna; color: warna;">teks</elemen>
OPSI WARNA :
white, silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue,
navy, fuchsia, purple
CONTOH :
<!doctype html>
<html>
<head>
<title>Penggunaan Warna</title>
</head>
</body>
</html>
Sebuah situs web pada umumnya terdiri dari beberapa halaman web yang saling berkaitan, untuk
mempermudah pengunjung situs web Anda berpindah dari satu halaman ke halaman lainnya, Anda
dapat membuat link atau tautan dengan menggunakan elemen a(anchor).
Elemen a akan memerlukan sebuah atribut yang bernama href(hypertext reference). Atribut ini
berfungsi untuk menetukan alamat tujuan dari suatu link yang juga dikenal dengan istilah URL (Uniform
Resource Locator). Ada dua macam alamat tujuan yang dapat digunakan, yaitu absolute URL, dan relative
URL.
Sebelum mengenal lebih lanjut tentang berbagai macam alamat tujuan, marilah terlebih dahulu
mengetahui dasar pembuatan sebuah link.
SINTAKS :
<a href="alamat_tujuan">teks</a>
CONTOH :
<!doctype html>
<html>
<head>
<title>Link</title>
</head>
<body>
<h1>Selamat datang!</h1>
</html>
Penggunaan relative URL akan menjadikan alamat halaman tempat asal link menjadi referensi.
Untuk lebih memahami penggunaan alamat relatif, perhatikan bagan berikut ini :
www.contoh.com
2010.html laut.html
2011.html hutan.html
Anggaplah bagan di atas adalah struktur dari sebuah situs web www.contoh.com, dimana berita
dan galeri adalah sebuah folder/direktori. Berdasarkan pada bagan di atas, perhatikanlah contoh
berikut ini :
• Apabila dari halaman menu.html Anda ingin membuat tautan menuju halaman galeri.html,
maka Anda dapat menggunakan <a href=”galeri.html”>. Untuk tujuan yang berada dalam
folder yang sama, maka cukup dituliskan seperti ini.
• Apabila dari halaman menu.html Anda ingin membuat link menuju halaman 2010.html,
maka Anda dapat menggunakan <a href=”berita/2010.html”>. Untuk tujuan yang berada
dalam folder yang berbeda, namun folder tersebut masih satu tingkatan dengan lokasi
dokumen awal, maka perlu dituliskan nama folder dokumen tujuan.
• Apabila dari halaman 2010.html Anda ingin membuat link menuju halaman berita.html,
maka Anda dapat menggunakan <a href=”../berita.html”>. Untuk tujuan yang berada pada
folder lain yang memiliki tingkatan yang lebih tinggi, maka perlu dituliskan .. yang berarti
satu folder diatas.
• Apabila dari halaman 2010.html Anda ingin membuat link menuju halaman laut.html,
maka Anda dapat menggunakan <a href=”../galeri/laut.html”>. Ini adalah kombinasi dari
perintah “naik ke satu folder diatas” dan “masuk ke dalam folder galeri”.
Sedangkan penggunaan absolute URL akan menggunakan referensi lengkap dan tidak
memperdulikan lokasi dari dokumen awal. Sebagai contoh, halaman hutan.html pada contoh diatas
dapat diakses dengan menggunakan <a href=”http://www.contoh.com/galeri/hutan.html”>.
Sebuah link tidak hanya dapat mengubungkan sebuah halaman web dengan halaman web lainnya.
Tautan juga dapat digunakan untuk menguhubungkan sebuah halaman web dengan berkas audio, video,
gambar, dan sebagainya.
Sebuah halaman web yang hanya berisikan teks saja tentunya terasa hambar dan membosankan.
Penambahan gambar yang relevan terhadap informasi yang ingin Anda sampaikan kepada pengunjung
situs web Anda tentunya dapat memberikan nilai lebih, sesuai dengan pepatah “sebuah gambar lebih
bermakna dari pada seribu kata”.
Untuk menambahkan gambar pada halaman web Anda, Anda dapat menggunakan elemen
img(image). Pada elemen ini, Anda harus memberikan sebuah atribut src(source) yang berfungsi untuk
menentukan lokasi gambar yang dituju. Penggunaan atribut ini pada dasarnya sama dengan
penggunaan atribut href pada elemen a, hanya saja, Anda hanya dapat mengarahkan alamat tujuannya
terhadap sebuah file gambar saja.
Anda dapat menggunakan format gambar apa saja, baik itu jpg / jpeg, png, maupun gif. Walaupun
begitu, ada baiknya Anda memastikan terlebih dahulu bahwa ukuran file gambar yang Anda gunakan
tidak terlalu besar. Penggunaan gambar dengan ukuran file yang terlalu besar tentunya juga akan
memerlukan waktu yang lama untuk ditampilkan pada pengunjung Anda yang tidak memiliki koneksi
internet dengan kecepatan yang tinggi.
SINTAKS :
<img src="alamat_gambar">
CONTOH :
<!doctype html>
<html>
<head>
<title>Gambar</title>
</head>
<body>
<h1>Social Network</h1>
<h2>Facebook</h2>
<a href="http://facebook.com/"><img src="facebook.png"></a>
<h2>Twitter</h2>
<a href="http://twitter.com"><img src="twitter.png"></a>
</body>
</html>
Selain daftar dan gambar, Anda juga dapat menambahkan tabel pada halaman web Anda. Sistem
pembuatan tabel dengan menggunakan HTML menyerupai sistem pembuatan tabel dalam aplikasi
spreadsheet seperti Microsoft Excel, dimana sebuah tabel terdiri dari baris (row), kolom (column), dan
sel (cell).
Untuk sebuah tabel, Anda akan memerlukan beberapa elemen, yaitu elemen table, tr(table row),
th(table header), dan td (table data). Elemen table berfungsi untuk mendefinisikan sebuah tabel.
Elemen tr berfungsi untuk mendefinisikan sebuah baris dari suatu tabel. Elemen th berfungsi untuk
mendefinisikan sebuah kolom judul. Elemen td berfungsi untuk mendefinisikan sebuah kolom data.
Elemen table dapat menggunakan atribut tambahan border yang berfungsi untuk menentukan
ketebalan garis pembatas pada tabel tersebut. Selain itu, Anda juga dapat menggunakan atribut
tambahan width untuk menentukan lebar dari suatu tabel. Atribut tambahan width juga dapat
digunakan pada elemen th untuk mengatur lebar dari suatu kolom. Untuk elemen th dan td, Anda juga
dapat menggunakan atribut align yang berfungsi untuk mengatur perataan dari suatu kolom.
SINTAKS :
<table border="ukuran_garis" width="lebar">
<tr>
<th width="lebar" align="perataan">judul</th>
</tr>
<tr>
<td align="perataan">isi</td>
</tr>
</table>
OPSI LEBAR :
%-> menggunakan persentase
px -> menggunakan satuan piksel
OPSI PERATAAN :
left -> Rata kiri
center -> Rata tengah
right -> Rata kanan
CONTOH :
<!doctype html>
<html>
<head>
<title>Daftar Barang</title>
</head>
<body>
</body>
</html>
Anda mungkin pernah menemukan sebuah tabel yang memiliki sel yang tergabung (merged). Untuk
membuat tabel seperti itu pada halaman web Anda, Anda dapat menggunakan atribut tambahan
rowspan atau colspan pada elemen th atau td pada sel yang ingin Anda gabungkan. Dimana atribut
rowspan berfungsi untuk menggabungkan baris (satu sel menggunakan lebih dari satu baris) dan
atribut colspan berfungsi untuk menggabungkan kolom (satu sel menggunakan lebih dari satu kolom).
SINTAKS :
<td rowspan="jumlah_baris" colspan="jumlah_kolom">teks</td>
CONTOH :
<doctype html>
<html>
<head>
<title>Daftar Nilai</title>
</head>
<body>
</body>
</html>
Formulir dapat digunakan untuk meminta masukan berbagai macam data dan informasi dari
pengunjung situs web Anda. Sebagai contoh adalah formulir pendaftaran, login, pencarian, kontak, dan
sebagainya. Ada beberapa elemen yang dapat Anda gunakan untuk membuat formulir, yaitu elemen
form, input, textarea, select, dan option.
Elemen form berfungsi untuk membuat formulir. Elemen ini memerlukan dua buah atribut, yaitu
atribut action dan method.
Atribut action berfungsi untuk menentukan halaman yang akan digunakan untuk memproses data
yang dikirimkan melalui formulir tersebut. Nilai dari atribut ini memiliki aturan yang sama dengan
atribut href pada elemen a dan atribut src pada elemen img.
Atribut method berfungsi untuk menentukan metode pengiriman data dari halaman formulir ke
halaman pemroses. Nilai dari atribut ini ada dua, yaitu post dan get. Post lebih umum digunakan
karena data yang dikirimkan lebih aman daripada menggunakan get.
Elemen input adalah elemen paling dasar untuk memasukkan data pada sebuah formulir. Pada
contoh diatas, elemen input menggunakan empat buah atribut, yaitu atribut name, type, size, dan
maxlength. Sebenarnya, atribut yang wajib digunakan pada elemen ini hanyalah name dan type saja.
Atribut size dan maxlength bersifat sebagai tambahan saja.
Atribut name berfungsi untuk menentukan nama dari variabel yang akan digunakan oleh halaman
pemroses. Lebih lanjut mengenai atribut ini akan Anda pelajari pada Bab 7. Pastikanlah Anda
memberikan nama yang jelas dan mudah dimengerti. Peraturan lainnya yang perlu diperhatikan adalah
jangan menggunakan spasi dalam atribut ini.
Atribut type berfungsi untuk menentukan tipe dari data yang akan dimasukkan. Ada bebera[a nilai
yang dapat digunakan pada atribut ini, diantaranya adalah text danpassword. Jika menggunakan nilai
text maka data yang akan dimasukkan berupa teks biasa, sedangkan jika menggunakan nilai password
maka data yang akan dimasukkan akan disembunyikan.
Atribut size berfungsi untuk menentukan ukuran dari tempat masukan data. Ukuran ini dihitung
dalam satuan karakter. Sedangkan atribut maxlength berfungsi untuk menentukan jumlah karakter
maksimal yang dapat dimasukkan.
Jika menggunakan nilai radio pada atribut type, maka elemen input akan menampilkan radio button.
Radio button memerlukan sebuah atribut lain, yaitu atribut value. Atribut ini berfungsi untuk
menentukan nilai dari variabel pada atribut name. Dari beberapa radio button yang memiliki nilai
atribut name yang sama, hanya dapat dipilih satu saja.
Elemen textarea berfungsi untuk memasukkan data yang panjang. Sama seperti elemen input,
elemen ini juga memiliki atribut name. Atribut lainnya pada elemen ini adalah atribut rows yang
berfungsi untuk menentukan ukuran tinggi textarea dan atribut cols yang berfungsi untuk menentukan
ukuran lebar textarea. Semua yang terdapat dalam elemen ini akan ditampilkan di dalamnya.
Elemen select berfungsi untuk membuat drop-down menu. Elemen ini juga memiliki atribut name
seperti elemen input dan textarea.
Elemen option berfungsi untuk menentukan sebuah pilihan di dalam elemen select. Elemen ini
memiliki atribut value seperti pada radio button. Elemen select dan option bekerja seperti elemen ul/ol
dan li.
Jika menggunakan nilai reset pada atribut type, maka elemen input ini akan menampilkan sebuah
tombol yang berfungsi untuk mengosongkan data pada formulir. Berbeda dengan atribut value pada
radio button dan drop-down menu, atribut value pada elemen ini berfungsi untuk menentukan teks
yang terdapat pada tombol tersebut.
Jika menggunakan nilai submit pada atribut type, maka elemen input ini akan menampilkan sebuah
tombol yang berfungsi untuk mengirimkan data formulir pada halaman pemroses. Sama seperti reset,
atribut value pada elemen ini berfungsi untuk menentukan teks yang terdapat pada tombol tersebut.
CONTOH :
<!doctype html>
<html>
<head>
<title>Formulir Pendaftaran</title>
</head>
<body>
<h1>Formulir Pendaftaran</h1>
<p>
<input type="reset" value="Hapus">
<input type="submit" value="Kirim">
</form>
</body>
</html>
Peta dalam sebuah halaman web dapat dijadikan sebuah metode alternatif untuk mendapatkan
masukkan data dari pengguna situs web Anda. Walaupun begitu, proses pembuatan peta dengan
menggunakan bahasa HTML sangatlah rumit, terutama apabila Anda melakukannya secara manual.
Oleh karena itu, untuk mempermudah proses pembuatan peta pada halaman web, akan digunakan
sebuah aplikasi tambahan yang bernama ImageMap. Aplikasi ini dapat Anda dapatkan secara gratis dari
http://code.google.com/p/imgmap/. Namun, Anda akan memerlukan Adobe AIR untuk
menjalankannya. Adobe AIR juga dapat didapatkan secara gratis dari http://get.adobe.com/air/.
Berikut adalah langkah-langkah untuk membuat sebuah peta HTML dengan menggunakan
ImageMap :
2. Pilih berkas gambar peta yang Anda inginkan lalu tekan tombol
Open,
Setelah Anda menyiapkan gambar peta dengan menggunakan ImageMap, tentunya Anda harus
membuat sebuah halaman web untuk menampilkan peta tersebut. Buatlah dokumen HTML baru
sebagai berikut :
<!doctype html>
<html>
<head>
<title>Peta Indonesia</title>
</head>
<body>
<h1>Peta Indonesia</h1>
<p>
<img src="peta.gif" usemap="#indonesia">
</body>
</html>
Pastikan Anda mengganti tag map yang dihasilkan dari ImageMap menjadi sesuai dengan contoh.
Atribut tambahan usemap pada elemen image menandakan bahwa gambar tersebut adalah sebuah
peta. Dimana nilai dari atribut ini adalah nama dari peta yang bersangkutan.
Elemen map berfungsi untuk mendefinisikan sebuah peta. Elemen ini memerlukan sebuah atribut,
yaitu atribut name yang berfungsi untuk memberikan nama terhadap peta tersebut.
Elemen area berfungsi untuk mendefinisikan sebuah area. Atribut dasar dari elemen ini adalah
atribut shape yang berfungsi untuk menentukan bentuk area dan atribut coords yang berfungsi untuk
menentukan koordinat X dan Y dari titik sudut area tersebut. Atribut alt, title, href, dan target
memiliki fungsi yang sama dengan atribut pada elemen a.
Pada bab sebelumnya, Anda sudah mempelajari cara memberikan format dan warna pada elemen-
elemen yang terdapat di dalam halaman web Anda dengan menggunakan atribut style. Sebenarnya,
penggunaan atribut style ini bukanlah merupakan cara yang efisien untuk memformat sebuah halaman
web. Bayangkan, jika Anda memiliki 20 halaman di dalam website Anda, dan Anda ingin merubah jenis
huruf dari semua halaman tersebut, maka Anda harus mengedit semua halaman tersebut. Bagaimana
jika Anda memiliki 100 halaman? Tentunya hal ini akan memakan waktu yang banyak.
Untuk mengatasi masalah tersebut, Anda dapat menggunakan CSS (Cascading Style Sheet) sebagai
sebuah suplemen terhadap halaman-halaman web Anda. Dengan menggunakan CSS, Anda dapat
memisahkan isi dan format tampilan dari halaman web Anda, dimana nantinya HTML hanya digunakan
untuk membuat isi dari halaman Anda dan format tampilannya diletakkan di dalam sebuah file CSS
yang terpisah.
Dengan adanya pemisahan antara isi dengan format seperti ini tentunya akan mempermudah Anda
untuk mengubah-ubah isi maupun tampilan dari halaman web Anda. Hal ini dikarenakan sebuah file
CSS dapat digunakan berkali-kali oleh banyak halaman web sekaligus, sehingga perubahan yang Anda
berikan pada file CSS akan berpengaruh terhadap semua halaman web yang menggunakan file CSS
tersebut. Menjadikan proses desain menjadi lebih efisien.
Sama halnya dengan HTML, CSS juga distandarisasi oleh W3C. Standar CSS yang paling baru adalah
CSS versi 2.1 yang diresmikan pada tanggal 19 Juli 2007.
Seperti yang sudah dijelaskan sebelumnya, file CSS akan berada terpisah dengan file-file HTML yang
Anda miliki. Oleh karena itu Anda harus menghubungkan file HTML yang ingin Anda format dengan
sebuah file CSS.
Namun, Sebelum Anda dapat menghubungkan file HTML dengan file CSS, tentunya Anda harus
membuat file CSS yang ingin Anda hubungkan terlebih dahulu. Proses pembuatan file CSS sangatlah
mudah, Anda cukup menggunakan text editor favorit Anda dan menyimpannya dengan menggunakan
ekstensi .css. Sebagai awal, cobalah membuat sebuah file CSS yang berisikan sebagai berikut :
h1 {
color: red;
}
h2 {
color: green;
}
p {
color: blue;
}
Lalu simpanlah dengan nama tampilan.css di dalam folder yang sama dengan file HTML yang ingin
Anda hubungkan dengan file CSS tersebut. Jika Anda perhatikan baik-baik, Anda akan menggunakan
nilai-nilai atribut yang terdapat pada atribut style di dalam sebuah file CSS. Dalam contoh ini, akan
digunakan nilai atribut color yang berfungsi untuk memberikan warna pada suatu teks.
Setelah itu, Anda dapat menghubungkan file-file HTML dengan file CSS tersebut. Proses
menghubungkan file HTML dengan file CSS tersebut dapat Anda lakukan dengan menggunakan elemen
link yang diletakkan pada elemen head dalam file HTML Anda. Elemen ini akan memerlukan beberapa
atribut, yaitu href, rel, dan type. Atribut href memiliki fungsi yang sama seperti atribut href pada
elemen a, yaitu untuk menentukan alaman dari file CSS yang akan ingin dihubungkan. Sedangkan
elemen rel dan type berfungsi untuk memberikan keterangan bahwa ini adalah sebuah file tampilan
(stylesheet) dengan tipe file CSS.
SINTAKS :
<link href="alamat_file_css" rel="stylesheet" type="text/css">
CONTOH :
<!doctype html>
<html>
<head>
<title>Judul</title>
<link href="tampilan.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.
</body>
</html>
Sebuah file CSS memiliki struktur yang berbeda dengan file HTML. Jika pada sebuah file HTML Anda
akan menggunakan tag, atribut, dan elemen, maka dalam sebuah file CSS Anda akan menggunakan
suatu aturan khusus yang dikenal dengan istilah CSS Rule, atau aturan CSS, dimana aturan tersebut
terdiri dari berbagai macam komponen, yaitu selector, property, dan value. Secara garis besar, sintaks
untuk menuliskan sebuah aturan CSS sangatlah sederhana, yaitu :
3.3.1 SELECTOR
Selector berfungsi untuk menentukan elemen atau komponen HTML manakah yang akan
diberlakukan sebuah aturan CSS. Ada tiga macam selector yang dapat Anda gunakan, yaitu tag selector,
class selector, dan ID selector.
Tag selector adalah sebuah selector yang akan menerapkan aturan CSS kepada sebuah tag atau
elemen yang terdapat pada file HTML. Perhatikanlah contoh berikut ini :
body { ... }
Selector ini akan menerapkan aturan CSS untuk elemen body dan semua elemen lain yang terdapat
di dalamnya.
form p { ... }
Selector ini akan menerapkan aturan CSS untuk elemen p dan semua elemen lain yang terdapat di
dalamnya apabila elemen p tersebut terletak di dalam elemen form.
ul li p { ... }
Selector ini akan menerapkan aturan CSS untuk elemen p dan semua elemen lain yang terdapat di
dalamnya apabila elemen p terletak di dalam elemen li yang juga terletak di dalam elemen ul.
Dalam penggunaanya, sebuah aturan yang diberikan dengan menggunakan tag selector akan
berlaku untuk semua elemen sesuai yang terdapat di dalam file HTML Anda. Sebagai contoh, apabila di
dalam sebuah file HTML terdapat sepuluh buah paragraf dengan menggunakan elemen p, dan di dalam
file CSS yang dihubungkan memiliki aturan untuk elemen p, maka semua paragraf yang terdapat di
dalam file HTML tersebut akan memiliki format yang sama sesuai dengan aturan yang diterapkan pada
file CSS.
Mungkin ada kalanya Anda ingin memberikan warna merah pada paragraf pertama dan warna biru
pada paragraf kedua. Jika hanya menggunakan tag selector, maka tentunya hal ini tidak dapat dilakukan.
Untuk melakukan hal seperti ini Anda dapat menggunakan class selector atau ID selector.
Class selector adalah sebuah selector yang akan menerapkan aturan CSS kepada semua tag atau
elemen yang memiliki atribut class yang sesuai. Untuk menggunakan aturan seperti ini, Anda harus
memberikan atribut tambahan class untuk setiap elemen HTML dimana Anda ingin memberlakukan
aturan yang terdapat pada file CSS.
SINTAKS :
<elemen class="nama_kelas">
CONTOH :
<p class="merah">
Untuk membuat aturan CSS seperti ini sangatlah mudah, class selector selalu diawali dengan sebuah
titik. Perhatikanlah contoh berikut ini :
.red { ... }
Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk
atribut classnya.
p.red { ... }
Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut
classnya
p .red { ... }
Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk
atribut classnya apabila elemen tersebut berada di dalam elemen p.
Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut
classnya apabila elemen tersebut berada di dalam elemen form.
Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut
classnya apabila elemen tersebut berada di dalam elemen form yang memiliki nilai login untuk atribut
classnya.
3.3.1.3 ID SELECTOR
ID selector pada dasarnya selector memiliki fungsi yang sama dengan class selector, hanya saja
atribut tambahan yang digunakan pada elemen-elemen yang tedapat di dalam file HTML adalah atribut
id.
SINTAKS :
<elemen id="nama_id">
CONTOH :
<p id="merah">
Selectornya sendiri menggunakan tanda pagar (#). Perhatikanlah contoh berikut ini :
#home { ... }
Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai home untuk
atribut IDnya.
p#green { ... }
Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai green untuk atribut
IDnya.
Properti (property) berfungsi untuk menentukan faktor tampilan yang ingin dirubah, seperti warna
dan jenis tulisan, warna latar belakang, posisi dan sebagainya. Nilai dari sebuah property disebut
dengan istilah value.
Dalam penulisannya, property dan value selalu berpasangan, dipisahkan oleh sebuah titik dua, dan
diakhiri dengan sebuah titik koma. Sebuah aturan CSS juga dapat memiliki lebih dari satu properti.
Perhatikanlah contoh berikut ini :
Aturan dengan ini memiliki sebuah properti, yaitu background dengan nilai (value) black.
Aturan dengan ini memiliki dua buah properti, yaitu border-bottom dengan nilai (value) 1px
dotted dan color dengan nilai red.
Pemilihan warna yang tepat dapat membuat halaman web Anda menjadi lebih menarik untuk
dilihat. Walaupun begitu, perlu diperhatikan bahwa pemilihan warna adalah sebuah hal yang subjektif.
Warna yang menurut Anda bagus bisa jadi tidak disukai oleh pengunjung halaman web Anda. Seperti
yang sudah Anda pelajari sebelumnya, ada dua properti yang dapat Anda gunakan untuk memberikan
warna pada halaman web Anda, yaitu property background dan color.
SINTAKS :
selector { background: value; }
CONTOH :
.merah { color: red; }
.jingga { color: rgb(255, 127, 0); }
.kuning { color: #ffff00; }
.hijau { color: #0f0; }
.biru { color: #0000ff; }
.nila { color: rgb(127, 0, 255); }
.ungu { color: purple; }
Properti background berfungsi untuk menentukan warna latar balakang. Nilai yang dapat
digunakan pada properti ini ada empat macam, yaitu nama warna, kode RGB, kode heksadesimal, dan
kode heksadesimal pendek.
Ada 18 nama warna yang dapat digunakan, yaitu aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white,yellow, dan transparent. Penggunaan
nama warna hanya menyediakan jumlah warna yang sangat terbatas, walaupun bagitu, penggunaan
nama warna seperti ini sangat mudah dipahami.
Dalam penggunaan kode RGB, maka warna akan didefinisikan dalam bentuk rgb(red, green, blue).
Angka pertama menentukan intensitas warna merah, angka kedua untuk hijau, dan angka ketiga untuk
biru, dimana angka-angka ini berkisar dari 0 (intensitas terendah) hingga 255 (intensitas tertinggi).
Kode heksadesimal adalah cara yang paling umum digunakan, kode ini akan mendefinisikan sebuah
warna dalam bentuk #RRGGBB. Dua karakter pertama menentukan intensitas warna merah, dua
karakter kedua untung hijau, dan dua huruf karakter untuk biru. Karakter yang digunakan adalah 0
(intensitas terendah), 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E dan F (intensitas tertinggi). Kode heksadesimal
singkat menyingkat 6 karakter pada kode heksadesimal menjadi 3 karakter dalam bentuk #RGB.
SINTAKS :
selector { color: value; }
Sedangkan properti color berfungsi untuk menentukan warna huruf. Nilai yang digunakan pada
properti ini sama dengan nilai yang digunakan pada properti background.
Selain warna, Anda juga dapat memformat teks yang ada dalam halaman web Anda dengan
menggunakan CSS. Anda dapat merubah jenis, ukuran, dan bahkan dekorasi huruf.Kesemua properti ini
juga telah Anda pelajari pada bab sebelumnya.
SINTAKS :
selector { font-family: value; }
CONTOH :
body { font-family: "trebuchet ms", "verdana", "sans-serif"; }
.trebuchet { font-family: "verdana"; }
.times { font-family: "times new roman"; }
.courier { font-family: "courier new"; }
Properti font-family berfungsi untuk menentukan jenis huruf. Jenis huruf dituliskan di dalam tanda
kutip dua. Anda dapat memberikan lebih dari satu jenis huruf dengan menggunakan spasi sebagai
pemisah. Jenis huruf tambahan yang diberikan akan berfungsi sebagai alternatif apabila jenis huruf
yang sebelumnya tidak ditemukan pada komputer yang digunakan oleh pengunjung halaman web Anda.
SINTAKS :
selector { font-size: value; }
CONTOH :
h1 { font-size: xx-large; }
h2 { font-size: 16pt; }
p { font-size: 16px; }
Property font-size berfungsi untuk menentukan ukuran huruf. Ukuran huruf dapat dinyatakan
dalam tiga macam satuan, yaitu nama ukuran, pt, dan px.
Ada 7 nama ukuran yang dapat digunakan, mulai dari yang terbesar xx-large, x-large, large,
medium, small, x-small, hingga yang terkecil xx-small. Sama seperti penggunaan nama warna,
penggunaan nama ukuran huruf memberikan pilihan yang lebih sedikit tetapi mudah untuk dipahami.
Satuan pt (point) adalah satuan ukuran huruf yang umum digunakan dalam tipografi (percetakan),
sedangkan satuan px (pixel/piksel) adalah satuan ukuran huruf berdasarkan jumlah piksel dari sebuah
karakter. Untuk kedua satuan ini, semakin besar nilainya maka akan semakin besar pula ukuran
hurufnya.
SINTAKS :
selector { font-weight: value; }
CONTOH :
.tebal { font-weight: bold; }
Property font-weight dengan nilai bold memiliki fungsi yang sama dengan tag strong, yaitu
memberikan cetak tebal kepada sebuah teks. Untuk mengembalikan seperti semula dapat
menggunakan nilai normal.
SINTAKS :
selector { font-style: value; }
CONTOH :
.miring { font-style: italic; }
Property font-style dengan nilai italic memiliki fungsi yang sama dengan tag em, yaitu memberikan
cetak miring kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai
normal.
SINTAKS :
selector { font-variant: value; }
CONTOH :
.kapital-kecil { font-variant: small-caps; }
Property font-variant dengan nilai small-caps berfungsi untuk memberikan efek kapital kecil
(small-caps) kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai
normal.
SINTAKS :
selector { text-deocation: value; }
CONTOH :
.garis-bawah { text-decoration: underline; }
.garis-tengah { text-decoration: line-through; }
.garis-atas { text-decoration: overline; }
.kedip { text-decoration: blink; }
Property text-decoration berfungsi untuk memberikan dekorasi tambahan terhadap sebuah teks.
Nilai yang dapat digunakan adalah underline (garis-bawah), overline (garis-atas), line-through
(garis-tengah), blink (berkedap-kedip), dan none (tanpa dekorasi).
SINTAKS :
selector { text-transform: value; }
CONTOH :
.kapital { text-transform: uppercase; }
Property text-transform berfungsi untuk merubah kapitalisasi huruf dari sebuah teks. Nilai yang
dapat digunakan adalah capitalize (Huruf Besar Pada Awal Kata), uppercase (BESAR SEMUA),
lowercase (kecil semua), dan none (tanpa perubahan).
SINTAKS :
selector { text-align: value; }
CONTOH :
.rata-tengah { text-align: center; }
.rata-kanan { text-align: left; }
Property text-align berfungsi untuk mengatur proses perataan dari sebuah teks. Nilai yang dapat
digunakan adalah left (rata kiri), center (rata tengah), right (rata kanan), dan justify (rata kiri dan
kanan).
SINTAKS :
selector { text-indent: value; }
CONTOH :
.rata-kiri {
text-indent: 100px;
text-align: left;
}
.rata-kanan-kiri {
text-indent: 50pt;
text-align: justify;
}
Property text-indent berfungsi untuk memberikan indentasi pada baris pertama dari sebuah
paragraf menggunakan satuan pt atau px.
Margin dapat digunakan untuk mengatur jarak antara sebuah elemen dengan elemen lainnya pada
sebuah halaman web. Pemberian jarak yang tepat tentunya dapat digunakan untuk membuat isi dari
halaman web Anda mudah dibaca.
Properti margin digunakan untuk memberikan jarak. Satuan yang digunakan adalah px (piksel).
Jika Anda ingin mengatur jarak dengan lebih mendetail, Anda dapat menggunakan properti margin-top
(jarak dengan elemen yang berada di atas), margin-bottom (bawah), margin-left (kiri), dan margin-
right (kanan).
SINTAKS :
selector { margin: value; }
selector{ margin-top: value; margin-bottom: value; margin-left: value; margin-right:
value; }
CONTOH (HTML) :
<!doctype html>
<html>
<head>
<title>Galeri Foto</title>
<link href="margin.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Galeri Foto</h1>
<img src="foto1.jpg">
<img src="foto2.jpg">
<br>
<img src="foto3.jpg">
<img src="foto4.jpg">
<br>
</body>
</html>
CONTOH (CSS) :
h1 {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
Selain margin, Anda juga dapat memberikan border dan padding untuk memberikan batasan yang
lebih jelas lagi antara sebuah elemen dengan elemen lain yang terdapat pada halaman web Anda.
Margin, border, dan padding dalam kesatuannya disebut dengan istilah box-model. Untuk lebih jelas
mengenai perbedaan diantaranya, perhatikanlah diagram berikut ini :
Padding adalah jarak yang membatasi antara isi dari sebuah elemen dengan border, sedangkan
margin adalah jarak yang membatasi antara border dengan elemen lainnya.
SINTAKS :
selector { border: ketebalan tipe warna; }
selector{ border-top: ketebalan tipe warna; border-bottom: ketebalan tipe warna; border-
left: ketebalan tipe warna; border-right: ketebalan tipe warna; }
Properti border berfungsi untuk memberikan garis batas atau bingkai terhadap sebuah elemen.
Properti ini memerlukan tiga buah nilai yang harus ditulis secara berurutan, yaitu ketebalan dalam
satuan px, diikuti tipe yang dapat berupa solid (garis lurus), dotted (titik-titik), dashed (garis putus-
putus), dan none (tanpa border), dan diakhiri dengan warnagaris. Seperti halnya dengan properti
margin, Anda juga dapan menggunakan properti boder secara mendetail.
SINTAKS :
selector { padding: value; }
selector{ padding-top: value; padding-bottom: value; padding-left: value; padding-right:
value; }
Properti padding berfungsi untuk memberikan jarak antara garis batas atau bingkai dengan isi dari
sebuah elemen. Satuan yang digunakan adalah px (piksel). Properti padding juga dapat digunakan
secara mendetail.
CONTOH (HTML) :
<!doctype html>
<html>
<head>
<title>Galeri Foto</title>
<link href="border.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Galeri Foto</h1>
<img src="foto1.jpg">
<img src="foto2.jpg">
<br>
<img src="foto3.jpg">
<img src="foto4.jpg">
<br>
</body>
</html>
CONTOH (CSS) :
h1 {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
img {
margin: 5px;
border: 5px solid #729fcf;
padding: 5px;
}
Ketika Anda membuat link dalam halaman web, umumnya link tersebut berwarna biru, tetapi
setelah link tersebut diklik, maka warnanya akan berubah menjadi ungu. Hal ini sebenarnya
dimaksudkan untuk mempermudah pengunjung halaman web Anda untuk membedakan link mana
yang sudah dikunjungi dan mana yang belum dikunjungi. Apabila warna yang tersebut tidak serasi
dengan warna-warna lain yang digunakan pada halaman web Anda, tentunya Anda ingin merubahnya.
Untuk melakukan hal ini, Anda dapat menggunakan bantuan pseudo-class, yaitu sebuah kelas khusus
yang berfungsi untuk memberikan aturan CSS pada sebuah elemen berdasarkan dari keadaan elemen
tersebut. Misalkan keadaan jika kursor mouse berada di atas elemen tersebut, atau keadaan link yang
telah dikunjungi.Penulisan psseudo-class selalu diawali dengan tanda titik dua.
SINTAKS :
selector:hover {property:value; }
Pseudo-class :hover berfungsi untuk membedakan aturan CSS yang diberikan kepada sebuah
elemen apabila kursor (penunjuk) mouse berada di atas elemen tersebut. Pseudo-class hover dapat
digunakan untuk semua selector.
SINTAKS :
a:visited {property:value; }
Pseudo-class :visited berfungsi untuk membedakan aturan CSS yang diberikan kepada elemen a
apabila link tersebut sudah pernah dikunjungi. Berbeda dengan :hover, pseudo-class ini hanya dapat
digunakan untuk tag selector a saja.
CONTOH (HTML) :
<!doctype html>
<html>
<head>
<title>Link</title>
<link href="pseudo_class.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Selamat datang!</h1>
<p>Silahkan pilih halaman yang ingin Anda kunjungi :
<ul>
<li><a href="profil.html">Profil</a>
<li><a href="galeri.html">Galeri Foto</a>
<li><a href="http://saya.blogspot.com">Blog</a>
<li><a href="http://www.facebook.com/saya">Facebook</a>
</ul>
</body>
</html>
CONTOH (CSS) :
a {
color: #204a87;
text-decoration: none;
}
a:hover {
color: #729fcf;
text-decoration: underline;
}
a:visited {
color: #204a87;
text-decoration: none;
}
Gambar latar yang tepat juga dapat menjadi sebuah sentuhan tersendiri yang dapat membuat
halaman web Anda tampil lebih menarik. Walaupun begitu, penggunaan gambar latar sebaiknya tidak
berlebihan, karena pengguaan gambar latar yang tidak baik akan membuat teks yang terdapat pada
halaman web Anda menjadi sulit untuk dibaca.
SINTAKS :
selector {background-image: url('alamat_gambar'); }
Properti background-image berfungsi untuk memberikan gambar latar belakang kepada sebuah
elemen. Nilai dari url menggunakan konsep yang sama seperti nilai dari atribut src pada elemen img.
SINTAKS :
selector { background_repeat: value; }
Properti background-repeat berfungsi untuk mengulang gambar latar berdasarkan nilai properti
ini. Nilai yang dapat digunakan adalah repeat-x (mengulang secara horizontal), repeat-y (mengulang
secara vertikal), repeat (mengulang secara horizontal dan vertikal), dan no-repeat (tidak mengulang).
CONTOH (HTML) :
<!doctype html>
<html>
<head>
<title>Judul</title>
<link href="latar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus
eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus
pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum
metus.
</body>
</html>
CONTOH (CSS) :
body {
background-image: url('gradasi.png');
background-repeat: repeat-x;
font-family: "trebuchet ms";
font-size: 14px;
}
h1 {
margin-top: 50px;
margin-bottom: 10px;
border-bottom: 1px solid;
padding-bottom: 3px;
font-weight: normal;
}
h2 {
margin-bottom: -15px;
font-weight: normal;
}
Pada bab 3, Anda sudah belajar dasar-dasar dari CSS yang dapat digunakan untuk memberikan
format tampilan kepada halaman web Anda. Namun, mungkin Anda merasa tata letak dari halaman web
Anda masih bersifat sangat sederhana, yaitu terus menerus dari atas ke bawah tanpa ada variasi seperti
kolom, menu navigasi, dan sebagainya.
Dahulu, pengaturan tata letak dari sebuah halaman web dibuat dengan menggunakan banyak tabel
yang saling berhubungan antara satu dengan lainnya. Pada saat itu metode ini memang dinilai cukup
efektif, namun penggunaan tabel seperti ini ternyata adalah hal yang salah. Elemen tabel yang
didefinisikan dalam sebuah dokumen HTML hanya berfungsi untuk menampilkan data yang bersifat
tabular, bukanlah berfungsi untuk mengatur tata letak halaman web.
Oleh karena itu, ditemukanlah sebuah teknik baru yang dapat digunakan untuk mengatur tata letak
dari sebuah halaman web dengan menggunakan CSS. Teknik ini dikenal dengan istilah CSS layout atau
tableless layout. Teknik ini menggunakan elemen HTML div dan properti tertentu dari CSS untuk
menghasilkan efek tata letak yang tidak kalah dan bahkan jauh lebih baik apabila dibandingkan dengan
menggunakan tabel.
Pengelompokkan elemen-elemen dari sebuah halaman HTML ke dalam beberapa bagian adalah
dasar dari tata letak sebuah halaman web. Bagian-bagian tersebut antara lain adalah bagian judul,
navigasi, isi atau konten, dan penutup (header). Berikut adalah contoh dari beberapa macam tata letak
sebuah halaman web :
Penutup
Penutup Penutup
Dasar dari pembuatan tata letak seperti ini adalah penggunaan kolom. Kolom dapat dibuat dengan
membuat elemen div untuk setiap bagian dan memberikan properti CSS yang tepat untuk setiap
elemen tersebut. Cobalah terlebih dahulu membuat sebuah halaman web sebagai berikut :
CONTOH HTML :
<!doctype html>
<html>
<head>
<title>Layout 1</title>
<link href="layout1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="judul">
<h1>Lorem Ipsum</h1>
<h2>Lorem Ipsum Dolor sit Amet, Consectetur Adipiscing Elit</h2>
</div>
<div class="navigasi">
<h1>Menu Utama</h1>
<ul>
<li><a href="#">Lorem Ipsum</a>
<li><a href="#">Dolor sit Amet</a>
<li><a href="#">Consectetur</a>
<li><a href="#">Adispiscing Elit</a>
</ul>
</div>
<div class="isi">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum
tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus.
Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in
dictum metus.
<h2>Dolor sit Amet</h2>
<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis
placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna
sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit
amet est augue.
<h2>Consectetur Adipiscing Elit</h2>
<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum
vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc
sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.
</div>
<div class="penutup">
<p class="tengah">Halaman ini dibuat oleh saya
</div>
</body>
</html>
CONTOH CSS :
* { margin: 0px; padding: 0px; }
body {
width: 960px; margin: auto;
background-image: url('gradasi.png'); background-repeat: repeat-x;
padding: 20px;
color: #2e3436; font-family: "trebuchet ms"; font-size: 10pt;
}
Pada contoh di atas, halaman web dibagi manjadi empat bagian, yaitu judul, navigasi, isi dan
penutup dengan menggunakan tata letak sebagai berikut :
Judul
Navigasi
Lebar :
180px Isi
Lebar : 760px
Batas
kanan :
20px
Penutup
Berdasarkan kepada statistik pada bulan Juni tahun 2010, 24% pengguna Internet masih
menggunakan layar monitor dengan resolusi 1024x768 piksel. Anda sebagai seorang pengembang web
tentunya harus dapat memenuhi kebutuhan setiap pengunjung web Anda. Lebar halaman 960px adalah
ukuran yang cocok untuk resolusi 1024x768 dan juga tidak terlihat buruk pada resolusi yang lebih
tinggi.
Sekarang marilah kita membahasa satu-persatu langkah-langkah yang diperlukan untuk membuat
tata letak seperti halaman web di atas.
SINTAKS :
<div class="nama_kelas">isi</div>
Elemen div (division) berfungsi untuk mengelompokkan beberapa elemen menjadi sebuah bagian
dari halaman web. Elemen ini pada umumnya menggunakan atribut class untuk menentukan aturan
CSS yang berlaku dalam elemen tersebut. Selain class, atribut id juga dapat digunakan dalam elemen ini.
Pada contoh di atas, halaman web tersebut dikelompokkan ke dalam beberapa bagian, yaitu bagian
judul, navigasi, isi, dan penutup dengan menggunakan elemen div pada setiap bagiannya.
SINTAKS :
* { margin: 0px; padding: 0px; }
Selector * adalah sebuah selector khusus dimana aturan CSS dalam selector ini akan berlaku kepada
semua elemen yang tedapat dalam halaman web.
Pada contoh di atas, digunakan properti margin dan padding dengan nilai 0px. Hal ini
dimaksudkan untuk mengatur ulang margin dan padding yang sudah ada secara otomatis pada setiap
aplikasi web browser. Margin dan padding otomatis ini akan berbeda-beda ukurannya tergantung dari
web browser yang digunakan. Oleh karena itu, ada baiknya Anda mengatur ulang margin dan padding
ini agar tampilan halaman web Anda akan sama untuk setiap web browser.
SINTAKS :
selector { width: lebar; }
Properti width berfungsi untuk menentukan ukuran lebar dari sebuah elemen. Satuan yang
digunakan dapat berupa px, pt dan % (persentasi).
SINTAKS :
selector { margin: auto; }
Properti margin dengan nilai auto berfungsi untuk meletakkan elemen pada bagian tengah secara
otomatis. Hal ini sangat berguna apibila ukuran lebar dari halaman web Anda lebih kecil daripada
resolusi monitor yang digunakan oleh pengunjung halaman web Anda. Jika Anda tidak menggunakan
properti ini, maka halaman web Anda akan tertampil di bagian kiri.
SINTAKS :
selector { float: left; }
Properti float berfungsi untuk membuat sebuah elemen “mengambang”, maksudnya adalah, elemen
yang mengambang tersebut akan ditampilkan secara bertumpuk dengan elemen lainnya. Mudahnya,
gunakanlah properti ini untuk setiap bagian yang ingin Anda buat sebagai sebuah kolom. Pada contoh
di atas, properti ini digunakan pada bagian navigasi dan isi.
SINTAKS :
selector { clear: both; }
Pada contoh di atas, bagian penutup sudah tidak lagi menggunakan kolom sehingga diberikan
aturan CSS dengan propeti clear: both. Jika setelah kolom selesai tidak ada elemen lagi, maka properti
ini tidak perlu digunakan.
Kolom tidak hanya dapat digunakan untuk mengatur tata letak utama dari sebuah halaman web,
tetapi kolom juga dapat digunakan untuk membuat kolom teks seperti pada surat kabar dan majalah.
Anda juga dapat membuat sebuah kolom di dalam kolom lainnya. Cobalah contoh berikut ini :
CONTOH HTML :
<!doctype html>
<html>
<head>
<title>Layout 2</title>
<link href="layout2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="judul">
<h1>Lorem Ipsum</h1>
<h2>Lorem Ipsum Dolor sit Amet, Consectetur Adipiscing Elit</h2>
</div>
<div class="navigasi">
<h1>Menu Utama</h1>
<ul>
<li><a href="#">Lorem Ipsum</a>
<li><a href="#">Dolor sit Amet</a>
<li><a href="#">Consectetur</a>
<li><a href="#">Adispiscing Elit</a>
</ul>
</div>
<div class="isi">
<div class="kolom-1">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum
tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus.
Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in
dictum metus.
</div>
<div class="kolom-2">
<h2>Dolor sit Amet</h2>
<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel
mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet
magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec
sit amet est augue.
</div>
<div class="kolom-3">
<h2>Consectetur Adipiscing Elit</h2>
<p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum
vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc
sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla
scelerisque nibh, vitae malesuada nisi mauris in nisi.
</div>
<div class="tanpa-kolom">
<h2>Dolor sit Amet</h2>
<p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel
mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet
magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec
sit amet est augue.
</div>
</div>
<div class="penutup">
<p class="tengah">Halaman ini dibuat oleh saya
</div>
</body>
</html>
CONTOH CSS :
* { margin: 0px; padding: 0px; }
body {
width: 960px; margin: auto;
background-image: url('gradasi.png'); background-repeat: repeat-x;
padding: 20px;
color: #2e3436; font-family: "trebuchet ms"; font-size: 10pt;
}
Basis data, atau yang juga dikenal dengan istilah database, adalah sebuah kumpulan dari banyak
data-data yang terorganisir berdasarkan aturan-aturan tertentu. Sebuah halaman atau situs web yang
bersifat dinamis akan menggunakan basis data sebagai tempat untuk menyimpan data.
Basis data sendiri bukanlah merupakan sebuah aplikasi, melainkan hanyalah sebuah konsep
tentang bagaimana menyimpan dan mengorganisir data. Aplikasi yang berfungsi untuk membuat dan
mengatur data-data yang berada di dalam sebuah basis data disebut dengan Database Management
System (DBMS / sistem manajemen basis data).
Sebagian besar dari aplikasi DBMS menggunakan konsep penyimpanan data yang dikenal dengan
istilah Relational Database Management System (RDBMS / sistem manajemen basis data relasional).
Konsep RDBMS ditemukan oleh E. F. Codd, seorang ahli komputer Inggris pada tahun 1970 melalui
karya tulisnya yang berjudul “A Relational Model of Data for Large Shared Data Banks”. Berdasarkan
konsep ini, data disimpan dalam tabel-tabel yang saling berhubungan.
Ada banyak aplikasi yang termasukan ke dalam kategori DBMS, diantaranya adalah Microsoft
Access, Microsoft SQL Server, Oracle DB, IBM DB2, PostgreSQL, dan MySQL. Namun, MySQL adalah
sebuah aplikasi DBMS yang paling populer untuk penggunaan situs web. Hampir semua penyedia
layanan hosting yang ada mendukung penggunaan aplikasi DBMS ini.
Setiap basis data yang ada memiliki berbagai macam komponen yang digunakan untuk menyimpan
dan mengorganisir data. Dalam sistem manajemen basis data relasional, tabel adalah komponen yang
paling penting di dalamnya. Tabel sendiri terdiri dari beberapa komponen lain yang lebih kecil, yaitu
baris (row) dan kolom (column). Sedangkan tabel-tabel yang saling berhubungan satu sama lainnya
akan tergabung dalam sebuah skema.
Sebuah tabel berfungsi untuk menyimpan sekumpulan data dari entitas yang sama. Entitas, atau
yang juga dikenal dengan istilah entity, dapat dikatakan sebagai sebuah benda yang dapat berdiri
sendiri dan dibedakan antara satu dengan lainnya (dapat diidentifikasi). Mudahnya, Anda dapat
menganggap entitas sebagai sebuah objek di dunia nyata, sebagai contoh, “siswa” adalah sebuah entitas,
“barang” adalah sebuah entitas, “lagu” adalah sebuah entitas dan sebagainya.
Setiap entitas akan memiliki sifat atau karakteristik unik di dalamnya. Sifat atau karakteristik dari
sebuah entitas dikenal dengan istilah atribut. Sebagai contoh, entitas siswa dapat memiliki atribut
berupa nomor induk, nama, jenis kelamin, dan tempat & tanggal lahir, sedangkan entitas sebuah barang
dapat memiliki atribut berupa nomor kode, nama barang, harga satuan, dan berat. Dalam sistem
manajemen basis data relasional, atribut dari sebuah entitas akan menjadi sebuah kolom dari suatu
tabel.
Jika kolom dari suatu tabel merepresentasikan atribut dari sebuah entitas, maka baris dari suatu
tabel dalam sistem manajemen basis data relasional merepresentasikan sebuah data. Setiap data yang
tersimpan dalam tabel tersebut harus memiliki minimal satu buah atribut yang memiliki nilai yang unik,
dimana maksud dari unik disini adalah tidak ada data yang memiliki nilai sama untuk sebuah atribut.
Sebagai contoh, tidak boleh ada siswa yang memiliki nomor induk yang sama. Atribut yang unik seperti
ini berfungsi agar sistem manajemen basis data dapat membedakan (mengidentifikasi) antara satu data
dengan lainnya. Atribut seperti ini dikenal dengan istilah primary key.
Selanjutnya, tabel-tabel yang saling berhubungan satu sama lain akan membentuk sebuah skema.
Skema digunakan untuk memisahkan tabel-tabel yang ada di dalam sebuah basis data secara fungsional.
Sebagai contoh, tabel siswa, nilai, dan mata pelajaran dapat tergabung dalam sebuah skema basis data
pendidikan, sedangkan tabel barang, pelanggan, dan transaksi dapat tergabung dalam sebuah skema
basis data penjualan. Sebuah aplikasi yang menggunakan sebuah sistem manajemen basis data untuk
menyimpan datanya pada umumnya akan berinteraksi dengan sebuah skema saja. Dalam beberapa
sistem manajemen basis data, skema juga dikenal dengan istilah database.
Seperti yang sudah dijelaskan sebelumnya sistem manajemen basis data relasional adalah sebuah
sistem manajemen basis data yang menyimpan tabel-tabel yang saling berhubungan. Maksud dari
berhubungan disini adalah sebuah data yang tersimpan dalam sebuah tabel memiliki hubungan dengan
data lain yang tersimpan dalam tabel yang berlainan pula. Sebagai contoh, setiap data siswa yang
disimpan di dalam tabel siswa akan memiliki hubungan dengan data nilai yang tersimpan di dalam
tabel nilai.
Untuk dapat menghubungkan data dari sebuah tabel dengan data pada tabel lainnya, sistem
manajemen basis data menggunakan sebuah atribut tambahan yang dikenal dengan istilah foreign key.
Atribut foreign key pada sebuah data berisikan referensi terhadap sebuah nilai primary key dari data
yang berhubungan pada tabel lainnya. Perhatikanlah ilustrasi berikut ini :
Pegawai
Kode Nama Kepala
Kepala Bagian
P1 Zahriah KB1
Kode Nama
P2 Yayuk KB2
KB1 Andi
P3 Windi KB1
KB2 Budi
P4 Vina KB1
P5 Umang KB2
Pada ilustrasi di atas nilai primary key dari tabel kepala bagian (KB1 dan KB2) digunakan sebagai
referensi pada tabel pegawai. Nilai dari primary key yang dijadikan referensi seperti inilah yang dikenal
dengan istilah foreign key.
Ada tiga macam relasi atau hubungan yang dapat dimiliki oleh sebuah data dalam suatu tabel, yaitu
hubungan satu-satu (one-to-one relationship), hubungan satu dengan banyak (one-to-many relationship),
dan hubungan banyak dengan banyak (many-to-many relationship).
Sesuai dengan namanya, hubungan satu-satu, atau yang juga dikenal dengan istilah one-to-one
relationship, adalah hubungan dari sebuah data dalam sebuah tabel dengan tepat satu data lain yang
berada dalam tabel yang berbeda. Sebagai contoh, setiap departemen hanya dikepalai satu orang
menteri, dan satu orang menteri hanya dapat mengepalai satu buah departemen.
Agar dapat lebih memahami one-to-one relationship, perhatikanlah ilustrasi berikut ini :
Departemen Pejabat
Kode Nama Kepala Kode Nama
A Keuangan P2 P1 Andi
B Pertahanan P3 P2 Budi
C Agama P1 P3 Cecep
Dalam one-to-many relationship, sebuah data dapat berhubungan dengan satu atau lebih data
lainnya, namun tidak sebaliknya. Sebagai contoh, sebuah kepala bagian dapat memiliki beberapa orang
anak buah, namun seorang anak buah hanya dapat memiliki satu kepala bagian saja.
Pegawai
Kode Nama Kepala
Kepala Bagian
P1 Zahriah KB1
Kode Nama
P2 Yayuk KB2
KB1 Andi
P3 Windi KB1
KB2 Budi
P4 Vina KB1
P5 Umang KB2
Jika dalam one-to-many relationship hanya sebuah data saja yang dapat berhubungan dengan
beberapa data lainnya dan tidak sebaliknya, maka dalam many-to-many relationship berlaku
sebaliknya. Sebagai contoh, seorang pelanggan dapat membeli berbagai macam produk yang berbeda-
beda, dan sebuah produk yang sama dapat dibeli oleh beberapa orang pelanggan yang berbeda-beda
pula.
Agar dapat lebih memahami many-to-many relationship, perhatikanlah ilustrasi berikut ini :
Barang
Kode Nama Pembeli
Pembeli
BR1 Laptop A1
Kode Nama
BR2 HP A1
A1 Andi
BR1 Laptop A2
A2 Budi
BR3 TV A1
BR3 TV A2
Dalam many-to-many relationship, akan diperlukan sebuah tabel perantara yang berfungsi untuk
menyimpan atribut tambahan apabila diperlukan. Kembali ke contoh di atas, dapat dilihat bahwa ada
banyak data yang berulang yang terdapat pada kedua macam tabel. Data yang berulang-ulang seperti
ini tentunya dapat menyebabkan berbagai macam masalah yang tidak diinginkan. Untuk many-to-many
relationship seperti ini ada baiknya jika dibuat sebuah tabel sementara seperti pada ilustrasi berikut
ini :
SQL (Structured Query Language), adalah sebuah bahasa khusus yang dapat digunakan untuk
berkomunikasi dan berinteraksi dengan sebuah sistem manajemen basis data. Perlu diperhatikan
bahwa SQL bukanlah merupakan sebuah bahasa pemrograman, tetapi SQL hanyalah sebuah bahasa
perantara yang dapat digunakan untuk mengambil dan memanipulasi data yang tersimpan di dalam
sebuah basis data.
Bahasa SQL adalah sebuah bahasa yang bersifat standar, maksudnya adalah setiap aplikasi sistem
manajemen basis data dapat mengenali dan menjalankan perintah-perintah yang diberikan dalam
bahasa SQL. Walaupun begitu, pada umumnya setiap aplikasi sistem manajemen basis data memiliki
perintah-perintah tambahan yang hanya dimiliki oleh aplikasi itu saja. Sebagai contoh, aplikasi MS SQL
Server memiliki fitur SQL tambahan yang dinamakan Transact-SQL atau T-SQL. Perintah-perintah
tambahan tersebut hanya dapat dimengerti oleh aplikasi yang bersangkutan saja, perintah-perintah
tambahan tersebut tidak akan dapat dimengerti oleh aplikasi sistem manajemen basis data lainnya.
Sebelum Anda dapat membuat tabel dan memasukkan data dengan menggunakan MySQL, Anda
perlu terlebih dahulu membuat skema untuk menyimpan tabel-tabel yang ingin Anda buat terlebih
dahulu. Hanya ada dua perintah yang umum digunakan dalam berkerja dengan skema, yaitu perintah
CREATE SCHEMA dan DROP SCHEMA.
Perintah CREATE SCHEMA berfungsi untuk membuat skema baru. Sedangkan perintah DROP
SCHEMA berfungsi untuk menghapus sebuah skema yang telah ada lengkap beserta tabel-tabel dan
seluruh data yang terdapat di dalamnya. Berhati-hatilah dalam menggunakan perintah DROP SCHEMA
karena apabila sebuah skema sudah di hapus, maka tidak akan dapat dikembalikan lagi seperti semula.
SINTAKS :
CREATE SCHEMA nama_skema
CONTOH :
CREATE SCHEMA data_toko
SINTAKS :
DROP SCHEMA nama_skema
CONTOH :
DROP SCHEMA data_toko
Dalam bekerja dengan tabel, ada tiga perintah penting yang perlu Anda ketahui, yaitu perintah
CREATE TABLE, ALTER TABLE, dan DROP TABLE.
Perintah CREATE TABLE berfungsi untuk membuat tabel di dalam sebuah skema. Perintah ini
diikuti dengan nama tabel yang ingin dibuat dan daftar kolom-kolom yang terdapat di dalamnya.
SINTAKS :
CREATE TABLEnama_tabel (
nama_kolom_1 tipe_data_kolom_1 keterangan_kolom_1,
nama_kolom_2 tipe_data_kolom_2 keterangan_kolom_2,
nama_kolom_3 tipe_data_kolom_3 keterangan_kolom_3,
...
)
CONTOH :
Contoh diatas akan membuat sebuah tabel yang bernama barang yang memiliki 4 buah kolom, yaitu
kolom kode_barang, nama_barang, harga_satuan, dan keterangan.
• Kolom kode barang memiliki tipe data INT (integer/bilangan bulat) dengan keterangan tambahan
AUTO_INCREMENT yang berfungsi untuk memasukkan nilai kedalam kolom tersebut secara
otomatis berurutan dan keterangan PRIMARY KEY yang berfungsi untuk menjadikan kolom
tersebut sebagai primary key.
• Kolom kategori barang memiliki tipe data INT. Keterangan NOT NULL berfungsi untuk menjadikan
kolom ini harus diisi dan tidak boleh dikosongkan. Keterangan REFERENCES berfungsi untuk
menjadikan kolom ini sebagai foreign key dengan referensi ke kolom primary key kode yang
terdapat pada tabel kategori. Keterangan ON UPDATE CASCADE berfungsi untuk merubah nilai
dari kolom ini secara otomatis apabila nilai dari kolom yang direferensikan pada tabel lain berubah.
Keterangan ON DELETE CASCADE berfungsi untuk menghapus secara otomatis data yang
berhubungan dengan data yang direferensikan apabila data yang direferensikan tersebut ikut
dihapus.
• Kolom nama barang memiliki tipe data VARCHAR (teks) dengan panjang maksimum 100
huruf/karakter. Kolom ini harus diisi dan tidak boleh dikosongkan.
• Kolom harga satuan memiliki tipe data DECIMAL (bilangan desimal) sepanjang 10 angka dengan 2
angka di belakag koma. Keterangan UNSIGNED berfungsi untuk menjadikan sebuah tipe data angka
hanya dapat menerima bilangan positif saja. Kolom ini juga harus diisi dan tidak boleh dikosongkan.
• Kolom keterangan memiliki tipe data TEXT (teks) dengan panjang tidak terbatas. Kolom ini boleh
tidak diisi.
Berikut adalah daftar tipe data yang dapat Anda gunakan dalam membuat tabel :
Perintah ALTER TABLE berfungsi untuk mengubah struktur dari suatu tabel. Ada tiga macam
perubahan yang dapat dilakukan, yaitu menambah kolom, mengubah kolom dan menghapus kolom.
Perlu diperhatikan bahwa menggunakan perintah ALTER TABLE terhadap sebuah tabel yang sudah
memiliki data dapat menyebabkan kerusakan dan/atau kehilangan data yang terdapat di dalamnya.
Oleh karena itu, pastikanlah struktur semua tabel Anda sudah benar sebelum mulai memasukkan data
ke dalamnya.
SINTAKS :
ALTER TABLEnama_tabelADDnama_kolom tipe_data_kolom keterangan_kolom
CONTOH :
ALTER TABLE barang ADD berat INT UNSIGNED NOT NULL
Perintah di atas berfungsi untuk menambahkan kolom berat dengan tipe data INT berjenis
UNSIGNED dan harus diisi.
SINTAKS :
ALTER TABLEnama_tabelCHANGEnama_kolom tipe_data_kolom keterangan_kolom
CONTOH :
ALTER TABLE barang CHANGE harga_satuan INT UNSIGNED NOT NULL
Perintah di atas berfungsi untuk mengubah tipe data kolom harga_satuan menjadi INT berjenis
UNSIGNED dan harus diisi.
SINTAKS :
ALTER TABLEnama_tabelDROPnama_kolom
CONTOH :
ALTER TABLE barang DROP keterangan
Perintah di atas berfungsi untuk menghapus kolom keterangan dari tabel barang.
Perintah DROP TABLE berfungsi untuk menghapus semua tabel beserta data-data yang terdapat di
dalamnya.
SINTAKS :
DROP TABLE nama_tabel
CONTOH :
DROP TABLEproduk
Ada empat macam operasi utama yang dapat dilakukan terhadap data yang tersimpan di dalam
sebuah tabel, yaitu create (memasukkan data), read (membaca data), update (mengubah data), dan
delete (menghapus data). Keempat operasi ini kerap disebut dengan istilah CRUD. Perintah-perintah
yang akan digunakan adalah perintah INSERTINTO, SELECT, UPDATE, dan DELETEFROM.
Perintah INSERT INTO berfungsi untuk memasukkan data ke dalam tabel. Ada dua macam cara
penggunaan perintah ini, yaitu dengan memasukkan data ke semua kolom atau hanya memasukkan
data ke kolom-kolom tertentu saja.
SINTAKS :
INSERT INTOnama_tabelVALUES (nilai_kolom_1, nilai_kolom_2, nilai_kolom_3, ...)
CONTOH :
INSERT INTO siswa VALUES (NULL, 'Ann Example', 'Jakarta', '04/08/1983', 'P')
Perintah di atas berfungsi untuk memasukkan nilai ke dalam tabel siswa. Penggunaan NULL berarti
nilai di dalam kolom tersebut akan dikosongkan. Untuk kolom yang menggunakan keterangan
AUTO_INCREMENT, harus digunakan nilai NULL sehingga sistem basis data akan memberikan nilai ke
dalam kolom tersebut secara otomatis. Perlu diperhatikan bahwa untuk data dengan tipe teks seperti
CHAR, VARCHAR, DATE, dan TEXT, Anda perlu menggunakan sebuah tanda kutip ('). Tanda kutip ini
berfungsi untuk membedakan nilai teks dengan nilai angka.
SINTAKS :
INSERT INTOnama_tabelVALUES (nilai_kolom_1, nilai_kolom_2, nilai_kolom_3, ...)
CONTOH :
INSERT INTO siswa VALUES (NULL, 'Ann Example', 'Jakarta', '04/08/1983', 'P')
Perintah SELECT berfungsi untuk mengambil data dari sebuah tabel. Ada banyak cara penggunaan
perintah SELECT tergantung dari kriteria data yang ingin diambil.
SINTAKS :
SELECT * FROMnama_tabel
CONTOH :
SELECT * FROM barang
Penggunaan perintah SELECT dengan bentuk ini akan mengambil semua data dan kolom yang
terdapat di dalam sebuah tabel. Pada contoh di atas, akan ditampilkan semua data yang terdapat di
dalam tabel barang.
SINTAKS :
SELECTkolom_1, kolom_2, kolom_3, ...FROMnama_tabel
CONTOH :
SELECT kode_barang, nama_barang FROM barang
Perintah SELECT seperti ini berfungsi untuk mengambil data dari sebuah tabel, namun hanya dari
kolom-kolom tertentu saja. Pada contoh di atas, akan ditampilkan kolom kode_barang, dan
nama_barang dari semua data yang terdapay di dalam tabel barang.
SINTAKS :
SELECT *|kolomFROMnama_tabelWHEREkondisi
CONTOH :
SELECT * FROM barang WHERE kode_kategori_barang = 1
SELECT * FROM barang WHERE harga_satuan >= 500.000
SELECT kode_barang, nama_barang, harga_satuan FROM barang WHERE nama_barang = 'Intel
Core i7-2600K'
Perintah SELECT seperti ini berfungsi untuk mengambil data dari sebuah tabel yang memenuhi
sebuah kondisi tertentu.
SINTAKS :
SELECT*|kolomFROMnama_tabelWHEREnama_kolomLIKEnilai
CONTOH :
SELECT * FROM barang WHERE nama_barang LIKE 'A%'
SELECT * FROM barang WHERE nama_barang LIKE '??7?'
Perintah SELECT seperti ini berfungsi untuk mencari data berdasarkan suatu nilai. Pada contoh
pertama, akan dilakukan pencarian terhadap barang dengan nama barang yang berawal dengan huruf A.
Tanda % berfungsi sebagai pengganti (wildcard) untuk satu atau lebih karakter. Sedangkan pada
contoh kedua akan dilakukan pencarian terhadap barang dengan nama barang yang terdiri dari empat
karakter dan karakter ketiga dari nama barang tersebut adalah 7. Tanda ? Berfungsi sebagai pengganti
untuk satu karakter.
SINTAKS :
SELECT*|kolomFROMnama_tabelWHEREkondisi_1AND|ORkondisi_2
CONTOH :
SELECT * FROM barang WHERE harga_satuan >= 100000 AND harga_satuan < 500000
SELECT * FROM barang WHERE nama_barang LIKE '%Radeon%' OR kode_kategori_barang = 16
SELECT * FROM barang WGERE nama_barang LIKE '%Intel%' AND kode_kategori_barang = 3 AND
harga_satuan <= 1500000
Perintah SELECT seperti ini berfungsi untuk mengambil data berdasarkan beberapa kondisi. Jika
menggunakan AND maka kedua kondisi harus terpenuhi, sedangkan jika menggunakan OR maka cukup
satu kondisi saja yang terpebuhi.
SINTAKS :
SELECT*|kolomFROMnama_tabelWHEREnama_kolomBETWEENnilai_bawahANDnilai_atas
CONTOH :
SELECT * FROM barang WHERE harga_satuan BETWEEN 500000 AND 750000
SELECT * FROM barang WHERE nama_barang BETWEEN 'd' AND 'j'
Perintah SELECT seperti ini berfungsi untuk mengambil data berdasarkan rentang dari suatu nilai.
SINTAKS :
SELECT*|kolom FROMnama_tabelWHEREnama_kolomIN(nilai_1, nilai_2, nilai_3, ...)
CONTOH :
SELECT * FROM barang WHERE kode_kategory_barang IN (1, 2, 3)
Perintah SELECT seperti ini berfungsi untuk mengambil data yang memiliki suatu nilai tertentu.
SINTAKS :
SELECT*|kolom FROMnama_tabelWHEREnama_kolomNOTIN(nilai_1, nilai_2, nilai_3, ...)
CONTOH :
SELECT * FROM barang WHERE kode_kategory_barang NOT IN (1, 2, 3, 5, 7, 9)
Perintah SELECT seperti ini berfungsi untuk mengambil data yang tidak memiliki suatu nilai
tertentu. Perintah ini adalah kebalikan dari perintah SELECT yang menggunakan IN.
SINTAKS :
SELECT *|kolomFROMnama_tabelWHEREnama_kolom IS NULL
CONTOH :
SELECT * FROM barang WHERE keterangan IS NULL
Perintah SELECT seperti ini berfungsi untuk mengambil data yang memiliki nilai yang kosong pada
suatu kolom.
SINTAKS :
SELECT *|kolomFROMnama_tabelWHEREnama_kolom IS NOT NULL
CONTOH :
SELECT * FROM barang WHERE keterangan IS NOT NULL
Perintah SELECT seperti ini berfungsi untuk mengambil data yang memiliki nilai (tidak kosong)
pada suatu kolom.Perintah ini adalah kebalikan dari perintah SELECT yang menggunakan IS NULL.
SINTAKS :
SELECT*|kolomFROMnama_tabel kondisiORDER BYnama_kolom[DESC]
CONTOH :
SELECT * FROM barang ORDER BY harga_satuan
SELECT kode_barang, nama_barang, harga_satuan WHERE kode_kategori_barang = 13 ORDER BY
harga_satuan DESC
Perintah SELECT seperti ini berfungsi untuk mengambil data dan menurutkannya berdasarkan
suatu kolom secara menaik (A sampai Z). Jika keterangan tambahan DESC digunakan, maka pengurutan
akan berjalan secara menurun (A sampai Z).
SINTAKS :
SELECTAVG|SUM|MAX|MIN|COUNT(kolom) FROMnama_tabel kondisi
CONTOH :
SELECT AVG(harga_satuan) FROM barang
SELECT MAX(harga_satuan) FROM barang WHERE kode_kategori_barang = 4
SELECT COUNT(kode_barang) FROM barang WHERE harga_satuan <= 250000
Perintah SELECT seperti ini berfungsi untuk menghitung rata-rata (AVG), jumlah (SUM), nilai
tertinggi (MAX), nilai terendah (MIN), dan jumlah data (COUNT) pada suatu kolom.
SINTAKS :
SELECTy.nama_kolom_1, y.nama_kolom_2, ..., x.nama_kolom_1, x.nama_kolom_2
FROMnama_tabel_1 x
JOINnama_tabel_2 y ON x.foreign_key = y.primary_key
CONTOH :
SELECT k.kode_kategori, k.nama_kategori, b.kode_barang, b.nama_barang, b.harga_satuan
FROM barang b
JOIN kategori k ON b.kode_kategori_barang = k.kode_kategori
Perintah SELECT seperti ini berfungsi untuk mengambil dari dari beberapa tabel yang memiliki
hubungan secara sekaligus.
Perintah UPDATE berfungsi untuk mengubah data yang terdapat di dalam sebuah tabel. Perlu
diperhatikan bahwa apabila tidak menggunakan kondisi dalam perintah ini, maka semua data yang
terdapat di dalam tabel tersebut akan terubah.
SINTAKS :
UPDATEnama_tabel
SETnama_kolom_1 = nilai_kolom_1, nama_kolom_2 = nilai_kolom_2, ...
WHERE kondisi
CONTOH :
UPDATE barang
SET nama_barang = 'nVidia GeForce GTX460 1GB'
WHERE kode_barang = 431
UPDATE barang
SET harga_satuan = 1500000, berat = 10
WHERE nama_barang LIKE 'Lian-Li%'
Perintah DELETE FROM berfungsi untuk menghapus data yang terdapat di dalam sebuah tabel.
Sama halnya dengan perintah UPDATE, apabila tidak menggunakan kondisi dalam perintah ini, maka
semua data yang terdapat di dalam tabel tersebut akan terhapus.
SINTAKS :
DELETE FROMnama_tabel
WHEREkondisi
CONTOH :
DELETE FROM barang
WHERE kode_kategori_barang = 5
Melakukan manajemen data yang terdapat di dalam sebuah basis data secara manual dengan
menggunakan perintah SQL sebenarnya bukanlah metode yang paling efisien. Perintah SQL sebaiknya
hanya digunakan oleh program aplikasi untuk mengakses data, bukan untuk melakukan manajemen
terhadap data.
Untuk melakukan manajemen terhadap data yang disimpan dengan menggunakan sistem
manajemen basis data MySQL, Anda dapat menggunakan phpMyAdmin. PhpMyAdmin adalah sebuah
aplikasi berbasis web yang dapat mempermudah proses manajemen data di dalam sebuah basis data
MySQL. Anda cukup melakukan klik melalui tampilannya tanpa perlu menggunakan perintah SQL.
PhpMyAdmin pada umumnya juga sudah diukung oleh banyak penyedia layanan hosting.
Agar data yang terdapat di dalam basis data Anda dapat digunakan oleh sebuah program aplikasi,
Anda harus terlebih dahulu membuat sebuah akun pengguna untuk aplikasi tersebut. Berikut adalah
langkah-langkah untuk membuat pengguna dengan menggunakan phpMyAdmin :
PHP, singkatan berulang dari PHP: Hypertext Preprocessor, adalah sebuah bahasa pemrograman
yang didesain secara spesifik untuk membuat sebuah situs web yang bersifat dinamis dan interaktif.
PHP adalah bahasa pemrograman web yang sangat populer, bahkan dapat dikatakan sebagai bahasa
pemrograman web yang paling banyak digunakan. Menurut survei dari Netcraft, ada lebih dari 20 juta
situs web yang dibuat dengan menggunakan PHP pada tahun 2007.
PHP pertama kali dikembangkan oleh Rasmus Lerdorf pada tahun 1995, dimana pada saat itu
kepanjangan dari PHP masih berupa Personal Home Page. PHP pada awalnya hanyalah ditujukan untuk
membuat sebuah situs web pribadi yang sederhana, namun PHP ternyata menjadi sangat populer dan
kemudian berkembang menjadi sebuah bahasa pemrograman web yang lengkap seperti sekarang ini.
Salah satu faktor utama yang berada di belakang kesuksesan ini adalah PHP merupakan sebuah
perangkat lunak free and open source. Semua orang dapat mendapatkan dan menggunakan PHP dengan
gratis dan bebas. PHP sendiri saat ini masih terus dikembangkan dengan dukungan dari sebuah
perusahaan yang bernama Zend Technologies.
Dalam penggunaannya, PHP akan menyisipkan perintah-perintah khusus di dalam sebuah dokumen
HTML. Perintah-perintah PHP pada umumnya dikenal dengan istilah PHP statement (pernyataan PHP).
Sebuah dokumen HTML yang telah disisipkan pernyataan-pernyataan PHP akan menjadi sebuah
dokumen PHP atau yang juga dikenal dengan istilah PHP script.
Seperti halnya ketika Anda mempelajari bahasa HTML, marilah terlebih dahulu membuat sebuah
program “Halo, Dunia!” dengan menggunakan bahasa PHP. Untuk membuat sebuah dokumen PHP,
caranya tidak jauh berbeda dengan membuat sebuah dokumen HTML. Anda cukup membuka aplikasi
penyunting berkas Anda dan mengetikkan skrip PHP dan HTML di dalamnya. Cobalah membuat sebuah
dokumen baru sebagai berikut ini :
<!doctype html>
<html>
<head>
<title>Halo, Dunia!</title>
</head>
<body>
<?php echo 'Halo, Dunia!'; ?>
</body>
</html>
Jika Anda menyimpan sebuah dokumen HTML dengan ekstensi berkas .html, maka untuk sebuah
dokumen PHP Anda perlu menggunakan ekstensi berkas .php. Oleh karena itu, simpanlah dokumen
tersebut dengan nama halo.php.
Sebuah halaman web yang menggunakan PHP tidak dapat langsung dibuka dengan menggunakan
peramban web. Hal ini disebabkan karena pernyataan-pernyataan PHP yang terdapat di dalamnya tidak
dapat dimengerti oleh sebuah peramban web. Melainkan, pernyataan-pernyataan tersebut harus
terlebih dahulu diproses oleh sebuah server web. Setelah proses selesai, barulah hasilnya dikirmkan ke
peramban web dalam bentuk dokumen HTML biasa.
Pada aplikasi server web Apache, semua dokumen PHP yang akan diproses cukup diletakkan di
dalam folder htdocs. Oleh karena itu, simpanlah dokumen PHP Anda pada folder ini. Jika Anda
melakukan instalasi Apache dengan menggunakan XAMPP pada sistem operasi Windows, folder ini
akan terletak di dalam C:\xampp.
Selain menyimpan dokumen PHP pada lokasi yang benar, Anda juga perlu menjalankan Apache
terlebih dahulu. Untuk melakukan ini, Anda dapat membuka aplikasi XAMPP Control Panel dari Start
Menu Anda. Pada jendela XAMPP Control Panel, nyalakanah server web Apache (dan MySQL, jika Anda
memerlukana) dengan menekan tombol Start yang ada pada masing-masing komponen.
Jika dokumen PHP sudah disimpan pada lokasi dan benar dan Apache sudah berjalan, bukalah
peramban web Anda lalu arahkan ke alamat http://localhost/halo.php untuk meminta Apache
memproses dokumen tersebut dan mengirimkan hasilnya ke peramban web Anda. Perlu diketahui
bahwa alamat localhost disini berarti server web tersebut berada pada komputer yang sama dengan
peramban web yang digunakan. Jika semua berjalan dengan lancar dan Anda dapat melihat teks “Halo,
Dunia!” pada peramban web Anda, maka Anda telah berhasil membuat halaman web dinamis pertama
Anda dengan menggunakan PHP. Selamat!
Tag ini adalah tag khusus yang digunakan untuk menyisipkan pernyataan-pernyataan PHP di antara
kode-kode HTML. Anda dapat menyisipkan sebanyak apapun pernyataan-pernyataan PHP yang Anda
inginkan di dalam tag ini. Anda juga diperbolehkan untuk menggunakan tag ini sebanyak yang Anda
inginkan di dalam sebuah dokumen PHP.
Perlu diperhatikan bahwa semua yang berada di dalam tag ini tidak akan dimunculkan pada
peramban web Anda. Jika Anda penasaran, cobalah melihat kode sumber dari halaman tersebut pada
peramban web Anda dengan melakukan klik kanan dan memilih lihat kode sumber halaman atau
view page source. Penyembunyian pernyataan-pernyataan PHP seperti ini akan menjadikan halaman
web dinamis Anda aman karena pengguna tidak akan dapat mengetahui proses yang dilakukan pada
server web.
Selain itu, perlu diketahui bahwa tag ini dapat diletakkan di mana saja, baik itu diluar elemen HTML,
di dalam sebuah tag, atau bahkan di dalam sebuah atribut. Sebagai contoh :
echo ...
Pernyataan echo berfungsi untuk menampilkan sesuatu di dalam peramban web. Perintah ini dapat
digunakan untuk menampilkan hasil dari proses yang telah dilakukan pada sebuah halaman web
dinamis.
Anda dapat menampilkan apa saja dengan menggunakan perintah echo, baik itu angka, teks, atau
bahkan tag dan elemen HTML. Hanya saja, untuk menampilkan data berupa teks (termasuk di
dalamnya tag dan elemen HTML), Anda perlu meletakkannya di dalam sepasang tanda kutip satu (‘).
Perlu diperhatikan bahwa setiap pernyataan PHP harus diakhiri dengan tanda titik dua seperti
halnya sebuah properti pada CSS. Tanda titik dua yang terlupakan adalah kesalahan kecil namun
fatal yang sering terjadi, terutama apabila Anda baru mempelajari PHP. Perhatikanlah setiap
pernyataan PHP yang Anda buat dengan teliti dan pastikan Anda sudah mengakhirinya dengan
tanda titik dua.
Untuk memberikan sebaris komentar pada sebuah bagian dari dokumen PHP, Anda cukup
mengawali baris tersebut dengan dua buah garis miring (//) atau sebuah tanda pagar (#).
Perhatikanlah contoh berikut :
<?php
// Tampilkan teks "Halo, Dunia!"
echo 'Halo, Dunia!'; # Komentar juga dapat setelah sebuah pernyataan
?>
Baris ke-2 pada contoh diatas adalah sebuah baris komentar, sedangkan baris ke-3 adalah sebuah
pernyataan PHP dengan sebuah komentar yang diletakkan di akhirnya. Perlu diperhatikan bahwa Anda
tidak perlu mengakhiri sebuah komentar dengan tanda titik koma.
Kadangkala, Anda mungkin ingin memberikan sebuah komentar yang cukup panjang, mungkin
terdiri dari beberapa baris dan paragraf. Untuk komentar seperti ini, Anda dapat membuat sebuah blok
komentar. Anda dapat membuat blok komentar dengan menuliskan komentar-komentar Anda diantara
simbol /* dan */. Perhatikanlah contoh berikut :
<?php
/*
Halaman web "Halo, Dunia!"
Versi 1.0
Pada contoh di atas, semua yang berada di dalam tanda /* dan */ adalah sebuah komentar. Seperti
halnya dengan komentar baris, Anda juga tidak perlu memberikan tanda titik koma pada komentar blok.
Variabel adalah sebuah tempat yang dapat digunakan untuk menyimpan suatu data atau informasi.
Variabel dapat dikatakan sebagai fondasi utama dari sebuah halaman web dinamis. Dengan
menggunakan variabel, Anda dapat membuat halaman web Anda menampilkan konten yang berbeda
tergantung dari berbagai macam situasi.
Anggaplah Anda membuat sebuah formulir yang meminta nama dari pengguna dengan
menggunakan sebuah HTML, kemudian Anda menyimpan nama tersebut di dalam variabel agar dapat
digunakan untuk keperluan lain. Kemudian, halaman web Anda akan mengingat pengguna-pengguna
yang sudah pernah berkunjung dan menampilkan pesan “Selamat Datang Kembali!” kepada pengguna-
pengguna tersebut, sedangkan apabila pengguna tersebut baru pertama kali berkunjung maka halaman
web akan menampilkan pesan “Selamat Datang!” saja.
Menggunakan variabel dalam PHP sangatlah mudah, Anda cukup memberikan nama dan nilai atau
data yang ingin disimpan saja. Sebagai contoh, jika Anda ingin membuat sebuah variabel bernama
$harga dan menyimpan nilai 5000 di dalamnya, maka Anda cukup menuliskan sebuah pernyataan
sederhana sebagai berikut :
$harga = 5000;
Seperti halnya dengan penggunaan pernyataan echo, apabila Anda ingin menyimpan data berupa
teks Anda perlu menggunakan tanda kutip satu seperti contoh berikut ini :
Perlu diperhatikan bahwa ada beberapa aturan-aturan yang perlu ditaati dalam pemberian nama
kepada sebuah variabel di dalam PHP, yaitu :
• Nama variabel harus diawali dengan tanda dolar ($). Hal ini dimaksudkan untuk membedakan
nama variabel dengan penyataan-pernyataan PHP.
• Nama variabel harus mencerminkan makna dari nilai yang akan disimpan di dalamnya. Sebagai
contoh, jika Anda ingin menyimpan tanggal lahir seseorang, maka gunakanlah nama variabel
$tanggal_lahir, jangan gunakan nama yang tidak relevan seperti $ayam_goreng atau nama yang
sulit dipahami seperti $x.
• Nama variabel hanya dapat berisikan huruf (A-Z), angka (0-9) dan garis bawah (_) saja. Sebagai
contoh, nama variabel $diskon50% bukanlah nama variabel yang benar.
• Huruf besar dan huruf kecil di dalam bahasa PHP memiliki makna yang berbeda. Variabel
$nama dan $Nama adalah dua buah variabel yang berbeda. Oleh karena itu, sangat disarankan
agar Anda selalu menggunakan huruf kecil dalam memberikan nama untuk sebuah variabel.
• Walaupun nama variabel dapat menggunakan angka, karakter pertama dari nama variabel
harus berupa huruf atau garis bawah saja. Sebagai contoh, $jumlah_orang dan $_harga adalah
nama variabel yang benar, sedangkan $1bulan adalah nama variabel yang salah.
• Jika nama variabel terdiri dari dua buah kata atau lebih, maka pisahkanlah antara satu kata
dengan kata lainnya dengan menggunakan garis bawah. Sebagai contoh,
$alamat_rumah_pertama tentu lebih mudah dibaca daripada $alamatrumahpertama.
Sesuai dengan namanya, variabel dapat memiliki nilai yang berubah-ubah. Misalkan Anda ingin
membuat sebuah variabel bernama $x dengan nilai awal 7, namun, entah kenapa Anda ingin merubah
nilainya menjadi 700, maka Anda cukup melakukan hal berikut ini :
Selain itu, untuk menampilkan nilai dari suatu variabel, Anda cukup menggunakan penyataan echo
sebagai berikut :
echo $harga;
Agar dapat lebih memahami penggunaan variabel dalam PHP, buatlah sebuah dokumen PHP baru
sebagai berikut :
<?php
$x = 1;
$y = 'Halo, Dunia!';
?>
<!doctype html>
<html>
<head>
<title>Pemberian Nilai</title>
</head>
<body>
<?php
$x = 123;
$x = 456;
?>
<p>Sekarang variabel $x memiliki nilai <?php echo $x; ?>
</body>
</html>
Simpanlah dengan nama variabel.php. Lalu bukalah dengan peramban web Anda.
Data yang disimpan di dalam suatu variabel dapat diklasifikasikan ke dalam beberapa macam tipe.
Perbedaan tipe data ini digunakan untuk membedakan operasi-operasi yang dapat dilakukan terhadap
data-data tersebut.
Sebagai contoh, data dengan tipe angka dapat dikalikan dan memberikan hasil yang berarti misal, 5
x 3 = 15. Namun, bagaimana jika data tersebut adalah teks? Dapatkah sebuah teks dikalikan? Apakah
hasil dari ‘a’ x ‘buku’? Jika hal ini dilakukan, maka PHP akan memberikan pesan kesalahan yang
memberitahu bahwa operasi perkalian tidak dapat dilakukan untuk data dengan tipe teks.
• Integer atau bilangan bulat, yaitu bilangan yang tidak memiliki nilai desimal. Contoh : -457, 0, 7,
dan sebagainya.
• Float atau bilangan real, yaitu bilangan yang memiliki nilai desimal. Contoh : -1.79, 457.1, 3.14,
dan sebagainya.
• String atau teks, yaitu suatu rangkaian dari satu karakter/huruf atau lebih. Dalam penulisannya,
string harus diletakkan di antara sepasang tanda kutip satu (‘). Perlu diketahui bahwa angka
yang diletakkan di dalam tanda kutip satu akan menjadi string. Sebagain contoh, 127 adalah
sebuah integer sedangkan ‘127’ adalah sebuah string.
Pada bahasa pemrograman lain, seperti C++ dan Java misalnya, Anda perlu menuliskan tipe data
dari suatu variabel secara eksplisit. Dengan PHP, Anda tidak perlu melakukan ini. PHP dapat mengenali
tipe data dari suatu variabel secara otomatis. Bahkan, PHP dapat beradaptasi terhadap perubahan tipe
data dari suatu variabel secara otomatis. Sebagai contoh :
$x = 10;
$y = 15;
$z = $x - $y; // Nilai $z sekarang adalah -5
$x = 'Halo!'
$z = $x - $y; // Terjadi kesalahan
Yang dimaksud dengan angka disini adalah data bertipe integer dan float. Anda dapat melakukan
berbagai macam operasi matematika pada tipe data tersebut dengan menggunakan PHP. Operasi yang
dapat dilakukan antara lain adalah penjumlahan (+), pengurangan (-), perkalian (*), pembagian (/), dan
menghitung sisa pembagian (%).
PHP juga memiliki aturan prioritas operator yang sama dengan aturan prioritas operator yang ada
di dalam matematika. Sebagai contoh, 5 + 3 * 2 akan menghasilkan nilai 11, bukan 16. Hal ini
dikarenakan operator perkalian (*) memiliki tingkat prioritas yang lebih tinggi apabila dibandingkan
dengan operator penjumlahan (+). Untuk menghindari kebingungan dalam hal ini, Anda dapat
menggunakan tanda kurung sebagai alat bantu :
$hasil = (5 + 3) * 2;
Selain operator-operator yang tentunya sudah Anda ketahui seperti di atas, ada pula beberapa
operator unik yang terdapat di dalam PHP, yaitu :
• Operator pintasan (+= dan -=). Sesuai dengan namanya, operator pintasan (shorthand operator)
dapat digunakan untuk menyingkat operasi tertentu. Operator += berfungsi untuk
menambahkan suatu nilai ke dalam suatu variabel sedangkan operator -= berfungsi untuk
mengurangi suatu nilai dari suatu variabel. Perhatikanlah contoh berikut ini :
$x = 7;
$x = $x + 4; // Nilai $x saat ini adalah 11
$x += 4; // Sama dengan $x = $x + 4, nilai $x saat ini adalah 15
$y = 5
$y = $y - $x; // Nilai $y saat ini adalah -10
$y -= $x // Sama dengan $y = $y - $x, nilai $y saat ini adalah -25
• Operator peningkatan dan penurunan (++ dan --). Sesuai dengan namanya, operator-operator
tersebut berfungsi untuk meningkatkan atau menurunkan nilai dari suatu variabel sebanyak 1.
Perhatikanlah contoh berikut ini :
$x = 12;
$x += 1; // Nilai $x saat ini adalah 13
$x++; // Sama dengan $x += 1, nilai $x saat ini adalah 14
$x--; // Sama dengan $x -= 1, nilai $x saat ini adalah 13
Anda juga dapat melakukan berbagai macam operasi matematika tingkat tinggi dengan
menggunakan fungsi-fungsi matematis yang sudah disediakan oleh PHP. Beberapa fungsi tersebut
antara lain adalah fungsi trigonometri (sin, cos, tan, asin, acos, atan, sinh, cosh, dan tanh), fungsi
logaritma (log), dan fungsi untuk mencari akar kuadrat (sqrt). Penggunaan dari fungsi-fungsi tersebut
sangatlah sederhana, seperti pada contoh-contoh berikut ini :
$x = sin(90);
$y = sqrt(128) + (7 * 2) - 250;
$z = sin(log(70));
Seperti yang sudah dijelaskan sebelumnya, string adalah rangkaian dari satu atau lebih
huruf/karakter. Berbeda dengan data dengan tipe angka, operasi aritmatika tidak dapat digunakan
untuk data dengan tipe string. Namun, ada sebuah operasi khusus yang dapat dilakukan oleh string,
yaitu operasi penggabungan dengan menggunakan operator tanda titik (.).
$nama_depan = 'Joni';
$nama_belakang = 'Subejo';
$nama_lengkap = $nama_depan . $nama_belakang;
Nilai dari variabel $nama_lengkap pada contoh di atas adalah ‘JoniSubejo’. Hal ini dikarenakan
operasi penggabungan string tidak akan menambahkan spasi atau karakter apapun kepada hasil
penggabungan. Oleh karena itu, Anda perlu menyisipkan spasi secara manual di antara kedua string
tersebut seperti pada contoh berikut ini :
Anda juga dapat menggunakan operator pintasan penggabungan (.=) untuk menggabungkan string :
Sejalan dengan fungsi-fungsi matematis yang dapat digunakan untuk mengolah angka, ada pula
fungsi-fungsi string yang dapat digunakan untuk mengolah teks. Diantaranya adalah :
• strlen(), fungsi ini dapat digunakan untuk mengetahui panjang dari suatu string termasuk spasi.
Contoh :
• str_word_count(), berfungsi untuk menghitung jumlah kata yang terdapat dari suatu string.
Sama dengan fungsi strlen(), Anda dapat menghitung string yang disimpan dalam sebuah
variabel atau langsung memasukkan string ke dalam fungsi. Contoh :
• strpos(), berfungsi untuk mencari posisi dari sebuah karakter. Berbeda dengan fungsi-fungsi
yang telah Anda pelajari sebelumnya, fungsi ini memerlukan dua buah masukan, yaitu masukan
teks asal dan karakter yang ingin dicari Perlu diperhatikan bahwa karakter pertama dari sebuah
string menduduki posisi 0, bukan 1. Perhatikanlah contoh berikut ini :
/* Apabila ada dua karakter yang sama, maka yang berlaku adalah karakter yang pertama
kali ditemukan */
$posisi = strpos($teks, 'm'); // Posisi dari m adalah 4
/* Apabila karakter tidak ditemukan, maka strpos() akan menghasilkan nilai boolean FALSE
*/
$posisi = strpos($teks, '7'); // Posisi dari 7 adalah FALSE
• substr(), berfungsi untuk mengambil sebagian teks dari suatu string. Fungsi ini memerlukan
tiga buah masukan, yaitu teks asal, posisi memulai pengambilan, dan jumlah huruf yang akan
diambil termasuk spasi. Contoh :
/* fungsi substr juga dapat mengambil sebagian teks mulai dari kanan apabila digunakan
seperti ini */
$sebagian = substr($teks, -5); // Hasilnya adalah 'Ipsum'
• strreplace(), berfungsi untuk mengganti sebagian teks dengan teks lainnya. Masukan-masukan
yang diperlukan oleh fungsi ini adalah teks yang akan diganti, teks pengganti, dan teks asal.
Contoh :
• strtolower() dan strtoupper(), adalah fungsi yang dapat digunakan untuk merubah jenis huruf
dari suatu teks. strtolower berfungsi untuk mengubah jenis huruf dari suatu teks menjadi huruf
kecil semua dan strtoupper berfungsi untuk mengubah menjadi huruf besar semua. Contoh :
• empty(), berfungsi untuk mengetahui apakah sebuah string kosong atau tidak. Fungsi ini akan
menghasilkan nilai dengan tipe data boolean (TRUE/FALSE). Contoh :
Data dan informasi dalam bentuk tanggal dan waktu mungkin dapat menjadi salah satu komponen
yang penting di dalam sebuah situs web. Hanya saja, pada umumnya sebuah server web dan sistem
manajemen basis data akan menyimpan data tanggal dan waktu dalam bentuk timestamp yang tidak
mudah dibaca oleh manusia.
Timestamp, atau yang juga dikenal dengan istilah UNIX timestamp, adalah sebuah cara untuk
menyimpan tanggal pada sebuah sistem komputer dengan menghitung jumlah detik yang telah berlalu
dari tanggal 1 Januari 1970 jam 00:00 GMT. Dengan cara seperti ini, proses perhitungan tanggal yang
akan menjadi lebih mudah dikerjakan oleh sebuah sistem komputer, namun penulisan tanggal seperti
ini cukup sulit untuk dipahami oleh manusia.
Untungnya, PHP memiliki fungsi-fungsi tanggal dan waktu yang dapat mempermudah Anda untuk
menkonversi tanggal dan waktu dalam bentuk timestamp ke dalam bentuk yang dapat dimengerti oleh
manusia dan sebaliknya. Berikut adalah beberapa dari fungsi-fungsi tersebut :
• date(), berfungsi untuk mengubah data tanggal dan waktu dalam bentuk timestamp (integer)
menjadi bentuk yang dapat dimengerti oleh manusia (string). Fungsi ini memerlukan dua buah
masukan, yaitu format dan nilai dari tanggal dan waktu yang akan ditampilkan. Namun,
masukan kedua (nilai dari tanggal/waktu) tidak harus digunakan. Apabila masukan kedua ini
tidak digunakan, maka fungsi date() akan menggunakan tanggal dan waktu sekarang. Contoh :
Seperti yang diperagakan pada contoh ketiga di atas, Anda dapat dengan bebas menentukan
format dari tanggal dan waktu yang akan ditampilkan. Berikut adalah simbol-simbol yang
digunakan untuk mewakilkan masing-masing satuan waktu :
• strtotime(), berfungsi untuk mengubah data tanggal dan waktu dari bentuk string menjadi
timestamp. Fungsi ini adalah fungsi yang canggih, Anda dapat memberikan berbagai macam
masukan seperti teks tanggal, kata kunci, hingga perhitungan tanggal. Agar lebih jelas mengenai
penggunaan fungsi ini, perhatikanlah contoh-contoh berikut ini :
Fungsi strtotime() akan sangat berguna jika digabungkan dengan fungsi date(). Dengan
menggabungkan kedua fungsi ini, Anda dapat memformat tanggal dan waktu apa saja yang
Anda inginkan. Berikut adalah contoh penggunaanya :
Agar Anda dapat lebih memahami berbagai operasi dengan tanggal, buatlah sebuah dokumen PHP
baru sebagai berikut ini :
<?php
$hari_ini = date('m/d/Y');
$saat_ini = date('H:i:s');
?>
<!doctype html>
<html>
<head>
<title>Tanggal dan Waktu</title>
</head>
<body>
<p>
Tanggal sekarang : <?php echo $hari_ini; ?><br />
Waktu sekarang : <?php echo $saat_ini; ?><br />
Tanggal lahir Anda : <?php echo date('d/m/Y', strtotime('4 Aug 1983')); ?><br
/>
Besok adalah hari : <?php echo date('l', strtotime('tomorrow')); ?><br />
50 jam dari sekarang adalah : <?php echo date('d/m/Y H:i:s', strtotime('now +
50 hours')); ?><br />
Usia Anda saat ini adalah : <?php echo (strtotime('now') - strtotime('4 Aug
1983')) / 31556926; ?> tahun<br />
</body>
</html>
Simpanlah dengan nama tanggal.php lalu bukalah dengan peramban web Anda.
Agar sebuah halaman web menjadi interaktif, tentunya Anda akan memerlukan masukan data dari
pengunjung halaman web Anda. Anda dapat melakukan hal ini dengan menggunakan formulir HTML
yang diletakkan pada halaman web Anda. Namun, untuk dapat menerima dan memproses data yang
telah dimasukkan tersebut, Anda akan memerlukan bantuan dari PHP.
Agar sebuah formulir dapat mengirimkan data yang selanjutnya akan diproses, seorang pengunjung
harus melakukan aksi submit terlebih dahulu. Aksi ini dapat dilakukan dengan menekan tombol <input
type=”submit” /> pada formulir tersebut. Selanjutnya, data tersebut akan dikirim ke dokumen
pemroses yang namanya terdapat pada atribut action di dalam elemen form.
Sebagai contoh, pada sebuah formulir dengan elemen form <form action=”proses.php”
method=”post”>, data dari formulir akan dikirimkan ke sebuah dokumen php proses.php, dimana
pada dokumen inilah semua pemrosesan data yang dikirim akan dilakukan.
Selain itu, Anda juga harus memperhatikan atribut name yang terdapat pada komponen-komponen
formulir seperti textbox, textarea, radio button, dan sebagainya. Atribut inilah yang nantinya akan
memberikan akses kepada PHP untuk mendapatkan data yang terkandung di dalamnya. Pastikanlah
Anda memberikan nilai atribut name yang relevan dan mudah dipahami.
PHP dapat mengakses data yang dikirimkan oleh sebuah formulir dengan menggunakan sebuah
variabel khusus yang bernama $_POST. Sebagai contoh, perhatikanlah sebuah dokumen HTML seperti
berikut ini :
<!doctype html>
<html>
<head>
<title>Formulir Sederhana</title>
</head>
<body>
<h1>Formulir Sederhana</h1>
<form action="proses_formulir.php" method="post">
<p>
Masukkan Nama Anda : <br />
<input name="nama" type="text" size="50" maxlength="100" />
<p><input type="submit" value="Kirim" />
</form>
</body>
</html>
Formulir yang tedapat pada halaman tersebut memiliki sebuah komponen masukan data dengan
nama nama. Anda dapat mengakses data ini melalui dokumen PHP proses_formulir.php dengan cara
sebagai berikut :
Agar dapat lebih memahami proses tersebut secara lebih menyeluruh, cobalah Anda membuat
sebuah dokumen HTML sebagai berikut :
<!doctype html>
<html>
<head>
<title>Formulir Pendaftaran</title>
</head>
<body>
<h1>Formulir Pendaftaran </h1>
<form action="proses_formulir.php" method="post">
<p>
Masukkan Nama Anda : <br />
<input name="nama" type="text" size="50" maxlength="100" />
<p>
Masukkan Alamat Anda : <br />
<textarea name="alamat"></textarea>
<p>
Masukkan Jenis Kelamin Anda : <br />
<input type="radio" name="jenis_kelamin" value="Laki-Laki" />
<input type="radio" name="jenis_kelamin" value="Perempuan" />
<p>
Masukkan Agama Anda : <br />
<select name="agama">
<option value="Islam">Islam</option>
<option value="Kristen Katolik">Kristen Katolik</option>
<option value="Kristen Protestan">Kristen Protestan</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
<option value="Lainnya">Lainnya</option>
</select>
<!doctype html>
<html>
<head>
<title>Proses Pendaftaran</title>
</head>
<body>
<h1>Selamat bergabung!</h1>
<hr />
<h2>Harap periksa kembali data diri yang telah Anda masukkan berikut ini :</h2>
<p>
<ul>
<li>Nama : <?php echo $_POST['nama']; ?></li>
<li>Alamat : <?php echo $_POST['alamat']; ?></li>
</body>
</html>
Simpanlah lalu bukalah halaman formulir dengan peramban web Anda dan cobalah mengisi
formulir tesebut.
Anggaplah Anda akan membuat sebuah situs web penjualan online. Anda tentunya akan
memerlukan banyak halaman untuk menampilkan masing-masing produk yang ingin Anda jual. Jika
halaman web yang berfungsi untuk menampilkan produk-produk tersebut bersifat statis, maka
tentunya Anda perlu membuat sebuah halaman untuk masing-masing produk. Bayangkan jika Anda
memiliki ratusan produk, tentu akan sangat melelahkan dan memakan waktu untuk membuat semua
halaman tersebut.
Namun, dengan menggunakan sebuah halaman yang bersifat dinamis, Anda cukup membuat sebuah
halaman produk saja, dimana nantinya halaman tersebut dapat digunakan untuk menampilkan
berbagai jenis produk yang ada. Hal ini dapat dilakukan dengan memberikan keterangan tambahan
berupa produk mana yang akan ditampilkan oleh halaman tersebut, selanjutnya PHP akan memproses
keterangan tambahan tersebut dan menyesuaikan isi dari halaman tersebut untuk menampilkan
produk yang sesuai.
Keterangan tambahan seperti ini dikenal dengan istilah querystring. Querystring dapat diletakkan
pada alamat dari sebuah halaman web. Berikut adalah contoh dari penggunaan querystring pada
sebuah alamat halaman web :
http://www.tokosaya.com/lihat_barang.php?kode_barang=10
Alamat halaman web di atas akan membuka dokumen lihat_barang.php sekaligus memberikan
querystring berupa kode_barang dengan nilai 10 kepada halaman tersebut. Dapat Anda perhatikan
bahwa di antara nama dokumen dengan querystring dipisahkan dengan sebuah tanda tanya. Sedangkan
bentuk dari querystring sendiri mirip dengan bentuk dari sebuah variabel, hanya saja Anda tidak perlu
memberikan tanda dolar ($) di depan nama sebuah querystring. Selain itu, Anda juga perlu
memberikan tanda kutip untuk data dengan tipe string.
Terkadang, Anda mungkin akan memerlukan lebih dari satu nilai untuk diberikan melalui
querystring. Untungnya, Anda dapat memberikan lebih dari satu nilai kepada sebuah querystring
seperti pada contoh berikut ini :
http://www.tokosaya.com/daftar_barang.php?urutkan=harga&cara=menurun&jumlah_perhalaman=1
0
Alamat halaman web diatas memiliki tiga buah querystring, yaitu urutkan dengan nilai harga, cara
dengan nilai menurun, dan jumlah_perhalaman dengan nilai 10. Untuk memisahkan sebuah
querystring dengan querystring lainnya, Anda dapat menggunakan tanda ampersand (&).
Lalu bagaimanakan PHP dapat memproses querystring ini? Ternyata cara pemrosesan data yang
terdapat pada querystring mirip dengan pemrosesan data pada formulir. Jika untuk formulir Anda akan
menggunakan variabel $_POST, maka untuk querystring Anda cukup menggantinya dengan variabel
$_GET, selebihnya, pemakaiannya akan sama :
$metode_pengurutan = $_GET['urutkan'];
$cara_pengurutan = $_GET['menurun'];
$jumlah_perhalaman = $_GET['jumlah_perhalaman'];
Sekarang marilah kita mencoba menerapkan konsep ini untuk membuat sebuah halaman yang
dinamis. Pertama-tama buatlah sebuah halaman HTML sebagai berikut :
<!doctype html>
<html>
<head>
<title>Undian tanpa Undian</title>
</head>
<body>
<h1>Silahkan Pilih Hadiah Anda</h1>
<ul>
<li><a href="proses_hadiah.php?hadiah=mobil">Mobil sport</a></li>
<li><a href="proses_hadiah.php?hadiah=rumah">Rumah mewah</a></li>
<li><a href="proses_hadiah.php?hadiah=pesawat">Pesawat pribadi</a></li>
</ul>
</body>
</html>
Simpanlah dengan nama hadiah.html. Jika Anda perhatikan, tatutan yang terdapat pada halaman
ini mengarah kepada sebuah dokumen PHP yang bernama proses_query.php, maka buatlah dokumen
tersebut sebagai berikut :
<!doctype html>
<html>
<head>
<title>Undian tanpa Undian</title>
</head>
<body>
<h1>Selamat!</h1>
<p>Anda telah mendapatkan sebuah <?php echo $_GET['hadiah']; ?>
<a href="hadiah.html">Kembali ke Pilihan Hadiah</a>
</body>
</html>
Simpanlah dan bukalah halaman hadiah.html dengan peramban web Anda, cobalah menggunakan
tautan-tautan yang ada. Perhatikan dengan baik perubahan URL pada peramban web Anda. Cobalah
mengubah nilai dari querystring langsung dari peramban web Anda. Apakah yang terjadi?
Larik atau yang juga dikenal dengan istilah Array adalah sebuah variabel yang memiliki lebih dari
satu nilai. Sebuah nilai di dalam array dikenal dengan istilah elemen. Elemen tidak terbatas kepada
sebuah nilai saja, sebuah array bahkan dapat memiliki banyak array-array sebagai sebuah elemen di
dalamnya. Array seperti ini disebut dengan istilah array multidimensi.
Sebuah elemen pada sebuah array dapat direferensikan dengan menggunakan sebuah indeks.
Indeks dapat diibaratkan sebagai nomor urut dari sebuah elemen. Agar dapat lebih memahami makna
dari array, elemen, dan indeks, perhatikanlah ilustrasi berikut ini :
$anggota
Nilai Andi Budi Cici Dedi Emil
Indeks 0 1 2 3 4
Elemen Elemen Elemen Elemen Elemen
$anggota adalah sebuah array yang memiliki 5 elemen, yaitu Andi, Budi, Cici, Dedi, dan Emil. Andi
memiliki nomor indeks 0, Budi memiliki nomor indeks 1, Cici memiliki nomor indeks 2 dan seterusnya.
Perlu diperhatikan bahwa nomor indeks pada sebuah array dimulai dari 0.
Ada beberapa cara yang dapat Anda gunakan untuk membuat sebuah array dalam PHP. Cara yang
pertama adalah membuat array dan langsung memasukkan elemen-elemen dari array tersebut seperti
pada contoh berikut ini :
Cara kedua adalah dengan membuat sebuah array kosong, baru kemudian memasukkan elemen -
elemen dari array tersebut sesuai dengan kebutuhan. Contoh :
Pada dasarnya, array memiliki sifat yang sama dengan variabel. Anda dapat memanipulasi elemen
yang terdapat pada suatu array dengen mereferensikan kepada indeksnya seperti contoh berikut ini :
Untuk menghapus sebuah elemen dari sebuah array dengan menggunakan fungsi unset() seperti
pada contoh berikut ini :
Dalam menggunakan array, ada sebuah fungsi yang sangat berguna, yaitu fungsi sizeof(). Fungsi ini
dapat digunakan untuk mengetahui jumlah elemen yang terdapat di dalam sebuah array. Berikut adalah
contoh penggunaan fungsi ini :
Agar Anda dapat lebih memahami prinsip penggunaan array, marilah mencoba menerapkannya
dengan membuat sebuah dokumen PHP sebagai berikut :
<html>
<head>
<title>Daftar Anggota</title>
</head>
<body>
<h1>Daftar Anggota Sebelum Regenerasi</h1>
<ul>
<li><?php echo $anggota[0]; ?></li>
<li><?php echo $anggota[1]; ?></li>
<li><?php echo $anggota[2]; ?></li>
<li><?php echo $anggota[3]; ?></li>
<li><?php echo $anggota[4]; ?></li>
</ul>
<h1>Daftar Anggota Setelah Regenerasi</h1>
<?php
$anggota[3] = 'Cecep';
$anggota[] = 'Farah';
unset($anggota[0]);
?>
<ul>
<li><?php echo $anggota[0]; ?></li>
<li><?php echo $anggota[1]; ?></li>
<li><?php echo $anggota[2]; ?></li>
<li><?php echo $anggota[3]; ?></li>
<li><?php echo $anggota[4]; ?></li>
<li><?php echo $anggota[5]; ?></li>
</ul>
</body>
</html>
7.10.1MAP
Dalam menggunakan array, mungkin Anda merasa sulit untuk mengingat indeks dari sebuah
elemen di dalam array yang cukup besar. Untuk mengatasi masalah ini, PHP menyediakan sebuah
fasilitas yang dinamakan map. Dengan menggunakan map, Anda dapat mendefinisikan sendiri indeks
yang akan digunakan untuk setiap elemen dari sebuah array. Untuk lebih jelasnya, perhatikanlah
ilustrasi berikut :
$anggota
Nilai Andi Budi Cici Dedi Emil
Indeks Direktur Wadir Sekretaris Bendahara Satpam
Jika pada array standar Anda dapat menggunakan $anggota[0], $anggota[1], dan seterusnya, maka
pada sebuah map Anda dapat merefensikan sebuah elemen dengan indeks yang telah Anda tetapkan
sendiri, seperi $anggota['Direktur'], $anggota['Wadir'], dan seterusnya.
Sama seperti array, Anda dapat membuat map dengan langsung memasukkan elemen-elemen yang
terdapat di dalamnya atau dengan membuat map kosong terlebih dahulu baru kemudian memasukkan
elemen-elemennya satu persatu. Perhatikanlah beberapa contoh berikut ini :
Anda juga dapat melakukan manipulasi dan menghapus elemen-elemen yang terdapat pada map
dengan cara yang sama seperti pada penggunaan array, hanya saya, Anda sekarang dapat
mereferensikan sebuah elemen dengan menggunakan indeks yang Anda buat sendiri.
7.10.2ARRAY MULTIDIMENSI
Seperti yang sudah dijelaskan sebelumnya, array multidimensi adalah array yang memiliki elemen-
elemen berupa array. Array multidimensi juga dikenal dengan istilah matriks. Untuk lebih jelas
mengenai array multidimensi, perhatikanlah ilustrasi berikut ini :
$karyawan
Anton Bayu Cinta
0
0 1 2
Dedi Eki Firdaus
1
0 1 2
Gogon Heri Intan
2
0 1 2
Array $karyawan memiliki tiga buah elemen, dimana masing-masing elemen ini juga merupakan
sebuah array yang memiliki beberapa elemen. Array seperti ini dinamakan dengan array berdimensi
dua. Tentu saja, jika diinginkan Anda dapat membuat array dengan jumlah dimensi yang tidak terbatas.
Berikut adalah contoh penggunaan array dengan dua dimensi seperti di atas pada PHP :
// Manipulasi data
$karyawan[0][2] = 'Pandu';
// Menghapus elemen
unset($karyawan[2][1]);
unset($karyawan[0]);
Selain array multidimensi, Anda juga dapat membuat map multidimensi dengan seperti berikut ini :
Hingga saat ini, Anda sudah mempelajari bagaimana membuat sebuah halaman web dinamis yang
sederhana dengan menggunakan PHP. Namun, ada kalanya Anda memerlukan sebuah halaman yang
lebih kompleks. Misalkan Anda ingin menampilkan halaman web yang berbeda untuk pengunjung biasa
dengan anggota. Atau mungkin Anda ingin mengulang sebuah aksi berkali-kali tanpa perlu menulis
ulang aksi tersebut.
Sebagai contoh, anggaplah Anda ingin mempunyai sebuah halaman web yang akan menyapa setiap
pengunjung yang datang. Anda ingin menyapa pengunjung dengan kata “Selamat Pagi!” jika pengunjung
tersebut membuka halaman web Anda pagi hari, “Selamat Siang!” pada siang hari, “Selamat Sore!” pada
sore hari dan “Selamat Malam!” pada malam hari. Untuk itu, Anda tentunya menginginkan sesuatu
seperti ini :
Atau mungkin Anda ingin menampilkan data-data yang terdapat di dalam sebuah basis data, namun,
karena Anda tidak mengetahui secara pasti jumlah data yang terdapat di dalamnya dan kemungkinan
jumlah data yang dapat terus berubah-ubah, Anda mungkin menginginkan sesuatu seperti ini :
Anda dapat melakukan hal-hal diatas dengan mengatur alur dari sebuah program PHP. Ada dua
macam pengaturan alur program yang dapat Anda gunakan, yaitu percabangan dan pengulangan.
Namun, sebelum masuk lebih jauh ke dalam percabangan dan pengulangan, marilah terlebih dahulu
mengenal apa yang dimaksud dengan kondisi.
7.11.1MENGGUNAKAN KONDISI
Kondisi adalah sebuah pernyataan khusus dalam PHP yang berfungsi untuk menguji atau
mengevaluasi apakah pernyataan tersebut benar atau salah. Kondisi adalah komponen paling penting
dari percabangan dan pengulangan, dimana kondisi akan menentukan apakah aksi apa saja yang harus
dilakukan dan berapa kali suatu aksi harus diulang.
Dalam membuat sebuah kondisi, Anda akan menanyakan sebuah pertanyaan yang akan
membandingkan beberapa nilai, misalkan :
• Apakah nilai dari variabel $x sama dengan nilai dari variabel $y?
• Operator ==, berfungsi untuk mengetahui apakah dua buah nilai adalah nilai yang sama.
• Operator != dan <>, berfungsi untuk mengetahui apakah dua buah nilai adalah nilai yang
berbeda.
• Operator > dan <, berfungsi untuk mengetahui apakah sebuah nilai lebih besar atau lebih kecil
dari nilai lainnya.
• Operator >= dan <=, berfungsi untuk mengetahui apakah sebuah nilai lebih besar atau kecil atau
sama dengan nilai lainnya.
• Operator !, berfungsi untuk membalikkan nilai kebenaran dari suatu kondisi. TRUE akan
menjadi FALSE dan FALSE akan menjadi TRUE. Mudahnya, dapat dibacah sebagai “not” atau
“tidak”.
Perlu diperhatikan bahwa operasi perbandingan hanya dapat dilakukan jika kedua nilai yang
dibandingkan memiliki tipe data yang sama. Apabila Anda mencoba untuk membandingkan dua nilai
yang memiliki tipe data yang berbeda, seperti membandingkan angka dengan string, maka akan terjadi
sebuah kesalahan.
$a == $b;
strlen($teks) >= 20;
!empty($teks);
12 < 7;
$nama !='Toto';
Terkadang, Anda akan memerlukan sebuah operasi perbandingan yang membandingkan banyak hal.
Sebagai contoh, kriteria seorang siswa untuk mendapatkan beasiswa adalah memiliki nilai rata-rata
diatas 70 dan tidak pernah bolos. Anda mungkin akan memerlukan sebuah operasi perbandingan
sebagai berikut :
Untuk melakukan hal seperti itu, Anda dapat menggunakan operator penggabungan kondisi berikut
ini :
• Operator && (dan), operasi dengan operator ini akan memberikan nilai TRUE jika semua
kondisi yang ada terpenuhi, selain itu, operator ini akan memberikan nilai FALSE. Contoh :
• Operator || (atau), operasi dengan operator ini akan memberikan nilai TRUE jika ada salah satu
saja dari kondisi yang terpenuhi. Jika tidak ada kondisi yang terpenuhi maka operator ini akan
memberikan nilai FALSE. Contoh :
// Gabungan
($a > 90) && ($b <= 60) && ((strlen($c) == 10) || ($x != 5));
7.11.2MENGGUNAKAN PERCABANGAN
Sesuai dengan namanya, dengan menggunakan percabangan Anda dapat membuat sebuah halaman
web yang dapat melakukan aksi yang berbeda-beda tergantung dari suatu kondisi tertentu. Hal seperti
ini juga dikenal dengan istilah pengambilan keputusan atau decision making.
Di dalam bahasa PHP, ada dua macam percabangan yang dapat dilakukan, yaitu percabangan
dengan menggunakan pernyataan if dan percabangan dengan menggunakan pernyataan switch.
Penyataan if akan mengevaluasi sebuah kondisi dan melakukan serangkaian aksi (blok) apabila
kondisi tersebut terpenuhi. Berikut adalah bentuk penulisan dari pernyataan if :
if ( kondisi ) {
aksi
} elseif ( kondisi ) {
aksi
} else {
aksi
}
• Bagian if, pada bagian ini akan dilakukan pengujian terhadap suatu kondisi dan apabila kondisi
tersebut terpenuhi maka serangkaian aksi akan dilakukan. Bagian ini adalah bagian paling dasar
dan harus digunakan dalam setiap pernyataan if. Berikut adalah contoh penggunaan bagian ini :
if ($a == $b) {
echo 'Bilangan A dan B memiliki nilai yang sama!';
}
Pada contoh di atas, apabila variabel $a dan $b memiliki nilai yang sama, maka pernyataan
echo yang terdapat di dalam blok di bawahnya akan dijalankan. Sedangkan apabila variabel $a
dan $b tidak memiliki nilai yang sama, maka tidak akan ada aksi yang diambil dan program akan
terus berjalan ke pernyataan selanjutnya (percabangan telah selesai).
Perlu diperhatikan bahwa sebuah blok diawali dan diakhiri dengan sebuah kurung kurawal.
Di dalam sebuah blok dapat diletakkan berbagai macam pernyataan dengan jumlah yang tidak
terbatas, bahkan, Anda dapat meletakkan penyataan if kedua di dalam sebuah blok jika
diperlukan.
• Bagian elseif, apabila kondisi yang berada pada bagian sebelumnya tidak terpenuhi, maka akan
dilakukan pengujian terhadap kondisi yang terdapat di bagian ini. Penggunaan bagian ini dalam
suatu pernyataan if tidaklah diharuskan, Anda cukup menggunakan bagian ini seperlunya saja.
Namun, jika memang diperlukan, Anda dapat menggunakan bagian ini lebih dari satu kali.
Bagian ini dapat digunakan jika Anda ingin membuat sebuah percabangan dengan banyak
cabang. Contoh :
if ($a == $b) {
echo 'Bilangan A dan B memiliki nilai yang sama!';
} elseif ($a < $b) {
echo 'Bilangan A lebih kecil dari bilangan B!';
} elseif ($a > $b) {
echo 'Bilangan A lebih besar dari bilangan B!';
}
Pada contoh di atas, pertama-tama akan dilakukan pengujian apakah variabel $a memiliki
nilai yang sama dengan variabel $b. Jika ya, maka pernyataan echo yang pertama akan
dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian
apakah variabel $a lebih kecil dari variabel $b. Jika ya, maka pernyataan echo yang kedua akan
dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian
apakah variabel $a lebih besar dari variabel $b. Jika ya, maka pernyataan echo yang ketiga akan
dijalankan dan kemudian percabangan berakhir. Jika tidak juga, maka tidak akan ada aksi yang
dijalankan dan percabangan akan berakhir, melanjutkan ke pernyataan selanjutnya.
• Bagian else, apabila semua kondisi yang berada pada bagian-bagian sebelumnya tidak ada yang
terpenuhi, maka akan dilakukan aksi yang terdapat pada blok bagian ini. Sama seperti
penggunaan blok elseif, penggunaan blok ini juga tidak diharusnkan. Namun, dalam setiap
pernyataan if hanya boleh ada satu blok else saja. Perhatikanlah contoh berikut ini :
if ($a == $b) {
echo 'Bilangan A dan B memiliki nilai yang sama!';
} else {
echo 'Bilangan A dan B memiliki nilai yang berbeda!';
}
Pada contoh di atas, apabila variabel $a dan $b memiliki nilai yang sama, maka pernyataan
echo yang pertama akan dijalankan, sedangkan jika tidak, maka pernyataan echo yang kedua
akan dijalankan.
if ($a == $b) {
echo 'Bilangan A dan B memiliki nilai yang sama!';
} elseif ($a < $b) {
echo 'Bilangan A lebih kecil dari bilangan B!';
} elseif ($a > $b) {
echo 'Bilangan A lebih besar dari bilangan B!';
} else {
echo 'Bilangan A dan B memiliki nilai yang tidak jelas!';
}
Pada contoh di atas, pertama-tama akan dilakukan pengujian apakah variabel $a memiliki
nilai yang sama dengan variabel $b. Jika ya, maka pernyataan echo yang pertama akan
dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian
apakah variabel $a lebih kecil dari variabel $b. Jika ya, maka pernyataan echo yang kedua akan
dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian
apakah variabel $a lebih besar dari variabel $b. Jika ya, maka pernyataan echo yang ketiga akan
dijalankan dan kemudian percabangan berakhir. Jika tidak juga, pernyataan echo yang keempat
akan dijalankan dan kemudian percabangan berakhir, melanjutkan ke pernyataan selanjutnya.
Seperti yang sudah dijelaskan sebelumnya, Anda dapat meletakkan penyataan if lagi di dalam
sebuah penyataan if. Penggunaan pernyataan yang berlapis-lapis seperti ini disebut dengan istilang
penyataan bersarang (nested statement). Berikut adalah contoh penggunaan if bersarang :
if (!empty($_POST['username'])) {
if ((strlen($_POST['username']) > 20) {
echo 'Username maksimal 20 karakter!';
}
if ((strlen($_POST['username']) < 6) {
echo 'Username minimal 6 karakter!';
}
) else {
echo 'Username harus diisi!';
}
Pada contoh yang terdapat di awal bagian 1.11, dikatakan bahwa dengan menggunakan
percabangan Anda dapat menampilkan halaman dengan tampilan yang berbeda-beda tergantung dari
suatu kodisi. Untuk melakukan hal ini, Anda dapat membuat pernyataan if yang “melewati batas”.
Maksud dari melewati batas disini adalah pernyataan if tersebut melewati batasan tag <?php dan ?>
seperti yang dicontohkan pada dokumen PHP berikut ini :
<?php
$sekarang = date('G');
?>
<!doctype html>
<html>
<head>
<title>Halaman Awal</title>
</head>
<body>
<?php if (($sekarang >= 2) && ($sekarang < 10)) { ?>
<h1>Selamat Pagi!</h1>
<?php } elseif (($sekarang >= 10) && ($sekarang < 10)) { ?>
<h1>Selamat Siang!</h1>
<?php } elseif (($sekarang >= 15) && ($sekarang < 15)) { ?>
<h1>Selamat Sore!</h1>
<?php } elseif (($sekarang >= 18) && ($sekarang < 18)) { ?>
<h1>Selamat Malam!</h1>
<?php } ?>
</body>
</html>
Pada contoh di atas, dapat dilihat bawah blok-blok yang terdapat pada pernyataan if melewati
batasan tag <?php dan ?>. Jika jam sekarang lebih besar atau sama dengan jam 2 dan lebih kecil dari jam
10, maka blok HTML pertama (“Selamat Pagi!”) akan ditampilkan, sedangkan apabila jam sekarang
lebih besar atau sama dengan jam 10 dan lebih kecil dari jam 15, maka blok HTML kedua (“Selamat
Siang!”) akan ditampilkan, begitu seterusnya.
Dengan menggunakan cara seperti ini, Anda dapat menyisipkan blok HTML yang besar di dalam
sebuah percabangan, menjadikan proses perubahan konten dari sebuah halaman berdasarkan suatu
kondisi lebih mudah dilakukan.
Berbeda dengan pernyataan if yang akan menguji sebuah kondisi untuk menentukan aksi yang akan
diambil, penyataan switch akan mengevaluasi nilai dari sebuah variabel dan mengambil aksi tertentu
berdasarkan nilai tersebut. Berikut adalah bentuk dari penulisan pernyataan switch :
switch ( variabel ) {
case nilai :
aksi
break;
case nilai :
aksi
break;
...
default :
aksi
break;
}
Berikut adalah penjelasan dari bagian-bagian yang terdapat di dalam pernyataan ini :
• Bagian switch, bagian ini akan menerima variabel yang akan dievaluasikan nilainya. Bagian ini
harus digunakan dalam setiap pernyataan switch.
• Bagian case, bagian ini akan mengevaluasikan nilai dari variabel yang diberikan pada bagian
swicth terhadap suatu nilai. Jik variabel tersebut memiliki nilai yang sama dengan nilai yang
dievaluasikan, maka aksi tertentu akan diambil. Berbeda dengan penyataan if dimana suatu
blok aksi diawali dan diakhiri dengan kurung kurawal, blok aksi oada pernyataan switch diawali
dengan tanda titik dua dan diakhiri dengan pernyataan break. Sebuah pernyataan switch
setidaknya harus memiliki satu baru bagian case. Anda dapat menggunakan sebanyak mungkin
bagian case sesuai dengan kebutuhan.
• Bagian default, bagian ini memiliki fungsi yang sama dengan bagian pada pernyataan if. Apabila
tidak ada nilai yang dipenuhi oleh sebuah variabel, maka aksi pada bagian inilah yang akan
dikerjakan. Bagian ini tidak harus digunakan pada setiap pernyataan switch.
Agar dapat lebih memahami penggunaan pernyataan switch, perhatikanlah contoh berikut ini :
switch ($kode_provinsi) {
case 'DKI':
$ongkos_kirim = 0;
break;
case 'JBR':
$ongkos_kirim = 50000;
break;
case 'JTG':
$ongkos_kirim = 100000;
break;
case 'JTM':
$ongkos_kirim = 200000;
break;
default:
echo 'Maaf, kami tidak melayani pengiriman ke daerah Anda.';
break;
}
Pada contoh di atas, akan dilakukan evaluasi terhadap nilai dari variabel $kode_provinsi. Jika nilai
dari variabel tersebut adalah ‘DKI’, maka akan dilakukan aksi $ongkos_kirim = 0;. Jika nilai dari variabel
tersebut adalah ‘JBR, maka akan dilakukan aksi $ongkos_kirim = 50000; dan seterusnya. Jika tidak ada
nilai yang dipenuhi, maka akan dilakukan aksi echo 'Maaf, kami tidak melayani pengiriman ke daerah
Anda.';
7.11.3MENGGUNAKAN PENGULANGAN
Pengulangan dapat digunakan untuk mengulang sebagian dari suatu program sebanyak jumlah yang
ditentukan. Dengan menggunakan pengulangan kode yang akan dituliskan akan menjadi semakin
sedikit. Sebagai contoh, anggaplah Anda harus membuat sebuah halaman web yang akan menampilkan
pilihan tahun dari 1900 hingga 2000, akankah Anda membuatnya seperti ini?
...
<select name="tahun">
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
...
<option value="2000">2000</option>
</select>
...
Tentu tidak bukan? Anda mungkin menginginkan sesuatu yang praktis seperti ini :
...
<select name="tahun">
<?php lakukan untuk angka 1900 sampai 2000 { ?>
<option value="<?php echo $angka_sekarang; ?>"><?php echo
$angka_sekarang; ?>"></option>
<?php } ?>
</select>
...
Selain itu, pengulangan juga dapat dilakukan untuk hal yang belum diketahui akan diulang berapa
kali seperti yang dicontohkan pada awal bagian ini.
Ada tiga macam pengulangan yang dapat dilakukan dalam bahasa PHP. Yaitu pengulangan dengan
menggunakan for, pengulangan dengan menggunakan while, dan pengulangan dengan menggunakan
do ... while.
Pengulangan dengan pernyataan for adalah sebuah pengulangan yang menggunakan sebuah
variabel bantuan sebagai penghitung. Dengan pengulangan ini Anda akan menentukan nilai awal dari
penghitung, kondisi dimana pengulangan akan terus dilakukan, dan perubahan nilai dari penghitung
untuk setiap pengulangan yang dilakukan.
Berikut adalah penjelasan dari tiga parameter yang harus Anda tentukan :
• Nilai awal, dalam parameter ini Anda akan membuat sebuah variabel penghitung dan
memberikan nilai awal untuk variabel tersebut. Sebagai contoh, Anda dapat menggunakan
pernyataan seperti $i = 1.
• Kondisi pengulangan, yaitu kondisi dari variabel penghitung yang harus dipenuhi untuk
melakukan pengulangan. Sebagai contoh, apabila Anda menggunakan pernyataan $i <= 10,
maka pengulangan akan terus dilakukan selagi nilai dari variabel penghitung lebih kecil atau
sama dengan sepuluh.
• Perubahan nilai, Anda harus menentukan perubahan nilai dari variabel pernghitung setiap kali
aksi berulang. Sebagai contoh, apabila Anda menggunakan pernyataan $i++, maka nilai dari
variabel penghitung akan bertambah satu setiap kali aksi berulang.
Contoh berikut akan menyelesaikan masalah penulisan tahun yang telah dibicarakan sebelumnya :
...
<select name="tahun">
<?php for ($i = 1900; $i <= 2000; $i++) { ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?>"></option>
<?php } ?>
</select>
...
Pada contoh di atas, pengulangan akan dimulai dengan nilai awal 1900 untuk variabel penghitung,
pengulangan akan terus berlanjut selama nilai variabel penghitung ini masih lebih kecil atau sama
dengan 2000, dimana setiap kali aksi berulang maka nilai dari variabel tersebut akan bertambah satu.
Jika Anda perhatikan, pernyataan for juga dapat “melewati batas” seperti pernyataan if. Selain itu,
Anda juga dapat membuat pernyataan for yang bersarang, dimana di dalam blok aksi dari sebuah
pernyataan for terdapat pernyataan for lainnya. Kedua aturan ini juga berlaku untuk metode
pengulangan lainnya.
Pada contoh di atas, untuk setiap pengulangan dengan penghitung i, akan dilakukan pengulangan
dengan penghitung j. Cobalah menggunakan contoh diatas pada sebuah halaman web agar Anda dapat
memahaminya dengan lebih jelas.
Berbeda dengan pengulangan for yang menggunakan variabel penghitung, pengulangan while tidak
menggunakan variabel penghitung, melainkan akan melakukan evaluasi terhadap suatu kondisi.
Pengulangan akan terus dilakukan selama kondisi tersebut dievaluasikan sebagai TRUE.
while ( kondisi ) {
aksi
}
Pernyataan ini memiliki cara kerja yang sama dengan pernyataan if. Apabila kondisi terpenuhi maka
aksi akan terus diulang salama kondisi tersebut terpenuhi. Sedangkan apabila kondisi tidak terpenuhi
maka tidak akan ada aksi yang diambil dan program akan melanjutkan ke pernyataan berikutnya.
$a = 0;
$b = 10;
while ($a < $b) {
echo 'A masih lebih kecil daripada B';
$a++;
$b--;
}
Pada contoh di atas, aksi yang berada di dalam blok akan terus diulang selagi nilai dari variabel $a
masih lebih kecil dari variabel $b.
Pengulangan dengan pernyataan do ... while memiliki kemiripan dengan pengulangan dengan
menggunakan pernyataan while, yaitu pengulangan akan terus dilakukan apabila kondisi yang
dievaluasikan terpenuhi.
Hanya saja, jika pada pernyataan while suatu kondisi tidak terpenuhi aksi yang berada di dalam
blok pengulangan tidak akan dilakukan sama sekali, maka pada pernyataan do ... while aksi yang berada
di dalam blok pengulangan akan dilakukan sebanyak minimal satu kali.Hal ini dikarenakan pada
pernyataan while kondisi akan dievaluasikan terlebih dahulu sebelum aksi, sedangkan pada pernyataan
do ... while kondisi akan dievaluasikan setelah aksi pertama dilakukan.
do {
aksi
} while ( kondisi );
Pengulangan dengan metode ini pada umumnya lebih jarang ditemukan apabila dibandingkan
dengan pengulangan lainnya.
Selain ketiga metode pengulangan di atas, ada satu metode pengulangan yang dapat digunakan
untuk “berjalan” di dalam sebuah array. Metode pengulangan ini dapat digunakan untuk membaca atau
memanipulasi semua elemen yang terdapat di dalam sebuah array dengan mudah.
Pengulangan seperti ini dapat dilakukan dengan menggunakan pernyataan foreach. Berikut adalah
bentuk penulisan pernyataan tersebut :
Dalam pengulangan ini, setiap elemen yang terdapat di dalam sebuah array akan ditempatkan ke
dalam sebuah variabel sementara. Dengan menggunakan variabel sementara, Anda akan dapat
membaca atau memanipulasi elemen-elemen dari sebuah array dengan lebih mudah.
Sebagai contoh, jika Anda ingin menampilkan semua elemen dari sebuah array Anda mungkin akan
melakukan hal berikut ini :
Namun, cara seperti itu bukanlah cara yang baik, karena memiliki ketergantungan terhadap jumlah
elemen dari euatu array. Anda dapat memperbaikinya sebagai berikut :
Cukup baik, namun mungkin agak membingungkan. Cobalah menggunakan pernyataan foreach
seperti berikut ini :
echo $elemen_buah;
}
Dengan menggunakan pernyataan foreach seperti contoh di atas, Anda dapat membaca atau
memanipulasi semua elemen yang terdapat di dalam sebuah array dengan lebih mudah.
Di dalam sebuah halaman web dinamis, terkadang diperlukan beberapa proses yang sama pada
beberapa halaman yang berbeda. Sebagai contoh, pada setiap halaman khusus anggota, selalu dilakukan
pengecekan apakah pengunjung yang membuka halaman tersebut memang terdaftar sebagai anggota
atau tidak. Jika ya, pengunjung tersebut akan memiliki akses terhadap halaman tersebut, selain itu,
pengunjung akan diarahkan ke halaman login.
Tentu saja, Anda dapat melakukan proses duplikasi (baca: copypaste) dari proses-proses tersebut
untuk setiap halaman yang memerlukan proses tersebut. Hanya saja, proses duplikasi ini tentunya
bukanlah metode yang paling efisien. Apabila Anda melakukan perubahan pada satu halaman, Anda
juga harus melakukan perubahan yang sama untuk halaman yang lain. Hal ini tentunya dapat
menyebabkan kesalahan yang terjadi karena adanya halaman yang belum ikut mencerminkan
perubahan pada halaman lainnya.
Untuk menanggulangi masalah ini, Anda dapat menggunakan sebuah fungsi. Fungsi adalah
serangkaian pernyataan-pernyataan PHP yang dapat digunakan untuk melakukan suatu proses. Dengan
menggunakan fungsi, Anda cukup menuliskan proses tersebut satu kali saja pada sebuah dokumen
utama yang nantinya akan dibagi-bagikan kepada halaman-halaman yang memerlukan fungsi tersebut
dengan menggunakan pernyataan include.
Selain untuk melakukan sebuah proses, Anda juga dapat menggunakan fungsi untuk menampilkan
komponen-komponen yang umum pada setiap halaman web, misalkan bagian kepala, navigasi dan kaki
(footer).
Anda dapat membuat sebuah fungsi dengan mengikuti bentuk penulisan berikut :
fuction namafungsi() {
aksi;
return;
}
Sebagai contoh, Anda dapat membuat sebuah fungsi untuk menampilkan bagian navigasi pada
halaman web seperti contoh berikut ini :
function tampilkan_navigasi() {
echo '</ul>';
return;
Pemberian nama fungsi memiliki aturan yang mirip dengan pemberian nama variabel. Hanya saja,
nama dari fungsi tidak diawali dengan tanda dolar ($), melainkan diakhiri dengan sepasang tanda
kurung. Pernyataan return pada akhir sebuah fungsi digunakan sebagai penanda bahwa proses yang
telah dikerjakan oleh fungsi tersebut telah selesai.
Fungsi dapat diletakkan di mana saja di dalam sebuah dokumen PHP. Namun, tempat terbaik untuk
melatakkan fungsi umum yang digunakan pada beberapa halaman web sekaligus adalah pada sebuah
dokumen khusus yang berekstensi .inc. Dokumen ini pada umumnya ditempatkan di dalam sebuah
folder bernama include di dalam folder utama sebuah situs web.
Setelah Anda membuat fungsi-fungsi umum pada sebuah dokumen utama, Anda perlu memberikan
referensi terhadap dokumen tersebut pada setiap halaman web yang akan menggunakan fungsi-fungsi
yang terdapat di dalamnya. Anda dapat melakukan hal ini dengan meletakkan pernyataan seperti
contoh berikut pada bagian paling awal sebuah dokumen PHP :
include('include/fungsi_umum.inc');
Dengan ini, barulah Anda dapat memanggil fungsi tersebut melalui halaman web yang bersangkutan.
Untuk memanggil sebuah fungsi, Anda cukup menuliskan nama dari fungsi yang ingin dipanggil.
Sebagai contoh :
tampilkan_navigasi();
Jika hanya digunakan secara mandiri, PHP tidak dapat menangani penyimpanan data dalam jumlah
besar dengan baik. Oleh karena itu, PHP hampir selalu digunakan bersamaan dengan sebuah sistem
basis data. Dalam hal ini, sistem basis data akan menangani segala proses yang berhubungan dengan
pengambilan dan penyimpanan data, sedangkan PHP akan berinteraksi dengan pengunjung situs web
untuk menangani segala macam logika dan alur program untuk memberikan data dan informasi yang
tepat kepada pengunjung.
Kemampuan untuk berinteraksi dan berkomunikasi dengan berbagai macam sistem basis data
adalah salah satu dari kelebihan PHP yang membuatnya sangat populer. PHP dapat berinteraksi dengan
hampir seluruh sistem basis data yang ada di dunia, namun, penggunaan sistem basis data MySQL
adalah sebuah kombinasi yang paling umum ditemukan. Hal ini dikarenakan keduanya adalah sebuah
perangkat lunak free and open source yang dapat didapatkan dengan gratis.
Dikarenakan kemampuan PHP untuk berinteraksi dengan basis data yang sangat baik, proses yang
diperlukan untuk melakukan hal tersebut pun relatif mudah. Pada dasarnya Anda cukup memerlukan
tiga buah langkah saja, yaitu :
Dikarenakan proses membuat koneksi akan sangat sering digunakan oleh banyak halaman web
yang terdapat di dalam sebuah situs web, Ada baiknya jika Anda membuat sebuah fungsi khusus untuk
membuat koneksi database pada dokumen .inc Anda.
Berikut adalah contoh dari sebuah fungsi untuk melakukan koneksi dengan sistem basis data :
function buka_koneksi() {
$koneksi = mysqli_connect('localhost', 'pengguna', 'katasandi', 'namaskema');
if (!$koneksi) {
die('Tidak dapat membuat koneksi dengan sistem basis data!');
}
return $koneksi;
}
Fungsi mysqli_connect() digunakan untuk membuat koneksi dengan sistem basis data MySQL.
Fungsi ini memerlukan empat buah masukan data, yaitu nama server basis data (biasanya localhost jika
berada pada komputer yang sama dengan aplikasi server web), nama pengguna basis data, kata sandi
pengguna basis data, dan nama skema atau basis data yang akan digunakan.
Fungsi ini akan menghasilkan sebuah referensi koneksi yang akan disimpan di dalam sebuah
variabel. Variabel ini nantinya akan digunakan untuk mengambil dan memanipulasi data serta menutup
koneksi.
if (!$koneksi) {
die('Tidak dapat membuat koneksi dengan sistem basis data!');
}
Pernyataan if ini akan memeriksa apakah koneksi berhasil dibuat atau tidak. Jika koneksi tidak
berhasil dibuat maka seluruh proses pada halaman web akan dihentikan dengan menggunakan fungsi
die(). Hal ini dilakukan untuk menjaga keamanan data dari serangan pihak yang tidak bertanggung
jawab.
return $koneksi;
Pernyataan ini berfungsi untuk mengembalikan referensi koneksi kepada halaman web yang
memanggil fungsi ini untuk selanjutnya digunakan untuk oleh halaman web tersebut.
Layaknya sebuah pintu yang harus ditutup kembali setelah dibuka, koneksi dengan sistem basis
data pun harus segera ditutup setelah selesai digunakan. Hal ini dimaksudkan untuk menjaga sumber
daya dan keamanan dari data yang terdapat di dalamnya.
Berikut adalah contoh dari sebuah fungsi yang dapat digunakan untuk menutup koneksi dengan
sistem basis data :
function tutup_koneksi($koneksi) {
mysqli_close($koneksi);
return;
}
mysqli_close($koneksi);
Koneksi dengan sebuah sistem basis data dapat dilakukan dengan memanggil fungsi mysqli_close().
Fungsi ini memerlukan sebuah masukan berupa referensi koneksi dengan sistem basis data.
Setelah membuat kedua fungsi tersebut, marilah kita mencoba untuk melakukan koneksi ke sistem
basis data pada sebuah halaman web. Buatlah sebuah dokumen PHP baru berdasarkan dengan contoh
berikut ini :
<?php
// Gunakan dokumen db.inc
include('db.inc');
// Buka koneksi, simpan referensi dalam variabel $koneksi
$koneksi = buka_koneksi();
// Jalankan perintah SQL, simpan hasil dalam variabel $hasil
<!doctype html>
<html>
<head>
<title>Tes Koneksi Database</title>
</head>
<body>
<h1>Tes Koneksi Database</h1>
<p>
<?php
if ($hasil) { // Jika ada hasil
echo 'SUKSES!';
} else { // Jika tidak ada hasil
echo 'GAGAL!';
}
?>
</body>
</html>
<?php
// Hapus data dari hasil
mysqli_free_result($hasil);
// Jangan lupa menutup koneksi!
tutup_koneksi($koneksi);
?>
Sesuaikanlah nama dokumen inc dan perintah SQL yang digunakan dengan keperluan Anda.
Simpanlah dengan nama tes_koneksi.php lalu bukalah dengan peramban web Anda.
Proses pengambilan data dari sistem basis data ke dalam sebuah halaman web dinamis dengan PHP
tidaklah sulit. Anda cukup menggunakan perintah SQL SELECT sesuai dengan kebutuhan Anda.
Berikut adalah contoh pengambilan data dari suatu tabel dan menampilkannya ke dalam sebuah
halaman web :
<?php
include('db.inc');
$koneksi = buka_koneksi();
$sql = 'SELECT * FROM product WHERE product_category_id = 6';
$hasil = mysqli_query($koneksi, $sql);
?>
<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Daftar Barang</h1>
<table border="1">
<tr>
<td>Kode</td>
<td>Nama Barang</td>
<td>Harga Satuan</td>
<td>Aksi</td>
</tr>
<?php while ($data = mysqli_fetch_assoc($hasil)) { ?>
<tr>
<td><?php echo $data['product_id']; ?></td>
<td><?php echo $data['product_name']; ?></td>
<td><?php echo $data['product_price']; ?></td>
<td>
<a href="ubah.php?product_id=<?php echo $data['product_id']; ?>">Ubah</a>
<a href="hapus.php?product_id=<?php echo
$data['product_id']; ?>">Hapus</a>
</td>
</tr>
<?php } ?>
</table>
</body>
</html>
<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
?>
$koneksi = buka_koneksi();
Fungsi mysqli_query() digunakan untuk menjalankan perintah SQL terhadap sistem basis data
yang sudah terkoneksi. Hasil dari perintah ini akan disimpan di dalam variabel $hasil.
Fungsi mysqli_fetch_assoc() digunakan untuk mengambil satu baris data dari hasil perintah SQL
menjadi sebuah map, dimana nama kolom akan menjadi indeks dan data pada kolom akan menjadi nilai
elemen. Hasil dari perintah ini akan disimpan di dalam sebuah variabel bernama $data.
Penggunaan pengulangan while disini dimaksudkan untuk mengulang proses penampilan data
selagi masih ada data yang dapat ditampilkan. Jika data sudah habis maka pengulangan akan berhenti.
echo $data['product_id'];
Kedua tautan ini digunakan untuk menuju ke halaman dinamis yang dapat digunakan untuk
mengubah atau menghapus data produk.
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
Sebagai sebuah halaman web dinamis, tentunya Anda juga dapat menggunakan masukan dari
pengguna sebagai parameter tambahan untuk mengambil data. Berikut adalah contoh untuk mencari
data berdasarkan kata kunci yang diberikan oleh pengguna melalui formulir :
<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Pencarian Barang</h1>
<form action="proses_cari.php" method="post">
<p>
Masukkan Kata Kunci Pencarian : <br />
<input name="kata_kunci" type="text" size="50" maxlength="100" />
<?php
include('umum.inc');
$koneksi = buka_koneksi();
$kata_kunci = mysqli_real_escape_string($koneksi, $_POST['kata_kunci']);
$sql = 'SELECT * FROM product WHERE product_name LIKE "%' . $kata_kunci . '%"';
$hasil = mysqli_query($koneksi, $sql);
?>
<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Hasil Pencarian</h1>
<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
?>
Perlu diperhatikan bahwa fungsi mysqli_real_escape_string() adalah sebuah fungsi yang sangat
penting digunakan untuk “membersihkan” data yang dimasukkan oleh seorang pengunjung dari potensi
serangan SQL Injection yang sangat berbahaya. Untuk setiap perintah SQL yang akan menggunakan
masukkan dari pengguna, pastikan Anda menggunakan cara seperti ini untuk mengambil datanya dari
formulir.
Tentu saja, Anda juga dapat menggunakan variabel $_GET untuk memasukkan data dari querystring
ke dalam perintah SQL.
$sql = 'SELECT * FROM product WHERE product_name LIKE "%' . $kata_kunci . '%"';
Perintah SQL ini menambahkan masukkan dari pengguna sebagai keterangan tambahan untuk
pencarian. Sekali lagi, pastikan bahwa masukkan tersebut sudah diamankan.
mysqli_num_rows($hasil);
Memasukkan data ke dalam sistem basis data dengan menggunakan PHP tidaklah jauh berbeda,
Anda cukup mengirimkan data-data yang diperlukan kepada dokumen PHP yang akan memproses data
tersebut dengan menggunakan formulir ataupun querystring. Hanya saja, pastikan data yang
dimasukkan oleh pengunjung tersebut sudah baik dan benar.
<?php
include('umum.inc');
$koneksi = buka_koneksi();
$sql = 'SELECT * FROM category';
$hasil = mysqli_query($koneksi, $sql);
?>
<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Penambahan Data Barang</h1>
<form action="proses_tambah.php" method="post">
<p>
Nama Barang : <br />
<input name="product_name" type="text" size="50" maxlength="100" />
<p>
Kategori : <br />
<select name="product_category_id">
<?php while ($data = mysqli_fetch_assoc($hasil)) { ?>
<option value="<?php echo $data["category_id"]; ?>">
<?php echo $data["category_name"]; ?>
</option>
<?php } ?>
</select>
<p>
Harga Satuan: <br />
<input name="product_price" type="text" size="50" maxlength="100" />
<p>
Keterangan : <br />
<textarea name="product_description"></textarea>
<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
?>
Formulir contoh di atas melakukan koneksi ke sistem basis data untuk mengambil data-data
kategori produk yang ada untuk dijadikan pilihan di dalam formulir. Formulir tersebut kemudian akan
diproses oleh dokumen PHP berikut ini :
<?php
include('umum.inc');
$koneksi = buka_koneksi();
<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<?php if (sizeof($error) == 0) { ?>
<h1>Produk baru telah berhasil ditambahkan!</h1>
<?php } else { ?>
<h1>Tidak dapat menambah data produk!</h1>
<ul>
<?php foreach ($error as $e) { ?>
<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
?>
Hal yang paling penting dalam memasukkan data adalah memastikan semua data yang dimasukkan
oleh pengguna sudah benar. Kesalahan pada pemasukan data yang tidak ditanggulangi dapat
menyebabkan rusaknya data pada basis data Anda.
$sql = 'INSERT INTO product VALUES (NULL, "' . $product_category_id . '", "' .
$product_name . '", "' . $product_description . '", "' . $product_price . '")';
Memasukkan data ke dalam basis data menggunakan PHP cukup dengan membuat sebuah perintah
SQL INSERT.
mysqli_query($koneksi, $sql);
Untuk memasukkan data, tidak ada hasil yang dikembalikan sehingga tidak memerlukan sebuah
variabel untuk menampung hasil.
Pada prinsipnya, sebuah dokumen yang digunakan untuk melakukan pengubahan data sangatlah
mirip dengan dokumen yang digunakan untuk memasukkan data. Perbedaannya hanya terletak pada
perintah SQL yang digunakan dan halaman formulirnya dimana pada formulir tersebut akan
ditampilkan data yang sebelumnya.
<?php
include('umum.inc');
$koneksi = buka_koneksi();
?>
<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<h1>Pengubahan Data Barang</h1>
<?php if ((empty($_GET['product_id'])) || mysqli_num_rows($hasil_product) == 0)
{ ?>
<p>Tidak ada barang yang dipilih!
<?php } else {
$data_product = mysqli_fetch_assoc($hasil_product);
?>
<form action="proses_ubah.php" method="post">
<input type="hidden" name="product_id" value="<?php echo
$data_product['product_id']; ?>"; ?>
<p>
Nama Barang : <br />
<input name="product_name" type="text" size="50" maxlength="100"
value="<?php echo $data_product['product_name']; ?>" />
<p>
Kategori : <br />
<select name="product_category_id">
<?php while ($data_category = mysqli_fetch_assoc($hasil_category)) { ?>
<option value="<?php echo $data_category["category_id"]; ?>" <?php if
($data_category["category_id"] == $data_product["product_category_id"]) { echo
'selected="selected"'; } ?>>
<?php echo $data_category["category_name"]; ?>
</option>
<?php } ?>
</select>
<p>
Harga Satuan: <br />
<input name="product_price" type="text" size="50" maxlength="100"
value="<?php echo $data_product['product_price']; ?>" />
<p>
Keterangan : <br />
<textarea name="product_description"><?php echo
$data_product['product_description']; ?></textarea>
<?php
mysqli_free_result($hasil_product);
mysqli_free_result($hasil_category);
tutup_koneksi($koneksi);
?>
Elemen input dengan type hidden pada formulir tersebut akan digunakan sebagai referensi produk
yang akan diubat untuk dokumen pemroses.
Formulir tersebut akan diproses oleh sebuah dokumen PHP seperti berikut :
<?php
include('umum.inc');
$koneksi = buka_koneksi();
<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<?php if (sizeof($error) == 0) { ?>
<h1>Produk telah berhasil diubah!</h1>
<?php } else { ?>
<h1>Tidak dapat mengubah data produk!</h1>
<ul>
<?php foreach ($error as $e) { ?>
<li><?php echo $e; ?></li>
<?php } ?>
</ul>
<?php } ?>
</body>
</html>
<?php
tutup_koneksi($koneksi);
?>
mysqli_query($koneksi, $sql);
Untuk mengubah data, tidak ada hasil yang akan didapatkan dari perintah SQL, oleh karena itu,
Anda tidak memerlukan variabel untuk menyimpan hasil tersebut.
Jika dibandingkan dengan proses-proses sebelumnya, proses penghapusan data pada sebuah sistem
basis data dengan menggunakan PHP relatif lebih mudah. Hal ini dikarenakan Anda tidak memerlukan
sebuah halaman formulir untuk melakukannya. Melainkan, Anda hanya memerlukan sebuah dokumen
untuk memproses penghapusan tersebut.
<?php
include('umum.inc');
$koneksi = buka_koneksi();
// Hapus data
$sql = 'DELETE FROM product WHERE product_id = ' . $product_id;
mysqli_query($koneksi, $sql);
?>
<!doctype html>
<html>
<head>
<title>Toko Saya</title>
</head>
<body>
<?php if (empty($_GET['product_id']) { ?>
<p>Tidak ada barang yang dipilih!
<?php } else { ?>
<h1>Data produk telah dihapus!</h1>
<?php } ?>
</body>
</html>
<?php
tutup_koneksi($koneksi);
?>
Session dapat dikatakan sebagai waktu kunjungan dari seorang pengunjung situs web. Session
dimulai sejak seorang pengunjung tiba di situs Anda hingga ia pergi. Di dalam sebuah session, ada
kalanya Anda ingin menyimpan beberapa informasi tentang pengunjung tersebut, misalkan identitas
dan tingkatan hak akses dari pengunjung tersebut.
Sifat dari variabel session yang unik seperti ini menjadikannya sangat ideal untuk digunakan untuk
menyimpan informasi login dan hak akses dari suatu pengunjung. Dengan menyimpan data tertentu
yang menandakan seorang pengunjung telah melakukan login, Anda dapat menyesuaikan tampilan dari
halaman web Anda dan membedakan dengan pengunjung lainnya yang belum melakukan login.
Sebelum Anda dapat menggunakan session, Anda harus memberikan sebuah perintah kepada PHP
yang berfungsi untuk mengaktifkan fitur session. Dikarenakan Anda harus mengaktifkan fitur session
untuk semua halaman yang Ada, ada baiknya Anda meletakkan perintah ini di bagian awal dokumen inc
Anda. Berikut adalah perintah yang digunakan :
session_start();
Setelah Anda mengaktifkan fitur session, barulah Anda dapat menggunakan session pada halaman
web Anda. Menggunakan session sangatlah sederhana, Anda dapat menyimpan dan mengambil data
dari variabel session selayaknya Anda menggunakan sebuah map. Variabel session sendiri dapat
diakses dari seluruh halaman web yang Anda miliki dan akan menyimpan nilai yang sama untuk
masing-masing pengguna.
Setelah sebuah session selesai, Anda dapat menghapus semua data yang terdapat pada variabel
session sekaligus membuat nilai dari PHPSESSID yang sudah diberikan kepada pengunjung tersebut
tidak berlaku lagi. Berikut adalah perintah yang digunakan untuk melakukan hal tersebut :
session_destroy();
Agar lebih dapat memahami penggunaan session marilah mencoba menerapkannya pada sebuah
halaman web. Pertama-tama buatlah sebuah formulir sederhana seperti berikut ini :
<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<form action="home.php" method="post">
<p>
Masukkan Nama Anda : <br />
<input name="nama" type="text" size="50" maxlength="100" />
Simpanlah dengan nama login.php. Lalu buatlah halaman lain bernama home.php seperti berikut
ini :
<?php
session_start();
// Simpan nama dalam session
if (empty($_SESSION['nama'])) {
$_SESSION['nama'] = $_POST['nama'];
}
?>
<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<h1>Halo, <?php echo $_SESSION['nama']; ?>!</h1>
<a href="logout.php">Logout</a>
</body>
</html>
Buatlah satu halaman lain untuk melakukan logout dengan nama logout.php seperti berikut :
<?php
session_start();
// Hapus sesi
session_destroy();
?>
<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<h1>Selamat jalan!</h1>
</body>
</html>
Jika sudah, bukalah halaman login.php, masukkanlah nama Anda dan kirimkan data formulir.
Cobalah menutup peramban web Anda lalu membuka kembali halaman home.php. Masih dapatkan
Anda melihat nama Anda? Sekarang cobalah melakukan logout dan membuka kembali halaman
home.php. Bagaimana hasilnya?
Jika Anda sudah dapat memahami dasar dari penggunaan session, marilah mencoba untuk
membuat halaman untuk login dan logout yang “sebenarnya”. Secara konsep, pembuatan halaman-
halaman tersebut tidaklah jauh berbeda dengan contoh yang sudah Anda kerjakan. Hanya saja,
diperlukan tambahan koneksi ke sistem basis data untuk mendapatkan kombinasi nama pengguna dan
kata sandi yang tepat.
<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<form action="proses_login.php" method="post">
<p>
Masukkan Nama Pengguna : <br />
<input name="nama_pengguna" type="text" size="50" maxlength="100" />
<p>
Masukkan Kata Sandi : <br />
<input name="kata_sandi" type="password" size="50" maxlength="100" />
Data dari formulir login yang tedapat pada halaman tersebut akan diproses sebagai berikut :
<?php
include('umum.inc');
$koneksi = buka_koneksi();
$sql = 'SELECT * FROM pengguna WHERE nama_pengguna = "' . $nama_pengguna . '" AND
kata_sandi = "' . $kata_sandi '"';
$hasil = mysqli_query($koneksi, $sql);
// Periksa apakah ada pengguna dengan kombinasi nama dan sandi yang benar
if (mysqli_num_rows($hasil) == 1) {
// Simpan identitas pengguna dalam session
$_SESSION['nama_pengguna'] = $nama_pengguna;
}
?>
<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<?php if (!empty($_SESSION['nama_pengguna'])) { ?>
<h1>Halo, <?php echo $_SESSION['nama']; ?>!</h1>
<a href="home.php">Lanjutkan ke halaman utama</a>
<?php } else { ?>
<h1>Login gagal!</h1>
<?php } ?>
</body>
</html>
<?php
mysqli_free_result($hasil);
tutup_koneksi($koneksi);
?>
Berikut adalah sebuah contoh halaman yang memeriksa apakah seorang pengguna sudah
melakukan login atau belum :
<?php
include('umum.inc');
// Periksa pengguna
if (empty($_SESSION['nama_pengguna'])) {
// Jika belum login, arahkan ke halaman login
header("Location: login.php");
}
?>
<!doctype html>
<html>
<head>
<title>Situs Saya</title>
</head>
<body>
<h1>Selamat Datang di Member Area!</h1>
</body>
</html>
Dapat dilihat bahawa proses untuk memeriksa apakah seorang pengguna sudah melakukan login
atau belum sangatlah sederhana, yaitu cukup dengan memeriksa apakah sudah ada variabel sesi yang
tepat atau tidak.
header("Location: login.php");
Fungsi header() dapat digunakan untuk mengarahkan peramban web secara otomatis ke halaman
lain.
Sedangkan untuk melakukan logout prosesnya sama seperti contoh yang sudah diberikan
sebelumnya, yaitu cukup dengan memanggil fungsi session_destroy().
Kadangkala, sebuah halaman web dinamis akan membutuhkan sebuah berkas dari pengguna.
Sebagai contoh, pada halaman profil seorang pengguna, ia dapat mengupload berkas fotonya sendiri
untuk dipasang pada halaman tersebut. Dengan menggunakan PHP, sebuah halaman web dapat
menerima berkas yang diupload oleh seorang pengguna dan menyimpannya di dalam server web.
Untuk menerima berkas dari pengguna, Anda akan memerlukan sebuah formulir khusus seperti
pada contoh berikut ini :
Dapat dilihat bahwa ada atribut tambahan enctype dengan nilai multipart/form-data pada
elemen formulir diatas. Atribut ini berfungsi untuk menandakan bahwa formulir ini akan mengirimkan
berkas untuk selanjutnya diproses oleh server web. Berkas tersebut sendiri dapat dimasukkan oleh
pengguna dengan menggunakan elemen input dengan atribut type yang memiliki nilai file.
Berbeda dengan data pada formulir biasa yang dapat Anda akses melalui variabel $_POST, untuk
merngakses berkas yang telah diupload oleh pengguna Anda akan menggunakan variabel $_FILES.
Dengan menggunakan variabel ini, Anda dapat mendapatkan informas-informasi mengenai berkas yang
telah diupload tersebut, seperti nama berkas, jenis berkas, lokasi penyimpanan sementara berkas, dan
ukuran berkas seperti berikut ini :
Perlu diketahui bahwa berkas yang diupload oleh pengguna akan segera dihapus apabila pengguna
berpindah halaman. Hal ini disebabkan karena untuk setiap berkas yang diupload pengguna, PHP hanya
menyimpannya secara sementara saja. Jika Anda ingin menyimpan berkas tersebut secara permanen,
Anda harus memindahkan lokasi berkas tersebut dari lokasi penyimpanan sementara ke lokasi yang
Anda inginkan. Untuk melakukan hal seperti ini, Anda dapat menggunakan fungsi seperti pada contoh
berikut ini :
move_uploaded_file($_FILES['berkas']['tmp_name'], 'c:\xampp\htdocs\situssaya\berkas');
Dalam membuat sebuah halaman yang dapat menerima berkas yang diupload dari pengguna, Anda
harus ekstra hati-hati. Tentunya Anda tidak ingin pengguna Anda mengupload berkas yang berbahaya
seperti virus ke dalam server web Anda. Untuk itu, Anda dapat membatasi jenis berkas yang dapat
diupload oleh pengguna dengan menggunakan fungsi ereg() seperti pada contoh berikut ini :
Dengan menggunakan PHP, Anda dapat mengirimkan e-mail dari halaman web Anda dengan mudah.
Hanya saja, perlu diperhatikan bahwa tidak semua layanan hosting yang Anda mendukung penggunaan
fungsi ini. Konsultasikanlah terlebih dahulu dengan layanan hosting Anda apakah Anda dapat mengirim
e-mail dengan PHP atau tidak.
Berikut adalah contoh perintah yang dapat digunakan untuk mengirim sebuah e-mail :
Setelah Anda membuat sebuah situs web, tentunya Anda ingin meletakkan situs web Anda di
Internet agar dapat dibuka oleh banyak orang. Untuk ini, Anda harus mendeploy atau memasang situs
web Anda kepada sebuah server web yang terhubung dengan Internet.
Tentu saja, Anda dapat membuat server web Anda sendiri, namun untuk sebuah situs web pribadi
biasanya ini bukanlah pilihan yang tepat karena Anda harus menyediakan sebuah komputer untuk
menjadi server dan tentunya sebuah koneksi internet selama 24 jam terus-menerus. Untuk itu, Anda
dapat menggunakan jasa dari sebuah perusahaan yang menyediakan layanan hosting atau yang juga
dikenal dengan istilah web hosting company.
Ada sangat banyak perusahaan seperti ini baik yang bertaraf lokal maupun internasional. Tarif yang
ditawarkan pun sangat beragam, mulai dari gratis hingga puluhan juta rupiah per bulannya. Hosting
yang gratis tentunya akan sangat menggiurkan, namun pada umumnya fitur yang disediakan sangat
minim dan perusahaan tersebut akan menyelipkan iklan mereka secara paksa pada halaman web Anda.
Dalam modul ini, penulis memilih layanan hosting gratis dari Byethost. Walaupun gratis, fitur yang
disediakannya sudah sangat lumayan, yaitu kapasitas penyimpanan data sebanyak 5500 MB, koneksi
untuk transfer data sebanyak 200 GB per bulan, dukungan untuk PHP dan MySQL dengan maksimum 5
skema, dan yang paling menarik, bebas iklan. Layanan hosting ini dapat Anda akses melalui situs
http://www.byethost.com/.
Selain layanan web hosting, Anda juga akan memerlukan sebuah domain. Domain adalah sebuah
alamat internet yang dapat Anda gunakan untuk situs web Anda. Untuk domain yang
berakhiran .com, .net, .co.id, dan sebagainya, Anda harus membayar biaya sewa domain pertahunnya.
Namun, Jika Anda menggunakan layanan web hosting gratis, Anda akan mendapatkan sebuah domain
yang gratis pula. Hanya saja, nama domain ini agak lebih panjang dan tidak akan sebagus domain yang
berbayar.
Langkah pertama untuk menjadikan situs Anda “live” di Internet adalah dengan membuat akun pada
layanan hosting Anda, dalam hal ini http://www.byethost.com/. Prosesnya sendiri cukup sederhana
dan cepat. Namun, Anda diharuskan untuk mempunyai sebuah alamat e-mail aktif terlebih dahulu.
Setelah Anda telah berhasil membuat akun pada penyedia layanan hosting, Langkah selanjutnya
adalah untuk mendeploy atau memasang basis data yang akan digunakan pada situs web Anda. Berikut
adalah proses untuk melakukan hal tersebut :
Setelah Anda telah berhasil mentransfer basis data Anda, Anda perlu menyesuaikan pengaturan
agar halaman-halaman web Anda dapat melakukan koneksi terhadap basis data Anda pada layanan
hosting Anda. Untuk melakukan hal ini, suntinglah dokumen inc Anda dan ubahlah informasi pada
fungsi koneksi basis data Anda sesuai dengan informasi yang disediakan oleh layanan hosting Anda,
sebagai contoh :
function buka_koneksi() {
$koneksi = mysqli_connect('sql108.byethost31.com', 'b31_189754', 'rahasiadong',
'b31_189754_tokosaya');
if (!$koneksi) {
die('Tidak dapat membuat koneksi dengan sistem basis data!');
}
return $koneksi;
}
Langkah selanjutnya adalah mengupload dokumen-dokumen HTML, CSS dan PHP Anda ke penyedia
layanan hosting Anda. Anda dapat melakukan hal ini dengan melakukan langkah-langkah berikut ini :