BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Aplikasi Pengelolaan Pengabdian Masyarakat Sistem Pengelolaan Pengabdian Masyarakat di LP2M Mercu Buana Berbasis Web ini dirancang untuk memudahkan proses pengelolaan melalui media intranet atau lokal, yang meliputi pengajuan proposal dan laporan oleh dosen, mereview proposal dan laporan yang diajukan, dan merekap hasil review. 3.1.1 Analisa terhadap antarmuka dan interaksi di dalam aplikasi Pada aplikasi pengelolaan ini diperlukan suatu metode pengelolaan yang memungkinkan pengelolaan proposal dan laporan oleh dosen dengan menggunakan media local atau internet, intranet atau media jaringan komputer lain. Langkahlangkah aplikasi pengelolaan : 1. Login admin : memasukkan username dan password sewaktu admin ingin melihat hasil review proposal. 2. Menu admin : melihat data pengajuan proposal dan laporan dan merekap hasil review proposal. 3. Login user : memasukkan username dan password sewaktu dosen dalam proses pengajuan proposal dan laporan. 4. Menu user : melakukan pengajuan proposal dan laporan kegiatan pengabdian masyrakat. 5. Login reviewer : memasukkan username dan password sewaktu reviewer melakukan review terhadap proposal yang diajukan. 6. Menu reviewer : melakukan penilaian terhadap proposal yang diajukan. 17
18 3.2 Perancangan Sistem Dalam proses perancangan sistem ini, penulis menggunakan beberapa diagram seperti use case diagram, sequence diagram dan activity diagram. Pengguna aplikasi ini secara khusus untuk studi kasusnya LP2M Universitas Mercu Buana. Aplikasi ini dapat digunakan dimana pun dan kapanpun pada komputer yang terhubung secara lokal / intranet pada server. Pembuatan aplikasi ini menggunakan PHP serta javascript sebagai tambahan untuk Perancangan Tampilannya dengan mysql sebagai penyimpanan datanya. 1. Use Case Diagram Disini, terdapat diagram use case untuk admin, user dan reviewer. Pada diagram ini use case untuk user dan reviewer terlihat jelas bahwa kegiatan-kegiatan yang dapat dilakukan oleh user dan review dalam penggunaan aplikasi ini adalah login, pengajuan proposal dan laporan, dan mereview proposal yang disediakan oleh aplikasi ini. Pengajuan Proposal User (dosen) Pengajuan Laporan <<include>> <<include>> Menerima Pengajuan Proposal <<include>> <<include>> LOGIN Admin Menerima Pengajuan Laporan <<include>> <<include>> Menerima Hasil Review Proposal Merekap Proposal dan Laporan <<include>> <<include>> Mengunduh Proposal Reviewer Mereview Proposal Gambar 3.1 Use case Diagram web pengelolaan
19 Pada diagram use case untuk admin terlihat bahwa kegiatan-kegiatan admin pada aplikasi ini seperti Login, menerima pengajuan proposal dan laporan, menerima hasil review dan merekap proposal dan laporan. 2. Diagram Sequence Disini menjelaskan kegiatan-kegiatan yang dapat dilakukan user pada tiaptiap form yang ada pada aplikasi ini. Untuk diagram user, terlihat 4 buah form yang dapat diakses oleh user yaitu Form Login, Form Pengajuan Proposal dan Form Pengajuan Laporan. Dimana user harus login terlebih dahulu di Form Login sebelum mengakses form-form lainnya. Form Login Form Utama Form Pengajuan Proposal dan Laporan Form hasil User / dosen Form Login Berhasil Login Upload file Format salah Lihat hasil Gambar 3.2 Diagram Sequence untuk User / Dosen Disini menjelaskan kegiatan-kegiatan yang dapat dilakukan Admin pada tiaptiap form yang ada pada aplikasi ini. Untuk diagram pada admin, terlihat terdapat 5 buah form yang dapat diakses oleh Admin yaitu form login, form utama, form data
20 pengajuan proposal dan laporan, form hasil review proposal dan form merekap proposal dan laporan. Form Login Form Utama Form Data Pengajuan Proposal dan Laporan Form hasil Form rekap proposal dan laporan Admin Form Login Berhasil Login Upload file Format salah Lihat hasil Merekap Gambar 3.3 Diagram Sequence untuk Admin Disini menjelaskan kegiatan-kegiatan yang dapat dilakukan oleh reviewer pada tiap-tiap form yang ada pada aplikasi ini. Untuk diagram pada reviewer, terlihat terdapat 4 buah form yang dapat diakses oleh reviewer yaitu form login, form utama, form unduh proposal dan form review proposal. Dimana reviewer harus login terlebih dahulu di form login sebelum dapat mengakses form-form lainnya.
21 Form Login Form Utama Form unduh proposal Form review Reviewer Form Login Berhasil Login Unduh file Format salah Mereview proposal Ganbar 3.4 Diagram Sequence untuk Reviewer
22 3. Pemodelan Activity Diagram Pemodelan Activity diagram merupakan alur kerja sebuah proses bisnis dan urutan aktivitas suatu sistem. Berikut adalah gambaran diagram Activity seluruh kegiatan yang ada pada aplikasi ini. 1. Activity diagram untuk Login Admin Admin Sistem Menampilkan form login untuk masuk halaman utama Memasukkan Username, Password dan Hak Akses Cek Username, Password dan Hak Akses Tidak Ya Menampilkan halaman utama admin Gambar 3.5 Activity Diagram untuk Login Admin Pada gambar 3.5 menjelaskan aktivitas dimula dengam sistem akan menampilkan form login untuk masuk ke halaman utama, kemudian admin memasukkan username, password dan hak akses lalu sistem akan mengecek username, password dan hak akses jika valid sistem akan menampilkan halaman utama jika salah sistem akan memberikan pesan salah username, password dan hak akses dan kembali ke halaman login.
23 2. Activity diagram untuk Merekap Hasil Nilai Admin Sistem Reviewers Mengirim hasil review ke admin Menampilkan hasil review dari reviewers Merekap hasil review Melihat hasil rekap Gambar 3.6 Activity Diagram untuk Merekap Hasil Review Pada gambar 3.6 aktivitas dimulai dengan reviewer mengirimkan hasil review ke admin kemudia sistem menyimpan ke dalam basis data lalu sistem menampilkan hasil review dan admin merekap hasil review, reviewer juga dapat melihat hasil rekap tersebut. 3. Acitivity Diagram untuk Login User User/dosen Sistem Menampilkan form login untuk masuk halaman utama Memasukkan Username, Password dan Hak Akses Cek Username, Password dan Hak Akses Tidak Ya Menampilkan halaman utama dosen Gambar 3.7 Activity Diagram untuk Login User
24 Pada gambar 3.7 menjelaskan aktivitas dimulai dengan sistem menampilkan form login untuk masuk ke halaman utama, kemudian user memasukkan username, password dan hak akses lalu sistem mengecek username, password dan hak akses jika valid sistem akan menampilkan halaman utama jika salah sistem akan memberikan pesan salah username, password dan hak akses dan kembali ke halaman login. 4. Activity Diagram untuk Pengajuan Proposal User Sistem User membuka menu pengajuan proposal Menampilkan form pengajuan Mengisi form pengajuan dan mengupload file proposal Proses upload file Gambar 3.8 Activity Diagram untuk Pengajuan Proposal Pada gambar 3.8 Aktivitas dimulai dengan user membuka menu pengajuan proposal, lalu sistem akan menampilkan form pengajuan, kemudian user mengisi form pengajuan dan mengupload file proposal dengan selesai oleh proses sistem. 5. Activity Diagram untuk Pengajuan Laporan User Sistem User membuka menu pengajuan laporanl Menampilkan form pengajuan Mengisi form pengajuan dan mengupload file laporan Proses upload file
25 Gambar 3.9 Activity Diagram untuk Pengajuan Laporan Pada gambar 3.9 Aktivitas dimulai dengan user membuka menu pengajuan laporan, lalu sistem akan menampilkan form pengajuan, kemudian user mengisi form pengajuan dan mengunggah file laporan dengan selesai oleh proses sistem. 6. Activity Diagram untuk Lihat Hasil Keputusan User Sistem User membuka menu hasil keputusan Menampilkan halaman hasil keputusan Gambar 3.10 Activity Diagram untuk Lihat Hasil Keputusan Pada gambar 3.10 Aktivitas dimulai dengan user membuka halaman hasil keputusan lalu sistem akan menampilkan halaman hasil keputusan. 7. Activity Diagram untuk Login Reviewer
26 Reviewer Sistem Menampilkan form login untuk masuk halaman utama Memasukkan Username, Password dan Hak Akses Cek Username, Password dan Hak Akses Tidak Ya Menampilkan halaman utama reviewer Gambar 3.11 Activity Diagram untuk Login Reviewer
27 Pada gambar 3.11 menjelaskan aktivitas dimula dengam sistem akan menampilkan form login untuk masuk ke halaman utama, kemudian reviewer memasukkan username, password dan hak akses lalu sistem akan mengecek username, password dan hak akses jika valid sistem akan menampilkan halaman utama jika salah sistem akan memberikan pesan salah username, password dan hak akses dan kembali ke halaman login. 8. Activity Diagram untuk Mengunduh Proposal Reviewer Sistem Reviewer membuka menu data pengajuan proposal Menampilkan halaman data pengajuan proposal Reviewer mengunduh proposal Proses unduh Gambar 3.12 Activity Diagram untuk Mengunduh Proposal Pada gambar 3.12 Aktivitas dimulai dengan reviewer membuka menu data pengajuan proposal, lalu sistem akan menampilkan halaman data pengajuan proposal, kemudian reviewer mengunduh proposal dengan selesai oleh proses sistem.
28 9. Activity Diagram untuk Mereview Proposal Reviewer Sistem Reviewer membuka halaman review proposal Menampilkan form review Mengisi form review proposal Mengirim review proposal ke admin Gambar 3.13 Activity Diagram untuk Menilai Proposal Pada gambar 3.13 Aktivitas dimulai dengan reviewer membuka menu review proposal, lalu sistem akan menampilkan form review proposal, kemudian reviewer mengisi form review proposal lalu sistem mengirim review proposal ke admin.
29 4. Class Diagram dosen -nidn : int -nama_user : string -username : string -password : string +login() +input() +logout() 1 1 nilai_akhir -id : int -hasil : string -nama_file : string -tipe_file : string -ukuran_file : string -data_file : string +output() +simpan() +download() n download -id : int -ketua_pelaksana : string -judul : string -nama_file : string -tipe_file : string -data_file : string -ukuran_file : string n 1 reviewer -id : int -username : string -password : string +login() +input() +login() 1 admin -id : int -username : string -password : string n 1 +login() +logout() 1 n 1 1 n 1 nilai_proposal -id : int -ketua_pelaksana : string -fakultas_prodi : string -judul : string -bentuk_kegiatan : string -lama_kegiatan : string -biaya : string -skor1 : int -skor2 : int -skor3 : int -skor4 : int -skor5 : int -skor6 : int -skor7 : int -skor8 : int -skor9 : int -skor10 : int -skor11 : int -skor12 : int -skor13 : int -nilai1 : int -nilai2 : int -nilai3 : int -nilai4 : int -nilai5 : int -nilai6 : int -nilai7 : int -nilai8 : int -nilai9 : int -nilai10 : int -nilai11 : int -nilai12 : int -nilai13 : int -jumlah_skor : int -jumlah_nilai : int -revisi : string +input() +simpan() +output() Gambar 3.14 Class Diagram
30 3.3 Struktur Basis Data 1. Tabel dosen / user Tabel dosen berfungsi untuk menyimpan data pribadi dosen. Ditunjukkan pada Tabel 3.1 Field Tipe Keterangan Key niden Int (10) NIDN Primary Key username Varchar (10) username password Varchar (10) password 2. Tabel admin / staf LP2M Tabel admin berfungsi untuk menyimpan data pribadi admin. Ditunjukkan pada Tabel 3.2 Field Tipe Keterangan Key id Int (10) Id user Primary Key username Varchar (10) username password Varchar (10) password 3. Tabel reviewer Tabel reviewer berfungsi untuk menyimpan data pribadi reviewer. Ditunjukkan pada Tabel 3.3 Field Tipe Keterangan Key id Int (10) Id user Primary Key username Varchar (10) username password Varchar (10) password 4. Tabel proposal Tabel proposal berfungsi untuk menyimpan data file proposal. Ditunjukkan pada Tabel 3.4
31 Field Tipe keterangan key id Int (10) Id Primary Key nama Varchar (50) Nama ketua pelaksana fakultas Varchar (65) Fakultas jurusan Varchar (30) Jurusan anggota Int (1) Jumlah anggota kegiatan Varchar (40) Bentuk kegiatan filetype Varchar (50) Tipe filedata longblob File data filename Varchar Nama_file (110) filesize Bigint (20) Ukuran judul Varchar (500) Judul proposal nm_anggota Varchar (50 ) Nama anggota waktu Varchar (10) Lama Kegiatan biaya Varchar (10) Biaya 5. Tabel laporan Tabel laporan berfungsi untuk menyimpan data file laporan. Ditunjukkan pada Tabel 3.5 Field Tipe keterangan key id Int (10) Id Primary Key
32 nama Varchar (50) Nama ketua pelaksana fakultas Varchar (65) Fakultas jurusan Varchar (30) Jurusan anggota Int (1) Jumlah anggota kegiatan Varchar (40) Bentuk kegiatan filetype Varchar (50) Tipe filedata longblob File data filename Varchar (110) Nama_file filesize Bigint (20) Ukuran judul Varchar (500) Judul proposal nm_anggota Varchar (50 ) Nama anggota waktu Varchar (10) Lama Kegiatan 6. Tabel nilai Tabel nilai berfungsi untuk menyimpan hasil review proposal. Ditunjukkan pada Tabel 3.6 Field Tipe keterangan Key id Int (10) Id Primary Key judul Varchar Judul (500) ketua Varchar (50) Ketua pelaksana
33 anggota Int (1) Jumlah anggota fakultas Varchar Fakultas/prodi (65) kegiatan Varchar (40) Bentuk kegiatan waktu Varchar Lama kegiatan (10) biaya Varchar Biaya (10) skor1 Int (3) Skor1 skor2 Int (3) Skor2 skor3 Int (3) Skor3 skor4 Int (3) Skor4 skor5 Int (3) Skor5 skor6 Int (3) Skor6 skor7 Int (3) Skor7 skor8 Int (3) Skor8 skor9 Int (3) Skor9 skor10 Int (3) Skor10 skor11 Int (3) Skor11 skor12 Int (3) Skor12 skor13 Int (3) Skor13 nilai1 Int (3) Nilai1 nilai2 Int (3) Nilai2 nilai3 Int (3) Nilai3 nilai4 Int (3) Nilai4 nilai5 Int (3) Nilai5 nilai6 Int (3) Nilai6
34 nilai7 Int (3) Nilai7 nilai8 Int (3) Nilai8 nilai9 Int (3) Nilai9 nilai10 Int (3) Nilai10 nilai11 Int (3) Nilai11 nilai12 Int (3) Nilai12 nilai13 Int (3) Nilai13 jml_skor Int (3) Jumlah Skor jml_nilai Int (3) Jumlah Nilai revisi Varchar (100) Revisi 7. Tabel Hasil Tabel hasil berfungsi untuk menunjukkan hasil proposal untuk dosen. Ditunjukkan pada Tabel 3.7 Field Tipe Keterangan Key niden Int (11) NIDN Primary Key deskripsi Varchar(50) Keterangan filetype Varchar(50) Tipe filedata longblob File data filename Varchar(110) Nama_file filesize Bigint(20) ukuran
35 3.4 Perancangan Antarmuka 1. Perancangan Tampilan Login admin/user/reviewers Username Password Pilih username password Admin Dosen Reviewers Login Gambar 3.1 Tampilan Login Pada gambar 3.1 Layar Login terdapat : 1. Kolom username : untuk memasukkan id pengguna 2. Kolom password : untuk memasukkan sandi 3. Kolom pilih : untuk hak akses 4. Tombol login : jika login valid akan berpindah ke menu utama. Tapi jika tidak valid maka akan tampil pesan kesalahan.
36 2. Perancangan Tampil Menu Utama User Pengabdianmasyarakat Home Pengajuan Proposal Pengajuan Laporan Hasil Pengaju an About Us Contact Us Logou t Halaman Dosen Footer Gambar 3.2 Tampilan Menu Utama User Perancangan desain untuk halaman utama user ditunjukkan seperti gambar 3.2 dibawah ini yang terbagi menjadi beberapa bagian yaitu : 1. Header, bagian ini adalah perancanngan tampilan atas dari desain yang berisi judul untuk pengabdian masyarakat. 2. Menu pengajuan proposal, yang berisi form pengajuan proposal 3. Menu pengajuan laporan, yang berisi form pengajuan laporan 4. Menu hasil pengajuan, yang berisi keputusan pengajuan 5. Menu about us, yang berisi tentang website 6. Menu contact us, yang berisi nomor LP2M
37 3. Perancangan Tampil Menu Pengajuan Proposal / Laporan Pengabdianmasyarakat Home Pengajuan proposal Pengajuan Laporan Hasil Pengajuan About us Conta ct us Logout Form Pengajuan footer Gambar 3.3 Tampil Menu Pengajuan Proposal / Laporan Perancangan desain untuk halaman pengajuan proposal/laporan ditunjukkan seperti gambar 3.3 dibawah ini yang terbagi menjadi beberapa bagian yaitu : 1. Header, bagian ini adalah perancanngan tampilan atas dari desain yang berisi judul untuk pengabdian masyarakat. 2. Menu pengajuan proposal, yang berisi form pengajuan proposal 3. Menu pengajuan laporan, yang berisi form pengajuan laporan 4. Menu hasil pengajuan, yang berisi keputusan pengajuan 5. Menu about us, yang berisi tentang website 6. Menu contact us, yang berisi nomor LP2M 4. Perancangan Tampilan Menu Mengunduh File Nama ketua pelaksana Judul Download Gambar 3.4 Tampilan Menu Mengunduh File Perancangan desain untuk mengunduh file ditunjukkan seperti gambar 3.4 dibawah ini yang terbagi menjadi beberapa bagian yaitu :
38 1. Kolom nama ketua pelaksana : untuk menampilkan nama ketua pelaksana 2. Kolom judul : untuk menampilkan judul proposal/laporan 3. Kolom filename : untuk menampilkan filenama yang diunduh 5. Perancangan Tampilan Menu Menilai Proposal Review Proposal Judul : Fakultas : Ketua Pelaksana : Jumlah Anggota : No Keterangan Indikator Bobot (%) Skor Nilai Gambar 3.5 Tampilan Menu Review Proposal 1. Bagian atas mengisi form data dosen yang mengajukan proposal 2. Form review proposal untuk menilai sebuah proposal dengan indicator yang telah tersedia.