Perancangan Sistem Penyampaian Permasalahan Mesin ATM (Automated Teller Machine dan EDC (Electronic Data Capture) Berbasis Platform Menggunakan Phonegap Framework
PERANCANGAN SISTEM PENYAMPAIAN PERMASALAHAN MESIN
ATM (AUTOMATED TELLER MACHINE) DAN EDC (ELECTRONIC
DATA CAPTURE
) BERBASIS MOBILE APPLICATION FOR MULTIPLE PLATFORM MENGGUNAKAN PHONEGAP FRAMEWORK
SKRIPSI
ADYA ZIZWAN PUTRA
121421029
PROGRAM STUDI EKSTENSI S1 ILMU KOMPUTER
FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI
UNIVERSITAS SUMATERA UTARA
MEDAN
2014 PERANCANGAN SISTEM PENYAMPAIAN PERMASALAHAN MESIN ATM (AUTOMATED TELLER MACHINE) DAN EDC (ELECTRONIC DATA CAPTURE)
BERBASIS MOBILE APPLICATION FOR MULTIPLE PLATFORM MENGGUNAKAN
PHONEGAP FRAMEWORK
SKRIPSI Diajukan untuk melengkapi tugas akhir dan memenuhi syarat mencapai gelar Sarjana
Komputer ADYA ZIZWAN PUTRA
121421029 PROGRAM STUDI EKSTENSI S1 ILMU KOMPUTER FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI UNIVERSITAS SUMATERA UTARA MEDAN
2014
PERSETUJUAN
Judul : PERANCANGAN SISTEM PENYAMPAIAN PERMASALAHAN MESIN ATM (AUTOMATED
TELLER MACHINE ) DAN EDC (ELECTRONIC DATA CAPTURE ) BERBASIS MOBILE
APPLICATION FOR MULTIPLE PLATFORM
MENGGUNAKAN PHONEGAP FRAMEWORK Kategori : SKRIPSI Nama : ADYA ZIZWAN PUTRA Nomor Induk Mahasiswa : 121421029 Program Studi : EKSTENSI (S1) ILMU KOMPUTER Fakultas : ILMU KOMPUTER DAN TEKNOLOGI
INFORMASI Komisi Pembimbing : Pembimbing 2 Pembimbing 1 Dian Rachmawati, S.Si, M.Kom Dr. Poltak Sihombing, M.Kom NIP. 19830723 200912 2 004 NIP. 19620317 199103 1 001 Diketahui/Disetujui oleh Program Studi S1 Ilmu Komputer Ketua, Dr. Poltak Sihombing, M.Kom NIP.19620317 199103 1 001
PERNYATAAN
PERANCANGAN SISTEM PENYAMPAIAN PERMASALAHAN MESIN ATM (AUTOMATED TELLER MACHINE) DAN EDC (ELECTRONIC DATA CAPTURE)
BERBASIS MOBILE APPLICATION FOR MULTIPLE PLATFORM MENGGUNAKAN PHONEGAP FRAMEWORK Saya mengakui bahwa skripsi ini adalah hasil karya saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing telah disebutkan sumbernya.
Medan, 15 Juli 2014 Adya Zizwan Putra 121421029
PENGHARGAAN
Puji dan syukur kehadirat Allah SWT, yang hanya dengan rahmat dan izin-Nya penulis dapat menyelesaikan penyusunan skripsi ini, sebagai syarat untuk memperoleh gelar Sarjana Komputer, pada Program Studi Ekstensi S1 Ilmu Komputer Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Sumatera Utara.
Ucapan terima kasih penulis sampaikan kepada: 1.
Bapa k Dr. Poltak Sihombing, M.Kom selaku Ketua Program Studi S1 Ilmu Komputer Universitas Sumatera Utara dan selaku Dosen Pembimbing.
2. Ibu Dian Rachmawati, S.Si, M.Kom selaku Dosen Pembimbing.
3. Bapa k Drs. Agus Salim Harahap, M.Si selaku Dosen Pembanding.
4. Bapa k Jos Timanta Tarigan S.Kom M.Sc selaku Dosen Pembanding.
5. Deka n dan Pembantu Dekan Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Sumatera Utara, seluruh tenaga pengajar dan pegawai di Program Studi Ekstensi S1 Ilmu Komputer Fasilkom-TI USU.
6. Ayah anda Aziz Usman NST dan ibunda Sufriyati, kakanda Atika Ziyani Pratiwi NST yang selalu memberikan do’a dan dukungannya kepada penulis.
7. Selur uh sahabat dan teman-teman Ekstensi S1 Ilmu Komputer khususnya stambuk 2012 yang selalu memberikan dukungan dan ilmu kepada penulis selama menyelesaikan skripsi ini.
8. Pihak
- pihak yang terlibat langsung maupun tidak langsung yang membantu penyelesaian laporan ini.
Semoga Allah SWT melimpahkan berkah kepada semua pihak yang telah memberikan bantuan, perhatian, serta dukungan kepada penulis dalam menyelesaikan skripsi ini.
Medan, 15 Juli 2014
Penulis
ABSTRAK
ATM (Automated Teller Machine) dan EDC (Electronic Data Capture) adalah mesin yang melayani nasabah perbankan selama 24 jam. Mesin ini terkadang memiliki permasalahan ataupun kendala ketika digunakan oleh nasabah perbankan. Kasus yang sering terjadi pada mesin ATM seperti kartu debit tertelan, offline system dan permasalahan lainnya. Sehingga diperlukan sebuah sistem pengaduan (tempat untuk menampung semua permasalahan ataupun kendala dalam penggunaan kedua mesin tersebut) dan sistem berupa service solution yang dapat membantu menyelesaikan permasalahan nasabah dalam penggunaan mesin ATM dan EDC secara realtime (efektif dan efisien) berbasis mobile. Pada era globalisasi saat ini, perkembangan teknologi komunikasi mobile meningkat pesat sehingga menghantarkan manusia untuk melangkah lebih maju dimana menjadikan waktu terasa lebih singkat dan sangat berharga. Munculnya beberapa sistem operasi mobile tersebut mengakibatkan semua
mobile application developers mengembangkan aplikasi mobile secara bertahap untuk
masing-masing sistem operasi mobile tersebut. Namun Phonegap Framework menjadi solusi pada zaman sekarang ini untuk memudahkan developer dari berbagai sistem operasi mobile untuk mengembangkan mobile application di semua platform sistem operasi mobile secara sekaligus. Developer cukup memprogram sekali saja untuk mengembangkan sebuah aplikasi yang dapat berjalan di seluruh sistem operasi
mobile . Dapat disimpulkan Phonegap Framework dapat digunakan untuk
memudahkan dalam pengembangan sebuah sistem penyampaian permasalahan mesin ATM & EDC berbasis mobile (untuk beberapa platform mobile)
Kata Kunci: Phonegap Framework, Aplikasi Mobile, Solusi Layanan, Beberapa
Platform Mobile
DESIGN THE PROBLEM DELIVERY SYSTEM OF ATM (AUTOMATED
TELLER MACHINE) AND EDC (ELECTRONIC DATA CAPTURE)
BASED MOBILE APPLICATION FOR MULTIPLE PLATFORM
USING PHONEGAP FRAMEWORK
ABSTRACT
ATM (Automated Teller Machine) and EDC (Electronic Data Capture) are machines that serve banking customers for 24 hours. These machines sometimes have problems or problems when used by bank customers. Cases which often occur at the ATM machine swallowed like a debit card, the offline system and other issues. So, we need a system of complaint (places to accommodate all the problems or obstacles in the use of the machines) and a service solution that can help solve the problems of customers in the use of the ATM machine and EDC in realtime (effective and efficient) based mobile. In the current era of globalization , the development of mobile communication technologies increased considerably so that human conduct to step forward which makes the time seem shorter and very valuable. The emergence of multiple mobile operating systems has resulted in all mobile application developers to develop mobile applications in stages for each of the mobile operating system. However Phonegap Framework to be the solution to this present day to facilitate the developer of a variety of mobile operating systems to develop a mobile application across all mobile operating systems platforms at once. Developer enough once reprogrammed to develop an application that can run on the whole mobile operating system. It can be concluded Phonegap Framework can be used to facilitate the development of The Problem Delivery System of ATM and EDC based mobile application (for multiple mobile platforms)
Keyword: Phonegap Framework, Mobile Application, Service Solution, Multiple
Mobile Platform
DAFTAR ISI
3.1.2.1 Kebutuhan Fungsional
2.6 Node.JS
15
2.6.1 Model I/O Non-Blocking
16
2.7 Eclipse
17 Bab III Analisis dan Perancangan
3.1 Analisis Sistem
23
3.1.1 Analisis Masalah
23
3.1.2 Analisis Kebutuhan Sistem
24
24
2.5 HTML 5
3.1.2.2 Kebutuhan Nonfungsional
25
3.1.3 Activity Diagram yang berjalan
28
3.1.3.1 Activity Diagram Untuk Penyampaian Permasalahan Baru
28
3.1.3.2 Activity Diagram Untuk Penanganan Permasalahan
30
3.1.4 Sequence Diagram Sistem yang Berjalan
31
3.1.4.1 Sequence Diagram Untuk Penyampaian Permasalahan Baru 31
3.1.4.2 Sequence Diagram Untuk Penanganan Permasalahan
33
12
Halaman Persetujuan iii
Pernyataan iv
3
Penghargaan v
Abstrak vi
Abstract
vii Daftar Isi viii
Daftar Tabel xi
Daftar Gambar xii
Daftar Lampiran xiv
Bab I Pendahuluan
1.1 Latar Belakang
1
1.2 Perumusan Masalah
3
1.3 Batasan Masalah
1.4 Tujuan Penelitian
2.4 Xcode
4
1.5 Manfaat Penelitian
5
1.6 Metode Penelitian
5
1.7 Sistematika Penulisan
6 Bab II Landasan Teori
2.1 ATM (Automatic Teller Machine)
8
2.2 EDC (Electronic Data Capture)
8
2.3 PhoneGap
10
11
3.2 Perancangan Sistem
3.4.3.1 Rancangan Halaman Menu Utama Untuk Nasabah
3.5 Rancangan Database
78
3.4.3.2 Rancangan Halaman Sub Menu Untuk Nasabah
72
3.4.3.1 Rancangan Halaman Menu Utama Untuk Nasabah
72
72
3.6 Konfigurasi Phonegap Framework dengan Mobile Web(Finishing)
3.4.3 Rancangan Sistem Untuk Halaman Nasabah (Pelapor)
3.4.2.2 Rancangan Halaman Daftar Permasalahan dan Tindaklanjut 69
63
3.4.2.1 Rancangan Antar Muka Login Untuk Staff
69
3.4.2 Rancangan Sistem Untuk Halaman Staff
65
86
89
63
4.1.3 Hasil Perancangan Pengunaan Phonegap Framework 107
4.1.3.7 Hasil Rancangan Halaman Menu Event Untuk Nasabah 110
4.1.3.6 Hasil Rancangan Halaman Menu Saran/Info 109
4.1.3.5 Hasil Rancangan Halaman Menu Photo Untuk Nasabah 109
4.1.3.4 Hasil Rancangan Halaman Menu Produk Untuk Nasabah 108
4.1.3.3 Hasil Rancangan Halaman Menu Tentang Untuk Nasabah 108
4.1.3.2 Hasil Rancangan Halaman Menu Intro Untuk Nasabah 107
4.1.3.1 Hasil Rancangan Halaman Menu Utama Untuk Nasabah 107
4.1.2 Hasil Penggunaan HTML 5 (Auto Responsive) 102
3.6.1 Konfigurasi Phonegap Framework Pada Project Android
4.1.1 Hasil Penggunaan Teknik CSS For Retina Display 101
4.1 Implementasi 101
Bab IV Implementasi dan Pengujian
3.7 Perbandingan Biaya Publish Aplikasi Mobile berbasis Android & IOS 99
94
3.6.2 Konfigurasi Phonegap Framework Pada Project IOS
90
3.4.1.2 Rancangan Halaman Utama Admin
3.4.1.1 Rancangan Antar Muka Login Untuk Admin
34
41
3.2.1.8 Flowchart Menu Admin Mengelola Jenis Permasalahan
45
3.2.1.7 Flowchart Menu Admin Untuk Mengelola Data Staff
3.2.1.6 Flowchart Menu Admin Untuk Mengelola Data Departemen 44
43
3.2.1.5 Flowchart Menu Utama Admin
3.2.1.4 Flowchart Penyelesaian/Tindaklanjut Permasalahan
3.2.2 Rancangan Antar Muka
39
3.2.1.3 Flowchart Menu Utama Staff
37
3.2.1.2 Flowchart Cek Status Penyelesaian Permasalahan Mesin
3.2.1.1 Flowchart Penyampaian Permasalahan Mesin ATM & EDC 36
35
3.2.1 Flowchart Sistem
46
47
63
59
3.4.1 Rancangan Sistem Untuk Halaman Admin
63
3.4 Pembuatan Aplikasi Penyampaian Permasalahan Mesin ATM & EDC
60
3.3.2 Phonegap Framework di IOS
60
3.3.1 Phonegap Framework di Android
3.3 Persiapan Phonegap Framework
3.2.2.1 Antar Muka Menu Utama
57
3.2.2.4 Antar Muka Form Cek Status Permasalahan
56
3.2.2.3 Antar Muka Form Laporkan Permasalahan Baru
56
3.2.2.2 Antar Muka Sub Menu
48
4.1.3.8 Hasil Rancangan Halaman Menu Call Untuk Nasabah 110
4.1.3.9 Hasil Rancangan Perintah SMS Pada Menu Nasabah 110
4.1.3.10 Hasil Rancangan Perintah Mail Pada Menu Nasabah 111
4.1.4 Rancangan Halaman Sub Menu Untuk Nasabah 111
4.1.4.1 Rancangan Halaman Laporkan Permasalahan Baru 112
4.1.4.2 Rancangan Halaman Cek Status Permasalahan 113
4.1.5 Rancangan Halaman Admin dan Staff Untuk Tindaklanjut 113
4.1.5.1 Hasil Rancangan Sistem Untuk Halaman Admin 114
4.1.5.1.1 Hasil Rancangan Antar Muka Login Untuk Admin 114
4.1.5.1.2 Hasil Rancangan Halaman Utama Admin 114
4.1.5.1.3 Hasil Rancangan HalamanPengelolaan Departemen 115
4.1.5.1.4 Hasil Rancangan Halaman Pengelolaan Staff 116
4.1.5.1.5 Hasil Rancangan Pengelolaan Jenis Permasalahan 117
4.1.5.1.6 Hasil Rancangan Halaman System Logs (Admin) 118
4.1.5.2 Hasil Rancangan Sistem Untuk Halaman Staff 119
4.1.5.2.1 Hasil Rancangan Antar Muka Login Untuk Staff 119
4.1.5.2.2 Hasil Rancangan Halaman Dashboard Untuk Staff 120
4.1.5.2.3 Rancangan Halaman Daftar Permasalahan 121
Bab V Kesimpulan dan Saran
5.1 Kesimpulan 123
5.2 Saran 124
Daftar Pustaka 125
DAFTAR TABEL Nomor Tabel Nama Tabel Halaman
3.1
3.2
3.3
3.4
3.5
3.6 Tabel kanwil1_department Tabel kanwil1_help_topic Tabel kanwil1_ticket_thread Tabel kanwil1_ticket Tabel kanwil1_staff Tabel Perbandingan biaya publish
87
87
88
88
89
99
DAFTAR GAMBAR Nomor Gambar Nama Gambar Halaman
15
30
28
26
23
22
19
17
16
12
33
11
10
Menyalin source code mobile web ke dalam project Android Menyalin source code mobile web ke dalam project IOS Hasil menggunakan teknik CSS For Retina Display (kiri) dan
Project IOS pada Xcode Class Diagram sistem yang dirancang
Hasil project IOS dari Phonegap Framework
Project Android pada Eclipse
Hasil Project Android dari Phonegap Framework
Instalation Phonegap with Command Line / Terminal
Rancangan Tampilan Sub Menu Rancangan Tampilan form laporkan permasalahan baru Rancangan Tampilan form cek status permasalahan
31
35
Penggabungan dua gambar dengan Teknik CSS For Retina
57
90
86
63
62
61
61
60
59
56
36
50
48
46
45
44
43
41
39
37
Display
Flowchart menu utama staff Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff Flowchart Menu Admin Flowchart Menu Admin untuk mengelola departemen Flowchart Menu Admin untuk mengelola data staff Flowchart Menu Admin untuk mengelola jenis permasalahan Flowchart Menu Admin untuk mengelola jenis permasalahan
2.1
3.4
3.12
3.11
3.10
3.9
3.8
3.7
3.6
3.5
3.3
3.14
3.2
3.1
2.8
2.7
2.6
2.5
2.4
2.3
2.2
3.13
3.15
EDC
3.27
Flowchart Sistem Menu Pengguna (nasabah) Flowchart penyampaian permasalahan mesin ATM & EDC
Flowchart cek status penyelesaian permasalahan mesin ATM &
permasalahan
Sequence Diagram untuk diagram untuk penanganan
permasalahan baru
Use case Diagram Activity Diagram untuk penyampaian permasalahan baru Activity Diagram untuk penanganan permasalahan
Sequence Diagram untuk diagram untuk penyampaian
Menambahkan Komponen Android SDK Ukuran Gambar Berdasarkan Density Diagram Ishikawa Masalah Penelitian
Xcode Maverick OS X Node.JS Non Blocking Node.JS Flowchart Node.JS
4.1 Requirement PhoneGap PhoneGap Support
3.28
3.26
3.16
3.25
3.24
3.23
3.22
3.21
3.20
3.19
3.18
3.17
95 102
4.2
4.37
4.28
4.29
4.30
4.31
4.32
4.33
4.34
4.35
4.36
4.38
4.26
4.39
4.40
4.41 tanpa menggunakan teknik CSS For Retina Display (kanan)
Input Website URL yang ingin diuji auto-responsive
Tampilan System pada Iphone 3 ataupun 4 potrait width 320px Tampilan System pada Iphone 3 ataupun 4 landscape width 480px Tampilan System pada Iphone 5 potrait width 320px Tampilan System pada Crappy Android Landscape width 320px Tampilan System pada Nexus 4 potrait width 384px Tampilan System pada Nexus 4 Landscape width 600px Tampilan System pada Ipad Landscape width 1024px Tampilan System tanpa fitur auto responsive pada Iphone dan
Crappy Android
Tampilan menu utama nasabah pada IOS(kiri) & Android(kanan) Tampilan halaman menu intro pada IOS(kanan) & Android(kiri) Tampilan halaman tentang pada IOS(kanan) & Android(kiri) Tampilan halaman produk pada IOS(kanan) & Android(kiri) Tampilan halaman menu photo pada IOS(kanan)&Android(kiri) Tampilan halaman menu saran/info pada IOS(kanan) & Android(kiri) Tampilan halaman menu event pada IOS(kanan) & Android(kiri) Tampilan perintah call pada menu (IOS) Tampilan perintah SMS pada menu (IOS) Tampilan perintah mail pada IOS Tampilan menu awal sub menu Android(kanan) dan IOS(kiri) Tampilan form laporkan permasalahan baru pada Android(kiri) dan IOS(kanan) Tampilan form cek status permasalahan pada Android(kiri) dan
IOS (kanan)
Tampilan login untuk Admin Tampilan halaman Admin Tampilan halaman tambah departemen Tampilan halaman ubah data departemen Tampilan halaman lihat / hapus data departemen Tampilan halaman ubah data staff Tampilan halaman lihat / hapus data staff Tampilan halaman tambah data staff Tampilan halaman tambah jenis permasalahan Tampilan halaman ubah jenis permasalahan Tampilan halaman lihat / hapus jenis permasalahan Tampilan halaman system logs pada admin Tampilan halaman login staff Tampilan halaman dashboard aktivitas permasalahan Tampilan halaman direktori pegawai Tampilan halaman profil staff Tampilan halaman daftar permasalahan Tampilan detail dan tindaklanjut permasalahan
4.27
4.25
4.3
4.13
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12
4.14
4.24
4.15
4.16
4.17
4.18
4.19
4.20
4.21
4.22
4.23
103 103 103 104 104 104 105 105 106 107 107 108 108 109 109 110 110 111 111 112 112 113 114 114 115 115 116 116 117 117 118 118 118 119 119 120 120 121 122 122