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
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 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)
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
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
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.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 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
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 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
DAFTAR LAMPIRAN
Halaman
A. Listing Program 127
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)
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)
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
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.
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 :
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.
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
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
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 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)
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
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.
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
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
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
<object type="application/x-shockwave-flash" width="400"
height="220" wmode="transparent"
data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie"
value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
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
<object width="300" height="300"
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
<video src=tutorialku.mp4>
</video>
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
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
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
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
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]$
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,
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".
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:
<meta name="viewport" content="width=device-width">
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),
#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;
} }
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).
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.
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.
Gambar 3.2 Use case Diagram
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:
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
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.
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
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 sistem yang 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
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.
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.
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
3.2.1 Flowchart Sistem
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
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 :
3.2.1.3 Flowchart menu utama staff .
Keterangan :
3.2.1.4 Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff.
Keterangan :
3.2.1.5 Flowchart Menu Utama Admin
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 Flowchart Menu Admin untuk mengelola data departemen
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 Flowchart Menu Admin untuk mengelola data staff
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 Flowchart Menu Admin untuk mengelola jenis permasalahan
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)
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
} }
}
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);
.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
Gambar 3.17 Penggabungan dua gambar dengan Teknik CSS For Retina Display
Berikut untuk lebih jelasnya akan dibandingkan potongan script CSS yang menggunakan teknik CSS For Retina Display dengan script CSS tanpa menggunakan teknik CSS For Retina Display.
style.css (tanpa menggunakan teknik CSS For Retina Display) /* Untuk Resolusi rendah */
.image {
background-image: url(/path/to/my/mandiri.png);
background-size: 200px 300px;
height: 300px;
width: 200px;
}
style.css (menggunakan teknik CSS For Retina Display) .image {
background-image: url(/path/to/my/mandiri.png);
background-size: 200px 300px;
height: 300px;
width: 200px;
}
/* for high resolution display */
@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1),
.image {
background: url(/path/to/my/mandiri@2x.png) no-repeat;
background-size: 200px 400px;
/* rest of your styles... */
}
}
retina.js(tambahan javascript dalam teknik CSS For Retina Display) $(document).ready(function(){
if (window.devicePixelRatio > 1) {
var lowresImages = $('img');
images.each(function(i) {
var lowres = $(this).attr('src');
var highres = lowres.replace(".", "@2x.");
$(this).attr('src', highres);
});
} });
b) Penggunaan HTML 5 untuk tampilan Auto Responsive
Konten.html(tanpa menggunakan auto responsive) <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<style>
.navigation {
margin: 20px 0 0 0;
}
.navigation ul {
margin: 0;
padding: 0;
}
.navigation li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
*display:inline; /* ie7 */
}
.navigation a {
padding: 3px 12px;
text-decoration: none;
color: #ff4e00;
line-height: 100%;
}
.navigation a:hover {
color: #000;
}
.navigation .current a {
background: #555;
