1.1 Modul - Teknologi Aplikasi Web

SMK MUHAMMADIYAH 4 YOGYAKARTA Pemrograman Web dan Perangkat Bergerak

Suryodiningratan MJ II/862 Yogyakarta

MODUL

TEKNOLOGI APLIKASI WEB 1

A. TUJUAN
Praktikan diharapkan mampu :
1. Menjelaskan aplikasi web server dengan santun dan benar.
2. Melakukan instalasi, serta menguji hasil instalasi web server dengan disiplin dan benar.

B. TEORI SINGKAT
1. Konsep Dasar Web
a. Cara Kerja Web
Pada Browser meminta data web page ke server, permintaan data ini oleh browser
dikirim dengan menggunakan protokol TCP ke protokol berikutnya, yaitu HTTP yang
digunkan dalam World Wide Web untuk menghbungkan komputer ke jaringan internet
global.
Data dari browser ke server web yang berisi permintaan halaman web disebut HTTP
request. Server web akan mencari dokumen HTML yang sesuai, lalu mengirimnya
kembali ke browser dengan menggunakan protokol TCP. Data dari server ke browser
disebut HTTP response. Jika data yang diminta browser tidak ditemukan oleh server web,
akan terjadi kesalahan dengan tampilan tulisan: 404 Page Not Found.

b. Browser
Browser merupakan aplikasi komputer untuk menampilkan halaman web. Ada banayak
jenis browser, berikut ini beberapa diantaranya yaitu: Mozilla Firefox, Google Chrome,
Opera, Safari, dan Internet Explorer.

c. Bahasa Pemrograman Web
Berdasarkan proses eksekusi atau pengolahannya, pemrograman web dibagi menjadi 2,
yaitu:
1) Clint-Side Scripting

Merupakan pemrograman yang proses pengolahannya dlakukan disisi client. Proses
penerjemahan atau pengolahannya dilakukan oleh web browser sebagai client-nya.
Di dalam web browser sudah terdapat Library yang mampu menerjemahkan semua
perintah di halaman web yang menggunakan client side scripting. Library atau web
engine ini dimiliki setiap web browser, tetapi web engine yang berbeda-beda kadang
menghasilkan tampilan yang berbeda pula. Untuk menghindari hal semacam itu,
sebaiknya gunakan browser yang telah disertifikasi oleh World Wide Web Consortium
(W3C)
2) Server-Side Scripting
Merupakan bahasa pemrograman web yang pengolahannya dilakukan dikomputer
server, maksudnya web server yang sudah telah terintegrasi oleh web engine. Disini
peran web engine ialah memproses semua script yang ada termasuk kategori client
side scripting. Web engine harus diinstal dulu ke dalam komputer sehingga
komputer tersebut dapat berfungsi sebgai web server. Contoh server side scripting

Teknologi Aplikasi Web | Muhamad Arif Budiyanto, ST. 1

SMK MUHAMMADIYAH 4 YOGYAKARTA Pemrograman Web dan Perangkat Bergerak

Suryodiningratan MJ II/862 Yogyakarta

ialah PHP, Java server page (JSP), ColdFusion, active Server Page (ASP), Lasso, dan
SSI.

2. Perangkat Pengembang Aplikasi Web
Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi perangkat
keras dan perangkat lunak.
a. Perangkat Keras
Untuk lingkungan pengembangan web yang nyaman, berikut ini peralatan yang
sebaiknya disediakan:
1) Komputer Utama, dengan operating system Macintosh, Windows, ataupun
Linux. Perusahaan pengembangan web profesional cenderung berbasis
Macintosh.
2) Memori tambahan. sebaiknya computer memiliki memori yang besar, karena
dalam pengembangan web cenderung kita akan membuka beberapa aplikasi
sekaligus.
3) Sebuah monitor besar. Meskipun bukan keharusan, monitor besar memudahkan
untuk desainer visual. Semakin besar monitor, semakin banyak jendela dan
panel kontrol dapat terbuka pada waktu yang sama.
4) Sebuah scanner dan / atau kamera digital. Jika mengantisipasi membuat gambar
dan tekstur sendiri, akan memerlukan beberapa alat untuk membuat gambar.
5) Sebuah komputer kedua. Banyak web designer merasa berguna memiliki
komputer penguji yang menjalankan platform yang berbeda dari komputer
utama yang mereka gunakan untuk pengembangan. Karena browser kerja yang
berbeda pada Mac dan pada mesin Windows, itu penting untuk menguji halaman
web dalam sebanyak mungkin system operasi berbeda.
6) Perangkat mobile/smartphone. Saat ini banyak orang mengakses web melalui
smartphone/tablet, sehingga kita perlu menguji penampilan dan kinerja situs
web yang kita buat pada mobile browser pada smartphone atau perangkat
tablet. Namun saat ini banyak web emulator yang dapat digunakan sebagai
penguji web kita.

b. Perangkat Lunak
Untuk perangkat lunak pengembangan web dapat dikelompokkan menjadi
beberapa, diantaranya :
1) Web page authoring
Ini adalah kelompok perangkat lunak seperti desktop publishing tetapi format yang
dihasilkan adalah halaman web. Aplikasi ini biasanya bersifat “WYSIWYG” (What
You See Is What You Get, dibaca “whizzy-wig”) yaitu apa yang kamu lihat, itulah yang
kamu dapatkan. Jadi aplikasi ini biasanya ketika membuat tampilannya seperti yang
akan dihasilkan.
Beberapa contoh aplikasi yang termasuk dalam kelompok ini :
a) Adobe Dreamweaver, aplikasi ini berbayar dan dibawah lisensi perusahaan
Adobe, aplikasi ini banyak digunakan oleh pengembang web. Memiliki banyak
fasilitas dan fiture.
b) Microsoft Expression Web (lisensi dari Windows). Bagian dari Microsoft’s suite
yang merupakan aplikasi perancangan professional.

Teknologi Aplikasi Web | Muhamad Arif Budiyanto, ST. 2

SMK MUHAMMADIYAH 4 YOGYAKARTA Pemrograman Web dan Perangkat Bergerak

Suryodiningratan MJ II/862 Yogyakarta

c) Nvu (Linux, Windows, dan Mac OS X). Tidak ingin membayar untuk Editor
WYSIWYG? Nvu (diucapkan N-view, untuk "pandangan baru") adalah sebuah
aplikasi open source (sumber terbuka) yang cocok dengan banyak fitur dalam
Adobe Dreamweaver, dan dapat diunduh secara gratis di nvu.com.

2) Editor
Ini adalah kelompok perangkat lunak yang kebalikan dari Adobe Dreamweaver
Microsoft Expression Web. Aplikasi ini tidak lagi “WYSIWYG” (What You See Is What
You Get”) tetapi lebih ke kode HTML. Beberapa contoh aplikasi yang termasuk
dalam kelompok ini :
a) TextPad (Windows saja). TextPad adalah plain-text sederhana dan murah untuk

editor kode di Windows.
b) Teks Sublime (Window, Mac, Linux). Editor teks ini terlihat dipreteli namun

memiliki banyak fungsi (seperti kode warna dan ikhtisar kode penuh) bagi
pengembang web.
c) Coda oleh Panic (hanya Macintosh). Pengguna Coda seperti alur kerja yang
visual, alat-alat manajemen file, dan built-in akses terminal.
d) Textmate oleh MacroMates (hanya Macintosh). Editor teks canggih ini memiliki
alat manajemen proyek dan antarmuka yang terintegrasi dengan sistem operasi
Mac. Hal ini semakin populer karena disesuaikan, kaya fitur, dan murah.
e) BBEdit oleh Bare Bones Software (hanya Macintosh). Untuk pengembang web
banyak fitur shortcut yang besar telah membuat editor terkemuka berbasis Mac

3) Aplikasi editing gambar dan menggambar
Untuk menambahkan gambar ke halaman web, akan perlu program editing gambar.
Berikut ini beberapa aplikasi yang cukup populer :
a) Adobe Photoshop. Photoshop dapat dikatakan sebagai standar industri untuk

penciptaan gambar baik dalam cetak maupun dunia web.
b) Adobe Photoshop Elements. Versi ini lebih ringan dari Photoshop dirancang

untuk mengedit foto dan manajemen, tetapi beberapa penggemar menemukan
bahwa ia memiliki semua alat yang diperlukan untuk menempatkan gambar
pada halaman web.
c) Adobe Illustrator. Karena desainer perlu membuat logo, ikon, dan ilustrasi di
berbagai ukuran dan resolusi, untuk itu semua aplikasi ini sangat membantu.
Aplikasi ini juga dapat dipadukan dengan Photoshop.
d) Adobe Fireworks. Program grafis web ini menggabungkan editor foto dengan
alat untuk membuat ilustrasi berbasis vektor. Ia juga memiliki alat-alat canggih
untuk grafis web.
e) Corel Paint Shop Photo Pro (Windows saja). Editor gambar yang penuh fitur ini
populer di pengguna Windows, terutama karena harga yang rendah.

4) Aplikasi Internet
Karena hasil akhir dari pengembangan halaman web digunakan di Internet, maka
diperlukan beberapa aplikasi untuk membuka halaman web, biasa disebut
“browser”. Berikut ini beberapa aplikasi browser yang cukup populer :

a) Windows: Internet Explorer, Chrome, Firefox, Safari, Opera.
b) Macintosh OS X: Safari, Chrome, Firefox, Opera.

Teknologi Aplikasi Web | Muhamad Arif Budiyanto, ST. 3

SMK MUHAMMADIYAH 4 YOGYAKARTA Pemrograman Web dan Perangkat Bergerak

Suryodiningratan MJ II/862 Yogyakarta

c) Browser perangkat bergerak (mobile): Mobile Safari (iOS), Android Browser
(Android), BlackBerry Browser (RIM), Nokia Series 40 dan Nokia Browser for
Symbian, Opera Mobile dan Mini (installed on any device), Internet Explorer
Mobile (Windows Phone), Silk (Kindle Fire).

5) Aplikasi transfer file (FTP/File Transfer Protokol).
Sebuah aplikasi FTP memungkinkan untuk mengunggah dan mengunduh file antara
komputer kita dan komputer yang akan menjadi tempat halaman web/web server.
Beberapa aplikasi authoring web sebelumnya juga memiliki aplikasi FTP yang
terintegrasi langsung. Ada juga aplikasi FTP khusus, seperti yang tercantum di
bawah ini:
a) Windows: WS_FTP, CuteFTP, AceFTP, Filezilla.
b) Macintosh: Transmit, Cyberduck, Fetch.

6) Web Server
Web server ada yang gratis (Open Source) dan ada yang berbayar.
a) Web Server Open Source

Meliputi Apache, Apache Tomcat, Nginx, dan Lighttpd. Apache merupakan web
server yang populer dan banyak digunakan. Ratusan juta situs dioperasikan
dengan web server Apache.
b) Web Server Komersial
Beberapa web server komersial adalah Internet Information Services (IIS) dan
Litespeed.
IIS adalah sebuah web server yang digunakan dalam sistem operasi windows.
Litespeed, sepertinamanya menawarkan kecepatan akses yang tinggi lebih cepat
daripada web server Apache dan bahkan web server Nginx. Versi open source
dari Litespeed yaitu webserver OpenLiteSpeed.

7) Aplikasi Web Server Cross Platform
Cross Platform artinya dapat digunakan dalam berbagai sistem operasi. Web server
cross platform misalnya : XAMPP, AMPPS, Foxserv, Devilbox, dan Kalabox.

3. Instalasi Aplikasi Web Server
Banyak aplikasi web server cross platform yang dapat diunduh. XAMPP adalah salah satu
pilihan terbaik karena bersifat open source. Versi terbaik XAMPP adalah 7.1.10 dan
disesuaiakan dengan sistem operasi 32 bit atau 64 bit dan dapat digunakan secara offline.
Berikut adalah cara-cara menginstal XAMPP.

a. Unduh aplikasi XAMPP terbaru di https://www.apachefriends.org/download.html

Teknologi Aplikasi Web | Muhamad Arif Budiyanto, ST. 4

SMK MUHAMMADIYAH 4 YOGYAKARTA Pemrograman Web dan Perangkat Bergerak

Suryodiningratan MJ II/862 Yogyakarta

b. Dobel klik file XAMPP yang baru saja Anda download, nanti selanjutnya akan muncul
jendela Installer Language. Pilih Bahasa Inggris (English) dan Klik OK. Kadang pada
proses ini muncul pesan error. Jika ada, abaikan saja dan lanjutkan dengan klik OK dan
YES.

c. Berikutna akan muncul jendela Welcome XAMPP. Selanjutnya klik tombol Next untuk
melanjutkan. Selanjutnya kita diminta untuk memilih aplikasi apa saja yang akan
diinstal. Pilih default apabila kita hanya akan menggunakan aplikasi standar yang
terpasang.

d. Verifikasi bahwa Folder Tujuan diatur ke C: \ xampp, lalu klik Instal.
e. Anda akan melihat proses instalasi berlangsung. Tunggu prosesnya selesai.

Teknologi Aplikasi Web | Muhamad Arif Budiyanto, ST. 5

SMK MUHAMMADIYAH 4 YOGYAKARTA Pemrograman Web dan Perangkat Bergerak

Suryodiningratan MJ II/862 Yogyakarta

f. Klik Finish untuk menyelesaikan proses instalasi. Proses instalasi telah selesai.

g. Kotak dialog bertanya: Apakah Anda ingin memulai Control Panel sekarang?
Anda dapat memilih untuk memulai Panel Kontrol. Mencentang kotak centang akan
langsung membuka panel kontrol XAMPP.

h. Jika panel kontrol XAMPP belum dimulai, cari Control Panel XAMPP di menu mulai atau
ikon desktop-nya, klik kanan padanya dan pilih "Run as administrator". Klik "Ya" pada
popup " User Account Control", dan tunggu Control Panel XAMPP untuk memulai. Anda
akan melihat Control Panel XAMPP berjalan.

i. Klik tombol Start di sebelah Apache, dan tunggu apache untuk memulai. Setelah Apache
dimulai, klik tombol Start di sebelah MySQL. Tunggu MySQL untuk memulai. Baik Apache
dan MySQL sedang berjalan sekarang.

Teknologi Aplikasi Web | Muhamad Arif Budiyanto, ST. 6

SMK MUHAMMADIYAH 4 YOGYAKARTA Pemrograman Web dan Perangkat Bergerak

Suryodiningratan MJ II/862 Yogyakarta

j. Sekarang, buka browser web Anda seperti Internet Explorer, Mozilla Firefox atau Google
Chrome.
Ketik "localhost" di address bar dan klik enter. Browser akan diarahkan ke
“http://localhost:/dashboard/”. Browser harus menampilkan halaman yang ditunjukkan
di bawah ini.

C. RANGKUMAN
Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut : Formulasi,
Perencanaan (planning), Analisis (analysis), Rekayasa (engineering), Implementasi (page
generation) & pengujian (testing), Evaluasi oleh konsumen (customer evaluation).
Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi perangkat keras
dan perangkat lunak. Perangkat lunak terdiri dari Web page authoring, HTML Editor,
Aplikasi editing gambar dan menggambar, Aplikasi Internet, dan Aplikasi transfer file.
Aplikasi Web Server Cross Platform yang biasa digunakan adalah XAMPP karena open source
(gratis).

D. PRAKTIKUM

Tugas

Buat presentasi tentang teknologi aplikasi web!

E. TEST FORMATIF

Soal Pilihan Ganda
Pilihlah salah satu jawaban yang paling tepat dengan memberi tanda silang (X) pada huruf a,
b, c, atau d.

1. HTML merupakan singkatan dari .... d. Albert Einstein
a. Home Tool Markup Language e. Stephen Hawking
b. Hyperlink and Text Markup Language
c. Hyper Text Markup Language
d. Hyper Tools Markup Language
e. Hyper Tricks Markup Language

2. World Wide Web ditemukan oleh ....
a. Diege Costa
b. Thomas Muller
c. Tim Berners-Lee

Teknologi Aplikasi Web | Muhamad Arif Budiyanto, ST. 7

SMK MUHAMMADIYAH 4 YOGYAKARTA Pemrograman Web dan Perangkat Bergerak

Suryodiningratan MJ II/862 Yogyakarta

3. World Wide Web dinyatakan gratis bagi semua orang pada tanggal ....

a. 20 April1993 d. 25 April1995

b. 27 April1993 e. 30 April1993

c. 22 April1993 d. Virtual private server hosting
4. Berikut ini yang bukan jenis web hosting adalah .... e. Cloud hosting

a. Share hosting
b. Dedicated hosting
c. Private hosting

5. Yang merupakan bahasa pemrograman web adalah ....

a. HTML d. Internet

b. Web Browser e. WWW

c. Google

6. Seorang web designer harus menguasai ....

a. HTML, DHTML d. Java Sript dan Applet

b. CGI, Perl, PHP, MySQL e. OS NT

c. ASP (NT base)
7. Bertugas melakukan coding atau pemrograman sebuah website adalah pekerjaan dari ....

a. Web designer d. Web master

b. Web programmer e. Web developer

c. Web administrator

8. Pemelihara server yang mengerti sistem operasi server mulai dari instalasi hingga

pemecahan masalah merupakan deskripsi dari seorang ....

a. Web designer d. Web master

b. Web programmer e. Web developer

c. Web administrator

9. Web designer, web programmer, dan web administrator merupakan profesi-profesi

tergabung dalam tim ....

a. Web developer d. entertainer

b. Web leader e. imposible

c. cheerleader

10. HTML, XHTML, dan XML merupakan bahasa ....

a. ilmiah d. mark-up

b. mesin e. assembly
c. website

F. DAFTAR PUSTAKA

1. Herliany, A., Tresnawati, Y. dan Aljauhari, Ali M. 2018. Pemrograman Web dan Perangkat

Bergerak SMK Kelas XI. Hal. 1-16. Bogor: Yudhistira.

2. Purnomo, Wahyu dan Damayanti, Endah . 2013. Pemrograman Web Untuk kelas X.

Malang: Kementerian Pendidikan & Kebudayaan.

3. Widodo, Sugeng. 2017. Konsep Web. Online di

https://www.youtube.com/watch?v=gKj5MPIyLus

4. Computers, Tutorial. 2016. Tutorial Cara Install XAMPP di Windows 7 Versi Terbaru.

Online di https://www.youtube.com/watch?v=gKj5MPIyLus

5. Factor, R Tech. 2017. How to install XAMPP in Windows 10 & 8.1/8/7. Online di

https://www.apachefriends.org

Teknologi Aplikasi Web | Muhamad Arif Budiyanto, ST. 8