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 html, imsdd, multimedia, perangkat ajar, web
vii
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
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
2.2
Multimedia .................................................................................... 5 2.1.1
Definisi Multimedia .......................................................... 5
2.1.2
Elemen-elemen Multimedia .............................................. 6
2.1.3
Bidang Aplikasi Multimedia ............................................. 7
Perangkat Ajar .............................................................................. 8 ix
2.3
2.2.1
Sejarah Perkembangan Perangkat Ajar ............................. 8
2.2.2
Jenis-jenis Perangkat Ajar ................................................. 9
2.2.3
Manfaat Perangkat Ajar .................................................... 13
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
3.2.3
Permasalahan .................................................................... 48 x
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
4.2
Spesifikasi Sistem ......................................................................... 121 4.1.1
Spesifikasi Perangkat Keras .............................................. 122
4.1.2
Spesifikasi Perangkat Lunak ............................................. 122
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
5.2
Saran ............................................................................................. 167 xi
DAFTAR PUSTAKA .......................................................................................... xxi RIWAYAT HIDUP ............................................................................................. xxiii LAMPIRAN-LAMPIRAN ................................................................................. L1 FOTOCOPY SURAT SURVEI
xii
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.3
Lebih menyenangkan menggunakan aplikasi ini untuk belajar daripada belajar seperti biasa di kelas .............................................. 155 xiii
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 Tabel 4.15 Durasi waktu untuk memperlajari pengoperasian aplikasi .............. 164
xiv
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.12 Struktur Menu Kuis ....................................................................... 60 xv
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 Gambar 3.36 Rancangan Layar Generator HTML Tabel ................................... 93 xvi
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.17 Layar Menu Kuis Submenu Pendahuluan ..................................... 141 xvii
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 Gambar 4.38 Kemudahan penggunaan aplikasi .................................................. 161 xviii
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 Gambar 4.42 Durasi waktu untuk mempelajari pengoperasian aplikasi ............. 164
xix
DAFTAR LAMPIRAN
Kuesioner Tahap Analisis ..................................................................................... L1 Kuesioner Tahap Implementasi ............................................................................. L2 Wawancara Tahap Analisis ................................................................................... L3
xx
