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
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.
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
Gambar 3.2 Use case Diagram
Diagram pada gambar 3.2 dapat dijelaskan sebagai berikut :
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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).
Ubiversitas Sumatera Utara
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).
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
3.2.1 Flowchart Sistem
Gambar 3.7 Flowchart Sistem Menu Pengguna (nasabah)
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
3.2.1.3 Flowchart menu utama staff .
Gambar 3.10 Flowchart menu utama staff
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
3.2.1.4 Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff.
Gambar 3.11 Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
3.2.1.5 Flowchart Menu Utama Admin
Gambar 3.12 Flowchart Menu Admin
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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)
Ubiversitas Sumatera Utara
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;
Ubiversitas Sumatera Utara
}
}
}
jQuery(document).ready(function() {
highdpi_init();
});
@media all and (-webkit-min-device-pixel-ratio:2) {
.nav-logo{
background-
image:url(../images/logo/mandiri@2x.png);
-
webkit-background-size: 148px 70px;}
.nav-home{
background-
image:url(../images/navigation/home@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-about{
background-
image:url(../images/navigation/about@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-features{ backgroundimage:url(../images/navigation/features@2x.png);
-webkit-
background-size: 51px 51px;}
.nav-portfolio{
background-
image:url(../images/navigation/folio@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-videos{
background-
image:url(../images/navigation/video@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-blog{
background-
image:url(../images/navigation/blog@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-mobile{
background-
image:url(../images/navigation/phone@2x.png);
-
webkit-background-size: 51px 51px;}
Ubiversitas Sumatera Utara
.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{ backgroundimage:url(../images/navigation/heading@2x.png);
-
webkit-background-size: 20px 20px;}
.deploy-share{ backgroundimage:url(../images/navigation/go-home@2x.png);
-webkit-
background-size:16px 16px;}
.deploy-menu{
background-
image:url(../images/navigation/nav-deploy@2x.png);
-
webkit-background-size:16px 16px;}
Diatas merupakan potongan script untuk membuat tampilan konten gambar lebih
tajam dan jelas dengan menggunakan teknik CSS For Retina Display. Pada contoh
penulis
mengambil
potongan
script
yang
dicetak
tebal
diatas
yaitu:
mandiri@2x.png ini merupakan sebuah gambar yang berformat .PNG (Portable
Network Graphics) yang digunakan oleh aplikasi untuk menampilkan logo.
Mandiri.png tersebut akan dua kali dirapatkan dari ukuran yang semula sehingga
system harus menemukan sebuah gambar misalnya mandiri.png (Dimensi pixel: 148
X 67)
maka harus terdapat gambar yang kedua dengan nama gambar
mandiri@2x.png (Dimensi pixel: 296 X 134). Dimensi gambar yang kedua harus dua
kali lipat dari gambar yang pertama. Sistem akan membaca kedua gambar dan
menggabungkan kedua gambar tersebut sehingga tampilan gambar lebih jelas dan
tajam. Adapun model teknik penggabungan gambar pada CSS For Retina Display
dapat dilihat pada gambar 3.17
Ubiversitas Sumatera Utara
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) {
Ubiversitas Sumatera Utara
.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
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:
Ubiversitas Sumatera Utara
Konten.html(tanpa menggunakan auto responsive)
.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;
Ubiversitas Sumatera Utara
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
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
Ubiversitas Sumatera Utara
Konten.html(menggunakan teknik auto responsive)
Demo: Responsive Menu
.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 {
Ubiversitas Sumatera Utara
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 {
Ubiversitas Sumatera Utara
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;
}
}
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
Handphone : jenis input number (angka) dan optional
3.
(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.
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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).
Ubiversitas Sumatera Utara
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).
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
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:
Ubiversitas Sumatera Utara
login.php
Ubiversitas Sumatera Utara
login.tpl.php
$(document).ready(function() {
$("input:not(.dp):visible:enabled:first").focus();
});
ATM & EDC Care
Bank Mandiri Kantor Wilayah 1 Medan
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.
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
Gambar 3.2 Use case Diagram
Diagram pada gambar 3.2 dapat dijelaskan sebagai berikut :
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
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
Ubiversitas Sumatera Utara
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).
Ubiversitas Sumatera Utara
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).
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
3.2.1 Flowchart Sistem
Gambar 3.7 Flowchart Sistem Menu Pengguna (nasabah)
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
3.2.1.3 Flowchart menu utama staff .
Gambar 3.10 Flowchart menu utama staff
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
3.2.1.4 Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff.
Gambar 3.11 Flowchart penyelesaian/tindaklanjut permasalahan oleh Staff
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
3.2.1.5 Flowchart Menu Utama Admin
Gambar 3.12 Flowchart Menu Admin
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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)
Ubiversitas Sumatera Utara
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;
Ubiversitas Sumatera Utara
}
}
}
jQuery(document).ready(function() {
highdpi_init();
});
@media all and (-webkit-min-device-pixel-ratio:2) {
.nav-logo{
background-
image:url(../images/logo/mandiri@2x.png);
-
webkit-background-size: 148px 70px;}
.nav-home{
background-
image:url(../images/navigation/home@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-about{
background-
image:url(../images/navigation/about@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-features{ backgroundimage:url(../images/navigation/features@2x.png);
-webkit-
background-size: 51px 51px;}
.nav-portfolio{
background-
image:url(../images/navigation/folio@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-videos{
background-
image:url(../images/navigation/video@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-blog{
background-
image:url(../images/navigation/blog@2x.png);
-
webkit-background-size: 51px 51px;}
.nav-mobile{
background-
image:url(../images/navigation/phone@2x.png);
-
webkit-background-size: 51px 51px;}
Ubiversitas Sumatera Utara
.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{ backgroundimage:url(../images/navigation/heading@2x.png);
-
webkit-background-size: 20px 20px;}
.deploy-share{ backgroundimage:url(../images/navigation/go-home@2x.png);
-webkit-
background-size:16px 16px;}
.deploy-menu{
background-
image:url(../images/navigation/nav-deploy@2x.png);
-
webkit-background-size:16px 16px;}
Diatas merupakan potongan script untuk membuat tampilan konten gambar lebih
tajam dan jelas dengan menggunakan teknik CSS For Retina Display. Pada contoh
penulis
mengambil
potongan
script
yang
dicetak
tebal
diatas
yaitu:
mandiri@2x.png ini merupakan sebuah gambar yang berformat .PNG (Portable
Network Graphics) yang digunakan oleh aplikasi untuk menampilkan logo.
Mandiri.png tersebut akan dua kali dirapatkan dari ukuran yang semula sehingga
system harus menemukan sebuah gambar misalnya mandiri.png (Dimensi pixel: 148
X 67)
maka harus terdapat gambar yang kedua dengan nama gambar
mandiri@2x.png (Dimensi pixel: 296 X 134). Dimensi gambar yang kedua harus dua
kali lipat dari gambar yang pertama. Sistem akan membaca kedua gambar dan
menggabungkan kedua gambar tersebut sehingga tampilan gambar lebih jelas dan
tajam. Adapun model teknik penggabungan gambar pada CSS For Retina Display
dapat dilihat pada gambar 3.17
Ubiversitas Sumatera Utara
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) {
Ubiversitas Sumatera Utara
.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
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:
Ubiversitas Sumatera Utara
Konten.html(tanpa menggunakan auto responsive)
.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;
Ubiversitas Sumatera Utara
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
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
Ubiversitas Sumatera Utara
Konten.html(menggunakan teknik auto responsive)
Demo: Responsive Menu
.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 {
Ubiversitas Sumatera Utara
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 {
Ubiversitas Sumatera Utara
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;
}
}
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
Handphone : jenis input number (angka) dan optional
3.
(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.
Ubiversitas Sumatera Utara
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
Ubiversitas Sumatera Utara
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).
Ubiversitas Sumatera Utara
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).
Ubiversitas Sumatera Utara
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.
Ubiversitas Sumatera Utara
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:
Ubiversitas Sumatera Utara
login.php
Ubiversitas Sumatera Utara
login.tpl.php
$(document).ready(function() {
$("input:not(.dp):visible:enabled:first").focus();
});
ATM & EDC Care
Bank Mandiri Kantor Wilayah 1 Medan