RENCANA PELAKSANAAN PEMBELAJARAN

( RPP )

Satuan Pendidikan : SMK N 1 Ponorogo

Mata Pelajaran : Pemrograman Web Dinamis
Kelas / Semester : XII / 1
Alokasi Waktu : 2 x Pertemuan ( 8 x 45 Menit)

A. Kompetensi Inti
KI 3 : Pengetahuan : Memahami, menerapkan, menganalisis dan mengevaluasi
pengetahuan faktual, konseptual, prosedural, dan metakognitif
berdasarkan rasa ingin tahunya tentang ilmu pengetahuan, teknologi,
seni, budaya, dan humaniora dengan wawasan kemanusiaan, kebangsaan,
kenegaraan, dan peradaban terkait penyebab fenomena dan kejadian, serta
menerapkan pengetahuan prosedural pada bidang kajian yang spesifik
sesuai dengan bakat dan minatnya untuk memecahkan masalah.
KI 4 : Ketrampilan : Mengolah, menalar, menyaji, dan mencipta dalam ranah
konkret dan ranah abstrak terkait dengan pengembangan dari yang
dipelajarinya di sekolah secara mandiri serta bertindak secara efektif dan
kreatif, dan mampu menggunakan metoda sesuai kaidah keilmuan.

B. Kompetensi Dasar
1. KD pada KI Pengetahuan 3
Memahami konsep teknologi aplikasi web.
2. KD pada KI Ketrampilan 4
Menyajikan berbagai teknologi pengembang aplikasi web.

C. Indikator Pencapaian Kompetensi

1. Terlibat aktif dalam pembelajaran konsep teknologi aplikasi web
2. Bekerja sama dalam kegiatan kelompok
3. Disiplin dalam melakukan tugas belajar konsep teknologi aplikasi web.
4. Bertanggung jawab terhadap tugas belajar konsep teknologi aplikasi web.
5. Memahami profesi dalam bidang teknologi informasi
6. Memahami profesi dalam pengembangan aplikasi web
7. Memahami sejarah web
8. Memahami cara kerja web
9. Terampildalam menyajikan cara kerja web
10. Memahami alur pengembangan aplikasi web
11. Memahami perangkat pengembangan aplikasi web
12. Memahami alur pengembangan aplikasi web
13. Terampil dalam menyajikan perangkat pengembangan aplikasi web
D. Tujuan Pembelajaran
Dengan diskusi kelompok dalam pembelajaran konsep teknologi aplikasi web ini,
diharapkan siswa melakukan kerjasama, disiplin dalam kegiatan pembelajaran
menemukan, dan bertanggungjawab dalam pembelajaran serta dapat.
1. Memahami profesi dalam bidang teknologi informasi
2. Memahami profesi dalam pengembangan aplikasi web
3. Memahami sejarah web
4. Memahami cara kerja web
5. Menyajikan cara kerja web
6. Memahami alur pengembangan aplikasi web
7. Memahami perangkat pengembangan aplikasi web
8. Memahami alur pengembangan aplikasi web
9. Menyajikan perangkat pengembangan aplikasi web

E. Materi Pembelajaran

1. Profesi dalam pengembangan aplikasi web

Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi,
bagaimana dengan profesi yang berada dalam lingkungan pengembangan
aplikasi web? Berikut ini adalah profesi-profesi yang langsung terkait dalam
pengembangan aplikasi web, diantaranya :
A. Web Designer
Seorang desainer Web adalah orang yang bertanggung jawab untuk menentukan
tampilan sebuah website
B. Web Programmer
Web Programmer bertugas dalam melakukan pengcodingan atau pemograman
sebuah website agar dinamis.
C. Web Administrator
Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem
Operasi Server, baik itu mulai dari instalasi sampai kepada masalah
(troubleshooting)
D. Web Master
Seoarang Web Master adalah seorang yang mengerti akan kesemua hal mulai
dari disain, program dan keamanan server namun tidak terlalu turut mencampuri
ke masing-masing divisi, cukup dengan mempertanggun jawabkan atas jalannya
suatu situs (web).

2. Sejarah web
Internet adalah jaringan komputer yang saling terhubung. Tidak ada perusahaan
yang memiliki internet, yang merupakan upaya kerja sama diatur oleh sistem
standar dan aturan. Tujuan dari menghubungkan komputer bersama-sama, tentu
saja, adalah untuk berbagi informasi. Ada banyak cara informasi dapat
dikirimkan antar komputer, termasuk email, transfer file (File Transfer Protocol),
 dan banyak layanan yang lebih khusus yang dibangun dalam layanan Internet.
Metode ini standar untuk mentransfer data atau dokumen melalui jaringan
dikenal sebagai protokol.
WWW dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa
(CERN : Organisation Europeenne pour la Recherche Nucleaire), Jenewa, Swiss.
Pada tahun 1989 Berners-lee membuat pengajuan untuk proyek pembuatan
hiperteks global, kemudian pada bulan Oktober 1990, 'World Wide Web' sudah
dapat dijalankan dalam lingkungan CERN. Pada musim panas tahun 1991,
WWW secara resmi digunakan secara luas pada jaringan Internet.

3. Cara Kerja Web

Bagaimana cara kerja website? Cara kerja website pada dasarnya yaitu input,
proses dan output. Website adalah halaman informasi yang disediakan melalui
jalur internet sehingga bisa diakses di seluruh dunia selama terkoneksi dengan
jaringan internet.
Website merupakan komponen atau kumpulan komponen yang terdiri dari teks,
gambar, suara, video, animasi dan lain sebagainya. Sehingga lebih merupakan
media informasi yang menarik untuk dikunjungi. Semua website pasti
mempunyai domain dan web server. Domain bisa kita analogikan sebagai alamat
rumah, sedangkan web server sebagai rumah untuk menyimpan berbagai
perabotan rumah tangga.
Bagaimana cara website bekerja?
• Pertama, misal Anda ingin mencari informasi melalui mesin pencari (search
engine) Google.
• Tentunya Anda terlebih dahulu akan menjalankan aplikasi web browser baik
itu Internet Explorer, Mozilla, Chrome, Opera, dan lain sebagainya yang telah
terkoneksi internet.
• Anda lalu mengetikan URL (Uniform Resource Locator) atau domain di web
browser, misal www.google.com atau google.com.
• Nah pada saat itu domain yang Anda ketikkan tersebut perlu diterjemahkan
menjadi alamat IP karena komputer Anda sebenarnya hanya bisa mengakses
alamat IP. Tugas penerjemahan ini dilakukan oleh Domain Name System
(DNS), karena itu komputer Anda akan meminta bantuan DNS server yang
terdaftar untuk menerjemahkan nama domain tersebut. DNS server
menemukan alamat google.com dan memberikan alamat IP-nya kepada
browser Anda. Browser Anda segera menuju server dengan alamat IP yang
didapatkan dari DNS server dan meminta halaman yang tersedia didalam web
server tersebut.
• Setelah web server menerima permintaan (request), web server lalu akan
memprosesnya (process) dan memberikan hasil data (output). Untuk lebih
jelasnya silahkan lihat ilustrasi gambar cara kerja website di bawah ini
4. 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:
• Komputer Utama, dengan operating system Macintosh, Windows, ataupun
Linux. Perusahaan pengembangan web profesional cenderung berbasis
Macintosh.
• Memori tambahan. sebaiknya computer memiliki memori yang besar,
karena dalam pengembangan web cenderung kita akan membuka beberapa
aplikasi sekaligus.
• 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.

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 :
Adobe Dreamweaver, aplikasi ini berbayar dan dibawah lisensi perusahaan
Adobe, aplikasi ini banyak digunakan oleh pengembang web. Memiliki
banyak fasilitas dan fiture.
Microsoft Expression Web (lisensi dari Windows). Bagian dari Microsoft’s
suite yang merupakan aplikasi perancangan professional.
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 :
• TextPad (Windows saja). TextPad adalah plain-text
sederhana dan murah untuk editor kode di Windows.
• Teks Sublime (Window, Mac, Linux). Editor teks ini terlihat
dipreteli namun memiliki banyak fungsi (seperti kode warna
dan ikhtisar kode penuh) bagi pengembang web.
• Coda oleh Panic (hanya Macintosh). Pengguna Coda seperti
alur kerja yang visual, alat-alat manajemen file, dan built-in
akses terminal.
• 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.
• 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 :
• Adobe Photoshop. Photoshop dapat dikatakan sebagai
standar industri untuk penciptaan gambar baik dalam cetak
maupun dunia web.
• 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

F. Model dan Metode Pembelajaran

1. Model pembelajaran : Saintifik (scientific), inquiri terbimbing
menggunakan kelompok diskusi yang berbasis masalah (problem-based
learning).
2. Metode Pembelajaran : Ceramah, diskusi, Tanya jawab dan penugasan

G. Kegiatan Pembelajaran
Pertemuan ke 1
1. Pendahuluan ( 15 Menit )
1. Guru memberikan salam, mengkondisikan kesiapan belajar dan menciptakan
suasana yang menyenangkan.
2. Guru mengecek kehadiran siswa.
3. Guru menyampaikan tujuan pembelajaran yang akan dicapai.
4. Guru memberikan motivasi pentingnya penguasai materi yang akan dibahas
untuk menumbuhkan rasa percaya diri pada siswa.

2. Kegiatan Inti ( 145 Menit )

1. Guru mengarahkan siswa mengenal konsep teknologi aplikasi web dengan
media presentasi disertai tanya jawab
2. Guru mengelompokkan siswa secara heterogen dengan jumlah anggota 4-5
orang siswa.
3. Guru memberikan permasalahan dalam bentuk LKS untuk menemukan
konsep cara kerja web yang didiskusikan dalam kelompoknya masing-
masing.
4. Dalam kegiatan diskusi kelompok, guru berkeliling untuk mengamati dan
memfasilitasi kegiatan siswa sehingga terjadi interaksi yang kondusif (nilai
sikap dan keterampilan dinilai melalui lembar pengamatan)

3. Penutup ( 20 Menit )
1. Siswa menyimpulkan konsep teknologi aplikasi web dengan guru sebagai
fasilitator melalui tanya jawab.
2. Dengan media presentasi, guru menayangkan apa yang telah dipelajari dan
menyimpulkan konsep teknologi aplikasi web.
3. Guru memberikan beberapa soal dari buku siswa kelas x sebagai pekerjaan
rumah.
4. Guru mengakhiri kegiatan belajar dengan memberikan pesan untuk tetap
belajar.

Pertemuan ke 2
4. Pendahuluan ( 15 Menit )
1. Guru memberikan salam, mengkondisikan kesiapan belajar dan menciptakan
suasana yang menyenangkan.
2. Guru mengecek kehadiran siswa.
3. Guru menyampaikan tujuan pembelajaran yang akan dicapai.
4. Guru memberikan motivasi pentingnya penguasai materi yang akan dibahas
untuk menumbuhkan rasa percaya diri pada siswa.

5. Kegiatan Inti ( 145 Menit )

 1. satu kelompok diskusi (tidak harus yang terbaik) diminta untuk
mempresentasikan hasil diskusinya ke depan kelas. Sementara kelompok lain,
menanggapi dan menyempurnakan apa yang dipresentasikan.
2. Dengan tanya jawab, guru membimbing siswa untuk mengarahkan
pemahaman siswa mengenai konsep teknologi aplikasi web.

6. Penutup ( 20 Menit )
1. Siswa menyimpulkan konsep teknologi aplikasi web dengan guru sebagai
fasilitator melalui tanya jawab.
2. Dengan media presentasi, guru menayangkan apa yang telah dipelajari dan
menyimpulkan konsep teknologi aplikasi web.
3. Guru memberikan beberapa soal dari buku siswa kelas x sebagai pekerjaan
rumah.
4. Guru mengakhiri kegiatan belajar dengan memberikan pesan untuk tetap
belajar.

H. Alat/Media/Sumber Pembelajaran
Alat : Laptop dan LCD proyektor.
Media : Media presentasi powerpoint, lembar kerja siswa, lembar penilaian.
Sumber Belajar : Buku sekolah electronik Pemrograman Web kurikulum 2013, buku
sekolah electronic Rekayasa Perangkat Lunak Jilid 3 untuk
SMK, Ainur Rofiq Mulyanto, dkk. 2008, Modul Rekayasa
Perangkat Lunak 2, Yudistira, Bogor.2011, sumber dari
internet serta sumber lain yang relevan.

I. Penilaian Hasil Belajar

1. Teknik Penilaian
a. Pengamatan
b. Test tertulis

2. Prosedur Penilaian
 No Aspek yang dinilai Teknik Penilaian Waktu Penilaian
1. Pengetahuan Pengamatan dan tes Penyelesaian tugas individu
a. Menjelaskan sejarah dan dan kelompok
cara kerja web.
b. Menemukan pola serta
cara kerja web secara
kreatif
c. Menerapkan konsep sesuai
dengan karakteristiknya
dalam memecahkan
permasalahan
2. Keterampilan Pengamatan Penyelesaian tugas (baik
a. Terampil menerapkan individu maupun kelompok)
konsep/prinsip dan strategi dan saat diskusi
pemecahan masalah yang
relevan yang berkaitan
dengan konsep cara kerja
web

J. Instrumen Penilaian Hasil Belajar

a. Tes tertulis
b. Lembar Pengamatan penilaian sikap

Mengetahui Ponorogo, Juli 2018

Kepala Sekolah Guru Mata Pelajaran

Drs. UDI TYAS ARINTO,MM Khamim Qolili,S.Kom

NIP. 19640116 199003 1 011

Lampiran 1
Test tertulis

NO. SOAL JAWABAN

1. Jelaskan pengertian dari web Merupakan orang yang melakukan kegiatan perencanaan,
designer! termasuk studi kelayakan, analisis dan desain terhadap
suatu proyek pembuatan aplikasi berbasis web.
2. Jelaskan cara kerja web! Pertama, misal Anda ingin mencari informasi melalui
mesin pencari (search engine) Google.
Tentunya Anda terlebih dahulu akan menjalankan
aplikasi web browser baik itu Internet Explorer, Mozilla,
Chrome, Opera, dan lain sebagainya yang telah
terkoneksi internet.
Anda lalu mengetikan URL (Uniform Resource Locator)
atau domain di web browser, misal www.google.com
atau google.com.
Nah pada saat itu domain yang Anda ketikkan tersebut
perlu diterjemahkan menjadi alamat IP karena komputer
Anda sebenarnya hanya bisa mengakses alamat IP. Tugas
penerjemahan ini dilakukan oleh Domain Name System
(DNS), karena itu komputer Anda akan meminta bantuan
DNS server yang terdaftar untuk menerjemahkan nama
domain tersebut. DNS server menemukan alamat
google.com dan memberikan alamat IP-nya kepada
browser Anda. Browser Anda segera menuju server
dengan alamat IP yang didapatkan dari DNS server dan
meminta halaman yang tersedia didalam web server
tersebut.
Setelah web server menerima permintaan (request), web
server lalu akan memprosesnya (process) dan
memberikan hasil data (output).
3. Alternatif model dari Formulasi, Perencanaan (planning), Analisis (analysis),
Pengembangan Aplikasi Web Rekayasa (engineering), Implementasi (page generation)
adalah! & pengujian (testing), Evaluasi oleh konsumen (customer
evaluation).
3. Sebutkan 3 contoh software Adobe Dreamweaver,
yang termasuk Web page Microsoft Expression Web (lisensi dari Windows),
authoring! Nvu (Linux, Windows, dan Mac OS X).

Kreteria penilaian
No Soal Kriteria Skor
(Bobot)
a. Jawaban tepat atau benar semua 25
b. Jawaban sebagian besar benar 20
1 ( Bobot
c. Jawaban sebagian kecil benar 10
25)
d. Jawaban salah 5
e. Tidak menjawab 0
SkorMaksimal 25
a. Jawaban tepat atau benar semua 25
b. Jawaban sebagian besar benar 20
1 ( Bobot
c. Jawaban sebagian kecil benar 10
25)
d. Jawaban salah 5
e. Tidak menjawab 0
SkorMaksimal 25
a. Jawaban tepat atau benar semua 25
b. Jawaban sebagian besar benar 20
1 ( Bobot
c. Jawaban sebagian kecil benar 10
25)
d. Jawaban salah 5
e. Tidak menjawab 0
SkorMaksimal 25
a. Jawaban tepat atau benar semua 25
b. Jawaban sebagian besar benar 20
1 ( Bobot
c. Jawaban sebagian kecil benar 10
25)
d. Jawaban salah 5
e. Tidak menjawab 0
SkorMaksimal 25
 LEMBAR PENGAMATAN PENILAIAN KETERAMPILAN

Mata Pelajaran : Pemrograman Web Dinamis

Kelas/Semester : XII RPL /1
Waktu Pengamatan : 45 Menit

Indikator terampil menerapkan konsep/prinsip dan strategi pemecahan masalah yang

relevan yang berkaitan dengan konsep teknologi aplikasi web.
1. Kurang terampil jika sama sekali tidak dapat menerapkan konsep/prinsip dan strategi
pemecahan masalah yang relevan yang berkaitan dengan konsep teknologi aplikasi
web.
2. Terampil jika menunjukkan sudah ada usaha untuk menerapkan konsep/prinsip dan
strategi pemecahan masalah yang relevan yang berkaitan dengan konsep teknologi
aplikasi web tetapi belum tepat.
3. Sangat terampill jika menunjukkan adanya usaha untuk menerapkan konsep/prinsip
dan strategi pemecahan masalah yang relevan yang berkaitan dengan konsep
teknologi aplikasi web.dan sudah tepat.

Bubuhkan tanda √ pada kolom-kolom sesuai hasil pengamatan.

KETERAMPILAN
MENERAPKAN KONSEP/PRINSIP DAN STRATEGI
NO. NAMA SISWA PEMECAHAN MASALAH
KT T ST

Keterangan:
KT : Kurang terampil
T : Terampil
ST : Sangat terampil