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

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 ...................................................................................... xvii LAMPIRAN.....................................................................................................

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

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