BAB IV IMPLEMENTASI DAN PENGUJIAN

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

53

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

54

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 agreement instalasi, ikuti langkahnya.

55

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

Install Android SDK 8. Kemudian pilih Windows > Android Virtual Device Manager, pilih new Gambar 4. 4

lalu buat Emulator sesuai spesifikasi yang diinginkan.

56

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:

57

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 <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"> Hello World

58

Apache Cordova

Connecting to Device

Device is Ready

<script src="cordova-‐ 2.4.0.js" type="text/javascript"> <script src="js/index.js" t ype="text/javascript"> <script type="text/javascript"> app.initialize();

4. 3. 2

Tampilan Halaman Login

Gambar 4. 7 Tampilan Halaman Login

59

Berdasarkan gambar diatas adalah halaman untuk member dan operator melakukan login ke halaman histori tiket. Kode 4. 2 Kode Lengkap Halaman Login

Username:

Password:

Login

Register

60

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

Register Page

Fullname:

Username:

Password:

Confirm Password:

Email:

Date of Birth (YYYY/MM/DD) :

Please choose: <select id="gender" name="gender">

Phone:

62

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

Your Tickets
New

63

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

Back
Ticket Detail
Reply

64

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

Cancel
Reply Ticket

<select id="kategori" name="kategori">

4. 3. 8

Fungsi ceklogin()

66

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

67

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

68

$("#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) {

69

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('
#' + i + ' ' + t id="statusColor' + statusColor + '">' + ht_status_pic + '' + '
' + '
' + '
' + ticket.hkt_permasalahan + '
' + '
<strong>' + '<span>' + ht_ class="ui-‐li-‐count">' + sum_message + '' + '
' + }); $('#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,

70

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

4. 4

Pengujian Agar hasil implementasi benar-benar memenuhi kebutuhan maka dilakukan

pengujian terhadap system. Pengujian dilakukan dengan metode pengujian black box yang berfokus pada persyaratan fungsional aplikasi mobile.

4. 4. 1

Rencana Pengujian Black Box Metode yang diambil adalah metode pengujian Black Box. Pengujian

Black Box adalah pengujian yang systemnya tanpa memperhatikan

struktur

logika internal perangkat lunak. Metode ini digunakan untuk mengetahui apakah perangkat lunak berfungsi dengan benar. Berikut ini adalah rencana pengujian yang dilakukan dengan menggunakan metode black box :

71

Tabel 4. 1 Tabel Skenario Pengujian Aplikasi Seluler Sistem Meja Bantu Item Uji

Sifat

Pengujian

Hasil yang diharapkan

Login

Normal

Pengguna mengisi form login

Menampilkan halaman histori tiket

Register Member

Normal

Pengguna pilih menu register

Aplikasi menampilkan halaman register

Register Member

Normal

Validasi form register

Aplikasi menampilkan pemberitahuan

Register Member

Normal

Pengguna menyimpan form register

Aplikasi memberikan pemberitahuan

Histori Tiket

Normal

Tampilkan daftar tiket user

Aplikasi menampilkan daftar tiket pengguna

Detail Tiket

Normal

Pengguna memilih tiket

Aplikasi menampilkan detail tiket

Tiket Baru

Normal

Pengguna memilih menu tiket baru

Aplikasi menampilkan halaman buat tiket baru

Tiket Baru

Normal

Pengguna memilih kategori tiket

Aplikasi menampilkan kategori tiket

Tiket Baru

Normal

Pengguna memilih submit form


Reply Tiket

Normal

Pengguna memilih tombol reply setelah memilih tiket

Aplikasi menampilkan form reply tiket

Reply Tiket

Normal

Pengguna memilih tombol submit form


Normal

Pengguna memilih menu logout

Menghapus local storage dan keluar aplikasi kembali ke halaman login

Logout

Tabel 4. 2 Tabel Hasil Pengujian Aplikasi Seluler Sistem Meja Bantu Hasil yang Hasil Hasil Skenario Sifat Pengujian diiginkan pengujian pengujian

Status akhir

72

yang sesuai

Normal


Tidak Normal


Normal

Pengguna pilih menu register

Login

Register Member Tidak Normal

pilih menu register

Normal


Tidak Normal


Register Member

Menampilkan halaman login Tidak dapat menampilkan halaman login Aplikasi menampilkan halaman register Tidak dapat menampilkan halaman register Aplikasi menampilkan pemberitahuan field bermasalah

yang tidak sesuai

Dapat menampilkan halaman login

Sukses Tidak dapat menampilkan halaman login

Dapat menampilkan halaman register

Sukses Tidak dapat menampilkan halaman register

Tidak dapat menampilkan validasi form register

Aplikasi Pengguna memberikan menyimpan pemberitahuan Menampilkan Normal bahwa form pesan form register berhasil disimpan Register Aplikasi tidak Member dapat Pengguna memberikan Tidak dapat Tidak menyimpan pemberitahuan Menampilkan Normal form pemberitahuan pesan register form berhasil disimpan Aplikasi Aplikasi Tampilkan Histori menampilkan menampilkan Normal daftar tiket Tiket daftar tiket daftar tiket user pengguna pengguna Tabel 4.2 (Lanjutan ) Tabel Hasil Pengujian Aplikasi Seluler Sistem Meja Bantu Skenario

Sifat

Pengujian

Hasil yang diiginkan

Hasil pengujian yang sesuai

Tidak Sukses

Sukses

Tidak dapat menampilkan validasi form register

Aplikasi tidak menampilkan pemberitahuan

Tidak Sukses

Hasil pengujian yang tidak

Tidak Sukses

Sukses

Tidak Sukses

Sukses

Status akhir

73

Histori Tiket

Detail Tiket

Tidak Normal

Tampilkan daftar tiket user

Normal


Tidak Normal


Normal


Tidak Normal


Tiket Baru

Normal Tiket Baru Tidak Normal

Pengguna memilih kategori tiket Pengguna memilih kategori tiket

Aplikasi tidak menampilkan daftar tiket pengguna Aplikasi menampilkan detail tiket Aplikasi tidak dapat menampilkan detail tiket Aplikasi menampilkan halaman tiket baru Aplikasi tidak dapat menampilkan halaman tiket baru Aplikasi menampilkan kategori tiket

sesuai Aplikasi tidak menampilkan daftar tiket pengguna Aplikasi menampilkan detail tiket

Normal

Pengguna Aplikasi memilih menampilkan submit form pemberitahuan

Tidak Normal

Aplikasi tidak Pengguna menampilkan memilih pemberitahuan submit form form berhasil disimpan

Tiket Baru

Sukses Aplikasi tidak dapat menampilkan detail tiket

Aplikasi menampilkan halaman buat tiket baru

Tidak Sukses

Sukses Aplikasi tidak dapat menampilkan halaman buat tiket baru

Aplikasi menampilkan kategori tiket

Aplikasi tidak dapat menampilkan kategori tiket

Tidak Sukses

Tidak Sukses

Sukses Aplikasi tidak dapat menampilkan kategori tiket

Aplikasi menampilkan pemberitahua n form berhasil disimpan

Sukses

Sukses

Aplikasi tidak dapat menampilkan pemberitahuan form berhasil disimpan

Tidak Sukses

Tabel 4.2 (Lanjutan ) Tabel Hasil Pengujian Aplikasi Seluler Sistem Meja Bantu

Skenario

Sifat

Pengujian

Hasil yang diiginkan

Hasil pengujian yang sesuai

Hasil pengujian yang tidak sesuai

Status akhir

74

Normal Reply Tiket Tidak Normal

Normal Reply Tiket Tidak Normal

Logout

Pengguna memilih tombol reply setelah pilih tiket Pengguna memilih tombol reply setelah memilih tiket Pengguna memilih tombol submit form Pengguna memilih tombol submit

Normal


Tidak Normal




Aplikasi tidak dapat menampilkan form reply tiket

Aplikasi menampilkan pemberitahuan Aplikasi tidak dapat menampilkan pemberitahuan Menghapus local storage dan keluar aplikasi kembali ke halaman login Tidak dapat menghapus local storage dan keluar aplikasi kembali ke halaman login

Sukses

Aplikasi tidak dapat menampilkan form reply tiket


Tidak Sukses

Sukses

Aplikasi tidak menampilkan pemberitahuan

Keluar aplikasi

Tidak Sukses

Sukses

Tidak keluar dari aplikasi

Tidak Sukses

BAB IV IMPLEMENTASI DAN PENGUJIAN

Recommend Documents

Apache Cordova

Register Page

Your Tickets

Ticket Detail

Reply Ticket

Make New Ticket

' + ticket.hkt_permasalahan + '