Gambar 3.1 Diagram Ishikawa Masalah Penelitian

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

Gambar 3.1 Diagram Ishikawa Masalah Penelitian

Ubiversitas Sumatera Utara

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.1 Kebutuhan Fungsional Kebutuhan fungsional dibutuhkan untuk mengetahui hal-hal yang bisa dikerjakan oleh sistem. Kebutuhan fungsional sistem yang akan dirancang antara lain sebagai berikut: 1. Sistem harus berbasis client server agar dapat diakses oleh seluruh nasabah perbankan yang nantinya akan digunakan untuk menyampaikan permasalahan mesin ATM & EDC. 2. Sistem haarus menyediakan SMTP (Server Mail Transfer Protocol) yang digunakan sebagai sarana notifikasi (Linking with mobile Application). 3. Sistem terdapat 2 fungsi utama client yaitu :

fungsi untuk menyampaikan

permasalahan mesin ATM & EDC, funsgi untuk tracking permasalahan mesin ATM & EDC (permasalahan yang sudah pernah disampaikan). 4. Sistem dapat melakukan filter/mengkategorikan jenis permasalahan yang disampaikan berdasarkan form yang telah diisi oleh pengguna (nasabah). Untuk permasalahan ATM akan disampaikan ke Pihak ATM dan permasalahan EDC akan disampaikan ke pihak EDC. 5. Sistem

dapat

menyediakan

informasi

progress

penyelesaian

kepada

pengguna(nasabah), nasabah dapat memmberikan informasi tambahan pada permasalahan yang telah disampaikan sebelumnya.


3.1.2.2 Kebutuhan Nonfungsional Untuk mendukung kinerja sistem, sistem sebaiknya dapat berfungsi sebagai berikut:

1.

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

2.

Perangkat lunak yang akan dibangun sederhana agar mudah digunakan.

3.

Tampilan antarmuka sistem dapat dengan mudah dimengerti oleh pengguna sistem.

4.

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

5.

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

Proses pada tahap pengujian akan menggunakan simulator masing-masing sistem operasi mobile (Android, IOS). Simulator yang digunakan adalah simulator yang dihubungkan dengan compiler masing-masing sistem operasi. Analisis sistem dilakukan untuk memperoleh gambaran yang lebih jelas tentang objek apa saja yang akan berinteraksi dengan sistem serta hal-hal apa saja yang harus dilakukan oleh sebuah sistem sehingga sistem dapat berfungsi dengan baik sesuai dengan fungsionalitasnya. Aktor yang berinteraksi dengan sistem ini adalah user yang terdiri atas dua jenis yaitu admin(staff) dan user (nasabah). Sesuai dengan analisis fungsional, maka digambarkan diagram use-case seperti gambar 3.2.


Gambar 3.2 Use case Diagram

Diagram pada gambar 3.2 dapat dijelaskan sebagai berikut :


1. Sistem memiliki 3 aktor yang berhubungan dengan fungsi-fungsi sistem, yaitu Admin, User (Nasabah) dan Staff. Admin memiliki autentikasi untuk menambahkan, menghapus, dan mengubah data pegawai dan departemen. Admin juga dapat mengecek system log untuk analisa setiap error yang terjadi pada sistem. Sedangkan Staff dapat melihat laporan permasalahan, memiliki autentikasi untuk melihat direktori pegawai dan dan dapat menambah, mengubah serta menghapus dan memberi komentar terhadap permasalahan yang disampaikan oleh user (nasabah). User (nasabah) dapat memberikan permasalahan terkait mesin ATM & EDC dan dapat melihat progress penyelesaian dari permasalahan yang telah disampaikan. 2. Sistem memiliki fungsi, adapun fungsi tersebut adalah sebagai berikut : 1) Fungsi penyampaian permasalahan mesin ATM & EDC Fungsi ini digunakan untuk menerima semua permasalahan yang diinput oleh User (nasabah) untuk dimasukkan kedalam database 2) Fungsi check status permasalahan Fungsi ini digunakan oleh user (nasabah) untuk memeriksa progress dari permasalahan yang telah disampaikan oleh user (nasabah) tersebut. 3) Fungsi check login staff atau admin (level akses) Fungsi ini digunakan untuk memeriksa staff ataupun admin yang akan masuk ke dalam menu utama anggota. Anggota dibagi menjadi dua : admin dan staff. 4) Fungsi menampilkan permasalahan berdasarkan kategori Funsgi ini digunakan untuk menampilkan data permasalahan berdasarkan kategori. Halaman ini hanya dapat diakses oleh anggota (admin dan staff) untuk melihat permasalahan yang ditugaskan kepadanya. Adapun kategori permasalahan tersebut dibagi menjadi 4: a) Permasalahan dalam penyelesaian (Open) b) Permasalahan yang terlambat diselesaikan c) Permasalahan yang telah diselesaikan (Closed) 5) Fungsi untuk menambahkan Staff


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

Gambar 3.3 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. 2 Final State, sebagai objek yang diakhiri.


3.1.3.2 Activity Diagram untuk penanganan permasalahan

Gambar 3.4 Activity Diagram untuk penanganan permasalahan

Berdasarkan gambar 3.4 Activity Diagram untuk penangan permasalahan terdapat: 1. 1 Initial Node, sebagai objek yang diawal. 2. 1 Decision Node dari sistem yang menggambarkan kondisi pada proses login. 3. 15 Action State dari sistem yang menggambarkan eksekusi dari suatu aksi diantaranya, masuk ke halaman staff panel, sistem akan menampilkan halaman staff dan form login, staff melakukan login (menginputkan username dan password), Sistem akan mengecek username dan password kedalam database, jika gagal sistem akan menampilkan pesan maaf gagal login kepada staff , jika berhasil login maka sistem akan mengambil data permasalahan terkait dengan staff yang sedang login, tampil semua daftar permasalahan, staff memilih permasalahan yang akan ditindaklanjuti, sistem akan menampilkan rincian


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.1 Sequence Diagram untuk penyampaian permasalahan baru

Gambar 3.5 Sequence Diagram untuk diagram untuk penyampaian permasalahan baru


Berdasarkan gambar 3.5 Sequence Diagram penyampaian permasalahan baru, terdapat: 1. 1 Actor yaitu user (nasabah) 2. 3 boundary lifeline, yaitu halaman permasalahan baru, form permasalahan, halaman utama. 3. 2 control lifeline untuk control form permasalahan, server generate email. 4. 1 entity lifeline yaitu sistem menginput data kedalam database. 5. 8 message yang ada dalam sistem tersebut. a) 1 message yang dilakukan oleh user (nasabah) pada menu utama yaitu pilihan menu dan kemudian akan dilanjutkan ke form pelaporan permasalahan b) 1 message yang dilakukan oleh user (nasabah) pada form pelaporan permasalahan baru yaitu input data-data terkait dengan permasalahan. Kemudian diteruskan ke control form permasalahan. c) 1 message yang dilakukan oleh form permasalahan yaitu menyampaikan data yang diinputkan kedalam control form permasalahan (agar dilakukan validasi dari data yang telah diinput oleh user) d) 1 combined fragment yang berisikan dua message. Jika data valid maka akan dilanjutkan sistem menyimpan data kedalam database dan jika data tidak valid maka akan diarahkan ke menu form. e) 1 message yang dilakukan sistem penyimpanan data kedalam database yaitu server melakukan generate email

untuk mengirimkan email

sebagai notifikasi kepada staff dan user(nasabah). f) 1 message dari proses server generate email yaitu permasalahan berhasil diinput pada form permasalahan. g) 1 message yang dilakukan sistem penyimpanan data kedalam database yaitu mengarahkan ke menu utama (halaman utama).


3.1.4.2 Sequence Diagram untuk penanganan permasalahan

Gambar 3.6 Sequence Diagram untuk diagram untuk penanganan permasalahan

Berdasarkan gambar 3.6 sequence diagram untuk penanganan permasalahan, terdapat : 1. 1 Actor yaitu staff 2. 4 boundary lifeline, yaitu halaman staff, form login staff, daftar permasalahan, rincian permasalahan. 3. 3 control lifeline, yaitu control login staff, permasalahan ditindaklanjuti, aksi tindaklanjut. 4.

1 entity lifeline, yaitu menyimpan data aksi kedalam database.

5. 11 message yang ada di dalam sistem. a) 1 message yang dilakukan oleh actor(staff) yaitu mengakses halaman staff. b) 1 message yang dilakukan oleh halaman staff yaitu menampilkan form login. c) 1 message

yang dilakukan oleh actor(staff) yaitu menginput login

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


e) 1 combined fragment yang berisikan dua message. Jika data login valid maka akan dilanjutkan proses tampil daftar permasalahan dan jika data tidak valid maka akan diarahkan ke form login. f) 1 message yang dilakukan oleh staff adalah memilih permasalahan yang akan ditindaklanjuti. g) 1 message yang dilakukan pada permasalahan yang ditindaklanjuti adalah menampilkan rincian permasalahan dan pilihan aksi tindaklanjut. h) 1 message yang dilakukan pada rincian permasalahan yaitu proses tindaklanjut permasalahan i) 1 message yang dilakukan pada proses tindaklanjut permasalahan yaitu menyimpan aksi tindaklanjut permasalahan kedalam database. j) 1 message yang dilakukakan pada proses penyimpanan database yaitu tampil pesan berhasil disimpan pada rincian permasalahan.

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


3.2.1 Flowchart Sistem

Gambar 3.7 Flowchart Sistem Menu Pengguna (nasabah)


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

3.2.1.1 Flowchart Penyampaian permasalahan mesin ATM & EDC

Gambar 3.8 Flowchart penyampaian permasalahan mesin ATM & EDC

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


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

3.2.1.2 Flowchart cek status penyelesaian permasalahan mesin ATM & EDC

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


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


3.2.1.3 Flowchart menu utama staff .

Gambar 3.10 Flowchart menu utama staff


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


3.2.1.4 Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff.

Gambar 3.11 Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff


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


3.2.1.5 Flowchart Menu Utama Admin

Gambar 3.12 Flowchart Menu 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

Gambar 3.13 Flowchart Menu Admin untuk mengelola 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

Gambar 3.14 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

Gambar 3.15 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.1 Intro (Menjelaskan mengenai manfaat aplikasi) 1.2 Tentang (Menjelaskan mengenai pembuat aplikasi) 1.3 Produk (Menjelaskan mengenai produk perbankan) 1.4 Event (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.6 Photo (Berisi mengenai gallery perbankan) 1.7 Call (Perintah untuk melakukan panggilan ke no perbankan) 1.8 Text (Perintah untuk melakukan SMS /Kotak Saran) 1.9 Mail (Perintah untuk mengirimkan email terkait saran)


3.2.2.1 Antar Muka Menu Utama

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

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

a) Teknik CSS For Retina Display Berikut potongan script yang digunakan untuk menghasilkan ketajaman pada content gambar sebagai berikut: function highdpi_init() { if(jQuery('.replace-2x').css('font-size')== "1px") { var els = jQuery(".replace-2x").get(); for(var i = 0; i < els.length; i++) { var src = els[i].src src = src.replace(".png", "@2x.png"); els[i].src = src;


} } } jQuery(document).ready(function() { highdpi_init(); }); @media all and (-webkit-min-device-pixel-ratio:2) { .nav-logo{

background-

image:url(../images/logo/[email protected]);

-

webkit-background-size: 148px 70px;} .nav-home{

background-

image:url(../images/navigation/[email protected]);

-

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

background-


-

webkit-background-size: 51px 51px;} .nav-features{ backgroundimage:url(../images/navigation/[email protected]);

-webkit-

background-size: 51px 51px;} .nav-portfolio{

background-


-

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

background-


-

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

background-


-

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

background-


-

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


.nav-sms{

background-


-

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

background-


-

webkit-background-size: 51px 51px;} .icon-heading{ backgroundimage:url(../images/navigation/[email protected]);

-

webkit-background-size: 20px 20px;} .deploy-share{ backgroundimage:url(../images/navigation/[email protected]);

-webkit-

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

background-


-

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:

[email protected] ini merupakan sebuah gambar yang berformat .PNG (Portable Network Graphics) yang digunakan oleh aplikasi untuk menampilkan logo. Mandiri.png tersebut akan dua kali dirapatkan dari ukuran yang semula sehingga system harus menemukan sebuah gambar misalnya mandiri.png (Dimensi pixel: 148 X 67)

maka harus terdapat gambar yang kedua dengan nama gambar

[email protected] (Dimensi pixel: 296 X 134). Dimensi gambar yang kedua harus dua kali lipat dari gambar yang pertama. Sistem akan membaca kedua gambar dan menggabungkan kedua gambar tersebut sehingga tampilan gambar lebih jelas dan tajam. Adapun model teknik penggabungan gambar pada CSS For Retina Display dapat dilihat pada gambar 3.17


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), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {


.image { background: url(/path/to/my/[email protected]) 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 Tampilan auto responsive adalah tampilan yang dapat menyesuaikan layar/display perangkat yang menjalankan aplikasi. Penulis menggunakan model auto responsive agar aplikasi ini dapat digunakan dengan nyaman baik dengan perangkat tablet ataupun perangkat mobile lainnya. Berikut ini penulis akan membandingkan penggunaan script dengan teknik auto responsive dan script tanpa penggunaan teknik auto responsive. Adapun perbedaan script akan ditampilkan sebagai berikut:


Konten.html(tanpa menggunakan auto responsive) <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; color: #fff;


border-radius: 5px; }

ATM & EDC CARE
tempat untuk menampung semua permasalahan mesin ATM & EDC
Sampaikan sekarang juga permasalahan Anda

Jika

Anda

melihat

ATM

&

EDC

Bank

Mandiri

bermasalah

class="no-bottom">Sampaikan

kami.

Aplikasi

ini

akan

secara

langsung

membantu

untuk

menyelesaiakan permasalahan mesin melalui laporan yang Anda

berikan.

Aplikasi

ini

adalah

wujud

dari

pelayanan e-channel Bank Mandiri Kantor Wilayah 1 Medan


Konten.html(menggunakan teknik auto responsive) <meta

http-equiv="Content-Type"

content="text/html;

charset=UTF-8" />
UNTUK

MENYESUAIKAN

TINGGI

DAN

LEBAR

PERANGKAT--> <meta

name="viewport"

content="width=device-width,

initial-scale=1"> Demo: Responsive Menu <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; color: #fff; border-radius: 5px; }

//TAMBAHAN STYLE untuk AUTORESPONSIVE @media screen and (max-width: 500px) { .navigation { position: relative; min-height: 36px; margin-bottom:10px; } .navigation ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .navigation li { display:

none;

/*

menyembunyikan

*/ margin: 0; } .navigation .current {


display: block; /* menampilkan
yang pertama dengan class current */ } .navigation a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .navigation .current a { background: none; color: #666; }

/* on navigation hover */ .navigation ul:hover { background-image: none; } .navigation ul:hover li { display: block; margin: 0 0 5px; }

.sidebar .column-1 { display:block; } .sidebar .column-3, .sidebar .column-2 { display:none; } }


ATM & EDC CARE
tempat untuk menampung semua permasalahan mesin ATM & EDC
Sampaikan sekarang juga permasalahan Anda

Jika Anda melihat ATM & EDC Bank Mandiri bermasalah

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

3.2.2.2 Antar Muka Sub Menu Sub Menu menampilkan beberapa Link Menu yang digunakan oleh nasabah dalam menyampaikan permasalahan, melihat status permasalahan yang telah dikirimkan, dan kembali ke menu utama. Adapaun tampilan sub menu yang ingin dirancang dapat dilihat pada gambar 3.18.


Gambar 3.18 Rancangan Tampilan Sub Menu

3.2.2.3 Antar Muka Form Laporkan permasalahan baru Form laporkan permasalahan baru digunakan untuk menerima data input dari nasabah. Form ini akan menghubungkan data yang diinput oleh nasabah ke database. Nasabah dapat menginputkan semua permasalahan mesin ATM & EDC melalui form ini untuk disimpan kedalam database. Adapun bentuk form yang akan dibangun dapat dilihat pada gambar 3.19.


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.

2.

Email anda : jenis input email dan harus diisi oleh nasabah untuk media notifikasi.


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.4 Antar Muka Form Cek Status permasalahan Form cek status permasalahan digunakan nasabah dalam melihat status permasalahan yang telah disampaikan sebelumnya. Apakah sudah selesai ditindaklanjuti ataupun belum diselesaikan oleh staff. Melalui form ini nasabah harus menginputkan email beserta dengan no permasalahan. Kemudian sistem akan mencari status permasalahan dalam database. Adapun bentuk form yang akan dibangun dapat dilihat pada gambar 3.20.


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. 2. Setelah itu akan ada dua path yang dihasilkan dari instalasi node.js


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 b) Setelah berhasil melakukan perintah diatas maka akan tampil berupa project android yang masih kosong(pada gambar 3.22).


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

d) Setelah itu penulis membuat AVD (Android Virtual Device) untuk melakukan Run Program Android (melihat tampilan aplikasi yang dirancang).


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 c) Untuk membuka project IOS tersebut maka harus menggunakan compiler yang sudah tersedia untuk IOS yang digunakan penulis adalah Compiler Xcode yang sudah dilengkapi simulator seperti gambar 3.25.


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.1 Rancangan Antar muka Login untuk Admin Untuk masuk ke halaman admin, Admin harus terlebih dahulu melakukan login. Adapun potongan script yang digunakan untuk membentuk halaman login untuk Admin adalah sebagai berikut:


login.php
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'; } define("OSTSCPINC",TRUE); //Make includes happy! include_once(INCLUDE_DIR.'staff/login.tpl.php'); ?>


login.tpl.php
=

($_POST

&&

$errors)?Format::htmlchars($_POST):array(); ?>
xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en"> <script type="text/javascript"> $(document).ready(function() {

$("input:not(.dp):visible:enabled:first").focus(); });

ATM & EDC Care Bank Mandiri Kantor Wilayah 1 Medan

type="hidden"

name="do"

value="scplogin">

type="text"

value="
placeholder="username"

echo

name="username"

$info['username'];

?>"

autocorrect="off"

autocapitalize="off">


type="password"

placeholder="password"

name="passwd"

autocorrect="off"

autocapitalize="off">

class="submit"

type="submit"

name="submit" value="Log In">

Copyright © App Made by Adya

ZP

Bank

Mandiri

Kantor

Wilayah

1

Medan

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.2 Rancangan 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 canManageTickets())


$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 { $count=count($_POST['tids']); $i = 0; switch(strtolower($_POST['do'])) { case 'reopen': if($thisstaff>canCloseTickets()

||

$thisstaff-

>canCreateTickets()) { $note='Ticket 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'; break; case 'delete': if($thisstaff>canDeleteTickets()) {


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

} } } break; case 'open': $ticket=null; if(!$thisstaff

||

!$thisstaff-

>canCreateTickets()) { $errors['err']='You do not have permission to create tickets. Contact admin for such access'; } else { $vars = $_POST; if($_FILES['attachments']) $vars['files']

=

AttachmentFile::format($_FILES['attachments']);


if(($ticket=Ticket::open($vars, $errors))) { $msg='Ticket

created

successfully'; $_REQUEST['a']=null; if(!$ticket>checkStaffAccess($thisstaff)

||

$ticket-

>isClosed()) $ticket=null; } elseif(!$errors['err']) { $errors['err']='Unable create

the

ticket.

Correct

the

error(s)

and

to try

again'; } } break; } } if(!$errors) $thisstaff

->resetStats();

//We'll

need

to

reflect any changes just made! endif;

/*... Quick stats ...*/ $stats= $thisstaff->getTicketsStats();

//Navigation $nav->setTabActive('tickets'); if($cfg->showAnsweredTickets()) { $nav->addSubMenu(array('desc'=>'Open ('.number_format($stats['open']+$stats['answered']). ')', 'title'=>'Open Tickets',


'href'=>'tickets.php', 'iconclass'=>'Ticket'), (!$_REQUEST['status']

||

$_REQUEST['status']=='open')); } else {

if($stats['assigned']) { 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']).')', 'title'=>'Assigned Tickets',

'href'=>'tickets.php?status=assigned',

'iconclass'=>'assignedTickets'),

($_REQUEST['status']=='assigned')); }

if($stats['overdue']) { $nav->addSubMenu(array('desc'=>'Permasalahan terlambat ('.number_format($stats['overdue']).')', 'title'=>'Stale Tickets',

'href'=>'tickets.php?status=overdue',

'iconclass'=>'overdueTickets'),


($_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.1 Rancangan 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.2 Rancangan Halaman daftar permasalahan dan tindaklanjut Halaman daftar permasalahan dan tindaklanjut digunakan oleh staff untuk melihat permasalahan secara detail dan staff juga dapat mengubah data permasalahan,

menghapus

data

permaslahan

dan

menandai

bahwa

permasalahan telah selesai. Permasalahan yang ada pada sistem dibagi atas beberapa bagian yaitu :

Permasalahan dalam penyelesaian (Open),

permasalahan terlambat (Overdue), Permasalahan saya (Assigned to me) dan permasalahan yang telah selesai (Closed).

Adapun penjelasannya sebagai

berikut:


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

!$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 $search=($_REQUEST['a']=='search'); $searchTerm='';


//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; page...default

//Instead

back

to

of

regular

an

error

query..with

no

search. $errors['err']='Search term must be more than 3 chars'; $searchTerm=''; } } $showoverdue=$showanswered=false; $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; switch(strtolower($_REQUEST['status'])){ //Status is overloaded case 'open': $status='open'; break; case 'closed': $status='closed';


$showassigned=true; //closed by. break; case 'overdue': $status='open'; $showoverdue=true; $results_type='Overdue Tickets'; break; case 'assigned': $status='open'; $staffId=$thisstaff->getId(); $results_type='My Tickets'; break; case 'answered': $status='open'; $showanswered=true; $results_type='Answered Tickets'; break; default: if(!$search) $_REQUEST['status']=$status='open'; }

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 1.10

Intro (Menjelaskan mengenai manfaat aplikasi)

1.11

Tentang (Menjelaskan mengenai pembuat aplikasi)

1.12

Produk (Menjelaskan mengenai produk perbankan)

1.13

Event (Menjelaskan mengenai kegiatan perbankan)


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

<meta name="apple-mobile-web-app-capable" content="yes" />


<script type="text/javascript"> function highdpi_init() { if(jQuery('.replace2x').css('font-size') == "1px") { var els = jQuery(".replace-2x").get(); for(var i = 0; i < els.length; i++) { var src = els[i].src src = src.replace(".png", "@2x.png"); els[i].src = src; } } } jQuery(document).ready(function() { highdpi_init(); });

if (!element) return null;

var _this = this;

// retreive options this.options = options || {};


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

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


this.element.addEventListener('msTransitionEnd', this, false); this.element.addEventListener('oTransitionEnd', this, false); this.element.addEventListener('transitionend', this, false); window.addEventListener('resize', this, false); }

};

Menu Utama Intro Tentang Produk Photo Event Saran/Info


Mail Telepon SMS Tutup Navigasi

b)

intro.html (halaman intro)

<script type="text/javascript"> function highdpi_init() { if(jQuery('.replace2x').css('font-size') == "1px") { var els = jQuery(".replace-2x").get(); for(var i = 0; i < els.length; i++) { var src = els[i].src src = src.replace(".png", "@2x.png"); els[i].src = src; } } } jQuery(document).ready(function() {


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)'; style.msTransform = style.MozTransform = style.OTransform = 'translateX(' + -(index * this.width) + 'px)';

// set new index to allow for expression arguments this.index = index;

},

getPos: function() {

// return current index position return this.index;


},

// 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); window.addEventListener('resize', this, false); }

};


Swipe untuk melihat

Swipe untuk melihat


c) Call (Perintah untuk melakukan panggilan ke nomor perbankan)

href="tel:+628116133320"

id="nav9"

class="go-

call">Telepon
href="#"

id="navc"

class="go-close">Tutup

Navigasi
class="nav-decoration

decoration">

d) Text (Perintah untuk melakukan SMS /Kotak Saran)

href="sms:+628116714000"

id="nav10"

class="go-

text">SMS
href="#"

id="navc"

class="go-close">Tutup

Navigasi

e) Mail (Perintah untuk mengirimkan email terkait saran)

href="mailto:[email protected]"

id="nav8"

class="go-mail">Mail

3.4.3.2 Rancangan halaman sub menu untuk nasabah Pada tahap ini penulis akan merancangan tampilan sub menu untuk nasabah. Sub menu ini digunakan untuk menu pelaporan permasalahan mesin ATM & EDC. Adapun potongan script dan hasil perancangan yang dibuat penulis akan dibuat dengan sistem auto responsive dan teknik CSS for retina display.


a) Perancangan menu awal sub menu index.php <script type=”text/javascript”> 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 allowed. if(!$ost->getConfig()>allowAPIAttachments()) $data['attachments'] = array();

//Validate

attachments:

Do

error

checking... soft fail - set the error and pass on the request. if($data['attachments']

&&

is_array($data['attachments'])) { foreach($data['attachments']

as

&$attachment) { if(!$ost>isFileTypeAllowed($attachment)) $data['error'] file

type

=

'Invalid

(ext)

for

'.Format::htmlchars($attachment['name']); elseif &&

($attachment['encoding']

!strcasecmp($attachment['encoding'],

'base64')) {


if(!($attachment['data']

=

base64_decode($attachment['data'], true))) $attachment['error'] sprintf('%s:

Poorly

encoded

base64

=

data',

Format::htmlchars($attachment['name'])); } } unset($attachment); }

return true; }

src="
echo

ROOT_PATH; ?>images/mandiri.png">

echo

class="home"

ROOT_PATH;

?>index.php">Menu

Utama

if($thisclient &&

&&

$thisclient-

>isValid()) { ?>

echo

class="my_tickets" ROOT_PATH;


?>tickets.php">Laporan

Permasalahan

Saya

class="ticket_status"

href="tickets.php">Cek Status Penyelesaian

class="new_ticket"

echo

ROOT_PATH;

?>open.php">Laporkan Permasalahan Baru

class="Kembali"

echo

ROOT_PATH;

href="
?>index.php">Kembali

&&

is_object($thisclient)

&&

$thisclient->isValid()) { ?>

echo

ROOT_PATH;

class="log_out" ?>logout.php">Log

Out

href="#"

id="mobileNavLink">Nav

isKnowledgebaseEnabled()){

?>


b) Perancangan form laporkan permasalahan baru open.php isValid()) { $info=array('name'=>$thisclient->getName(), 'email'=>$thisclient->getEmail(), 'phone'=>$thisclient->getPhone(), 'phone_ext'=>$thisclient->getPhoneExt()); }

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

Silahkan isi form berikut untuk melaporkan permasalahan baru.


Nama Anda: <span class="required">(diperlukan)

isValid()) { echo $thisclient->getName(); } else { ?> *

Email Anda: <span class="required">(diperlukan)

isValid()) {


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

Handphone:

Jenis Permasalahan: <span class="required">(diperlukan)

<select id="topicId" name="topicId"> $name) { echo sprintf('',


$id, ($info['topicId']==$id)?'selected="selected"':'', $name); } } else { ?> *

Subject:(mis: ATM .. ) <span class="required">(diperlukan)

*

Keterangan Permasalahan:

<em>Mohon berikan keterangan yang jelas dan detail.
<?php echo $info['message']; ?>


*

allowOnlineAttachments() && !$cfg>allowAttachmentsOnlogin()) || ($cfg->allowAttachmentsOnlogin() && ($thisclient && $thisclient->isValid()))) { ?>
Lampiran Photo(jpg, png) *jika Ada:

allowPriorityChange() && ($priorities=Priority::getPriorities())) { ?>
Ticket Priority:

<select id="priority" name="priorityId"> getDefaultPriorityId(); //System default. foreach($priorities as $id =>$name) { echo sprintf('',


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

} ?>

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

<span class="captcha"> <em>Enter the text shown on the image. *


c) Perancangan form cek status permasalahan view.php

isClosed()) {?>
Ticket will be reopened on message post


Kirim Pesan: <span id="msg"><em> <?php echo $info['message']; ?>
allowOnlineAttachments()) { ?>
Lampiran:


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 classclass 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

Gambar 3.26 Class Diagram sistem yang dirancang


1. Tabel : kanwil1_department Field

Type

Null

Key

Default NULL

dept_id

int(11) unsigned

NO

PRI

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

Extra auto_increment

Tabel 3.1 kanwil1_department

2. Tabel : kanwil1_help_topic Field topic_id topic_pid isactive ispublic noautoresp priority_id dept_id staff_id team_id sla_id topic Notes Created Updated

Type Null Key Default Extra int(11) unsigned NO PRI NULL auto_increment int(10) unsigned NO MUL 0 tinyint(1) unsigned NO 1 tinyint(1) unsigned NO 1 tinyint(3) unsigned NO 0 tinyint(3) unsigned NO MUL 0 tinyint(3) unsigned NO MUL 0 int(10) unsigned NO MUL 0 int(10) unsigned NO 0 int(10) unsigned NO MUL 0 varchar(32) NO MUL text YES NULL datetime NO NULL datetime NO NULL Tabel 3.2 kanwil1_help_topic


3. Tabel : kanwil1_ticket_thread Field id pid ticket_id staff_id thread_type poster source title body ip_address created updated

Type Null Key Default Extra int(11) unsigned NO PRI NULL auto_increment int(11) unsigned NO MUL 0 int(11) unsigned NO MUL 0 int(11) unsigned NO MUL 0 enum('M','R','N') NO NULL varchar(128) NO varchar(32) NO varchar(255) YES NULL text NO MUL NULL varchar(64) NO datetime NO NULL datetime NO NULL Tabel 3.3 kanwil1_ticket_thread

4. Tabel : kanwil1_ticket Field ticket_id ticketID dept_id sla_id priority_id topic_id staff_id team_id email name subject

Type int(11) unsigned int(11) unsigned int(10) unsigned int(10) unsigned int(10) unsigned int(10) unsigned int(10) unsigned int(10) unsigned varchar(255) varchar(255) varchar(255)

phone status source

varchar(16) YES enum('open','closed') NO MUL enum('Web','Email','Phone' NO ,'API','Other') datetime YES MUL datetime YES datetime YES MUL datetime YES datetime YES datetime NO MUL datetime NO Tabel 3.4 kanwil1_ticket

duedate reopened closed lastmessage lastresponse created updated

Null NO NO NO NO NO NO NO NO NO NO NO

Key PRI MUL MUL MUL MUL MUL MUL

Default Extra NULL auto_increment 0 1 0 2 0 0 0

[no subject] NULL open Other NULL NULL NULL NULL NULL NULL NULL


5. Tabel : kanwil1_staff Field

Type

Null

staff_id

int(11) unsigned

group_id dept_id timezone_id username firstname lastname passwd email phone phone_ext mobile signature notes isactive isadmin isvisible onvacation assigned_only show_assigned_tickets daylight_saving change_passwd max_page_size auto_refresh_rate default_signature_type

int(10) unsigned NO int(10) unsigned NO int(10) unsigned NO varchar(32) NO varchar(32) YES varchar(32) YES varchar(32) YES varchar(32) YES varchar(24) NO varchar(6) YES varchar(24) NO tinytext NO text YES tinyint(1) NO tinyint(1) NO tinyint(1) unsigned NO tinyint(1) unsigned NO tinyint(1) unsigned NO tinyint(1) unsigned NO tinyint(1) unsigned NO tinyint(1) unsigned NO int(11) unsigned NO int(10) unsigned NO enum('none','mine','dept NO ') enum('Letter','Legal','Le NO dger','A4','A3') datetime NO datetime YES datetime YES datetime NO Tabel 3.5 kanwil1_staff

default_paper_size created lastlogin passwdreset updated

NO

Key PRI MUL MUL

Defau Extra lt NULL auto_inc rement 0 0 0

UNI NULL NULL NULL NULL NULL

MUL

NULL NULL 1 0 1 0 0 0 0 0 0 0 none Letter NULL NULL NULL NULL

3.6 Konfigurasi Phonegap framework dengan mobile web(Finishing) Setelah tahap penyelesaian aplikasi mobile web (Aplikasi penyampaian permasalahan mesin ATM & EDC berbasis mobile), Penulis akan melakukan konfigurasi Phonegap Framework untuk menghasilkan sebuah aplikasi mobile berbasis Android dan IOS. Tahap sebelumnya telah dijelaskan mengenai pembuatan project Android dan IOS.


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

3. Setelah menyalin, maka penulis melakukan konfigurasi pada project tersebut dengan menambahkan sebuah script. Script tersebut disimpan pada folder yang sama pada project Android. Script ini digunakan untuk menggabungkan antara source code mobile web

dengan source code

project Android sehingga meghasilkan sebuah aplikasi mobile berbasis Android. Adapun script yang ditambahkan pada project adalah sebagai berikut.


config.xml <widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0"> ATM & EDC CARE <description> ATM & EDC CARE. <preference name="loglevel" value="DEBUG" /> <param name="android-package" value="org.apache.cordova.App" /> HelloWorld <description> Hello World sample application that responds to the deviceready event. PhoneGap Team <preference name="permissions" value="none" /> <preference name="orientation" value="default" />


<preference name="target-device" value="universal" /> <preference name="fullscreen" value="true" /> <preference name="webviewbounce" value="true" /> <preference name="prerendered-icon" value="true" /> <preference name="stay-in-webview" value="false" /> <preference name="ios-statusbarstyle" value="black-opaque" /> <preference name="detect-data-types" value="true" /> <preference name="exit-on-suspend" value="false" /> <preference name="show-splash-screen-spinner" value="true" /> <preference name="auto-hide-splash-screen" value="true" /> <preference name="disable-cursor" value="false" /> <preference name="android-minSdkVersion" value="7" /> <preference name="android-installLocation" value="auto" />

gap:platform="android" src="res/icon/android/icon-72-hdpi.png" />


AndroidManifest.xml <manifest android:hardwareAccelerated="true" android:versionCode="3"


android:versionName="1.0.3" android:windowSoftInputMode="adjustPan" package="atm.adyazp.adya" xmlns:android="http://schemas.android.com/apk/res /android"> <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" /> <uses-permission android:name="android.permission.INTERNET" />


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

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

3. Setelah menyalin, maka penulis melakukan konfigurasi pada project tersebut dengan menambahkan sebuah script. Script tersebut disimpan pada folder yang sama pada project IOS. Script ini digunakan untuk menggabungkan antara source code mobile web

dengan source code

project IOS sehingga meghasilkan sebuah aplikasi mobile berbasis IOS. Adapun script yang ditambahkan pada project adalah sebagai berikut. config.xml


<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0"> ATM & EDC CARE <description> ATM & EDC CARE <preference name="AllowInlineMediaPlayback" value="false" /> <preference name="BackupWebStorage" value="cloud" /> <preference name="DisallowOverscroll" value="false" /> <preference name="EnableViewportScale" value="false" /> <preference name="KeyboardDisplayRequiresUserAction" value="true" /> <preference name="MediaPlaybackRequiresUserAction" value="false" /> <preference name="SuppressesIncrementalRendering" value="false" /> <preference name="TopActivityIndicator" value="gray" /> <preference name="GapBetweenPages" value="0" /> <preference name="PageLength" value="0" />


<preference name="PaginationBreakingMode" value="page" /> <preference name="PaginationMode" value="unpaginated" /> <param name="ios-package" value="CDVLocalStorage" /> HelloWorld <description> Hello World sample application that responds to the deviceready event. PhoneGap Team <preference name="permissions" value="none" /> <preference name="orientation" value="default" /> <preference name="target-device" value="universal" /> <preference name="fullscreen" value="true" /> <preference name="webviewbounce" value="true" /> <preference name="prerendered-icon" value="true" /> <preference name="stay-in-webview" value="false" /> <preference name="ios-statusbarstyle" value="black-opaque" />


<preference name="detect-data-types" value="true" /> <preference name="exit-on-suspend" value="false" /> <preference name="show-splash-screen-spinner" value="true" /> <preference name="auto-hide-splash-screen" value="true" /> <preference name="disable-cursor" value="false" /> <preference name="android-minSdkVersion" value="7" />

src="res/icon/ios/icon-72.png" width="72" />

width="640" />

main.m #import

int main(int argc, char* argv[]) { @autoreleasepool { int retVal = UIApplicationMain(argc, argv, nil, @"AppDelegate"); return retVal; } }


3.7 Perbandingan Biaya publish Aplikasi mobile berbasis Android dan IOS NO

PERBANDINGAN

1

Platform

IOS

Android

2

Biaya Registrasi

USD 99 / tahun

USD 25 / tahun

3

Kartu kredit untuk

Perlu

Perlu

Proses persetujuan

Sulit dan sering sangat

Cepat dan mudah

aplikasi

lama

Opsi pembelian

Kartu kredit, gift card

registrasi 4

5

Potong pulsa, kartu

konten

kredit, gift card, Google Play Balance

6

7

Situs pengembang

https://developer.apple.c

http://developer.androi

aplikasi

om/programs/ios/

d.com/

Presentase penjualan

70 %

70%

Didukung

Indonesia belum

yang diterima 8

Aplikasi berbayar

didukung 9

In-App purchase

Didukung

Indonesia belum didukung

Tabel 3.6 Perbandingan biaya publish

Keterangan 1. Publish Android : Google Play hingga saat ini masih belum membuka Google Wallet Merchant untuk Indonesia yang mana diperlukan jika pengembang aplikasi ingin memanfaatkan fitur aplikasi berbayar dan in-app-pucrhase menggunakan layanan Google. Sebetulnya hal ini bisa, jika menggunakan cara lain dengan menggunakan layanan pihak ketiga. Namun secara resminya Google tidak memperbolehkan pengembang aplikasi menggunakan layanan billing dari pihak ke-3 di Google Play (tidak masalah di toko aplikasi Android lain).


2. Publish IOS : Diantara semua toko aplikasi yang besar, App Store dari Apple bisa dibilang yang paling ketat untuk proses evaluasi aplikasinya dan harga registrasi untuk menjadi developer di App Store pun tidak murah. Namun dari tingginya tuntutan dari App Store, App Store juga bisa dibilang toko aplikasi yang paling berpontesi bagi para pengembang aplikasi untuk meraup untung. Sudah banyak laporan analisa yang menyatakan bahwa App Store menawarkan peluang yang besar dalam hal monetasi.


BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1 Implementasi Proses implementasi berikut menjelaskan mengenai implementasi dari sistem yang telah dijelaskan pada bab sebelumnya. Untuk implementasi ini, penulis menggunakan bahasa pemograman PHP, HTML 5 dan javascript. Untuk proses pengujian dan untuk melihat hasil (output), penulis menggunakan compiler Xcode (untuk merancang dan implementasi aplikasi berbasis IOS) dan compiler Eclipse dan Android SDK (untuk merancangan aplikasi dan implementasi aplikasi berbasis Android). Penulis menggunakan simulator yang tersedia pada masing-masing compiler untuk menampilkan user interface sistem yang akan dirancang. Penulis menggunakan Phonegap framework untuk membantu mengembangkan aplikasi (Android dan IOS) dengan sekali program.

4.1.1 Hasil Penggunaan Teknik CSS For Retina Display Pada tahap ini penulis akan membandingkan dua interface menu utama aplikasi yang dikembangkan. Satu interface menggunakan teknik css for retina display, satu interface tanpa menggunakan teknik tersebut. Dengan demikian didapat perbedaan tampilan yang dapat dilihat pada gambar 4.1 dibawah ini.


Gambar 4.1 Hasil menggunakan teknik CSS For Retina Display (kiri) dan tanpa menggunakan teknik CSS For Retina Display (kanan)

Terlihat perbandingan penggunaan teknik CSS for retina display menu terlihat lebih tajam dan jelas, berbeda dengan tanpa penggunaan teknik tersebut.

4.1.2 Hasil Penggunaan HTML 5 (Auto Responsive) Pada tahap ini penulis akan menggambarkan hasil penggunaan HTML 5 untuk membuat aplikasi yang auto responsive. Untuk lebih jelasnya, Penulis akan menampilkan hasil penggunaan script auto responsive HTML 5 pada sistem yang telah dirancang. Adapun tampilan hasilnya dapat dilihat dari website testing responsive yang tersedia dan gratis. Adapun website yang digunakan penulis yaitu: http://www.responsinator.com. Website tersebut dapat diakses online untuk mengecek apakah aplikasi yang dibangun memiliki system auto responsive. Setelah masuk ke halaman website tersebut, input website URL (Uniform Resource Locator) halaman sistem yang telah dibangun. Adapun hasil tampilan yang telah diuji (testing) menggunakan software tersebut adalah sebagai berikut:


Gambar 4.2 Input Website URL yang ingin diuji auto-responsive

Hasil yang ditampilkan pada website tersebut dapat dilihat pada gambar dibawah ini.

Gambar 4.3 Tampilan System pada Iphone 3 ataupun 4 potrait width 320px

Gambar 4.4 Tampilan System pada Iphone 3 ataupun 4 landscape width 480px


Gambar 4.5 Tampilan System pada Iphone 5 potrait width 320px

Gambar 4.6 Tampilan System pada Crappy Android Landscape width 320px

Gambar 4.7 Tampilan System pada Nexus 4 potrait width 384px


Gambar 4.8 Tampilan System pada Nexus 4 Landscape width 600px

Gambar 4.9 Tampilan System pada Ipad Landscape width 1024px

Dari keterangan gambar 4.3 sampai dengan gambar 4.9 telah diuji penggunaan auto responsive dalam beberapa perangkat yang berbeda ukuran layar (pixels). Penulis juga membandingkan website yang tidak memiliki fitur auto responsive, adapun website tersebut adalah sebagai berikut:


Gambar 4.10 Tampilan System tanpa fitur auto responsive pada Iphone dan Crappy Android

Dapat dilihat dari gambar 4.10 bahwa betapa pentingnya penggunaan fitur auto responsive HTML 5 dalam membangun sebuah aplikasi berbasis mobile. Tampilan


yang menarik dan mudah (teratur) memudahkan pengguna dalam mengoperasikan sistem tersebut.

4.1.3 Hasil Perancangan Penggunaan Phonegap Framework Pada tahap ini akan ditampilkan hasil penggunaan phonegap framework berbasis Android dan IOS.

4.1.3.1 Hasil Rancangan Halaman Menu Utama Untuk Nasabah Hasil rancangan halaman menu utama dapat dilihat pada gambar 4.11.

Gambar 4.11 Tampilan menu utama nasabah pada IOS(kiri) & Android(kanan)

4.1.3.2 Hasil Rancangan Halaman Menu Intro Untuk Nasabah Hasil rancangan halaman menu intro dapat dilihat pada gambar 4.12.

Gambar 4.12 Tampilan halaman menu intro pada IOS(kanan) & Android(kiri)


4.1.3.3 Hasil Rancangan Halaman Menu Tentang Untuk Nasabah Hasil rancangan halaman menu tentang dapat dilihat pada gambar 4.13.

Gambar 4.13 Tampilan halaman tentang pada IOS(kanan) & Android(kiri)

4.1.3.4 Hasil Rancangan Halaman Menu Produk Untuk Nasabah Hasil rancangan halaman menu produk dapat dilihat pada gambar 4.14.

Gambar 4.14 Tampilan halaman produk pada IOS(kanan) & Android(kiri)


4.1.3.5 Hasil Rancangan Halaman Menu Photo Untuk Nasabah Hasil rancangan halaman menu photo dapat dilihat pada gambar 4.15.

Gambar 4.15 Tampilan halaman menu photo pada IOS(kanan)&Android(kiri)

4.1.3.6 Hasil Rancangan Halaman Menu Saran/Info Untuk Nasabah Hasil rancangan halaman menu saran/info dapat dilihat pada gambar 4.16.

Gambar 4.16 Tampilan halaman menu saran/info pada IOS(kanan)&Android(kiri)


4.1.3.7 Hasil Rancangan Halaman Menu Event Untuk Nasabah Hasil rancangan halaman menu event dapat dilihat pada gambar 4.17.

Gambar 4.17 Tampilan halaman menu event pada IOS(kanan) & Android(kiri)

4.1.3.8 Hasil Rancangan Menu Call Untuk Nasabah Hasil rancangan menu call dapat dilihat pada gambar 4.18.

Gambar 4.18 Tampilan perintah call pada menu (IOS)

4.1.3.9 Hasil Rancangan Perintah SMS Pada Menu Untuk Nasabah Hasil rancangan perintah SMS pada menu dapat dilihat pada gambar 4.19.


Gambar 4.19 Tampilan perintah SMS pada menu (IOS)

4.1.3.10 Hasil Rancangan Perintah Mail Pada Menu Untuk Nasabah Hasil rancangan perintah mail pada menu dapat dilihat pada gambar 4.20.

Gambar 4.20 Tampilan perintah mail pada IOS

4.1.4 Rancangan Halaman Sub Menu Untuk Nasabah Pada tahap ini penulis akan menampilkan hasil rancangan tampilan sub menu untuk nasabah. Adapun tampilan sub menu dapat dilihat pada gambar 4.21


Gambar 4.21 Tampilan menu awal sub menu Android(kanan) dan IOS(kiri)

4.1.4.1 Rancangan Halaman Laporkan Permasalahan Baru Untuk Nasabah Pada tahap ini penulis akan menampilkan hasil rancangan halaman laporkan permasalahan baru yang berisikan form untuk menyampaikan permasalahan mesin ATM dan EDC. Adapun tampilan halaman tersebut dapat dilihat pada gambar 4.22

Gambar 4.22 Tampilan form laporkan permasalahan baru pada Android(kiri) dan IOS(kanan)


4.1.4.2 Rancangan Halaman Cek Status Permasalahan Pada tahap ini penulis akan menampilkan hasil rancangan halaman form cek status permasalahan yang berisikan form. Halaman ini digunakan untuk mencari permasalahan dan melihat status permasalahan. Adapun tampilan halaman tersebut dapat dilihat pada gambar 4.23

Gambar 4.23 Tampilan form cek status permasalahan pada Android(kiri) dan IOS(kanan)

4.1.5 Hasil Perancangan Halaman Admin dan Staff Untuk Tindaklanjut Permasalahan (Pengelolaan Permasalahan) Pada tahap ini penulis akan menampilkan halaman Admin dan staff yang digunakan oleh admin dan staff untuk mengelola permasalahan yang telah masuk (dikirimkan oleh nasabah).


4.1.5.1 Hasil 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.

4.1.5.1.1 Hasil Rancangan Antar Muka Login Untuk Admin Untuk masuk ke halaman admin, Admin harus terlebih dahulu melakukan login. Adapun tampilan antar muka login untuk Admin dapat dilihat pada gambar 4.24

Gambar 4.24 Tampilan login untuk Admin

4.1.5.1.2 Hasil Rancangan Halaman Utama Admin Setelah Admin berhasil login maka akan masuk kedalam halaman Admin. Adapun tampilan halaman utama Admin dapat dilihat pada gambar 4.25.

Gambar 4.25 Tampilan halaman Admin


4.1.5.1.3 Hasil Rancangan Halaman Pengelolaan Departemen Halaman pengelolaan departemen digunakan oleh Admin untuk melihat, mengubah, menghapus dan menambahkan data departemen. Sehingga penulis merancang 3 halaman untuk pengelolaan departemen. Adapun tampilan pengelolaan departemen yang telah dirancang dapat dilihat pada gambar 4.26, gambar 4.27, gambar 4.28.

Gambar 4.26 Tampilan halaman tambah departemen

Gambar 4.27 Tampilan halaman ubah data departemen


Gambar 4.28 Tampilan halaman lihat / hapus data departemen

4.1.5.1.4 Hasil Rancangan Halaman Pengelolaan Staff Halaman pengelolaan staff digunakan oleh Admin untuk melihat, mengubah, menghapus dan menambahkan data staff. Sehingga penulis merancang 3 halaman untuk pengelolaan staff yang dapat dilihat pada gambar 4.29, gambar 4.30, gambar 4.31.

Gambar 4.29 Tampilan halaman ubah data staff


Gambar 4.30 Tampilan halaman lihat / hapus data staff

Gambar 4.31 Tampilan halaman tambah data staff

4.1.5.1.5 Hasil Rancangan Halaman Pengelolaan Jenis Permasalahan Halaman pengelolaan jenis permasalahan digunakan oleh Admin untuk melihat, mengubah, menghapus dan menambahkan jenis permasalahan. Sehingga penulis merancang 3 halaman yang dapat dilihat pada gambar 4.32, gambar 4.33, gambar 4.34.


Gambar 4.32 Tampilan halaman tambah jenis permasalahan

Gambar 4.33 Tampilan halaman ubah jenis permasalahan

Gambar 4.34 Tampilan halaman lihat / hapus jenis permasalahan

4.1.5.1.6 Hasil Rancangan Halaman System Logs Untuk Admin Halaman system logs digunakan oleh admin untuk memonitoring system. Admin dapat melihat pesan error / kesalahan sistem melalui halaman tersebut. Adapun bentuk halaman system logs dapat dilihat pada gambar 4.35.


Gambar 4.35 Tampilan halaman system logs pada admin

4.1.5.2 Hasil 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.

4.1.5.2.1 Hasil Rancangan 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. Adapun tampilan form yang dirancang dapat dilihat dari gambar 4.36 dibawah ini.

Gambar 4.36 Tampilan halaman login staff


4.1.5.2.2 Hasil Rancangan Halaman Dashboard Untuk Staff Halaman dashboard digunakan oleh staff untuk melihat dashboard permasalahan yang masuk, melihat direktori pegawai, dan melihat profil dari pegawai yang sedang login tersebut. Sehingga penulis merancang 3 halaman untuk masing-masing aktivitas tersebut. Adapun tampilan dari masing masing halaman tersebut dapat dilihat pada gambar 4.37, gambar 4.38 dan gambar 4.39.

Gambar 4.37 Tampilan halaman dashboard aktivitas permasalahan

Gambar 4.38 Tampilan halaman direktori pegawai


Gambar 4.39 Tampilan halaman profil staff

4.1.5.2.3 Rancangan Halaman Daftar Permasalahan dan Tindaklanjut Halaman daftar permasalahan dan tindaklanjut digunakan oleh staff untuk melihat permasalahan secara detail dan staff juga dapat mengubah data permasalahan,

menghapus

data

permaslahan

dan

menandai

bahwa

permasalahan telah selesai. Permasalahan yang ada pada sistem dibagi atas beberapa bagian yaitu :

Permasalahan dalam penyelesaian (Open),

permasalahan terlambat (Overdue), Permasalahan saya (Assigned to me) dan permasalahan yang telah selesai (Closed).

Adapun penjelasannya sebagai

berikut: e) Permasalahan dalam penyelesaian (Open) : permasalahan yang baru dan dalam proses penyelesaian. f) Permasalahan saya (Assigned to me) : permasalahan yang ditugaskan kepada departemen ataupun staff tersebut g) Permasalahan yang telah selesai (Closed) : permasalahan yang telah ditindaklanjuti dan telah selesai. h) permasalahan terlambat (Overdue) : permasalahan yang telah terlambat ditangani melebih dari waktu yang telah ditentukan (max 2 s/d 3 hari) Adapun tampilan dari halaman daftar permasalahan tersebut dapat dilihat pada gambar 4.40.


Gambar 4.40 Tampilan halaman daftar permasalahan

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 tampilan detail dan tindaklanjut

permasalahan dapat dilihat pada gambar 4.41.

Gambar 4.41 Tampilan detail dan tindaklanjut permasalahan


BAB V

KESIMPULAN DAN SARAN

5.1 Kesimpulan Setelah melakukan implementasi sistem penyampaian permasalahan mesin ATM & EDC berbasis mobile application for multiple platform menggunakan phonegap framework maka didapat kesimpulan sebagai berikut:

1. Untuk membangun aplikasi mobile berbasis Phonegap framework dibutuhkan script yang menggunakan teknik HTML 5 auto responsive agar aplikasi yang dibangun menyesuaikan dengan layar/display perangkat. <meta name="viewport"content="width=devicewidth,initialscale=1"><style>@media screen and (maxwidth: 500px){} 2.

Penggunaan Teknik CSS For Retina Display sangat berguna untuk menampilkan content gambar yang sangat tajam dan jelas karena Teknik CSS For Retina Display menampilkan content gambar dengan kerapatan pixel dua kali lipat. @media

only

screen

and

(min--moz-device-pixel-ratio:

2){ background: url(/path/to/my/[email protected]) no-repeat; } 3.

Phonegap framework adalah solusi untuk memudahkan Mobile Application Developers dalam pembuatan dan pengembangan aplikasi mobile untuk semua platform sistem operasi mobile (efektif dan efisien karena developer cukup memprogram satu kali untuk semua platform sistem operasi mobile).

4.

Sistem penyampaian permasalahan mesin ATM & EDC dapat digunakan nasabah perbankan untuk menyampaikan permasalahan mesin tersebut secara langsung dari sistem.


5.2 Saran Berikut saran-saran yang dapat dipertimbangkan untuk melakukan penelitian selanjutnya:

1.

Sistem tersebut dapat diuji dan diimplementasikan di dalam sistem operasi mobile yang lainnya selain Android dan IOS sehingga didapat perbandingan implementasi dan kompatibilitas phonegap framework di sistem operasi mobile lainnya.

2.

Untuk pengembangan selanjutnya dapat menggunakan beberapa fitur lainnya dari Phonegap framework antara lain : Accelerometer, Camera, Compass, Geolocation, Notification (Sound, Vibration, alert). Sehingga didapat hasil implementasi dari fitur-fitur tersebut di dalam sistem operasi mobile.


Gambar 3.1 Diagram Ishikawa Masalah Penelitian

Recommend Documents

ATM & EDC CARE tempat untuk menampung semua permasalahan mesin ATM & EDC Sampaikan sekarang juga permasalahan Anda

Jika Anda melihat ATM & EDC Bank Mandiri bermasalah

ATM & EDC CARE tempat untuk menampung semua permasalahan mesin ATM & EDC Sampaikan sekarang juga permasalahan Anda

Jika Anda melihat ATM & EDC Bank Mandiri bermasalah

ATM & EDC Care Bank Mandiri Kantor Wilayah 1 Medan

ATM & EDC CARE
tempat untuk menampung semua permasalahan mesin ATM & EDC
Sampaikan sekarang juga permasalahan Anda

Jika

Anda

melihat

ATM

&

EDC

Bank

Mandiri

bermasalah

ATM & EDC CARE
tempat untuk menampung semua permasalahan mesin ATM & EDC
Sampaikan sekarang juga permasalahan Anda