Perancangan Sistem Penyampaian Permasalahan Mesin ATM (Automated Teller Machine dan EDC (Electronic Data Capture) Berbasis Platform Menggunakan Phonegap Framework

(1)

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

(2)

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

(3)

(4)

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

(5)

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

(6)

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.

(7)

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

(8)

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

(9)

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.1.1 Analisis Masalah 23

3.1.2 Analisis Kebutuhan Sistem 24 3.1.2.1 Kebutuhan Fungsional 24 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

(10)

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.1 Hasil Penggunaan Teknik CSS For Retina Display 101 4.1.2 Hasil Penggunaan HTML 5 (Auto Responsive) 102 4.1.3 Hasil Perancangan Pengunaan Phonegap Framework 107 4.1.3.1 Hasil Rancangan Halaman Menu Utama Untuk Nasabah 107 4.1.3.2 Hasil Rancangan Halaman Menu Intro Untuk Nasabah 107 4.1.3.3 Hasil Rancangan Halaman Menu Tentang Untuk Nasabah 108 4.1.3.4 Hasil Rancangan Halaman Menu Produk Untuk Nasabah 108 4.1.3.5 Hasil Rancangan Halaman Menu Photo Untuk Nasabah 109 4.1.3.6 Hasil Rancangan Halaman Menu Saran/Info 109 4.1.3.7 Hasil Rancangan Halaman Menu Event Untuk Nasabah 110 4.1.3.8 Hasil Rancangan Halaman Menu Call Untuk Nasabah 110

(11)

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

(12)

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

(13)

DAFTAR GAMBAR

Nomor

Gambar Nama Gambar Halaman

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 3.25 3.26 3.27 3.28 4.1 Requirement PhoneGap PhoneGap Support 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 Admin untuk mengelola data staff

Flowchart Menu Admin untuk mengelola jenis permasalahan Flowchart Menu Admin untuk 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

10 11 12 15 16 17 19 22 23 26 28 30 31 33 35 36 37 39 41 43 44 45 46 48 50 56 57 59 60 61 61 62 63 86 90 95 102

(14)

4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10 4.11 4.12 4.13 4.14 4.15 4.16 4.17 4.18 4.19 4.20 4.21 4.22 4.23 4.24 4.25 4.26 4.27 4.28 4.29 4.30 4.31 4.32 4.33 4.34 4.35 4.36 4.37 4.38 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

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

(15)

DAFTAR LAMPIRAN

Halaman

A. Listing Program 127

(16)

Penulis

ABSTRAK

Kata Kunci: Phonegap Framework, Aplikasi Mobile, Solusi Layanan, Beberapa Platform Mobile

(17)

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

Keyword: Phonegap Framework, Mobile Application, Service Solution, Multiple Mobile Platform

(18)

BAB I

PENDAHULUAN

1.1 Latar Belakang

ATM (Automated Teller Machine) adalah sebuah alat elektronik yang memudahkan nasabah perbankan untuk mengambil uang dan mengecek rekening tabungan mereka tanpa perlu dilayani oleh seorang "teller" di Bank. Banyak ATM juga berfungsi untuk penyetoran (Electronic Data Capture) adalah mesin yang dapat digunakan oleh nasabah perbankan sebagai alat pembayaran elektronik (mesin gesek kartu ATM baik Debit ataupun Credit Card). Mesin EDC menggunakan teknologi wireless (GSM) dan fixed line (line telepon). Alat ini akan terhubung secara online dengan sistem jaringan bank.

ATM dan EDC 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). Penulis memiliki ide untuk merancang sebuah sistem pengaduan permasalahan mesin ATM & EDC berbasis mobile agar memudahkan pengguna dalam memberikan pengaduan permasalahan secara langsung.

Diperoleh sumber dari artikel sebuah Bank Swasta di Indonesia

(19)

disini bahwa ATM dan EDC merupakan fee based income yang besar pada perusahaan perbankan sehingga pelayanannya harus lebih ditingkatkan.

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. Salah satunya adalah teknologi smartphone atau telepon pintar yang dapat menyelesaikan aktivitas semaksimal mungkin dengan ketersediaan efisiensi waktu yang ada. Smartphone yang beredar juga beraneka ragam dan memiliki fitur dan kelebihan tersendiri. Sistem operasi untuk smartphone juga berbeda-beda. Sistem operasi yang beredar dan terkenal saat ini antara lain seperti IOS (Apple), Android (Google), Blackberry (Research In Motion), Windows Mobile (Microsoft). Di Indonesia pengguna Blackberry sangat banyak dikarenakan perangkat Blackberry menyediakan fitur social messenger yang terkenal yaitu Blackberry Messenger. Aplikasi Blackberry Messenger dulunya secara eksklusif hanya dapat digunakan oleh perangkat Blackberry namun sekarang pihak Blackberry memutuskan agar Blackberry Messenger dapat digunakan di platform lain yaitu platform android dan IOS. Keputusan tersebut berdampak terhadap pengguna perangkat Blackberry yang kemudian mulai beralih menggunakan perangkat Android dan IOS. Android dan IOS merupakan pesaing terberat Blackberry dalam industri mobile. Keputusan untuk menjadikan Blackberry Messenger cross-platform tentunya akan membuka peluang bisnis bagi perusahaan Apple (IOS) dan google (Android) untuk menarik perhatian pengguna Blackberry Messenger yang sekarang dapat memilih dengan bebas perangkat lainnya (IOS ataupun Android) tanpa harus menggunakan perangkat Blackberry untuk mendapatkan layanan Blackberry Messenger.

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

(20)

untuk mengembangkan sebuah aplikasi yang dapat berjalan di seluruh sistem operasi mobile.

Dalam penulisan ini, penulis memiliki ide bahwa ATM & EDC yang tersebar dibanyak titik tersebut, jika terjadi permasalahan, dapat langsung disampaikan menggunakan sebuah sistem (Mobile Application) yang dikembangkan menggunakan PhoneGap framework agar dapat digunakan pada semua sistem operasi mobile yang beredar dan terkenal saat ini (IOS dan Android). Sehingga nasabah dapat melaporkan kendala yang terjadi ketika bertransaksi pada mesin ATM ataupun EDC. Kemudian semua permasalahan mengenai kedua mesin tersebut akan langsung disampaikan langsung kepada pihak terkait pada perusahaan perbankan dalam bentuk notification (Alert) melalui sistem dan pihak perusahaan perbankan akan langsung menindaklanjuti permasalahan tersebut.

1.2 Perumusan Masalah

Berdasarkan latar belakang di atas, maka rumusan masalah yang dapat diambil adalah: 1. Bagaimana mengembangkan sebuah aplikasi berbasis mobile dengan sekali

pemograman untuk digunakan pada bermacam macam sistem operasi mobile (Android, IOS, dan lain sebagainya).

2. Bagaimana mengembangkan aplikasi mobile penyampaian permasalahan pada mesin ATM & EDC (berbasis client server).

1.3 Batasan Masalah

Agar pembahasan tidak terlalu meluas, penulis merasa perlu memberikan batasan serta rumusan permasalahan sebagai berikut :

1. Sistem ini hanya dibuat di jaringan local (intranet dan localhost) untuk database, server dan menggunakan Mac OS Maverick (XCode Compiler App) dan Eclipse Kepler dan Android SDK, ADT Plugin, Node.js dalam

(21)

pengembangannya. Sistem juga dibuat dengan HTML 5 untuk tampilan aplikasi auto responsive (menyesuaikan tampilan secara otomatis pada layar perangkat tempat aplikasi dijalankan).

2. Sistem ini dibuat dengan teknik CSS (Cascading Style Sheet) retina display untuk meningkatkan kualitas tampilan logo, icon ataupun gambar yang ada pada sistem, dimana jumlah pixel 2 kali lipat lebih banyak dan dirapatkan sehingga kualitas tampilan dan gambar lebih tajam.

3. Sistem ini dibuat mengunakan PhoneGap framework untuk menghasilkan mobile application multi platform (untuk sistem operasi mobile IOS ataupun Android) .

4. Sistem ini akan dikembangkan dan diimplementasikan, sehingga didapat perbandingan dari hasil implementasi penggunaan phonegap framework untuk membangun aplikasi mobile pada sistem operasi Android dan IOS yang ditampilkan pada simulator masing masing compiler dan juga perbandingan biaya untuk pengembangan aplikasi pada sistem operasi mobile (IOS & Android).

1.4 Tujuan Penelitian

Tujuan dari penelitian ini adalah :

1. Membuat aplikasi penyamapaian permasalahan mesin ATM & EDC untuk nasabah perbankan berbasis mobile menggunakan framework PhoneGap dengan sekali program agar aplikasi dapat berjalan di berbagai macam sistem operasi mobile.

2. Memudahkan dalam pengelolaan sistem permasalahan mesin ATM dan EDC berbasis client server.

(22)

1.5 Manfaat Penelitian

Manfaat dari penelitian ini adalah :

1. Penelitian ini diharapkan menghasilkan implementasi dan manfaat dalam pembuatan sistem berbasis mobile application multi platform menggunakan PhoneGap framework. Sehingga Mobile Application Developers lebih mudah untuk membuat dan mengembangkan aplikasi mobile untuk semua platform sistem operasi mobile (efektif dan efisien karena developer cukup memprogram satu kali untuk semua platform sistem operasi mobile).

2. Penelitian ini diharapkan menciptakan sebuah sistem pusat pelaporan permasalahan mesin ATM & EDC pada perusahaan perbankan. Sistem ini diharapkan menjadi service solution sehingga memenuhi kebutuhan dalam menjaga pelayanan mesin ATM & EDC pada suatu perusahaan perbankan sehingga pelayanan pada mesin ATM & EDC kepada nasabah semakin baik dan selalu terpenuhi. (berdampak pada fee based income pada perusahaan perbankan).

1.6 Metode Penelitian

Tahapan yang dilakukan dalam penelitian ini adalah: 1. Studi Literatur

Penelitian ini terlebih dahulu dipelajari litelatur yang didapat melalui buku, jurnal, artikel, makalah maupun situs internet yang membahas mengenai PhoneGap Framework, Client Server dalam Aplikasi mobile.

2. Analisis dan Perancangan Sistem

Dalam tahap ini akan dilakukan analisis terhadap masalah sesuai dengan batasan masalah dan tujuan yang akan dicapai dari pengujian penggunaan PhoneGap framework dalam sistem operasi Mobile (Android dan IOS). Setelah itu dilakukan perancangan diagram Ishikawa (fishbone/cause and effect diagram), flowchart, Unified Modeling Language (UML), antar muka dan perancangan sistem untuk mempermudah dalam pengembangan aplikasi.

(23)

3. Implementasi Sistem

Pada tahap ini dilakukan pengkodean (coding) dalam bahasa pemograman Java, HTML 5 dan PHP, dengan tujuan untuk menampilkan hasil dari perancangan sistem kepada user tentang pemanfaatan program.

4. Pengujian Sistem

Proses ini dilakukan setelah implementasi sistem dilakukan serta telah layak digunakan sehingga dilakukan pengujian sistem dan perbaikan sistem untuk hasil yang baik.

5. Dokumentasi

Dalam tahapan ini dilakukan penyusunan laporan dari hasil analisis dan perancangan sistem dalam format penulisan penelitian.

1.7 Sistematika Penulisan

Sistematika penulisan skripsi ini terdiri atas bagian-bagian berikut:

BAB I PENDAHULUAN

Bab ini menjelaskan latar belakang, rumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian, metodologi penelitian dan sistematikan penulisan dari skripsi ini.

BAB II LANDASAN TEORI

Bab ini menjelasakan landasan teori dari penelitian yang dilakukan. Teori yang diangkat yaitu ATM (Automatic Teller Machine), EDC (Electronic Data Capture), Phonegap Framework, Xcode, HTML 5, Node.JS, Eclipse, Android SDK, Teknik CSS (Cascading Style Sheet) for Retina Display.

BAB III ANALISIS DAN PERANCANGAN SISTEM

Pada bab ini akan dijelaskan mengenai perbandingan pengembangan Aplikasi mobile berbasis Android dengan IOS menggunakan PhoneGap Framework. Pada bab ini juga akan dijelaskan mengenai perancangan diagram Ishikawa (fishbone/cause and effect

(24)

diagram), flowchart, Unified Modeling Language (UML), antar muka dan perancangan sistem yang akan dibuat.

BAB IV IMPLEMENTASI SISTEM

Pada bab ini akan menguraikan hasil pengujian aplikasi penyampaian permasalahan mesin ATM & EDC berbasis IOS dan Android dengan PhoneGap Framework yang dapat dilihat dari sistem yang dibuat.

BAB V KESIMPULAN DAN SARAN

Bab ini berisi kesimpulan yang didapat dari hasil pengujian yang dilakukan serta saran-saran yang diberikan untuk penelitian selanjutnya.

(25)

BAB II

LANDASAN TEORI

2.1 ATM (Automatic Teller Machine)

ATM adalah sebuah alat elektronik yang mengijinkan nasabah perbankan untuk mengambil uang dan mengecek rekening tabungan mereka tanpa perlu dilayani oleh seorang "Teller" di Bank. Banyak ATM juga berfungsi untuk penyetoran transfer uang dan transaksi perbankan lainnya. Pada mulanya mesin pintar ini ditemukan oleh Don Wetzel, Vice President of Product Planning pada perusahaan Docutel. Konsep ATM pertama kali lahir pada tahun 1968, lalu prototipenya muncul setahun kemudian, dan akhirnya Ducotel mendaftarkannya pada Kantor paten pada tahun 1973.

Perusahaan Docutel membeli mesin ATM dari tiga orang pembuatnya, yaitu Don Wetzel, yang pada saat itu adalah seorang Vice President of Product Planning di Docutel, Tom Barnes (kepala mekanik) dan George Chastian, seorang insyinyur listrik. Ide awalnya berasal dari Wetzel, ketika mengantri di bank. Wetzel kerapkali merasa kesulitan ketika berurusan dengan bank yang harus selalu mengantri untuk satu layanan sebagai nasabah bank. Hingga akhirnya ketiga penemu ini menciptakan mesin ATM yang di Indonesia dikenal dengan istilah Anjungan Tunai Mandiri. Dan dana yang dihabiskan untuk sebuah mesin ATM pertama kali adalah sekitar lima juta dollar.

2.2 EDC (Electronic Data Capture)

EDC adalah mesin yang dapat digunakan oleh nasabah perbankan sebagai alat pembayaran elektronik (mesin gesek kartu ATM baik Debit ataupun Credit Card). Mesin EDC menggunakan teknologi wireless (GSM) dan fixed line (line telepon). Alat ini akan terhubung secara online dengan sistem jaringan bank. Istilah yang dipakai dalam EDC:

(26)

1. Magnetic Stripe adalah panel berwarna hitam yang berada pada sisi belakang Kartu, yang berisi data pemilik kartu

2. Chip adalah komponen elektronik yang memilki fungsi sama seperti magnetic stripe yang dirancang untuk menjalankan fungsi penyimpanan dan pemprosesan data

3. EMV singkatan dari Europay, MasterCard dan VISA, sebuah standar global untuk operasi IC (Integrated Circuit) Card atau umumnya disebut "kartu chip". IC Card ini dipakai pada terminal EDC untuk melakukan transaksi penjualan (POS) dan anjungan tunai mandiri (ATM), sebagai alat transaksi kartu kredit dan kartu debit.

4. Swipe adalah menggesekkan magnetic stripe yang ada pada kartu pada mesin EDC

5. Dip adalah memasukkan Chip kartu pada Chip Reader pada mesin EDC 6. Sales Slip/Sales Draft adalah kertas yang disediakan oleh Bank untuk

dipergunakan oleh Merchant pada saat mencetak data Transaksi Kartu dan berfungsi sebagai alat bukti bagi Merchant pada saat melakukan penagihan kepada Bank.

7. Void : Pembatalan transaksi

8. Settlement adalah proses penutupan transaksi oleh Merchant dengan pihak Bank melalui EDC agar Merchant dapat dibayar atas total jumlah transaksi dan pemegang kartu akan tertagih oleh bank.

9. Chargeback adalah penagihan/pembebanan kembali oleh Bank kepada Merchant atas tagihan yang telah dibayar oleh Bank kepada Merchant. 10.Merchant Discount Rate (MDR) adalah sejumlah/prosentase fee yang

diberikan oleh Merchant kepada Bank atas setiap transaksi yang dilakukan pada mesin edc.

Setelah Kartu digesekkan (Swipe atau dip) pada EDC, maka respon yang akan muncul pada layar EDC dapat berupa :

1. Approved: limit kredit cukup untuk transaksi dan transaksi disetujui 2. Decline: limit kredit tidak cukup untuk transaksi

3. Reffer / Please Call: perintah kepada Merchant untuk menghubungi Bagian Otorisasi Bank

(27)

4. Pick Up/Capture Card: perintah kepada Merchant untuk menahan Kartu

2.3 PhoneGap

PhoneGap adalah sebuah development framework yang berbasis standar open source yang dapat digunakan untuk membangun aplikasi-aplikasi mobile. Aplikasi yang dikembangkan dengan PhoneGap dapat dijalankan secara lintas platform. Hal ini dikarenakan development framework yang digunakan menggunakan bahasa scripting HTML, CSS dan JavaScript. PhoneGap memiliki slogan yang cukup bombastis yaitu Write Once. Compile in the cloud. Run Anywhere. Adapun Requirement pada PhoneGap Framework dapat dilihat pada gambar 2.1.

Gambar 2.1 : Requirement PhoneGap

PhoneGap SDK menyediakan sebuah API, yaitu sebuah lapisan abstrak yang menyediakan pengembang dengan akses ke fitur hardware dan platform tertentu. PhoneGap menjelaskan bahwa dengan kode yang sama dapat digunakan pada sejumlah platform mobile dengan sedikit perubahan koding ataupun tidak, yang membuat aplikasi kita dapat dipakai untuk kalangan pengguna yang lebih luas.

Berikut Platform platform yang sudah mendapat dukungan dari PhoneGap dapat dilihat pada gambar 2.2.

(28)

Gambar 2.2 : PhoneGap Support

2.4 Xcode

Xcode adalah sebuah suite of tools, yang dikembangkan oleh Apple, untuk mengembangkan software untuk platform Mac OS X dan iOS. Untuk menggunakan Xcode, tentunya kita harus menggunakan Mac OS X. Untuk mendownload Xcode, dapat didownload dari situs resmi developer Apple secara gratis di http://developer.apple.com/technologies/xcode.html.

Xcode adalah integrated development environment (IDE) yang berisi seperangkat alat pengembangan perangkat lunak yang dikembangkan oleh perusahaan Apple yang berfokus pada pengembangan perangkat lunak untuk OS X dan iOS. XCode itu sendiri pertama kali dirilis pada tahun 2003, perluncuran tersebut didukung dengan versi 4.6 terbaru dan tersedia Mac App Store secara gratis untuk Mac OS X Lion and OS X Mountain Lion. Aplikasi utama dari perangkat ini adalah integrated development environment (IDE), yang juga bernama Xcode. Xcode Suite juga mencakup sebagian besar pengembangan dokumentasi Apple, dan built-in Interface Builder, sebuah aplikasi yang digunakan untuk membangun graphic interface. Xcode juga mencakup versi modifikasi dari GNU Compiler Collection, di Xcode 3.1 dan llvm-gcc compiler dimana semua tersusun secara sistematis dalam file dan group. Hal pertama yang perlu kita ketahui adalah framework. Framework merupakan

(29)

perpustakaan yang berisi kode-kode untuk dibangun kedalam sebuah XCode, sama seperti class-class pada java, dan unit-unit VCL pada delphi. Adapun tampilan Compiler Xcode pada Maverick OS X dapat dilihat pada gambar 2.3.

Gambar 2.3 : Xcode Maverick OS X

2.5 HTML 5

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Banyak pengembangan website yang dibuat menggunakan HTML 5. HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG (Web Hypertext Application Technology Working Group). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML. Berikut tujuan dibuatnya HTML5 :

1. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript 2. Mengurangi kebutuhan untuk plugin eksternal (Seperti Flash)

3. Penanagan kesalahan yang lebih baik

4. Lebih markup untuk menggantikan scripting 5. HTML5 merupakan perangkat mandiri

(30)

6. Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

1. Unsur kanvas untuk menggambar

2. Video dan elemen audio untuk media pemutaran

3. Dukungan yang lebih baik untuk penyimpanan secara offline

4. Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section

5. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML 5. Pembuatan HTML 5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight. Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

data="flvplayer.swf?file=movies/holiday.flv"> <param name="movie"

value="flvplayer.swf?file=movies/holiday.flv" /> <param name="wmode" value="transparent" />

(31)

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini

data="data:application/x-silverlight-2," type="application/x-silverlight-2" > <param name="source"

value="SilverlightApplication1.xap"/> </object>

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita. Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut: http://html5test.com

Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet Explorer 9 dengan 138 point.

(32)

2.6 Node.JS

Node.js adalah platform yang dibangun atas JavaScript runtime Chrome untuk membuat aplikasi jaringan dengan peforma tinggi dan skalabel. Node.js menggunakan I/O model non-blocking serta event-driven, yang membuatnya ringan serta effisien, sehingga tepat untuk aplikasi data-intensive real-time yang berjalan di perangkat terdistribusi. Adapun tampilan halaman website node.js dapat dilihat pada gambar 2.4.

Gambar 2.4 : Node.js

Saat tulisan ini dibuat, banyak perusahaan besar telah menggunakan node.js sebagai platform dalam development aplikasi mereka. Salah satu diantaranya adalah LinkedIn, yang menggunakan node.js sebagai aplikasi server side untuk mendukung layanan mobile web serta mobile application mereka. Dua alasan utamanya adalah kemudahan melakukan scaling ke beberapa server dan performa yang sangat tinggi dari node.js. Kersen Informatika telah mengadopsi node.js sebagai background application untuk mendukung layanan Fleet Management serta GPS Tracking. Platform ini memungkinkan untuk membangun aplikasi yang memiliki performa tinggi untuk mendukung banyaknya kendaraan yang dikelola.

(33)

2.6.1 Model I/O Non-Blocking

Hal yang harus diperhatikan dalam development dengan node.js adalah sifat non-blocking dari platform ini. Untuk menjabarkan sifat non-non-blocking dapat dilihat pada gambar 2.5.

Ga mbar 2.5 : Non Blocking Node.js

Pada diagram alir diatas platform synchronous seperti PHP atau Java akan menampilkan “hasil query” setelah aplikasi selesai melakukan “query ke db“. Namun pada node.js, karena sifatnya non-blocking atau biasa juga dikenal sebagai asynchronous, aplikasi tidak akan menunggu hingga 50ms proses “query ke db” untuk menjalankan proses selanjutnya yaitu “tampilkan hasil query” sehingga hasil yang ditampilkan menjadi tidak benar. Untuk mengatasi hal ini, sifat event-driven dari node.js bisa dipergunakan, dimana secara explisit dinyatakan kepada proses “tampilkan hasil query” agar berjalan setelah ada aba – aba event selesai melakukan proses “query ke db“. Sifat asynchronous yang dijabarkan diatas banyak dipakai developer kelas dunia untuk membuat aplikasi berbasis node.js menjadi cepat dan berperforma tinggi. Dimana desain aplikasi mereka menjalankan banyak proses bersamaan secara paralel yang pada akhirnya menampilkan data tepat setelah mendapat aba – aba dari semua proses, seperti yang dijabarkan pada gambar 2.6 berikut.

(34)

Gambar 2.6 : Flowchart Node.js

Tiga query kecil dijalankan secara bersamaan dengan waktu eksekusi yang lebih cepat daripada satu query besar, sehingga total waktu yang dibutuhkan aplikasi untuk menampilkan hasil menjadi lebih singkat. Kesimpulan: Sifat non-blocking dan event driven adalah hal yang sangat mendasar dari node.js dan harus dijadikan pertimbangan dalam membuat aplikasi ringan dan berperforma tinggi dengan platform node.js.

2.7 Eclipse

Eclipse adalah sebuah IDE (Integrated Development Environment) untuk mengembangkan perangkat lunak dan dapat dijalankan di semua platform (platform-independent). Eclipse dikembangkan dengan bahasa pemrograman Java, akan tetapi Eclipse mendukung pengembangan aplikasi berbasis bahasa pemrograman lainnya, seperti C/C++, Cobol, Python, Perl, PHP, dan lain sebagainya. Selain sebagai IDE untuk pengembangan aplikasi, Eclipse pun bisa digunakan untuk aktivitas dalam siklus pengembangan perangkat lunak, seperti dokumentasi, test perangkat lunak, pengembangan web, dan lain sebagainya. Eclipse pada saat ini merupakan salah satu IDE favorit dikarenakan gratis dan open source, yang berarti setiap orang boleh melihat kode pemrograman perangkat lunak ini. Selain itu, kelebihan dari Eclipse yang membuatnya populer adalah kemampuannya untuk dapat dikembangkan oleh pengguna dengan komponen yang dinamakan plug-in.

Untuk menginstall Android SDK pada eclipse, silahkan mengunjungi alamat

(35)

sistem operasi yang digunakan. Jika menggunakan GNU/Linux, caranya adalah sebagai berikut :

martinus@martinusadyh:[~]$ wget -c

http://dl.google.com/android/android-sdk_r06-linux_86.tgz --2010-08-29 05:23:06--

http://dl.google.com/android/android-sdk_r06-linux_86.tgz Resolving dl.google.com... 64.233.181.190, 64.233.181.91, 64.233.181.93, ... Connecting to

dl.google.com|64.233.181.190|:80... connected. HTTP request sent, awaiting response... 200 OK Length:

16971139 (16M) [application/x-tar] Saving to: `android-sdk_r06-linux_86.tgz'

100%[==================================================== ========================================================= ===================>] 16,971,139 73.5K/s in 4m 16s 2010-08-29 05:27:23 (64.8 KB/s) -

`android-sdk_r06-linux_86.tgz' saved [16971139/16971139] martinus@martinusadyh:[~]$

Proses download sudah selesai, sekarang ekstrak pada direktori yang diinginkan (jika menggunakan windows bisa diekstrak pada C:\> atau /home/[nama-user] jika menggunakan GNU/Linux) yang nantinya akan membuat sebuah direktori seperti C:\android-sdk-windows_86 di Windows atau /home/[nama-user]/android-sdk-linux_86 jika menggunakan GNU/Linux. Jika proses ekstrak sudah selesai, sekarang downloadlah Android Component dengan cara masuklah pada direktori /home/[nama-user]/android-sdk-linux_86/tools melalui terminal dan jalankan perintah android seperti dibawah ini :

martinus@martinusadyh:[~]$ cd android-sdk-linux_86/tools/ martinus@martinusadyh:[~/android-sdk-linux_86/tools]$ android Starting Android SDK and AVD Manager No command

(36)

line parameters provided, launching UI. See 'android --help' for operations from the command line.

Setelah kita mengetikkan android pada terminal, maka tidak lama akan muncul Android SDK and AVD Manager. Untuk menginstall dan menambahkan komponen, sekarang pilihlah menu Available Packages dan pilihlah semua opsi yang terdapat pada menu sebelah kanan seperti gambar 2.7.

Gambar 2.7 : Menambahkan komponen Android SDK

2.8 Teknik CSS (Cascading Style Sheet) for Retina Display

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam

seperti style, misalnya heading,

subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas tampilan halaman web yang dibuat dengan

(37)

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warn antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

CSS 3 adalah versi beberapa 3 dan tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun. CSS 3 memiliki beberapa fitur baru, seperti:

1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis

2. Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap".

3. Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts".

Zaman sekarang banyak orang menggunakan perangkat yang sangat portabel untuk bekerja. CSS adalah alat yang mengatur konten suatu aplikasi, yang memudahkan pengguna dalam menggunakan aplikasi mobile. Teknik Retina Display pertama kali diperkenalkan oleh perusahaan Apple dengan produk mobile yang menggunakan layar ganda kepadatan pixel, menciptakan gambar yang lebih tajam pada layar yang lebih kecil. Produsen perangkat lain juga mengikuti dengan versi mereka sendiri dengan layar kepadatan pixel tinggi. Sehingga tidak diragukan lagi keuntungan bagi konsumen dan pengguna aplikasi. Ini menjadi tantangan untuk web developer dan desainer untuk membuat website dan aplikasi mereka kompatibel dengan Retina Display tersebut. Saat ini para pengembang aplikasi berusaha untuk membuat tampilan yang lebih hidup dan dinamis dalam aplikasi khususnya aplikasi mobile.

(38)

Smartphone ataupun tablet PC memiliki karakteristik full layout dimana website ditampilkan sesuai dengan ukuran layar perangkat dengan kemampuan zoom-in & zoom-out yang mudah. Sebenarnya jika website kita sudah Responsive, hal tersebut tidak akan menjadi masalah. Tetapi karena Smartphone dan tablet PC sekarang kebanyakan memiliki resolusi yang tinggi (Retina Display), maka website yang dioptimalkan untuk layar monitor juga dapat ditampilkan dengan tajam dan teksnya tetap enak dilihat. Hanya saja kadang-kadang kita menemukan beberapa permasalahan kecil pada layout website yang umum terjadi apabila kita membuka website kita di perangkat Mobile.

Viewport merupakan attribut baru untuk tag <meta> yang berguna untuk mengatur bidang tampilan layar (viewport). Dengan menambahkan tag ini di <head> akan membuat layar Mobile Device menampilkan seluruh tampilan layout full. Kodenya seperti ini:

Apple pertama kali memperkenalkan layar dengan kualitas kerapatan 2 kali lipat pada tahun 2010 ketika peluncuran iPhone 4 dengan istilah Retina Display. Dimana jumlah pixel 2 kali lipat lebih banyak dan dirapatkan sehingga kualitas teks dan gambar lebih tajam. Jika layar ini membuka image di website terutama icon yang ukurannya kecil atau logo, maka logonya akan buram (Blur). Karena gambar kita tidak dioptimalkan untuk Retina Display, kita harus membuat logo yang sama dengan ukuran 2 kali lipat logo biasa dan ditampilkan dalam ukuran logo biasa. Misal logo website kita ukurannya 100×50 pixel dengan file logo.png dan kita mempunyai logo lain dengan nama file logo-retina.png yang ukurannya 2x lipat yaitu 200×100 pixel. Jika kita memanggil logo-retina.png dan menampilkannya dalam ukuran 100×50 pixel maka kita akan memiliki logo yang lebih tajam dan jelas ketika dibuka di layar perangkat mobile dengan Retina Display atau HiDPI. Adapun kodenya seperti ini:

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),

only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {

(39)

#logo {

width:100px; height:50px;

} }

<img src="logo-retina.png" width="100" height="50" /> $('img[data-retina]').retina({checkIfImageExists: true}); <img src="logo.png" data-retina="logo-retina.png"

id="logo" />

Sekarang bagaimana membuat background pada CSS menjadi Retina Display dengan menggunakan Media Query. Hasil ukuran gambar berdasarkan density dapat dilihat pada gambar 2.8.

body {

width:100px; height:50px;

background:url(background.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),

only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {

body {

background:url(background-retina.png); background-size:100px 50px;

} }

(40)

BAB III

ANALISIS DAN PERANCANGAN

3.1 Analisis Sistem

Analisis sistem merupakan tahapan yang bertujuan memberikan pemahaman yang jelas terhadap sistem yang akan dibangun sehingga diperoleh gambaran tugas-tugas yang akan dikerjakan sistem.

3.1.1 Analisis Masalah

Aplikasi yang dikembangkan adalah aplikasi penyampaian permasalahan mesin ATM & EDC berbasis mobile yang nantinya akan digunakan untuk nasabah perusahaan perbankan. Saat ini banyak jenis sistem operasi mobile yang digunakan oleh kebanyakan smartphone. Sistem operasi mobile yang terkenal saat ini adalah Android dan IOS. Perkembangan sistem operasi mobile yang bermacam-macam tersebut menjadi masalah bagi para developer mobile application untuk memprogram aplikasi mobile mereka agar support dengan berbagai macam sistem operasi mobile tersebut. Masalah penelitian ini secara umum ditunjukkan pada gambar 3.1 yaitu diagram Ishikawa (fishbone/cause and effect diagram).

(41)

Sistem penyampaian permasalahan mesin ATM & EDC ini dimodelkan dengan menggunakan Unified Modeling Language (UML). Sistem yang akan dibangun menggunakan PhoneGap Framework yang memudahkan pengembangan sistem tersebut dapat mendukung dalam berbagai platform sistem operasi mobile yang dalam hal ini sistem akan dikembangkan untuk perangkat Android dan IOS.

Dalam Model UML ini akan digambarkan beberapa pemodelan dari sistem yang akan dibangun. Dari pemodelan requirement, pemodelan Analysis dan pemodelan Design. Tool yang digunakan untuk menggambarkan model UML adalah Visual Paradigma for UML Community edition.

3.1.2 Analisis Kebutuhan Sistem

Analisis kebutuhan sebuah sistem terdiri dari dua bagian yaitu kebutuhan fungsional dan kebutuhan nonfungsional.

3.1.2.1Kebutuhan Fungsional

Kebutuhan fungsional dibutuhkan untuk mengetahui hal-hal yang bisa dikerjakan oleh sistem. Kebutuhan fungsional sistem yang akan dirancang antara lain sebagai berikut: 1. Sistem harus berbasis client server agar dapat diakses oleh seluruh nasabah

perbankan yang nantinya akan digunakan untuk menyampaikan permasalahan mesin ATM & EDC.

2. Sistem haarus menyediakan SMTP (Server Mail Transfer Protocol) yang digunakan sebagai sarana notifikasi (Linking with mobile Application).

3. Sistem terdapat 2 fungsi utama client yaitu : fungsi untuk menyampaikan permasalahan mesin ATM & EDC, funsgi untuk tracking permasalahan mesin ATM & EDC (permasalahan yang sudah pernah disampaikan).

4. Sistem dapat melakukan filter/mengkategorikan jenis permasalahan yang disampaikan berdasarkan form yang telah diisi oleh pengguna (nasabah). Untuk permasalahan ATM akan disampaikan ke Pihak ATM dan permasalahan EDC akan disampaikan ke pihak EDC.

5. Sistem dapat menyediakan informasi progress penyelesaian kepada pengguna(nasabah), nasabah dapat memmberikan informasi tambahan pada permasalahan yang telah disampaikan sebelumnya.

(42)

3.1.2.2Kebutuhan Nonfungsional

Untuk mendukung kinerja sistem, sistem sebaiknya dapat berfungsi sebagai berikut:

1. Perangkat lunak yang dibangun harus responsive menyesuaikan dengan ukuran perangkat pengguna mobile dan tablet (tempat aplikasi berjalan).

2. Perangkat lunak yang akan dibangun sederhana agar mudah digunakan.

3. Tampilan antarmuka sistem dapat dengan mudah dimengerti oleh pengguna sistem.

4. Tampilan antarmuka dibangun dengan teknik CSS (Cascading Style Sheet) for retina display agar tampilan antarmuka lebih jelas dan tajam.

5. Perangkat lunak yang dibangun akan menampilkan pesan error untuk setiap input yang tidak sesuai.

Proses pada tahap pengujian akan menggunakan simulator masing-masing sistem operasi mobile (Android, IOS). Simulator yang digunakan adalah simulator yang dihubungkan dengan compiler masing-masing sistem operasi.

Analisis sistem dilakukan untuk memperoleh gambaran yang lebih jelas tentang objek apa saja yang akan berinteraksi dengan sistem serta hal-hal apa saja yang harus dilakukan oleh sebuah sistem sehingga sistem dapat berfungsi dengan baik sesuai dengan fungsionalitasnya.

Aktor yang berinteraksi dengan sistem ini adalah user yang terdiri atas dua jenis yaitu admin(staff) dan user (nasabah). Sesuai dengan analisis fungsional, maka digambarkan diagram use-case seperti gambar 3.2.

(43)

Gambar 3.2 Use case Diagram

(44)

1. Sistem memiliki 3 aktor yang berhubungan dengan fungsi-fungsi sistem, yaitu Admin, User (Nasabah) dan Staff. Admin memiliki autentikasi untuk menambahkan, menghapus, dan mengubah data pegawai dan departemen. Admin juga dapat mengecek system log untuk analisa setiap error yang terjadi pada sistem. Sedangkan Staff dapat melihat laporan permasalahan, memiliki autentikasi untuk melihat direktori pegawai dan dan dapat menambah, mengubah serta menghapus dan memberi komentar terhadap permasalahan yang disampaikan oleh user (nasabah). User (nasabah) dapat memberikan permasalahan terkait mesin ATM & EDC dan dapat melihat progress penyelesaian dari permasalahan yang telah disampaikan.

2. Sistem memiliki fungsi, adapun fungsi tersebut adalah sebagai berikut : 1) Fungsi penyampaian permasalahan mesin ATM & EDC

Fungsi ini digunakan untuk menerima semua permasalahan yang diinput oleh User (nasabah) untuk dimasukkan kedalam database 2) Fungsi check status permasalahan

Fungsi ini digunakan oleh user (nasabah) untuk memeriksa progress dari permasalahan yang telah disampaikan oleh user (nasabah) tersebut.

3) Fungsi check login staff atau admin (level akses)

Fungsi ini digunakan untuk memeriksa staff ataupun admin yang akan masuk ke dalam menu utama anggota. Anggota dibagi menjadi dua : admin dan staff.

4) Fungsi menampilkan permasalahan berdasarkan kategori

Funsgi ini digunakan untuk menampilkan data permasalahan berdasarkan kategori. Halaman ini hanya dapat diakses oleh anggota (admin dan staff) untuk melihat permasalahan yang ditugaskan kepadanya. Adapun kategori permasalahan tersebut dibagi menjadi 4:

a) Permasalahan dalam penyelesaian (Open) b) Permasalahan yang terlambat diselesaikan c) Permasalahan yang telah diselesaikan (Closed) 5) Fungsi untuk menambahkan Staff

(45)

Fungsi ini digunakan admin untuk menambahkan staff. Staff tersebut bertugas sebagai penanggung jawab dalam permasalahan yang telah disampaikan oleh user (nasabah).

6) Fungsi untuk menghapus, mengubah status permasalahan

Fungsi ini digunakan oleh staff untuk mengubah data permasalahan dan status permasalahan secara langsung dan dapat menghapus permasalahan tersebut.

7) Fungsi menambahkan keterangan tambahan pada permasalahan

Fungsi ini digunakan oleh staff dan user (nasabah) dalam berkomunikasi. Staff ataupun user (nasabah) dapat memberikan komentar dan keterangan tambahan yang bertujuan untuk mempermudah dalam penyelesaian masalah tersebut.

3.1.3 Activity Diagram yang berjalan

Activity Diagram ini untuk menggambarkan tata urutan proses aliran aktifitas yang terdapat pada proses komunikasi antara dua pihak yaitu User (nasabah) dan operator. Dapat juga digunkan untuk memodelkan action yang akan dilakukan saat sebuah operasi dijalankan dan memodelkan hasil dari action tersebut.

3.1.3.1 Activity Diagram untuk penyampaian permasalahan baru

(46)

Berdasarkan gambar 3.3 Activity Diagram untuk penyampaian permasalahan baru terdapat :

1. 1 Initial Node, sebagai objek yang diawal

2. 10 action state dari sistem yang mencerminkan eksekusi dari suatu aksi diantaranya: Akses aplikasi dan pilih menu Saran/Info, Sistem akan menampilkan halaman penyampaian permasalahan, User memilih menu laporkan permasalahan baru, Sistem menampilkan form penyampaian permasalahan baru, User menginput jawaban dari pertanyaan pada form dan user memilih jenis permasalahan, Submit, sistem akan melakukan validasi dan menyimpan data kedalam database, sistem akan melakukan generate email kepada pelapor dan staff berupa rincian permasalahan sebagai notifikasi, pelapor akan mendapatkan email pemberitahuan, staff juga akan mendapatkan email pemberitahuan.

(47)

3.1.3.2Activity Diagram untuk penanganan permasalahan

Gambar 3.4 Activity Diagram untuk penanganan permasalahan

Berdasarkan gambar 3.4 Activity Diagram untuk penangan permasalahan terdapat: 1. 1 Initial Node, sebagai objek yang diawal.

2. 1 Decision Node dari sistem yang menggambarkan kondisi pada proses login. 3. 15 Action State dari sistem yang menggambarkan eksekusi dari suatu aksi

diantaranya, masuk ke halaman staff panel, sistem akan menampilkan halaman staff dan form login, staff melakukan login (menginputkan username dan password), Sistem akan mengecek username dan password kedalam database, jika gagal sistem akan menampilkan pesan maaf gagal login kepada staff , jika berhasil login maka sistem akan mengambil data permasalahan terkait dengan staff yang sedang login, tampil semua daftar permasalahan, staff memilih permasalahan yang akan ditindaklanjuti, sistem akan menampilkan rincian

(48)

permasalahan yang ingin ditindaklanjuti oleh staff, staff memilih aksi tindaklanjut, sistem akan menyimpan aksi tindaklanjut kedalam database, sistem akan melakukan generate email yang berisikan rincian permasalahan dan mengirimkan email kepada staff dan user(pelapor) terkait dengan masalah tersebut, staff mendapatkan email sebagai notifikasi, user(nasabah) mendapatkan email sebagai notifikasi.

4. 1 Final State, sebagai objek yang diakhiri.

3.1.4 Sequence Diagram sistemyang berjalan

Dari keterangan diatas dapat digambarkan dengan sequence diagram mengenai informasi sistem yang berjalan saat ini, sehingga dengan diagram ini dapat menggambarkan pergerakan sebuah objek dan pesan yang terjadi di dalam sistem penyampaian informasi.

3.1.4.1Sequence Diagram untuk penyampaian permasalahan baru

Gambar 3.5 Sequence Diagram untuk diagram untuk penyampaian permasalahan baru

(49)

Berdasarkan gambar 3.5 Sequence Diagram penyampaian permasalahan baru, terdapat:

1. 1 Actor yaitu user (nasabah)

2. 3 boundary lifeline, yaitu halaman permasalahan baru, form permasalahan, halaman utama.

3. 2 control lifeline untuk control form permasalahan, server generate email. 4. 1 entity lifeline yaitu sistem menginput data kedalam database.

5. 8 message yang ada dalam sistem tersebut.

a) 1 message yang dilakukan oleh user (nasabah) pada menu utama yaitu pilihan menu dan kemudian akan dilanjutkan ke form pelaporan permasalahan

b) 1 message yang dilakukan oleh user (nasabah) pada form pelaporan permasalahan baru yaitu input data-data terkait dengan permasalahan. Kemudian diteruskan ke control form permasalahan.

c) 1 message yang dilakukan oleh form permasalahan yaitu menyampaikan data yang diinputkan kedalam control form permasalahan (agar dilakukan validasi dari data yang telah diinput oleh user)

d) 1 combined fragment yang berisikan dua message. Jika data valid maka akan dilanjutkan sistem menyimpan data kedalam database dan jika data tidak valid maka akan diarahkan ke menu form.

e) 1 message yang dilakukan sistem penyimpanan data kedalam database yaitu server melakukan generate email untuk mengirimkan email sebagai notifikasi kepada staff dan user(nasabah).

f) 1 message dari proses server generate email yaitu permasalahan berhasil diinput pada form permasalahan.

g) 1 message yang dilakukan sistem penyimpanan data kedalam database yaitu mengarahkan ke menu utama (halaman utama).

(50)

3.1.4.2Sequence Diagram untuk penanganan permasalahan

Gambar 3.6 Sequence Diagram untuk diagram untuk penanganan permasalahan

Berdasarkan gambar 3.6 sequence diagram untuk penanganan permasalahan, terdapat :

1. 1 Actor yaitu staff

2. 4 boundary lifeline, yaitu halaman staff, form login staff, daftar permasalahan, rincian permasalahan.

3. 3 control lifeline, yaitu control login staff, permasalahan ditindaklanjuti, aksi tindaklanjut.

4. 1 entity lifeline, yaitu menyimpan data aksi kedalam database. 5. 11 message yang ada di dalam sistem.

a) 1 message yang dilakukan oleh actor(staff) yaitu mengakses halaman staff.

b) 1 message yang dilakukan oleh halaman staff yaitu menampilkan form login.

c) 1 message yang dilakukan oleh actor(staff) yaitu menginput login data(username dan password) pada form login.

d) 1 message yang dilakukan oleh form login yaitu menyampaikan data login kepada control login(untuk validasi data login).

(51)

e) 1 combined fragment yang berisikan dua message. Jika data login valid maka akan dilanjutkan proses tampil daftar permasalahan dan jika data tidak valid maka akan diarahkan ke form login.

f) 1 message yang dilakukan oleh staff adalah memilih permasalahan yang akan ditindaklanjuti.

g) 1 message yang dilakukan pada permasalahan yang ditindaklanjuti adalah menampilkan rincian permasalahan dan pilihan aksi tindaklanjut.

h) 1 message yang dilakukan pada rincian permasalahan yaitu proses tindaklanjut permasalahan

i) 1 message yang dilakukan pada proses tindaklanjut permasalahan yaitu menyimpan aksi tindaklanjut permasalahan kedalam database.

j) 1 message yang dilakukakan pada proses penyimpanan database yaitu tampil pesan berhasil disimpan pada rincian permasalahan.

3.2 Perancangan Sistem

Berdasarkan gambaran dari hasil analisis proses maka dibangun suatu model rancangan flowchart sistem dan juga rancangan antar muka sistem.

(52)

3.2.1 Flowchart Sistem

(53)

Keterangan :

Pada gambar 3.7 dapat dilihat sebuah flowchart sistem menu pengguna secara detail. Pengguna akan memilih menu pada sistem.

3.2.1.1 Flowchart Penyampaian permasalahan mesin ATM & EDC

Gambar 3.8 Flowchart penyampaian permasalahan mesin ATM & EDC

Keterangan :

Pada gambar 3.8 digambarkan sebuah flowchart alur kerja sistem dalam menerima permasalahan yang diinputkan oleh nasabah. Sistem akan melakukan generate email yang berisikan penjelasan permasalahan secara singkat dan melakukan penomoran

(54)

pada permasalahan tersebut. Penomoran ini dapat digunakan oleh nasabah dalam melihat progress dari penyelesaian permasalahan yang sudah disampaikan tersebut.

3.2.1.2 Flowchart cek status penyelesaian permasalahan mesin ATM & EDC

Gambar 3.9 Flowchart cek status penyelesaian permasalahan mesin ATM & EDC

Keterangan :

Pada gambar 3.9 dijelaskan proses untuk melihat status penyelesaian permasalahan mesin ATM & EDC. Nasabah dapat menginputkan email beserta dengan nomor

(55)

permasalahan yang telah dikirimkan oleh system ke email nasabah (pelapor) tersebut. Setelah nasabah menginputkan data pada form yang tersedia, System akan melakukan validasi kedalam database. Jika email dan nomor permasalahan yang diinputkan benar, maka akan menampilkan semua data permasalahan yang dikirimkan oleh nasabah tersebut. Nasabah dapat memberikan keterangan tambahan ataupun komentar terkait dengan permasalahan tersebut, yang nantinya keterangan yang diberikan nasabah tersebut juga dapat memudahkan staff dalam menindaklanjuti dan menyelesaikan permasalahan tersebut.

(56)

3.2.1.3 Flowchart menu utama staff .

(57)

Keterangan :

Pada gambar 3.10 dijelaskan menu utama staff secara detail. Staff yang ingin melihat semua permasalahan dan menu lainnya dapat melakukan login terlebih dahulu. Setelah berhasil login, staff akan masuk kedalam dashboard dan menindaklanjuti permasalahan yang masuk kedalam sistem.

(58)

3.2.1.4 Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff.

(59)

Keterangan :

Pada gambar 3.11 dijelaskan mekanisme untuk menindaklanjuti permasalahan secara detail. Staff melakukan login dan kemudian melihat daftar permasalahan sesuai dengan kategori permasalahan. Staff melakukan aksi tindaklanjut seperti tandai permasalahan telah selesai, ubah data permasalahan, melakukan postingan atau keterangan tambahan dan menghapus permasalahan. Semua perubahan data akan dimasukkan kedalam database dan sistem akan generate email yang berisikan laporan perubahan dan email tersebut akan dikirimkan kepada pelapor permasalahan dan staff sebagai notifikasi.

(60)

3.2.1.5 FlowchartMenu Utama Admin

(61)

Keterangan :

Pada gambar 3.12 dijelaskan mengenai Menu Utama Admin . Admin dapat masuk melalui halaman Admin dan melakukan login. Setelah berhasil melakukan login, Admin dapat melihat system logs. System Logs berfungsi untuk mencatat aktivitas system baik itu berupa error system ataupun pengubahan system. Admin dapat menambahkan, menghapus, dan mengedit

3.2.1.6 FlowchartMenu Adminuntuk mengelola data departemen

(62)

Keterangan :

Pada gambar 3.13 dijelaskan mengenai Menu Admin untuk mengelola departemen. Admin dapat masuk melalui halaman Admin dan melakukan login setelah itu masuk ke menu departemen. Admin dapat mengubah, menambahkan dan menghapus data departemen melalui halaman tersebut.

3.2.1.7 FlowchartMenu Adminuntuk mengelola data staff

(63)

Keterangan :

Pada gambar 3.14 dijelaskan mengenai Menu Admin untuk mengelola data staff. Admin dapat masuk melalui halaman Admin dan melakukan login setelah itu masuk ke menu staff. Admin dapat mengubah, menambahkan dan menghapus data staff melalui halaman tersebut.

3.2.1.8 FlowchartMenu Adminuntuk mengelola jenis permasalahan

(64)

Keterangan :

Pada gambar 3.15 dijelaskan mengenai Menu Admin untuk mengelola jenis permasalahan. Admin dapat masuk melalui halaman Admin dan melakukan login setelah itu masuk ke menu jenis permasalahan. Admin dapat mengubah, menambahkan dan menghapus data jenis permasalahan melalui halaman tersebut.

3.2.2 Rancangan Antar Muka

Untuk rancangan antar muka dari sistem yang akan dibangun menggunakan bahasa pemograman HTML 5, CSS, Javascript dan PHP. Sistem akan dibangun menggunakan compiler Eclipse dengan Android SDK dan Xcode. HTML 5 digunakan untuk menampilkan antar muka yang responsive (menyesuaikan dengan display perangkat, tempat aplikasi berjalan). Antar muka menggunakan 1 Menu Utama dan 1 Sub Menu Utama, yaitu sebagai berikut:

Menu Utama

1.1Intro (Menjelaskan mengenai manfaat aplikasi) 1.2Tentang (Menjelaskan mengenai pembuat aplikasi) 1.3Produk (Menjelaskan mengenai produk perbankan) 1.4Event (Menjelaskan mengenai kegiatan perbankan)

1.5 Saran/Info (Sistem penyampaian permasalahan mesin ATM & EDC ) 1.5.1 Sub Menu Utama

1.5.2 Cek Status Penyelesaian 1.5.3 Laporkan permasalahan baru 1.5.4 Kembali

1.6Photo (Berisi mengenai gallery perbankan)

1.7Call (Perintah untuk melakukan panggilan ke no perbankan) 1.8Text (Perintah untuk melakukan SMS /Kotak Saran)

(65)

3.2.2.1Antar Muka Menu Utama

Gambar 3.16 Rancangan Tampilan Menu Utama di IOS 6.1 dan Android 4.2

Keterangan Gambar 3.16 Tampilan menu utama berisikan icon dan akan mengarahkan ke sub menu. Tampilan utama menggunakan system auto responsive yang mana akan menyesuaikan dengan ukuran layar atau display. System ini juga dibuat menggunakan Teknik CSS for Retina Display yang meningkatkan ketajaman content dengan kerapatan dua kali lipat. Berikut akan dijelaskan mengenai script yang digunakan untuk Teknik CSS for Retina Display dan penggunaan HTML 5 untuk tampilan yang responsive.

a) Teknik CSS For Retina Display

Berikut potongan script yang digunakan untuk menghasilkan ketajaman pada content gambar sebagai berikut:

function highdpi_init() {

if(jQuery('.replace-2x').css('font-size')== "1px") { var els = jQuery(".replace-2x").get();

for(var i = 0; i < els.length; i++) { var src = els[i].src

src = src.replace(".png", "@2x.png"); els[i].src = src;

(66)

} }

}

jQuery(document).ready(function() { highdpi_init();

});

@media all and (-webkit-min-device-pixel-ratio:2) {

.nav-logo{

background-image:url(../images/logo/mandiri@2x.png);

-webkit-background-size: 148px 70px;}

.nav-home{

background-image:url(../images/navigation/home@2x.png);

-webkit-background-size: 51px 51px;}

.nav-about{

background-image:url(../images/navigation/about@2x.png);

-webkit-background-size: 51px 51px;} .nav-features{

background-image:url(../images/navigation/features@2x.png); -webkit-background-size: 51px 51px;}

.nav-portfolio{

background-image:url(../images/navigation/folio@2x.png);

-webkit-background-size: 51px 51px;}

.nav-videos{

background-image:url(../images/navigation/video@2x.png);

-webkit-background-size: 51px 51px;}

.nav-blog{

background-image:url(../images/navigation/blog@2x.png);

-webkit-background-size: 51px 51px;}

.nav-mobile{

background-image:url(../images/navigation/phone@2x.png);

(67)

.nav-sms{

background-image:url(../images/navigation/chat@2x.png);

-webkit-background-size: 51px 51px;}

.nav-mail{

background-image:url(../images/navigation/mail@2x.png);

-webkit-background-size: 51px 51px;} .icon-heading{

background-image:url(../images/navigation/heading@2x.png);

-webkit-background-size: 20px 20px;} .deploy-share{

background-image:url(../images/navigation/go-home@2x.png);

-webkit-background-size:16px 16px;} .deploy-menu{

background-image:url(../images/navigation/nav-deploy@2x.png);

-webkit-background-size:16px 16px;}

Diatas merupakan potongan script untuk membuat tampilan konten gambar lebih tajam dan jelas dengan menggunakan teknik CSS For Retina Display. Pada contoh penulis mengambil potongan script yang dicetak tebal diatas yaitu:

mandiri@2x.png ini merupakan sebuah gambar yang berformat .PNG (Portable

Network Graphics) yang digunakan oleh aplikasi untuk menampilkan logo. Mandiri.png tersebut akan dua kali dirapatkan dari ukuran yang semula sehingga system harus menemukan sebuah gambar misalnya mandiri.png (Dimensi pixel: 148 X 67) maka harus terdapat gambar yang kedua dengan nama gambar mandiri@2x.png (Dimensi pixel: 296 X 134). Dimensi gambar yang kedua harus dua kali lipat dari gambar yang pertama. Sistem akan membaca kedua gambar dan menggabungkan kedua gambar tersebut sehingga tampilan gambar lebih jelas dan tajam. Adapun model teknik penggabungan gambar pada CSS For Retina Display dapat dilihat pada gambar 3.17

(1)

</span> </p>

</form>

ajax.content.php

<?php

if(!defined('INCLUDE_DIR')) die('!');

class ContentAjaxAPI extends AjaxController { function log($id) {

if($id && ($log=Log::lookup($id))) { $content=sprintf('<div

style="width:500px;"> <strong>%s</strong><br><p style="white-space:pre-line;">%s</p> <hr><strong>Log Date:</strong>

<em>%s</em> <strong>IP Address:</strong> <em>%s</em></div>',

$log->getTitle(),

Format::display(str_replace(',',', ',$log->getText())),

Format::db_daydatetime($log->getCreateDate()),

$log->getIP()); }else {

$content='<div

style="width:295px;"> <strong>Error:</strong>Unknown or invalid log ID</div>';

}

return $content; }

function ticket_variables() { $content='

(2)

Please note that non-base variables depend on the context of use. Visit osTicket Wiki for up-to-date documentation.

<br/>

<tr><td width="55%" valign="top"><b>Base

Variables</b></td><td><b>Other Variables</b></td></tr> <tr>

<tr><td

width="130">%{ticket.id}</td><td>Ticket ID (internal ID)</td></tr>

<tr><td>%{ticket.number}</td><td>Ticket number (external ID)</td></tr>

<tr><td>%{ticket.email}</td><td>Email address</td></tr>

<tr><td>%{ticket.name}</td><td>Full name —

<em>see name expansion</em></td></tr>

<tr><td>%{ticket.subject}</td><td>Subject</td></tr>

<tr><td>%{ticket.phone}</td><td>Phone number | ext</td></tr>

<tr><td>%{ticket.status}</td><td>Status</td></tr>

<tr><td>%{ticket.priority}</td><td>Priority</td></tr>

<tr><td>%{ticket.assigned}</td><td>Assigned staff and/or team</td></tr>

<tr><td>%{ticket.create_date}</td><td>Date created</td></tr>

<tr><td>%{ticket.due_date}</td><td>Due date</td></tr>

<tr><td>%{ticket.close_date}</td><td>Date closed</td></tr>

<tr><td>%{ticket.auth_token}</td><td>Auth. token used for auto-login</td></tr>

<tr><td>%{ticket.client_link}</td><td>Client\'s ticket view link</td></tr>

(3)

<tr><td>%{ticket.staff_link}</td><td>Staff\'s ticket view link</td></tr>

<tr><td colspan="2"

style="padding:5px 0 5px 0;"><em>Expandable Variables (See Wiki)</em></td></tr>

<tr><td>%{ticket.<b>topic</b>}</td><td>Help topic</td></tr>

<tr><td>%{ticket.<b>dept</b>}</td><td>Department</td></tr >

<tr><td>%{ticket.<b>staff</b>}</td><td>Assigned/closing staff</td></tr>

<tr><td>%{ticket.<b>team</b>}</td><td>Assigned/closing team</td></tr>

</table> </td>

<tr><td

width="100">%{message}</td><td>Incoming message</td></tr> <tr><td>%{response}</td><td>Outgoing response</td></tr>

<tr><td>%{comments}</td><td>Assign/transfer comments</td></tr>

<tr><td>%{note}</td><td>Internal note <em>(expandable)</em></td></tr>

<tr><td>%{assignee}</td><td>Assigned staff/team</td></tr>

<tr><td>%{assigner}</td><td>Staff assigning the ticket</td></tr>

<tr><td>%{url}</td><td>osTicket\'s base url (FQDN)</td></tr>

<tr><td>%{reset_link}</td> <td>Reset link used by the password reset feature</td></tr>

</table>

<tr><td colspan="2"><b>Name Expansion</b></td></tr>

<tr><td>.first</td><td>First Name</td></tr>

<tr><td>.middle</td><td>Middle Name(s)</td></tr>

(4)

Name</td></tr>

<tr><td>.full</td><td>First Last</td></tr>

<tr><td>.legal</td><td>First M. Last</td></tr>

<tr><td>.short</td><td>First L.</td></tr>

<tr><td>.formal</td><td>Mr. Last</td></tr>

<tr><td>.shortformal</td><td>F. Last</td></tr>

<tr><td>.lastfirst</td><td>Last, First</td></tr>

</table> </td>

</tr> </table> </div>';

return $content; }

} ?>

config.php

<?php

# Encrypt/Decrypt secret key - randomly generated during installation.

define('SECRET_SALT','985DF43FF91D402');

#Default admin email. Used only on db connection issues and related alerts.

define('ADMIN_EMAIL','putrazizwanadya@gmail.com'); #Mysql Login info

define('DBTYPE','mysql');

define('DBHOST','localhost'); define('DBNAME','atmedccare'); define('DBUSER','root');

define('DBPASS','adya'); #Table prefix

define('TABLE_PREFIX','kanwil1_'); ?>

(5)

CURICULUM VITAE

Nama : Adya Zizwan Putra Jenis Kelamin : Laki-laki

Umur : 22 Tahun

Status : belum menikah Agama : Islam

Tempat & Tgl Lahir : Medan, 3 Mei 1992 Alamat : Jl. Nangka No.9 A Medan E-mail : putrazizwanadya@gmail.com Telepon/Hp : 0811802006

Alamat Orang Tua : Jl. Nangka No 9 A Medan

PENDIDIKAN FORMAL

1997-2003 SD Negeri 060837 Medan 2003-2006 SMP Negeri 7 Medan 2006-2009 SMA Negeri 7 Medan

2009-2011 D3-Teknik Informatika Universitas Sumatera Utara (Kumlaude/Lulusan Terbaik)

2012-2014 S1-Ekstensi Ilmu Komputer Universitas Sumatera Utara

PENGALAMAN DAN KEAHLIAN

1. Saya bekerja di Bank Mandiri Persero Tbk. (Kantor Wilayah 1 Medan) di Regional Business Development dan berpindah menjadi General Affair, Asisten Deputy Regional Manager Mandiri Kantor Wilauaj 1 Medan.

2. Saya pernah menjadi Juara di Kejuaraan Mandiri Innovation Award di Jakarta membuat aplikasi Bisnis.

3. Saya pernah menjadi juara di ajang Mandiri Excellence Award dan menjalani

creative trip di Korea Selatan

4. Saya mengembangkan aplikasi berbasis web monitoring untuk Tabungan dan transaksi perbankan. Saya juga mengembangkan aplikasi berbasis Mobile untuk IOS dan Android (Aplikasi Monitoring ATM & EDC menggunakan teknologi gateway dan Web Database)

5. Saya juga sedang bekerja sebagai asisten dosen mengajar di Universitas Sumatera Utara jurusan Teknik Informatika dan di Amik Harapan Medan. 6. Saya Mengajar di Kampus UISU baik Teori dan Praktikum Mata Kuliah

Pemograman

7. Saya juga mengajar di bimbingan sehingga ilmu saya akan selalu bertambah. Saya mengajar matakuliah pemograman dasar, paket aplikasi, Arsitektur komputer , sistem basis data, SQL administrasi dan pemograman berbasis PHP seperti web.

8. Saya sudah banyak menyelesaikan beberapa proyek seperti penjualan tiket kereta api online berbasis WML dan saya juga membuat aplikasi akademik

(6)

pada sekolah(portal akademik) berbasis PHP, HTML, Java Script. Saya akan bertanggung jawab akan tugas yang diberikan.

9. Kemudian saya juga sedang menjalankan project-project PHP for Android dan berbagai pemograman berorientasi objek.

10.Pernah bekerja di Data Centre PLN Wilayah Sumatera Utara mengembangkan aplikasi untuk pelanggan menggunakan database Oracle

11.Saya pernah menjadi asisten Lab di TI Universitas Sumatera Utara

12.Ikut dalam Tim pengabdian ke sekolah-sekolah daerah untuk membangun sistem Informasi bersama dosen FMIPA-USU

13.Saya pernah menjadi instruktur Programming Club di Sutomo 1 untuk Olimpiade Nasional (TOKI)

14.Saya pernah mengajar Materi(Menjadi Pembicara Seminar)Robotika dan membuat Robot dan Logika Pascal

Perancangan Sistem Penyampaian Permasalahan Mesin ATM (Automated Teller Machine dan EDC (Electronic Data Capture) Berbasis Platform Menggunakan Phonegap Framework