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
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
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,
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
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.
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 applicationdevelopers 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
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)
DAFTAR ISI
Halaman
Persetujuan iii
Pernyataan iv
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 3
1.4 Tujuan Penelitian 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
2.4 Xcode 11
2.5 HTML 5 12
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.2 Perancangan Sistem 34 3.2.1 Flowchart Sistem 35 3.2.1.1 Flowchart Penyampaian Permasalahan Mesin ATM & EDC 36 3.2.1.2 Flowchart Cek Status Penyelesaian Permasalahan Mesin 37 3.2.1.3 Flowchart Menu Utama Staff 39 3.2.1.4 Flowchart Penyelesaian/Tindaklanjut Permasalahan 41 3.2.1.5 Flowchart Menu Utama Admin 43 3.2.1.6 Flowchart Menu Admin Untuk Mengelola Data Departemen 44 3.2.1.7 Flowchart Menu Admin Untuk Mengelola Data Staff 45 3.2.1.8 Flowchart Menu Admin Mengelola Jenis Permasalahan 46 3.2.2 Rancangan Antar Muka 47 3.2.2.1 Antar Muka Menu Utama 48 3.2.2.2 Antar Muka Sub Menu 56 3.2.2.3 Antar Muka Form Laporkan Permasalahan Baru 56 3.2.2.4 Antar Muka Form Cek Status Permasalahan 57 3.3 Persiapan Phonegap Framework 59 3.3.1 Phonegap Framework di Android 60 3.3.2 Phonegap Framework di IOS 60 3.4 Pembuatan Aplikasi Penyampaian Permasalahan Mesin ATM & EDC 63 3.4.1 Rancangan Sistem Untuk Halaman Admin 63 3.4.1.1 Rancangan Antar Muka Login Untuk Admin 63 3.4.1.2 Rancangan Halaman Utama Admin 65 3.4.2 Rancangan Sistem Untuk Halaman Staff 69 3.4.2.1 Rancangan Antar Muka Login Untuk Staff 63 3.4.2.2 Rancangan Halaman Daftar Permasalahan dan Tindaklanjut 69 3.4.3 Rancangan Sistem Untuk Halaman Nasabah (Pelapor) 72 3.4.3.1 Rancangan Halaman Menu Utama Untuk Nasabah 72 3.4.3.1 Rancangan Halaman Menu Utama Untuk Nasabah 72 3.4.3.2 Rancangan Halaman Sub Menu Untuk Nasabah 78
3.5 Rancangan Database 86
3.6 Konfigurasi Phonegap Framework dengan Mobile Web(Finishing) 89 3.6.1 Konfigurasi Phonegap Framework Pada Project Android 90 3.6.2 Konfigurasi Phonegap Framework Pada Project IOS 94 3.7 Perbandingan Biaya Publish Aplikasi Mobile berbasis Android & IOS 99
Bab IV Implementasi dan Pengujian
4.1 Implementasi 101
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 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
DAFTAR GAMBAR
Nomor
Gambar Nama Gambar Halaman
2.1 Xcode Maverick OS X Node.JS
Non Blocking Node.JS Flowchart Node.JS
Menambahkan Komponen Android SDK Ukuran Gambar Berdasarkan Density Diagram Ishikawa Masalah Penelitian Use case Diagram
Activity Diagram untuk penyampaian permasalahan baru Activity Diagram untuk penanganan permasalahan
Sequence Diagram untuk diagram untuk penyampaian
permasalahan baru
Sequence Diagram untuk diagram untuk penanganan
permasalahan
Flowchart Sistem Menu Pengguna (nasabah)
Flowchart penyampaian permasalahan mesin ATM & EDC
Flowchart cek status penyelesaian permasalahan mesin ATM & EDC
Flowchart menu utama staff
Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff
Flowchart Menu Admin
Flowchart Menu Admin untuk mengelola departemen
Flowchart Menu Adminuntuk mengelola data staff
Flowchart Menu Adminuntuk mengelola jenis permasalahan
Flowchart Menu Adminuntuk mengelola jenis permasalahan
Penggabungan dua gambar dengan Teknik CSS For Retina Display
Rancangan Tampilan Sub Menu
Rancangan Tampilan form laporkan permasalahan baru Rancangan Tampilan form cek status permasalahan Instalation Phonegap with Command Line / Terminal Hasil Project Android dari Phonegap Framework Project Android pada Eclipse
Hasil project IOS dari Phonegap Framework Project IOS pada Xcode
Class Diagram sistem yang dirancang
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
4.2
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 AndroidLandscape width 320px Tampilan System pada Nexus 4 potrait width 384px
Tampilan System pada Nexus 4Landscape width 600px Tampilan System pada IpadLandscape width 1024px
Tampilan System tanpa fitur auto responsive pada Iphone dan Crappy Android
Tampilan menu utama nasabahpada IOS(kiri) & Android(kanan) Tampilan halaman menu intro pada IOS(kanan) & Android(kiri) Tampilan halaman tentang pada IOS(kanan) & Android(kiri) Tampilan halaman produkpada 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 menuAndroid(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 loginstaff
Tampilan halaman dashboard aktivitas permasalahan Tampilan halaman direktori pegawai
Tampilan halaman profil staff
Tampilan halaman daftar permasalahan
Tampilan detail dan tindaklanjut permasalahan
DAFTAR LAMPIRAN
Halaman
A. Listing Program 127
