BAHAN AJAR

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

“TEKNOLOGI APLIKASI WEB”
KELAS XI

DISUSUN OLEH:

NAMA : AHMAD NURSOHE

PROGRAM STUDI : TEKNIK KOMPUTER DAN INFORMATIKA

UNIVERSITAS PENDIDIKAN INDONESIA

2022
 KATA PENGANTAR

Puji syukur Penulis ucapkan kepada Allah S.W.T atas rahmat, taufiq dan
hidayah–Nya sehingga Materi Ajar Berbasis Problem Based Learning pada Modul Ajar
Pemrograman Web dan Perangkat Bergerak ini dapat terselesaikan.

Materi Ajar ini Penulis susun sebagai salah satu sumber belajar siswa
SMK/MAK kelas XI untuk mempelajari dan memper dalam materi Pemrograman Web
Dan perangkat Bergerak. Selain itu, Bahan Ajar 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, IPK, Tujuan Pembelajaran, Peta Konsep, Latihan Soal 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 Andauntuk
mempelajari lebih dalam tentang Pemrograman Web dan Perangkat Bergerak Materi
Teknologi Aplikasi Web dan menerapkannya dalam kehidupan sehari-hari untuk diri
sendiri dan lingkungan. Akhirnya, semoga Bahan Ajar Pemrograman Web dan
Perangkat Bergerak SMK/MAK Kelas XI ini bermanfaat bagi peserta didik dan seluruh
pembaca dalam memperoleh pengetahuan. Selamat belajar, semoga sukses.
.

Indramayu, Juli 2022

Penulis

Ahmad Nursohe
A. PENDAHULUAN

1. Deskripsi Singkat
Pemrograman Web dan Perangkat Bergerak adalah salah satu mata Wajib (C3)
diprogram keahlian Teknik Komputer dan Informatika (TKI). Berdasarkan struktur
kurikulum mata pelajaran Pemrograman Web Dan Perangkat Bergerak disampaikan
di kelas XI dan XII semester Ganjil dan semester Genap masing-masing 8 jam
pelajaran. Untuk Kelas XI semester Ganjil dan Semester Genap 13 jam Pelajaran
Untuk kelas XII. Untuk topik materi pembelajaran Kelas XI semester Ganjil
menekankan pada Tag HTML dalam Pembuatan Halaman Web sederhana. Pada
Kompetensi Dasar ini kita akan focus membahas konsep teknologi aplikasi web.

Pembelajaran Pemrogramanan Web dan perangkat Bergerak berbasis luring ini

menggunakan metode pendekatan scientifik. Dalam pendekatan ini praktikum atau
eksperimen berbasis sains merupakan bidang pendekatan ilmiah dengan tujuan dan
aturan khusus, dimana tujuan utamanya adalah untuk memberikan bekal ketrampilan
yang kuat dengan disertai landasan teori yang realistis mengenai fenomena yang akan
kita amati. Ketika suatu permasalahan yang hendak diamati memunculkan pertanyaan
– pertanyaan yang tidak bisa terjawab, maka metode eksperimen ilmiah hendaknya
dapat memberikan jawaban melalui proses yang logis.

2. Relevansi
a. Melalui kegiatan pembelajaran pada tayangan media power point tentang
aplikasi web server, Peserta didik dapat menjelaskan tentang aplikasi web
server dengan baik dan benar.
b. Melalui diskusi menggunakan LKPD, Peserta didik dapat menentukan langkah-
langkah instalasi aplikasi web server dengan benar dan disiplin.
c. Melalui tayangan video pembelajaran yang ditampilkan, Peserta didik dapat
mempraktekkan instalasi aplikasi web server dengan tepat dan
bertanggungjawab.
d. Melalui diskusi menggunakan LKPD Peserta didik dapat mencoba hasil
instalasi Web Server dengan benar.
 3. Petunjuk Belajar

Untuk membantu memahami materi ajar ini perhatikan petunjuk belajar berikut:

a. Bacalah uraian materi tentang web server yang mencakup pokok bahasan
definisi web server, cara kerja web server, dan instalasi web server.
b. Untuk memudahkan pemahaman terhadap materi ajar ini bacalah cara kerja
web server dengan seksama.
c. Bacalah masalah yang muncul dalam materi ajar ini yang terdiri dari
masalah yang secara umum muncul ketika mempelajari materi tentang
teknologi aplikasi web pada web server.

B. INTI

1. Kompetensi Dasar
3.1. Memahami konsep teknologi aplikasi web
4.1 Mempresentasikan berbagai teknologi pengembangan aplikasi web

2. Indikator Pencapaian Kompetensi

3.1.5 Menjelaskan aplikasi web server.
3.1.6 Mendemonstrasikan instalasi aplikasi web server
4.1.3 Mempraktekkan instalasi aplikasi web server
4.1.4 Menunjukkan hasil instalasi web server

3. Uraian Materi
a. Pengertian Web Server
Web Server adalah sebuah software yang berfungsi untuk menerima dan melayani
permintaan yang dikirimkan user melalui browser kemudian ditampilkan kepada user
sesuai dengan permintaan yang dikirimkan ke server.
Bisa dikatakan web server adalah pusat kontrol yang berfungsi untuk memproses
permintaan yang diterima dari browser. Layanan ini juga bisa merujuk sebagai software
atau hardware. Mengapa demikian? Karena sebuah server fisik atau server virtual yang
digunakan untuk menyimpan data website seperti HTML dokumen, gambar, file CSS
stylesheets, dan file JavaScript juga bisa disebut sebagai web server. Sedangkan Web
Server berbasis Software berfungsi sebagai pusat kontrol untuk memproses permintaan
yang diterima dari browser dan menampilkan sesuai dengan permintaan.

b. Cara Kerja Web Server

Bagaimana Cara Kerja Web Server?

Gambar1. Cara kerja web server

Cara kerja dari web server sebagai salah satu mesin tempat software atau aplikasi
beroperasi dalam mendistribusikan web page ke user/pengguna bias ditentukan oleh
permintaan user. Menghubungkan antara web server dan web browser internet, ini
merupakan gabungan dari jaringan komputer yang ada diseluruh dunia. Setelah
semuanya terhubung secara fisik, protocol TCP/IP atau networking protocol dan
berkomunikasi dengan semua computer didunia. Ketika browser meminta data web
page kepada server, instruksi dari permintaan data browser tersebut akan dikemas
ke dalam TCP yang merupakan satu protocol transport kemudian dikirim ke alamat,
dalam hal ini adalah protocol berikutnya, yaitu HTTP (Hyper Text Transfer
Protocol) yang sudah dikenal. Untuk dapat mengenal bisa mengetik http://, dan
seketika akan dibawa kejaringan internet seluruh dunia.
Data yang di-passing dari browser ke web server biasanya disebut (HTTP Request)
yang akan meminta web page dan kemudian mencarikan data HTML yang ada,
yang akan dikemas dalam bentuk TCP protocol. Selanjutnya, dikirim kembali ke
browser disebut (HTTP Response). Jika data yang diminta oleh browser tidak
ditemukan, hal itu akan menimbulkan error yang biasanya disebut dengan halaman
error 404 atau Page Not Found. Pengguna internet atau user dapat membaca dengan
mudah dari dokumen-dokumen yang lainnya hanya dengan mengeklik beberapa
 bagian dari beberapa halaman dokumen web tersebut. Proses dimulai dari
permintaan web server. Selanjutnya, akan diproses dan hasil proses tersebut
dikembalikan oleh web server kepada web client lagi. Hal ini dilakukan secara
cepat dan transparan. Web server secara garis besar hanya akan memproses semua
permintaan yang diperolehnya dari web client, tentunya dengan kecepatan yang
sangat tinggi hingga tidak mengetahui proses yang sebenarnya terjadi.

c. Jenis-jenis Web Server

1). Apache
Dari beberapa web server yang tersedia, Apache merupakan web server yang
paling populer dan paling banyak digunakan. Web server ini memiliki beberapa
dukungan seperti PHP, kontrol akses, dan SSL. Apache meletakkan kontrol akses
sebagai modul dimana yang paling banyak digunakan adalah modul Perl.
Sementara fitur PHP merupakan program yang mirip CGI (Common Gateway
Interface) untuk memproses teks.
2). IIS (Internet Information Services)
Web server IIS ini digunakan dalam OS Windows (Windows 2000 dan Windows
2003) yang didukung dengan komponen seperti protokol jaringan DNS, TCIP/IP
dan software yang digunakan untuk membuat situs web. IIS juga kompatibel
untuk mendukung beberapa protokol seperti FTP, HTTP, NNTP, SMTP dan SSL.
Kelebihan dari server ini bisa diakses pada penuh pada Windows dan mendukung
platform .NET. Kekurangannya adalah web server ini termasuk jenis yang
berbayar.
3). Nginx
Web server Nginx atau dibaca engine x ini merupakan web server yang open
source dan bisa digunakan oleh siapapun secara gratis selain Apache. Keunggulan
Nginx dibanding Apache yaitu pada Apache tidak dapat menangani web server
yang memiliki traffic tinggi. Dengan begitu untuk mendukung web bisnis
profesional dengan traffic tinggi, Nginx lebih baik digunakan daripada Apache.
Kelebihan lainnya adalah memiliki peforma tinggi, arsitektur event-based dan
fiturnya sangat bermanfaat.
 4). Lighttpd
Lighttpd atau yang dibaca lightly ini merupakan web server yang juga open
source dan dikembangkan oleh programmer berkebangsaan Jerman. Web server
ini lebih diutamakan digunakan pada OS Linux atau dari kelompok Unix lainnya.
Kelebihan dari web server ini yaitu memiliki kemampuan untuk mengatur CPU
load secara efektif dengan beberapa fitur lainnya seperti FastCGi, SCGI, URL-
Writing dan Output-Compression.
5). XAMPP
XAMPP adalah perangkat lunak berbasis web server yang bersifat open source
(bebas) serta mendukung di berbagai sistem operasi seperti OS Linux, OS
Windows, Mac OS, dan juga Solaris. XAMPP bisa dilakukan untuk menghemat
anggaran karena mampu menggantikan peran web hosting dengan cara
menyimpan file website ke dalam hosting lokal agar bisa dipanggil lewat browser.
Software XAMPP dikembangkan oleh tim bernama Apache Friends pada tahun
2002, yang bisa didapatkan secara gratis dengan label GNU (General Public
License).

d. Installasi Xampp
Untuk mendapatkan Xampp anda harus mendownloadnya di situs resmi XAMPP
https://www.apachefriends.org/index.html:
Download XAMPP dan sesuaikan dengan sistem operasi pc/laptop komputer anda.
Setelah file XAMPP tersedia. Silahkan double klik pada file XAMPP yang telah
berhasil anda download, pada contoh file XAMPP yang tersedia adalah
xamppwin32-5.5.28-0-VC11-installer.exe.
Selanjutnya akan muncul jendela peringatan tentang UAC (User Account Control).

Peringatan tersebut berkaitan dengan proteksi pada windows vista ke atas dimana
XAMPP diinstall pada folder C:\Program Files mungkin akan terjadi pembatasan
hak akses yang menyebabkan XAMPP tidak berjalan dengan normal. Solusinya
install Xampp selain di C:\Program Files atau matikan Service UAC Windows.
Klik OK untuk melanjutkan.

Berikutnya jendela awal installasi Xampp akan muncul, Klik Next untuk
melanjutkan.
 Setelah itu akan muncul jendela “Select Components” . Pada bagian ini anda bisa
memilih aplikasi apa saja yang akan di install. Dalam praktikum ini yang aplikasi
yang digunakan adalah Apache, MySQL, PHP, phpMyAdmin . Klik Next untuk
melanjutkan.

Setelah itu akan muncul jendela “Installation Folder” . Anda diminta untuk
menentukan lokasi folder installasi Xampp yang nantinya merupakan tempat/lokasi
file-file Xampp akan disimpan. Anda bebas menentukan lokasi ini. Klik Next
untuk melanjutkan.
Tampilan berikutnya adalah “Bitnami for XAMPP” . XAMPP menawarkan
Bitnami sebagai cara cepat mengintall CMS seperti Wordpress, joomla dan drupal.
Tetapi kita akan mengintall wordpress secara manual, maka hapus tanda centang
pada pilihan “learn more about Bitnami for Xampp” kemudian klik Next.

Jendela berikutnya adalah konfirmasi untuk memulai menginstall XAMPP, klik

Next dan XAMPP akan mulai di install dan tunggu hingga proses intallasi selesai.
 Jika muncul jendela “Completing the XAMPP Setup Wizard” maka proses
installasi XAMPP telah selesai. Check pada pilihan apabila anda akan memulai
kontrol panel Xampp. Klik Finsish. Setelah proses installasi selesai restart lah
PC/Laptop anda agar service Apache dan MySql bisa berjalan dengan baik.

e. Menguji Installasi Xampp

Jika anda membiarkan pilihan “do you want to start the Control Panel now?” pada
jendela terakhir proses instalasi XAMPP, maka akan tampil jendela XAMPP
Control Panel. Control Panel ini digunakan untuk mengontrol apa saja modul
XAMPP yang akan atau sedang dijalankan. Jika jendela ini tidak tampil, anda bisa
mengaksesnya dari menu START All Programs XAMPP XAMPP Control
Panel.
Untuk menguji installasi XAMPP, silahkan klik tombol Start pada modul Apache
dan MySQL. Jika tidak ada masalah akan tampil warna hijau pada bagian modul
tersebut. Selanjutnya buka web browser dan ketikan alamat localhost pada address
bar, kemudian tekan enter. Jika tampil jendela pembuka XAMPP, maka semuanya
telah terinstall dengan baik.

Untuk menguji modul MySQL berjalan dengan baik atau tidak ketikan
localhost/phpmyadmin pada address bar, maka akan tampil jendela MySQL
phpMyAdmin seperti berikut :
 Untuk selanjutnya semua file website (html,PHP) akan disimpan di dalam folder
XAMPP htdocs.

4. Tugas
Setelah selesai membaca materi utama bahan Ajar pemrograman web dan
perangkat bergerak ini selesaikanlah tugas berikut:

1) Simak dan amatilah dengan cermat video tayangan pembelajaran tentang

instalasi aplikasi web server (XAMPP) pada link
https://www.youtube.com/watch?v=sZEkM4kxY0c&t=92s
2) Download XAMPP yang sesuai dengan sistem operasi yang Anda gunakan pada
link https://www.apachefriends.org/download.html
3) Mempraktekkan instalasi aplikasi web server (XAMPP) sampai dengan selesai.
4) Menentukan langkah-langkah instalasi web server.
5) Mencoba hasil instalasi web server kemudian komunikasikan hasilnya dalam
kelompok dan buatlah kesimpulan.
6) Presentasikan hasil diskusi bersama-sama dengan kelompok lainnya di depan
kelas

5. Forum Diskusi
Dalam kegiatan ini setelah peserta didik melakukan pengamatan dalam
memahami tentang web server(xampp). Menyimak tayangan video
pembelajaran tentang langkah-langkah instalasi aplikasi web server(xampp)
Kemudian, menentukan langkah-langkah instalasi aplikasi web server(xampp)
dan Mempraktekkan instalasi aplikasi web server(xampp) dan Mencoba hasil
instalasi web server, Jika hasilnya tidak tampil atau tidak berhasil carilah
penyebabnya dan temukan solusi masalahnya dengan berdiskusi kelompok.
Diskusikan bersama kelompok kecil yang terdiri dari 5 orang peserta didik.
Buatlah lembar diskusinya dan presentasikan didepan kelas hasil dari diskusi
tersebut.
C. PENUTUP

1. Rangkuman

Web Server adalah sebuah software yang berfungsi untuk menerima dan
melayani permintaan yang dikirimkan user melalui browser kemudian ditampilkan
kepada user sesuai dengan permintaan yang dikirimkan ke server. User melakukan
permintaan melalui browser terhadap server (HTTP Request), Kemudian Server
Menerima request dan dan memprosesnya menjadi halaman situs web (HTTP
Response).

2. Tes Formatif
1. Software yang berfungsi untuk menerima dan melayani permintaan yang
dikirimkan user melalui browser kemudian ditampilkan kepada user sesuai
dengan permintaan yang dikirimkan ke server disebut ...
A. Web browser
B. Web Service
C. Web Dinamis
D. Web Statis
E. Web Server
2. Salah satu jenis web server open source lainnya yang awalanya ditulis oleh
programmer berkebangsaan jerman bahasa pemrograman C adalah ….
A. Apache
B. Nginx
C. IIS (Internet information servies)
D. Lighttpd
E. Semua jawaban salah
3. Hasil permintaan HTTP/HTTPS dari client dan mengirimkan kembali dalam
bentuk halaman-halaman website dalam format ….
A. PHP
B. TXT
C. DJVU
 D. HTML
E. PDF
4. Jika data yang diminta oleh web browser tidak ditemukan, akan
menimbulkan halaman error ...
A. 515
B. 404
C. 123
D. 044
E. 005
5. Bagaimanakah konsep web server yang benar dimana protocol yang
digunakan adalah http://… tanpa terhubung ke jaringan internet ?
A. Sediakan web server jaringan local pada sistem operasi windows,
aplikasi IIS dengan menggunakan port 443
B. Pasang jaringan internet melalui wifi yang tehubung ke web server
dengan sistem operasi Linux, aplikasi NGINX dengan mengakses
http://192.168.0.1
C. Pasang jaringan LAN ke web server dengan sistem operasi Linux,
aplikasi XAMPP dengan mengakses http://127.1.1.1
D. Gunakan sistem operasi windows server pada jaringan WLAN, aplikasi
XITAMI dengan menggunakan port 433
E. Sediakan web server jaringan virtual localhost pada sistem operasi
windows, aplikasi XAMPP dengan menggunakan port 80
6. Langkah-langkah untuk membuka aplikasi XAMPP pada windows yang
benar adalah..
A. START – XAMPP – All Program – XAMPP Control Panel
B. All Programs – XAMPP - XAMPP Control Panel - START
C. XAMPP – All Program - XAMPP Control Panel – START
D. START - All Programs – XAMPP - XAMPP Control Panel
E. XAMPP – All Program – START - XAMPP Control Panel
7. Server web yang digunakan dalam pemograman web berbasis server
adalah ...
 A. Apache
B. Tag
C. Script
D. Xampp
E. PHP
8. Langkah-langkah yang benar dalam instalasi aplikasi web server Xampp
pada windows sebagai berikut ...
A. Unduh Xampp - Setup Xampp Next - Select Components - Instalation
Folder - Next proses instalasi – Finish
B. Unduh Xampp - Instal Xampp - Setup Xampp Next - Select Components
- Instalation Folder - Next proses instalasi – Finish
C. Unduh Xampp - Instal Xampp - Setup Xampp Next - Select Components
- Instalation Folder - Finish
D. Unduh Xampp - Instal Xampp - Setup Xampp Next - Select Components
- Instalation Folder - Next proses instalasi – Jalankan Xampp
E. Unduh Xampp - Instal Xampp - Select Components - Instalation Folder -
Next proses instalasi – Jalankan Xampp
9. Berikut ini yang termasuk sistem operasi, kecuali ...
A. Windows
B. Mac Os
C. Linux
D. Microsoft
E. DOS
10. Manakah pada pilihan Web server dibawah ini yang mendukung JSP ? …
A. Web Server Apache Tomcat
B. Web Server Apache File
C. Web Server Apache Ekskutif
D. Web Server Apache Sistem
E. Web Server Apache Engine
3. Kunci Jawaban
1. E
2. D
3. D
4. B
5. E
6. D
7. A
8. B
9. E
10. A
 Daftar Pustaka
Priyanto Hidayatullah, Jauhari Khairul Kawistara. 2017. “Pemrograman Web edisi
Revisi”.Penerbit Informatika : Bandung.
Lita Likmalatri. 2018. “Pemrograman Web dan Perangkat Bergerak Kelas XI”. Dicetak Oleh
Putra Nugraha : Surakarta.
Patwiyanto, Sriwahyuni, Sumari Agus Prasetyo.2018.”Pemrograman Web dan Perangkat Bergerak
SMK/MAK Kelas XI”.Penerbit Andi:Yogyakarta.