PEMROGRAMAN WEB DAN PERANGKAT BERGERAK...Kunci, Tujuan Pembelajaran, Peta Konsep, Aktivitas Siswa, Tugas Siswa, Info, Rangkuman, Uji Kompetensi, dan Tugas Proyek. Pembahasan materi

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 BERGERAKSMK/MAK Kelas XI

Undang-Undang Republik Indonesia Nomor 19 Tahun 2002 Tentang Hak Cipta Pasal 72 Ketentuan Pidana Sanksi Pelanggaran.1. Barang siapa dengan sengaja dan tanpa hak melakukan

perbuatan sebagaimana dimaksud dalam Pasal 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.000.000,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp5.000.000.000,00 (lima miliar rupiah).

2. Barang siapa dengan sengaja menyiarkan; memamerkan, mengedarkan, atau menjual kepada umum suatu ciptaan atau barang hasil pelanggaran Hak Cipta atau Hak Terkait sebagaimana dimaksud pada ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau denda paling banyak Rp500.000.000,00 (lima ratus juta rupiah).

© Hak cipta dilindungi oleh undang-undang. Dilarang menyebarluaskan dalam bentuk apapun

tanpa izin tertulis

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) cmvi + 238 halaman

Penulis : Endik Kuswantoro, S.Kom, MT. Rudi Nurcahyo, S.KomEditor : Tim Quantum BookPerancang sampul : Tim Quantum BookPerancang letak isi : Tim Quantum BookPenata letak : Tim Quantum BookIlustrator : Tim Quantum BookTahun terbit : 2019ISBN : 978-623-7216-93-3Penerbit : PT. Kuantum Buku SejahteraAlamat : Jalan Pondok Blimbing Indah Selatan X N6 No 5 Malang - Jawa Timur

iii

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

iv

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

v

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 Scripting ..... 117 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

vi

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 ................................................................................................................... 237Biodata Penulis .................................................................................................................. 238

Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 1

3.1 Memahami konsep teknologi aplikasi web4.1 Mempresentasikan pelbagai teknologi pengembangan aplikasi web

Kompetensi Dasar

1BAB

Mempresentasikan Berbagai Konsep Teknologi Aplikasi

Web

Pemrograman Web dan Perangkat Bergerak Kelas XI untuk SMK/MAK2

Peta Konsep

Setelah mempelajari bab ini, peserta didik mampu:1. menjelaskan konsep world wide web (www) 2. menjelaskan konsep teknologi aplikasi web 3. menjelaskan konsep web server 4. menjelaskan aplikasi web server 5. menjelaskan jenis-jenis web browser 6. menjelaskan jenis-jenis editor teks 7. mempresentasikan konsep world wide web8. mempresentasikan konsep teknologi aplikasi web9. mendeskripsikan konsep web server10. menginstalasi paket aplikasi web server11. mempresentasikan jenis-jenis web browser12. mempresentasikan jenis-jenis editor teks

Tujuan Pembelajaran

Konsep Word Wide Web

Client Side

Instalasi Web Server

Teknologi Aplikasi Web

Server Side

Cara Kerja Web Server

Jenis-jenis Web Browser

Web Statis

Konsep Web Server

Jenis Editor Teks

Web Dinamis

Jenis-jenis Web Server

Mempresentasikan Pelbagai Konsep

Teknologi Aplikasi Web


A. Konsep Word Wide Web

Materi Pembelajaran

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 WebSumber: 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.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


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.0HTML 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.2HTML Versi 3.2 diliris pada buan Mei 1998 yang merupakan versi terbaru dan penyempurnaan dari versi 3.0.

5) HTML Versi 4.0HTML 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 5Sumber: 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 DinamisWeb 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 ServerSumber: 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 ProgrammingServer 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 FirefoxSumber: 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 ChromeBrowser 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 ChromeSumber: 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 ExplorerDefault 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 BrowserSumber: 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. SafariSafari 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 BrowserSumber: 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 Servera. 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 LitespeedJenis 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 IISIIS 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 serverBerikut 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) SublimeSublime 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.

Rangkuman

Secara terminologi, website adalah kumpulan dari halaman-halaman situs yang biasanya terangkum dalam sebuah domain atau subdomain yang tempatnya berada di dalam World Wide Web (WWW) di Internet. Berdasarkan kontennya, web dapat digolongkan menjadi dua, yaitu web statis dan web dinamis. Teknologi pemrograman web dibedakan menjadi dua, yaitu client side programming (salah satu jenis bahasa pemrograman web yang proses pengolahannya dilakukan di sisi client) dan server side programming (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 yang memiliki fungsi menerima permintaan dari HTTP ataupun HTTPS dari klien yang disebut dengan browser web dan akan mengirimkan kembali hasilnya berbentuk halaman-halaman web.


Uji KompetensiA. Pilihlah jawaban yang paling benar!

1. Berikut ini yang merupakan bahasa pemrograman yang bersifat sever script side adalah .... a. PHP d. PASCALb. CSS e. Dhelpic. HTML

2. Aplikasi yang digunakan untuk menuliskan perintah program dan untuk merancang tampilan halaman web adalah .... a. Editor teks d. HTMLb. CSS e. Aplikasi Webc. Web Server

3. Contoh aplikasi web server adalah ....a. Apache Friend Xamppb. Drumpalc. HTMLd. Sublime Editore. Web Generator

4. Urutan yang benar dalam membuat halaman web berbasis server adalah ....a. Jalankan web server > jalankan web browser > jalankan editor textb. Jalankan web server > jalankan editor text > jalankan web browser c. Jalankan web browser > jalankan web server > jalankan editor textd. Jalankan aplikasi animasi > jalankan aplikasi grafis > jalankan aplikasi audioe. 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. JSPb. PHP e. PHYTONc. DBMS

6. Fungsi utama web server adalah ....a. Mencatat halaman webb. Mentransfer seluruh berkas atau file dalam sebuah web halamanc. Menyimpan gambard. Membuat berkas barue. Salah semua

7. Jenis script yang pengolahannya dilakukan di sisi client disebut ....a. Client side scriptingb. Server side scriptingc. Macintoshd. A dan B benar semuae. Benar semua


8. Komputer yang bertugas menyimpan informasi halaman web yang pernah diakses sebelumnya adalah ....a. Database server d. Routerb. Poxy server e. Web serverc. Name server

9. Agar dapat memasukkan web yang dirancang ke dalam internet, hal yang harus dilakukan adalah .... a. Menyediakan alatb. Menyediakan ruangan dalam internetc. Menyediakan layanan internetd. Menyediakan flash diske. Semua salah

10. Server yang dapat membuat sistem berbasis unix (seperti linux) untuk melakukan sharing resource dengan sistem berbasis windows adalah ....a. Apache d. Squiredb. Samba e. Proxyc. 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 bergerakAlokasi Waktu :

Kompetensi Dasar:Mempresentasikan pelbagai teknologi pengembangan aplikasi webMateri Dasar:

1) Konsep world wide web2) Konsep teknologi aplikasi web3) Konsep web server4) Jenis-jenis web server5) Editor teks


A. Petunjuk PraktikNyalakan komputer sesuai SOP

B. Tugas Peserta Didik1) 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 kerja3) Lakukan presentasi hasil dengan kelompok lain

C. Tujuan1) Siswa dapat memahami konsep world wide web2) Siswa dapat memahami aplikasi web3) Siswa dapat menginstall paket web server4) Siswa dapat mempresentasikan jenis-jenis web server5) Siswa dapat menginstall editor teks

D. Alat dan Bahan1) Komputer 2) Paket Instalasi web server apache friend3) Paket Instalasi editor teks4) Paket Instalasi browser (mozilla firefox)

E. Langkah Kerja1) 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 instalasi4) Buatlah catatan tahap demi tahap dalam proses instalasi

Documents

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK...Kunci, Tujuan Pembelajaran, Peta Konsep, Aktivitas Siswa, Tugas Siswa, Info, Rangkuman, Uji Kompetensi, dan Tugas Proyek. Pembahasan materi