TAKARIR. Peringatan Bug Suatu kesalahan desain pada perangkat lunak Browser. Tombol Container Wadah Drag

Transkripsi

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

2 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 Latar Belakang Rumusan Masalah Batasan Masalah Tujuan Penelitian Manfaat Penelitian Sistematika Penulisan... 3 BAB II TINJAUAN PUSTAKA Definisi Data Flow Diagram Level dalam Data Flow Diagram Pembuatan Data Flow Diagram Kesalahan dalam Pembuatan Data Flow Diagram Data Flow Diagram Drawing Tool JavaScript Library untuk Pembuatan Drawing Tool BAB III METODOLOGI Analisis Sistem Identifikasi Masalah Gambaran Umum Sistem... 22

3 xi Analisis Kebutuhan Input Analisis Kebutuhan Proses Analisis Kebutuhan Output Analisis Kebutuhan Perangkat Lunak Analisis Kebutuhan Perangkat Keras Unified Modelling Diagram Use Case Diagram Activity Diagram Rancangan Antarmuka Rancangan Antarmuka Halaman Utama DFD drawing tool Rancangan Antarmuka Halaman Pengenalan DFD Rancangan Antarmuka Halaman Buat DFD Rancangan Pengujian Sistem Rancangan Pengujian menggunakan Metode Black Box Testing Rancangan Pengujian menggunakan Beberapa Browser Rancangan Pengujian menggunakan Kuesioner Pengujian Sistem BAB IV HASIL DAN PEMBAHASAN Implementasi Sistem Implementasi JavaScript Library Implementasi Rancangan Antarmuka Implementasi Halaman Utama DFD Drawing Tool Implementasi Halaman Pengenalan DFD Implementasi Halaman Buat DFD Pengujian Sistem Pengujian menggunakan Metode Black Box Testing Pengujian menggunakan Beberapa Browser Pengujian menggunakan Kuesioner Pengujian Sistem Kekurangan Sistem BAB V PENUTUP Kesimpulan Saran... 62

4 xii DAFTAR PUSTAKA... LAMPIRAN... xvii xix

5 xiii DAFTAR TABEL Tabel 2.1 Simbol DFD... 7 Tabel 2.2 Kesalahan dalam pembuatan DFD Tabel 4.1 Perbandingan performa drawing tool Tabel 4.2 Hasil hitung kuesioner untuk rumusan masalah kedua Tabel 4.3 Hasil hitung kuesioner untuk rumusan masalah ketiga Tabel 4.4 Hasil hitung kuesioner untuk rumusan masalah keempat... 59

6 xiv DAFTAR GAMBAR Gambar 2.1 Diagram Konteks/Level Gambar 2.2 Diagram Level Gambar 2.3 Diagram Level Gambar 2.4 Tampilan awal Microsoft Visio 2013 Professional Gambar 2.5 Tampilan awal SmartDraw Gambar 2.6 Tampilan awal Draw.io Gambar 2.7 Grafik pada HTML <canvas> Gambar 2.8 Perbandingan edisi Community dan Toolkit Gambar 2.9 Flowchart Gambar 2.10 State Machine Gambar 2.11 Drag and Drop Gambar 2.12 Perimeter Anchors Gambar 2.13 Hierarchical Chart Gambar 2.14 Sources and Targets Gambar 2.15 Dynamic Anchors Gambar 2.16 Animation Gambar 3.1 Use case diagram Gambar 3.2 Activity diagram halaman pengenalan DFD Gambar 3.3 Activity diagram halaman buat DFD Gambar 3.4 Rancangan antarmuka halaman utama DFD drawing tool Gambar 3.5 Rancangan antarmuka halaman pengenalan DFD Gambar 3.6 Rancangan antarmuka halaman buat DFD Gambar 4.1 Flowchart pada web jsplumb Gambar 4.2 Implementasi halaman utama DFD drawing tool Gambar 4.3 Implementasi halaman pengenalan DFD Gambar 4.4 Implementasi halaman menu Pengertian DFD Gambar 4.5 Implementasi halaman menu Notasi DFD Gambar 4.6 Implementasi halaman menu Level DFD Gambar 4.7 Implementasi halaman menu Cara Membuat DFD... 37

7 xv Gambar 4.8 Implementasi halaman menu Kesalahan dalam Membuat DFD.. 38 Gambar 4.9 Implementasi halaman Buat DFD Gambar 4.10 DFD Level Gambar 4.11 Buat notasi Terminator Gambar 4.12 Ubah nama notasi Terminator Gambar 4.13 Notasi Terminator dalam drawing tool Gambar 4.14 Buat notasi Proses Gambar 4.15 Ubah nama notasi Proses Gambar 4.16 Notasi Proses dalam drawing tool Gambar 4.17 Tambah koneksi dari Terminator ke Proses Gambar 4.18 Window prompt hapus koneksi Gambar 4.19 Koneksi terhapus pada drawing tool Gambar 4.20 Ubah nama Arus Data Gambar 4.21 Nama Arus Data yang sudah berubah Gambar 4.22 DFD Level 0 pada drawing tool Gambar 4.23 DFD Level Gambar 4.24 Buat notasi Penyimpanan Data Gambar 4.25 Ubah nama notasi Penyimpanan Data Gambar 4.26 Notasi Penyimpanan Data dalam drawing tool Gambar 4.27 Buat notasi Proses kedua Gambar 4.28 Ubah nama notasi Proses kedua Gambar 4.29 Notasi Proses kedua dalam drawing tool Gambar 4.30 Buat notasi Penyimpanan Data kedua Gambar 4.31 Ubah nama notasi Penyimpanan Data kedua Gambar 4.32 Notasi Penyimpanan Data kedua dalam drawing tool Gambar 4.33 Buat notasi Terminator kedua Gambar 4.34 Ubah nama notasi Terminator kedua Gambar 4.35 Notasi Terminator kedua dalam drawing tool Gambar 4.36 Buat notasi Proses ketiga Gambar 4.37 Ubah nama notasi Proses ketiga Gambar 4.38 Notasi Proses ketiga dalam drawing tool... 50

8 xvi Gambar 4.39 DFD level 1 pada drawing tool Gambar 4.40 Window prompt hapus notasi Gambar 4.41 Notasi terhapus dari area gambar Gambar 4.42 Window prompt Bersihkan Gambar 4.43 Bersihkan drawing tool Gambar 4.44 Window prompt saat Terminator terhubung langsung dengan Terminator Gambar 4.45 Window prompt saat Terminator terhubung langsung dengan Penyimpanan Data Gambar 4.46 Window prompt saat Penyimpanan Data terhubung langsung dengan Penyimpanan Data Gambar 4.47 Blackhole Gambar 4.48 Miracle Gambar 4.49 Karakteristik responden berdasarkan angkatan mahasiswa Gambar 4.50 Karakteristik responden berdasarkan jenis kelamin Gambar 4.51 Karakteristik responden berdasarkan pengetahuan tentang DFD Gambar 4.52 Persentase performa DFD drawing tool... 60