LAPORAN WEB SISTEM INFORMASI KEPEGAWAIAN PROGART CO

MATA KULIAH PEMROGAMAN WEB LANJUT

Dosen Pengampu :
Rina Septiriana, ST, M.Cs

Penyusun:
Dhea Zarassita (4314122031)
Lutfia Rahma Riyadi (4314122008)

Program Studi Teknik Multimedia dan Jaringan

Jurusan Teknik Informatika dan Komputer
Depok
2016

a. DESKRIPSI APLIKASI DAN FITUR

Aplikasi berbasis website yang berjudul Sistem Informasi Kepegawaian ProgArt Co.,
merupakan aplikasi sistem informasi khusus pegawai perusahaan ProgArt Company. Aplikasi
ini dibangun dengan menggunakan beberapa bahasa pemrograman, yaitu HTML, PHP, CSS
dan JavaScript. Resource data pada aplikasi terdapat di Database ProgArt yang dibuat di
MySql, website akan terkoneksi pada database dan menampilkan data yang tersedia pada
database tersebut.
Aplikasi Sistem Informasi Kepegawaian ProgArt Co. terdiri dari dua subjek, yaitu admin
dan user. Admin bertugas dan berwenang menginput serta mengedit seluruh data pegawai
termasuk pemberian password awal bagi user/pegawai. User dapat melihat data pribadinya dan
mengedit data tertentu yang diizinkan (nama, password, jenis kelamin, tanggal lahir, alamat
dan tanggal masuk) jika terjadi kesalahan penginputan dari admin. User dapat menginput
weekly report atas pekerjaan yang dilakukan.
b. PERANCANGAN
a. Data Flow Diagram
Data Flow Diagram (DFD) Level 0

Admin
beranda, data pegawai,
input data, laporan, gaji
pegawai

login
hak akses
setup data
1
Login

beranda, data
pegawai, input data,
laporan, gaji pegawai

login

beranda

beranda

data pegawai

data pegawai

data pegawai

2
Olah Data

login

beranda

data diri
data diri

data diri

login
laporan

data diri, input

laporan, ubah
password

hak akses
data diri

beranda, data diri,

laporan, gaji diri

login

User

laporan

laporan
gaji
gaji

gaji

b. Entity-Relationship Diagram

Nama_Status

TMJ 4 Reg - Kelompok 5

Gaji

1. Dhea Zarassita
2. Lutfia Rahma Riyadi

Level

Nama_Jabat

ID_Peg

Nama_Bagian
Tgl_Masuk
Pegawai

Almt_Peg

Melakukan

ID_Peg
Login

Ttl_Peg

Pswd_Peg

Jnskel_Peg
Nama_Peg

ID_Peg
Pswd_Peg

ID_Status
Menulis

Memiliki

ID_Peg

Status

Nama_Status

Tjg_Status
Nama_Status

M
Laporan

ID_Lap

Tgl_Lap
Judul_Lap

Deskripsi_Lap

c. Sitemap

Homepage

Login

Beranda

Admin

Data
Pegawai

Delete

Edit

Input Data

Input
Laporan

User

Laporan

Delete

Logout

Edit

Data Diri

Edit Data
Pegawai

Ubah
Password

Laporan

Input
Laporan

C. IMPLEMENTASI

Style.css
Source code ini berisi css untuk mempercantik halaman-halaman web ProgArt Co.

Coding untuk wrapper di setiap halaman

CSS untuk mengatur header disetiap

halaman dengan posisi fixed yang tidak
akan bergerak jika halaman web discroll

CSS untuk mengatur bagian konten

web, dibuat relative sesuai dengan isi
yang ada ditiap halaman

CSS untuk mengatur font yang

digunakan diseluruh halaman web
yaitu Blogger Sans Medium

CSS untuk mengatur bagian menu wrap

yang ada ditiap halaman konten web

Halaman index.php

Ini merupakan halaman log ini. Admin dan user harus memasukkan id dan password untuk
mengakses Sistem Informasi Kepegawaian ProgArt Co..

CSS untuk membuat box di

bagian input

Form untuk input id dan password dari

user/admin, form menggunakan label.

Memanggil wrapper dari style.css

yang berisi hiasan untuk header,
content dan footer. Pemanggilan
ini dilakukan disemua halaman

ADMIN

Sign in ke halaman admin menggunakan

id dan password dari salah satu admin,
lalu dengan klik sign in akan masuk ke
halaman admin.

Halaman admin.php

Menampilkan gambar home.png

Button Input Data, Data Pegawai dan Laporan dibuat dari gambar yang saat diklik akan
melink ke halaman-halaman selanjutnya.

Header tulisan progart.co adalah link yang akan menghubungkan ke halaman beranda.
Sedangkan menu-menu dibuat dengan wrap menu yang sebelumnya sudah dibahas.

Inputdata_admin.php

Merupakan halaman yang menampilkan form untuk admin memasukkan data pegawai yang baru.

Dalam form ini digunakan table untuk merapihkan posisi form.

Terdapat inputan berupa teks, password, button dan text area.

Inputan data baru pada form,

otomatis akan tersimpan ke dalam
database table pegawai.

Data_peg.php

Merupakan halaman yang menampilkan form untuk admin melihat data pegawai yang terdapat di
dalam database.

Dalam form ini digunakan table untuk

menampilkan data pegawai yang terdapat
di database.

Delete_admin.php

Instruksi Delete dan Edit pada data

pegawai akan menghapus maupun
mengedit data pegawai yang dipilih.

Edit_admin.php

Merupakan halaman yang menampilkan form untuk admin mengupdate atau mengubah data
pegawai yang sebelumnya telah tersimpan di database.

CSS untuk mengatur table

pada form edit data pegawai

Dalam form ini digunakan table untuk

merapihkan posisi form. Terdapat inputan
berupa teks, password, button dan text area.

Data yang telah diedit, otomatis akan

mengupdate data yang sebelumnya
telah tersimpan di dalam database table
pegawai.

Laporan.php

Merupakan halaman yang menampilkan form untuk admin dan user menginput laporan baru,
melihat laporan pegawai yang terdapat di database, menghapus dan mengedit laporan mingguan
pegawai.

CSS untuk membuat

tampilan laporan

Form untuk menampilkan laporan yang

diinput oleh pegawai di database

Inputlaporan_admin.php

Merupakan halaman yang menampilkan form untuk admin dan user memasukkan laporan yang
baru.

CSS untuk
membuat
tampilan
input
laporan

Dalam form ini digunakan table untuk

merapihkan posisi form. Terdapat inputan
berupa teks, button dan text area.

Editlaporan_admin.php

Merupakan halaman yang menampilkan form untuk admin dan user mengubah laporan yang telah
tersimpan sebelumnya di database.

CSS untuk
membuat
tampilan
input
laporan

Dalam form ini digunakan table untuk

merapihkan posisi form. Terdapat inputan
berupa teks, button dan text area.

Deletelaporan_admin.php

Instruksi Delete laporan pegawai

akan menghapus data laporan
pegawai yang dipilih.

USER

Halaman user.php

Sign in ke halaman user menggunakan

id dan password dari salah satu user, lalu
dengan klik sign in akan masuk ke
halaman user.

CSS untuk membuat

box di bagian data diri

Dalam form ini digunakan table untuk

merapihkan posisi form. Data diri pegawai
yang melakukan sign in, tampil dengan
function session

Button Edit Data dan Ubah

Password dibuat dari gambar
yang saat diklik akan melink ke
halaman-halaman selanjutnya.

User_edit.php

CSS untuk membuat

tampilan input laporan

Dalam form ini

digunakan table
untuk merapihkan
posisi form.
Terdapat inputan
berupa teks, button
dan text area. User
hanya diizinkan
mengedit beberapa
data saja.

Ubahpass_user.php

CSS untuk membuat

tampilan ubah password

Dalam form ini digunakan

table untuk merapihkan
posisi form. Terdapat
inputan berupa password.

Inputlaporan_user.php

CSS untuk membuat

tampilan input laporan
user

Dalam form ini digunakan

table untuk merapihkan posisi
form. Terdapat inputan berupa
date, teks, button dan text area.

D. KESIMPULAN
Aplikasi Sistem Informasi Kepegawaian berbasis website ini diharapkan mampu
mempermudah dalam pengelolaan data kepegawaian suatu perusahaan. Admin bertugas dan
berwenang menginput serta mengedit seluruh data pegawai termasuk pemberian password
awal bagi user/pegawai. User dapat melihat data pribadinya dan mengedit data tertentu yang
diizinkan (nama, password, jenis kelamin, tanggal lahir, alamat dan tanggal masuk) jika terjadi
kesalahan penginputan dari admin. User dapat menginput weekly report atas pekerjaan yang
dilakukan. Penggunaan HTML, PHP dan CSS dalam pembuatan website ini, menjadikan
tampilan website lebih menarik karena penyusun dapat berkreativitas sesuai keinginannya,
fungsi-fungsi yang digunakan dalam mendevelop website akan membuat website lebih
interaktif, mudah dan menyesuaikan keinginan user.