52
BAB IV
IMPLEMENTASI DAN PENGUJIAN
4. 1
Implementasi
Implementasi merupakan tahapan setelah melakukan anilisis dan
perancangan sistem, dimana aplikasi siap dioperasikan pada keadaan sebenarnya
sehingga dari sini akan diketahui apakah program atau aplikasi atau sistem yang
telah di buat benar-benar dapat menghasilkan output yang diinginkan.
Implementasi dan pengujian aplikasi helpdesk mobile berbasis android ini
menggunakan emualtor Android pada Eclipse Juno dan smartphone Android LG
Nexus 4.
4. 1. 1 Lingkungan Pengembangan
Aplikasi ini dikembangkan dengan spesifikasi perangkat keras dan
perangkat lunak sebagai berikut :
1. Laptop Apple Macbook Pro 13 inch 2009
2. Prosesor Intel Pentium Core 2 Duo
3. Memori RAM 8GB 1067Mhz DDR3
4. VGA NVIDIA Geforce 9400M 256MB
5. HDD 160GB
6. System Operasi Mac OSX Mountain Lion 10.8.4
7. IDE Eclipse Juno
8. Espresso Text Web Editor
9. Java Version 7 for Mac OS X
10. Android Standar Development Kit ( SDK ) versi 22
4. 2
Implementasi Phonegap
Dalam tahapan implementasi pada Android menggunakan framework
phonegap dibutuhkan beberapa paket aplikasi yang dibutuhkan untuk mendukung
berjalannya aplikasi diantaranya Java, Android SDK, Eclipse, ADT Plugin untuk
Eclipse dan juga Phonegap itu sendiri. Berikut penjelasan dari instalasinya:
4. 2. 1
Java
Mac OS X secara default sudah menyertakan Java, baik itu JDK maupun
JRE (Java Runtime Environment) sebagai virtual machinenya dengan versi yang
sudah cukup untuk dapat digunakan oleh aplikasi Eclipse. Tapi alangkah baiknya
jika dapat mengetahui proses instalasinya sebagai berikut:
1. Download Java (http://www.java.com/en/)
2. Setelah proses download selesai, jalankan file executeablenya dengan cara
klik dua kali untuk memulai instalasi java SE.
4. 2. 2
Android SDK
Android SDK adalah tools API ( Application Programing Interfaces ) yang
di perlukan untuk membangun, menguji, dan debug aplikasi pada platform
android Android SDK sendiri. Sebenarnya Android SDK sendiri sebenarnya
tidak perlu di install hanya mencopykan saja pada folder di komputer, caranya
sebagai berikut:
1. Download Android SDK (http://developer.android.com/sdk/index.html)
2. Kemudian simpan di komputer anda, setelah selesai download silahkan
ekstrak ke folder lokal misalnya : /Applications. Hasil ekstrak dirubah
nama foldernya menjadi /Applications/adt-bundle-mac agar lebih mudah
mengaksesnya.
4. 2. 3
Install Eclipse
Eclipse digunakan untuk mengedit file-file script dari phonegap dan
melakukan debuging. Berikut cara install Eclipse:
1. Masuk ke link (http://www.eclipse.org/downloads/)
2. Eclipse disini akan digunakan sebagai editornya, dan yang disarankan
adalah eclipse classic.
3. Install Eclipse cukup mudah, cukup extrack file yang di download
kemudian klik eclipse aplikasi yang ada dalam folder tersebut.
4. 2. 4
Eclipse ADT (Android Development Tools) Plugin
Android menyediakan custom plugin untuk Eclipse IDE, disebut Android
Development Tools (ADT), yang dirancang untuk memberikan lingkungan yang
terintegrasi untuk membangun aplikasi Android. Ini meningkatkan kemampuan
Eclipse untuk menjadikan dengan cepat membangun aplikasi Android baru,
membuat aplikasi UI, menambahkan komponen berdasarkan Android framework
API dan men-debug aplikasi menggunakan Android SDK. Berikut proses instalasi
ADT Plugin:
1. Buka aplikasi Eclipse, klik Help > Install New Software
Gambar 4. 1 Install ADT Plugin
2. Setelah itu maka akan muncul pop up dengan tampilan dibawah ini
Gambar 4. 2 Link ADT Plugin
3. Di bagian work with isi dengan https://dl-ssl.google.com/android/eclipse/
4. Centang bagian Developer Tool, klik Next, kemudian ada beberapa
5. Kemudian masuk ke Preferences, caranya klik Eclipse > Preferences.
Akan muncul bagian Android, bukalah bagian tersebut, pilih Browse,
kemudian pilih folder SDK yaitu /Applications/adt-bundle-mac/sdk
6. Apabila sudah selesai dan benar-benar teratur, maka akan ada “Manage
Android SDK Manager and AVD Manager, seperti gambar dibawah ini
Gambar 4. 3 Menu Android SDK Managaer dan AVD Manager
7. Setelah OK, maka restart aplikasi Eclipse, kemudian pilih Windows >
Android SDK Manager, kemudian pilih SDK yang ingin di install,
sesuaikan saja dengan kebutuhan saat ini yaitu Jelly Bean 4.2.2
Gambar 4. 4
Install Android SDK
8. Kemudian pilih Windows > Android Virtual Device Manager, pilih new
lalu buat Emulator sesuai spesifikasi yang diinginkan.
Gambar 4. 5 Membuat AVD Emulator
9. Untuk mengecek apakah sudah terinstall dengan benar, silahkan buka new
project, maka disana akan ada Android sebagai pilihan project
4. 3
Implementasi Kode Pemrograman
Pada sistem operasi Android, setelah aplikasi di di install maka aplikasi
dapat dijalankan dengan beberapa langkah sebagai berikut:
4. 3. 1 Tampilan Splash Screen
Gambar 4. 6 Tampilan Splash Screen
Berdasarkan gambar diatas tampilan splash screen hanya muncul saat
aplikasi pertama kali dijalankan.
Kode 4. 1 Kode Lengkap Halaman Splash Screen
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-‐8" http-‐equiv="Content-‐Type"> <meta content="telephone=no" name="format-‐detection">
<meta content="user-‐scalable=no, initial-‐scale=1, maximum-‐scale=1, minimum-‐scale=1, width=device-‐width, height=device-‐height, target-‐ densitydpi=device-‐dpi" name="viewport">
<link href="css/index.css" rel="stylesheet" type="text/css"> <title>Hello World</title>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div class="blink" id="deviceready">
<p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div>
</div><script src="cordova-‐
2.4.0.js" type="text/javascript"></script> <script src="js/index.js" t ype="text/javascript"></script> <script type="text/javascript"> app.initialize();
</script>
</body>
</html>
4. 3. 2 Tampilan Halaman Login
Berdasarkan gambar diatas adalah halaman untuk member dan operator
melakukan login ke halaman histori tiket.
Kode 4. 2 Kode Lengkap Halaman Login
<div data-‐role="page" id="loginPage">
<div data-‐role="content"> <div class="login">
<form autocomplete="off" id="loginForm" name="loginForm"> <ul data-‐inset="true" data-‐role="listview">
<li data-‐role="fieldcontain">
<div class="ui-‐hide-‐label" data-‐role="fieldcontain"> <label for="username">Username:</label> <input id="usern ame" name="username" placeholder="Username" type="text">
</div> </li>
<li data-‐role="fieldcontain">
<div class="ui-‐hide-‐label" data-‐role="fieldcontain"> <label for="password">Password:</label> <input id="passw ord" name="password" placeholder="Password" type="password">
</div> </li> <li data-‐role="fieldcontain"> <fieldset class="ui-‐grid-‐a"> <div class="ui-‐block-‐a">
<a id="loginButton" type="button">Login</a> </div>
<div class="ui-‐block-‐b"> <a data-‐theme="b" data-‐
transition="slide" href="#registerPage" id="registerButton" type="butt on">Register</a>
</div> </fieldset> </li> </ul> </form> </div> </div> </body> </html>
4. 3. 3 Tampilan Halaman Register
Gambar 4. 8 Tampilan Halaman Register
Berdasarkan gambar diatas adalah halaman untuk calon member agar dapat
mendaftar sebagai member.
Kode 4. 3 Kode Lengkap Halaman Register
<div data-‐add-‐back-‐btn="true" data-‐back-‐btn-‐text="Cancel" data-‐ role="page" id="registerPage">
<div data-‐id="my-‐persistent-‐header" data-‐position="fixed" data-‐ role="header" data-‐tap-‐toggle="false">
<h1>Register Page</h1> </div>
<div data-‐role="content">
<form autocomplete="off" id="registerForm" method="post" name="r egisterForm">
<div class="ui-‐hide-‐label" data-‐role="fieldcontain">
<label for="fullname">Fullname:</label> <input id="fullname" name="fullname" placeholder="Fullname" type="text">
</div>
<div class="ui-‐hide-‐label" data-‐role="fieldcontain">
<label for="regUsername">Username:</label><label class="erro r" id="usernameError"></label> <input id="regUsername" name="regUserna
me" placeholder="Username" type="text"> </div>
<div class="ui-‐hide-‐label" data-‐role="fieldcontain">
<label for="regPassword">Password:</label> <input id="regPas sword" name="regPassword" placeholder="Password" type="password"> </div>
<div class="ui-‐hide-‐label" data-‐role="fieldcontain"> <label for="cregPassword">Confirm
Password:</label> <input id="cregPassword" name="cregPassword" placeho lder="Confirm Password" type="password">
</div>
<div class="ui-‐hide-‐label" data-‐role="fieldcontain">
<label for="regEmail">Email:</label><label class="error" id= "emailError"></label> <input id="regEmail" name="regEmail" placeholder ="Email" type="text">
</div>
<div class="ui-‐hide-‐label" data-‐role="fieldcontain"> <label for="birthdate">Date of Birth (YYYY/MM/DD) :</label> <input class="i-‐
txt" id="birthdate" name="birthdate" placeholder="Birthdate"> </div>
<div class="ui-‐hide-‐label" data-‐role="fieldcontain"> <label for="gender">Please
choose:</label> <select id="gender" name="gender"> <option selected="selected" value="1"> Male </option> <option value="2"> Female </option> </select> </div>
<div class="ui-‐hide-‐label" data-‐role="fieldcontain">
<label for="phone">Phone:</label> <input id="phone" name="ph one" pattern="[0-‐9]*" placeholder="Phone" type="number">
</div><button data-‐
theme="b" id="registerSubmitButton" type="button">Submit Register</button>
</form> </div> </div>
4. 3. 4 Tampilan Halaman Histori Tiket
Gambar 4. 9 Tampilan Halaman Histori Tiket
Berdasarkan gambar diatas adalah halaman histori tiket setelah member atau
operato melakukan login, maka akan menuju ke halaman histori tiket berisi daftar
tiket dari member atau operator.
Kode 4. 4 Kode Lengkap Halaman Histori Tiket
<div data-‐role="page" id="homePage">
<div data-‐id="my-‐persistent-‐header" data-‐position="fixed" data-‐ role="header" data-‐tap-‐toggle="false">
<button id="logoutButton">Logout</button>
<h1>Your Tickets</h1><a data-‐icon="add" data-‐theme="b" data-‐
transition="slideup" href="#newTicketPage" id="newTicket" type="button">New</a> </div>
<div data-‐role="content">
<ul data-‐inset="true" data-‐role="listview" id="ticketList"></ul> </div>
4. 3. 5 Tampilan Halaman Detail Tiket
Gambar 4. 10 Tampilan Halaman Detail Tiket
Berdasarkan gambar diatas adalah halaman detail tiket, halaman ini muncul
setelah member atau operator memilih tiket.
Kode 4. 5 Kode Lengkap Halaman Detail Tiket
<div data-‐icon-‐back="back" data-‐role="page" id="ticketDetailPage"> <div data-‐id="my-‐persistent-‐header" data-‐position="fixed" data-‐ role="header" data-‐tap-‐toggle="false">
<a data-‐icon="arrow-‐l" data-‐rel="back" href="#">Back</a>
<h1 id="ticketDetailPageHeader">Ticket Detail</h1><a class="ui-‐ btn-‐right" data-‐theme="b" data-‐
transition="slideup" href="#replyTicketPage" id="replyButton">Reply</a> </div>
<div data-‐role="content">
<ul data-‐role="listview" id="ticketListDetail"></ul> </div>
4. 3. 6 Tampilan Halaman Reply Tiket
Gambar 4. 11 Tampilan Halaman Reply Tiket
Berdasarkan gambar diatas adalah halaman form untuk mereply tiket setelah
form disimpan otomatis akan mengupdate halaman detaik tiket.
Kode 4. 6 Kode Lengkap Halaman Reply Tiket
<div data-‐add-‐back-‐btn="true" data-‐back-‐btn-‐text="Cancel" data-‐icon="false" data-‐role="page" id="replyTicketPage"> <div data-‐id="my-‐persistent-‐header" data-‐position="fixed" data-‐role="header" data-‐tap-‐toggle="false">
<a data-‐rel="back" href="#">Cancel</a>
<h1>Reply Ticket</h1><button class="ui-‐btn-‐right" data-‐theme="b" id="sendReplyTicket">Send</button></div> <div data-‐role="content" style="padding: 0px;">
<form action="" method="post"></form><input id="hth_id" name="hth_id" type="hidden"> <input id="hth_head_id" name="hth_head_id" type="hidden"> <input id="hth_user_id_klien" name="hth_user_id_klien" type="hidden"> <input id="hth_user_id_staf" name="hth_user_id_staf" type="hidden">
<input id="hth_date" name="hth_date" type="hidden"> <input id="hth_status_ticket" name="hth_status_ticket" type="hidden"> <textarea class="newTextArea" id="hth_isi" name="hth_isi" placeholder="Click here">
</textarea> </div> </div>
Gambar 4. 12 Halaman Membuat Tiket Baru
Berdasarkan gambar diatas adalah halaman form untuk membuat tiket baru
setelah form disimpan otomatis akan mengupdate halaman daftar tiket.
Kode 4. 7 Kode Lengkap Halaman Tiket Baru
<div data-‐add-‐back-‐btn="true" data-‐back-‐btn-‐text="Cancel" data-‐icon="false" data-‐ role="page" id="newTicketPage">
<div data-‐role="header">
<a data-‐rel="back" href="#">Cancel</a>
<h1>Make New Ticket</h1><button class="ui-‐btn-‐right" data-‐ theme="b" id="sendNewTicket">Submit</button>
</div>
<div data-‐role="content" style="padding: 0px;">
<form action="" method="post"></form><select id="kategori" name="kategori"> </select>
<textarea class="newTextArea" id="hth_isi_tiket_baru" name="hth_isi_tiket_baru" placeholder="Click here">
</textarea> </div> </div>
Fungsi ceklogin() merupakan fungsi yang digunakan pada aplikasi untuk
melakukan validasi username dan password user. Apabila user berhasil login
maka data akan di simpan di local storage agar suatu waktu dapat digunakan
kembali tanpa harus melakukan koneksi ke server.
Kode 4. 8 Kode Lengkap Fungsi Cek Login
function cekLogin() {
var uname = $("#username").val(); var pass = $("#password").val();
$("#loginButton").attr("disabled", "disabled"); $("#registerButton").attr("disabled", "disabled"); if (uname == "" || pass == "") {
alert("You must enter a username and password"); $("#loginButton").removeAttr("disabled");
$("#registerButton").removeAttr("disabled"); return false;
} else {
$.mobile.showPageLoadingMsg("a", "Please wait...", true); $.ajax( type: 'GET', url: url,
contentType: "application/json", dataType: 'jsonp', data: { username: uname, password: pass }, crossDomain: true,
success: function(data) { if (data.status == 1) {
window.localStorage.setItem("username", uname); window.localStorage.setItem("password", pass);
window.localStorage.setItem("user_id", data.user_id); window.localStorage.setItem("fullname", data.fullname); window.localStorage.setItem("email", data.email);
window.localStorage.setItem("birthdate", data.birthdate); window.localStorage.setItem("gender", data.gender); window.localStorage.setItem("phone", data.phone);
window.localStorage.setItem("is_active", data.is_active); $.mobile.hidePageLoadingMsg();
document.location.href = 'home.html'; }
},
error: function(e) {
alert("Invalid username and/or password."); $.mobile.hidePageLoadingMsg();
},
complete: function(data) {} }); $("#loginButton").removeAttr("disabled"); $("#registerButton").removeAttr("disabled"); } return false; }
4. 3. 9 Fungsi register()
Fungsi register() merupakan fungsi yang digunakan pada aplikasi untuk
melakukan proses registerasi calon member. Di halaman ini terdapat
pemberitahuan atau notifikasi jika user salah dalam mengisi beberapa field form.
Apabila user berhasil melakukan proses registrasi maka aplikasi akan kembali ke
halaman login.
Kode 4. 9 Kode Lengkap Fungsi Register
function register() {
var fname = $("#fullname").val(); var uname = $("#regUsername").val(); var regPass = $("#regPassword").val(); var cregPass = $("#cregPassword").val(); var regEmail = $("#regEmail").val(); var bDate = $("#birthdate").val(); var regGender = $("#gender").val(); var regPhone = $("#phone").val(); if (cekFullname(fname)) {
if (cekUsername(uname)) {
if (cekPassword(regPass, 5, 12)) { if (cekCPassword(regPass, cregPass)) { if (cekEmail(regEmail)) { if (statusUsername == 0) { $("#regUsername").focus(); return false; } else if (statusEmail == 0) { $("#regEmail").focus(); return false; } else { disableButtonReg(); var form_regData = { fullname: fname, username: uname, password: regPass, email: regEmail, birthdate: bDate, gender: regGender, phone: regPhone, is_ajax: 1 };
$.mobile.showPageLoadingMsg("a", "Please wait...", true);
var url = 'http://hafiz.me/hd/cekregister.php'; $.ajax({ type: 'GET', url: url, contentType: "application/json", dataType: 'jsonp', data: form_regData, crossDomain: true, success: function(res) { if (res.status == 1) {
alert("Successful register."); $("#fullname").val("");
$("#regUsername").val(""); $("#regPassword").val(""); $("#cregPassword").val(""); $("#regEmail").val(""); $("#birthdate").val(""); $("#gender").val(""); $("#phone").val(""); $.mobile.hidePageLoadingMsg(); $.mobile.changePage("#loginPage", { transition: "flip" }); } }, error: function(e) {
$alert("Register error"); $.mobile.hidePageLoadingMsg(); },
complete: function(data) {} }); enableButtonReg(); } } } } } } } $("#registerButton").removeAttr("disabled"); } return false; }
4. 3. 10 Fungsi getUserTikets()
Fungsi getUserTikets() merupakan fungsi yang digunakan pada aplikasi
untuk melakukan mengambil daftar tiket dari user yang berada di server. Jika
tidak ada data, maka halaman histori tiket adalah kosong.
Kode 4. 10 Kode Lengkap Fungsi Get User Tickets
function getUserTickets() {$.getJSON(serviceURL + 'user-‐ticket.php?user_id=' + user_id, function(data) { $('#ticketList li').remove();
userTickets = data.items; var i = userTickets.length + 1;
$.each(userTickets, function(index, ticket) { i-‐-‐;
var ht_status_pic = ticket.ht_status_pic; var sum_message = parseInt(ticket.sum_message); sum_message = sum_message + 1; // Set status style var statusColor;
if (ht_status_pic == 0) { ht_status_pic = 'Process'; statusColor = 'Process'; } else if (ht_status_pic == 1) {
ht_status_pic = 'Pending'; statusColor = 'Pending'; } else if (ht_status_pic == 2) { ht_status_pic = 'Done';
statusColor = 'Done';
} else if (ht_status_pic == 3) { ht_status_pic = 'Cancel'; statusColor = 'Cancel'; }
var isi_pesan;
var hth_isi = ticket.hth_isi;
var ht_isi_pesan = ticket.ht_isi_pesan; if (hth_isi == "") {
isi_pesan = ht_isi_pesan; } else {
isi_pesan = hth_isi; }
isi_pesan = isi_pesan.substr(0, 80); var regex = /(<([^>]+)>)/ig;
isi_pesan = isi_pesan.replace(regex, " "); var ht_date_create = ticket.ht_date_create; ht_date_create = ht_date_create.substr(0, 16);
$('#ticketList').append('<li data-‐role="divider" id="ticketKode">#' + i + ' ' + ticket.ht_kode + '<span
id="statusColor' + statusColor + '">' + ht_status_pic + '</span>' + '</li>' + '<li ticket-‐id="' + ticket.ht_id + '"><a
href="">' + '<h3>' + ticket.hkt_permasalahan + '</h3>' + '<p><strong>' + '<span>' + ht_date_create + '</span></strong> ' + ticket.hd_nama + '</p>' + '<span class="ui-‐li-‐count">' + sum_message + '</span>' + '<p style="white-‐space:normal;">' + isi_pesan + ' ...</p>' + '</a></li>');
});
$('#ticketList').listview('refresh');
$('#ticketList').children('li').bind('touchstart mousedown', dataTicketDetail); });
}
4. 3. 11 Fungsi Reply Tiket
Fungsi reply tiket merupakan fungsi yang digunakan pada aplikasi untuk
melakukan mengirim form reply di halaman reply tiket.
Kode 4. 11 Kode Lengkap Fungsi Reply Tiket
$("#sendReplyTicket").on("click", function() {$('#hth_isi').html(tinymce.get('hth_isi').getContent()); var hth_isi_reply = $("#hth_isi").val();
if (hth_isi_reply == "") {
alert("Reply minimun 5 characters."); return false;
} else {
var hth_id = "";
var hth_head_id = window.localStorage.getItem("ticket_id"); var hth_user_id_klien = window.localStorage.getItem("user_id"); var hth_user_id_staf = ""; var hth_date = ""; var hth_status_ticket = "2"; var form_replyData = { rhth_head_id: hth_head_id, rhth_user_id_klien: hth_user_id_klien,
rhth_status_ticket: hth_status_ticket, rhth_isi: hth_isi_reply,
is_ajax: 1 };
$.mobile.showPageLoadingMsg("a", "Please wait...", true); var url = 'http://hafiz.me/hd/ticket-‐reply.php';
$.ajax({ type: 'GET', url: url, contentType: "application/json", dataType: 'jsonp', data: form_replyData, crossDomain: true, success: function(res) { if (res.status == 1) {
$.mobile.hidePageLoadingMsg(); history.back();
$('#hth_isi').html(tinymce.get('hth_isi').setContent('')); }
},
error: function(e) { alert("Reply error");
$.mobile.hidePageLoadingMsg(); },
complete: function(data) {} });
}
});
