pemrograman web dan

perangkat bergerak
KELAS XI (C3)

Tim Galaksi Aksara

PT DINAMIKA ASTRAPEDIA SEJAHTERA

pemrograman web dan
perangkat bergerak
SMK/MAK Kelas XI
© 2020
Hak cipta yang dilindungi Undang-Undang ada pada Penulis.
Hak penerbitan ada pada PT Dinamika Astrapedia Sejahtera.

Penulis : Tim Galaksi Aksara

Editor : Rochmathul Ummah
Desainer Kover : Dyah Nur Azizah
Desainer Isi : Dyah Nur Azizah
Tahun terbit : 2020
ISBN : 978-623-302-338-2

Diterbitkan oleh
PT Dinamika Astrapedia Sejahtera
Pakuwon Center Lantai 23, Jalan Embong Malang, No. 1-5, Kedungdoro, Tegalsari, Kota Surabaya
Jawa Timur, 60261
Telp. (031) 6000 3414
Website : www.astrapedia.co.id

Dilarang memperbanyak atau memindahkan sebagian atau seluruh isi buku ini dalam bentuk apapun, baik
secara elektronis maupun mekanis, termasuk memfotokopi, merekam atau dengan sistem penyimpanan
lainnya, tanpa izin tertulis dari PT Dinamika Astrapedia Sejahtera.
 Daftar Isi
Prakata ...................................................................................................................... vi
Bab 1 Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web ..................... 1
A. Teknologi Aplikasi Web .................................................................................................... 2
B. Jenis dan Konsep Web ...................................................................................................... 3
C. Macam-Macam Editor Teks ............................................................................................. 13
Uji Kompetensi ............................................................................................................................. 14

Bab 2 Membuat Kode HTML untuk Menampilkan Teks dalam Format Tertentu
pada Halaman Web ............................................................................................ 17
A. Struktur Dasar HTML (Hyper Text Markup Language) .......................................... 18
B. Menulis Tag HTML dengan Editor Teks ....................................................................... 18
C. Menambahkan Gambar dengan Tag Image dan Parameternya ....................... 20
D. Menambahkan Hyperlink pada Teks dan Image .................................................... 20
E. Tag HTML untuk Format Teks ......................................................................................... 21
Uji Kompetensi ............................................................................................................................. 23

Bab 3 Membuat Kode HTML untuk Menampilkan Tabel pada Halaman Web ........ 27
A. Konsep Table pada Halaman Website ......................................................................... 28
B. Pembuatan Tag Table HTML dengan Teks Editor .................................................... 29
Uji Kompetensi ............................................................................................................................. 37

Bab 4 Membuat Kode HTML untuk Menampilkan Tampilan Format Multimedia

pada Halaman Web ............................................................................................ 41
A. Konsep Tampilan Multimedia dalam Teknologi Halaman Web ......................... 42
B. Tag HTML untuk Tampilan Gambar dalam Halaman Web ................................... 42
C. Tag untuk Tampilan Audio dalam Halaman Web .................................................... 45
D. Tag untuk Tampilan Video dalam Halaman Web .................................................... 46
E. Tag untuk Menampilkan Animasi pada Halaman Web ........................................ 47
Uji Kompetensi ............................................................................................................................. 49

Bab 5 Membuat Kode HTML untuk Menampilkan Format Kaitan pada Halaman
Web ..................................................................................................................... 53
A. Konsep Format Kaitan (Link) dalam Halaman Web ................................................ 54
B. Format Link Antar-isi pada Suatu Halaman Web .................................................... 56
C. Format Link Antarhalaman Web untuk Membentuk Sitemap ........................... 57
D. Format Target Link, Email, dan Telepon ..................................................................... 58
Uji Kompetensi ............................................................................................................................. 61

Bab 6 Membuat Kode HTML untuk Menampilkan Formulir Kaitan pada Halaman
Web ..................................................................................................................... 65
A. Konsep Formulir dalam Halaman Web ....................................................................... 66
B. Anatomi dari Form ............................................................................................................. 67
C. Elemen Input Teks pada Formulir Halaman Web .................................................... 68

iii
 D. Elemen Input Pilihan pada Halaman Web ................................................................. 69
E. Elemen Input Tombol ....................................................................................................... 73
F. Elemen Tambahan ............................................................................................................. 74
Uji Kompetensi ............................................................................................................................. 76

Bab 7 Style pada Halaman Web .................................................................................. 81

A. Konsep Layout dalam Tampilan Halaman Web ....................................................... 82
B. Metode Layout Tampilan Halaman Web .................................................................... 83
C. Memahami Style pada Halaman Web ......................................................................... 85
D. Cascading Style Sheet ...................................................................................................... 86
E. Versi CSS ................................................................................................................................ 86
F. Anatomi dari CSS ................................................................................................................ 88
G. Cara Kerja Cascading Style Sheet ................................................................................. 89
H. Link .......................................................................................................................................... 92
Uji Kompetensi ............................................................................................................................. 93

Bab 8 Mempresentasikan Client Side Scripting dalam Pemrograman Web ........... 97

A. Web Server ............................................................................................................................ 98
B. Konsep Dasar Client Side Scripting ............................................................................. 100
C. Konsep Dasar Server Side Scripting ............................................................................ 101
D. Cara Kerja Server Side Scripting .................................................................................... 101
E. Penyisipan Program Client Side dalam HTML .......................................................... 102
F. Struktur dan Pengelompokan Web Scripting Image ............................................ 103
Uji Kompetensi ............................................................................................................................. 108

Bab 9 Membuat Halaman Web Interaktif Menggunakan Client Side Scripting ...... 113
A. Konsep Halaman Web Interaktif ................................................................................... 114
B. Keuntungan dan Kekurangan Menggunakan Web Interaktif ............................ 114
C. Jenis-Jenis Multimedia Interaktif .................................................................................. 116
D. Client Side Scripting Programming ............................................................................. 116
E. Membuat Halaman Web Interaktif dengan Client Side Scripting .................... 118
Uji Kompetensi ............................................................................................................................. 124

Bab 10 Mempresentasikan Teknologi Aplikasi Web Server ....................................... 129

A. Konsep Dasar Web Server ............................................................................................... 130
B. Fungsi Web Server ............................................................................................................. 133
C. Produk Web Server ............................................................................................................ 134
D. Perangkat Pengembangan Aplikasi Web Server .................................................... 137
Uji Kompetensi ............................................................................................................................. 139

Bab 11 Membuat Kode Program pada Server Side Scripting ..................................... 143
A. Konsep Pemrograman di Sisi Server (Server Side Programming) .................... 144
B. Mengenal Nama Bahasa Pemrograman Web Server ............................................. 145
C. Bahasa Pemrograman PHP ............................................................................................. 146
D. Menyisipkan Kode PHP dalam HTML .......................................................................... 147
Uji Kompetensi ............................................................................................................................. 152

iv
Bab 12 Membuat Struktur Kendali Program ............................................................... 157
A. Konsep Dasar Struktur Kendali ...................................................................................... 158
B. Struktur Kendali Percabangan (Pengambilan Keputusan) .................................. 158
C. Struktur Kendali Perulangan (Looping) ...................................................................... 162
Uji Kompetensi ............................................................................................................................. 166

Bab 13 Membuat Kode Fungsi dalam Program............................................................ 171

A. Konsep Fungsi dalam Pemrograman Aplikasi Web di Sisi Server ..................... 172
B. Prosedur Penggunaan Fungsi dalam Pemrograman Web .................................. 173
C. Konsep Dasar Argumen dan Parameter dalam Pemrograman Web ............... 177
Uji Kompetensi ............................................................................................................................. 178

Bab 14 Menggunakan Library Standar dalam Program ............................................. 183

A. Konsep Library dalam Pemrograman Aplikasi Web .............................................. 184
B. Penerapan Library dalam Pemrograman PHP ......................................................... 184
C. Kekurangan Penggunaan Library ................................................................................. 186
D. Penerapan Standar PHP Library (SPL) ......................................................................... 186
E. Penerapan Library dalam Framework ......................................................................... 189
Uji Kompetensi ............................................................................................................................. 190

Bab 15 Memodifikasi Aplikasi Interaktif pada Halaman Web .................................... 195

A. Konsep Aplikasi Interaktif dalam Pemrograman Web .......................................... 196
B. Pembuatan Aplikasi Interaktif dalam Pemrograman Web .................................. 196
Uji Kompetensi ............................................................................................................................. 216

Bab 16 Membuat Kode Program untuk Operasi File ................................................... 221

A. Konsep Operasi File dalam Pemrograman Web ...................................................... 222
B. Prosedur Operasi Membuka File ................................................................................... 222
C. Prosedur Operasi Menutup File .................................................................................... 223
D. Prosedur Operasi Menulis dalam File .......................................................................... 223
E. Menulis Data Menggunakan fputs() ............................................................................ 224
F. Prosedur Membaca Isi File .............................................................................................. 224
G. Prosedur Operasi Menghapus File ............................................................................... 225
H. Prosedur Menambah Isi File ........................................................................................... 225
I. Memeriksa File dengan file_exists() ............................................................................ 226
J. Prosedur Upload File ......................................................................................................... 227
Uji Kompetensi............................................................................................................................... 228

Glosarium ...................................................................................................................... 233

Daftar Pustaka.................................................................................................................... 236
Biodata Konsultan.............................................................................................................. 240
Tim Kreatif........................................................................................................................... 241

v
 Prakata
Setelah melalui proses yang panjang, akhirnya buku Pemrograman Web dan Perangkat
Bergerak (C3) Kelas XI SMK/MAK Program Keahlian Teknik Komputer dan Informatika ini dapat
dirampungkan. Oleh karena itu, penulis menyampaikan rasa syukur ke hadirat Allah SWT
atas kelancaran dalam penulisan buku ini.
Buku ini disusun untuk memenuhi kebutuhan bahan ajar Pemrograman Web dan
Perangkat Bergerak yang sesuai dengan tuntutan Kurikulum 2013 revisi terbaru. Hadirnya
buku ini diharapkan dapat menjadi panduan belajar bagi peserta didik Sekolah Menengah
Kejuruan (SMK) Program Keahlian Teknik Komputer dan Informatika.
Mengacu pada KI/KD Kurikulum 2013 maka buku ini disusun dalam enam belas bab yang
masing-masing bab membahas materi sesuai dengan kompetensi dasar secara berurutan.
Pada setiap bab disajikan rangkuman serta uji kompetensi dengan harapan peserta didik
dapat melakukan evaluasi diri dan pengayaan atas materi yang telah dipelajari. Buku ini telah
dirancang sesuai dengan model pembelajaran berbasis HOTS dan STEM serta diselaraskan
dengan pembelajaran revolusi industri 4.0 sehingga diharapkan dapat menjadi bahan ajar
yang lebih sesuai dalam pencapaian kompetensi peserta didik.
Terima kasih penulis sampaikan kepada semua pihak yang telah membantu hingga
terwujudnya buku ini. Penulis mengharapkan kritik dan saran untuk penyempurnaan buku
ini. Semoga buku ini dapat memberi manfaat bagi peserta didik dan guru Sekolah Menengah
Kejuruan (SMK) khususnya dan bagi semua pihak yang memerlukan.

Penulis

vi
 BAB

1
Mempresentasikan
Berbagai Konsep
Teknologi Aplikasi
Web

Kompetensi Dasar Tujuan Pembelajaran

3.1 Memahami konsep tek nologi
aplikasi web
4.1 M e m p re s e n t a s i k a n p e l b a g a i
teknologi pengembangan aplikasi
web
Setelah mempelajari bab ini, peserta didik
diharapkan mampu
1. menjelaskan konsep World Wide Web
(WWW) dan teknologi aplikasi web;
2. menjelaskan konsep dan aplikasi web
server;
3. menjelaskan jenis-jenis web browser dan
editor teks;
4. mempresentasikan konsep World Wide
Web (WWW) dan teknologi aplikasi web;
5. mendeskripsikan konsep web server;
6. menginstal paket aplikasi web server;
serta
7. mempresentasikan jenis-jenis web
browser dan editor teks.
Tahukah Anda yang dimaksud dengan website? Biasanya, sebuah domain atau
subdomain yang merangkum kumpulan halaman-halaman situs merupakan website
secara terminologi. Letaknya berada di mana? Di internet berada di dalam World Wide
Web (WWW) yang terdiri atas seluruh situs web yang tersedia kepada publik. Sebuah
URL yang menjadi “akar” (root) yang disebut homepage adalah halaman induk dan sering
diterjemahkan menjadi beranda atau halaman muka menjadi akses untuk halaman-
halaman sebuah web page. Apa yang dimaksud dengan web page? Dokumen yang ditulis
dalam format Hyper Text Markup Language (HTML) yang hampir selalu diakses melalui
HTTP. Sementara itu, URL mengatur web page menjadi sebuah hierarki.
Sebuah jaringan informasi yang sangat besar dapat dibentuk dari semua publikasi
website sehingga web page seperti sebuah buku yang dapat menampung berbagai
informasi. Oleh karena itu, seseorang dapat memberikan informasi ke seluruh dunia
melalui media web tersebut. Anda pasti sudah tidak asing dengan hyperlink yang menjadi
salah satu keunggulan World Wide Web. Letaknya dapat di mana saja di dalam halaman
web serta dapat diatur menuju ke mana saja di seluruh web. Biasanya, teks berwarna
biru dan bergaris bawah serta ketika Anda mengklik sebuah hyperlink maka komputer
akan menuju ke halaman web tersebut dan menampilkannya di web browser. Agar lebih
mendalami materi mengenai teknologi aplikasi web, mari simak materi berikut.

Gambar 1.1 Logo World Wide Web

Sumber: Jemastock, 2017

A. Teknologi Aplikasi Web

Bahasa standar web yang didefinisikan dan dikelola penggunaanya oleh World Wide Web
Consurtium (W3C) merupakan Hypertext Markup Language (HTML) yang dibuat dan
dikembangkan oleh Tim Barners LEE dan dipopulerkan browser Mosaic. Muncul berbagai
versi HTML dengan berbagai macam fitur selama tahun 90-an. Berikut uraian versi HTML.
1. Versi 1.0
Setelah adanya HTML, versi ini adalah versi pertama yang memiliki kemampuan
pada teks dalam cetak tebal, cetak miring, heading, paragraph, hypertext, dan list.
Kemudian, adanya wrapping tidak memperbolehkan peletakan teks di sekeliling
peletakan image pada dokumen.

2 Pemrograman Web dan Perangkat Bergerak

2. HTML Versi 2.0
HTML ini dirilis pada tanggal 14 Januari 1996 dengan beberapa kemampuan
tambahan seperti penambahan form. Hal ini menjadi pionir untuk membuat sebuah
web yang interaktif.
3. HTML Versi 3.0
HTML ini dirilis pada tanggal 18 Desember 1997 yang dikenal dengan HTML+. Versi
ini memiliki beberapa vitur tambahan seperti fitur table dalam paragraph.
4. HTML Versi 3.2
HTML ini dirilis pada buan Mei 1998 yang merupakan versi terbaru penyempurnaan
dari versi 3.0.
5. HTML Versi 4.0
HTML ini dirilis pada tanggal 24 Desember 1999 dengan penambahan beberapa
fitur, seperti adanya link, imagemaps, dan image.
6. HTML Versi 5.0
HTML ini dirilis pada tahun 2009 yang menjadi standar baru untuk HTML, XHTML,
dan DOM HTML. HTML5 ini merupakan proyek kerja sama antara W3C (World Wide
Web Consurtium) dan WHATG (Web Hypertext Application Technology Working
Group). Spesifikasi HTML5 belum final saat ini, tetapi diyakini oleh banyak orang
akan menjadi standar yang diterima di masa depan.

Gambar 1.2 Logo HTML versi 5

Sumber: Ilmu Backlink, 2019

B. Jenis dan Konsep Web

Berikut merupakan penjelasan dari jenis-jenis web dan konsep web browser yang sering
digunakan.
1. Jenis Web dari Kontennya
Pada dasarnya, web jika digolongkan dari kontennya menjadi web statis dan web
dinamis. Adapun dari kedua golongan tersebut, perbedaanya dijelaskan pada uraian
berikut.
a. Web statis
Web statis adalah web yang konten atau isinya tidak berubah-ubah. Maksudnya,
web tersebut jarang diperbarui kontennya oleh pemilik web tersebut. Jika
diperbarui kontennya, script dokumen HTML harus diubah atau dengan kata lain
web tersebut tidak mempunyai database dan halaman admin untuk mengubah
isi kontennya. Dengan demikian, dibutuhkan orang yang telah paham mengenal
script HTML dan CSS. Web statis biasanya digunakan untuk web company profile

Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 3

 dan search engine. Kedua jenis web tersebut pada dasarnya memang jarang
diperbarui isi kontennya.

Gambar 1.3 Web statis

Sumber: Harmoni Permata, t.t.
b. Web dinamis
Web dinamis adalah web yang kontennya dapat diubah-ubah setiap saat
tanpa perlu repot mengubah script dokumen HTML. Web ini biasanya memiliki
database dan halaman administrator. Database digunakan untuk menyimpan
konten-konten yang di-input-kan oleh administrator, sedangkan halaman
administrator digunakan oleh admin web untuk menambah, mengedit, serta
menghapus konten web. Dalam pembuatannya, web dinamis telah disisipi script
pemrograman web seperti PHP atau ASP untuk mendukung proses input dan
output data.

Gambar 1.4 Teknologi web dinamis

Sumber: ÖZLÜ, 2018

Gambar 1.5 Teknologi web

Sumber: Harmoni Permata, t.t.
Dalam mengubah konten web dinamis tidak diperlukan pemahaman
tentang bahasa pemrograman web karena telah disediakan halaman
administrator untuk mengubah konten web tersebut. Hal yang perlu dipahami
adalah fungsi-fungsi dari menu yang terdapat pada halaman administrator.

4 Pemrograman Web dan Perangkat Bergerak

 Semakin banyaknya pemakaian aplikasi dengan rancang bangun bahasa
pemrograman yang berbeda maka menimbulkan potensi banyaknya data
yang dibuat bermacam-macam ekstensi. Sementara itu, dalam berbagai kasus
saat ini, Anda telah menggunakan sebuah jaringan dalam berbagi data dan
Anda membutuhkan informasi dari data-data yang beragam. Oleh karena itu,
muncul beberapa teknologi yang dapat menghubungkan data dari satu aplikasi
dengan aplikasi lainnya, salah satunya yang terbaru mulai digunakan adalah
web service.
Menggunakan web service dapat memungkinkan suatu aplikasi mengakses
data dari aplikasi lain tanpa harus berhubungan langsung dengan database
aplikasi tersebut. Pemanggilan web service sebenarnya sama seperti pada web
umum biasanya yaitu dengan mengakses URL yang disediakan. Namun, hal
yang membedakan adalah web service memberikan informasi atau data yang
dibutuhkan oleh request sesuai dengan parameter yang diberikan request
tersebut.
Konsep request dan respon adalah konsep utama dalam aplikasi web
sehingga pada dasarnya web service adalah pemberi respons dari request yang
ada dengan memberikan hasil dalam bentuk/format yang mampu dikenali
oleh setiap perangkat/bahasa pemrograman. Adanya web service, keamanan
data akan lebih terjamin karena tidak ada koneksi langsung dari luar ke dalam
database suatu aplikasi. Setiap hasil yang diberikan oleh web service adalah
data yang memiliki format. Format tersebut biasanya adalah format yang dapat
dikenali oleh setiap bahasa pemrograman.

Gambar 1.6 Konsep transaksi web klien dengan web server

Sumber: Silvia, 2019
2. Jenis Web dari Teknologinya
Teknologi web programming dibagi menjadi dua sebagai berikut.
a. Client side web programming
Client side scripting merupakan salah satu jenis bahasa pemrograman web
yang proses pengolahannya dilakukan di sisi client. Proses penerjemahan
atau pengolahannya dilakukan oleh web browser sebagai client-nya. Di dalam
web browser terdapat library yang mampu menerjemahkan semua perintah
di halaman web yang menggunakan client side scripting. Library ini dapat
disebut web engine yang dimiliki setiap web browser. Namun, web engine
yang berbeda-beda terkadang membuat tampilan layout web sering berbeda
disetiap browser. Dalam upaya menghindari hal tersebut, sebaiknya gunakan
web browser yang telah disertifikasi oleh World Wide Web Consortium (W3C).
Contoh dari client side scripting ini, di antaranya HTML, XHTML,  CSS,  dan
JavaScript.

Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 5

 b. Server side web programming
Server side scripting merupakan bahasa pemrograman web yang pengolahannya
dilakukan dalam server. Artinya, web server tersebut merupakan web yang telah
terintegrasi oleh web engine. Di sini, peran web engine adalah memproses
semua script yang ada termasuk kategori client side scripting. Web engine
biasanya harus diinstal dalam komputer terlebih dahulu dari bagian terpisah
web server. Contoh dari server side scripting, di antaranya
1) Active Server Pages (ASP);
2) Hypertext Preprocessor (PHP); dan
3) Java Sever Pages (JSP).
3. Macam-Macam Browser
Berikut merupakan jenis-jenis browser yang sering digunakan.
a. Mozilla Firefox
Firefox adalah browser dengan pengguna yang cukup banyak. Menurut browser
statistics yang diambil dari w3schools, browser dengan logo rubah berwarna
oranye ini memiliki pengguna sebesar 28,5% yang merupakan posisi kedua
setelah Google Chrome.

Gambar 1.7 Logo Mozilla Firefox

Sumber: Martell, 2013
Kelebihan
Kelebihan Mozilla Firefox sebagai berikut:
1) banyak fitur tambahan (adds-on) seperti kepingan puzzle. Adds-on dapat
dibongkar pasang sesuai dengan kebutuhan user;
2) bandel sehingga cocok untuk membuka situs-situs multimedia;
3) update yang cukup mudah; dan
4) sistem security yang cukup kuat.
Kekurangan
Kekurangan Mozilla Firefox sebagai berikut.
1) Loading lama saat mulai start jika banyak adds-on yang terinstal.
2) Dalam merender javascript, Firefox masih kalah cepat dengan Google
Chrome, Safari, dan Opera.
3) Membuka situs-situs multimedia seperti Youtube dan Metacafe memang
lebih cocok memakai Firefox. Download managernya lebih baik daripada
yang lain karena masih bekerja ketika browser ditutup. Hal tersebut cocok
bagi yang suka download dengan file-file besar.

6 Pemrograman Web dan Perangkat Bergerak

 4) Terkadang crash secara tiba-tiba karena management memory yang kurang
baik.
b. Google Chrome
Browser andalan milik raksasa iklan Google ini sebenarnya memulai debutnya
dari engine Webkit yang sama-sama dikembangkan oleh Apple, KDE, Nokia,
RIM, Palm, dan Google sendiri. Chrome adalah browser yang paling banyak
penggunannya yaitu sebesar 51,7%. Hal ini tidak dapat dipungkiri karena
Chrome adalah browser yang paling up to date dalam menyesuaikan support-
nya terhadap HTML 5 dan CSS3.

Gambar 1.8 Logo Google Chrome

Sumber: Logos-world.net, 2020
Kelebihan
Berikut kelebihan dari Google Chrome.
1) Ringan dan gesit ketika start pertama kali dan berpindah tab.
2) Desainnya simpel, minimalis, dan praktis sehingga halaman situs yang
sedang dibuka akan terlihat lebih lapang dan luas. Cocok untuk komputer/
PC yang berlayar mini/kecil seperti netbook atau lainnya.
3) Update sering, cepat, dan mudah.
4) Pengguna Google Chrome akan dimanjakan oleh fasilitas milik Google.
5) Sistem security kuat, saat ini menjadi browser yang paling tahan terhadap
serangan hacker.
6) Terintegrasi dengan Google Search. Dalam mencari informasi via Google
cukup memasukkan kata kunci dalam address bar Google Chrome karena
lebih simpel dan praktis.
7) Banyak fitur tambahan (adds-on/extensions) yang dapat dibongkar pasang
sesuai dengan kebutuhan, bahkan banyak adds-on/extensions yang
diadopsi dari Firefox.
8) Skin/theme dapat diganti karena menyediakan lumayan banyak dan
bervariasi.
9) Bagi pengguna Gmail (Google Mail) akan dimanjakan dengan tab bookmark
yang terhubung ke fitur-fitur milik Google yang dapat diakses di mana saja
dan kapan pun.
10) Chrome dapat membuka halaman website yang dikhususkan untuk ponsel/
hp.

Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 7

 11) Terintegrasi dengan Google Translate sehingga akan lebih memudahkan
Anda untuk menerjemahkan halaman yang sedang dibuka ke berbagai
bahasa termasuk bahasa Indonesia.
12) Lebih mudah untuk edit kode HTML terutama dalam mencari kode tertentu.
Kekurangan
Kekurangan Google Chrome sebagai berikut:
1) jika diintegrasikan dengan Internet Download Manager (IDM) kadang
terjadi hang/crash;
2) error saat membaca CSS termasuk java script;
3) terdapat gambar yang tidak dapat dibuka (tidak nampak);
4) tidak dapat membuka situs/halaman tertentu; dan
5) sedikit lambat jika dipasang terlalu banyak adds-on/extensions.
c. Internet Explorer
Internet Explorer merupakan hal yang tidak asing di telinga Anda, khususnya
yang berkutat dengan web development browser ini. Default browser ber-engine
trident pada sistem operasi Windows ini memang memiliki beberapa history
yang tidak bagus dalam pengembangannya akibat banyaknya celah keamanan
yang terdapat di dalamnya. Aplikasi ini memang tidak menggunakan versi IE8
yang sekarang lebih baik, tetapi versi IE6 dan IE7 yang masih banyak memiliki
inkompatibilitas dengan kemajuan teknologi web sekarang ini. Sementara
pihak Microsoft mengembangkan IE9 yang diklaim semakin membaik dari IE8,
Anda masih dapat menggunakan versi 8 dari internet explorer ini walaupun
memang tidak direkomendasikan.
Kelebihan
Kelebihan dari Internet Explorer, yaitu
1) menyediakan add ons walaupun tidak sebanyak Firefox;
2) khusus IE8, tampilannya lebih elegan dan menarik;
3) intergrasi dengan aplikasi Windows seperti Office atau Windows Live; dan
4) bagi pengguna Windows Live akan dimanjakan dengan tab bookmark
yang terhubung ke fitur-fitur milik Windows Live.
Kekurangan
Kekurangan Internet Explorer sebagai berikut.
1) Gagal membaca script dalam beberapa halaman situs (khususnya CSS).
2) Berat saat awal start dan saat membuka tab baru.
3) Komponen activeX yang sering kali membuat keamanan browsing Anda
berkurang.
4) Proses update melalui Windows update.
5) Browser ini kurang bandel sehingga jarang memakai IE8 karena pernah
terkena virus saat browsing menggunakan ini. IE sebagai penguasa pasar
web browser memang menjadi target utama serangan para hacker.
4. Konsep Web Server
Web server merupakan software yang memberikan informasi layanan data yang
memiliki fungsi menerima permintaan dari HTTP ataupun HTTPS dari klien yang
disebut dengan browser web yang akan mengirimkan kembali hasilnya dengan
bentuk halaman-halaman web.
a. Cara kerja web server

8 Pemrograman Web dan Perangkat Bergerak

 Web server adalah software yang memberikan informasi layanan data yang
berfungsi menerima permintaan dari HTTP ataupun HTTPS dari klien yang
disebut dengan browser web. Hal tersebut akan mengirimkan kembali hasilnya
dalam bentuk halaman-halaman web.

Gambar 1.9 Cara kerja web server

Sumber: Suryana, 2018
Perangkat lunak web server terdapat pada komputer server. Dalam
komputer ini, data-data website tersimpan dengan rapi. Hal tersebut sama
halnya dengan komputer client, komputer server harus terhubung dengan
jaringan internet atau jaringan intranet untuk dapat diakses oleh client.
Pada saat client (browser) meminta data web page kepada server maka
instruksi permintaan data oleh browser tersebut akan dikemas di dalam TCP
yang merupakan protokol transport dan dikirim ke alamat yang dalam hal ini
merupakan protokol berikutnya yaitu Hyper Text Transfer Protocol (HTTP) dan/
Hyper Text Transfer Protocol Secure (HTTPS). Data yang diminta dari browser
ke web server disebut dengan HTTP request yang kemudian akan dicarikan
oleh web server di dalam komputer server. Jika ditemukan, data tersebut akan
dikemas oleh web server dalam TCP, lalu dikirim kembali ke browser untuk
ditampilkan. Data yang dikirim dari server ke browser dikenal dengan “HTTP
response”. Jika data yang diminta oleh browser tersebut ternyata tidak ditemukan
oleh web server, web server akan menolak permintaan tersebut dan browser
akan menampilkan notifikasi error 404 atau Page Not Found.
b. Jenis-jenis web server
Berikut merupakan jenis-jenis web server.
1) Apache
Apache termasuk jenis freeware yang akan menguntungkan Anda. Selain
itu, jenis server ini lebih mudah diinstal dibandingkan beberapa jenis
server yang lain. Apache dikenal mampu tetap beroperasi di berbagai
platform sistem operasi yang ada sehingga dapat digunakan oleh banyak
orang. Dalam mengatur konfigurasi jenis server ini cukup mudah, terdapat
empat file konfigurasi yang dapat digunakan. Selain itu, cukup mudah
menambahkan peripheral ke bagian platform web servernya.

Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 9

 2) Web Server Microsoft IIS
IIS merupakan kepanjangan dari Internet Information Service. Web server
ini memiliki banyak fitur yang dapat digunakan, di antaranya File Transfer
Protocol (FTP), pengelola web, NNTP, dan Ghoper. Server ini mendukung
sistem operasi untuk Windows NT 7, Windows Server 2003, Windows
2000, dan Windows XP. Dalam Kerja PHP, IIS lebih stabil, cepat, dan baik.
IIS memiliki sistem diagnotistik yang dapat digunakan untuk melakukan
pengecekan terhadap kesalahan. Hal tersebut sangat kompatibel dengan
Windows karena memang IIS dirilis oleh Microsoft.
3) Instalasi paket web server
Berikut cara instalasi aplikasi paket web server.
Download XAMPP melalui website Apache Friend. Lakukan instalasi setelah
Anda selesai mengunduh. Selama proses instalasi mungkin Anda akan
melihat pesan yang menanyakan apakah Anda yakin akan menginstalnya.
Silakan tekan Yes untuk melanjutkan instalasi.

Gambar 1.10 Instalasi paket web server

Sumber: Kuswantoro dan Rudi, 2020
Klik tombol Next. Pada tampilan selanjutnya akan muncul pilihan
mengenai komponen mana dari XAMPP yang ingin dan tidak ingin Anda
instal. Beberapa pilihan seperti Apache dan PHP adalah bagian penting
untuk menjalankan website dan akan otomatis diinstal. Silakan centang
MySQL dan phpMyAdmin, serta pilihan lainnya dibiarkan.

10 Pemrograman Web dan Perangkat Bergerak

 Gambar 1.11 Pilihan komponen dari XAMPP
Sumber: Kuswantoro dan Rudi, 2020
Berikutnya, silakan pilih folder tujuan di mana XAMPP ingin Anda
instal, pada tutorial ini di direktori C:\xampp.

Gambar 1.12 Pilih folder tujuan

Sumber: Kuswantoro dan Rudi, 2020
Pada halaman selanjutnya akan ada pilihan apakah Anda ingin
menginstal Bitnami untuk XAMPP, dalam hal ini nantinya dapat Anda
gunakan untuk instal WordPress, Drupal, dan Joomla secara otomatis.

Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 11

 Gambar 1.13 Pilihan menginstal Bitnami
Sumber: Kuswantoro dan Rudi, 2020
Pada langkah ini proses instalasi XAMPP akan dimulai. Silakan klik
tombol Next. Setelah berhasil diinstal, akan muncul notifikasi untuk
langsung menjalankan control panel. Silakan klik Finish. Silakan buka
aplikasi XAMPP, kemudian klik tombol Start pada Apache dan MySQL.
Jika berhasil dijalankan, Apache dan MySQL akan berwarna hijau seperti
gambar berikut ini.

Gambar 1.14 Proses instalasi XAMPP

Sumber: Kuswantoro dan Rudi, 2020
` Dalam melakukan pengecekan, silakan akses link berikut melalui
browser Anda http://localhost.

12 Pemrograman Web dan Perangkat Bergerak

C. Macam-Macam Editor Teks
Text editor merupakan sebuah software yang digunakan oleh seorang programmer
dalam menulis kode program. Text editor umumnya hanya mempunyai fungsi menulis
kode program tanpa disertai compiler yang terintegrasi. Di dalam text editor biasannya
terdapat fitur umum, seperti syntax highlighting, search, replace, memberikan komentar
pada sebuah blok kode program, code folding, line number, line marking, dan snippet.
1. Notepad
Notepad merupakan text editor asli bawaan Windows. Bagi pengguna sistem
operasi Windows pasti terbiasa menggunakan aplikasi ini. Biasanya untuk pemula
direkomendasikan menggunakan Notepad karena memiliki tampilan yang
sederhana dan membuat mudah dalam menuliskan kode program.
2. Notepad++
Notepad++ hampir sama dengan Notepad bawaan Windows, tetapi memiliki fitur
yang banyak daripada Notepad, di antaranya memiliki syntax highlighting, syantax
folding, user defined syntax highlighting and folding, perl compatible regular
expression search/replace, customizable GUI, document map, auto completion,
multi-language, enviroment supported, bookmark, macro recording and playback,
launch with different argument, multi-editing, column-mode editing, dan line
number. Notepad++ dapat berjalan disebagian besar POXIX compatible OS termasuk
Linux, FreeBSD, MacOS-X, OpenBSD, dan Solaris.

Tugas Individu
1. Lakukan instalasi web browser Mozilla Firefox.
2. Tuliskan langkah-langkah dalam melakukan instalasi tersebut.
3. Tuliskan kendala Anda saat melakukan instalasi.
4. Presentasikan hasil tugas Anda.

Rangkuman
Secara terminologi, website adalah kumpulan dari halaman-halaman situs yang biasanya
terangkum dalam sebuah domain atau subdomain. Website terletak di dalam World Wide
Web (WWW) di internet. Pada dasarnya, jika digolongkan dari kontennya, web terdiri atas
web statis dan web dinamis sehingga teknologi pemrograman web dibedakan menjadi
dua. Pertama adalah client side programming yang merupakan salah satu jenis bahasa
pemrograman web yang proses pengolahannya dilakukan di sisi client. Sementara itu,
yang kedua adalah server side programming adalah jenis bahasa pemrograman web
yang proses pengolahannya dilakukan di sisi server sehingga di sisi server terdapat
layanan yang disebut dengan web servis atau web server. Web server adalah software
yang memberikan informasi layanan data dan memiliki fungsi menerima permintaan dari
HTTP ataupun HTTPS dari klien yang disebut browser web, kemudian akan dikirimkan
kembali hasilnya dalam bentuk halaman-halaman web.

Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 13

Uji Kompetensi

A. Soal Pilihan Ganda

Pilihlah jawaban yang paling tepat.
1. Web statis biasanya digunakan untuk ....
a. perorangan
b. company profile
c. Facebook
d. YouTube
e. blogspot
2. Kumpulan dari halaman-halaman situs yang biasanya terangkum dalam sebuah
domain atau subdomain adalah ....
a. buku
b. jurnal
c. tulisan
d. karya ilmiah
e. website
3. WWW terdiri atas seluruh situs web yang tersedia kepada ....
a. hanya satu orang
b. orang tertentu
c. pejabat
d. publik
e. balita
4. HTML ini dirilis pada tanggal 24 Desember 1999 dengan penambahan beberapa
fitur, seperti adanya link, imagemaps, dan image merupakan HTML versi ....
a. 5.0
b. 4.0
c. 3.0
d. 2.0
e. 1.0
5. Berikut kelebihan dari Mozilla Firefox, kecuali ....
a. banyak fitur tambahan (adds-on) seperti kepingan puzzle
b. bandel, cocok untuk membuka situs-situs multimedia
c. update yang cukup mudah
d. crash secara tiba-tiba sehingga memori baik
e. sistem security yang cukup kuat
6. Web yang konten atau isinya tidak berubah-ubah adalah ....
a. web statis
b. web perorangan
c. web dinamis
d. blogspot
e. wikipedia

14 Pemrograman Web dan Perangkat Bergerak

7. Dalam penggunaan untuk menyimpan konten-konten yang di-input-kan oleh
administrator adalah ....
a. memori
b. HTML
c. CSS
d. teknologi
e. database
8. Client side scripting merupakan salah satu jenis bahasa pemrograman web yang
proses pengolahannya dilakukan di sisi ....
a. client
b. server
c. side
d. scripting
e. web
9. Berikut yang bukan termasuk dalam contoh client side scripting adalah ....
a. HTML
b. XHTML
c. Chrome
d. CSS
e. JavaScript
10. Berikut yang bukan termasuk dalam kekurangan Google Chrome adalah ....
a. tidak dapat membuka situs/halaman tertentu
b. jika diintegrasikan dengan Internet Download Manager (IDM) kadang terjadi
hang/crash
c. error saat membaca CSS termasuk java script
d. terdapat gambar yang dapat dibuka
e. sedikit lambat jika dipasang terlalu banyak adds-on/extensions
11. Perangkat lunak web server terdapat pada ....
a. server
b. komputer server
c. side
d. scripting
e. TCP
12. Data yang dikirim dari server ke browser dikenal dengan ....
a. HTTPS
b. HTTP respons
c. TCP
d. web server
e. client
13. Jika data yang diminta oleh browser tersebut ternyata tidak ditemukan oleh
web server, web server akan menolak permintaan tersebut dan browser akan
menampilkan ....
a. Mozilla Firefox
b. tampilan putih
c. Page Not Found
d. browser
e. data

Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 15

14. Web server yang dikenal mampu tetap beroperasi di berbagai platform sistem
operasi yang ada sehingga dapat digunakan oleh banyak orang adalah ....
a. IIS
b. Notepad
c. Internet explorer
d. Mozilla Firefox
e. Apache
15. Java Sever Pages (JSP) merupakan contoh ....
a. server side scripting
b. client side scripting
c. web browser
d. web server
e. editor teks

B. Soal Esai
Jawablah dengan tepat dan benar.
1. WWW terdiri atas ....
2. Semua publikasi dari website-website dapat membentuk ....
3. HTML ini dirilis pada tanggal 14 Januari 1996 dengan beberapa kemampuan
tambahan seperti penambahan form. Versi HTML yang dimaksud adalah ....
4. Web statis biasanya digunakan untuk ....
5. Desainnya simpel, minimalis, dan praktis sehingga halaman situs yang sedang dibuka
akan terlihat lebih lapang dan luas. Cocok untuk komputer/PC yang berlayar mini/
kecil seperti netbook atau lainnya merupakan kelebihan dari ....
6. Default browser ber-engine trident pada sistem operasi Windows memang memiliki
beberapa history yang tidak bagus dalam pengembangannya akibat ...
7. Pada saat client (browser) meminta data web page kepada server maka ....
8. Text editor umumnya hanya mempunyai fungsi menulis kode program tanpa disertai
....
9. IIS memiliki sistem diagnotistik yang dapat digunakan untuk ....
10. Di dalam web browser terdapat library yang mampu ....

C. Soal Esai Uraian

Jawablah dengan ringkas dan benar.
1. Jelaskan konsep World Wide Web (WWW).
2. Jelaskan konsep teknologi aplikasi web.
3. Sebut dan jelaskan jenis web dari teknologinya.
4. Sebut dan jelaskan macam-macam browser.
5. Jelaskan cara instalasi aplikasi paket web server.

16 Pemrograman Web dan Perangkat Bergerak