SISTEM LAYANAN MANDIRI PROGRAM KREATIVITAS MAHASISWA BERBASIS WEB RESPONSIVE (Studi Kasus CIC Student Center Universitas Muhammadiyah Malang)

Transkripsi

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

2 iii

3 iv

4 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

5 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 Rumusan Masalah Tujuan Batasan Masalah Metodologi Penelitian Sistematika Penulisan... 4 BAB II LANDASAN TEORI 2.1 Sistem Layanan Mandiri Program Kreativitas Mahasiswa (PKM) Website Responsive Web Design Aplikasi Pendukung Framework Codeigniter Metode Hirarchial Model View Controller (HMVC) Active Record Bahasa Pemograman PHP CSS Basis Data My SQL BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Tinjauan Umum Analisa Analisa Sistem Arsitektur Sistem Use Case Diagram vi

6 3.2.3 Activity Diagram Activity Diagram Login Admin Activity Diagram Read Data Admin Activity Diagram Create Data Admin Activity Diagram Update Data Admin Activity Diagram Delete Data Admin Activity Diagram Read Data Dosen Activity Diagram Create Data Dosen Activity Diagram Update Data Dosen Activity Diagram Delete Data Dosen Activity Diagram Read Data Mahasiswa Activity Diagram Create Data Mahasiswa Activity Diagram Update Data Mahasiswa Activity Diagram Delete Data Mahasiswa Activity Diagram Read Berkas PKM Activity Diagram Create Berkas PKM Activity Diagram Update Berkas PKM Activity Diagram Delete Berkas PKM Activity Diagram Read Data Informasi Activity Diagram Create Data Informasi Activity Diagram Update Data Informasi Activity Diagram Delete Data Informasi Activity Diagram Admin Validasi Berkas PKM Activity Diagam Login Dosen Activity Diagram Edit Akun Dosen Activity Diagram Dosen Validasi Berkas PKM Activity Diagram Daftar Akun Mahasiswa Activity Diagram Login Mahasiswa Activity Diagram Edit Akun Mahasiswa Activity Diagram Pendaftaran PKM Activity Diagram Notifikasi Berkas PKM Activity Diagram List Berkas PKM vii

7 3.2.4 Sequence Diagram Sequence Diagram Login Admin Sequence Diagram Read Data Admin Sequence Diagram Create Data Admin Sequence Diagram Update Data Admin Sequence Diagram Delete Data Admin Sequence Diagram Read Data Dosen Sequence Diagram Create Data Dosen Sequence Diagram Update Data Dosen Sequence Diagram Delete Data Dosen Sequence Diagram Read Data Mahasiswa Sequence Diagram Create Data Mahasiswa Sequence Diagram Update Data Mahasiswa Sequence Diagram Delete Data Mahasiswa Sequence Diagram Read Berkas PKM Sequence Diagram Create Berkas PKM Sequence Diagram Update Berkas PKM Sequence Diagram Delete Berkas PKM Sequence Diagram Read Data Informasi Sequence Diagram Create Data Informasi Sequence Diagram Update Data Informasi Sequence Diagram Delete Data Informasi Sequence Diagram Admin Validasi Berkas PKM Sequence Diagram Login Dosen Sequence Diagram Edit Akun Dosen Sequence Diagram Dosen Validasi Berkas PKM Sequence Diagram Daftar Akun Mahasiswa Sequence Diagram Login Mahasiswa Sequence Diagram Edit Akun Mahasiswa Sequence Diagam Pendaftaran PKM viii

8 Sequence Diagram Notifikasi Berkas PKM Sequence Diagram List Berkas PKM Class Diagram Perancangan Basis Data Tabel Admin Tabel Mahasiswa Tabel Dosen Tabel Informasi Tabel Pendaftaran PKM Tabel Map Anggota User Interface / Antarmuka Sistem Rancangan Halaman Home Rancangan Halaman Form Login Rancangan Halaman Admin Ramcangan Halaman Master Admin Rancangan Halaman Admin Validasi Berkas PKM Rancangan Halaman Dosen Rancangan Halaman Dashboard Dosen Rancangan Halaman Dosen Validasi Berkas PKM Rancangan Halaman Mahasiswa Rancangan Halaman Daftar Akun Rancangan Halaman Dashboard Mahasiswa Rancangan Halaman Pendaftaran PKM Rancangan Halaman List Berkas PKM BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Sistem Lingkungan Pengembangan Sistem Perangkat Keras Perangkat Lunak Implemenntasi Sistem Layanan Mandiri Halaman Home Halaman Daftar Akun ix

9 Halaman Tentang Kami Halaman Bantuan Halaman Login Menu Admin Halaman Kelola Data Admin Halaman Kelola Data Dosen Halaman Kelola Data Mahasiswa Halaman Kelola Data Informasi Halaman Kelola Data Berkas PKM Halaman Admin Validasi Berkas PKM Menu Dosen Halaman Dashboard Dosen Halaman Dosen Validasi Berkas PKM Menu Mahasiswa Halaman Dashboard Mahasiswa Halaman Pendaftaran PKM Halaman List Pendaftaran PKM Pengujian Sistem Sistem Blackbox Testing BAB V KESIMPULAN DAN SARAN 5.1 Kesimpulan Saran Daftar Pustaka... xvi x

10 DAFTAR GAMBAR Gambar 2.1 Flowchart Framework CodeIgniter Gambar 2.2 Flowchart Hierarchical Model View Controller (HMVC) Gambar 2.3 Contoh Source Code Active Record Gambar 2.4 Pengaksesan Database Melalui Web dengan PHP Gambar 3.1 Alur Arsitektur Sistem Gambar 3.2 Use Case Diagram Sistem Gambar 3.3 Activity Diagram Login Admin Gambar 3.4 Activity Diagram Read Data Admin Gambar 3.5 Activity Diagram Create Data Admin Gambar 3.6 Activity Diagram Update Data Admin Gambar 3.7 Activity Diagram Delete Data Admin Gambar 3.8 Activity Diagram Read Data Dosen Gambar 3.9 Activity Diagram Create Data Dosen Gambar 3.10 Activity Diagram Update Data Dosen Gambar 3.11 Activity Diagram Delete Data Dosen Gambar 3.12 Activity Diagram Read Data Mahasiswa Gambar 3.13 Activity Diagram Create Data Mahasiswa Gambar 3.14 Activity Diagram Update Data Mahasiswa Gambar 3.15 Activity Diagram Delete Data Mahasiswa Gambar 3.16 Activity Diagram Read Berkas PKM Gambar 3.17 Activity Diagram Create Berkas PKM Gambar 3.18 Activity Diagram Update Berkas PKM Gambar 3.19 Activity Diagram Delete Berkas PKM Gambar 3.20 Activity Diagram Read Data Informasi Gambar 3.21 Activity Diagram Create Data Informasi Gambar 3.22 Activity Diagram Update Data Informasi Gambar 3.23 Activity Diagram Delete Data Informasi Gmabar 3.24 Activity Diagram Admin Validasi Berkas PKM Gambar 3.25 Activity Diagram Login Dosen Gambar 3.26 Activity Diagram Edit Akun Dosen Gambar 3.27 Activity Diagram Dosen Validasi Berkas PKM xi

11 Gambar 3.28 Activity Diagram Daftar Akun Mahasiswa Gambar 3.29 Activity Diagram Login Mahasiswa Gambar 3.30 Activity Diagram Edit Akun Mahasiswa Gambar 3.31 Activity Diagram Pendaftaran PKM Gambar 3.32 Activity Diagram Notifikasi Berkas PKM Gambar 3.33 Activity Diagram List Berkas PKM Gambar 3.34 Sequence Diagram Login Admin Gambar 3.35 Sequence Diagram Read Data Admin Gambar 3.36 Sequence Diagram Create Data Admin Gambar 3.37 Sequence Diagram Update Data Admin Gambar 3.38 Sequence Diagram Delete Data Admin Gambar 3.39 Sequence Diagram Read Data Dosen Gambar 3.40 Sequence Diagram Create Data Dosen Gambar 3.41 Sequence Diagram Update Data Dosen Gambar 3.42 Sequence Diagram Delete Data Dosen Gambar 3.43 Sequence Diagram Read Data Mahasiswa Gambar 3.44 Sequence Diagram Create Data Mahasiswa Gambar 3.45 Sequence Diagram Update Data Mahasiswa Gambar 3.46 Sequence Diagram Delete Data Mahasiswa Gambar 3.47 Sequence Diagram Read Berkas PKM Gambar 3.48 Sequence Diagram Create Berkas PKM Gambar 3.49 Sequence Diagram Update Berkas PKM Gambar 3.50 Sequence Diagram Delete Berkas PKM Gambar 3.51 Sequence Diagram Read Data Informasi Gambar 3.52 Sequence Diagram Create Data Informasi Gambar 3.53 Sequence Diagram Update Data Informasi Gambar 3.54 Sequence Diagram Delete Data Informasi Gambar 3.55 Sequence Diagram Admin Validasi Berkas PKM Gambar 3.56 Sequence Diagram Login Dosen Gambar 3.57 Sequence Diagram Edit Akun Dosen Gambar 3.58 Sequence Diagram Dosen Validasi Berkas PKM Gambar 3.59 Sequence Diagram Daftar Akun Mahasiswa xii

12 Gambar 3.60 Sequence Diagram Login Mahasiswa Gambar 3.61 Sequence Diagram Edit Akun Mahasiswa Gambar 3.62 Sequence Diagram Pendaftaran PKM Gambar 3.63 Sequence Diagram Notifikasi Berkas PKM Gambar 3.64 Sequence Diagram List Berkas PKM Gambar 3.65 Class Diagram Gambar 3.66 Entity Relationship Diagram Gambar 3.67 Rancangan Halaman Home Gambar 3.68 Rancangan Halaman Form Login Gambar 3.69 Rancangan Halaman Master Admin Gambar 3.70 Rancangan Halaman Admin Validasi Berkas PKM Gambar 3.71 Rancangan Halaman Dashboard Dosen Gambar 3.72 Rancangan Halaman Dosen Validasi Berkas PKM Gambar 3.73 Rancangan Halaman Daftar Akun Gambar 3.74 Rancangan Halaman Dashboard Mahasiswa Gambar 3.75 Rancangan Halaman Pendaftaran PKM Gambar 3.76 Rancangan Halaman List Berkas PKM Gambar 4.1 Tampilan Halaman Home Gambar 4.2 Susunan HMVC Tampilan Home Gambar 4.3 Potongan Source Code Dashboard.php Gambar 4.4 Potongan Source Code M_dashboard.php Gambar 4.5 Potongan Source Code Index.php Gambar 4.6 Tampilan Halaman Daftar Akun Gambar 4.7 Potongan Source Code index.php Gambar 4.8 Tampilan Halaman Tentang Kami Gambar 4.9 Potongan Source Code Tentang_kami.php Gambar 4.10 Tampilan Halaman Bantuan Gambar 4.11 Potongan Source Code Bantuan.php Gambar 4.12 Tampilan Halaman Login Gambar 4.13 Potongan Source Code Menu.php Gambar 4.14 Tampilan Halaman Kelola Data Admin Gambar 4.15 Potongan Souce Code v_user.php xiii

13 Gambar 4.16 Tampilan Halaman Kelola Data Dosen Gambar 4.17 Potongan Source Code v_dosen.php Gambar 4.18 Tampilan Halaman Kelola Data Mahasiswa Gambar 4.19 Potongan Source Code v_mahasiswa.php Gambar 4.20 Tampilan Halaman Kelola Data Informasi Gambar 4.21 Potongan Source Code v_informasi.php Gambar 4.22 Tampilan Halaman Kelola Data Berkas PKM Gambar 4.23 Potongan Source Code v_berkas.php Gambar 4.24 Tampilan Halaman Admin Validasi Berkas PKM Gambar 4.25 Potongan Source Code Validasi_pkm.php Gambar 4.26 Tampilan Halamana Dashboard Dosen Gambar 4.27 Potongan Source Code index.php Gambar 4.28 Tampilan Halaman Dosen Validasi Berkas PKM Gambar 4.29 Potongan Source Code Validasi_pkm.php Gambar 4.30 Tampilan Halaman Dashboard Mahasiswa Gambar 4.31 Potongan Source Code index.php Gambar 4.32 Tampilan Halaman Pendaftaran PKM Gambar 4.33 Potongan Source Code index.php Gambar 4.34 Tampilan Halaman List Berkas PKM Gambar 4.35 Potongan Source Code index.php xiv

14 DAFTAR TABEL Tabel 2.1 Kriteria Program Kreatifitas Mahasiswa (PKM)... 8 Tabel 3.1 Tabel Admin Tabel 3.2 Tabel Mahasiswa Tabel 3.3 Tabel Dosen Tabel 3.4 Tabel Informasi Tabel 3.5 Tabel Pendaftaran PKM Tabel 3.6 Tabel Map Anggota Tabel 4.1 Pengujian Blackbox Testing xv

15 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 ISSN: [2] Firdausy, Kartika. (2015)."Pedoman Program Kreativitas Mahasiswa.".[online]( n/sistematika_penulisan_artikel_pkm.pdf, diakses pada tanggal 20 mei [3] Meimaharani, Rizkysari, and Diana Laily Fithri. "E-Commerce Goody Bag Spunbond Menggunakan QR Code Berbasis WEB Responsif." Jurnal Simetris 5.2 (2014): [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]( 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], ( 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): xvi

16 [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