Rancang Bangun Aplikasi Perpustakaan Online berbasis Responsive Web SKRIPSI Untuk Memenuhi Salah Satu Persyaratan Mencapai Derajat Sarjana Teknik Oleh : Muhammad Lutfi NIM : 201110370311388 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2015
KATA PENGANTAR Puji Syukur kepada Tuhan Yang Maha Esa yang melimpahkan rahmat dan hidayah-nya sehingga penulis dapat menyelesaikan Tugas Akhir dengan judul Rancang Bangun Aplikasi Perpustakaan Online berbasis Responsive Web Pada penelitian ini menggunakan sebuah sistem yang dimana nantinya akan membantu pegawai dan anggota perpustakaan dalam mengelola data buku dan transaksi bagi pegawai dan memudahkan pemesanan buku bagi anggota perpustakaan. Penulis menyadari bahwa penelitian ini masih jauh dari sempurna. Oleh karena itu penulis mengharapkan saran dan kritik guna untuk menyempurnakan sistem ini kedepannya. Perangkat lunak ini juga masih membutuhkan pengembangan lebih lanjut sehingga dapat lebih bermanfaat. Akhir kata penulis mengucapkan terima kasih kepada semua pihak yang telah membantu hingga tugas akhir ini selesai. Malang, 3 Agustus 2015 Penulis Muhammad Lutfi i
DAFTAR ISI LEMBAR PERSETUJUAN... i LEMBAR PENGESAHAN... ii SURAT PERNYATAAN... iii PERSEMBAHAN... iv KATA PENGANTAR... v ABSTRACT... vi ABSTRAK... vii DAFTAR ISI... viii DAFTAR GAMBAR... xi DAFTAR TABEL... xv BAB I PENDAHULUAN... 1 1.1 LATAR BELAKANG... 1 1.2 RUMUSAN MASALAH... 3 1.3 BATASAN MASALAH... 3 1.4 TUJUAN PENELITIAN... 3 1.5 METODOLOGI PENELITIAN... 3 1.6 SISTEMATIKA PENULISAN... 4 BAB II LANDASAN TEORI... 6 2.1 Responsive Web... 6 2.2 CodeIgniter... 6 2.2.1 Sistem CodeIgniter... 6 2.2.2 Kelebihan Framework CodeIgniter... 7 2.2.3 Konsep MVC... 8 2.3 PHP... 9 2.4 MySQL... 9 2.5 Unified Modelling Language... 10 2.5.1 Usecase Diagram... 10 ii
2.5.2 Sequence Diagram... 11 2.5.3 Activity Diagram... 11 2.5.4 Component Diagram... 11 2.5.5 Class Diagram... 11 BAB III ANALISA DAN PERANCANGAN SISTEM... 13 3.1 Analisa Sistem... 13 3.1.1 Deskripsi Sistem... 13 3.1.2 Kebutuhan Sistem Fungsional... 14 3.1.3 Kebutuhan Non-Fungsional... 15 3.1.4 Use Case... 16 3.1.5 Activity Diagram... 24 3.1.6 Sequence Diagram... 36 3.1.7 Class Diagram... 44 3.1.2.1 Flowchart... 29 3.1.2.2 Usecase Diagram... 30 3.2 Perancangan Antarmuka Aplikasi... 45 3.2.1 Tampilan Admin... 45 3.2.2 Tampilan Anggota... 49 3.2.3 Tampilan Operator... 50 BAB IV IMPLEMENTASI DAN PENGUJIAN... 52 4.1 Implementasi... 52 4.1.1 Kebutuhan Fungsional... 52 4.1.2 Implementasi Kode Program dan Antarmuka... 53 4.1.2.1 Antarmuka dan Kode Program Menu Login... 55 4.1.2.2 Antarmuka dan Kode Program Menu Buku... 56 4.1.2.3 Antarmuka dan Kode Program Pemesanan Buku... 57 4.1.2.4 Antarmuka dan Kode Program Kelola Member... 59 4.1.2.5 Antarmuka dan Kode Program Peminjaman Buku... 61 4.1.2.6 Antarmuka dan Kode Program Pengembalian Buku... 62 iii
4.1.2.7 Antarmuka dan Kode Program Perpanjangan Buku... 63 4.1.2.8 Antarmuka dan Kode Program Kelola Operator... 64 4.1.2.9 Antarmuka dan Kode Program Kelola Buku... 66 4.1.2.10 Antarmuka dan Kode Program Melihat Laporan... 69 4.1.2.11 Antarmuka dan Kode Program Memperbarui Denda... 70 4.1.2.12 Antarmuka dan Kode Program Melunasi Denda... 70 4.1.2.13 Antarmuka dan Kode Program Melihat Denda... 71 4.2 Pengujian Sistem... 72 4.2.1 Pengujian Black Box... 72 4.2.2 Pengujian Responsive Web... 75 4.2.3 Pengujian Kuisioner... 78 BAB V KESIMPULAN DAN SARAN... 85 5.1 Kesimpulan... 85 5.2 Saran... 85 DAFTAR PUSTAKA... 56 iv
DAFTAR GAMBAR Gambar 3.1 UseCase Sistem Informasi Perpustakaan... 16 Gambar 3.2 Activity Diagram Mengelola Data Operator... 24 Gambar 3.3 Activity Diagram Create Data Operator... 25 Gambar 3.4 Activity Diagram Edit Data Operator... 25 Gambar 3.5 Activity Diagram Delete Data Operator... 26 Gambar 3.6 Activity Diagram Mengelola Data Buku... 26 Gambar 3.7 Activity Diagram Create Data Buku... 27 Gambar 3.8 Activity Diagram Edit Data Buku... 27 Gambar 3.9 Activity Diagram Delete Data Buku... 28 Gambar 3.10 Activity Diagram Mengelola Data Member... 28 Gambar 3.11 Activity Diagram Create Data Member... 29 Gambar 3.12 Activity Diagram Edit Data Member... 29 Gambar 3.13 Activity Diagram Delete Data Member... 30 Gambar 3.14 Activity Diagram Edit Denda... 30 Gambar 3.15 Activity Diagram Melihat Laporan... 31 Gambar 3.16 Activity Diagram Pelunasan Denda... 31 Gambar 3.17 Activity Diagram Memesan Buku... 32 Gambar 3.18 Activity Diagram Perpanjangan Buku... 32 Gambar 3.19 Activity Diagram Melihat Data Buku... 33 Gambar 3.20 Activity Diagram Melihat Jumlah Denda... 33 Gambar 3.21 Activity Diagram Kelola Transaksi... 34 Gambar 3.22 Activity Diagram Create Data Transaksi... 34 Gambar 3.23 Activity Diagram Edit Data Transaksi... 35 Gambar 3.24 Sequence Diagram Mengelola Data Operator... 36 Gambar 3.25 Sequence Diagram Create Data Operator... 36 Gambar 3.26 Sequence Diagram Edit Data Operator... 37 Gambar 3.27 Sequence Diagram Delete Data Operator... 37 Gambar 3.28 Sequence Diagram Mengelola Data Buku... 37 Gambar 3.29 Sequence Diagram Create Data Buku... 38 v
Gambar 3.30 Sequence Diagram Edit Data Buku... 38 Gambar 3.31 Sequence Diagram Delete Data Buku... 38 Gambar 3.32 Sequence Diagram Mengelola Data Member... 39 Gambar 3.33 Sequence Diagram Create Data Member... 39 Gambar 3.34 Sequence Diagram Edit Data Member... 39 Gambar 3.35 Sequence Diagram Delete Data Member... 40 Gambar 3.36 Sequence Diagram Edit Data Denda... 40 Gambar 3.37 Sequence Diagram Melihat Data Laporan... 40 Gambar 3.38 Sequence Diagram Pelunasan Denda... 41 Gambar 3.39 Sequence Diagram Memesan Buku... 41 Gambar 3.40 Sequence Diagram Perpanjangan Buku... 42 Gambar 3.41 Sequence Diagram Melihat Data Buku... 42 Gambar 3.42 Sequence Diagram Melihat Jumlah Denda... 42 Gambar 3.43 Sequence Diagram Mengelola Data Transaksi... 43 Gambar 3.44 Sequence Diagram Create Data Transaksi... 43 Gambar 3.45 Sequence Diagram Edit Data Transaksi... 43 Gambar 3.46 Class Diagram Sistem Informasi Perpustakaan... 44 Gambar 3.47 Tampilan Data Operator... 45 Gambar 3.48 Tampilan Tambah Data Operator... 45 Gambar 3.49 Tampilan Mengubah Data Operator... 46 Gambar 3.50 Tampilan Data Buku... 46 Gambar 3.51 Tampilan Tambah Data Buku... 46 Gambar 3.52 Tampilan Mengubah Data Buku... 47 Gambar 3.53 Tampilan Melihat Laporan... 47 Gambar 3.54 Tampilan Data Member... 47 Gambar 3.55 Tampilan Tambah Data Member... 48 Gambar 3.56 Tampilan Mengubah Data Member... 48 Gambar 3.57 Tampilan Memperbarui Denda... 48 Gambar 3.58 Tampilan Pelunasan Denda... 49 Gambar 3.59 Tampilan Memesan Buku... 49 Gambar 3.60 Tampilan Perpanjangan Buku... 49 vi
Gambar 3.61 Tampilan Melihat Buku... 50 Gambar 3.62 Tampilan Melihat Jumlah Denda... 50 Gambar 3.63 Tampilan Menambah Transaksi... 50 Gambar 3.64 Tampilan Mengubah Transaksi... 51 Gambar 4.1 Class-Class pada View Admin... 53 Gambar 4.2 Class-Class pada View Operator... 54 Gambar 4.3 Class-Class pada View Member... 54 Gambar 4.4 Tampilan Menu Login... 55 Gambar 4.5 Potongan Code untuk Menampilkan Menu Login... 55 Gambar 4.6 Tampilan Menu Melihat Buku... 56 Gambar 4.7 Potongan Code untuk Menampilkan Menu Buku... 56 Gambar 4.8 Tampilan Menu Pemesanan Buku... 57 Gambar 4.9 Potongan Code untuk Memesan Buku... 58 Gambar 4.10 Tampilan Insert Member Baru... 58 Gambar 4.11 Tampilan Update Member... 59 Gambar 4.12 Tampilan Delete Member... 59 Gambar 4.13 Potongan Code untuk Insert Data Member... 60 Gambar 4.14 Potongan Code untuk Update Data Member... 60 Gambar 4.15 Potongan Code untuk Delete Data Member... 60 Gambar 4.16 Tampilan Menu Peminjaman... 61 Gambar 4.17 Potongan Code untuk Meminjam Buku... 61 Gambar 4.18 Tampilan Menu Pengembalian... 62 Gambar 4.19 Potongan Code untuk Pengembalian Buku... 62 Gambar 4.20 Tampilan Menu Perpanjangan Buku... 63 Gambar 4.21 Potongan Code untuk Perpanjangan Transaksi... 63 Gambar 4.22 Tampilan Insert Operator... 64 Gambar 4.23 Tampilan Update Operator... 64 Gambar 4.24 Tampilan Delete Operator... 64 Gambar 4.25 Potongan Code untuk Insert Data Operator... 65 Gambar 4.26 Potongan Code untuk Update Data Operator... 65 Gambar 4.27 Potongan Code untuk Delete Data Operator... 65 vii
Gambar 4.28 Tampilan Insert Buku... 66 Gambar 4.29 Tampilan Update Buku... 66 Gambar 4.30 Tampilan Delete Buku... 67 Gambar 4.31 Potongan Code untuk Insert Data Buku... 67 Gambar 4.32 Potongan Code untuk Update Data Buku... 68 Gambar 4.33 Potongan Code untuk Delete Data Buku... 68 Gambar 4.34 Tampilan Menu Laporan... 68 Gambar 4.35 Potongan Code untuk Insert Data Buku... 69 Gambar 4.36 Tampilan Memperbarui Denda... 69 Gambar 4.37 Potongan Code untuk Memperbarui Denda... 70 Gambar 4.38 Tampilan Pelunasan Denda... 70 Gambar 4.39 Potongan Code untuk Melunasi Denda... 71 Gambar 4.40 Tampilan Melihat Denda... 71 Gambar 4.41 Potongan Code untuk Melihat Denda... 72 Gambar 4.42 Tampilan Login... 75 Gambar 4.43 Tampilan Dashboard... 75 Gambar 4.44 Tampilan Menu Buku... 76 Gambar 4.45 Tampilan Pemesanan... 77 Gambar 4.44 Tampilan Ganti Password... 77 viii
DAFTAR TABEL Tabel 3.1 Kebutuhan Fungsional Perpustakaan Online... 14 Tabel 3.2 Kebutuhan Non-Fungsional Perpustakaan Online... 15 Tabel 3.3 Skenario Mengelola Data Operator... 17 Tabel 3.4 Skenario Create Data Operator... 17 Tabel 3.5 Skenario Edit Data Operator... 17 Tabel 3.6 Skenario Delete Data Operator... 18 Tabel 3.7 Skenario Mengelola Data Buku... 18 Tabel 3.8 Skenario Create Data Buku... 18 Tabel 3.9 Skenario Edit Data Buku... 19 Tabel 3.10 Skenario Delete Data Buku... 19 Tabel 3.11 Skenario Mengelola Data Member... 19 Tabel 3.12 Skenario Create Data Member... 20 Tabel 3.13 Skenario Edit Data Member... 20 Tabel 3.14 Skenario Delete Data Member... 21 Tabel 3.15 Skenario Edit Denda... 21 Tabel 3.16 Skenario Melihat Laporan... 21 Tabel 3.17 Skenario Pelunasan Denda... 22 Tabel 3.18 Skenario Pemesanan Buku... 22 Tabel 3.19 Skenario Perpanjangan Buku... 22 Tabel 3.20 Skenario Melihat Buku... 22 Tabel 3.21 Skenario Melihat Jumlah Denda... 23 Tabel 3.22 Skenario Mengelola Data Transaksi... 23 Tabel 3.23 Skenario Create Data Transaksi... 23 ix
Tabel 3.24 Skenario Edit Data Transaksi... 24 Tabel 4.1 Spesifikasi Perangkat Keras untuk Implementasi... 52 Tabel 4.2 Spesifikasi Perangkat Lunak untuk Implementasi... 53 Tabel 4.3 Pengujian Menu Perpustakaan Online... 73 Tabel 4.4 Jawaban Kuesioner... 79 Tabel 4.5 Hasil Pengujian Kuesioner Soal Nomor 1... 79 Tabel 4.6 Hasil Pengujian Kuesioner Soal Nomor 2... 80 Tabel 4.7 Hasil Pengujian Kuesioner Soal Nomor 3... 80 Tabel 4.8 Hasil Pengujian Kuesioner Soal Nomor 4... 81 Tabel 4.9 Hasil Pengujian Kuesioner Soal Nomor 5... 81 Tabel 4.10 Hasil Pengujian Kuesioner Soal Nomor 6... 82 Tabel 4.11 Hasil Pengujian Kuesioner Soal Nomor 7... 82 Tabel 4.12 Hasil Pengujian Kuesioner Soal Nomor 8... 83 Tabel 4.13 Hasil Pengujian Kuesioner Soal Nomor 9... 83 Tabel 4.14 Hasil Pengujian Kuesioner Soal Nomor 10... 84 x
Daftar Pustaka [1] Syachbana, Akib Zulkarnain. Perancangan Website Menggunakan Responsive Web Design. Vol.2, No.1. 2014. [2] Tri W. Puguh. Aplikasi Perpustakaan Online Menggunakan Content Management Sistem (CMS). Jurnal Teknik Elektro Universitas Diponegoro, Semarang. [3] Herbowo Rahmat Agus. Web Responsive Design untuk Situs Berita Menggunakan Framework CodeIgniter. Universitas Gunadarma. 2012. [4] Syachbana, Akib Zulkarnain. Perancangan Website Menggunakan Responsive Web Design. Vol.2, No.1. 2014. [5] Herbowo Rahmat Agus. Web Responsive Design untuk Situs Berita Menggunakan Framework CodeIgniter. Universitas Gunadarma. 2012. [6] Ardhana Kusuma. Pemrograman PHP CodeIgniter Black Box. 2013. [7] Ardhana Kusuma. Pemrograman PHP CodeIgniter Black Box. 2013. [8] Ardhana Kusuma. Pemrograman PHP CodeIgniter Black Box. 2013. [9] Andika Radenal. Penerapan CI dalam Pengembangan Sistem Informasi Manajemen Surat dan Pengarsipan. Universitas Islam Negeri Syarif Hidayatullah Jakarta. [10] Murphy Indra Beny. Fasilitas Sistem Informasi Akademik berbasis Web untuk SMA Negerioleh PT. XL AXIATA, Tbk Palembang. Jurusan Sistem Informasi. STMIK GI MDP. [11] Ramadha Mukhlis. Desain Web dengan PHP. Vol. 6. No. 1. Januari 2009. [12] Putri Rizky Winda. Pemrograman Web. Politeknik Negeri Semarang. 2012. xi
[13] Haviluddin. Memahami Penggunaan UML. Vol 6. No 1. Februari [14] Haviluddin. Memahami Penggunaan UML. Vol 6. No 1. Februari [15] Haviluddin. Memahami Penggunaan UML. Vol 6. No 1. Februari [16] Haviluddin. Memahami Penggunaan UML. Vol 6. No 1. Februari [17] Mahdiana Deni. Analisa dan Rancangan Sistem Informasi Pengadaan Barang dengan Metodologi Berorientasi Obyek: Studi Kasus PT. Liga Indonesia. Vol 3. No 2. September [18] Mahdiana Deni. Analisa dan Rancangan Sistem Informasi Pengadaan Barang dengan Metodologi Berorientasi Obyek: Studi Kasus PT. Liga Indonesia. Vol 3. No 2. September [19] Haviluddin. Memahami Penggunaan UML. Vol 6. No 1. Februari [20] Haviluddin. Memahami Penggunaan UML. Vol 6. No 1. Februari [21] Haviluddin. Memahami Penggunaan UML. Vol 6. No 1. Februari xii