BAB IV
IMPLEMENTASI DAN PENGUJIAN
Berdasarkan perancangan software pada bab sebelumnya, maka dihasilkan sebuah aplikasi prototipe website mercu buana untuk aplikasi mobile dengan menggunakan php. Implementasi dan pengujian merupakan langkah yang dilakukan setelah melakukan perancangan, hal ini didasarkan pada model prototyping yang digunakan pada tugas akhir ini. Pada bagian implementasi akan dibahas mengenai rancangan aplikasi dan kode program yang akan diterapkan sesuai dengan proses yang ada pada diagram alur, sedangkan pengujian menggunakan metode pengujian kotak hitam (black box testing) akan dilakukan pada apa saja yang telah dibuat dan apakah sistem dapat berjalan dengan yang di inginkan.
4.1 Implementasi
Setelah hasil rancangan aplikasi yang akan dipakai telah selesai dibuat, tahapan pertama adalah melakukan implementasi. Implementasi merupakan tahap menterjemahkan perancangan berdasarkan analisis. Tujuan implementasi adalah untuk mengkonfirmasikan modul program perancangan pada para pelaku system hingga user dapat memberi masukkan kepada perancang system.
4.1.1 Implementasi Antarmuka (Interface) Halaman Utama
Pada saat aplikasi diakses oleh pengguna, maka halaman utama yang pertama kali di tampilkan dan berguna untuk proses mengakses informasi atau berita yang ada di website ini serta menampilkan menu mahasiswa, dosen dan pendaftaran mahasiswa baru.
Gambar 4.1 Halaman Index Atas Gambar 4.2 Halaman Index Tengah
4.1.2 Implementasi Antarmuka (Interface) Halaman Form Dosen
Pada halaman ini digunakan oleh dosen untuk mengakses halaman utama. Dan pada halaman ini ada menu untuk dosen melakukan pendaftaran supaya memiliki username dan password untuk mengakses ke halaman utama.
Gambar 4.4 Halaman Login Dosen Gambar 4.5 Halaman Daftar Dosen
4.1.3 Implementasi Antarmuka (Interface) Halaman Utama Dosen
Pada halaman ini digunakan oleh dosen untuk melakukan aktifitas dosen terutama untuk menginput nilai mahasiswa berdasarkan kode matakuliah dan id dosen. Halaman ini juga terdapat beberapa menu seperti absensi dan juga mengganti password.
Gambar 4.6 Halaman Akses utama Dosen Gambar 4.7 Halaman Akses Input Nilai
4.1.4 Implementasi Antarmuka (Interface) Halaman Form Mahasiswa
Pada halaman ini digunakan oleh mahasiswa untuk mengakses halaman utama. Dan pada halaman ini ada menu untuk mahasiswa melakukan pendaftaran supaya memiliki username dan password untuk mengakses ke halaman utama.
4.1.5 Implementasi Antarmuka (Interface) Halaman Utama Mahasiswa
Pada halaman ini digunakan oleh mahasiswa untuk melakukan aktifitas mahasiswa terutama untuk melihat nilai mahasiswa berdasarkan matakuliah yang telah di ambil pada semester tersebut. Halaman ini juga terdapat beberapa menu seperti enrty kartu studi dan juga mengganti password.
Gambar 4.10 Halaman Akses utama Mahasiswa Gambar 4.11 Halaman Nilai Mahasiswa
4.1.6 Implementasi Antarmuka (Interface) Halaman Pendaftaran Mahasiswa Baru
Pada halaman ini digunakan oleh masyarakat umum untuk mengetahui informasi persyaratan untuk menjadi mahasiswa Universitas Mercu Buana dan ada menu untuk melakukan registrasi pendaftaran, konfirmasi pendaftaran.
Gambar 4.12 & 4.13 Halaman utama Pendaftaran Mahasiswa baru dan halaman pendaftaran
4.1.7 Implementasi Antarmuka (Interface) Halaman Administrator
Pada halaman ini digunakan oleh administrator untuk melakukan aktifitas tambah, edit dan hapus data pengguna. Administrator mempunyai hak akses dari keseluruhan data yang masuk ke database. Pada halaman ini tampilan nya berbeda karena tidak menggunakan mobile melainkan dengan versi desktop karena pada halaman adiministrator memiliki tabel-tabel sehingga tidak efektif apabila menggunakan versi mobile.
Gambar 4.14 Halaman Login Administrator Gambar 4.15 Halaman Akses Berita Administrator
4.1.8 Implementasi Pengujian Antarmuka (Interface)
Setelah membuat hasil rancangan aplikasi yang akan dipakai telah selesai, selanjutnya adalah melakukan implementasi pengujian antarmuka yang akan digunakan oleh pengguna aplikasi. Karena hasil rancangan antarmuka pengguna aplikasi berperan sangat penting untuk menghubungkan antara aplikasi dengan pengguna.
Berikut ini hasil implementasi pengujian antarmuka pada aplikasi yang telah dibuat :
Gambar 4.16 Mahasiswa Berhasil Login
Pada gambar 4.16 terlihat bahwa mahasiswa telah melakukan login dengan menginput username dan password dengan benar. Sistem akan langsung menuju halaman utama mahasiswa ketika mahasiswa berhasil login di form login. Sistem akan memeriksa username dan password mahasiswa jika proses tidak valid atau tidak berhasil login, maka sistem akan memberikan informasi kepada pengguna bahwa akses ditolak dapat dilihat pada gambar 4.17 berikut ini :
Gambar 4.17 Mahasiswa Tidak Berhasil Login
Pada gambar 4.17 terlihat bahwa proses username atau password mahasiswa tidak berhasil login atau tidak valid, dan sistem akan memberikan informasi kepada pengguna bahwa username atau password salah.
Pada gambar 4.18 halaman registrasi, mahasiswa akan mengisi value yang penting yang diantaranya username, password, email. setelah itu sistem akan menyimpan data mahasiswa. sistem memberikan informasi bahwa data yang dimasukan berhasil.
Gambar 4.19 Registrasi Data Login Mahasiswa Tidak Valid
Pada gambar 4.19 ini sistem memberikan informasi bahwa data tidak valid dan harus dipastikan bahwa setipa form harus terisi agar proses daftar berhasil.
Gambar 4.20 Tampilan Table nilai mahasiswa
Pada gambar 4.20 ini sistem memberitahukan keterangan bahwa nilai dari indeks prestasi mahasiswa 2,19 serta total sks yang harus di ambil pada semester selanjutnya maksimal hanya 13 sks.
Pada gambar 4.21 dan 4.22 ini sistem memberikan informasi bahwa data dan hasil pengisian data untuk registrasi persyaratan menjadi mahasiswa baru lengkap. Dan sistem langsung redirect halaman registrasi ke halaman konfirmasi
. Gambar 4.23 Data tidak berhasil di simpan
Pada gambar 4.23 ini sistem memberikan informasi bahwa data dan hasil
inputan tidak lengkap maka akan terjadi garis-garis pada form berwarna merah serta
Gambar 4.24 Halaman Dosen Input Nilai Mahasiswa
Pada gambar 4.24 ini sistem memberikan akses kepada dosen untuk menginput nilai mahasiswa berdasarkan kode matakuliah serta nim dari mahasiswa tersebut.
4.2 Pembuatan Listing Program
Setelah hasil rancangan implementasi aplikasi selesai, maka langkah selanjutnya adalah menulis kode - kode program. Berikut ini akan dijelaskan beberapa bagian kode yang penting pada aplikasi yang telah dibuat.
Table 4.1 Kode pada halaman utama <?
$menu=mysql_query("select * from db_tentang where tipe='1'"); //awal looping pengambilan menu
while ($data=mysql_fetch_array($menu)) {
echo "<a href=tentang_umb.php?p=$data[id]>$data[judul]</a><br>"; }
// akhir looping pengambilan menu
// jika salah satu link menu diklik maka jalankan script dibawah ini untuk menmpilkan isi menu if(!empty($_GET['p'])){
$data=mysql_query("select * from db_tentang where id='$_GET[p]'"); if(mysql_num_rows($data)<>0) {
$isi=mysql_fetch_array(mysql_query("select * from db_tentang where id='$_GET[p]'")); echo "<h2>$isi[judul]</h2><p></p>$isi[isi]";
}
// akhir pengecekan salah satu menu
else {echo "<h3 align=center><br>Error !!</h3> <b>Ga ada file <u>$_GET[p].php</u> nya !!</b>"; }
}
// jika user mengakses home atau index.php maka jalankan script dibawah ini ?>
Pada penggalan program ini digunakan untuk menampilkan database supaya tampil di halaman utama.
Table 4.2 Kode pada nilai mahasiswa <?
echo"
<table data-role='table' id='movie-table' data-mode='reflow' class='ui-responsive table-stroke'> <thead> <tr> <th>No</th> <th>Kodemtk</th> <th>Nama Matakuliah</th> <th>SKS</th>
<th>Sem</th> <th>Nilai</th> <th>Bobot</th> <th>Bobotxsks</th> </tr> </thead>";
$sql="SELECT * FROM khs WHERE nim='$_SESSION[username]'"; $no=0; $show=mysql_query($sql) or die (); while($data=mysql_fetch_array($show)){ $no++; echo"<tr> <td> $no</td> <td>$data[kode_mtk]</td> <td>$data[nama_matakuliah]</td> <td>$data[sks]</td> <td>$data[semester]</td>"; $Tot=$Tot+$data[sks]; echo" <td>$data[grade_nilai]</td> <td>$data[bobot_nilai]</td>"; $boboxtsks=$data[sks]*$data[bobot_nilai]; $jmlbobot=$jmlbobot+$boboxtsks; $ips=$jmlbobot/$Tot; echo " <td>$boboxtsks</td><th></th> </tr>"; } echo" </td></table> <table id=tablemodul2>
<tr><td>Index Prestasi Sementara (IPS):</td><th class=cb>"; echo number_format($ips,2,',','.');
echo"</th></tr>";
$sql="SELECT t2.max_sks AS sks FROM master_nilai t2
WHERE (t2.ipmax >= $ips) AND (t2.ipmin <= $ips)"; $no=0; $show=mysql_query($sql) or die; while($data=mysql_fetch_array($show)){ echo"<tr><td>Maksimal SKS yg Diambil:</td><th class=cb>$data[sks]</th>"; }
echo" <table id=tablemodul2> <td colspan=3 align=right>total sks:</td><td colspan=1 align=center bgcolor=#ececec>";
echo number_format($Tot,0,',','.');
echo" </td><td colspan=3 align=right>total bobot:</td> <td colspan=1 align=center bgcolor=#ececec>"; echo number_format($jmlbobot,0,',','.');
echo" </td></table></table></div>"; ?>
Pada bagian kode program ini digunakan pada saat mahasiswa menampilkan halaman nilai semester, aplikasi memberikan informasi yang akan menghubungkan aplikasi dengan basis data.
Tabel 4.3 Kode pada halaman pendaftaran
if($mysql->execute("INSERT INTO pendaftaran (tgl_pendaftaran, nama_pendaftar, id_pendaftar, id_jenis, id_agama, asal_pendaftar, id_jurusan_smu, nem_pendaftar, alamat_pendaftar, id_warga, kodepos, telepon, email, id_jurusan, id_jurusan2, id_info, id_tempat, id_beasiswa, id_status, id_gelombang, id_kota) values (NOW(), '$nama', '$no_id', '$jk', '$agama', '$sekolah', '$jurusan', '$nem1', '$alamat', '$warga', '$kodepos', '$telepon', '$email', '$pilihan1', '$pilihan2', '$info', '$tempat', '$beasiswa', '$status', '$gelombang', '$k_id')"))
{ echo"<div style=\"font-size:14px;color:blue\">bisa disimpan</div>"; echo"<meta http-equiv='refresh' content='1;URL=main.php?page=11'>"; } else {
$error = "<div style=\"font-size:14px;color:black\">tidak bisa disimpan</div>";
}
} else {
Pada bagian kode program ini digunakan pada saat pengguna ingin melakukan pendaftaran mahasiswa baru semua item diatas sudah memiliki relasi kepada table pendaftaran sehingga apa yang di input oleh pengguna akan menghubungkan aplikasi dengan basis data.
Tabel 4.4 Kode pada halaman dosen input nilai $id = $_GET['id'];
echo $id;
$sql3 = "select kode_mtk, nim, tugas_1, uts, uas, grade_nilai from khs where kode_mtk = '".$id."'";
$result3 = mysql_query($sql3) or die(mysql_error()); $row = mysql_fetch_array($result3);
Pada bagian kode program ini digunakan pada saat dosen ingin menginput nilai mahasiswa atau melakukan edit kepada nilai mahasiswa. semua item diatas sudah memiliki relasi kepada table pendaftaran sehingga apa yang di input oleh pengguna akan menghubungkan aplikasi dengan basis data.
4.3 Lingkungan Pengujian
Untuk menguji aplikasi telah dibuat sesuai dengan spesifikasi kebutuhan, karena aplikasi ini meliputi perangkat keras dan perangkat lunak. Maka dibutuhkan lingkungan operasi sebagai berikut :
4.3.1 Spesifikasi Kebutuhan Sistem
Berikut spesifikasi kebutuhan sistem hardware dan software yang digunakan pada saat membuat aplikasi ini:
Hardware :
1. Processor AMD Dual Core Processor C60 1.333 GHz. 2. Ram 1GB.
3. VGA Onboard / External VGA. 4. Monitor, Keyboard, dan Mouse. 5. Handphone iPhone 3GS.
Software :
1. Sistem operasi Windows 7 Ultimate.
2. Software Dreamweaver CS5.
3. Software XAMPP Control Panel Version 2.5 . 4. User Agent
5. Switcher for chrome.
4.4 Pengujian Fungsionalitas Aplikasi
Proses pengujian ini di lakukan dengan cara menggunakan perangkat gratis serta menggunakan subdomain http://alumni6bk.com yang menjadi http://m.alumni6bk.com untuk mengetahui aplikasi ini berjalan dengan efektif. Dalam hal ini saya juga akan menggunakan metode pengujian aplikasi blackbox dan juga dengan website mobitest.akamai.com.
Akamai Mobitest adalah perangkat gratis yang diciptakan untuk meningkatkan kesadaran terhadap kinerja mobile web. hanya masukkan URL, pilih salah satu perangkat / lokasi pilihan di atas, dan tekan run. Halaman anda akan dimuat pada perangkat mobile yang nyata, dan Anda akan menerima detil kaya tentang berapa lama waktu untuk memuat.
Untuk melihat apakah fungsi-fungsi pada aplikasi berjalan dengan baik atau tidak, dan juga mengetahui di bagian mana saja cacat aplikasi ini untuk segera dapat di perbaiki oleh penulis.
4.4.1 Lingkungan Pengujian
Aplikasi website mobile mercu buana dan 2 device mobile yang berbeda yaitu : iPhone 3GS dan Blackberry.
Spesifikasi iPhone 3GS: - iPhone 3GS Network Data : - 3G: Ya - HSDPA, 7.2 Mbps - EDGE: Ya - GPRS: Ya
- WLAN: Ya, Wi-Fi 802.11b/g - Memory Internal: 32 GB storage - External: Tidak
- Layar Tipe: - 320 x 480 pixels, 3.5 inches
Spesifikasi Blackberry : - BlackBerry Curve 8520
Network Data :
- GPRS : Ya, Class 10 (4+1/3+2 slots), 32 - 48 kbps - EDGE : Ya, Class 10, 236.8 kbps
- WLAN : Ya, Wi-Fi 802.11b/g
- Display - 320 x 240 pixels, 2.46 inches - Memory Internal 256 MB
- CPU–512 MHz - RAM–128MiB
4.4.2 Skenario Pengujian
Pengujian aplikasi ini dilakukan pada tanggal 25 Februari 2013 menggunakan SmartPhone iPhone 3GS, Blackberry Curve 8520. Item yang diuji antara lain:
Tabel 4.5 Skenario Pengujian
No. Nama Tes Hasil yang diharapkan
1. Masuk menu utama Menampilkan halaman menu utama
2. Memilih sub menu Masuk ke dalam sub sub menu
3.
Memilih isi berita Menampilkan materi sesuai yang ingin di ketahui
lanjutan
4. Memilih menu halaman login mahasiswa
Menampilkan Form login mahasiswa
5. Mengakses halaman utama mahasiswa dengan login
Menampilkan halaman utama mahasiswa
6. Memilih menu nilai mahasiswa Menampilkan halaman nilai mahasiswa
7. Memilih menu krs mahasiswa Menampilkan halaman enrty
mahasiswa
8. Memilih menu mengganti password Menampilkan jawaban yang dipilih
9 Memilih menu halaman login dosen Menampilkan form halaman login dosen
10. Mengakses halaman utama dosen Menampilkan halaman utama dosen setelah berhasil login
11.
Memilih menu input nilai Menampilkan halaman input nilai mahasiswa berdasarkan kode matakuliah
12. Memilih menu absensi Menampilkan halaman absensi
13. Memilih menu ganti password Menampilkan form untuk ganti password
14. Memilih menu pendaftaran mahasiswa Baru
Menampilkan halaman mahasiswa baru
lanjutan
15. Memilih menu pendaftaran Menampilkan form untuk pendaftaran mahasiswa baru
16. Mengakses url untuk halaman login admin
Menampilkan halaman login admin
17. Mengakses halaman utama untuk admin Menampilkan halaman utama admin setelah proses login berhasil
4.4.3 Hasil Pengujian Tabel 4.6 Hasil pengujian
No. Nama Tes Hasil yang diharapkan Hasil Pengujian
1. Masuk menu utama Menampilkan halaman menu utama
Sesuai
2. Memilih sub menu Masuk ke dalam sub sub menu
Sesuai
3. Memilih isi berita Menampilkan materi sesuai yang ingin di ketahui
Sesuai
4. Memilih halaman login mahasiswa
Menampilkan halaman login mahasiswa
Sesuai
5. Mengakses halaman utama mahasiswa dengan login
Menampilkan halaman utama mahasiswa
Lanjutan
6. Memilih menu nilai mahasiswa
Menampilkan halaman nilai mahasiswa
Sesuai
7. Memilih menu krs
mahasiswa
Menampilkan halaman enrty mahasiswa
Sesuai
8. Memilih menu mengganti password
Menampilkan halaman ganti password
Sesuai
9 Memilih menu halaman login dosen
Menampilkan form halaman login dosen
Sesuai
10.
Mengakses halaman utama dosen
Menampilkan halaman utama dosen setelah berhasil login
Sesuai
11.
Memilih menu input nilai Menampilkan halaman input nilai mahasiswa berdasarkan kode matakuliah
Sesuai
12. Memilih menu absensi Menampilkan halaman absensi
Sesuai
13. Memilih menu ganti password
Menampilkan form untuk ganti password
Sesuai
14. Memilih menu Pendaftaran Mahasiswa Baru
Menampilkan halaman mahasiswa baru
Sesuai
15. Memilih menu pendaftaran Menampilkan form untuk pendaftaran mahasiswa baru
lanjutan
16. Mengakses url untuk halaman login admin
Menampilkan halaman login admin
Sesuai
17
Mengakses halaman utama untuk admin
Menampilkan halaman utama admin setelah proses login berhasil
Sesuai
Berikut ini gambar hasil test dengan menggunakan perangkat mobitest.akamai.com untuk mengetahui berapa lama device mobile mengakses aplikasi website mobile ini:
Gambar 4.25 Tampilan awal
Pada gambar 4.25 merupakan halaman utama pada website mobitest.akamai.com, device yang di uji menggunakan iPhone 4. iOS 5.0
Gambar 4.26 Tampilan masukkan URL
Pada gambar 4.26 terdapat menu box untuk menginput alamat subdomain yang ingin di uji dan saya menggunakan subdomain http://m.alumni6bk.com
Pada gambar 4.26 merupakan hasil dari pengujian dan memberikan keterangan berupa average load time : 3.99s dan Average Page Size : 34.43kb
4.5 Kesimpulan Hasil Pengujian
Setelah melakukan pengujian dengan menjalankan program aplikasi, maka didapatkan kesimpulan sebagai berikut :
1. Proses dari tiap menu berjalan dengan baik dan benar, begitu juga dengan proses yang dihasilkan (output) dari aplikasi tersebut.
2. Dari pengujian yang dilakukan, semua menú berjalan sesuai dengan yang diharapkan.
