ANALISIS DAN PERANCANGAN PERANGKAT AJAR PEMBUATAN HALAMAN WEB DENGAN TAG HTML BERBASISKAN MULTIMEDIA - Binus e-Thesis

  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, 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

  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 Perangkat Ajar .............................................................................. 8

  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 3.2.3 Permasalahan ....................................................................

  48

  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

  5.2 Saran ............................................................................................. 167

  

DAFTAR PUSTAKA .......................................................................................... xxi

RIWAYAT HIDUP ............................................................................................. xxiii

LAMPIRAN-LAMPIRAN ................................................................................. L1

FOTOCOPY SURAT SURVEI

  DAFTAR TABEL

Tabel 2.1 Perbandingan dokumen HTML, teks, dan WYSIWYG .................. 30Tabel 3.2 Ketertarikan siswa belajar membuat website ................................... 38Tabel 3.3 Sumber belajar siswa dalam membuat website ................................ 39Tabel 3.4 Tujuan siswa belajar membuat website ............................................ 40Tabel 3.5 Kendala yang dialami siswa dalam belajar membuat website ......... 41Tabel 3.6 Efektivitas metode pembelajaran yang pernah diikuti oleh siswa ... 42Tabel 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 ............................. 46Tabel 3.10 Modul Materi ................................................................................... 53Tabel 3.11 Tabel MsUser ................................................................................... 105Tabel 3.12 Tabel MsKuis ................................................................................... 105Tabel 3.13 Tabel TrGambar ................................................................................ 105Tabel 3.14 Tabel TrNilai..................................................................................... 106Tabel 3.15 Tabel MsKamus ................................................................................ 106Tabel 4.1 Tabel Rencana Implementasi ........................................................... 153Tabel 4.2 Penggunaan aplikasi ini sebagai pengganti cara belajar konvensional .................................................................................... 154Tabel 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 .......................... 155Tabel 4.5 Kekurangan atau keterbatasan aplikasi ............................................ 156Tabel 4.6 Kelebihan aplikasi ............................................................................ 157Tabel 4.8 Membantu memberikan solusi ......................................................... 159Tabel 4.9 Error pada saat aplikasi digunakan .................................................. 159Tabel 4.10 Penyebab terjadinya kesalahan atau masalah dalam mengoperasikan aplikasi .................................................................. 160Tabel 4.11 Kemudahan penggunaan aplikasi ..................................................... 161Tabel 4.12 Menu-menu membuat bingung pengguna ........................................ 162Tabel 4.13 Kesesuaian arti pada semua gambar atau simbol ............................. 162Tabel 4.14 Kemudahan pengertian bahasa dalam aplikasi ................................ 163Tabel 4.15 Durasi waktu untuk memperlajari pengoperasian aplikasi .............. 164

  DAFTAR GAMBAR

Gambar 3.3 Sumber belajar siswa dalam membuat website ............................. 39Gambar 3.11 Struktur Menu Tutorial ................................................................. 58Gambar 3.10 Struktur Menu Utama ................................................................... 56Gambar 3.9 Ketertarikan siswa menggunakan perangkat ajar .......................... 47Gambar 3.8 Siswa yang pernah menggunakan perangkat ajar .......................... 45Gambar 3.7 Perbaikan yang diharapkan dalam metode pembelajaran HTML yang ada ....................................................................................... 44Gambar 3.6 Efektivitas metode pembelajaran yang pernah diikuti oleh siswa . 43Gambar 3.5 Kendala yang dialami siswa dalam belajar membuat website ...... 42Gambar 3.4 Tujuan siswa belajar membuat website ......................................... 40Gambar 3.2 Ketertarikan siswa belajar membuat website ................................ 38Gambar 2.1 Perangkat Ajar Tutorial ................................................................ 10Gambar 3.1 Siswa yang pernah belajar membuat website ................................ 37Gambar 2.9 Contoh Relationship ...................................................................... 23Gambar 2.8 Contoh Attribute ............................................................................ 23Gambar 2.7 Contoh Entity ................................................................................ 22Gambar 2.6 Lingkungan DBMS ....................................................................... 20Gambar 2.5 Siklus IMSDD Dastbaz ................................................................. 16Gambar 2.4 Perangkat Ajar Games ................................................................. 12Gambar 2.3 Perangkat Ajar Simulation ............................................................. 11Gambar 2.2 Perangkat Ajar Drill and Practise ................................................ 10Gambar 3.12 Struktur Menu Kuis ....................................................................... 60Gambar 3.13 Struktur Menu Kamus ................................................................... 61Gambar 3.14 Struktur Menu Template HTML ................................................... 62Gambar 3.15 Struktur Menu Generator HTML .................................................. 62Gambar 3.16 STD Intro ...................................................................................... 63Gambar 3.17 STD Menu Login .......................................................................... 64Gambar 3.18 STD Menu Utama ......................................................................... 65Gambar 3.19 STD Menu Tutorial ....................................................................... 66Gambar 3.20 STD Kuis ...................................................................................... 67Gambar 3.21 STD Kamus ................................................................................... 68Gambar 3.22 STD Template HTML ................................................................... 69Gambar 3.23 STD Generator HTML .................................................................. 70Gambar 3.24 STD Bantuan ................................................................................. 71Gambar 3.25 Rancangan Layar Intro .................................................................. 72Gambar 3.26 Rancangan Layar Login ................................................................ 74Gambar 3.27 Rancangan Layar Daftar Baru ....................................................... 75Gambar 3.28 Rancangan Layar Menu Utama ..................................................... 77Gambar 3.29 Rancangan Layar Menu Tutorial HTML ...................................... 79Gambar 3.30 Rancangan Layar Menu Kuis ........................................................ 81Gambar 3.31 Rancangan Layar Menu Kamus..................................................... 83Gambar 3.32 Rancangan Layar Menu Template HTML ................................... 85Gambar 3.33 Rancangan Layar Menu Futura ..................................................... 87Gambar 3.34 Rancangan Layar Menu Generator HTML ................................... 89Gambar 3.35 Rancangan Layar Generator HTML Halaman Sederhana ............ 91Gambar 3.36 Rancangan Layar Generator HTML Tabel ................................... 93Gambar 3.37 Rancangan Layar Generator HTML Teks .................................... 95Gambar 3.38 Rancangan Layar Generator HTML Link ..................................... 97Gambar 3.39 Rancangan Layar Bantuan ............................................................ 99Gambar 3.40 Rancangan Layar Kamus Cari ...................................................... 101Gambar 3.41 Rancangan Layar Kamus Isi ......................................................... 103Gambar 3.42 Rancangan Layar Skor Kamu ....................................................... 104Gambar 3.43 ERD ............................................................................................... 106Gambar 4.1 Instalasi tahap pertama .................................................................. 124Gambar 4.2 Instalasi tahap kedua ..................................................................... 124Gambar 4.3 Instalasi tahap ketiga ..................................................................... 125Gambar 4.4 Instalasi tahap keempat ................................................................. 126Gambar 4.5 Instalasi tahap kelima .................................................................... 127Gambar 4.6 tahap pertama ................................................................ 128

  Uninstall