PEMROGRAMAN WEB DAN PERANGKAT BERGERAK · 2020. 7. 30. · vi Prakata Setelah melalui proses yang panjang, akhirnya buku Pemrograman Web dan Perangkat Bergerak (C3) Kelas XI SMK/MAK

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

(C3) KELAS XI

Endik Kuswantoro

Rudi Nurcahyo

PT KUANTUM BUKU SEJAHTERA

PEMROGRAMAN WEB DANPERANGKAT BERGERAKSMK/MAK Kelas XI© 2020Hak cipta yang dilindungi Undang-Undang ada pada Penulis.Hak penerbitan ada pada PT Kuantum Buku Sejahtera.

Penulis : Endik Kuswantoro Rudi NurcahyoEditor : Diana Agus SariDesainer Kover : Achmad FaisalDesainer Isi : Dyah Nur AzizahTahun terbit : 2020ISBN : 978-623-7216-93-3

Diterbitkan oleh PT Kuantum Buku SejahteraAnggota IKAPI No. 212/JTI/2019Jalan Pondok Blimbing Indah Selatan X N6 No. 5 Malang - Jawa TimurTelp. (0341) 438 2294, Hotline 0822 9951 2221; Situs web: www.quantumbook.id

Dilarang memperbanyak atau memindahkan sebagian atau seluruh isi buku ini dalam bentuk apa pun, baik secara elektronis maupun mekanis, termasuk memfotokopi, merekam, atau dengan sistem penyimpanan lainnya, tanpa izin tertulis dari PT Kuantum Buku Sejahtera.

iii

Daftar Isi

Prakata ..................................................................................................................... viBab 1 Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web .................... 1 A. Teknologi Aplikasi Web ................................................................................................... 2 Uji Kompetensi ............................................................................................................................. 11

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

Bab 3 Membuat Kode HTML untuk Menampilkan Tabel pada Halaman Web ....... 25 A. Konsep Table pada Halaman Website ........................................................................ 26 B. Pembuatan Tag Table HTML dengan Teks Editor ................................................... 26 Uji Kompetensi ............................................................................................................................. 33

Bab 4 Membuat Kode HTML untuk Menampilkan Tampilan Format Multimedia pada Halaman Web ........................................................................................... 37 A. Konsep Tampilan Multimedia dalam Teknologi Halaman Web ........................ 38 B. Tag HTML untuk Tampilan Gambar dalam Halaman Web .................................. 38 C. Tag untuk Tampilan Audio dalam Halaman Web ................................................... 40 D. Tag untuk Tampilan Video dalam Halaman Web ................................................... 42 E. Tag untuk Menampilkan Animasi pada Halaman Web ....................................... 43 Uji Kompetensi ............................................................................................................................. 45

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

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 D. Elemen Input Pilihan pada Halaman Web ................................................................ 69

iv

E. Elemen Input Tombol ...................................................................................................... 73 F. Elemen Tambahan ............................................................................................................ 74 Uji Kompetensi ............................................................................................................................. 76

Bab 7 Style pada Halaman Web ................................................................................. 83 A. Konsep Layout dalam Tampilan Halaman Web ...................................................... 84 B. Metode Layout Tampilan Halaman Web ................................................................... 85 C. Memahami Style pada Halaman Web ........................................................................ 86 D. Cascading Style Sheet (CSS) .......................................................................................... 87 E. Versi CSS ............................................................................................................................... 88 F. Anatomi dari CSS ............................................................................................................... 89 G. Cara Kerja Cascading Style Sheet ................................................................................ 90 H. Link ......................................................................................................................................... 93 Uji Kompetensi ............................................................................................................................. 96

Bab 8 Mempresentasikan Client Side Scripting dalam Pemrograman Web ........... 99 A. Web Server ............................................................................................................................ 100 B. Konsep Dasar Client Side Scripting ............................................................................. 101 C. Konsep Dasar Server Side Scripting ........................................................................... 102 D. Cara Kerja Server Side Scripting ................................................................................... 103 E. Penyisipan Program Client Side dalam HTML ......................................................... 104 F. Struktur dan Pengelompokan Web Scripting Image ........................................... 105 Uji Kompetensi ............................................................................................................................. 109

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 ............................................................................................................................. 125

Bab 10 Mempresentasikan Teknologi Aplikasi Web Server ...................................... 129 A. Konsep Dasar Web Server .............................................................................................. 130 B. Fungsi Web Server ............................................................................................................ 133 C. Produk Web Server ........................................................................................................... 133 D. Perangkat Pengembangan Aplikasi Web Server ................................................... 136 Uji Kompetensi ............................................................................................................................. 138

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

v

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 .......................................................... 173 A. Konsep Fungsi dalam Pemrograman Aplikasi Web di Sisi Server .................... 174 B. Prosedur Penggunaan Fungsi dalam Pemrograman Web ................................. 175 C. Konsep Dasar Argumen dan Parameter dalam Pemrograman Web .............. 179 Uji Kompetensi ............................................................................................................................. 180

Bab 14 Menggunakan Library Standar dalam Program ............................................ 185 A. Konsep Library dalam Pemrograman Aplikasi Web .............................................. 186 B. Penerapan Library dalam Pemrograman PHP ........................................................ 186 C. Kekurangan Penggunaan Library ................................................................................ 188 D. Penerapan Standar PHP Library (SPL) ........................................................................ 188 E. Penerapan Library dalam Framework ........................................................................ 190 Uji Kompetensi ............................................................................................................................. 192

Bab 15 Memodifikasi Aplikasi Interaktif pada Halaman Web ................................... 197 A. Konsep Aplikasi Interaktif dalam Pemrograman Web ......................................... 198 Uji Kompetensi ............................................................................................................................. 217

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() ........................................................................... 223 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 ........................................................................................................ 226 Uji Kompetensi ............................................................................................................................. 227

Glosarium.......... ................................................................................................................. 233Daftar Pustaka ................................................................................................................... 236Biodata Penulis .................................................................................................................. 239Biodata Konsultan ............................................................................................................. 240Tim Kreatif.......... ................................................................................................................ 241

vi

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 kehadirat 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. Dengan 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 berurutuan. 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, khususnya dan bagi semua pihak yang memerlukan.

Penulis

Mempresentasikan Berbagai Konsep Teknologi Aplikasi Web 1

1BAB

Mempresentasikan Berbagai Konsep Teknologi

Aplikasi Web

Setelah mempelajari bab ini, peserta didik mampu 1 menjelaskan konsep World Wide Web (WWW) dan teknologi aplikasi web dengan baik;2 menjelaskan konsep dan aplikasi web server dengan baik;3 menjelaskan jenis-jenis web browser dan editor teks dengan baik;4 mempresentasikan konsep World Wide Web dan teknologi aplikasi web dengan baik;5 mendeskripsikan konsep web server dengan baik;6 menginstal paket aplikasi web server dengan baik; dan7 mempresentasikan jenis-jenis web browser dan editor teks dengan baik.

Tujuan Pembelajaran

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

Kompetensi Dasar

Pemrograman Web dan Perangkat Bergerak2

Secara terminologi, website adalah kumpulan dari halaman-halaman situs yang biasanya terangkum dalam sebuah domain atau subdomain. Tempatnya berada di dalam World Wide Web (WWW) di internet. WWW terdiri atas 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 ini mengatur web page untuk menjadi sebuah hierarki meskipun hyperlink-hyperlink yang ada di halaman tersebut mengatur para pembaca dan memberitahu susunan keseluruhan dan bagaimana arus informasi ini berjalan. Sebuah web page adalah dokumen yang ditulis dalam format HTML (Hyper Text Markup Language) yang hampir selalu diakses melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser.

Gambar 1.1 Logo World Wide WebSumber: Lot, 2017

Semua publikasi dari website-website dapat membentuk sebuah jaringan informasi yang sangat besar. Web page layaknya sebuah buku yang dapat menampung berbagai informasi tentang banyak hal, baik bersifat komersial ataupun nonkomersial. 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 (biasanya) berwarna biru dan (biasanya) bergaris bawah yang dapat diklik dan akan menuju ke halaman web yang lain. Hyperlink ini apat diletakkan di mana saja di dalam halaman web dan dapat diatur untuk menuju ke mana saja di seluruh web. Saat Anda mengunjungi sebuah halaman web, Anda dapat secara langsung mengklik sebuah hyperlink, lalu komputer ini akan mengambil (men-download) situs/halaman yang di-link pada hyperlink tersebut sehingga menampilkannya di web browser.

A. Teknologi Aplikasi Web

HTML (Hypertext 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. Selanjutnya, bahasa tersebut dipopulerkan oleh browser Mosaic. Selama tahun 90-an telah muncul berbagai versi HTML dengan berbagai macam fiturnya. Versi HTML yang ada tersebut diuraikan sebagai berikut. 1. Versi 1.0

Versi ini merupakan versi pertama setelah lahirnya HTML dan mempunyai kemampuan untuk heading, paragraph, hypertext, list, cetak tebal, dan cetak miring pada teks. Selain itu, dukungan peletakan image pada dokumen dengan tidak memperbolehkan peletakan teks di sekelilingnya (wrapping).

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.0HTML 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.2HTML ini dirilis pada buan Mei 1998 yang merupakan versi terbaru penyempurnaan dari versi 3.0.

5. HTML Versi 4.0HTML ini dirilis pada tanggal 24 Desember 1999 dengan penambahan beberapa fitur, seperti adanya link, imagemaps, image, dan sebagainya.

6. HTML Versi 5.0HTML 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 5Sumber: Tomchen1989, 2011

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 di-update kontennya oleh pemilik web tersebut. Jika di-update 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 dan search engine. Kedua jenis web tersebut pada dasarnya memang jarang diperbarui isi kontennya.

Gambar 1.3 Web statisSumber: Endik Kuswantoro


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 Teknologi web Sumber: ÖZLÜ, 2018 Sumber: http://gg.gg/e20ga

Untuk 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. Dengan 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.

Dengan 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 berikan 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. Dengan 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.5 Konsep transaksi web klien dengan web serverSumber: Endik Kuswantoro

2. Jenis Web dari Teknologinya Teknologi web programming dibagi menjadi dua yang dijelaskan 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 juga 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.

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 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 dari server side scripting, di antaranya1) Active Server Pages (ASP);2) Hypertext Preprocessor (PHP); dan3) Java Sever Pages (JSP).

3. Macam-Macam BrowserBerikut 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.6 Logo Mozilla FirefoxSumber: Susumpow, 2006


Kelebihan1) Banyak fitur tambahan (adds-on), seperti kepingan puzzle. Adds-on ini

dapat dibongkar pasang sesuai dengan kebutuhan user.2) Bandel, cocok untuk membuka situs-situs multimedia.3) Update yang cukup mudah.4) Sistem security yang cukup kuat.Kekurangan1) Loading lama saat mulai start jika banyak adds-on yang terinstal.2) Untuk 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.

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.7 Logo Google ChromeSumber: Endik Kuswantoro

Kelebihan1) 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 dan lain-lain.

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. Untuk 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 pun dan kapan pun.


10) Chrome dapat membuka halaman website yang dikhususkan untuk ponsel/hp.

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.Kekurangan1) Jika diintegrasikan dengan Internet Download Manager (IDM), kadang

terjadi hang/crash.2) Error saat membaca CSS termasuk java script.3) Ada gambar yang tidak dapat dibuka (tidak nampak).4) Tidak dapat membuka situs/halaman tertentu.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.Kelebihan1) 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) Bagi pengguna Windows Live akan dimanjakan dengan tab bookmark

yang terhubung ke fitur-fitur milik Windows Live.Kekurangan1) 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

berkurang4) Proses update melalui Windows update.5) Browser ini kurang bandel sehingga jarang memakai IE8 karena pernah

terkena virus saat browsing pakai ini. IE sebagai penguasa pasar web browser memang menjadi target utama serangan para hacker.

4. Konsep Web ServerWeb 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 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 yang bentuk halaman-halaman web.

Gambar 1.8 Cara kerja web serverSumber: Hermawan, 2019

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 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 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 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, 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 juga lebih mudah diinstal dibandingkan dengan beberapa jenis server yang lain. Apache juga dikenal mampu tetap beroperasi di berbagai platform sistem operasi yang ada sehingga dapat digunakan oleh banyak orang. Untuk mengatur konfigurasi jenis server ini juga cukup mudah, terdapat empat file konfigurasi yang dapat digunakan. Selain itu, cukup mudah menambahkan peripheral ke bagian platform web servernya.

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. Untuk kerja PHP sendiri IIS lebih stabil, cepat, dan baik. IIS memiliki sistem diagnotistik yang dapat digunakan untuk melakukan


pengecekan terhadap kesalahan. Hal tersebut sangat kompetible dengan Windows karena memang IIS sendiri dirilis oleh Microsoft.

c. 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.

Sumber: Endik Kuswantoro

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. Untuk pilihan lainnya biarkan saja.


Berikutnya silakan pilih folder tujuan di mana XAMPP ingin Anda instal, pada tutorial ini pada direktori C:\xampp.



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.


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.


Untuk melakukan pengecekan, silakan akses link berikut melalui browser Anda http://localhost.

5. Macam-Macam Editor TeksText editor merupakan sebuah software yang digunakan oleh seorang programmer dalam menulis kode program. Text editor umumnya hanya mempumyai 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, snippet, dan lainnya.a. Notepad Notepad merupakan text editor asli bawaan windows. Bagi pengguna sistem

operasi Windows pasti terbiasa menggunakan aplikasi ini. Biasanya untuk pemula


direkomendasikan menggunakan Notepad ini karena memiliki tampilan yang sederhana dan membuat mudah dalam menuliskan kode program.

b. 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++ ini dapat berjalan disebagian besar POXIX compatible OS termasuk Linux, FreeBSD, MacOS-X, OpenBSD, dan Solaris.

Tugas KelompokBersama dengan kelompok, carilah macam-macam web browser yang banyak digunakan orang. Simpulkan web browser mana yang paling sering digunakan untuk keperluan pengembangan web. Presentasikan di depan kelas.

Rangkuman

Secara terminologi, website adalah kumpulan dari halaman-halaman situs yang biasanya terangkum dalam sebuah domain atau subdomain. Websiter 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, yaitu client side programming adalah salah satu jenis bahasa pemrograman web yang proses pengolahannya dilakukan di sisi client.

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 yang memiliki fungsi menerima permintaan dari HTTP ataupun HTTPS dari klien yang disebut dengan browser web, kemudian akan dikirimkan kembali hasilnya yang bentuk halaman-halaman web.

Uji KompetensiA. Soal Pilihan GandaPilihlah jawaban yang paling tepat.1. Berikut ini yang merupakan bahasa pemrograman yang bersifat sever script side

adalah .... a. PHP d. Dhelpi b. PASCAL e. HTMLc. CSS

2. Aplikasi yang digunakan untuk menuliskan perintah program dan untuk merancang tampilan halaman web adalah .... a. teks editor d. aplikasi webb. HTML e. web serverc. CSS


3. Contoh aplikasi web server adalah ....a. Apache Friend Xampp d. Web Generatorb. Sublim Editor e. HTML c. Drupal

4. Urutan yang benar dalam membuat halaman web berbasis server adalah ....a. jalankan web server > jalankan web browser > jalankan teks editor b. jalankan aplikasi animasi > jalankan aplikasi grafis > jalankan aplikasi audioc. jalankan web server > jalankan teks editor > jalankan web browser d. jalankan teks editor > jalankan web browser > jalankan notepade. jalankan web browser > jalankan web server > jalankan teks editor

5. Di bawah ini adalah contoh bahasa server side scripting yang digunakan dalam pemrograman web, kecuali ....a. ASP d. PHYTONb. JSP e. DBMSc. PHP

6. Fungsi utama web server adalah ....a. mencatat halaman web b. membuat berkas baruc. mentransfer seluruh berkas atau file dalam sebuah web halaman d. menyimpan gambare. semua salah

7. Jenis script yang pengolahannya dilakukan di sisi client disebut ....a. client side scripting d. Macintosh b. A dan B benar e. semua benarc. server side scripting

8. Komputer yang bertugas menyimpan informasi halam web yang pernah diakses sebelumnya adalah ....a. database server d. web serverb. router e. name server c. poxy server

9. Agar Anda dapat memasukkan web yang dirancang ke dalam internet, hal yang harus dilakukan adalah .... a. menyediakan alat b. menyediakan flash diskc. menyediakan ruangan dalam internetd. meneyediakan layanan internet 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. Proxy b. Squired e. Squid c. Samba

11. Website yang kontennya tidak dapat di-update secara langsung, lalu jika di-update kontennya harus diubah script dokumen HTML-nya. Website ini biasanya termasuk website company profile atau website landing page. Jenis website yang dimaksud adalah ....a. website dinamis d. website otomatisb. website tradisional e. website manual c. website statis


12. Website yang kontennya dapat di-update secara langsung tanpa harus diubah script dokumen HTML-nya biasanya termasuk website CMS adalah jenis website ....a. website dinamis d. website otomatisb. website tradisional e. website manual c. website statis

13. Teknologi HTML memiliki kemampuan menambahkan fitur Form sebagai aplikasi web pada tahun ....a. 1991 d. 1996b. 1995 e. 1993 c. 1992

14. Teknologi HTML memiliki kemampuan menambahkan fitur link, image maps, image, dan lain-lain pada versi .... a. versi 1 d. versi 4.1b. versi 4.0 e. versi 3 c. versi 2

15. Berikut ini merupakan kelebihan dari teknologi HTML versi 5.0 ....a. ada penambahan fitur XHTML dan DOM b. penambahan fitur heading, paragraph, hypertext, list, cetak tebalc. penambahan fitur table d. penambahan fitur eksternal linke. penambahan fitur image map dan link

B. Soal EsaiJawablah dengan tepat dan benar.1. Kumpulan dari halaman-halaman situs yang biasanya terangkum dalam sebuah

domain atau subdomain yang tempatnya berada di dalam World Wide Web (WWW) di internet disebut ….

2. Sebuah website yang diakses, dibaca, dan hanya dapat melihat tampilan tanpa dapat mengubah kontennya disebut dengan website ….

3. Definisi server side progamming adalah ….4. Salah satu jenis bahasa pemrograman web yang proses pengolahannya dilakukan

di sisi client disebut … dan contohnya adalah ….5. Bahasa pemrograman web yang pengolahannya dilakukan dalam server adalah …

dan contohnya adalah ….6. Browser andalan milik raksasa iklan Google sebenarnya memulai debutnya dari

engine webkit yang sama-sama dikembangkan oleh Apple, KDE, Nokia, RIM, Palm, dan Google sendiri adalah browser ….

7. Browser yang tergabung dalam sistem operasi Windows ini memang memiliki beberapa history yang tidak bagus dalam pengembangannya akibat banyaknya celah keamanan yang terdapat di dalamnya. Browser tersebut adalah ….

8. Software yang memberikan informasi layanan data yang memiliki fungsi menerima permintaan dari HTTP ataupun HTTPS dari klien yang disebut dengan ….

9. Data yang diminta dari browser ke web server disebut dengan ….10. Data yang dikirim dari server ke browser dikenal dengan ….


C. Soal Esai UraianJawablah dengan ringkas dan benar.1. Jelaskan pengertian dari web server.2. Jelaskan yang dimaksud dengan server web Apache.3. Proxy server melakukan caching. Jelaskan yang dimaksud dengan caching.4. Jelaskan pengertian server side scripting.5. Sebutkan contoh pemrograman pada server side scripting.

D. Uji PraktikJOBSHEET PRAKTIKUM

Satuan Pendidikan : SMK Kelas/semester : XI/ Mata Pelajaran : Pemrograman web dan Perangkat BergerakAlokasi Waktu :Kompetensi Dasar1. Mempresentasikan pelbagai teknologi pengembangan aplikasi webMateri Dasar1. Konsep Word Wide Web2. Konsep teknologi aplikasi web3. Konsep web server4. Jenis-jenis web server5. Editor teks A. Petunjuk Praktik Nyalakan komputer sesuai dengan SOP.B. Tugas Peserta Didik

Buatlah kelompok belajar yang setiap kelompok terdiri atas 2–3 anggota. Setiap kelompok mengerjakan latihan dengan komputer sesuai dengan petunjuk langkah-langkah kerja. Lakukan presentasi hasil dengan kelompok lain.

C. Tujuan1. Siswa dapat memahami konsep Word Wide Web.2. Siswa dapat memahami aplikasi web.3. Siswa dapat menginstal paket web server.4. Siswa dapat mempresentasikan jenis-jenis web server.5. Siswa dapat menginstal editor teks.

D. Alat dan Bahan1. Komputer2. 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: a. browser (Mozilla Firefox); b. editor teks (Sublim Teks); dan c. web server (Apache friend).3. Catatlah kendala dalam proses instalasi.4. Buatlah catatan tahap demi tahap dalam proses instalasi.

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK · 2020. 7. 30. · vi Prakata Setelah melalui proses yang panjang, akhirnya buku Pemrograman Web dan Perangkat Bergerak (C3) Kelas XI SMK/MAK

Documents