BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Setelah melakukan analisis dan perancangan terhadapat aplikasi yang dibuat, tahapan selanjutnya adalah implementasi dan pengujian.pada tahapan pengujian terdapat dua cakupan spesifikasi kebutuhan system yang meliputi perangkat keras dan perangkat lunak.implementasi pada aplikasi ini meliputi Implementasi program, basis data dan tampilan antar muka. 4.1.1 Spesifikasi Kebutuhan Sistem Dalam aplikasi ini spesifikasi kebutuhan system menggunakan dua buah perangkat yaitu perangkat keras dan perangkat lunak.berikut kebutuhan sistem ini dibuat dengan : 1. Perangkat Keras a. Processor intel Pentium Dual Core b. Memori 1GB c. Hardisk d. Papan ketik (keyboard) dan tetikus (mouse) 2. Perangkat Lunak a. Operating system b. Xampp c. PHP d. HTML e. MySQL 4.1.2 Implementasi Aplikasi Pada subbab ini, akan dijelaskan mengenai tahapan-tahapan dalam pembuatan aplikasi ini yang meliputi proses pengkodean, implementasi basisdata, dan implementasi bentuk tampilan antar muka. Berikut ini adalah tahapan-tahapan pembuatan aplikasi ini : 69
70 4.1.2.1 Implementasi Basisdata Dalam pembuatan database menggunakan Phpmyadmin seperti gambar dibawah ini.adapun langkah langkah dalam pembuatan database MySQL adalah sebagai berikut : 1. Pertama tama masuk kedalam browser lalu ketik LOCALHOST maka akan muncul tampilan seperti dibawah ini Gambar 4.1 Tampilan Localhost 2. Membuka halaman phpmyadmin untuk membuat database Gambar 4.2 Tampilan untuk php Myadmin
71 3. Pembuatan Tabel Admin Pembuatan tabel admin dimaksudkan untuk identifikasi admin yang mengakses aplikasi ini.berikut ini tabel admin dalam basisdata ujian_online Gambar 4.3 Tampilan untul tabel admin 4. Pembutan table user Pembuatan tabel user dimaksudkan untuk identifikasi user yang mengakses aplikasi ini. Berikut ini table admin dalam basisdata ujian_online Gambar 4.4 Tampilan untuk tabel user
72 5. Pembuatan Tabel soal Dalam tabel soal ini terdapat data-data soal yang dapat dikerjakan melalui halaman user.berikut adalah tabel soal seperti terlihat pada gambar dibawah ini : Gambar 4.5 Tampilan untuk tabel soal 6. Pembuatan tabel soal cerita Dalam tabel soal ini terdapat data-data soal cerita untuk melengkapi pertanyaan soal-soal ujian yang berbentuk soal cerita. Berikut adalah tabel soal cerita seperti terlihat pada gambar dibawah ini : Gambar 4.6 Tampilan untuk tabel soal cerita
73 7. Pembuatan tabel nilai Dalam tabel nilai ini terdapat data-data nilai yang dapat dilihat melalui halaman user. Berikut adalah tabel soal seperti terlihat pada gambar dibawah ini : Gambar 4.7 Tampilan untuk tabel nilai 4.1.2.2 Implementasi Antar Muka Login User Halaman ini dibuat untuk user yang akan mendaftar sebagai peserta latihan ujian dan login user untuk mengikuti latihan ujian, user yang akan mendaftar sebagai peserta wajib mengisi form yang telah disediakan dan user yang akan mengikuti latihan ujian wajib login dengan memasukan username dan password dengan benar, apabilah salah memasukan username dan password maka apikasi meminta untuk memasukan kembali username dan password dengan benar. Berikut adalah tampilan antar muka daftar dan login user : Gambar 4.8 Tampilan antar muka daftar dan login user
74 Berikut ini potongan program dari halaman login user $query=mysql_query("select * from tabel_user where username='$username' and password='$password'"); echo $query; $cek=mysql_num_rows($query); $data=mysql_fetch_array($query); //print_r($data); exit; > untuk menampilkan data array if($cek){ $_SESSION['username']=$username; $_SESSION['id_user']=$data['id_user']; $_SESSION['gambar_user']=$data['gambar_user'];?> 4.1.2.3 Implementasi Antar Muka Mengerjakan Latihan Ujian Halaman ini dibuat untuk melatih kemampuan user dalam mengerjakan latihan soal-soal ujian yang disediakan secara random, user dapat mengerjakan soal-soal tersebut dengan cara memiih salah satu jawaban dari empat pilihan jawaban, apabila user telah menjawab semua soal dan merasa yakin dengan jawabannya maka user dapat memilih tombol jawab untuk mengetahui hasil yang didapat. Berikut adalah tampilan antar muka user mengerjakan soal latihan ujian: Gambar 4.9 Tampilan antar muka mengerjakan soal latihan ujian user
75 Berikut ini potongan program dari halaman mengerjakan soal latihan secara acak <h1>latihan Ujian echo ucwords($_session['username']);?></h1> <p> $jumlah = 0; $nourut = 1; $html = ''; //soal cerita $cerita=mysql_query("select * from cerita_soal ORDER BY RAND() LIMIT 3"); while($row = mysql_fetch_array($cerita,mysql_assoc)) { $soal_cerita = $row['cerita_soal']; $id_cerita = $row['id_cerita']; $html.= '<div style="text-align:left"><font color="#ffffff">'. $soal_cerita.'</font></div>'; $soal = mysql_query("select * from soal where publish='yes' and id_cerita='".$id_cerita."'"); while($rowsoal = mysql_fetch_array($soal,mysql_assoc)){ $id =$rowsoal["id_soal"]; $gambar_soal= empty($rowsoal["gambar_soal"])? '' : '<tr><td colspan="3"> <font color="#ffffff"></font><img src="'.$rowsoal["gambar_soal"].'" width=200px" height=50px"/></td></tr>'; $pertanyaan=$rowsoal["pertanyaan"]; $pilihan_a=$rowsoal["pilihan_a"]; 4.1.2.4 Implementasi Antar Muka Melihat Daftar Nilai Halaman ini dibuat untuk menampilkan daftar nilai user yang telah mengerjakan soal latihan ujian.halaman ini dimaksudkan supaya user bisa mengevaluasi kembali mengenai kemampuannya dalam menjawab soal-soal
76 latihan ujian. Berikut gambar tampilan antar muka daftar nilai seperti pada gambar dibawah ini : Gambar 4.10 Tampilan antar muka daftar nilai user Berikut ini potongan program dari halaman daftar nilai user if(isset($_session['id_user'])){ $id_user=$_session['id_user'];?> <h1>nilai echo ucwords($_session['username']);?></h1> <p><table class="datatable"> <tr><th>no</th><th>benar</th><th>salah</th><th>kosong</th><th>skor </th><th>tanggal</th></tr> $no=0; $query=mysql_query("select * from tabel_nilai where id_user='$id_user'");?> while($row=mysql_fetch_array($query)){ 4.1.2.5 Implementasi Antar Muka Melihat Grafik Perkembangan Halaman ini dibuat untuk menampilkan Grafik Perkembangan dari hasil user yang telah mengerjakan soal latihan ujian. Halaman ini dimaksudkan supaya user dapat melihat perkembangan dalam mengerjakan soal latihan ujian dalam berupa grafik garis.. Berikut gambar tampilan antar muka grafik user seperti pada gambar dibawah ini:
77 Gambar 4.11 Tampilan antar muka grafik user Berikut ini potongan program dari halaman grafik user //KoneksiKe database $link = connecttodb(); //Generate the graph element $strxml = "<graph caption='hasil Ujian Online' subcaption='' pieslicedepth='30' showborder='1' shownames='1' formatnumberscale='0' numbersuffix='' decimalprecision='0'>"; // Menampilkan semua record $strquery = "SELECT point,date_format(tanggal,'%d/%m/%y') as tanggal2 FROM tabel_nilai where id_user = '$id_user' ORDER BY tanggal DESC LIMIT 5 "; $result = mysql_query($strquery) or die(mysql_error()); if ($result) { while($ors = mysql_fetch_array($result)) { $strxml.= "<set name='". $ors['tanggal2']. "' value='". $ors['point']. "' />"; //free the resultset //mysql_free_result($result2); }} mysql_close($link); //Finally, close <graph> element $strxml.= "</graph>";
78 //Create the chart - Pie 3D Chart with data from $strxml echo renderchart("grafik/fusioncharts/fcf_line.swf", "", $strxml, "FactorySum", 350, 350);?> 4.1.2.6 Implementasi Antar Muka Login Admin Halaman ini dibuat untuk admin yang akan mengelola soal-soal latihan ujian, admin diwajibkan mengisi username dan password dengan benar untuk masuk ke halaman admin, apabila admin salah memasukan username dan password maka aplikasi kembali ke halaman login. Berikut gambar tampilan antar muka login admin : Gambar 4.12 Tampilan antar muka login admin Berikut ini potongan program dari halaman login admin session_start(); if (isset($_post['login'])){ include ("../koneksi.php"); $username=htmlentities((trim($_post['username']))); $password=htmlentities(md5($_post['password'])); $login=mysql_query("select * from admin where username='$username' and password='$password'"); $cek_login=mysql_num_rows($login); if (empty($cek_login)){ echo "<script> document.location.href='index.php?status=password Anda salah!'; </script>";
79 4.1.2.7 Implementasi Antar Muka Input Soal Cerita Halaman ini dibuat untuk admin yang akan meng input soal latihan ujian yang berupa soal cerita dengan beberapa pertanyaan yang akan diinput dihalaman input soal admin dengan mengisikan id soalnya. Berikut gambar tampilan antar muka Input soal cerita admin dapat dilihat dibawah ini: Gambar 4.13 Tampilan antar muka Input Soal Cerita Admin Berikut ini potongan program dari halaman Input soal cerita admin if(isset($_session['id_admin'])){ include ("../koneksi.php"); if (isset($_post['submit'])){ $id_cerita=ucwords(htmlentities((trim($_post['id_cerita'])))); $cerita_soal=ucwords(htmlentities((trim($_post['cerita_soal'])))); 4.1.2.8 Implementasi Antar Muka Input Soal oleh Admin Halaman ini dibuat untuk admin yang akan meng input soal latihan ujian yang berupa soal-soal Bahasa Inggris dan pertanyaan dari soal-soal cerita. Berikut gambar tampilan antar muka Input soal admin dapat dilihat dibawah ini:
80 Gambar 4.14 Tampilan antar muka Input Soal Admin Berikut ini potongan program dari halaman Input soal admin if(isset($_session['id_admin'])){ include ("../koneksi.php"); if (isset($_post['submit'])){ $cerita_soal=ucwords(htmlentities((trim($_post['id_cerita'])))); $gambar_soal=ucwords(htmlentities((trim($_post['gambar_soal'])))); $pertanyaan=ucwords(htmlentities((trim($_post['pertanyaan'])))); $pilihan_a=ucwords(htmlentities((trim($_post['pilihan_a'])))); $pilihan_b=ucwords(htmlentities((trim($_post['pilihan_b'])))); $pilihan_c=ucwords(htmlentities((trim($_post['pilihan_c'])))); $pilihan_d=ucwords(htmlentities((trim($_post['pilihan_d'])))); $Pembahasan = ucwords(htmlentities((trim($_post['pembahasan'])))); $jawaban=ucwords(htmlentities((trim($_post['jawaban'])))); $publish=htmlentities((trim($_post['publish'])));
81 4.1.2.9 Implementasi Antar Muka Lihat Soal oleh Admin Halaman ini dibuat untuk admin yang akan melihat semua soal-soal latihan ujian nasional Bahasa Inggris, dihalaman ini admin dapat meng-edit atau menghapus soal-soal yang telah diinput sebelumnya. Berikut gambar tampilan antar muka Input soal admin dapat dilihat dibawah ini: Gambar 4.15 Tampilan antar muka Lihat Soal Admin Berikut ini potongan program dari halaman lihat soal admin if(isset($_session['id_admin'])){?> <h1>edit Soal</h1> <p> $query=mysql_query("select * from soal order by id_soal desc");?><table width="100%"> $no=0; while($row = mysql_fetch_array($query, MYSQL_ASSOC)){?> 4.2 Pengujian Fungsionalitas Aplikasi Pengujian akan dilakukan dengan menggunakan metode blackbox untuk lebih memfokuskan pada keperluan fungsional dari aplikasi. Dengan metode ini, maka validitas fungsi akan diuji, apakah menghasilkan keluaran yang sesuai dengan yang diharapkan atau tidak.
82 Pengujian Fungsionalitas dengan metode blackbox bertujuan untuk menunjukan fungsi perangkat lunak tentang cara beroprasinya, apakah pemasukan data keluaran telah berjalan sebagaimana yang diharapkan. Dalam pengujian terhadap sebuah perangkat lunak harus ditetapkan kategori keberhasilan dalam setiap kasus uji yang dilakukan. Kategori keberhasilan dikelompokan menjadi: 1. Sesuai Untuk kategori sesuai, jika dalam sebuah kasus uji telah memenuhi tujuan pengujian yang telah ditetapkan, serta memiliki kinerja seperti yang diharapkan. 2. Tidak sesuai Untuk kategori tidak sesuai, jika dalam sebuah kasus uji tidak memenuhi tujuan pengujian yang telah ditetapkan.dalam hal ini kasus uji tersebut dinyatakan tidak sesuai. Berikut ini adalah skenario pengujian dari aplikasi yang telah dibangun dapat dilihat pada tabel dibawah ini : Tabel 4.1 Skenario Pengujian No Aktor Item Hasil yang Flow Uji diharapkan 1 User Login User memasukan username User masuk ke halaman Admin dan password sesuai yang ada selanjutnya didalam basisdata User memasukan username dan user kembali kehalaman login 2 User Daftar Lanjutan Tabel 4.1 Skenario Pengujian password salah/kosong Pilih menu daftar pada halaman user Menampilkan form pendaftaran yang siap diisi oleh calan peserta latihan ujian Lihat Pilih link materi yang tersedia Menampilkan materi berupa Materi pada menu review materi pada pdf halaman user Pilih menu ujian pada halaman user Latihan Menampilkan soal-soal Ujian latihan berupa pilihan ganda yang siap dikerjakan user Lihat Pilih menu nilai pada halaman Menampilkan daftar nilai dari Nilai user latihan-latihan ujian user sebelumnya Lihat Pilih menu grafik pada halaman user Menampilkan grafik berupa
83 No Aktor 3 Admin Item Uji Grafik Flow Hasil yang diharapkan chart yang diambil dari nilai user Input soal Pilih menu cerita soal pada ha- Menampilkan form pengisian cerita laman admin soal cerita yang siap diisi oleh admin Input soal Pilih menu input soal pada ha- Menampilkan form pengisian Lihat soal laman admin Pilih menu lihat soal pada halaman admin soal dan pertanyaan soal cerita yang siap diisi oleh admin Menampilkan soal-soal latihan yang siap di edit ataupun delete oleh admin Tabel 4.2 Hasil Pengujian No Aktor Item Hasil yang Hasil Flow Uji diharapkan Pengujian 1 User Login User memasukan username User masuk ke halaman sesuai Admin dan password sesuai yang ada selanjutnya didalam basisdata User memasukan username dan user kembali kehalaman login sesuai password salah/kosong 2 User Daftar Pilih menu daftar pada halaman Menampilkan form sesuai
84 No Aktor Item Uji user Flow Hasil yang diharapkan pendaftaran yang siap diisi oleh calan peserta latihan ujian Hasil Pengujian 3 Admin Lihat Pilih link materi yang tersedia Menampilkan materi berupa sesuai Materi pada menu review materi pada pdf halaman user Pilih menu ujian pada halaman Latihan Ujian user Menampilkan soal-soal sesuai latihan berupa pilihan ganda yang siap dikerjakan user Lihat Pilih menu nilai pada halaman Menampilkan daftar nilai dari sesuai Nilai user latihan-latihan ujian user sebelumnya Pilih menu grafik pada Lihat Grafik halaman user Menampilkan grafik berupa sesuai chart yang diambil dari nilai user Input soal Pilih menu cerita soal pada ha- Menampilkan form pengisian sesuai cerita laman admin soal cerita yang siap diisi oleh admin Input soal Pilih menu input soal pada ha- Menampilkan form pengisian sesuai Lihat soal laman admin soal dan pertanyaan soal cerita yang siap diisi oleh admin Pilih menu lihat soal pada halaman admin Menampilkan soal-soal latihan sesuai yang siap di edit ataupun delete oleh admin 4.3 Analisis hasil pengujian Dari pengujian diatas dapat dianalisa 1. Aplikasi ini dapat terkoneksi dengan basis data, tidak ada kesalahan hal ini terlihat pada tampilan halaman aplikasi yang mengambil data dari
85 basisdata, data yang ada didalam basis data dapat ditampilkan sesuai perintah program. 2. Pada saat proses lathan soal ujian yang ada didalam basisdata dapat ditampilkan sesuai dengan yang diinginkan, dan sistem dapat memproses nilai siswa dengan benar berikut pembahasan dari jawaban. 3. Pada saat proses lihat nilai yang ada didalam basisdata dapat ditampilkan sesuai yang diinginkan. 4. Pada saat melihat materi, materi dapat ditampilkan sesuai yang diinginkan 5. Pada saat melihat grafik, grafik dapat ditampilkan sesuai dengan yang diinginkan berupa garis.