SISTEM MANAJEMEN GAJI BERBASIS WEB RESPONSIVE

PADA KOPERASI WANITA SRI ARTHA SEJAHTERA

TUGAS AKHIR

Oleh :
NIM : 110020074
NAMA : MIKHA HENI PURWANTI
JENJANG STUDI : DIPLOMA TIGA (D3)
PROGRAM STUDI : MANAJEMEN INFORMATIKA

SEKOLAH TINGGI
MANAJEMEN INFORMATIKA DAN TEKNIK KOMPUTER
(STMIK) STIKOM BALI
2016
SISTEM MANAJEMEN GAJI BERBASIS WEB RESPONSIVE
PADA KOPERASI WANITA SRI ARTHA SEJAHTERA

TUGAS AKHIR

DIAJUKAN SEBAGAI SALAH SATU SYARAT UNTUK MENCAPAI

GELAR AHLI MADYA PROGRAM STUDI MANAJEMEN INFORMATIKA

Oleh :
NIM : 110020074
NAMA : MIKHA HENI PURWANTI
JENJANG STUDI : DIPLOMA TIGA (D3)
PROGRAM STUDI : MANAJEMEN INFORMATIKA

SEKOLAH TINGGI
MANAJEMEN INFORMATIKA DAN TEKNIK KOMPUTER
(STMIK) STIKOM BALI
2016
 DAFTAR ISI

DAFTAR ISI ......................................................................................................... i

DAFTAR TABEL ................................................................................................ iii
DAFTAR GAMBAR ............................................................................................ iv
BAB I PENDAHULUAN ...................................................................................... 1
1.1 Latar Belakang ...................................................................................... 1
1.2 Rumusan Masalah ................................................................................. 2
1.3 Tujuan Perkayasaan .............................................................................. 2
1.4 Manfaat Perekayasaan .......................................................................... 2
1.5 Ruang Lingkup ...................................................................................... 2
1.6 Metode Perekayasaan ........................................................................... 3
1.6.1 Tahap perencanaan (Planning) ...................................................... 4
1.6.2 Tahapan Analisis (Analysis) ........................................................... 4
1.6.3 Tahap Perancangan (Design) ......................................................... 5
1.6.4 Tahap Pengembangan (Development/Coding) ............................... 5
1.6.5 Tahap Pengujian/Testing ................................................................ 6
BAB II TINJAUAN PUSTAKA ............................................................................. 7
2.1 Sistem Informasi .................................................................................... 7
2.1.1 Pengertian Sistem .......................................................................... 7
2.1.2 Pengertian Informasi ...................................................................... 8
2.2 Koperasi ................................................................................................ 9
2.3 Data Flow Diagram (DFD) ................................................................... 11
2.4 Entity Relationship Diagram (ERD) ...................................................... 12
2.5 Kardinalitas .......................................................................................... 13
2.6 Pemrograman Berbasis Web ............................................................... 14
2.7 PHP ..................................................................................................... 15
2.8 CSS ..................................................................................................... 16
2.9 Javascript ............................................................................................ 16
2.10 Adobe Dreamweaver CS 5 .................................................................. 17
2.11 Xampp ................................................................................................. 17
2.12 Web Server Apache............................................................................. 17
2.13 Database MySQL ................................................................................ 18
BAB III ANALISIS DAN PERANCANGAN SISTEM .......................................... 19
3.1 DFD ..................................................................................................... 19
3.1.1 Diagram Konteks .......................................................................... 19
3.1.2 Level 0 .......................................................................................... 20
3.1.3 Level 1 P4 Kelola Data Master ..................................................... 21
3.1.4 Level 2 P4.1 Kelola Karyawan ...................................................... 22
3.1.5 Level 2 P4.1 Kelola Absen ............................................................ 23
3.2 ERD..................................................................................................... 23
3.3 Konseptual Database .......................................................................... 24
3.4 Struktur Tabel ...................................................................................... 25
3.4.1 Struktur Data Tabel absen ............................................................ 25
3.4.2 Struktur Data Tabel admin ............................................................ 26
3.4.3 Struktur Data Tabel gaji ................................................................ 26
3.4.4 Struktur Data Tabel karyawan ...................................................... 27
3.5 Design Interface .................................................................................. 28
3.5.1. Tampilan Login ............................................................................. 28
3.5.2. Tampilan Sistem ........................................................................... 28

i
 3.5.3. Halaman Home............................................................................. 29
3.5.4. Halaman Daftar Karyawan ............................................................ 30
3.5.5. Halaman Tambah Karyawan ........................................................ 31
3.5.6. Halaman Edit Karyawan ............................................................... 32
3.5.7. Halaman Absensi ......................................................................... 33
3.5.8. Halaman Detail Absensi ............................................................... 35
3.5.9. Halaman Penggajian .................................................................... 35
3.5.10. Halaman Proses Penggajian ........................................................ 36
3.5.11. Halaman Detail Penggajian .......................................................... 37
3.5.12. Halaman Detail Profil .................................................................... 38
DAFTAR ISI ...................................................................................................... 40

ii
 DAFTAR TABEL

Tabel 2. 1 Simbol data flow diagram (DFD) ....................................................... 11

Tabel 2. 2 Simbol entity relationship diagram (ERD) .......................................... 13
Tabel 2. 3 Kardinalitas Relasi ERD .................................................................... 13
Tabel 3. 1 Struktur data Tabel absen ................................................................. 25
Tabel 3. 2 Struktur data Tabel admin ................................................................. 26
Tabel 3. 3 Struktur data Tabel gaji ..................................................................... 26
Tabel 3. 4 Struktur data Tabel karyawan ........................................................... 27

iii
 DAFTAR GAMBAR

Gambar 1. 1 Metode Perekayasaan Sistem......................................................... 4

Gambar 3. 1 Diagram Konteks Sistem ............................................................... 20
Gambar 3. 2 DFD Level 0 .................................................................................. 21
Gambar 3. 3 DFD Level 1 P4 Kelola Data Master .............................................. 22
Gambar 3. 4 DFD Level 2 P4.1 Kelola Karyawan .............................................. 22
Gambar 3. 5 DFD Level 2 P4.2 Kelola Absen .................................................... 23
Gambar 3. 6 ERD Sistem .................................................................................. 24
Gambar 3. 7 Konseptual Sistem ........................................................................ 25
Gambar 3. 8 Tampilan Login.............................................................................. 28
Gambar 3. 9 Tampilan Sistem ........................................................................... 29
Gambar 3. 10 Halaman Home Admin ................................................................ 29
Gambar 3. 11 Halaman Home Karyawan .......................................................... 30
Gambar 3. 12 Halaman Daftar Karyawan .......................................................... 31
Gambar 3. 13 Halaman Tambah Karyawan ....................................................... 32
Gambar 3. 14 Halaman Edit Karyawan .............................................................. 33
Gambar 3. 15 Halaman Absensi bagian Admin ................................................. 34
Gambar 3. 16 Halaman Absensi bagian Karyawan ............................................ 34
Gambar 3. 17 Halaman Detail Absensi .............................................................. 35
Gambar 3. 18 Halaman Penggajian Bagian Admin ............................................ 36
Gambar 3. 19 Halaman Penggajian Bagian Karyawan ...................................... 36
Gambar 3. 20 Halaman Proses Penggajian ....................................................... 37
Gambar 3. 21 Halaman Detail Penggajian ......................................................... 38
Gambar 3. 22 Detail Profil .................................................................................. 39

iv
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Koperasi Wanita Sri Artha Sejahtera berdiri sejak tahun 2013 adalah
Koperasi Serba Usaha dimana Koperasi ini merupakan salah satu organisasi
yang bergerak dalam bidang keuangan Simpan-Pinjam. Koperasi ini
beralamat di Banjar Canggu Permai Desa Tibubeneng Kecamatan Kuta
Utara Kabupaten Badung Provinsi Bali. Koperasi Sri Artha Sejahtera memiliki
600 nasabah dengan jumlah karyawan 20 orang sesuai tugas dan tanggung
jawab masing-masing.
Dalam kegiatan tugas dan tanggung jawab masing-masing karyawan
salah satunya tugas pada bagian penggelola gaji yaitu mengumpulkan
absensi check lock lalu mengitung absensi bulanan setiap akhir bulan.
Setelah di cek dan di rekapitulasi, absensi kemudian dimasukkan kedalam
rumus excel. Perhitungan gaji yang masih menggunakan excel diberi rumus-
rumus atau formula excel untuk menghitung gaji karyawan setiap bulannya.
Setelah itu gaji diberikan kepada karyawan berupa slip gaji dan kwitansi
melalui excel sebagai salah satu bukti penyerahan gaji karyawan satu
persatu.
Dalam kegiatan penggajian banyak sekali kendala yang terjadi saat
pelaksanaan perhitungan gaji karyawan, seperti terjadinya kesalahan saat
memasukkan data, terlambatnya perhitungan, rumus-rumus file excel yang
kemudian bisa berubah, penggunaan file excel yang berkali-kali sehingga
memungkinkan data yang lama tersimpan bisa hilang ataupun sulit untuk
ditemukan dikarenakan banyaknya file yang harus dicari. Selain itu
penggunaan kwitansi sebagai tanda terima yang menimbulkan keraguan
kepada penerima gaji tanpa adanya perincian sesuai prosedur penggajian
dan penyitaan waktu akan terjadi saat proses merinci gaji.
Berdasarkan permasalahan di atas, maka diperlukan suatu sistem
informasi yang baik untuk menggelola data penggajian karyawan sehingga
menunjang kelancaran aktifitas kerja. Sistem ini nantinya mampu membantu
bagian penggelola gaji dalam menghitung setiap gaji karyawan dengan cepat
dan efisien, meningkatkan efektifitas dalam bekerja, memberikan kemudahan

1
 2

karyawan untuk memberikan informasi perincian penggajian karyawan yang

valid dan mempermudah dalam mencari data-data history yang terdahulu
sehingga pengguna sistem hanya perlu memasukkan keyword sesuai
pencarian. Selain itu, sistem yang dibangun menggunakan teknologi web
responsive yang mampu menyesuaikan seluruh ukuran layar sehingga
karyawan bisa mengakses sistem pada komputer maupun gadget saat
sedang diluar.

1.2 Rumusan Masalah

Berdasarkan latar belakang diatas dapat dirumuskan masalah yaitu
bagaimana merancang bangun sistem manajemen gaji berbasis web
responsive pada Koperasi Wanita Sri Artha Sejahtera?

1.3 Tujuan Perkayasaan

Adapun tujuan diadakan perekayasaan ini adalah untuk merancang
bangun sistem manajemen gaji berbasis web responsive pada Koperasi
Wanita Sri Artha Sejahtera.

1.4 Manfaat Perekayasaan

Adapun manfaat dari perancangan sistem informasi penggajian
karyawan berbasis web studi kasus koperasi wanita sri artha sejahtera antara
lain :
1. Memberikan kemudahan diakses dimanapun dan kapanpun karena
sistem ini berbasis web.
2. Membantu user saat proses penggajian karyawan tanpa menyita
waktu sehingga lebih cepat dan efisien.
3. Memberikan informasi perincian penggajian yang valid dan relevan
kepada karyawan.
4. Mempermudah dalam mencari data-data history yang terdahulu
sehingga user hanya perlu memasukkan keyword sesuai pencarian.

1.5 Ruang Lingkup

Adapun ruang lingkup dari sistem informasi yaitu :
1. Sistem ini digunakan oleh 2 pengguna yaitu Admin dan Karyawan.
 3

a. Admin merupakan pengguna yang bertindak mengelola gaji karyawan

seperti kelola gaji karyawan dan input data slip gaji karyawan.
Sebelumnya admin harus melakukan login terlebih dahulu untuk
dapat mengelola data gaji dan slip gaji karyawan.
b. Karyawan pada sistem ini yaitu pengguna yang memiliki aktifitas
hanya melakukan login kemudian melihat informasi data gaji dan slip
gaji yang telah dimasukkan oleh admin.
2. Sistem ini nantinya akan memiliki beberapa halaman yaitu halaman
login, halaman administrasi, cetak gaji, halaman administrasi gaji
dimana sistem terdapat informasi mengenai gaji pokok, tunjangan
jabatan, uang makan, uang transport, lembur, libur lembur, kehadiran,
serta pengurangan jamsostek, dan pengurangan keterlambatan.
3. Sistem ini memiliki tampilan responsive yang memudahakan
pengguna menggunakan perangkat dalam berbagai jenis ukuran
layar.
4. Bahasa pemrograman yang digunakan dalam merancang sistem
adalah PHP dan Database yang digunakan adalah MySQL.

1.6 Metode Perekayasaan

Pada perancangan sistem ini nantinya akan digunakan metode
pengembangan waterfall sebagai salah satu software development, karena
metode ini merupakan metode yang sering digunakan oleh penganalisa sistem
pada umumnya.
 4

PERENCANAAN
SISTEM

ANALISIS
SISTEM

PERANCANGAN
SISTEM

PENGEMBANGAN
SISTEM

PENGUJIAN
SISTEM

Gambar 1. 1 Metode Perekayasaan Sistem

1.6.1 Tahap perencanaan (Planning)

Pada tahap ini terdapat beberapa langkah penting dalam pengembangan
sistem informsi penggajian karyawan berbasis web studi kasus koperasi wanita
sri artha sejahtera, antara lain :
1. Identifikasi masalah, yaitu melakukan identifikasi terhadap masalah pada
sistem penggajian yang sedang berjalan pada Koperasi Wanita Sri Artha
Sejahtera.
2. Lingkup sistem, yaitu menentukan ruang lingkup atau batasan sistem
yang akan dibuat.
3. Tujuan, yaitu menentukan untuk apa sistem dibuat dan diperuntukan
untuk siapa saja.
4. Jadwal, yaitu menentukan alokasi waktu pengembangan sistem secara
keseluruhan langkah demi langkah dimulai dari tahap perencanaan
(Planning) sampai tahapan testing.

1.6.2 Tahapan Analisis (Analysis)

Pada tahap ini akan diuraikan analisa dari sistem atau proses penggajian
pada koperasi wanita sri artha sejahtera yang sudah berjalan, untuk kemudian
 5

menyimpulkan hasil analisa dan mengidentifikasikan solusi untuk

mengembangkan sistem informsi penggajian karyawan berbasis web ini. Adapun
analisa-analisa yang dilakukan yaitu:
1. Analisa kebutuhan data.
2. Analisa kebutuhan proses.
3. Analisa kebutuhan konfigurasi.
4. Analisa kebutuhan jaringan.

1.6.3 Tahap Perancangan (Design)

Tahap ini dikerjakan apabila tahap analisis sistem telah terpenuhi.
Kegiatan-kegiatan pada tahap perancangan antara lain :
1. Merancang gambaran DFD yang ada pada sistem dimana nantinya
digunakan untuk menggambarkan desain alur input-output dari sistem
tersebut.
2. Merancang gambaran ERD dan konseptual database yang ada pada
sistem dimana nantinya digunakan untuk menggambarkan relasi-relasi
antara tabel pada database sistem.
3. Merancang struktur data dari database yang nantinya akan digunakan
sistem untuk menyimpan ataupun mengelola data-data.
4. Menyusun desain antarmuka sistem dengan menentukan menu-menu,
form-form dan tampilan lainnya yang perlu dibuat.

1.6.4 Tahap Pengembangan (Development/Coding)

Pada tahap ini dilakukan pengembangan sistem dari hasil kegiatan-
kegiatan yang dilakukan pada tahap desain. Kegiatan-kegiatan itu meliputi :
1. Membuat tampilan program dan halaman-halaman yang ada pada sistem
sesuai desain yang telah dibuat saat tahap perancangan
2. Membuat database dan table-tabel yang ada didalamnya, kemudian
menentukan relasi tabel sesuai desain yang telah dibuat.
3. Menghubungkan database dengan sistem yang telah dibuat sebelumnya
sehingga data pada database dapat terlihat pada sistem.
4. Melakukan konfigurasi pada sistem sesuai data yang didapat agar sistem
bekerja sesuai kebutuhan pada Koperasi.
 6

1.6.5 Tahap Pengujian/Testing

Pada tahap ini dilakukannya pengujian terhadap sistem. Pengujian
dilakukan dengan menggunakan metode blackbox testing, dimana penulis
melakukan input data dan melihat apakah output-nya sudah sesuai dengan
proses yang diinginkan atau belum. Jika masih ditemukan kesalahan pada hasil
proses sistem maka bisa dilakukan perubahan terhadap rincian logika-logika dan
statement-statement yang salah dan segera memperbaikinya.
 BAB II
TINJAUAN PUSTAKA

2.1 Sistem Informasi

Sistem informasi adalah sekumpulan komponen pembentuk sistem yang
mempunyai keterkaitan antara satu komponen dengan komponen lainnya yang
bertujuan menghasilkan suatu informasi dalam suatu bidang tertentu [1]. dilihat
dari namanya sistem informasi merupakan bagian dari sistem dan informasi yang
masing-masing memiliki makna tersendiri.

2.1.1 Pengertian Sistem

Sistem adalah suatu kesatuan usaha yang terdiri dari bagian-bagian yang
berkaitan satu sama lain yang berusaha mencapai suatu tujuan dalam suatu
lingkungan kompleks [2]. Pengertian tersebut mencerminkan adanya beberapa
bagian dan hubungan antarbagian, ini menunjukan kompleksitas dari sistem
yang meliputi kerja sama antar bagian yang interpenden satu sama lain. Namun
Sistem juga mempunyai beberapa pengertian tergantung dari sudut pandang
mana kata tersebut didefinisikan. Secara garis besar ada dua kelompok
pendekatan yaitu:
1. Pendekatan sistem yang lebih menekan pada elemen-elemen atau
kelompoknya yang dalam hal ini sistem itu didefinisikan sebagai “suatu
jaringan kerja dari prosedur-prosedur yang saling berhubungan,
berkumpul bersama-sama untuk melakukan suatu kegiatan atau untuk
menyelesaikan suatu aturan tertentu”.
2. Pendekatan sistem sebagai jaringan kerja dan prosedur yang lebih
menekankan urutan operasi di dalam sistem. Prosedur (procedure)
didefinisikan oleh Richard F. Neushi sebagai “urutan operasi kerja (tulis
menulis), yang biasanya melibatkan beberapa orang didalam satu atau
lebih departemen, yang diterapkan untuk menjamin penanganan yang
seragam dari transaksi bisnis yang terjadi” [3].
Untuk memahami atau mengembangkan suatu sistem, maka perlu
membedakan unsur-unsur dari sistem yang membentuknya. Berikut adalah
karakteristik sistem yang dapat membedakan suatu sistem dengan sistem
lainnya :

7
 8

1. Batasan (boundary). Penggambaran dari suatu elemen atau unsur mana

yang termasuk di dalam sistem dan mana yang di luar sistem.
2. Lingkungan (environment). Segala sesuatu di luar sistem, lingkungan
yang menyediakan asumsi, kendala, dan input terhadap suatu sistem.
3. Masukan (input). Sumber daya (data, bahan baku, peralatan, energi) dari
lingkungan yang dikonsumsi dan dimanipulasi oleh suatu sistem.
4. Keluaran (output). Sumber daya atau produk (informasi, laporan,
dokumen, tampilan layer komputer, barang jadi) yang disediakan untuk
lingkungan sistem oleh kegiatan dalam suatu sistem.
5. Komponen (component). Kegiatan-kegiatan atau proses dalam suatu
sistem yang mentransformasikan input menjadi bentuk setengah jadi
(output). Komponen ini bisa merupakan subsistem dari sebuah sistem.
6. Penghubung (interface). Tempat dimana komponen atau sistem dan
lingkungannya bertemu atau berinteraksi.
7. Penyimpanan (storage). Area yang dikuasai dan digunakan untuk
penyimpanan sementara dan tetap dari informasi, energi, bahan baku,
dan sebagainya. Penyimpanan merupakan suatu media penyangga di
antara komponen tersebut bekerja dengan berbagai tingkatan yang ada
dan memungkinkan komponen yang berbeda dari berbagi data yang
sama.

2.1.2 Pengertian Informasi

Informasi merupakan bagian dari data. Data sendiri merupakan definisi
dari sekumpulan nilai yang diperoleh dari pengamatan (observasi) suatu objek.
Data dapat berupa angka dan dapat pula merupakan lambang atau sifat [4].
Informasi adalah data yang sudah diolah menjadi sebuah bentuk yang berarti
bagi pengguna yang bermanfaat dalam pengambilan keputusan saat ini atau
mendukung sumber informasi [5]. Data belum memiliki nilai manfaat sedangkan
informasi sudah memiliki nilai manfaat. Informasi dikatakan bernilai bila
manfaatnya lebih besar dibanding biaya untuk mendapatkannya. Informasi yang
berkualitas haruslah memiliki 3 kriteria, yaitu:
1. Akurat (accurate)
Informasi harus bebas dari kesalahan, tidak bias ataupun menyesatkan.
Akurat juga berarti bahwa informasi itu harus dapat dengan jelas
mencerminkan maksudnya.
 9

2. Tepat pada waktunya (timeliness)

Informasi yang datang pada penerima tidak boleh terlambat. Di dalam
pengambilan keputusan, informasi yang sudah usang tidak lagi bernilai.
Bila infromasi datang terlambat sehingga pengambilan keputusan
terlambat dilakukan, hal itu dapat berakibat fatal bagi perusahaan.
3. Relevan (relevance)
Informasi yang disampaikan harus mempunyai keterkaitan dengan
masalah yang dibahas dengan informasi tersebut. Informasi harus
bermanfaat bagi pemakainya. Di samping karakteristik, nilai informasi
juga ikut menentukan kualitasnya. Nilai informasi (value of information)
ditentukan oleh dua hal, yaitu manfaat dan biaya untuk mendapatkannya.
Suatu informasi dikatakan bernilai bila manfaatnya lebih besar dibanding
biaya untuk mendapatkannya.

2.2 Koperasi
Koperasi merupakan perkumpulan orang yang bertujuan memenuhi
kebutuhan lahiriah (kesejahteraan) para anggotanya. Koperasi juga sekaligus
sebagai gerakan ekonomi rakyat yang berdasarkan asas kekeluargaan [6].
Gerakan koperasi adalah kesukarelaan organisasi koperasi dan kegiatan
perkoperasian yang bersifat terpadu menuju tercapainya cita-cita bersama
koperasi.
1. Tujuan koperasi
Tujuan koperasi adalah meningkatkan kesejahtraan anggota pada
khususnya dan masyarakat pada umumnya. Koperasi juga ikut
membangun tatanan perekonomian nasional, serta mewujudkan
masyarakat yang maju, adil, dan makmur berlandaskan Pancasila dan
Undang-Undang Dasar 1945.
2. Fungsi Koperasi
Fungsi koperasi untuk membangun dan mengembangkan potensi serta
kemampuan ekonomi anggota pada khususnya dan masyarakat pada
umumnya. Untuk meningkatkan kesejahteraan ekonomi dan sosial.
Koperasi berperan aktif dalam mempertinggi kualitas kehidupan manusia
dan masyarakat, memperkokoh perekonomian nasional dengan koperasi
sebagai sokogurunya.
 10

3. Prinsip Koperasi
Koperasi yang merupakan bagian dari kegiatan dalam bidang ekonomi,
mempunya prinsip yaitu : keanggotaan bersifat sukarela dan terbuka,
pengelolaan dilakukan secara demokratis dan terakhir, pembagian SHU
dilakukan secara adil sebanding dengan besarnya jasa usaha masing-
masing anggota.
Organisasi koperasi terdiri dari rapat anggota, pengurus, dan pengawas.
Kekuasaan tertinggi dalam koperasi adalah rapat anggota. Rapat tersebut
dihadiri oleh anggota yang pelaksanaannya telah diatur dalam anggaran dasar.
Rapat anggota dilaksanakan paling sedikit sekali setahun. Pengesahaan
pertanggungjawaban pengurus dan pengawas paling lambat 6 bulan setelah
tahun buku lampau. Persyaratan, tata cara, dan tempat penyelenggaraan rapat
anggota dan rapat anggota luar biasa diatur dalam anggaran dasar.
Tugas pengurus koperasi mempunyai tugas dan wewenang. Pengurus
dipilih dari dan oleh anggota dalam rapat anggota yang merupakan pemegang
kuasa rapat anggota. Masa jabatan pengurus paling lama lima tahun. Adapun
tugas pengurus meliputi:
1. Mengelola koperasi dan usahanya.
2. Menggunakan rancangan kerja RAB.
3. Menyelenggarakan RAT.
4. Mengajukan laporan keuangan dan pertanggungjawaban.
5. Menyelanggarakan perbukuan keuangan dan inventaris secara tertib.
6. Memelihara daftar buku anggota dan pengurus.
Modal koperasi terdiri dari modal sendiri dan modal pinjaman. Modal
sendiri dapat berasal dari :
1. Simpanan pokok,
2. Simpanan wajib,
3. Dana cadangan, dan
4. Hibah
Modal pinjaman dapat berasal dari :
1. Anggota,
2. Koperasi lainnya,
3. Bank dan lembaga keuangan lainnya,
4. Penerbit Obligasi dan surat hutang lainnya, dan
5. Sumber lain yang syah.
 11

2.3 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) yaitu salah satu alat dalam perancangan
sistem yang menggunakan simbol-simbol untuk menggambarkan aliran data
melalui serangkaian proses yang saling berhubungan. DFD merupakan alat yang
cukup popular sekarang ini, karena dapat menggambarkan arus data didalam
sistem dengan terstruktur dan jelas.Lebih lanjut DFD juga merupakan
dokumentasi yang baik [7].
Dari beberapa definisi di atas, maka dapat disimpulkan Data Flow Diagram
adalah suatu metode yang digunakan untuk menggambarkan atau membuat
suatu model dari input, output serta proses transformasinya pada suatu sistem
sehingga sistem tersebut mudah dipahami.
Adapun langkah-langkah dalam membuat data flow diagram dibagi
menjadi tiga tahap atau tingkatan, yaitu sebagai berikut.
1. Diagram konteks
Diagram ini dibuat untuk menggambarkan sumber serta tujuan data yang
akan diproses atau dengan kata lain diagram tersebut digunakan untuk
menggambarkan sistem secara umum/global dari keseluruhan sistem
yang ada.
2. Diagram nol
Diagram ini dibuat untuk menggambarkan tahapan proses yang ada
didalam diagram konteks, yang penjabarannya lebih terperinci.
3. Diagram Detail
Diagram ini dibuat untuk menggambarkan arus data secara lebih
mendetail lagi dari tahapan proses yang ada di dalam diagram nol.
Simbol-simbol yang digunakan dalam pembuatan DFD adalah sebagai
berikut.

Tabel 2. 1 Simbol data flow diagram (DFD)

No Simbol Keterangan
Merupakan Entitas yang berada pada
lingkungan luar sistem yang dapat
berupa orang, organisasi atau sistem
1
lainnya yang berada di lingkungan
Entitas External luarnya yang akan memberikan input
atau menerima output dari sistem.
 12

Aliran data ini mengalir diantara proses

(process), simpanan data (data store)
dan kesatuan luar (External entity).
2
Aliran data ini menunjukkan arus dari
Aliran Data data yang dapat berupa masukan untuk
sistem atau hasil dari proses sistem.
Merupakan kegiatan yang dilakukan
oleh orang, mesin atau komputer dari
3 hasil suatu aliran data yang masuk ke
dalam proses untuk dihasilkan aliran
Proses data yang akan keluar dari proses.
Merupakan penyimpan data yang dapat
berupa Suatu file atau basis data di
sistem komputer, Suatu arsip atau
4
catatan manual, Suatu tabel acuan
Data Store manual, ataupun Suatu agenda atau
buku.

2.4 Entity Relationship Diagram (ERD)

Entity Relationship Diagram (ERD) ialah sebuah pemodelan untuk
mendesain database yang baik. Karena tanpa ERD ini bisa dipastikan proses
pembuatan database berjalan lama dan tidak teratur. Pada saat mendesain
database yang harus diperhatikan ialah membuat relasi-relasi yang benar
diantara tabel. Proses desain database cukup menghabiskan waktu yang lama
jika databasenya besar. Pendokumentasian desain database mutlak harus
dilakukan dengan baik agar mudah didalam pengembangan atau perbaikan
nantinya [8].
Pada pemodelan ERD, obyek dasar yang ada di dunia nyata diwakili oleh
suatu entity. Dimana setiap entity memiliki sifat-sifat tertentu yang disebut
attribute seperti Nama, Jenis Kelamin, dan Alamat. Entity digambarkan sebagai
suatu belah ketupat dan attribute digambarkan sebagai persegi panjang.
Adapun symbol-simbol yang digunakan dalam penggambaran ERD yaitu
sebagai berikut.
 13

Tabel 2. 2 Simbol entity relationship diagram (ERD)

No Simbol Keterangan

Merupakan presentasi dari hampir

1 semua informasi gabungan yang harus
dipahami oleh perangkat lunak.
Objek Data

Merupakan elemen dari objek data

2 yang berfungsi mendeskripsikan
karakter objek data tersebut.
Atribut
Garis/Link, sebagai penghubung antara
3 himpunan relasi dan himpunan entitas
Link
dengan atributnya.

Objek data dapat berhubungan satu

4 sama lain. Hubungan diwakili dengan
menggunakan intan.
Hubungan

2.5 Kardinalitas
Kardinalitas relasi menunjukan hubungan yang terjadi dari entitas yang
satu dengan entitas yang lain dan begitu juga sebaliknya. ERD memiliki 3 macam
kardinalitas relasi. Table kardinalitas relasi dari ERD bisa dilihat pada table
sebagai berikut [9].

Tabel 2. 3 Kardinalitas Relasi ERD

Tingkat hubungan satu ke satu

merupakan kejadian dimana pada
1 entitas pertama hanya mempunyai satu
hubungan dengan satu kejadian pada
entitas yang kedua ataupun sebaliknya.

Kardinalitas Satu ke Satu

(One to One)
 14

Tingkat hubungan satu ke banyak

sama artinya dengan banyak ke satu.
Hal itu tergantung dari arah mana
hubungan tersebut dilihat. Dalam
tingkat ini merupakan kejadian dimana
pada satu kejadian pada entitas
2
pertama bisa mempunyai banyak
hubungan dengan kejadian pada
entitas yang kedua. Sebaliknya satu
Kardinalitas Satu ke kejadian pada entitas kedua bisa
Banyak (One to Many) mempunyai banyak hubungan dengan
kejadian pada entitas yang pertama.
Tingkat hubungan banyak ke banyak
terjadi jika tiap kejadian pada sebuah
entitas akan mempunyai banyak
hubungan dengan kejadian pada
entitas lainnya. Banyak kejadian pada
3 entitas yang pertama dapat mempunyai
banyak hubungan pada kejadian pada
entitas kedua. Sebaliknya Banyak

Kardinalitas Banyak ke kejadian pada entitas yang kedua dapat

Banyak (Many to Many) mempunyai banyak hubungan pada

kejadian pada entitas pertama

2.6 Pemrograman Berbasis Web

Untuk membangun sebuah situs web diperlukan script/kode
pemrograman berbasis web salah satunya adalah HTML. HTML adalah
kependekan dari Hyper Text Markup Language.Fasilitas Hypertext merupakan
metode yang menautkan (link) satu dokumen ke dokumen lain melalui suatu text.
HTML merupakan halaman yang berada pada suatu situs Internet atau Web.Jadi
suatu situs terdiri atas beberapa halaman HTML atau Web page [10].
HTML dapat disisipkan kode pemrograman seperti ASP, PHP, CGI
(Common Gateway Interface), JSP (Java Server Page). Dengan kode ini, web
yang tadinya bersifat statis dimungkinkan dapat berubah menjadi dinamis.Semua
kode pemrograman yang disisipkan pada HTML tersebut pada dasarnya
 15

merupakan server-side script yaitu kode pemrograman yang dijalankan untuk

menangani pengolahan basis data, tampilan halaman web dan proses-proses
yang sifatnya rahasia.Sedangkan pada sisi client, kode yang banyak digunakan
saat ini misalnya JavaScript dan VbScript, biasanya pemrograman pada sisi
client digunakan untuk validasi masukkan, tampilan halaman web, animasi dan
lain-lainnya.

2.7 PHP
PHP singkatan dari, Hypertext Preprocessor yaitu bahasa pemrograman
web server-side yang bersifat open source. PHP merupakan script yang
terintegrasi dengan HTML dan berbeda pada server (server side HTML
embedded scripting) [11]. PHP adalah script yang digunakan untuk membuat
halaman web yang dinamis. Dinamis berarti halaman yang akan ditampilkan
dibuat saat halaman itu diminta oleh client. Mekanisme ini menyebabkan
informasi yang diterima client selalu yang terbaru atau up to date.
Dalam pembuatan sebuah sistem informasi website, PHP merupakan
bahasa yang banyak digunakan karena sifatnya yang mampu membuat sebuah
website menjadi dinamis atau mampu dikelola oleh client. Selain itu PHP
merupakan kode- kode yang terselip diantara HTML dan PHP tidak akan terbaca
pada sisi client melainkan PHP hanya menampilkan hasil pemrosesan yang
dilakukannya berupa kode-kode HTML, CSS, dan masih banyak lagi yang dapat
ditampilkan pada sisi client.
Proses kerja atau urutan langkah kerja PHP mulai dari client ke web
server dijelaskan seperti dibawah ini.
1. User meminta request via web browser ke web server dengan perantara
kode-kode PHP.
2. Web server akan mengenali sebagi file PHP.
3. File PHP dikirim ke engine PHP.
4. Output (hasil) dari proses di dalam engine PHP dalam bentuk plain HTML
(HTML biasa).
5. Dokumen hasil eksekusi dikirim balik ke web server.
6. Web server meneruskan ke web browser sebagai respons dari request
untuk ditampilkan dalam bentuk kode-kode HTML, CSS, dll yang dapat
ditampilkan di sisi client.
 16

2.8 CSS
CSS (Cascading style sheet) adalah suatu bahasa yang dikhususkan
untuk mengatur gaya atau layout sebuah halaman web[12]. Pada umumnya CSS
dipakai untuk mendefinisikan format tampilan halaman web yang dibuat dengan
menggunakan bahasa pemrograman HTML dan XHTML.CSS menggunakan
kode – kode untuk format style pada elemen HTML atau bias membuat style baru
yang biasa disebut class.
CSS dapat merubah besar kecilnya text/font, mengganti warna font, atau
dapat pula mengganti warna background pada sebuah halaman HTML,
mengatur border pada tabel, dan masih banyak yang dapat dilakukan dengan
CSS. Untuk menjadikan CSS sebagai rujukan pada halaman HTML hanya
dibutuhkan satu baris kode saja. Jika ingin merubah tampilan atau style pada
websitetidak perlu merubah kode yang terdapat pada file HTMLyang perlu
dilakukan hanya mengganti baris kode yang terdapat pada CSS-nya saja.
Berikut ini adalah beberapa alasan mengapa developerweb
menggunakan CSS untuk memberikan style pada web yang dibuatnya yaitu :
1. CSS dapat memecahkan permasalahanuntuk keragaman style pada
suatu file HTML
2. CSS mempermudah dan meringankan pekerjaan dalam memformat
seluruh file HTML.
3. Multiple style akan tersimpan pada satu dokumen.

2.9 Javascript
Javasript merupakan bahasa scripting yang popular di internet dan dapat
bekerja pada sebagian besar browser seperti Internet explorer (IE), mozila
firefox, netscape dan opera [13]. Javascript dapatdisisipkan pada halaman web
dengan menggunakan tag SCRIPT. Beberapa hal tentang javascript:
1. Javascript merupakan sebuah bahasa scripting.
2. Bahasa scripting merupakan bahasa pemrograman yang ringan.
3. Javascript merupakan baris kode yang dijalankan di web browser.
4. Javascript biasanya disisipkan (embedded) dalam halaman HTML.
5. Javascript merupakan bahasa interpreter (yang berarti skrip diesekusi
tanpa proses kompilasi).
6. Javascript bersifat free dapat digunakan tanpa harus membayar lisensi.
 17

2.10 Adobe Dreamweaver CS 5

Adobe Dreamweaver CS 5 merupakan program editor yang digunakan
untuk mendesain, editing dan mengembangkan web untuk berbagai macam
editor baik html,php,java,css dan lain-lain. Adobe dreamweaver cs 5 merupakan
program keluaran Adobe systems yang banyak digunakan oleh developer atau
pengembang web karena fitur - fitur serta kemudahan yang diberikannya. Selain
itu adobe dreamweaver juga memiliki integrasi dengan program adobe lainya
seperti adobe flash yang digunakan untuk membuat animasi web hal ini sangat
mendukung pengembangan web terutama dari desain.

2.11 Xampp
Xampp adalah sebuah paket software yang di dalamnya terdapat web
server Apache, database MySQL dan PHP intepreter. Xampp berperan sebagai
web server pada komputer.Xampp juga dapat disebut CPanelserver virtual, yang
dapat membantu melakukan preview sehingga dapat membantu untuk
melakukan preview sehingga dapat memodifikasi website tanpa harus online
atau terakses dengan internet [14].
Pada pembuatan sistem informasi peminjaman perangkat jaringan ini
menggunakan software Xampp versi 2.6, dengan digunakannya Xampp dapat
mempermudah proses pembuatan website sistem informasi peminjaman
perangkat jaringan ini dikarenakan semua program pendukung seperti apache
web server, database MySQL sudah terdapat dalam paket instalasi sehingga
tanpa perlu install satu persatu program dan juga proses preview yang sangat
memudahkan untuk proses desain.

2.12 Web Server Apache

Sebelum membahas web server apache perlu diketahui terlebih dahului
yang dimaksud dengan web server, web server merupakan perangkat lunak yang
mengelola (mengatur) permintaan user dari browser dan hasilnya dikembalikan
kembali ke browser [15]. Apache merupakan salah satu web server yang umum
digunakan, web server apache bisa dijalankan pada banyak sistem operasi
seperti Unix, Linux, Solaris, Digital Unix, BeOS, BS2000/OSD, AmigaOS dan
windows 2000. Apache digunakan untuk memperbolehkan computer yang bukan
sebagai web server menjadi web server dan digunakan untuk pembangunan
 18

sistem.Web server perlu dipasang terlebih dahulu sebelum kode PHP dibaca dan
diproses.

2.13 Database MySQL

MySQL adalah salah satu software sistem manajemen database (DBMS)
Stuctured Query Language (SQL) yang bersifat open source . SQL adalah
bahasa standar untuk mengakses database dan didefinisikan dengan standar
ANSI/ISO SQL [16]. MySQL mempunyai beberapa sifat antara lain adalah
sebagai berikut :
1. MySQL merupakan DBMS (Database Management System)
2. Database adalah kumpulan data yang terstruktur, agar dapat mengakses
dan mengolah dibutuhkan system manajemen database seperti MySQL
server.
3. MySQL merupakan RDBMS (Relational Database Management System)
4. Database relasional menyimpan pada tabel – tabel yang terpisah, halini
menambah kecepatan dan fleksibilitas.
5. MySQL merupakan software open source.
6. MySQL mempunyai performa yang sangat cepat dapat dipercaya dan
mudah digunakan.
 BAB III
ANALISIS DAN PERANCANGAN SISTEM

Tahap analisis dan perancangan sistem merupakan tahapan awal dalam

merancang sebuah sistem. Untuk membuat sistem yang baru, perlu diadakannya
pengamatan dan analisis terhadap sistem yang lama. Tujuan dari tahapan
analisis ini adalah mendapat suatu rancangan yang memiliki nilai dibandingkan
dengan rencana sebelumnya. Dari hasil analisis system maka akan diperoleh
gambaran mengenai sistem yang akan dirancang sesuai dengan kebutuhan
pengguna / user. Untuk mebuat sebuah sistem baru maka perlu dilakukan
pembuatan DFD, ERD, konseptual database, struktur table, dan design interface
terlebih dahulu. Dengan adanya rancangan ini, nantinya akan memudahkan
dalam pembuatan sistem yang baru. Agar program ini dapat berjalan dengan
baik dan tentunya sesuai harapan.

3.1 DFD
DFD digunakan untuk menggambarkan aliran data yang ada pada sistem
berupa input, output yang terdapat pada entitas dan proses begitu pula database
yang digunakan

3.1.1 Diagram Konteks

Diagram konteks merupakan gambaran paling umum dimana hanya
menggambarkan input-output dari sistem yang akan dibuat. Dalam diagram
konteks berikut dapat dilihat bahwa sistem nantinya akan memiliki beberapa
entity yaitu admin dan karyawan. DFD Konteks dapat dilihat pada Gambar 3.1.

19
 20

Data_karyawan Data_username_dan_password
Info_kelola_karyawan Info_update_username_dan_password

Data_absen Data_download_slip
Info_kelola_absen Info_data_slip
Data_penggajian Admin Data_login
Info_penggajian Info_login

SI Manajemen Gaji
Koperasi Wanita
Sri Artha Sejahtera

Info_login
Data_login
Info_update_profil Admin Info_data_slip
Data_profil Data_download_slip

Gambar 3. 1 Diagram Konteks Sistem

3.1.2 Level 0
Pada DFD level 0 dijabarkan secara rinci proses-proses yang terdapat
pada diagram konteks sistem sebelumnya. Dalam DFD level 0, terdapat 2 buah
entitas, serta terdapat 6 buah proses, dan juga terdapat 4 buah data store. DFD
Level 0 dapat dilihat pada Gambar 3.2.
 21

Data_login
Info_login P1 Data_admin Admin
Data_login Login
Info_login
Data_karyawan

Data_profil P2 Data_karyawan
Karyawan Info_update_profil Update Profil Data_karyawan

Karyawan

P3
Data_username_dan_password Data_admin
Info_update_username_dan_password
Update Login Data_admin
Admin

Data_karyawan Data_karyawan
P4
Info_kelola_karyawan Data_karyawan
Kelola Data Data_absen
Master Data_absen

Absen
Data_absen
Info_kelola_absen
Admin Data_penggajian
P5 Data_karyawan

Info_penggajian
Proses Data_absen
Penggajian Data_gaji

Data_download_slip
P6
Info_data_slip
Data_download_slip
Download Slip Data_gaji Gaji
Info_data_slip
Gaji

Gambar 3. 2 DFD Level 0

3.1.3 Level 1 P4 Kelola Data Master

DFD level 1 ini merupakan DFD tingkat lanjut dari DFD level 0. Pada level
1 P4 kelola data master ini dibagi lagi menjadi 2 proses serta melibatkan 1
entitas dan 2 data store. DFD Level 1 P4 kelola data master dapat dilihat pada
Gambar 3.3.
 22

P4.1
Data_karyawan Data_karyawan
Info_kelola_karyawan
Kelola Data_karyawan
Karyawan
Karyawan

Admin

Info_kelola_absen P4.2 Data_absen

Absen
Data_absen Kelola Absen Data_absen

Gambar 3. 3 DFD Level 1 P4 Kelola Data Master

3.1.4 Level 2 P4.1 Kelola Karyawan

DFD level 2 ini merupakan DFD tingkat lanjut dari DFD level 1 P4 kelola
data master. Pada level 2 P4.1 kelola karyawan ini dibagi lagi menjadi 2 proses
serta melibatkan 1 entitas dan 1 data store. DFD Level 2 P4.1 kelola karyawan
dapat dilihat pada Gambar 3.4.

P4.1.1
Data_karyawan Data_karyawan
Info_tambah_karyawan
Tambah Data_karyawan
Karyawan

Admin Karyawan

P4.1.2
Info_update_karyawan Data_karyawan
Data_karyawan
Update Data_karyawan
Karyawan

Gambar 3. 4 DFD Level 2 P4.1 Kelola Karyawan

 23

3.1.5 Level 2 P4.1 Kelola Absen

DFD level 2 ini merupakan DFD tingkat lanjut dari DFD level 1 P4 kelola
data master. Pada level 2 P4.2 kelola absen ini dibagi lagi menjadi 2 proses serta
melibatkan 1 entitas dan 1 data store. DFD Level 2 P4.2 kelola absen dapat
dilihat pada Gambar 3.5.

P4.2.1
Data_absen Data_absen
Info_tambah_karyawan
Tambah Data_absen
Absen

Admin Absen

Info_update_absen P4.2.2 Data_absen

Data_absen Update Absen Data_absen

Gambar 3. 5 DFD Level 2 P4.2 Kelola Absen

3.2 ERD
Berikut ini merupakan ERD sistem manajemen gaji pada koperasi wanita
sri artha sejahtera yang akan dibuat. Disini terdapat 3 tabel yang saling berelasi
diantaranya Karyawan, Absen, dan Gaji. Gambar ERD sistem manajemen gaji
berbasis web responsive ini dapat dilihat pada Gambar 3.6.
 24

Status No

Jam_out Nik
Gaji
Jam_in Tgl

No_tlp Id_user

Email Nik

Pendidikan Pass

Jk Nama

Status Karyawan Jabatan

Awal_kerja Agama

Gaji_pokok Tempat_lahir

Tunjangan lvl Alamat Tgl_lahir

Jamsostek no

Terlambat Absen nik

Lembur Tgl_penggajian

Uang_transport Tgl_proses

Uang_makan Jumlah_hadir Tunjangan Gaji_pokok

Gambar 3. 6 ERD Sistem

3.3 Konseptual Database

Berikut ini merupakan ERD sistem manajemen gaji pada koperasi wanita
sri artha sejahtera. Pada penjabaran Konseptual Database disini dijabarkan
seluruh table yang saling berelasi dan yang tidak berelasi. Pada konseptual
sistem manajemen gaji terdapat 4 tabel. gambar dapat dilihat pada Gambar 3.7
Konseptual Database Sistem.
 25

Admin Absen
Username varchar(10) PK No int PK
Password varchar(20) nik varchar(15) FK
lvl int tgl date N
Jam_in time
Jam_out time
Status int

Gaji Karyawan
No int PK N 1 Id_user varchar(15) PK 1
Nik varchar(15) FK Nik varchar(15)
Tgl_penggajian date Pass varchar(20)
Tgl_proses date Nama varchar(100)
Gaji_pokok int Jabatan varchar(30)
Tunjangan varchar(15) Agama varchar(15)
Jumlah_hadir int Tempat_lahir varchar(30)
Uang_makan int Tgl_lahir date
Uang_transport int Alamat text
Lembur int No_tlp varchar(15)
Terlambat int Email varchar(100)
Jamsostek int Pendidikan varchar(15)
Jk int
Status int
Awal_kerja date
Gaji_pokok int
Tunjangan int
lvl int

Gambar 3. 7 Konseptual Sistem

3.4 Struktur Tabel

Dalam pembuatan sistem manajemen gaji pada koperasi wanita sri artha
sejahtera, menggunakan sebuah database yang diberi nama db_penggajian
yang memiliki 4 buah table yang saling ber relasi anatara satu dengan yang
lainya yaitu : absen, admin, gaji, dan karyawan. Ke empat table tersebut memiliki
struktur data table sebagai berikut:

3.4.1 Struktur Data Tabel absen

Berikut ini merupakan struktur data dari tabel absen
Nama Tabel : absen
Primary Key : no
Foreign Key : nik

Tabel 3. 1 Struktur data Tabel absen

NO Nama Field Tipe Panjang Data Keterangan
1 no Int - Primary Key
 26

2 nik Varchar 15 Foreign Key

3 tgl Date - -
4 jam_in Time - -
5 jam_out Time - -
6 status Int - -

3.4.2 Struktur Data Tabel admin

Berikut ini merupakan struktur data dari tabel admin
Nama Tabel : admin
Primary Key : username
Foreign Key : -

Tabel 3. 2 Struktur data Tabel admin

NO Nama Field Tipe Panjang Data Keterangan
1 username Varchar 10 Primary Key
2 password Varchar 20 -
3 lvl Int - -

3.4.3 Struktur Data Tabel gaji

Berikut ini merupakan struktur data dari table gaji
Nama Tabel : gaji
Primary Key : no
Foreign Key : nik

Tabel 3. 3 Struktur data Tabel gaji

NO Nama Field Tipe Panjang Data Keteranga
1 no Int - Primary Key
2 nik Varchar 15 Foreign Key
3 tgl_penggajian Date - -
4 tgl_proses Date - -
5 gaji_pokok Int - -
6 tunjangan varchar 15 -
7 jumlah_hadir Int - -
8 uang_makan Int - -
 27

9 uang_transport Int - -
10 lembur Int - -
11 terlambat Int - -
12 jamsostek Int - -

3.4.4 Struktur Data Tabel karyawan

Berikut ini merupakan struktur data dari table karyawan
Nama Tabel : karyawan
Primary Key : id_user
Foreign Key : -

Tabel 3. 4 Struktur data Tabel karyawan

NO Nama Field Tipe Panjang Data Keteranga
1 id_user Varchar 15 Primary Key
2 nik Varchar 15 -
3 pass Varchar 20 -
4 nama Varchar 100 -
5 jabatan Varchar 30 -
6 agama Varchar 15 -
7 tempat_lahir Varchar 30 -
8 tgl_lahir Date - -
9 alamat Text - -
10 no_tlp Varchar 15 -
11 email Varchar 100 -
12 pendidikan Varchar 15 -
13 jk Int - -
14 status Int - -
15 awal_kerja Date - -
16 gaji_pokok Int - -
17 tunjangan Int - -
18 lvl Int - -
 28

3.5 Design Interface

Desain interface adalah desain awal yang dibuat, sebelum
diimplementasikan ke website yang sebenarnya. Desain interface yang akan
ditampilkan adalah desain tampilan admin, dan karyawan. Berikut
penjabarannya.

3.5.1. Tampilan Login

Pada desain login terdapat form yang nantinya digunakan oleh admin
maupun karyawan untuk masuk ke dalam sistem. Pada form login akan dibuat
dua input username dan password. tampilan bisa dilihat pada gambar 3.8.

Logo Sistem Informasi Penggajian

Koperasi Wanita Sri Artha Sejahtera

LOGIN
Input Username

Input Password

Tombol Login

Gambar 3. 8 Tampilan Login

3.5.2. Tampilan Sistem

Desain tampilan sistem merupakan desain keseluruhan dari sistem mulai
dari header, menu, konten yang akan dibuat. Desain dari tampilan sistem bisa
dilihat pada gambar 3.9.
 29

Logo
Sistem Informasi Penggajian Menu Drop
Koperasi Wanita Sri Artha Sejahtera User

Menu Menu Menu

Titel konten

Konten

Gambar 3. 9 Tampilan Sistem

3.5.3. Halaman Home

Desain halaman home merupakan halaman yang nnatinya digunakan
sebagai halaman awal admin maupun karyawan. Untuk halaman admin akan
terdapat text selamat datang dan beberapa menu dibawahnya. Untuk karyawan
terdapat text selamat datang dan absensi terbaru dari karyawan tersebut. Desain
halaman home admin dan karyawan bisa dilihat pada gambar berikut.

Wellcome Text admin

Menu Menu Menu Menu

Gambar 3. 10 Halaman Home Admin

 30

Wellcome Text user

Row tanggal Row keterangan Row jam kerja

Tabel absensi user terbaru

Tombol lihat semua absen

Gambar 3. 11 Halaman Home Karyawan

3.5.4. Halaman Daftar Karyawan

Desain halaman daftar karyawan merupakan halaman yang nantinya
akan menampilkan daftar karyawan. Pada halaman ini juga terdapat input yang
digunakan untuk memfilter nama karyawan dan juga tombol tambah karyawan
baru. Halaman ini hanya digunakan oleh admin. Desain halaman daftar karyawan
bisa dilihat pada gambar 3.12.
 31

Titel konten

Tombol Tombol
Input cari nama karyawan
cari tambah

Row nama Row nik Row jabatan Row gaji Row action

Tabel daftar karyawan

Gambar 3. 12 Halaman Daftar Karyawan

3.5.5. Halaman Tambah Karyawan

Desain halaman tambah karyawan merupakan halaman yang nantinya
hanya digunakan oleh admin untuk menambahkan karyawan baru. Pada
halaman ini akan dibuat form dengan beberapa input dan select yaitu nama,
jabatan, tempat lahir, agama, tempat lahir, tanggal lahir, alamat, no tlp, email,
pendidikan, jenis kelamin, status, awal kerja, gaji pokok, dan tunjangan. Desain
halaman tambah karyawan bisa dilihat pada gambar 3.13.
 32

Titel konten

Input nama

Select jabatan V

Select agama V

Input tempat lahir

Tombol open
Input tanggal lahir kalender

Input alamat

Input no tlp

Input email

Input pendidikan

Select jenis kelamin V

Select status V

Tombol open
Input awal kerja kalender

Input gaji pokok

Input tunjangan

Tombol kembali Tombol simpan

Gambar 3. 13 Halaman Tambah Karyawan

3.5.6. Halaman Edit Karyawan

Desain halaman edit karyawan merupakan halaman yang nantinya hanya
digunakan oleh admin untuk merubah data karyawan. Pada halaman ini akan
dibuat form dengan beberapa input dan select yaitu nama, jabatan, tempat lahir,
agama, tempat lahir, tanggal lahir, alamat, no tlp, email, pendidikan, jenis
kelamin, status, gaji pokok, dan tunjangan. Desain halaman edit karyawan bisa
dilihat pada gambar 3.14.
 33

Titel konten

Input edit nama

Select edit jabatan V

Select edit agama V

Input edit tempat lahir

Tombol open
Input edit tanggal lahir kalender

Input edit alamat

Input edit no tlp

Input edit email

Input edit pendidikan

Select edit jenis kelamin V

Select edit status V

Input edit gaji pokok

Input edit tunjangan

Tombol kembali Tombol simpan

Gambar 3. 14 Halaman Edit Karyawan

3.5.7. Halaman Absensi

Desain halaman absensi merupakan halaman yang menampilkan daftar
absensi. Halaman absensi akan digunakan oleh admin dan karyawan. Untuk
halaman admin akan ditampilkan daftar absensi seluruh karyawan sesuai hari
yang bisa dikelola seperti input absen, edit absen, dan lihat detail seluruh absen
sesuai tanggal juga karyawan yang dipilih. Untuk halaman karyawan akan
ditampilkan daftar seluruh absensi bulan yang dipilih sesuai karyawan yang login
ke dalam sistem. Desain halaman absensi admin dan karyawan bisa dilihat pada
gambar berikut.
 34

Titel konten

Pilih kalender

Row tanggal Row keterangan Row jam kerja Row action

Tabel absensi
(absensi sesuai tanggal kalender yang dipilih)

Gambar 3. 15 Halaman Absensi bagian Admin

Titel konten

Pilih bulan kalender

Row tanggal Row keterangan Row jam kerja

Tabel absensi
(absensi tanggal kalender yang dipilih)

Gambar 3. 16 Halaman Absensi bagian Karyawan

 35

3.5.8. Halaman Detail Absensi

Desain halaman detail absensi merupakan halaman yang nantinya
digunakan oleh admin. Pada halaman ini menampilkan detail seluruh absen
karyawan yang dipilih dan juga sesuai bulan yang dipilih. Desain halaman detail
absensi bisa dilihat pada gambar 3.17.

Titel konten

Pilih bulan kalender

Row tanggal Row keterangan Row jam kerja

Tabel absensi
(absensi sesuai kayawan dan tanggal kalender yang dipilih)

Gambar 3. 17 Halaman Detail Absensi

3.5.9. Halaman Penggajian

Desain halaman penggajian merupakan halaman yang nantinya
digunakan oleh admin dan karyawan. Pada halaman admin akan menampilkan
daftar penggajian sesuai belun yang siap diproses dan hanya akan tampil pada
akhir bulan. Pada halaman karyawan akan ditampilkan seluruh daftar penggajian
yang telah diproses oleh admin. Pada halaman karyawan juga terdapat tombol
detail untuk melihat rincian dari gaji karyawan tersebut. Desain halaman
penggajian admin dan karyawan bisa dilihat pada gambar berikut.
 36

Titel konten

Text periode bulan penggajian

Row nama Row nik Row action

Tabel daftar karyawan

Tombol history penggajian

Gambar 3. 18 Halaman Penggajian Bagian Admin

Titel konten

Row tanggal proses Row tanggal periode Row action

Tabel daftar penggajian

Gambar 3. 19 Halaman Penggajian Bagian Karyawan

3.5.10. Halaman Proses Penggajian

Desain halaman proses penggajian merupakan halaman yang nantinya
akan digunakan oleh admin. Pada halaman proses penggajian ini nantinya akan
mencetak hasil rincian gaji dari karyawan yang dipilih berupa penambahan gaji
dan pengurangan gaji. Pada bagian bawah juga akan terdapat tombol proses
 37

yang akan menyimpan data ke database dan bisa dilihat kepada karyawan.
Desain halaman proses penggajian bisa dilihat pada gambar 3.20.

Titel konten

Nik

Nama

Periode bulan

Penambahan gaji

Gaji pokok

Tunjangan jabatan

Kehadiran

Uang makan

Uang transport

Uang lembur

Total pendapatan

Pengurangan gaji

Keterlambatan

Jamsostek

Total seluruh

Tombol Proses

Gambar 3. 20 Halaman Proses Penggajian

3.5.11. Halaman Detail Penggajian

Desain halaman detail penggajian merupakan halaman yang nantinya
digunakan oleh karyawan. Pada halaman ini akan menmpilkan daftar rincian gaji
dari karyawan tersebut berupa penambahan gaji dan pengurangan gaji. Desain
halaman detail penggajian bisa dilihat pada gambar 3.21.
 38

Titel konten

Tombol kembali Tombol download slip

Nik

Nama

Periode bulan

Penambahan gaji

Gaji pokok

Tunjangan jabatan

Kehadiran

Uang makan

Uang transport

Uang lembur

Total pendapatan

Pengurangan gaji

Keterlambatan

Jamsostek

Total seluruh

Gambar 3. 21 Halaman Detail Penggajian

3.5.12. Halaman Detail Profil

Desain halaman detail profil merupakan halaman yang nantinya
digunakan oleh karyawan. Pada halaman ini terdapat daftar profil dari karyawan
tersebut seperti nama, jabatan, tempat lahir, agama, tempat lahir, tanggal lahir,
alamat, no tlp, email, pendidikan, jenis kelamin, status, awal kerja, gaji pokok,
dan tunjangan. Desain halaman detail profil bisa dilihat pada gambar 3.22.
 39

Titel konten

nik

nama

agama

Tempat/tanggal lahir

alamat

no tlp

email

pendidikan

jenis kelamin

status

jabatan

tunjangan

awal kerja

gaji pokok

Gambar 3. 22 Detail Profil

 DAFTAR ISI

[1] Rajendra R. Sistem Informasi Inventory Dan Peminjaman Barang Pada

Laboratorium Program Studi Sistem Komputer. Undergraduate thesis.
Banda Aceh. Diponegoro University. 2013.

[2] Marimin, Tanjung H, Prabowo H. Sistem Informasi Manajemen Sumber

Daya Manusia. Jakarta. Grasindo. 2006. 1.

[3] Koniyo A, Kusrini. Tuntunan Praktis Membangun Sistem Informasi

Akuntansi dengan Visual Basic dan Microsoft SQL Server. Yogyakata.
Andi Offset. 2007. 5.

[4] Situmorang, Helmi S. Analisis Data untuk Riset Manajemen dan Bisnis.
Medan. USU Press. 2011. 1.

[5] Koniyo A, Kusrini. Tuntunan Praktis Membangun Sistem Informasi

Akuntansi dengan Visual Basic dan Microsoft SQL Server. Yogyakarta.
Andi Offset. 2007. 7.

[6] Ahman E, Indriani E. Membina Kompetensi Ekonomi untuk Kelas XII.

Bandung. Grafindo Media Pratama. 2007. 119.

[7] Marimin, Tanjung H, Prabowo, Haryo. Sistem Informasi Manajemen

Sumber Daya Manusia. Jakarta. Grasindo. 2006. Hal. 110.

[8] E. Sutanta. Basis Data dalam tinjauan konseptual Ed.1. Yogyakarta. Andi
Offset. 2011.

[9] Anhar. Panduan Menguasai PHP & Mysql Secara Otodidak. Jakarta.
Mediakita. 2010. 3.

[10] Wicaksono Y. Membangun Bisnis Online dengan Mambo. Jakarta. PT

Elex Media Komputindo. 2008.

[11] Anhar. Panduan Menguasai PHP & Mysql Secara Otodidak. Jakarta.
Mediakita. 2010. 3.

[12] Marimin, Tanjung H, Prabowo, Haryo. Sistem Informasi Manajemen

Sumber Daya Manusia. Jakarta. Grasindo. 2006.

[13] Kusrini M.KomTuntunan Praktis Membangun Sistem Informasi Akutansi

Dengan Visual Basic dan Microsoft SQL Server,Yogyakarta. C.V Andi
Offset. 2007.

[14] Kuswayatno L. Mahir Berkomputer. Bandung. Grafindo Media Pratama.

2006.

40
 41

[15] Sya’ban W. Build Your Blogger XML Template. Yogyakarta. C.V Andi
Offset. 2010.

[16] Supardi.Y. Web My Profile dengan Joomla 1.5.x. Jakarta. PT Elex Media
Komputindo. 2010.