BAB IV IMPLEMENTASI DAN PENGUJIAN. online berbasis framework extjs dan php.tahap selanjutnya adalah implementasi

BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1

Implementasi Setelah melakukan tahap analisis dan tahap perancangan aplikasi survei

online berbasis framework extjs dan php.Tahap selanjutnya adalah implementasi dan pengujian. Pada tahapan implementasi terdapat dua cakupan yaitu spesifikasi kebutuhan system yang meliputi perangkat lunak (software) dan perangkat keras (hardware), juga akan dibahas mengenai kode aplikasi, implementasi pembuatan basis data, implementasi perancangan antar muka (user interface) dan pengujian aplikasi. Mulai dari pertama mengklik aplikasi sampai selesai. 4.1.1 Spesifikasi Sistem Dalam

Aplikasi

Survei

Online,

spesifikasi

kebutuhan

system

menggunakan dua buah perangkat yaitu perangkat keras (hardware) dan perangkat lunak (software). Spesifikasi kebutuhan system pada perancangan aplikasi ini adalah sebagai berikut: 1. Pernagkat keras (Hardware) a. Processor Pentium(R) Intel Core i3 b. RAM DDR3 4 GB c. VGA Nvidia GEFORCE2GB d. Hard Drive 500 Giga

66

67

2. Perangkat Lunak (Software) a. Microsoft windows 7, sistem operasi yang digunakan dalam pembuatan web ini. b. Text editor menggunakan PSPad untuk pembuatan aplikasi ini. c. XAMPP 1.7.4 d. MySQL database versi 5.5.8 e. Google Chrome sebagai browser internet 4.2

Implementasi Kode Program Pada sub bab kali ini penulis akan menjelaskan potongan potongan dari

kode sumber atau (sourcecode) Aplikasi Survey Online yang menggunakan framework Ext JS dan PHP serta pembuatan basis data tabel. 4.2.1 EXTJS dan PHP Disini penulis akan menampilkan kode EXTJS dan PHP untuk halaman utama pada form login yang dapat dilihat pada Tabel 4.1 berikut adalah kode pada form survey. Tabel 4.1 form survey. Untuk memulai pembuatan form, disini penulis membuat file berformat dot php (.php) dengan nama

file config.php

yang disimpan didalam folder

BJsurveySystem-v2/config/config.php yang berguna untuk koneksi ke dalam database
= 'localhost'; $username

= 'root';

$password

= '';

68

$database

= 'kuisioner';

mysql_connect($host,$username,$password) or die("Koneksi gagal"); mysql_select_db($database) or die("Database tidak bisa dibuka");

$upload_dir = 'C:xampp/htdocs/bjsurveysystem/upload/';

//session_start();

//require_once '../lib/function.php'; ?>

Untuk memulai pembuatan form, disini penulis membuat file berformat dot php (.php) dengan nama file survey-category.php yang disimpan didalam folder BJsurveySystem-v2/ yang berguna untuk menyeleksi user yang berada didalam database, berikut adalah kode survey-category.php
//cek apakah user sudah login if(!isset($_SESSION['username'])){ header( 'Location: index.php' ); } //cek level user if($_SESSION['level']!="admin" && $_SESSION['level']!="user"){ die("Anda bukan admin");//jika bukan admin dan user jangan lanjut } ?>

69


cellspacing="0"

cellpadding="0"

border="0"

class="page"

align="center">
70

die( 'Tidak berhasil terkoneksi ke database: ' . mysql_error() ); } /* Query: mengambil semua record pada*/ $sql = mysql_query("SELECT * FROM tbl_kuisioner ORDER BY id_kuisioner ASC", $conn); /* Jika gagal query, cetak pesan kesalahanya */ if (!$sql) { die('Gagal query: ' . mysql_error()); } /* Hitung total record yg didapat berdasarkan query sebelumnya */ $total = mysql_num_rows($sql); /* Jika total record yg didapat lebih dari NOL / record ada, cetak isi recordnya */ if ($total > 0) { /* Ambil record dalam looping */ $no = 1; while($row = mysql_fetch_array($sql)) { ?>

71

width="100%" style="border:1px black solid; border- spacing:0px;"class="box">
Survey Category
Take the survey
).	href="survey-detail.php?idKuisioner= echo $row['id_kuisioner'];?>&kuisionerName=" class="form-button">Survey Sekarang

Setelah pembuatan file survey-category, penulis membuat file detail form untuk pengisian kuisioner berformat dot php (.php) dengan nama file surveydetail.php.
//cek apakah user sudah login if(!isset($_SESSION['username'])){ header( 'Location: index.php' ); } //cek level user if($_SESSION['level']!="admin" && $_SESSION['level']!="user"){ die("Anda bukan admin");//jika bukan admin dan user jangan lanjut } ?>

72

<style type="text/css"> .x-message-box .ext-mb-download { background: url("../ext-4.1.1a/skripsi/js/images/download.gif") no-repeat scroll 6px 0px transparent; height: 52px!important; } <script type="text/javascript" src="../ext-4.1.1a/ext-all.js"> <script src="field-types1-new.php">

73

Halaman Survey

74



4.2.2 Implementasi Pembuatan Basis data Pada implementasi pembuatan basis data ini perangkat lunak yang digunakan yaitu XAMPP MYSQL.Pada implementasi kali ini menampilkan basis data dari tabel tabel fungsional seperti tabel history_bimbingan, tabel idmaping_mhs, tabel tbl_berita, tabel tbl_informasi, tabel tbl_pesan, tabel user. Keterangan dari masing masing tabel telah dijelaskan pada tahapan analaisis perancangan pada bab 3. 1. Implementasi pembuatan database kuisioner Implementasi pembuatan basis data pada database kuisioner ditunjukan pada gambar 4.1 sebagai berikut.

Gambar 4.1 Implementasi Pembuatan database kuisioner

75

Gambar 4.2 Tampilan database kuisioner

2. Implementasi Pembuatan Tabel tb_about Implementasi pembuatan basis data pada tabel tb_about ditunjukan pada gambar 4.3 sebagai berikut.

Gambar 4.3 Implementasi Pembuatan tabel tb_about Tampilan tabel tb_about terdapat pada gambar 4.4 sebagai berikut.

76

Gambar 4.4 Tampilan tabel tb_about pada database kuisioner.

3. Implementasi Pembuatan Tabel tbl_hasil Implementasi pembuatan basis data pada tabel tbl_hasilditunjukan pada gambar 4.5 sebagai berikut.

Gambar 4.5 Implementasi Pembuatan tabel tbl_hasil Tampilan tabel tbl_hasilterdapat pada gambar 4.6 sebagai berikut.

Gambar 4.6 Tampilan tabel tbl_hasil pada Database Kuisioner. 4. Implementasi Pembuatan Tabel tb_Information

77

Implementasi pembuatan basis data pada tabel tb_Information ditunjukan pada gambar 4.7 sebagai berikut.

Gambar 4.7 Implementasi Pembuatan tabel tb_information Tampilan tabel information terdapat pada gambar 4.8 sebagai berikut.

Gambar 4.8 Tampilan tabel information pada database kuisioner.

5. Implementasi Pembuatan Tabel tbl_kuisioner Implementasi pembuatan basis data pada tabel sidang ditunjukan pada gambar 4.9 sebagai berikut.

78

Gambar 4.9 Implementasi Pembuatan tabeltbl_kuisioner

Tampilan tabel tb_kuisioner terdapat pada gambar 4.10 sebagai berikut.

Gambar 4.10 Tampilan tabel tbl_kuisioner pada database kuisioner. 6. Implementasi Pembuatan Tabel tb_user Implementasi pembuatan basis data pada tabel tb_user ditunjukan pada gambar 4.11 sebagai berikut.

Gambar 4.11 Implementasi Pembuatan tabel tb_user Tampilan tabel tb_user terdapat pada gambar 4.12 sebagai berikut.

79

Gambar 4.12 Tampilan tabel tb_user pada database kuisioner. 7. Implementasi Pembuatan Tabel tbl_question Implementasi pembuatan basis data pada tabel tb_user ditunjukan pada gambar 4.13 sebagai berikut.

Gambar 4.13 Implementasi Pembuatan tabel tb_user

Tampilan tabel tb_user terdapat pada gambar 4.14 sebagai berikut.

Gambar 4.14 Tampilan tabel tb_user pada database kuisioner.

80

4.3 Implementasi Perancangan Antarmuka (Interface) Implementasi antarmuka merupakan hasil dari perancangan user interface yang sebelumnya sudah dilakukan pada tahap perancangan. Pada implementasi antarmuka menampilkan rancangan halaman dan potongan program dari beberapa menu fungsional seperti menu home, manage admin/responden, manage information, manage contact us, manage about us dan logout. 4.4Implementasi perancangan antarmuka dari user dan admin. 4.4.1 Implementasi halaman utama Halaman utama situs web adalah halaman yang akan didapatkan oleh semua pengguna situs web, default dari halaman utama adalah halaman index yang didalamnya terdapat header link menuju halaman – halaman situs web yang dituju. Gambar 4.13merupakan gambar halaman tampilan utama aplikasi Bimbingan Online yang berisi form login, Tutorial pendaftaran user baru dan form berita terbaru. Berikut adalah tampilan halaman utama:

81

Gambar 4.13 Tampilan halaman utama web. Halaman ini adalah halaman utama aplikasi Survey Online yang akan muncul pertama kali setelah memasukan url http://localhost/BJsurveySystem-v2/ . 4.4.2 Implementasi Halaman Home Admin Halaman Home adalah halaman yang akan didapatkan berdasarkan Proses login yang telah membaca data user dari database dan membedakan user berdasarkan jabatan. Gambar 4.14merupakan gambar halaman Home aplikasi Survey Online yang berisi form pemberitahuan terbaru. Berikut adalah tampilan halaman Home admin:

82

Gambar 4.14 Tampilan Halaman Home Admin 4.4.3 Implementasi Halaman Manage Admin/Responden Halaman mange admin/responden adalah halaman yang akan menampilkan semua data – data dari user yang telah melakukan proses register. Gambar 4.17

merupakan gambar halaman admin/responden aplikasiSurvey Online yang berisi form tentang semua data – data user itu sendiri. Berikut adalah tampilan halaman manage admin/responden:

Gambar 4.15 Tampilan Halaman Manage Admin/Responden.

83

4.4.4 Implementasi Halaman Manage Information. Halaman manage information adalah halaman yang berfungsi untuk melihat informasi yang akan diberikan kepada responden. Gambar 4.16merupakan gambar halaman manage information untuk user admin, berikut adalah tampilan halaman manage information:

Gambar 4.16 Tampilan Halaman Manage Information. 4.4.5 Implementasi Halaman Survey Halaman manage information adalah halaman yang menampilkan form kuisioner yang akan diberikan kepada responden. Gambar 4.17merupakan gambar halaman survey untuk user responden, berikut adalah tampilan halaman survey:

84

Gambar 4.17 Tampilan Halaman Survey

4.4.6 Implementasi Halaman Manage Kuisioner Halaman mange kuisioner adalah halaman yang akan menampilkan semua data – data penambahan judul kuisioner dan penambahan pertanyaan kuisioner. Gambar 4.18

merupakan gambar halaman manage kuisioner aplikasi Survey Online yang berisi form tentang semua data – data judul dan pertanyaan kuisioner itu sendiri. Berikut adalah tampilan halaman manage kuisioner:

Gambar 4.18 Tampilan Halaman Manage Kuisioner

85

4.5 Pengujian Setelah tahap implementasi maka tahap selanjutnya adalah tahap pengujian.Pengujian program aplikasi ini dilakukan dengan metode Black box testing.Metode black box ini merupakan pengujian program berdasarkan fungsi dari program.Tujuan dari metode black box testing ini adalah untuk menemukan kesalahan fungsi pada program. 4.5.1 Skenario pengujian black box Skenario pengujian merupakan pengujian terhadap aplikasi survey Onlineyang dibangun menggunakan Framework Ext JS dan PHP. Skenario pengujian meliputi pengujian perangkat lunak terhadap fungsionalitas aplikasi yang berfungsi untuk menguji kesesuaian terhadap proses yang terjadi di dalam sistem. Pengujian program yang diterapkan pada aplikasi Survey Online berbasis web yang dibangun menggunakan teknik Framework Ext JS dan PHP ini menggunakan metode black box testing, dimana metode ini lebih menitikberatkan kebutuhan fungsi dari suatu program aplikasi pembuatan web data alumni mahasiswa. Pengujian metode ini dilakukan dengan cara memberikan sejumlah masukan pada program yang kemudian diproses sesuai dengan kebutuhan fungsionalnya untuk menghasilkan keluaran yang diinginkan. Apabila hasil keluaran yang diberikan proses sesuai dengan spesifikasi yang dirancang, maka program Survey Online dianggap benar. Akan tetapi apabila hasil keluaran yang dihasilkan tidak sesuai dengan kebutuhan fungsionalnya, maka masih terdapat kesalahan – kesalahan pada aplikasi tersebut.

86

4.5.2 Skenario Pengujian Aplikasi Tabel 4.1 Skenario Pengujian Black Box Testing Halaman Utama atau Login Aplikasi.

No. 1.

Deskripsi Fungsional Halaman Login

Kelompok Uji Normal

User

Kasus Uji

Hasil Yang Diharapkan

Memasukan Url

Menampilkan Halaman

Halaman.

utama yaitu Login

Tabel 4.2 Skenario Pengujian Black Box Testing Halaman Utama User Admin.

No. 1.

Deskripsi

Kelompok

Fungsional

Uji

Halaman Login

Normal

User

Kasus Uji

Hasil Yang Diharapkan

Memasukan Url

Menampilkan

Halaman.

Halaman utama yaitu Login

Data : benar

Memasukkan

Sistem melakukan

username dan

validasi terhadap

password pada

username dan

form login admin

password kemudian sistem akan menampilkan halaman home admin.

Data : salah

Memasukkan

Sistem akan

username dan

mengembalikan user

password pada

(admin) ke halaman

form login admin

Utama

87

Tabel 4.3 Skenario Pengujian Black BoxTesting Halaman Manage User Admin/Responden.

No. 1.

2.

Deskripsi

Kelompok

Fungsional

Uji Normal

Hasil Yang

Kasus Uji

Diharapkan

Memilih menu

Menampilkan

User

Manage User

Halaman Manage

Admin/Responden

Admin/Responden.

Admin/Responden

Mengklik menu

Menampilkan

manage

Halaman tambah

admin/responden

user

Halaman Manage

Menu Tambah

Normal

admin/responden

admin/responden 3.

Menu Ubah

Normal

Mengklik Menu ubah

Menampilkan

/ edit.

window baru untuk ubah user admin/responden

5.

Delete

Normal

Memilih user lalu

Menghapus User

Mengklik menu delete

terpilih tersebut.

Tabel 4.4 Skenario Pengujian Black BoxTesting Halaman Manage Information.

No. 1.

Deskripsi

Kelompok

Fungsional

Uji

Halaman

Normal

Manage

Kasus Uji

Menu Tambah

Menampilkan

ManageInformation.

Halaman Manage

Information Normal

Information 3.

Menu Ubah

Diharapkan

Memilih menu

Information 2.

Hasil Yang

Normal

Mengklik menu

Menampilkan

manage

Halaman tambah

admin/responden

Information

Mengklik Menu ubah /

Menampilkan

edit.

window baru untuk

88

ubah Information 5.

Delete

Normal

Memilih

Menghapus

informationlalu

Informationterpilih

Mengklik menu delete

tersebut.

Tabel 4.5 Skenario Pengujian Black Box Testing Halaman Survey.

No. 1.

Deskripsi

Kelompok

Fungsional

Uji

Halaman Survey

2.

Form Suvey

Normal

Normal

Kasus Uji

Hasil Yang Diharapkan

Memilih menu

Menampilkan form

Survey.

survey.

User mengisi

Menampilkan

form survey.

Halaman Survey.

Tabel 4.6 Pengujian Black Box Testing Menu Logout No 1.

Deskripsi

Kelompok

Fungsional

Uji

Menu Logout

Normal

Kasus Uji

Hasil yang diharapkan

Melakukan klik pada

Sistem menghapus session dan

button logout

menampilkan halaman utama aplikasi

4.5.2 Analisa Hasil Pengujian Dari hasil pengujian di atas maka dapat dianalisa: 1. Antara aplikasi dengan basis data dapat terkoneksi dan tidak ada kesalahan. Hal tersebut dilihat dari tampilnya halaman-halaman yang terkoneksi dengan basis data, baik pada halaman utama dari tiap-tiap menu maupun halaman input dan edit. Dengan koneksi tersebut maka user dapat menggunakan sesuai dengan haknya masing-masing.

89

2. Fungsi session dapat berjalan. Hal tersebut terlihat ketika seorang user mencoba untuk mengakses kedalam sistem tanpa login terlebih dahulu, maka secara otomatis sistem akan menampilkan halaman login.. 3. User tidak dapat masuk kedalam sistem jika belum melakukan login dengan benar, yaitu memasukkan username dan password yang sesuai dengan data pada basis data. 4. Proses memasukkan, mengubah, menghapus, merefreshdata pada tiap-tiap menu dapat berjalan dengan baik. Data-data tersebut akan ditampilkan pada halaman utama dari masing-masing menu. 5. Proses keluar (logout) dari sistem dapat berjalan dengan baik. Saat usermenekan link logout maka userakan keluar dari sistem dan disertai dengan pemutusan session sehingga proses verifikasi saat akan login dapat berjalan dengan baik dan session akan berjalan dari awal.