SISTEM INFORMASI ARSIP DOKUMEN

DISKOMINFO KOTA TEGAL (SIPMENKO)

BERBASIS WEBSITE

LAPORAN

PRAKTIK KERJA LAPANGAN

Diajukan untuk mata kuliah PKL pada Program Diploma Tiga (D3)

RIZQY SUKMA WULANDARI

NIM: 12210972

Program Studi Sistem Informasi Kampus Kota Tegal

Universitas Bina Sarana Informatika

2023
PERSETUJUAN LAPORAN PRAKTIK KERJA LAPANGAN

ii
 KATA PENGANTAR

Dengan mengucapkan puji syukur kehadirat Allah SWT atas terselesaikannya

Laporan Praktik Kerja Lapangan (PKL) dengan judul: “Sistem Informasi Arsip
Dokumen Diskominfo Kota Tegal (SIPMENKO) Berbasis Website”. yang
merupakan salah satu syarat kelulusan mata kuliah Praktik Kerja Lapangan program
studi Sistem Informasi Fakultas Teknik dan Informatika Universitas Bina Sarana
Informatika Kampus Kota Tegal.

Selama melaksanakan Praktik Kerja Lapangan dan dalam menyelesaikan

laporan ini, penulis telah banyak menerima bimbingan, pengarahan, petunjuk dan
saran, serta fasilitas yang membantu hingga akhir dari penulisan laporan ini. Untuk itu
penulis menyampaikan ucapan terimakasih yang sebesar-besarnya kepada yang
terhormat:

1. Rektor Universitas Bina Sarana Informatika.

2. Dekan Fakultas Teknik dan Informatika Universitas Bina Sarana Informatika
3. Bapak Sopian Aji, M.Kom selaku Kepala Prodi Studi Sistem Informasi
Universitas Bina Sarana Informatika Kampus Kota Tegal.
4. Bapak Warjiyono, M.Kom selaku Dosen Pembimbing Akademik yang telah
memberikan petunjuk dan arahan dalam penyelesaian laporan ini.
5. Bapak Panji Arbani, S.Kom selaku Mentor Praktik Kerja Lapangan
Diskominfo Kota Tegal.

Akhirnya penulis berharap semoga laporan ini bermanfaat bagi semua pihak
yang membantu, meskipun dalam laporan ini masih banyak kekurangannya. Oleh
karena itu kritik dan saran yang membangun tetap penulis harapkan.

Tegal, 14 September 2023

Rizqy Sukma Wulandari

iii
 DAFTAR ISI

PERSETUJUAN LAPORAN PRAKTIK KERJA LAPANGAN ................................ ii

KATA PENGANTAR .................................................................................................. iii
DAFTAR ISI ............................................................................................................... iv
DAFTAR SIMBOL ...................................................................................................... v
DAFTAR GAMBAR ................................................................................................. vii
DAFTAR TABEL...................................................................................................... viii
BAB I ........................................................................................................................... 1
PROJECT CHARTER ................................................................................................. 1
1.1. Latar Belakang............................................................................................... 1
1.2. Permasalahan ................................................................................................. 1
1.3. Tujuan dan Manfaat Aplikasi ........................................................................ 1
1.4. Deskripsi Produk ........................................................................................... 2
1.5. Keuntungan Yang Diharapkan ....................................................................... 2
1.6. Perencanaan Aktivitas Secara Global ............................................................ 3
BAB II .......................................................................................................................... 4
PROJECT REPORT ..................................................................................................... 4
2.1. Metode Pengembangan Perangkat Lunak ..................................................... 4
2.2. Tahap Pengembangan Perangkat Lunak ........................................................ 6
BAB III....................................................................................................................... 38
PENUTUP .................................................................................................................. 38
3.1 Kesimpulan ....................................................................................................... 38
3.2 Saran ................................................................................................................. 38
DAFTAR PUSTAKA ................................................................................................. 39

iv
 DAFTAR SIMBOL
1. Simbol Use Case
NO GAMBAR NAMA
1 Actor
2 Use Case
3 Association
Relationship
4 Include
Relationship
Extend
5 Relationship
2. Simbol Activity Diagram
NO GAMBAR NAMA
1 Initial Node
2 Action
3 Control Flow Menunjukkan urutan eksekusi.
4 Decission
Final
5 Activity
Node
KETERANGAN
Orang atau sistem lain yang berinteraksi
dengan sistem saat ini, sebuah peran bukan
pengguna spesifikasi meberikan dan menerima
informasi dari sistem.
Bagian utama dari fungsionalitas sistem, bisa
extend (memperluas) use case lainnya.
Menghubungkan actor dengan usecase
menunjukkan komunikasi dua arah
(menunjukkan komunikasi satu arah jika
menggunakan tanda panah)
Memasukkan satu use case dalam use case
lainnya, tanda panah mengarah dari base use
case (pusat) menuju ke use case yang di-
include.
Memperluas use case untuk memasukkan perilaku
opsional, tanda panah mengarah dari use case
tambahan ke base use case (pusat)
KETERANGAN
Menggambarkan awal dari serangkaian tindakan
atau kegiatan
Perilaku yang sederhana dan tidak dapat
diuraikan, dilabeli dengan namanya.
Asosiasi percabangan dimana lebih dari satu
aktivitas digabungkan menjadi satu.
Digunakan untuk menghentikan semua arus
kontrol dan arus objek dalam suatu aktivitas
(atau tindakan).
v
 3. Simbol Entity Relationship Diagram (ERD)

NO GAMBAR NAMA KETERANGAN

1 Entitas Sebuah objek berwujud nyata yang dapat dibedakan

dengan objek lainnya.

2 Atribut Karakteristik dari sebuah entitas.

3 Relasi Menunjukkan nama dari relasi antar satu entitas

dengan lainnya.

Menunjukkan hubungan (keterkaitan) antar entitas

4 Link

vi
 DAFTAR GAMBAR
Gambar II. 1 Metode Waterfall ............................................................................................... 4
Gambar II. 2 Usecase Sea Level Admin .................................................................................. 6
Gambar II. 3 Usecase Sea Level Bidang ................................................................................. 6
Gambar II. 4 Usecase Fish Level ............................................................................................ 7
Gambar II. 5 Sequence Diaagram Admin Mengelola Dokumen Masuk .................................. 8
Gambar II. 6 Sequence Diagram Admin Mengelola Dokumen Keluar ................................... 8
Gambar II. 7 Diagram Admin Input Data Bidang ................................................................... 8
Gambar II. 8 Sequence Diagram Bidang Merekap Dokumen Masuk ...................................... 9
Gambar II. 9 Diagram Bidang Merekap Dokumen Keluar ...................................................... 9
Gambar II. 10 Sequence Diagram Bidang Mengelola Dokumen Keluar ................................. 9
Gambar II. 11 Activity Diagram Admin Mengolah Dokumen Masuk ................................... 10
Gambar II. 12 Activity Diagram Admin Mengolah Dokumen Keluar ................................... 11
Gambar II. 13 Activity Diagram Admin Input Data Bidang .................................................. 12
Gambar II. 14 ERD (Entity Relationship Diagram) .............................................................. 13
Gambar II. 15 LRS (Logical Record Structure) .................................................................... 13
Gambar II. 16 Tampilan Halaman Utama .............................................................................. 17
Gambar II. 17 Tampilan Tentang ........................................................................................... 17
Gambar II. 18 Tampilan Tugas .............................................................................................. 18
Gambar II. 19 Tampilan Footer ............................................................................................. 18
Gambar II. 20 Tampilan Login Admin .................................................................................. 19
Gambar II. 21 Tampilan Halaman Utama Admin .................................................................. 19
Gambar II. 22 Tampilan Profil Admin ................................................................................... 20
Gambar II. 23 Tampilan Edit Profil Admin ........................................................................... 20
Gambar II. 24 Tampilan Dokumen Masuk Admin ................................................................ 21
Gambar II. 25 Tampilan Tambah Dokumen Masuk Admin ................................................... 21
Gambar II. 26 Tampilan Edit Dokumen Admin .................................................................... 22
Gambar II. 27 Tampilan Detail Dokumen Admin ................................................................. 22
Gambar II. 28 Tampilan Dokumen Keluar Admin ................................................................ 23
Gambar II. 29 Tampilan Tambah Dokumen Admin............................................................... 23
Gambar II. 30 Tampilan Edit Dokumen Admin .................................................................... 24
Gambar II. 31 Tampilan Detail Dokumen Keluar ................................................................. 24
Gambar II. 32 Tampilan Bidang ............................................................................................ 25
Gambar II. 33 Tampilan Tambah Bidang .............................................................................. 25
Gambar II. 34 Tampilan Edit Bidang .................................................................................... 26
Gambar II. 35 Tampilan Detail Bidang ................................................................................. 26
Gambar II. 36 Tampilan Login Bidang.................................................................................. 27
Gambar II. 37 Tampilan Halaman Utama Bidang ................................................................. 27
Gambar II. 38 Tampilan Profil Bidang .................................................................................. 28
Gambar II. 39 Tampilan Edit Profil Bidang .......................................................................... 28
Gambar II. 40 Tampilan Dokumen Masuk Bidang ................................................................ 29
Gambar II. 41 Tampilan Detail Dokumen Masuk Bidang ..................................................... 29
Gambar II. 42 Tampilan Dokumen Keluar Bidang ................................................................ 30
Gambar II. 43 Tampilan Detail Dokumen Keluar Bidang ..................................................... 30
Gambar II. 44 Tampilan Nomor Dokumen Keluar ................................................................ 31
Gambar II. 45 Hasil dari script Front End ............................................................................. 36

vii
 DAFTAR TABEL

Tabel I.1 Perencanaan Aktivitas Secara Global ........................................................... 3

Tabel II. 1 Spesifikasi File tb bagian .......................................................................... 14
Tabel II. 2 Spesifikasi File tb admin .......................................................................... 14
Tabel II. 3 Spesifikasi File tb surat masuk ................................................................. 15
Tabel II. 4 Spesifikasi File tb surat keluar.................................................................. 16
Tabel II. 5 Pengujian Black-Box ................................................................................ 37

viii
 1

BAB I

PROJECT CHARTER
1.1. Latar Belakang
Pengarsipan dokumen merupakan tanggung jawab penting bagi pegawai.
Kearsipan memiliki peran sebagai pusat ingatan dan sumber informasi dalam rangka
melakukan kegiatan perencanaan, penganalisaan, perumusan kebijaksanaan,
pengambilan keputusan, pengendalian dan pertanggung jawaban dengan setepat-
tepatnya.
Diera globalisasi saat ini, perkembangan pengetahuan dan teknologi telah
berkembang dengan pesat dan selaras dengan perkembangan karakteristik masyarakat
modern yang memiliki mobilitas tinggi dan mengejar efisien di segala aspek, yang
mendorong masyarakat menggunakan sistem informasi dalam menjalankan kegiatan
operasional di kantor.
Pekerjaan akan terasa menjadi lebih cepat untuk diselesaikan, karena data arsip
yang biasa di simpan di gudang penyimpanan dokumen arsip mudah di akses melalui
system informasi. Dengan demikian pekerjaan yang membutuhkan waktu yang cukup
lama akan terasa cepat, dan sangat membantu pegawai.
Berdasarkan latar belakang dari Diskominfo Kota Tegal yang masih
mengarsipkan dokumen dengan buku agenda, maka penulis mengambil judul laporan
praktik kerja lapangan ini adalah “SISTEM INFORMASI ARSIP DOKUMEN
DISKOMINFO KOTA TEGAL (SIPMENKO) BERBASIS WEBSITE”
1.2. Permasalahan
Adapun permasalahan terkait mengenai website sistem infomasi arsip dokumen
pegawai dinas komunikasi dan informatika kota tegal sebagai berikut:
1. Menyimpan, merawat dan memelihara arsip dokumen belum terkomputerisasi.
2. Pengaksesan dokumen masuk dan dokumen keluar masih sangat manual.
3. Sering kehilangan berkas dokumen masuk dan dokumen keluar dikarenakan
banyaknya berkas.
4. Kurang terjaminnya keselamatan dokumen-dokumen arsip yang masih dikelola
secara manual.

1.3. Tujuan dan Manfaat Aplikasi

1.3.1 Tujuan
Tujuan dibuatnya Sistem Informasi Arsip Dokumen Diskominfo Kota Tegal
(SIPMENKO) berbasis Website adalah sebagai berikut:
1. Menghemat tempat penyimpanan berupa wadah, rak, laci dan lemari. Karena sudah
dibuat dengan versi website yang sangat mudah.
2. Mempermudah pencarian arsip jika sewaktu-waktu membutuhkan berkas penting.
3. Menghemat waktu karena dengan website ini akan lebih cepat untuk mencari berkas.
 2

1.3.2 Manfaat
Sedangkan manfaat dari Sistem Informasi Arsip Dokumen Diskominfo Kota Tegal
(SIPMENKO) berbasis Website adalah sebagai berikut:
1. Sistem Informasi Arsip Dokumen ini dapat mengurangi waktu dan mempermudah
pencarian surat/dokumen, karena didalam website ini terdapat fitur search serta fitur
bulan dan tahun untuk memfilter dokumen yang kita inginkan.
2. Kemungkinan menjalin hubungan yang teratur, sehat dan dinamis antara instansi
atau perusahaan dengan Lembaga Perguruan Tinggi, menumbuhkan kerjasama
yang saling menguntungkan dan bermanfaat bagi pihak-pihak yang terlibat.

1.4. Deskripsi Produk

Berikut ini adalah dekripsi singkat mengenai produk atau service yang kami buat
pada Sistem Informasi Arsip Dokumen Diskominfo Kota Tegal (SIPMENKO)
Berbasis Website:
1. Dokumen Masuk
2. Dokumen Keluar
3. Data Pegawai

1.5. Keuntungan Yang Diharapkan

Dari Sisi Perusahaan:
1. Mempermudah perusahaan dalam mengarsipkan dokumen.
2. Mempermudah perusahaan dalam menjalankan kegiatan operasional dikantor.
3. Mempermudah perusahaan dalam sistem pengelolaan arsip dokumen yang baik.
4. Mempermudah perusahaan dalam melakukan pemantauan atas dokumen ada.

Dari sisi pegawai:

1. Mempermudah pegawai melakukan arsip dokumen masuk dan dokumen keluar.
2. Mempermudah pegawai mengelola data dokumen masuk pegawai perbidangnya.
3. Mempermudah pegawai mengakses dokumen lama yang akan dibutuhkan dengan
efisien.
 3

1.6. Perencanaan Aktivitas Secara Global

Tabel I.1 Perencanaan Aktivitas Secara Global

Nomor Deskripsi Aktivitas Jumlah Hari Estimasi Biaya

1 Analisa & Desain Sistem 20 Hari Rp 300.000
2 Desain Aplikasi 14 Hari Rp 500.000
3 Pemrograman 60 Hari Rp 5.000.000
4 Testing 7 Hari Rp 4.500.000
5 Instalasi 5 Hari Rp 3.000.000
6 Dokumentasi 7 Hari Rp 1.000.000
7 Implementasi 2 Hati Rp 2.500.000
TOTAL 115 Hari Rp 16.800.000
 4

BAB II

PROJECT REPORT

2.1. Metode Pengembangan Perangkat Lunak

Metode yang kami gunakan agar tujuan dari program kami terelisasi melalui
beberapa tahap. Berikut ini tahap pelaksanaan nya:

Gambar II. 1 Metode Waterfall

1. Analisis Kebutuhan Pengguna
Pada tahap ini kami terlebih dahulu menganalisis kebutuhan pengguna seperti
Admin atau Pegawai dapat melakukan registrasi atau login, mengelola arsip
dokumen agar lebih efisien dan terstruktur sehingga ketika pegawai membutuhkan
dokumen untuk kepentingan yang mendesak bisa mempermudah dalam proses
pencairan, serta kebutuhan dalam penyimpanan dokumen yang terjamin akan
kerusakan atau kehilangan dokumen.

2. Perencanaan
Berawal dari cara pengarsipan dokumen di Diskominfo yang masih manual dan
disimpan dalam sebuah Folio Bindex. Mengakibatkan beberapa kendala diantaranya
jumlah arsip yang selalu bertambah dan menjadikan ruang penyimpanan yang
memakan tempat serta pencarian kembali dokumen yang rumit ketika diperlukan
dokumen. Oleh karena itu kami merancang dan membuat suatu website yang
memudahkan pegawai dalam mengelola arsip dokumen dan menyimpan dokumen.
 5

3. Pembuatan Design
Pada tahap ini mulai membuat design tampilan visual atau tampilan antarmuka
berdasarkan analisis kebutuhan pengguna yang telah dianalisis sebelumnya, dengan
mempertimbangkan fungsi dan tujuan dari program, serta kebutuhan pengguna,
termasuk elemen visual seperti warna, tata letak, tipografi, dan grafik.

4. Implementasi Design
Selanjutnya pada tahap ini kami melibatkan tahap seperti Slincing UI, atau
mengimplementasikan design yang telah dibuat sebelumnya kedalam sebuah kode
program agar menjadi website yang dapat berjalan, disini kami menggunakan
framework Codeigniter 3 dan untuk backend kita menggunakan PHP versi 8.

5. Dokumentasi
Apabila proses implementasi atau coding sudah selesai, tahap berikutnya kami
membuat sebuah dokumentasi. Seperti dokumentasi kebutuhan, perencanaan, design,
dan pengkodean program. Karna agar memudahkan ketika memecahkan masalah
dalam program.

6. Testing
Pada tahap testing ini kami menguji beberapa hal dari website yang telah kami
buat, antara lain mengenai fungsionalitas website, performa, serta pengujian UI/UX
nya. Kami juga akan menguji kelayakan website kepada pihak terkait dan
memperkenalkan kepada pegawai. Lalu memberikan kuisioner mengenai website
tersebut untuk mendapatkan feedback sebagai bahan evaluasi kami yang berisi
mengenai kelemahan serta kelebihan website yang kami buat.

7. Deployment
Pada tahap ini kami mendeploy website yang telah kami buat ke sebuah cloud
platform, untuk dijalankan dan dipakai oleh website yang telah dibuat.

8. Publikasi
Tahap ini akan tercapai apabila telah lolos melewati tahap testing atau pengujian,
dan sudah dikatakan layak untuk dipublikasikan kepada pengguna. Untuk publikasi
dilakukan melalui media sosial sehingga menjangkau lebih banyak pengguna.

9. Maintenance
Pada tahap ini kami memastikan website tetap relevan dan berfungsi dengan baik
selama digunakan oleh pengguna. Kami melakukan maintenance secara bertahap
ketika terjadi bug / error.
 6

2.2. Tahap Pengembangan Perangkat Lunak

2.2.1 Usecase Diagram
1. Usecase Sea Level Admin dan Bidang

Gambar II. 2 Usecase Sea Level Admin

Gambar II. 3 Usecase Sea Level Bidang

 7

2. Usecase Fish Level

Gambar II. 4 Usecase Fish Level

 8

2.2.2 Sequence Diagram

1. Sequence Diagram Admin Mengelola Dokumen Masuk

Gambar II. 5 Sequence Diaagram Admin Mengelola Dokumen Masuk

2. Sequence Diagram Admin Mengelola Dokumen Keluar

Gambar II. 6 Sequence Diagram Admin Mengelola Dokumen Keluar

3. Sequence Diagram Admin Input Data Bidang

Gambar II. 7 Diagram Admin Input Data Bidang

 9

4. Sequence Diagram Bidang Merekap Dokumen Masuk

Gambar II. 8 Sequence Diagram Bidang Merekap Dokumen Masuk

5. Sequence Diagram Bidang Merekap Dokumen Keluar

Gambar II. 9 Diagram Bidang Merekap Dokumen Keluar

6. Sequence Diagram Bidang Mengelola Dokumen Keluar

Gambar II. 10 Sequence Diagram Bidang Mengelola Dokumen Keluar

 10

2.2.3 Activity Diagram

1. Activity Diagram Admin Mengolah Dokumen Masuk

Gambar II. 11 Activity Diagram Admin Mengolah Dokumen Masuk

 11

2. Activity Diagram Admin Mengolah Dokumen Keluar

Gambar II. 12 Activity Diagram Admin Mengolah Dokumen Keluar

 12

3. Activity Diagram Admin Input Data Bidang

Gambar II. 13 Activity Diagram Admin Input Data Bidang

 13

2.2.4 Desain Sistem

1. ERD (Entity Relationship Diagram)
Entity Relationship Diagram (ERD) adalah diagram menggambarkan kebutuhan
data dan hubungan antar entitas di dalam basis data. ERD menggunakan simbol atau
objek yang tersusun dari tiga komponen yaitu entitas, atribut dan relasi. Jadi setiap
simbol mempunyai hubungan satu sama lain.

Gambar II. 14 ERD (Entity Relationship Diagram)

2. LRS (Logical Record Structure)

Logical Record Structure adalah sebuah bagian relasi, sebuah relasi ada sebuah
tabel yang berisi informasi mengenai sebuah entitas. Setiap tabel harus memiliki paling
sedikit satu key, dimana sebuah key merupakan bagian dari kelompok atribut yang
memberikan nilai yang unik didalam sebuah tabel (Hasugian & Shidiq, 2012).

Gambar II. 15 LRS (Logical Record Structure)

 14

3. Spesifikasi File
A. Spesifikasi File tb bagian
Nama File : tb bagian
Akronim : tb_bagian.MYD
Tipe File : File Master
Access File : Random
Panjang Record : 568
Field Key : id_bagian
Software : MySQL

Tabel II. 1 Spesifikasi File tb bagian

Elemen
Data Akronim Tipe Panjang Keterangan
1 Id Bagian id_bagian int 11 Primary Key
Nama
2 Bagian nama_bagian varchar 120 Foreign Key
Username
3 Bagian username_admin_bagian varchar 50
4 Password password_bagian varchar 50
Nama
5 Lengkap nama_lengkap varchar 70
Tanggal
6 Lahir tanggal_lahir_bagian date -
7 Alamat alamat text -
8 No HP no_hp_bagian varchar 12
9 Gambar gambar varchar 255

B. Spesifikasi File tb admin

Nama : tb admin
Akronim : tb_admin.MYD
Tipe File : File Master
Access File : Random
Panjang Record : 415
Field Key : id_admin
Software : MySQL
Tabel II. 2 Spesifikasi File tb admin

No Elemen Data Akronim Tipe Panjang Keterangan

1 Id Admin id_admin int 10 Primary Key
2 Nama Admin nama_admin varchar 50
Username
3 Admin username_admin varchar 50 Foreign Key
4 Password password varchar 50
5 Gambar gambar varchar 255
 15

C. Spesifikasi File tb surat masuk

Nama : tb surat masuk
Akronim : tb_suratmasuk.MYD
Tipe File : File Master
Access File : Random
Panjang Record : 1.018
Field Key : id_suratmasuk
Software : MySQL
Tabel II. 3 Spesifikasi File tb surat masuk

Elemen
No Data Akronim Tipe Panjang Keterangan
Id Surat
1 Masuk id_suratmasuk int 11 Primary Key
Tanggal
2 Masuk tanggalmasuk_suratmasuk datetime -
Kode
3 Surat kode_suratmasuk varchar 10
Nomor
4 Urut nomorurut_suratmasuk varchar 7
Nomor
5 Surat nomor_suratmasuk varchar 25
Tanggal tanggalsurat_tanggalmasu
6 Surat k date -
7 Pengirim pengirim varchar 255
8 Kepada kepada_suratmasuk varchar 255
9 Perihal perihal_suratmasuk text -
10 File file_suratmasuk varchar 255
11 Operator operator varchar 50 Foreign Key
Tanggal
12 Entry tanggal_entry datetime -
Disposisi
13 1 disposisi1 varchar 50
Tanggal
Disposisi
14 1 tanggal_disposisi1 datetime -
Disposisi
15 2 disposisi2 varchar 50
Tanggal
Disposisi
16 2 tanggal_disposisi2 datetime -
Disposisi
17 3 disposisi3 varchar 50
Tanggal
Disposisi
18 3 tanggal_disposisi3 datetime -
 16

D. Spesifikasi File tb surat keluar

Nama : tb surat masuk
Akronim : tb_suratmasuk.MYD
Tipe File : File Master
Access File : Random
Panjang Record : 696
Field Key : id_suratkeluar
Software : MySQL
Tabel II. 4 Spesifikasi File tb surat keluar

No Elemen Data Akronim Tipe Panjang Keterangan

1 Id Surat Keluar id_suratkeluar int 11 Primary Key
Tanggal tanggalkeluar_surat
2 Keluar keluar datetime -
3 Kode Surat kode_suratkeluar varchar 10
4 Nomor Surat nomor_suratkeluar varchar 45
5 Nama Bagian nama_bagian varchar 70 Foreign Key
tanggalsurat_tangg
6 Tanggal Surat alkeluar date -
7 Kepada kepada_suratmasuk varchar 255
8 Perihal perihal_suratmasuk text -
9 File file_suratmasuk varchar 255
10 Operator operator varchar 50 Foreign Key
11 Tanggal Entry tanggal_entry datetime -
 17

2.2.5 Desain Sistem

1. Dashboard
a. Implementasi Antarmuka Halaman Utama
Tampilan antarmuka Halaman Utama, terdapat halaman awal website “ARSIP
DOKUMEN DISKOMINFO KOTA TEGAL” berisi Beranda, Tentang, Tugas dan
Masuk yang akan login sebagai Admin dan Bidang. Tampilan dapat dilihat pada
gambar berikut:

Gambar II. 16 Tampilan Halaman Utama

b. Implementasi Antarmuka Dashboard Tentang

Tampilan antarmuka Dashboard Tentang, terdapat informasi penggunaan website
untuk pengarsipan Dokumen Masuk dan Dokumen Keluar. Tampilan dapat dilihat
pada berikut:

Gambar II. 17 Tampilan Tentang

 18

c. Implementasi Antarmuka Dashboard Tugas

Tampilan antarmuka Dashboard Tugas, berisi informasi tugas pokok yang dinaungi
oleh Diskominfo Kota Tegal. Tampilan dapat dilihat pada berikut:

Gambar II. 18 Tampilan Tugas

d. Implementasi Antarmuka Footer

Tampilan antarmuka Footer, berisi tentang alamat Diskominfo Kota Tegal, No.
Telepon yang bisa dihubungi, dan link website Diskominfo Kota Tegal. Tampilan
dapat dilihat pada berikut:

Gambar II. 19 Tampilan Footer

 19

2. Implementasi Antarmuka Login Admin

Tampilan antarmuka Login Admin digunakan untuk admin web login ke sistem.
Tampilan dapat dilihat pada gambar berikut:

Gambar II. 20 Tampilan Login Admin

3. Dashboard Admin
a. Implementasi Antarmuka Halaman Utama Admin
Tampilan antarmuka Halaman Utama Admin berisi jumlah data Dokumen Masuk,
Dokumen Keluar, dan jumlah Bidang. Tampilan dapat dilihat pada berikut:

Gambar II. 21 Tampilan Halaman Utama Admin

 20

b. Implementasi Antarmuka Profil Admin

Tampilan antarmuka Profil Admin menampilkan Detail Admin seperti ID, Nama
Admin, Username Admin dan Foto Admin. Tampilan dapat dilihat pada berikut:

Gambar II. 22 Tampilan Profil Admin

c. Implementasi Antarmuka Edit Profil Admin

Tampilan antarmuka Edit Profil Admin, disini admin dapat mengedit Nama
Lengkap, Username Admin, Password yang akan digunakan untuk login, serta foto.
Tampilan dapat dilihat pada berikut:

Gambar II. 23 Tampilan Edit Profil Admin

 21

4. Dokumen Masuk Admin

a. Implementasi Antarmuka Dokumen Masuk Admin
Tampilan antarmuka Dokumen Masuk Admin terdapat fitur Tambah Dokumen
Masuk, Edit Dokumen, Detail Dokumen, Download Dokumen, Hapus Dokumen, serta
bisa memilih dokumen berdasarkan Bulan dan Tahun Dokumen. Tampilan dapat
dilihat pada berikut:

Gambar II. 24 Tampilan Dokumen Masuk Admin

b. Implementasi Antarmuka Tambah Dokumen Masuk Admin

Tampilan antarmuka Tambah Dokumen Masuk Admin, untuk menambahkan Data
yang diperlukan. Tampilan dapat dilihat pada berikut:

Gambar II. 25 Tampilan Tambah Dokumen Masuk Admin

 22

c. Implementasi Antarmuka Edit Dokumen Admin

Gambar II. 26 Tampilan Edit Dokumen Admin

d. Implementasi Antarmuka Detail Dokumen Admin

Gambar II. 27 Tampilan Detail Dokumen Admin

 23

5. Dokumen Keluar Admin

a. Implementasi Antarmuka Dokumen Keluar Admin
Tampilan antarmuka Dokumen Keluar Admin berupa table dengan kolomm Nomor
Dokumen, Tanggal Keluar, Kode Dokumen, Tanggal Dokumen, Bidang, Kepada,
Perihal dan Terdapat bagian Crud, Detail Dokumen Keluar. Tampilan dapat dilihat
pada berikut:

Gambar II. 28 Tampilan Dokumen Keluar Admin

b. Implementasi Antarmuka Tambah Dokumen Keluar

Gambar II. 29 Tampilan Tambah Dokumen Admin

 24

c. Implementasi Antarmuka Edit Dokumen Keluar

Gambar II. 30 Tampilan Edit Dokumen Admin

d. Implementasi Antarmuka Detail Dokumen Keluar

Gambar II. 31 Tampilan Detail Dokumen Keluar

 25

6. Bidang
a. Implementasi Antarmuka Bidang
Tampilan antarmuka Bidang berupa table dengan kolom Nama Bidang, Username
Admin, Nama, Tanggal Lahir, Alamat, No. Hp dan terdapat bagian Crud, Detail
Dokumen. Tampilan dapat dilihat pada gambar berikut:

Gambar II. 32 Tampilan Bidang

b. Implementasi Antarmuka Tambah Bidang

Gambar II. 33 Tampilan Tambah Bidang

 26

c. Implementasi Antarmuka Edit Bidang

Gambar II. 34 Tampilan Edit Bidang

d. Implementasi Antarmuka Detail Bidang

Gambar II. 35 Tampilan Detail Bidang

 27

7. Implementasi Antarmuka Login Bidang

Tampilan antarmuka Login Admin digunakan untuk bidang web login ke sistem,
seperti Sekretaris, E-Government, Infastruktur, dan IKP. Tampilan dapat dilihat pada
gambar berikut:

Gambar II. 36 Tampilan Login Bidang

8. Dashboard Bidang
a. Implementasi Antarmuka Halaman Utama Bidang
Tampilan antarmuka Halaman Utama Bidang berisi jumlah data Dokumen Masuk,
Dokumen Keluar, dan jumlah Bidang. Tampilan dapat dilihat pada berikut:

Gambar II. 37 Tampilan Halaman Utama Bidang

 28

b. Implementasi Antarmuka Profil Bidang

Tampilan antarmuka Profil Bidang menampilkan Detail Bidang seperti ID, Nama
Bidang, Username Bidang, Nama Lengkap, Tanggal Lahir, Alamat, No.Hp serta ada
Foto. Tampilan dapat dilihat pada berikut:

Gambar II. 38 Tampilan Profil Bidang

c. Implementasi Antarmuka Edit Profil Bidang

Tampilan antarmuka Edit Profil Bidang, disini bidang dapat mengedit Nama
Lengkap, Username Admin, Password yang akan digunakan untuk login, serta foto.
Tampilan dapat dilihat pada berikut:

Gambar II. 39 Tampilan Edit Profil Bidang

 29

9. Dokumen Masuk Bidang

a. Implementasi Antarmuka Dokumen Masuk Bidang
Tampilan antarmuka Dokumen Masuk Bidang hanya terdapat fitur Download
Dokumen dan Detail Dokumen, serta bisa memilih dokumen berdasarkan Bulan dan
Tahun Dokumen. Tampilan dapat dilihat pada berikut:

Gambar II. 40 Tampilan Dokumen Masuk Bidang

b. Implementasi Antarmuka Detail Dokumen Masuk Bidang

Gambar II. 41 Tampilan Detail Dokumen Masuk Bidang

 30

10. Dokumen Keluar Bidang

a. Implementasi Antarmuka Dokumen Keluar Bidang
Tampilan antarmuka Dokumen Keluar Bidang hanya terdapat Download Dokumen
dan Detail Dokumen. Tampilan dapat dilihat pada berikut:

Gambar II. 42 Tampilan Dokumen Keluar Bidang

b. Implementasi Antarmuka Detail Dokumen Keluar Bidang

Gambar II. 43 Tampilan Detail Dokumen Keluar Bidang

 31

11. Implementasi Nomor Dokumen Keluar

Untuk mengambil nomor urut pada Dokumen Keluar. Tampilan dapat dilihat berikut:

Gambar II. 44 Tampilan Nomor Dokumen Keluar

2.2.6 Pembuatan Kode Program

1. Pembuatan Kode Program Front end Halaman Utama
<?php
session_start();
include "koneksi/ceksession.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Arsip Dokumen Diskominfo Kota Tegal</title>
<meta name="description" content="Free Bootstrap Theme by
BootstrapMade.com">
<meta name="keywords" content="free website templates, free
bootstrap themes, free template, free bootstrap, free website
template">

<link rel="stylesheet" type="text/css"

href="https://fonts.googleapis.com/css?family=Roboto:400,300|Raleway:30
0,400,900,700italic,700,300,600">
<link rel="stylesheet" type="text/css"
href="css/jquery.bxslider.css">
 32

<link rel="stylesheet" type="text/css" href="css/font-

awesome.min.css">
<link rel="stylesheet" type="text/css"
href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" href="img/icon.ico">

</head>
<body>

<div class="loader"></div>
<div id="myDiv">
<!--HEADER-->
<div class="header">
<div class="bg-color">
<header id="main-header">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ARSIP DOKUMEN <span
class="logo-dec">DISKOMINFO KOTA TEGAL</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#main-
header">Beranda</a></li>
<li class=""><a href="#feature">Tentang</a></li>
<li class=""><a href="#portfolio">Tugas</a></li>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-
toggle" data-toggle="dropdown" aria-expanded="false">
<img src="" alt="">Masuk
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-
right">
<li><a href="admin/login"><i class="fa fa-sign-out
pull-right"></i> Admin</a></li>
<li><a href="bagian/login"><i class="fa fa-sign-out
pull-right"></i> Bidang</a></li>
 33

</ul>
</li>
</ul>
</ul>
</div>
</div>
</nav>
</header>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="banner-info text-center wow fadeIn delay-05s">
<h2 class="bnr-sub-title"></h2>
<div class="logo">
<img src="img/logo.png" alt="" />
</div>
<h3 class="bnr-sub-title">SISTEM INFORMASI PENGARSIPAN
DOKUMEN</h3>
<h3 class="bnr-sub-title"><span class="logo-
dec">DISKOMINFO KOTA TEGAL</span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ HEADER-->
<!---->
<section id="feature" class="section-padding wow fadeIn delay-05s">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="service-title pad-bt15">Tentang</h2>
<p class="sub-title pad-bt15">Website ini berguna untuk
pengarsipan Dokumen Masuk dan Dokumen Keluar di Diskominfo Kota
Tegal</p><p>Dokumen diarsipkan dalam format PDF lalu disesuaikan nomor
urutnya.</p>
<hr class="bottom-line">
<p class="sub-title pad-bt15">Pengarsipan Dokumen
itu<strong> PENTING</strong></p>
<hr class="bottom-line">
</div>
<div class="col-md-4">
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<div class="wrap-item text-center">
<div class="item-img">
<img src="img/inbox.png">
 34

</div>
<h3 class="pad-bt15">Surat Masuk</h3>
</div>
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<div class="wrap-item text-center">
<div class="item-img">
<img src="img/outbox.png">
</div>
<h3 class="pad-bt15">Surat Keluar</h3>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</section>
<!---->
<!---->
<section id="portfolio" class="section-padding wow fadeInUp delay-
05s">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="service-title pad-bt15">Tugas</h2>
<hr class="bottom-line">
<p class="sub-title pad-bt15">"Tugas Pokok: Dinas
Komunikasi dan Informatika Kota Tegal mempunyai tugas membantu Wali
Kota
melaksanakan urusan pemerintahan yang menjadi kewenangan
daerah bidang komunikasi dan informatika, bidang persandian, dan bidang
statistik."</p>
<hr class="bottom-line">
</div>
</div>
</div>
</section>
<!---->
<!---->
<section id="testimonial" class="wow fadeInUp delay-05s">
<div class="bg-testicolor">
<div class="container section-padding">
<div class="row">
<div class="testimonial-item">
<ul class="bxslider">
<li>
<blockquote>
 35

<img src="img/Grafikartes-Flat-Retro-Modern-Maps.ico"
class="img-responsive">
<p>Jl. Ki Gede Sebayu No. 12 Tegal </p>
<p>Telp : 0283 355137, 0283 355138 </p>
<p>Fax : 0283 353673 </p>
<p>e-mail : info@tegalkota.go.id </p>
</blockquote>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!---->
<!---->
<!---->
<!---->
<footer id="footer">
<div class="container">
<div class="row text-center">
<div class="credits">
<a href="https://diskominfo.tegalkota.go.id/">DISKOMINFO
KOTA TEGAL</a>
</div>
</div>
</div>
</footer>
<!---->
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/custom.js"></script>
<script src="contactform/contactform.js"></script>

</body>
</html>
 36

Hasil dari script tersebut adalah:

Gambar II. 45 Hasil dari script Front End

2.2.7 Pengujian Unit

Pengujian Black-Box
Metode Black box Testing merupakan sebuah metode yang dipakai untuk menguji
sebuah software tanpa harus memperhatikan detail software. Pada pengujian black box
dilakukan hanya mengambil hasil eksekusi melalui data uji dan memeriksa fungsional
dari perangkat lunak (Krismadi, et al., 2019) (Aziz et al., 2020)

Pengujian Black-Box bukan merupakan alternatif dari Teknik pengujian White-

Box, tetapi merupakan pedekatan komplementer yang kemungkinan besar mampu
menggukap kesalahan dalam kategori sebagai berikut:
1. Fungsi – fungsi yang tidak benar atau hilang
2. Kesalahan interface
3. Kesalahan dalam struktur dan atau akses database eksternal
4. Kesalahan kinerja
5. Inisilisasi dan Kesalaman terminasi
Pengujian Black-Box cenderung diapliksikan selama tahap akhir pengujian,
karena pengujian Black-Box memperhatikan struktur control maka perhatian berfokus
pada domain informasi.
 37

Tabel II. 5 Pengujian Black-Box

Skenario Text Case Hasil Yang Hasil Kesimpulan

Diharapkan Pengujian
Mengosong System akan Valid
kan menampilan
Username peringatan
dan berupa
Password “Please fill
lalu klik out this fied”
tombol
login
Mengisi System akan Valid
Username menampilkan
atau pesan
Password “Username
yang salah atau
Password
anda salah,
Silahkan
Ulangi”
Mengisi System Valid
Username menerima
dan akses login
Password dan masuk ke
untuk admin halaman
dengan admin
benar
 38

BAB III

PENUTUP

3.1 Kesimpulan
Berdasarkan analisis pembuatan Sistem Informasi Arsip Dokumen Diskominfo
Kota Tegal (SIPMENKO) Berbasis Website ini, maka dapat dibuat kesimpulan yaitu
sebagai berikut:

1. Website sistem informasi arsip dokumen bertujuan untuk meningkatkan

produktivitas dan mengembangkan pegawai menjadi lebih efektif, namun tetap
efisien.
2. Kator Dinas Komunikasi dan Informatika Kota Tegal sistem yang sedang berjalan
masih menggunakan cara lama atau manual dengan menyimpan arsip dalam bentuk
fisik dan disimpan dalam sebuah Folio Bindex dan kami akan membuat Sistem
Informasi Arsip Dokumen Diskominfo Kota Tegal (SIPMENKO) Berbasis Website.
3. Dengan adanya website sistem informasi arsip dokumen ini, pegawai lebih mudah
untuk mengelola data dokumen masuk pegawai perbidangnya dan pegawai lebih
mudah mengakses dokumen lama yang akan dibutuhkan dengan efisien.

3.2 Saran
Sistem Informasi Arsip Dokumen Diskominfo Kota Tegal (SIPMENKO) Berbasis
Website masih memiliki keterbatasan, sehingga penulis ingin memberikan saran yang
nantinya dapat mendukung pengembangan system ini lebih lanjut yaitu sebagai berikut:

1. System yang telah dibuat masih memerlukan perbaikan karena masih memiliki
banyak kelemahan dalam memenuhi kebutuhan, baik kebutuhan untuk admin
maupun kebutuhan untuk bidang
2. Dari segi tampilan halaman web, diharapakan untuk bisa disempurnakan lagi agar
lebih menarik dan ditambahkan fitur – fitur yang nantinya disesuaikan dengan
kebutuhan sehingga bisa memudahkan pegawai.
3. Sistem yang dirancang ini tidak dimaksudkan untuk mengganti keseluruhan system
yang sudah berjalan, tetapi untuk melengkapi sistem yang ada. Kiranya kedua cara
dapat dijalankan secara bersamaan demi mempermudah pegawai.
 DAFTAR PUSTAKA

Ade Pattianakotta, A. A. (2015). Sistem Informasi Arsip Dokumen Kantor. E-journal Teknik
Elektro dan Komputer, 7.

Handoko, R. R. (2020). APLIKASI MANAJEMEN PENGARSIPAN DOKUMEN PADA DINAS

KOMUNIKASI DAN INFORMATIKA KABUPATEN BARITO KUALA. Artikel
RADEN_RAJIF_HANDOKO, 14.

Hay's, R. N., Purnamasari, A., & Maulana, A. (2018). RANCANG BANGUN APLIKASI BANK DATA
BERBASIS WEB DILINGKUNGAN SKPD KABUPATEN LEBAK. Jurnal Sistem Informasi, 5.

Hidayat, R. (2017). Aplikasi Penjualan Jam Tangan Secara Online. Jurnal Teknik Komputer, 7.

Kurniawan, F., Khrisnawati, E. A., Hadiwiyanti, R., & Fitri, A. S. (2022). PENGUJIAN SISTEM
INFORMASI MANAJEMEN SISWA BERBASIS WEBSITE MENGGUNAKAN METODE
BLACK BOX DAN WHITE BOX. Prosiding Seminar Nasional Teknologi dan Sistem
Informasi (SITASI), 13.

Lesmana, R. A. (2020). RANCANGAN APLIKASI ARSIP DISKOMINFO PROVINSI SUMATERA

SELATAN. Laporan KKP Robby Arief Lesmana, 28.

Lubis, R. A., & Samsudin. (2022). PERANCANGAN APLIKASI ARSIP SURAT BERBASIS WEB DI
DINAS KOMUNIKASI DAN INFORMATIKA KABUPATEN MANDAILING NATAL. Artikel, 8.

39
40