PERANCANGAN DAN PEMBUATAN DIGITAL SIGNAGE DENGAN CODEIGNITER SKRIPSI Disusun sebagai salah satu syarat menyelesaikan Jenjang Strata I pada Program Studi Informatika Fakultas Komunikasi dan Informatika Universitas Muhammadiyah Surakarta Oleh : ANDREAN LUTHFI PERMANA L200100086 PROGRAM STUDI INFORMATIKA FAKULTAS KOMUNIKASI DAN INFORMATIKA UNIVERSITAS MUHAMMADIYAH SURAKARTA DESEMBER 2014
ii
iii
iv
MOTTO DAN PERSEMBAHAN MOTTO : Tak mungkin membuat semua orang senang sekaligus, tak mungkin juga membuat orang susah sekaligus, orang lain tak butuh alasan untuk menilai kita, tetap melangkah sesuai pilihan kita sendiri. Nikmati dan jalani apa yang terjadi sekarang, berusaha dan berdoa untuk apa yang akan terjadi di masa yang akan datang. (Penulis) Dan bahwasanya seorang manusia tiada memperoleh selain apa yang telah diusahakannya. (Q.S An-Najm, 39) v
PERSEMBAHAN : Puji syukur kehadirat Allah SWT atas limpahan berkah dan rahmat-nya penulis dapat menyelesaikan skripsi ini. Dan skripsi ini penulis dedikasikan untuk : 1. Kedua orang tua tercinta Ibu dan Bapak atas kasih sayang, dukungan moril, materiil, setiap doa yang dipanjatkan untuk keberhasilan, kesuksesan. 2. Keluarga besar yang selalu memberi dukungan dan semangatnya. 3. Bapak Dr. Heru Supriyono M.Sc selaku pembimbing skripsi yang telah memberikan bimbingan serta pengarahan kepada penulis sehingga dapat menyelesaikan tugas akhir ini. 4. Teman sejawat Abdan, Ahmad, Andhik, Badriyatul, Benny, Chandra, David, Dhody, Fachrudin, Fenny, Galih, Hasan, Imam, Lutfi, Lutfiyatul, Mukhrom, Paramanda, Wahyu Andri, Wahyu Trianggoro dan khususnya kelas D Jurusan Teknik Informatika angkatan 2010 terima kasih kebersamaan, kerjasama waktu dan semangatnya. 5. Biro Skripsi dan Pegawai Tata Usaha Jurusan Informatika UMS atas segala bantuan dan kerjasamanya. 6. Teman-teman Jurusan Informatika angkatan 2010 dan keluarga besar Jurusan Informatika UMS, atas semua hal yang telah diberikan. 7. Semua pihak yang selalu ada di sekelilingku yang tidak bisa kusebutkan satu persatu. vi
KATA PENGANTAR Assalaamu alaikum warahmatullahi wabarakatuh Alhamdulillah, segala puji syukur penulis panjatkan kehadirat Allah SWT yang telah melimpahkan rahmat dan hidayah-nya sehingga penulis dapat menyelesaikan skripsi ini dengan judul Perancangan dan Pembuatan Digital Signage dengan Codeigniter. Skripsi ini disusun untuk memenuhi kurikulum pada Program Studi Informatika Universitas Muhammadiyah Surakarta, sebagai kewajiban mahasiswa dalam rangka menyelesaikan program sarjana. Penulis menyadari bahwa skripsi ini masih jauh dari kesempurnaan, oleh karena itu kritik saran yang membangun dari berbagai pihak sangat penulis harapkan demi perbaikan-perbaikan ke depan. Terwujudnya skripsi ini tidak lepas dari bantuan berbagai pihak. Oleh karena itu dalam kesempatan ini penulis ingin mengucapkan terima kasih yang sebesar-besarnya kepada : 1. Allah S.W.T, atas ridho dan karunianya sehingga penulis bisa menyelesaikan Tugas Akhir Skripsi ini. 2. Kedua orang tuaku tercinta, teman-temanku dan seluruh keluarga besar terima kasih atas semua kasih sayang, do a, yang tiada hentinya dan tidak pernah surut sehingga penulis bisa menyelesaikan pendidikan ini. 3. Bapak Husni Thamrin, S.T, MT., Ph.D. selaku Dekan Fakultas Komunikasi dan Informatika Universitas Muhammadiayah Surakarta. vii
viii
DAFTAR ISI HALAMAN JUDUL... i HALAMAN PERSETUJUAN... ii HALAMAN PENGESAHAN... iii DAFTAR KONTRIBUSI... iv MOTTO... v PERSEMBAHAN... vi KATA PENGANTAR... vii DAFTAR ISI... ix DAFTAR TABEL... xii DAFTAR GAMBAR... xiii ABSTRAKSI... xvi BAB I PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Rumusan Masalah... 2 1.3 Batasan Masalah... 2 1.4 Tujuan Penelitian... 3 1.5 Manfaat Penelitian... 3 1.6 Sistematika Penulisan... 4 BAB II TINJAUAN PUSTAKA... 6 2.1 Telaah Penelitian... 6 2.2 Landasan Teori... 9 1. Signage... 9 ix
2. Digital Signage... 10 3. Web... 11 4. Codeigniter... 13 5. PHP... 15 6. MySQL... 18 7. WampServer... 19 8. Pengujian Perangkat Lunak... 20 BAB III METODE PENELITIAN 3.1 Waktu dan Tempat Penelitian... 25 3.2 Peralatan Utama dan Pendukung... 25 A. Perancangan dan Pembuatan... 25 1. Software... 25 2. Hardware... 26 B. Alur Penelitian... 27 3.3 Perancangan Aplikasi... 29 A. Metode Pengumpulan Data... 29 1. Metode Studi Pustaka... 29 2. Metode Dokumentasi... 29 3. Metode Wawancara... 29 B. Desain Aplikasi... 30 1. Desain Aplikasi... 30 2. Desain User Interface... 33 3. Use Case... 34 x
4. Database dan Tabel... 37 3.4 Alur Kerja dan Konfigurasi Codeigniter... 41 A. Alur Kerja Framework Codeigniter... 41 B. Instalasi dan Konfigurasi Codeigniter... 42 BAB IV HASIL DAN PEMBAHASAN... 47 4.1 Hasil Penelitian... 47 4.1.1 Akses Aplikasi di Localhost... 48 4.1.2 Akses Aplikasi di Hosting... 54 4.1.3 Penerapan Keamanan... 62 4.2 Pengujian... 63 4.2.1 Black box Testing... 63 4.2.2 User Acceptance Test... 68 4.2.3 Pengujian dengan lebih dari 1 Display... 76 4.3 Analisa dan Pembahasan... 79 BAB V KESIMPULAN DAN SARAN... 80 5.1 Kesimpulan... 80 5.2 Saran... 81 DAFTAR PUSTAKA LAMPIRAN xi
DAFTAR TABEL Tabel 4.1 : List hasil pengujian dengan pendekatan black box pada Halaman Login...64 Tabel 4.2 : List hasil pengujian dengan pendekatan black box pada Menu Posting...65 Tabel 4.3 : List hasil pengujian dengan pendekatan black box pada Menu Media...66 Tabel 4.4 : List hasil pengujian dengan pendekatan black box pada Menu User...67 Tabel 4.5 : List hasil pengujian dengan pendekatan black box pada Menu Setting...67 Tabel 4.6 : List hasil pengujian dengan pendekatan black box pada Tombol Logout...68 Tabel 4.7 : Tabel Hasil Tanggapan Responden Pegawai TU Jurusan...69 Tabel 4.8 : Daftar responden mahasiswa...71 Tabel 4.9 : Tabel Hasil Tanggapan Responden Mahasiswa...71 Tabel 4.10 : Daftar responden mahasiswa dan dosen...74 Tabel 4.11 : Tabel Hasil Tanggapan Responden...74 xii
DAFTAR GAMBAR Gambar 3.1 : Flowchart Penelitian... 27 Gambar 3.2 : Rancangan Tampilan aplikasi pada monitor... 30 Gambar 3.3 : Alur Kerja Aplikasi... 31 Gambar 3.4 : Cara Kerja Aplikasi... 32 Gambar 3.5 : Rancangan Halaman Depan... 33 Gambar 3.6 : Rancangan HalamanLogin... 34 Gambar 3.7 : Rancangan Halaman Administrator... 34 Gambar 3.8 : Use Case Administrator... 35 Gambar 3.9 : ERD... 39 Gambar 3.10 : Alur Kerja Codeigniter... 40 Gambar 3.11 : Tampilan Wampserver aktif... 41 Gambar 3.12 : Tampilan folder www pada wamp... 41 Gambar 3.13 : Tampilan awal Codeigniter... 42 Gambar 3.14 : Tampilan folder config... 42 Gambar 3.15 : Tampilan file routes.php... 43 Gambar 3.16 : Tampilan file config.php... 43 Gambar 3.17 : Tampilan setting file database.php... 43 Gambar 3.18 : Struktur file di folder controller... 44 Gambar 3.19 : Struktur file di folder models... 45 Gambar 3.20 : Struktur file di folder views... 46 Gambar 4.1 : Tampilan halaman aplikasi... 48 Gambar 4.2 : Tampilan halaman login... 48 xiii
Gambar 4.3 : Tampilan halaman utama admin... 49 Gambar 4.4 : Tampilan menu upload gambar... 49 Gambar 4.5 : Tampilan menu upload video... 50 Gambar 4.6 : Tampilan menu Media... 50 Gambar 4.7 : Tampilan menu Posting... 51 Gambar 4.8 : Tampilan menu User... 51 Gambar 4.9 : Tampilan menu Tambah User... 52 Gambar 4.10 : Tampilan menu Password... 53 Gambar 4.11 : Tampilan menu Setting... 53 Gambar 4.12 : Upload aplikasi ke hosting dengan FileZilla... 54 Gambar 4.13 : Tampilan untuk masuk ke File Manager... 55 Gambar 4.14 : Tampilan Halaman Login di Perangkat Mobile... 56 Gambar 4.15 : Tampilan Menu Posting di Perangkat Mobile... 57 Gambar 4.16 : Tampilan Menghapus Postingan di Menu Posting... 57 Gambar 4.17 : Tampilan Membuat Event Baru di Menu Posting... 58 Gambar 4.18 : Tampilan Membuat Tulisan berjalan di Menu Posting... 59 Gambar 4.19 : Tampilan Menu Media... 59 Gambar 4.20 : Tampilan fasilitas upload di Menu Media... 60 Gambar 4.21 : Tampilan Menu User... 60 Gambar 4.22 : Tampilan fasilitas tambah user di Menu User... 61 Gambar 4.23 : Tampilan menu Ubah Password... 61 Gambar 4.24 : Tampilan menu Setting... 62 Gambar 4.25 : Grafik hasil kuesioner... 69 xiv
Gambar 4.26 : Grafik hasil kuesioner... 72 Gambar 4.26 : Grafik hasil kuesioner... 75 Gambar 4.28 : Konfigurasi dengan 4 perangkat Display... 77 Gambar 4.29 : Tampilan dengan 4 perangkat Display... 78 xv
ABSTRAKSI Di zaman ini teknologi digital semakin berkembang pesat beberapa penyampaian informasi tak lagi melalui media cetak, namun melalui teknologi yang sedang berkembang saat ini yaitu digital signage. Teknologi dapat menggantikan cara lama menyampaikan informasi dengan media cetak atau kertas, begitu juga cara penyampaian informasi dan pengumuman di Jurusan Informatika yang masih dengan media kertas.tujuan dari penelitian ini adalah untuk merancang dan membuat digital signage yang berfungsi sebagai media penyampai informasi di Jurusan Informatika yang up to date menggunakan framework Codeigniter. Konten informasi yang disampaikan berupa teks pengumuman, gambar, video dan tulisan berjalan. Penelitian ini dilakukan dengan metode observasi, wawancara dan studi literatur. Berdasarkan metode tersebut peneliti membuat sistem dalam bentuk prototype, yang memungkinkan pengembangan berkelanjutan dengan menyesuaikan kebutuhan yang ada di Jurusan Informatika.Pengujian aplikasi dilakukan dengan merubah konten informasi yang ditampilkan, melalui laptop dan perangkat mobile dengan akses internet, dan aplikasi ditampilkan pada sebuah monitor besar, dengan memanfaatkan mode fullscreen pada browser sehingga tampilan di monitor juga fullscreen. Pemakaian fitur update konten dengan perangkat mobile memudahkan administrator untuk mengubah konten dimana saja. Pada pengujian ini aplikasi dapat berjalan dengan baik. Hasil dari aplikasi telah diuji menggunakan pendekatan black-box test dan user acceptance test yang dari hasil uji coba tersebut dapat memenuhi kebutuhan informasi mahasiswa, yaitu pengumuman yang ditampilkan jelas dan mudah dipahami, menarik. Dari sisi Pegawai Tata Usaha Jurusan sebagai administrator sistem mudah untuk dioperasikan dan dapat digunakan sebagai media promosi Jususan sehingga disimpulkan bahwa aplikasi dapat diterapkan di lokasi penelitian. Kata kunci : CodeIgniter, Digital Signage, Media Informasi, Pengumuman, xvi