vii
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 0700724042 Yunita 0700728160
Rulyna 0700728343
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
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.
ix 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 ... 1
1.1 Latar Belakang ... 1
1.2 Ruang Lingkup ... 2
1.3 Tujuan dan Manfaat ... 2
1.4 Metodologi ... 3
1.5 Sistematika Penulisan ... 3
BAB 2 LANDASAN TEORI ... 5
2.1 Multimedia ... 5
2.1.1 Definisi Multimedia ... 5
2.1.2 Elemen-elemen Multimedia ... 6
2.1.3 Bidang Aplikasi Multimedia ... 7
2.2.1 Sejarah Perkembangan Perangkat Ajar ... 8
2.2.2 Jenis-jenis Perangkat Ajar ... 9
2.2.3 Manfaat Perangkat Ajar ... 13
2.3 Metode Perancangan dan Pengembangan Multimedia ... 14
2.4 Perancangan User Interface... 17
2.5 Basis Data ... 18
2.5.1 Konsep Basis Data ... 18
2.5.2 Definisi DMBS (Database Management System) ... 19
2.5.3 Komponen DBMS ... 20
2.6 ERD (Entity Relationship Diagram) ... 22
2.7 STD (State Transition Diagram) ... 23
2.8 HTML (HyperText Markup Language) ... 24
2.8.1 Definisi HTML ... 25
2.8.2 Sejarah HTML ... 25
2.8.3 Hubungan HTML dengan World Wide Web dan Web Page 27 2.8.4 Perbedaan Dokumen HTML dengan Dokumen Lain ... 28
2.8.5 Struktur Dokumen HTML ... 30
2.8.6 Program Editor HTML ... 33
BAB 3 ANALISIS DAN PERANCANGAN SISTEM ... 35
3.1 Gambaran Umum Sistem Pembelajaran HTML Saat Ini ... 35
3.2 Analisis Permasalahan yang Dihadapi... 36
3.2.1 Kuesioner ... 37
3.2.2 Wawancara ... 47
xi
3.3 Usulan Pemecahan Masalah ... 49
3.4 System Requirements ... 49
3.5 Perancangan Perangkat Ajar ... 53
3.5.1 Modul Materi ... 53
3.5.2 Struktur Menu ... 56
3.5.3 State Transition Diagram ... 63
3.5.4 Rancangan Layar ... 72
3.5.5 Rancangan Basis Data ... 105
3.5.6 Spesifikasi Proses ... 107
BAB 4 IMPLEMENTASI DAN EVALUASI ... 121
4.1 Spesifikasi Sistem ... 121
4.1.1 Spesifikasi Perangkat Keras ... 122
4.1.2 Spesifikasi Perangkat Lunak ... 122
4.2 Prosedur Operasional ... 123
4.2.1 Prosedur Instalasi Aplikasi ... 123
4.2.2 Prosedur Uninstall Aplikasi ... 127
4.2.3 Pedoman Penggunaan Aplikasi dan Tampilan Layar ... 130
4.3 Rencana Implementasi ... 153
4.4 Evaluasi dan Analisis Hasil Pengujian ... 153
4.4.1 Kuesioner ... 153
4.4.2 Evaluasi Aplikasi ... 164
BAB 5 SIMPULAN DAN SARAN ... 167
5.1 Simpulan ... 167
xiii
DAFTAR TABEL
Tabel 2.1 Perbandingan dokumen HTML, teks, dan WYSIWYG ... 30
Tabel 3.1 Siswa yang pernah belajar membuat website ... 37
Tabel 3.2 Ketertarikan siswa belajar membuat website ... 38
Tabel 3.3 Sumber belajar siswa dalam membuat website ... 39
Tabel 3.4 Tujuan siswa belajar membuat website ... 40
Tabel 3.5 Kendala yang dialami siswa dalam belajar membuat website ... 41
Tabel 3.6 Efektivitas metode pembelajaran yang pernah diikuti oleh siswa ... 42
Tabel 3.7 Perbaikan yang diharapkan dalam metode pembelajaran HTML yang ada ... 44
Tabel 3.8 Siswa yang pernah menggunakan perangkat ajar ... 45
Tabel 3.9 Ketertarikan siswa menggunakan perangkat ajar ... 46
Tabel 3.10 Modul Materi ... 53
Tabel 3.11 Tabel MsUser ... 105
Tabel 3.12 Tabel MsKuis ... 105
Tabel 3.13 Tabel TrGambar ... 105
Tabel 3.14 Tabel TrNilai... 106
Tabel 3.15 Tabel MsKamus ... 106
Tabel 4.1 Tabel Rencana Implementasi ... 153
Tabel 4.2 Penggunaan aplikasi ini sebagai pengganti cara belajar konvensional ... 154
Tabel 4.4 Ketertarikan akan tampilan atau interface aplikasi ... 155
Tabel 4.5 Kekurangan atau keterbatasan aplikasi ... 156
Tabel 4.6 Kelebihan aplikasi ... 157
Tabel 4.7 Kemudahan mendapatkan kelengkapan data dan informasi ... 158
Tabel 4.8 Membantu memberikan solusi ... 159
Tabel 4.9 Error pada saat aplikasi digunakan ... 159
Tabel 4.10 Penyebab terjadinya kesalahan atau masalah dalam mengoperasikan aplikasi ... 160
Tabel 4.11 Kemudahan penggunaan aplikasi ... 161
Tabel 4.12 Menu-menu membuat bingung pengguna ... 162
Tabel 4.13 Kesesuaian arti pada semua gambar atau simbol ... 162
Tabel 4.14 Kemudahan pengertian bahasa dalam aplikasi ... 163
xv
DAFTAR GAMBAR
Gambar 2.1 Perangkat Ajar Tutorial ... 10
Gambar 2.2 Perangkat Ajar Drill and Practise ... 10
Gambar 2.3 Perangkat Ajar Simulation... 11
Gambar 2.4 Perangkat Ajar Games ... 12
Gambar 2.5 Siklus IMSDD Dastbaz ... 16
Gambar 2.6 Lingkungan DBMS ... 20
Gambar 2.7 Contoh Entity ... 22
Gambar 2.8 Contoh Attribute ... 23
Gambar 2.9 Contoh Relationship ... 23
Gambar 3.1 Siswa yang pernah belajar membuat website ... 37
Gambar 3.2 Ketertarikan siswa belajar membuat website ... 38
Gambar 3.3 Sumber belajar siswa dalam membuat website ... 39
Gambar 3.4 Tujuan siswa belajar membuat website ... 40
Gambar 3.5 Kendala yang dialami siswa dalam belajar membuat website ... 42
Gambar 3.6 Efektivitas metode pembelajaran yang pernah diikuti oleh siswa . 43 Gambar 3.7 Perbaikan yang diharapkan dalam metode pembelajaran HTML yang ada ... 44
Gambar 3.8 Siswa yang pernah menggunakan perangkat ajar ... 45
Gambar 3.9 Ketertarikan siswa menggunakan perangkat ajar ... 47
Gambar 3.10 Struktur Menu Utama ... 56
Gambar 3.11 Struktur Menu Tutorial ... 58
Gambar 3.13 Struktur Menu Kamus ... 61
Gambar 3.14 Struktur Menu Template HTML ... 62
Gambar 3.15 Struktur Menu Generator HTML ... 62
Gambar 3.16 STD Intro ... 63
Gambar 3.17 STD Menu Login ... 64
Gambar 3.18 STD Menu Utama ... 65
Gambar 3.19 STD Menu Tutorial ... 66
Gambar 3.20 STD Kuis ... 67
Gambar 3.21 STD Kamus ... 68
Gambar 3.22 STD Template HTML ... 69
Gambar 3.23 STD Generator HTML ... 70
Gambar 3.24 STD Bantuan ... 71
Gambar 3.25 Rancangan Layar Intro ... 72
Gambar 3.26 Rancangan Layar Login ... 74
Gambar 3.27 Rancangan Layar Daftar Baru ... 75
Gambar 3.28 Rancangan Layar Menu Utama ... 77
Gambar 3.29 Rancangan Layar Menu Tutorial HTML ... 79
Gambar 3.30 Rancangan Layar Menu Kuis ... 81
Gambar 3.31 Rancangan Layar Menu Kamus... 83
Gambar 3.32 Rancangan Layar Menu Template HTML ... 85
Gambar 3.33 Rancangan Layar Menu Futura ... 87
Gambar 3.34 Rancangan Layar Menu Generator HTML ... 89
Gambar 3.35 Rancangan Layar Generator HTML Halaman Sederhana ... 91
xvii
Gambar 3.37 Rancangan Layar Generator HTML Teks ... 95
Gambar 3.38 Rancangan Layar Generator HTML Link ... 97
Gambar 3.39 Rancangan Layar Bantuan ... 99
Gambar 3.40 Rancangan Layar Kamus Cari ... 101
Gambar 3.41 Rancangan Layar Kamus Isi ... 103
Gambar 3.42 Rancangan Layar Skor Kamu ... 104
Gambar 3.43 ERD ... 106
Gambar 4.1 Instalasi tahap pertama ... 124
Gambar 4.2 Instalasi tahap kedua ... 124
Gambar 4.3 Instalasi tahap ketiga ... 125
Gambar 4.4 Instalasi tahap keempat ... 126
Gambar 4.5 Instalasi tahap kelima ... 127
Gambar 4.6 Uninstall tahap pertama ... 128
Gambar 4.7 Uninstall tahap kedua ... 128
Gambar 4.8 Uninstall tahap ketiga ... 129
Gambar 4.9 Uninstall tahap keempat ... 130
Gambar 4.10 Layar Intro ... 135
Gambar 4.11 Layar Login ... 136
Gambar 4.12 Layar Daftar Baru ... 136
Gambar 4.13 Layar Menu Utama ... 137
Gambar 4.14 Layar Menu Tutorial HTML ... 138
Gambar 4.15 Layar Menu Tutorial HTML Submenu Pendahuluan ... 139
Gambar 4.16 Layar Menu Kuis ... 140
Gambar 4.18 Layar Skor Kamu ... 142
Gambar 4.19 Layar Menu Kamus ... 143
Gambar 4.20 Layar Menu Kamus Cari ... 144
Gambar 4.21 Layar Menu Template HTML ... 145
Gambar 4.22 Layar Menu Template HTML Submenu Futura ... 146
Gambar 4.23 Layar Menu Generator HTML ... 147
Gambar 4.24 Layar Menu Generator HTML Submenu Halaman Sederhana .... 148
Gambar 4.25 Layar Menu Generator HTML Submenu Tabel ... 149
Gambar 4.26 Layar Menu Generator HTML Submenu Teks ... 150
Gambar 4.27 Layar Menu Generator HTML Submenu Link ... 151
Gambar 4.28 Layar Menu Bantuan ... 152
Gambar 4.29 Penggunaan aplikasi ini sebagai pengganti cara belajar konvensional ... 154
Gambar 4.30 Lebih menyenangkan menggunakan aplikasi ini untuk belajar daripada belajar seperti biasa di kelas ... 155
Gambar 4.31 Ketertarikan akan tampilan atau interface aplikasi ... 156
Gambar 4.32 Kekurangan atau keterbatasan aplikasi ... 156
Gambar 4.33 Kelebihan aplikasi ... 157
Gambar 4.34 Kemudahan mendapatkan kelengkapan data dan informasi ... 158
Gambar 4.35 Membantu memberikan solusi ... 159
Gambar 4.36 Error pada saat aplikasi digunakan ... 160
Gambar 4.37 Penyebab terjadinya kesalahan atau masalah dalam mengoperasikan aplikasi ... 161
xix
Gambar 4.39 Menu-menu membuat bingung pengguna ... 162
Gambar 4.40 Kesesuaian arti pada semua gambar atau simbol ... 162
Gambar 4.41 Kemudahan pengertian bahasa dalam aplikasi ... 163
