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 <?php $host = '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 <?php include( 'config/config.php' ); session_start(); //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 }?> <html> <head>
69 <title>bjsurvey System</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <table cellspacing="0" cellpadding="0" border="0" class="page" align="center"> <?php include( 'template/header.php' );?> <?php include( 'template/menu.bar.php' );?> <tr> <td class="content"> <table border="0" class="grid" cellspacing="1" cellpadding="5" class="box"> <tr> <td width="80%" class="content-right"> <table width="100%" style="border:1px black solid; borderspacing:0px;"class="box"> <tr> <td width="100%" colspan="4" class="content-title" colspan="2">survey Category</td> <tr> <td colspan="2" class="box-title">take the survey</td> <!-- Kategori Survey --> <?php include 'config/config.php'; $conn = mysql_connect( $host, $username, $password ); if(!$conn ){ die( 'Koneksi tidak berhasil: '. mysql_error() ); } $db = mysql_select_db( $database, $conn ); if(!$db ){
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)) {?> <tr> <td class="box-text" height="20px" width="80%"><?=$no?>). <?php echo $row['desc_kuisioner'];?></td> <td> <a href="survey-detail.php?idkuisioner=<?php echo $row['id_kuisioner'];?>&kuisionername=<?php echo $row['desc_kuisioner'];?>" class="form-button">survey Sekarang</a> </td> <?php $no++;} }?>
71 </table> </td> <td width="20%" class="content-left"> <?php include( 'banner.php' )?> </td> </table> </td> <?php include( 'template/footer.php' );?> </table> </body> </html> Setelah pembuatan file survey-category, penulis membuat file detail form untuk pengisian kuisioner berformat dot php (.php) dengan nama file surveydetail.php. <?php include( 'config/config.php' ); session_start(); //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 }?> <html>
72 <head> <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; } </style> <title>bjsurvey System</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <!-- lib file extjs --> <link rel="stylesheet" href="../ext-4.1.1a/resources/css/ext-all.css" type="text/css"> <script type="text/javascript" src="../ext-4.1.1a/ext-all.js"></script> <!-- lib extjs form kuisioner --> <script src="field-types1-new.php"></script> </head> <body> <table cellspacing="0" cellpadding="0" border="0" class="page" align="center"> <?php include( 'template/header.php' );?> <?php include( 'template/menu.bar.php' );?> <tr> <td class="content"> <table border="0" class="grid" cellspacing="1" cellpadding="5" class="box"> <tr> <td width="80%" class="content-right"> <div id="form-ct"></div> </td> <td width="20%" class="content-left"> <?php include( 'banner.php' )?>
73 </td> </table> </td> <?php include( 'template/footer.php' );?> </table> </body> </html> <?php include( 'template/header.php' );?> <?php include( 'template/menu.bar.php' );?> <tr> <td class="content"> <table border="0" class="grid" cellspacing="1" cellpadding="5"> <tr> <td width="80%" class="content-right"> <table width="100%" cellspacing="0" cellpadding="3" border="0"> <tr> <td class="content-title" colspan="2">halaman Survey</td> <tr> <td> <div id="form-ct"></div> </td> <tr> </table> </td> </table>
74 </td> <?php include( 'template/footer.php' );?> </table> </body> </html> 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. Deskripsi Hasil Yang Kelompok Uji Kasus Uji Fungsional Diharapkan 1. Halaman Login User Normal Memasukan Url Halaman. Menampilkan Halaman utama yaitu Login Tabel 4.2 Skenario Pengujian Black Box Testing Halaman Utama User Admin. No. Deskripsi Fungsional Kelompok Uji Kasus Uji Hasil Yang Diharapkan 1. Halaman Login Normal Memasukan Url Menampilkan User 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. Deskripsi Kelompok Fungsional Uji Kasus Uji 1. Halaman Manage Normal Memilih menu User Manage User Admin/Responden Admin/Responden. 2. Menu Tambah Normal Mengklik menu admin/responden manage admin/responden 3. Menu Ubah Normal Mengklik Menu ubah / edit. 5. Delete Normal Memilih user lalu Mengklik menu delete Hasil Yang Diharapkan Menampilkan Halaman Manage Admin/Responden Menampilkan Halaman tambah user admin/responden Menampilkan window baru untuk ubah user admin/responden Menghapus User terpilih tersebut. Tabel 4.4 Skenario Pengujian Black BoxTesting Halaman Manage Information. No. Deskripsi Kelompok Fungsional Uji Kasus Uji 1. Halaman Normal Memilih menu Manage ManageInformation. Information 2. Menu Tambah Normal Mengklik menu Information manage admin/responden 3. Menu Ubah Normal Mengklik Menu ubah / edit. Hasil Yang Diharapkan Menampilkan Halaman Manage Information Menampilkan Halaman tambah Information Menampilkan window baru untuk
88 ubah Information 5. Delete Normal Memilih informationlalu Mengklik menu delete Menghapus Informationterpilih tersebut. Tabel 4.5 Skenario Pengujian Black Box Testing Halaman Survey. No. Deskripsi Kelompok Fungsional Uji Kasus Uji 1. Halaman Survey Normal Memilih menu Survey. 2. Form Suvey Normal User mengisi form survey. Hasil Yang Diharapkan Menampilkan form survey. Menampilkan Halaman Survey. Tabel 4.6 Pengujian Black Box Testing Menu Logout No Deskripsi Kelompok Fungsional Uji Kasus Uji 1. Menu Logout Normal Melakukan klik pada button logout Hasil yang diharapkan Sistem menghapus session dan 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.