1 BAB 4 IMPLENTASI DAN PENGUJIAN 4.1 Implementasi Setelah rancangan dari aplikasi telah selasai dibuat, tahapan selanjutnya adalah mengimplenstasikan ...
Implementasi Setelah rancangan dari aplikasi telah selasai dibuat, tahapan selanjutnya
adalah mengimplenstasikan perancangan yang sebelumnya dibuat berdasarkan analisis dan metode-metode perangacan aplikasi yang telah dijabarkan sebelumnya, pengimplementasian dari aplikasi perpustakaan SDIT Bunayya berbasis web mengggunakan PHP MySql ini di dukung oleh beberapa elemen, di antaranya adalah perangkat lunak dan perangkat keras. Serta hasil pengujian aplikasi terhadap 4 jenis peramban yang berbeda-beda dan 1 jenis emulator peramban mobile yang dimana salah satu peramban tersebut kemungkinan akan di gunakan oleh user untuk mengakses aplikasi dan juga pengujian pada tampilan mobile. Berikut di bawah ini di jelasan mengenai spesifikasi perangkat lunak dan perangkat keras yang di gunakan.
4.1.1 Spesifikasi kebutuhan sistem Berikut spesifikasi kebutuhan sistem hardware dan software yang digunakan pada saat membuat aplikasi: Hardware: 1. Proccesor Intel® Core™ i3 2. VGA NVIDIA Gegorce GT520M CUDA™ 1GB 3. Memory 2 GB 4. Hard Drive 500 GB Serial ATA 7200 RPM 5. Display 14" WXGA LED, Max. Resolution 1366 x 768 6. Modem Smartfren
Software: 1. Operating System Windows 7 SP1 ultimate 32 bit 2. Sublime Text 2 3. Adobe Photoshop CS6 4. Balsamic Mockup 5. XAMPP
4.2
Pengumpulan bahan Pengumpulan bahan ataupun material yang berupa data perpustakaan
SDIT bunayya, gambar, foto, dan juga tutorial yang dibutuhkan dalam membuat aplikasi ini. Sebagian ada yang diperoleh dengan cara membuat sendiri dan mengambil dari sumber lain, seperti yang tertera pada tabel di bawah ini: Tabel 4.1 Info sumber
Bahan
Sumber
Gambar
- Digambar sendiri menggunakan Adobe Photoshop CS6 - http://www.subtlepatterns.com - http://browse.deviantart.com/customization/icons/dock/ - http://www.iconspedia.com - http://www.icomoon.io/app/#library
- http://tympanus.net/codrops/collective/ - http://net.tutsplus.com/ - http://webdesign.tutsplus.com/ Data Perpustakaan
4.3
Didapatkan langsung dari dokumentasi SDIT bunayya
Penulisan kode Penulisan kode atau biasa disebut dalam bahasa inggris coding merupakan
bagian utama dalam pembuatan aplikasi ini. penulisan kode pada aplikasi ini menggunkan bahasa PHP dan HTML sebagai penggunaan bahasa utamanya, dibantu CSS3 dan JQuery sebagai pengolah tampilanya dan di tulis di program sublime text 2 dan di running dengan menggunakan browser google chrome acuannya adalah apakah aplikasi yang dibuat telah berjalan dengan seharusnya. Bila belum maka kode atau source code akan di perbaiki sampai di dapatkan aplikasi yang berjalan dan berfungsi dengan baik. Pada bagian ini akan dijabarkan penulisan kode dari aplikasi ini secara rinci. Mulai dari halaman utama, sampai penulisan kode pada halaman admininstrator.
4.3.1
Penulisan kode index utama
Gambar 4.1 Halaman idex utama
Kode pada halaman index ini, berisi foto dari kondisi perpustakaan SDIT bunayya yang telah diedit dan dijadikan gambar latar aplikasi ini dan foto dari kondisi meja kepala perpustakaan yang telah diedit dan diposisikan sebagai banner loader start, 2 button yang menjadi link untuk masuk ke aplikasi klient, dan teks sambutan selamat datang. <section class="player" data-title=""> <section class="control">
Pada halaman index untuk klien dihalaman ini terdapat marquee, layout banner yang menampilkan photo dari perpustakaan SDIT bunayya, slide text yang berisikan kata kata bijak tentang ilmu pengetahuan, menu horizontal dimana fungsinya sebagai link untuk masuk ke tiap halaman yang ada pada aplikasi. Dan content layout yang fungsinya sebagai penampil konten dari tiap halaman
<script src="js/js-menu-admin/ytmenu.js">
class="dr-
4.3.3
Penulisan kode halaman peraturan klien
Gambar 4.3 Halaman peraturan klien
Pada halaman peraturan dihalaman ini terdapat isi dari content menampilkan daftar peraturan yang telah dibuat olahe perpustakkan SDIT bunayya. Dan penulisan kode pun hanya di tuliskan untuk mengisi data pada halaman layout content. Tata Tertib Perpustakaan'; echo '
'; echo '
1. Ketentuan meminjam buku maksimal 1 buku, dalam jangka 7 hari
'; echo '
2. Apabila belum selesai membacanya di perpanjang sampai 14 hari
'; echo '
3. Peminjam buku harus mengembalikan tepat pada waktunya
'; echo
'
4.
Telat
pengembalian
dikenakan
denda
/harinya
Rp.
1.000,00
'; echo '
Catatan
'; echo '
Apabila dalam peminjaman buku rusak atau hilang maka peminjam
harus mengganti buku tersebut atau mengganti dengan uang seharga buku yang hilang tersebut
'; echo '
'; ?>
4.3.4
Penulisan kode halaman berita klien
Gambar 4.4 Halaman berita klien
Pada halaman berita terdapat content menampilkan daftar berita yang telah ditulis oleh pengurus perpustakaan / pustakawan. Bentuk penampilnya pun dibagi sesuai berita terbaru, dan terlama. Dimana berita terbaru adalah lima berita terbaru yang diinput oleh pustakawan dan sisanya akan dianggap terlawas. Dan satu link yang bila diklik akan menampilkan seluruh berita yang pernah di input. Berita Terbaru'; $sql
= 'SELECT * FROM berita ORDER BY tanggal DESC LIMIT 0,5';
"; $tampil = mysql_query("SELECT * FROM berita ORDER BY tanggal DESC limit 5"); while($r=mysql_fetch_array($tampil)){ $tgl_posting=tgl_indo($r[tanggal]); $brief = substr($r['isi_berita'],0,300) . "..."; echo "
Pada halaman data buku konten menampilkan seluruh data buku yang ada pada database aplikasi. Terdapat kotak pencarian, dan link untuk melihat detail buku. $p
= new Paging;
$batas
= 15;
$posisi = $p->cariPosisi($batas); $tampil = mysql_query("SELECT * FROM buku ORDER BY kode_buku ASC LIMIT $posisi,$batas"); $no = $posisi+1; while($r=mysql_fetch_array($tampil)){ $tgl_posting=tgl_indo($r[tanggal]); echo "
Pada halaman data anggota konten menampilkan seluruh data anggota yang telah mendafatar sebagai anggota perpustakaan SDIT bunayya. Terdapat kotak pencarian, dan link untuk melihat detail anggota. $p
= new Paging; $batas
= 15;
$posisi = $p->cariPosisi($batas); $tampil = mysql_query("SELECT * FROM anggota ORDER BY id_anggota DESC LIMIT $posisi,$batas"); $no = $posisi+1; while($r=mysql_fetch_array($tampil)){ $tgl_posting=tgl_indo($r[tanggal]); echo "
Pada halaman grafik konten menampilkan 10 buku yang paling banyak dipinjam oleh anggota, serta urutan kelas terbanyak melakukan pinjaman buku diperpustakaan. Ditampilkan lewat tabel dan dapat juga dilihat lewat grafik dengan mengklik button lihat grafik.
<script src="js/jquery-1.9.1.min.js"> <script src="js/highcharts.js"> <script src="js/exporting.js"> <script type="text/javascript"> var chart1; // globally available $(document).ready(function() { chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column'}, title: { text: 'Data Kelas Paling Banyak Meminjam'}, xAxis: { categories: ['kelas']}, yAxis: { title: { text: 'Jumlah Kelas Meminjam'}}, series: [
= "SELECT kelas, COUNT(kelas) as 'Jumlah_Meminjam' FROM pinjaman
Gambar 4.9 tampilan mobile halaman beranda Gambar 4.10 tampilan mobile
Gambar 4.11 tampilan mobile halaman detail
halaman data buku
buku
Penulisan kode ini dibuat dengan menggunakan bahasa CSS yang mengatur tiap kode CSS dengan tag id atau class agar memposisikan atau menampilkan style yang berbeda bila ukuran layar maksimal 600px. @media screen and (max-width: 600px) { #marquee { box-shadow: 0px 0px 0px 0px rgba(0,0,0,.30); border-bottom: 1px #ececec solid;} #banner { display: none;} #header
Halaman ini hanya digunakan oleh pustakawan atau kepala pengurus perpustakaan namun harus melakukan login terlebih dahulu untuk dapat melakukan input data, update data, hapus data, melakukan aksi peminjaman dan pengembalian, serta membuat laporan terhadap pinjaman pertanggal yang diinginkan dalam bentuk rekapitulasi data. Berikut potongan dari penulisan kodenya:
Welcome in <strong>Admin's Login Form Bunayya
This Library is Login For Librarin Bunayya
class="support-note"><span
class="note-ie">Sorry,
only
modern
rowsers.
<section class="main">
class="form-4"
action="cek_login.php"
method="POST"
onSubmit="return validasi(this)">
Login Bunayya's library
placeholder="Username">
4.3.10 Penulisan kode halaman utama admin
Gambar 4.13 Halaman utama admin
Halaman
ini
merupakan
halaman
beranda,
pada
halaman
ini
menampilakan salam karena telah melakukan login. menampilkan menu untuk tiap halaman pada sisi kiri aplikasi dan pada layout konten menapilkan hari, tanggal, dan waktu login. Berikut potongan dari penulisan kodenya:
<script src="../js/js-menu-admin/ytmenu.js">
4.3.11 Penulisan kode halaman manajemen user
Gambar 4.14 Halaman admin untuk manajemen user
Halaman ini digunakan oleh pustakawan untuk menginput data pengguna aplikasi, mengedit serta memblokir pengguna aplikasi. Berikut potongan dari penulisan kodenya: $p
= new Paging;
$batas
= 10;
$posisi = $p->cariPosisi($batas); if ($_SESSION[leveluser]=='admin'){ $tampil = mysql_query( "SELECT * FROM admin ORDER BY id_admin ASC LIMIT $posisi,$batas");} else{$tampil=mysql_query( "SELECT * FROM admin WHERE id_admin='$_SESSION[namauser]' ORDER BY id_admin DESC LIMIT $posisi,$batas");} $no=1; while ($r=mysql_fetch_array($tampil)){
4.3.12 Penulisan kode halaman manajemen data berita
Gambar 4.15 Halaman admin untuk manajemen data berita
Halaman ini digunakan oleh pustakawan untuk menginput data berita yang nantinya berita tersebut akan ditampilkan dihalaman berita pada aplikasi klien, selain meninput halaman ini juga digunakan untuk mengedit dan menghapus data berita yang telah terinput oleh pustakawan. Berikut potongan dari penulisan kodenya: $p
= new Paging;
$batas
= 15;
$posisi = $p->cariPosisi($batas); if ($_SESSION[leveluser]=='admin'){ $tampil = mysql_query( "SELECT * FROM berita ORDER BY tanggal DESC LIMIT $posisi,$batas"); }else{$tampil=mysql_query( "SELECT * FROM berita WHERE id_admin='$_SESSION[namauser]' ORDER BY id_berita DESC LIMIT $posisi,$batas");} $no = $posisi+1;
"; $no++; } echo ""; if ($_SESSION[leveluser]=='admin'){ $jmldata = mysql_num_rows(mysql_query("SELECT * FROM berita")); } else{ $jmldata = mysql_num_rows(mysql_query("SELECT * FROM berita WHERE id_admin='$_SESSION[namauser]'")); } $jmlhalaman
4.3.13 Penulisan kode halaman manajemen data anggota
Gambar 4.16 Halaman admin untuk data anggota
Halaman ini digunakan oleh pustakawan untuk menginput data anggota yang nantinya akan menjadi member dari perpustakaan agar dia dapat meminjam buku pada perspustakaan selain menginput dapat pula mengedit dan menghapus. Berikut potongan dari penulisan kodenya: $p
= new Paging;
$batas
= 15;
$posisi = $p->cariPosisi($batas); if ($_SESSION[leveluser]=='admin'){ $tampil = mysql_query( "SELECT * FROM anggota ORDER BY id_anggota DESC LIMIT $posisi,$batas");} else{ $tampil=mysql_query("SELECT
*
FROM
id_anggota='$_SESSION[idanggota]' ORDER BY id_anggota DESC LIMIT $posisi,$batas");
";$no++;} echo ""; if ($_SESSION[leveluser]=='admin'){ $jmldata = mysql_num_rows(mysql_query("SELECT * FROM anggota"));} else{$jmldata = mysql_num_rows(mysql_query("SELECT * FROM anggota WHERE id_anggota='$_SESSION[idanggota]'"));} $jmlhalaman
Gambar 4.17 Halaman admin untuk manajemen data buku
Halaman ini digunakan oleh pustakawan untuk menginput data buku selain menginput dapat pula mengedit dan menghapus. Berikut potongan dari penulisan kodenya: $p
= new Paging;
$batas
= 15;
$posisi = $p->cariPosisi($batas); if ($_SESSION[leveluser]=='admin'){ $tampil = mysql_query( "SELECT * FROM buku ORDER BY kode_buku ASC LIMIT $posisi,$batas");} else{$tampil=mysql_query(
"SELECT * FROM buku WHERE kode_buku='$_SESSION[idbuku]' ORDER BY kode_buku ASC LIMIT $posisi,$batas");} $no = $posisi+1; while($r=mysql_fetch_array($tampil)){ $tgl_posting=tgl_indo($r[tanggal]); echo "
Gambar 4.18 Halaman admin untuk manajemen data stok buku
Halaman ini merupakan penampakan dari stok buku yang ada dirpepustakaan. Dapat pula digunakan sebagai halaman informasi apakah buku dengan id tertentu masih ada diperpustkaan atau sedang dipinjam. Bila dipinjam maka stok buku akan memperlihat kalau stok dari id buku tersebut berkurang satu. Berikut potongan dari penulisan kodenya: $p
= new Paging;
$batas
= 15;
$posisi = $p->cariPosisi($batas); if ($_SESSION[leveluser]=='admin'){ $tampil = mysql_query( "SELECT * FROM stok_buku LIMIT $posisi,$batas");} else{$tampil=mysql_query( "SELECT * FROM stok_buku WHERE id_buku='$_SESSION[idbuku]' LIMIT $posisi,$batas");}
4.3.16 Penulisan kode halaman manajemen peminjaman
Gambar 4.19 Halaman admin untuk manajemen data pinjaman
Halaman ini digunakan oleh pustakawan untuk menginput data pinjaman, pengembalian dan menghapus data pinjaman yang kemungkinan pustakawan melakukan kesalahanan saat melakukan input data. Berikut potongan dari penulisan kodenya: $p
= new Paging;
$batas
= 15;
$posisi = $p->cariPosisi($batas); if ($_SESSION[leveluser]=='admin'){ $tampil = mysql_query( "SELECT
*
FROM
pinjaman
id_peminjaman DESC LIMIT
WHERE
status_anggota='Meminjam'
ORDER
BY
$posisi,$batas");}
else{$tampil=mysql_query( "SELECT * FROM pinjaman WHERE id_peminjaman='$_SESSION[idpeminjaman]' ORDER BY id_peminjaman DESC LIMIT $posisi,$batas");} $no = $posisi+1; while($r=mysql_fetch_array($tampil)){ $tgl_posting=tgl_indo($r[tanggal]); echo "
4.3.17 Penulisan kode halaman manajemen pengembalian
Gambar 4.20 Halaman admin untuk manajemen data pengembalian
Halaman ini hanya menampilkan data dari pinjaman yang telah dikembalikan oleh anggota serta memperlihatkan memberitahuan apakah pinjaman tersebut dikenakan denda atau terbebas dari denda. Penulisan kode
mengetahui apakah pengembalian tersebut terkena denda atau tidak denda memperhitungkan apakah pengembalian tersebut telah lebih dari 7 hari atau tidak. Berikut potongan dari penulisan kodenya: $p
= new Paging;
$batas
= 15;
$posisi = $p->cariPosisi($batas); if ($_SESSION[leveluser]=='admin'){ $tampil = mysql_query( "SELECT * FROM pinjaman WHERE status_anggota='Mengembalikan' ORDER BY id_peminjaman DESC LIMIT
Halaman ini digunakan oleh pustakawan untuk melakukan pembuatan rekapitulasi data terhadap tranksaksi data pinjaman yang dilakukan pada tanggal-
tanggal tertentu, serta dapat pula melihat grafik dari kelas yang terbanyak melakukan tranksaksi pinjaman. Berikut potongan dari penulisan kodenya: Informasi : Pencarian Pinjaman dari tanggal sampai dengan tanggal
*
from
pinjaman
where
tanggal_pinjam
like
'%$kelas%'
and
tanggal_pinjam between '$tanggal_awal' and '$tanggal_akhir'"); $jumlah=mysql_fetch_array(mysql_query("select count(id_peminjaman) as total from pinjaman where kelas like '%$kelas%' and tanggal_pinjam between '$tanggal_awal' and '$tanggal_akhir'"));} ?>
4.4
Pengujian fungsionalitas aplikasi Proses pengujian ini di lakukan dengan cara menginstall 4 browser dan 1
browser mobile emulator pada PC yang digunakan dalam membuat aplikasi ini adapun ke 4 browser yang digunakan adalah google chrome, mozilla firefox, opera, opera mobile emulator, safari. Dalam hal ini saya akan menggunakan metode pengujian aplikasi blackbox. 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. Hal ini bertujuan apabila ditemukan cacat pada tampilan, atau ditemukan perbedaan posisi layout yang ditampilkan oleh aplikasi pada tiap browser yang dijalankan. 4.4.1 Lingkungan pengujian Aplikasi perpustakaan berbasis web dengan menggunakan PHP dan MySql yang dibuat diuji dengan menggunakan 4 browser berbeda, yaitu Google chrome, Mozilla firefox,Opera, Opera mobile emulator, Safari. Spesifikasi Google Chrome:
Versi : 28.0.1500.72 (Official Build 211400) m
OS
: Windows
Java
: V8 3.18.5.9
Flash : 11.8.800.97 Spesifikasi Mozilla Firefox
Versi : Firefox version is 22.0
OS
: Windows
Java
: 1.7.0.25
Flash : 11.8.800.97 Spesifikasi Opera
Versi : 15.0.1147.141
OS
: Windows
Java
: 1.7.0.25
Flash : 11.8.800.97
Spesifikasi Opera Mobile Emulator
Versi : 0.0.0.0
OS
: Windows
Java
: 1.7.0.25
Flash : 11.8.800.97 Spesifikasi Safari
Versi : Safari version is 5.1.7
OS
: Windows
Java
: Java version is 1.7.0.25
Flash : 11.8.800.97
4.4.2
Hasil pengujian Tabel 4.2 Hasil pengujian halaman klien
No 1.
2.
3.
4.
Nama tes
Hasil yang di harapkan
Masuk halaman
Menampilkan
utama
utama
Masuk halaman index
Menampilkan
klien
index klien
Masuk halaman
Menampilkan
peraturan
peraturan
Masuk halaman berita
-
halaman Sesuai
halaman Sesuai
halaman Sesuai
Menampilkan halaman berita dan halaman baca
Hasil pengujian
Sesuai
selanjutnya -
Menampilkan seluruh data berita
5.
Masuk halaman data
-
buku
Menampilkan data
Sesuai
buku -
Menampilkan halaman detail buku
6.
Masuk halaman data
-
anggota
Menampilkan
Sesuai
halaman anggota -
Menampilkan halaman detail anggota
7.
Masuk halaman grafik
-
Menampilkan
Sesuai
halaman grafik
8.
Masuk halaman
-
Melihat grafik
-
Menampilkan data
komentar
Sesuai
komentar dan menambah komentar
Tabel 4.3 Hasil pengujian halaman admin
No 1.
Nama tes Masuk halaman login
Hasil yang di harapkan -
amin
Masuk halaman login amin
-
Dapat memvalidasi username dan password dan masuk
Hasil pengujian Sesuai
ke menu utama -
Masuk menu utama halaman admin
2.
Masuk manajemen
-
usir
Masuk data
Sesuai
manajemen user -
Dapat menambah usir
-
Dapat memblokir user
3.
Masuk data berita
-
Masuk data berita
-
Dapat menambah
Sesuai
berita -
Dapat mengedit data berita
-
Dapat menghapus data berita
4.
Masuk data anggota
-
Masuk data anggota
-
Dapat menambah
Sesuai
data anggota -
Dapat mengedit data anggota
-
Dapat menghapus data anggota
5.
Masuk data buku
-
Masuk data buku
-
Dapat menambah data buku
Sesuai
-
Dapat mengedit data buku
-
Dapat menghapus data buku
6.
Masuk data stok buku
-
Masuk data stok buku
-
Dapat mengedit stok
Sesuai
buku 7.
Masuk data pinjaman
-
Masuk data pinjaman
-
Dapat menambah
Sesuai
pinjaman -
Dapat melakukan pengembalian
8.
Masuk data
-
pengembalian
Masuk data
Sesuai
pengembalian -
Dapat memvalidasi tanggal denda
9.
Masuk data laporan
-
Masuk data laporan
-
Dapat membuat
Sesuai
rekalitulasi data
4.5
Analisis hasil pengujian Setelah dilakukan pengujian terhadap program aplikasi yang dijalan secara
testing pada 4 browser yang berbeda, dan 1 browser mobile emulator, maka didapatkan kesimpulan sebagai berikut :
1. Proses dari tiap menu yang dijalankan telah berjalan dengan baik dan benar, begitu juga dengan proses yang dihasilkan (output) dari aplikasi tersebut. 2. Dari pengujian yang dilakukan, semua menu dan semua fungsi berjalan sesuai dengan yang diharapkan.
