BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Sistem - Perancangan Sistem Penyampaian Permasalahan Mesin ATM (Automated Teller Machine dan EDC (Electronic Data Capture) Berbasis Platform Menggunakan Phonegap Framework

(1)

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

(2)

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)

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.

(4)

(5)

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:

(6)

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

(7)

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.

(8)

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

(9)

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

(10)

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.

(11)

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.

(12)

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

(13)

3.2.1 Flowchart Sistem

(14)

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 :

(15)

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 :

(16)

(17)

3.2.1.3 Flowchart menu utama staff .

(18)

Keterangan :

(19)

3.2.1.4 Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff.

(20)

Keterangan :

(21)

3.2.1.5 Flowchart Menu Utama Admin

(22)

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

(23)

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

(24)

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

(25)

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.5Saran/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)

(26)

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

(27)

}

@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{

(28)

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

(29)

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),

(30)

.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

(31)

Konten.html(tanpa menggunakan auto responsive) <!DOCTYPE HTML>

<style>

.navigation {

margin: 20px 0 0 0; }

.navigation ul { margin: 0; padding: 0; }

.navigation li {

margin: 0 5px 10px 0;

.navigation a:hover { color: #000;

}

(32)

border-radius: 5px; }

</style> </head> <body>

<h4 class="slider-heading center-text">ATM & EDC CARE<br /> tempat untuk menampung semua permasalahan mesin ATM & EDC<br>

<B>Sampaikan sekarang juga permasalahan Anda</b></h4>

<h4>Jika Anda melihat ATM & EDC Bank Mandiri bermasalah</h4>

<p class="no-bottom">Sampaikan secara langsung kepada kami. Aplikasi ini akan membantu untuk menyelesaiakan permasalahan mesin melalui laporan yang

Anda berikan. Aplikasi ini adalah wujud dari pelayanan e-channel Bank Mandiri Kantor Wilayah 1 Medan </p>

(33)

Konten.html(menggunakan teknik auto responsive) <!DOCTYPE HTML>

<!—TAMBAHAN UNTUK MENYESUAIKAN TINGGI DAN LEBAR PERANGKAT-->

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Demo: Responsive Menu</title> <style>

.navigation {

margin: 20px 0 0 0; }

.navigation ul { margin: 0; padding: 0; }

.navigation li {

margin: 0 5px 10px 0;

(34)

color: #000; }

.navigation .current a { background: #555; color: #fff;

border-radius: 5px; }

//TAMBAHAN STYLE untuk AUTORESPONSIVE

(35)

display: block; /* menampilkan <code><li></code> yang pertama dengan class current */

(36)

<h4 class="slider-heading center-text">ATM & EDC CARE<br /> tempat untuk menampung semua permasalahan mesin ATM & EDC<br>

<B>Sampaikan sekarang juga permasalahan Anda</b></h4> <div class="decoration"></div>

<div class="container big-left-icon"> <!--<img class="column-icon replace-2x"

src="images/misc/phone.png" width="48" alt="img" />--> <h4>Jika Anda melihat ATM & EDC Bank Mandiri

bermasalah</h4>

<p class="no-bottom">Sampaikan secara langsung kepada kami. Aplikasi ini akan membantu untuk

menyelesaiakan permasalahan mesin melalui laporan yang Anda berikan. Aplikasi ini adalah wujud dari pelayanan e-channel Bank Mandiri Kantor Wilayah 1 Medan </p>

</div> </div></body> </html>

3.2.2.2Antar Muka Sub Menu

(37)

Gambar 3.18 Rancangan Tampilan Sub Menu

3.2.2.3Antar Muka Form Laporkan permasalahan baru

(38)

Gambar 3.19 Rancangan Tampilan form laporkan permasalahan baru

Form laporkan permasalahan memiliki 7 komponen antara lain;

1. Nama Anda : jenis input text, dapat menerima panjang karakter maximal 30 karakter dan wajib diisi oleh nasabah sebagai tanda pengenal.

(39)

3. Handphone : jenis input number (angka) dan optional (boleh diisi oleh nasabah dan boleh juga tidak diisi)

4. Jenis Permasalahan : jenis input select (memilih satu dari pilihan yang tersedia) dan wajib diisi oleh nasabah.

5. Subject : jenis input text, dapat menerima panjang karakter maximal 50 karakter dan wajib diisi oleh nasabah. Subject dapat diisi dengan ringkasan penjelasan permasalahan (judul permasalahan) misalnya: ATM Jl. Pulau pinang offline, EDC Toko ABC bermasalah.

6. Keterangan permasalahan : jenis input text area, dapat menerima panjang karakter maximal 700 karakter dan wajib diisi oleh nasabah. Nasabah dapat mengisi keterangan permasalahan dengan penjelasan permasalahan secara detail sehingga memudahkan staff dalam menindaklanjuti ataupun menyelesaikan permasalahan tersebut.

7. Lampiran : Nasabah dapat memberikan lampiran dalam format gambar (.jpg, .png) misalnya : gambar ATM offline atau pesan error pada mesin ATM & EDC. Lampiran ini bersifat optional (boleh melampirkan dan boleh juga tidak melampirkan). Lampiran sangat membantu staff sebagai informasi untuk menindaklanjuti permasalahan yang disampaikan oleh nasabah tersebut.

8. Kirimkan laporan : tombol submit yang berfungsi menyampaikan semua data yang diinput pada form untuk diproses pada server dan disimpan kedalam database.

3.2.2.4Antar Muka Form Cek Status permasalahan

(40)

Gambar 3.20 Rancangan Tampilan form cek status permasalahan

Form laporkan permasalahan memiliki 2 komponen antara lain;

1. Email anda : jenis input email dan digunakan untuk mengenali permasalahan yang ingin dilihat.

2. Nomor permasalahan : jenis input angka dan wajib diisi oleh nasabah agar sistem mudah mengenali permasalahan.

3.3 Persiapan Phonegap Framework

Pada bagian ini akan dijelaskan tahap penggunaan phonegap untuk pengembangan aplikasi berbasis Android dan IOS secara detail. Phonegap framework adalah tools yang digunakan untuk melakukan generate template project untuk masing masing sistem operasi mobile. Namun ada beberapa syarat yang diperlukan dalam instalasi phonegap framework. Penulis menggunakan komputer yang menggunakan sistem operasi Mac OS Maverick dalam implementasi sistem. Adapun tahapannya untuk instalasi adalah sebagai berikut :

1. Instalasi node.js dari website http://nodejs.org, setelah melakukan download secara gratis maka extract dan install paket tersebut.

(41)

a) Node telah terinstall pada path : /usr/local/bin/node

b) NPM telah terinstall pada path : /usr/local/bin/npm c) /usr/local/bin/ harus masuk kedalam $PATH

3. Instalasi phonegap framework melalui terminal /Command Line dapat dilihat pada gambar 3.21.

sudo npm install -g phonegap

Gambar 3.21 Instalation Phonegap with Command Line / Terminal

3.3.1 Phonegap Framework di Android

Pada bagian ini akan dijelaskan mengenai pembuatan / generate project Android dengan phonegap framework. Adapun langkahnya adalah sebagai berikut :

a) Buka terminal/command line dan input perintah berikut (untuk pembuatan project android)

$ phonegap create my-app $ cd my-app

$ phongap run android

(42)

Gambar 3.22 Hasil Project Android dari Phonegap Framework

c) Untuk membuka project Android tersebut maka harus menggunakan compiler yang sudah tersedia untuk Android yang digunakan penulis adalah Compiler Eclipse yang sudah ditambahkan dengan Android SDK dan ADT Plugin seperti gambar 3.23

Gambar 3.23 Project Android pada Eclipse

(43)

3.3.2 Phonegap Framework di IOS

Pada bagian ini akan dijelaskan mengenai pembuatan / generate project IOS dengan phonegap framework. Adapun langkahnya adalah sebagai berikut :

a) Buka terminal/command line dan input perintah berikut (untuk pembuatan project IOS). Pada contoh penulis membuat nama project :my.atm, nama folder : myatm dan nama package atm.adyazp.adya. Sehingga syntax sebagai berikut:

$./phonegap-2.9.1/lib/ios/bin/create myatm atm.adyazp.adya myatm

b) Setelah berhasil melakukan perintah diatas maka akan tampil berupa project IOS yang masih kosong terlihat pada gambar3.24.

Gambar 3.24 hasil project IOS dari Phonegap Framework

(44)

Gambar 3.25 Project IOS pada Xcode

3.4 Pembuatan Aplikasi penyampaian permasalahan mesin ATM & EDC

Setelah menyiapkan project Android dan IOS, Penulis akan menyiapkan aplikasi berbasis mobile web untuk dimasukkan kedalam project yang telah dibuat sebelumnya. Phonegap framework memerlukan mobile web untuk membangun aplikasi mobile berbasis IOS dan Android sehingga pada tahap ini penulis akan mengembangkan aplikasi penyampaian permasalahan mesin ATM & EDC berbasis mobile web.

3.4.1 Rancangan Sistem untuk halaman Admin

Halaman Admin digunakan untuk melakukan aktivitas admin seperti : Mengelola departemen, mengelola staff, mengelola jenis permasalahan dan melihat dashboard. Penulis akan menjabarkan semua rancangan aktivitas tersebut.

3.4.1.1Rancangan Antar muka Login untuk Admin

(45)

login.php <?php

require_once('../main.inc.php');

if(!defined('INCLUDE_DIR')) die('Fatal Error. Kwaheri!');

require_once(INCLUDE_DIR.'class.staff.php'); require_once(INCLUDE_DIR.'class.csrf.php');

$dest = $_SESSION['_staff']['auth']['dest']; $msg = $_SESSION['_staff']['auth']['msg']; $msg = $msg?$msg:'Authentication Required'; if($_POST) {

//$_SESSION['_staff']=array(); #Uncomment to disable login strikes.

if(($user=Staff::login($_POST['username'], $_POST['passwd'], $errors))){

$dest=($dest && (!strstr($dest,'login.php') && !strstr($dest,'ajax.php')))?$dest:'index.php';

@header("Location: $dest");

require_once('index.php'); //Just incase header is messed up.

exit; }

$msg = $errors['err']?$errors['err']:'Invalid login';

}

(46)

login.tpl.php <?php

defined('OSTSCPINC') or die('Invalid path');

$info = ($_POST && $errors)?Format::htmlchars($_POST):array();

<h1 id="logo"><a href="index.php">ATM & EDC Care Bank Mandiri Kantor Wilayah 1 Medan</a></h1>

<?php csrf_token(); ?>

<input type="text" name="username" id="name" value="<?php echo $info['username']; ?>"

(47)

</fieldset>

</form> </div>

</body> </html>

Script diatas merupakan script yang digunakan untuk mengkoneksikan form login kedalam database. Form tersebut berisikan input untuk username dan password. Admin dapat memasukkan username dan password kemudian Sistem akan mengecek (validasi data). Jika sesuai maka admin tersebut memiliki otorisasi untuk masuk ke halaman Admin.

3.4.1.2Rancangan halaman utama admin

Setelah Admin berhasil login maka akan masuk kedalam halaman Admin. Adapaun potongan script yang dirancang penulis untuk membentuk sebuah halaman Admin adalah sebagai berikut:

home.php <?php

switch($_POST['a']) {

case 'mass_process':

(48)

$errors['err']='You do not have permission to mass manage tickets. Contact admin for such access';

elseif(!$_POST['tids'] ||

!is_array($_POST['tids']))

$errors['err']='No tickets selected. You must select at least one ticket.';

else { reopened by '.$thisstaff->getName();

foreach($_POST['tids'] as $k=>$v) {

if($i==$count)

$msg = "Selected tickets ($i) marked overdue";

elseif($i)

$warn = "$i of $count selected tickets marked overdue";

else

$errors['err'] = 'Unable to flag selected tickets as overdue';

(49)

foreach($_POST['tids'] as $k=>$v) {

if(($t=Ticket::lookup($v)) && @$t->delete()) $i++; }

//Log a warning if($i) {

$log = sprintf('%s (%s) just deleted %d ticket(s)',

$thisstaff->getName(), $thisstaff->getUserName(), $i);

$ost->logWarning('Tickets deleted', $log, false);

(50)

if(($ticket=Ticket::open($vars, create the ticket. Correct the error(s) and try again'; reflect any changes just made!

endif;

$nav->addSubMenu(array('desc'=>'Open

('.number_format($stats['open']+$stats['answered']). ')',

(51)

'href'=>'tickets.php',

if(!$ost->getWarning() && $stats['assigned']>10) $ost->setWarning($stats['assigned'].'

tickets assigned to you! Do something about it!');

$nav->addSubMenu(array('desc'=>'Permasalahan Saya ('.number_format($stats['assigned']).')',

(52)

($_REQUEST['status']=='overdue'));

if(!$sysnotice && $stats['overdue']>10)

$sysnotice=$stats['overdue'] .' overdue tickets!';

} ?>

3.4.2 Rancangan Sistem untuk halaman Staff

Halaman staff digunakan untuk melakukan aktivitas staff seperti : melihat dashboard, mengelola permasalahan mesin ATM & EDC yang telah masuk kedalam database. Penulis akan menjabarkan semua rancangan aktivitas tersebut.

3.4.2.1Rancangan Antar muka Login untuk Staff

Untuk masuk ke halaman staff, Staff harus terlebih dahulu melakukan login. Halaman login memiliki sebuah form login yang sudah dikoneksikan kedalam database. Form tersebut berisikan input untuk username dan password. staff dapat memasukkan username dan password kemudian Sistem akan mengecek (validasi data). Jika sesuai maka staff tersebut memiliki otorisasi untuk masuk ke halaman Admin.

3.4.2.2Rancangan Halaman daftar permasalahan dan tindaklanjut

(53)

a) Permasalahan dalam penyelesaian (Open) : permasalahan yang baru dan dalam proses penyelesaian.

b) Permasalahan saya (Assigned to me) : permasalahan yang ditugaskan kepada departemen ataupun staff tersebut

c) Permasalahan yang telah selesai (Closed) : permasalahan yang telah ditindaklanjuti dan telah selesai.

d) permasalahan terlambat (Overdue) : permasalahan yang telah terlambat ditangani melebih dari waktu yang telah ditentukan (max 2 s/d 3 hari)

Setelah Staff melihat daftar permasalahan tersebut. Staff akan memilih permasalahan yang ingin ditindaklanjuti dan akan tampil halaman rincian permasalahan sekaligus aksi yang dapat dilakukan staff terhadap permasalahan yang dipilih tersebut antara lain: mengubah data permasalahan, menandai permasalahan tersebut telah selesai (permasalahan akan langsung masuk kedalam kategori selesai (closed) dan menghapus permasalahan tersebut. Adapun potongan script yang dibuat oleh penulis untuk membangun halaman detail dan tindaklanjut permasalahan sebagai berikut.

login.php <?php

if(!defined('OSTSCPINC') || !$thisstaff || !@$thisstaff->isStaff()) die('Access Denied');

$qstr='&'; //Query string collector

if($_REQUEST['status']) { //Query string status has nothing to do with the real status used below; gets overloaded.

$qstr.='status='.urlencode($_REQUEST['status']); }

//See if this is a search

(54)

//make sure the search query is 3 chars min...defaults to no query with warning message

if($search) {

$searchTerm=$_REQUEST['query'];

if( ($_REQUEST['query'] && strlen($_REQUEST['query'])<3)

|| (!$_REQUEST['query'] && isset($_REQUEST['basic_search'])) ){ //Why do I care

about this crap...

$search=false; //Instead of an error page...default back to regular query..with no search.

$staffId=0; //Nothing for now...TODO: Allow admin and manager to limit tickets to single staff level. $showassigned= true; //show Assigned To column - defaults to true

//Get status we are actually going to use on the query...making sure it is clean!

$status=null;

(55)

$showassigned=true; //closed by.

3.4.3 Rancangan Sistem untuk halaman nasabah (pelapor)

Pada tahap ini penulis akan merancang halaman pada nasabah berbasis mobile web. Penulis juga akan membuat tampilan interface untuk nasabah menggunakan teknik CSS for Retina Display dan penggunaan HTML 5 untuk sistem auto responsive. Berikut halaman yang akan dirancang untuk nasabah :

Menu Utama

(56)

1.14 Saran/Info (Sistem penyampaian permasalahan mesin ATM & EDC ) 1.14.1 Menu Utama

1.14.2 Cek Status Penyelesaian 1.14.3 Laporkan permasalahan baru 1.14.4 Kembali

1.15 Photo (Berisi mengenai gallery perbankan)

1.16 Call (Perintah untuk melakukan panggilan ke nomor perbankan) 1.17 Text (Perintah untuk melakukan SMS /Kotak Saran)

1.18 Mail (Perintah untuk mengirimkan email terkait saran)

Pada menu awal terdiri dari 9 menu utama dan 4 sub menu. Penulis akan menjabarkannya mulai dari menu utama kemudian sub menu. Penulis juga akan menguji hasil aplikasi tersebut menggunakan sebuah website yang dapat menguji responsive atau tidaknya sebuah mobile web yang telah dirancang. Adapun website untuk menguji tersebut adalah : http://www.responsinator.com/

3.4.3.1Rancangan halaman menu utama untuk nasabah

Pada tahap ini penulis akan merancang sebuah mobile web yang auto responsive menggunakan HTML 5. Adapun potongan script untuk membangun beberapa menu tersebut adalah sebagai berikut.

a) index.html (menu utama)

<head>

(57)

media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />

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

var els =

if (!element) return null;

var _this = this;

// retreive options

(58)

this.index = this.options.startSlide || 0; this.speed = this.options.speed || 300; this.callback = this.options.callback || function() {};

this.delay = this.options.auto || 0;

// reference dom elements this.container = element;

this.element = this.container.children[0]; // the slide pane

// static css

this.container.style.overflow = 'hidden'; this.element.style.listStyle = 'none';

// trigger slider initialization this.setup();

// begin auto slideshow this.begin();

// add event listeners

if (this.element.addEventListener) {

this.element.addEventListener('touchstart', this, false);

this.element.addEventListener('touchmove', this, false);

this.element.addEventListener('touchend', this, false);

(59)

this.element.addEventListener('msTransitionEnd', this, false);

this.element.addEventListener('oTransitionEnd', this, false);

this.element.addEventListener('transitionend', this, false);

window.addEventListener('resize', this, false); }

};

</script>

<body>

<a href="index.html" id="nav0" class="go-index">Menu Utama</a>

<a href="home.html" id="nav1" class="go-home">Intro</a>

<a href="about.html" id="nav2" class="go-about">Tentang</a>

<a href="features.html" id="nav3" class="go-features">Produk</a>

<a href="gallery.html" id="nav4" class="go-gallery">Photo</a>

<a href="portfolio.html" id="nav5" class="go-portfolio">Event</a>

<a href="blog.html" id="nav6" class="go-blog">Saran/Info</a>

(60)

<a href="tel:+628116133320" id="nav9" class="go-call">Telepon</a>

<a href="#" id="navc" class="go-close">Tutup Navigasi</a>

b) intro.html (halaman intro)

<head>

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

(61)

highdpi_init(); });

slide: function(index, duration) {

var style = this.element.style;

// set duration speed (0 represents 1-to-1 scrolling)

style.webkitTransitionDuration = style.MozTransitionDuration =

style.msTransitionDuration =

style.OTransitionDuration = style.transitionDuration = duration + 'ms';

// translate to given index position

style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';

(62)

},

// add event listeners

if (this.element.addEventListener) {

this.element.addEventListener('touchstart', this, false);

this.element.addEventListener('touchmove', this, false);

this.element.addEventListener('touchend', this, false);

this.element.addEventListener('webkitTransitionEnd', this, false);

this.element.addEventListener('msTransitionEnd', this, false);

this.element.addEventListener('oTransitionEnd', this, false);

this.element.addEventListener('transitionend', this, false);

(63)

<p class="swipe-text">Swipe untuk melihat</p>

</div> </li>

<p class="swipe-text">Swipe untuk melihat</p>

</div> width="30" src="images/slider/prev.png" alt="img" /></a>

</div> </div>

(64)

c) Call (Perintah untuk melakukan panggilan ke nomor perbankan) <div class="nav-page-icons content">

<a href="tel:+628116133320" id="nav9" class="go-call">Telepon</a>

d) Text (Perintah untuk melakukan SMS /Kotak Saran) <div class="nav-page-icons content">

e) Mail (Perintah untuk mengirimkan email terkait saran) <div class="nav-page-icons content">

3.4.3.2Rancangan halaman sub menu untuk nasabah

(65)

a) Perancangan menu awal sub menu index.php

function validate(&$data, $format) { global $ost;

//Call parent to Validate the structure if(!parent::validate($data, $format))

$this->exerr(400, 'Unexpected or invalid data received');

//Nuke attachments IF API files are not checking... soft fail - set the error and pass on the request.

(66)

if(!($attachment['data'] = base64_decode($attachment['data'], true)))

$attachment['error'] = sprintf('%s: Poorly encoded base64 data', Format::htmlchars($attachment['name']));

<h1><img src="<?php echo ROOT_PATH; ?>images/mandiri.png"><h1>

<li><a class="home" href="<?php echo ROOT_PATH; ?>index.php">Menu

Utama</a></li>

<?php if($thisclient && is_object($thisclient) && $thisclient->isValid()) { ?>

<li><a class="my_tickets"

(67)

?>tickets.php">Laporan Permasalahan Saya</a></li>

<?php } else { ?>

<li><a class="ticket_status" href="<?php echo ROOT_PATH; ?>tickets.php">Cek Status Penyelesaian</a></li>

<?php } ?>

<li><a class="new_ticket"

href="<?php echo ROOT_PATH; ?>open.php">Laporkan Permasalahan Baru</a></li>

<li><a class="Kembali" href="<?php echo ROOT_PATH; ?>index.php">Kembali</a></li>

<?php

if($thisclient && is_object($thisclient) && $thisclient->isValid()) { ?>

<li><a class="log_out" href="<?php echo ROOT_PATH; ?>logout.php">Log Out</a></li>

if($cfg && $cfg->isKnowledgebaseEnabled()){

?>

(68)

</div> </div>

</div>

b) Perancangan form laporkan permasalahan baru open.php

<?php

if(!defined('OSTCLIENTINC')) die('Access Denied!');

$info=array();

if($thisclient && $thisclient->isValid()) { $info=array('name'=>$thisclient->getName(),

<p class="headline">Silahkan isi form berikut untuk melaporkan permasalahan baru.</p>

(69)

</div> </div>

<form id="ticketForm" method="post"

action="open.php" enctype="multipart/form-data"> <?php csrf_token(); ?>

<div>

<label>Nama Anda: <span

class="required">(diperlukan)</span></label>

<?php

if($thisclient && $thisclient->isValid()) { echo $thisclient->getName();

} else { ?>

<?php } ?> </div>

<div>

<label>Email Anda: <span

<?php

(70)

echo $thisclient->getEmail(); } else { ?>

<input id="email" type="text" name="email"

size="25" value="<?php echo $info['email']; ?>"> <font class="error">* <?php echo

$errors['email']; ?></font>

<input id="phone" type="text" name="phone"

size="17" value="<?php echo $info['phone']; ?>"> <font class="error"> <?php echo

$errors['phone']; ?>  <?php echo $errors['phone_ext']; ?></font>

</div>

<div>

<label>Jenis Permasalahan: <span

<option value="" selected="selected" >— Pilih permasalahan —</option>

<?php

if($topics=Topic::getPublicHelpTopics()) { foreach($topics as $id =>$name) {

(71)

$id,

($info['topicId']==$id)?'selected="selected"':'', $name);

}

} else { ?>

<option value="0" >General Inquiry</option> <?php

} ?>

</select>

</div>

<div>

<label>Subject:(mis: ATM .. ) <span

<input id="subject" type="text" name="subject" size="40" value="<?php echo $info['subject']; ?>"> <font class="error">* <?php echo

$errors['subject']; ?></font> </div>

<div>

<label>Keterangan Permasalahan:</label>

<div><em>Mohon berikan keterangan yang jelas dan detail.</em></div>

(72)

</div>

<?php if(($cfg->allowOnlineAttachments() && !$cfg->allowAttachmentsOnlogin())

|| ($cfg->allowAttachmentsOnlogin() &&

($thisclient && $thisclient->isValid()))) { ?> <div>

<label>Lampiran Photo(jpg, png) *jika Ada:</label>

<input type="file" class="multifile"

name="attachments[]" id="attachments" size="30" value="" />

<?php } ?> <?php

if($cfg->allowPriorityChange() &&

($priorities=Priority::getPriorities())) { ?> <div>

<label>Ticket Priority:</label>

<select id="priority" name="priorityId"> <?php

if(!$info['priorityId']) $info['priorityId'] =

$cfg->getDefaultPriorityId(); //System default. foreach($priorities as $id =>$name) {

(73)

$id,

if($cfg && $cfg->isCaptchaEnabled() &&

(!$thisclient || !$thisclient->isValid())) { if($_POST && $errors && !$errors['captcha']) $errors['captcha']='Please re-enter the text again';

?>

<em>Enter the text shown on the image.</em> <font class="error">* <?php echo

(74)

<?php } ?>

</form> </div> </div> </div>

c) Perancangan form cek status permasalahan view.php

<div>

<?if($ticket->isClosed()) {?>

<div class="msg">Ticket will be reopened on message post</div>

<?}?>

<?php if($errors['err']) { ?>

<?php }elseif($msg) { ?>

<form id="reply" action="tickets.php?id=<?php echo $ticket->getExtId(); ?>#reply" name="reply"

(75)

<input type="hidden" name="id" value="<?php echo $ticket->getExtId(); ?>">

<label> Kirim Pesan:</label>

</div> <?php

if($cfg->allowOnlineAttachments()) { ?> <div>

<label for="attachment">Lampiran:</label> <div class="uploads">

</div>

<input class="multifile" type="file"

name="attachments[]" size="30" value="" /> </div>

</div> <?php } ?>

(76)

3.5 Rancangan Database

Diagram Kelas (class diagram) sangat membantu dalam visualisasi kelas dari suatu sistem. Hal ini di sebabkan karena class adalah deskripsi kelompok objek-objek dengan atribut (property) dan relasi yang sama. Disamping itu class diagram bisa memberikan pandangan global atas sebuah sistem. Hal tersebut tercermin dari class-class yang ada dan relasinya satu dengan yang lain. Berikut ini menggambarkan struktur dan deskripsi class pada sistem yang dirancang. Adapun class diagram yang dirancang dapat dilihat pada gambar 3.26

(77)

1. Tabel : kanwil1_department

Field Type Null Key Default Extra dept_id int(11) unsigned NO PRI NULL auto_increment

tpl_id int(10) unsigned NO MUL 0

sla_id int(10) unsigned NO 0

email_id int(10) unsigned NO 0

autoresp_email_id int(10) unsigned NO MUL 0 manager_id int(10) unsigned NO MUL 0

dept_name varchar(128) NO UNI

dept_signature tinytext NO NULL

ispublic tinyint(1) unsigned NO 1

group_membership tinyint(1) NO 0

ticket_auto_response tinyint(1) NO 1

message_auto_response tinyint(1) NO 0

updated datetime NO NULL

created datetime NO NULL

Tabel 3.1 kanwil1_department

2. Tabel : kanwil1_help_topic

Field Type Null Key Default Extra topic_id int(11) unsigned NO PRI NULL auto_increment topic_pid int(10) unsigned NO MUL 0

isactive tinyint(1) unsigned NO 1 ispublic tinyint(1) unsigned NO 1 noautoresp tinyint(3) unsigned NO 0 priority_id tinyint(3) unsigned NO MUL 0 dept_id tinyint(3) unsigned NO MUL 0

(78)

3. Tabel : kanwil1_ticket_thread thread_type enum('M','R','N') NO NULL poster varchar(128) NO

source varchar(32) NO

title varchar(255) YES NULL

body text NO MUL NULL

ip_address varchar(64) NO

created datetime NO NULL

updated datetime NO NULL

Tabel 3.3 kanwil1_ticket_thread

4. Tabel : kanwil1_ticket

Field Type Null Key Default Extra ticket_id int(11) unsigned NO PRI NULL auto_increment ticketID int(11) unsigned NO MUL 0

(79)

5. Tabel : kanwil1_staff

Field Type Null Key Defau

lt

Extra

staff_id int(11) unsigned NO PRI NULL auto_inc

rement

group_id int(10) unsigned NO MUL 0

dept_id int(10) unsigned NO MUL 0

timezone_id int(10) unsigned NO 0

username varchar(32) NO UNI

isvisible tinyint(1) unsigned NO 1

onvacation tinyint(1) unsigned NO 0

assigned_only tinyint(1) unsigned NO 0

show_assigned_tickets tinyint(1) unsigned NO 0 daylight_saving tinyint(1) unsigned NO 0

change_passwd tinyint(1) unsigned NO 0

max_page_size int(11) unsigned NO 0

auto_refresh_rate int(10) unsigned NO 0 default_signature_type enum('none','mine','dept

Tabel 3.5 kanwil1_staff

3.6 Konfigurasi Phonegap framework dengan mobile web(Finishing)

(80)

Penulis juga telah membahas pembuatan mobile web penyampaian permasalahan mesin ATM & EDC. Kemudian bagaimana cara untuk menggabungkan Phonegap Framework dengan aplikasi mobile yang telah dirancang sehingga menghasilkan sebuah aplikasi mobile yang dapat berjalan pada sistem operasi Android dan IOS.

3.6.1 Konfigurasi Phonegap framework pada Project Android

Konfigurasi yang digunakan untuk membangun aplikasi berbasis Android dengan menggunakan Phonegap Framework adalah sebagai berikut:

1. Buka Project Android (yang telah dibuat dengan Phonegap Framework) pada compiler eclipse.

2. Setelah itu penulis menyalin source code aplikasi mobile web yang telah dirancang (aplikasi penyampaian permasalahan mesin ATM & EDC) kedalam folder www>assets sehingga menjadi www>assets>nama folder mobile web seperti gambar 3.27 berikut.

Gambar 3.27 menyalin source code mobile web ke dalam project Android

(81)

config.xml

<?xml version='1.0' encoding='utf-8'?> <widget id="com.phonegap.helloworld"

<name>HelloWorld</name> <description>

Hello World sample application that responds to the deviceready event.

</description>

PhoneGap Team </author>

<feature

name="http://api.phonegap.com/1.0/device" /> <preference name="permissions" value="none" />

(82)

<icon src="icon.png" /> <icon gap:density="ldpi" gap:platform="android"

src="res/icon/android/icon-36-ldpi.png" /> <icon gap:density="mdpi"

gap:platform="android"

(83)

src="res/icon/android/icon-72-hdpi.png" /> <icon gap:density="xhdpi"

src="res/icon/android/icon-96-xhdpi.png" /> <icon gap:platform="blackberry"

src="res/icon/blackberry/icon-80.png" /> <icon gap:platform="blackberry"

gap:state="hover" src="res/icon/blackberry/icon-80.png" />

<icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" /> <icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" /> <icon gap:platform="ios" height="114"

src="res/icon/ios/icon-57-2x.png" width="114" /> <icon gap:platform="ios" height="144"

src="res/icon/ios/icon-72-2x.png" width="144" /> <icon gap:platform="webos"

src="res/icon/webos/icon-64.png" /> <icon gap:platform="winphone"

src="res/icon/windows-phone/icon-48.png" /> <icon gap:platform="winphone"

gap:role="background" src="res/icon/windows-phone/icon-173.png" />

<gap:splash gap:density="ldpi" gap:platform="android"

src="res/screen/android/screen-ldpi-portrait.png" />

<gap:splash gap:density="mdpi" gap:platform="android"

(84)

<gap:splash gap:density="hdpi" gap:platform="android"

src="res/screen/android/screen-hdpi-portrait.png" />

<gap:splash gap:density="xhdpi" gap:platform="android"

src="res/screen/android/screen-xhdpi-portrait.png" />

<gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" /> <gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />

<gap:splash gap:platform="ios" height="960"

src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />

<gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />

<gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />

<gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />

AndroidManifest.xml

<?xml version='1.0' encoding='utf-8'?>

(85)

android:versionName="1.0.3"

android:windowSoftInputMode="adjustPan" package="atm.adyazp.adya"

xmlns:android="http://schemas.android.com/apk/res /android">

(86)

<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />

</manifest>

3.6.2 Konfigurasi Phonegap framework pada Project IOS

Konfigurasi yang digunakan untuk membangun aplikasi berbasis IOS dengan menggunakan Phonegap Framework adalah sebagai berikut:

1. Buka Project IOS (yang telah dibuat dengan Phonegap Framework) pada compiler Xcode.

2. Setelah itu penulis menyalin source code aplikasi mobile web yang telah dirancang (aplikasi penyampaian permasalahan mesin ATM & EDC) kedalam folder www sehingga menjadi www>nama folder mobile web seperti gambar 3.28 berikut.

Gambar 3.28 menyalin source code mobile web ke dalam project IOS

(87)

<?xml version='1.0' encoding='utf-8'?> <widget id="com.phonegap.helloworld" version="1.0.0"

xmlns=

xmlns:gap=>

ATM & EDC CARE </description>

<preference

name="KeyboardDisplayRequiresUserAction" value="true" />

<preference

name="MediaPlaybackRequiresUserAction" value="false" />

<preference

name="SuppressesIncrementalRendering" value="false" />