Anda di halaman 1dari 115

LAPORAN PROYEK AKHIR

IMPLEMENTASI MADING ONLINE SEBAGAI


SARANA PERTUKARAN INFORMASI
(STUDI KASUS : POLITEKNIK CALTEX RIAU)

Febri Adhi Pratama


NIM. 1457301024

Pembimbing
Warnia Nengsih, S.Kom., M.Kom.
Wenda Novayani, S.S.T., M.Eng.

PROGRAM STUDI SISTEM INFORMASI


POLITEKNIK CALTEX RIAU
2018

I-i
HALAMAN JUDUL

LAPORAN PROYEK AKHIR

IMPLEMENTASI MADING ONLINE SEBAGAI


SARANA PERTUKARAN INFORMASI
(STUDI KASUS : POLITEKNIK CALTEX RIAU)

Febri Adhi Pratama


NIM. 1457301024

Pembimbing
Warnia Nengsih, S.Kom., M.Kom.
Wenda Novayani, S.S.T., M.Eng.

PROGRAM STUDI SISTEM INFORMASI


POLITEKNIK CALTEX RIAU
2018

i
HALAMAN PENGESAHAN

IMPLEMENTASI MADING ONLINE SEBAGAI SARANA PERTUKARAN


INFORMASI (STUDI KASUS : POLITEKNIK CALTEX RIAU)
Febri Adhi Pratama
NIM. 1457301024
Proyek Akhir ini diajukan sebagai salah satu persyaratan untuk
memperoleh gelar Sarjana Sains Terapan (S.S.T)
di Politeknik Caltex Riau
Pekanbaru, September 2018
Disetujui oleh:
Pembimbing, Penguji,

1. Warnia Nengsih, S.Kom., M.Kom. 1. Dewi Hajar, S.S.B., M.T.


NIP. 088210 NIP. 148905

2. Wenda Novayani, S.S.T., M.Eng. 2. Anggy Trisnadoli, S.S.T., M.T.


NIP. 078504 NIP. 1208906

3. Rahmat Suhatman, S.T., M.T.


NIP. 048110

Mengetahui,
Ketua Program Studi Sistem Informasi

Yuli Fitrisia, S.T., M.T


NIP. 098202

ii
PERNYATAAN

Dengan ini saya menyatakan bahwa dalam proyek akhir yang berjudul
“Implementasi Mading Online Sebagai Sarana Pertukaran
Informasi (Studi Kasus : Politeknik Caltex Riau)”
Adalah benar hasil karya saya, dan tidak mengandung karya ilmiah atau
tulisan yang pernah diajukan di suatu Perguruan Tinggi.
Setiap kata yang dituliskan tidak mengandung plagiat, pernah ditulis
maupun diterbitkan orang lain kecuali yang secara tertulis diacu dalam
laporan proyek akhir ini dan disebutkan pada daftar pustaka. Saya siap
menanggung seluruh akibat apabila terbukti melakukan plagiat.

Pekanbaru, September 2018

Febri Adhi Pratama

iii
ABSTRAK

Politeknik Caltex Riau (PCR) merupakan perguruan tinggi di Rumbai


Pekanbaru. Penyebaran informasi di Politeknik Caltex Riau masih
menggunakan proses manual, seperti penyebaran informasi mengenai
kegiatan, yang bersifat akademik maupun non-akademik masih
menggunakan majalah dinding. Proses tersebut dinilai belum berfungsi
dengan baik. Berdasarkan permasalahan tersebut, maka dirancanglah
sebuah sistem mading online sebagai sarana pertukaran informasi di
Politeknik Caltex Riau. Sistem yang akan dibangun ini menggunakan
bahasa pemrograman Hypertext Preprocessor (PHP) dan MySql sebagai
databasenya. Sehingga dengan adanya sistem ini civitas akademik akan
mendapatkan informasi terbaru serta mengelola informasi melalui mading
online. Berdasarkan pengujian blackbox implementasi mading online
sebagai sarana pertukaran informasi (studi kasus: Politeknik Caltex Riau)
telah berjalan sesuai dengan fungsi yang diterapkan, sedangkan dengan
pengujian skala likert dengan menggunakan 6 variabel yaitu Analisis
kinerja(Performance) 87% menyelesaikan kinerja dengan cepat, analisis
informasi(information) 87% memberikan informasi yang berguna,
analisis ekonomi(economy) 80% memberikan kehematan, analisis
control(Pengendalian) 84% data aman tidak terjadi kesalahan, analisis
efisiensi(efficiency) 83% dapat digunakan dengan baik, dan analisis
pelayanan(service) 88% kualitas sistem sudah sesuai dengan kebutuhan
pengguna. Sistem tersebut dilengkapi notifikasi melalui email, sehingga
informasi terbaru dapat langsung terupdate ke civitas akademik. Sistem ini
menambah dan mengelola civitas akademik dalam mengakses dan
mendapatkan informasi.

Kata kunci : Politeknik Caltex Riau (PCR), Mading Online, Hypertext


Preprocessor (PHP), MySQL.

iv
ABSTRACT

Politeknik Caltex Riau (PCR) is a college campus located in Rumbai,


Pekanbaru. Many information about activites wheter academically or not
are still told by using the wall. The process is believed is not well
functioned. As it is the problem, so that a system in a e – wall magazine is
built as the intermediary in exchanging information in the college. This
system will be built upon PHP as the programming language and MySQL
as it’s DBMS. It is expected with this system; college members will receive
all the possible information necessary. Based on the blackbox testing, the
implementation of the e – wall magazine is working as expected, while
with using likert scale using six variables: Performance Analysis, 87%
stated that the system finishes the job well. Information Analysis, 87%
stated that the system gives useful information. Economical Analysis, 80%
stated that the system gives efficiency. Control Analysis, 84% stated that
the data is secure and no mistake were taking. Efficiency Analysis, 83%
stated that the system is good to use. And Service Analysis, 88% system
is as the user expected. The system is functioned with email based
notification so that newest information will be updated immediately to the
college members and this system also could manage the members.

Keywords: Politeknik Caltex Riau (PCR), e – wall magazine, Hypertext


Preprocessor (PHP), MySQL.

v
KATA PENGANTAR

Segala puji syukur kehadirat Allah SWT yang telah melimpahkan


rahmat dan barokah-Nya sehingga penulis dapat menyelesaikan proyek
akhir yang berjudul “Implementasi Mading Online Sebagai Sarana
Pertukaran Informasi (Studi Kasus : Politeknik Caltex Riau)”.
Proyek akhir ini disusun sebagai salah satu syarat untuk menyelesaikan
jenjang pendidikan Diploma IV pada Program Studi Sistem Informasi
Politeknik Caltex Riau.
Pada kesempatan ini, penulis ingin mengucapkan terima kasih
kepada pihak yang telah banyak memberikan bantuan dan dukungan yang
tiada terhingga baik secara langsung maupun tidak langsung. Ucapan
terima kasih tersebut penulis tujukan kepada:
1. Allah SWT atas rahmat dan karunia-Nya, sehingga penulis bisa
menyelesaikan tugas akhir ini tepat waktu.
2. Kedua orang tua penulis yang tercinta atas dukungan, doa dan kasih
sayang tak terhingga, sehingga penulis bisa menyelesaikan tugas
akhir tepat waktu.
3. Bapak Anggy Trisnadoli, S.S.T., M.T selaku dosen wali dan Ibu
Warnia Nengsih, S.Kom., M.Kom. dan Ibu Wenda Novayani, S.S.T.,
M.Eng. selaku dosen pembimbing, yang telah memberikan ilmu dan
bimbingan dengan penuh kesabaran kepada penulis dalam
menyelesaikan proyek akhir.
1. Ibu Dewi Hajar, S.A.B., M.T., Bapak Anggy Trisnadoli, S.S.T., M.T.,
dan Bapak Rahmat Suhatman, S.T., M.T. selaku dosen penguji yang
telah mengarahkan dan memberikan masukan kepada penulis.
4. Ibu Yuli Fitrisia, S.T., M.T. selaku Ketua Program Studi Sistem
Informasi yang telah memberikan dukungan untuk menyelesaikan
proyek akhir ini.
5. Teman-teman Prodi Sistem Informasi yang telah memberikan
dukungan, baik berupa tenaga, pikiran maupun loyalitas.

vi
6. Teman-teman kelas 4SIB tercinta yang telah menemani penulis
selama 4 tahun, yang tak hentinya memberikan semangat serta
motivasi.
7. Sahabat-sahabat tercinta: Ayu Putri Hanifah, Kurnia Sandy, Shabrina
Salwa Husna, Dede Rizki Saputra, M Fathur Rahman, Arif Fadly S,
Feoni Yulia, Indah Lubna S Pratama, Vanya Anjani, Michele, Bella
Dina Fahmi.
8. Sahabat-sahabat kontrakan tercinta : Ansarullah Toguan D Lubis,
Pringgo Gamal P, Sandy Wandy, Rahmat Riawan, M Robiq Muhazir,
Arifullah, Habil, Satria Gunawan, M Aly Alhusaini, Anita Gunawan,
Fatkhu Rohmawati, M Ikhwan, Iham Winarto.
9. Seluruh pihak yang tidak dapat disebutkan namanya satu persatu,
terimakasih banyak atas bantuan dan dukungan kepada peulis
sehingga penulis dapat menyelesaikan proyek akhir ini.
Penulis sangat menyadari sepenuhnya bahwa laporan proyek
akhir ini masih jauh dari sempurna, oleh karena itu segala jenis kritik,
saran dan masukan yang membangun sangat penulis harapkan agar dapat
memberikan wawasan bagi pembaca dan yang paling utama penulis
sendiri.
Pekanbaru, September 2018

Febri Adhi Pratama

vii
DAFTAR ISI
HALAMAN JUDUL ................................................................................ i
HALAMAN PENGESAHAN ................................................................. ii
PERNYATAAN ..................................................................................... iii
ABSTRAK ............................................................................................. iv
ABSTRACT .............................................................................................. v
KATA PENGANTAR ............................................................................ vi
DAFTAR ISI ........................................................................................ viii
DAFTAR GAMBAR............................................................................... x
DAFTAR TABEL .................................................................................. xi
BAB I PENDAHULUAN ................................................................. 1
1.1 Latar Belakang....................................................................... 1
1.2 Perumusan Masalah ............................................................... 2
1.3 Batasan Masalah .................................................................... 2
1.4 Tujuan dan Manfaat ............................................................... 3

1.5 Metodologi Penelitian ........................................................... 3


1.6 Sistematika Penulisan ............................................................ 4
BAB II TINJAUAN PUSTAKA ........................................................ 6
2.1 Penelitian Terdahulu .............................................................. 6
2.2 Landasan Teori ...................................................................... 8

BAB III PERANCANGAN ............................................................... 14


3.1 Arsitektur Sistem ................................................................. 14
3.2 Flowchart ............................................................................. 15
3.3 Bisnis Proses Mading Online .............................................. 16
3.4 Arsitektur Raspberry ........................................................... 17
3.5 Pengertian Akademik .......................................................... 18
3.6 Pengertian Non-Akademik .................................................. 18
3.7 Use Case Diagram .............................................................. 19
3.8 Skenario Use Case ............................................................... 20
viii
3.9 Entity Relationship Diagram(ERD)..................................... 24
BAB IV PENGUJIAN DAN ANALISIS .......................................... 36
4.1 Hasil Perancangan ............................................................... 36

4.1.1.1 Antarmuka Halaman Login Civitas ........................... 36


4.1.1.2 Antarmuka Halaman Daftar User ............................. 37
4.1.1.3 Antarmuka Halaman Beranda ................................... 37
4.1.1.4 Antarmuka Tambah Informasi ................................... 38
4.1.1.5 Antarmuka Validasi User .......................................... 39
4.1.1.6 Antarmuka Halaman Akun Profil .............................. 39
4.1.1.7 Antarmuka Halaman Daftar Mading Online ............. 39
4.2 Pengujian ............................................................................. 40

BAB V KESIMPULAN DAN SARAN ........................................... 55


5.1 Kesimpulan .......................................................................... 55
5.2 Saran .................................................................................... 55
DAFTAR PUSTAKA ............................................................................ 56
LAMPIRAN A ........................................................................................ 1
LAMPIRAN B......................................................................................... 1

ix
DAFTAR GAMBAR

Gambar 2.1 Alur Majalah Dinding Politeknik Caltex Riau .................. 10


Gambar 3.1 Arsitektur Sistem ............................................................... 14
Gambar 3.2 Flowchart Mading Online ................................................. 15
Gambar 3.3 Bisnis Proses Mading Online............................................. 16
Gambar 3.4 Arsitektur Raspberry ......................................................... 17
Gambar 3.5 Usecase Diagram Mading Online ...................................... 19
Gambar 3.6 Entity Relationship Diagram ............................................. 24
Gambar 4.1 Antarmuka Halaman Login Civitas ................................... 36
Gambar 4.2 Antarmuka Halaman Registrasi ......................................... 37
Gambar 4.3 Antarmuka Halaman Beranda............................................ 38
Gambar 4.4 Antarmuka Tambah Informasi ........................................... 38
Gambar 4.5 Antarmuka Validasi User. ................................................. 39
Gambar 4.6 Antarmuka Halaman Akun Profil. ..................................... 39
Gambar 4.7 Antarmuka Halaman Daftar Mading. ................................ 40
Gambar 4.8 Indeks Nilai Kuesioner ...................................................... 45

x
DAFTAR TABEL

Tabel 2. 1 Bobot Skala Likert................................................................ 11


Tabel 3.1 Skenario Use Case Login ke Sistem ...................................... 20
Tabel 3. 2 Skenario usecase Tambah Informasi .................................... 21
Tabel 3. 3 Skenario Use Case Menghapus Informasi............................ 21
Tabel 3. 4 Skenario Use Case Mengubah Informasi ............................. 22
Tabel 3.5 Skenario Use Case Validasi Status Persetujuan Informasi.... 22
Tabel 3.6 Skenario Use Case Notifikasi Melalui Email ........................ 23
Tabel 3.7 Skenario Use Case Kelola Laporan Keuangan ...................... 24
Tabel 4.1 Pengujian Black Box ............................................................. 40
Tabel 4. 2 Tabel Keterangan Kuisioner ................................................. 46
Tabel 4. 3 Kuisioner mading online PCR dengan pertanyaan positif.... 46
Tabel 4. 4 Kuisioner mading online PCR dengan pertanyaan negatif ... 48
Tabel 4. 5 Perhitungan Skala Likert ...................................................... 48
Tabel 4.6 Pengujian Performance pada mading online ......................... 49
Tabel 4.7 Pengujian Information pada mading online........................... 49
Tabel 4.8 Pengujian Economic pada mading online ............................. 50
Tabel 4.9 Pengujian Control .................................................................. 50
Tabel 4.10 Pengujian Efficiency ........................................................... 50
Tabel 4.11 Pengujian Service ................................................................ 51
Tabel 4.12 Hasil Pengujian Validitas .................................................... 52
Tabel 4.13 Hasil Pengujian Reliabilitas ................................................ 53
Tabel Lampiran 1.14 Hasil Perhitungan Skala Likert ............................. 1

xi
BAB I
PENDAHULUAN

1.1 Latar Belakang


Perkembangan teknologi yang semakin canggih, mengakibatkan
hampir semua aspek di dunia menggunakan sistem komputer untuk
menggantikan alat-alat manual seperti halnya mesin ketik dan tulisan
tangan. Perkembangan tersebut mengakibatkan kebanyakan proses
manual mulai ditinggalkan dan beralih ke komputer untuk membantu
proses pekerjaan menjadi lebih efisien dan terkomputerisasi. Selain proses
pekerjaan yang sudah mulai terkomputerisasi, teknologi juga berdampak
pada penyebaran informasi. Hal tersebut mengakibatkan banyak kalangan
yang terbantu dalam mendapatkan informasi. Penyebaran informasi sudah
banyak diimplementasikan oleh berbagai bidang seperti pendidikan,
kesehatan, transportasi, makanan dan lain-lain.
Majalah dinding merupakan salah satu contoh media komunikasi
yang paling sederhana. Majalah dinding adalah tulisan yang ditempalkan
pada bidang datar, seperti kertas karton atau gabus. Kemudian berbagai
tulisan itu dihiasi oleh beberapa pernak-pernik, warna-warni hingga
lukisan, sehingga majalah dinding menjadi lebih menarik pembaca.
Menurut (Supriyanto, 1992), majalah dinding sangat mungkin untuk
dibuat karena merupakan salah satu bentuk majalah yang sederhana
dengan biaya yang murah. Majalah dinding bukanlah hal baru dan asing
dalam dunia pendidikan. Kehadirannya di dunia pendidikan bukan saja
disikapi sebagai pelengkap fasilitas semata, tetapi juga telah menjadi
kebutuhan, baik untuk kebutuhan akademik maupun non-akademik. Akan
tetapi dengan perkembangan teknologi yang semakin canggih
mengakibatkan majalah dinding saat ini kurang diminati dan kebanyak
kalangan lebih memilih melihat informasi melalui teknologi (Firdaus,
2016).
Politeknik Caltex Riau (PCR) merupakan perguruan tinggi di
Rumbai Pekanbaru, Riau yang berdiri pada tahun 2001 atas kerja sama
antara Pemerintah Provinsi Riau dengan PT. Caltex Pacific Indonesia
(Chevron Pacific Indonesia). Pada saat ini terdapat 5 program studi
Diploma 3 dan 5 program studi diploma 4. Penyebaran informasi di
1
Politeknik Caltex Riau masih menggunakan proses manual, seperti
penyebaran informasi mengenai kegiatan, acara akademik maupun non-
akademik masih menggunakan majalah dinding. Proses tersebut dinilai
belum berfungsi dengan baik dikarenakan informasi yang tertera pada
majalah dinding kurang menarik dan informasi yang tertera hanya
memiliki arah pertukaran informasi secara tunggal (satu arah), selain
majalah dinding kurang menarik, ruang yang disediakan oleh majalah
dinding terbatas sehingga informasi yang ada sebelumnya sering tertutupi
oleh informasi yang baru disematkan dan proses pembaruan majalah
dinding yang kurang up to date mengakibatkan informasi tidak
tersampaikan dengan baik dan tepat waktu.Termasuk kesulitan dalam
mengelola majalah dindingnya.
Dengan adanya permasalahan diatas maka diajukan sebuah
penelitian yang berjudul “Implementasi Mading Online Sebagai Sarana
Pertukaran Informasi (Studi Kasus : Politeknik Caltex Riau)“. Adapun
penelitian tersebut menggunakan konsep digital mading dimana majalah
dinding tersebut akan ditampilkan di layar monitor dan menggunakan
bahasa pemrograman PHP dan MySQL sebagai database. Sistem tersebut
dilengkapi notifikasi melalui email, sehingga informasi terbaru dapat
langsung terupdate ke civitas akademik. Sistem ini menambah dan
mengelola civitas akademik dalam mengakses dan mendapatkan
informasi.
1.2 Perumusan Masalah
Berdasarkan latar belakang yang telah diuraikan, bagaimana
merancang dan mengimplementasikan mading online studi kasus
Politeknik Caltex Riau sehingga dapat menambah minat civitas untuk
membaca postingan mading online.
1.3 Batasan Masalah
Adapun batasan masalah dalam pembuatan proyek akhir ini
adalah:
1. Mading online yang akan dibangun berbasis web.
2. Mading online terdapat 2 user yaitu BAAK dan civitas.

2
3. Mading online dapat mengirimkan notifikasi berupa email ke
bagian BAAK.
4. Email notifikasi hanya untuk email yang terlampir pada
database PCR.
5. Kategori informasi dibagi menjadi dua (2) jenis yaitu kategori
informasi akademik dan kategori informasi non-akademik.
1.4 Tujuan dan Manfaat
1.4.1 Tujuan
Adapun tujuan dari pembuatan sistem ini adalah
mengimplementasikan mading online sebagai manajemen informasi yang
berada di Politeknik Caltex Riau.
1.4.2 Manfaat
Adapun manfaat dari pembuatan sistem ini adalah :
1. Civitas lebih terbantu dalam mendapatkan informasi terbaru.
2. Civitas dapat mengakses informasi melalui Mading Online.
3. Civitas dapat mengelola informasi melalui Mading Online.
1.5 Metodologi Penelitian
Metode yang digunakan untuk memperoleh data dan informasi
adalah sebagai berikut:
1. Studi Literatur
Dilakukan studi literatur untuk mengumpulkan data referensi
baik dari artikel, buku, paper, jurnal, makalah maupun situs
internet.
2. Perancangan
Melakukan perancangan arsitektur sistem, proses bisnis,
perancangan oop, skenario usecase dan perancangan
antarmuka.
3. Implementasi
Setelah dilakukan perancangan maka sistem akan
diimplementasikan kepada user.
4. Pengujian

3
Sistem yang telah diimplementasikan akan dilakukan
pengujian dengan melibatkan user.
5. Analisis kebutuhan
Melakukan analisis kebutuhan pengguna dan fitur-fitur yang
ada di majalah dinding tersebut.
6. Penyusunan Laporan
Melakukan dokumentasi pada data hasil analisis dan
implementasi.
1.6 Sistematika Penulisan
Sistematika penulisan laporan proyek akhir ini secara
keseluruhan terdiri dari empat bab, masing-masing terdiri dari beberapa
sub bab. Adapun pokok pembahasan dari masing-masing bab tersebut
secara garis besar sebagai berikut:
BAB I PENDAHULUAN
Bab ini berisi tentang latar belakang masalah, perumusan masalah
dan ruang lingkup masalah, tujuan dan manfaat penelitian, metodologi
penelitian dan sistematika penulisan.
BAB II TINJAUAN PUSTAKA
Bab ini menguraikan beberapa penelitan terdahulu dan landasan
teori yang diperlukan untuk merancang sistem. Teori-teori yang dibahas
adalah kajian penelitian terdahulu mengenai database MySQL dan bahasa
pemograman PHP.
BAB III PERANCANGAN
Bab ini menguraikan tentang perancangan sistem yang terdiri dari
perancangan sistem yang akan dibangun dan metode pengujian yang akan
digunakan. Adapun perancangan yang digunakan antara lain use case dan
rancangan antarmuka dari sistem yang akan dibuat.

4
BAB IV PENGUJIAN DAN ANALISIS
Pada tahap ini dilakukan analisis berdasarkan pengujian yang
sudah dilakukan. Analisis bertujuan untuk melihat dan juga mengetahui
kesimpulan yang didapatkan setelah adanya pengujian.
BAB V KESIMPULAN DAN SARAN
Pada tahap ini berisi kesimpulan dan saran terhadap sistem yang
dibuat dan diuji. Kesimpulan berisi yang didapatkan setelah sistem selesai
dibuat. Sedangkan saran berisi hal-hal yang mungkin bisa menjadi
masukan untuk pengembangan sistem kedepannya.

5
BAB II
TINJAUAN PUSTAKA

2.1 Penelitian Terdahulu


Pasfithri N (2010), melakukan penelitian yang berjudul
“Perancangan Sistem Informasi Majalah Dinding Berbasis Web Pada
Perguruan Tinggi Raharja” untuk menganalisa sistem yang diusulkan
pada penelitian ini digunakan Program Visual Paradigma For UML 6.4
Enterprise Edition untuk pembuatan sistem ini menggunakan
Macromedia Dreamweaver sebagai penulisan listing program PHP dan
MySQL sebagai database ini. Adapun beberapa kekurangan dari sistem
ini adalah kurangnya pemanfaatan tekhnologi informasi untuk melakukan
promosi agar website ini memiliki daya guna, diusulkan untuk
memperbaiki kekurangan yang ada pada sistem yang sedang berjalan, dan
pada perancangan sistem yang di usulkan menggunakan metode SDLC
(System Development Life Cycle) dengan melewati tahapan Perencanaan
(Planning), Analisis (Analysis), Disain (Design), Implementasi
(Implementation), dan Pemeliharaan (Maintenance).
Lael (2012), melakukan penelitian yang berjudul “Perancangan
Sistem Informasi Majalah Dinding (MADING) Online Pada SMA Syekh-
Yusuf Tangerang Berbasis Web” ini, hanya menggunakan perancangan
Unified Modeling Languange (UML) berupa Visual Paradigma For 6.4
Enterprise Edition. Adapun beberapa kekurangan dari sistem ini adalah
kurangnya pengoprasian akses komunikasi dan kurangnya pelatihan
khusus dalam menjalankan sistem yang baru, diusulkan untuk
memperbaiki kekurangan yang ada pada sistem yang berjalan. Dan pada
perancangan sistem yang diusulkan menggunakan metode SDLC (System
Development Life Cycle) dengan melewati tahapan Perencanaan
(Planning), Analisis (Analysis), Disain (Design), Implementasi
(Implementation), dan Pemeliharaan (Maintenance).
Asmara (2014), melakukan penelitian yang berjudul
“Perancangan Sistem Informasi Majalah Dinding (MADING) Pada SMA
Yuppentek 1 Tangerang Berbasis Web” ini, Menggunakan metode
perancangan Unified Modelling Language (UML) dengan menggunakan
6
alat bantu (Tools) berupa Visual Paradigm For 6.4 Enterprise Edition,
untuk pembuatan sistem ini menggunakan Macromedia Dreamweaver
sebagai penulisan listing program php dan mysql sebagai databasenya.
Adapun beberapa kekurangan dari sistem ini adalah kurangnya
pemanfaatan tekhnologi informasi untuk melakukan promosi agar
website ini memiliki daya guna
Herdiyani (2014), melakukan penelitian yang berjudul
“Perancangan Sistem Informasi Majalah Dinding Pada SMAN 15
Tangerang Berbasis Web” dalam SKRIPSI ini dijelaskan bahwa website
tersebut dapat dengan mudah memberikan informasi kepada siswa.
Adapun beberapa kekurangan dari sistem ini adalah kurangnya
pengoprasian akses komunikasi dan kurangnya pelatihan khusus dalam
menjalankan sistem yang baru. Dan untuk menggunakan metode
pengembangan sistem yang digunakan dalam penelitian ini yaitu metode
SDLC (System Development Life Cycle) dengan melewati tahapan
Perencanaan (Planning), Analisis (Analysis), Disain (Design),
Implementasi (Implementation), dan Pemeliharaan (Maintenance).
Sadane (2011), melakukan penelitian yang berjudul
“Perancangan Sistem Informasi Perpustakaan Pada SMAN 8 Tangerang
Berbasis Web” ini, Menggunakan metode perancangan Unified
Modelling Language (UML) dengan menggunakan alat bantu (Tools)
berupa Visual Paradigm For 6.4 Enterprise Edition, untuk pembuatan
sistem ini menggunakan Macromedia Dreamweaver sebagai penulisan
listing program PHP dan MySQL sebagai databasenya. Adapun beberapa
dari sistem ini adalah kurangnya pengoprasian akses komunikasi dan
kurangnya pelatihan khusus dalam menjalankan sistem yang baru.
Penelitian yang dilakukan adalah “Mading Online Sebaga Sarana
Pertukaran Informasi (Studi Kasus: Politeknik Catex Riau)”. Penelitian
ini dibangun dengan menggunakan Bahasa pemograman PHP dan
MySQL sebagai penyimpanan database. Apabila terdapat informasi
terbaru dapat diberitahuan dengan menggunakan notifikasi berupa email.

7
2.2 Landasan Teori
2.2.1 Pengertian Majalah Dinding
Hamalik (1985), menyatakan bahwa didalam majalah dinding
terdapat nilai-nilai pendidikan seperti berikut:
1. Tempat menampilkan hasil pekerjaan siswa, merupakan ruang
khusus untuk mempertunjukan benda-benda seperti gambar-
gambar, poster, dan sebagainya yang merupakan hasil karya
kelas dapat ditampilkan didalam majalah dinding.
2. Pengumuman-pengumuman sekolah seperti, tugas-tugas
siswa, dapat ditempatkan didalam majalah dinding.
3. Dapat memperluas dan menciptakan minat siswa-siswa
4. Menimbulkan rasa kebersamaan serta tanggung jawab
bersama untuk mempersatukan semangat kelas.
5. Siswa dapat bekerja secara kelompok pada saat merencakan
dan melaksanakan kegiatan dapat melengkapi pengalaman
sosial siswa
6. Majalah dinding dapat mendorong siswa untuk bekerja dan
siswa dapat terlatih untuk memecahkan masalah.Pengelolaan
majalah dinding yang baik setidak-tidaknya memiliki tiga
unsur di dalamnya yaitu perencanaan, pelaksanaan dan
evaluasi perencanaan. berikut pelaksanaan 3 unsur
pengolahan majalah dinding yang baik:
a. Perencanaan
Perencanaan tidak lain merupakan kegiatan untuk
menetapkan tujuan yang akan dicapai beserta caracara
untuk mencapai tujuan tersebut (Boone & Kurtz, 1984).
b. Pelaksanaan
Pelaksanaan merupakan suatu kerangka dan
pentahapan kegiatan secara sistematis dalam
melaksanakan atau merealisasikan rencana kegiatan
(Mulyadi, 1989).
c. Evaluasi Perencanaan
Evaluasi perencanaan adalah aktivitas untuk
meniliti dan mengetahui sampai mana pelaksanaan yang
8
dilakukan di dalam proses keseluruhan organisasi
mencapai hasil sesuai dengan rencana atau program yang
telah ditetapkan dalam rangka pencapaian tujuan
pendidikan (Purwanto, 2004).
2.2.2 Fungsi Majalah Dinding
Barnung, 1998 mengemukakan ada 4 (empat) fungsi majalah
dinding yaitu sebagai:
1. Sarana komunikasi dan penyampai informasi.
2. Media hiburan yang murah dan sederhana.
3. Sarana untuk menjalin tali persaudaraan dan kekeluargaan di
antara sesama anggota komunitas tertentu.
4. Ajang untuk pengembangan kreativitas.
2.2.3 Politeknik Caltex Riau
Politeknik Caltex Riau (PCR) merupakan perguruan tinggi di
Rumbai Pekanbaru, Riau yang didirikan atas kerja sama antara
Pemerintah Provinsi Riau dengan PT. Caltex Pacific Indonesia (Chevron
Pacific Indonesia). Kampus PCR berdiri pada tahun 2001. Program Studi
yang terdapat di PCR yaitu Teknik Elektronika, Teknik Komputer,
Teknik Telekomunikasi, Teknik Mekatronika dan Akuntansi untuk
Diploma 3 serta Sistem Informasi, Teknik Informatika dan Teknik
Elektronika Eelekomunikasi, Teknik Mesin dan Teknik Listrik untuk
Diploma 4.
Majalah dinding yang berada di Politeknik Caltex Riau pada saat
ini masih seperti majalah dinding pada umumnya, yang mana majalah
dindingnya masih tertempel didinding-dinding disetiap lantai yang
berada di Politeknik Caltex Riau. Sehingga penyebaran informasi di
Politeknik Caltex Riau masih menggunakan proses manual, seperti
penyebaran informasi mengenai kegiatan, acara akademik maupun non-
akademik secara manual dengan cara berkeliling disetiap lantainya untuk
menempalkan poster dan sebagainya dimajalah dinding. Proses tersebut
dinilai belum berfungsi dengan baik dikarenakan informasi yang tertera
pada majalah dinding kurang menarik, selain majalah dinding kurang
menarik, ruang yang disediakan oleh majalah dinding terbatas sehingga

9
informasi yang ada sebelumnya sering tertutupi oleh informasi yang baru
disematkan dan proses pembaruan majalah dinding yang kurang up to
date mengakibatkan informasi tidak tersampaikan dengan baik dan tepat
waktu.Termasuk kesulitan dalam mengelola majalah dindingnya.
Berikut adalah alur majalah dinding Politeknik Caltex Riau:

Gambar 2.1 Alur Majalah Dinding Politeknik Caltex Riau

Pada gambar 2.1 merupakan alur mading Politeknik Caltex Riau.


Alur kerja mading ini dimulai dari civitas akademik(staf & mahasiswa)
yang menyajikan informasi pada mading. Kedua informasi pada mading
yang disajikan bersifat akademik dan non-akademik. Kemudian
informasi tersebut dapat dilihat oleh civitas akademik lainnya.
2.2.4 Skala Likert
Menurut (Sugiyono, 2012) Skala Likert merupakan metde
pengukuran yang digunakan untuk mengukur sikap, pemdapat dan persepsi
individu atau kelompok orang tergantung fenomena sosial.
Skala Likert merupakan skala yang digunakan dalam kuisioner
untuk mendapatkan tingkat kesepakatan dengan pernyataan. Responden
diminta untuk menunjukkan tingkat kesepakatan melalui pernyataan yang
diberikan dengan cara skala ordinal dimana tidak hanya menyatakan
kategori tetapi juga menyatakan peringkat pernyataan yang diukur
10
Tabel 2. 1 Bobot Skala Likert

Pernyataan
Pilihan Jawaban
Positif Negatif
Sangat Setuju 5 1
Setuju 4 2
Ragu 3 3
Tidak Setuju 2 4
Sangat Tidak Setuju 1 5
Pada penelitian ini akan dilakukan pengujian dengan
menggunakan metode skala likert , agar dapat diketahui pendapat
responden apakah implementasi mading online sebagai sarana pertukaran
informasi studi kasus (Politeknik Caltex Riau) ini mudah dipahami,
dipelajari digunakan dan menarik bagi pengguna.
Rumus yang digunakan untuk menghitung pengujian skala likert
ini adalah :

T = Total jumlah responden yang memilih


Pn = Pilihan angka skor Likert
Agar mendapatkan hasil interpretasi, terlebih dahulu harus
diketahui skor tertinggi (X) dan skor terendah (Y) untuk item penilaian
dengan rumus sebagai berikut:
Y = skor tertinggi likert x jumlah responden
X = skor terendah likert x jumlah responden
Hasil nilai yang dihasilkan dengan menggunakan rumus Index %.
11
Rumus Index % = Total Skor / Y x 100

Sebelum menyelesaikannya kita juga harus mengetahui interval


(rentang jarak) dan interpretasi persen agar mengetahui penilaian dengan
metode mencari Interval skor persen (I).
Rumus Interval

I = 100 / Jumlah Skor (Likert)

2.2.5 Teknik Sampling


Sampel adalah bagian dari jumlah dan karakteristik yang dimiliki
oleh populasi tersebut (Sugiyono, 2011).Dengan demikian sampel adalah
sebagian dari populasi yang karakteristiknya hendak diselidiki, dan bisa
mewakili keseluruhan populasinya sehingga jumlahnya lebih sedikit dari
populasi. Menghitung ukuran sampel yang dilakukan dengan
menggunakan teknik Slovin menurut Sugiyono (2011). Adapun penelitian
ini menggunakan rumus Slovin karena dalam penarikan sampel,
jumlahnya harus representative agar hasil penelitian dapat
digeneralisasikan dan perhitungannya pun tidak memerlukan tabel
jumlah sampel.
2.2.6 Black Box Testing
Black box testing adalah sebuah pengujian untuk mengetahui
apakah semua fungsi software sudah berjalan sesuai dengan kebutuhan
fungsional yang telah ditetapkan sebelumnya (Sanjaya, 2014). Pengujian
black box memungkinkan pengembang software mendapatkan rangkaian
kondisi input yang umumnya menggunakan semua persyaratan
fungsional untuk suatu program. Black box dapat menemukan kesalahan
dalam kategori berikut:
1. Fungsi-fungsi yang tidak benar atau hilang.
2. Kesalahan interface

12
3. Kesalahan dalam struktur data atau basisdata eksternal
4. Inisialisasi dan kesalahan terminasi
5. Validasi fungsional
6. Kesensitifan sistem terhadap nilai input tertentu.
7. Batasan dari suatu data.

13
BAB III
PERANCANGAN

3.1 Arsitektur Sistem


Berikut merupakan gambar arsitektur pada sistem yang akan
dibangun.

Gambar 3.1 Arsitektur Sistem

Pada gambar 3.1 merupakan Arsitektur Sistem yang akan


dibangun. Dimulai dari civitas akademik mengirimkan informasi melalui
web server. Kemudian akan dilakukan proses validasi oleh BAAK apakah
informasi tersebut layak untuk di tampilkan kedalam mading atau tidak.
Informasi tersebut akan disimpan di dalam database dan dikirimkan
melalui email ke civitas akademik sebagai notifikasi.

14
3.2 Flowchart
Berikut merupakan gambar flowchart pada sistem yang akan
dibangun :

Gambar 3.2 Flowchart Mading Online

15
Pada gambar 3.2 merupakan flowchart dari sistem yang akan
dibangun. Civitas akademik login menggunakan email dan password.
Sistem akan memvalidasi email dan password apabila email dan
password tidak sesuai maka akan kembali lagi ke form login, namun jika
email dan password sesuai maka sistem akan mengarahkan ke suatu
kondisi dimana terdapat level untuk civitas akademik dan BAAK. Ketika
login sebagai civitas akademik maka akan tampil halaman awal civitas
akademik. Civitas akademik dapat melakukan tambah, edit, dan hapus
informasi. Jika kondisi login tidak sebagai akademik maka akan ada
kondisi login sebagai BAAK dan diarahkan ke halaman awal BAAK.
BAAK dapat melihat inputan informasi yang dilakukan oleh civitas
akademik. BAAK dapat menyetujui informasi inputan dari civitas
akademik. Jika informasi tersebut di setujui maka akan tampil sebagai
informasi dan BAAK akan mengirim notifikasi melalui email. Apabila
informasi tidak di setujui maka akan kembali lagi ke lihat inputan
informasi,. Jika login bukan sebagai BAAK dan civitas akademik maka
akan kembali lagi pada kondisi cek login.
3.3 Bisnis Proses Mading Online
Sesuai dengan use case diagram pada pembahasan sebelumnya,
dapat digambarkan activity diagram yang direpresentasikan berdasarkan
use case diagram tersebut.

Gambar 3.3 Bisnis Proses Mading Online

16
Pada gambar 3.3 merupakan bisnis proses mading online disini
terdapat proses pada civitas, madding online dan baak. Pertama pada
civitas proses dimulai dari menginputkan data mading, kemudian pada
bagiann mading online civitas harus memilih template mading, memilih
durasi tampil, memilih kategori, memasukkan file mading, menambah
deskripsi tentang mading tersebut, kemudian masukkan gambar. Setelah
civitas selesai melakukan proses tersebut maka data mading yang di input
oleh civitas tersebut akan divalidasi terlebih dahulu oleh bagian baak, jika
data mading tersebut diterima oleh baak maka akan tampil data mading
tersebut dan jika tidak maka data tersebut akan tetap berada di bagian
baak

3.4 Arsitektur Raspberry

Gambar 3.4 Arsitektur Raspberry


17
Pada gambar 3.4 merupakan gambar arsitektur raspberry dimana
proses nya dimulai dari civitas admin menginput informasi, informasi
tersebut akan tersimpan ke dalam web server. Kemudian pada web server
akan dihubungkan ke dalam raspberry, yang mana raspberry akan
menghubungkan web server dengan monitor sehingga user dapat melihat
informasi yang telah di inputkan oleh admin.
3.5 Pengertian Akademik
Berdasarkan Keputusan Mentri Pendidikan Nasional RI Nomor
178/U/2001, akademik merupakan sebuah penyampaian ilmu yang
diarahkan terutama pada penguasaan dan pengembangan disiplin ilmu
pengetahuan, tekhnologi, dan seni tertentu, yang mencakup program
pendidikan. Program Pendidikan Akademik adalah program pendidikan
yang diarahkan terutama pada penguasaan ilmu pengetahuan, tekhnologi,
dan seni. Program Pendidikan Akademik terdiri dari Program Sarjana,
Program Magister, dan Program Doktor (Menteri Pendidikan, 2001).
3.6 Pengertian Non-Akademik
Non akademik adalah sesuatu diluar hal – hal yang bersifat ilmiah
dan tidak terpaku pada satu terori tertentu. Berbeda dengan akademik,
non akademik seseorang sulit diukur secara pasti karena tidak ada salah
dan benar di dalamnya. Seperti seni melukis dimana tidak ada ukuran
salah dang benar didalamnya karen keindahan sebuah lukisan bisa
berbeda – beda tergantung orang yang melihatnya. Seperti lukisan abstrak
yang terkadang hanya bisa dipahami keindahan nya oleh sebagian orang.
Non akademik bisa diartikan juga sebagai kegiatan non formal dimana
kita bisa mendapatakan kemampuan – kemampuan dari mana saja dan
tidak harus dari lembaga institusi tertentu (Sobur, 2006).

18
3.7 Use Case Diagram

Gambar 3.5 Usecase Diagram Mading Online

Pada gambar 3.5 merupakan usecase diagram pada sistem yang


akan dibangun. Terdapat 2 aktor pada usecase diagram tersebut. Aktor
pertama yaitu civitas PCR yang dapat melakukan login, melihat
informasi, mengubah informasi, menghapus informasi, dan melakukan
ubah data diri. Aktor kedua yaitu BAAK dapat melakukan login, melihat
informasi, mengubah informasi, menghapus informasi, validasi status
persetujuan informasi, kirim email notifikasi dan ubah data diri.

19
3.8 Skenario Use Case
3.8.1 Use Case Login ke Sistem
Aktor : Civitas akademik dan BAAK
Pre Kondisi : Aktor memasuki halaman login
Post Kondisi : Aktor berhasil masuk ke sistem
Tabel 3.1 Skenario Use Case Login ke Sistem
Aksi Aktor Sistem
Kondisi Normal
1. Menginput email dan
password
2. Klik tombol login
3. Memvalidasi email dan
password
4. Cek User
5. Menampilkan halaman
sesuai level
Lanjutan Kondisi No 4
(Kondisi Gagal)
6. Menampilkan pesan
kesalahan dalam inputan
email dan password
7. Menampilkan halaman
login
3.8.2 Use Case Tambah Informasi
Aktor : Civitas akademik dan BAAK
Pre Kondisi : Aktor memasuki halaman login
Post Kondisi : Aktor berhasil masuk ke sistem

20
Tabel 3. 2 Skenario usecase Tambah Informasi
Aktor Sistem
Kondisi Normal
1. Klik menu tambah
informasi
2. Tampil form input
3. Tekan button tambah
4. Sistem menyimpan data
inputan
3.8.3 Use Case Menghapus Informasi
Aktor : Civitas akademik dan BAAK
Pre Kondisi : Aktor memasuki halaman login
Post Kondisi : Aktor berhasil masuk ke sistem
Tabel 3. 3 Skenario Use Case Menghapus Informasi
Aktor Sistem
Kondisi Normal
1. Klik menu button hapus
2. Menampilkan pesan
konfirmasi hapus
Kondisi alternatif 2
3. Klik tombol button yes
atau no
4. Menghapus dan
menampilkan data
3.8.4 Use Case Mengubah Informasi
Aktor : Civitas akademik dan BAAK
Pre Kondisi : Aktor memasuki halaman login
Post Kondisi : Aktor berhasil masuk ke sistem

21
Tabel 3. 4 Skenario Use Case Mengubah Informasi
Aktor Sistem
Kondisi Normal
1. Klik button ubah
2. Menampilkan data
3. Menampilkan form ubah
4. Mengisi data yang akan
diubah
5. Memampilkan data yang
telah di ubah

3.8.5 Use Case Validasi Status Persetujuan Informasi


Aktor : BAAK
Pre Kondisi : Aktor memasuki halaman login
Post Kondisi : Aktor berhasil masuk ke sistem
Tabel 3.5 Skenario Use Case Validasi Status Persetujuan Informasi
Aktor Sistem
Kondisi Normal
1. BAAK melihat inputan
informasi
2. Menampilkan inputan
informasi
Kondisi alternatif 1
3. BAAK menyetujui
inputan informasi
4. Sistem mengubah status
menjadi di setujui
Kondisi alternatif 2

22
Aktor Sistem
5. BAAK tidak menyetujui
inputan informasi
6. Sistem tidak mengubah
status
3.8.6 Use Case Notifikasi Melalui Email
Aktor : BAAK
Pre Kondisi : Aktor memasuki halaman login
Post Kondisi : Aktor berhasil masuk ke sistem
Tabel 3.6 Skenario Use Case Notifikasi Melalui Email
Aktor Sistem
Kondisi Normal
1. BAAK menyetujui
inputan informasi
2. Sistem mengubah status
menjadi di setujui
3. BAAK mengirimkan
notifikasi melalui email
4. Sistem mengirimkan
notifikasi ke email tujuan
3.8.7 Use Case Ubah Data Diri
Aktor : Civitas Akademik dan BAAK
Pre Kondisi : Aktor memasuki halaman login
Post Kondisi : Aktor berhasil masuk ke sistem

23
Tabel 3.7 Skenario Use Case Kelola Laporan Keuangan

Aktor Sistem
Kondisi Normal
1. Klik tombol button ubah
data diri
2. Menampilkan form ubah
data diri
3. Mengisi form ubah data
diri
4. Menyimpan perubahan
kedalam database
5. Civitas melihat data diri
baru
3.9 Entity Relationship Diagram(ERD)
Berikut merupakan gambar dari Entity Relationship diagram
(ERD) dari sistem yang akan dibangun :

Gambar 3.6 Entity Relationship Diagram

24
Gambar 3.6 merupakan Entity Relationship Diagram (ERD) dari
sistem yang akan dibangun. Entity Relationship Diagram (ERD)
memiliki 3 tabel. Tabel pertama yaitu user yang memliki atribut id_user
yang bertindak sebagai primary key, email dan password. Tabel ke dua
yaitu informasi yang memiliki atribut id sebagai primary key, informasi,
kategori, status_persetujuan, dan detail. Tabel ke tiga yaitu kategori yang
memiliki atribut id_kategori yang bertindak sebagai primary key dan
nama_kategori.

25
BAB IV
PENGUJIAN DAN ANALISIS

4.1 Hasil Perancangan


Mading Online ini dibuat dengan platform web yang dapat
digunakan oleh semua civitas yang ada di Politeknik Caltex Riau dengan
admin, yaitu: BAAK dapat login dan tidak login untuk mengakses sistem.
4.1.1 Antarmuka Web Admin
Pada subbab ini akan menjelaskan tentang hal-hal apa saja yang
dapat dilakukan oleh admin yang mana admin merupakan civitas
akademik Politeknik Caltex Riau dalam menggunakan sistem yang telah
dibangun.
4.1.1.1 Antarmuka Halaman Login Civitas
Halaman petugas hanya dapat diakses jika sudah melakukan
login. Gambar 4.1 merupakan antarmuka halaman login untuk petugas.

Gambar 4.1 Antarmuka Halaman Login Civitas

Pada halaman login petugas, terdapat beberapa elemen, yaitu:


36
1. Field input email
Field untuk memasukkan email saat civitas ingin login.
2. Field input password
Field untuk memasukkan password saat civitas ingin login.
3. Tombol login
Tombol untuk memproses login, lalu masuk ke halaman
beranda petugas.
4.1.1.2 Antarmuka Halaman Daftar User
Antarmuka halaman daftar user dijelaskan seperti pada gambar
4.2 berikut ini. Pada halaman ini terdapat pengguna dapat melakukan
registrasi dengan cara mengisi nama dan email.

Gambar 4.2 Antarmuka Halaman Registrasi

4.1.1.3 Antarmuka Halaman Beranda


Seperti yang terlihat pada gambar 4.3, merupakan tampilan
antarmuka halaman beranda. Pada halaman ini terdapat menu informasi,

37
informasi dan akun profil selain intu juga terdapat button tambah
informasi dan tabel data infotmasi.

Gambar 4.3 Antarmuka Halaman Beranda

4.1.1.4 Antarmuka Tambah Informasi


Berdasarkan gambar 4.4 menjelaskan mengenai antarmuka
tambah informasi. Pada halaman ini digunakan untuk menambah
informasi dengan kategori akademik dan non akademik.

Gambar 4.4 Antarmuka Tambah Informasi

38
4.1.1.5 Antarmuka Validasi User
Pada halaman ini digunakan oleh admin (BAAK) untuk
melakukan validasi user yang baru mendaftar. Untuk tampilan antarmuka
validasi user dapat dilihat pada gambar 4.5.

Gambar 4.5 Antarmuka Validasi User.

4.1.1.6 Antarmuka Halaman Akun Profil


Antarmuka halaman akun profil seperti pada gambar 4.6, yang
digunakan oleh civitas untuk merubah akun profil seperti merubah nama
user dan password.

Gambar 4.6 Antarmuka Halaman Akun Profil.

4.1.1.7 Antarmuka Halaman Daftar Mading Online


Gambar 4.7 merupakan antarmuka halaman daftar mading seperti
daftar UKM, HIMA dan informasi dengan kategori akademik dan non-
akademik.

39
Gambar 4.7 Antarmuka Halaman Daftar Mading.

4.2 Pengujian
4.2.1 Pengujian Black Box
Pengujian Black Box bertujuan untuk mengetahui semua fungsi
sistem telah berjalan dengan benar dan sesuai dengan kebutuhan
fungsional yang telah ditetapkan. Pengujian yang dilakukan yaitu
menguji antara tampilan serta inputan normal dan inputan yang tidak
sesuai. Sehingga hasil dari pengujian black box ini adalah sebuah
dokumentasi yang menunjukkan bukti pengujian. Hasil pengujian Black
Box yang telah dilakukan , didapatkan hasil bahwa implementasi mading
online sebagai sarana pertukaran informasi studi kasus (Politeknik Caltex
Riau) sudah 100% telah berhasil dibangun dan berjalan dengan baik
sesuai yang diharapkan.
Tabel 4.1 Pengujian Black Box

No Butir Uji Deskripsi Hasil


1. [Admin]: a. Masukan normal √
Login Admin mengisi email dan password yang
Admin benar, lalu sistem akan melakukan proses
login dan menampilkan halaman awal admin.

40
No Butir Uji Deskripsi Hasil
b. Masukan yang tidak sesuai
Jika admin mengisi email dan password
yang tidak sesuai, maka sistem akan
memberikan peringatan dan proses login
tidak dapat dilakukan

2 [Admin]: a. Masukan normal √


Tambah Admin mengisi email, nama, jenis
User akun, maka akan menampilkan status
halaman verivikasi.

41
No Butir Uji Deskripsi Hasil
b. Masukan yang tidak sesuai
Jika admin mengisi email nama dan jenis
akun yang tidak sesuai, maka sistem akan
memberikan peringatan dan proses tambah
user tidak dapat dilakukan

3. [Admin]: a. Masukan normal √


Menambah- Jika admin memilih icon tambah (+),
kan maka sistem akan menampilkan form input.
informasi

42
No Butir Uji Deskripsi Hasil
b. Masukan yang tidak sesuai
Jika admin tidak mengisi form dengan
lengkap, maka akan muncul peringatan untuk
melengkapinya.

4. [Admin]: Jika admin berada pada halaman awal, √


Menampilk terdapat tabel berisi data informasi.
an data
informasi

43
No Butir Uji Deskripsi Hasil
5. [Admin]: Jika admin memilih menu validasi user maka √
Validasi akan menampilkan data user yang akan
User divalidasi oleh admin .

6. [Admin]: a. Masukan normal √


Akun profil Jika admin memilih menu akun profil,
maka sistem akan menampilkan form berisa
profil user.

7. [Admin]: Merupakan antarmuka halaman √


Antar Muka daftar mading seperti daftar UKM, HIMA dan
Daftar informasi dengan kategori akademik dan non-
Mading akademik.
Online

44
4.2.2 Pengujian Skala Likert
Pengujian system ini menggunakan metode skala likert dengan
memanfaatkan kuesioner yang disebarkan kepada 100 responden yang
ada di Politeknik Caltex Riau. Pengujian ini menggunakan kuisioner yang
terdiri pertanyaan-pertanyaan yang digunakan untuk memenuhi
kebutuhan analisa kepada civitas, dengan menggunakan skala likert
dengan menyatakan sangat setuju untuk semua indikator pada kuesioner
dan dapat dipahami. Hasil pengujian dapat dilihat pada lampiran A.

Persentase
90
88
86
84
82
80
78
76
Performance Information Economic Control Efficiency Services

Gambar 4.8 Indeks Nilai Kuesioner

Pada Gambar 4.8 merupakan tabel rekipitulasi indeks kuesioner.


Tabel ini berisi 100 responden yang menjawab 27 pernyataan yang terdiri
dari beberapa bagian, nilai berdasarkan bobot nilai jawaban resonden
yang dirata-rata pada kuesioner. Pada perhitungan Skala Likert
menggunakan rumus slovin sehingga didapatkan responden sebanyak 100
responden. Berikut merupakan perhitungan skala likert menggunakan
rumus slovin.

45
𝑁
𝑛=
1 + 𝑁𝑒 2
Keterangan
n = jumlah sampel
N = jumlah total populasi
e = toleransi error
Berdasarkan rumus slovin yang digunakan, yang mana N
menjelaskan bahwa jumlah populasi yang berada di Politeknik Caltex
Riau dengan margin of error (e) yang ditetapkan adalah 10% atau 0,1.
Tabel 4.2 menjelaskan tentang keterangan nilai yang diberikan
oleh responden terhadap pernyataan pada kuesioner yang digunakan
untuk menguji sistem ini, seperti yang terlihat pada tabel 4.2.
Tabel 4. 2 Tabel Keterangan Kuisioner

SS Sangat Setuju
S Setuju
N Netral
TS Tidak Setuju
STS Sangat Tidak Setuju
Tabel 4. 3 Kuisioner mading online PCR dengan pertanyaan positif.

Penilaian
No Pertanyaan
TSS TS N S SS
1 Aplikasi ini memudahkan dalam melihat
informasi
2 Aplikasi ini bekerja seperti yang
pengguna inginkan
3 Apakah waktu tunggu dalam mengakses
fitur-fitur yang ada masih dirasa wajar
4 Aplikasi ini mudah dipahami oleh
pengguna
5 Aplikasi ini sesuai fungsi kerja dengan
standar yang ditetapkan
46
Penilaian
No Pertanyaan
TSS TS N S SS
6 Aplikasi ini memiliki informasi yang
akurat
7 Aplikasi ini menyajikan informasi tepat
pada waktu
8 Aplikasi ini sesuai informasi yang
dihasilkan dengan kebutuhan
9 Aplikasi ini sesuai tampilan
informasinya dengan kebutuhan
pengguna
10 Aplikasi ini mudah digunakan/diakses
11 Aplikasi ini tidak berbayar
12 Aplikasi ini tidak membuat saya
mengeluarkan biaya untuk mencetak
dokumen seperti poster untuk
menyampaikan informasi
13 Saya menggunakan aplikasi ini dengan
cepat
14 Saya dapat menghemat dengan
menggunakan aplikasi ini
15 Aplikasi ini memudahkan pekerjaan
saya sehari-hari
16 Saya mudah mengingat bagaimana cara
menggunakan aplikasi ini
17 Aplikasi ini mudah untuk dipelajari cara
penggunaannya
18 Aplikasi ini menghasilkan informasi
yang akurat dan dapat dipercaya
19 Aplikasi ini menghasilkan informasi
yang konsisten
20 Aplikasi ini mempunyai fungsi yang
lengkap
21 Aplikasi ini mudah dipelajari, digunakan
dan tidak canggung untuk digunakan

47
Penilaian
No Pertanyaan
TSS TS N S SS
22 Aplikasi ini menyenangkan untuk
digunakan
23 Saya akan merekomendasikan sistem ini
kepada teman da?n kerabat saya
Tabel 4. 4 Kuisioner mading online PCR dengan pertanyaan negatif

No Pertanyaan Penilaian

TSS TS N S SS

1 Aplikasi ini sering terjadi error


(kesalahan) saat pemrosesan
2 Aplikasi ini menganggu aktivitas kerja
saya sehari-hari
3 Sering terjadi penundaan proses
transaksi yang dilakukan
4 Aplikasi ini susah untuk dioperasikan
dan dipelajari oleh pengguna

Tujuannya adalah untuk mengetahui aspek penggunaan dari


sistem yang dibangun. Kriteria yang diambil berdasarkan ISO-9126 yaitu
usefulness, ease of use, satisfaction, effective, dan efficiency.
Rumus untuk menghitung pengujian Skala Likert dijelaskan pada
tabel 4.5 .
Tabel 4. 5 Perhitungan Skala Likert

Perhitungan Skala Likert :


Jumlah didapat dari : ∑ (Bobot x Nilai Responden)
Perhitungan persentase didapat dari :
Jumlah a
(Point Tertinggi x Jumlah Responden)

48
Pada tabel 4.6 merupakan tabel pengujian performance
berdasarkan survei yang dilakukan maka didapatkan hasil 87% yang
menyatakan bahwa responden setuju.
Tabel 4.6 Pengujian Performance pada mading online

No Pernyataan Performance Hasil


1 Aplikasi ini memudahkan dalam melihat
informasi
2 Aplikasi ini bekerja seperti yang pengguna
inginkan 87%
3 Apakah waktu tunggu dalam mengakses fitur-
fitur yang ada masih dirasa wajar
4 Aplikasi ini mudah dipahami oleh pengguna
5 Aplikasi ini sesuai fungsi kerja dengan standar
yang ditetapkan
Berdasarkan tabel 4.7 merupakan tabel pengujian information
berdasarkan survei yang dilakukan maka didapatkan hasil 87% yang
menyatakan bahwa responden setuju.
Tabel 4.7 Pengujian Information pada mading online

No Pernyataan Information Hasil


1 Aplikasi ini memiliki informasi yang akurat
2 Aplikasi ini menyajikan informasi tepat pada
waktu
3 Aplikasi ini sesuai informasi yang dihasilkan 87%
dengan kebutuhan
4 Aplikasi ini sesuai tampilan informasinya
dengan kebutuhan pengguna
5 Aplikasi ini mudah digunakan/diakses
Pengujian economic berdasarkan survei yang dilakukan maka
didapatkan hasil 80% yang menyatakan bahwa responden setuju seperti
dijabarkan pada tabel 4.8.

49
Tabel 4.8 Pengujian Economic pada mading online

No Pernyataan Economic Hasil


1 Aplikasi ini tidak berbayar
2 Aplikasi ini tidak membuat saya 80%
mengeluarkan biaya untuk mencetak dokumen
seperti poster untuk menyampaikan informasi
Tabel pengujian control berdasarkan survei yang dilakukan
seperti terurai pada tabel 4.9 didapatkan hasil 84% yang menyatakan
bahwa responden setuju.
Tabel 4.9 Pengujian Control

No Pernyataan Control Hasil


1 Aplikasi ini sering terjadi error (kesalahan)
saat pemrosesan
2 Aplikasi ini menganggu aktivitas kerja saya
sehari-hari 84%
3 Sering terjadi penundaan proses transaksi
yang dilakukan
4 Aplikasi ini susah untuk dioperasikan dan
dipelajari oleh pengguna
Tabel pengujian efficiency berdasarkan survei yang dilakukan,
didapatkan hasil 83% seperti pada tabel 4.10 yang menyatakan bahwa
responden setuju.
Tabel 4.10 Pengujian Efficiency

No Pernyataan Efficiency Hasil


1 Saya menggunakan aplikasi ini dengan cepat
2 Saya dapat menghemat dengan menggunakan
aplikasi ini
3 Aplikasi ini memudahkan pekerjaan saya 83%
sehari-hari
4 Saya mudah mengingat bagaimana cara
menggunakan aplikasi ini
5 Aplikasi ini mudah untuk dipelajari cara
penggunaannya
50
Pada table 4.11 merupakan tabel pengujian performance
berdasarakan survei yang dilakukan makan didapatkan hasil 86% yang
menyaytakan bahwa responden setuju.
Tabel 4.11 Pengujian Service

No Pernyataan Service Hasil


1 Aplikasi ini menghasilkan informasi yang
akurat dan dapat dipercaya
2 Aplikasi ini menghasilkan informasi yang
konsisten 88%
3 Aplikasi ini mempunyai fungsi yang lengkap
4 Aplikasi ini mudah dipelajari, digunakan dan
tidak canggung untuk digunakan
5 Aplikasi ini menyenangkan untuk digunakan
6 Saya akan merekomendasikan sistem ini
kepada teman dan kerabat saya
4.2.3 Pengujian Validitas
Pengujian validitas merupakan tingkat keandalan suatu alat ukur
yang digunakan. Instrumen dikatakan valid berarti menunjukkan alat
ukur yang dipergunakan untuk mendapatkan data dapat digunakan untuk
mengukur apa yang seharusnya diukur.
Suatu instrument dikatakan valid yakni sejauh mana alat ukur
tersebut berhasil mengukur suatu data. Dalam penelitian ini pendekatan
yang dilakukan untuk menguji kevalidan data yakni dengan melakukan
analisa menggunakan program SPSS dengan memperhatikan hal sebagai
berikut:
Signifikansi () = 0,05
DF = N – 2
N = Jumlah responden
Berdasarkan pengujian yang dilakukan dengan menggunakan
tools SPSS, maka didapatkan hasil r_tabel (definisi) adalah 0,196 dengan

51
nilai N = 100 – 2 = 98 dan taraf signifikansi 5%. Tabel 4.12 menampilkan
hasil pengujian validitas.
Tabel 4.12 Hasil Pengujian Validitas

Korelasi Antara R Hitung R Tabel Kesimpulan


Pertanyaan_1
0,246 0,196 Valid
dengan Skor Total
Pertanyaan_2
0,372 0,196 Valid
dengan Skor Total
Pertanyaan_3
0,375 0,196 Valid
dengan Skor Total
Pertanyaan_4
0,293 0,196 Valid
dengan Skor Total
Pertanyaan_5
0,445 0,196 Valid
dengan Skor Total
Pertanyaan_6
0,517 0,196 Valid
dengan Skor Total
Pertanyaan_7
0,575 0,196 Valid
dengan Skor Total
Pertanyaan_8
0,465 0,196 Valid
dengan Skor Total
Pertanyaan_9
0,386 0,196 Valid
dengan Skor Total
Pertanyaan_10
0,241 0,196 Valid
dengan Skor Total
Pertanyaan_11
0,247 0,196 Valid
dengan Skor Total
Pertanyaan_12
0,325 0,196 Valid
dengan Skor Total
Pertanyaan_13
0,298 0,196 Valid
dengan Skor Total
Pertanyaan_14
0,410 0,196 Valid
dengan Skor Total
Pertanyaan_15
0,525 0,196 Valid
dengan Skor Total
Pertanyaan_16
0,388 0,196 Valid
dengan Skor Total

52
Korelasi Antara R Hitung R Tabel Kesimpulan
Pertanyaan_17
0,401 0,196 Valid
dengan Skor Total
Pertanyaan_18
0,455 0,196 Valid
dengan Skor Total
Pertanyaan_19
0,352 0,196 Valid
dengan Skor Total
Pertanyaan_20
0,365 0,196 Valid
dengan Skor Total
Pertanyaan_21
0,516 0,196 Valid
dengan Skor Total
Pertanyaan_22
0,412 0,196 Valid
dengan Skor Total
Pertanyaan_23
0,436 0,196 Valid
dengan Skor Total
Pertanyaan_24
0,472 0,196 Valid
dengan Skor Total
Pertanyaan_25
0,447 0,196 Valid
dengan Skor Total
Pertanyaan_26
0,401 0,196 Valid
dengan Skor Total
Pertanyaan_27
0,407 0,196 Valid
dengan Skor Total
4.2.4 Pengujian Reliabilitas
Pengujian reliabilitas merupakan suatu ukuran yang dapat
menunjukkan bahwa alat ukur yang digunakan sudah mempunyai
keandalan sebagai alat ukur. Dikatakan alat ukur tersebut reliabel apabila
suatu ukuran dari alat ukur tersebut menunjukkan hasil yang konsisten
bila diukur berulang kali dengan alat ukur yang sama.
Nilai koefisien reliabilitas atau alpha cornbach’s yang baik
adalah diatas 0,7 (cukup baik) dan 0,8 (baik).
Tabel 4.13 Hasil Pengujian Reliabilitas

Crobach’s Alpha Nilai Banding Keterangan


0,717 0,7 Reliable
53
4.2.5 Analisis Blackbox
Berdasarkan pengujian yang telah dilakukan dengan
menggunakan metode blackbox didapatkan hasil bahwa implementasi
mading online sebagai sarana pertukaran informasi (studi kasus:
Politeknik Caltex Riau) sudah berhasil dan berjalan dengan baik sesuai
yang diharapkan. Pengujian tersebut berdasarkan tabel 4.1.
4.2.6 Analisis Pengujian Skala Likert
Berdasarkan pengujian yang telah dilakukan didapatkan hasil
masing-masing pada pengujian performance sebesar 87% dimana
memiliki nilai rata-rata berkisar 78-97 dari 5 pernyataan yang diajukan.
Pengujian efficiency sebesar 83% yang didapat dari hasil rata-rata dari 5
pernyataan berkisar antara 84-97. Pengujian service 88% yang
didapatkan dari rata-rata dari masing-masing pernyaatan yang berkisar
antara 81-93. Pengujian economic 80% yang didapatkan dari 2
pernyataan yang memiliki rata-rata antara 74-86. Pengujian control 84%
memiliki rata-rata yang berkisar antara 78-87. Perhitungan tersebut
menyatakan survei dari responden di atas 80% sehinggan dapat ditarik
sebuah kesimpulan bahwa sistem yang dibangun sudah sesuai dengan
kebutuhan pengguna. Dibandingkan dengan beberapa penelitian
terdahulu penelitian ini mampu menutupi beberapa kekurangan yang ada.
4.2.7 Analisis Pengujian Validitas
Berdasarkan pengujian validitas yang sudah dilakukan pada
setiap pernyataan kuesioner untuk 100 responden dengan taraf signifikasi
5%, maka hasil yang didapatkan diatas dari r_tabel (koefisien korelasi).
Artinya: 27 butir pernyataan yang diajukan bersifat valid.
4.2.8 Analisis Pengujian Reliabilitas
Berdasarkan pengujian reliabilitas yang dilakukan, maka nilai
alpha cornbach’s dari alat ukur yang digunakan adalah 0,717. Nilai alpha
cornbach’s lebih besar dari batas ukurnya yakni 0,6.
Artinya: untuk 27 butir pernyataan yang diajukan sudah bersifat
reliabel (konsisten).

54
BAB V
KESIMPULAN DAN SARAN

5.1 Kesimpulan
Adapun kesimpulan dari proyek akhir ini adalah sebagai berikut:
1. Implementasi Mading Online Sebagai Sarana Pertukaran
Informasi (Studi Kasus : Politeknik Caltex Riau) telah dibangun
dan menghasilkan sebuah sistem yang dapat digunakan oleh
civitas yang ada di Politeknik Caltex Riau sehingga civitas lebih
terbantu dalam mendapatkan informasi terbaru.
2. Berdasarkan hasil pengujian Black Box Testing, Implementasi
Mading Online Sebagai Sarana Pertukaran Informasi (Studi
Kasus : Politeknik Caltex Riau) sudah berjalan sesuai dengan
fungsi yang diharapkan karena civitas telah dapat mengakses
dan mengelola berbagai informasi melalui mading online.
3. Hasil pengujian Skala Likert yang digunakan pada Implementasi
Mading Online Sebagai Sarana Pertukaran Informasi (Studi
Kasus : Politeknik Caltex Riau), menunjukkan bahwa sistem ini
sesuai kinerja yang didapatkan 86%, informasi 84%, ekonomi
93%, pengendalian 88%, efisiensi 85%, dan layanan 86% yang
memuaskan.
5.2 Saran
Adapun saran yang dapat diberikan adalah:
1. Mengimplementasikan fitur User Experience (UX) design dalam
rangka meningkatkan kegunaan dan kesenangan yang diberikan
dalam interaksi pengguna dan produk.
2. Menambahkan fitur User Interface (UI) design dengan berfokus
kepada tata letak, desain visual dan branding.

55
DAFTAR PUSTAKA

Asmara, M. (2014). Perancangan Sistem Informasi Majalah Dinding


(MADING) Pada SMA Yuppentek 1 Tangerang Berbasis Web.
Barnung, K. (1998). Fungsi Majalah Dinding. Pengelolaan
Ektrakulikuler Majalah Dinding di SMPN Depok Sleman
Yogyakarta, 27.
Boone, E. L., & Kurtz, L. D. (1984). Perancanaan. Definisi Perancanaan.
Firdaus, M. (2016). Majalaah Dinding. Eksistensi Media Majalah
Dinding Sebagai Sarana Komunikasi dan Informasi Siswa Pada
Era Digital (Studi Kasus: SMP N 2 Banda Aceh).
Hamalik, O. (1985). Proses Belajar Mengajar. Pengertian Majalah
Dinding, 74.
Herdiyani, D. (2014). Perancangan Sistem Informasi Majalah Dinding
Pada SMAN 15 Tangerang Berbasis Web.
Hidayatullah, P. (2014). Pemrograman Web (HTML). Indonesia.
Hidayatullah, P. (2014). Pemrograman Web (MYSQL). Indonesia.
Hidayatullah, P., & Kawistara. (2014). Pemrograman Web. Indonesia.
Lael, J. (2012). Mading. Perancangan Sistem Informasi Majalah Dinding
(MADING) Online Pada SMA Syekh-Yusuf Tangerang Berbasis
Web.
Menteri Pendidikan. (2001). Akademik. Keputusan Menteri Pendidikan
Nasional RI.
Mulyadi. (1989). Pelaksanaan. Definisi Pelaksanaan.
Pasfithri, N. (2010). Perancagan Sistem Informasi Majalah Dinding
Web Pada Perguruan Tinggu Raharja.
Purwanto. (2004). Evaluasi Perencanaan. Teknik Evaluasi Pengajaran
Perencanaan.

56
Sadane, A. (2011). Perancangan Sistem Informasi Perpustakaan Pada
SMAN 8 Tangerang Berbasis Web.
Sanjaya. 2014. Pengaruh Profitabilitas, Free Cash Flow, dan Investment
Opportunity Set Terhadap Dividend Payout Ratio. Universitas
Atma Jaya Yogyakarta. SNA 17 Mataram.
Sobur. (2006). Non Akademik. Pengertian Akademis dan Non Akademis
Menurut Para Ahli.
Sugiyono. 2011. Metode Penelitian Kuantitatif, Kualitatif dan R&D.
Bandung: Afabeta.
Sugiyono. (2012). Metode Penelitian Kuantitatif, Kualitatif dan R&D.
Bandung: Alfabeta.
Supriyanto. (1992). Majalah Dinding. Majalah Dinding Seagai Media
untuk Meningkatkan Kemampuan Menulis, 2.

57
LAMPIRAN A

1. Hasil pengujian skala likert


Dibawah ini terlampir hasil perhitungan Skala Likert dengan
menggunakan rumus slovin dengan populasi 100 responden.
Tabel Lampiran 1.14 Hasil Perhitungan Skala Likert

No Pernyataan TSS TS N S SS TSS TS N S SS Jumlah rata-rata Persentase


1 2 17 40 41 0 4 51 160 205 420 84
2 1 1 11 50 37 1 2 33 200 185 421 84.2
3 Performance 0 0 5 20 75 0 0 15 80 375 470 94 87.56
4 1 0 17 70 12 1 0 51 280 60 392 78.4
5 0 0 2 10 88 0 0 6 40 440 486 97.2
6 1 2 1 66 30 1 4 3 264 150 422 84.4
7 0 0 6 59 35 0 0 18 236 175 429 85.8
8 Information 0 0 20 24 66 0 0 60 96 330 486 97.2 87.4
9 0 0 30 10 60 0 0 90 40 300 430 86
10 1 2 1 70 26 1 4 3 280 130 418 83.6
11 0 0 40 50 10 0 0 120 200 50 370 74
Economic 80.2
12 0 0 4 60 36 0 0 12 240 180 432 86.4
13 20 60 14 4 2 100 240 42 8 2 392 78.4
14 58 23 18 1 0 290 92 54 2 0 438 87.6
Control 84.35
15 21 78 1 0 0 105 312 3 0 0 420 84
16 28 66 10 1 1 140 264 30 2 1 437 87.4
17 0 0 37 57 6 0 0 111 228 30 369 73.8
18 3 0 17 40 40 3 0 51 160 200 414 82.8
19 Efficiency 0 0 6 13 81 0 0 18 52 405 475 95 83.64
20 6 1 0 61 32 6 2 0 244 160 412 82.4
21 0 0 0 79 21 0 0 0 316 105 421 84.2
22 0 0 9 74 17 0 0 27 296 85 408 81.6
23 0 0 4 25 71 0 0 12 100 355 467 93.4
24 1 5 1 31 62 1 10 3 124 310 448 89.6
Services 88.03333333
25 0 0 6 89 5 0 0 18 356 25 399 79.8
26 0 2 1 78 29 0 4 3 312 145 464 92.8
27 0 0 4 37 59 0 0 12 148 295 455 91

A-1
LAMPIRAN B

1. Source Code
Dibawah ini terlampir source code yang digunakan untuk
membangun proyek akhir.
Source Code Mading.php
Source Code SendEmail.php
<?php if (!defined('BASEPATH')) {
exit('No direct script access allowed');
}
class SendEmail extends CI_Controller
{
function __construct() {

parent::__construct();
$this->load->database();

$this->load->model('md_email');
$this->load->library('email');
date_default_timezone_set('Asia/Jakarta');

public function send()


B-1
{
$data['cek'] = $this->md_email->cek();

foreach ($data['cek'] as $value) {

$subject = $value['subject'];

$message = '<p>Hi
'.$value['name'].',<p>'.$value['message'].'</p> ';

$email = $value['email'];

$date = $value['due_date'];
$date_now = new DateTime('now');
$due_date = new DateTime($date);
$interval = date_diff($due_date, $date_now);
$diff_date = $interval->format('%a');

if ($diff_date <= 1 ) {
$result = $this->email

->from('petelearn18@gmail.com')

B-2
->to($email)

->subject($subject)

->message($message)

->send();

if ($result) {
$id = $value['id'];
$data = array(
'status' => 'send',

);

$this->md_email->update($data, $id);

echo "berhasil";
}
else show_error($this->email->print_debugger());
}
}

B-3
exit;
}
}

Source Code User.php


<?php if (!defined('BASEPATH')) {
exit('No direct script access allowed');
}

class User extends CI_Controller


{

public function __construct()


{
parent::__construct();
$this->load->database();
$this->load->model('md_user');
$this->load->model('md_informasi');
// $this->load->model('md_notif');
$this->load->helper('time_passed');
$this->load->helper('encrypt');
$this->load->helper('download');
$this->load->helper(['form', 'url']);
B-4
$this->load->library('pagination');
$this->load->library('session');
$this->load->library('googleplus');
$this->load->library('email');
$this->load->helper('string');
date_default_timezone_set('Asia/Jakarta');
}

public function tabel_informasi(){


$this->load->helper('tabel_informasi');
}

public function tabel_user(){


$this->load->helper('tabel_user');
}

public function index()


{
if ($this->session->userdata('namaa')) {
redirect('user/dashboard');
}

$this->load->view('login');
B-5
}

public function logout()


{
$this->session->sess_destroy();
redirect(base_url() . 'User');
}

public function dashboard()


{
if ($this->session->userdata('id') ) { //tolong tambahin if else ini
disemua awal method
// $data['notif'] = $this->md_notif->getNotification($this-
>session->userdata('id'));
$data['kategori'] = $this->md_user->getKategori();
$this->load->view('dashboard',$data);
} else { // tolong tambahin else ini d
redirect(site_url());
} // sampai sini

public function validasi_user()


{
B-6
if ($this->session->userdata('id') ) { //tolong tambahin if else ini
disemua awal method
// var_dump($this->md_user->getUserAll());
$this->load->view('validasi_user');
} else { // tolong tambahin else ini d
redirect(site_url());
} // sampai sini

public function profile()


{
if ($this->session->userdata('id') ) { //tolong tambahin if else ini
disemua awal method
// var_dump($this->md_user->getUserAll());
$this->load->view('profile');
} else { // tolong tambahin else ini d
redirect(site_url());
} // sampai sini

public function cek_login()


{
B-7
$data = [
'email' => $this->input->post('email'),
'password' => $this->input->post('password'),
];

$hasil = $this->md_user->getUserByEmail($data);
if ($hasil) {
foreach ($hasil as $sess) {
$sess_data['email'] = $sess->email;
$sess_data['jenis_user'] = $sess->role;
$sess_data['namaa'] = $sess->nama;
// $sess_data['photo'] = $sess->photo;
$sess_data['id'] = $sess->id;
$this->session->set_userdata($sess_data);
}

//if($this->session->userdata('jenis_user')==1){
$msg = $this->session->userdata('namaa');
$this->session->set_flashdata('nama', $msg);
$this->session->set_userdata('login_type', 'administrator');
$this->session->set_userdata('administrator_login', '1');

$this->session->set_userdata('id', $sess->id);
B-8
redirect('user/dashboard');
} else {
$msg = "Email dan Password anda tidak sama";
$this->session->set_flashdata('err_login', $msg);
redirect(base_url());
}
}

public function halaman_profile()


{

if ($this->session->userdata('id') ) { //tolong tambahin if else ini


disemua awal method
/*User*/
$data['User'] = $this->md_user->getUserAll();
$data['teman'] = $this->md_user->getFriendAll($this->session-
>userdata('id'));
/* Hak AKses */
//$this->load->model('md_hakakses');
//$data['hak_akses']= $this->md_hakakses->getHakAkses();
$data['notif'] = $this->md_notif->getNotification($this->session-
>userdata('id'));

B-9
$this->load->view('profile', $data);
/*print_r($hasil);*/
} else { // tolong tambahin else ini d
redirect(site_url());
}
}

public function halaman_registrasi()


{
$this->load->view('registrasi');
}

public function halaman_registrasi_admin()


{
$this->load->view('registrasi_admin');
}

public function halaman_success()


{
$this->load->view('success');
}

//
B-10
public function registrasi()
{
$data_input = [];

$data_input['email'] = $this->input->post('email');
// $data_input['password'] = $this->input->post('password');
$data_input['nama'] = $this->input->post('nama');
$data_input['role'] = $this->input->post('role');

/*print_r($data_input);*/
$this->md_user->insertUser($data_input);

$subject = "permintaan bergabung mading pcr";


$message = $this->input->post('nama').' ingin bergabung
kedalam mading pcr, klik link berikut untuk menyetujui/menolak
'.site_url('user/verifikasi_user');

$admin = $this->md_user->getAdmin();
foreach ($admin as $item) {
$this->send($subject, $message, $item->email,
'user/halaman_success');
}
redirect(base_url() . 'user/halaman_success');
}

B-11
public function registrasi_admin()
{
$data_input = [];

$data_input['email'] = $this->input->post('email');
// $data_input['password'] = $this->input->post('password');
$data_input['nama'] = $this->input->post('nama');
$data_input['status'] = 1;
$data_input['role'] = 1;

/*print_r($data_input);*/
$this->md_user->insertUser($data_input);

$subject = "permintaan bergabung mading pcr";


$message = $this->input->post('nama').' ingin bergabung
kedalam mading pcr, klik link berikut untuk menyetujui/menolak
'.site_url('user/verifikasi_user');

$admin = $this->md_user->getAdmin();
foreach ($admin as $item) {
$this->send($subject, $message, $item->email,
'user/halaman_success');
}

B-12
redirect(base_url() . 'user/halaman_success');
}
//
public function tambah_informasi()
{
if ($this->session->userdata('id') ) {
// if (!empty($_FILES['berkas2']['name'])){
$config['upload_path'] = './upload/';
$config['allowed_types'] =
'gif|jpg|png|xls|pdf|csv|ppt|xlsx|pptx|doc|docx|rar';
$config['max_size'] = 100000;
$config['max_width'] = 1024;
$config['max_height'] = 768;

$this->load->library('upload', $config);

$data_input = [];
$data_input['id_user'] = $this->session->userdata('id');
$data_input['informasi'] = $this->input->post('informasi');
$data_input['kategori'] = $this->input->post('kategori');
$data_input['detail'] = $this->input->post('detail');
$data_input['tanggal'] = date('Y-m-d');

B-13
if ($this->upload->do_upload('gambar')) {
$upload_data = $this->upload->data();
$file_name = $upload_data['file_name'];
$data_input['gambar'] = $file_name;
}

if ($this->upload->do_upload('background')) {
$upload_data = $this->upload->data();
$file_name = $upload_data['file_name'];
$data_input['background'] = $file_name;
}

if ($this->upload->do_upload('fille')) {
$upload_data = $this->upload->data();
$file_name = $upload_data['file_name'];
$data_input['fille'] = $file_name;
}

if ($this->session->userdata("jenis_user") == 1) {
$data_input['status'] = 1;
}

B-14
$this->md_informasi->insert($data_input);

if ($this->session->userdata("jenis_user") <> 1) {
$subject = "[MADING PCR] Informasi Baru";
$message = "Ada informasi baru dari ".$this->session-
>userdata('namaa').
", klik link berikut untuk melihat
".site_url("user/dashboard");
$admin = $this->md_user->getAdmin();
foreach ($admin as $item) {
$this->send($subject, $message, $item->email,
'user/dashboard');
}
}

redirect(site_url('user/dashboard'),'location',301);
} else {
redirect(site_url());
}
}

public function update_informasi() {


if ($this->session->userdata('id') ) {
$status = $this->uri->segment(3);

B-15
$id = $this->uri->segment(4);
$this->md_informasi->update(['status' => $status], $id);
$user = $this->md_user->getUserById($this->uri->segment(5));

$stat = $status == 1 ? "DISETUJUI" : "DITOLAK";


$subject = "[MADING PCR] Status Pengajuan Informasi";
$message = "Informasi yang anda ajukan telah ".$stat." oleh
admin mading pcr";
$email = $user[0]->email;
$url = 'user/dashboard';

$this->send($subject, $message, $email, $url);

redirect(site_url('user/dashboard'));
} else {
redirect(site_url());
}
}

public function update_user() {


if ($this->session->userdata('id') ) {
$status = $this->uri->segment(3);
$id = $this->uri->segment(4);

B-16
$password = random_string('alnum',10);
$this->md_user->updateUser(['status' => $status, 'password' =>
$password], $id);
$stat = $status == 1 ? "DISETUJUI" : "DITOLAK";

$subject = "[MADING PCR] Status Pengajuan Bergabung";

if ($status == 1)
$message = "<p>Selamat akun anda telah disetujui oleh
admin mading pcr.</p>
<p>Email: ".$this->uri->segment(5)."</p>
<p>Password: ".$password."</p> demi keamanan,
mohon segera mengubah password anda, terima kasih.";
else
$message = "Maaf, akun anda ditolak oleh admin mading
pcr";
$email = $this->uri->segment(5);
$url = 'user/validasi_user';

$this->send($subject, $message, $email, $url);

redirect(site_url('user/validasi_user'));
} else {
redirect(site_url());

B-17
}
}

public function tambah_user()


{
if ($this->session->userdata('id') ) {
$config['upload_path'] = './upload/';
$config['allowed_types'] = 'jpeg|jpg|png';
$config['max_size'] = 1000;
$config['max_width'] = 1024;
$config['max_height'] = 768;

$this->load->library('upload', $config);

$data_input = [];

$data_input['email'] = $this->input->post('email');
$data_input['password'] = $this->input->post('password');
$data_input['nama'] = $this->input->post('nama');
$data_input['alamat'] = $this->input->post('alamat');
$data_input['jenis_user'] = $this->input->post('jenis_user');
//$data_input['status'] = 1;

B-18
if ($this->upload->do_upload('foto')) {
$upload_data = $this->upload->data();
$file_name = $upload_data['file_name'];
$data_input['photo'] = $file_name;
}

/*print_r($data_input);*/
$hasil = $this->md_user->insertUser($data_input);

foreach ($hasil as $sess) {


$sess_data['email'] = $sess->email;
$sess_data['jenis_user'] = $sess->jenis_user;
$sess_data['namaa'] = $sess->nama;
$sess_data['alamat'] = $sess->alamat;
$sess_data['photo'] = site_url('upload/'.$sess->photo);
// $sess_data['id'] = $sess->id_user;
$this->session->set_userdata($sess_data);
}
redirect(base_url() . 'user/dashboard','location',301);
} else {
redirect(site_url());
}
}
B-19
public function edit_user()
{
if ($this->session->userdata('id') ) {
$data_input = [];
$id = $this->session->userdata('id');
$data_input['email'] = $this->input->post('email');
$data_input['password'] = $this->input->post('password');
$data_input['nama'] = $this->input->post('nama');
$data_input['alamat'] = $this->input->post('alamat');
$data_input['jenis_user'] = $this->input->post('jenis_user');
/*print_r($data_input);*/
$this->md_user->updateUser($id, $data_input);
redirect(base_url() . 'user/halaman_user','location',301);
} else {
redirect(site_url());
}
}

public function update_profile()


{
if ($this->session->userdata('id') ) {
$data_input = [];
B-20
$id = $this->session->userdata('id');
$data_input['nama'] = $this->input->post('nama');
$data_input['password'] = $this->input->post('password');
$data_input['email'] = $this->input->post('email');
/*print_r($data_input);*/
$this->md_user->updateUser($data_input, $id);
redirect(base_url() . 'user/dashboard','location',301);
} else {
redirect(site_url());
}
}

public function hapus_user()


{
if ($this->session->userdata('id') ) {
$id = $this->uri->segment(3);
$this->md_user->deleteUser($id);
redirect(base_url() . 'user/halaman_user','location',301);
} else {
redirect(site_url());
}
}

B-21
function file_download()
{
if ($this->session->userdata('id') ) {
$data = file_get_contents('./upload/' . $this->uri->segment(3));

force_download($_GET['file_name'], $data);
} else {
redirect(site_url());
}
}

public function upload_berkas()


{
if (is_uploaded_file($_FILES['gambar']['tmp_name'])) {
$uploads_dir = './upload/';
$tmp_name = $_FILES['gambar']['tmp_name'];
$pic_name = $_FILES['gambar']['name'];
move_uploaded_file($tmp_name, $uploads_dir . $pic_name);
echo "success";
} else {
echo "fail";
}
}
B-22
function download_berkas()
{
$data = file_get_contents('./upload/' . $this->input-
>get('file_name'));
force_download($_GET['file_name'], $data);
}

public function send($subject, $message, $email, $url)


{
// redirect(site_url($url), 'refresh:3');
header('Refresh:1; url='.site_url($url));

$result = $this->email

->from('febri14si@mahasiswa.pcr.ac.id')

->to($email)

->subject($subject)

->message($message)

B-23
->send();

if ($result) {
echo "berhasil";
redirect(site_url($url), 'refresh:3');
header('Refresh:3; url=https://google.com/');
exit();
}
else show_error($this->email->print_debugger());
}
}

Source Code login.php


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Mading PCR</title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

B-24
<!-- <link href="assets/less/styles.less" rel="stylesheet/less"
media="all"> -->
<link rel="stylesheet" href="<?php echo base_url();
?>assets/css/styles.css?=140">
<link
href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,40
0,600' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="<?php echo base_url();


?>assets/css/css1/css2/ionicons.css">
<link rel="stylesheet" href="<?php echo base_url();
?>assets/css/css1/font-awesome/css/font-awesome.css?=140">

</head>
<body class="focusedform">

<div class="verticalcenter">
<a href="index.htm"><img src="<?=
site_url('assets/img/pcr.png')?>" alt="Logo" class="brand" /></a>
<div class="panel panel-primary">
<div class="panel-body">
<h4 class="text-center" style="margin-bottom:
25px;">Welcome to Mading Online</h4>
<form action="<?php echo
base_url().'user/cek_login/'.$this->uri->segment(3); ?>" method='POST'
class="form-horizontal">
B-25
<div class="form-group">
<label for="email"
class="control-label col-sm-4" style="text-align: left;"><i class="icon-
envelope"></i>&nbsp Email</label>
<div class="col-sm-8">
<input type="text"
class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="password"
class="control-label col-sm-4" style="text-align: left;"><i class="icon-
lock"></i>&nbsp&nbspPassword</label>
<div class="col-sm-8">
<input
type="password" class="form-control" id="password"
name="password" placeholder="Password">
</div>
</div>
<div class="clearfix">
<div class="pull-
right"><label><input type="checkbox" checked> Remember
Me</label></div>
</div>
<button class="btn btn-primary btn-
block" style="height: 50px; margin-bottom: 8px;" type="submit">Log
In</button>

B-26
</form>
<?php if($this->session->flashdata()){
?>
<div class="alert alert-dismissable
alert-danger">
<?php echo $this->session-
>flashdata('err_login'); ?>
<button type="button"
class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<?php
}?>

</div>
<div class="panel-footer">
<a href="extras-forgotpassword.htm"
title="Help you If you lost&#013;your password" class="pull-left btn
btn-link" style="padding-left:0">Forgot password?</a>
<a href="<?php echo base_url();
?>user/halaman_registrasi" title="Create your new account If
you&#013;haven't an account" class="pull-left btn btn-link"
style="padding-left:0">Create an Account</a>
</div>
</div>
</div>

B-27
</body>
</html>

Source Code Informasi.php

<html>

<head>

<title>Mading Online</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<meta http-equiv="content-type" content="text/html; charset=utf-


8"/>
<meta name="viewport" content="width=device-width, initial-
scale=1, maximum-scale=1"/>

<link rel="stylesheet" href="<?php echo base_url();


?>assets/css/css1/css2/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url();
?>assets/css/css1/css2/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/jquery-ui.css"/>
B-28
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/jquery.qtip.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/jquery.jScrollPane.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/jquery.nivo.slider.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/mediaelementplayer.min.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/supersized/supersized.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/fancybox/jquery.fancybox.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/fancybox/helpers/jquery.fancybox-buttons.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/widget.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();
?>assets/css/style/base.css"/>

<link rel="stylesheet" type="text/css"


href="http://fonts.googleapis.com/css?family=Inconsolata" />
<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400i
talic,600italic,700italic,400,300,600,700,800" />

<link rel="stylesheet" type="text/css" media="screen and (max-


height:500px)" href="<?php echo base_url();
?>assets/css/style/responsive/height-0000-0500.css"/>

B-29
<link rel="stylesheet" type="text/css" media="screen and (max-
width:1179px)" href="<?php echo base_url();
?>assets/css/style/responsive/width-0000-1179.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-
width:959px)" href="<?php echo base_url();
?>assets/css/style/responsive/width-0000-0959.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-
width:767px)" href="<?php echo base_url();
?>assets/css/style/responsive/width-0000-0767.css"/>

<link rel="stylesheet" type="text/css" media="screen and (min-


width:1440px) and (max-width:1679px)" href="<?php echo base_url();
?>assets/css/style/responsive/width-1440-1679.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-
width:1180px) and (max-width:1439px)" href="<?php echo base_url();
?>assets/css/style/responsive/width-1180-1439.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-
width:960px) and (max-width:1179px)" href="<?php echo base_url();
?>assets/css/style/responsive/width-0960-1179.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-
width:768px) and (max-width:959px)" href="<?php echo base_url();
?>assets/css/style/responsive/width-0768-0959.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-
width:480px) and (max-width:767px)" href="<?php echo base_url();
?>assets/css/style/responsive/width-0480-0767.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-
width:479px)" href="<?php echo base_url();
?>assets/css/style/responsive/width-0000-0479.css"/>

B-30
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery-migrate.min.js"></script>
<style>
a{
text-decoration: none !important;
color: white;
}
</style>

</head>

<body>

<!-- Main preloader -->


<div id="template-main-preloader"></div>
<!-- /Main preloader -->

<!-- Main carousel -->


<div id="template-main-carousel">

<ul class="template-main-carousel template-reset-list">

B-31
<!-- slide -->
<?php foreach ($informasi as $data) {
if ($data->background <> "")
echo "<li style=\"background-image: url($data->background)
!important\">";
else
echo "<li >";
?>
<div class="template-vertical-center-outer">

<div class="template-vertical-center-middle">

<div class="template-vertical-center-inner">

<div class="template-main-carousel-slide-top-
line"></div>
<h2><?= $data->informasi ?></h2>
<div class="template-main-carousel-slide-progress-
bar"></div>
<h4><?= $data->detail ?></h4>

<?php if($data->fille <> "")


echo "<a href=".site_url('mading/file_download/'.$data-
>fille)."><button class='btn btn-default'>Download ".$data-
>fille."</button></a>";
B-32
?>

</div>

</div>

</div>

</li>
<?php } ?>
<!-- slide -->

</ul>

</div>
<!-- /Main carousel -->

<!-- Supersized navigation buttons -->


<div>
<a href="#" id="template-main-carousel-prev-button"></a>
<a href="#" id="template-main-carousel-next-button"></a>
</div>
<!-- /Supersized navigation buttons -->
B-33
<!-- Verical bar with menu + logo -->
<div id="template-navigation-bar-vertical">

<!-- Right bar -->


<div id="template-navigation-bar-vertical-section-right">

<!-- Menu icon -->


<!-- <a href="#" id="template-navigation-bar-vertical-icon-menu"
title="Click to toggle menu"></a>-->
<!-- /Menu icon -->

<!-- Logo -->


<div class="template-vertical-center-outer">
<div class="template-vertical-center-middle">
<div class="template-vertical-center-inner">
<h2 style="writing-mode: tb-rl; color: white; padding-left:
28px; font-family: cursive; padding-top: 50px;"><?= $this->uri-
>segment(3) ?></h2>
<!-- <a href="#!/home">-->
<!-- <img src="media/image/logo.png" alt=""/>-->
<!-- </a>-->
</div>
</div>

B-34
</div>
<!-- /Logo -->

</div>
<!-- /Right bar -->

<!-- Left bar -->


<div id="template-navigation-bar-vertical-section-left">

<div class="template-vertical-center-outer">

<div class="template-vertical-center-middle">

<div class="template-vertical-center-inner">

<!-- Menu -->


<nav id="template-menu-box">

</nav>
<!-- /Menu -->

</div>
B-35
</div>

</div>

</div>
<!-- /Left bar -->

</div>
<!-- /Verical bar with menu + logo -->

<!-- Page -->


<div id="template-page-box">
<div id="template-page"></div>
<div id="template-page-preloader"></div>
</div>
<!-- /Page -->

<script type="text/javascript">
var config={"slide":[
<?php foreach ($informasi as $key => $data) {
$end = $key == count($informasi)-1 ? '' : ',';
if ($data->gambar <> "")
B-36
echo '{"image":"'.site_url("upload/".$data->gambar).'"}'.$end;
else
echo '{"image":"http://www.cmp-
cyprus.org/sites/all/modules/media_gallery/images/empty_gallery.png"}
'.$end;
} ?>

],"template":{"hashBang":"#!/","mainPreloader":1,"menuOpenStart":0,"
title":"Node - Responsive Portfolio
Template","keywords":"","description":"","requestType":1,"requestCurr
ent":""},"page":[{"hash":"about-us-1","title":"About Us | Node -
Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"about_us_1.ht
ml","fileJS":""},{"hash":"about-us-2","title":"About Us | Node -
Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"about_us_2.ht
ml","fileJS":""},{"hash":"milestones","title":"Milestones | Node -
Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"milestone.html
","fileJS":""},{"hash":"services","title":"Services | Node - Responsive
Portfolio
Template","keywords":"","description":"","fileHTML":"service.html","f
ileJS":""},{"hash":"our-process","title":"Our Process | Node -
Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"our_process.ht
ml","fileJS":""},{"hash":"blog/full-width","title":"Blog Full Width |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_full_widt
h.html","fileJS":""},{"hash":"blog/right-sidebar","title":"Blog Right
Sidebar | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_right_side
bar.html","fileJS":""},{"hash":"blog/left-sidebar","title":"Blog Left
Sidebar | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_left_sideb
ar.html","fileJS":""},{"hash":"blog/post-full-width","title":"Post Full
B-37
Width | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_post_full_
width.html","fileJS":""},{"hash":"blog/post-right-sidebar","title":"Post
Right Sidebar | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_post_right
_sidebar.html","fileJS":""},{"hash":"blog/post-left-sidebar","title":"Post
Left Sidebar | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_post_left_
sidebar.html","fileJS":""},{"hash":"blog/post-slider","title":"Post With
Slider | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_post_slide
r.html","fileJS":""},{"hash":"blog/post-multi-image","title":"Post With
Multiple Images | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_post_mult
i_image.html","fileJS":""},{"hash":"blog/post-quote","title":"Post With
Quote | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_post_quot
e.html","fileJS":""},{"hash":"blog/post-video","title":"Post With Video |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_post_vide
o.html","fileJS":""},{"hash":"blog/post-audio","title":"Post With Audio
| Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"blog_post_audi
o.html","fileJS":""},{"hash":"team/our_team","title":"Our Team | Node
- Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"team_our_team
.html","fileJS":""},{"hash":"team/member","title":"Team Member |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"team_member_
page.html","fileJS":""},{"hash":"team/layout-infobar","title":"Team
Layout Infobar | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"team_layout_in
fobar.html","fileJS":""},{"hash":"team/layout-2-columns","title":"Team
Layout 2 Columns | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"team_layout_2
_column.html","fileJS":""},{"hash":"team/layout-3-
columns","title":"Team Layout 3 Columns | Node - Responsive
B-38
Portfolio
Template","keywords":"","description":"","fileHTML":"team_layout_3
_column.html","fileJS":""},{"hash":"team/layout-4-
columns","title":"Team Layout 4 Columns | Node - Responsive
Portfolio
Template","keywords":"","description":"","fileHTML":"team_layout_4
_column.html","fileJS":""},{"hash":"portfolio/item","title":"Portfolio
Item Page | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"portfolio_item_
page.html","fileJS":""},{"hash":"portfolio/layout-1-
column","title":"Portfolio Layout 1 Column | Node - Responsive
Portfolio
Template","keywords":"","description":"","fileHTML":"portfolio_layou
t_1_column.html","fileJS":""},{"hash":"portfolio/layout-2-
columns","title":"Portfolio Layout 2 Columns | Node - Responsive
Portfolio
Template","keywords":"","description":"","fileHTML":"portfolio_layou
t_2_column.html","fileJS":""},{"hash":"portfolio/layout-3-
columns","title":"Portfolio Layout 3 Columns | Node - Responsive
Portfolio
Template","keywords":"","description":"","fileHTML":"portfolio_layou
t_3_column.html","fileJS":""},{"hash":"portfolio/layout-4-
columns","title":"Portfolio Layout 4 Columns | Node - Responsive
Portfolio
Template","keywords":"","description":"","fileHTML":"portfolio_layou
t_4_column.html","fileJS":""},{"hash":"styles/accordion","title":"Styles
: Accordion | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_accordion
.html","fileJS":""},{"hash":"styles/audio","title":"Styles: Audio | Node -
Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_audio.ht
ml","fileJS":""},{"hash":"styles/blockquote","title":"Styles: Blockquote
| Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_blockquo
te.html","fileJS":""},{"hash":"styles/button","title":"Styles: Button |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_button.ht
B-39
ml","fileJS":""},{"hash":"styles/call-to-action","title":"Styles: Call To
Action | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_call_to_a
ction.html","fileJS":""},{"hash":"styles/counter-list","title":"Styles:
Counter List | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_counter_l
ist.html","fileJS":""},{"hash":"styles/divider","title":"Styles: Divider |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_divider.ht
ml","fileJS":""},{"hash":"styles/dropcap","title":"Styles: Dropcap |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_dropcap.h
tml","fileJS":""},{"hash":"styles/features","title":"Styles: Features |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_feature.ht
ml","fileJS":""},{"hash":"styles/google-maps","title":"Styles: Google
Maps | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_google_
map.html","fileJS":""},{"hash":"styles/header","title":"Styles: Headers |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_header.ht
ml","fileJS":""},{"hash":"styles/iframe","title":"Styles: Iframe | Node -
Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_iframe.ht
ml","fileJS":""},{"hash":"styles/layouts","title":"Styles: Layouts | Node
- Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_layout.ht
ml","fileJS":""},{"hash":"styles/list","title":"Styles: List | Node -
Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_list.html",
"fileJS":""},{"hash":"styles/nivo-slider","title":"Styles: Nivo Slider |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_nivo_slid
er.html","fileJS":""},{"hash":"styles/nivo-slider-box","title":"Styles:
Nivo Slider Box | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_nivo_slid
er_box.html","fileJS":""},{"hash":"styles/notice","title":"Styles: Notice |
B-40
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_notice.ht
ml","fileJS":""},{"hash":"styles/process-list","title":"Styles: Process List
| Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_process_l
ist.html","fileJS":""},{"hash":"styles/resume-list","title":"Styles:
Resume List | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_resume_li
st.html","fileJS":""},{"hash":"styles/skills-list","title":"Styles: Skills
List | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_skill_list.
html","fileJS":""},{"hash":"styles/social-icons","title":"Styles: Social
Icons | Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_social_ic
on.html","fileJS":""},{"hash":"styles/space","title":"Styles: Space |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_space.ht
ml","fileJS":""},{"hash":"styles/tabs","title":"Styles: Tabs | Node -
Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_tab.html",
"fileJS":""},{"hash":"styles/testimonials","title":"Styles: Testimonials |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_testimoni
al.html","fileJS":""},{"hash":"styles/timeline","title":"Styles: Timeline |
Node - Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_timeline.
html","fileJS":""},{"hash":"styles/video","title":"Styles: Video | Node -
Responsive Portfolio
Template","keywords":"","description":"","fileHTML":"style_video.ht
ml","fileJS":""},{"hash":"contact","title":"Contact | Node - Responsive
Portfolio
Template","keywords":"","description":"","fileHTML":"contact.html","
fileJS":""}]};
</script>

B-41
<!-- External jQuery plugins -->
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.easing.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.timeago.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.blockUI.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.qtip.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.actual.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.ba-bqq.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.linkify.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.jScrollPane.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.isotope.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.countdown.min.js"></script>

B-42
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.supersized.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.elastic.source.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.infieldlabel.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.carouFredSel.packed.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/mediaelement-and-player.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.supersized.shutter.min.js"></script>

<script type="text/javascript" src="<?php echo base_url();


?>assets/js/script/jquery.fancybox.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.fancybox-media.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.fancybox-buttons.js"></script>
<!-- /External jQuery plugins -->

<!-- Template jQuery plugins -->


B-43
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/helper.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/template.js"></script>

<script type="text/javascript" src="<?php echo base_url();


?>assets/js/script/jquery.carousel.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.listFilter.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.preloaderImage.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.dimensionListener.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/jquery.responsiveElement.js"></script>

<script type="text/javascript" src="<?php echo base_url();


?>assets/js/script/component/jquery.template.tab.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.notice.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.accordion.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.skillList.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.nivoSlider.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.testimonial.js"></script>
B-44
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.counterList.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.callToAction.js"></script>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.nivoSliderBox.js"></script
>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.preformattedText.js"></sc
ript>
<script type="text/javascript" src="<?php echo base_url();
?>assets/js/script/component/jquery.template.twitterUserTimeline.js"><
/script>
<!-- /Template jQuery plugins -->

<script type="text/javascript">

$(document).ready(function($)
{
$().template(config);
});

</script>

</body>

B-45
</html>

Source Code Registrasi.php


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mading PCR</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

<!-- <link href="assets/less/styles.less" rel="stylesheet/less"


media="all"> -->
<link rel="stylesheet" href="<?php echo base_url();
?>assets/css/styles.css?=140">
<link
href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,40
0,600' rel='stylesheet' type='text/css'>

</head><body class="focusedform">

<div class="verticalcenter">
<a href="index.htm"><img src="<?=
site_url('assets/img/pcr.png')?>" alt="Logo" class="brand" /></a>

B-46
<div class="panel panel-primary">
<div class="panel-body">
<h4 class="text-center" style="margin-bottom:
25px;">Silahkan Registrasi</h4>
<form id="form-data" method="post"
action="<?php echo base_url().'user/registrasi'; ?>">
<div class="modal-body">

<fieldset>

<div class="form-group">
<!-- <label for="nama" class="control-label col-sm-4"
style="text-align: left;">Nama</label>-->
<div class="col-sm-12">
<input type="text" class="form-control" id="nama"
name="nama" placeholder="Nama" required>
</div>
</div>
<br>
<div class="form-group">
<!-- <label for="email" class="control-label col-sm-4"
style="text-align: left;">Email</label>-->
<div class="col-sm-12">
<input type="email" class="form-control" id="email"
name="email" placeholder="Email" required>

B-47
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<select class="form-control" name="role"
required>

<option disabled>--Jenis Akun--</option>


<option value="3">PERSONAL</option>
<option value="2">ORGANISASI</option>
</select>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button class="btn btn-info btn-submit"> Simpan</button>
<a href="<?php echo base_url(); ?>user" class="btn btn-default"
data-dismiss="modal"><i class="fa fa-close"></i>Batal</a></button>
</div>
</form>
</div>
</div>
</body>

B-48
</html>

Source Code Registrasi_admin.php


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mading PCR</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

<!-- <link href="assets/less/styles.less" rel="stylesheet/less"


media="all"> -->
<link rel="stylesheet" href="<?php echo base_url();
?>assets/css/styles.css?=140">
<link
href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,40
0,600' rel='stylesheet' type='text/css'>

</head><body class="focusedform">

<div class="verticalcenter">
<a href="index.htm"><img src="<?=
site_url('assets/img/pcr.png')?>" alt="Logo" class="brand" /></a>

B-49
<div class="panel panel-primary">
<div class="panel-body">
<h4 class="text-center" style="margin-bottom:
25px;">Silahkan Registrasi</h4>
<form id="form-data" method="post"
action="<?php echo base_url().'user/registrasi_admin'; ?>">
<div class="modal-body">

<fieldset>

<div class="form-group">
<!-- <label for="nama" class="control-label col-sm-4"
style="text-align: left;">Nama</label>-->
<div class="col-sm-12">
<input type="text" class="form-control" id="nama"
name="nama" placeholder="Nama" required>
</div>
</div>
<br>
<div class="form-group">
<!-- <label for="email" class="control-label col-sm-4"
style="text-align: left;">Email</label>-->
<div class="col-sm-12">
<input type="email" class="form-control" id="email"
name="email" placeholder="Email" required>

B-50
</div>
</div>
<div class="form-group">
<!-- <label for="email" class="control-label col-sm-4"
style="text-align: left;">Email</label>-->
<div class="col-sm-12">
<input type="password" class="form-control"
id="password" name="password" placeholder="Password" required>
</div>
</div>

</fieldset>
</div>
<div class="modal-footer">
<button class="btn btn-info btn-submit"> Simpan</button>
<a href="<?php echo base_url(); ?>user" class="btn btn-default"
data-dismiss="modal"><i class="fa fa-close"></i>Batal</a></button>
</div>
</form>
</div>
</div>
</body>
</html>

B-51
Source Code Validasi.php
<!DOCTYPE html>
<html lang="en">
<?php
$this->load->view('page/title');
?>
<head>
<meta charset="utf-8">
<?php
$this->load->view('page/style');
$this->load->view('page/js');

?>
</head>
<style>
.control-label {
width: 65px !important;
}
.form-control {
margin-left: 20px !important;
}
.form-group {
B-52
margin-bottom: 5px !important;
}
</style>

<body>
<div id="wrapper">

<?php $this->load->view('page/header'); ?>


<!-- /. NAV TOP -->
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<?php $this->load->view('page/sidebaruser'); ?>
</div>
</nav>

<div id="page-wrapper" >


<div id="page-inner">

<div class="row">
<div class="col-lg-10" style="margin-left: 50px;">
<center><h2>Data User</h2></center>
<table id="lookup" class="table table-bordered table-
hover">

B-53
<thead bgcolor="#0074e4" align="center">
<tr>

<th>Nama</th>
<th>Email</th>
<th>Status</th>
<?php if ($this->session->userdata("jenis_user") == 1)
{
echo "<th class='text-center'> Action </th>";
} ?>

</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
</div>
<hr />
</div>
</div>

B-54
</div>
<script>
$(document).ready(function() {
var dataTable = $('#lookup').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :<?= json_encode(base_url()) ?>+"user/tabel_user", // json
datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".lookup-error").html("");
$("#lookup").append('<tbody class="employee-grid-
error"><tr><th colspan="3">Tidak ada data</th></tr></tbody>');
$("#lookup_processing").css("display","none");

}
}
} );
} );
</script>
</body>
</html>

B-55

Anda mungkin juga menyukai