IMPLEMENTASI DIGITAL LIBRARY BERBASIS HTML 5 PADA SMKN-4 PALANGKARAYA

Transkripsi

1 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 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2015

2 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 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2015

3

4

5

6 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

7 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 Latar Belakang Rumusan Masalah Tujuan Batasan Masalah Metodologi Studi Literatur Perancangan Implementasi Pengujian Sistematika Penulisan... 5 BAB II LANDASAN TEORI Digital Library (Perpustakaan Digital) Perkembangan Perpustakaan Dasar Pemikiran Perpustakaan Digital Proses Digitalisasi File Masalah Perpustakaan Digital... 10

8 Digitalisasi Dokumen Hak Cipta Infrastruktur Perpustakaan Digital MVC (Model, View, Controller) Model View Controller Framework PHP CodeIgniter Alur Proses Aplikasi HTML 5 & CSS 3 (Responsive Web Design) HTML Penerapan Fitur HTML CSS Responsive Web Design Media Query Database MySQL Keuntungan Menggunakan Database MySQL BAB III ANALISA DAN PERANCANGAN SISTEM Analisa Sistem Kebutuhan Fungsional Analisa Pengujian Kebutuhan Non-Fungsional Analisa Perangkat Keras Analisa Perangkat Lunak Analisa Pengguna Perancangan Sistem Use Case Diagram Definisi Aktor Definisi Use Case Activity Diagram Activity Diagram Siswa... 32

9 Activity Diagram Admin Sequence Diagram Sequence Diagram Siswa Sequence Diagram Admin Perancangan Jaringan Intranet Perancangan Basis Data (Database) Entity Relationship Diagram Relasi Tabel Perancangan Antarmuka Pengguna (User Interface) Rancangan Halaman Siswa Rancangan Halaman Admin Perancangan Kuesioner BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM Implementasi Sistem Batasan Implementasi Sistem Implementasi Antar Muka Antar Muka Siswa Antar Muka Admin Implementasi Responsive Web Design Pengujian Sistem Pengujian Fungsional Pengujian Responsive Web Design Kesimpulan Hasil Pengujian Fungsional Pengujian Responden Kesimpulan Hasil Pengujian Responden BAB V PENUTUP Kesimpulan Saran DAFTAR PUSTAKA... 89

10 Lampiran Kuesioner DAFTAR GAMBAR Gambar 2.1 Ilustrasi Alur Proses Data Pada CodeIgniter Gambar 2.2 Video Hasil Compile Tag <video> Gambar 2.3 Beberapa Ukuran Layar (Screen Size) Gambar 3.1 Use Case Diagram Gambar 3.2 Activity Diagram Proses Search Gambar 3.3 Activity Diagram Proses Browse Gambar 3.4 Activity Diagram Proses Read/Streaming Gambar 3.5 Activity Diagram Proses Download Gambar 3.6 Activity Diagram Proses Login Gambar 3.7 Activity Diagram Proses Create Gambar 3.8 Activity Diagram Proses Read Gambar 3.9 Activity Diagram Proses Update Gambar 3.10 Activity Diagram Proses Delete Gambar 3.11 Sequence Diagram Proses Search Gambar 3.12 Sequence Diagram Proses Browse Gambar 3.13 Sequence Diagram Proses Read/Streaming Gambar 3.14 Sequence Diagram Proses Download Gambar 3.15 Sequence Diagram Proses Login Gambar 3.16 Sequence Diagram Proses Create Gambar 3.17 Sequence Diagram Proses Read Gambar 3.18 Sequence Diagram Proses Update Gambar 3.19 Sequence Diagram Proses Delete Gambar 3.20 Perancangan Jaringan Intranet Gambar 3.21 Entity Relationship Diagram (ERD) Gambar 3.22 Relasi Tabel Gambar 3.23 Rancangan Tampilan Halaman Utama (Home) Gambar 3.24 Rancangan Tampilan Halaman Koleksi Gambar 3.25 Rancangan Tampilan Halaman Tentag... 53

11 Gambar 3.26 Rancangan Tampilan Halaman Kontak Gambar 3.27 Rancangan Tampilan Halaman Search Gambar 3.28 Rancangan Tampilan Halaman Dashboard Administrator Gambar 3.29 Rancangan Tampilan Halaman Artikel Gambar 3.30 Rancangan Tampilan Halaman Editor Artkel Gambar 4.1 Tampilan Halaman Utama (Home) Gambar 4.2 Tampilan Halaman Koleksi Gambar 4.3 Tampilan Halaman Artikel Gambar 4.4 Tampilan PDF Reader Gambar 4.5 Tampilan Video Player Gambar 4.6 Tampilan Halaman Pencarian (Search) Gambar 4.7 Tampilan Fitur Browse Gambar 4.8 Tampilan Halaman Login Gambar 4.9 Tampilan Halaman Dashboard Gambar 4.10 Tampilan Halaman Artikel Gambar 4.11 Tampilan Halaman Editor Artikel Gambar 4.12 Tampilan Pada Perangkat Desktop Gambar 4.13 Tampilan Pada Perangkat Tablet (Portrait) Gambar 4.14 Tampilan Pada Perangkat Tablet (Landscape) Gambar 4.15 Tampilan Pada Perangkat Mobile Phone (Portrait) Gambar 4.16 Tampilan Pada Perangkat Mobile Phone (Landscape) Gambar 4.17 Tampilan Minimize Menu Pada Perangkat Mobile Phone... 77

12 DAFTAR TABEL Tabel 2.1 Atribut Media Query Tabel 3.1 Karakteristik Pengguna Digital Library Tabel 3.2 Definisi Aktor Tabel 3.3 Definisi Use Case Pada Aktor Siswa Tabel 3.4 Definisi Use Case Pada Aktor Admin Tabel 4.1 Pengujian Fungsional Halaman Siswa Tabel 4.2 Pengujian Fungsional Halaman Admin Tabel 4.3 Pengujian Fungsional Fitur Responsive Web Design Tabel 4.4 Penilaian Responden... 84

13 DAFTAR PUSTAKA Winarko, Bambang Perpustakaan Digital Di Indonesia Dan Fitur-Fitur Yang Tersedia. Kuala Lumpur: Universiti Malaya. Subrata, Gatot Perpustakaan Digital. Malang: Universitas Negeri Malang. Suryandari, Ari Aspek Manajemen Perpustakaan Digital. Jakarta: Sagung Seto. Sucahyo, Yudho Giri dan Ruldeviyani, Yova Infrastruktur Perpustakaan Digital. Jakarta: Sagung Seto. Simangunsong, Chandra 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 Pemrograman PHP Dengan CodeIgniter : Black Box. Jakarta: Penerbit Jasakom. Herbowo, Agus Rahmat Web Responsive Design Untuk Situs Berita Menggunakan Framework CodeIgniter. Jakarta Timur: Universitas Gunadarma. Syachbana dan Akib, Zulkarnain Perancangan Website Menggunakan Responsive Web Design. Palembang: AMIK SIGMA. Dinata, Hendra dan Lisana Pembuatan Aplikasi Tampilan Utama Dalam Sistem Antrian Layanan Nasabah Di Bank Berbasis Web Dengan Memanfaatkan HTML 5. Surabaya: Universitas Surabaya. Pratama, Adityo Pengenalan MySQL. Semarang: Politeknik Negeri Semarang. Marcotte, Ethan Responsive Web Design. A LIST APART [Internet blog]. Tersedia:< 19 Maret 2015]. W3C Group Media Queries. W3C [Internet blog]. Tersedia:< 19 Maret 2015]. LePage, Pete Use CSS Media Queries For Responsiveness. Google Developers [Internet blog]. Tersedia: < 19 Maret 2015].

14 Setiawan, Iwan Responsive Website vs Mobile Website. Tutorial Web Design [Internet blog]. Tersedia:< 19 Maret 2015]. Susanto, Dwi Responsive Design, Solusi Desain Web Yang Fleksibel. Kangtanto Web Development [Internet blog]. Tersedia:< 2/responsive-design-solusi-desain-web-yang-fleksibel> [Diakses 20 Maret 2015]. Ramadhani, Agus Rahasia Responsive Web Design (RWD) dengan HTML5 dan CSS3. O-OM Blog Inspirasi Digital [Internet blog]. Tersedia:< 20 Maret 2015].