PEMROGRAMAN WEB DAN

PERANGKAT BERGERAK
(C3) KELAS XI

Penulis :
Endik Kuswantoro, S.Kom, MT.
Rudi Nurcahyo, S.Kom

PT. KUANTUM BUKU SEJAHTERA

 PEMROGRAMAN WEB DAN
PERANGKAT BERGERAK
SMK/MAK Kelas XI
Penulis :
Endik Kuswantoro, S.Kom,
MT. Rudi Nurcahyo, S.Kom
Editor : Tim Quantum Book
Perancang sampul : Tim Quantum Book
Perancang letak isi : Tim Quantum Book
Penata letak : Tim Quantum
Book
Ilustrator : Tim Quantum Book
Tahun terbit : 2019
ISBN : 978-623-7216-93-3
Penerbit : PT. Kuantum Buku Sejahtera
Alamat : Jalan Pondok Blimbing Indah Selatan X N6 No 5 Malang - Jawa Timur

Tata letak buku ini menggunakan program Adobe InDesign CS3, Adobe IIustrator CS3, dan
Adobe Photoshop CS3.
Font isi menggunakan Myriad Pro (10 pt)
B5 (17,6 × 25) cm
vi + 238 halaman
© Hak cipta dilindungi oleh undang-undang. Dilarang menyebarluaskan dalam bentuk apapun tanpa izin

ana Sanksi Pelanggaran.

asal 2 ayat (1) atau Pasal 49 ayat (1) dan ayat (2) dipidana dengan pidana masing- masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp1.00
m suatu ciptaan atau barang hasil pelanggaran Hak Cipta atau Hak Terkait sebagaimana dimaksud pada ayat (1) dipidana dengan pidana penjara paling lam
 Kata Pengantar

Puji syukur kami panjatkan ke hadirat Tuhan Yang Maha Esa, yang telah
memberikan anugerah-Nya, sehingga penulis mampu menyelesaikan penulisan buku
pembelajaran untuk SMK/MAK Ini.
Buku ini ditulis sebagai salah satu sumber belajar siswa SMK/MAK kelas XI
untuk mempelajari dan memperdalam materi Pemrograman Web dan Perangkat
Bergerak. Selain itu, buku ini ditulis secara umum dalam rangka ikut serta
mencerdaskan bangsa Indonesia di era perkembangan ilmu pengetahuan dan
teknologi saat ini.
Setiap bab dalam buku ini dilengkapi dengan Kompetensi Inti, Kompetensi Dasar,
Kata Kunci, Tujuan Pembelajaran, Peta Konsep, Aktivitas Siswa, Tugas Siswa, Info,
Rangkuman, Uji Kompetensi, dan Tugas Proyek. Pembahasan materi disajikan
dengan bahasa yang lugas dan mudah kita pahami, dari pembahasan secara umum
ke pembahasan secara khusus.
Dengan demikian, buku ini diharapkan dapat menjadi teman sekaligus menjadi
bacaan yang menyenangkan bagi Anda untuk mempelajari lebih dalam tentang
Pemrograman Web dan Perangkat Bergerak dan menerapkannya dalam kehidupan
sehari-hari untuk diri sendiri dan lingkungan.
Akhirnya, semoga buku pelajaran Pemrograman Web dan Perangkat Bergerak
SMK/MAK Kelas XI ini bermanfaat bagi siswa dan seluruh pembaca dalam memperoleh
pengetahuan. Selamat belajar, semoga sukses.

Penulis

iii
 Daftar Isi

Kata Pengantar.................................................................................................................................................. iii

Daftar Isi ............................................................................................................................................ ...... iv

Bab 1 Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 1

.....................
A. Konsep Word Wide Web................................................................................................... 3
B. Teknologi Aplikasi Web .................................................................................................... 3
C. Macam-macam Browser .................................................................................................. 6
D. Konsep Web Server............................................................................................................ 10
E. Macam-macam Editor Teks ............................................................................................. 13
Uji Kompetensi ............................................................................................................................. 13

Bab 2 Membuat Kode HTML untuk Menampilkan Teks dalam Format

Tertentu
pada Halaman Web ........................................................................................... 17
A. Struktur Dasar HTML (Hyper Text Markup Language) .......................................... 19
B. Menulis Tag HTML dengan Editor Teks ....................................................................... 19
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 ............................................................................................................................. 24

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

Bab 4 Membuat Kode HTML untuk Menampilkan Tampilan Format

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

Bab 5 Membuat Kode HTML untuk Menampilkan Format Kaitan pada

Halaman Web..................................................................................................... 53
A. Konsep Format Kaitan (Link) dalam Halaman Web................................................ 55
B. Format Link Antar Isi pada Suatu Halaman Web..................................................... 56
C. Format Link Antar Halaman Web untuk Membentuk Sitemap ......................... 58
D. Format Target Link, Email, dan Telepon...................................................................... 59
E. Unjuk Kerja ........................................................................................................................... 60
Uji Kompetensi ............................................................................................................................. 65
Bab 6 Form Halaman Web.......................................................................71
A. Konsep Formulir Dalam Halaman Web........................................73
B. Anatomi dari Form...............................................................74
C. Elemen Input Teks pada Formulir Halaman Web............................75
D. Elemen Input Pilihan pada Halaman Web....................................76
E. Elemen Input Tombol...........................................................80
F. Elemen Tambahan...............................................................80
Uji Kompetensi........................................................................82

Bab 7 Style Pada Halaman Web...............................................................87

A. Konsep Layout Dalam Tampilan Halaman Web..............................89
B. Metode Layout Tampilan Halaman Web......................................90
C. Memahami Style pada Halaman Web.........................................92
D. Cascading Style Sheet (CSS)....................................................93
E. Versi CSS.......................................................................... 94
F. Anatomi dari CSS................................................................. 95
G. Cara Kerja Cascading Style Sheet.............................................96
H. Link................................................................................ 99
Uji Kompetensi.......................................................................101

Bab 8 Client Side Scripting Dalam Pemrograman Web...........................103

A. Web Server...................................................................... 105
B. Pengertian Client Side Scripting.............................................106
C. Pengertian Server Side Scripting.............................................107
D. Cara Kerja Server Side Scripting.............................................107
E. Penyisipan Program Client Side ke dalam HTML...........................108
Uji Kompetensi.......................................................................113

Bab 9 Membuat Halaman Web Interaktif Menggunakan Client Side Scripting117

A. Konsep Halaman Web Interaktif.............................................119
B. Keuntungan dan Kerugian Menggunakan Web Interaktif.................119
C. Jenis-jenis Multimedia Interaktif............................................120
D. Client Side Scripting Programming..........................................121
E. Membuat Halaman Web Interaktif dengan Client Side Scripting........123
Uji Kompetensi.......................................................................129

Bab 10 Teknologi Aplikasi Web Server.....................................................133

A. Pengertian Web Server........................................................135
B. Fungsi Web Server..............................................................137
C. Produk Web Server.............................................................138
D. Perangkat Pengembangan Aplikasi Web Server............................141
Uji Kompetensi.......................................................................142

Bab 11 Membuat Kode Program pada Server Side Scripting....................149

A. Konsep Pemrograman di Sisi Server (Server Side Programming)........151
B. Mengenal Nama-Nama Bahasa Pemrograman Web Server................152
 C. Bahasa Pemrograman PHP ............................................................................................. 153
D. Menyisipkan Kode PHP dalam HTML .......................................................................... 154
Uji Kompetensi ............................................................................................................................. 159

Bab 12 Membuat Struktur Kendali Program ............................................................... 163

A. Pengertian Struktur Kendali ........................................................................................... 165
B. Struktur Kendali Percabangan (Pengambilan Keputusan).................................. 165
C. Struktur Kendali Perulangan (Looping)...................................................................... 169
Uji Kompetensi ............................................................................................................................. 173

Bab 13 Membuat Kode Fungsi Dalam Program .......................................................... 179

A. Konsep Fungsi dalam Pemrograman Aplikasi Web di Sisi Server 181
.....................
B. Prosedur Penggunakan Fungsi dalam Pemrograman Web 182
................................
C. Pengertian Argumen dan Parameter dalam Pemrograman Web..................... 186
Uji Kompetensi ............................................................................................................................. 187

Bab 14 Menggunakan Library Standar Dalam Program ............................................ 191

A. Konsep Library dalam Pemrograman Aplikasi Web............................................... 193
B. Penerapan Library dalam Pemrograman PHP ......................................................... 193
C. Kekurangan dalam Penggunaan Library ................................................................... 195
D. Penerapan Standard PHP Library (SPL) ...................................................................... 195
E. Penerapan Library dalam Framework......................................................................... 198
Uji Kompetensi ............................................................................................................................. 199

Bab 15 Memodifikasi Aplikasi Interaktif pada Web .................................................... 203

A. Memodifikasi Aplikasi Interaktif Pada Web............................................................... 205
B. Pembuatan Aplikasi Interaktif dalam Pemrograman Web .................................. 205
Uji Kompetensi ............................................................................................................................. 224

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

A. Konsep Operasi File dalam Pemrograman Web ...................................................... 229
B. Prosedur Operasi Membuka File................................................................................... 229
C. Prosedur Operasi Menutup File .................................................................................... 230
D. Prosedur Operasi Menulis ke File.................................................................................. 230
E. Prosedur Membaca Isi File .............................................................................................. 231
F. Prosedur Operasi Menghapus File ............................................................................... 232
G. Prosedur Menambah Isi File ........................................................................................... 232
H. Prosedur Upload File ......................................................................................................... 233
Uji Kompetensi.......................................................................234

Daftar Pustaka..........................................................................................237
Biodata Penulis.........................................................................................238
 A
mpresentasikan Berbagai Konsep Teknologi Aplikasi W

Kompetensi Dasar
3.1 Memahami konsep teknologi aplikasi web
4.1 Mempresentasikan pelbagai teknologi pengembangan aplikasi web

10 Pemrograman Web dan Perangkat Bergerak Kelas XIBerbagai

Mempresentasikan untuk Konsep Teknologi Aplikasi Web
SMK/MAK 1
 Tujuan Pembelajaran
Setelah mempelajari bab ini, peserta didik mampu:
menjelaskan konsep world wide web (www)
menjelaskan konsep teknologi aplikasi web
menjelaskan konsep web server
menjelaskan aplikasi web server
menjelaskan jenis-jenis web browser
menjelaskan jenis-jenis editor teks
mempresentasikan konsep world wide web
mempresentasikan konsep teknologi aplikasi web
mendeskripsikan konsep web server
menginstalasi paket aplikasi web server
mempresentasikan jenis-jenis web browser
mempresentasikan jenis-jenis editor teks

Peta Konsep
Client Side

Konsep Word Wide Web

Server Side

Teknologi Aplikasi Web

Web Statis
Mempresentasikan Pelbagai Konsep Teknologi Aplikasi Web
Jenis-jenis Web Browser

Web Dinamis

Konsep Web Server

Instalasi Web Server

Jenis Editor Teks Cara Kerja Web Server

Jenis-jenis Web Server

 Materi Pembelajaran

A. Konsep Word Wide Web

S ecara terminologi, website adalah kumpulan dari halaman-halaman situs yang

biasanya terangkum dalam sebuah domain atau subdomain yang mana tempatnya
berada di dalam World Wide Web (WWW) di Internet. WWW terdiri dari seluruh situs
web yang tersedia kepada publik. Halaman-halaman sebuah situs web (web page)
diakses dari sebuah URL yang menjadi “akar”(root) yang disebut homepage (halaman
induk; sering diterjemahkan menjadi“beranda” atau “halaman muka”. URL mengatur web
page untuk menjadi sebuah hierarki, meskipun hyperlink-hyperlink yang ada di
halaman tersebut mengatur para pembaca dan memberitahu mereka susunan
keseluruhan dan bagaimana arus informasi ini berjalan. Sebuah dokumen web page
ditulis dalam format HTML (Hyper Text Markup Language). Hal yang hampir selalu bisa
diakses melalui HTTP yaitu protokol yang menyampaikan informasi dari server website

untuk ditampilkan kepada para pemakai melalui web browser.

Gambar 1. Logo World Wide Web
Sumber: http://gg.gg/e20o9
Semua publikasi dari website-website tersebut dapat membentuk sebuah
jaringan informasi yang sangat besar. Web page layaknya sebuah buku yang dapat
menampung berbagai informasi tentang banyak hal, baik bersifat komersil maupun
non komersil. Melalui media web inilah, seseorang dapat memberikan informasi
tertentu kepada orang lain yang berada di seluruh dunia. Salah satu keunggulan World
Wide Web adalah hyperlink. Hyperlink adalah teks yang biasanya berwarna biru dan
bergaris bawah yang dapat di klik untuk menuju ke halaman web yang lain. Hyperlink
ini dapat diletakkan di mana saja di dalam halaman web dan boleh diatur untuk
menuju ke mana saja di seluruh web. Saat pengguna mengunjungi sebuah halaman
web, pengguna dapat secara langsung mengklik sebuah hyperlink sehingga komputer
tersebut akan mengambil (mendownload) situs/halaman pada hyperlink tersebut dan
menampilkannya di web browser.

B. Teknologi Aplikasi Web

HTML (Hyper Text Markup Language) merupakan bahasa standar web yang
didefinisikan dan dikelola penggunaannya oleh W3C (World Wide Web Consurtium).
HTML dibuat dan dikembangkan oleh Tim Berners-Lee yang selanjutnya bahasa
tersebut dipopulerkan oleh browser Mosaic. Selama tahun 90-an, telah muncul berbagai
versi HTML dengan berbagai macam fiturnya. Versi HTML yang ada antara lain
sebagai berikut.

Mempresentasikan Berbagai Konsep Teknologi Aplikasi

Web
3
1) HTML Versi 1.0
HTML Versi 1.0 merupakan versi pertama setelah lahirnya HTML dan
mempunyai kemampuan untuk heading, paragraph, hypertext, list, cetak tebal, dan
cetak miring pada

Pemrograman Web dan Perangkat Bergerak Kelas XI untuk

4 SMK/MAK
 teks. Selain itu, HTML Versi 1.0 juga memiliki kemampuan wrapping, yaitu
dukungan peletakan image pada dokumen dengan tidak memperbolehkan
peletakan teks di sekelilingnya.
2) HTML Versi 2.0
HTML Versi 2.0 diliris 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 Versi 3.0 diliris pada tanggal 18 Desember 1997, yang dikenal dengan
HTML+. Versi 3.0 ini memiliki beberapa vitur tambahan, seperti fitur table dalam
paragraph.
4) HTML Versi 3.2
HTML Versi 3.2 diliris pada buan Mei 1998 yang merupakan versi terbaru dan
penyempurnaan dari versi 3.0.
5) HTML Versi 4.0
HTML Versi 4.0 diliris pada tanggal 24 Desember 1999 dengan penambahan
beberapa fitur, seperti adanya link, imagemaps, image, dan lain-lain.
6) HTML Versi 5.0
HTML Versi 5.0 diliris pada tahun 2009 yang menjadi standar baru untuk HTML,
XHTML, dan DOM HTML. HTML 5 ini merupakan proyek kerja sama antara W3C
(World Wide Web Consurtium) dan WHATG (Web Hypertext Application Technology
Working Group). Saat ini, spesifikasi HTML 5 belum final. Namun, banyak orang
yang meyakini bahwa HTML 5 akan menjadi standar yang diterima di masa

depan.
Gambar 2. Logo HTML Versi 5
Sumber: http://gg.gg/e20m8
Berdasarkan kontennya, web dapat digolongkan menjadi dua, yaitu web statis dan
web dinamis. Berikut ini perbedaan web statis dan web dinamis.
a. Web Statis
Web statis adalah web yang kontennya atau isinya tidak berubah-ubah.
Maksudnya adalah konten pada web tersebut jarang di-update oleh pemilik
web tersebut. Jika kontennya di update, maka harus mengubah script
dokumen HTML-nya. Dengan kata lain, web tersebut tidak mempunyai database
dan halaman administrator untuk mengubah kontennya. Untuk itu, dibutuhkan
orang yang paham mengenai script HTML dan CSS. Web statis biasanya digunakan
untuk web company profile dan search engine. Kedua jenis web tersebut pada
dasarnya memang jarang di-update kontennya.
b. Web Dinamis
Web dinamis adalah web yang kontennya dapat diubah setiap saat tanpa
perlu mengubah script dokumen HTML-nya. Web ini biasanya memiliki
database dan juga halaman administrator. Database digunakan untuk menyimpan
konten-konten yang diinputkan oleh administrator, sedangkan halaman
administrator digunakan oleh admin web untuk menambah, mengedit, serta
menghapus konten web.
Dalam pembuatannya, web dinamis sudah disisipi script pemrograman web,
seperti PHP atau ASP guna mendukung proses input dan output data.

Gambar 3. Teknologi Web Dinamis Video 1. Teknologi Web

Sumber: http://gg.gg/e20kx Sumber: http://gg.gg/e20ga
Untuk mengubah konten pada web dinamis, seseorang tidak perlu memahami
bahasa pemrograman web karena sudah disediakan halaman administrator untuk
mengubah konten web tersebut. Hal yang perlu dipahami adalah fungsi-fungsi
dari menu yang terdapat pada halaman administrator. Semakin banyak
pemakaian aplikasi dengan rancang bangun bahasa pemrograman yang berbeda,
maka berpotensi semakin banyak data yang dibuat bermacam-macam ekstensi.
Dalam berbagai kasus, apabila pengguna menggunakan sebuah jaringan
dalam berbagi data, maka pengguna membutuhkan informasi dari data-data yang
beragam. Maka dari itu, muncul beberapa teknologi yang dapat
menghubungkan data dari satu aplikasi dengan aplikasi lainnya. Salah satu yang
terbaru dan mulai digunakan adalah Web Service. Penggunaan web service
memungkinkan suatu aplikasi dapat mengakses data dari aplikasi lain tanpa
harus berhubungan langsung dengan database aplikasi tersebut. Pemanggilan
web service sebenarnya sama seperti pada web umum, yaitu dengan mengakses
URL yang disediakan. Namun, hal yang membedakan adalah web service
memberikan informasi atau data yang dibutuhkan oleh sang request sesuai
dengan parameter yang berikan sang request tersebut. Konsep request dan
respon adalah konsep utama dalam aplikasi web. Pada dasarnya, web service
adalah pemberi respon dari request yang ada dengan memberikan hasil dengan
bentuk/format yang mampu dikenali oleh setiap perangkat atau bahasa
pemrograman. Dengan adanya web service, keamanan data akan lebih terjamin
karena tidak ada koneksi langsung dari luar ke dalam database suatu aplikasi.

Hasil yang diberikan oleh web service adalah data yang memiliki format yang
dapat dikenali oleh setiap bahasa pemrograman.
Gambar 4. Konsep Transaksi Web Client dengan Web Server
Sumber: http://gg.gg/e211k
Teknologi web programming dibagi menjadi dua jenis, yaitu Client-side
Web Programming dan Server-side Web Programming. Berikut penjelasan
mengenai dua jenis teknologi web programming.
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. Dalam web
browser, terdapat library yang mampu menerjemahkan semua perintah di
halaman web yang menggunakan client side scripting. Library ini juga disebut
web engine yang dimiliki setiap web browser. Web engine yang berbeda-beda
terkadang membuat tampilan layout web berbeda di setiap browser. Untuk
menghindari hal itu, sebaiknya menggunakan web browser yang telah
disertifikasi oleh world wide web consortium (W3C). Contoh client side
scripting antara lain HTML, XHTML, CSS, JavaScript, XML, dan JQUERY.
b. Server-side Web Programming
Server side scripting merupakan bahasa pemrograman web yang
pengolahannya dilakukan dalam server. Maksudnya ialah web server telah
terintegrasi oleh web engine. Dalam hal ini, peran web engine ialah
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 server side scripting ialah Active Server Pages
(ASP), PHP: Hypertext Preprocessor (PHP), Java Sever Pages (JSP), ColdFusion,
Lasso, dan SSI.

C. Macam-macam Browser

Berikut ini merupakan jenis-jenis browser yang sering digunakan.

a. Mozilla Firefox
Mozilla 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 5. Logo Mozilla Firefox

Sumber: http://gg.gg/e2164
Kelebihan Mozilla Firefox antara lain sebagai berikut.
1) Banyak fitur tambahan (add ons). Jika diibaratkan seperti kepingan puzzle, maka
add ons ini bisa dibongkar pasang sesuai dengan kebutuhan pengguna.
2) Bandel, cocok untuk membuka situs-situs multimedia.
3) Updatenya yang cukup mudah.
4) Sistem security yang cukup kuat.
Kekurangan Mozilla Firefox antara lain sebagai berikut.
1) Loading lama saat mulai start (jika banyak add ons yang terinstal).
2) Untuk merender Javascript, Firefox masih kalah cepat dengan Google
Chrome, Safari, dan Opera.
3) Firefox cocok digunakan untuk membuka situs-situs multimedia (seperti
Youtube dan Metacafe). Download manager-nya juga lebih bagus karena tetap
bekerja ketika browser ditutup sehingga praktis bagi pengguna yang suka
mengunduh file-file yang besar.
 4) Terkadang bisa 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
penggunanya, yaitu sebesar 51.7%. Hal ini tidak dapat dipungkiri karena Chrome
adalah browser yang paling up to date dalam menyesuaikan supportnya

terhadap HTML 5 dan CSS3.

Gambar 6. Logo Google
Chrome Sumber:
http://gg.gg/e216y
Kelebihan Google Chrome antara lain sebagai berikut.
1) Ringan dan gesit, termasuk 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.
3) Updatenya sering, cepat, dan mudah .
4) Pengguna Google Chrome akan dimanjakan oleh fasilitas milik Google.
5) Sistem security kuat, sehingga saat ini menjadi browser yang paling tahan
terhadap serangan hacker.
6) Terintegrasi dengan Google Search (untuk mencari informasi via Google,
pengguna cukup memasukkan kata kunci dalam address bar Google
Chrome).
7) Lebih simpel dan praktis.
8) Banyak fitur tambahan (add-ons/extensions) yang bisa dibongkar pasang
sesuai dengan kebutuhan, bahkan banyak juga add-ons/extensions yang
diadopsi dari Firefox.
9) Skin/theme yang lumayan banyak dan bervariasi sehingga bisa diganti
sesuai keinginan.
10) Pengguna Gmail (Google Mail) akan dimanjakan dengan tab bookmark
yang terhubung ke fitur-fitur milik Google yang bisa diakses di mana pun
dan kapan pun .
11) Bisa membuka halaman Wapsite yang dikhususkan untuk ponsel/hp.
12) Terintegrasi dengan Google Translate, sehingga memudahkan pengguna untuk
menerjemahkan halaman yang sedang dibuka ke berbagai bahasa
(termasuk bahasa Indonesia).
13) Lebih mudah untuk edit kode HTML, terutama dalam mencari kode tertentu.
Kekurangan Google Chrome antara lain sebagai berikut.
1) Terkadang terjadi hang/crash jika diintegrasikan dengan Internet Download Manager
(IDM).
2) Error saat membaca CSS, termasuk Javascriptnya.
3) Ada gambar yang tidak bisa dibuka (tidak nampak).
4) Tidak bisa membuka situs/halaman tertentu.
5) Agak lambat jika dipasang terlalu banyak add-ons/extensions.
c. Internet Explorer
Default browser ber-engine trident pada sistem operasi Windows ini
memang memiliki beberapa history yang tidak bagus dalam
pengembangannya. Hal ini merupakan akibat dari banyaknya celah
keamanan yang terdapat di dalamnya. Versi IE8 yang sekarang sudah lebih
baik, namun versi IE6 dan IE7 masih banyak memiliki inkompatibilitas dengan
kemajuan teknologi web sekarang ini. Pihak Microsoft mengembangkan IE9
yang diklaim semakin membaik dari IE8. Pengguna bisa menggunakan versi 8 dari
internet explorer, walaupun memang tidak direkomendasikan. Kelebihan
Internet Explorer antara lain sebagai berikut.
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.
4) Pengguna Windows Live akan dimanjakan dengan tab bookmark yang
terhubung ke fitur-fitur milik Windows Live.
Kekurangan Internet Explorer antara lain sebagai berikut.
1) Gagal membaca script di beberapa halaman situs (khususnya CSS).
2) Berat saat awal start dan saat membuka tab baru.
3) Komponen activeX yang sering kali membuat keamanan browsing berkurang.
4) Proses update melalui windows update.
5) Browser ini kurang bandel karena IE sebagai penguasa pasar web browser
memang menjadi target utama serangan para hacker.
d. Opera
Browser ini digunakan pengguna sebanyak 1.8%. Meskipun penggunanya
tergolong sedikit, tetapi Opera memiliki fitur yang sangat bagus. Opera
dapat melakukan sinkronisasi ke server dengan Opera Link-nya. Selain itu, fitur
Opera Turbo sangat bagus karena dapat mempercepat browsing ketika jaringan
lambat. Opera juga menyediakan fitur sinkronisasi dengan Email yang
memungkinkan pengguna untuk mengelola lebih dari satu akun email di dalam
satu browser.

Gambar 7. Logo Opera

Browser Sumber:
http://gg.gg/e217m
Kelebihan Opera Browser antara lain sebagai berikut.
1) Lumayan ringan dan cepat.
2) Memiliki email client dan RSS sendiri yang sudah terintegrasi, sehingga
pengguna tidak perlu memakai email client lain, seperti Outlook,
Thunderbird, dan lain-lain.
3) Pemanggilan kembali Cache cepat.
4) Fitur mouse gestures membuat browsing experience semakin asyik.
5) Memiliki fitur Turbo yang mampu mengompres halaman saat koneksi lambat.
6) Bisa diintegrasikan (sinkron) dengan Opera Mini khusus ponsel.
7) Bagi pengguna Opera Community, tab bookmark yang terhubung ke fitur-fitur
milik Opera bisa diakses di mana pun dan kapan pun.
8) Bisa membuka halaman website yang dikhususkan untuk ponsel.
 Kekurangan Opera Browser antara lain sebagai berikut.
1) Agak lambat dalam membaca script pada beberapa halaman situs.
2) Saat koneksi lambat, fitur Turbo kurang begitu terasa efeknya.
3) Proses update yang mengharuskan mengunduh file masternya, sehingga
berbeda dengan Google Chrome yang hanya mengupdate core-nya saja.
4) Terlalu banyak menu/bar, sehingga terkesan kurang praktis, namun hal ini
bisa dimodifikasi.
5) Terkadang opera mengalami lag ketika render script pada beberapa halaman situs.
e. Safari
Safari adalah sebuah peramban web buatan Apple Inc yang awalnya ditujukan
khusus bagi sistem operasi Mac OS. Safari dipasang bersama Mac OS X dan
merupakan peramban web bawaan di sistem operasi tersebut sejak Mac OS X

v10.3.
Gambar 8. Logo Safari Browser
Sumber: http://gg.gg/e218d
Kelebihan Safari Browser antara lain sebagai berikut.
1) Fitur terbaru yang menarik adalah penerapan Nitro Engine. Aplikasi
tersebut membuat browser bisa mengolah aplikasi-aplikasi web dengan lebih
cepat karena Nitro Engine dapat mengeksekusi Javascript delapan kali lebih
cepat dibanding dengan browser lainnya.
2) Bookmark yang menarik, seperti tampilan iTunes.
3) Fitur snapback untuk memutar ulang halaman yang sudah dibuka
sebelumnya menjadi lebih cepat.
4) Safari browser juga dilengkapi dengan Cover Flow yang membuat tampilan bookmark
dan history browser lebih nyaman.
5) Fitur iSync bisa menyinkronkan bookmark Safari dengan Safari iPhone pengguna.
6) Membuka halaman situs lebih cepat berkat Nitro Engine pada safari versi 4,
sehingga mendapatkan gelar the world’s fastest web browser.
7) Tampilan homepage yang atraktif dengan Top Sites dengan animasi Cover Flow.
8) Safari juga mendukung format modern web berbasis HTML 5 yang dapat
mengumpulkan web-web favorit atau yang sering dibuka oleh pengguna
dalam bentuk thumbnail, mirip dengan yang dimiliki oleh Opera.
Kekurangan Safari Browser antara lain sebagai berikut.
1) Tampak aneh sebagai aplikasi Windows apabila pertama kali menggunakannya.
2) Tidak ada fitur restore apabila Safari mengalami hang.
3) Versi windows sedikit berbeda dengan versi OS X (karena safari memang
dirancang khusus untuk OS X).
4) Memakan resource memori yang paling besar dan space instalasi yang lebih
besar dibanding browser lain.
 5) Adanya bug pada Safari telah diungkapkan pada bulan Mei lalu oleh
peneliti keamanan, Nitesh Dhanjani. Bug pada Safari berakibat attacker
mampu membuang desktop korban dengan eksekusi file executable (.exe),
sebuah penyerangan yang dikenal dengan nama Carpet Bombing.

D. Konsep Web Server

Web Server adalah software yang memberikan informasi layanan data yang
memiliki fungsi menerima permintaan dari HTTP ataupun HTTPS dari client (yang
disebut dengan browser web) dan akan mengirimkan kembali hasilnya berbentuk
halaman-halaman web.
1) Cara Kerja Web server
Perangkat lunak web server terdapat pada komputer server dan di komputer inilah
data- data website tersimpan dengan rapi. Sama halnya dengan komputer client,
komputer server juga 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 dalam TCP
yang merupakan protokol transport dan dikirim ke alamat protokol berikutnya,
yaitu Hyper Text Transfer Protocol (HTTP) dan atau 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 dan
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, maka web server akan
menolak permintaan tersebut dan browser akan menampilkan notifikasi error 404
atau Page Not Found.

Gambar 8. Cara Kerja Web

Server Sumber:
http://gg.gg/e2194
2) Jenis-jenis Web
Server
a. Apache
Apache termasuk jenis freeware yang dapat memberikan keuntungan
bagi penggunanya. Selain itu, jenis server ini juga lebih mudah diinstal
dibandingkan dengan beberapa jenis server yang lain. Apache juga dikenal
mampu beroperasi di berbagai platform system operasi yang ada, sehingga
bisa digunakan oleh banyak orang. Dalam Apache, terdapat empat file
konfigurasi yang bisa digunakan untuk mengatur konfigurasi dengan mudah.
Selain itu, penambahan peripheral ke bagian platform web servernya cukup
 mudah.
b. Web Server Litespeed
Jenis server ini mampu meningkatkan performa PHP hingga mencapai 50%,
bahkan mampu melebihi performa server Apache hingga enam kali lebih
cepat, memiliki
 sistem anti DDoS, mampu melakukan pembatasan terhadap validasi HTTP
request, dan memiliki sistem pencegahan overloading yang baik, sehingga
menguntungkan pengguna. Sistem recovery terhadap kegagalan juga bisa
dilakukan secara langsung dan otomatis. Jenis server ini memiliki sistem
yang cukup kompatibel dengan Cpanel, Plesk dan direct admin karena
memiliki dukungan kompatibilitas terhadap sistem mod security request
filtering. Jenis server ini dapat sesuai atau kompatibel dengan
Apache.htaccess.
c. Web Server Microsoft IIS
IIS merupakan kepanjangan dari Internet Information Service. Web server ini
memiliki banyak fitur yang bisa digunakan, seperti File Transfer Protocol (FTP),
pengelola web, NNTP, dan Ghoper. Server ini mendukung sistem operasi
untuk Windows NT dan Windows Server 2003, Windows 2000 dan Windows
XP. Untuk kerja PHP sendiri, IIS lebih stabil, cepat, dan baik. IIS memiliki
sistem diagnotistik yang bisa digunakan untuk melakukan pengecekan
terhadap kesalahan. IIS juga kompatibel dengan windows karena memang IIS
sendiri dirilis oleh Microsoft.
3) Installasi Paket Web server
Berikut cara instalasi aplikasi paket web server.
a. Download XAMPP melalui website Apache Friends, kemudian lakukan
instalasi setelah selesai mengunduh. Selama proses instalasi, mungkin Anda
akan melihat pesan yang menanyakan apakah Anda yakin akan
menginstalnya. Silakan tekan Yes untuk melanjutkan instalasi, kemudian

klik tombol Next.

b. 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
(untuk pilihan lainnya biarkan saja).
c. Berikutnya, silakan pilih folder tujuan di mana XAMPP ingin Anda instal
(pada tutorial ini pada direktori C:\xampp).

d. Pada halaman selanjutnya, akan ada pilihan apakah Anda ingin menginstal
Bitnami untuk XAMPP, yang nantinya dapat Anda gunakan untuk install
WordPress, Drupal, dan Joomla secara otomatis.

e. 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 di bawah ini.

Untuk melakukan pengecekan, silakan akses link berikut melalui browser Anda
http://localhost.
 E. Macam-macam Editor Teks

Editor teks merupakan sebuah software yang digunakan oleh seorang

programmer dalam menulis kode program. Editor teks umumnya mempunyai fungsi
untuk menulis kode program tanpa disertai compiler yang terintegrasi. Di dalam Editor
teks, biasannya terdapat fitur umum, seperti syntax highlighting, search, replace,
memberikan komentar pada sebuah blok kode program, code folding, line number,
line marking, snippet, dan lainnya.
1) Notepad
Notepad merupakan Editor teks asli bawaan windows. Bagi pengguna sistem
operasi Windows, pasti sudah terbiasa menggunakan aplikasi ini. Untuk
pemula, Notepad merupakan rekomendasi yang tepat karena memiliki
tampilan yang sederhana dan mudah dalam menuliskan kode program.
2) Notepad++
Notepad++ hampir sama dengan Notepad bawaan Windows. Notepad++ memiliki
fitur yang banyak dibandingkan Notepad. Fitur-fitur yang terdapat pada Notepad+
+ antara lain 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 di
sebagian besar POXIX compatible OS, termasuk linux, FreeBSD, MacOS-X,
OpenBSD, dan Solaris.
3) Sublime
Sublime memiliki banyak fitur untuk mempermudah pengguna dan memiliki
tampilan yang menarik atau eye cathing. Sublime text merupakan aplikasi
berbayar, namun pengguna bisa menggunakan versi demonya. Walaupun versi
demo, tidak ada batasan dalam penggunaanya. Sublime memiliki semboyan The Text
Editor You’ll Fall in Love With.

a pemrograman web yang proses pengolahannya dilakukan di sisi client) dan server side programming (jenis bahasa pemrog
 Uji Kompetensi
A. Pilihlah jawaban yang paling benar!
1. Berikut ini yang merupakan bahasa pemrograman yang bersifat sever script side adalah
....
a. PHP d. PASCAL
b. CSS e. Dhelpi
c. HTML
2. Aplikasi yang digunakan untuk menuliskan perintah program dan untuk
merancang tampilan halaman web adalah ....
a. Editor teks d. HTML
b. CSS e. Aplikasi Web
c. Web Server
3. Contoh aplikasi web server adalah ....
a. Apache Friend Xampp
b. Drumpal
c. HTML
d. Sublime Editor
e. Web Generator
4. Urutan yang benar dalam membuat halaman web berbasis server adalah ....
a. Jalankan web server > jalankan web browser > jalankan editor text
b. Jalankan web server > jalankan editor text > jalankan web browser
c. Jalankan web browser > jalankan web server > jalankan editor text
d. Jalankan aplikasi animasi > jalankan aplikasi grafis > jalankan aplikasi audio
e. Jalankan Tek Editor > jalankan web browser > jalankan notepad
5. Berikut ini adalah contoh bahasa server side scripting yang digunakan
dalam pemrograman web, kecuali ....
a. ASP d. JSP
b. PHP e. PHYTON
c. DBMS
6. Fungsi utama web server adalah ....
a. Mencatat halaman web
b. Mentransfer seluruh berkas atau file dalam sebuah web halaman
c. Menyimpan gambar
d. Membuat berkas baru
e. Salah semua
7. Jenis script yang pengolahannya dilakukan di sisi client disebut ....
a. Client side scripting
b. Server side scripting
c. Macintosh
d. A dan B benar semua
e. Benar semua
8. Komputer yang bertugas menyimpan informasi halaman web yang pernah
diakses sebelumnya adalah ....
a. Database server d. Router
b. Poxy server e. Web server
c. Name server
9. Agar dapat memasukkan web yang dirancang ke dalam internet, hal yang
harus dilakukan adalah ....
a. Menyediakan alat
b. Menyediakan ruangan dalam internet
c. Menyediakan layanan internet
d. Menyediakan flash disk
e. Semua salah
10. Server yang dapat membuat sistem berbasis unix (seperti linux) untuk melakukan
sharing resource dengan sistem berbasis windows adalah ....
a. Apache d. Squired
b. Samba e. Proxy
c. Squid

B. Soal Uraian
Uraikanlah jawaban dari pertanyaan berikut dengan benar!
1. Jelaskan definisi web server!
2. Jelaskan definisi server web Apache!
3. Proxy server melakukan caching. Jelaskan definisi caching!
4. Jelaskan definisi server side scripting!
5. Sebutkan contoh pemrograman pada server side scripting!

C. Lembar Kerja Siswa

(Menggunakan Metode Pembelajaran STEM)
JOBSHEET PRAKTIKUM
Satuan Pendidikan : SMK
Kelas/semester : XI /
Mata Pelajaran : Pemrograman web dan perangkat bergerak
Alokasi Waktu :
Kompetensi Dasar:
Mempresentasikan pelbagai teknologi pengembangan aplikasi web
Materi Dasar:
1) Konsep world wide web
2) Konsep teknologi aplikasi web
3) Konsep web server
4) Jenis-jenis web server
5) Editor teks
A. Petunjuk Praktik
Nyalakan komputer sesuai SOP
B. Tugas Peserta Didik
1) Buatlah kelompok belajar (masing-masing kelompok terdiri dari 2-3
anggota)
2) Masing-masing kelompok mengerjakan latihan dengan komputer sesuai
dengan petunjuk atau langkah-langkah kerja
3) Lakukan presentasi hasil dengan kelompok lain
C. Tujuan
1) Siswa dapat memahami konsep world wide web
2) Siswa dapat memahami aplikasi web
3) Siswa dapat menginstall paket web server
4) Siswa dapat mempresentasikan jenis-jenis web server
5) Siswa dapat menginstall editor teks
D. Alat dan Bahan
1) Komputer
2) Paket Instalasi web server apache friend
3) Paket Instalasi editor teks
4) Paket Instalasi browser (mozilla firefox)
E. Langkah Kerja
1) Siapkan alat dan bahan (komputer dan alat tulis)
2) Lakukan instalasi pada:
a) Browser (Mozilla firefox)
b) Editor teks (Sublime teks)
c) Web server (Apache friend)
3) Catatlah kendala dalam proses instalasi
4) Buatlah catatan tahap demi tahap dalam proses instalasi