perancangan dan pembuatan digital signage dengan … · biro skripsi dan pegawai tata usaha jurusan...
TRANSCRIPT
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
v
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)
vi
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.
vii
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.
viii
ix
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
x
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
xi
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
xii
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
xiii
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
xiv
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
xv
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
xvi
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,