BAB III METODE PENELITIAN
3.2 Perancangan Sistem
Perancangan sistem membahas mengenai konsep dari sistem yang akan di bangun untuk memenuhi kebutuhan kepada pengguna sistem dan memberikan gambaran secara umum dan jelas kepada user tentang sistem yang baru. Perancangan sistem secara umum merupakan persiapan dari perancangan dan mengidentifikasi komponen-komponen sistem yang akan dirancang secara detail. Dalam melakukan perancangan terhadap sistem, maka model yang dipergunakan dalam melakukan perancangan sistem yaitu model rancangan sistem dengan menggunakan UML (Unified Modeling Language).
3.2.1. Deskr ipsi Umum Sistem
Secara umum, sistem yang dibuat akan ditunjukkan pada Gambar 3.1 dibawah ini :
Gambar 3.1 Deskripsi Sistem informasi manajemen yayasan Deskripsi dari asritektur sistem pada Gambar 3.1 adalah sebagai berikut :
a. Laptop atau computer adalah media yang digunakan oleh user untuk mengakses sistem informasi informasi manajemen kepegawaian dan data santri mitra arafah.
b. Admin bisa menjalankan sistem informasi untuk melakukan pengolahan data pegawai dan data santri. Seperti insert dan update data pegawai maupun data santri.
c. Pegawai bisa menjalankan sistem informasi untuk melakukan pengolahan data absensi santri dan memasukkan nilai santri.
d. Pimpinan bisa menjalankan sistem informasi untuk melihat laporan pegawai, santri, absensi pegawai, absensi santri dan nilai santri. Serta pimpinan dapat mengawasi segala inputan data dan perubahan data yang dilakukakn oleh admin dan pegawai.
3.2.2. Diagram UML (Unified Modeling Language)
Pada proses perancangan Tugas Akhir ini, desain yang dibuat menggunakan diagram UML (Unified Modeling Language) yang bertujuan untuk memodel rancangan sistem dan aliran program yang dibuat mendekati realitas dan siap pakai. Software yang digunakan dalam merancang proses adalah Rational Rose Enterprise Edition. Diagram-diagram UML yang digunakan pada Sistem Informasi Manajemen Kepegawaian dan Data Santri adalah sebagai berikut :
a. Diagram Use Case
Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem. Yang ditekan adalah “apa” yang diperbuat sistem, dan “bagaimana”. Sebuah use case merepresentasikan sebuah interaksi antara aktor dan sistem. Seorang atau sebuah aktor adalah sebuah entitas manusia atau mesin yang berinteraksi dengan sistem untuk melakukan pekerjaan- pekerjaan tertentu. Use case diagram dapat sangat membantu bila kita sedang menyusun sebuah sistem.
Pada gambar 3.2 dibawah terdapat aktor admin, pegawai, dan atasan/pimpinan. Dimana para aktor memiliki interaksi dengan use case
masing-masing. Setiap aktor terlebih dahulu harus melewati use case login terlebih dahulu untuk berinteraksi dengan use case lainnya. Aktor admin disini memiliki beberapa interaksi dengan use case meliputi mengelola pegawai, mengelola santri, mengelola absensi pegawai, dan membuat memo. Pegawai memiliki beberapa interaksi dengan use case meliputi mengelola absensi santri, mengelola donatur, dan mengelola nilai santri. Sedangkan atasan memiliki interaksi dengan use case melihat pegawai, santri, donatur, absensi pegawai, melihat absensi santri, dan melihat nilai santri.
Gambar 3.2 Diagram Use Case Sistem Informasi Manajemen Yayasan. login membuat m em o Admin nama admin us ernam e password ins ert() Pegawai nama pegawai us ernam e password ins ert() Atasan nama atasan username password insert() melihat pegawai mengelola pegawai melihat santri mengelola s antri
melihat abs ens i pegawai mengelola absensi pegawai
melihat nilai santri mengelola nilai santri
melihat absensi s antri mengelola absens i santri
melihat donatur mengelola donatur
<<include>>
<<include>>
b. Diagram Aktifitas
Activity diagram menggambarkan berbagai alir aktifitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses paralel yang terjadi pada beberapa eksekusi.
Gambar 3.3 Diagram Aktifitas Login
Pada Gambar 3.3 pengguna mengawali aktivitas dengan login terlebih dahulu untuk mengakases sistem informasi manajemen yayasan.
Gambar 3.4 Diagram Aktifitas Admin
start
login cek username dan
password menampilkan halaman utama end validasi benar salah login menampilkan menu mengelola pegawai mengelola santri mengelola absensi pegawai membuat memo logout
Pada gambar 3.4 admin melakukan login terlebhih dahulu untuk menjalankan sistem. Dimana terlihat pada 3.4 setelah login akan menampilkan menu. Admin dapat melakukan pengolahan pegawai, pengolahan santri, pengolahan absensi pegawai, dan membuat memo.
Gambar 3.5 Diagram Aktifitas Pegawai
Pada gambar 3.5 pegawai melakukan login terlebih dahulu untuk menjalankan sistem. Dimana terlihat pada 3.5 setelah login akan menampilkan menu. Pegawai dapat melakukan pengolahan data donatur, pengolahan absensi santri, sert pengolahan nilai santri.
Gambar 3.6 Diagram Aktifitas Atasan
login menampilkan menu mengelola donatur mengelola absensi santri mengelola nilai santri logout login menampilkan menu melihat pegawai
melihat santri melihat donatur melihat abs ensi santri
melihat abs ensi pegawai
melihat nilai santri
Pada gambar 3.6 atasan melakukan login terlebhih dahulu untuk menjalankan sistem. Dimana terlihat pada 3.6 setelah login akan menampilkan menu. Atasan disini berfungsi mengawasi inputan-inputan data yang dilakukan oleh admin dan pegawai.
c. Diagram Sekuensial
Sequence diagram menggambarkan interaksi antar objek didalam dan disekitar sistem ( termasuk pengguna, display dan sebagainya ) berupa message terhadap waktu. Sequence diagram terdiri atas dimensi vertikal ( waktu ) dan dimensi hotizontal ( objek-objek ) yang terkait.
Sequence diagram bisa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah entitas event untuk menghasilkan output tertentu.
Gambar 3.7 Diagram Sekuensial Login
Dari Gambar 3.7 diagram sekuensial yang ada diatas menggambarkan aliran kerja yang terjadi sebelum memasuki sistem informasi manajemen harus login dahulu.
user
user form loginform login form menu
utama form menu
utama masuk menu login
cek username dan password
Gambar 3.8 Diagram Sekuensial Mengolah Pegawai
Gambar 3.9 Diagram Sekuensial Mengolah Santri
Dari dua diagram gambar 3.8 dan gambar 3.9 sekuensial yang ada diatas menggambarkan aliran kerja yang terjadi dalam sistem informasi manajemen yayasan. Diagram sekuensial sistem menjelaskan tentang proses admin mengolah data pegawai dan data santri.
admin
admin halaman adminhalaman admin menu pegawaimenu pegawai form daftar pegawai form daftar pegawai form tambah pegawai form tambah pegawai database database
masuk halaman admin
masuk menu pegawai
menampilkan data pegawai
memasukkan pegawai
simpan pegawai
menampilkan data pegawai
admin
admin halaman adminhalaman admin menu santrimenu santri form data santriform data santri form tambah santri form tambah
santri
database database
masuk halaman admin masuk menu santri
menampilkan data santri
memasukkan santri
simpan santri
Gambar 3.10 Diagram Sekuensial Mengolah Absensi Pegawai
Pada gambar 3.10 menjelaskan tentang aliran sistem dalam mengolah absensi pegawai.
Gambar 3.11 Diagram Sekuensial Membuat Memo
Pada gambar 3.11 menjelaskan tentang aliran dalam membuat memo yang nantinya akan dikirim ke pegawai.
admin
admin halaman adminhalaman admin menu absensi pegawai menu absensi
pegawai
form data absensi pegawai form data absensi
pegawai form tambah absensi pegawai form tambah absensi pegawai database database
masuk halaman admin
masuk menu absensi pegawai
menampilkan data absensi
memasukkan absensi
simpan absensi
menampilkan data absensi pegawai
admin
admin halaman adminhalaman admin menu memomenu memo form input memo form input
memo
pegawai pegawai
masuk halaman admin masuk menu memo
memasukkan memo
Gambar 3.12 Diagram Sekuensial Mengolah Donatur
Pada gambar 3.12 menjelaskan tentang aliran dimana pegawai mengolah data donatur.
Gambar 3.13 Diagram Sekuensial Mengolah Nilai Santri
Pada gambar 3.13 menjelaskan tentang aliran dimana pegawai mengolah nilai santri.
pegawai pegawai halaman pegawai halaman pegawai menu donatur
menu donatur form data donatur form data donatur form tambah donatur form tambah donatur database database
masuk halaman pegawai masuk menu donatur
view data donatur
memasukkan donatur
simpan donatur
menampilkan data donatur
pegawai pegawai halaman pegawai halaman pegawai menu nilai santri menu nilai santri
form daftar nilai santri form daftar nilai
santri
form input nilai santri form input nilai
santri databasedatabase
masuk halaman pegawai
masuk m enu nilai santri menampilkan data nilai santri
memasukkan nilai santri
simpan nilai
Gambar 3.14 Diagram Sekuensial Mengolah Absensi Santri
Diagram sekuensial pada gambar 3.14 menjelaskan tentang aliran dimana pegawai mengolah absensi santri.
Gambar 3.15 Diagram Sekuensial Melihat Pegawai
pegawai pegawai halaman pegawai halaman pegawai menu absensi santri menu absensi santri form data absensi santri form data absensi santri form tambah absensi santri form tambah absensi santri database database
masuk halaman pegawai
masuk menu absensi santri menampilkan data absensi
memasukkan absensi
simpan absensi santri
menampilkan data absensi santri
atasan
atasan halaman atasanhalaman atasan menu absensi pegawai menu absensi
pegawai
form data absensi pegawai form data absensi
pegawai
cari data absensi pegawai cari data absensi
pegawai
cetak data absensi pegawai cetak data absensi
pegawai masuk halaman atasan
masuk menu absensi pegawai
lihat data absensi pegawai
cari data absensi
tampilkan data absensi
cetak data absensi pegawai
Gambar 3.16 Diagram Sekuensial Melihat Santri
Diagram sekuensial pada gambar 3.15 dan gambar 3.16 menjelaskan tentang aliran dimana atasan melihat dan mencari data pegawai dan santri serta dapat dicetak.
Gambar 3.17 Diagram Sekuensial Melihat Donatur
atasan
atasan halaman atasanhalaman atasan menu absensi santri menu absensi
santri
form data santri
form data santri cari data absensi santri cari data absensi
santri
cetak data absensi santri
cetak data absensi santri masuk halam an atasan
masuk m enu absensi santri
lihat data absensi santri
cari data absensi tam pilkan data absens i
cetka data absensi has il cetak data absensi
atasan
atasan halaman atasanhalaman atasan menu donaturmenu donatur form data donatur form data donatur cari data donatur cari data donatur cetak data donatur cetak data donatur
masuk halaman atasan
masuk menu donatur
lihat data donatur
cari data donatur
tampilkan data donatur
cetak data donatur
Gambar 3.18 Diagram Sekuensial Melihat Nilai Santri
Diagram sekuensial pada gambar 3.17 dan gambar 3.18 menjelaskan tentang aliran dimana atasan dapat melihat dan mencari data donatur dan nilai santri serta dapat dicetak.
Gambar 3.19 Diagram Sekuensial Melihat Absensi Pegawai
atasan
atasan halaman atasanhalaman atasan menu nilai santri menu nilai
santri
form data nilai santri form data nilai
santri
cari data nilai santri cari data nilai
santri
cetak data nilai santri cetak data nilai
santri masuk halaman atasan
masuk menu nilai santri
lihat data nilai santri
cari data nilai santri
tampilkan data
cetak nilai santri hasil cetak nilai santri
atasan
atasan halaman atasanhalaman atasan menu absensi
pegawai menu absensi
pegawai
form data absensi pegawai form data absensi
pegawai
cari data absensi pegawai cari data absensi
pegawai
cetak data absensi pegawai cetak data absensi
pegawai masuk halaman atasan
masuk menu absensi pegawai
lihat data absensi pegawai
cari data absensi tampilkan data absensi
cetak data absensi pegawai
Gambar 3.20 Diagram Sekuensial melihat absensi santri
Diagram sekuensial pada gambar 3.19 dan gambar 3.20 menjelaskan tentang aliran dimana atasan dapat melihat dan mencari data absensi pegawai dan absensi santri serta dapat dicetak. Atasan disini berfungsi untuk mengawasi inputan-inputan yang dilakukan oleh admin dan pegawai agar tidak terjadi korupsi data.
d. Diagram Class
Class diagram memperlihatkan keberadaan dari class-class dan hubungannya dari sistem dalam logical view. Class diperoleh dengan melakukan pengetesan pada diagram sekuensial.
atasan
atasan halaman atasanhalaman atasan menu absensi santri menu absensi
santri
form data santri
form data santri cari data absensi santri cari data absensi
santri
cetak data absensi santri
cetak data absensi santri
masuk halaman atasan
masuk menu absensi santri
lihat data absensi santri
cari data absensi tampilkan data absensi
cetka data absensi
Gambar 3.21 Diagram Class Sistem Informasi Manajemen Yayasan.
3.3. Perancangan Antar Muka (Desain Interface)
Perancangan antar muka (interface) yang akan dibuat untuk sistem informasi manajemen kepegawaian dan data santri di yayasan mitra arafah ini akan dibuat secara terstruktur. Dalam merancang tampilan sebuah situs, harus menggambarkan layout dari situs yang akan dibuat. Layout berfungsi untuk memudahkan dalam mendesain tampilan pada sebuah halaman web. Berikut ini merupakan bagian-bagian dari aplikasi web tersebut:
Admin nama admin
username pas sword insert()
(f rom Use Case View) Pegawai
nama pegawai username password insert()
(f rom Use Case View)
Atasan nama atasan
username pas sword insert()
(f rom Use Case View)
Form_login username pas sowrd insert() halaman pegawai menu donatur menu absens i santri menu nilai santri pilih() displayform() exit() donatur id donatur nama donatur ttl donatur alamat donatur tgl donatur memasukkan donatur() mengubah donatur() mencari donatur() melihat donatur() save donatur() 0..* 1
abs ensi santri id absensi santri nama santri tgl absensi santri absensi santri memasukkan absensi santri() mengubah absensi santri() melihat abs ensi santri() mencari abs ensi santri() save absensi() 0..* 1 nilai santri nilai santri kode matpel bulan matpel tahun matpel kelas matpel memasukkan nilai santri() mengubah nilai santri() melihat nilai santri() mencari nilai santri() save nilai() 0..* 1 santri nama santri alamat as al santri jenkel santri ttl santri status santri nis memasukkan santri() mengubah santri() melihat santri() mencari santri() save s antri() halaman atasan menu pegawai menu santri menu donatur menu absens i santri menu absens i pegawai menu nilai santri pilih() displayform() exit() 0..* 1 0..* 1 0..* 1 0..* 1 memo nama dikiirim isi memo id memo mem buat memo() mengirim memo()
abs ensi pegawai id absensi pegawai name2 nama pegawai tgl absensi abs ensi pegawai memasukkan absensi pegawai() mengubah abs ensi pegawai() melihat absensi() mencari absensi pegawai() save absensi() 0..* 1 halaman admin menu pegawai menu santri menu absens i santri menu memo pilih() displayform() exit() 0..* 1 0..* 1 0..* 1 pegawai nama pegawai alamat pegawai no tlp pegawai jenkel pegawai agama pegawai jabatan pegawai ttl pegawai nip mem asukkan pegawai() mengubah pegawai() mencari pegawai() melihat pegawai() save pegawai() 0..* 1 0..* 1 1 1 1 1 1 1 1 1 1 1 1 1 0..* 0..* 0..* 0..* 0..* 0..* 0..* 0..* 0..* 0..* 0..* 0..* 1 0..*
a. Halaman Login
Di bawah ini adalah gambar halaman login, tampilan awal saat ingin menggunakan aplikasi.
Gambar 3.22 Halaman Login
b. Halaman Admin di bawah ini adalah tampilan awal halaman admin.
c. Halaman Pegawai di bawah ini adalah tampilan awal halaman pegawai.
Gambar 3.24 Halaman Pegawai
d. Halaman Atasan di bawah ini adalah tampilan awal halaman Atasan.