ix TAKARIR Alert Peringatan Bug Suatu kesalahan desain pada perangkat lunak Browser Perangkat lunak untuk menjelajahi Internet Button Tombol Container Wadah Drag Menarik; menyeret Drawing tool Alat untuk membuat gambar Email Surat elektronik Error checking Pengecekan kesalahan Input Masukan sistem Install Instalasi; pemasangan Open source Bersifat terbuka; dapat diakses oleh siapa saja; dapat diubah Output Keluaran sistem Script Kode program Scripting Penulisan kode program Template Format dokumen yang sudah diatur Tutorial Tuntunan Web Sistem yang saling terkoneksi dan terhubung ke Internet
x DAFTAR ISI HALAMAN JUDUL... i LEMBAR PENGESAHAN DOSEN PEMBIMBING... ii LEMBAR PENGESAHAN DOSEN PENGUJI... iii LEMBAR PERNYATAAN KEASLIAN... iv HALAMAN PERSEMBAHAN... v KATA PENGANTAR... vi ABSTRAKSI... viii TAKARIR... ix DAFTAR ISI... x DAFTAR TABEL... xiii DAFTAR GAMBAR... xiv BAB I PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Rumusan Masalah... 2 1.3 Batasan Masalah... 2 1.4 Tujuan Penelitian... 2 1.5 Manfaat Penelitian... 3 1.6 Sistematika Penulisan... 3 BAB II TINJAUAN PUSTAKA... 5 2.1 Definisi Data Flow Diagram... 5 2.2 Level dalam Data Flow Diagram... 8 2.3 Pembuatan Data Flow Diagram... 11 2.4 Kesalahan dalam Pembuatan Data Flow Diagram... 11 2.5 Data Flow Diagram Drawing Tool... 12 2.6 JavaScript Library untuk Pembuatan Drawing Tool... 16 BAB III METODOLOGI... 22 3.1 Analisis Sistem... 22 3.1.1 Identifikasi Masalah... 22 3.1.2 Gambaran Umum Sistem... 22
xi 3.1.3 Analisis Kebutuhan Input... 23 3.1.4 Analisis Kebutuhan Proses... 23 3.1.5 Analisis Kebutuhan Output... 23 3.1.6 Analisis Kebutuhan Perangkat Lunak... 23 3.1.7 Analisis Kebutuhan Perangkat Keras... 24 3.2 Unified Modelling Diagram... 24 3.2.1 Use Case Diagram... 24 3.2.2 Activity Diagram... 25 3.3 Rancangan Antarmuka... 27 3.3.1 Rancangan Antarmuka Halaman Utama DFD drawing tool... 27 3.3.2 Rancangan Antarmuka Halaman Pengenalan DFD... 28 3.3.3 Rancangan Antarmuka Halaman Buat DFD... 28 3.4 Rancangan Pengujian Sistem... 29 3.4.1 Rancangan Pengujian menggunakan Metode Black Box Testing... 29 3.4.2 Rancangan Pengujian menggunakan Beberapa Browser... 29 3.4.3 Rancangan Pengujian menggunakan Kuesioner Pengujian Sistem... 30 BAB IV HASIL DAN PEMBAHASAN... 31 4.1 Implementasi Sistem... 31 4.2 Implementasi JavaScript Library... 31 4.3 Implementasi Rancangan Antarmuka... 32 4.3.1 Implementasi Halaman Utama DFD Drawing Tool... 32 4.3.2 Implementasi Halaman Pengenalan DFD... 33 4.3.3 Implementasi Halaman Buat DFD... 38 4.4 Pengujian Sistem... 53 4.4.1 Pengujian menggunakan Metode Black Box Testing... 53 4.4.2 Pengujian menggunakan Beberapa Browser... 56 4.4.3 Pengujian menggunakan Kuesioner Pengujian Sistem... 57 4.5 Kekurangan Sistem... 61 BAB V PENUTUP... 62 5.1 Kesimpulan... 62 5.2 Saran... 62
xii DAFTAR PUSTAKA... LAMPIRAN... xvii xix
xiii DAFTAR TABEL Tabel 2.1 Simbol DFD... 7 Tabel 2.2 Kesalahan dalam pembuatan DFD... 12 Tabel 4.1 Perbandingan performa drawing tool... 56 Tabel 4.2 Hasil hitung kuesioner untuk rumusan masalah kedua... 58 Tabel 4.3 Hasil hitung kuesioner untuk rumusan masalah ketiga... 59 Tabel 4.4 Hasil hitung kuesioner untuk rumusan masalah keempat... 59
xiv DAFTAR GAMBAR Gambar 2.1 Diagram Konteks/Level 0... 8 Gambar 2.2 Diagram Level 1... 9 Gambar 2.3 Diagram Level 2... 10 Gambar 2.4 Tampilan awal Microsoft Visio 2013 Professional... 13 Gambar 2.5 Tampilan awal SmartDraw... 14 Gambar 2.6 Tampilan awal Draw.io... 15 Gambar 2.7 Grafik pada HTML <canvas>... 16 Gambar 2.8 Perbandingan edisi Community dan Toolkit... 17 Gambar 2.9 Flowchart... 18 Gambar 2.10 State Machine... 18 Gambar 2.11 Drag and Drop... 19 Gambar 2.12 Perimeter Anchors... 19 Gambar 2.13 Hierarchical Chart... 20 Gambar 2.14 Sources and Targets... 20 Gambar 2.15 Dynamic Anchors... 21 Gambar 2.16 Animation... 21 Gambar 3.1 Use case diagram... 24 Gambar 3.2 Activity diagram halaman pengenalan DFD... 25 Gambar 3.3 Activity diagram halaman buat DFD... 26 Gambar 3.4 Rancangan antarmuka halaman utama DFD drawing tool... 27 Gambar 3.5 Rancangan antarmuka halaman pengenalan DFD... 28 Gambar 3.6 Rancangan antarmuka halaman buat DFD... 29 Gambar 4.1 Flowchart pada web jsplumb... 32 Gambar 4.2 Implementasi halaman utama DFD drawing tool... 32 Gambar 4.3 Implementasi halaman pengenalan DFD... 33 Gambar 4.4 Implementasi halaman menu Pengertian DFD... 34 Gambar 4.5 Implementasi halaman menu Notasi DFD... 35 Gambar 4.6 Implementasi halaman menu Level DFD... 36 Gambar 4.7 Implementasi halaman menu Cara Membuat DFD... 37
xv Gambar 4.8 Implementasi halaman menu Kesalahan dalam Membuat DFD.. 38 Gambar 4.9 Implementasi halaman Buat DFD... 39 Gambar 4.10 DFD Level 0... 39 Gambar 4.11 Buat notasi Terminator... 40 Gambar 4.12 Ubah nama notasi Terminator... 40 Gambar 4.13 Notasi Terminator dalam drawing tool... 41 Gambar 4.14 Buat notasi Proses... 41 Gambar 4.15 Ubah nama notasi Proses... 41 Gambar 4.16 Notasi Proses dalam drawing tool... 42 Gambar 4.17 Tambah koneksi dari Terminator ke Proses... 42 Gambar 4.18 Window prompt hapus koneksi... 43 Gambar 4.19 Koneksi terhapus pada drawing tool... 43 Gambar 4.20 Ubah nama Arus Data... 44 Gambar 4.21 Nama Arus Data yang sudah berubah... 44 Gambar 4.22 DFD Level 0 pada drawing tool... 45 Gambar 4.23 DFD Level 1... 45 Gambar 4.24 Buat notasi Penyimpanan Data... 46 Gambar 4.25 Ubah nama notasi Penyimpanan Data... 46 Gambar 4.26 Notasi Penyimpanan Data dalam drawing tool... 46 Gambar 4.27 Buat notasi Proses kedua... 47 Gambar 4.28 Ubah nama notasi Proses kedua... 47 Gambar 4.29 Notasi Proses kedua dalam drawing tool... 47 Gambar 4.30 Buat notasi Penyimpanan Data kedua... 48 Gambar 4.31 Ubah nama notasi Penyimpanan Data kedua... 48 Gambar 4.32 Notasi Penyimpanan Data kedua dalam drawing tool... 48 Gambar 4.33 Buat notasi Terminator kedua... 49 Gambar 4.34 Ubah nama notasi Terminator kedua... 49 Gambar 4.35 Notasi Terminator kedua dalam drawing tool... 49 Gambar 4.36 Buat notasi Proses ketiga... 50 Gambar 4.37 Ubah nama notasi Proses ketiga... 50 Gambar 4.38 Notasi Proses ketiga dalam drawing tool... 50
xvi Gambar 4.39 DFD level 1 pada drawing tool... 51 Gambar 4.40 Window prompt hapus notasi... 51 Gambar 4.41 Notasi terhapus dari area gambar... 52 Gambar 4.42 Window prompt Bersihkan... 52 Gambar 4.43 Bersihkan drawing tool... 53 Gambar 4.44 Window prompt saat Terminator terhubung langsung dengan Terminator... 54 Gambar 4.45 Window prompt saat Terminator terhubung langsung dengan Penyimpanan Data... 54 Gambar 4.46 Window prompt saat Penyimpanan Data terhubung langsung dengan Penyimpanan Data... 55 Gambar 4.47 Blackhole... 55 Gambar 4.48 Miracle... 56 Gambar 4.49 Karakteristik responden berdasarkan angkatan mahasiswa... 57 Gambar 4.50 Karakteristik responden berdasarkan jenis kelamin... 57 Gambar 4.51 Karakteristik responden berdasarkan pengetahuan tentang DFD... 58 Gambar 4.52 Persentase performa DFD drawing tool... 60