UNIVERSITAS BINA NUSANTARA. Jurusan Teknik Informatika Skripsi Sarjana Komputer Semester Ganjil 2006/2007

Transkripsi

1 UNIVERSITAS BINA NUSANTARA Jurusan Teknik Informatika Skripsi Sarjana Komputer Semester Ganjil 2006/2007 ANALISIS DAN PERANCANGAN PERANGKAT AJAR PEMBUATAN HALAMAN WEB DENGAN TAG HTML BERBASISKAN MULTIMEDIA Maria Seraphina Astriani Yunita Rulyna Kelas / Kelompok : 07PDT / 01 Abstrak Materi pelajaran yang penyajiannya terkesan monoton dapat menyebabkan kejenuhan dalam belajar. Untuk memaksimalkan kegiatan pembelajaran, bahan ajar dapat dikemas dalam bentuk aplikasi multimedia interaktif yang berupa perangkat ajar. Dengan perangkat ajar HTML, siswa dibantu untuk dapat memahami dasar pembuatan halaman web dengan cepat dan mudah. Metode yang digunakan dalam analisis dan perancangan perangkat ajar ini adalah metode IMSDD (Interactive Multimedia System Design and Development) dengan metode perancangan user interface 8 aturan emas yang disesuaikan dengan metode IMSDD. Hasil yang dicapai dari analisis dan perancangan perangkat ajar ini adalah sebuah software edukasi yang memiliki daya tarik tersendiri dalam pembelajaran pembuatan halaman web dengan tag HTML. Pembuatan perangkat ajar ini dapat mengurangi kecenderungan siswa yang mudah bosan dengan cara belajar pada umumnya. Kata Kunci html, imsdd, multimedia, perangkat ajar, web vii

2 PRAKATA Puji dan syukur kepada Tuhan Yang Maha Esa atas berkat dan rahmat-nya, sehingga kami berhasil menyelesaikan skripsi ini dengan baik dan tepat waktu. Dalam penyusunan skripsi ini, penulis mendapat bimbingan dan bantuan dari berbagai pihak, baik secara langsung maupun tidak langsung. Pada kesempatan ini, perkenankanlah penulis untuk menyampaikan rasa terima kasih kepada pihak-pihak terkait tersebut : 1. Bapak Prof. Dr. Gerardus Polla, M.App.Sc., selaku Rektor Universitas Bina Nusantara 2. Bapak Eko S. Hasrito, B.Eng., M.Eng., Ph.D, selaku dosen pembimbing yang telah memberikan bimbingan dalam proses pembuatan skripsi ini. 3. Ibu Puspita Hartono dan Bapak Dwi Anggoro Widjajanto dari pihak Computerstar Learning Center yang telah memberikan kesempatan kepada kami untuk melakukan penelitian. 4. Siswa-siswi SMU Ricci 2 dan SMUK Tirta Marta BPK Penabur Jakarta yang telah membantu dalam pengisian kuesioner. 5. Semua pihak terkait lainnya yang telah membantu dalam proses penelitian dan penulisan, sehingga penyusunan skripsi ini dapat rampung. Akhir kata, penulis berharap skripsi ini dapat bermanfaat bagi para pembaca dan almamater. Penulis viii

3 DAFTAR ISI Halaman Judul Luar... i Halaman Judul Dalam... ii Halaman Persetujuan Hardcover... iii Halaman Pernyataan Dewan Penguji... iv Abstrak... vii Prakata... viii Daftar Isi... ix Daftar Tabel... xiii Daftar Gambar... xv Daftar Lampiran... xx BAB 1 PENDAHULUAN Latar Belakang Ruang Lingkup Tujuan dan Manfaat Metodologi Sistematika Penulisan... 3 BAB 2 LANDASAN TEORI Multimedia Definisi Multimedia Elemen-elemen Multimedia Bidang Aplikasi Multimedia Perangkat Ajar... 8 ix

4 2.2.1 Sejarah Perkembangan Perangkat Ajar Jenis-jenis Perangkat Ajar Manfaat Perangkat Ajar Metode Perancangan dan Pengembangan Multimedia Perancangan User Interface Basis Data Konsep Basis Data Definisi DMBS (Database Management System) Komponen DBMS ERD (Entity Relationship Diagram) STD (State Transition Diagram) HTML (HyperText Markup Language) Definisi HTML Sejarah HTML Hubungan HTML dengan World Wide Web dan Web Page Perbedaan Dokumen HTML dengan Dokumen Lain Struktur Dokumen HTML Program Editor HTML BAB 3 ANALISIS DAN PERANCANGAN SISTEM Gambaran Umum Sistem Pembelajaran HTML Saat Ini Analisis Permasalahan yang Dihadapi Kuesioner Wawancara Permasalahan x

5 3.3 Usulan Pemecahan Masalah System Requirements Perancangan Perangkat Ajar Modul Materi Struktur Menu State Transition Diagram Rancangan Layar Rancangan Basis Data Spesifikasi Proses BAB 4 IMPLEMENTASI DAN EVALUASI Spesifikasi Sistem Spesifikasi Perangkat Keras Spesifikasi Perangkat Lunak Prosedur Operasional Prosedur Instalasi Aplikasi Prosedur Uninstall Aplikasi Pedoman Penggunaan Aplikasi dan Tampilan Layar Rencana Implementasi Evaluasi dan Analisis Hasil Pengujian Kuesioner Evaluasi Aplikasi BAB 5 SIMPULAN DAN SARAN Simpulan Saran xi

6 DAFTAR PUSTAKA... xxi RIWAYAT HIDUP... xxiii LAMPIRAN-LAMPIRAN... L1 FOTOCOPY SURAT SURVEI xii

7 DAFTAR TABEL Tabel 2.1 Perbandingan dokumen HTML, teks, dan WYSIWYG Tabel 3.1 Siswa yang pernah belajar membuat website Tabel 3.2 Ketertarikan siswa belajar membuat website Tabel 3.3 Sumber belajar siswa dalam membuat website Tabel 3.4 Tujuan siswa belajar membuat website Tabel 3.5 Kendala yang dialami siswa dalam belajar membuat website Tabel 3.6 Efektivitas metode pembelajaran yang pernah diikuti oleh siswa Tabel 3.7 Perbaikan yang diharapkan dalam metode pembelajaran HTML yang ada Tabel 3.8 Siswa yang pernah menggunakan perangkat ajar Tabel 3.9 Ketertarikan siswa menggunakan perangkat ajar Tabel 3.10 Modul Materi Tabel 3.11 Tabel MsUser Tabel 3.12 Tabel MsKuis Tabel 3.13 Tabel TrGambar Tabel 3.14 Tabel TrNilai Tabel 3.15 Tabel MsKamus Tabel 4.1 Tabel Rencana Implementasi Tabel 4.2 Penggunaan aplikasi ini sebagai pengganti cara belajar konvensional Tabel 4.3 Lebih menyenangkan menggunakan aplikasi ini untuk belajar daripada belajar seperti biasa di kelas xiii

8 Tabel 4.4 Ketertarikan akan tampilan atau interface aplikasi Tabel 4.5 Kekurangan atau keterbatasan aplikasi Tabel 4.6 Kelebihan aplikasi Tabel 4.7 Kemudahan mendapatkan kelengkapan data dan informasi Tabel 4.8 Membantu memberikan solusi Tabel 4.9 Error pada saat aplikasi digunakan Tabel 4.10 Penyebab terjadinya kesalahan atau masalah dalam mengoperasikan aplikasi Tabel 4.11 Kemudahan penggunaan aplikasi Tabel 4.12 Menu-menu membuat bingung pengguna Tabel 4.13 Kesesuaian arti pada semua gambar atau simbol Tabel 4.14 Kemudahan pengertian bahasa dalam aplikasi Tabel 4.15 Durasi waktu untuk memperlajari pengoperasian aplikasi xiv

9 DAFTAR GAMBAR Gambar 2.1 Perangkat Ajar Tutorial Gambar 2.2 Perangkat Ajar Drill and Practise Gambar 2.3 Perangkat Ajar Simulation Gambar 2.4 Perangkat Ajar Games Gambar 2.5 Siklus IMSDD Dastbaz Gambar 2.6 Lingkungan DBMS Gambar 2.7 Contoh Entity Gambar 2.8 Contoh Attribute Gambar 2.9 Contoh Relationship Gambar 3.1 Siswa yang pernah belajar membuat website Gambar 3.2 Ketertarikan siswa belajar membuat website Gambar 3.3 Sumber belajar siswa dalam membuat website Gambar 3.4 Tujuan siswa belajar membuat website Gambar 3.5 Kendala yang dialami siswa dalam belajar membuat website Gambar 3.6 Efektivitas metode pembelajaran yang pernah diikuti oleh siswa. 43 Gambar 3.7 Perbaikan yang diharapkan dalam metode pembelajaran HTML yang ada Gambar 3.8 Siswa yang pernah menggunakan perangkat ajar Gambar 3.9 Ketertarikan siswa menggunakan perangkat ajar Gambar 3.10 Struktur Menu Utama Gambar 3.11 Struktur Menu Tutorial Gambar 3.12 Struktur Menu Kuis xv

10 Gambar 3.13 Struktur Menu Kamus Gambar 3.14 Struktur Menu Template HTML Gambar 3.15 Struktur Menu Generator HTML Gambar 3.16 STD Intro Gambar 3.17 STD Menu Login Gambar 3.18 STD Menu Utama Gambar 3.19 STD Menu Tutorial Gambar 3.20 STD Kuis Gambar 3.21 STD Kamus Gambar 3.22 STD Template HTML Gambar 3.23 STD Generator HTML Gambar 3.24 STD Bantuan Gambar 3.25 Rancangan Layar Intro Gambar 3.26 Rancangan Layar Login Gambar 3.27 Rancangan Layar Daftar Baru Gambar 3.28 Rancangan Layar Menu Utama Gambar 3.29 Rancangan Layar Menu Tutorial HTML Gambar 3.30 Rancangan Layar Menu Kuis Gambar 3.31 Rancangan Layar Menu Kamus Gambar 3.32 Rancangan Layar Menu Template HTML Gambar 3.33 Rancangan Layar Menu Futura Gambar 3.34 Rancangan Layar Menu Generator HTML Gambar 3.35 Rancangan Layar Generator HTML Halaman Sederhana Gambar 3.36 Rancangan Layar Generator HTML Tabel xvi

11 Gambar 3.37 Rancangan Layar Generator HTML Teks Gambar 3.38 Rancangan Layar Generator HTML Link Gambar 3.39 Rancangan Layar Bantuan Gambar 3.40 Rancangan Layar Kamus Cari Gambar 3.41 Rancangan Layar Kamus Isi Gambar 3.42 Rancangan Layar Skor Kamu Gambar 3.43 ERD Gambar 4.1 Instalasi tahap pertama Gambar 4.2 Instalasi tahap kedua Gambar 4.3 Instalasi tahap ketiga Gambar 4.4 Instalasi tahap keempat Gambar 4.5 Instalasi tahap kelima Gambar 4.6 Uninstall tahap pertama Gambar 4.7 Uninstall tahap kedua Gambar 4.8 Uninstall tahap ketiga Gambar 4.9 Uninstall tahap keempat Gambar 4.10 Layar Intro Gambar 4.11 Layar Login Gambar 4.12 Layar Daftar Baru Gambar 4.13 Layar Menu Utama Gambar 4.14 Layar Menu Tutorial HTML Gambar 4.15 Layar Menu Tutorial HTML Submenu Pendahuluan Gambar 4.16 Layar Menu Kuis Gambar 4.17 Layar Menu Kuis Submenu Pendahuluan xvii

12 Gambar 4.18 Layar Skor Kamu Gambar 4.19 Layar Menu Kamus Gambar 4.20 Layar Menu Kamus Cari Gambar 4.21 Layar Menu Template HTML Gambar 4.22 Layar Menu Template HTML Submenu Futura Gambar 4.23 Layar Menu Generator HTML Gambar 4.24 Layar Menu Generator HTML Submenu Halaman Sederhana Gambar 4.25 Layar Menu Generator HTML Submenu Tabel Gambar 4.26 Layar Menu Generator HTML Submenu Teks Gambar 4.27 Layar Menu Generator HTML Submenu Link Gambar 4.28 Layar Menu Bantuan Gambar 4.29 Penggunaan aplikasi ini sebagai pengganti cara belajar konvensional Gambar 4.30 Lebih menyenangkan menggunakan aplikasi ini untuk belajar daripada belajar seperti biasa di kelas Gambar 4.31 Ketertarikan akan tampilan atau interface aplikasi Gambar 4.32 Kekurangan atau keterbatasan aplikasi Gambar 4.33 Kelebihan aplikasi Gambar 4.34 Kemudahan mendapatkan kelengkapan data dan informasi Gambar 4.35 Membantu memberikan solusi Gambar 4.36 Error pada saat aplikasi digunakan Gambar 4.37 Penyebab terjadinya kesalahan atau masalah dalam mengoperasikan aplikasi Gambar 4.38 Kemudahan penggunaan aplikasi xviii

13 Gambar 4.39 Menu-menu membuat bingung pengguna Gambar 4.40 Kesesuaian arti pada semua gambar atau simbol Gambar 4.41 Kemudahan pengertian bahasa dalam aplikasi Gambar 4.42 Durasi waktu untuk mempelajari pengoperasian aplikasi xix

14 DAFTAR LAMPIRAN Kuesioner Tahap Analisis... L1 Kuesioner Tahap Implementasi... L2 Wawancara Tahap Analisis... L3 xx