Membuat halaman web dinamis tingkat dasar BAB I PENDAHULUAN A. DESKRIPSI Modul ini berjudul Membuat halaman web dinamis tingkat dasar yang berisi tentang konsep dan teknologi web serta bagaimana peserta didik membuat halaman web dinamis yang sesuai dengan standar operasi aplikasi sebagai salah satu media informasi populer sekarang ini. Modul ini lanjutan dari modul Menerapkan dasar-dasar pembuatan web statis tingkat dasar dimana diharapkan setelah menguasai modul ini peserta didik diharapkan mampu melakukan pembuatan web yang sesuai dengan standar operasi aplikasi. Kemampuan tersebut akan sangat membantu Peserta didik pada saat memasuki dunia kerja. B. PRASARAT Untuk mempelajari modul ini diwajibkan peserta didik telah menguasai modul dasar-dasar pembuatan web statis tingkat dasar atau memahami bahasa pemrograman html dan css dengan baik C. PETUNJUK PENGGUNAAN MODUL 1) Petunjuk bagi peserta didik Langkah-langkah yang harus dilakukan untuk mempelajari modul ini : a. Baca tujuan dengan seksama. b. Pelajari daftar isi serta skema kedudukan modul dengan cermat dan teliti. Karena dalam skema modul akan nampak kedudukan modul yang sedang Anda pelajari dengan modul-modul yang lain. c. Kerjakan soal-soal dalam cek kemampuan untuk mengukur sampai sejauh mana pengetahuan yang telah Anda miliki. d. Apabila dari soal dalam cek kemampuan telah Anda kerjakan dan 80 % terjawab dengan benar, maka Anda dapat langsung menuju Evaluasi untuk mengerjakan soal-soal tersebut. Tetapi apabila hasil jawaban Anda tidak mencapai 80 % benar, maka Anda harus mengikuti kegiatan pemelajaran dalam modul ini. Modul 070.KK.12 1 Membuat halaman web dinamis tingkat dasar e. Persiapkan alat dan bahan yang digunakan pada setiap kegiatan. f. Lakukan semua kegiatan belajar dengan teliti dan hati-hati. g. Jawab pertanyaan tes formatif yang ada kemudian cocokan dengan kunci jawaban yang telah tersedia pada lembar jawaban atau konsultasikan dengan guru pembimbing bilamana telah mengusai maka bisa dilanjutkan ketahapan kegiatan belajar praktek sesuai dengan perintah pada lembar kerja. h. Melakukan kerja praktek mulai dari persiapan hingga selesai kemudian melaporkan hasil praktek untuk mendapatkan penilaian dari guru pembimbing. i. 2) Kembalikan semua peralatan praktik yang digunakan Petunjuk Bagi Guru a. Membantu Peserta didik dalam merencanakan proses belajar. b. Membimbing Peserta didik melalui tugas-tugas pelatihan yang dijelaskan dalam tahap belajar. c. Membantu Peserta didik dalam memahami konsep dan praktik baru dan menjawab semua pertanyaan Peserta didik mengenai proses belajar. d. Membantu Peserta didik untuk menentukan dan mengakses sumber tambahan lain yang diperlukan untuk belajar. e. Mengorganisasikan kegiatan belajar kelompok bila diperlukan. f. Merencanakan seorang ahli/pendamping guru dari tempat kerja untuk membantu jika diperlukan. g. Merencanakan proses penilaian dan menyiapkan perangkatnya. h. Melaksanakan penilaian. i. Menjelaskan kepada Peserta didik tentang sikap pengetahuan dan keterampilan dari suatu kompetensi, yang perlu dibenahi dan merundingkan rencana pembelajaran selanjutnya. j. Mencatat pencapaian kemajuan Peserta didik. D. TUJUAN AKHIR Setelah mempelajari modul ini peserta didik diharapkan: 1) Dapat memahami konsep teknologi web dengan baik 2) Peserta didik dapat mengidentifikasi software teks editor sesuai dengan kebutuhan dan tanpa mengacuhkan keindahan desain web Modul 070.KK.12 2 Membuat halaman web dinamis tingkat dasar 3) Dapat membuat halaman web sesuai dengan standar operasi aplikasi dan desain web yang enak dipandang mata. 4) Dapat membuat halaman web dinamis yang sesuai dengan kebutuhan pasar apabila peserta didik telah terjun ke dunia usaha atau dunia industri. Modul 070.KK.12 3 Membuat halaman web dinamis tingkat dasar E. SILABUS Standar Kompetensi : Membuat halaman web dinamis tingkat dasar Alokasi waktu : 72 (108) Jam X 45 Menit NILAI KOMPETENSI INDIKATOR DASAR 1. Menjelaskan konsep pembuatan halaman web dinamis. Menjelaskan Konsep-konsep dan teknologi web (web Server, URL, HTTP, HTML, Web browser , gateway Menjelaskan Perbedaan antara klien dan server KARAKTER BANGSA Disiplin Selalu teliti dan tertib dalam mengerjakan tugas. Kerja Keras Menggunakan waktu secara efektif untuk menyelesaikan tugas-tugas di kelas dan luar kelas. Mandiri Mencari sumber di perpustakaan untuk menyelesaikan tugas sekolah tanpa bantuan pustakawan. Modul 070.KK.12 ALOKASI MATERI KEGIATAN PEMBELAJARAN PEMBELAJARAN Konsep dan teknologi web Konsep klien dan server pada teknologi WEB Kapasitas Bandwidth dan kulaitas tampilan halaman WEB Pemilihan software aplikasi perancangan web Perbandingan local server dan remote server (hosting provider) Mempelajari Konsep-konsep dan teknologi web (web Server, URL, HTTP, HTML, Web browser , gateway ) Mengetahui Cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layer Membaca perbedaan antara klien dan server Memahami cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layer 4 WAKTU PENILAIAN Kompilasi program TM PS 10 10 (20) SUMBER PI BELAJAR Bukub Pemrogram an HTML Komputer Buku membuat halaman WEB dengan Dreamwea ver Cs3 Membuat halaman web dinamis tingkat dasar NILAI KOMPETENSI DASAR INDIKATOR KARAKTER BANGSA ALOKASI MATERI KEGIATAN PEMBELAJARAN PEMBELAJARAN WAKTU PENILAIAN TM • Menjelaskan Membandingkan ciri-ciri dan fungsi dari software teks editor yang tersedia untuk merancang web page • bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layar • Membandingka Ciri-ciri dan fungsi dari software teks editor yang tersedia untuk merancang web page • Keuntungan dan kerugian running dari server yang Menjelaskan keuntungan dan kerugian running dari server yang dimiliki dibandingkan server provider. Mengetahui Keuntungan dan kerugian running dari server yang dimiliki dibandingkan server provider. Disiplin • dimiliki dibandingkan Selalu teliti dan tertib dalam mengerjakan server provider tugas. dijelaskan. Kerja Keras Menggunakan waktu secara efektif untuk menyelesaikan tugastugas di kelas dan luar kelas. Mandiri Modul 070.KK.12 5 Mencari sumber di perpustakaan untuk menyelesaikan tugas sekolah tanpa bantuan pustakawan. PS SUMBER PI BELAJAR Membuat halaman web dinamis tingkat dasar NILAI KOMPETENSI INDIKATOR DASAR 2. Mempersia pkan lingkungan teknis Mengidentifikasi Software teks editor dan browser sesuai dengan kebutuhan KARAKTER BANGSA Software beroperasi sesuai dengan standar operasi software Sketsa disain untuk web yang akan dibuat sudah disiapkan Data yang akan ditampilkan di Web tersedia Area kerja untuk membuat dokumen web baru sudah disiapkan. KEGIATAN PEMBELAJARAN PEMBELAJARAN Selalu teliti dan tertib dalam mengerjakan tugas. Disiplin ALOKASI MATERI Kerja Keras Menggunakan waktu secara efektif untuk menyelesaikan tugas-tugas di kelas dan luar kelas. Mandiri Mencari sumber di perpustakaan untuk menyelesaikan tugas sekolah tanpa bantuan pustakawan. Pemilihan teks editor dan browser Kinerja WEB Browser Desain layout halaman WEB Mengidentifikasi software teks editor dan browser sesuai dengan kebutuhan Mempersiapkan software beroperasi sesuai dengan standar operasi software Membuat Area kerja untuk membuat dokumen web Mempersiapkan sketsa disain untuk web yang akan dibuat sudah disiapkan Menyediakan data yang akan ditampilkan di Web Menyiapkan area kerja untuk membuat dokumen web baru. Disiplin Selalu teliti dan tertib dalam mengerjakan tugas. Modul 070.KK.12 Kerja Keras Menggunakan waktu secara efektif untuk menyelesaikan tugastugas di kelas dan luar kelas. 6 Mandiri Mencari sumber di perpustakaan untuk menyelesaikan WAKTU PENILAIAN sketsa disain untuk web TM PS 10 10 SUMBER BELAJAR PI (20) Buku Pemrogra man HTML Kompute r Buku membuat halaman WEB dengan Dreamwe aver Cs3 Membuat halaman web dinamis tingkat dasar NILAI KOMPETENSI INDIKATOR DASAR 3. Membuat halaman web dinamis sederhana Melakukan Proses pembuatan Web sesuai dengan standar operasi aplikasi Web yang dibuat tampil dilayar sesuai dengan disain Data yang tersedia tampil di layar Web KARAKTER BANGSA Disiplin Selalu teliti dan tertib dalam mengerjakan tugas. Kerja Keras Menggunakan waktu secara efektif untuk menyelesaikan tugas-tugas di kelas dan luar kelas. ALOKASI MATERI KEGIATAN PEMBELAJARAN PEMBELAJARAN Proses pembuatan Web sesuai dengan standar operasi aplikasi Mandiri Mencari sumber di perpustakaan untuk menyelesaikan tugas sekolah tanpa bantuan pustakawan. Memanagemen langkah langkah Proses pembuatan Web sesuai dengan standar operasi aplikasi Membandingkan Web yang dibuat tampilan dilayar sesuai dengan disain Menampilkan data yang tersedia di layar Web Disiplin Selalu teliti dan tertib dalam mengerjakan tugas. Kerja Keras Menggunakan waktu secara efektif untuk menyelesaikan tugastugas di kelas dan luar kelas. Modul 070.KK.12 Mandiri Mencari sumber di perpustakaan untuk menyelesaikan tugas sekolah tanpa bantuan pustakawan. 7 WAKTU PENILAIAN Kompilasi program Hasil Web standar TM PS 30 30 SUMBER BELAJAR PI (60) Bukub Pemrogra man HTML Kompute r Buku membuat halaman WEB dengan Dreamwe aver Cs3 Membuat halaman web dinamis tingkat dasar NILAI KOMPETENSI INDIKATOR DASAR 4. Menambah kan fungsifungsi pada halaman web dinamis KARAKTER BANGSA Menjelaskan Format URL (Uniform Resource Locator) Peran dari browser dalam membaca filefile Web didemonstrasikan (text-only, hypertext) dengan mengakses ke URL tertentu melalui menu yang tersedia Perbedaan browser mempengaruhi tampilan dari halaman web dapat diidentifikasi Disiplin ALOKASI MATERI KEGIATAN PEMBELAJARAN PEMBELAJARAN Selalu teliti dan tertib dalam mengerjakan tugas. Kerja Keras Menggunakan waktu secara efektif untuk menyelesaikan tugas-tugas di kelas dan luar kelas. Format (Uniform Resource Locator) URL Peran dari browser dalam membaca filefile Perbandingan lokasi browser Mandiri Mencari sumber di perpustakaan untuk menyelesaikan tugas sekolah tanpa bantuan pustakawan. Mandiri Kerja keras Jur dan disiplin Tanggung jawab Inofatif Motifasi kuat untuk sukses Rasa ingin tahu Modul 070.KK.12 Membuat tampilan Format URL (Uniform Resource Locator) Mendemonstrasika n Peran dari browser dalam membaca file-file Web (text-only, hypertext) dengan mengakses ke URL tertentu melalui menu yang tersedia Mengatahui macam-macam browser web Mengetahui Peran dari browser dalam membaca file-file Web (textonly, hypertext) dengan mengakses ke URL tertentu melalui menu yang tersedia Mengidentifikasi perbedaan browser yang mempengaruhi tampilan dari halaman web Mengetahui Perbedaan browser mempengaruhi tampilan dari halaman web 8Disiplin Selalu teliti dan tertib dalam mengerjakan tugas. Kerja Keras WAKTU PENILAIAN Kompilasi program Hasil Web standar TM PS 15 15 SUMBER BELAJAR PI (30) Bukub Pemrogra man HTML Kompute r Buku membuat halaman WEB dengan Dreamwe aver Cs3 Membuat halaman web dinamis tingkat dasar NILAI KOMPETENSI INDIKATOR DASAR 5. Menguji halaman web dinamis Halaman disimpan pada server di lokasi yang tepat. Halaman dinamis ditampilkan pa-da browser dan diuji Fungsi format dan dinamis secara keseluruhan dibuat sesuai dengan kebutuham bisnis dan pelanggan Halaman pelanggan diakhiri sesuai memenuhi persyaratan bisnis KARAKTER BANGSA Disiplin Selalu teliti dan tertib dalam ALOKASI MATERI KEGIATAN PEMBELAJARAN PEMBELAJARAN Pengujian Hosting dan mengerjakan tugas. Kerja Keras Menggunakan waktu secara efektif untuk menyelesaikan tugas-tugas di kelas dan luar kelas. Mandiri Mencari sumber di perpustakaan untuk menyelesaikan tugas sekolah tanpa bantuan pustakawan. Menyimpan halaman pada server di lokasi yang tepat Menampilkan/men guji halaman dinamis ditampilkan pada browser Membuat fungsi format dan dinamis secara keseluruhan sesuai dengan kebutuham bisnis dan pelanggan Mengakhiri halaman pelanggan sesuai memenuhi persyaratan bisnis Merangkai aplikasi halaman per halaman sesuai permintaan pelanggan Disiplin Selalu teliti dan tertib dalam mengerjakan tugas. Kerja Keras Menggunakan waktu secara efektif untuk menyelesaikan tugastugas di kelas dan luar kelas. Modul 070.KK.12 Mandiri 9 Mencari sumber di perpustakaan untuk menyelesaikan tugas sekolah tanpa bantuan WAKTU PENILAIAN Hasil program Tes tertulis TM PS 7 7 SUMBER BELAJAR PI (14) Buku Pemrogra man PHP Kompute r Membuat halaman web dinamis tingkat dasar F. CEK KEMAMPUAN Standar Kompetensi/Kompete nsi Dasar Menjelaskan konsep pembuatan halaman web dinamis. Mempersiapkan lingkungan teknis Membuat halaman web dinamis sederhana Menambahkan fungsifungsi pada halaman web dinamis Menguji halaman web dinamis Pernyataan Mengetahui konsepkonsep teknologi we (web server, url, http, html, web browser, client server, server side) Mengetahui software teks editor dan browser sesuai dengan kebutuhan Mengetahu pembuatan web dengan teks editor dengan bahasa html, css, mysql Mengetahui format url, link dokumen web, integrasi data ke halaman web Mengetahui tempat penyimpanan dokumen pada server di lokasi yang tepat, membuka halaman web dengan browser yang tepat Saya dapat melakukan pekerjaan ini dengan kompeten ya tidak Bila Jawaban “YA” Kerjalan √ Tes formatif 1 √ Tes formatif 2 √ Tes formatif 3 √ Tes formatif 4 √ Tes formatif 5 Apabila anda menjawab TIDAK pada salah satu pernyataan di atas, maka pelajarilah modul ini. Modul 070.KK.12 10 Membuat halaman web dinamis tingkat dasar BAB II PEMBELAJARAN A. RENCANA BELAJAR PESERTA DIDIK Sebelum anda mempelajari kegiatan belajar, isilah terlebih dahulu format belajar peserta diklat di bawah ini : Jenis Kegiatan Tanggal Waktu Tempat Belajar Alasan Perubahan Tanda Tangan Guru Kegiatan Belajar 1 Menjelaskan konsep pembuatan halaman web dinamis. Kegiatan Belajar 2 Mempersiapkan lingkungan teknis Kegiatan Belajar 3 Membuat halaman web dinamis sederhana Kegiatan Belajar 4 Menambahkan fungsifungsi pada halaman web dinamis Kegiatan Belajar 5 Menguji halaman web dinamis B. KEGIATAN BELAJAR 1. Kegiatan Belajar 1 KONSEP PEMBUATAN HALAMAN WEB DINAMIS a. Tujuan Kegiatan Pembelajaran 1) Peserta didik dapat memahami konsep-konsep teknologi web. 2) Peserta didik dapat Menjelaskan Perbedaan antara klien dan server dijelas. Modul 070.KK.12 11 Membuat halaman web dinamis tingkat dasar b. Uraian Materi KONSEP DASAR DAN TEKNOLOGI WEB World Wide Web secara luas lebih dikenal dengan istilah Web. Web pertama kali diperkenalkan pada tahun 1992. Hal ini sebagai hasil usaha pengembangan yang dilakukan CERN di Swiss. Internet dan web adalah dua hal yang berbeda. Internet lebih merupakan perangkat keras, sedangkan web adalah perangkat lunak. Selain itu, protokol yang dipakai oleh keduanya juga berbeda. Internet menggunakan TCP/IP sebagai protokol operasionalnya, sedangkan web menggunakan HTTP (Hyper Text Transfer Protocol). Web disusun dari halaman-halaman yang menggunakan teknologi web dan saling berkaitan satu sama lain. Suatu standar teknologi web saat ini sudah tersusun, meskipun penerapannya belum didukung oleh seluruh pengembang web. Standar ini disusun oleh suatu badan yaitu World Wide Web Consortium (W3C). Standar ini dibutuhkan karena semakin banyaknya variasi dalam teknologi web sehingga terkadang satu sama lain tidak kompatibel. Standar Teknologi Web Secara umum teknologi disain web terbagi menjadi beberapa layer (lapisan), yaitu structural layer, presentation layer dan behavioral layer. 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. • 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). • Behavioral layer Modul 070.KK.12 12 Membuat halaman web dinamis tingkat dasar 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. Halaman web dapat digolongkan menjadi web statis dan web dinamis. Pengertian web statis dan web dinamis seringkali mengundang perdebatan. Sebagian pengguna internet menyatakan jika pada halaman-halaman web dilengkapi dengan animasi yang bergerak maka disebut web dinamis sedangkan jika halaman-halaman web tersebut hanya berisi teks dan gambar yang tidak bergerak maka disebut web statis. Namun berdasarkan kesepakatan maka pengertian statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi yang ada pada halaman-halaman tersebut. Data dan informasi yang ada pada web statis tidak berubah-ubah. Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada di web server. Sedangkan web dinamis, memiliki data dan informasi yang berbeda-beda tergantung input apa yang disampaikan client. Dokumen yang sampai di client akan berbeda dengan dokumen yang ada di web server. Contoh paling mudah untuk membedakan web statis dan web dinamis adalah bila kalian membuka situs Google. Halaman awal adalah statis karena kita tidak melihat perubahan isi atau informasi. Halaman ini baik di computer client maupun di web server akan sama. Namun begitu kita memasukkan kata pada textbox yang tersedia kemudian menekan tombol search maka kita sedang berinteraksi dengan web server Google. Web server akan mengirimkan halaman web sesuai yang diminta oleh client. Tampilan di sisi client akan berupa daftar alamat dan keterangannya. Sedangkan di sisi server isi dokumennya adalah serangkain kode-kode untuk mencari apa yang diinputkan client. Modul 070.KK.12 13 Membuat halaman web dinamis tingkat dasar c. Rangkuman Standar Teknologi Web structural layer presentation layer behavioral layer Web Statis adalah halaman web yang tidak terintegrasi dengan database dan informasi yang ditampilkan tidak berubah-ubah. Web Dinamis adalah halaman web yang terintegrasi dengan database dan informasi yang di tampilkan selalu berubah ubah setiap saat. d. Tugas 1) Pahamilah konsep-konsep teknologi web saat ini. 2) Peserta didik mencari artikel melalui internet tentang teknologi web terbaru dan di kumpulkan berupa hard copy. e. Tes Formatif 1) Jelaskan apa yang dimaksud dengan struktur layer pada teknologi web! 2) Deskripsikan apa yang dimaksud dengan web statis dan web dinamis! 3) Jelaskan apa yang dimaksud dengan HTML dan http? f. Kunci Jawaban g. Lembar Kerja 2. Kegiatan Belajar 2 MEMPERSIAPKAN LINGKUNGAN TEKNIS PEMBUATAN HALAMAN WEB DINAMIS a. Tujuan Kegiatan Pembelajaran b. Uraian Materi c. Rangkuman d. Tugas Modul 070.KK.12 14 Membuat halaman web dinamis tingkat dasar e. Tes Formatif f. Kunci Jawaban g. Lembar Kerja 3. Kegiatan Belajar 3 MEMBUAT HALAMAN WEB DINAMIS SEDERHANA a. Tujuan Kegiatan Pembelajaran b. Uraian Materi c. Rangkuman d. Tugas e. Tes Formatif f. Kunci Jawaban g. Lembar Kerja 4. Kegiatan Belajar 4 MENAMBAHKAN FUNGSI-FUNGSI PADA HALAMAN WEB DINAMIS a. Tujuan Kegiatan Pembelajaran b. Uraian Materi c. Rangkuman d. Tugas e. Tes Formatif f. Kunci Jawaban g. Lembar Kerja 5. Kegiatan Belajar 5 Menguji halaman web dinamis a. Tujuan Kegiatan Pembelajaran b. Uraian Materi c. Rangkuman Modul 070.KK.12 15 Membuat halaman web dinamis tingkat dasar d. Tugas e. Tes Formatif f. Kunci Jawaban g. Lembar Kerja BAB III EVALUASI A. KOGNITIF SKILL B. PSIKOMOTOR SKILL C. ATTITUDE SKILL Modul 070.KK.12 16 Membuat halaman web dinamis tingkat dasar BAB IV PENUTUP Modul 070.KK.12 17 Membuat halaman web dinamis tingkat dasar DAFTAR PUSTAKA Modul 070.KK.12 18