UJIAN AKHIR SEMESTER

GENAP 2021/2022

ANALISIS DAN PERANCANGAN SISTEM INFORMASI

“SISTEM DATA ARSIP KARYAWAN PT.INETMEDIA BANYUWANGI”

Disusun Oleh :
Nama : Ramadhani Rusdiansyah
NIM : 3121101180

D3 MANAJEMEN INFORMATIKA
SEKOLAH TINGGI ILMU KOMPUTER PGRI BANYUWANGI
2022
I. Analisis Sistem Dan Perancangan
1. Konsep Sistem

Informasi

data

2. Sub system (komponen pembentuk sistem)

Data Karyawan
3. Batasan system
Jaminan Kesehatan
4. Hiraki Sistem
5. Lingkungan luar system
Hardwere Pendukung
6. Hubungan system (penghubung sumberdaya yang ada mengalir dari sub system ke
system lain)
Jaringan Internet
7. Lingkungan internal system
 Input
a. Nama
b. Alamat
c. Jabatan
d. ID
e. Dokumen Foto
f. Dokumen KTP
g. Dokumen Ijazah
h. Dokumen SKCK
 Proses
a. Memasukan Data Karyawan (Nama,Alamat,Jabatan,ID,Dokumen Foto,Dokumen
KTP, Dokumen Ijazah,Dokumen SKCK).
b. Menentukan kelengkapan data.
 Output
a. Menampilkan Informasi Data Karyawan.
8. Sasaran dan Tujuan
Data karyawan yang terkomputerisasi.
 II. Perancangan Sistem
Dalam Perancangan Sistem Data Arsip Karyawan di PT.INETMedia Banyuwnagi ini
dibutuhkan objek-objek sebagai berikut,

No Objek Property Method

1 Data Karyawan a. Nama a. Input data karyawan
b. Alamat b. update data karyawan
c. Jabatan c. output data karyawan
d. ID
2 Dokumen Karyawan a. Dokumen Foto a. Input data karyawan
b. Dokumen KTP b. Update data karyawan
c. Dokumen Ijazah c. Output data karyawan
d. Dokumen SKCK
2 Informasi Data e. Kelengkapan data a. Input laporan
b. Update laporan
c. Output laporan
III. Siklus Sistem
Pada sistem ini menggunakan penerapan metodelogi Development Sistem Life
Cycle (SDLC). Tahapan / Fase – Fase dalam SDLC. Alasan menggunakan tahapan ini
karena tahapan sistem bisa melakukan revisi atau perbaikan sistem sebelumnya.
Tahapan SDLC akan dikerjakan secara berurut menurun dari perencanaan, analisis,
desain, implementasi dan perawatan. Struktur metodologi SDLC dalam
pengembangan sistem informasi berbasis Web.
1. Perencanaan Sistem (System Planning) Sebagai tahap awal pengembangan sistem
yang mendefinisikan perkiraan kebutuhan-kebutuhan sumber daya seperti
komponen yang dibutuhkan, perangkat fisik,data karyawan dan dokumen.
Dalam system ini perencanaan yang dibutuhkan yaitu :
a. Mengenai komponen-komponen yang dibutuhkan system
1) Nama,
2) Alamat,
3) Jabatan,
4) ID,
5) Dokumen Foto,
6) Dokumen KTP,
7) Dokumen Ijazah,
8) Dokumen SKCK,
b. Perangkat fisik(hardwere)
1) computer,
2) Mouse,
3) keybord,
4) Jaringan internet,
c. Perangkat Lunak(softwere)
1) Sistem operasi windows 11.
2) Browser (google chrome)
3) Visual Studio code
4) Virtual webserver (XAMPP)
5) Database
d. Manusia(user)
 Diperlukan user yang paham menangani masalah computer,Pengaplikasian
data arsip web, Mampu Mengoperasikan komputer, Menginputkan data
kedalam system dan menentukan data Lengkap dan Tidak Lengkap.
2. Desain/Perancangan Sistem (System Design)
Tahap setelah analisis sistem yang menentukan proses dan data yang
diperlukan oleh sistem baru. Langkah-langkah yang dilakukan adalah menyiapkan
rancangan sistem yang terinci/grafis, dan yang umum berupa informasi serta
menyiapkan usulan implementasi. Yang saya butuhkan dalam hal ini adalah :
a. Desain Informasi Dalam tahap ini dimodelkan terdapat database maka
digunakan tahap development dan database disain untuk menyimpan data
informasi agar lebih rapi dan terkomputerisasi.
b. Desain Grafis Dalam tahap ini disesuaikan dari warna, layout, gambar dan
graphic menggunakkan CSS dalam pembuatan di pengcodingan.

3. Penerapan/Implementasi Sistem (System Implementation)

a. Sistem yang dibuat digunakan untuk membantu admin dalam hal
menyimpan,mengubah data masing masing karyawan.
b. Dengan system ini karyawan dapat melihat dengan jelas data pribadinya
masing masing.
4. Pengujian Web dan Dokumen Web
Menguji Web dengan berbagai teknologi browser yang ada, serta
pemeriksaan dokumen Web.Dalam hal ini dilakukan pengkajian terhadap kinerja
web, Apakah web ini dapat dibaca dengan mudah oleh user atau tidak, dalam hal
ini pengujian dilakukan agar web yang dibuat dapat digunakan dengan maksimal
mulai dari input,proses, hingga output yang menghasilkan data yang jelas dan
rapi.
5. Perawatan Sistem (System Maintenance)
Sistem perlu dirawat karena beberapa hal, yang meliputi penggunaan sistem,
audit sistem, penjagaan, perbaikan, dan peningkatan sistem.Dalam hal ini
dibutuhkan admin, dan seorang yang ahli dalam bidang informatika sehingga
ketika terjadi suatu kerusakkan dalam system user dapat membenahi dan
mengaplikasikan system kembali. Perawatan dalam hal ini dapat dilakukan
dengan cara :
a. Mengecek kinerja web minimal 1 bulan sekali, apakah terdapat masalah atau
tidak dan adakah yang harus diperbaharui atau tidak.
b. Mengevaluasi sambungan internet sudah memadahi atau belum.
IV. Use Case Sistem

Penjelasan Alur Program Sesuai Use Case Diatas

Dari use case diatas dapat dibaca bahwa terdapat 2 aktor yang berperan dengan
sistem informasi tersebut.
1. Admin, dalam hal ini admin berperan sebagai orang pertama dalam
pengoperasian program. Yang bertugas untuk menginputkan data karyawan
dan mengelola data arsip.
2. Karyawan, Dalam hal ini karyawan hanya bisa melihat datanya masing masing,
yang dimana di data tersebut akan ada keterangan data tersebut lengkap dan
tidak lengkap.
V. Class Diagram Sistem

Keterangan Class Diagram

Didalam class diagram ini terdapat 3 class yaitu : Data karyawan, Laporan data, Data
karyawan,.
Dari class yang ada dalam system, masing-masing class memiliki property dan
method masing-masing. Berikut masing-masing Penjelasanya
1. User, berbeda dengan use cas didalam clas diagram ini user atau actor tidak
berinteraksi dengan class manapun. Karena didalam class diagram ini actor atau
user hanya menjalankan sistem ketika sistem sudah jadi, sehingga user atau actor
disini dapat dikatakan sebagai pemakai sistem karena hanya mengoperasikan dan
melihat sistem yang sudah jadi dan dapat dijalankan. Meskipun begitu actor atau
user dalam clas diagram ini dapat menjalankan atau mengakses menu-menu yang
sudah jadi dan ada dalam sistem tersebut. Tidak lupa pula clas user atau actor ini
juga memiliki property serta method. Yaitu :
a. Property : Nama_User, Password.
b. Method : Login, Log Out.
2. Karyawan,
 Relasi many to One(N N),Dalam class diagram ini Data karyawan dapat
berinteraksi dengan class hasil data arsip karyawan . Dalam class ini juga memiliki
property dan method. Yaitu :
a. Property : Nama,Alamat ,Jabatan,ID,Foto,KTP ,IJAZAH,SKCK.
b. Method : menginputkan data masing masing karyawan
3. Informasi,
Relaso Many to one (N M)
Adapun property dan methodnya yaitu :
a. Property : Nama,Alamat ,Jabatan,ID,Foto,KTP ,IJAZAH,SKCK, Data Lengkap dan
Tidak Lengkap.
b. method : Menampilkan informasi data

VI. Coding Program

1. Login.php
<?php
if (isset($_POST["submit"])){

if ($_POST["username"] == "admin" && $_POST["password"] == "admin"){

header("Location: program.html");
exit;
}

if ($_POST["username"] == "karyawan" && $_POST["password"] == "karyawan"){

header("Location: admin.php");
exit;
}

else {
$error = true;
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROGRAM DATA ARSIP</title>

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="signin.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="text-center">

<main class="form-signin w-100 m-auto" >

<form method="POST">
<img class="mb-4" src="imd-removebg-preview.png" alt="" width="100" height="auto">
<h1 class="h3 mb-3 fw-normal">Silahkan Login</h1>

<div class="form-floating">
<input type="text" class="form-control" name="username" placeholder="username">
<label for="floatingInput">Username</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" name="password" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<pre><button class="w-100 btn btn-lg btn-primary" name="submit" >Masuk</button>

</pre>
<p class="mt-5 mb-3 text-muted">&copy; 2022</p>
</form>
</main>

</body>
</html>
<?php

2. Admin.php
class karyawan{
public $nama;
public $alamat;
public $jabatan;
public $id;
public function __construct($nama, $alamat, $jabatan, $id){
$this->nama = $nama;
$this->alamat = $alamat;
$this->jabatan = $jabatan;
$this->id = $id;
}

public function Nama(){

return "
Nama: $this->nama <br></br> Alamat: $this->alamat <br></br> Jabatan: $this->jabatan <br></br> ID: $this->id
";
}

class dokumen extends karyawan{

public $foto;
public $ktp;
public $ijazah;
public $skck;
public function __construct($foto, $ktp, $ijazah, $skck, $data){
$this->foto = $foto;
$this->ktp = $ktp;
$this->ijazah = $ijazah;
$this->skck = $skck;
$this->data = $data;
}
public function getLabel(){
return "

<br></br> Foto: $this->foto <br></br> KTP: $this->ktp

<br></br> Ijazah: $this->ijazah <br></br> SKCK: $this->skck
<br></br> KETERANGAN : $this->data
";

}
}
$karyawans1 = new karyawan ("RAMADHANI RUSDIANSYAH", "GENDOH", "NOC", "2324", "dani.jpeg", "ktp.jpeg",
"ijazah.jpeg", "skck.jpeg", "DATA LENGKAP");
$karyawans2 = new dokumen ("dani.jpg","ktp.jpg","ijazah.jpg", "skck.jpg", "DATA LENGKAP");

echo $karyawans1->Nama();
echo $karyawans2->getLabel();
echo "</br> </br>";

?>
<br>
<br>
<td><a href="login.php" >Logout</a></td>

3. Output.js
class informasi{
data_lengkap;
data_tidak_lengkap;
}

for (var i = 0; i < daftar_nama.length; i++) {

hasil.innerHTML += `<br>Karyawan ke-${i + 1}<br>`;
hasil.innerHTML += `<tr> <td> Nama: ${daftar_nama[i]}</td>`;
hasil.innerHTML += `<td>Alamat: ${daftar_alamat[i]}</td>`;
hasil.innerHTML += `<td>Jabatan: ${daftar_jabatan[i]}</td>`;
hasil.innerHTML += `<td>ID: ${daftar_id[i]}</td>`;
hasil.innerHTML += `<td>Foto: ${dokumen_foto[i] ? "Tersedia" : "Tidak Tersedia"}</td>`;
hasil.innerHTML += `<td>KTP: ${dokumen_ktp[i] ? "Tersedia" : "Tidak Tersedia"}</td>`;
hasil.innerHTML += `<td>Ijazah: ${dokumen_ijazah[i] ? "Tersedia" : "Tidak Tersedia"}</td>`;
hasil.innerHTML += `<td>SKCK: ${dokumen_skck[i] ? "Tersedia" : "Tidak Tersedia"}</td></tr>`;

if (!dokumen_foto[i] || !dokumen_ijazah[i] || !dokumen_ktp[i] || !dokumen_skck[i]) {

hasil.innerHTML += `--- DATA TIDAK LENGKAP ---<br>`;
} else {
hasil.innerHTML += `--- DATA LENGKAP ---<br>`;
}
}

for (let i = 0; i <daftar_nama.length; i++) {

hasil.innerHTML += `
<tbody>
 <tr>
<td>${daftar_nama[i]}</td>
<td>${daftar_alamat[i]}</td>
<td>${daftar_jabatan[i]}</td>
<td>${daftar_id[i]}</td>
<td>${dokumen_foto[i]}</td>
<td>${dokumen_ktp[i]}</td>
<td>${dokumen_ijazah[i]}</td>
<td>${dokumen_skck[i]}</td>
</tr>
</tbody>
`
if (!dokumen_foto[i] || !dokumen_ijazah[i] || !dokumen_ktp[i] || !dokumen_skck[i]) {
hasil.innerHTML += `<td>--- DATA TIDAK LENGKAP ---</td>`;
} else {
hasil.innerHTML += `<td>--- DATA LENGKAP ---<br></td>`;
}
}

4. Program.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project UAS Data Arsip Karyawan</title>

</head>
<body>
<h1> Program Data Arsip Karyawan</h1>
<h1>PT.INETMedia Banyuwangi</h1>
<table>
<form>
<tr>
<td><label>Nama Karyawan</label></td>
<td><input type="text" name="nama"></td>
</tr>

<tr>
<td><label>Alamat Karyawan</label></td>
<td><input type="text" name="alamat"></td>
</tr>
 <tr>
<td><label>Jabatan Karyawan</label></td>
<td><input type="text" name="jabatan"></td>
</tr>

<tr>
<td><label>ID Karyawan</label></td>
<td><input type="number" name="id_karyawan"></td>
</tr>

<tr>
<td><label>Foto Karyawan</label></td>
<td><input type="file" name="foto"></td>
</tr>

<tr>
<td><label>KTP Karyawan</label></td>
<td><input type="file" name="ktp"></td>
</tr>

<tr>
<td><label>Ijazah Karyawan</label></td>
<td><input type="file" name="ijazah"></td>
</tr>

<tr>
<td><label>SKCK Karyawan</label></td>
<td><input type="file" name="skck"></td>
</tr>

<tr>
<td><input type="button" value="Simpan" onclick="data()"></td>
<td><a href="login.php" >Logout</a></td>
</tr>

</form>
</table>

<br>
<table id="result" border="2px solid">
<thead>
 <tr>
<td>Nama</td>
<td>Alamat</td>
<td>Jabatan</td>
<td>ID</td>
<td>Foto</td>
<td>KTP</td>
<td>Ijazah</td>
<td>SKCK</td>
</tr>
</thead>
</table>

<script src="script.js"></script>
</body>
</html>

5. Script.js
// // SCRIPT DATA LOGIN

// let admin = [
// {user : "admin", pass: "admin",},
// {user : "karyawan", pass: "karyawan",}];

// function login(){
// let username = document.getElementById("username").value
// let password = document.getElementById("password").value

// for (let i = 0; i < admin.length; i++){

// if(admin[i].user == username){
// window.location.href = "./program.html?username=" + username
// }
// else if(admin[i].user == "admin"){
// windows.location.href = "/admin.php?username=" + username
// }
// }
// }

// OOP JAVASCRIPT PADA SISTEM ARSIP

var daftar_nama = [];

var daftar_alamat = [];
var daftar_jabatan = [];
var daftar_id = [];
var dokumen_foto = [];
var dokumen_ktp = [];
var dokumen_ijazah = [];
var dokumen_skck = [];
var karyawan_ke = 0;

function data(){

if (daftar_nama.length >= 5) {
alert("Melebihi Batas Maksimum Karyawan!");
return;
}

nama=document.forms[0]["nama"];
alamat=document.forms[0]["alamat"];
jabatan=document.forms[0]["jabatan"];
id_karyawan=document.forms[0]["id_karyawan"];
foto=document.forms[0]["foto"];
ktp=document.forms[0]["ktp"];
ijazah=document.forms[0]["ijazah"];
skck=document.forms[0]["skck"];

daftar_nama[karyawan_ke] = nama.value;
daftar_alamat[karyawan_ke] = alamat.value;
daftar_jabatan[karyawan_ke] = jabatan.value;
daftar_id[karyawan_ke] = id_karyawan.value;
dokumen_foto[karyawan_ke] = foto.value;
dokumen_ktp[karyawan_ke] = ktp.value;
dokumen_ijazah[karyawan_ke] = ijazah.value;
dokumen_skck[karyawan_ke] = skck.value;
karyawan_ke++;

nama.value = "";
alamat.value = "";
jabatan.value = "";
id_karyawan.value = "";
foto.value = "";
ktp.value = "";
ijazah.value = "";
skck.value = "";
 hasil();
}

function hasil() {
var hasil = document.getElementById("result");

hasil.innerHTML = `
<thead>
<tr>
<td>Nama</td>
<td>Alamat</td>
<td>Jabatan</td>
<td>ID</td>
<td>Foto</td>
<td>KTP</td>
<td>Ijazah</td>
<td>SKCK</td>
</tr>
</thead>
`;

for (let i = 0; i <daftar_nama.length; i++) {

hasil.innerHTML += `
<tbody>
<tr>
<td>${daftar_nama[i]}</td>
<td>${daftar_alamat[i]}</td>
<td>${daftar_jabatan[i]}</td>
<td>${daftar_id[i]}</td>
<td>${dokumen_foto[i]}</td>
<td>${dokumen_ktp[i]}</td>
<td>${dokumen_ijazah[i]}</td>
<td>${dokumen_skck[i]}</td>
</tr>
</tbody>
`
if (!dokumen_foto[i] || !dokumen_ijazah[i] || !dokumen_ktp[i] || !dokumen_skck[i]) {
hasil.innerHTML += `<td>--- DATA TIDAK LENGKAP ---</td>`;
} else {
hasil.innerHTML += `<td>--- DATA LENGKAP ---<br></td>`;
}
 }
}

6. Signin.css
html,
body {
height: 100%;
}

body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}

.form-signin {
max-width: 330px;
padding: 15px;
}

.form-signin .form-floating:focus-within {
z-index: 2;
}

.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

7. Style.css
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
 user-select: none;
}

@media (min-width: 768px) {

.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}

.bi {
vertical-align: -.125em;
fill: currentColor;
}

.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}

.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
 }

VII. Halaman Tampilan Login

1.