SISTEM LAYANAN MANDIRI PROGRAM KREATIVITAS MAHASISWA BERBASIS WEB RESPONSIVE (Studi Kasus CIC Student Center Universitas Muhammadiyah Malang) TUGAS AKHIR Diajukan Untuk Memenuhi Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang Disusun Oleh : ANDRI GUNANDAR NIM : 201210370311137 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2016 ii
iii
iv
KATA PENGANTAR Alhamdulillah, Segala puji bagi Allah SWT yang telah memberikan petunjuk dan serta melancarkan sehingga penulis dapat menyelesaikan tugas akhir yang berjudul : SISTEM LAYANAN MANDIRI PROGRAM KRETIFITAS MAHASISWA BERBASIS WEB RESPONSIVE (Studi Kasus : CIC Student Center UMM) Di dalam tulisan ini disajikan pokok-pokok bahasan yang meliputi perancangan sistem, penanganan web pada sistem, pendaftaran PKM secara online, verifikasi berkas PKM online, proses bimbingan secara online, pengelolaan data dan pengarsipan berkas PKM serta pengujian yang telah dibuat. Penulis menyadari bahwa penelitian ini masih jauh dari kesempurnaan, oleh karena itu penulis mengharapkan saran dan kritik yang membangun agar tugas akhir ini dapat bermanfaat bagi pengembangan ilmu pengetahuan kedepannya, sistem ini juga masih membutuhkan pengembangan lebih lanjut sehingga dapat bermanfaat. Akhir kata penulis mengucapkan terima kasih kepada semua pihak yang telah membantu hingga tugas akhir ini terselesaikan. Malang, 18 November 2016 Penulis v
DAFTAR ISI HALAMAN JUDUL... i LEMBAR PERSETUJUAN... ii LEMBAR PENGESAHAN... iii KATA PENGANTAR... v DAFTAR GAMBAR... xi DAFTAR TABEL... xv BAB I PENDAHULUAN 1.1 Latar Belakang... 1 1.2 Rumusan Masalah... 2 1.3 Tujuan... 2 1.4 Batasan Masalah... 2 1.5 Metodologi Penelitian... 3 1.6 Sistematika Penulisan... 4 BAB II LANDASAN TEORI 2.1 Sistem Layanan Mandiri... 6 2.2 Program Kreativitas Mahasiswa (PKM)... 6 2.3 Website... 9 2.4 Responsive Web Design... 9 2.5 Aplikasi Pendukung... 10 2.5.1 Framework Codeigniter... 10 2.5.2 Metode Hirarchial Model View Controller (HMVC)... 12 2.5.3 Active Record... 13 2.5.4 Bahasa Pemograman PHP... 14 2.5.5 CSS... 14 2.5.6 Basis Data... 15 2.5.7 My SQL... 15 BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Tinjauan Umum Analisa... 17 3.2 Analisa Sistem... 18 3.2.1 Arsitektur Sistem... 18 3.2.2 Use Case Diagram... 19 vi
3.2.3 Activity Diagram... 20 3.2.3.1 Activity Diagram Login Admin... 20 3.2.3.2 Activity Diagram Read Data Admin... 21 3.2.3.3 Activity Diagram Create Data Admin... 22 3.2.3.4 Activity Diagram Update Data Admin... 22 3.2.3.5 Activity Diagram Delete Data Admin... 23 3.2.3.6 Activity Diagram Read Data Dosen... 23 3.2.3.7 Activity Diagram Create Data Dosen... 24 3.2.3.8 Activity Diagram Update Data Dosen... 24 3.2.3.9 Activity Diagram Delete Data Dosen... 25 3.2.3.10 Activity Diagram Read Data Mahasiswa... 25 3.2.3.11 Activity Diagram Create Data Mahasiswa... 26 3.2.3.12 Activity Diagram Update Data Mahasiswa... 26 3.2.3.13 Activity Diagram Delete Data Mahasiswa... 27 3.2.3.14 Activity Diagram Read Berkas PKM... 27 3.2.3.15 Activity Diagram Create Berkas PKM... 28 3.2.3.16 Activity Diagram Update Berkas PKM... 28 3.2.3.17 Activity Diagram Delete Berkas PKM... 29 3.2.3.18 Activity Diagram Read Data Informasi... 29 3.2.3.19 Activity Diagram Create Data Informasi... 30 3.2.3.20 Activity Diagram Update Data Informasi... 30 3.2.3.21 Activity Diagram Delete Data Informasi... 31 3.2.3.22 Activity Diagram Admin Validasi Berkas PKM... 31 3.2.3.23 Activity Diagam Login Dosen... 32 3.2.3.24 Activity Diagram Edit Akun Dosen... 32 3.2.3.25 Activity Diagram Dosen Validasi Berkas PKM... 33 3.2.3.26 Activity Diagram Daftar Akun Mahasiswa... 33 3.2.3.27 Activity Diagram Login Mahasiswa... 34 3.2.3.28 Activity Diagram Edit Akun Mahasiswa... 34 3.2.3.29 Activity Diagram Pendaftaran PKM... 35 3.2.3.30 Activity Diagram Notifikasi Berkas PKM... 35 3.2.3.31 Activity Diagram List Berkas PKM... 36 vii
3.2.4 Sequence Diagram... 36 3.2.4.1 Sequence Diagram Login Admin... 37 3.2.4.2 Sequence Diagram Read Data Admin... 37 3.2.4.3 Sequence Diagram Create Data Admin... 38 3.2.4.4 Sequence Diagram Update Data Admin... 39 3.2.4.5 Sequence Diagram Delete Data Admin... 39 3.2.4.6 Sequence Diagram Read Data Dosen... 40 3.2.4.7 Sequence Diagram Create Data Dosen... 41 3.2.4.8 Sequence Diagram Update Data Dosen... 41 3.2.4.9 Sequence Diagram Delete Data Dosen... 42 3.2.4.10 Sequence Diagram Read Data Mahasiswa... 43 3.2.4.11 Sequence Diagram Create Data Mahasiswa... 43 3.2.4.12 Sequence Diagram Update Data Mahasiswa... 44 3.2.4.13 Sequence Diagram Delete Data Mahasiswa... 45 3.2.4.14 Sequence Diagram Read Berkas PKM... 45 3.2.4.15 Sequence Diagram Create Berkas PKM... 46 3.2.4.16 Sequence Diagram Update Berkas PKM... 47 3.2.4.17 Sequence Diagram Delete Berkas PKM... 47 3.2.4.18 Sequence Diagram Read Data Informasi... 48 3.2.4.19 Sequence Diagram Create Data Informasi... 49 3.2.4.20 Sequence Diagram Update Data Informasi... 49 3.2.4.21 Sequence Diagram Delete Data Informasi... 50 3.2.4.22 Sequence Diagram Admin Validasi Berkas PKM 51 3.2.4.23 Sequence Diagram Login Dosen... 51 3.2.4.24 Sequence Diagram Edit Akun Dosen... 52 3.2.4.25 Sequence Diagram Dosen Validasi Berkas PKM. 53 3.2.4.26 Sequence Diagram Daftar Akun Mahasiswa... 53 3.2.4.27 Sequence Diagram Login Mahasiswa... 54 3.2.4.28 Sequence Diagram Edit Akun Mahasiswa... 55 3.2.4.29 Sequence Diagam Pendaftaran PKM... 55 viii
3.2.4.30 Sequence Diagram Notifikasi Berkas PKM... 56 3.2.4.31 Sequence Diagram List Berkas PKM... 57 3.2.5 Class Diagram... 57 3.3 Perancangan Basis Data... 58 3.3.1 Tabel Admin... 59 3.3.2 Tabel Mahasiswa... 60 3.3.3 Tabel Dosen... 61 3.3.4 Tabel Informasi... 61 3.3.5 Tabel Pendaftaran PKM... 62 3.3.6 Tabel Map Anggota... 63 3.4 User Interface / Antarmuka Sistem... 63 3.4.1 Rancangan Halaman Home... 63 3.4.2 Rancangan Halaman Form Login... 64 3.4.3 Rancangan Halaman Admin... 64 3.4.3.1 Ramcangan Halaman Master Admin... 64 3.4.3.2 Rancangan Halaman Admin Validasi Berkas PKM 66 3.4.4 Rancangan Halaman Dosen... 66 3.4.4.1 Rancangan Halaman Dashboard Dosen... 66 3.4.4.2 Rancangan Halaman Dosen Validasi Berkas PKM 66 3.4.5 Rancangan Halaman Mahasiswa... 67 3.4.5.1 Rancangan Halaman Daftar Akun... 67 3.4.5.2 Rancangan Halaman Dashboard Mahasiswa... 67 3.4.5.3 Rancangan Halaman Pendaftaran PKM... 68 3.4.5.4 Rancangan Halaman List Berkas PKM... 69 BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Sistem... 71 4.1.1 Lingkungan Pengembangan Sistem... 71 4.1.1.1 Perangkat Keras... 71 4.1.1.2 Perangkat Lunak... 71 4.1.2 Implemenntasi Sistem Layanan Mandiri... 71 4.1.2.1 Halaman Home... 72 4.1.2.2 Halaman Daftar Akun... 74 ix
4.1.2.3 Halaman Tentang Kami... 75 4.1.2.4 Halaman Bantuan... 77 4.1.2.5 Halaman Login... 78 4.1.2.6 Menu Admin... 79 4.1.2.6.1 Halaman Kelola Data Admin... 79 4.1.2.6.2 Halaman Kelola Data Dosen... 80 4.1.2.6.3 Halaman Kelola Data Mahasiswa... 81 4.1.2.6.4 Halaman Kelola Data Informasi... 82 4.1.2.6.5 Halaman Kelola Data Berkas PKM... 83 4.1.2.6.6 Halaman Admin Validasi Berkas PKM.. 84 4.1.2.7 Menu Dosen... 85 4.1.2.7.1 Halaman Dashboard Dosen... 85 4.1.2.7.2 Halaman Dosen Validasi Berkas PKM.. 87 4.1.2.8 Menu Mahasiswa... 88 4.1.2.8.1 Halaman Dashboard Mahasiswa... 88 4.1.2.8.2 Halaman Pendaftaran PKM... 89 4.1.2.8.3 Halaman List Pendaftaran PKM... 90 4.2 Pengujian Sistem Sistem... 91 4.2.1 Blackbox Testing... 91 BAB V KESIMPULAN DAN SARAN 5.1 Kesimpulan... 94 5.2 Saran... 94 Daftar Pustaka... xvi x
DAFTAR GAMBAR Gambar 2.1 Flowchart Framework CodeIgniter... 11 Gambar 2.2 Flowchart Hierarchical Model View Controller (HMVC)... 12 Gambar 2.3 Contoh Source Code Active Record... 13 Gambar 2.4 Pengaksesan Database Melalui Web dengan PHP... 14 Gambar 3.1 Alur Arsitektur Sistem... 18 Gambar 3.2 Use Case Diagram Sistem... 19 Gambar 3.3 Activity Diagram Login Admin... 21 Gambar 3.4 Activity Diagram Read Data Admin... 21 Gambar 3.5 Activity Diagram Create Data Admin... 22 Gambar 3.6 Activity Diagram Update Data Admin... 22 Gambar 3.7 Activity Diagram Delete Data Admin... 23 Gambar 3.8 Activity Diagram Read Data Dosen... 23 Gambar 3.9 Activity Diagram Create Data Dosen... 24 Gambar 3.10 Activity Diagram Update Data Dosen... 24 Gambar 3.11 Activity Diagram Delete Data Dosen... 25 Gambar 3.12 Activity Diagram Read Data Mahasiswa... 25 Gambar 3.13 Activity Diagram Create Data Mahasiswa... 26 Gambar 3.14 Activity Diagram Update Data Mahasiswa... 26 Gambar 3.15 Activity Diagram Delete Data Mahasiswa... 27 Gambar 3.16 Activity Diagram Read Berkas PKM... 27 Gambar 3.17 Activity Diagram Create Berkas PKM... 28 Gambar 3.18 Activity Diagram Update Berkas PKM... 28 Gambar 3.19 Activity Diagram Delete Berkas PKM... 29 Gambar 3.20 Activity Diagram Read Data Informasi... 29 Gambar 3.21 Activity Diagram Create Data Informasi... 30 Gambar 3.22 Activity Diagram Update Data Informasi... 30 Gambar 3.23 Activity Diagram Delete Data Informasi... 31 Gmabar 3.24 Activity Diagram Admin Validasi Berkas PKM... 31 Gambar 3.25 Activity Diagram Login Dosen... 32 Gambar 3.26 Activity Diagram Edit Akun Dosen... 32 Gambar 3.27 Activity Diagram Dosen Validasi Berkas PKM... 33 xi
Gambar 3.28 Activity Diagram Daftar Akun Mahasiswa... 33 Gambar 3.29 Activity Diagram Login Mahasiswa... 34 Gambar 3.30 Activity Diagram Edit Akun Mahasiswa... 34 Gambar 3.31 Activity Diagram Pendaftaran PKM... 35 Gambar 3.32 Activity Diagram Notifikasi Berkas PKM... 35 Gambar 3.33 Activity Diagram List Berkas PKM... 36 Gambar 3.34 Sequence Diagram Login Admin... 37 Gambar 3.35 Sequence Diagram Read Data Admin... 37 Gambar 3.36 Sequence Diagram Create Data Admin... 38 Gambar 3.37 Sequence Diagram Update Data Admin... 39 Gambar 3.38 Sequence Diagram Delete Data Admin... 39 Gambar 3.39 Sequence Diagram Read Data Dosen... 40 Gambar 3.40 Sequence Diagram Create Data Dosen... 41 Gambar 3.41 Sequence Diagram Update Data Dosen... 41 Gambar 3.42 Sequence Diagram Delete Data Dosen... 41 Gambar 3.43 Sequence Diagram Read Data Mahasiswa... 43 Gambar 3.44 Sequence Diagram Create Data Mahasiswa... 43 Gambar 3.45 Sequence Diagram Update Data Mahasiswa... 44 Gambar 3.46 Sequence Diagram Delete Data Mahasiswa... 45 Gambar 3.47 Sequence Diagram Read Berkas PKM... 45 Gambar 3.48 Sequence Diagram Create Berkas PKM... 48 Gambar 3.49 Sequence Diagram Update Berkas PKM... 47 Gambar 3.50 Sequence Diagram Delete Berkas PKM... 47 Gambar 3.51 Sequence Diagram Read Data Informasi... 48 Gambar 3.52 Sequence Diagram Create Data Informasi... 49 Gambar 3.53 Sequence Diagram Update Data Informasi... 49 Gambar 3.54 Sequence Diagram Delete Data Informasi... 50 Gambar 3.55 Sequence Diagram Admin Validasi Berkas PKM... 51 Gambar 3.56 Sequence Diagram Login Dosen... 51 Gambar 3.57 Sequence Diagram Edit Akun Dosen... 52 Gambar 3.58 Sequence Diagram Dosen Validasi Berkas PKM... 53 Gambar 3.59 Sequence Diagram Daftar Akun Mahasiswa... 53 xii
Gambar 3.60 Sequence Diagram Login Mahasiswa... 54 Gambar 3.61 Sequence Diagram Edit Akun Mahasiswa... 55 Gambar 3.62 Sequence Diagram Pendaftaran PKM... 55 Gambar 3.63 Sequence Diagram Notifikasi Berkas PKM... 56 Gambar 3.64 Sequence Diagram List Berkas PKM... 57 Gambar 3.65 Class Diagram... 58 Gambar 3.66 Entity Relationship Diagram... 59 Gambar 3.67 Rancangan Halaman Home... 64 Gambar 3.68 Rancangan Halaman Form Login... 64 Gambar 3.69 Rancangan Halaman Master Admin... 65 Gambar 3.70 Rancangan Halaman Admin Validasi Berkas PKM... 65 Gambar 3.71 Rancangan Halaman Dashboard Dosen... 66 Gambar 3.72 Rancangan Halaman Dosen Validasi Berkas PKM... 66 Gambar 3.73 Rancangan Halaman Daftar Akun... 67 Gambar 3.74 Rancangan Halaman Dashboard Mahasiswa... 68 Gambar 3.75 Rancangan Halaman Pendaftaran PKM... 69 Gambar 3.76 Rancangan Halaman List Berkas PKM... 770 Gambar 4.1 Tampilan Halaman Home... 72 Gambar 4.2 Susunan HMVC Tampilan Home... 73 Gambar 4.3 Potongan Source Code Dashboard.php... 73 Gambar 4.4 Potongan Source Code M_dashboard.php... 74 Gambar 4.5 Potongan Source Code Index.php... 74 Gambar 4.6 Tampilan Halaman Daftar Akun... 75 Gambar 4.7 Potongan Source Code index.php... 75 Gambar 4.8 Tampilan Halaman Tentang Kami... 76 Gambar 4.9 Potongan Source Code Tentang_kami.php... 76 Gambar 4.10 Tampilan Halaman Bantuan... 77 Gambar 4.11 Potongan Source Code Bantuan.php... 77 Gambar 4.12 Tampilan Halaman Login... 78 Gambar 4.13 Potongan Source Code Menu.php... 78 Gambar 4.14 Tampilan Halaman Kelola Data Admin... 79 Gambar 4.15 Potongan Souce Code v_user.php... 80 xiii
Gambar 4.16 Tampilan Halaman Kelola Data Dosen... 80 Gambar 4.17 Potongan Source Code v_dosen.php... 81 Gambar 4.18 Tampilan Halaman Kelola Data Mahasiswa... 81 Gambar 4.19 Potongan Source Code v_mahasiswa.php... 82 Gambar 4.20 Tampilan Halaman Kelola Data Informasi... 82 Gambar 4.21 Potongan Source Code v_informasi.php... 83 Gambar 4.22 Tampilan Halaman Kelola Data Berkas PKM... 83 Gambar 4.23 Potongan Source Code v_berkas.php... 84 Gambar 4.24 Tampilan Halaman Admin Validasi Berkas PKM... 84 Gambar 4.25 Potongan Source Code Validasi_pkm.php... 85 Gambar 4.26 Tampilan Halamana Dashboard Dosen... 86 Gambar 4.27 Potongan Source Code index.php... 86 Gambar 4.28 Tampilan Halaman Dosen Validasi Berkas PKM... 87 Gambar 4.29 Potongan Source Code Validasi_pkm.php... 87 Gambar 4.30 Tampilan Halaman Dashboard Mahasiswa... 88 Gambar 4.31 Potongan Source Code index.php... 89 Gambar 4.32 Tampilan Halaman Pendaftaran PKM... 89 Gambar 4.33 Potongan Source Code index.php... 90 Gambar 4.34 Tampilan Halaman List Berkas PKM... 90 Gambar 4.35 Potongan Source Code index.php... 91 xiv
DAFTAR TABEL Tabel 2.1 Kriteria Program Kreatifitas Mahasiswa (PKM)... 8 Tabel 3.1 Tabel Admin... 59 Tabel 3.2 Tabel Mahasiswa... 60 Tabel 3.3 Tabel Dosen... 61 Tabel 3.4 Tabel Informasi... 62 Tabel 3.5 Tabel Pendaftaran PKM... 62 Tabel 3.6 Tabel Map Anggota... 63 Tabel 4.1 Pengujian Blackbox Testing... 91 xv
DAFTAR PUSTAKA [1] Sholikin, Akhmad., & Riasti, Berliana K."Pembangunan Sistem Informasi Inventaris Sekolah Pada Dinas Pendidikan Kabupaten Rembang Berbasis Web."IJNS(Indonesian Jurnal on Networking and Security) Volume 2 No 2 April 2013 - ISSN: 2302-5700. [2] Firdausy, Kartika. (2015)."Pedoman Program Kreativitas Mahasiswa.".[online](http://simlitabmas.dikti.go.id/fileUpload/pengumuma n/sistematika_penulisan_artikel_pkm.pdf, diakses pada tanggal 20 mei 2016. [3] Meimaharani, Rizkysari, and Diana Laily Fithri. "E-Commerce Goody Bag Spunbond Menggunakan QR Code Berbasis WEB Responsif." Jurnal Simetris 5.2 (2014): 127-135. [4] Murdick, Ross. "Perancangan dan Pembangunan Sistem Informasi." Penerbit Andi, Yogyakarta (1993). [5] Prasetio, Ari. "Pengaruh Kualitas Pelayanan dan Harga Terhadap Kepuasan Pelanggan." Management Analysis Journal 1.2 (2012). [6] Kamus Besar Bahasa Indonesia. Mandiri [online]( http://kbbi.web.id/mandiri, diakses pada tanggal 20 mei 2016,) [7] Rivai, Dani Ainur. "Pembuatan Website Profil Sekolah Menengah Kejuruan (SMK) Miftahul Huda Ngadirojo." IJNS-Indonesian Journal on Networking and Security 2.3 (2012). [8] Knight, K. (2011). Responsive Web Design: What It Is and How To Use It. [online], (http://www.smashingmagazine.com/2011/01/12/guidelinesfor-responsive-web-design/, diakses pada tanggal 12 Agustus 2016). [9] Reza, Fadlan. "Prototype Web Responsive Design Pada Uin Syarif Hidayatullah Jakarta Menggunakan Framework Bootstrap." (2015). [10] Prabowo, Donni. "Website E-Commerce Menggunakan Model View Controller (MVC) Dengan Framework Codeigniter Studi Kasus: Toko Miniatur." DASI 16.1 (2015): 23. [11] Sidik, Betha(2012), Framework Codeigniter. Informatika:Bandung. [12] Warsito, Ary Budi, and Muhamad Yusup. "Kajian Yii Framework dalam Pengembangan Website Perguruan Tinggi." CCIT Journal 3 (STMIK RAHARJA) 7.3 (2014): 437-451. xvi
[13] Syafii, Muhammad. "Membangun Aplikasi Berbasis PHP dan MySQL."Yogyakarta: CV. Andi (2004). [14] Arief, M. Rudyanto. "Pemrograman Web Dinamis Menggunakan PHP dan MySQL." Yogyakarta: Andi (2011). [15] Fathansyah (2007), Basis Data, Informatika, Bandung Sukarno, Muhammad 2006, Sistem Cepat dan Mudah Menguasai Visual Basic.NET, Eska Media, Jakarta [16] Geni, Lenggo. "Perancangan Website Untuk Pengambilan Keputusan Pelanggan Pada Pt. Bestindo Aquatek Sejahtera Dengan Menggunakan Php, Mysql, Dan Ajax." (2012). xvii