F/7.5.1.

P/T/WKS4/15 03 Agustus 2011

LEMBAGA PENDIDIKAN MAARIF NAHDLATUL ULAMA SEKOLAH MENENGAH KEJURUAN SMK MAARIF 1 TEMON Alamat : Temon Wetan, Temon, Kulon Progo 55654 Yogyakarta Telp. (0274 ) 6472568 e-mail : maarifsatu.temon@yahoo.com

RENCANA PELAKSANAAN PEMBELAJARAN ( RPP )

Mata Pelajaran Kelas/Semester Pertemuan Ke Alokasi Waktu Standar Kompetensi Kompetensi Dasar Pendidikan karakter Indikator : Kompetensi Keahlian Rekayasa Perangkat Lunak : XI / 1 : 1 dan 2 : 6 jam x 45 menit : Menerapkan dasar-dasar pembuatan web statis tingkat dasar : Menjelaskan konsep dasar dan teknologi Webpage : gemar membaca, kreatif, teliti : 1. Konsep-konsep dan teknologi web dijelaskan (web Server, URL, HTTP, HTML, Web browser ). 2. Perbedaan antara klien dan server dijelaskan 3. Ciri-ciri dan fungsi dari software teks editor yang tersedia untuk merancang web page dibandingkan. 4. Keuntungan dan kerugian running dari server yang dimiliki dibandingkan server provider dijelaskan. KKM I. Tujuan Pembelajaran Pertemuan 1 1. 2. Siswa dapat memahami konsep konsep dan teknologi web meliputi web Siswa dapat mengetahui perbedaan antara client dan server server, URL, HTTP, HTML, Web Browser), konsep web statis dan web dinamis : 7.5

3. 4.

Siswa mampu menyebutkan ciri ciri dan fungsi dari software teks editor yang Siswa dapat mengetahui keuntungan dan kerugian running dari server local dan

tersedia untuk merancang web page dan dibandingkan. server provider II. Materi Ajar 1.1. Standar Teknologi Web Secara umum teknologi disain web terbagi menjadi beberapa layer (lapisan), yaitu structural layer, presentation layer dan behavioral layer. 1. Structural layer Layer ini berhubungan dengan struktur dokumen dokumen web. Bagaimana sebuah dokumen tersusun, format apa yang dipakai, tanda atau mark up apa yang digunakan merupakan bagian dari layer ini. Standar teknologi yang direkomendasikan saat ini adalah Extensible Hypertext Markup Language (XHTML) dan Extensible Markup Language (XML). XHTML adalah HTML versi terakhir (4.01) yang ditulis ulang dengan dengan aturan-aturan yang lebih ketat mengacu pada XML. Sedangkan XML adalah sekumpulan aturan untuk menyusun bahasa markup. 2. Presentation Layer Layer ini berhubungan dengan bagaimana mengatur tampilan dokumen pada layar, suara yang keluar, atau bagaimana format pencetakan dokumen. Pada teknologi web lama bagian ini menyatu dengan structural layer. Tapi pada standar baru, layer ini disarankan untuk dipisah. Yang termasuk teknologi ini adalah Cascading Style Sheets (CSS). 3. Behavioral Layer
Layer ini berhubungan dengan masalah penggunaan bahasa skrip dan pemrogramannya untuk tujuan meningkatkan sisi interaktif dan dinamis halaman web. Yang termasuk dalam layer ini adalah Document Object Model (DOM) dan JavaScript. DOM memungkinkan suatu dokumen atau skrip untuk mengakses atau meng-update isi, struktur, dan style dari dokumen. JavaScript merupakan teknologi yang cukup lama dan tetap digunakan untuk menambah dokumen menjadi lebih interaktif. Web Statis dan Web Dinamis Web dibagi menjadi 2 yaitu Web Statis dan Web Dinamis. Web Statis adalah web yang isi (data dan informasi) bersifat tetap / tidak berubah-ubah. Dokumen dikirim ke client akan sama dengan dokumen yang ada di server.

Web Dinamis adalah web yang Halaman-halaman web yang isi dan informasinya berubahubah sesuai dengan permintaan pengguna.

1.2.

Perangkat Lunak
1. Sistem Operasi Sistem operasi ini memegang peranan penting dalam proses pembuatan web karena nanti akan diinstal web server, text editor, sistem management basis data dan pemrograman. 2. Web server Web server adalah perangkat lunak yang bertindak melayani permintaan permintaan client terhadap halaman-halaman web tertentu. Ada beberapa nama yang cukup populer dalam dunia web server. Diantaranya adalah Apache dan IIS (Internet Information Service). Apache dapat digunakan baik untuk web statis maupun web dinamis dan mendukung banyak platform sistem operasi dan bahasa pemrograman server, antara lain Perl, Phyton, Java (JSP dengan menggunakan Tomcat) dan tentu saja PHP. Fungsi-fungsi keamanan web juga dikendalikan dengan sangat baik. Dukungan pada koneksi dengan berbagai basis data, seperti MySQL, SQL Lite, PosgreSQL, Oracle, DB2 dan lain-lain dapat dilakukan dengan baik. 3. Web Editor Web / HTML Editor adalah perangkat lunak yang digunakan untuk membuat halamanhalaman web, baik yang bersifat statis maupun dinamis. Dalam pasaran perangkat lunak banyak sekali web editor yang bisa dipakai seperti Notepad pada Windows, Vi/Vim pada Linux. Beberapa aplikasi yang dikhususkan untuk membuat web antara lain adalah : Adobe Dreamweaver (dulu Macromedia Dreamweaver), Microsoft Visual Studio .Net, dan beberapa yang lainnya, kita akan mendapati fasilitas yang sangat membantu mempercepat pembuatan halaman web, antara lain: tampilan berbasis GUI, automatic code completion (melengkapi kode secara otomatis), WYSIWYG (What You See Is What You Get) HTML Editor, koneksi ke basis data yang lebih mudah, dan banyak lagi fasilitas 4. Web browser Web browser berfungsi menerjemahkan kode-kode HTML menjadi tampilan yang kita kehendaki. Beberapa nama yang cukup terkenal antara lain Microsoft Internet Explorer, Firefox, Opera atau Safari.

1.3.

Membuat Halaman Web. Ada dua metode dalam membuat web yang pertama dokumen web dibuat dikomputer lokal setelah jadi kemudian dipindahkan dikomputer server. Sedangkan yang kedua halaman web langsung letakkan ke komputer server langsung. Dalam pembelajaran ini kita akan membuat dengan cara yang pertama. Sebagai gambaran pembuatan direktory website pada umumnya dibuat sebagai berikut :

Direktori group hal web 1

Halaman web 1 Halaman web 2 Halaman web 3 Halaman web 1 Halaman web 2 Halaman web 3

HOME

Direktori group hal web 2

Direktori konten ex: gambar /sound

III. Metode Pembelajaran 1. 2. 3. 4. 5.

Ceramah Tanya jawab Diskusi Literatur Praktek

IV. Kegiatan Pembelajaran Pertemuan 1 Kegiatan Kegiatan Awal 1. Salam pembuka dilanjutkan doa 2. Presensi Siswa yang hadir 3. Guru menjelaskan tujuan pembelajaran Kegiatan Inti 1. Eksplorasi Menggali informasi ke siswa tentang pengetahuan mereka tentang internet,HTML, URL,HTTP dan website 2. Elaborasi - Memberikan kerangka acuan berfikir kepada siswa tentang materi konsep

Waktu Metode 10 ceramah

35

Ceramah

90

Ceramah

website sehingga siswa memberi respon terhadap pertanyaan guru selama materi disampaikan. - Siswa mendapat tugas untuk mencari informasi tentang website, url, HTTP, client server, teknologi web dan internet pada literatur dan buku Bse RPL. - Meminta kepada siswa untuk menjawab pertanyaan yang berkaitan dengan web site, teknologi yang digunakan, server, dan client 3. Konfirmasi Memberikan post tes lesan tentang materi yang sudah di sampaikan pada tahap elaborasi.

Literatur

Tanya Jawab

10

Tanya Jawab

Pertemuan 2 Kegiatan Waktu Metode Kegiatan Awal 10 ceramah 1. Salam pembuka dilanjutkan doa 2. Presensi Siswa yang hadir 3. Guru menjelaskan tujuan pembelajaran Kegiatan Inti 1. Eksplorasi - Menggali informasi ke siswa tentang 10 Tanya jawab pengetahuan mereka tentang teks editor dan server 2. Elaborasi - Memberikan kerangka acuan berfikir 10 kepada siswa tentang teks editor yang Ceramah dan digunakan dalam pembuatan website demontrasi. dengan mendemokan beberapa program teks editor. - Siswa mendapat tugas membuka beberapa 50 Penugasan dan teks editor yang dapat digunakan dalam praktik pembuatan website dan mencari kelebihan dan kekurangan masing-masing. - Siswa mencari informasi diliteratur tentang 40 Penugasan server local dan server provider dan mencatat kelebihan dan kekurangan masing masing. - Meminta kepada siswa untuk menjawab pertanyaan yang berkaitan dengan web site, Tanya jawab teknologi yang digunakan, server, dan client 3. Konfirmasi Tanya Jawab. - Memberikan post tes lesan tentang materi yang sudah di sampaikan pada tahap 15

elaborasi.

C. Kegiatan Akhir 1. Memberikan gambaran untuk materi pelajaran berikutnya. 2. Salam penutup Alat/Bahan/Sumber Belajar 1. Buku Modul 2. Komputer 3. Software 4. Slide Presentasi tentang Web Penilaian Tes Tertulis Butir Soal 1. 2. 3. web! 4. - HTTP - HTML - URL 5. Berikan penjelasan tentang web statis dan web dinamis pengaruhnya terhadap cilent sebagai pengguna web dan server sebagai penyedia layanan! Berikan definisi istilah istilah berikut : Sebutkan apakah yang dimaksud dengan struktural layer, presentation Sebutkan teks editor yang ada dipasaran software saat ini! Sebutkan kelebihan teks editor yang khusus digunakan untuk desain layer dan behavioral layer!

Kunci Jawaban 1. Strukture layer : Layer ini berhubungan dengan struktur dokumen dokumen web. Bagaimana sebuah dokumen tersusun, format apa yang dipakai, tanda atau mark up apa yang digunakan merupakan bagian dari layer ini Presention Layer : Layer ini berhubungan dengan bagaimana mengatur tampilan dokumen pada layar, suara yang keluar, atau bagaimana format pencetakan dokumen

Behavioral 2. 3. 4.

: Layer ini berhubungan dengan masalah penggunaan bahasa skrip dan

pemrogramannya untuk tujuan meningkatkan sisi interaktif dan dinamis halaman web. Notepad, Vi, adobe dream weaver, microsoft Frontpage, microsoft Visual Kelebihan web editor khusus untuk web tampilan berbasis GUI, automatic code completion (melengkapi kode secara otomatis), WYSIWYG (What You See Is What You Get) HTML Editor, koneksi ke basis data yang lebih mudah, dan banyak lagi fasilitas HTTP atau Hypertext Transfer Protocol merupakan protokol yang digunakan Stodio.net

untuk mentransfer data atau dokumen yang berformat HTML dari web server ke browser web HTML atau Hypertext Markup Language merupakan salah satu format standar yang URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet yang menunjukan lokasi gambar, file, atau konten suatu web. 5. server. Web Dinamis adalah web yang Halaman-halaman web yang isi dan informasinya berubah-ubah sesuai dengan permintaan pengguna. Web Statis adalah web yang isi (data dan informasi) bersifat tetap / tidak

berubah-ubah. Dokumen dikirim ke client akan sama dengan dokumen yang ada di

Penskoran Bobot @soal 20 Nilai total = 5 X 20 =100 Ka Sek/Wa ka kur/Ka prog Temon, 3 Juli 2012 Guru Mata Pelajaran

NOOR HIDAYATI

UJI WARDOYO, S.KOM