IMPLEMENTASI DIGITAL LIBRARY BERBASIS HTML 5 PADA SMKN-4 PALANGKARAYA TUGAS AKHIR Persyaratan Guna Meraih Gelar Sarjana Strata I Teknik Informatika Universitas Muhammadiyah Malang Disusun Oleh : MUHAMMAD INDRA JAYA 201010370311020 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2015
IMPLEMENTASI DIGITAL LIBRARY BERBASIS HTML 5 PADA SMKN-4 PALANGKARAYA TUGAS AKHIR Diajukan Untuk Memenuhi Persyaratan Guna Meraih Gelar Sarjana Strata I Teknik Informatika Universitas Muhammadiyah Malang Disusun Oleh : MUHAMMAD INDRA JAYA 201010370311020 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2015
KATA PENGANTAR Dengan memanjatkan puji syukur kehadirat Allah SWT atas limpahan rahmat dan hidayah-nya sehingga penulis dapat menyelesaikan tugas akhir yang berjudul : IMPLEMENTASI DIGITAL LIBRARY BERBASIS HTML 5 PADA SMKN-4 PALANGKARAYA Di dalam tulisan ini disajikan pokok-pokok bahasan yang meliputi Digital Library, Konsep MVC (Model, View, Controller), Framework PHP CodeIgniter, HTML 5 & CSS 3 (Responsive Web Design) yang akan digunakan sebagai acuan pembangunan aplikasi web digital library yang dinamai dengan SMILIB (SMIK Library). Penulisan tugas akhir ini dimaksudkan sebagai salah satu syarat kelulusan dari pembelajaran jenjang S1 pada Program Studi Teknik Informatika di Universitas Muhammadiyah Malang. Peneliti menyadari masih banyak kekurangan dan keterbatasan dalam penulisan tugas akhir ini. Untuk itu, penulis sangat mengharapkan saran yang membangun agar tulisan ini dapat berguna untuk perkembangan ilmu pengetahuan kedepan. Malang, 14 April 2015 Penulis Muhammad Indra Jaya
DAFTAR ISI HALAMAN JUDUL... LEMBAR PERSETUJUAN... LEMBAR PENGESAHAN... LEMBAR PERNYATAAN... ABSTRAK... ABSTRACT... LEMBAR PERSEMBAHAN... KATA PENGANTAR... DAFTAR ISI... DAFTAR GAMBAR... DAFTAR TABEL... i ii iii iv v vi vii viii ix xii xiv BAB I PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Rumusan Masalah... 3 1.3 Tujuan... 3 1.4 Batasan Masalah... 3 1.5 Metodologi... 3 1.5.1 Studi Literatur... 4 1.5.2 Perancangan... 4 1.5.3 Implementasi... 4 1.5.4 Pengujian... 4 1.5.5 Sistematika Penulisan... 5 BAB II LANDASAN TEORI... 6 2.1 Digital Library (Perpustakaan Digital)... 6 2.1.1 Perkembangan Perpustakaan... 7 2.1.2 Dasar Pemikiran Perpustakaan Digital... 7 2.1.3 Proses Digitalisasi File... 9 2.1.4 Masalah Perpustakaan Digital... 10
2.1.4.1 Digitalisasi Dokumen... 10 2.1.4.2 Hak Cipta... 10 2.1.5 Infrastruktur Perpustakaan Digital... 10 2.2 MVC (Model, View, Controller)... 11 2.2.1 Model... 12 2.2.2 View... 12 2.2.3 Controller... 12 2.3 Framework PHP CodeIgniter... 13 2.3.1 Alur Proses Aplikasi... 13 2.4 HTML 5 & CSS 3 (Responsive Web Design)... 14 2.4.1 HTML 5... 14 2.4.1.1 Penerapan Fitur HTML 5... 16 2.4.2 CSS 3... 17 2.4.2.1 Responsive Web Design... 18 2.4.2.2 Media Query... 19 2.5 Database MySQL... 22 2.5.1 Keuntungan Menggunakan Database MySQL... 22 BAB III ANALISA DAN PERANCANGAN SISTEM... 24 3.1 Analisa Sistem... 24 3.1.1 Kebutuhan Fungsional... 24 3.1.1.1 Analisa Pengujian... 25 3.1.2 Kebutuhan Non-Fungsional... 27 3.1.2.1 Analisa Perangkat Keras... 27 3.1.2.2 Analisa Perangkat Lunak... 28 3.1.2.3 Analisa Pengguna... 29 3.2 Perancangan Sistem... 30 3.2.1 Use Case Diagram... 30 3.2.1.1 Definisi Aktor... 31 3.2.1.2 Definisi Use Case... 31 3.2.2 Activity Diagram... 32 3.2.2.1 Activity Diagram Siswa... 32
3.2.2.2 Activity Diagram Admin... 36 3.2.3 Sequence Diagram... 41 3.2.3.1 Sequence Diagram Siswa... 41 3.2.3.2 Sequence Diagram Admin... 45 3.2.4 Perancangan Jaringan Intranet... 50 3.2.5 Perancangan Basis Data (Database)... 50 3.2.5.1 Entity Relationship Diagram... 50 3.2.5.2 Relasi Tabel... 51 3.2.6 Perancangan Antarmuka Pengguna (User Interface)... 51 3.2.6.1 Rancangan Halaman Siswa... 52 3.2.6.2 Rancangan Halaman Admin... 55 3.2.7 Perancangan Kuesioner... 56 BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM... 58 4.1 Implementasi Sistem... 58 4.1.1 Batasan Implementasi Sistem... 58 4.1.2 Implementasi Antar Muka... 59 4.1.2.1 Antar Muka Siswa... 59 4.1.2.2 Antar Muka Admin... 67 4.1.3 Implementasi Responsive Web Design... 72 4.2 Pengujian Sistem... 77 4.2.1 Pengujian Fungsional... 78 4.2.1.1 Pengujian Responsive Web Design... 83 4.2.1.2 Kesimpulan Hasil Pengujian Fungsional... 83 4.2.2 Pengujian Responden... 83 4.2.2.1 Kesimpulan Hasil Pengujian Responden... 86 BAB V PENUTUP... 87 5.1 Kesimpulan... 87 5.2 Saran... 88 DAFTAR PUSTAKA... 89
Lampiran Kuesioner... 91 DAFTAR GAMBAR Gambar 2.1 Ilustrasi Alur Proses Data Pada CodeIgniter... 13 Gambar 2.2 Video Hasil Compile Tag <video>... 16 Gambar 2.3 Beberapa Ukuran Layar (Screen Size)... 18 Gambar 3.1 Use Case Diagram... 30 Gambar 3.2 Activity Diagram Proses Search... 32 Gambar 3.3 Activity Diagram Proses Browse... 33 Gambar 3.4 Activity Diagram Proses Read/Streaming... 34 Gambar 3.5 Activity Diagram Proses Download... 35 Gambar 3.6 Activity Diagram Proses Login... 36 Gambar 3.7 Activity Diagram Proses Create... 37 Gambar 3.8 Activity Diagram Proses Read... 38 Gambar 3.9 Activity Diagram Proses Update... 39 Gambar 3.10 Activity Diagram Proses Delete... 40 Gambar 3.11 Sequence Diagram Proses Search... 41 Gambar 3.12 Sequence Diagram Proses Browse... 42 Gambar 3.13 Sequence Diagram Proses Read/Streaming... 43 Gambar 3.14 Sequence Diagram Proses Download... 44 Gambar 3.15 Sequence Diagram Proses Login... 45 Gambar 3.16 Sequence Diagram Proses Create... 46 Gambar 3.17 Sequence Diagram Proses Read... 47 Gambar 3.18 Sequence Diagram Proses Update... 48 Gambar 3.19 Sequence Diagram Proses Delete... 49 Gambar 3.20 Perancangan Jaringan Intranet... 50 Gambar 3.21 Entity Relationship Diagram (ERD)... 51 Gambar 3.22 Relasi Tabel... 51 Gambar 3.23 Rancangan Tampilan Halaman Utama (Home)... 52 Gambar 3.24 Rancangan Tampilan Halaman Koleksi... 53 Gambar 3.25 Rancangan Tampilan Halaman Tentag... 53
Gambar 3.26 Rancangan Tampilan Halaman Kontak... 54 Gambar 3.27 Rancangan Tampilan Halaman Search... 54 Gambar 3.28 Rancangan Tampilan Halaman Dashboard Administrator... 55 Gambar 3.29 Rancangan Tampilan Halaman Artikel... 55 Gambar 3.30 Rancangan Tampilan Halaman Editor Artkel... 56 Gambar 4.1 Tampilan Halaman Utama (Home)... 60 Gambar 4.2 Tampilan Halaman Koleksi... 62 Gambar 4.3 Tampilan Halaman Artikel... 64 Gambar 4.4 Tampilan PDF Reader... 64 Gambar 4.5 Tampilan Video Player... 65 Gambar 4.6 Tampilan Halaman Pencarian (Search)... 66 Gambar 4.7 Tampilan Fitur Browse... 67 Gambar 4.8 Tampilan Halaman Login... 68 Gambar 4.9 Tampilan Halaman Dashboard... 70 Gambar 4.10 Tampilan Halaman Artikel... 71 Gambar 4.11 Tampilan Halaman Editor Artikel... 72 Gambar 4.12 Tampilan Pada Perangkat Desktop... 73 Gambar 4.13 Tampilan Pada Perangkat Tablet (Portrait)... 74 Gambar 4.14 Tampilan Pada Perangkat Tablet (Landscape)... 74 Gambar 4.15 Tampilan Pada Perangkat Mobile Phone (Portrait)... 75 Gambar 4.16 Tampilan Pada Perangkat Mobile Phone (Landscape)... 76 Gambar 4.17 Tampilan Minimize Menu Pada Perangkat Mobile Phone... 77
DAFTAR TABEL Tabel 2.1 Atribut Media Query... 19 Tabel 3.1 Karakteristik Pengguna Digital Library... 29 Tabel 3.2 Definisi Aktor... 31 Tabel 3.3 Definisi Use Case Pada Aktor Siswa... 31 Tabel 3.4 Definisi Use Case Pada Aktor Admin... 31 Tabel 4.1 Pengujian Fungsional Halaman Siswa... 78 Tabel 4.2 Pengujian Fungsional Halaman Admin... 80 Tabel 4.3 Pengujian Fungsional Fitur Responsive Web Design... 83 Tabel 4.4 Penilaian Responden... 84
DAFTAR PUSTAKA Winarko, Bambang. 2010. Perpustakaan Digital Di Indonesia Dan Fitur-Fitur Yang Tersedia. Kuala Lumpur: Universiti Malaya. Subrata, Gatot. 2009. Perpustakaan Digital. Malang: Universitas Negeri Malang. Suryandari, Ari. 2007. Aspek Manajemen Perpustakaan Digital. Jakarta: Sagung Seto. Sucahyo, Yudho Giri dan Ruldeviyani, Yova. 2007. Infrastruktur Perpustakaan Digital. Jakarta: Sagung Seto. Simangunsong, Chandra. 2013. Implementasi Model MVC Pada Sistem Absensi SMAN 4 Batam Melalui Penerapan Framework Code Igniter. Tanjung Pinang: Universitas Maritim Raja Ali Haji. Ardhana, Yosef Murya Kusuma. 2012. Pemrograman PHP Dengan CodeIgniter : Black Box. Jakarta: Penerbit Jasakom. Herbowo, Agus Rahmat. 2012. Web Responsive Design Untuk Situs Berita Menggunakan Framework CodeIgniter. Jakarta Timur: Universitas Gunadarma. Syachbana dan Akib, Zulkarnain. 2013. Perancangan Website Menggunakan Responsive Web Design. Palembang: AMIK SIGMA. Dinata, Hendra dan Lisana. 2010. Pembuatan Aplikasi Tampilan Utama Dalam Sistem Antrian Layanan Nasabah Di Bank Berbasis Web Dengan Memanfaatkan HTML 5. Surabaya: Universitas Surabaya. Pratama, Adityo. 2013. Pengenalan MySQL. Semarang: Politeknik Negeri Semarang. Marcotte, Ethan. 2010. Responsive Web Design. A LIST APART [Internet blog]. Tersedia:<http://alistapart.com/article/responsive-web-design>[Diakses 19 Maret 2015]. W3C Group. 2012. Media Queries. W3C [Internet blog]. Tersedia:<http://www.w3.org/TR/css3-mediaqueries/>[Diakses 19 Maret 2015]. LePage, Pete. 2014. Use CSS Media Queries For Responsiveness. Google Developers [Internet blog]. Tersedia: <https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/usemedia-queries>[diakses 19 Maret 2015].
Setiawan, Iwan. 2014. Responsive Website vs Mobile Website. Tutorial Web Design [Internet blog]. Tersedia:<http://www.tutorial-webdesign.com/responsive-websitevs-mobile-website/>[Diakses 19 Maret 2015]. Susanto, Dwi. 2013. Responsive Design, Solusi Desain Web Yang Fleksibel. Kangtanto Web Development [Internet blog]. Tersedia:<http://kangtanto.com/web- 2/responsive-design-solusi-desain-web-yang-fleksibel> [Diakses 20 Maret 2015]. Ramadhani, Agus. 2013. Rahasia Responsive Web Design (RWD) dengan HTML5 dan CSS3. O-OM Blog Inspirasi Digital [Internet blog]. Tersedia:<www.oom.com/2013/09/responsive-web-design-valid-html5-css3.html>[Diakses 20 Maret 2015].