LAPORAN KERJA PRAKTIK DI DINAS KOMUNIKASI DAN

INFORMATIKA KOTA PROBOLINGGO

LAPORAN KERJA PRAKTIK

Oleh:
Raul Imam Ghozali 361655401155
Hasan Mabruri 361655401158

PROGRAM STUDI DIPLOMA III

PROGRAM STUDI TEKNIK INFORMATIKA
POLITEKNIK NEGERI BANYUWANGI
2018
LAPORAN KERJA PRAKTIK DI DINAS KOMUNIKASI DAN
INFORMATIKA KOTA PROBOLINGGO

LAPORAN KERJA PRAKTIK

Kerja Praktik Ini Dibuat dan Diajukan Untuk Memenuhi Salah Satu Syarat
Kelulusan Mata Kuliah Kerja Praktik di Program Studi Teknik Informatika
Politeknik Negeri Banyuwangi

Oleh:
Raul Imam Ghozali 361655401155
Hasan Mabruri 361655401158

PROGRAM STUDI DIPLOMA III

PROGRAM STUDI TEKNIK INFORMATIKA
POLITEKNIK NEGERI BANYUWANGI
2018

i
“---Halaman ini sengaja dikosongkan---”

ii
 HALAMAN PENGESAHAN I

LAPORAN KERJA PRAKTIK

LAPORAN KERJA PRAKTIK DI DINAS KOMUNIKASI DAN

INFORMATIKA KOTA PROBOLINGGO

Disusun Oleh :
Raul Imam Ghozali 361655401155
Hasan Mabruri 361655401158

Telah diperiksa dan disetujui oleh pembimbing

Pada tanggal : ………………………

Dosen Pembimbing

Dedy Hidayat Kusuma, S.T., M.Cs.

NIK. 2011.36.079
Mengetahui
Koordinator Koordinator KP
Program Studi
Teknik Infomatika

Moh. Dimyati A., S.T, M.Kom Herman Yuliandoko, S.T, M.T

NIK. 2008.36.004 NIK. 2011.36.073

iii
…Halaman Ini Sengaja Dikosongkan…

iv
 HALAMAN PENGESAHAN II

LAPORAN KERJA PRAKTIK

LAPORAN KERJA PRAKTIK DI DINAS KOMUNIKASI DAN

INFORMATIKA KOTA PROBOLINGGO

Disusun Oleh :
Raul Imam Ghozali 361655401155
Hasan Mabruri 361655401158

Telah diperiksa dan disetujui sebagai Laporan Kerja Praktik di Dinas Komunikasi
Dan Informatika Kota Probolinggo
Pada tanggal : September 2018

Pembimbing Lapangan Kepala Dinas

Mar’ie Hendrianto, S.Kom, M.M Aman Suryaman, AP. M.M

NIP. 19800628 2000604 1 012 NIP. 19751206 199412 1 001

v
“---Halaman ini sengaja dikosongkan---”

vi
 KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT, atas segala limpahan rahmat
dan hidayah-Nya serta Nabi Muhammad SAW yang telah menjadi junjungan
hidup. Segala puji bagi Allah sehingga penulis dapat melaksanakan Kerja Praktik
serta menyelesaikan Laporan Kerja Praktik Aplikasi Rancang Bangun Website
Sistem Informasi Pengarsipan Surat Pertanggung Jawaban Dinas Komunikasi dan
Informatika Kota Probolinggo.
Laporan ini diajukan sebagai syarat untuk mencapai kelulusan dalam
Program Studi Teknik Informatika Diploma III Politeknik Negeri Banyuwangi.
Selama penyusunan laporan kerja praktik ini, penulis telah banyak
mendapat bimbingan, bantuan dan motivasi dari berbagai pihak. Untuk itu penulis
mengucapkan terima sebesar–besarnya dan perhargaan setinggi-tingginya kepada:
1. Kedua Orang Tua beserta keluarga yang senantiasa selalu memberikan dukungan
sepenuhnya atas Kerja Praktik ( KP ) yang penulis laksanakan.
2. Bapak Son Kuswadi, Dr.Eng. selaku Direktur Politeknik Negeri Banyuwangi.
3. Bapak Moh. Dimyati A., S.T, M.Kom selaku Koordinator Program Studi Teknik
Informatika
4. Bapak Herman Yuliandoko, S.T.,M.T. selaku Koordinator Kerja Praktik.
5. Bapak Dedy Hidayat Kusuma, S.T,.M.Cs selaku Dosen Pembimbing Kerja
praktik
6. Bapak Aman Suryaman, AP. M.M selaku Kepala Dinas Komunikasi dan
Informatika Kota Probolinggo.
7. Bapak Mar’ie Hendrianto, S.Kom, M.M selaku Pembimbing Kerja Praktik di
Dinas Komunikasi dan Informatika Kota Probolinggo yang telah memberikan
panduan selama dalam pelaksanaan Kerja Praktik berlangsung.
8. Keluarga Besar Politeknik Negeri Banyuwangi dan Dinas Komunikasi dan
Informatika Kota Probolinggo .

vii
 “---Halaman ini sengaja dikosongkan---”

9. Juga pihak lain yang ikut memberi dukungan kepada penulis namun tak mungkin
dapat disebutkan satu persatu.
Tanpa dukungan dan motivasi mereka semua, penulis tidak mungkin dapat
menyelesaikan tugas laporan ini dengan baik. Penulis menyadari bahwa dalam

viii
penyusunan Laporan Kerja Praktik ini masih terdapat kekurangan yang
memerlukan penyempurnaan. Untuk itu penulis mengharapkan saran dan kritik
yang bersifat membangun sehingga dapat menambah kemampuan dan
pengetahuan penulis. Akhirnya penulis berharap semoga Laporan Kerja Praktik
ini dapat bermanfaat bagi banyak orang serta instansi pada khususnya.
Probolinggo, 23 Agustus 2018

Penulis

ix
 DAFTAR ISI

HALAMAN JUDUL ..................................................................................... i

HALAMAN PENGESAHAN I ..................................................................... iii
HALAMAN PENGESAHAN II ................................................................... v
KATA PENGANTAR ................................................................................... vii
DAFTAR ISI ................................................................................................. ix
DAFTAR GAMBAR ..................................................................................... xi
DAFTAR TABEL ......................................................................................... xiii
BAB 1 PENDAHULUAN ............................................................................. 1
1.1 Latar Belakang Masalah ................................................................................ 1
1.2 Perumusan Masalah ....................................................................................... 2
1.3 Batasan Masalah ............................................................................................ 2
1.4 Tujuan ............................................................................................................ 2
1.5 Manfaat .......................................................................................................... 3
BAB 2 GAMBARAN UMUM INSTANSI .................................................. 5
2.1 Sejarah Diskominfo Kota Probolinggo ......................................................... 5
2.2 Visi dan Misi Diskominfo Kota Probolinggo ................................................ 5
2.3 Denah Lokasi Diskominfo Kota Probolinggo ............................................... 6
2.4 Struktur Organisasi Diskominfo Kota Probolinggo ...................................... 7
2.5 Data Pembimbing Lapangan ......................................................................... 9
BAB 3 HASIL KERJA PRAKTIK ............................................................... 11
3.1 Waktu dan Tempat Kegiatan ......................................................................... 11
3.2 Jadwal Kegiatan ............................................................................................. 11
3.3 Teori Penunjang............................................................................................. 11
3.3.1 PHP ............................................................................................................... 11
3.3.2 HTML ............................................................................................................ 11
3.3.3 MySQL ........................................................................................................... 11
3.3.4 Bootstrap ....................................................................................................... 11
3.3.5 XAMPP .......................................................................................................... 11
3.4 Hasil Kerja Praktik ........................................................................................ 14
3.4.1 Gambaran Sistem yang Diusulkan ................................................................ 14
3.4.2 Use-Case Diagram ......................................................................................... 14
3.4.3 ERD (Entity Relationship Diagram) .............................................................. 14
3.4.4 Flowchart ...................................................................................................... 14
3.4.5 Halaman Aplikasi Website............................................................................. 14
BAB 4 PENUTUP ......................................................................................... 39
4.1 Kesimpulan .................................................................................................... 39
4.2 Saran .............................................................................................................. 39
DAFTAR PUSTAKA .................................................................................... 41
LAMPIRAN

x
“---Halaman ini sengaja dikosongkan---”

xi
 DAFTAR GAMBAR

Gambar 2.1 Kantor Diskominfo Kota Probolinggo .................................. 5

Gambar 2.2 Denah Lokasi Diskominfo Kota Probolinggo ....................... 6
Gambar 2.3 Situasi Jam Kantor Diskominfo Kota Probolinggo ............... 7
Gambar 2.4 Bagan Struktural Diskominfo Kota Probolinggo .................. 8
Gambar 3.1 Desain Sistem yang Diusulkan .............................................. 15
Gambar 3.2 Use-Case Diagram Sistem Informasi SPJ.............................. 15
Gambar 3.3 ERD Sistem Informasi SPJ .................................................... 15
Gambar 3.4 Flowchart Login .................................................................... 19
Gambar 3.5 Flowchart data SPJ ................................................................ 20
Gambar 3.6 Flowchart Pinjam .................................................................. 22
Gambar 3.7 Flowchart Pengembalian ....................................................... 23
Gambar 3.8 Flowchart Cetak SPJ ............................................................. 23
Gambar 3.9 Halaman Login ...................................................................... 24
Gambar 3.10 Halaman Home .................................................................... 25
Gambar 3.11 Halaman Arsip SPJ .............................................................. 25
Gambar 3.12 Halaman Tambah SPJ .......................................................... 26
Gambar 3.13 Halaman Ubah SPJ .............................................................. 27
Gambar 3.14 Halaman Pinjam................................................................... 27
Gambar 3.15 Halaman Tambah Pinjam .................................................... 28
Gambar 3.16 Halaman Ubah Pinjam ......................................................... 29
Gambar 3.17 Halaman Administrasi Program Surat ................................. 29
Gambar 3.18 Halaman Tambah Program .................................................. 30
Gambar 3.19 Halaman Ubah Program ...................................................... 31
Gambar 3.20 Halaman Administrasi Kegiatan Surat................................. 31
Gambar 3.21 Halaman Tambah Kegiatan ................................................. 32
Gambar 3.22 Halaman Ubah Kegiatan ...................................................... 32
Gambar 3.23 Halaman Cetak SPJ ............................................................. 33
Gambar 3.24 Halaman User ...................................................................... 34
Gambar 3.25 Halaman Tambah User ........................................................ 34
Gambar 3.26 Halaman Ubah User ............................................................ 35
Gambar 3.27 Halaman Data Backup ......................................................... 35
Gambar 3.28 Halaman Data Restore ......................................................... 36
Gambar 3.29 Tampilan Unduh SPJ ke Microsoft Excel .......................... 36
Gambar 3.30Tampilan Cetak SPJ ke PDF ................................................ 37
Gambar 3.31 Tampilan Cetak Pinjam ke PDF .......................................... 37

xii
“---Halaman ini sengaja dikosongkan---”

xiii
 DAFTAR TABEL

Tabel 3.1 Jadwal Kerja Praktik.................................................................. 11

Tabel 3.2 Tabel User ................................................................................. 17
Tabel 3.3 Tabel Arsip SPJ ......................................................................... 17
Tabel 3.4 Tabel Peminjaman ..................................................................... 18
Tabel 3.5 Tabel Program ........................................................................... 18
Tabel 3.6 Tabel Kegiatan........................................................................... 19

xiv
“---Halaman ini sengaja dikosongkan---”

xv
 BAB 1
PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi informasi yang semakin pesat dapat membuat
pola kehidupan masyarakat untuk menggunakan teknologi informasi. Dengan
keberadaan internet menjadi sarana untuk mendapatkan dan menyebarkan
informasi dengan cepat. Internet memberikan keuntungan bagi manusia baik itu
dalam urusan individu maupun instansi seperti pendidikan, pemerintahan, dan
komersial. Salah satu program studi di Politeknik Negeri Banyuwangi adalah
Program Studi Teknik Informatika. Lulusan dari Program Studi Teknik
Informatika dapat berperan sebagai Engineer di bidang pengembangan teknologi
dalam suatu perusahaan, instansi, atau organisasi. Untuk mencetak tenaga
Engineer yang profesional dan mahir, Politeknik Negeri Banyuwangi menerapkan
kompetensi bagi para mahasiswa dengan teori dan praktik. Salah satu agenda
kegiatan untuk mengaplikasikan kompetensi yang didapat di perkuliahan adalah
melalui kerja praktik.
Tujuan Kerja Praktik (KP) merupakan untuk mengetahui proses sistem
yang sedang berjalan di perusahaan atau tempat dinas, kemudian menganalisis dan
menjadikan sistem itu lebih baik. Selain itu dengan menjalani Kerja Praktik
mahasiswa dapat mendapatkan pengalaman dan gambaran bagaimana dunia kerja
itu sesungguhnya. Tentunya untuk mencapai keberhasilan dalam Kerja Praktik ini,
diperlukan peran serta berbagai pihak, baik dari pihak kampus seperti dosen
pembimbing maupun teman-teman mahasiswa dan dari instansi terkait.
Dinas Komunikasi dan Informatika Kota Probolinggo beralamatkan di
Tisnonegaran, Kanigaran, Kota Probolinggo, Jawa Timur 67211. Tugas pokok
dari instansi ini adalah penyedia urusan komunikasi dan informatika dan urusan
usaha statistik. Dengan pelayanan penyedia bidang informatika untuk
mempermudah dalam pengelolaan data arsip surat pertanggung jawaban (SPJ)
yang ada di Dinas Komunikasi dan Informatika Kota Probolinggo supaya lebih
efisian dan berkemajuan. Selama ini untuk pengelolaan data arsip bersifat
konvensional atau menggunakan Microsoft Excel yang hanya menyimpan data

1
 arsip surat pertanggung jawaban tanpa bisa mengelola tindakan dari surat
pertanggung jawaban tersebut.
1.2 Perumusan Masalah
Permasalahan yang akan dibahas pada penelitian ini adalah:
1. Bagaimana membuat export data yang menyesuaikan dari tanggal SPPD (Surat
Perintah Pencairan Dana).
2. Bagaimana membuat dropdown pada program dan kegiatan SPJ bisa di tambah,
ubah, dan hapus.
1.3 Batasan Masalah
Berdasarkan rumusan masalah, penulis perlu memberikan batasan masalah
sebagai berikut:
1. Database yang digunakan dalam Aplikasi Rancang Bangun Website Sistem
Informasi Pengarsipan Surat Pertanggung Jawaban Dinas Komunikasi dan
Informatika Kota Probolinggo ini adalah MySQL.
2. Bahasa yang digunakan dalam Aplikasi Rancang Bangun Website Sistem
Informasi Pengarsipan Surat Pertanggung Jawaban Dinas Komunikasi dan
Informatika Kota Probolinggo ini yaitu bahasa pemograman HTML, PHP.
3. Pengelolaan data hanya dilakukan oleh pihak-pihak tertentu yang telah ditunjuk
atau ditentukan oleh Dinas Komunikasi dan Informatika Kota Probolinggo.
4. Tidak membahas bagian keamanan website
1.4 Tujuan
Pelaksanaan Adapun tujuan kami melaksanakan Kerja Praktik ini antara
lain adalah:
1. Untuk memenuhi persyaratan akademik Politeknik Negeri Banyuwangi yaitu
kewajiban Kerja Praktik yang harus ditempuh oleh seluruh mahasiswa Diploma
III.
2. Membuat website untuk arsip surat pertanggung jawaban yang ada di Dinas
Komunikasi dan Informatika Kota Probolinggo.
3. Agar dapat memudahkan dalam pengelolaan data arsip surat pertanggung jawaban
dengan adanya aplikasi website tersebut.
4. Mengembangkan dan mengaplikasikan semua materi yang sudah didapat dari
proses perkuliahan.

2
1.5 Manfaat
Kerja Praktik memberikan manfaat terutama bagi Mahasiswa, Perguruan
Tinggi, Perusahaan terkait dan Masyarakat.
1. Bagi Mahasiswa
1) Menerapkan dan mengaplikasikan ilmu teoritis yang telah didapat di bangku
kuliah ke dalam praktik yang sesungguhnya.
2) Mendapatkan pengalaman tentang kerja teknis di lapangan yang sesungguhnya,
sehingga akan didapat gambaran yang sama tentang berbagai hal mengenai dunia
kerja yang aplikatif.
3) Mengenalkan dan membiasakan diri terhadap suasana kerja sebenarnya sehingga
dapat membangun etos kerja yang baik, serta sebagai upaya untuk memperluas
cakrawala wawasan kerja.
2. Bagi Perguruan Tinggi
Program Studi Teknik Informatika Politeknik Negeri Banyuwangi dapat
memiliki data mengenai lembaga dan instansi yang mempunyai hubungan
langsung dengan pekerjaan Teknik Informatika di Indonesia. Data ini selain
sangat penting dari segi pola pengembangan kurikulum, aspek tenaga kerja juga
akan banyak manfaatnya bagi perguruan tinggi, untuk menyelaraskan
perkembangannya dengan dunia profesi yang berhubungan. Salain itu Kunjungan
mahasiswa kerja praktik dapat dimanfaatkan sebagai mitra tukar pikiran dalam
menghadapi berbagai masalah yang terjadi kemudian di cari solusinya yang lebih
baik.
3. Bagi Instansi
1) Tugas mahasiswa yang merupakan inti dari program KP, yaitu dapat
mengidentifikasi studi kasus dan memecahkan permasalahan yang ada, sehingga
dapat dimanfaatkan oleh instansi untuk menyelesaikan suatu topik secara khusus
secara kerja sama.
2) Dapat menjalin suatu kemitraan antara instansi dengan dunia pendidikan dalam
hal ini adalah Politeknik Negeri Banyuwangi, terutama dalam menyalurkan
tenaga kerja yang handal.
3) Mahasiswa dapat membantu dan meringankan pekerjaan yang ada di perusahaan
Dinas Komunikasi dan Informatika Kota Probolinggo.

3
4. Bagi Masyarakat
Mahasiswa dapat berbagi ilmu yang diperoleh dari kerja praktik dan
membantu permasalahan yang ada disekitar masyarakat yang berhubungan
dengan IT.

4
 BAB 2
GAMBARAN UMUM INSTANSI

2.1 Sejarah Diskominfo Kota Probolinggo

Sebagaimana yang tertuang pada Perda nomor 04 tahun 2012 tentang
organisasi perangkat daerah Kota Probolinggo dan Perwali nomor 28 tahun 2012
tentang tupoksi dinas daerah Kota Probolinggo pasal 123. Maka lahirlah Dinas
Komunikasi dan Informatika, pada 5 Desember 2012 di lingkungan Pemerintah
Kota Probolinggo.
Meskipun baru berdiri, Diskominfo selalu meningkatkan profesionalisme
dalam bidang komunikasi dan informasi sebagai wujud pelayanan prima kepada
masyarakat. Kami bekerja dengan sepenuh hati dengan meningkatkan kualitas
kapasitas layanan. Tidak kenal kata menyerah dalam memberikan pelayanan
kepada masyarakat, karena kami adalah pelayan masyarakat. Pada gambar 2.1
Kantor Dinas Komunikasi dan Informatika Kota Probolinggo saat ini.

Gambar 2.1 Kantor Diskominfo Kota Probolinggo

2.2 Visi Dan Misi Diskominfo Kota Probolinggo

Dalam menjalankan visi & misi strategis, Dinas Komunikasi dan
Informatika didukung oleh tenaga muda yang terampil, profesional dan
berkompeten dalam bidangnya. Selain itu, kami senantiasa mengembangkan
infrastruktur teknologi informasi komunikasi dan meningkatkan penyelenggaraan
jasa pos dan telekomunikasi, guna menunjang kinerja aparatur negara.

5
 Visi
 Terwujudnya Komunikasi dan Informatika yang Handal Berbasis Teknologi
Informasi Menuju Probolinggo Kota Jasa yang Berwawasan Lingkungan.
 Misi
 Terwujudnya tertib administrasi kepegawaian dan kearsipan serta peningkatan
hubungan interaktif melalui pemanfaatan teknologi informasi.
 Meningkatnya jumlah penyebaran informasi publik ke masyarakat Kota
Probolinggo.
 Terwujudnya komunikasi yang efektif dan efisien dalam rangka mewujudkan
Kota Probolinggo maju dan sejahtera.
 Terwujudnya sumber daya telematika yang handal dan berdaya saing serta ramah
lingkungan.
2.3 Denah Lokasi Diskominfo Kota Probolinggo
Dinas Komunikasi dan Informatika Kota Probolinggo yang berada di
tengah-tengah Kota Probolinggo, beralamatkan di Tisnonegaran, Kanigaran, Kota
Probolinggo, Jawa Timur 67211. Pada gambar 2.2 yang menunjukkan denah
lokasi dari Dinas Komunikasi dan Informatika Kota Probolinggo.

Gambar 2.2 Denah Lokasi Diskominfo Kota Probolinggo

2.4 Struktur Organasasi Diskominfo Kota Probolinggo

6
 Struktur organisasi Dinas Komunikasi dan Informatika Kota Probolinggo
berdasarkan Peraturan Daerah Kota Probolinggo Nomor 4 Tahun 2012 tentang
Organisasi Perangkat Daerah Kota Probolinggo.
Peraturan Walikota Probolinggo nomor 96 tahun 2016 tentang Kedudukan,
Susunan Organisasi, Uraian Tugas dan Fungsi serta Tata Kerja Dinas Komunikasi
dan Informatika Kota Probolinggo. Suasana jam kerja di kantor Diskominfo Kota
Probolinggo yang ditunjukkan pada gambar 2.3.

Gambar 2.3 Situasi Jam Kantor Diskominfo Kota Probolinggo

Struktur Sesuai Jabatan:

 KEPALA DINAS;
 SEKRETARIAT, membawahi:
1. Subbagian Tata Usaha;
2. Subbagian Program; dan
3. Subbagian Keuangan.
 BIDANG PENGELOLAAN INFORMASI PUBLIK, membawahi:
1. Seksi Pelayanan Informasi;
2. Seksi Pengelolaan Data dan Statistik Sektoral; dan
3. Seksi Media Publik.
 BIDANG PENGELOLAAN KOMUNIKASI PUBLIK, membawahi:
1. Seksi Pengelolaan Opini Publik;
2. Seksi Layanan Media; dan
3. Seksi Kemitraan Komunikasi Publik.
 BIDANG TEKNOLOGI INFORMASI DAN KOMUNIKASI, membawahi:
1. Seksi Infrastruktur dan Teknologi;

7
 2. Seksi Pengelolaan Data dan Integrasi Sistem Informasi; dan
3. Seksi Keamanan Informasi, Telekomunikasi dan Persandian.
 BIDANG LAYANAN E-GOVERNMENT, membawahi:
1. Seksi Pengembangan Aplikasi;
2. Seksi Pengembangan Ekosistem e-Government; dan
3. Seksi Tata Kelola e-Government.
 Unit Pelaksana Teknis; dan
 Kelompok Jabatan Fungsional.
Fungsional (pranata komputer, pranata humas, dan pranata statistisi) Jabatan yang
sesuai dengan bidang ahlinya.
Gambar 2.4 yang menunjukkan bagan struktur yang ada di Dinas Komunikasi dan
Informatika Kota Probolinggo yang menunjukkan setiap bidangnya.

2.5 Data Pembimbing Lapangan

Data Pribadi
Nama : Mar’ie Hendrianto, S.Kom, M.M
Jabatan: Seksi Pengembangan Aplikasi
Telp / Hp : 085231017391
Alamat : Jl. Cokroaminoto Gang Siam 67
Email : won9ban9er@gmail.com

8
9
 “---Halaman ini sengaja dikosongkan---”

BAB 3
HASIL KERJA PRAKTIK

3.1 Waktu dan Tempat Kegiatan

Kerja Praktik dilaksanakan dalam rentang waktu minimal 1 bulan dan
maksimal 2 bulan, dan dilaksanakan pada: 9 Juli – 7 September 2018. Waktu
pelaksanaan dapat diubah, diperpanjang atau diperpendek sesuai dengan
kebijaksanaan instansi penyelenggara.
Tempat : Dinas Komunikasi dan Informatika Probolinggo
Hari Kerja : Senin – Jumat
Waktu Kerja : 08.00 – 16.00 WIB
Alamat : Tisnonegaran, Kanigaran, Kota Probolinggo, Jawa Timur

10
 67211
3.2 Jadwal Kegiatan
Adapun jadwal kegiatan kerja praktik telah disusun seperti pada tabel 3.1.
Tabel 3.1 Jadwal Kerja Praktik
Waktu Pelaksanaan
NO Kegiatan Juli Agustus Sep
1 2 3 4 1 2 3 4 1
1 Orientasi Tempat KP
2 Studi Literatur
Perancangan dan Desain
3
Aplikasi
Pembuatan Program
4
Aplikasi
5 Pengujian dan Implementasi
6 Penyusunan Laporan

3.3 Teori Penunjang

3.3.1 PHP
Software yang menurut Nugroho (2005) berdasarkan tugas akhir dari Bagir
(2005), PHP (PHP hypertext Prepocessor) adalah sebuah bahasa pemrograman
yang berbentuk scripting. Sistem kerja ini menggunakan sistem interpreter bukan
sebagai compiler. Interpreter adalah bahasa yang script-script program tidak
harus diubah dalam bentuk source code. Sedangkan compiler adalah bahasa yang
akan mengubah script-script program kedalam source code, selanjutnya dari
bentuk source code akan dirubah menjadi object code, bentuk dari object code
akan menghasilkan file yang lebih kecil dari file mentah sebelumnya. Selanjutnya
akan berubah menjadi sebuah program yang siap dijalankan tanpa adanya
program bantu pembuatnya, sehingga hasil dari bahasa pemrograman yang
berbentuk compiler akan membentuk sebuah program yang berstatus sebagai
program EXE yang dapat dieksekusi tanpa adanya bantuan dari program
pembuatnya. Bahasa pemrograman PHP adalah bahasa pemrograman yang

11
 bekerja dalam sebuah web server. Script-script PHP yang dibuat harus tersimpan
dalam web server dan dieksekusi atau diproses dalam
server tersebut. Beberapa keunggulan yang dimiliki program PHP:
1. Beberapa server seperti apache, Microsoft IIS, PWS, AOLserver, phttpd, fhttpd,
dan Xitami mampu menjalankan PHP.
2. Tingkat akses PHP lebih cepat serta memiliki tingkat keamanan yang tinggi.
3. Beberapa database yang sudah ada, baik yang bersifat free/gratis ataupun
komersial sangat mendukung akses PHP, diantaranya MySQL, PosgreSQL,
mSQL, Informix, dan MicrosoftSQL server.
PHP mampu berjalan di Linux sebagai platform sistem operasi utama bagi PHP,
tetapi juga dapat berjalan di FreeBSD, Unix, Solaris, windows, dan yang lainnya
3.3.2 HTML
Menurut Sidik (2004) berdasarkan tugas akhir dari Bagir (2005) HTML
(Hypertext Markup Language) yaitu salah satu bahasa scripting yang dapat
menghasilkan halaman website sehingga halaman tersebut dapat diakses setiap
komputer pengakses (client). Dokumen HTML merupakan dokumen yang
disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi
ataupun aplikasi dalam internet.
3.3.3 MySQL
Structure Query Language (SQL) berdasarkan tugas akhir Pujantoko
(2009) adalah sebuah bahasa tabel relasional yang didukung PHP untuk dapat
melakukan koneksi dan query pada tabel. SQL berisi pernyataan yang dapat,
digunakan untuk memasukkan, merubah, menghapus, memilih dan melindungi
data. Secara interprestasi SQL bias digunakan dengan memasukkan sebuah
pernyataan SQL melalui terminal atau mikromputer dan langsung diproses atau
diinterprestasikan, dan hasilnya bias dilihat secara langsung. MySQL mempunyai
query yang sederhana dan menggunakan escape character yang sama dengan php,
selain itu MySQL adalah tabel tercepat saat ini. MySQL termasuk jenis RDBMS
(Relation Tabel Management System). Sehingga istilah seperti tabel, baris dan
kolom tetap digunakan dalam MySQL. Pada MySQL sebuah tabel mengandung
beberapa tabel, tabel terdiri dari sejumlah baris dan kolom. Dalam konteks bahasa
SQL, pada umumnya informasi tersimpan dalam tabel-tabel yang sama logic

12
 merupakan struktur dua dimensi yang terdiri atas baris-baris data (row atau
record) yang berada dalam satu atau lebih kolom. Baris pada tabel sering disebut
sebagai instancedari data sedangkan kolom sering disebut antributes atau field.
Untuk memulai menjalankan MySQL sebelumnya harus dipastikan tabel MySQL
server dalam status aktif/on, untuk memastikannya dapat dilihat pada icon pada
pojok kanan bawah (tracfict) dan warnanya hijau. Apabila belum aktif maka harus
diaktifkan terlebih dahulu, caranya jalankan file winMySQL admin.exe dari
direktori/folder instansi MySQL (misalkan c:\MySQ\bin\winMySQLadmin.exe).
Biasanya untuk pertama kali dijalankan program akan meminta username dan
password yang akan digunakan untuk login atau masuk dan menjalankan serta
mengelola tabel server.
3.3.4 Bootsrap
Berdasarkan tugas akhir Wijayanto (2016) Bootstrap sendiri merupakan
library yang biasa digunakan untuk membuat aplikasi web ataupun situs web
responsive secara cepat, mudah dan gratis. Twitter Bootstrap ini terdiri dari CSS
dan HTML untuk menghasilkan Grid, Layout, Typography, Table, Form,
Navigation dan lain-lain. Selain itu, di dalam Bootstrap juga sudah terdapat
jQuery plugins untuk menghasilkan komponen User Interface yang cantik seperti
Transitions, Modal, Dropdown, Scrollspy, Tooltip, Tab, Alert dan lain-lain.

3.3.5 XAMPP
XAMPP menurut tugas akhir Ginting (2013) adalah perangkat lunak gratis
yang mendukung banyak sistem operasi dan merupakan kompilasi dari beberapa
program. Fungsinya adalah sebagai server yang terdiri sendiri (localcost), yang
terdiri atas program Apache HTTP Server, MySQL database, dan penterjemah
bahasa yang ditulis dengan bahasa pemograman PHP dan Perl. Nama XAMPP
merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL,
PHP dan Perl. Program ini tersedia dalam GNU General Public Lisensi dan
bebas, merupakan web server yang mudah digunakan yang dapat melayani
tampilam halaman web yang dinamis.
Mengenal bagian XAMPP yang biasa digunakan pada umumnya:

13
 a. htdoc adalah folder tempat meletakkan berkas-berkas yang akan dijalankan seperti
berkas PHP, HTML dan skrip lain.
b. phpMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada
dikomputer. Untuk membuka xampp lalu ketikkan alamat berikut
http://localhost/phpMyAdmin, maka akan muncul halaman phpMyAdmin.
c. Kontrol Panel yang berfungsi untuk mengelola layanan (service) XAMPP. Seperti
menghentikan (stop) layanan, ataupun memulai (start).
3.4 Hasil Kerja Praktek
Pada kerja praktik di Dinas Komunikasi dan Informatika Kota
Probolinggo kami membuat sebuah aplikasi website dari Subbagian Tata Usaha
untuk mempermudah dan penunjang kinerja tentang pengarsipan SPJ.
3.4.1 Gambaran Sistem Yang Diusulkan
Sebuah sistem informasi surat pertanggung jawaban yang di usulkan pada
kerja praktik pada gambar 3.1 dimana SPJ sebagai hasil laporan program dan
kegiatan dari setiap bidang di Diskominfo Kota Probolinggo yang dibuat setelah
program dan kegiatan tersebut terleksana. Terdapat empat bidang di Diskominfo
yang membuat SPJ untuk terus dilaporkan terhadap kepala dinas dan diserahkan
terhadap bendahara kemudian akan disimpan dan di input oleh user dari subbag
tata usaha.

14
 Gambar 3.1 Desain Sistem yang Diusulkan
3.4.2 Use-Case Diagram
Use-case diagram yang dimana pada gambar 3.2 menunjukkan sebuah
sistem yang dapat dilakukan oleh admin dan user. Sebuah admin bisa melakukan
semua aktifitas dari sistem informasi surat pertanggung jawaban, sedangkan bagi
user yang tidak bisa dilakukan mengelola database SPJ, mengelola data
pengguna.

15
 LOGIN

MEMASUKAN DATA SPJ

MENGUBAH DATA SPJ

MENGHAPUS DATA SPJ

MELIHAT DATA SPJ

ADMIN USER

MENCETAK DATA SPJ

MENGELOLA DATABASE SPJ

MENGELOLA DATA PENGGUNA

MENGELOLA TRANSAKSI PEMINJAMAN

Gambar 3.2 Use-Case Diagram Sistem Informasi SPJ

Gambar 3.3 ERD Sistem Informasi SPJ

16
3.4.3 ERD (Entity Relationship Diagram)
Pada gambar 3.3 merupakan dari sebuah ERD yang dimana menunjukan
database dari sistem informasi surat pertanggung jawaban yang saling berelasi
dengan tabel satu dan yang lainnya.
Sebuah database sekumpulan dari tabel-tabel yang sistematis, disini akan
menjelaskan dari setiap tabel-tabel yang terdapat dalam ERD pada aplikasi
website sistem informasi SPJ.
1. Tabel User
Tabel 3.2 merupakan tabel user yang berfungsi untuk menyimpan data
admin dan user yang memiliki hak akses login.
Tabel 3.2 Tabel User
Field Name Data Type Field Size Description
Id Int 5 Primary Key,
AUTO_INCREMENT
Username Varchar 50
Password Varchar 50
Fullname Varchar 30
Level Enum admin, user
Jenis_kelamin Varchar 30
Foto Blob

2. Tabel Arsip SPJ

Tabel 3.3 merupakan tabel arsip SPJ yang berfungsi untuk menyimpan
data surat pertanggung jawaban yang diisikan oleh admin.
Tabel 3.3 Tabel Arsip SPJ
Field Name Data Type Field Description
Size
Id Int 10 Primary Key,
AUTO_INCREMENT
No_boks Varchar 10
Program Varchar 100
Kegiatan Varchar 150
No_sppd Varchar 200
Uraian Varchar 400
Tanggal_sppd Date
Tanggal_pencairn Date

17
 Keterangan Varchar 100
File Blob
Status Varchar 20

3. Tabel Piminjaman
Tabel 3.4 merupakan tabel Peminjaman yang berfungsi untuk menyimpan
data peminjaman surat pertanggung jawaban yang diisikan oleh admin.
Tabel 3.4 Tabel Peminjaman
Field Name Data Type Field Description
Size
Id_pinjam Int 10 Primary Key,
AUTO_INCREMENT
Id_sppd Varchar 10
Nip Varchar 50
Nama Varchar 250
Jabatan Varchar 50
Tanggal_pinjam Date
Tanggal_kembali Date

4. Tabel Program
Tabel 3.5 merupakan tabel Program yang berfungsi untuk menyimpan data
program pada surat pertanggung jawaban yang diisikan oleh admin nantinya akan
menjadikan isi dropdown pada pilihan program saat penambahan dan perubahan
pada data surat pertanggung jawaban.
Tabel 3.5 Tabel Program
Field Name Data Type Field Size Description
Id Int 10 Primary Key,
AUTO_INCREMENT
Nama_program Varchar 100

5. Tabel Kegiatan
Tabel 3.6 merupakan tabel Kegiatan yang berfungsi untuk menyimpan
data kegiatan pada surat pertanggung jawaban yang diisikan oleh admin nantinya
akan menjadikan isi dropdown pada pilihan kegiatan saat penambahan dan
perubahan pada data surat pertanggung jawaban.

18
 Tabel 3.6 Tabel Kegiatan
Field Name Data Type Field Size Description
Id Int 10 Primary Key,
AUTO_INCREMENT
Nama_kegiatan Varchar 150

3.4.4 Flowchart
Penjelasan dari setiap alur sistem informasi yang dilakukan mulai dari
login, pengarsipan, peminjaman, pengembalian, dan cetak SPJ.
2. Flowchart Login
Gambar 3.4 merupakan flowchart login yang dimulai dari memasukkan
username dan password lalu akan divalidasi apakah username dan password
benar atau salah. Jika salah akan kembali ke tampilan login, jika benar maka akan
menampilkan tampilan home.

Gambar 3.4 Flowchat Login

3. Flowchart data SPJ
Gambar 3.5 merupakan flowchart dari data SPJ yang dimulai dari login
dengan benar memasukan username dan password setelah login menuju ke
tampilan data SPJ dimana disitu terdapat data arsip SPJ bila sudah terdapat data
yang di masukkan. Pada tampilan SIPSPJ terdapat untuk menambah, mengubah,

19
dan menghapus data arsip SPJ. Menambah arsip SPJ akan menuju tampilan form
pengisian yaitu No boks, Program, Kegiatan, No SPPD, Uraian, Tanggal SPPD,
Tanggal Pencairan, dan Keterangan setelah terisi semua bisa di save/simpan data
akan bertambah di database dan terdapat pesan “data berhasil di simpan”.
Mengubah arsip SPJ akan menuju tampilan form ubah yaitu No boks, Program,
Kegiatan, No SPPD, Uraian, Tanggal SPPD, Tanggal Pencairan, Keterangan,
Status, dan File yang telah terisi bisa di ubah yang diinginkan bila selesai dapat di
save/simpan data akan berubah di database dan terdapat pesan “data berhasil
diubah”. Menghapus arsip SPJ pilih SPJ yang akan di hapus dan terdapat pesan
“data berhasil di hapus”.

Gambar 3.5 Flowchart data SPJ

4. Flowchart Peminjaman

20
 Gambar 3.6 merupakan flowchart dari pinjam SPJ yang dimulai dari login
dengan benar memasukan username dan password setelah login menuju ke
tampilan data SPJ dimana disitu memilih select action pinjam akan menuju
tampilan pinjam SPJ terdapat tabel pinjam SPJ. Pada tampilan pinjam SPJ
terdapat untuk menambah, mengubah, dan menghapus data pinjam SPJ.
Menambah berarti SPJ akan di pinjam dan menuju tampilan form pengisian yaitu
NIP, Nama, Jabatan, Tanggal Pinjam, Tanggal Kembali setelah terisi semua bisa
di save/simpan data akan bertambah di database dan terdapat pesan “data berhasil
di simpan” apabila terdapat kesalahan dalam pengisian bisa menuju ke action
ubah data pinjam SPJ akan menuju tampilan form ubah yaitu NIP, Nama, Jabatan,
Tanggal Pinjam, Tanggal Kembali yang telah terisi bisa di ubah yang salah bila
selesai dapat di save/simpan data akan berubah di database dan terdapat pesan
“data berhasil diubah” setelah itu cetak form peminjaman, menuju tampilan data
SPJ untuk memberi status pinjam pada kolom transaksi yang menuju ke tampilan
form ubah untuk merubah status menjadi dipinjam. Form pinjam yang telah di
cetak di tanda tangani oleh petugas dan peminjam form tersebut di bagi dua yang
satu diberikan peminjam dan satunya untuk di letekan pada boks untuk pengganti
arsip SPJ yang di pinjam.
5. Flowchart Pengembalian
Gambar 3.7 merupakan flowchart dari pengembalian arsip SPJ yang
dimulai dari arsip di kembalikan ke asal boksnya, kemudian login dengan benar
memasukan username dan password setelah login menuju ke tampilan data arsip
SPJ mencari ciri arsip yang dipinjam, membuka tampilan form ubah untuk
mengubah status dari dipinjam menjadi “-“ yang berarti arsip telah di kembalikan
dan tidak ada peminjaman pada arsip tersebut.
6. Flowchart Cetak SPJ
Gambar 3.8 merupakan flowchart dari cetak SPJ yang dimulai dari login
dengan benar memasukan username dan password setelah login menuju ke
tampilan Form cetak disitu kita akan mengisi SPJ yang akan di cetak sesuai
tanggal SPPD yang bida di cetak sesuai mulai tanggal SPPD yang akan kita cetak
hingga tanggal SPPD yang di cetak, bisa langsung di cetak.

21
Gambar 3.6 Flowchart Pinjam

22
 Gambar 3.7 Flowchat Pengembalian

Gambar 3.8 Flowchart Cetak SPJ

23
3.4.5 Halaman Aplikasi Website
Halaman aplikasi website yang sebagai tampilan aplikasi website kepada
user pemakainya, disini akan menjelaskan dari setiap halaman yang ada serta
kegunaannya.
1. Halaman Login
Gambar 3.9 Tampilan halaman login pada website, pengguna dari aplikasi
ini adalah Administrator. Pengguna akan diberi username dan password untuk
mengakses. Password dalam login ini digunakan untuk menjaga keamanan agar
tidak semua pengguna dapat menggunakan program kecuali pengguna yang sudah
ditunjuk oleh Dinas Komunikasi dan Informatika Kota Probolinggo.
Administrator memiliki hak akses penuh untuk memanajemen data.
Keterangan:
1. Untuk memasukkan Username Administrator
2. Untuk memasukkan Password Administrator.

1
2

Gambar 3.9 Halaman Login

2. Halaman Home
Gambar 3.10 Halaman home merupakan halaman utama dari website yang
pertama kali muncul ketika Administrator membuka website tersebut. Pada
halaman beranda ini memiliki Menu Dashboard, Arsip SPJ, Admintrasi Program
dan Kegiatan, CetakSPJ, User, Data.
Keterangan:
1. Menu yang terdapat pada halaman home yaitu, Menu Dashboard, Arsip SPJ,
Admintrasi Program dan Kegiatan, Cetak Data SPJ, User, Data.

24
 1

Gambar 3.10 Halaman Home

3. Halaman Arsip SPJ
Gambar 3.11 Halaman Arsip SPJ merupakan halaman yang melakukan
aktivitas utama dari website oleh Administrator. Pada halaman ini seorang
Administrator dapat menambah, merubah, menghapus, dan memproses
peminjaman arsip SPJ.
Keterangan:
1. Menu tambah data arsip SPJ yaitu, form untuk menambah data arsip baru.
2. Menu apabila Administrator ingin mencari data dengan memasukkan kata kunci.
3. Menu action ubah pada setiap baris data arsip SPJ yaitu, untuk merubah data arsip
SPJ bila terdapat kesalahan.
4. Menu action hapus pada setiap baris data arsip SPJ yaitu, untuk menghapus data
arsip SPJ bila sudah tidak digunakan.
5. Menu pinjam pada setiap baris data arsip SPJ yaitu, untuk melakukan proses
peminjaman arsip SPJ.

1 2
3, 4

Gambar 3.11 Halaman Arsip SPJ

4. Halaman Tambah SPJ

25
 Gambar 3.12 Halaman Tambah SPJ merupakan halaman yang berguna
untuk mengisi data arsip SPJ oleh Administrator. Pada halaman ini seorang
Administrator mengisikan form yang ada.
Keterangan:
1. Form pengisian data arsip SPJ yaitu, no boks, program, kegiatan, no SPPD,
uraian, tanggal SPPD, tanggal pencairan, keterangan, file.
2. Menu reset untuk mengembalikan ataupun menghapus data pada form sebelum di
simpan apabila terdapat kesalahan keseluruhan dalam pengisian.
3. Menu simpan untuk menyimpan data asip SPJ yang telah di masukkan dalam form
pengisian.

2 3

Gambar 3.12 Halaman Tambah SPJ

5. Halama Ubah SPJ
Gamabar 3.13 Halaman Ubah SPJ merupakan halaman yang berguna
untuk merubah data arsip SPJ oleh Administrator. Pada halaman ini seorang
Administrator merubah form yang terdapat kesalahan.
Keterangan:
1. Form perubahan data arsip SPJ yaitu, no boks, program, kegiatan, no SPPD,
uraian, tanggal SPPD, tanggal pencairan, keterangan, status, file.
2. Menu reset untuk mengembalikan data pada form sebelum di simpan apabila
terdapat kesalahan dalam perubahan.
3. Menu simpan untuk menyimpan data asip SPJ yang telah di ubah dalam form
pengisian yang diubah.

26
 1

Gambar 3.13 Halaman Ubah SPJ

6. Halaman Pinjam
Gambar 3.14 Halaman Pinjam merupakan halaman yang melakukan
proses peminjaman SPJ dari website oleh Administrator. Pada halaman ini
seorang Administrator dapat menambah, merubah, menghapus, dan mencetak
form peminjaman.
Keterangan:
1. Menu tambah data pinjam SPJ yaitu, form untuk menambah data arsip baru.
2. Menu kembali apabila Adminitrator telah selesai melakukan proses peminjaman.
3. Menu action ubah pada data pinjam SPJ yaitu, untuk merubah data pinjam spj bila
terdapat kesalahan.
4. Menu action hapus pada data pinjam SPJ yaitu, untuk menghapus data pinjam SPJ
bila sudah dikembalikan.
5. Menu cetak pada data pinjam SPJ yaitu, untuk mencetak form peminjaman arsip
SPJ.

1, 2

3, 4, 5

Gambar 3.14 Halaman Pinjam

7. Halaman Tambah Pinjam

27
 Gambar 3.15 Halaman Tambah Pinjam merupakan halaman yang berguna
untuk mengisi data peminjaman SPJ oleh Administrator. Pada halaman ini
seorang Administrator mengisikan form yang ada.
Keterangan:
1. Form pengisian data peminjaman SPJ yaitu, NIP, nama, jabatan, tanggal pinjam,
tanggal kembali.
2. Menu reset untuk mengembalikan ataupun menghapus data pada form sebelum di
simpan apabila terdapat kesalahan keseluruhan dalam pengisian.
3. Menu simpan untuk menyimpan data peminjaman SPJ yang telah di masukkan
dalam form pengisian.

2 3

Gambar 3.15 Halaman Tambah Pinjam

8. Halaman Ubah Pinjam
Gamabar 3.16 Halaman Ubah Pinjam merupakan halaman yang berguna
untuk merubah data peminjaman SPJ oleh Administrator. Pada halaman ini
seorang Administrator merubah form yang terdapat kesalahan sebelum dicetak.
Keterangan:
1. Form perubahan data peminjaman SPJ yaitu, NIP, nama, jabatan, tanggal pinjam,
tanggal kembali.
2. Menu reset untuk mengembalikan data pada form sebelum di simpan apabila
terdapat kesalahan dalam perubahan.
3. Menu simpan untuk menyimpan data peminjaman SPJ yang telah di ubah dalam
form pengisian yang diubah.

28
 1

2 3

Gambar 3.16 Halaman Ubah Pinjam

9. Halaman Administrasi Surat
Gambar 3.17 Halaman Administrasi Surat merupakan halaman yang
melakukan pengelolaan surat pada data program oleh Administrator. Pada
halaman ini seorang Administrator dapat menambah, merubah, menghapus.
Keterangan:
1. Menu tambah data surat yaitu, form untuk menambah data surat pada program
baru.
2. Menu action ubah pada data program yaitu, untuk merubah data program bila
terdapat kesalahan.
3. Menu action hapus pada data program yaitu, untuk menghapus data program bila
sudah tidak diperlukan.

2, 3

Gambar 3.17 Halaman Administrasi Program Surat

10. Halaman Tambah Program
Gambar 3.18 Halaman Tambah Program merupakan halaman yang
berguna untuk mengisi data program oleh Administrator. Pada halaman ini
seorang Administrator mengisikan form yang ada.

29
 Keterangan:
1. Form pengisian data program yaitu, nama program.
2. Menu reset untuk mengembalikan data pada form sebelum di simpan apabila
terdapat kesalahan dalam pengisian.
3. Menu simpan untuk menyimpan data program yang telah di masukkan dalam
form pengisian.

2 3

Gambar 3.18 Halaman Tambah Program

11. Halaman Ubah Program
Gamabar 3.19 Halaman Ubah Program merupakan halaman yang berguna
untuk merubah data program oleh Administrator. Pada halaman ini seorang
Administrator merubah form yang terdapat kesalahan.
Keterangan:
1. Form perubahan data program yaitu, nama program.
2. Menu reset untuk mengembalikan data pada form sebelum di simpan apabila
terdapat kesalahan dalam perubahan.
3. Menu simpan untuk menyimpan data program yang telah di ubah dalam form
pengisian yang diubah.
12. Halaman Administrasi Surat
Gambar 3.20 Halaman Administrasi Surat merupakan halaman yang
melakukan pengelolaan surat pada data kegiatan oleh Administrator. Pada
halaman ini seorang Administrator dapat menambah, merubah, menghapus.
Keterangan:
1. Menu tambah data surat yaitu, form untuk menambah data surat pada kegiatan
baru.

30
2. Menu action ubah pada data program yaitu, untuk merubah data kegiatan bila
terdapat kesalahan.
3. Menu action hapus pada data program yaitu, untuk menghapus data kegiatan bila
sudah tidak diperlukan.

2 3

Gambar 3.19 Halaman Ubah Program

2, 3

Gambar 3.20 Halaman Administrasi Kegiatan Surat

13. Halaman Tambah Kegiatan
Gambar 3.21 Halaman Tambah Kegiatan merupakan halaman yang
berguna untuk mengisi data kegiatan oleh Administrator. Pada halaman ini
seorang Administrator mengisikan form yang ada.
Keterangan:
1. Form pengisian data kegiatan yaitu, nama kegiatan.
2. Menu reset untuk mengembalikan data pada form sebelum di simpan apabila
terdapat kesalahan dalam pengisian.
3. Menu simpan untuk menyimpan data kegiatan yang telah di masukkan dalam
form pengisian.

31
 1

2 3

Gambar 3.21 Halaman Tambah Kegiatan

14. Halaman Ubah Kegiatan
Gamabar 3.22 Halaman Ubah Kegiatan merupakan halaman yang berguna
untuk merubah data program oleh Administrator. Pada halaman ini seorang
Administrator merubah form yang terdapat kesalahan.
Keterangan:
1. Form perubahan data kegiatan yaitu, nama kegiatan.
2. Menu reset untuk mengembalikan data pada form sebelum di simpan apabila
terdapat kesalahan dalam perubahan.
3. Menu simpan untuk menyimpan data kegiatan yang telah di ubah dalam form
pengisian yang diubah.

1
2 3

Gambar 3.22 Halaman Ubah Kegiatan

15. Halaman Cetak SPJ
Gambar 3.23 Halaman Cetak SPJ merupakan halaman yang berguna untuk
mencetak data arsip SPJ yang sesuai Administrator inginkan disesuaikan dengan
tanggal SPPD dari SPJ.

32
 Keterangan:
1. Menu unduh data arsip SPJ ke dalam format Microsoft Excel.
2. Menu untuk mentukan arsip SPJ yang akan di cetak yang ditentukan oleh mulai
tanggal mulai SPPD hingga tanggal SPPD yang diinginkan.
3. Menu cetak untuk mencetak data arsip SPJ yang sesuai keinginan tanggal SPPD
ke dalam format PDF.
4. Menu refresh untuk menghampus tanggal SPPD yang telah kita isikan sebelum di
cetak apabila terdapat kesalahan dalam pengisian.

2
3 4

Gambar 3.23 Halaman Cetak SPJ

16. Halaman User
Gambar 3.24 Halaman User merupakan halaman yang melakukan
pengelolaan pada data user oleh Administrator. Pada halaman ini seorang
Administrator dapat menambah, merubah, menghapus.
Keterangan:
1. Menu tambah data user yaitu, form untuk menambah data user baru.
2. Menu apabila Administrator ingin mencari data dengan memasukkan kata kunci.
3. Menu action ubah pada setiap baris data user yaitu, untuk merubah data user bila
terdapat kesalahan.
4. Menu action hapus pada setiap baris data user yaitu, untuk menghapus data user
bila sudah tidak digunakan.
17. Halaman Tambah User
Gambar 3.25 Halaman Tambah User merupakan halaman yang berguna
untuk mengisi data user oleh Administrator. Pada halaman ini seorang
Administrator mengisikan form yang ada.
Keterangan:

33
1. Form pengisian data user yaitu, username, fullname, level, jenis kelamin,
password, foto.
2. Menu reset untuk mengembalikan data pada form sebelum di simpan apabila
terdapat kesalahan dalam pengisian.
3. Menu simpan untuk menyimpan data user yang telah di masukkan dalam form
pengisian.

1
2
3, 4

Gambar 3.24 Halaman User

2 3

Gambar 3.25 Halaman Tambah User

18. Halaman Ubah User
Gamabar 3.26 Halaman Ubah User merupakan halaman yang berguna
untuk merubah data user oleh Administrator. Pada halaman ini seorang
Administrator merubah form yang terdapat kesalahan.
Keterangan:
1. Form perubahan data user yaitu, username, fullname, level, jenis kelamin,
password, foto.

34
2. Menu reset untuk mengembalikan data pada form sebelum di simpan apabila
terdapat kesalahan dalam perubahan.
3. Menu simpan untuk menyimpan data user yang telah di ubah dalam form
pengisian yang diubah.

2 3

Gambar 3.26 Halaman Ubah User

19. Halaman Data Backup
Gamabar 3.27 Halaman Data Backup merupakan halaman yang digunakan
untuk Administrator membackup data arsip SPJ.
Keterangan:
1. Menu backup untuk mengunduh atau membackup data arsip SPJ yang telah
diiskan ke betuk SQL.

Gambar 3.27 Halaman Data Backup

20. Halaman Data Restore
Gamabar 3.28 Halaman Data Restore merupakan halaman yang digunakan
untuk Administrator menuju kehalaman phpmyadmin.
Keterangan:

35
1. Menu restore untuk Administrator menuju kehalaman phpmyadmin.

Gambar 3.28 Halaman Data Restore

21. Tampilan Unduh SPJ ke Microsoft Excel
Gamabar 3.29 Tampilan Unduh SPJ ke Microsoft Excel merupakan
halaman yang telah terunduh dari website yang berisikan keseluruhan data arsip
SPJ yang tersimpan pada database.

Gambar 3.29Tampilan Unduh SPJ ke Microsoft Excel

22. Tampilan Cetak SPJ ke PDF
Gamabar 3.30 Tampilan Cetak SPJ ke PDF merupakan halaman yang
telah tertampil dari website sesuai yang diisikan sebelumnya pada halaman cetak
SPJ, bisa disimpan terlebih dahulu ke dalam bentuk PDF maupun langsung bisa
dicetak ke bentuk fisik ke kertas.
23. Tampilan Cetak Pinjam ke PDF
Gamabar 3.31 Tampilan Cetak Pinjam ke PDF merupakan halaman yang
telah tertampil dari website sesuai yang diisikan sebelumnya pada halaman data

36
pinjam, bisa disimpan terlebih dahulu ke dalam bentuk PDF maupun langsung
bisa dicetak ke bentuk fisik ke kertas.

Gambar 3.30 Tampilan Cetak SPJ ke PDF

Gambar 3.31 Tampilan Cetak Pinjam ke PDF

37
“---Halaman ini sengaja dikosongkan---”

38
 BAB 4
PENUTUP

4.1 Kesimpulan
Berdasarkan perancangan serta analisa yang dibuat pada Aplikasi Rancang
Bangun Website Sistem Informasi Pengarsipan Surat Pertanggung Jawaban Dinas
Komunikasi dan Informatika Kota Probolinggo terdapat sebuah kesimpulan yaitu
1. Administrator dapat melakukan penambahan, mengupdate maupun menghapus
data pada aplikasi website tersebut serta dapat mengelola peminjaman arsip untuk
suatu kepentingan.
2. Memudahkan instansi dan juga orang yang ingin mengetahui data arsip Surat
Pertanggung Jawaban pada sebelumnya.
4.2 Saran
Berdasarkan penjelasan tentang aplikasi website yang telah dibuat, dapat
diberikan saran untuk pengembangan sistem ini yaitu pada Aplikasi Sistem
Informasi Pengarsipan Surat Pertanggung Jawaban Dinas Komunikasi dan
Informatika Probolinggo ini masih dibutuhkan menu-menu atau fitur-fitur
tambahan untuk menyempurnakan aplikasi ini. Seperti halnya fitur notifikasi
apabila batas peminjaman melebihi batas, peminjaman langsung menuju data
pegawai yang sudah ada sehingga tidak perlu menginputkan lagi secara manual
untuk peminjaman arsip SPJ, pencetakan arsip SPJ bisa tidak hanya mengaitkan
dengan tanggal SPPD bisa dengan menyesuaikan perbedaan dari dua jenis arsip
SPJ.

39
“---Halaman ini sengaja dikosongkan---”

40
 DAFTAR PUSTAKA
Bagir, Muhammad (2011), Pembuatan Website E-Commerce di PT. Batik
Rahmawati Surakarta, Tugas Akhir., Universitas Sebelas Maret, Kota Solo.

Pujantoko, Yoga (2009), Pembuatan Website SMA Negeri 1 Pracimantoro

Menggunakan PHP & MySQL, Tugas Akhir, Universitas Sebelas Maret, Kota
Solo.

Wijayanto, Hans Christian (2016), Penerapan Teknologi Responsive Web Design

menggunakan Library Bootstrap Untuk Pembuatan Aplikasi E-journal pada
Yayasan Bina Darma Salatiga, Tugas Akhir, Universitas Kristen Satya Wacana,
Salatiga.

Ginting , Elizaandayani (2013), Aplikasi Penjualan Berbasis WEB (E-Commerce)

Menggunakan Joomla pada Mutiara Fashion, Tugas Akhir, Universitas
Widyatama, Bandung.

41
“---Halaman ini sengaja dikosongkan---”

42