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

(1)

66 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

(2)

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 = '';

(3)

$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>

(4)

<title>BJsurvey System</title>

<body>

<?php include( 'template/header.php' ); ?> <?php include( 'template/menu.bar.php' ); ?> <tr>

<tr>

<td width="100%" colspan="4" class="content-title" colspan="2">Survey Category</td>

</tr> <tr>

<td colspan="2" class="box-title">Take the survey</td> </tr>

<?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 ){

(5)

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>

<a href="survey-detail.php?idKuisioner=<?php echo $row['id_kuisioner'];?>&kuisionerName=<?php echo $row['desc_kuisioner']; ?>" class="form-button">Survey Sekarang</a> </td> </tr> <?php $no++;} } ?>

(6)

</table> </td> <td width="20%" class="content-left"> <?php include( 'banner.php' ) ?> </td> </tr> </table> </td> </tr> <?php include( 'template/footer.php' ); ?> </tr> </table> </body> </html>

Setelah pembuatan file survey-category, penulis membuat file detail form untuk pengisian kuisioner berformat dot php (.php) dengan nama file survey-detail.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>

(7)

<head>

.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>

<body>

<?php include( 'template/header.php' ); ?> <?php include( 'template/menu.bar.php' ); ?> <tr>

(8)

</td> </tr> </table> </td> </tr> <?php include( 'template/footer.php' ); ?> </tr> </table> </body> </html> <?php include( 'template/header.php' ); ?> <?php include( 'template/menu.bar.php' ); ?> <tr> <td class="content">

<td class="content-title" colspan="2">Halaman Survey</td> </tr> <tr> <td> <div id="form-ct"></div> </td> </tr> <tr> </table> </td> </tr> </table>

(9)

</td> </tr> <?php include( 'template/footer.php' ); ?> </tr> </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.

(10)

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.

(11)

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

(12)

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.

(13)

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.

(14)

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.

(15)

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:

(16)

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:

(17)

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:

(18)

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:

(19)

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:

(20)

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.

(21)

4.5.2 Skenario Pengujian Aplikasi

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

No. Deskripsi

Fungsional Kelompok Uji Kasus Uji

Hasil Yang 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

1. Halaman Login User

Normal Memasukan Url Halaman.

Menampilkan Halaman utama yaitu Login

Data : benar Memasukkan username dan password pada form login admin

Sistem melakukan validasi terhadap username dan password kemudian sistem akan menampilkan halaman home admin.

Data : salah Memasukkan username dan password pada form login admin

Sistem akan

mengembalikan user (admin) ke halaman Utama

(22)

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

Kelompok

1. Halaman Manage User

Admin/Responden

Normal Memilih menu Manage User Admin/Responden. Menampilkan Halaman Manage Admin/Responden 2. Menu Tambah admin/responden

Normal Mengklik menu manage admin/responden Menampilkan Halaman tambah user admin/responden

3. Menu Ubah Normal Mengklik Menu ubah

/ edit.

Menampilkan window baru untuk ubah user

admin/responden

5. Delete Normal Memilih user lalu

Mengklik menu delete

Menghapus User terpilih tersebut.

Tabel 4.4 Skenario Pengujian Black BoxTesting Halaman Manage Information.

Kelompok

1. Halaman Manage Information

Normal Memilih menu

ManageInformation. Menampilkan Halaman Manage Information 2. Menu Tambah Information

Normal Mengklik menu manage

admin/responden

Menampilkan Halaman tambah Information 3. Menu Ubah Normal Mengklik Menu ubah /

edit.

Menampilkan window baru untuk

(23)

ubah Information

5. Delete Normal Memilih

informationlalu Mengklik menu delete

Menghapus

Informationterpilih tersebut.

Tabel 4.5 Skenario Pengujian Black Box Testing Halaman Survey.

Kelompok

1. Halaman Survey Normal Memilih menu Survey.

Menampilkan form survey.

2. Form Suvey Normal User mengisi

form survey.

Menampilkan Halaman Survey.

Tabel 4.6 Pengujian Black Box Testing Menu Logout

No Deskripsi Fungsional

Kelompok

Uji Kasus Uji Hasil yang diharapkan

1. Menu Logout Normal Melakukan klik pada button logout

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.

(24)

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.