(RPP)
A. Kompetensi Inti
3. Memahami, menerapkan, menganalisis, dan mengevaluasi tentang pengetahuan faktual,
konseptual, operasional dasar, dan metakognitif sesuai dengan bidang dan lingkup kerja
Teknik Komputer dan Informatika pada tingkat teknis, spesifik, detil, dan kompleks,
berkenaan dengan ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam konteks
pengembangan potensi diri sebagai bagian dari keluarga, sekolah, dunia kerja, warga
masyarakat nasional, regional, dan internasional.
4. Melaksanakan tugas spesifik, dengan menggunakan alat, informasi, dan prosedur kerja yang
lazim dilakukan serta menyelesaikan masalah sederhana sesuai dengan bidang dan lingkup
kerja Teknik Komputer dan Informatika. Menampilkan kinerja mandiri dengan mutu dan
kuantitas yang terukur sesuai dengan standar kompetensi kerja.Menunjukkan keterampilan
menalar, mengolah, dan menyaji secara efektif, kreatif, produktif, kritis, mandiri,
kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan pengembangan dari
yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik dibawah
pengawasan langsung.Menunjukkan keterampilan mempersepsi, kesiapan, meniru,
membiasakan gerak mahir, menjadikan gerak alami, sampai dengan tindakan orisinal dalam
ranah konkret terkait dengan pengembangan dari yang dipelajarinya di sekolah, serta
mampu melaksanakan tugas spesifik dibawah pengawasan langsung.
C. Tujuan Pembelajaran
Setelah mengikuti pembelajaran tentang formulir pada halaman web dengan pendekatan
saintifik dan model pembelajaran Project Based Learning, peserta didik diharapkan dapat
mencapai kompetensi berikut ini :
1. Menjelaskan konsep formulir dalam halaman web dengan benar dan tanggungjawab.
2. Menjelaskan tag-tag HTML untuk formulir dalam halaman web dengan benar dan
tanggungjawab.
3. Menjelaskan berbagai metoda inputan formulir dalam halaman web dengan benar dan
tanggungjawab.
4. Menentukan prosedur pembuatan format formulir dalam halaman web dengan tepat.
5. Menerapkan prosedur pembuatan formulir dalam halaman web dengan tepat.
6. Merancang program untuk menampilkan formulir dalam halaman web dengan tepat.
7. Membuat program tampilan formulir dalam halaman web dengan tepat.
8. Menguji program tampilan formulir dalam halaman web penuh kreatifitas dan
bertanggungjawab.
D. Materi Pembelajaran
Mengenali konsep formulir dalam HTML
Formulir pada halaman web biasanya disebut dengan form. Form merupakan sebuah
halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya
masukan dari pengguna tersebut diolah menggunakan Bahasa pemrograman web baik
secara server side scripting (misalnya PHP, JSP) ataupun client side scripting (javascript)
dan disimpan ke dalam database. Form digunakan untuk mengumpulkan informasi,
keperluan login, dan untuk menyimpan data.
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan
<form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk
dapat berfungsi dengan seharusnya. Atribut pertama adalah action, yang berfungsi untuk
menjelaskan kemana data form akan dikirimkan. Biasanya nilai dari atribut action ini
adalah alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian
form akan dikirim oleh web browser. Nilai atribut method ini bisa berupa get atau post.
Perhatikan kode program berikut agar lebih jelas dalam menuliskan tag form :
<form>
……..
</form>
<body>
<p><b>Sign in </b></p>
<form> Alamat Email : <input type="text" name="email">
<br> Password : <input type="password" name="password" maxlength="8">
</form>
</body>
</html>
Penjelasan dari kode HTML di atas adalah :
<b> digunakan untuk menebalkan teks
Input type=”password” digunakan untuk membuat teks berubah menjadi tipe password
Maxlength digunakan untuk menetapkan batas jumlah maksimum karakter yang dapat
dimasukkan yaitu 8.
3. Entri Checkbox Button
Entri checkbox button sama halnya dengan radio button. Fungsi yang dimiliki dari
checkbox button adalah untuk memilih beberapa pilihan (lebih dari satu) dari pilihan
yang disediakan. Untuk membuatnya diperlukan tag sebagai berikut :
<input type=”checkbox” name=” ” value=” “>
4. Entri Select (Combobox)
Entri select adalah entri yang memberikan pilihan dan dapat dipilih dengan mengklik
tombol panah. Untuk membuat entri select diperlukan tag sebagai berikut :
<select name=”name”>
<option value=”entri”> Entri-1 </option>
</select>
Penjelasan dari kode HTML diatas adalah :
<select name=”name”> digunakan untuk memberikan nama pada entri select
<option value=”entri”> Entri-1 </option> digunakan untuk memberikan nilai pada
pilihan pertama dari entri select.
Entri-1 digunakan untuk menampilkan pilihan yang ada pada halaman web.
Link dalam form
Hyperlink atau pranala adalah acuan dalam dokumen hiperteks ke dokumen lain atau
sumber lain. Dengan kata lain, hyperlink merupakan suatu cara untuk menghubungkan suatu
bagian tertentu di dalam slide, file dokumen, program, atau halaman web dengan bagian
yang lainnya pada bidang tersebut. Hyperlink atau link digunakan untuk menghubungkan
beberapa objek, file, halaman website, dan lainnya. Saat hyperlink di klik maka kita akan
diarahkan ke halaman lainnya sehingga dengan fitur hyperlink dapat memudahkan untuk
membuka antar file atau dokumen
Biasanya teks yang mengandung hyperlink terlihat berbeda dengan teks biasa yang
ada di sebuah halaman website atau halaman presentasi. Warna hyperlink ini biasanya
berwarna biru dan ketika kursor komputer diarahkan ke link tersebut maka pada tulisan yang
mengandung hyperlink akan terlihat ada underline, warna teks berubah, dan tampilan kursor
menjadi gambar tangan yang menunjuk ke arah hyperlink tersebut.
Hyperlink dapat disematkan pada teks ataupun pada gambar sehingga ketika teks
atau gambar tersebut diklik maka pembaca akan diarahkan ke halaman lain sesuai dengan isi
link. Macam-macam atribut dalam format link adalah :
1. Hyperlink dengan atribut title
2. Hyperlink dengan gambar.
F. Kegiatan Pembelajaran
Deskripsi Kegiatan Alokasi
No. Tahapan
Guru Peserta Didik Waktu
1. Pendahuluan 20’
a Salam Guru membuka Peserta didik menjawab 1’
pelajaran dengan salam guru.
mengucapkan salam
b Do’a Guru menginstruksikan Peserta didik berdoa 5’
kepada ketua kelas sesuai kepercayaannya
untuk memimpin masing-masing dengan
berdoa dipimpin oleh ketua kelas
c Apersepsi dan Guru mengabsen dan Peserta didik 3’
Motivasi menyiapkan peserta memperhatikan guru dan
didik agar siap merespon ketika guru
menerima materi mengabsen
pembelajaran
Guru melakukan
penilaian sikap saat
peserta didik melakukan
pengerjaan form pada
web
e Tahap 5: Guru menyampaikan Peserta didik 10’
Deskripsi Kegiatan Alokasi
No. Tahapan
Guru Peserta Didik Waktu
Communication aturan teknis presentasi memperhatikan penjelasan
dari guru tentang teknik
presentasi
Guru melakukan
penilaian saat peserta
didik berdiskusi dengan
menggunakan lembar
penilaian
3. Penutup 40’
a Refleksi Guru membimbing Peserta didik melakukan 20’
peserta didik untuk refleksi dan
melakukan refleksi menyimpulkan materi
terhadap materi yang yang telah dipelajari dan
telah dipelajari menanyakan apabila ada
hal-hal yang masih kurang
jelas
2.
3.
Keterangan :
4 = jika empat indikator terlihat.
3 = jika tiga indikator terlihat.
2 = jika dua indikator terlihat
1 = jika satu indikator terlihat
Jujur bila:
Menyampaikan sesuatu berdasarkan keadaan yang sebenarnya
Mengumpulkan tugas berdasarkan hasil pemikirannya sendiri
Berani mengakui kesalahan/ kekurangan diri
Mencantumkan sumber belajar dari yang dikutip/dipelajari
Kreatif
Menemukan pemecahan masalah
Aktif bertanya pertanyaan yang kontekstual
Hasil tugas melebihi instruksi yang ditentukan
Menyelesaikan tugas dengan cara yang berbeda dari yang dijelaskan oleh guru
2. Instrumen Penilaian Ketrampilan
Mengenal Elemen Entri (Form) pada web
Aspek yang dinilai
Kemampuan
Nama Kemampuan Kemampuan Kemampuan Kemampuan Kemampuan Kemampuan Nilai
NO membuat form
Siswa membuat form input membuat form membuat form input membuat form membuat form membuat button Akhir
input type Text
type radio button input type checkbox type combobox input type text area input upload file kirim dan cancel
dan Password
1
2
Kunci Jawaban
No Jawaban Skor
1 Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk 25
selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side
scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript). Form dapat digunakan untuk berbagai keperluan
seperti keperluan login, transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari pengguna,
menawarkan barang/jasa secara on-line dan sebagainya. Form sangat sering kita jumpai dalam satu aplikasi sistem
informasi berbasis web.
2 Kegunaan sebuah form adalah : 25
1. Memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan.
No Jawaban Skor
2. Memperoleh informasi pembelian secara online
3. Memperoleh feedback dari user mengenai website anda.
3 elemen input pada form adalah : 25
1. Entri teks dan password
2. Entri checkbox
3. Entri radio button
4. Entri select/combobox
4 Atribut-atribut yang ada pada tag form adalah : 25
1. Method, menjelaskan bagaimana data isian form akan dikirim oleh web browser, nilainya bisa GET dan POST
2. Action, merupakan alamat dari sebuah halaman web yang digunakan untuk memproses isi data form
3. Name, merupakan nama dari form tersebut
4. Id, merupakan id/kode dari form tersebut