Aplikasi Web Dinamis

PELATIHAN TEKNIS
OPERATOR CONSOLE PAJAK LANJUTAN
MODUL
APLIKASI WEB DINAMIS
Disusun Oleh:
RIFKI
Pranata Komputer Muda Direktorat Jenderal Pajak
KEMENTERIAN KEUANGAN REPUBLIK INDONESIA

BADAN PENDIDIKAN DAN PELATIHAN KEUANGAN
PUSAT PENDIDIKAN DAN PELATIHAN PAJAK
2018
PERNYATAAN DISCLAIMER
Seluruh informasi dan data yang disediakan dalam modul ini adalah
bersifat umum dan disediakan untuk tujuan pendidikan saja. Dengan demikian
tidak dianggap sebagai suatu acuan hukum.
Pada dasarnya, modul ini merupakan bahan kajian ilmiah yang
penyusunannya sesuai dengan Peraturan Kepala Badan Pendidikan dan
Pelatihan Keuangan Nomor PER-003/PP/2009 tentang Pedoman Penyusunan
Modul di Lingkungan Badan Pendidikan dan Pelatihan Keuangan. Informasi dan
ilustrasi bersifat umum dan tidak rahasia.
Pusdiklat Pajak maupun Penyusun Modul tidak dapat digugat maupun
dituntut atas segala pernyataan, kekeliruan, ketidaktepatan atau kekurangan
dalam setiap konten yang disampaikan dalam modul ini.
Seiring dengan perubahan peraturan perundang-undangan yang disebut
dalam modul ini mungkin sudah tidak sesuai/tidak relevan dengan peraturan
perundang-undangan yang berlaku saat ini.
Disarankan untuk mengecek kembali dasar hukum yang digunakan dalam
modul ini untuk memastikan peraturan perundang-undangan yang digunakan
masih berlaku.
i
KATA PENGANTAR
Berdasarkan Surat Keputusan Kuasa Pengguna Anggaran Pusat

Pendidikan dan Pelatihan Pajak Nomor KEP-169/PP.4/2018 tanggal 6 Juli 2018
tentang Penyusunan Modul Pelatihan Teknis Operator Console Pajak Lanjutan
Tahun Anggaran 2018, kepada Sdr. Rifki ditugaskan untuk menyusun Modul
Aplikasi Web Dinamis untuk Pelatihan Teknis Operator Console Pajak Lanjutan di
Pusdiklat Pajak.
Mengingat modul sebagaimana terlampir telah diseminarkan, dengan ini
kami menyatakan bahwa modul dimaksud telah sah dan layak untuk digunakan
sebagai Modul Aplikasi Web Dinamis untuk Pelatihan Teknis Operator Console
Pajak Lanjutan.
Kami mengucapkan selamat dan terima kasih kepada Penyusun dan
semua pihak yang telah membantu dalam penyelesaian materi modul tersebut.
Demikian Kata Pengantar dan Pengesahan ini dibuat untuk dipergunakan
sebagaimana mestinya.
Jakarta, September 2018

Kepala Pusdiklat Pajak,
Hario Damar
NIP 19620629 198302 1 002
ii
DAFTAR ISI
PERNYATAAN DISCLAIMER ............................................................................... I

KATA PENGANTAR ............................................................................................ II
DAFTAR ISI ........................................................................................................ III
DAFTAR TABEL .................................................................................................VI
DAFTAR GAMBAR ............................................................................................VII
PETUNJUK PENGGUNAAN MODUL .................................................................IX
PETA KONSEP MODUL......................................................................................X
A. PENDAHULUAN ............................................................................................ 1
1. Deskripsi Singkat .......................................................................................... 1
2. Prasyarat Kompetensi .................................................................................. 1
3. Standar Kompetensi (SK) dan Kompetensi Dasar (KD) ................................ 1
4. Relevansi Modul .............................................................................................. 3
B. KEGIATAN BELAJAR .................................................................................... 4
1. KEGIATAN BELAJAR 1 .................................................................................. 4
PENGENALAN HTML ......................................................................................... 4
1.1. Indikator Keberhasilan .................................................................................. 4
1.2. Pengertian HTML .......................................................................................... 4
1.3. Text Editor .................................................................................................... 5
1.4. Browser ........................................................................................................ 7
1.5. Struktur Dokumen HTML .............................................................................. 8
1.6. Elemen Dasar HTML .................................................................................. 11
1.7. Latihan ........................................................................................................ 28
1.8. Rangkuman ................................................................................................ 30
1.9. Tes Formatif 1............................................................................................. 30
1.10. Umpan Balik dan Tindak Lanjut ................................................................ 32
2. KEGIATAN BELAJAR 2 ................................................................................. 34
PENGATURAN HALAMAN WEB....................................................................... 34
DENGAN CASCADING STYLE SHEET (CSS) .................................................. 34
2.1. Indikator Keberhasilan ................................................................................ 34
2.2. Pengenalan CSS ........................................................................................ 34
2.3. Manfaat CSS .............................................................................................. 34
2.4. Mentode Penulisan CSS ............................................................................. 35
2.5. Struktur CSS ............................................................................................... 37
2.6. Cara Penulisan CSS ................................................................................... 38
2.7. Jenis Selector ............................................................................................. 39
2.8. Contoh File CSS ......................................................................................... 41
2.9. Latihan ........................................................................................................ 43
2.10. Rangkuman .............................................................................................. 43
2.11. Tes Formatif 2........................................................................................... 44
3. KEGIATAN BELAJAR 3 ................................................................................ 47
PENGGUNAAN PHP ......................................................................................... 47
3.2. Pengertian PHP .......................................................................................... 47
3.3. Instalasi Web Server, PHP, dan MySQL ..................................................... 49
3.4. Penulisan Kode PHP .................................................................................. 57
3.5. Variabel ...................................................................................................... 62
iii
3.6. Operator ..................................................................................................... 64

3.5. Struktur Kontrol Pemrograman ................................................................... 71
3.8. Fungsi Explode() ......................................................................................... 78
3.9. Fungsi str_replace() .................................................................................... 79
3.10. Session ..................................................................................................... 80
3.11. Fungsi Include Dan Require...................................................................... 81
3.12. Latihan ...................................................................................................... 83
3.13. Rangkuman .............................................................................................. 83
3.14. Tes Formatif 3........................................................................................... 84
4. KEGIATAN BELAJAR 4 ................................................................................. 87
PENGGUNAAN DATABASE MYSQL ................................................................ 87
4.2. Pengenalan MySQL ................................................................................... 87
4.3. Relational Database.................................................................................... 87
4.4. Tipe Data .................................................................................................... 89
4.5. Membuat Database dan Tabel .................................................................... 91
4.6. Input dan Import Data ke Dalam Tabel........................................................ 96
4.7. Melihat dan Memanipulasi Data ................................................................. 98
4.8. Latihan ...................................................................................................... 101
4.9. Rangkuman .............................................................................................. 101
4.10. Tes Formatif 4......................................................................................... 102
4.11. Umpan Balik dan Tindak Lanjut .............................................................. 104
5. KEGIATAN BELAJAR 5 ............................................................................... 105
PEMBUATAN WEB DINAMIS DENGAN PHP DAN MYSQL ........................... 105
5.1. Indikator Keberhasilan .............................................................................. 105
5.2. Koneksi PHP dan MySQL ......................................................................... 105
5.3. Menampilkan Data .................................................................................... 107
5.4. Membuat Halaman Pencarian Data .......................................................... 111
5.5. Membuat Halaman Perekaman Data ........................................................ 115
5.6. Membuat Halaman Perubahan dan Penghapusan Data ........................... 120
5.7. Membuat Halaman Pengunggahan File .................................................... 128
5.8. Latihan ...................................................................................................... 138
5.9. Rangkuman .............................................................................................. 138
5.10. Tes Formatif 5........................................................................................ 138
6. KEGIATAN BELAJAR 6 ............................................................................... 142
PEMANFAATAN FUNGSI CLIENT UNIFORM RESOURCE LOCATOR (CURL)
........................................................................................................................ 142
6.1. Indikator Keberhasilan .............................................................................. 142
6.2. Pengertian CURL ...................................................................................... 142
6.3. Mengaktifkan Library CURL di PHP .......................................................... 143
6.4. Fungsi-fungsi di dalam Library CURL........................................................ 144
6.5. Mengambil Teks atau Obyek Tertentu Dengan CURL .............................. 147
6.6. Memasukkan Data Hasil CURL ke Dalam Database................................. 152
6.7. Latihan ...................................................................................................... 156
6.8. Rangkuman .............................................................................................. 156
6.9. Tes Formatif 6........................................................................................... 157
PENUTUP ....................................................................................................... 160
iv
TES SUMATIF ................................................................................................. 161

UMPAN BALIK DAN TINDAK LANJUT ............................................................ 166
KUNCI JAWABAN ........................................................................................... 167
DAFTAR PUSTAKA......................................................................................... 169
v
DAFTAR TABEL
Tabel 1. Operator Aritmatika dalam PHP ........................................................... 65

Tabel 2. Operator Logika dalam PHP ................................................................ 67
Tabel 3. Operator Perbandingan dalam PHP ..................................................... 68
Tabel 4. Struktur Tabel Pegawai ........................................................................ 95
Tabel 5. Data Isian Pada Tabel Pegawai ........................................................... 97
Tabel 6. Struktur Tabel KPP ............................................................................ 152
vi
DAFTAR GAMBAR
Gambar 1. Aplikasi Notepad ................................................................................ 5

Gambar 2. Aplikasi Wordpad ............................................................................... 6
Gambar 3. Aplikasi Notepad++ ............................................................................ 6
Gambar 4. Macromedia Dreamweaver ................................................................ 7
Gambar 5. Komposisi Penggunaan Browser ....................................................... 8
Gambar 6. Tampilan File HTML Pada Browser .................................................... 9
Gambar 7. Penggunaan Tag Break dan Paragraph ........................................... 12
Gambar 8. Format Teks ..................................................................................... 13
Gambar 9. Penggunaan Tag Heading ............................................................... 14
Gambar 10. Penggunaan Tag List ..................................................................... 15
Gambar 11. Penggunaan Tag Link .................................................................... 16
Gambar 12. Penggunaan Tag Image (1) ........................................................... 18
Gambar 13. Penggunaan Tag Image (2) ........................................................... 20
Gambar 14. Penggunaan Tag Table .................................................................. 23
Gambar 15. Penggunaan Tag Komentar ........................................................... 24
Gambar 16. Contoh Form HTML ....................................................................... 28
Gambar 17. Market Share Penggunaan Bahasa Pemrograman Server-side ..... 48
Gambar 18. Jendela Peringatan Anti Virus ........................................................ 50
Gambar 19. Jendela Peringatan User Account Control (UAC) ........................... 50
Gambar 20. Jendela Awal Instalasi XAMPP ...................................................... 51
Gambar 21. Jendela Select Components .......................................................... 51
Gambar 22. Jendela Instalation Folder .............................................................. 52
Gambar 23. Jendela Bitnami for XAMPP ........................................................... 52
Gambar 24. Jendela Ready to Install ................................................................. 53
Gambar 25. Proses Instalasi XAMPP ................................................................ 53
Gambar 26. Jendela Completing the XAMPP Setup Wizard .............................. 54
Gambar 27. XAMPP Control Panel .................................................................... 54
Gambar 28. Halaman Depan XAMPP (1) .......................................................... 55
Gambar 29. Halaman Depan XAMPP (2) .......................................................... 56
Gambar 30. Penggunaan Metode XML Style ..................................................... 58
Gambar 31. Operator String .............................................................................. 65
Gambar 32. Penggunaan Operator Aritmatika ................................................... 66
Gambar 33. Penggunaan Struktur Logika IF ...................................................... 72
Gambar 34. Penggunaan Struktur Logika Switch............................................... 73
Gambar 35. Struktur Perulangan FOR ............................................................... 75
Gambar 36. Struktur Perulangan While ............................................................. 76
Gambar 37. Struktur Perulangan Do-While ........................................................ 77
Gambar 38. Penggunaan Fungsi explode .......................................................... 79
Gambar 39. Penggunaan Fungsi str_replace..................................................... 80
Gambar 40. Penggunaan Session ..................................................................... 81
vii
Gambar 41. Penggunaan Fungsi Include ........................................................... 82

Gambar 42. Relational Database Model ............................................................ 89
Gambar 43. Halaman phpmyadmin ................................................................... 92
Gambar 44. Membuat Database ........................................................................ 93
Gambar 45. Membuat Tabel (1) ......................................................................... 94
Gambar 46. Membuat Tabel (2) ......................................................................... 94
Gambar 47. Tabel Pegawai ............................................................................... 95
Gambar 48. Insert Data ..................................................................................... 96
Gambar 49. Menampilkan Data Tabel Pegawai ................................................. 97
Gambar 50. Import Data ke Dalam Tabel .......................................................... 98
Gambar 51. Query Data................................................................................... 100
Gambar 52. Koneksi PHP - MySQL ................................................................. 107
Gambar 53. Menampilkan Data Pegawai (1) ................................................... 109
Gambar 55. Pencarian Pegawai ...................................................................... 113
Gambar 56. Hasil Pencarian Data Pegawai ..................................................... 115
Gambar 57. Perekaman Data Pegawai ............................................................ 117
Gambar 58. Penyimpanan Data Pegawai Berhasil .......................................... 119
Gambar 59. Penyimpanan Data Pegawai Gagal .............................................. 120
Gambar 61. Perubahan Data Pegawai ............................................................ 125
Gambar 62. Perubahan Data Pegawai Berhasil ............................................... 127
Gambar 63. Perubahan Data Pegawai Berhasil ............................................... 127
Gambar 64. Menghapus Data Pegawai ........................................................... 128
Gambar 65. Menambahkan Kolom Pada Tabel Pegawai ................................. 129
Gambar 67. Unggah Foto Pegawai .................................................................. 132
Gambar 68. Unggah File Berhasil .................................................................... 134
Gambar 69. Unggah File Gagal ....................................................................... 134
Gambar 71. Detil Data Pegawai....................................................................... 137
Gambar 72. Prinsip Kerja CURL ...................................................................... 143
Gambar 73. Lokasi File php.ini ........................................................................ 144
Gambar 74. Isi File php.ini ............................................................................... 144
Gambar 75. Tampilan File curl_pegawai.php ................................................... 146
Gambar 76. Halaman Web Target ................................................................... 148
Gambar 77. Tampilan Page Source ................................................................. 149
Gambar 78. Tampilan File curl_alamat_kpp.php (1) ........................................ 150
Gambar 79. Tampilan File curl_alamat_kpp.php (2) ........................................ 152
Gambar 80. Tampilan File curl_insert.php ....................................................... 154
Gambar 81. Notifikasi Proses Insert Data Berhasil .......................................... 155
Gambar 82. Data di Dalam Tabel KPP ............................................................ 156
viii
PETUNJUK PENGGUNAAN MODUL
1. Setiap peserta Pelatihan Teknis Operator Console Lanjutan wajib mempelajari

modul sesuai dengan susunan materi modul atau sesuai petunjuk pengajar.
2. Untuk dapat menjalankan setiap instruksi di dalam modul ini, setiap peserta
harus menggunakan komputer atau laptop yang telah terpasang aplikasi
pendukung di dalamnya seperti Google Chrome, Mozilla Fire Fox, Notepad++,
dan XAMPP. Jika komputer atau laptop yang digunakan peserta belum
memiliki aplikasi-aplikasi tersebut, peserta dapat mengunduhnya di
https://goo.gl/1315Gr. Selanjutnya, peserta dapat melakukan proses instalasi
ke masing-masing komputer atau laptop yang digunakan.
3. Setiap peserta menyalin setiap kode script di dalam modul ini agar dapat
dijalankan sesuai petunjuk di dalam modul atau arahan dari pengajar.
4. Setiap peserta mengunduh file set data ini di https://goo.gl/jhmyC1 untuk
kemudian digunakan sesuai dengan petunjuk di dalam modul ini atau arahan
dari pengajar.
5. Setelah menyelesaikan setiap materi, setiap peserta Pelatihan Teknis
Operator Console Lanjutan menjawab soal-soal latihan.
6. Setelah menyelesaikan seluruh materi, setiap peserta menyelesaikan Tes
Formatif yang terdapat di bagian akhir Modul ini.
7. Bila hasil Tes Formatif yang didapatkan kurang memuaskan, setiap peserta
diharapkan membaca setiap Kegiatan Belajar dan mengerjakan Tes Formatif
kembali hingga mendapatkan hasil yang memuaskan.
ix
PETA KONSEP MODUL
x
A. PENDAHULUAN
1. Deskripsi Singkat
Modul Aplikasi Web Dinamis ini disusun sebagai salah satu materi yang
akan disampaikan dalam kegiatan Pelatihan Teknis Operator Console Pajak
Lanjutan dengan tujuan untuk memberikan bekal kepada para peserta dengan
pengetahuan megenai Hypertext Markup Language (HTML), Cascading Style
Sheet (CSS), PHP: Hypertext Preprocessor (PHP), dan database MySQL yang
diperlukan dalam pembuatan dan pengembangan web dinamis.
Diharapkan, setelah mempelajari modul ini, para peserta mampu untuk
membuat dan mengembangkan web dinamis yang dapat digunakan dan
memberikan manfaat pada instansi tempat bertugas masing-masing.
Modul ini dibagi ke dalam 6 (enam) kegiatan belajar dengan penjelasan
sebagai berikut :
- Kegiatan Belajar I berisi penjelasan mengenai HTML.
- Kegiatan Belajar II berisi penjelasan mengenai CSS.
- Kegiatan Belajar III berisi penjelasan mengenai PHP.
- Kegiatan Belajar IV berisi penjelasan mengenai MySQL.
- Kegiatan Belajar V berisi penjelasan mengenai pembuatan web menggunakan
PHP dan MySQL.
- Kegiatan Belajar VI berisi penjelasan mengenai penggunaan CURL.
2. Prasyarat Kompetensi
Prasyarat kompetensi yang harus dimiliki oleh peserta sehingga dapat

mempelajari modul ini dan dapat mempraktikkannya adalah mempunyai
kemampuan untuk mengoperasikan sebuah unit komputer secara baik dan lancar
serta menggunakan komputer atau laptop yang telah dilengkapi dengan aplikasi-
aplikasi yang telah disebutkan di dalam bagian Petunjuk Penggunaan Modul ini.
3. Standar Kompetensi (SK) dan Kompetensi Dasar (KD)
Standar Kompetensi yang diharapkan adalah para peserta mampu

mengembangkan aplikasi berbasis web dengan menggunakan PHP dan MySQL
untuk memperlancar pekerjaan di instansi masing-masing.
1
Sedangkan Kompetensi Dasar dan Indikator Keberhasilan yang

diharapkan adalah sebagai berikut :
Kompetensi Dasar (KD) Indikator Keberhasilan (IK)

1. Mampu menggunakan 1.1. Mampu menjelaskan pengertian HTML
Hypertext Markup dengan baik
Language (HTML) 1.2. Mampu menggunakan Aplikasi Text Editor
dengan tepat dengan tepat
1.3. Mampu menggunakan Aplikasi Browser
dengan tepat
1.4. Mampu menggunakan struktur dokumen
HTML dengan tepat
1.5. Mampu menggunakan elemen-eleman
dasar HTML dengan tepat
2. Mampu menjalankan 2.1. Mampu menjelaskan pengertian CSS
pengaturan halaman dengan baik
web dengan Cascading 2.2. Mampu menjelaskan manfaat CSS dengan
Style Sheet (CSS) baik
secara tepat 2.3. Mampu menggunakan metode penulisan
CSS dengan tepat
2.4. Mampu menggunakan struktur CSS dengan
tepat
2.5. Mampu membuat file CSS dengan baik
2.6. Mampu menggunakan selector CSS
dengan baik
2.7. Mampu menggunakan file CSS di dalam
HTML dengan tepat
3. Mampu menggunakan 3.1. Mampu menjelaskan pengertian PHP
PHP dengan tepat dengan baik
3.2. Mampu melaksanakan proses instalasi
Web Server, PHP, dan MySQLdengan
tepat
3.3. Mampu menggunakan variabel dengan
tepat
3.4. Mampu menggunakan operator dengan
tepat
3.5. Mampu menggunakan struktur kontrol
pemrograman dengan tepat
3.6. Mampu menggunakan struktur perulangan
dengan tepat
3.7. Mampu menggunakan fungsi date dengan
tepat
3.8. Mampu menggunakan fungsi explode
dengan tepat
3.9. Mampu menggunakan fungsi replace
dengan tepat
3.10.Mampu menggunakan fungsi session
dengan tepat
2
3.11.Mampu menggunakan fungsi include dan

require dengan tepat
4. Mampu menggunakan 4.1. Mampu menjelaskan pengertian MySQL
Database MySQL dengan baik
dengan tepat 4.2. Mampu menggunakan relational database
dengan tepat
4.3. Mampu menggunakan tipe data dengan
tepat
4.4. Mampu membuat database dan tabel
dengan tepat
4.5. Mampu melakukan input dan import data ke
dalam tabel dengan tepat
4.6. Mampu melakukan pencarian dan
manipulasi data dengan tepat
5. Mampu membuat web 5.1. Mampu membuat file koneksi PHP dengan
dinamis dengan tepat MySQL dengan tepat
5.2. Mampu membuat halaman untuk
menampilkan data dengan tepat
5.3. Mampu membuat halaman pencarian data
dengan tepat
5.4. Mampu membuat halaman perekaman data
dengan tepat
5.5. Mampu membuat halaman perubahan dan
penghapusan data dengan tepat
5.6. Mampu membuat halaman pengunggahan
file dengan tepat
6. Mampu menggunakan 6.1. Mampu menjelaskan pengertian CURL
Fungsi Client Uniform dengan baik
Resource Locator 6.2. Mampu mengaktifkan Library CURL di PHP
(CURL) dengan tepat dengan tepat
6.3. Mampu menjalankan fungsi-fungsi di
dalam Library CURL dengan tepat
6.4. Mampu mengambil teks atau obyek tertentu
dengan CURL dengan tepat
6.5. Mampu memasukkan data hasil CURL ke
Dalam database dengan tepat
4. Relevansi Modul
Modul Aplikasi Web Dinamis ini sangat relevan digunakan bagi pegawai di
lingkungan Direktorat Jenderal Pajak yang ingin mendapatkan pengetahuan
tentang HTML, CSS, PHP, dan MySQL yang menjadi modal dasar dalam
pembuatan atau pengembangan web dinamis.
Materi di dalam modul ini juga memiliki relevansi dengan Modul
Manajemen Basis Data Lanjutan.
3
B. KEGIATAN BELAJAR
1. KEGIATAN BELAJAR 1 KEGIATAN

BELAJAR
PENGENALAN HTML
1
1.1. Indikator Keberhasilan
Setelah mengikuti pembelajaran, peserta mampu :

a. menjelaskan pengertian HTML dengan baik
b. menggunakan Aplikasi Text Editor dengan tepat
c. menggunakan Aplikasi Browser dengan tepat
d. menggunakan struktur dokumen HTML dengan tepat
e. menggunakan elemen-eleman dasar HTML dengan tepat
1.2. Pengertian HTML
HTML adalah singkatan dari Hypertext Markup Language, yaitu sebuah

bahasa markah yang digunakan untuk membuat sebuah halaman yang
menampilkan berbagai informasi di dalam sebuah browser internet.
Disebut hypertext karena di dalam HTML sebuah teks biasa dapat
berfungsi lain, di antaranya dapat menjadi sebuah link yang dapat berpindah dari
satu halaman ke halaman lainnya hanya dengan mengeklik teks tersebut.
Kemampuan inilah yang dinamakan hypertext.
Disebut Markup Language karena bahasa HTML menggunakan tanda
(mark) untuk menandai bagian-bagian dari teks. Cotohnya seperti teks yang diapit
oleh tanda tertentu akan terlihat tebal, sementara jika berada di antara tanda
lainnya akan terlihat lebih besar, dan sebagainya. Tanda ini dikenal sebagai HTML
tag.
Dengan kata lain, HTML dapat mengontrol tampilan isi dari sebuah
halaman web, seperti format penulisan, fungsi teks, menambahkan objek seperti
gambar, suara, video, dan formulir, serta mempublikasikannya secara online
sehingga dapat diakses dari mana saja. Sehingga dapat dikatakan bahwa HTML
merupakan dasar dari semua halaman web yang terdapat di dalam internet.
4
Namun demikian, HTML bukanlah bahasa pemrograman (programming

language), karena di dalam dalam HTML tidak akan ditemukan struktur yang biasa
di temukan dalam bahasa pemrograman seperti IF, LOOP, maupun variabel.
1.3. Text Editor
Untuk membuat sebuah dokumen HTML, diperlukan dua buah aplikasi

utama, yaitu text editor dan browser.
Text editor adalah aplikasi yang digunakan untuk menulis kode program
yang akan menghasilkan sebuah dokumen HTML. Terdapat cukup banyak aplikasi
text editor yang dapat digunakan untuk menulis kode program dengan tampilan
dan fitur yang beragam.
a. Notepad
Notepad merupakan aplikasi yang dapat digunakan untuk menulis kode
program HTML yang terintegrasi pada sistem operasi Windows. Text editor ini
sudah ada sejak Windows 1.0 di tahun 1985.
Gambar 1. Aplikasi Notepad
b. Wordpad
Wordpad sebenarnya merupakan pengolah kata dasar yang disediakan di
hampir semua versi Microsoft Windows. Aplikasi ini lebih baik dibandingkan
Notepad tetapi lebih sederhana dibandingkan Microsoft Word. Aplikasi ini juga
masih satu paket dengan Notepad yang lokasi menunya berada pada paket
program aplikasi Accessories pada sistem operasi Windows.
5
Gambar 2. Aplikasi Wordpad
c. Notepad ++
Notepad++ merupakan aplikasi text editor yang gratis (free) dan dapat
dijalankan di sistem operasi Windows. Kelebihan aplikasi ini adalah ringan dan
memiliki banyak fitur. Salah satunya adalah fitur pewarnaan code (syntax
highlighting) yang dapat memudahkan penulisan kode HTML.
Gambar 3. Aplikasi Notepad++
d. Macromedia Dreamweaver
Macromedia Dreamweaver adalah sebuah text editor profesional yang
lebih menonjolkan unsur editing secara visual langsung dalam pembuatan
halaman web. Pembuatan tampilan dapat dilakukan melalui menu dan tidak harus
selalu menulis kode. Tab penulisan kode dan tab tampilan disediakan sekaligus
sehingga hasil penulisan kode dapat langsung dilihat. Namun aplikasi ini
membutuhkan memori yang cukup besar dan tidak gratis.
6
Gambar 4. Macromedia Dreamweaver
Dari beberapa aplikasi Text Editor di atas, yang digunakan di dalam

modul ini adalah Aplikasi Notepad++.
1.4. Browser
Web Browser (atau biasa disebut browser) adalah sebuah aplikasi untuk
menerima, menampilkan, dan menerjemahkan informasi dari world wide web.
Salah satu informasi itu dibuat dalam format HTML.
Kode HTML akan diterjemahkan oleh browser agar tampil seperti yang
dirancang. Pada dasarnya seluruh browser dapat menampilkan kode HTML sama
baiknya. Namun jika berbicara mengenai desain halaman, tiap-tiap browser
memiliki beberapa perbedaan tampilan.
HTML merupakan bahasa standar dalam penggunaan internet yang
didefinisikan dan diawasi penggunaannya oleh World Wide Web Consortium
(W3C). Hal ini dikarenakan tiap-tiap program browser menerjemahkan kode-kode
HTML secara berbeda-beda, sehingga di perlukan sebuah standar yang sama
untuk seluruh browser. Namun pada penerapannya, standar ini hanya merupakan
rekomendasi. Beberapa browser membuat ketentuan atau aturan masing-masing.
Browser yang terkenal di tahun 2000-an adalah Internet Explorer.
Sementara saat ini, kepopuleran Internet Explorer telah tergeser dengan browser
lain seperti Mozilla Firefox dan Google Chrome yang telah menguasai lebih dari
50% pengguna browser bersamaan dengan browser lainnya.
7
Berdasarkan situs w3counter.com yang diakses per September

2017, Google Chrome digunakan oleh sekitar 56% pengguna internet, yang
kemudian diikuti oleh browser Safari dan Firefox sebanyak 14% dan 9%.
Hal tersebut disebabkan tren smartphone yang menggunakan Sistem
Operasi Android sudah terpasang browser Google Chrome. Sementara di dalam
iPhone sudah langsung terpasang browser Safari.
Berikut adalah grafik komposisi browser yang digunakan adalah:
Gambar 5. Komposisi Penggunaan Browser
1.5. Struktur Dokumen HTML
HTML membutuhkan cara dalam bentuk tanda untuk memberitahu browser

fungsi dari sebuah teks. Apakah teks itu ditulis sebagai sebuah paragraf, list, atau
sebagai link. Dalam HTML, tanda ini dikenal dengan istilah tag.
Penulisan tag berada di antara dua kurung siku, “<” dan “>”. Tag tidak case
sensitive, sehingga penggunaan huruf kapital atau huruf kecil akan memberikan
hasil yang sama.
Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag
pembuka dan tag penutup. Objek yang berada diantara tag pembuka dan tag
penutup akan mendapat perintah dari tag tersebut. Objek disini dapat berupa teks,
gambar, maupun video.
Setiap halaman HTML memiliki struktur dasar yang terdiri dari tag DTD
atau DOCTYPE, tag html, tag head, dan tag body. Namun demikian, bisa saja
8
sebuah halaman HTML memiliki struktur yang lebih banyak dibandingkan struktur
dasar tersebut.
Untuk lebih mudah memahami struktur dasar HTML, silahkan buka aplikasi
Notepad++, lalu ketik kode berikut dan simpan dengan nama file “latihan01.html”.
Lalu jalankan dengan browser.
Script latihan01.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Judul Websiteku</title>
5 </head>
6 <body>
7 Selamat Datang!
8 </body>
9 </html>
Gambar 6. Tampilan File HTML Pada Browser
Berdasarkan susunan kode HTML tersebut, maka struktur HTML dapat

dibagi menjadi beberapa bagian.
a. DTD atau DOCTYPE

Tag paling awal dari contoh HTML di atas adalah DTD atau DOCTYPE.
DTD adalah singkatan dari Document Type Declaration yang berfungsi untuk
memberi tahu kepada browser bahwa dokumen yang akan diproses adalah
dokumen atau file HTML.
DTD memiliki banyak versi tergantung kepada versi HTML yang
digunakan. Contoh di atas adalah penulisan DTD versi HTML 5.
9
Jika tag DTD tidak dituliskan, browser akan tetap menampilkan dan
memproses halaman web. Namun demikian, browser sebenarnya menjalankan
halaman HTML tersebut pada mode khusus yang disebut quirk mode di mana
browser akan menerjemahkan halaman web (terutama kode CSS) sedikit berbeda
dari seharusnya. Hal ini terjadi karena browser menganggap bahwa ketika tag
DTD tidak ditemukan, halaman tersebut kemungkinan besar merupakan halaman
web yang sudah usang.
Cara untuk mengetahui apakah browser berjalan pada quirk mode atau
standard mode lebih mudah jika menggunakan browser Mozilla Firefox yaitu
dengan melakukan klik kanan pada halaman web, lalu pilih Page Info. Pada bagian
Render Mode akan terlihat apakah quirk mode atau standard mode.
b. Tag HTML
Tag HTML adalah tag pembuka dari keseluruhan halaman web. Semua
kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan
diakhiri dengan </html>.
c. Tag head
Tag head merupakan bagian kepala dari dokumen HTML yang pada
umumnya akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript,
dan kode-kode lainnya yang tidak akan tampil di browser, termasuk tag title dan
tag meta.
Tag title digunakan untuk menampilkan title dari sebuah halaman web yang
akan terlihat pada bagian paling atas browser. Pada contoh kode HTML di atas,
“Judul Websiteku” akan ditampilkan pada tab browser.
Sementara tag META biasanya digunakan untuk menentukan informasi
tertentu mengenai dokumen HTML, seperti menentukan author name, keywords,
dan lainnya. Contoh :
<META name=”Rifki” contents=”Pembuatan Web Dinamis”>
Tag head dimulai dengan <head> dan diakhiri dengan </head>.
d. Tag body
Tag body akan berisi semua elemen yang akan ditampilkan dalam halaman
web, seperti paragraf, tabel, link, gambar, dan lain-lain. Tag body diawali dengan
<body> dan ditutup dengan </body>.
10
1.6. Elemen Dasar HTML
a. Break dan Paragraph

Tag break berfungsi untuk memulai baris atau pindah baris baru. Tag break
ditulis dengan <br> atau <br /> dan tidak memerlukan tag penutup seperti tag
lain pada umumnya.
Sementara tag paragraph berfungsi untuk membuat paragrap. Tag
paragraf ditulis dengan <p> dan ditutup dengan </p>.
Salin contoh penggunaan tag break dan paragraph di bawah ini, kemudian
simpan dengan nama file “latihan02.html” dan jalankan dengan browser untuk
melihat hasil tampilannya.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan Tag Break dan Paragraph</title>
5 </head>
6 <body>
7 Baris<br>
8 Ini adalah baris pertama<br>
9 Ini adalah baris kedua<br>
10 Ini adalah baris ketiga<br>
11 <p>Paragraf</p>
12 <p>Ini adalah paragraf pertama</p>
13 <p>Ini adalah paragraf kedua</p>
14 <p>Ini adalah paragraf ketiga</p>
15 </body>
16 </html>
11
Gambar 7. Penggunaan Tag Break dan Paragraph
b. Format Teks
Di dalam sebuah paragraf, kadang diperlukan untuk membuat penekanan
pada kata-kata tertentu. Penekanan ini bisa dilakukan dengan menebalkan,
memiringkan, atau menggarisbawahi sebuah kata.
1) Untuk menebalkan kata, tag yang digunakan adalah <b> atau <strong>. Tag
<b> adalah singkatan dari bold (tebal). Sementara tag <strong> berarti
“strong importance”.
2) Untuk memiringkan kata, tag yang digunakan adalah <i> atau <em>. Tag <i>
adalah singkatan dari italic (miring). Sementara tag <em> berarti “Stresses
Emphasis”.
3) Untuk menggarisbawahi kata, tag yang digunakan adalah <u> atau <ins>.
Tag <u> adalah singkatan dari underline (garis bawah). Sementara tag <ins>
adalah kependekan dari insert.
Perlu diingat bahwa penulisan seuruh tag untuk format teks di atas
memerlukan tag penutup sebagaimana contoh berikut :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Format Teks</title>
12
5 </head>
6 <body>
7 <p>Anda akan menemukan adanya kata yang ditulis
8 <b>tebal</b>, <i>miring</i>,
9 atau <u>digarisbawahi</u> di paragraf ini.</p>
10 <p>Cara lain untuk menulis kata yang
11 <strong>ditebalkan</strong>,
12 <em>dimiringkan</em>,
13 atau <ins>digarisbawahi</ins>
14 juga dapat Anda lihat di paragraf ini.</p>
15 </body>
16 </html>
Salin dan simpan kode di atas dengan nama file “latihan03.html”, lalu
jalankan dengan browser untuk melihat hasilnya.
Gambar 8. Format Teks
c. Heading
Tag heading digunakan untuk judul atau sub judul sebuah tulisan. Tag
heading terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan
<h6>. Semakin kecil angka, semakin besar ukuran huruf yang ditampilkan.
Penulisan tag heading memerlukan tag penutup sebagaimana contoh di bawah
ini:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan Tag Heading</title>
5 </head>
6 <body>
7 <h1>ini adalah judul dengan h1 </h1>
13

13 </body>
14 </html>
Salin dan simpan kode di atas dengan nama file “latihan04.html”, lalu
jalankan file tersebut dengan browser untuk melihat hasil tampilannya.
Gambar 9. Penggunaan Tag Heading
d. List
Tag list digunakan untuk mengelompokkan data baik secara berurutan
(ordered list) yang akan ditampilkan dengan angka atau huruf maupun tidak
berurutan (unordered list) yang akan ditampilkan dengan bulatan atau kotak.
Ordered list menggunakan tag <ol>, unordered list menggunakan tag
<ul>, sedangkan untuk list sendiri menggunakan tag <li>. Semua tag tersebut
memerlukan tag penutup.
Untuk memudahkan pemahaman, salin dan simpan kode di bawah ini
dengan nama file “latihan05.html”, kemudian jalankan dengan browser.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan Tag List</title>
14
5 </head>
6 <body>
7 Materi Aplikasi Web Dinamis :
8 <ol>
9 <li>HTML</li>
10 <li>CSS</li>
11 <li>PHP</li>
12 </ol>
13 Materi Aplikasi Web Dinamis :
14 <ul>
15 <li>HTML</li>
16 <li>CSS</li>
17 <li>PHP</li>
18 </ul>
19 </body>
20 </html>
Gambar 10. Penggunaan Tag List
e. Link
Ketika sebuah teks atau gambar yang diklik akan menampilkan atau
berpindah halaman baru, maka teks atau gambar tersebut merupakan sebuah link.
Tag yang digunakan untuk membuat sebuah link adalah tag <a> yang merupakan
singkatan dari anchor (jangkar). Setiap tag <a> harus ditutup dengan </a> dan
setidaknya memiliki sebuah atribut, yaitu href (hypertext reference) yang berisi
alamat halaman yang dituju.
Sebagai contoh, salin dan simpan kode penggunaan link di bawah ini
dengan nama file “latihan06.html”, kemudian jalankan dengan browser.
15
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan Tag Link</title>
5 </head>
6 <body>
7 <h3>Aplikasi e-SPT</h3>
8 Untuk mengunduh file instalasi Aplikasi e-SPT,
9 silahkan kunjungi situs resmi
10 <a href=https://www.pajak.go.id> Direktorat
11 Jenderal Pajak</a>
12 </body>
13 </html>
Gambar 11. Penggunaan Tag Link
Pada contoh penggunaan tag link di atas, alamat tujuan ditulis secara
lengkap. Cara penulisan alamat tujuan seperti di atas disebut dengan external link,
yang artinya link yang dibuat ditujukan ke alamat lain di internet. Cara penulisan di
atas juga dikenal dengan sebutan alamat absolut.
Namun jika link yang dibuat ditujukan pada alamat di dalam situs yang
sama, maka tidak perlu menyebutkan alamat lengkap seperti di atas. Tetapi cukup
mencantumkan alamat file yang dituju. Jenis penulisan alamat ini disebut alamat
relatif.
Sebagai contoh penulisan alamat relatif adalah sebagai berikut:
Script latihan06a.html
1 <!DOCTYPE html>
2 <html>
3 <head>
16
5 </head>
6 <body>
7 <h3>Contoh Link Relatif</h3>
8 Untuk melihat contoh penggunaan tag heading
9 di dalam HTML, klik
10 <a href=latihan_heading.html>di sini</a>
11 </body>
12 </html>
Salin dan impan kode HTML di atas dengan nama file “latihan06a.html”.
Kemudian jalankan file tersebut dengan browser untuk melihat hasil tampilannya.
Penulisan link pada contoh di atas digunakan jika file asal dan file tujuan
berada di dalam folder yang sama. Namun, jika file yang menjadi tujuan berada
satu tingkat di luar folder file asal, maka cara penulisannya menjadi
href="../belajar_heading.html".
Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan
untuk menentukan apakah halaman yang dituju terbuka pada jendela browser
yang sama dengan halaman asal (menutupi halaman asal) atau terbuka pada
jendela browser baru.
Secara default, setiap link akan terbuka pada jendela yang sama dan akan
menimpa halaman aasal. Tetapi jika menginginkan halaman tujuan terbuka pada
jendela baru, maka perlu menambahkan atribut target=”_blank” seperti contoh
berikut :
Script latihan06b.html
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 <h3>Contoh Link Relatif</h3>
8 Silahkan klik
9 <a href=latihan_heading.html>halaman ini</a>
10 untuk membuka halaman di jendela baru.
11 </body>
12 </html>
Simpan kode HTML di atas dengan nama file “latihan6b.html”. Kemudian

17
f. Image
Tag image <img> digunakan untuk menampilkan gambar ke dalam sebuah
halaman web. Format file gambar yang digunakan dapat berupa JPEG, PNG,
maupun GIF. Dalam penggunaannya, tag <img> tidak memerlukan tag penutup.
Di dalam tag <img> perlu ditambahkan atribut “src” (source) yang berisi
alamat dari gambar yang akan ditampilkan. Alamat tersebut bisa berupa alamat
relatif atau absolut sebagaimana telah dibahas sebelumnya.
Berikut adalah contoh penulisan tag image dengan menggunakan sebuah
file gambar yang berlokasi di dalam folder yang sama dengan lokasi file contoh.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan Tag Image</title>
5 </head>
6 <body>
7 <h3>Contoh Penggunaan Tag Image</h3>
8 <img src="komputer.png">
9 </body>
10 </html>
Simpan kode HTML di atas dengan nama file “latihan07.html”. Kemudian

Gambar 12. Penggunaan Tag Image (1)
Tag image juga memiliki beberapa atribut, yaitu :
18
1) alt (alternative description), digunakan untuk memberikan keterangan dari

gambar jika gambar tersebut gagal ditampilkan oleh browser atau jika browser
diatur untuk tidak menampilkan gambar. Atribut alt juga berperan penting
untuk mesin pencari seperti Google, yang ‘tidak mengerti’ isi dari gambar
tanpa bantuan deskripsi yang ditulis dalam atribut alt.
2) width, berfungsi untuk menentukan lebar dari gambar yang ditampilkan.
3) height, berfungsi untuk menentukan tinggi dari gambar yang ditampilkan.
Perlu diperhatikan bahwa di dalam pengaturan nilai atribut width dan height
adalah keduanya harus proporsional. Cara mudah mempertahankan ukuran
gambar yang proporsional adalah dengan mencantumkan hanya salah satu atribut
saja, width saja atau height saja.
Salin dan simpan kode penulisan tag image dengan menggunakan atribut
di atas dengan nama file “latihan07a.html”, kemudian jalankan dengan browser.
Script latihan07a.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan Tag Image</title>
5 </head>
6 <body>
7 <h3>Contoh Penggunaan Tag Image (1)</h3>
8 <img src="komputer.png" alt="gambar komputer"
9 height="200" width="100">
10 <h3>Contoh Penggunaan Tag Image (2)</h3>
11 <img src="komputer.png" alt="gambar komputer"
12 height="200" >
13 </body>
14 </html>
19
Gambar 13. Penggunaan Tag Image (2)
Pada umumnya, web server akan menampilkan teks terlebih dahulu, baru
kemudian gambar. Jika web server cukup sibuk atau gambar berukuran besar,
akan menyebabkan teks berpindah tempat karena gambar terlambat ditampilkan.
Dengan menamahkan atribut width dan height akan memberikan kesempatan
kepada browser untuk mempersiapkan ukuran tersebut untuk gambar sehingga
posisi teks tidak akan berpindah.
g. Tabel
Tabel biasanya digunakan untuk menampilkan data yang terstruktur yang
bersumber dari database. Untuk keperluan tersebut, HTML menyediakan tag
untuk membuat tabel.
Ada beberapa tag yang digunakan untuk membuat sebuah tabel, yaitu :
1) Tag <table>, digunakan untuk memulai sebuah tabel.
2) Tag <tr>, merupakan singkatan dari table row yang digunakan untuk
membuat baris dari tabel.
3) Tag <td>, merupakan singkatan dari table data yang digunakan untuk memuat
data atau uraian ke dalam tabel.
4) Tag <th>, merupakan singkatan dari table head yang digunakan untuk
membuat judul kolom pada baris pertama tabel dengan tampilan yang berbeda
dengan baris-baris di bawahnya.
20
5) Tag <caption>, berfungsi untuk membuat judul atau keterangan sebuah

tabel. Penulisan tag <caption> harus ditulis setelah tag pembuka tabel
<table>.
Penulisan semua tag di atas memerlukan tag penutup.
Di dalam tag <tabel>, terdapat beberapa atribut yang dapat digunakan
untuk mengatur tampilan tabel, baik garis batas, lebar, maupun tinggi tabel,
seperti:
1) border yang berfungsi untuk mengatur ketebalan garis tepi dari tabel dalam
satuan pixel. Jika atribut border tidak ditambahkan, maka tabel tidak memiliki
garis tepi.
2) cellpadding yang berfungsi untuk mengatur jarak dari garis tepi tabel dengan
isi teks tabel dalam satuan pixel.
3) cellspacing yang berfungsi untuk mengatur jarak antara garis tepi bagian
dalam dan luar dalam satuan pixel.
4) width digunakan untuk mengatur lebar tabel dengan satuan % atau pixel.
Atribut width juga dapat digunakan untuk mengatur lebar kolom dengan
meletakkannya di dalam tag <th> atau <td>.
5) height digunakan untuk mengatur tinggi tabel dengan satuan % atau pixel.
Atribut height juga dapat digunakan untuk mengatur tinggi baris dengan
meletakkannya di dalam tag <tr>.
Sementara pada tag <td> terdapat dua atribut yang dapat digunakan
untuk mengatur tampilan tabel, yaitu:
1) rowspan yang berfungsi untuk menggabungkan dua atau lebih sel baris di
dalam tabel. Atribut ini diletakkan di dalam tag <td> dari sebuah tabel.
2) colspan yang berfungsi menggabungkan dua atau lebih sel kolom di dalam
tabel. Atribut ini diletakkan di dalam tag <td> dari sebuah tabel.
Untuk memudhakan pemahaman tentang penggunaan tag <table>, salin
dan simpan kode berikut ini dengan nama file “latihan08.html”, kemudian jalankan
dengan browser untuk melihat hasil tampilannya.
1 <!DOCTYPE html>
2 <html>
21
3 <head>
4 <title>Pembuatan Tabel</title>
5 </head>
6 <body>
7 <table border="1" width="50%">
8 <caption>Contoh Tabel 1</caption>
9 <tr>
10 <th>Judul Kolom 1</th>
13 </tr>
14 <tr height="100px">
15 <td>Baris 2, Kolom 1</td>
18 </tr>
19 <tr>
20 <td> Baris 3, Kolom 1</td>
23 </tr>
24 </table>
25 <br><br>
26 <table border="1" cellpadding="5"
27 cellspacing="5" width="700px" height="200px">
28 <caption>Contoh Tabel 2</caption>
29 <tr>
31 <th colspan=2>Judul Gabungan Kolom 2 dan
32 3</th>
33 </tr>
34 <tr>
38 </tr>
39 <tr>
40 <td rowspan="2"> Baris 3 & 4,
41 Kolom 1</td>
44 </tr>
45 <tr>
48 </tr>
49 </table>
50 </body>
51 </html>
22
Gambar 14. Penggunaan Tag Table
h. Komentar
Dalam penulisan tag HTML, sebuah komentar dapat disisipkan dengan
fungsi sebagai penanda atau pengingat pembuat program untuk mengingat fungsi
atau cara kerja kode yang pernah ditulisnya di masing-masing bagian.
Di dalam HTML, sebuah komentar yang ditulis harus diawali dengan <!–
dan ditutup dengan –>. Komentar yang ditulis nantinya tidak akan tampil saat
dokumen HTML dilihat dengan browser.
Untuk lebih mudah memahami penggunaan tag komentar, salin dan
simpan kode berikut ini dengan nama file “latihan09.html”, lalu jalankan dengan
browser untuk melihat hasil tampilannya.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan Tag Comment</title>
5 </head>
6 <body>
7 
23
9 <p>Ini bukan komentar, dan akan tampil di

10 browser</p>
11 </body>
12 </html>
Gambar 15. Penggunaan Tag Komentar
Selain sebagai pengingat atau catatan, tag komentar juga dapat digunakan
untuk menyembunyikan sebagian isi web agar tidak tampil untuk sementara.
Fungsi ini dapat dimanfaatkan ketika akan mencoba berbagai tampilan kode HTML
yang baru, tetapi tidak ingin menghapus kode yang telah dibuat sebelumnya.
Namun yang perlu menjadi perhatian, walaupun komentar tidak muncul
pada browser, tetapi seseorang masih bisa membaca komentar tersebut dengan
cara melihat source halaman HTML. Oleh karena itu, sebaiknya tidak
menambahkan komentar yang sensitif atau bersifat rahasia, seperti username
atau password.
i. Form
Sebuah form digunakan untuk mengumpulkan data dari pengunjung web.
Form yang biasa ditemukan dalam sebuah web di antaranya form login, form
registrasi user, form perekaman data, hingga form untuk mengirimkan data antar
halaman web.
Sebagai catatan, penggunaan form dengan hanya menggunakan HTML
saja tidak akan terlalu berguna. Sebab pada umumnya, form hanya sebagai
interface yang disediakan untuk mengumpulkan data, diproses dengan bahasa
pemograman web seperti PHP dan disimpan di dalam database seperti MySQL.
Penjelasan lebih lanjut mengenai PHP dan MySQL akan dibahas pada kegiatan
belajar berikutnya di modul ini.
24
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali
dengan <form> dan diakhiri dengan </form>. Tag form akan membutuhkan
beberapa atribut untuk dapat berfungsi dengan baik, seperti :
1) action, yang berfungsi untuk menjelaskan ke mana tujuan data form akan
dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah file
atau halaman PHP yang digunakan untuk memproses isi data form.
2) method, yang berfungsi untuk menjelaskan bagaimana data isian form akan
dikirim oleh browser. Nilai dari atribut method ini bisa berupa get atau post. Jika
menggunakan atribut method dengan get (nilai seandainya atribut method tidak
ditulis) maka isian form akan terlihat pada url browser. Sementara method post
biasanya digunakan untuk data yang lebih sensitif seperti password atau data
registrasi user. Data hasil form tidak akan terlihat pada browser.
Selain memerlukan atribut, sebuah form juga harus dilengkapi dengan
beberapa tag, seperti :
1) Tag <input> yang berfungsi sebagai wadah bagi user untuk menginput data.
Tag input memiliki beberapa bentuk dan dibedakan berdasarkan atribut type
yang dimiliki, yaitu :
a) <input type=”text”> adalah textbox biasa yang menerima input berupa
teks, seperti username atau teks pendek.
b) <input type=”password”> yang memiliki tampilan sama dengan type
text, namun teks yang diinput tidak akan terlihat, melainkan hanya berupa
bintang atau bulatan. Penggunaan type ini biasanya untuk input data yang
sensitif seperti password.
c) <input type=”checkbox”> adalah inputan berupa checkbox yang dapat
dicentang oleh user. User dapat memilih atau tidak memilih checkbox ini.
Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan
nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama
kali halaman ditampilkan. Checkbox digunakan untuk daftar yang dapat
dipilih olh user lebih dari satu pilihan, seperti hobi.
d) <input type=”radio”> mirip dengan checkbox, namun user hanya bisa
memilih satu di antara pilihan yang disediakan, seperti pilihan jenis kelamin.
e) <input type=”submit”> berfungsi untuk menampilkan tombol untuk
memproses form yang biasanya diletakkan pada baris terakhir dari form.
25
Atribut value jika diisi akan membuat tampilan text tombol submit berubah
sesuai inputan nilai value.
Perlu diperhatikan bahwa tag <input> merupakan tag yang berdiri sendiri dan
tidak membutuhkan penutup tag.
2) Tag <textarea>
Pada dasarnya tag textarea sama dengan input type text, namun memilik
ukuran lebih besar dan dapat berisi banyak baris. Panjang dan banyak baris
untuk text area di atur melalui atribut rows dan cols. Tag textarea memiliki tag
penutup dan keterangan yang diapit tag textarea akan ditampilkan sebagai teks
awal dari isian form.
3) Tag <select>
Tag select digunakan untuk inputan yang telah tersedia nilainya dan user hanya
dapat memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan
tag option untuk membuat daftar pilihan. Ketika form dikirim untuk diproses,
maka nilai dari tag <option> akan dikirim. Nilai tersebut adalah teks yang
berada di antara tag option, kecuali jika ditambahkan atribut value, maka nilai
value yang akan dikirim. Atribut value ini tidak akan tampak dalam tampilan
form.
Tag select memiliki atribut selected yang dapat ditambahkan agar tag select
berisi nilai awal.
4) Atribut Name
Setiap tag input di dalam sebuah form harus ditambahkan atribut name agar
dapat diproses oleh web server. Di dalam halaman proses yang biasanya
berupa bahasa PHP atau lainnya, nilai dari atribut name yang akan menjadi
variabel form.
Berikut adalah contoh kode untuk membuat sebuah form HTML. Salin dan
simpan dengan nama file “latihan10.html”, kemudian jalankan dengan browser
untuk melihat hasil tampilannya.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Membuat Form</title>
5 </head>
26
6 <body>
7 <form action="latihan10.html" method="get">
8 Nama : <input type="text" name="nama">
9 <br>
10 Password : <input type="password"
11 name="password">
12 <br>
13 Jenis Kelamin :
14 <input type="radio" name="jenis_kelamin"
15 value="laki-laki" checked>
16 Laki – Laki
17 <input type="radio" name="jenis_kelamin"
18 value="perempuan">
19 Perempuan
20 <br>
21 Hobi :
22 <input type="checkbox" name="membaca" checked>
23 Membaca
24 <input type="checkbox" name="menulis"> Menulis
25 <input type="checkbox" name="melukis"> Melukis
26 <br>
27 Asal Kota:
28 <select name="asal_kota" >
29 <option value="Jakarta" selected>Jakarta
30 </option>
31 <option value="Bandung">Bandung</option>
32 <option value=" Semarang">Semarang
33 </option>
34 </select>
35 <br>
36 Komentar :
37 <textarea name="komentar" rows="5" cols="20">
38 komentar Anda
39 </textarea>
40 <br>
42 <input type="submit" value="Simpan">
42 </form>
43 </body>
44 </html>
27
Gambar 16. Contoh Form HTML
Pada tampilan seperti di atas, isi semua data yang diminta, kemudian klik
tombol “Simpan”. Perhatikan apa yang terjadi pada kolom alamat browser!
Karena pada atribut target diisi dengan nama file yang sama dengan file
asal yaitu “latihan10.html” dan atribut method dengan nilai get, sehingga pada saat
anda klik tombol “Simpan”, terjadi perubahan pada kolom alamat di browser, akan
tampil tambahan seperti berikut :
file:///D:/latihan10.html?nama=Rifki&password=123&jenis_kela
min=laki-
laki&membaca=on&asal_kota=Jakarta&komentar=Saya+ingin+belaja
r+Web+Dinamis
Jelas terlihat semua isian form pada kolom alamat browser, karena method
yang dipilih adalah get. Setiap nilai dibatasi dengan karakter “&” sedangkan spasi
ditandai dengan karakter “+”.
1.7. Latihan
Selesaikanlah perintah-perintah pada latihan berikut ini!
28
1. Buatlah sebuah file dengan nama “halaman_utama.html” yang berisi kode

HTML yang akan menampilkan halaman seperti di bawah ini dengan ketentuan
sebagai berikut :
a. Kalimat “Halaman Tabel” merupakan link ke halaman dengan nama file
“halaman_tabel.html”
b. Kalimat “Halaman Gambar” merupakan link ke halaman dengan nama file
“halaman_gambar.html”
HALAMAN UTAMA
Halaman Tabel
Halaman Gambar
2. Buatlah sebuah file dengan nama “halaman_utama.html” yang berisi kode

HTML yang akan menampilkan halaman seperti di bawah ini!
Tabel Penjualan Buku

Jenis Tahun
Buku 2018 2017 2016 2015
Fiksi 1500 1425 1375 1250
Non Fiksi 1100 1000 990 885
...
3. Buatlah sebuah file dengan nama “halaman_gambar.html” yang berisi kode

HTML yang akan menampilkan halaman seperti di bawah ini! (Silahkan
gunakan file gambar apa saja)
Galeri Buku Terbaru
Buku 1 Buku 2 Buku 3
29
Buku 4 Buku 5 Buku 6

...
1.8. Rangkuman
a. HTML adalah singkatan dari Hypertext Markup Language, yaitu sebuah bahasa
markah yang digunakan untuk membuat sebuah halaman yang menampilkan
berbagai informasi di dalam sebuah browser internet.
b. Text editor adalah aplikasi yang digunakan untuk menulis kode program yang
akan menghasilkan sebuah dokumen HTML seperti Notepad, Wordpad, dan
Notepad++.
c. Browser adalah sebuah aplikasi untuk menerima, menampilkan, dan
menerjemahkan informasi dari world wide web seperti Internet Explorer, Google
Chrome, Mozilla Firefox, Safari, dan Opera.
d. Struktur HTML terdiri dari DTD atau DOCTYPE, tag HTML, tag Head, dan tag
body.
e. Beberapa elemen dasfar dari HTML adalah break, paragraf, heading, list, link,
image, tabel, komentar, dan form.
1.9. Tes Formatif 1
1. Tag HTML yang digunakan untuk membuat baris baru adalah ...
a. <p>
b. <br>
c. <ol>
d. <ul>
2. Tag HTML yang digunakan untuk membuat paragraf baru adalah ...
a. <p>
b. <br>
c. <ol>
d. <ul>
30
3. Dari penulisan kode HTML berikut, yang manakah yang akan menampilkan
kata dicetak miring?
a. Saya sedang belajar <b>Aplikasi Web Dinamis</b>
b. Saya sedang belajar <ins>Aplikasi Web Dinamis</ins>
c. Saya sedang belajar <strong>Aplikasi Web Dinamis</strong>
d. Saya sedang belajar <em>Aplikasi Web Dinamis</em>
4. Tag heading yang digunakan untuk membuat judul sebuah tulisan memiliki
beberapa ukuran. Ukuran heading yang akan menampilkan huruf paling besar
adalah ....
a. <h6>
b. <h5>
c. <h2>
d. <h1>
5. Tag yang digunakan Untuk mengelompokkan data dalam sebuah daftar
secara berurutan adalah ...
a. <lu>
b. <ul>
c. <ol>
d. <lo>
6. Sebuah kode link ditulis sebagai berikut :
<a href=https://www.pajak.go.id> Direktorat Jenderal
Pajak</a>
Penulisan alamat pada pembuatan link di atas disebut dengan ...
a. alamat aktif
b. alamat relatif
c. alamat absolut
d. alamat pasif
7. Dalam penggunaan tag image, atribut yang berfungsi memberikan keterangan
atau deskripsi gambar adalah ....
a. desc
b. alt
c. title
d. info
31
8. Atribut dari tag image yang berfungsi untuk mengatur ukuran tinggi gambar
adalah ...
a. tall
b. width
c. height
d. pixel
9. Di dalam pembuatan sebuah tabel, beberapa sel kolom atau sel baris dapat
dapat digabungkan. Atribut yang digunakan untuk menggabungkan beberapa
sel kolom adalah ...
a. colmerge
b. colspan
c. rowmerge
d. rowspan
10. Dalam pembuatan sebuah form, alamat file tujuan ditulis menjadi nilai dari
atribut ....
a. method
b. action
c. name
d. input
1.10. Umpan Balik dan Tindak Lanjut
Cocokanlah jawaban Anda dengan kunci jawaban Tes Formatif 1 yang

terdapat di bagian akhir modul ini. Hitunglah jawaban yang benar. Kemudian,
gunakan rumus berikut untuk mengetahui tingkat penguasaaan Anda terhadap
materi Kegiatan Belajar 1.
Jumlah Jawaban yang Benar
Tingkat penguasaan = ------------------------------------------------ X 100 %
Jumlah Soal
Arti tingkat penguasaan :
32
• 90 – 100% = Baik Sekali

• 80 – 89 % = Baik
• 70 – 79 % = Cukup
• < 70 % = Kurang
33
2. KEGIATAN BELAJAR 2
KEGIATAN
PENGATURAN HALAMAN WEB BELAJAR
DENGAN CASCADING STYLE

SHEET (CSS) 2

a. menjelaskan pengertian CSS dengan baik
b. menjelaskan manfaat CSS dengan baik
c. menggunakan metode penulisan CSS dengan tepat
d. menggunakan struktur CSS dengan tepat
e. membuat file CSS dengan baik
f. menggunakan selector CSS dengan baik
g. menggunakan file CSS di dalam HTML dengan tepat
2.2. Pengenalan CSS
CSS (Cascading Style Sheet) adalah kumpulan kode yang digunakan

untuk mendefenisikan desain dari bahasa markup. Dengan demikian CSS dapat
digunakan mengatur tampilan dari teks, warna, gambar, dan latar belakang pada
halaman web.
CSS biasanya selalu dikaitkan dengan HTML. CSS dan HTML saling
melengkapi. HTML digunakan untuk membuat struktur atau konten dari halaman
web dan CSS digunakan untuk mengatur tampilan dari halaman web tersebut.
CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan
oleh World Wide Web Consortium atau W3C pada tahun 1996. Saat ini, hampir
seluruh para web desainer menggunakan bantuan CSS untuk mempercantik
tampilan website mereka.
2.3. Manfaat CSS
34
Manfaat penggunaan CSS dalam pengembangan web dinamis antara lain

adalah :
a. Mempersingkat penulisan tag HTML. Jika tanpa menggunakan CSS, maka
akan terjadi pengulangan penulisan tag HTML di dalam seluruh halaman web.
b. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat
pengulangan penulisan.
c. Mudah dan cepat dalam pemeliharaan, karena file CSS yang dibuat secara
terpisah, sehingga tidak perlu merombak semua elemen atau properti dalam
HTML, cukup mengedit file CSS-nya saja.
2.4. Mentode Penulisan CSS
Metode penulisan script CSS dapat dilakukan dengan tiga cara, yaitu :
a. Inline Style Sheet
Metode Inline Style Sheet adalah cara menginput kode CSS langsung ke
dalam tag HTML dengan menggunakan atribut style.
Contoh penggunaan CSS dengan cara ini adalah sebagai berikut :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Inline Style CSS</title>
5 </head>
6 <body>
7 <h2 style="background-color:black;
8 color:white">
9 Tulisan ini bewarna putih dengan latar hitam
10 </h2>
11 </body>
12 </html>
Cara seperti ini, meski praktis tetapi tidak efisien karena memungkinkan
sekali penulisan kode yang sama secara berulang-ulang dan tidak memenuhi
tujuan dibuatnya CSS agar desain terpisah dengan konten. Karenanya, penulisan
script CSS dengan cara inline style sheet amat jarang digunakan.
b. Internal Style Sheets atau Embedded Style Sheet

Metode Internal Style Sheets atau disebut juga Embedded Style Sheets
digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu
35
halaman HTML. Atribut style yang sebelumnya berada di dalam tubuh HTML,
dikumpulkan pada pada sebuah tag <style> yang berada bagian <head> dari
halaman HTML.
Contoh penggunaan CSS dengan cara ini adalah sebagai berikut :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Contoh Inline Style CSS</title>
5 <style type="text/css">
6 h2 {
7 background-color:black;
8 color:white;
9 }
10 </style>
11 </head>
12 <body>
13 <h2>
14 Tulisan ini bewarna putih dengan latar hitam
15 </h2>
16 </body>
17 </html>
Penggunaan CSS seperti di atas lebih baik dibandingkan dengan metode

inline style. Namun tetap memiliki kelemahan jika jumlah halaman web yang
banyak karena pembuatan CSS dilakukan di setiap halaman. Jika terjadi
perubahan, maka perubahannya pun harus dilakukan di setiap halaman.
c. External Style Sheets

Metode External Style Sheets digunakan untuk memindahkan kode CSS
yang digunakan dengan dua metode sebelumnya ke dalam sebuah file tersendiri
yang terpisah halaman HTML. Halaman HTML yang membutuhkan kode CSS,
cukup memanggil file CSS.
Contoh penulisan CSS dengan metode ini adalah sebagai berikut :
1 h2 {
3 color:white;
4 }
Ketik dan simpan kode di atas ke dalam file dengan nama “kode_css.css”.
Untuk memanggil file CSS tersebut dapat dilakukan dengan 2 cara, yaitu :
36
a. Menggunakan @import
Contoh pemanggilan CSS menggunakan @import adalah sebagai berikut :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>External Style Sheet</title>
5 <style type="text/css">
6 @import url(kode_css.css);
7 </style>
8 </head>
9 <body>
10 <h2>
11 Text ini akan bewarna putih dan background
12 warna hitam
13 </h2>
14 </body>
15 </html>
b. Menggunakan tag <link>

Contoh pemanggilan CSS menggunakan tag <link> adalah sebagai berikut :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>External Style Sheet</title>
5 <link rel="stylesheet" type="text/css"
6 href="kode_css.css">
7 </head>
8 <body>
9 <h2>
10 Text ini akan bewarna putih dan background
11 warna hitam
12 </h2>
13 </body>
14 </html>
Metode External Style Sheets adalah metode penulisan CSS yang yang
paling direkomendasikan karena memberikan kemudahan saat akan melakukan
perubahan tampilan web di mana tak perlu mengubah setiap halaman web tetapi
cukup mengubah file CSS saja.
2.5. Struktur CSS
Perhatikan kode CSS berikut ini :
37
1 h2 {
3 color:white;
4 font-wight:bold;
5 }
Dari kode CSS di atas, terdapat tiga komponen yang menjadi struktur CSS,
yaitu :
a. Selector, yaitu penghubung antara CSS dengan tag HTML. Pada strukut CSS
di atas, h2 adalah sebuah selector, karena h2 ditulis di file CSS dan ditulis juga
di HTML.
b. Property, yaitu jenis style atau elemen apa yang akan diubah dari sebuah tag
HTML. CSS memiliki puluhan property yang dapat digunakan untuk seluruh
selector. Pada strukut CSS di atas, background-color, color, dan
font-wight adalah property.
c. Value, yaitu nilai dari property. Pada struktur CSS di atas, yang menjadi value
adalah black, white, dan bold.
2.6. Cara Penulisan CSS
Perhatikan penulisan kode CSS berikut ini :
1 body {
2 font-size: 12px;
3 color: navy;
4 }
5 p {
6 font-family: verdana, calibri, sans-serif;
7 }
8 h1, h2 {
9 text-decoration: underline;
10 color: green;
11 }
Penulisan kode CSS di atas sudah sesuai dengan ketentuan, di mana :

a. Selector diletakkan pada awal penulisan CSS.
b. Untuk penulisan beberapa selector yang digabung menjadi satu, maka pemisah
antar selector menggunakan tanda koma (,).
c. Penulisan property dan value dari setiap selector berada di antara kurung
kurawal “{“ dan “}”.
38
d. Jika satu selector memiliki lebih dari satu property, maka penulisannya
dipisahkan dengan tanda titik koma (;).
e. Pemisah antara property dengan value adalah titik dua (:).
f. Penulisan property yang memiliki lebih dari 1 kata, menggunakan tanda hubung
(-) sebagai pengganti spasi.
2.7. Jenis Selector
CSS memiliki jenis selector yang beragam dan dapat dimanfaatkan

tergantung kebutuhan dalam pembuatan desain halaman web. Jenis-jenis selector
yang dimiliki CSS adalah sebagai berikut :
a. Universal Selector
Jenis selector ini hanya ada 1 di dalam CSS, yaitu tanda bintang “*”.
Selector ini bertujuan untuk mencari semua tag yang ada.
Contoh penggunaan Universal Selector adalah sebagai berikut :
1 * {
2 color: blue;
3 background-color: white;
4 }
Kode CSS di atas berfungsi untuk mengubah seluruh tag HTML yang ada
di dalam halaman web menjadi berwarna biru dengan latar belakang putih.
b. Element Type Selector

Element Type Selector atau Tag Selector adalah istilah untuk selector
berupa tag HTML, karena Setiap tag HTML bisa digunakan sebagai selector.
Contoh penulisannya seperti contoh CSS pada pembahasan struktur CSS
sebelumnya.
c. Class Selector
Class Selector merupakan salah satu selector yang paling sering
digunakan dengan penamaan yang bebas. Class Selector akan mencari seluruh
tag yang memiliki atribut class dengan nilai yang sesuai.
Contoh penulisan kode Class Selector adalah sebagai berikut:
1 .paragraf {
2 color: red;
3 }
39
4 .judul {
5 font-size:24px;
6 }
7 .subjudul {
8 color:red;
9 font-size: 20px;
10 }
Sementara contoh penggunaan Class Selector adalah sebagai berikut :

1 <p class="paragraf">
2 Ini adalah sebuah paragraf pertama
3 </p>
4 <h1 class="judul">Judul Tulisan</h1>
5 <h2 class="subjudul ">Sub Judul Tulisan<h2>
d. ID Selector
Penggunaan ID Selector hampir sama dengan class selector.
Perbedaannya, jika penulisan Class Selector diawali dengan tanda titik (.) dan
pemanggilannya di HTML menggunakan atribut class, sementara untuk
penulisan ID selector diawali dengan tanda pagar (#) dan pemanggilannya
menggunakan atribut id.
Contoh penulisan kode ID Selector adalah sebagai berikut:
1 #paragraf {
2 color: red;
3 }
4 #judul {
5 font-size:24px;
6 }
7 #subjudul {
8 color:red;
9 font-size: 20px;
10 }
Sedangkan contoh penggunaan ID Selector adalah sebagai berikut :

1 <p id="paragraf">
2 Ini adalah sebuah paragraf pertama
3 </p>
4 <h1 id="judul">Judul Tulisan</h1>
5 <h2 id="subjudul ">Sub Judul Tulisan<h2>
e. Attribute Selector
Attribute Selector ini digunakan untuk mencari seluruh tag yang memiliki
atribut yang dituliskan. Penulisannya diapit oleh tanda kurung siku ([]).
40
Berikut adalah contoh penulisan kode Attribute selector :

1 [href] {
2 font-size:20px ;
3 }
4 [type="submit"] {
5 width:30px;
6 }
Attribute Selector [href] akan cocok dengan seluruh tag yang memiliki
atribut href yang biasanya terdapat pada tag <a> (pembuatan link). Sementara
Attribute Selector [type=”submit”] akan cocok dengan tag yang memiliki
atribut type dengan value submit seperti tombol submit dalam form.
Attribute Selector memiliki kemampuan mencari tag yang sangat spesifik,
namun atribut selector jarang sering digunakan.
2.8. Contoh File CSS
Setelah mempelajari tentang CSS, kegiatan berikutnya adalah membuat

sebuah file CSS yang nantinya akan digunakan dalam pembuatan halaman web
pada kegiatan belajar selanjutnya.
Berikut adalah kode CSS dengan penjelasan pada bagian komentar.
Penulisan komentar di dalam CSS hampir sama dengan cara sama dengan
penulisan komentar di dalam HTML, yaitu mengunakan tanda /* di awal dan ditutup
dengan tanda */.
Script kode_css.css
1 /*
2 mengatur batas tepi halaman dan jenis huruf
3 secara umum
4 */
5 body {
6 margin-left: 5%;
7 margin-right: 5%;
8 margin-top: 2%;
9 margin-bottom: 2%;
10 font-family: calibri, verdaa, sans-serif;
11 color: #000000;
12 }
13 /* mengubah tag h1, h2, h3 berwarna biru */
14 h1, h2, h3 {
15 color: blue;
16 }
41
17 /* Mengatur tampilan Tabel */

18 .table1 {
19 font-family: calibri, verdaa, sans-serif;
20 color: #444;
21 border-collapse: collapse;
22 width: 1000;
23 border: 1px solid #f2f5f7;
24 }
25 .table1 tr th{
26 background: #35A9DB;
27 color: #fff;
28 font-weight: bold;
29 }
30 .table1, th {
31 padding: 8px 20px;
32 text-align: center;
33 }
34 .table1, td {
35 padding: 8px 20px;
36 text-align: left;
37 font-size:14px;
38 }
39 .table1 tr:hover {
40 background-color: #f5f5f5;
41 }
42 .table1 tr:nth-child(even) {
43 background-color: #f2f2f2;
44 }
45 /* mengatur tampilan link */
46 a.link {
47 display:inline-block;
48 }
49 a, a:visited {
50 color: #F29A42;
51 text-decoration: none;
52 }
53 a:hover {
54 color: #FFB062;
55 text-decoration: underline;
56 }
57 /* mengatur tampilan link 2 */
58 .link
59 {
60 text-decoration: none;
61 color: #FFFFFF;
62 font-size: 12px;
63 background-color: #35A9DB;
64 font-familiy: calibri;
65 font-weight: bold;
66 border: 1px solid #35A9DB;
67 line-height: 10px;
42
68 margin: auto;
69 padding: 5px;
70 border-radius: 5px;
71 text-align: center;
72 }
73 .link:hover {background-color: #5C5C5C}
74 .link:active {background-color: #000000}
75 .link:visited {background-color: #000000;
76 color: #FFFFFF}
Simpan kode CSS di atas dengan nama file “kode_css.css”. File CSS
tersebut nantinya akan digunakan dalam latihan dan kegiatan belajar berikutnya.
2.9. Latihan
Selesaikanlah perintah-perintah pada latihan berikut ini!

1. Buka kembali file “halaman_utama.html”, “halaman_tabel.html”, dan
“halaman_gambar.html” yang telah diselesaikan pada Kegiatan Belajar 1
sebelumnya!
2. Tambahkan kode untuk memanggil file “kode_css.css” yang telah dibuat pada
akhir Kegiatan Belajar 2 pada masing-masing file HTML di atas!
3. Gunakan selector pada file “kode_css.css” pada tag yang sesuai untuk
mengatur tampilan halaman dari ketiga file HTML di atas!
2.10. Rangkuman
a. CSS (cascading Style Sheet) merupakan sebuah metode untuk mengatur

tampilan halaman web agar lebih menarik.
b. Manfaat dengan menggunakan CSS antara lain mempersingkat penulisan tag
HTML, mempercepat proses rendering atau pembacaan HTML karena tidak
terdapat pengulangan penulisan, serta memuudahkan dan mempercepat
pemeliharaan halaman web karena cukup mengedit file CSS saja tanpa
mengubah konten halaman web.
c. Penulisan CSS dapat dilakukan dengan tiga metode, yaitu inline style sheet,
internal style sheets atau embedded style sheet, dan external style sheets.
Metode external style sheets adalah yang paling direkomendasikan dan paling
banyak digunakan.
d. Struktur CSS terdiri dari selector, property, dan value.
43
2.11. Tes Formatif 2
1. Berikut ini adalah metode penulisan CSS yang dapat digunakan untuk
mengatur tampilan halaman sebuah web, kecuali ...
a. inline style sheet
b. internal style sheets
c. interval style sheets
d. external style sheets
2. Metode penulisan CSS di mana kode CSS disimpan dalam file terpisah
dengan dokumen HTML disebut ...
c. interval style sheets
d. external style sheets
3. Untuk memanggil file CSS yang terpisah dengan dokumen HTML digunakan
dengan cara ...
a. @import
b. @eksport
c. @link
d. @css
4. Struktur CSS terdiri dari ...
a. selector, property, dan attribute
b. selector, property, dan value
c. selector, attribute, dan value
d. property, attribute, dan value
5. Yang merupakan property pada kode CSS berikut adalah ...
#paragraf {
color: red;
}
a. paragraf
b. color
c. red
d. {}
44
6. Yang merupakan selector pada kode CSS berikut adalah ...

#paragraf {
color: red;
}
a. paragraf
b. color
c. red
d. {}
7. Yang merupakan value pada kode CSS berikut adalah ...
#paragraf {
color: red;
}
a. paragraf
b. color
c. red
d. {}
8. Jenis selector yang menggunakan tag HTML sebagai selector di dalam
struktur CSS adalah ...
a. universal selector
b. element type selector
c. class selector
d. id selector
9. Jenis selector pada kode CSS berikut ini adalah ...
.judul {
font-size:24px;
}
c. class selector
d. id selector
10. Jenis selector pada kode CSS berikut ini adalah ...
#subjudul {
font-size:20px;
}
45

c. class selector
d. id selector

Jumlah Soal

• 80 – 89 % = Baik
• 70 – 79 % = Cukup
• < 70 % = Kurang
46
KEGIATAN
BELAJAR
PENGGUNAAN PHP
3

a. menjelaskan pengertian PHP dengan baik
b. melaksanakan proses instalasi Web Server, PHP, dan MySQL dengan tepat
c. menggunakan variabel dengan tepat
d. menggunakan operator dengan tepat
e. menggunakan struktur kontrol pemrograman dengan tepat
f. menggunakan struktur perulangan dengan tepat
g. menggunakan fungsi date dengan tepat
h. menggunakan fungsi explode dengan tepat
i. menggunakan fungsi replace dengan tepat
j. menggunakan fungsi session dengan tepat
k. menggunakan fungsi include dan require dengan tepat
3.2. Pengertian PHP
PHP adalah sebuah bahasa pemrograman script server-side yang didesain

untuk pengembangan web. PHP di kembangkan pada tahun 1995 oleh Rasmus
Lerdorf, dan sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat
di http://www.php.net.
PHP disebut bahasa pemrograman server side karena PHP diproses oleh
server.
Pada awalnya PHP merupakan singkatan dari Personal Home Page
karena digunakan untuk membuat website pribadi. Namun dalam
perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang
powerful dan tidak hanya digunakan untuk membuat halaman web pribadi, tetapi
47
juga website populer di dunia. Sehingga saat ini, PHP adalah singkatan dari PHP:
Hypertext Preprocessor.
PHP dapat digunakan dengan gratis (free) dan bersifat Open Source.
Karena kemudahan penggunaannya, penggunaan PHP menjadi sangat populer.
Menurut wikipedia pada februari 2014, sekitar 82% dari web server di dunia
menggunakan PHP. PHP juga menjadi dasar dari aplikasi CMS (Content
Management System) populer seperti Joomla, Drupal, dan WordPress.
Dikutip dari situs w3techs.com, (diakses pada 18 Desember 2014), berikut
adalah market share penggunaan bahasa pemrograman server-side untuk
mayoritas website di seluruh dunia :
Gambar 17. Market Share Penggunaan Bahasa Pemrograman Server-side
Pada kegiatan belajar sebelumnya telah dibahas mengenai HTML yang

sebenarnya dapat digunakan untuk membuat halaman web. Namun halaman web
yang dibangun dengan HTML bersifat statis dengan konten dan halaman web
bersifat tetap.
Sementara PHP dapat dapat digunakan untuk membuat halaman web
yang bersifat dinamis yang dapat menyesuaikan tampilan konten tergantung
situasi. Selain itu, website dinamis juga bisa menyimpan data ke dalam database,
membuat halaman yang berubah-ubah sesuai input dari user, memproses form,
dan sebagainya.
Dalam pembuatan web, kode PHP biasanya disisipkan ke dalam dokumen
HTML. Karenanya, PHP disebut juga sebagai Scripting Language atau bahasa
pemrograman script.
48
3.3. Instalasi Web Server, PHP, dan MySQL
Berbeda dengan halaman yang berisi kode HTML, sebagaimana telah

dibahas pada kegiatan belajar sebelumnya, yang dapat langsung dijalankan
dengan browser, halaman web yang ditulis dengan PHP harus diproses dalam
sebuah aplikasi yang dinamakan Web Server. Web server inilah yang akan
menerjemahkan kode PHP menjadi HTML dan mengirimnya ke browser untuk
ditampilkan.
Selain membutuhkan Aplikasi Web Server, untuk menjalankan halaman
dengan kode PHP dibutuhkan pula Aplikasi PHP dan Aplikasi Web Browser. Untuk
aplikasi yang disebutkan terakhir sudah dibahas pada kegiatan belajar kesatu.
Aplikasi Web Server yang sering digunakan adalah Apache, Nginx, dan
Microsoft IIS. Apache dan Nginx merupakan aplikasi open source dan dapat
digunakan dengan gratis. Namun yang akan dibahas dan digunakan di dalam
modul ini adalah Apache, sebab Apache masih menjadi aplikasi web server yang
paling banyak dipakai saat ini.
Untuk melakukan instalasi web server Apache dan PHP secara terpisah
akan membutuhkan waktu yang cukup lama dan membutuhkan pengetahuan
mendetil tentang konfigurasi Apache. Sementara saat ini telah tersedia beberapa
aplikasi yang membundel Apache, PHP, serta MySQL untuk database dalam satu
paket, XAMPP dan WAMP. Pada modul ini hanya akan membahas dan
menggunakan XAMPP.
XAMPP adalah singkatan dari beberapa aplikasi yang terdapat di dalam
paketnya, yaitu X yang berarti cross-platform yang menjelaskan bahwa paket
aplikasi di dalamnya tersedia dalam berbagai sistem operasi, Apache Web
Server, MySQL, PHP dan Perl. Menginstall XAMPP, berarti secara tidak langsung
telah menginstall keempat aplikasi tersebut. Versi terbaru XAMPP dapat diakses
dialamat www.apachefriends.org/en/xampp-windows.html. Sementara yang akan
digunakan di dalam modul pembelajaran ini adalah XAMPP 5.6.3.
Setelah file instalasi aplikasi XAMPP telah berhasil diunduh, klik dua kali
file tersebut, yaitu xampp-win32-5.6.3-0-VC11-installer.exe.
Jika komputer yang akan diinstal XAMPP menggunakan anti virus, maka
akan muncul jendela peringatan seperti gambar berikut :
49
Gambar 18. Jendela Peringatan Anti Virus
Jendela peringatan seperti gambar di atas berisi informasi bahwa jika

program anti virus sedang berjalan, maka proses instalasi mungkin akan berjalan
lambat atau mengganggu proses instalasi XAMPP. Jika memang diperlukan,
matikan anti virus untuk sementara terlebih dahulu atau jika ingin mengabaikan
peringatan tersebut dan melanjutkan proses instalasi, klik tombol “Yes”.
Jika komputer yang digunakan menggunakan sistem operasi Windows
Vista ke atas, maka akan muncul tampilan seperti gambar di bawah ini :
Gambar 19. Jendela Peringatan User Account Control (UAC)
Tampilan jendela seperti gambar di atas mengingatkan untuk tidak

menginstall XAMPP pada folder default di C:\Program Files karena sistem
keamanan Windows akan menghalangi beberapa fitur dari XAMPP.
Selanjutnya akan muncul jendela awal proses instalasi XAMPP.
50
Gambar 20. Jendela Awal Instalasi XAMPP
Klik tombol “Next” untuk menampilkan jendela “Select Component”.
Gambar 21. Jendela Select Components
Pada tampilan layar seperti gambar di atas, biarkan pilihan default yang
dalam hal ini menginstal semua aplikasi. Selanjutnya klik tombol ”Next”.
Pada tahapan berikutnya akan muncul jendela “Installation Folder”.
51
Gambar 22. Jendela Instalation Folder
Ubah folder instalasi default XAMPP ke folder lain, dalam contoh ini
ke D:\xampp. Lalu klik tombol “Next” untuk melanjutkan.
Tampilan selanjutnya adalah jendela “Bitnami for XAMPP”.
Gambar 23. Jendela Bitnami for XAMPP
Pada tampilan seperti gambar di atas, hapus centang dari pilihan “Learn
more about BitNami for XAMPP”, lalu klik tombol ”Next”.
Jika tidak ada kendala, tampilan berikutnya adalah “Ready to Install”.
52
Gambar 24. Jendela Ready to Install
Klik tombol ”Next” untuk memulai proses instalasi.
Gambar 25. Proses Instalasi XAMPP
Proses instalasi akan berjalan beberapa saat, hingga layar tampilan

menjadi “Completing the XAMPP”.
53
Gambar 26. Jendela Completing the XAMPP Setup Wizard
Pada tampilan seperti gambar di atas, biarkan ceklist “Do you want to start
the Control Panel now?” dan akhiri proses installasi XAMPP dengan klik
tombol ”Finish”.
Setelah proses instal XAMPP berhasil, akan muncul layar “XAMPP Control
Panel” yang menjadi tempat untuk menjalankan seluruh aplikasi yang ada di dalam
XAMPP, seperti Apache Web Server dan MySQL.
Gambar 27. XAMPP Control Panel
54
Pada tampilan Control Panel, klik tombol “Start” pada

bagian ”Action” Apache dan MySQL. Beberapa saat kemudian, Module
Apache dan MySQL akan berwarna hijau menandakan aplikasi Web Server
Apache dan database MySQL sudah berjalan.
Selanjutnya jalankan web browser, seperti Internet Explorer, Google
Chrome, atau Mozilla Firefox. Pada kolom address ketikkan localhost, kemudian
tekan Enter.
Alamat localhost adalah alamat khusus yang diterjemahkan oleh browser
untuk mengakses web server pada komputer sendiri (local). Akses ke web server
pada komputer sendiri (local) juga dapat dilakukan dengan menggunakan alamat
IP 127.0.0.1.
Jika tampilan yang muncul di layar adalah halaman XAMPP, berarti proses
instalasi telah berhasil.
Gambar 28. Halaman Depan XAMPP (1)
Langkah selanjutnya adalah memilih bahasa yang akan digunakan ketika

menjalankan XAMPP. Karena tak ada pilihan Bahasa Indonesia, maka pilih
English.
Selanjutnya akan muncul halaman home dari XAMPP dengan menu-menu
yang terdapat pada sisi sebelah kiri atas seperti gambar berikut ini.
55
Gambar 29. Halaman Depan XAMPP (2)
Pada proses instalasi di atas, tidak terdapat proses untuk memberikan

password untuk user root. Sehingga jika setiap kali XAMPP dijalankan dengan
cara mengklik dua kali file xampp_start.exe yang terdapat di dalam folder
D:\xampp tidak akan muncul permintaan user dan password. Salah satu cara
untuk mengamankan web yang dikembangankan dengan XAMPP adalah dengan
memberikan password kepada user root.
Langkah-langkah untuk memberikan password kepada user root adalah
sebagai berikut :
a. Buka http://localhost/phpmyadmin melalui browser.
b. Klik tab User Account untuk menampilkan data semua user yang ada.
c. Pada baris user root, klik Edit Priveleges pada kolom Action.
d. Klik tab Change Password untuk menampilkan formulir pemberian password.
e. Masukkan password yang diinginkan dengan ketentuan minimal 8 karakter
yang terdiri dari kominasi huruf kapital, hurup kecil, angka, dan karakater
khusus, lalu klik tombol GO.
f. Cari file bernama ”config.inc.php “di dalam folder hasil install xampp yaitu
d:/xampp/phpMyAdmin dan buka dengan Notepad++.
g. Cari tulisan $cfg['Servers'][$i]['auth_type'] = ‘config’, lalu ubah tulisan config
menjadi http.
56
h. Kemudian pada bagian $cfg['Servers'][$i]['password'] = '', isikan password

seperti yang telah diberikan pada langkah huruf e.
i. Simpan file dan restart XAMPP.
j. Buka kembali halaman http://localhost/phpmyadmin melalui browser yang kali
ini sudah dimintakan untuk menginput user dan password.
3.4. Penulisan Kode PHP
Dalam penulisan dan menjalankan kode PHP, terdapat beberapa aturan

dasar yang harus diperhatikan, yaitu :
a. Penamaan dan Lokasi Penyimpanan File

Agar bisa dijalankan oleh web server, hasil penulisan kode PHP disimpan
sebagai file dengan ekstensi .php di dalam folder xampp\htdocs atau folder di
bawahnya. Untuk menjalankan file tersebut dengan browser, ketik alamat
localhost/ yang diikuti nama file php atau nama folder di bawah htdocs dan nama
file php.
b. Memasukkan Kode PHP ke Dalam HTML

Di dalam sebuah file php dapat berisi kode PHP, kode HTML, dan kode
JavaScript. Oleh karena itu, dibutuhkan cara untuk memberitahukan kepada web
server bahwa terdapat kode PHP di dalam file tersebut, bukan HTML.
Ada beberapa cara yang dapat digunakan untuk memberitahukan web
server. Namun yang dibahas di dalam modul ini hanya cara atau metode standar
PHP karena paling disarankan dan paling banyak digunakan. Penerapan metode
ini menggunakan tag “<?php” sebagai pembuka dan tag “?>” sebagai penutup.
Sebagai contoh, ketik dan simpan kode PHP berikut di folder
XAMPP/htdocs dengan nama “latihan01.php”.
Script latihan01.php
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan Metode Standar PHP</title>
5 </head>
6 <body>
7 <p>Penulisan kalimat menggunakan HTML.</p>
8 <?php
9 echo "<p>Penulisan kalimat menggunakan
57
10 PHP.</p>";
11 ?>
12 </body>
13 </html>
Selanjutnya ketik dan simpan kode PHP berikut di folder XAMPP/htdocs

dengan nama “latihan02.php”.
1 <?php
2 echo "<!DOCTYPE html>";
3 echo "<html>";
4 echo "<head>";
5 echo "<title>Penggunaan Metode Standar
6 PHP</title>";
7 echo "</head>";
8 echo "<body>";
10 HTML.</p>";
12 PHP.</p>";
13 echo "</body>";
14 echo "</html>";
15 ?>
Jalankan kedua file tersebut belalui browser untuk melihat hasilnya.
Gambar 30. Penggunaan Metode XML Style
Hasil tampilan dari kedua file tersebut adalah sama. Yang membedakan
adalah cara kerja web server dalam membacanya. Pada contoh pertama, web
server hanya mengidentifikasi dan memproses pernyataan yang diapit oleh tag
“<?php” dan tag “?>” sebagai kode PHP. Sementara kode di luar kedua tag
58
tersebut tidak diproses terlebih dahulu melainkan langsung dikirim ke browser

karena merupakan kode HTML. Sementara pada contoh kedua, web server
mengidentifikasi dan memproses seluruh pernyataan yang ada karena diapit oleh
oleh tag “<?php” dan tag “?>”.
c. Case Sensitivity (perbedaan huruf besar dan kecil) dalam PHP

PHP tidak membedakan huruf besar dan kecil untuk penamaan fungsi
maupun keyword bawaan seperti echo dan while. Sebagai contoh, penulisan kode
PHP berikut dianggap sama dalam PHP.
1 <?php
2 Echo "Selamat Datang";
3 ECHO "Selamat Datang";
4 EcHo "Selamat Datang";
5 echo "Selamat Datang";
6 ?>
Akan tetapi, PHP membedakan huruf besar dan huruf kecil untuk
penamaan variabel. Sehingga penulisan variabel $nama, $Nama dan $NAMA
dianggap sebagai 3 variabel yang berbeda. Karenanya sering terjadi error yang
disebabkan karena kesalahan menuliskan nama variabel di mana seharusnya
menggunakan huruf kecil tetapi ditulis dengan huruf besar, atau sebaliknya.
Untuk mengatasi permasalahan tersebut, disarankan menggunakan huruf
kecil untuk seluruh kode PHP, termasuk variabel maupun fungsi. Jika
membutuhkan nama variabel yang terdiri dari 2 kata, gunakan underscore (_)
untuk menggantikan spasi.
d. Penulisan Baris Perintah dalam PHP

Baris perintah (statement) di dalam PHP adalah kumpulan perintah PHP
yang menginstruksikan PHP untuk melakukan sesuatu. Baris perintah ini bisa
terdiri dari satu baris singkat seperti perintah echo untuk menampilakan teks di
layar atau lebih dari satu baris karena berisi perintah yang yang lebih rumit seperti
kondisi if.
Berikut adalah contoh beberapa baris perintah dalam PHP:
1 <?php
2 echo "Selamat Datang";
3 $a = 10;
59
4 $nama = "Rifki";
5 if ($a == 10)
6 {
7 echo "Tampilkan Tabel";
8 }
9 ?>
Dari beberapa contoh baris di atas, PHP menggunakan tanda titik koma
(semicolon) sebagai tanda akhir baris perintah. Sementara kumpulan baris
perintah yang menggunakan tanda kurung kurawal seperti kodisi if tidak
menggunakan tanda titik koma setelah kurung penutup.
e. Karakter Spasi dan Tab dalam PHP

Karakter spasi dan tab diabaikan di dalam eksekusi program PHP.
Perhatikan contoh penulisan kode PHP berikut :
1 <?php
2 echo "Ini kalimat pertama"; echo "Ini kalimat
kedua"; echo "Ini kalimat ketiga";
3 ?>
Hasil yang muncul di layar browser dari penulisan kode dengan cara
seperti di atas akan sama jika ditulis dengan cara berikut ini :
1 <?php
2 echo "Ini kalimat pertama";
3 echo "Ini kalimat kedua";
4 echo "Ini kalimat kedua";
5 ?>
Penulisan cara pertama akan menghemat tempat dan ukuran file. Namun
akan menyulitkan saat membaca ulang atau mengecek kode program. Sehingga
lebih baik menuliskan setiap statement dalam satu baris saja dan menambahkan
beberapa spasi di awal untuk memudahkan membaca kode program.
f. Komentar
Sama seperti halnya pembahasan komentar di dalam HTML, komentar di
dalam PHP juga diperlukan untuk memberikan penjelasan kepada orang lain yang
membaca kode atau sebagai pengingat kepada pembuat kode. Selain itu, sifat
komentar yang tidak akan dieksekusi oleh PHP, memberikan keuntungan lain
dalam proses pembuatan program, seperti menjadikan beberapa baris kode
60
program sebagai komentar ketika mencari tau penyebab error kode program yang
sedang dibuat.
Berikut ini adalah beberapa cara untuk membuat komentar dalam
penulisan kode program PHP.
1) Metode Komentar Unix Shell, yaitu menggunakan karakter tanda pagar (#)
sebagaimana cara memberikan komentar di dalam Sistem Unix. Contoh
penggunaan komentar metode ini adalah sebagai berikut :
1 <?php
2 $nilai = $jml_nilai/$jml_siswa;
3 #hitung nilai average
4 ?>
5 #######################
6 ## Validasi Data Pegawai
7 #######################
8 <php
9 ... Kode program PHP disini
10 ?>
2) Metode Komentar C++, yaitu menggunakan karakter y dua kali garis miring (//)
sebagaimana cara pembuatan komentar pada bahasa pemrograman C++.
Berikut adalah contoh penggunaan komentar metode C++ :
1 <?php
2 $nilai = $jml_nilai/$jml_siswa;
3 //hitung nilai average
4 ?>
5 ////////////////////////
6 // Validasi Data Pegawai
7 ////////////////////////
8 <php
9 ... Kode program PHP disini
10 ?>
3) Metode Komentar C, yaitu menggunakan sebuah garis miring dan diikuti

dengan tanda bintang (/*) di awal komentar dan diakhiri dengan tanda bintang
dan diikuti dengan garis miring (*/). Jika dua metode komentar sebelumnya
efektif untuk membuat komentar pendek, maka metode komentar C ini cocok
untuk membuat komentar yang panjang. Metode komentar ini disebut juga tipe
komentar blok karena sifatnya yang harus diberikan tanda tutup untuk
mengakhiri komentar. Berikut adalah contoh penggunaan Metode Komentar C
:
61
1 <?php
2 /* contoh beberapa variabel */
3 $nama = "Rifki";
4 $jabatan = "Fungsional Pranata Komputer";
5 $tahun = 2018;
6 $jamlat= 20;
7 ?>
Metode Komentar C ini juga berguna untuk “menyembunyikan” beberapa baris

program agar tidak dijalankan oleh PHP seperti contoh berikut :
1 <?php
2 $a = 3;
3 /*
4 bagian ini tidak akan dijalankan oleh PHP
5 $b = 7;
6 $c = 8;
7 */
8 $d = 5;
9 ?>
3.5. Variabel
Di dalam beberapa contoh penulisan kode PHP sebelumnya, terdapat

penulisan variabel yang diawali dengan karakter $. Pada bagian ini akan dibahas
lebih rinci tentang variabel di dalam kode PHP.
Variabel adalah suatu lokasi penyimpanan di dalam memori komputer yang
berisikan nilai atau informasi yang nilainya tidak diketahui maupun telah diketahui.
Variabel juga dapat didefinisikan sebagai kode program yang digunakan untuk
menampung nilai tertentu. Nilai tersebut kemudian disimpan atau dipindahkan ke
dalam database atau ditampilkan kembali ke pengguna.
Beberapa aturan terkait dengan penulisan cariable di dalam PHP adalah
sebagai berikut :
a. Penulisan variabel
Variabel di dalam PHP harus diawali dengan karakter $ yang diikuti dengan
dengan karakter pertama berupa huruf atau underscore (_) dan bukan angka.
Karakter selanjutnya dapat berupa, huruf, angka, atau underscore (_). Penulisan
variabel tidak boleh mengandung spasi atau karakter khusus. Panjang minimal
sebuah variabel adalah 1 karakter setelah karakter $.
Berikut adalah contoh penulisan variabel di dalam PHP :
62
1 <?php
2 $a;
3 $nama;
4 $Umur;
5 $_lokasi_memori;
6 $NILAI_AVERAGE;
7 ?>
b. Sifat Variabel
PHP membedakan variabel yang ditulis dengan huruf besar dan kecil (case
sensitivity). Sehingga variabel $nama tidak sama dengan $Nama atau $NAMA.
Untuk menghindari kesalahan penulisan variabel, disarankan menggunakan huruf
kecil untuk seluruh nama variabel.
c. Nilai Variabel
Di dalam kode PHP, pemberian nilai kepada sebuah variabel
menggunakan tanda sama dengan (=). Operator ini dikenal dengan istilah
Assignment Operators. Jika variabel tersebut belum pernah digunakan, dan
langsung diberikan nilai awal, maka disebut juga dengan proses inisialisasi.
Berikut contoh cara memberikan nilai awal (inisialisasi) kepada variabel :
1 <?php
2 $nama = "andi";
3 $umur = 17;
4 $pesan = "Saya sedang belajar di Pusdiklat";
5 ?>
d. Deklarasi Variabel
Di dalam PHP, variabel tidak perlu dideklarasikan terlebih dahulu. Sebuah
variabel baru dapat dibuat di tengah-tengah kode program dan langsung
digunakan tanpa harus dideklarasikan terlebih dahulu.
e. Tipe Variabel
Bahasa pemograman PHP termasuk Loosely Type Language, yaitu jenis
bahasa pemograman yang variabelnya tidak terikat pada sebuah tipe tertentu.
Sehingga setiap variabel di dalam PHP bebas diisi dengan nilai apa saja, seperti
contoh berikut :
1 <?php
2 // nilai variabel berupa angka (integer)
3 $a = 17;
63
4 // nilai variabel berupa kata (string)

5 $b = "aku";
6 // nilai variabel berupa desimal (float)
7 $c = 17.42;
8 ?>
f. Variabel Sistem PHP (Predefined Variables)

Variabel Sistem PHP adalah beberapa variabel yang telah didefenisikan
secara sistem oleh PHP sehingga tidak disarankan untuk membuat variabel
dengan menggunakan nama yang sama. Beberapa contoh Predefined Variables
dalam PHP adalah $GLOBALS, $_SERVER ,$_GET ,$_POST, $_FILES,
$_SESSION, dan sebagainya. Daftar Predefined Variables secara lengkap dapat
dilihat di http://www.php.net/reserved.variables.
Setelah nilai diberikan kepada sebuah variabel, maka untuk
menampilkannya di browser adalah dengan perintah echo atau print, seperti
contoh di bawah ini :
1 <?php
2 $a="Saya sedang belajar PHP”;
3 $b=5;
4 $c="Saya sedang belajar PHP $b”;
5
6 print $a;
7 echo $b;
8 echo "<br>";
9 echo $c;
10 ?>
Hasil yang didapat dari penulisan kode PHP di atas adalah:
Saya sedang belajar PHP5

Saya sedang belajar PHP 5
3.6. Operator
a. Operator String
Di dalam PHP, hanya terdapat 1 jenis Operator String, yakni operasi

penyambungan (concatenation) dengan menggunakan karakter titik (.). Dalam
penggunaannya, operator ini membutuhkan dua atau lebih variabel dengan tipe
data string yang menghasilkan sebuah string yang terdiri dari sambungan dua atau
lebih string tersebut.
64
Sebagai contoh, salin dan simpan kode PHP berikut ini dengan nama file
“latihan03.php”, kemudian jalankan dengan browser.
1 <?php
2 $a = "Selamat";
3 $hasil1 = $a . "Datang!";
4 echo $hasil1;
5 echo "<br>";
6 $b = "Dalam ";
7 $c = "Diklat Pembuatan Web Dinamis";
8 $hasil2= $b.$c;
9 echo $hasil2;
10 ?>
Gambar 31. Operator String
b. Operator Aritmatika
Operator Aritmatika adalah operator matematis yang terdiri dari operator

penambahan, pengurangan, perkalian, pembagian, modulus, plus, dan
minus.Didalam PHP terdapat 7 jenis operator aritmatika sebagaimana terlihat
pada tabel berikut ini :
Tabel 1. Operator Aritmatika dalam PHP
No. Operator Contoh Hasil

1 Positif +$a Nilai positif dari $a
2 Negatif -$a Nilai negatif dari $a
3 Penambahan $a + $b Total dari $a dan $b
4 Pengurangan $a - $b Selisih dari $a dan $b
5 Perkalian $a * $b Hasil kali dari $a dan $b
6 Pembagian $a / $b Hasil bagi dari $a dan $b
65
7 Modulus (Sisa $a % $b Sisa dari pembagian $a / $b

Hasil
Pembagian)
Sebagai contoh penggunaan operator aritatika, Ketik kode PHP di bawah

ini kemudian simpan nama file “latihan04.php” dan buka dengan browser untuk
melihat tampilan hasilnya.
1 <?php
2 $hasil1= -3;
3 $hasil2=4+5;
4 $hasil3=7-5;
5 $hasil4=2*15;
6 $hasil5=25/5;
7 $hasil6=10 % 4;
8 echo "Hasil 1 : $hasil1";
9 echo "<br>";
11 echo "<br>";
13 echo "<br>";
15 echo "<br>";
17 echo "<br>";
19 ?>
Gambar 32. Penggunaan Operator Aritmatika
c. Operator Logika
66
Operator Logika adalah operator yang digunakan untuk membandingkan 2

kondisi dan menghasilkan salah satu dari nilai benar (TRUE) atau salah (FALSE).
Operator logika sering digunakan untuk kodisi IF atau untuk keluar dari proses
perulangan (looping).
Jenis-jenis Operator Logika dalam PHP dapat dilihat pada tabel berikut :
Tabel 2. Operator Logika dalam PHP
No Operator Contoh Hasil

1 AND $a and $b TRUE jika $a dan $b sama-sama bernilai TRUE
$a && $b
2 OR $a or $b TRUE jika salah satu dari $a atau $b bernilai
$a || $b TRUE
3 XOR $a xor $b TRUE jika salah satu dari $a atau $b bernilai
TRUE, tetapi bukan keduanya
4 NOT !$a TRUE jika $a bernilai FALSE
Pada tabel di atas terdapat dua contoh untuk Operator AND dan OR.
Perbedaan dari operator AND dengan && serta OR dengan || terkait dengan cara
penulisan dan kekuatan operator. Operator && dan || memiliki kekuatan lebih
tinggi daripada AND dan OR, sehingga baris perintah $a AND $b || $c akan
dieksekusi oleh PHP menjadi $a AND ($b || $c).
Berikut adalah contoh kode program penggunaan operator logika dalam
PHP :
1 <?php
2 $a = 1;
3 $b = 2;
4 //contoh 1
5 if ($a == 1)
6 {
7 echo "Selamat";
8 }
9 //Output : Selamat
10 echo "<br>";
11 //contoh 2
12 if ($a == 1 and $b == 2)
13 {
14 echo "Selamat Datang!";
15 }
16 //Output : Selamat Datang!
17 echo "<br>";
18 // Contoh 3
19 if ($a == 1 or $b == 2)
20 {
67
21 echo "Welcome!";
22 }
23 // Output : Welcome
24 echo "<br>";
25 // Contoh 4
26 if ($a == 1 xor $b == 2)
27 {
28 echo "Hello PHP!";
29 }
30 // Tidak ada Output
31 echo "<br>";
32 // Contoh 4
33 if ($a != 10)
34 {
35 echo "Silahkan Masuk!";
36 }
37 // Output : Silahkan Masuk!
38 ?>
Dalam menjalankan operasi logika, PHP menggunakan prinsip short-

circuit, yaitu jika dengan memeriksa satu perintah saja sudah didapati hasil
logikanya, maka perintah berikutnya tidak akan dijalankan.
Contoh :
$hasil = $a AND $b AND $c AND $d;
Jika pada saat kode program di atas dijalankan ternyata ditemukan bahwa $a
sudah bernilai FALSE, maka variabel $b, $c dan $d tidak akan diperiksa lagi,
karena apapun nilai variabel tersebut, hasilnya akan tetap FALSE.
d. Operator Perbandingan
Operator perbandingan membandingkan dua buah kondisi yang akan
menghasilkan nilai TRUE atau FALSE.
Jenis-jenis dari operator perbandingan dalam PHP dapat dilihat dari tabel
dibawah ini :
Tabel 3. Operator Perbandingan dalam PHP
No Operator Contoh Hasil

1 Sama dengan $a == $b TRUE jika $a sama dengan $b tanpa
melihat tipe data
2 Identik dengan $a === $b TRUE jika $a sama dengan $b dan
memiliki tipe data yang sama
3 Tidak sama $a != $b TRUE jika $a tidak sama dengan $b
dengan tanpa melihat tipe data
4 Tidak identik $a <> $b TRUE jika $a tidak sama dengan $b
dengan tanpa melihat tipe data
68
5 Kurang dari $a !== $b TRUE jika $a tidak sama dengan $b

dan mamiliki tipe data yang tidak
sama
6 Lebih dari $a < $b TRUE jika $a kurang dari $b
7 Kurang dari atau $a > $b TRUE jika $a lebih dari $b
sama dengan
8 Lebih dari atau $a <= $b TRUE jika $a kurang dari atau sama
sama dengan dengan $b
Berikut adalah beberapa contoh penggunaan operator perbandingan

dalam PHP:
1 <?php
2 $a = 10;
3 $b = 10;
4 if($a == $b)
5 {
6 echo "Benar";
7 }
8 else
9 {
10 echo "Salah";
11 }
12 /*
13 menghasilkan output Benar karena variabel $a
14 memiliki nilai yang sama dengan variabel $b
15 */
16 echo "<br>";
17 if($a === $b)
18 {
19 echo "Benar";
20 }
21 else
22 {
23 echo "Salah”;
24 }
25 /*
26 menghasilkan output Benar karena variabel $a
27 memiliki nilai dan tipe data yang sama dengan
28 variabel $b
29 */
30 echo "<br>";
31 if($a != $b)
32 {
33 echo "Benar";
34 }
35 else
36 {
37 echo "Salah";
38 }
69
39 /*
40 menghasilkan output Salah karena variabel $a
41 memiliki nilai yang sama dengan variabel $b
42 */
43 echo "<br>";
44 if($a !== $b)
45 {
46 echo "Benar";
47 }
48 else
49 {
50 echo "Salah";
51 }
52 /*
53 menghasilkan output Salah karena variabel $a
54 memiliki nilai dan tipe yang sama dengan
55 variabel $b
56 */
57 echo "<br>";
58 $c = 4;
59 $d = 7;
60 if($c < $d)
61 {
62 echo "Benar";
63 }
64 else
65 {
66 echo "Salah";
67 }
68 /*
69 menghasilkan output Benar karena nilai
70 variabel $a memiliki nilai lebih kecil
71 daripada variabel $b
72 */
73 echo "<br>";
74 if($c > $d)
75 {
76 echo "Benar";
77 }
78 else
79 {
80 echo "Salah";
81 }
82 /*
83 menghasilkan output Salah karena nilai
84 variabel $a memiliki nilai lebih besar
85 daripada variabel $b
86 */
87 echo "<br>";
88 ?>
70
3.5. Struktur Kontrol Pemrograman
Struktur Kontrol (Control Structure) merupakan suatu algoritma program

yang memiliki kondisi yang yang akan menentukan pengambilan keputusan atau
alur perintah yang akan dijalankan dalam sebuah program seperti percabangan
atau perulangan.
e. Struktur Logika IF
Struktur IF adalah struktur logika untuk membuat percabangan alur
program. Dengan menggunakan struktur IF, sebuah perintah dapat diatur apakah
akan dijalankan atau tidak.
Struktur dasar penulisan alur logika IF adalah sebagai berikut :
if (expression)
{
statement
}
Expression di dalam struktur di atas adalah kondisi yang harus dipenuhi

agar statement dapat dijalankan. Jika hasil expression bernilai TRUE, maka
statement akan dijalankan, namun jika nilainya FALSE, maka statement tidak akan
dijalankan.
Struktur di atas dapat dikembangkan jika terdapat expression atau
statement lain seperti di bawah ini :
if (expression)
{Statement 1}
else
{statement 2}
atau:
if (expression 1)
{ statement 1 }
elseif (expression 2)
{ statement 2 }
else
{ statement 3 }
Untuk memudahkan pemahaman terhadap Struktur Logika IF, salin dan

simpan kode PHP berikut dengan nama file “latihan05.php”, kemudian jalankan
dengan menggunakan browser.
71
1 <?php
2 $a=4;
3 $b=9;
4 if ($a>$b)
5 {
6 echo("a lebih besar dari pada b");
7 }
8 elseif ($a<$b)
9 {
10 echo("a lebih kecil b");
11 }
12 else
13 {
14 echo("a sama dengan b");
15 }
16 ?>
Gambar 33. Penggunaan Struktur Logika IF
f. Struktur Logika Switch

Struktur logika switch adalah sebuah stuktur percabangan yang akan
memeriksa suatu variabel, lalu menjalankan perintah secara berulang-ulang
sesuai dengan kondisi yang mungkin terjadi untuk variabel tersebut.
Format dasar penulisan switch dalam PHP adalah sebagai berikut :
switch ($variable)
{
case value1:
statement1;
break;
case value2:
statement2;
72
break;
}
Sebagai contoh penggunaan switch, salin dan simpan kode berikut dengan
nama file “latihan06.php”, kemudian jalankan dengan browser.
1 <?php
2 $a=2;
3 switch ($a)
4 {
5 case 1 :
6 echo "Angka Satu";
7 break;
8 case 2 :
9 echo "Angka Dua";
10 break;
11 default :
12 echo "Angka Tidak Terdefinisi";
13 break;
14 }
15 ?>
Gambar 34. Penggunaan Struktur Logika Switch
3.6. Struktur Perulangan

Struktur perulangan (loop) adalah instruksi program yang bertujuan untuk
mengulang baris perintah. Berikut adalah pembahasan mengenai beberapa
struktur perulangan yang terdapat di dalam PHP.
a. Struktur Perulangan FOR

Di dalam struktur perulangan FOR, terdapat 4 komponen yang harus ada
agar dapat dijalankan di browser sebagaimana penulisan dasar format berikut :
73
for (start; condition; increment)

{
statement;
}
1) start adalah kondisi pada saat awal perulangan yang diwakili dengan sebuah
nilai variabel counter yang digunakan untuk mengontrol perulangan.
2) condition adalah kondisi yang harus dipenuhi agar perulangan dijalankan.
Selama kondisi ini terpenuhi, maka PHP akan terus melakukan perulangan.
3) increment adalah bagian yang digunakan untuk memproses variabel counter
berupa pertambahan nilai agar bisa memenuhi kondisi akhir perulangan.
4) statement adalah bagian kode program yang akan diproses secara terus-
menerus selama proses perulangan berlangsung.
Untuk memudahkan pemahaman , ketiklah kode PHP di bawah ini yang
bertujuan melakukan pengulangan untuk menampilkan angka 1 sampai dengan
10 di browser, lalu simpan dengan nama file “latihan07.php”, kemudian lihat
hasilnya melalui browser.
1 <?php
2 for ($a= 1; $a <= 10; $a++)
3 {
4 echo $a;
5 echo "<br>";
6 }
7 ?>
74
Gambar 35. Struktur Perulangan FOR
b. Struktur Perulangan While

Bentuk Stuktur perulangan lain yang dapat menampilkan hasil yang sama
seperti perulangan for adalah perulangan while. Struktur dasar perulangan while
adalah sebagai berikut :
while (condition)
{
statement;
statement;
}
Untuk menghasilkan tampilan informasi yang sama seperti contoh

sebelumnya, salinlah da simpan kode PHP di bawah ini dengan nama file
“latihan08.php”, kemudian lihat hasilnya melalui browser.
1 <?php
2 $a=1;
3 while ($a<=10)
4 {
5 echo "$a";
6 echo "<br>";
7 $a=$a+1;
8 }
9 ?>
75
Gambar 36. Struktur Perulangan While
c. Struktur Perulangan Do-While

Prinsip kerja do-while hampir sama perulangan while. Perbedaannya
terletak pada lokasi pengecekan kondisi perulangan. Jika pada struktur while,
pengecekan dilakukan di awal, sehingga jika kondisi tidak terpenuhi, maka
perulangan tidak akan pernah dijalankan. Sementara perulangan do-while,
pengecekan kondisi dilakukan di akhir perulangan, sehingga walaupun kondisi
adalah FALSE, perulangan akan tetap berjalan minimal 1 kali.
Penulisan dasar struktur do-while adalah sebagai berikut :
do {
statement;
statement;
} while (condition);
Setelah perintah do, di dalam blok kurung kurawal terdapat statement,

yaitu kode program yang akan diulang sekaligus ada baris program yang berfungsi
untuk menghentikan proses perulangan.
Condition adalah kondisi yang harus dipenuhi agar perulangan tetap
berlangsung. Selama condition bernilai TRUE, maka perulangan akan terus
dilakukan dan akan berhenti jika terjadi nilai FALSE.
Berikut ini adalah contoh penggunaan perulangan do-while. Salin dan
simpan dengan nama file “latihan09.php”, lalu jalankan melalui browser.
76
1 <?php
2 $a=1;
3 do
4 {
5 echo "$a";
6 echo "<br>";
7 $a=$a+1;
8 } while ($a <= 10);
9 ?>
Gambar 37. Struktur Perulangan Do-While
3.7. Fungsi Date

Fungsi date merupakan fungsi yang sering digunakan dalam
pengembangan suatu aplikasi, terutama untuk aplikasi dinamis. Fungsi date
digunakan untuk mengambil data waktu, baik berupa tahun, bulan, tanggal, jam,
menit, hingga detik pada saat dijalankan dalam bentuk string.
Beberapa format date yang disediakan oleh PHP di antaranya :
a. d (day of the month), menampilkan 2 digit tanggal (01 sampai 31)
b. D (day of the week), menampilkan tiga huruf pertama nama hari (Fri, Sat)
c. F (month), menampilkan dama bulan secara lengkap (January, July)
d. g (hour), menampilkan format jam dari 1 sampai 12 (tanpa angka nol)
e. G (hour), menampilkan format jam dari 0 sampai 23 (tanpa angka nol)
f. h (hour), menampilkan format jam dari 01 sampai 12 (dengan angka nol)
g. H (hour), menampilkan format jam dari 01 sampai 24 (dengan angka nol)
h. i (minutes), menampilkan menit dari 00 sampai 59
77
i. j (day of the month), menampilkan tanggal 1 sampai 31 (tanpa angka nol)

j. l (day of the week), menampilkan nama hari lengkap (Friday, Saturday)
k. m (month), menampilkan bulan dalam format angka dari 01 sampai 12
l. M (month), menampilan tiga huruf pertama nama bulan (Jan, Feb)
m. n (month), menampilkan bulan dalam format angka dari 1 sampai 12
n. s (seconds), menampilkan detik dari 00 sampai 59
o. Y (year), menampilkan 4 digit tahun (2018)
p. y (year), menamlilkan 2 digit tahun (70, 80, 90)
Contoh penggunaan beberapa fungsi date di atas adalah sebagai berikut

:
1 <?php
2 $tanggal1=date("Y-m-d");
3 $tanggal2=date("l, j F Y");
4 $tanggal3=date("H:i:s");
5 echo "$tanggal1 <br>";
8 ?>
3.8. Fungsi Explode()
Fungsi explode() adalah fungsi PHP untuk memisahkan string

berdasarkan tanda karakter pemisah yang ditentukan sendiri. String yang sudah
dipecah akan menjadi array dan dapat ditampilkan melalui browser.
Berikut ini adalah contoh script penggunaan fungsi explode() :
1 <?php
2 $kalimat = "Kami Sedang Belajar di Pusdiklat Pajak";
3 $kata = explode(" " , $kalimat);
4 echo $kalimat ."<br>";
5 echo " Kata 1 = " . $kata[0] ."<br>";
6 echo " Kata 2 = " . $kata[1] ."<br>";
7 echo " Kata 3 = " . $kata[2] ."<br>";
8 echo " Kata 4 = " . $kata[3] ."<br>";
9 echo " Kata 5 = " . $kata[4] ."<br>";
10 echo " Kata 6 = " . $kata[5];
11 ?>
78
Pada contoh script di atas, tanda atau karakter pemisah yang digunakan
adalah spasi (“ “). Sehingga kalimat “Kami Sedang Belajar di Pusdiklat” dipisahkan
dengan spasi menjadi enam kata atau data.
Salin dan simpan kode di atas dengan nama file “latihan10.php”, kemudian
jalankan di browser.
Gambar 38. Penggunaan Fungsi explode
3.9. Fungsi str_replace()
Fungsi str_replace() berfungsi untuk mengganti kata, huruf, atau karakter

tertentu di dalam sebuah string dengan kata, huruf, atau karakter yang lain. Format
penulisan fungsi str_replace() adalah sebagai berikut :
str_replace("karakter awal","karakter pengganti"," string");
Untuk memudahkan pemahaman penggunaan fungsi str_replace() , salin

dan simpan kode berikut ini dengan nama file “latihan11.php”, kemudian jalankan
dengan browser untuk melihat hasilnya.
1 <?php
2 //contoh 1
3 $kalimat = "Aplikasi Web Statis";
4 echo str_replace("Statis","Dinamis",$kalimat);
5 echo "<br><br>";
6 //contoh 2
7 $kalimat2 = "Saya minum kopi dan makan nasi";
8 $lama = array("kopi", "nasi");
79
9 $baru = array("susu", "roti");

10 echo str_replace($lama, $baru,$kalimat2);
11 echo "<br><br>";
12 //contoh 3
13 $kalimat3 = "Sa@ya Seda#ng Belajar? Web
14 Dina*mis";
15 $karakter = array("@", "#", "?", "*");
16 echo str_replace($karakter, "", $kalimat3);
17 ?>
Gambar 39. Penggunaan Fungsi str_replace
3.10. Session
Di dalam PHP, session merupakan data spesifik yang merujuk kepada user
tertentu yang disimpan dalam server yang dapat digunakan secara global di server
tersebut. Contoh penggunaan session adalah ketika user telah login di halaman
atau aplikasi tertentu, maka ketika membuka halaman lain, PHP akan mengingat
bahwa user tersebut telah login sehingga user yang bersangkutan dapat
mengakses halaman atau menu sesuai dengan hak yang diberikan halaman atau
aplikasi.
Ketik dan simpan contoh kode penggunaan session berikut dengan nama
file “latihan12.php”, kemudian jalankan melalui browser.
1 <?php
2 session_start();
3 $_SESSION['user'] = 'Rifki';
4 $_SESSION['role'] = 'admin';
5
6 echo "$user";
80
7 echo "<br>";
8 echo "$role";
9 ?>
Gambar 40. Penggunaan Session
3.11. Fungsi Include Dan Require
Fungsi include() dan require() adalah suatu fungsi di dalam

pemrograman PHP untuk menyisipkan sebuah file PHP kedalam file PHP yang
lain. Dengan kedua fungsi akan sangat membantu pembuatan program karena
tidak memerlukan penulisan kode program secara berulang-ulang, melainkan
cukup menyisipkan file PHP tersebut ke dalam file PHP lain.
Cara penulisan dan penggunaan fungsi include dan require adalah sebagai
berikut :
1 <?php
2 include "latihan11.php";
3 require "latihan12.php";
4 ?>
Simpan kode di atas dengan nama file “latihan13.php”, kemudian jalankan

dengan browser.
Hasil yang muncul pada browser adalah isi dari file “latihan11.php” dan
“latihan12.php” seperti gambar berikut :
81
Gambar 41. Penggunaan Fungsi Include
Penulisan kode di atas untuk kondisi folder lokasi kedua file tersebut dan
file yang menggabungkanya di simpan di dalam folder yang sama. Jika lokasi file
berbeda, maka untuk penulisannya dilengkapi dengan lokasi folder secara lengkap
dengan format seperti berikut :
1 <?php
2 include "nama_folder/latihan01.php";
3 require "nama_folder/latihan02.php";
4 ?>
Meski sama-sama berfungsi untuk menyispkan file PHP ke dalam file PHP
lain, namun fungsi include() dan require()memiliki perbedaan. Jika file yang
di sisipkan dengan menggunakan fungsi include() tidak tersedia atau salah
dalam peletakan lokasi folder maka file akan tetap di jalankan dengan
mengabaikan error. Tetapi jika menggunakan fungsi require() dan file yang di
sisipkan tidak tersedia atau salah dalam peletakan lokasi folder, maka isi dari file
tidak akan di lanjutkan dan akan di hentikan penyisipannya pada letak error.
Jenis lain dari fungsi include() dan require()adalah
include_once() atau require_once(). Dengan menggunaan dua fungsi
terakhir maka proses penyisipan akan dipanggil satu kali saja meskipun digunakan
beberapa kali. Sementara jika penyisipan menggunakan include() dan
82
require()sebanyak bebeberapa kali pada sebuah file maka akan menyebabkan

error berupa atau deklarasi ganda (redeclare).
3.12. Latihan
Jawablah pertanyaan berikut dengan benar!

1. Buatlah script untuk menggabungkan variabel string berkut ini sehingga
menjadi sebuah kalimat sempurna.
$a = "Belajar";
$b = "PHP";
$c = "itu";
$d = "menyenangkan";
2. Buatlah script untuk menghasilkan tampilan seperti di bawah ini!
10
20
30
40
50
60
70
80
90
100
3. Buatlah script untuk menghasilkan tampilan seperti di bawah ini!

12345678910
123456789
12345678
1234567
123456
12345
1234
123
12
1
3.13. Rangkuman
a. PHP adalah sebuah bahasa pemrograman script server-side yang didesain

untuk pengembangan web dinamis dan paling populer penggunaannya.
b. Untuk menjalankan file PHP diperlukan aplikasi web server.
c. File PHP berakhiran .php yang penamaannya tidak boleh menggunakan spasi
jika lebih dari satu kata.
83
d. File PHP dapat dijalankan jika disimpan di dalam folder htdocs.

e. Variabel di dalam PHP diawali dengan karakter $ dan memiliki case sensitivity.
f. Beberapa operator yang berlaku di dalam PHP adalah Operator String,
Operator Aritmatika, Operator Logika, dan Operator Perbandingan.
g. Fungsi include() dan require() adalah untuk menyisipkan sebuah file PHP ke
dalam file PHP yang lain sehingga mengurangi pengurangan penulisan kode
PHP di dalam halaman web.
1. Pernyataan yang tidak tepat terkait penulisan file PHP adalah ...
a. penulisan fungsi atau keyword tidak case sensitive
b. spasi dan tab diabaikan saat file PHP dijalankan di browser
c. penulisan variabel tidak case sensitive
d. karakter "//" dapat digunakan untuk menuliskan komentar
2. Penulisan komentar di dalam fie PHP yang diawali dengan menggunakan
karakter "/*" dan ditutup dengan "*/" disebut dengan metode ...
a. Unix Shell
b. C++
c. C
d. Standard PHP
3. Sementara penulisan komentar di dalam fie PHP yang diawali dengan
menggunakan karakter "#" disebut dengan metode ...
a. Unix Shell
b. C++
c. C
d. Standard PHP
4. Penulisan variabel di dalam PHP ditandai dengan karakter $. Dalam
penamaan variabel, maka karakter pertama setelah karakter $ tidak boleh
berupa ...
a. huruf kapital
b. huruf kecil
c. angka
d. karakter "_"
5. Berikut adalah contoh penulisan variabel yang benar, kecuali ...
84
a. $a
b. $A
c. $1
d. $_a
6. Untuk menggbungkan dua atau lebih variabel string digunakan karakter ...
a. titik (.)
b. titik koma (;)
c. koma (,)
d. petik (“”)
7. Fungsi date yang akan menampilkan format tanggal 01 June 2018 adalah ...
a. $tanggal=date("d F Y");
b. $tanggal=date("d m Y");
c. $tanggal=date("d M y");
d. $tanggal=date("d m y");
8. Dalam Operator Perbandingan, tanda “===” memiliki fungsi untuk ....
a. menghasilkan nilai TRUE jika dua veriabel memiliki nilai yang sama
b. menghasilkan nilai TRUE jika dua veriabel memiliki nilai dan tipe yang
sama
c. menghasilkan nilai TRUE jika dua veriabel memiliki tipe yang berbeda
d. menghasilkan nilai TRUE jika dua veriabel memiliki nilai dan tipe yang
berbeda
9. Fungsi di dalam PHP untuk memisahkan string berdasarkan karakter tertentu
adalah ...
a. fungsi explode
b. fungsi include
c. fungsi replace
d. fungsi join
10. Fungsi di dalam PHP yang dapat menggabungkan isi dari dua buah file ke
dalam satu tampilan adalah ...
a. fungsi explode
b. fungsi include
c. fungsi replace
d. fungsi join
85

Jumlah Soal

• 80 – 89 % = Baik
• 70 – 79 % = Cukup
• < 70 % = Kurang
86
KEGIATAN
BELAJAR
PENGGUNAAN DATABASE
MYSQL 4

a. menjelaskan pengertian MySQL dengan baik
b. menggunakan relational database dengan tepat
c. menggunakan tipe data dengan tepat
d. membuat database dan tabel dengan tepat
e. melakukan input dan import data ke dalam tabel dengan tepat
f. melakukan pencarian dan manipulasi data dengan tepat
4.2. Pengenalan MySQL
MySQL adalah salah satu aplikasi database yang menggunakan prinsip

relasional (Relational Database Management System) yang disingkat dengan
RDBMS. RDBMS adalah aplikasi yang menggunakan relational database model
sebagai dasarnya
Penggunaan MySQL sebagai database dalam pengembangan web
dinamis sangatlah populer dibandingkan dengan database lain seperti Oracle dan
Microsoft SQL Server. Penyebabnya karena MySQL bersifat gratis, user friendly,
dan memiliki kemampuan yang tak kalah dengan jenis database berbayar dari sisi
kelengkapan dan kecepatan..
4.3. Relational Database
Database dapat diartikan sebagai kumpulan data yang terorganisir.

Pengertian tersebut tidak memandang apakah kumpulan data tersebut tersimpan
dalam bentuk kertas atau file komputer. Namun demikian, biasanya istilah
87
database langsung merujuk kepada kumpulan data yang disimpan secara

elektronik dalam komputer.
Sementara Database Model adalah teori dasar seputar bagaimana
kumpulan data akan disimpan, disusun, dan dimanipulasi dalam sebuah sistem
database. Dalam perkembangannya muncul beberapa database model seperti
Flat model, Hierarchical model, Network model, hingga Relational model.
Flat model adalah istilah lain dari tabel sederhana seperti di microsoft
excel, tanpa aturan dan cara penulisan tertentu. Dalam Hierarchical model, data
disusun seperti pohon terbalik, sehingga data terorganisasi dari atas ke bawah.
Network database model merupakan pengembangan dari Hierarchical model.
Sementara Relational model menyimpan data dalam relasi atau tabel yang
terdiri dari field dan record. Setiap record di dalam tabel diidentifikasi dengan
sebuah field unik.
Relational Database Model inilah yang paling populer dan banyak
diimplementasi dalam berbagai aplikasi database saat ini, termasuk MySQL.
Aplikasi database untuk relational model, dikenal juga dengan Relational
Database Management Systems (RDBMS).
Sebagaimana telah disebutkan bahwa dalam relational database model,
terdapat relasi atau lebih dikenal dengan sebutan tabel yang memiliki kolom atau
attribute dan baris atau tuple.
Setiap baris dari dalam tabel setidaknya harus memiliki sebuah kolom
yang unik. Tidak boleh sama dengan baris lainnya. Contohnya, di dalam database
pegawai Direktorat Jenderal Pajak, Nomor Induk Pegawai (NIP) dapat dijadikan
sebagai Candidate Key (Kunci Kandidat). Candidate Key adalah satu atau
beberapa kolom dalam tabel yang bisa mengidentifikasi tiap baris dari tabel
tersebut.
Dalam sebuah tabel, akan terdapat beberapa candidate key, namun hanya
ada 1 Primary key (kunci utama). Primary key adalah salah satu candidate key
yang dijadikan sebagai kolom unik untuk identifikasi baris dalam tabel. Kolom ini
tidak boleh berulang dan tidak boleh kosong (null).
Dalam sebuah database terdapat beberapa tabel. Tabel-tabel ini dapat
dihubungkan satu dengan yang lainnya dengan kolom yang merupakan bagian
dari tabel lain yang disebut Foreign Key (Kunci Tamu). Foreign Key adalah
88
Primary key pada sebuah satu tabel dan menjadi salah satu kolom pada tabel yang
lain.
Gambar 42. Relational Database Model
4.4. Tipe Data
Seperti sudah dijelaskan sebelumnya, setiap tabel terdiri dari field. Setiap
field berisi data dengan tipe yang bisa berbeda-beda. Di dalam MySQL tipe data
dikelompokkan menjadi 4 tipe, yaitu :
a. Tipe Data Numeric
Tipe data numeric yaitu tipe data yang digunakan untuk menyimpan data
berupa angka.
Tipe data dalam kelompok ini antara lain :
1) TINYINT, digunakan untuk menyimpan data berupa bilangan bulat positif dan
negatif dengan jangkauan antara -128 s/d 127. Tipe data ini mempunyai ukuran
1 byte (8 bit)
2) SMALLINT, digunakan untuk menyimpan data berupa bilangan bulat positif dan
negatif dengan jangkauan antara -32.768 s/d 32.767. Tipe data ini mempunyai
ukuran 2 byte (16 bit)
3) MEDIUMINT, digunakan untuk menyimpan data berupa bilangan bulat positif
dan negatif dengan jangkauan antara -8.388.608 s/d 8.388.607. Tipe data ini
mempunyai ukuran 3 byte (24 bit).
4) INT, digunakan untuk menyimpan data berupa bilangan bulat positif dan negatif
dengan jangkauan antara -2.147.483.648 s/d 2.147.483.647. Tipe data ini
mempunyai ukuruan 4 byte (32 bit).
89
5) BIGINT, digunakan untuk menyimpan data berupa bilangan bulat positif dan
negatif dengan jangkauan antara -9.223.372.036.854.775.808 s/d
9.223.372.036.854.775.807. Tipe data ini mempunyai ukuran 8 byte (64 bit).
6) DECIMAL, digunakan untuk menyimpan data berupa bilangan desimal dengan
jumlah angka di belakang koma sudah ditetapkan di awal dan bersifat tetap.
Tipe data ini mempunyai ukuran 8 byte (64 bit).
7) FLOAT, digunakan untuk menyimpan data berupa bilangan desimal dengan
jumlah angka di belakang koma sudah berubah-ubah (dinamis) dengan tingkat
ketelitian single-precision. Tipe data ini mempunyai ukuran 4 byte (32 bit).
8) DOUBLE, digunakan untuk menyimpan data berupa bilangan desimal dengan
jumlah angka di belakang koma sudah berubah-ubah (dinamis) dengan tingkat
ketelitian double-precision. Tipe data ini mempunyai ukuran 8 byte (64 bit).
b. Tipe Data String

Tipe data string yaitu tipe data yang digunakan untuk menyimpan data
berupa teks.
1) CHAR, digunakan untuk menyimpan data berupa teks dengan ukuran tetap dan
jumlah maksimal 255 karakter.
2) VARCHAR, digunakan untuk menyimpan data berupa teks dengan ukuran
dinamis dan jumlah maksimal 65.535 karakter.
3) TINYTEXT, digunakan untuk meyimpan data berupa teks dengan ukuran
maksimal 255 karakter karakter.
4) TEXT, digunakan untuk meyimpan data berupa teks dengan ukuran maksimal
65.535 karakter.
5) MEDIUMTEXT, digunakan untuk meyimpan data berupa teks dengan ukuran
maksimal 16.777.215 karakter.
6) LONGTEXT, digunakan untuk meyimpan data berupa teks dengan ukuran
maksimal 4.294.967.295 karakter.
7) BINARY, digunakan untuk menyimpan data berupa teks dengan ukuran tetap
dan jumlah maksimal 255 karakter. Perbedaannya dengan tipe CHAR adalah
dari karakteristik penyimpanan di MySQL yang bukan berdasarkan karakter tapi
berdasarkan byte.
90
8) VARBINARY, digunakan untuk menyimpan data berupa teks dengan ukuran

dinamis dan jumlah maksimal 65.535 karakter. Perbedaannya dengan tipe
VARCHAR adalah dari karakteristik penyimpanan di MySQL yang bukan
berdasarkan karakter tapi berdasarkan byte.
c. Tipe Data Date dan Time

Tipe data date dan time yaitu tipe data yang digunakan untuk menyimpan
data tanggal dan waktu.
1) DATE. digunakan untuk meyimpan data tanggal dalam format YYYY-MM-DD.
2) DATETIME, digunakan untuk menyimpan data tanggal dan waktu dalam format
YYYY-MM-DD HH:MM:SS.
3) TIME, digunakan untuk menyimpan data waktu dalam format HH:MM:SS.
4) YEAR, digunakan untuk menyimpan data tanggal dalam format YYYY.
d. Tipe Data BLOB

Tipe data BLOB adalah tipe data versi binary dari TEXT. Karena sifatnya
yang tersimpan secara binary, tipe data BLOB dapat digunakan untuk menyimpan
data multimedia, seperti gambar dan musik.
1) TINYBLOB, digunakan untuk menyimpan data multimedia dengan ukuran
maksimal 255 byte.
2) BLOB, digunakan untuk menyimpan data multimedia dengan ukuran maksimal
64 KB.
3) MEDIUMBLOB, digunakan untuk menyimpan data multimedia dengan ukuran
maksimal 16 MB.
4) LONGBLOB, digunakan untuk menyimpan data multimedia dengan ukuran
maksimal 4 GB.
4.5. Membuat Database dan Tabel
Untuk membuat sebuah database dan tabel, langkah pertama adalah

terhubung dahulu dengan MySQL.
91
Gambar 43. Halaman phpmyadmin
Pada kegiatan sebelumnya, telah dibahas bagaimana mengaktifkan

Aplikasi Web Server dan Database MySQL. Untuk terhubung dengan MySQL,
aktifkan browser dan ketik “localhost/phpmyadmin” pada kolom alamat, lalu tekan
tombol Enter untuk membuka halaman seperti gambar di atas.
Untuk membuat sebuah database, klik tab Database pada gambar di atas,
sehingga muncul tampilan seperti di bawah ini :
92
Gambar 44. Membuat Database
Pada halaman dengan tampilan seperti gambar di atas, ketik nama

database yang akan dibuat, dalam hal nama database yang akan dibuat adalah
“web_dinamis”. Selanjutnya klik tombol “Create”.
Halaman phpmyadmin akan memunculkan notifikasi bahwa database
berhasil dibuat untuk kemudian menampilkan halaman pembuatan tabel di dalam
database “web_dinamis” seperti gambar berikut ini :
93
Gambar 45. Membuat Tabel (1)
Pembuatan tabel diawali dengan menentukan nama tabel dan jumlah

kolom di dalam tabel. Sebagai contoh, tabel yang akan dibuat adalah tabel
pegawai dengan 5 kolom.
Pada tampilan seperti gambar di atas, ketik “pegawai” pada kolom Name
dan angka 5 pada kolom Number of columns. Kemudian klik tombol “Go” untuk ke
tahapan berikutnya, yaitu penamaan dan pajang setiap kolom serta atribut lainnya
yang diperlukan.
Gambar 46. Membuat Tabel (2)
94
Pada tampilan seperti gambar di atas, isikan data sesuai dengan informasi
pada tabel berikut, lalu klik tombol “Save”.
Tabel 4. Struktur Tabel Pegawai
Nama Kolom Type Panjang Index

nip CHAR 9 PRIMARY
nama VARCHAR 30 -
kode_jabatan CHAR 1 -
kode_seksi CHAR 2 -
Selanjutnya, phpmyadmin akan memberikan notifikasi bahwa pembuatan

tabel berhasil dan menampilkan halaman tabel pegawai seperti gambar di bawah
ini :
Gambar 47. Tabel Pegawai
Beberapa fitur yang perlu diperhatikan pada tampilan setiap tabel seperti
gambar di atas adalah :
a. Browse, digunakan untuk melihat isi tabel.
b. Stucture, digunakan untuk melihat struktur tabel seperti gambar di atas.
c. SQL, digunakan untuk menjalankan sebuah query untuk mencari data tertentu
di dalam tabel.
d. Search, digunakan untuk melakukan pencarian data tertentu di dalam tabel.
e. Insert, digunakan untuk menginput data ke dalam tabel.
95
f. Export, digunakan untuk mengekspr data dari tabel.

g. Import, digunakan untuk mengimport data ke dalam tabel.
h. Change, digunakan untuk mengubah nama dan panjang kolom.
i. Drop, digunakan untuk menghapus kolom.
j. Primary, digunakan untuk menentukan kolom yang akan menjadi primary key.
k. Unique, digunakan untuk menentukan kolom yang akan menjadi unique key.
l. Index, digunakan untuk menentukan kolom yang akan menjadi index tabel.
4.6. Input dan Import Data ke Dalam Tabel
Untuk menginput data ke dalam tabel, dalam hal ini adalah tabel pegawai,
klik tab insert pada tampilan halaman seperti pada Gambar 46 di halaman 100.
Tampilan halam insert data ke dalam tabel pegawai adalah seperti gambar di
bawah ini :
Gambar 48. Insert Data
Pada kolom isian seperti gambar di atas, isikan data seperti tabel berikut
ini :
96
Tabel 5. Data Isian Pada Tabel Pegawai
NIP Nama Kode Kode Seksi

Jabatan
060000001 Ahmad 1 01
060000002 Budi 1 02
060000003 Candra 3 01
060000004 Darmawan 3 03
060010001 Endang 1 03
060010002 Fandi 2 03
060010003 Gunawan 1 04
060010004 Haris 4 00
Setelah mengisi data, klik tombol “Go” untuk menyimpan data ke dalam
tabel pegawai.
Jumlah record data yang bisa diinput dalam setiap proses insert dapat
ditentukan dengan mengetik jumlah data pada kolom “Continue insertion with”.
Setelah semua data berhasil diinput, klik tab Browse untuk menampilkan
data tabel pegawai. Tampilan halaman yang akan muncul adalah seperti gambar
di bawah ini :
Gambar 49. Menampilkan Data Tabel Pegawai
Input data ke dalam tabel juga dapat dilakukan dengan cara import data
dari file bertipe .sql, .csv, dan .xml.
97
Berikut adalah langkah-langkah untuk melakukan import data dari file CSV
ke dalam tabel pegawai.
a. Siapkan file CSV berisi data pegawai dengan format sesuai dengan struktur
tabel pegawai
b. Klik tab Import pada tampilan seperti gambar di atas.
c. Cari file CSV yang sudah dibuat sebelumnya.
d. Sesuaikan pemisah antar kolom dari file CSV.
e. Klik tombol “Go”.
Gambar 50. Import Data ke Dalam Tabel
4.7. Melihat dan Memanipulasi Data
Setelah tabel pegawai terisi dengan data pada tabel 5, maka data di
tersebut dapat dilihat dan dimanipulasi atau diubah.
Untuk melihat keseluruhan data dalam tabel pegawai, klik tab Browse
pada tampilan seperti Gambar 47 di halaman 101. Selanjutnya akan muncul
tampilan seperti pada Gambar 49 di halaman 103.
98
Sedangkan untuk melihat data dengan kriteria tertentu, dapat dilakukan

dengan memanfaatkan fitur SQL yang tersedia di phpmyadmin.
SQL (Structured Query Language) adalah bahasa pemrograman khusus
yang digunakan untuk memanajemen data di dalam RDBMS. SQL biasanya
berupa perintah sederhana yang berisi instruksi-instruksi untuk memanipulasi
data. Perintah SQL ini sering juga disingkat dengan sebutan query.
Perintah atau instruksi SQL dapat dikelompokkan berdasarkan jenis dan
fungsinya, yaitu :
a. Data Definition Language (DDL) adalah jenis instruksi SQL yang berkaitan
dengan pembuatan struktur tabel maupun database seperti CREATE, DROP,
ALTER, dan RENAME.
b. Data Manipulation Language (DML) adalah jenis instruksi SQL yang berkaitan
dengan data yang ada dalam tabel seperti menginput, menghapus, mengubah,
serta membaca data yang tersimpan di dalam database. Contoh perintah jenis
ini adalah SELECT, INSERT, DELETE, dan UPDATE.
c. Data Control Language (DCL) adalah jenis instruksi SQL yang berkaitan
dengan manajemen hak akses dan pengguna (user) yang dapat mengakses
database maupun tabel seperti GRANT dan REVOKE.
Beberapa jenis perintah atau instruksi di atas secara tidak langsung sudah
dilakukan pada kegiatan sebelumnya dengan memanfaatkan fitur-fitur yang
terdapat di dalam phpmyadmin. Instruksi atau query yang dibahas selanjutnya
adalah jenis DML.
Untuk menjalankan query, klik tab SQL pada tampilan seperti Gambar 49
pada halaman 102. Ketik query yang akan dijalankan pada kolom yang tersedia
lalu klik tombol “Go”.
99
Gambar 51. Query Data
Beberapa contoh penulisan query untuk menampilkan, menghapus, dan

mengubah data pada tabel pegawai adalah sebagai berikut:
a. Untuk menampilkan semua kolom :
select * from pegawai;
b. Untuk menampilkan kolom nip dan nama :
select nip, nama from pegawai;
c. Untuk menampilkan semua kolom dengan kode jabatan 1 :
select * from pegawai where kode_jabatan='1';
d. Untuk menampilkan semua kolom dengan urut nama :
select * from pegawai order by nama;
e. Untuk menghitung jumlah record :
select count(*) from pegawai;
f. Untuk menampilkan kode seksi dengan tidak menampikan kode seksi yang
sama :
select distinct(kode_seksi) from pegawai;
g. Untuk menampilkan pegawai yang memiliki 6 digit pertama ‘060010’ :
select * from pegawai where nip like '060010%';
h. Untuk menghapus data pegawai yang memiliki NIP 060000001 ;
delete from pegawai where nomor='3';
i. Untuk mengubah data nama pegawai yang memiliki NIP 060000002 :
100
update pegawai set nama='Budi Kurniawan' where

nomor=’12’;
4.8. Latihan
Sebelum menyelesaikan latihan di bawah ini, buatlah database baru dengan nama
web_dinamis_data, kemudian lakukan import data melalui phpmyadmin dengan
menggunakan file data set yang telah diunduh sebelumnya di alamat
https://goo.gl/jhmyC1 dengan urutan file sebagai berikut :
- Dataset01.sql
- Dataset02.sql
- Dataset03.sql
1. Buatlah query untuk menampilkan data seperti tabel di bawah ini!
Nama KLU Jumlah WP
nama_klu_1 ...
nama_klu_2 ...
nama_klu_... ...
nama_klu_... ...
nama_klu_... ...

Nama AR Tahun Penerimaan Jumlah Penerimaan
... 2018 ........................
... 2018 ........................
... 2018 ........................
... 2018 ........................

Tahun Target Jumlah Persentase
Nama AR Penerimaa Penerimaan Penerimaan Penerimaan
n
... 2018 ................. .............. ..............
... 2018 ................. .............. ..............
... 2018 ................. .............. ..............
... 2018 ................. .............. ..............
4.9. Rangkuman
101
a. MySQL adalah salah satu aplikasi database yang menggunakan prinsip

relasional (Relational Database Management System) yang disingkat dengan
RDBMS.
b. Di dalam sebuah database dapat terdiri dari beberapa tabel dan di dalam
sebuah tabel dapat terdiri dari beberapa kolom.
c. Setiap tabel harus memiliki primary key, yaitu sebuah kolom yang dijadikan
sebagai kolom unik untuk identifikasi baris dalam tabel yang nilainya tidak boleh
berulang dan tidak boleh kosong.
d. Beberapa kelompok tipe data di dalam MySQL adalah Numeric, String, Date,
Time, dan BLOB.
e. SQL (Structured Query Language) adalah bahasa pemrograman khusus yang
digunakan untuk memanajemen data di dalam RDBMS. SQL biasanya berupa
perintah sederhana yang berisi instruksi-instruksi untuk memanipulasi data
yang dikenal dengan sebutan query. Query dapat dikelompokkan menjadi Data
Definition Language (DDL), Data Manipulation Language (DML), dan Data
Control Language (DCL).
1. Sebuah database dapat diartikan sebagai ...

a. kumpulan informasi yang terorganisir
b. kumpulan data yang teratur
c. kumpulan informasi yang disimpan secara elektronik dalam komputer
d. kumpulan data yang disimpan secara elektronik dalam komputer
2. MySql merupakan salah satu bentuk model database ...
a. flat model
b. hierarchical model
c. network model
d. relational model
3. Sebuah tabel harus memiliki primary key. Ciri dari primary key adalah ...
a. bersifat umum
b. bersifat unik
c. bersifat statis
d. bersifat temporer
102
4. Kolom yang menjadi penghubung antara satu tabel dengan tabel lainnya
disebut ...
a. primary key
b. foreign key
c. candidate key
d. unique key
5. Yang tidak termasuk perintah dasar dalam Data Definition Language (DDL)
adalah …
a. create
b. alter
c. select
d. rename
6. Yang bukan merupakan perintah dasar dalam Data Manipulation Language
(DML) adalah ….
a. delete
b. insert
c. update
d. drop
7. Yang termasuk contoh Data Control Language (DCL) adalah ...
a. create
b. drop
c. rename
d. grant
8. Perintah yang digunakan untuk menampilkan nip dan nama dari tabel pegawai
adalah ....
a. select * from pegawai
b. select nip and nama from pegawai
c. select nip, nama from pegawai
d. select from pegawai where nip and nama
9. Perintah yang digunakan untuk menampilkan data pegawai yang mengandung
kata “ahmad” dari tabel pegawai adalah ....
a. select * from pegawai where nama='ahmad'
103
b. select * from pegawai where nama is 'ahmad'

c. select * from pegawai where nama like 'ahmad'
d. select * from pegawai where nama like '%ahmad%'
10. Perintah yang digunakan untuk mengubah data pegawai yang bernama “Andhi”
menjadi “Andi” pada tabel pegawai adalah ....
a. update pegawai set nama='Andhi' where
nama='Andi';
b. update pegawai set nama='Andhi' where
nama like 'Andi';
c. update pegawai set nama='Andi' where
nama like 'Andhi';
d. update pegawai set nama='Andi' where
nama='Andi';

Jumlah Soal

• 80 – 89 % = Baik
• 70 – 79 % = Cukup
• < 70 % = Kurang
104
KEGIATAN
PEMBUATAN WEB DINAMIS BELAJAR
DENGAN PHP DAN MYSQL

5

a. membuat file koneksi PHP dengan MySQL dengan tepat
b. membuat halaman untuk menampilkan data dengan tepat
c. membuat halaman pencarian data dengan tepat
d. membuat halaman perekaman data dengan tepat
e. membuat halaman perubahan dan penghapusan data dengan tepat
f. membuat halaman pengunggahan file dengan tepat
5.2. Koneksi PHP dan MySQL
PHP dan MySQL adalah kombinasi bahasa pemograman dan database

yang sangat populer. Langkah awal untuk mengkombinasikan keduanya adalah
membuat koneksi PHP dengan database MySQL. Untuk membuat koneksi
tersebut PHP menyediakan fungsi mysql_connect().
Fungsi ini diibaratkan sebagai cara agar bisa login ke MySQL Server.
format dasar penulisan fungsi mysql_connect() adalah sebagai berikut :
1 $koneksi = mysql_connect(’mysql_host’,
2 'mysql_user', 'mysql_password');
a. $koneksi merupakan variabel yang akan menampung hasil dari fungsi

mysql_connect(). Nama variabel ini bisa diganti sesuai keinginan. Jika
koneksi antara PHP dengan MySQL berhasil terhubung, maka $koneksi akan
berisi nilai yang berfungsi sebagai penghubung dengan MySQL yang akan
dibutuhkan sepanjang pembuatan program PHP-MySQL.
b. mysql_host adalah argumen pertama dari fungsi mysql_connect(). Nilai
mysql_host diisi dengan alamat atau IP address komputer di mana MySQL
Server berjalan. Jika MySQL dijalankan pada komputer yang sama dengan
105
lokasi Web Server Apache berjalan, maka alamat ini bisa diisi dengan
localhost atau 127.0.0.1. Jika MySQL dan Web Server Apache berjalan di
lokasi atau komputer yang berbeda, maka alamat tersebut ditulis dengan IP
komputer di mana MySQL dijalankan.
c. mysql_user adalah nama user MySQL yang digunakan untuk login, seperti
root, admin, atau lainnya, tergantung user MySQL yang telah terdaftar di server
yang akan digunakan.
d. mysql_password, diisi dengan password dari user yang digunakan.
Berikut adalah kode PHP untuk membuat koneksi dengan MySQL dengan
database web_dinamis. Salin dan simpan dengan nama file “koneksi.php” di
folder D:/XAMPP/htdocs, kemudian jalankan melalui browser untuk melihat
hasilnya.
Script koneksi.php
1 <?php
2 $koneksi= mysql_connect('localhost', 'root', '');
3 $db=mysql_select_db('web_dinamis');
4 //cek apakah koneksi dengan MySQL berhasil
5 if ($koneksi)
6 {
7 //koneksi berhasil
8 echo "Koneksi dengan MySQL berhasil";
9 }
10 else
11 {
12 //koneksi gagal
13 echo "Koneksi dengan MySQL gagal";
14 }
15 ?>
Pada kode di atas terdapat penambahan fungsi mysql_select_db yang

digunakan untuk memilih database yang akan digunakan. Nama database yang
digunakan dalam penulisan kode di atas dan yang akan digunakan seterusnya
adalah web_dinamis.
106
Gambar 52. Koneksi PHP - MySQL
5.3. Menampilkan Data
Perintah select adalah query yang paling sering gunakan. Beberapa

contoh penggunaan query untuk menampilkan data dari sebuah tabel telah
dibahas pada kegiatan belajar sebelumnya. Query tersebut akan digunakan juga
untuk menampilkan data MySQL dengan PHP.
Untuk menampilkan data MySQL, PHP menyediakan fungsi
mysql_query(). Fungsi ini akan dijalankan setelah koneksi berhasil dilakukan
dengan fungsi mysql_connect(). Selanjutnya, hasil dari fungsi
mysql_query() yang didapat akan ditampilkan dengan fungsi
mysql_fetch_array().
Fungsi mysql_fetch_array() digunakan untuk menampilkan data
secara baris per baris dari sebuah tabel pada setiap pemanggilan. Sehingga untuk
dapat menampilkan seluruh isi tabel, fungsi mysql_fetch_array() harus
dipanggil secara berulang.
Pada kegiatan belajar sebelumnya sudah dibahas tentang struktur
perulangan yang dapat digunakan untuk menampilkan data. Struktur perulangan
yang akan digunakan pada pembahasan kali ini adalah struktur perulangan
while.
Berikut ini adalah kode PHP untuk menampilkan data pegawai yang
bersumber dari tabel pegawai yang digabungkan dengan tag HTML pembuatan
tabel yang sudah dipelajari pada kegiatan belajar sebelumnya. Ketik kode berikut
dan simpan dengan nama file “pegawai_tampil.php” di folder D:/XAMPP/htdocs,
kemudian jalankan melalui browser untuk melihat hasilnya.
107
Script pegawai_tampil.php
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Menampilkan Data Pegawai</title>
7 </head>
8 <body>
9 <h3>Daftar Pegawai</h3>
10 <table class=table1>
11 <tr>
12 <th>Nama Pegawai</th>
13 <th>N I P</th>
14 <th>Jabatan</th>
15 <th>Seksi</th>
16 </tr>
17 <?php
18 $koneksi=mysql_connect('localhost','root','');
20 $query="select * from pegawai";
21 $jalankan_query=mysql_query($query) or
22 die(mysql_error());
23 if(mysql_num_rows($jalankan_query) == 0)
24 {
25 echo "<tr>";
26 echo "<td class='text' colspan=4
27 align='center'><b>Data tidak ditemukan</td>";
28 echo "</tr>";
29 }
30 while ($row=mysql_fetch_array($jalankan_query))
31 {
32 echo "<tr>
33 <td>$row[nip]</td>
34 <td>$row[nama]</td>
35 <td>$row[kode_jabatan]</td>
36 <td>$row[kode_seksi]</td>
37 </tr>";
38 }
39 echo "</table>";
40 ?>
41 </body>
42 </html>
Penjelasan mengenai penulisan kode di atas adalah sebagai berikut :

a. Pada kode di atas terdapat penambahan kode untuk memanggil file
“kode_css.css” yang telah dibuat sebelumnya dengan menggunakan metode
External Style Sheet.
108
b. $query adalah variabel yang berisi pertinta query yang akan dijalankan.
c. $jalankan_query adalah variabel yang akan menampung hasil dari fungsi
mysql_query(). Jika fungsi mysql_query() berhasil dijalankan, variabel
$query akan berisi data hasil query. Namun jika gagal, variabel ini akan bernilai
FALSE. Penamaan variabel ini tidak harus $query, bisa menggunakan nama
lain dengan bebas.
d. mysql_num_rows digunakan untuk mendapatkan jumlah baris data dari
mysql_query(). Jika fungsi mysql_query() tidak menemukan data.
Informasi pada halaman web yang ditampilkan berupa kalimat “Data tidak
ditemukan”.
e. mysql_fetch_array berfungsi untuk menampilkan seluruh data yang
ditemukan ketika fungsi mysql_query()berhasil dijalankan.
Setelah dijalankan dengan browser maka akan muncul tampilan seperti

gambar berikut ini :
Gambar 53. Menampilkan Data Pegawai (1)
Tampilan data di atas belum memunculkan nama jabatan dan nama seksi
dari setiap pegawai karena kedua data tersebut berada di tabel lain, yaitu tabel
jabatan dan seksi. Untuk menampilkan keseluruhan data dengan sempurna,
maka query yang dijalankan harus mengambil data dari ketiga tabel tersebut.
109
Ketik kode berikut dan simpan dengan nama file “pegawai_tampil2.php” di

folder D:/XAMPP/htdocs.
Script pegawai_tampil2.php
1 <!DOCTYPE html>
2 <html>
3 <head>
7 </head>
8 <body>
11 <tr>
12 <th>Nomor</th>
14 <th>N I P</th>
15 <th>Jabatan</th>
16 <th>Seksi</th>
17 </tr>
18 <?php
19 $nomor=0;
22 $query="select nama, nip, nama_jabatan, nama_seksi
23 FROM pegawai a, jabatan b, seksi c
24 where a.kode_jabatan=b.kode_jabatan
25 and a.kode_seksi=c.kode_seksi order by nama";
29 {
30 echo "<tr>";
32 align='center'><b>Data tidak
33 ditemukan</td>";
34 echo "</tr>";
35 }
37 {
38 $nomor++;
39 echo "<tr>
40 <td>$nomor</td>
43 <td>$row[nama_jabatan]</td>
44 <td>$row[nama_seksi]</td>
45 </tr>";
46 }
110
47 echo "</table>";
48 ?>
49 </body>
50 </html>
Berikut adalah beberapa penjelasan tambahan mengenai kode di atas :

a. $nomor adalah nama variabel yang digunakan untuk memunculkan nomor urut
pada tampilan data pegawai. Nilai awal dari $nomor adalah 0. Setelah
penulisan fungsi while terdapat penulisan $nomor++ yang berfungsi untuk
menambahkan noor urut hingga data terakhir yang muncul.
b. Query di atas mencari data dari tiga tabel. Pada penulisan nama tabel
digunakan alias dengan huruf, yaitu tabel pegawai dialiaskan dengan huruf
a, tabel jabatan dialiaskan dengan huruf b, dan tabel seksi dialiaskan
dengan huruf c. Penggunaan alias akan memudahkan penulisan query karena
pada saat penulisan kondisi (where) tidak perlu menuliskan nama tabel secara
lengkap serta untuk menghindari kesalahan penulisan query ketika terdapat
nama kolom yang sama di beberapa tabel.
Tampilan setelah dijalankan dengan browser adalah sebagai berikut :
5.4. Membuat Halaman Pencarian Data
111
Ketika data yang tersimpan di dalam database sudah banyak, maka akan
memudahkan bagi pengguna atau pengunjung web untuk menemukan data
dengan menggunakan halaman pencarian. Untuk menjalankan fungsi pencarian
data di dalam web, maka diperlukan halaman yang memuat formulir pencarian
data dan halaman yang menampilkan hasil pencarian data.
Berikut adalah kode untuk membuat halaman pencarian data.
Script pegawai_cari.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Pencarian Data Pegawai</title>
7 </head>
8 <body>
9 <h3>Pencarian Pegawai</h3>
10 <form name="carihasil" method="post"
11 action="pegawai_hasil.php">
13 <tr>
14 <td>
15 <select name="kolom" >
16 <option value="nip" selected>NIP</option>
17 <option value="nama">Nama</option>
18 <option value="nama_jabatan">Jabatan</option>
19 <option value="nama_seksi">Seksi</option>
20 </select>
21 </td>
22 <td>
23 <input type="text" name="cari" size="30">
24 <input type="submit" name="Submit"
25 value="cari">
26 </td>
27 </tr>
28 </table>
29 </form name="carihasil">
30 </table>
31 </body>
32 </html>
Berikut beberapa penjelasan mengenai kode HTML di atas :

a. Nama form di atas adalah carihasil dengan menggunakan method
post, dan file tujuan dari action adalah file dengan nama
pegawai_hasil.php.
112
b. Tag select diberi nama kolom sebagai nilai variabel pencarian berdasarkan
kriteria pencarian yang disediakan. Kriteria pencarian tersebut berdasarkan
nama kolom yang merujuk kepada nama kolom di dalam tabel-tabel yang
digunakan dalam proses pencarian data. Nama kolom tersebut merupakan nilai
value dari tag option, sehingga pengguna atau pengunjung web dapat
memilih nama kolom apa yang akan dijadikan kriteria pencarian.
c. Tag input type="text" memiliki atribut name "cari". Isian yang diinput
oleh pengunjung akan menjadi nilai dari "cari" yang akan digunakan sebagai
dasar pencarian isi dari kolom yang dipilih pada halaman hasil pencarian
(pegawai_hasil.php).
d. Tag input type=”submit” diberi nilai value “Cari” sehingga tombol
pencarian akan muncul dengan tulisan “Cari”.
Ketik kode di atas dan simpan dengan nama file “pegawai_cari.html” di

folder D:/XAMPP/htdocs, kemudian jalankan dengan browser sehingga akan
muncul tampilan seperti gambar berikut :
Gambar 55. Pencarian Pegawai
Untuk menampilkan hasil pencarian, maka perlu dibuat halaman yang

menampilkan hasil pencarian dengan kode berikut :
Script pegawai_hasil.php
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Menampilkan Hasil Pencarian Pegawai</title>
7 </head>
8 <body>
113
9 <h3>Hasil Pencarian Data Pegawai</h3>

11 <tr>
12 <th>Nomor</th>
14 <th>N I P</th>
15 <th>Jabatan</th>
16 <th>Seksi</th>
17 </tr>
18 <?php
21 $kolom=$_POST['kolom'];
22 $cari=$_POST['cari'];
23 $nomor=0;
27 and a.kode_seksi=c.kode_seksi
28 and $kolom like '%$cari%' order by nama";
32 {
33 echo "<tr>";
36 echo "</tr>";
37 }
39 {
40 $nomor++;
41 echo "<tr>
42 <td>$nomor</td>
47 </tr>";
48 }
49 echo "</table>";
50 ?>
51 </table>
52 </body>
53 </html>
Berikut beberapa penjelasan mengenai kode di atas :

a. $kolom=$_POST['kolom'] berfungsi untuk menangkap nilai variabel
$kolom yang dikirim dari halaman pencarian sebelumnya ketika pengguna
114
atau pengunjung web memilih kriteria pencarian agar dapat digunakan dalam
menajalankan query.
b. $cari=$_POST['cari'] berfungsi untuk menangkap nilai variabel $cari
yang dikirim dari halaman pencarian sebelumnya ketika pengguna atau
pengunjung web mengetik kata kunci perncarian agar dapat digunakan dalam
menajalankan query.
Ketik kode di atas dan simpan dengan nama file “pegawai_hasil.php” di
folder D:/XAMPP/htdocs.
Pada halaman pencarian data pegawai seperti tampilan Gambar 54 di
halaman 119, lakukan pencarian dengan salah satu kriteria, kemudian klik tombol
“Cari”. Jika data pegawai yang dicari ditemukan maka akan muncul tampilan
seperti gambar berikut :
Gambar 56. Hasil Pencarian Data Pegawai
5.5. Membuat Halaman Perekaman Data
Menambahkan atau menginput data ke dalam sebuah tabel dapat

dilakukan dengan menggunakan fitur insert yang disediakn di phpmyadmin
sebagaimana telah dibahas sebelumnya. Namun hal tersebut hanya dapat
digunakan oleh web administrator saja. Sementara penggunjung web tidak dapat
melakukannya. Sementara pada kenyataannya, web administrato tidak bertugas
untuk menginput data secara rutin. Input data secara rutin biasanya dilakukan oleh
pegawai yang diberikan tugas untuk melakukan kegiatan perekaman data melalui
sebuah halaman yang tersedia di web.
Dalam kegiatan perekaman data, diperlukan dua buah halaman sepertinya
halnya pembuatan halaman pencarian yang sudah dibahas sebelumnya. Halaman
115
pertama adalah untuk menampilkan formulir perekaman untuk input data dan
halaman kedua untuk menyimpan data hasil perekaman.
Berikut adalah kode untuk halaman perekaman data pegawai :
Script pegawai_rekam.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Perekaman Data Pegawai</title>
7 </head>
8 <body>
9 <h3>Perekaman Data Pegawai</h3>
10 <body>
11 <form method="post" action="pegawai_simpan.php">
13 <tr>
14 <td>N I P</td><td> : </td><td>
15 <input type="text" name="nip_pegawai"></td>
16 </tr>
17 <tr>
18 <td>Nama</td><td> : </td><td>
19 <input type="text" name="nama_pegawai"></td>
20 </tr>
21 <tr>
22 <td>Jabatan</td><td> : </td><td>
23 <input type="radio" name="kd_jabatan" value="1"
24 checked> Pelaksana
25 <input type="radio" name="kd_jabatan" value="2">
26 Fungsional
28 Kepala Seksi
30 Kepala kantor
31 </td>
32 </tr>
33 <tr>
34 <td>Seksi</td><td> : </td>
35 <td><select name="kd_seksi">
36 <option value="01">
37 Subbagian Umum dan Kepatuhan Internal</option>
38 <option value="02">Seksi Pelayanan</option>
39 <option value="03">Seksi Pemeriksaan</option>
40 <option value="04">Seksi PDI</option>
41 <option value="05">Seksi Ekstensifikasi dan
42 Penyuluhan</option>
43 <option value="06">Seksi Penagihan</option>
44 <option value="07">Seksi Pengawasan dan
116
45 Konsultasi I</option>
47 Konsultasi II</option>
49 Konsultasi III</option>
51 Konsultasi IV</option>
52 <option value="00">Kantor Pelayanan
53 Pajak</option>
54 </select>
55 </td>
56 </tr>
57 </table>
58 <input type="submit" value="Simpan">
59 </form>
60 </body>
61 </html>
Ketik kode di atas dan simpan dengan nama file “pegawai_rekam.html”,

lalu jalankan dengan browser, maka akan muncul tampilan sebagai berikut :
Gambar 57. Perekaman Data Pegawai
Untuk menyimpan hasil input data pada halaman perekaman pegawai di

atas, maka diperlukan halaman untuk menyimpan data tersebut dengan kode
seperti di bawah ini :
Script pegawai_simpan.php
1 <!DOCTYPE html>
117
2 <html>
3 <head>
4 <title>Menyimpan Data Pegawai</title>
7 </head>
8 <body>
9 <?php
12 $nip_pegawai=$_POST['nip_pegawai'];
13 $nama_pegawai=$_POST['nama_pegawai'];
14 $kd_jabatan=$_POST['kd_jabatan'];
15 $kd_seksi=$_POST['kd_seksi'];
16 //validasi isian
17 if(empty($nip_pegawai))
18 {echo "<br> - Kolom NIP Tidak Boleh Kosong.";}
19 if (!is_numeric($nip_pegawai))
20 {echo "<br> - Kolom NIP Harus Diisi Angka.";}
21 if(empty($nama_pegawai))
22 {echo "<br> - Kolom Nama Tidak Boleh Kosong.";}
23 if (is_numeric($nama_pegawai))
24 {echo "<br> - Kolom Nama Harus Diisi Huruf.";}
25 if(empty($kd_seksi))
26 {echo "<br> - Nama Seksi Harus Dipilih.";}
27 if(!empty($nip_pegawai) && is_numeric($nip_pegawai)
28 && !empty($nama_pegawai) && is_numeric($nama_pegawai)
29 && !empty($kd_seksi) )
30 {
31 $query="insert into pegawai values (
32 '$nip_pegawai', '$nama_pegawai', '$kd_jabatan',
33 '$kd_seksi')";
36 if($jalankan_query)
37 {
38 echo "Data Pegawai Dengan NIP $nip_pegawai
39 atas Nama $nama_pegawai Berhasil Disimpan";
40 }
41 }
42 else
43 {
44 echo "<br>Data Pegawai Gagal Simpan";
45 }
46 ?>
47 </body>
48 </html>
Beberapa penjelasan mengenai kode di atas adalah sebagai berikut :
118
a. Variabel $nip_pegawai, $nama_pegawai, $kd_jabatan, dan

$kd_seksi digunakan untuk menangkap nilai variabel dari halaman
perekaman yang diisi oleh pengguna web.
b. Beberapa fungsi logika IF digunakan untuk melakukan pengecekan atau
validasi kondisi data yang diinput. Jika kondisi tidak sesuai dengan yang
ditentukan maka akan ditampilkan pesan kesalahan dan data tidak akan
disimpan ke dalam database.
Ketik kode di atas dan simpan dengan nama file “pegawai_simpan.php” di
folder D:/XAMPP/htdocs, kemudian jalankan dengan browser dengan membuka
file “pegawai_rekam.html” terlebih dahulu serta melengkapi data yang harus diisi,
kemudian klik tombol “Simpan”.
Jika data pegawai yang direkam sesuai dengan kriteria validasi
perekaman, maka akan muncul tampilan halaman yang menginformasikan bahwa
proses penyimpanan data pegawai berhasil dilakukan seperti gambar berikut ini :
Gambar 58. Penyimpanan Data Pegawai Berhasil
Tetapi jika data pegawai yang direkam tidak sesuai dengan kriteria validasi
perekaman, maka akan muncul tampilan halaman yang menginformasikan bahwa
penyimpanan data pegawai gagal dilakukan seperti gambar berikut ini :
119
Gambar 59. Penyimpanan Data Pegawai Gagal
5.6. Membuat Halaman Perubahan dan Penghapusan Data
Dalam proses perekaman, dalam hal ini perekaman data pegawai, bisa
saja terjadi kesalahan perekaman data. Artinya data pegawai yang sudah
tersimpan di dalam database bukanlah data yang benar, seperti kesalahan
perekaman nama atau lainnya. Ada juga kemungkinan terjadinya perubahan data
pegawai karena adanya perpindahan pegawai sehingga data pegawai di dalam
database harus diubah.
Sama halnya seperti perekaman penambahan data pegawai, selain dapat
dilakukan melalui akses ke database langsung (phpmyadmin), perubahan atau
penghapusan data juga dapat dilakukan melalui sebuah halaman web atau
formulir.
Langkah pertama untuk membuat halaman yang memuat link menuju
halaman perubahan atau penghapusan data dengan menambahkan kode yang
ada di dalam file “pegawai_tampil2.php” yang sudah dibuat sebelumnya menjadi
seperti di bawah ini :
Script pegawai_tampil2.php (update)
1 <!DOCTYPE html>
2 <html>
3 <head>
7 </head>
8 <body>
11 <tr>
120
12 <th>Nomor</th>
14 <th>N I P</th>
15 <th>Jabatan</th>
16 <th>Seksi</th>
17 <th>Aksi</th>
18 </tr>
19 <?php
20 $nomor=0;
26 and a.kode_seksi=c.kode_seksi order by nama";
30 {
31 echo "<tr>";
34 echo "</tr>";
35 }
37 {
38 $nomor++;
39 echo "<tr>
40 <td>$nomor</td>
45 <td><a class=link
46 href=pegawai_ubah.php?id=$row[nip]> Ubah</a> -
47 <a class=link href=pegawai_hapus.php?id=$row[nip]>
48 Hapus</a>
49 </td>
50 </tr>";
51 }
52 echo "</table>";
53 ?>
54 </body>
55 </html>
Penambahan yang dilakukan dari kode sebelumnya adalah :

a. Penambahan kolom pada tabel dengan nama “Aksi” yang berisi link ke halaman
perubahan dan penghapusan data pegawai.
121
b. Link perubahan data ditujukan ke file dengan nama “pegawai_ubah.php”,

sementara link penghapusan data ditujukan ke file dengan nama
“pegawai_hapus.php”. Perpindahan ke kedua file tersebut mengirimkan sebuah
variabel dengan nama "id" dengan nilai berupa NIP pegawai.
c. Penggunaan class selector dengan nama “link” pada tag <a> yang merupakan
tag untuk pembuatan link.
Simpan kode di atas, kemudian jalankan dengan browser. Tampilan

halaman yang sudah diubah akan seperti gambar berikut ini :
Pada tampilan halaman seperti di atas, ketika kursor digerakkan ke atas

link “Ubah” atau “Hapus”, maka di bagian pojok kiri bawah browser akan
menampilkan link ke file tujuan beserta nilai dari variabel "id" berupa NIP
pegawai.
a. Mengubah Data
Setelah memperbaiki file untuk menampilkan data pegawai, langkah
berikutnya adalah membuat halaman untuk melakukan perubahan data pegawai
yang akan muncul setelah link “Ubah” seperti terlihat pada Gambar 60 di halaman
130 diklik. Halaman tersebut merupakan tampilan dari file “pegawai_ubah.php”
ketika dijalankan dengan browser.
Berikut ini adalah kode untuk file “pegawai_ubah.php”.
122
Script pegawai_ubah.php
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Perubahan Data Pegawai</title>
7 </head>
8 <body>
9 <h3>Perubahan Data Pegawai</h3>
10 <?php
13 $id= $_GET['id'];
14 $jabatan="select nama_jabatan, kode_jabatan
15 FROM jabatan order by kode_jabatan";
16 $hasiljabatan = mysql_query ($jabatan);
17 $namajabatan = array () ;
18 while ($data = mysql_fetch_row($hasiljabatan))
19 {
20 $namajabatan [] = $data ["0"];
21 $idjabatan[] = $data ["1"];
22 }
23 $countjabatan = count ($namajabatan);
24 $seksi="select nama_seksi, kode_seksi
25 FROM seksi order by nama_seksi";
26 $hasilseksi = mysql_query ($seksi);
27 $namaseksi = array () ;
28 while ($data = mysql_fetch_row ($hasilseksi))
29 {
30 $namaseksi [] = $data ["0"];
31 $idseksi[] = $data ["1"];
32 }
33 $countseksi = count ($namaseksi);
34 $query="select * from pegawai where nip=$id";
38 {
39 echo "Data Tidak Ada.";
40 }
42 {
43 echo "
44 <form name='ubahdata' method='post'
45 action='pegawai_ubah2.php'>
47 <tr>
48 <td>N I P</td><td> : </td>
49 <td><input type='text' name='nip_pegawai'
123
50 value='$row[nip]'></td>
51 </tr>
52 <tr>
53 <td>Nama</td><td> : </td>
54 <td><input type='text'
55 name='nama_pegawai'
56 value='$row[nama]'></td>
57 </tr>
58 <tr>
59 <td>Jabatan</td><td> : </td>
60 <td>
61 <select name='kd_jabatan'>
62 <option value=''>Pilih Jabatan";
63 for ($a=0;$a<$countjabatan;$a++)
64 {
65 echo "<option value='$idjabatan[$a]'>
66 $namajabatan[$a]";
67 }
68 echo "</select>
69 </td>
70 </tr>
71 <tr>
72 <td>Seksi</td><td> : </td>
73 <td>
74 <select name='kd_seksi'>
75 <option value=''>Pilih Seksi";
76 for ($b=0;$b<$countseksi;$b++)
77 {
78 echo "<option value='$idseksi[$b]'>
79 $namaseksi[$b]";
80 }
81 echo "</select>
82 </td>
83 </tr>
84 </table>
85 <input type='submit' value='Simpan'>
86 <input type='hidden' name='id' value=$id>
87 </form>";
88 }
89 ?>
70 </body>
71 </html>
Berikut adalah beberapa penjelasan mengenai kode di atas :

a. Kode untuk pemilihan jabatan dan seksi tidak ditulis secara manual seperti
pada file “pegawai_rekam.php” melainkan dengan menggunakan query untuk
menampilkan data yang ada di dalam tabel jabatan dan tabel seksi.
124
b. Di bagian akhir <form>, terdapat tambahan tag <input type='hidden'

name='id' value=$id> yang berfungsi untuk mengirim variabel id yang
berisi nilai $id ke halaman berikutnya yaitu “pegawai_ubah.php”.
Tampilan yang akan muncul ketika link “Ubah” pada tampilan seperti pada
Gambar 60 di halaman 130 diklik adalah seperti gambar berikut :
Gambar 61. Perubahan Data Pegawai
Pada bagian awal form di dalam file “pegawai_ubah.php”, file yang akan
melakukan proses perubahan data adalah “pegawai_ubah2.php”. Berikut ini
adalah kode untuk disimpan sebagai file dengan nama “pegawai_ubah2.php”.
Script pegawai_ubah2.php
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Menyimpan Data Pegawai</title>
7 </head>
8 <body>
9 <?php
12 $id=$_POST['id'];
13 $nip_pegawai=$_POST['nip_pegawai'];
14 $nama_pegawai=$_POST['nama_pegawai'];
15 $kd_jabatan=$_POST['kd_jabatan'];
16 $kd_seksi=$_POST['kd_seksi'];
17 //pengecekan pengisian data
125
18 if(empty($nip_pegawai))
19 {
20 echo "<br> - Kolom NIP Tidak Boleh Kosong.";
21 }
22 if (!is_numeric($nip_pegawai))
23 {
24 echo "<br> - Kolom NIP Harus Diisi Angka.";
25 }
26 if(empty($nama_pegawai))
27 {
28 echo "<br> - Kolom Nama Tidak Boleh Kosong.";
29 }
30 if (is_numeric($nama_pegawai))
31 {
32 echo "<br> - Kolom Nama Harus Diisi Huruf.";
33 }
34 if(empty($kd_jabatan))
35 {
36 echo "<br> - Nama Jabatan Harus Dipilih.";
37 }
38 if(empty($kd_seksi))
39 {
40 echo "<br> - Nama Seksi Harus Dipilih.";
41 }
42 If (!empty($nip_pegawai) && is_numeric($nip_pegawai)
43 && !empty($nama_pegawai) &&
44 !is_numeric($nama_pegawai) && !empty($kd_seksi)
45 && !empty($kd_seksi) )
46 {
47 $query="update pegawai set nip='$nip_pegawai',
48 nama='$nama_pegawai',
49 kode_jabatan='$kd_jabatan',
50 kode_seksi='$kd_seksi' where nip='$id'";
54 {
55 echo "Perubahan Data Pegawai Dengan NIP
56 $nip_pegawai atas Nama $nama_pegawai
57 Berhasil Disimpan";
58 }
59 }
60 else
61 {
62 echo "<br>Perubahan Data Pegawai Gagal
63 Disimpan";
64 }
65 ?>
66 </body>
67 </html>
126
Beberapa ketentuan yang ada di dalam file “pegawai_ubah2.php” hampir

sama dengan file “pegawai_simpan.php” yang telah dibuat sebelumnya di mana
terdapat beberapa ketentuan atau validasi yang harus dipenuhi agar perubahan
data dapat dilakukan.
Jika proses perubahan data pegawai yang dilakukan sesuai dengan
ketentuan validasi perubahan data, maka tampilan yang muncul akan seperti
Gambar 62. Perubahan Data Pegawai Berhasil
Jika proses perubahan data pegawai yang dilakukan tidak sesuai dengan
ketentuan validasi perubahan data, maka tampilan yang muncul akan seperti
Gambar 63. Perubahan Data Pegawai Berhasil
b. Menghapus Data
Pada tampilan halaman seperti Gambar 60 pada halaman 130, ketika link
“Hapus” diklik, maka halaman yang muncul adalah tampilan dari file
“pegawai_hapus.php” yang akan memproses penghapusan data pegawai. Salin
dan simpan kode berikut dengan nama file “pegawai_hapus.php”
Script pegawai_hapus.php
127
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Manghapus Data Pegawai</title>
7 </head>
8 <body>
9 <?php
12 $id=$_GET['id'];
13 $query="delete from pegawai where nip='$id'";
17 {echo "<br>Data Pegawai Berhasil Dihapus";}
18 else
19 {echo "<br>Data Pegawai Gagal Dihapus";}
20 ?>
21 </body>
22 </html>
Jika link “Hapus” pada halaman seperti Gambar 60 pada halaman 130
diklik, maka proses penghapusan data akan dilakukan dan akan muncul tampilan
seperti gambar di bawah ini :
Gambar 64. Menghapus Data Pegawai
5.7. Membuat Halaman Pengunggahan File
Mengunggah (upload) file merupakan salah satu hal yang penting di dalam
pembuatan aplikasi berbasis web yang penggunaannya seperti untuk untuk
mengunggah file laporan, gambar, atau file untuk lampiran.
Dalam proses unggah file di dalam web, diperlukan halaman yang
digunakan oleh pengguna web untuk memilih dan mengunggah file serta halaman
128
untuk menyimpan nama file tersebut di dalam database dan file di dalam memori
server.
Pembuatan halaman unggah file yang akan dibahas di sini adalah
membuat halaman untuk mengunggah foto pegawai untuk melengkapi data
pegawai yang telah ada sebelumnya.
Untuk itu, langkah pertama yang harus dilakukan adalah menambah satu
kolom pada tabel pegawai untuk menyimpan nama file yang akan diunggah
dengan cara membuka halaman phpmyadmin melalui browser, pilih database
web_dinamis, lalu pilih tabel pegawai untuk menampilkan struktur tabel
sehingga akan muncul tampilan seperti pada Gambar 46 di halaman 98.
Pada bagian tengah halaman terdapat fitur “Add” untuk menambahkan
kolom. Isikan angka 1 untuk jumlah kolom, kemudian klik tombol “Go”. Selanjutnya
akan muncul tampilan halaman seperti gambar di bawah ini :
Gambar 65. Menambahkan Kolom Pada Tabel Pegawai
Pada tampilan seperti gambar di atas, ketik “foto” untuk nama kolom, pilih
varchar untuk jenis atau tipe data, dan ketik “25” untuk panjang kolom. Selnjutnya
klik tombol “Save”.
Langkah selanjutnya adalah menambahkan folder untuk menyimpan file
yang akan diunggah. Buat folder baru di dalam folder htdocs dengan nama “foto”.
Setelah kedua langkah di atas dilakukan, langkah selanjutnya adalah
menambahkan link “Unggah” pada kolom “Aksi” yang terdapat di dalam file
“pegawai_tampil2.php”. Penambahan link “Unggah” diletakkan setelah link “Ubah”
dan “Hapus” sehingga menjadi seperti di bawah ini :
129
<td><a class=link href=pegawai_ubah.php?id=$row[nip]>

Ubah </a> -
<a class=link href=pegawai_hapus.php?id=$row[nip]>
Hapus </a> -
<a class=link href=pegawai_unggah.php?id=$row[nip]>
Unggah </a>
</td>
Jika file “pegawai_tampil2.php” dijalankan melalui browser, maka

tampilannya akan seperti gambar di bawah ini :
Langkah berikutnya adalah membuat halaman untuk mengunggah foto.

Ketik kode berikut kemudian simpan dengan nama file “pegawai_unggah.php”.
Script pegawai_unggah.php
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Unggah Foto Pegawai</title>
7 </head>
8 <body>
9 <h3>Unggah Foto Pegawai</h3>
10 <?php
13 $id= $_GET['id'];
14 $query="select nip, nama, nama_jabatan, nama_seksi
130
15 from pegawai a, jabatan b, seksi c

16 where nip=$id
17 and a.kode_jabatan=b.kode_jabatan
18 and a.kode_seksi=c.kode_seksi";
22 {
23 echo "Data Tidak Ada.";
24 }
26 {
27 echo "
28 <form name='unggahfoto' method='post'
29 action='pegawai_unggah2.php'
30 enctype='multipart/form-data'>
32 <tr>
33 <td>N I P</td>
34 <td> : </td>
36 </tr>
37 <tr>
38 <td>Nama</td>
39 <td> : </td>
41 </tr>
42 <tr>
43 <td>Jabatan</td>
44 <td> : </td>
46 </tr>
47 <tr>
48 <td>Seksi</td>
49 <td> : </td>
51 </tr>
52 <tr>
53 <td>Pilih File</td><td> : </td><td>
54 <input type='file' name='file'></td>
55 </tr>
56 </table>
57 <input type='submit' name='unggah'
58 value='Unggah Foto'>
59 <input type='hidden' name='id' value=$id>
60 </form>";
61 }
62 ?>
63 </body>
64 </html>
131
Sedikit perbedaan penulisan kode untuk form unggah file di atas dengan
kode untuk form yang sudah dibuat sebelumnya adalah adanya tambahan atribut
enctype=’multipart/form-data’ pada tag <form>. Atribut tersebut
berfungsi untuk memberikan informasi kepada php bahwa form ini adalah form
untuk mengunggah file. Atribut di atas dapat pula digunakan pada form yang
menggabungkan isian data dan unggah file.
Jika link “Unggah” pada tampilan seperti pada Gambar 66 di halaman 138
diklik, maka tampilan halaman berikutnya adalah seperti gambar berikut ini :
Gambar 67. Unggah Foto Pegawai
Langkah terakhir dalam pembuatan halaman unggah file ini adalah

membuat file “pegawai_unggah2.php” yang menjadi nilai dari atribut action pada
file “pegawai_unggah.php”. Berikut adalah kode untuk file “pegawai_unggah2.php”
:
Script pegawai_unggah2.php
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Menyimpan Foto Pegawai</title>
5 </head>
6 <body>
7 <?php
10 $id=$_POST['id'];
11 if($_POST['unggah'])
12 {
13 $ekstensi_file = array('png','jpg');
132
14 $nama_file = $_FILES['file']['name'];
15 $x = explode('.', $nama_file);
16 $ekstensi = strtolower(end($x));
17 $ukuran = $_FILES['file']['size'];
18 $file_tmp = $_FILES['file']['tmp_name'];
19 if(in_array($ekstensi, $ekstensi_file) ===
20 true)
21 {
22 if($ukuran < 1044070)
23 {
24 move_uploaded_file($file_tmp,
25 'foto/'.$nama_file);
26 $query="update pegawai set
27 foto='$nama_file' where
28 nip='$id'";
32 {
33 echo "File Berhasil Diunggah.";
34 }
35 else
36 {
37 echo "Gagal Unggah File.";
38 }
39 }
40 else
41 {
42 echo "Ukuran File Terlalu Besar.";
43 }
44 }
45 else
46 {
47 echo "Tipe File Tidak Diperkenankan.";
48 }
49 }
50 ?>
51 </body>
52 </html>
Beberap penjelasan mengenai kode di atas adalah sebagai berikut :

a. $ekstensi_file berfungsi untuk menentukan tipe file yang diperkenankan
untuk diunggah.
b. $_FILES['file']['name'] berfungsi untuk mendapatkan nama file yang
diunggah.
c. $_FILES['file']['size'] berfungsi untuk mendapatkan ukuran file yang
diunggah.
133
d. $_FILES['file']['tmp_name'] berfungsi untuk mendapatkan temporary

file yang diunggah.
e. move_uploaded_file berfungsi untuk menentukan lokasi folder tempat
menyimpan file yang diunggah.
Dari penejelasan di atas, proses unggah file memiliki beberapa validasi

terhadap kriterai file yang dapat diunggah ke dalam database.
Jika kriteria file yang diunggah memenuhi kriteria validasi, maka tampilan
yang muncul akan seperti gambar berikut ini :
Gambar 68. Unggah File Berhasil
Tetapi jika kriteria file yang diunggah tidak memenuhi kriteria validasi, maka
tampilan yang muncul akan seperti gambar berikut ini :
Gambar 69. Unggah File Gagal
Setelah proses unggah file berhasil, maka langkah selanjutnya adalah

menampilkan foto yang sudah diunggah melalui browser bersama dengan data
pegawai yang lain berupa halaman baru.
Namun sebelum itu, lakukan perubahan sedikit pada file
“pegawai_tampil2.php” pada kolom yang menampilkan NIP Pegawai dengan
menambahkan link ke halaman berikutnya yang menuju file “pegawai_detil.php”
menjadi sebagai berikut :
134
<a class=link href=pegawai_detil.php?id=$row[nip]>

$row[nip]</a>
Setelah ditambahkan kode di atas, maka tampilan halaman daftar pegawai

(pegawai_tampil2.php) adalah seperti gambar berikut :
Untuk menampilkan halaman detil pegawai, salin kode berikut ini dan
simpan dengan nama file “pegawai_detil.php”.
Script pegawai_detil.php
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Menampilkan Detil Data Pegawai</title>
7 </head>
8 <body>
9 <?php
12 $id= $_GET['id'];
13 $query="select nama, nip, nama_jabatan,
14 nama_seksi, foto
17 and a.kode_seksi=c.kode_seksi
18 and nip='$id'";
135
22 {
23 echo "<b>Data tidak ditemukan.";
24 }
26 {
27 echo "<h3>Detil Data Pegawai</h3>
29 <tr>
30 <td><img src='foto/$row[foto]'
31 width=200></td>
32 <td>
33 <table border=0>
34 <tr>
35 <td>N I P </td>
36 <td> : </td>
38 </tr>
39 <tr>
40 <td>Nama </td>
41 <td> : </td>
43 </tr>
44 <tr>
45 <td>Jabatan </td>
46 <td> : </td>
48 </tr>
49 <tr>
50 <td>Seksi </td>
51 <td> : </td>
52 <td>$row[nama_seksi] </td>
53 </tr>
54 </table>
55 </td>
56 </tr>
57 </table>";
58 }
59 ?>
60 </body>
61 </html>
Jika link “NIP” pada tampilan seperti pada Gambar 70 di halaman 141
diklik, maka tampilan halaman yang akan muncul adalah seperti gambar berikut
ini :
136
Gambar 71. Detil Data Pegawai
Catatan Penting :
Berdasarkan Surat Edaran Direktur Jenderal Pajak Nomor SE-6/PJ/2011
tanggal 12 Januari 2011 Tentang Pedoman Pengelolaan End User Computing
(EUC), setiap unit kerja di lingkungan DJP dapat melakukan pengembangan
aplikasi dan/atau pembelian paket perangkat lunak sendiri (end user computing)
dengan ketentuan bahwa aplikasi yang dikembangkan digunakan untuk
melakukan pekerjaan yang bersifat analisis (Online Analytical Processing atau
OLAP) dengan tidak mengubah master data yang sudah ada atau menciptakan
master data yang baru (Online Transaction Processing atau OLTP).
Setiap unit kerja dapat melakukan EUC dengan memenuhi kriteria sebagai
berikut :
a. Data hasil olahan sistem informasi EUC tidak dimasukkan ke Sistem Informasi
Utama Perpajakan;
b. Sistem Informasi EUC tidak mengubah data yang ada dalam Sistem Informasi
Utama Perpajakan;
c. Sistem informasi EUC tidak digunakan untuk memberikan pelayanan
transaksional kepada wajib pajak dan tidak digunakan untuk menghasilkan
keluaran produk hukum;
d. EUC hanya untuk pendukung analisis data.
e. Sistem informasi EUC tidak boleh ada perekaman ulang terhadap data yang
sudah ada di Sistem Informasi Utama Perpajakan.
137
Dengan demikian, jika para peserta Pelatihan Teknis Operator Console

Lanjutan akan mengembangkan sebuah aplikasi berbasis web dinamis hendaknya
megikuti ketentuan-ketentuan sebagaimana tercantum dalam Surat Edaran
Direktur Jenderal Pajak Nomor SE-6/PJ/2011 tanggal 12 Januari 2011 Tentang
Pedoman Pengelolaan End User Computing (EUC) di atas
5.8. Latihan
Selesaikan latihan di bawah ini dengan menggunakan data dan tabel di dalam
database web_dinamis_data yang telah dibuat dan diisi pada latihan Kegiatan
Belajar 4 sebelumnya!
1. Buatlah halaman berupa tabel yang menampilkan data Nama AR dan jumlah
Wajib Pajak masing-masing AR!
2. Pada haalaman hasil latihan Nomor 1, buatlah link pada kolom Jumlah Wajib
Pajak yang jika diklik akan menampilkan rincian data Wajib Pajak berupa tabel
dengan kolom Nama WP, NPWP, alamat, dan tanggal daftar.
3. Pada haalaman hasil latihan Nomor 2, buatlah link pada kolom NPWP yang jika
diklik akan menampilkan data pelaporan SPT berupa tabel dengan kolom
Tahun Pajak, Masa Pajak, Nomor BPS, Jenis SPT, Status SPT (N/KB/LB), Nilai
SPT, Tanggal Lapor, Saluran Pelaporan, Pembetulan.
4. Buatlah halaman pencarian Wajib Pajak yang dapat dilakukan dengan kriteria
NPWP atau Nama Wajib Pajak beserta halaman hasil pencarian yang
menampilkan data Nama WP, NPWP, Alamat, Tanggal Daftar, Nama AR.
5.9. Rangkuman
a. Fungsi mysql_connect() adalah untuk menghubungkan PHP dengan

MySQL.
b. untuk menampilkan data MySQL ke dalam sebuah halaman web digunakan
fungsi mysql_query() dan mysql_fetch_ array().
c. Sebuah variabel yang dikirim dari satu halaman harus ditangkap di halaman
selanjutnya dengan menggunakan fungsi $_GET atau $_POST.
d. Untuk menjaga kualitas data, setiap perekaman data harus disertai dengan
proses validasi.
138
1. Fungsi yang digunakan untuk menghubungkan PHP dengan MySQL adalah...

a. mysql_connection
b. mysql_host
c. mysql_user
d. mysql_connect
2. Penulisan script untuk menghubungkan PHP dengan MySQL yang benar
adalah ...
a. $conn = mysql_connection(' localhost', ' root',
'password');
b. $conn = mysql_host('localhost', 'root', 'password');
c. $conn = mysql_connect('root', 'localhost',
'password');
d. $conn = mysql_connect('localhost', 'root',
'password');
3. Untuk memilih database yang digunakan setelah PHP terhubung dengan
MySQL digunakan fungsi ...
a. mysql_select_db
b. mysql_select_database
c. mysql_select_dbase
d. mysql_select_data_base
4. Fungsi PHP yang digunakan untuk menjalankan query atas data yang
tersimpan di database mysql adalah ...
a. mysql_select
b. mysql_query
c. mysql_fetch_array
d. mysql_num_rows
5. Fungsi PHP yang digunakan untuk menampilkan data yang tersimpan di
database mysql ke halaman web adalah ...
a. mysql_select
b. mysql_query
c. mysql_fetch_array
d. mysql_num_rows
139
6. Salah satu fungsi yang disediakan PHP Untuk menjaga validitas data hasil
kegiatan perekaman adalah ...
a. validity()
b. empty()
c. set()
d. do()
7. Script yang akan menghasilkan tampilan seperti di bawah ini adalah ...
a. <option name="kolom" >

<option value="nip" selected>NIP</option>
<option value="nama">Nama</option>
</option>
b. <select name="kolom" >
<select value="nip" selected>NIP</select>
<select value="nama">Nama</select>
</select>
c. <option name="kolom" >
<select value="nip" selected>NIP</select>
<select value="nama">Nama</select>
</option>
d. <select name="kolom" >
<option value="nip" selected>NIP</option>
<option value="nama">Nama</option>
</select>
8. Penggunaan tag form yang tepat dalam formulir pencarian data adalah ...
a. <form name='post' method='name' action='file.php'>
b. <form name='get' method='name' action='file.php'>
c. <form name='name' method='post' action='file.php'>
b. <form name='name' method='name' action='file.php'>
9. Penggunaan tag form yang tepat dalam formulir pengisian data yang
menyertakan proses unggah file adalah ...
a. <form name='name' method='post' action='file.php'
enctype='multipart/form-data'>
b. <form name='name' method='post' action='file.php'
enctype='multifile/form-data'>
c. <form name='name' method='post' action='file.php'
enctype='multifile/file-data'>
140
c. <form name='name' method='post' action='file.php'

enctype='multipart/form-file>
10. Script yang akan menghasilkan tampilan seperti di bawah ini adalah ...
a. <input type="text" name="cari" size="30">

<input type="button" name="submit" value="submit">
b. <input type="button" name="cari" size="30">
<input type="submit" name="submit" value="cari">
c. <input type="text" name="cari" size="30">
<input type="submit" name="submit" value="submit">
d. <input type="text" name="cari" size="30">
<input type="submit" name="Submit" value="cari">

Jumlah Soal

• 80 – 89 % = Baik
• 70 – 79 % = Cukup
• < 70 % = Kurang
141
PEMANFAATAN FUNGSI KEGIATAN

BELAJAR
CLIENT UNIFORM RESOURCE
LOCATOR (CURL) 6

a. menjelaskan pengertian CURL dengan baik
b. mengaktifkan Library CURL di PHP dengan tepat
c. menjalankan fungsi-fungsi di dalam Library CURL dengan tepat
d. mengambil teks atau obyek tertentu dengan CURL dengan tepat
e. memasukkan data hasil CURL ke dalam database dengan tepat
6.2. Pengertian CURL
Ketika berselancar di dunia maya, adakalanya kita menemukan sebuah

situs yang menampilkan informasi yang bersumber dari situs lain. Misalnya,
sebuah situs yang menyajikan informasi di bidang perpajakan menampilkan data
kurs mata uang yang bersumber dari situ Bank Indonesia atau Kemeterian
Keuangan.
Kondisi tersebut sangat dimungkinkan dengan memanfaatkan
memanfaatkan web service yang disediakan oleh situs sumber informasi.
Umumnya web service menggunakan metode pengambilan data/sinkronisasi data
melalui XML-RPC, REST, SOAP atau JSON. Namun, jika situs sumber informasi
tidak tidak menyediakan web service, maka cara untuk menampilkan informasi
yang diinginkan tetap dapat dilakukan dengan memanfaatkan library CURL PHP.
Konsep Pemanfaatan librari CURL PHP jelas berbeda dengan konsep
pemanfaatan web service. Jika data yang diambil dengan menggunakan konsep
web service, maka data yang disajikan dalam format tertentu seperti XML atau
142
JSON. Sementara data yang diambil dengan konsep CURL berupa data teks atau
data yang terselip di dalam kode-kode HTML.
CURL adalah singkatan dari Client Uniform Resource Locator, merupakan
librari untuk mentransfer data ke berbagai protokol, seperti HTTP, FTP, dan
sebagainya. Dengan menggunakan CURL, pemintaan data ke sebuah situs (web
target) dapat dilakukan dan dapat ditampilkan di situs lain (web client). Dengan
demikian, dalam penggunaan CURL terdapat proses permintaan dari web client
ke web target (CURL Request) dan penerimaan data dari web target oleh web
client (CURL Receive).
Gambar 72. Prinsip Kerja CURL
Gambar di atas menjelaskan bawah web client ingin mengambil data dari
web target untuk ditampilkan di web client. Jika data di web target berubah, maka
tampilan di web client juga akan ikut berubah.
6.3. Mengaktifkan Library CURL di PHP
Langkah-langkah yang harus dilakukan untuk mengaktifkan Library CURL di PHP

adalah sebagai berikut :
a. Jalankan Windows Explorer dan masuk ke dalam folder d:/xampp/php, kemudian cari
file php.ini.
143
Gambar 73. Lokasi File php.ini
b. Seteleh ditemukan, Buka file php.ini dengan Notepad. Kemudian lakukan pencarian
kata “curl” sehingga menemukan keterangan seperti gambar di bawah ini.
Gambar 74. Isi File php.ini
c. Jika terdapat tanda titik koma di sebelah kiri keterangan “extension=php_curl.dll”,

maka hapus tanda titik koma tersebut.
d. Simpan file php.ini dan restart XAMPP.
e. Fungsi library CURL di dalam PHP siap digunakan.
6.4. Fungsi-fungsi di dalam Library CURL
144
Fungsi-fungsi utama di dalam library CURL yang akan digunakan di dalam

kegiatan belajar ini adalah :
a. curl_init, berfungsi untuk memulai sebuah session CURL. Nilai balik (return
value) dari method ini adalah resource CURL.
b. curl_setopt, berfungsi untuk memberikan parameter terhadap sumber
CURL.
c. curl_exec, berfungsi untuk mengeksekusi session CURL. Method ini akan
mengembalikan nilai true jika session berhasil dieksekusi.
d. curl_close, berfungsi untuk mengakhiri session CURL.
Contoh penulisan fungsi-fungsi di atas secara lengkap adalah sebagai
berikut :
Script curl_pegawai.php
1 <?php
2 function bacaHTML($url)
3 {
4 $data = curl_init();
5 curl_setopt($data, CURLOPT_RETURNTRANSFER, 1);
6 curl_setopt($data, CURLOPT_URL, $url);
7 $hasil = curl_exec($data);
8 curl_close($data);
9 return $hasil;
10 }
11 echo
12 bacaHTML('http://localhost/pegawai_tampil2.php');
13 ?>
Format penulisan curl_setopt sebagaimana contoh di atas adalah

curl_setopt (ch, option, value), di mana :
a. $data merupakan nilai dari curl_init()
b. option merupakan nilai opsi yang dimulai dengan sintaks CURLOPT_XXX.
c. value merupakan nilai yang dapat berupa bool, string, atau array.
Pada contoh penulisan di atas, terdapat dua penulisan fungsi
curl_setopt, dengan opsi dan value yang berbeda, yaitu :
a. CURLOPT_RETURNTRANSFER yang bertujuan untuk mengembalikan nilai
respon dalam bentuk string. Jika opsi ini digunakan, maka pada bagian
valuenya harus diset TRUE atau 1.
145
b. CURLOPT_URL yang bertujuan untuk mengambil informasi dari sebuah website,

sehingga value-nya berupa alamat url website.
Pada bagian akhir script di atas, tertulis URL
http://localhost/pegawai_tampil2.php yang merupakan lokasi dari file dengan
nama “pegawai_tampil2.php” yang berada di dalam folder D:/xampp/htdocs yang
telah dibuat pada kegiatan belajar sebelumnya.
Simpan scrip CURL di atas dengan nama “curl_pegawai.php”. Lalu
jalankan dengan browser. Tampilan yang akan muncul adalah seperti gambar
berikut :
Gambar 75. Tampilan File curl_pegawai.php
Seperti terlihat pada gambar di atas, tampilan file “curl_pegawai.php”

ternyata sama seperti tampilan file “pegawai_tampil2.php” sebagaimana terlihat
pada Gambar 54 di halaman 119.
Jika komputer yang digunakan terhubung dengan koneksi internet, maka
url di dalam script “curl_pegawai.php” dapat diganti dengan sebuah alamat web di
internet sehingga penulisan scriptnya sebelumnya sedikit diubah menjadi seperti
di bawah ini :
Script curl_phpdotnet.php
1 <?php
3 {
146

9 return $hasil;
10 }
11 echo bacaHTML('http://www.php.net');
12 ?>
Salin script di atas dan simpan dengan nama file “curl_phpdotnet.php”,

kemudian jalankan dengan browser untuk melihat hasilnya.
6.5. Mengambil Teks atau Obyek Tertentu Dengan CURL
Jika sebelumnya telah dibahas contoh penggunaan library CURL untuk

mengambil informasi yang terdapat dalam sebuah halaman situs secara
keseluruhan sehingga tampilan halaman di web client dengan web target sama
persis, maka pembahasan selanjutnya adalah tentang cara mengambil teks atau
obyek tertentu dari sebuah halaman situs dengan menggunakan library CURL.
Karena di dalam sebuah halaman web tak hanya berisi satu informasi saja,
maka perlu dilakukan pemecahan infomasi tersebut. Sebagaimana telah dibahas
dalam Kegiatan Belajar 1, bahwa sebuah halaman web tersusun dari tag HTML,
maka tag HTML tersebut yang harus dipecah menjadi beberapa bagian. Untuk
memecah tag HTML di dalam sebuah halaman web, PHP menyediakan sebuah
fungsi explode(). Penjelasan mengenai fungsi explode() telah dibahas
pada kegiatan belajar sebelumnya.
Langkah-langkah yang harus dilakukan adalah sebagai berikut :
a. Buka alamat halaman situs di mana terdapat informasi yang akan diambil
melalui browser, dalam hal ini alamat yang akan digunakan sebagai sumber
data adalah http://www.pajakita.net/2012/07/alamat-kantor-pelayanan-pajak-
jakarta.html. Dari halaman web tersebut, data yang akan diambil adalah data
alamat Kantor Pelayanan Pajak di Jakarta Selatan.
147
Gambar 76. Halaman Web Target
b. Setelah terbuka, klik kanan untuk melihat page source halaman tersebut.
c. Setelah source code terbuka, pilih tag HTML yang terletak sebelum bagian
informasi kurs mata uang utama. Tag HTML yang dipilih, sebaiknya terdiri dari
beberapa tag sekaligus agar unik dan tidak ada yang sama dalam satu halaman
serta tidak memuat suatu teks yang bukan tag HTML.
148
Gambar 77. Tampilan Page Source
Dari Tampilan Page Source yang telah dibuka, maka tag awal yang dipilih
adalah :
<table border="1" rules="all"><tbody>
Selanjutnya, memilih tag HTML yang akan menjadi batas akhir informasi yang
akan diambil. Tag HTML akhir yang dipilih adalah :
</tbody></table>
d. Salin kode berikut ini dan simpan dengan nama file “curl_alamat_kpp.php”.
Script curl_alamat_kpp.php
1 <?php
3 {
9 return $hasil;
149
10 }
11 $kodeHTML =
12 bacaHTML('http://www.pajakita.net/2012/07/alamat-
13 kantor-pelayanan-pajak-jakarta.html');
14 $pecah = explode('<table border="1"
15 rules="all"><tbody>', $kodeHTML);
16 $pecahLagi = explode('</tbody></table>',
17 $pecah[1]);
18 echo $pecahLagi[0];
19 ?>
e. Jalankan file “curl_alamat_kpp.php” dengan browser untuk melihat hasil

tampilan.
Gambar 78. Tampilan File curl_alamat_kpp.php (1)
f. Ketika dibuka melalui browser, data yang ditampilkan terlihat tidak beraturan
sebagaimana terlihat pada gambar di atas. Jika page source halaman di atas
dibuka, terlihat sudah ada tag penyusun tabel seperti <tr> dan <td> serta tag
penutupnya. Untuk mempercantik tampilan data di atas, tambahkan tag HTML
untuk menambah keterangan judul halaman, memanggil file kode_css.css yang
sudah dibuat sebelumnya, serta judul tabel, sehingga kode file di atas menjadi
seperti berikut ini :
Script curl_alamat_kpp.php (update)

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Menampilkan Data Hasil CURL</title>
7 </head>
150
8 <body>
9 <h3>Daftar KPP di Jakarta Selatan</h3>
10 <?php
12 {
18 return $hasil;
19 }
20 $kodeHTML =
26 $pecah[1]);
27 echo "<table class=table1>";
28 echo $pecahLagi[0];
29 echo "</table>";
30 ?>
31 </body>
32 </hrml>
g. Simpan dan jalan kembali file “curl_alamat_kpp.php” dengan browser untuk

melihat hasil tampilan seperti gambar berikut.
151
Gambar 79. Tampilan File curl_alamat_kpp.php (2)
6.6. Memasukkan Data Hasil CURL ke Dalam Database
Selain dapat ditampilkan di browser, data hasil CURL juga dapat di-insert-
kan ke dalam sebuah tabel di datbase. Untuk melakukan hal tersebut perlu
dilakukan beberapa langkah sebagai berikut :
a. Buat tabel KPP di dalam database yang akan menjadi tempat tampungan data
hasil CURL di atas dengan struktur sebagai berikut :
Tabel 6. Struktur Tabel KPP
Nama Kolom Type Panjang

No CHAR 3
nama_kpp VARCHAR 50
kode_kpp CHAR 3
alamat_kpp VARCHAR 75
telepon_kpp VARCHAR 30
fax_kpp VARCHAR 20
b. Mengubah kode di dalam file “curl_alamat_kpp.php” untuk mengganti tag-tag

HTML yang masih dengan karakter-karakter yang akan membntuk format
152
perintah insert ke dalam tabel dengan menggunakan fungsi str_replace()

menjadi seperti di bawah ini :
Script curl_insert.php
1 <?php
3 {
9 return $hasil;
10 }
11 $kodeHTML =
18 $pecah[1]);
19 $perbaikan = str_replace('<tr><th
20 width="8%">No.</th><th width="25%">Nama
21 KPP</th><th width="5%">Kode KPP</th><th
22 width="33%">Alamat</th><th width="15%">No.
23 Telepon</th><th width="15%">No.
24 Faksimili</th></tr>', "insert into kpp values ",
25 $pecahLagi);
26 $lama = array("<tr><td>", ".</td><td>",
27 "</td><td>", "</td></tr>");
28 $baru = array("('", "','", "','", "'),");
29 $perbaikan2= str_replace($lama, $baru,
30 $perbaikan1);
31 $perbaikan3=substr_replace($perbaikan2,"",-2);
32 echo $perbaikan3 [0];
33 ?>
c. Salin dan simpan kode di atas dengan nama file “curl_insert.php”, kemudian
jalankan dengan browser.
153
Gambar 80. Tampilan File curl_insert.php
d. Perubahan berikutnya adalah dengan dengan menambahkan fungsi koneksi ke

database di bagian awal dan mengganti baris terakhir kode di atas dengan
perintah insert ke tabel sehingga menjadi seperti di bawah ini :
Script curl_insert2.php
1 <?php
5 {
11 return $hasil;
12 }
13 $kodeHTML =
19 $pecah[1]);
20 $perbaikan1 = str_replace('<tr><th
21 width="8%">No.</th><th width="25%">Nama
22 KPP</th><th width="5%">Kode KPP</th><th
23 width="33%">Alamat</th><th width="15%">No.
24 Telepon</th><th width="15%">No.
25 Faksimili</th></tr>', "insert into kpp values ",
26 $pecahLagi); $lama = array("<tr><td>",
27 ".</td><td>", "</td><td>", "</td></tr>");
154
28 $baru = array("('", "','", "','", "'),");

29 $perbaikan2= str_replace($lama, $baru,
30 $perbaikan1);
31 $perbaikan3=substr_replace($perbaikan2,"",-2);
32 $query="$perbaikan3[0]";
36 {
37 echo "Data Berhasil Disimpan";
38 }
39 else
40 {
41 echo "<br>Data Pegawai Gagal Simpan";
42 }
43 ?>
e. Simpan kode di atas dengan nama file “curl_insert2.php”, kemudian jalankan

dengan browser.
Gambar 81. Notifikasi Proses Insert Data Berhasil
f. Untuk memastikan data hasil CURL telah masuk ke dalam tabel KPP, buka
http://localhost/phpmyadmin, kemudian masuk ke dalam database
“web_dinamis”, lalu pilih tabel KPP dan klik tab browse.
155
Gambar 82. Data di Dalam Tabel KPP
6.7. Latihan
Untuk menyelesaikan latihan berikut, dengan menggunakan browser, bukalah

halaman dengan alamat http://www.fiskal.kemenkeu.go.id/dw-kurs-db.asp.
1. Pada halaman tersebut, ambillah teks yang menginformasikan kurs mata uang
dengan menggunakan CURL sehingga dapat ditampilkan dalam sebuah
halaman tersendiri!
2. Berdasarkan teks yang didapatkan dari penyelesaian sebelumnya, buatlah
sebuah tabel yang akan menyimpan data nilai kurs serta halaman untuk
memasukkan data nilai kurs tersebut ke dalam tabel di database!
6.8. Rangkuman
a. PHP menyediakan fungsi CURL yang dapat digunakan untuk mengambil data
dari sebuah halaman web untuk ditampilkan di halaman web yang lain.
b. Data yang ditransfer dengan konsep CURL berupa HTML.
c. Fungsi-fungsi utama dari Library CURL adalah :
1) curl_init, berfungsi untuk memulai sebuah session CURL. Nilai balik
(return value) dari method ini adalah resource CURL.
156
2) curl_setopt, berfungsi untuk memberikan parameter terhadap sumber

CURL.
3) curl_exec, berfungsi untuk mengeksekusi session CURL. Method ini akan
mengembalikan nilai true jika session berhasil dieksekusi.
4) curl_close, berfungsi untuk mengakhiri session CURL.
6.9. Tes Formatif 6
1. CURL adalah singkatan dari ...

a. Client Universal Resource Location
b. Client Universal Resource Locator
c. Client Uniform Resource Locator
d. Client Uniform Resource Location
2. Dalam konsep penggunaan CURL, data yang ditransfer berupa ...
a. XML
b. HTML
c. JSON
d. TXT
3. Web yang menjadi sumber data atau informasi yang akan diambil dengan
menggunakan Library CURL disebut ...
a. web client
b. web target
c. web source
d. web host
4. Web yang menerima data atau informasi dari web lain melalui penggunaan
Library CURL disebut ...
a. web client
b. web target
c. web source
d. web host
5. Proses permintaan data dari web penerima kepada web sumber atau tujuan
disebut ...
a. CURL Receive
b. CURL Acceptance
157
c. CURL Charge
d. CURL Request
6. Proses penerimaan data dari web sumber atau tujuan disebut ...
a. CURL Receive
b. CURL Acceptance
c. CURL Charge
d. CURL Request
7. Fungsi library CURL yang digunakan untuk memulai sebuah session adalah
...
a. curl_set
b. curl_start
c. curl_init
d. curl_exec
8. Fungsi library CURL yang digunakan untuk menjalankan sebuah session yang
telah dimulai adalah ...
a. curl_set
b. curl_start
c. curl_init
d. curl_exec
9. Fungsi library CURL yang digunakan untuk mengakhiri sebuah session yang
adalah ...
a. curl_stop
b. curl_end
c. curl_close
d. curl_done
10. Fungsi library CURL yang digunakan untuk memberikan parameter terhadap
sumber CURL adalah ...
a. curl_setparam
b. curl_setvar
c. curl_setval
d. curl_setopt
158

Jumlah Soal

• 80 – 89 % = Baik
• 70 – 79 % = Cukup
• < 70 % = Kurang
159
PENUTUP
HTML dan PHP dapat digunakan dalam pembuatan sebuah web.

Perbedaannya, jika HTML hanya dapat menghasilkan web yang bersifat statis dan
tidak memerlukan database, sementara PHP dapat menghasilkan web yang
bersifat dinamis dan interaktif karena adanya dukungan database. Namun
demikian untuk menghasilkan sebuah halaman web, penggunaan PHP dan HTML
dapat digabungkan. Sementara CSS dapat digunakan untuk mengatur dan
menambah daya tarik tampilan dari halaman web yang telah dibuat dengan PHP
dan HTML.
Dengan PHP, sebuah halaman web tidak hanya disediakan untuk dibaca,
tetapi dapat pula digunakan untuk melakukan perekaman, perubahan, serta
pencarian data yang tersimpan di dalam database. Database yang paling populer
dipasangan dengan PHP adalah MySQL. Kepopuleran penggunaannya karena
mudah dalam penggunaan, fitur-fitur yang mumpuni, dan gratis.
160
TES SUMATIF
1. Kepanjangan dari HTML adalah .....

a. Hyper Text Manual Language
b. Hypno Terminal Maximal List
c. Hyper Text Mark-up Language
d. Horizon Terminal Mark-up List
2. Berikut ini adalah Text Editor yang dapat digunakan untuk membuat file
HTML, kecuali ...
a. Aphace
b. Notepad
c. Dreamweaver
d. Notepad++
3. Dari beberapa aplikasi berikut ini, yang termasuk web browser adalah ....
a. Chrome
b. Microsoft Word
c. Corel Draw
d. Paint
4. Dalam struktur HTML, dari komponen berikut ini, yang manakah yang
penulisannya paling awal?
a. <body>
b. <html>
c. <head>
d. <title>
5. Penulisan urutan dalam struktur HTML yang tepat adalah ...
a. HTML – Title – Head
b. HTML – Body – Title
c. HTML – Body – Head
d. HTML – Head – Body
6. Untuk mengganti baris pada HTML menggunakan perintah ....
a. <tr>
b. <hr>
161
c. <br>
d. <ol>
7. Atribut pada tag <table> yang berfungsi untuk menentukan tebal garis tabel
adalah …
a. cell-spacing
b. cell-padding
c. border
d. color
8. Kode HTML yang digunakan untuk membuat baris judul pada sebuah tabel
adalah ...
a. <hr>
b. <td>
c. <tr>
d. <br>
9. Tag <select> digunakan untuk ...
a. memilih beberapa opsi
b. menandai beberapa opsi
c. menampilkan opsi pilihan
d. memilih tampilan opsi
10. Penulisan kode HTML yang tepat untuk menampilkan komponen radio button
adalah ....
a. <input type=radio-select>
b. <input type=radio_button>
c. <input type=radio-button>
d. <input type=radio>
11. Komponen input yang digunakan sebagai masukan untuk data atau nilai
pilihan dengan alternatif jawaban lebih dari 1 pilihan adalah ....
a. radio button
b. select
c. option
d. check box
12. Untuk mengatur tampilan dari sebuah halaman web menggunakan ...
162
a. HTML
b. PHP
c. XML
d. CSS
13. Cara penulisan CSS yang paling direkomendasikan adalah ....
c. external style sheetsasasas
d. embedded style sheet
14. Metode pembuatan file CSS secara terpisah dan ketika halaman web akan
menggunakan file CSS tersebut cukup dengan memanggilnya disebut dengan
istilah .....
c. external style sheetsasasas
d. embedded style sheet
15. Perhatikan penulisan kode CSS berikut ini :
.kotak {
border: solid;
}
”.kotak” pada kode di atas merupakan sebuah ....

a. property
b. selector
c. selector id
d. selector class
16. Perhatikan penulisan kode CSS berikut ini :
#inggris {
Font-weight: bold;
}
”Font-weight” pada kode di atas merupakan sebuah ....

a. selector id
b. selektor class
c. property
d. value
163
17. Berikut ini merupakan manfaat penggunaan CSS, kecuali ....

a. Kode HTML menjadi lebih sederhana dan lebih mudah diatur
b. Ukuran file menjadi lebih kecil sehingga load file lebih cepat
c. Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS
d. Membuat banyak aturan yang harus digunakan dalam file HTML
18. Sebuah script PHP selalu Dimulai dengan ....
a. ?<php
b. <?Php
c. <<php
d. Php<?
19. Fungsi dari variabel ialah di dalam PHP adalah untuk …
a. meyimpan suatu data yang akan diproses
b. menyimpan gambar
c. membentuk link
d. menampung data HTML
20. Penulisan nama variabel yang benar di bawah ini adalah ...
a. $Nama Lengkap
b. $7ruangan
c. $_7an
d. $ top-level-domain
21. Bilangan dari 0 sampai dengan 9 merupakan bilangan bulat yang termasuk
dalam tipe data ....
a. Float
b. Hexadecimal
c. String
d. Integer
22. Tipe data pada MySQL yang digunakan untuk menyimpan data waktu dan
tanggal adalah …
a. YEAR
b. TIME
c. DATE
d. DATETIME
164
23. Contoh query :

$query="update pegawai set nama='$nama2' WHERE
nip='123456789'";
Query di atas memiliki fungsi untuk ....

a. insert data
b. delete data
c. update data
d. create data
24. Query select * from pegawai memiliki fungsi sebagai ....
a. menampilkan data pada tabel pegawai
b. mengupdate data pada tabel pegawai
c. menambahkan data pada tabel pegawai
d. memilih database pegawai
25. mysql_connect("localhost", "root", "")
Perintah di atas merupakan perintah koneksi ke database ....
a. Oracle
b. Sybas
c. PostgreSQL
d. MySQL
165
UMPAN BALIK DAN TINDAK LANJUT
Bandingkan hasil jawaban Anda dengan Kunci Jawaban Latihan yang ada
di bagian akhir modul ini! Hitung jumlah jawaban Anda dengan benar, kemudian
gunakan rumus di bawah ini untuk mengetahui Tingkat Penguasaan (TP) Anda
terhadap materi modul ini.

Tingkat Penguasaan (TP) = X 100%
25
Tingkat Penguasaan (TP) :
90% - 100% Baik Sekali
80% - 89% Baik
70% - 79% Cukup
0% - 69% Kurang
166
KUNCI JAWABAN
Tes Formatif 1
1. B 6. B
2. A 7. B
3. D 8. C
4. D 9. B
5. C 10. B
Tes Formatif 2
1. C 6. A
2. D 7. C
3. A 8. B
4. B 9. C
5. B 10.D
Tes Formatif 3
1. C 6. A
2. C 7. A
3. A 8. B
4. C 9. A
5. C 10.B
Tes Formatif 4
1. D 6. D
2. D 7. D
3. B 8. C
4. B 9. D
5. C 10.D
Tes Formatif 5
1. D 6. B
2. D 7. D
3. A 8. C
4. B 9. A
5. C 10.D
167
Tes Formatif 6
1. C 6. A
2. D 7. C
3. B 8. D
4. A 9. C
5. D 10.D
Tes Sumatif
1. C 11. D 21. D
2. A 12. D 22. D
3. A 13. C 23. C
4. B 14. C 24. A
5. D 15. D 25. D
6. C 16. D
7. C 17. D
8. C 18. B
9. C 19. A
10. D 20. C
168
DAFTAR PUSTAKA
Ari, Rosihan. 2010. Teknik Grabbing (Mengambil Teks Dari Situs Lain) Dengan
CURL. [diakses 2018 Mei 6]. Tersedia pada :
http://blog.rosihanari.net/teknik-grabbing-mengambil-teks-dari-situs-
lain-dengan-curl/.
Direktorat Jenderal Pajak. Surat Edaran Direktur Jenderal Pajak Nomor SE-
6/PJ/2011 tanggal 12 Januari 2011 Tentang Pedoman Pengelolaan
End User Computing (EUC),
Hadi, Diki Alfarabi. 2016. Ebook Belejar HTML & CSS Dasar. [diunduh 2018 Mei
25]. Tersedia pada : https://www.malasngoding.com/download-ebook-
belajar-html-dan-css-dasar-gratis/.
PHP : Hypertext Preprocessor. 2015. str_replace. [diakses 2018 Juni 21]. Tersedia
pada http://php.net/manual/en/function.str-replace.php.
Pratama, Andre. 2014. Tutorial Belajar CSS. [diakses 2018 Mei 24]. Tersedia pada
: https://www.duniailkom.com/tutorial-belajar-css-dan-index-artikel-
css/.
Pratama, Andre. 2014. Tutorial Belajar PHP. [diakses 2018 Mei 3]. Tersedia pada
: https://duniailkom.com/tutorial-belajar-php-dan-index-artikel-php/.
Sofwan, Akhmad. 2011. Belajar MySQL dengan Phpmyadmin. [diunduh 2018 Mei
16]. Tersedia pada : http://ilmukomputer.org/2011/08/29/belajar-
mysql-dengan-phpmyadmin/.
Solichin, Achmad. 2005. Pemrograman Web dengan PHP dan MySQL. [Diakses
2018 Mei 25]. Tersedia pada : https://www.researchgate.net/
publication/236885805_Pemrograman_Web_dengan_PHP_dan_MyS
QL
Sidik, B. 2004. Pemrograman Web Dengan PHP. Bandung : Informatika.
Tenjo, Mulyadi. 2017. Aplikasi Pendukung Belajar Pemrograman Web Dasar.
[Diakses 2018 Mei 11]. Tersedia pada : https://modulkomputer.com/
aplikasi-pendukung-belajar-pemrograman-web-dasar/.
169

Aplikasi Web Dinamis

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aplikasi Web Dinamis

Transféré par

Droits d'auteur :

Formats disponibles

PELATIHAN TEKNIS

OPERATOR CONSOLE PAJAK LANJUTAN

APLIKASI WEB DINAMIS

KEMENTERIAN KEUANGAN REPUBLIK INDONESIA

Berdasarkan Surat Keputusan Kuasa Pengguna Anggaran Pusat

Jakarta, September 2018

PERNYATAAN DISCLAIMER ............................................................................... I

3.6. Operator ..................................................................................................... 64

TES SUMATIF ................................................................................................. 161

Tabel 1. Operator Aritmatika dalam PHP ........................................................... 65

Gambar 1. Aplikasi Notepad ................................................................................ 5

Gambar 41. Penggunaan Fungsi Include ........................................................... 82

PETUNJUK PENGGUNAAN MODUL

1. Setiap peserta Pelatihan Teknis Operator Console Lanjutan wajib mempelajari

PETA KONSEP MODUL

Prasyarat kompetensi yang harus dimiliki oleh peserta sehingga dapat

3. Standar Kompetensi (SK) dan Kompetensi Dasar (KD)

Standar Kompetensi yang diharapkan adalah para peserta mampu

Sedangkan Kompetensi Dasar dan Indikator Keberhasilan yang

Kompetensi Dasar (KD) Indikator Keberhasilan (IK)

3.11.Mampu menggunakan fungsi include dan

1. KEGIATAN BELAJAR 1 KEGIATAN

Setelah mengikuti pembelajaran, peserta mampu :

1.2. Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language, yaitu sebuah

Namun demikian, HTML bukanlah bahasa pemrograman (programming

1.3. Text Editor

Untuk membuat sebuah dokumen HTML, diperlukan dua buah aplikasi

Gambar 1. Aplikasi Notepad

Gambar 2. Aplikasi Wordpad

Gambar 3. Aplikasi Notepad++

Gambar 4. Macromedia Dreamweaver

Dari beberapa aplikasi Text Editor di atas, yang digunakan di dalam

Berdasarkan situs w3counter.com yang diakses per September

Gambar 5. Komposisi Penggunaan Browser

1.5. Struktur Dokumen HTML

HTML membutuhkan cara dalam bentuk tanda untuk memberitahu browser

Gambar 6. Tampilan File HTML Pada Browser

Berdasarkan susunan kode HTML tersebut, maka struktur HTML dapat

a. DTD atau DOCTYPE

Tag head dimulai dengan <head> dan diakhiri dengan </head>.

1.6. Elemen Dasar HTML

a. Break dan Paragraph

Gambar 7. Penggunaan Tag Break dan Paragraph

Gambar 8. Format Teks

8 <h2>ini adalah judul dengan h2 </h2>

Gambar 9. Penggunaan Tag Heading

Gambar 11. Penggunaan Tag Link

Simpan kode HTML di atas dengan nama file “latihan6b.html”. Kemudian

Simpan kode HTML di atas dengan nama file “latihan07.html”. Kemudian

Gambar 12. Penggunaan Tag Image (1)

Tag image juga memiliki beberapa atribut, yaitu :

1) alt (alternative description), digunakan untuk memberikan keterangan dari

Gambar 13. Penggunaan Tag Image (2)

5) Tag <caption>, berfungsi untuk membuat judul atau keterangan sebuah

Gambar 14. Penggunaan Tag Table

9 <p>Ini bukan komentar, dan akan tampil di

Gambar 16. Contoh Form HTML

Selesaikanlah perintah-perintah pada latihan berikut ini!

1. Buatlah sebuah file dengan nama “halaman_utama.html” yang berisi kode

2. Buatlah sebuah file dengan nama “halaman_utama.html” yang berisi kode

Tabel Penjualan Buku

3. Buatlah sebuah file dengan nama “halaman_gambar.html” yang berisi kode

Galeri Buku Terbaru