Laporan PKL Asli Sekali

1
PERANCANGAN SISTEM INFORMASI COMPANY PROFIL

DAN PENGOLAHAN SURAT (STUDI KASUS : DINAS
KOMINFO DAN PERSANDIAN KABUPATEN BUNGO)
BERBASIS WEB
LAPORAN
PRAKTEK KERJA LAPANGAN (PKL)
Oleh :
Cahyo Prasetiawan 1902011007

Ema Nelis 1902011009
Holip Aroliah 1902011013
PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS ILMU KOMPUTER
UNIVERSITAS DHARMAS INDONESIA
2022
2
PERANCANGAN SISTEM INFORMASI DAN PENGOLAHAN SURAT

(STUDI KASUS DINAS KOMINFO DAN PERSANDIAN KABUPATEN
BUNGO) BERBASIS WEB
Dibuat untuk memenuhi salah satu syarat Kurikulum dalam menyelesaikan Strata
Satu (S1) Pada Program Studi Teknik Informatika
Oleh :
Cahyo Prasetiawan 1902011007

Ema Nelis 1902011009
Holip Aroliah 1902011013
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS ILMU KOMPUTER
UNIVERSITAS DHARMAS INDONESIA
2022
LEMBAR PERSETUJUAN UJIAN PKL
Laporan Praktik Kerja Lapangan ini disusun oleh:
Nama Mahasiswa : CAHYO PRASETIAWAN
NIM : 1902011007
Nama Mahasiswa : EMA NELIS
NIM : 1902011009
Nama Mahasiswa : HOLIP AROLIAH
NIM : 1902011013
Program Studi : TEKNIK INFORMATIKA
Berdasarkan Kegiatan Mahasiswa Pada Dinas Komunikasi, Infromatika dan

Persandian Kabupaten Bungo. Dari tanggal 1 Juli 2022 sampai dengan tanggal 30
September 2022 ini pembimbing Menyetujui untuk melaksanakan Ujian Praktik
Kerja Lapangan (PKL) oleh:
Dharmasraya…………………2022
Ketua Program Studi Dosen Pembimbing,
Teknik Informatika,
Lido Sabda Lesmana, S.Pd, M.Kom Dwi Winarti, M.Kom

NIDN. 1028058801 NIDN. 1024049201
i
LEMBARAN PENGESAHAN
PERANCANGAN SISTEM INFORMASI DAN PENGOLAHAN SURAT
(STUDI KASUS DINAS KOMINFO DAN PERSANDIAN KABUPATEN
BUNGO) BERBASIS WEB
Laporan Praktik Kerja Lapangan ini telah di Uji Oleh Dosen Penguji pada
Fakultas Ilmu Komputer Universitas Dharmas Indonesia
Dharmasraya ,....... .....2022
Mengesahkahkan :
Dosen Pembimbing Tanda Tangan
1. Dwi Winarti, M.Kom

NIDN : 1024049201 (…………………….)
Dosen penguji
1. Asril, ST, M.Kom (…………………….)
NIDN. 1028047602
(…………………….)
2. Dr. Raimond Efendi, M.Kom
NIDN. 1010098303
Mengetahui,
Dekan Ketua Program Studi

Fakultas Ilmu Komputer, Teknik Informatika,
FIRMANSYAH PUTRA, S.Kom.M,Pd.T LIDO SABDA LESMANA, M.Kom

NIDN: 1014038402 NIDN: 1028058801
ii
KATA PENGANTAR
Puji Syukur kita panjatkan kepada Allah SWT, atas berkat dan rahmatnya kita
dapat menyelesaikan Praktek Kerja Lapangan dengan judul “Perancangan Sistem
Informasi Compani Profil Dan Pengolahan Surat (Studi Kasus Dinas Kominfo Dan
Persandian Kabupaten Bungo) Berbasis Web.” dapat dilaksanakan dengan baik.
Laporan Praktik Kerja Lapangan ini dibuat untuk memenuhi salah satu syarat
Kurikulum dalam menyelesaikan Strata Satu (S1) Pada Program Studi Teknik
Informatika.
Kegiatan Magang ini merupakan salah satu bentuk pertanggung jawaban

tertulis atas terlaksananya kegiatan Praktek Kerja Lapangan(PKL), sampai dengan
penyusunan laporan ini tidak akan terlaksana tanpa adanya kerjasama dari
Mahasiswa PKL di Kantor Dinas Kominfo Kabupaten Bungo, serta berbagai pihak
yang telah mendukung kegiatan PKL ini, karena itulah penyusun ingin
menyampaikan banyak terimakasih kepada beberapa pihak yang ikut mendukung
proses pembuatan laporan ini hingga selesai yaitu :
1. Kedua Orang Tua Tercinta yang dengan tidak henti-hentinya memberikan do’a
dan dukungan kepada penulis hingga penyusunan laporan ini dapat
terselesaikan.
2. Ibu Dra. Hj. Elviana, M.Si. selaku Pembina Yayasan Amanah Ampang Kuranji
Universitas Dharmas Indonesia.
3. Bapak H. Kaspul Wathan selaku Ketua Yayasan Amanah Ampang Kuranji
Universitas Dharmas Indonesia.
4. Bapak Dr. Gunawan Ali, M.Kom, selaku Rektor Universitas Dharmas
Indonesia.
5. Ibu Wulan Andang Purnomo, M.Kom, selaku Wakil Rektor I Universitas
Dharmas Indonesia.
6. Ibu Ita Dwiaini, S.Farm., M.Sc,. Apt, selaku Wakil Rektor II Universitas
Dharmas Indonesia.
iii
7. Bapak Dr. Amar Salahuddin, M.Pd. selaku Wakil Rektor III Universitas
Dharmas Indonesia.
8. Bapak Firmansyah Putra, S.Kom, M.Pd.T, Selaku Dekan Fakultas Ilmu
Komputer Universitas Dharmas Indonesia
9. Bapak Lido Sabda Lesmana, M.Kom, Selaku Kaprodi Teknik Informatika
Universitas Dharmas Indonesia
10. Ibu Dwi winarti, M.Kom, Selaku Dosen Pembimbing PKL Universitas
Dharmas Indonesia
11. Bapak Zainadi, S.Pd. MM, Selaku Kepala Instansi Kantor Dinas Kominfo
Kabupaten Bungo
12. Bapak Indrayani,S.Pd. MM, Selaku Kabid Teknik Komputer dan Jaringan
Kantor Dinas Kominfo Kabupaten Bungo
13. Seluruh Pegawai, kabid, staff serta rekan dari UMMUBA dan UIN Jambi
Kantor Dinas Kominfo Kabupaten Bungo, yang selalu bersedia membimbing
dan ikhlas membantu kami selama pelaksanaan proses magang.
14. Dan Orang tua, Saudara, Sahabat Saya serta Rekan-rekan Seperjuangan Di
UNDHARI, Juga Semua Pihak Lain Yang Tidak Dapat Penulis Sebutkan Satu
Persatu, Yang Dimana Telah Memberikan Do’a, Semangat, Dukungan,
Bantuan, dan Nasehat Kepada Penulis.
Akhir kata, penulis menyadari bahwa pelaksanaan praktik kerja lapangan dan
penyusunan laporan ini masih belum sempurna. Oleh karena itu, kritik dan saran
yang membangun sangat kami harapkan. Semoga penyusunan laporan ini
bermanfaat bagi semua pihak.
Dharmasraya ,....... .....2022
Penulis
Cahyo Prasetiawan Ema Nelis

Nim. 1902011007 Nim. 1902011009
Holip Aroliah
Nim. 1902011013
iv
DAFTAR ISI
LEMBAR PERSETUJUAN UJIAN PKL............................................................ i

LEMBARAN PENGESAHAN ............................................................................. ii
KATA PENGANTAR .......................................................................................... iii
DAFTAR ISI .......................................................................................................... v
DAFTAR GAMBAR ........................................................................................... vii
DAFTAR TABEL................................................................................................. xi
BAB I PENDAHULUAN ...................................................................................... 1
1.1 Latar belakang ............................................................................................. 1
1.2 Rumusan Masalah ....................................................................................... 2
1.3 Batasan Masalah .......................................................................................... 3
1.4 Tujuan .......................................................................................................... 3
1.5 Manfaat ........................................................................................................ 3
1.6 Sistematika Penulisan ................................................................................. 4
BAB II LANDASAN TEORI ............................................................................... 6
2.1 Tinjauan Pustaka......................................................................................... 6
2.1.1 Pengertian Perancangan .......................................................................... 6
2.1.2 Pengertian Sistem .................................................................................... 6
2.1.3 Pengertian Informasi ............................................................................... 7
2.1.4 Pengertian Sistem Informasi ................................................................... 7
2.1.5 Company Profile ..................................................................................... 9
2.1.6 Pengolahan Data...................................................................................... 9
2.1.7 Pengertian Surat ...................................................................................... 9
2.1.8 Pengertian Bootstrap ............................................................................. 10
2.1.9 PHP ....................................................................................................... 11
2.1.10 XAMPP ............................................................................................... 11
2.1.11 Pengertian Basis Data (Database) ...................................................... 12
2.1.12 Mysql ................................................................................................... 13
3.1.13 Website ................................................................................................ 13
2.1.14 Unified Modeling Language (UML) ................................................... 14
BAB III PEMBAHASAN ................................................................................... 20
v
3.1 Metodologi Penelitian................................................................................ 20
3.1.1 Kerangka Kerja Penelitian .................................................................... 20
3.2 Gambaran Umum Tempat Penelitian ..................................................... 22
3.2.1 Sejarah Berdirinya Diskominfo Bungo ................................................. 22
3.2.2 Struktur Oraganisasi .............................................................................. 24
3.2.3 Tugas dan Wewenang ........................................................................... 24
3.2.4 Tempat dan Waktu PKL ..................................................................... 28
3.2.5 Metode Pengumpukan Data .................................................................. 29
3.2.6 Alokasi Waktu .................................................................................... 29
3.3 Mekanisme Sistem (Flow/Diagram/Uml) ................................................. 30
3.3.1 Perancangan sistem dengan menggunakan UML ................................. 30
3.3.2 Desain table dalam database................................................................. 89
3.4 Desain User Interface................................................................................. 93
3.4.1 Perancangan Antar Muka ...................................................................... 93
BAB IV IMPLEMENTASI DAN PENGUJIAN ............................................ 109
4.1 Implementasi ............................................................................................. 109
4.2 Pengujian Sistem ....................................................................................... 110
BAB V KESIMPULAN DAN SARAN ............................................................ 126
5.1 Kesimpulan ................................................................................................ 126
5.2 Saran .......................................................................................................... 126
DAFTAR PUSTAKA ........................................................................................ 127
LAMPIRAN ....................................................................................................... 129
vi
DAFTAR GAMBAR
Gambar 2. 1 Komponen Sistem Informasi.............................................................. 8

Gambar 2. 2 Ilusrasi basis data ............................................................................. 12
Gambar 3. 1 Kerangka Kerja ................................................................................ 20
Gambar 3. 2 Struktur Organisasi ........................................................................... 24
Gambar 3. 3 Use Case Diagram ........................................................................... 30
Gambar 3. 4 Class Diagram.................................................................................. 55
Gambar 3. 5 Activity Diagram Login .................................................................... 56
Gambar 3. 6 Activity Diagram Logout .................................................................. 57
Gambar 3. 7 Activity Diagram Mengelola Pegawai.............................................. 58
Gambar 3. 8 Activity Diagram Mengelola Visi & Misi ........................................ 59
Gambar 3. 9 Activity Diagram Mengelola Galeri ................................................. 60
Gambar 3. 10 Activity Diagram Mengelola Berita ............................................... 61
Gambar 3. 11 Activity Diagram Mengelola Pengumuman ................................... 62
Gambar 3. 12 Activity Diagram Mengelola Data User ......................................... 63
Gambar 3. 13 Activity Diagram Mengelola Data Pesan ....................................... 64
Gambar 3. 14 Activity Diagram Mencetak Laporan Surat .................................... 65
Gambar 3. 15 Activity Diagram Mengelola Surat Masuk ..................................... 66
Gambar 3. 16 Activity Diagram Mengelola Surat Keluar ..................................... 67
Gambar 3. 17 Activity Diagram Menampilkan Daftar Pegawai ........................... 68
Gambar 3. 18 Activity Diagram Menampilkan Visi & Misi ................................. 69
Gambar 3. 19 Activity Diagram Menampilkan Galeri .......................................... 69
Gambar 3. 20 Activity Diagram Menampilkan Berita .......................................... 70
Gambar 3. 21 Activity Diagram Menampilkan Pengumuman .............................. 70
Gambar 3. 22 Activity Diagram Menampilkan Kontak Kami .............................. 71
Gambar 3. 23 Activity Diagram Mendaftar........................................................... 72
Gambar 3. 24 Activity Diagram Mengirim Pesan ................................................. 73
Gambar 3. 25 Sequence Diagram Login ............................................................... 74
Gambar 3. 26 Sequence Diagram Logout ............................................................. 75
Gambar 3. 27 Sequence Diagram Pengolahan Daftar Pegawai ............................ 76
Gambar 3. 28 Sequence Diagram Pengolahan Visi & Misi.................................. 77
vii
Gambar 3. 29 Sequence Diagram Pengolahan Galeri ........................................... 78
Gambar 3. 30 Sequence Diagram Pengolahan Berita ........................................... 79
Gambar 3. 31 Sequence Diagram Pengolahan Pengumuman ............................... 80
Gambar 3. 32 Sequence Diagram Mencetak Laporan Surat ................................. 81
Gambar 3. 33 Sequence Diagram Pengolahan User ............................................. 82
Gambar 3. 34 Sequence Diagram Pengolahan Pesan ........................................... 82
Gambar 3. 35 Sequence Diagram Pengolahan Surat Masuk ................................ 83
Gambar 3. 36 Sequence Diagram Pengolahan Surat Keluar ................................ 84
Gambar 3. 37 Sequence Diagram Melihat Daftar Pegawai .................................. 85
Gambar 3. 38 Sequence Diagram Melihat Visi & Misi ........................................ 85
Gambar 3. 39 Sequence Diagram Melihat Galeri ................................................. 86
Gambar 3. 40 Sequence Diagram Melihat Berita ................................................. 86
Gambar 3. 41 Sequence Diagram Melihat Daftar Pengumuman.......................... 87
Gambar 3. 42 Sequence Diagram Melihat Kontak Kami ..................................... 87
Gambar 3. 43 Sequence Diagram Melihat Daftar User ........................................ 88
Gambar 3. 44 Sequence Diagram Mengirim Pesan .............................................. 89
Gambar 3. 45 Home Page ..................................................................................... 93
Gambar 3. 46 visi & misi ...................................................................................... 94
Gambar 3. 47 profil Dinas..................................................................................... 94
Gambar 3. 48 Berita .............................................................................................. 95
Gambar 3. 49 Pengumuman .................................................................................. 95
Gambar 3. 50 Daftar Pegawai ............................................................................... 96
Gambar 3. 51 Galeri .............................................................................................. 96
Gambar 3. 52 Kontak Kami .................................................................................. 97
Gambar 3. 53 Login User ...................................................................................... 97
Gambar 3. 54 halaman Daftar ............................................................................... 98
Gambar 3. 55 Halaman login admin dan pegawai ................................................ 98
Gambar 3. 56 Dasboard Admin ............................................................................ 99
Gambar 3. 57 Halaman Data Pegawai .................................................................. 99
Gambar 3. 58 form tambah pegawai ................................................................... 100
Gambar 3. 59 Halaman Data Visi & Misi ........................................................... 100
Gambar 3. 60 form tambah visi & misi ............................................................... 101
viii
Gambar 3. 61 Halaman Data Geleri .................................................................... 101
Gambar 3. 62 form tambah galeri ....................................................................... 102
Gambar 3. 63 Halaman Data berita ..................................................................... 102
Gambar 3. 64 form tambah berita ....................................................................... 103
Gambar 3. 65 Halaman Data Pengumuman ........................................................ 103
Gambar 3. 66 form tambah pengumuman ........................................................... 104
Gambar 3. 67 Halaman Data User ...................................................................... 104
Gambar 3. 68 Halaman Data Pesan..................................................................... 105
Gambar 3. 69 Halaman Laporan Surat ................................................................ 105
Gambar 3. 70 Halaman Dasboard Pegawai ........................................................ 106
Gambar 3. 71 Halaman Data Surat Masuk.......................................................... 106
Gambar 3. 72 form tambah surat masuk ............................................................. 107
Gambar 3. 73 Halaman Surat Keluar .................................................................. 107
Gambar 3. 74 Form Tambah Surat Keluar.......................................................... 108
Gambar 4. 1 Tampilan Home Page ..................................................................... 114
Gambar 4. 2 Tampilan Visi & misi ..................................................................... 114
Gambar 4. 3 Tampilan Profil .............................................................................. 115
Gambar 4. 4 tampilan Daftar Pegawai ................................................................ 115
Gambar 4. 5 tampilan Daftar Berita .................................................................... 116
Gambar 4. 6 tampilan Daftar Pengumuman ........................................................ 116
Gambar 4. 7 tampilan Kontak Kami ................................................................... 117
Gambar 4. 8 Tampilan Login User ..................................................................... 117
Gambar 4. 9 Tampilan form Daftar ..................................................................... 118
Gambar 4. 10 Tampilan Form Daftar ................................................................. 118
Gambar 4. 11 Tampilan Dasboard Admin .......................................................... 119
Gambar 4. 12 Tampilan Data Pegawai ............................................................... 119
Gambar 4. 13 Tampilan Data Visi & Misi .......................................................... 120
Gambar 4. 14 Tampilan Data Berita ................................................................... 120
Gambar 4. 15 Tampilan Data Berita ................................................................... 121
Gambar 4. 16 Tampilan Data Pengumuman ....................................................... 121
Gambar 4. 17 Tampilan Data User ..................................................................... 122
Gambar 4. 18 Tampilan data Pesan..................................................................... 122
ix
Gambar 4. 19 Tampilan Data Laporan Surat ...................................................... 123
Gambar 4. 20 Tampilan Form Cetak laporan Surat ............................................ 123
Gambar 4. 21 Tampilan Dasboard Pegawai ....................................................... 124
Gambar 4. 22 Tampilan Data Surat masuk ......................................................... 124
Gambar 4. 23 Tampilan Surat Keluar ................................................................. 125
x
DAFTAR TABEL
Tabel 2. 1 Use Diagram ........................................................................................ 14

Tabel 2. 2 Class Diagram ..................................................................................... 15
Tabel 2. 3 Activity Diagram .................................................................................. 17
Tabel 2. 4 Sequence Diagram ............................................................................... 18
Tabel 3. 1 Alokasi Waktu...................................................................................... 29
Tabel 3. 2 Definisi Aktor ...................................................................................... 31
Tabel 3. 3 Definisi dan Alur Use Case ................................................................. 32
Tabel 3. 4 Use Case Scanario Login..................................................................... 35
Tabel 3. 5 Use Case Scanario Logout................................................................... 36
Tabel 3. 6 Use Case Scanario Mengolah Data Pegawai ....................................... 37
Tabel 3. 7 Use Case Scanario Mengolah Data Visi & Misi ................................. 38
Tabel 3. 8 Use Case Scanario Mengolah Data Galeri .......................................... 39
Tabel 3. 9 Use Case Scanario Mengolah Data Berita .......................................... 41
Tabel 3. 10 Use Case Scanario Mengolah Data Pengumuman ............................ 42
Tabel 3. 11 Use Case Scanario Mengolah Data User .......................................... 44
Tabel 3. 12 Use Case Scanario Mengelola Pesan................................................. 44
Tabel 3. 13 Use Case Scanario Cetak Laporan Surat ........................................... 45
Tabel 3. 14 Use Case Scanario Mengolah Surat Masuk ...................................... 46
Tabel 3. 15 Use Case Scanario Mengolah Surat Keluar ...................................... 48
Tabel 3. 16 Use Case Scanario Melihat Daftar Pegawai ...................................... 49
Tabel 3. 17 Use Case Scanario Melihat Visi & Misi ........................................... 50
Tabel 3. 18 Use Case Scanario Melihat Galeri..................................................... 50
Tabel 3. 19 Use Case Scanario Melihat Berita ..................................................... 51
Tabel 3. 20 Use Case Scanario Melihat Pengumuman......................................... 52
Tabel 3. 21 Use Case Scanario Melihat Kontak Kami ......................................... 52
Tabel 3. 22 Use Case Scanario Mendaftar user ................................................... 53
Tabel 3. 23 Use Case Scanario Mengirim Pesan.................................................. 54
Tabel 3. 24 Data Pegawai...................................................................................... 89
Tabel 3. 25 Data Bidang........................................................................................ 90
Tabel 3. 26 Data Visi & Misi ................................................................................ 90
xi
Tabel 3. 27 Data Galeri ......................................................................................... 91
Tabel 3. 28 Data Informasi.................................................................................... 91
Tabel 3. 29 Data Surat ........................................................................................... 92
Tabel 3. 30 Data User ........................................................................................... 92
Tabel 3. 31 Data Pesan .......................................................................................... 93
Tabel 4. 1 Blackbox Testing Admin..................................................................... 110
Tabel 4. 2 Blackbox Testing Pegawai ................................................................. 112
Tabel 4. 3 Blackbox Testing Pengunjung dan User ............................................ 113
xii
BAB I
PENDAHULUAN
1.1 Latar belakang

Teknologi pada sistem informasi saat ini memudahkan mendapatkan informasi
yang dibutuhkan sehingga informasi yang disebarkan dapat lebih mudah, lengkap,
jelas dan cepat serta dapat mempengaruhi dalam bidang administrasi pengolahan
data. Saat ini penggunaan teknologi banyak memanfaatkan sistem informasi, salah
satunya adalah dengan menggunkan teknologi Web. Sistem informasi merupakan
gabungan dari berbagai komponen teknologi informasi yang saling bekerjasama
dan menghasilkan suatu informasi guna untuk memperoleh satu jalur komunikasi
dalam suatu organisasi atau kelompok (Seah, Jonny; Ridho 2020).
Dinas Komunikasi Informatika dan Persandian Kabupaten Bungo adalah salah

satu kantor yang berada di Komplek Kantor Bupati di Kabupaten Bungo.
Diskominfo memiliki beberapa bidang yang tugasnya secara langsung berkaitan
dengan membantu tugas Bupati di bidang komunikasi, informatika, persandian dan
statistika serta mengawasi informasi yang diberikan kepada kepala daerah di
kabupaten Bungo. Diskominfo Bungo dalam penyampaian informasi profil dan
pengolahan surat masih sangat sederhana, yaitu berupa edaran sehingga masyarakat
luas belum terlalu mengetahui informasi tentang Diskominfo Kabupaten Bungo dan
pengolahan surat belum efisien dan masih menggunakan proses pengarsipan
manual, prosesnya pencatatan dalam buku besar arsip, dan surat-surat dikumpulkan
dan disimpan didalam lemari sebagai media penyimpanannya. Penyimpanan yang
masih manual tersebut dapat menyebabkan hilang atau rusaknya dokumen dan
dapat mengakibatkan masalah pada proses pencarian surat yang sedang dibutuhkan.
Penelitian sebelumnya (Nurnaningsih, 2019) “Rancang Bangun Sistem

Informasi Pengarsipan Surat Masuk dan Keluar Studi Kasus Pada CV Sumber
Karya Teknik” Dalam penelitiannya peneliti melakukan analisis, perancangan dan
pembuatan sistem pengarsipan surat masuk dan keluar dengan menggunakan
bahasa pemrograman PHP, dan databasenya menggunakan MySQL sehingga
menghasilkan aplikasi guna mempermudah proses pengarsipan surat masuk dan
1
2
keluar yang ada pada CV. Sumber Karya Teknik dan penelitian dari (Hidayat and
Handayanto 2019) “Analisis Perancangan dan Pembuatan Company Profile
Berbasis Website Pada Pt. Sucofindo Semarang Sebagai Media Promosi dan
informasi. Dalam penelitiannya peneliti melakukan analisis, perancangan dan
pembuatan sistem Company Profile yang berguna untuk media menyebarkan
informasi dan media untuk mengenalkan Pt. Sucofindo Semarang.
Diskominfo Bungo perlu dibuatnya Sistem Informasi Company Profile dan

Pengolahan Surat Berbasis Website dengan menggunakan bahasa pemrograman
PHP dan database MySQL. Sistem ini bertujuan untuk sebagai media promosi dan
informasi agar masyarakat dapat dengan mudah mengakses dan mengetahui segala
sesuatu mengenai Diskominfo Bungo dengan jelas dan tanpa memerlukan banyak
waktu, Serta untuk untuk membantu kinerja pegawai dalam hal pengolahan surat
dapat memasukkan data surat ke dalam sistem sehingga tidak perlu mengisi terlalu
banyak berkas dan informasi surat dapat disimpan dalam basis data, sehingga resiko
terhadap berkas yang hilang maupun rusak dapat di diperkecil. Pegawai juga dapat
terbantu dalam pembuatan laporan karena disimpan sesuai kategori surat yang ada
di Diskominfo Bungo.
Berdasarkan penjelasan diatas penulis bermaksud untuk membuat laporan yang

berjudul “Perancangan Sistem Informasi Company Profile Dan Pengolahan
Surat (Studi Kasus Dinas Kominfo Dan Persandian Kabupaten Bungo)
Berbasis Web” yang diharapkan dapat mengatasi kesalahan-kesalahan dalam
pengolahan data dan meningkatkan penyampaian informasi tentang Dinas
Komunikasi, Informatika dan Persandian agar lebih dikenal di masyarakat luas dan
dapat meningkatkan kredibilitas Diskominfo Bungo.
1.2 Rumusan Masalah

Berdasarkan latar belakang diatas, maka perumusan masalahnya adalah
Bagaimana Membuat Sistem Informasi Company Profile dan Pengolahan Surat
yang dapat membantu di Dinas Komunikasi, Informatika dan Persandian?
3
1.3 Batasan Masalah

Agar Penelitian dalam perancangan sistem informasi company profile dan
pengolahan surat dapat lebih terarah dan agar dalam pembahasan lebih mudah
maka batasan masalah:
1. Hanya merancang Sistem Informasi Company Profile dan Pengolahan

Surat di Dinas Komunikasi, Informatika dan Persandian Kabupaten
Bungo.
2. Menangani pengolahan data pegawai, visi & misi, galeri, tugas pokok
dan fungsi, surat masuk dan keluar, laporan surat, informasi kegiatan
berita dan pengumuman.
3. Sistem ini tidak bisa membuat surat hanya menyimpan arsip surat.
4. Sistem ini dibangun menggunakan bahasa pemograman Html, Php dan
Mysql sebagai databasenya.
5. Sistem diakses oleh admin, pegawai, user dan pengunjug.
1.4 Tujuan
Melalui pembuatan Laporan ini diharapkan dapat menyelesaikan tugas
akhir Praktek Kerja Lapangan (PKL). Selain itu, membuat aplikasi yang dapat
melakukan pengolahan data profile dan pengolahan surat pada Diskominfo
Kabupaten Bungo berbasis Web yang dapat membatu kegiatan dalam
pengolahan datanya.
1.5 Manfaat
Manfaat yang diharapkan dalam penyusunan laporan tugas akhir kerja
praktek lapangan ini yaitu:
1. Bagi masyarakat
Memberikan kemudahan bagi masyarakat untuk mendapatkan informasi
yang berhubungan dengan Informasi mengenai profil serta kegiatan yang
ada di Dinas Komunikasi, Informatika dan Persandian.
2. Bagi Kantor Diskominfo Bungo
a. Meningkatkan Sistem Pengolahan Surat di Dinas Komunikasi,
Informatika dan Persandian.
4
b. Meningkatkan kemudahan untuk membagian informasi mengenai profil

dan kegiatan yang dilakukan.
3. Bagi Mahasiswa
Sebagai sarana untuk mengukur pengetahuan dan kemampuan
mahasiswa selama menempuh pendidikan, serta sebagai bahan literatur dan
referensi bagi Universitas Dharmas Indonesia.
1.6 Sistematika Penulisan

Dalam penulisan laporan praktek kerja ini, penulis menggunakan
sistematika penulisan yang terdiri dari lima bab yang masing-masing
menampakkan titik berat yang berbeda namun dalam satu kesatuan yang saling
mendukung satu dan melengkapi.
Bab pertama yaitu Pendahuluan yang berisi Latar belakang masalah,
memuat tentang keterangan-keterangan yang menyebabkan muculnya masalah
adanya kesenjangan dan hal baru. Kemudian juga berisi rumusan masalah,
tujuan PKL, manfaat PKL ,dan sistematika penulisan. dalam bab pertama ini
tampak penggambaran isi laporan pkl secara keseluruhan namun dalam satu
kesatuan yang ringkas dan padat guna menjadi pedoman untuk bab kedua,
ketiga, keempat dan bab kelima.
Bab kedua yaitu landasan teori, berupa tinjauan pustaka untuk variabel-
variabel yang ada di dalam judul dan teori-teori yang mendasari pemecahan
masalah.
Bab ketiga Pembahasan, yaitu berisikan metodologi penelitian yang
merupakan penjelasan secara detail kerangka kerja penelitian, kemudian
Gambaran umum tempat penelitian seperti sejarah berdirinya tempat
penelitian, struktur Organisasi, tugas dan wewenang, tempat dan waktu pkl,
dan metode pengumpulan data. Dan kemudian juga berikan tentang mekanisme
sistem, dan desain Interface.
Bab keempat merupakan Implementasi dan pengujian, berisikan tentang
implementasi atau penerapan sistem yang telah penulis buat, kemudian juga
terdapat pengujian yaitu menjelaskan tentang proses dimulainya sampai
program ini selesai dieksekusi, point-point pada sub bab ini akan menjelaskan
5
tentang bagaimana sebuah form pada sistem yang di buat oleh penulis
dijalankan dan apa saja fungsi yang terdapat pada form tersebut.
Dan yang terakhir pada bab kelima yaitu berisi kesimpulan yang memuat
proses analisis kebutuhan perangkat lunak, perancangan dan implementasi.
Kemudian saran yang berisi saran-saran yang perlu diperhatikan berdasarkan
keterbatasan-keterbatasan yang ditemukan dan asumsi-asumsi yang dibuat
selama melakukan kerja praktek, yang berhubungan dengan masalah yang di
angkat penulis.
BAB II
LANDASAN TEORI
2.1 Tinjauan Pustaka
2.1.1 Pengertian Perancangan

Perancangan adalah proses perubahan dari speksifikasi-
speksifikasi permasalahan yang telah dikumpulkan kemudian
dituangkan ke sebuah desain berupa konfigurasi yang berikutnya
dapat diimplementasikan pada suatu perangkat (Seah, Jonny; Ridho
2020).
Pengertian perancangan merupakan tahapan yang berupa
penggambaran, perencanaan dan pembuatan sketsa atau pengaturan
dari beberapa elemen yang terpisah ke dalam satu kesatuan yang
utuh dan berfungsi, termasuk menyangkut mengkonfigurasikan dari
komponen-komponen perangkat lunak dan perangkat keras suatu
sistem (Kesumaningtyas and Handayani 2020).
Berdasarkan teori di atas dapat disimpulkan bahwa, Perancangan
merupakan sebuah proses yang dilakukan untuk merancang,
membuat, mendesain perangkat lunak dan terkonfigurasikan dengan
perangkat lunak dan perangkat keras suatu sistem.
2.1.2 Pengertian Sistem

Sistem merupakan suatu kesatuan menyeluruh yang didalamnya
terdapat prosedur dan komponen yang saling berhubungan dan
saling bergantung dalam suatu jaringan kerja untuk mencapai suatu
tujuan tertentu (Siti et al. 2021).
Sistem adalah gabungan dari kumpulan elemen, komponen atau
variabel yang saling berhubungan satu sama lainnya guna untuk
mencapai suatu tujuan tertentu (Maydianto 2021)
Berdasarkan teori di atas dapat di simpulkan bahwa, Sistem
merupakan suatu komponen-komponen yang saling terkait dalam
6
7
suatu jaringan kerja untuk mencapai sebuah tujuan serta melakukan

suatu kegiatan.
2.1.3 Pengertian Informasi

Informasi menurut (Martin Halomoan Lumbangaol, 2020)
informasi adalah hasil dari pemrosesan data yang relevan dan
memiliki manfaat bagi penggunanya.
Pengertian informasi menurut (Tukino, 2020) informasi
merupakan sebuah data yang dikelolah menjadi sesuatu yang lebih
bernilai tinggi bagi penerima guna untuk membantu membuat
sebuah pengambilan keputusan.
Berdasarkan teori-teori di atas dapat di simpulkan bahwa,
informasi merupakan data yang telah diolah sehingga bermanfaat
bagi penggunannya, serta mengandung nilai penuh yakni
keakuratan, tepat waktu, dan relevan.
2.1.4 Pengertian Sistem Informasi

Sistem informasi merupakan sebuah kumpulan dari beberapa
komponen yang mengelola data supaya data yang diolah dapat
dijadikan sebagai informasi yang bermakna dan dapat membantu
mencapai tujuan organisasi(Maydianto 2021).
Sistem informasi menurut (Wahyudi & Ridho, n.d., 2020) sistem
informasi merupakan sejumlah komponen yang dimana komponen
itu saling berhubungan satu sama lainnya guna untuk mencapai
sebuah tujuan yang diharapkan.
Sistem informasi menurut (Seah, Jonny; Ridho 2020) sistem
informasi merupakan gabungan dari berbagai komponen teknologi
informasi yang saling bekerjasama dan menghasilkan suatu
informasi guna untuk memperoleh satu jalur komunikasi dalam
suatu organisasi atau kelompok.
Berdasarkan teori-teori di atas dapat di simpulkan bahwa, Sistem
informasi merupakan komponen-komponen yang dijadikan sebagai
8
informasi bermakna yang saling terkait guna untuk mencapai suatu

tujuan tertentu.
Menurut (Maydianto 2021) dalam suatu sistem informasi terdapat
komponen-komponen, yaitu meliputi:
a. Perangkat keras (hardware) : mencakup piranti-piranti
fisik seperti komputer dan printer
b. Perangkat lunak (software) atau aplikasi adalah
sekumpulan intruksi yang memungkinkan perangkat keras
untuk dapat memproses data.
c. Prosedur : sekumpulan aturan yang dipakai untuk
mewujudkan pemrosesan data dan pembangkitan keluaran
yang dikehendaki.
d. Orang : semua pihak yang bertanggung jawab dalam
pengembangan sistem informasi, pemrosesan, dan
penggunaan keluaran sistem informasi.
e. Basis data (database) : sekumpulan tabel, hubungan, dan
lain-lain yang berkaitan dengan penyimpanan data.
f. Jaringan komputer dan komunikasi data : sistem
penghubung yang memungkinkan sumber (resource)
dipakai secara bersama atau diakses oleh sejumlah
pemakai.
Perangka
t Keras
Oran Perangk
g at
Lunak
Basis Prosedu
Data r
Komput
er
Gambar 2. 1 Komponen Sistem Informasi

9
2.1.5 Company Profile

Company profile adalah gambaran umum mengenai suatu media
jati diri untuk menyampaikan dan menginformasikan tentang nilai-
nilai positif suatu perusahaan, lembaga atau instansi baik pemerintah
maupun swasta, agar mendapatkan suatu tanggapan yang positif
(simpati dari masyarakat), sehingga keberadaan instansi bisa di
terima oleh masyarakat (Mustaib and Dwiyansaputra 2022).
2.1.6 Pengolahan Data

Pengolahan Data adalah proses perhitungan/transformasi data
input menjadi informasi yang mudah dimengerti ataupun sesuai
dengan yang diinginkan (Nugroho 2019).
2.1.7 Pengertian Surat

Surat adalah sarana komunikasi untuk menyampaikan informasi
tertulis oleh suatu pihak kepada pihak lain. Fungsinya mencakup
lima hal: sarana pemberitahuan, permintaan, buah pikiran dan
gagasan, alat bukti tertulis, alat pengingat, bukti historis, dan
pedoman kerja (Arifin, Latif, and dkk. 2020).
Surat sebagai suatu sarana komunikasi yang digunakan untuk
menyampaikan informasi tertulis oleh suatu pihak kepada pihak
lain. Dengan lebih jelasnya, surat adalah alat komunikasi tertulis
untuk menyampaikan pesan kepada pihak lain yang memiliki
persyaratan khusus yaitu penggunaan kertas, penggunaan
model/bentuk, penggunaan kode dan notasi, pemakaian bahasa yang
khas serta pencantuman tanda tangan (Winanjar and Susanti 2021).
Menurut (Windea and Sarmidi 2018) surat dibagi menjadi 2
berdasarkan fungsinya yaitu :
a. Surat Masuk
Surat masuk adalah semua jenis surat yang diterima dari
instansi lain maupun dari perorangan, baik yang diterima
melalui pos ( kantor pos ) maupun yang diterima dari kulir (
10
penerima surat ) dengan mempergunakan buku pengiriman (

ekspedisi ).
b. Surat Keluar
Surat keluar adalah segala komunikasi tertulis yang
diterima oleh suatu organisasi maupun unit-unit organisasi
yang ada dalam satu lingkungan Instansi maupun diluar
lingkungan Instansi baik instansi pemerintah maupun swasta.
2.1.8 Pengertian Bootstrap

Bootstrap merupakan front-end framework yang intuitif dan
powerful untuk pengembangan aplikasi Web yang lebih cepat dan
mudah. Bootstrap menggunakan HTML, CSS dan JavaScript
(Kasus, Gramedia, and Gunadi 2021).
Bootstrap menyediakan sejumlah fitur untuk mendukung
pengembang perangkat lunak menghasilkan aplikasi yang
kompatibel dengan berbagai perangkat bergerak. Berikut ini adalah
fitur- fitur dari framework Bootstrap:
 Komponen siap pakai
 Kompatibilitas Web browser
 Mendukung Responsive Web Design
 CSS yang fleksibel
 JavaScript siap pakai Untuk mempermudah pembuatan
antarmuka pengguna.
Bootstrap menyediakan sejumlah komponen yang dapat

digunakan. Berikut adalah komponen-komponen yang digunakan
dalam pembuatan sistem sebuah sistem:
1) Buttons; digunakan untuk membuat tombol.

2) Forms; digunakan untuk membuat formulir yang berisi
sejumlah elemen sebagai sarana untuk menerima masukan
(input) dari pengguna.
3) Modal; digunakan untuk menambahkan kotak dialog ke sebuah
halaman Website.
11
4) Navs; digunakan untuk membuat menu navigasi halaman

Website.
2.1.9 PHP
Menurut (Putra and Nita 2019) PHP merupakan suatu bagian
terpenting dalam pembuatan Website dinamis. Hal ini karena dalam
PHP terhadap script yang berisi kode-kode untuk membuat Web.
Menurut (Hermiati, Asnawati, and Kanedi 2021) PHP adalah
bahasa pelengkap HTML yang memungkinkan dibuatnya aplikasi
dinamis yang memungkinkan adanya pengolahan data dan
pemrosesan data. Semua sintax yang diberikan akan sepenuhnya
dijalankan pada server sedangkan yang dikirimkan ke browser
hanya hasilnya saja. Kemudian merupakan bahasa berbentuk script
yang ditempatkan dalam server dan diproses di server. Hasilnya
akan dikirimkan ke client, tempat pemakai menggunakan browser.
PHP dikenal sebagai sebuah bahasa scripting, yang menyatu
dengan tag-tag HTML, dieksekusi di server, dan digunakan untuk
membuat halaman Web yang dinamis seperti halnya Active Server
Pages (ASP) atau Java Server Pages (JSP).
2.1.10 XAMPP
Menurut (Putra and Nita 2019) menyatakan bahwa XAMPP
ialah software yang di dalamnya tertdapat server MySQL dan
didukung oleh PHP sebagai bahasa pemrograman untuk membuat
Website dinamis serta terdapat Web server apache yang dapat
dijalankan di beberapa platform seperti OS X, Windows, Linux,
Mac, dan Solaris.
Menurut (Hermiati, Asnawati, and Kanedi 2021) MySQL
merupakan suatu jenis database server yang sangat terkenal. MySQL
termasuk jenis RDBMS (Relational Database Manajement System).
MySQL mendukung bahasa pemrograman PH, bahasa permintaan
yang terstruktur, karena pada penggunaannya SQL memiliki
berberapa aturan yang telah distandarkan oleh asosiasi yang bernama
12
ANSI. MySQL merupakan RDBMS (Relational Database

Management System) server. RDBMS adalah program yang
memungkinkan pengguna database untuk membuat, mengelola, dan
menggunakan data pada suatu model relational. Dengan demikian,
tabel-tabel yang ada pada database memiliki relasi antara satu tabel
dengan tabel lainnya.
Dari pengertian diatas dapat disimpulkan bahwa XAMPP
merupakan software server apache di mana memiliki banyak
keuntungan seperti mudah untuk digunakan, tidak memerlukan
biaya serta mendukung pada instalasi Windows dan Linux. Hal ini
juga didukung karena dengan instalasi yang di lakukan satu kali
tersedia MySQL, apache Web server, Database server PHP.
2.1.11 Pengertian Basis Data (Database)

Basis data adalah sistem yang terkomputerisasi yang tujuan
utamanya adalah memelihara data yang sudah diolah atau informasi
dan membuat informasi tersedia saat dibutuhkan. Pada intinya basis
data adalah media untuk menyimpan data agar data dapat diakses
dengan mudah dan cepat (Rosa A. S. M. Shalahuddin 2018:43).
Basis data relasional yang diimplementasikan dengan tabel-tabel
yang saling memiliki relasi seperti pada gambar berikut:
Tabel 1
Basis Data
Tabel 2 .
Tabel n
Gambar 2. 2 Ilusrasi basis data

Sumber : (Rosa A. S. M. Shalahuddin 2018)
13
Sistem informasi tidak dapat dipisahkan dengan kebutuhan akan basis

data apapun bentuknya, entah berupa fileteks ataupun database
management sytem (DBMS).
Kebutuhan basis data dalam sistem informasi meliputi:
a. Memasukan, menyimpan dan mengambil data.

b. Membuat laporan berdasarkan data yang telah disimpan
Tujuan dibuatnya tabel-tabel ini adalah untuk menuimoa

datakedalam tabel-tabel agar mudah diakses. Oleh karena itu, untuk
merancang tabel-tabel yang akandibuat maka dibutuhkan pola piker
penyimpanan data nantinya jika dalam bentuk baris-baris data
(record) dimana setiap baris terdiri dari bebrapa kolom.
2.1.12 Mysql
Menurut (Hermiati, Asnawati, and Kanedi 2021) MySQL
merupakan suatu jenis database server yang sangat terkenal. MySQL
termasuk jenis RDBMS (Relational Database Manajement System).
MySQL mendukung bahasa pemrograman php, bahasa permintaan
yang terstruktur, karena pada penggunaannya SQL memiliki
berberapa aturan yang telah distandarkan oleh asosiasi yang bernama
ANSI.
MySQL adalah salah satu jenis database server yang sangat
populer, hal ini disebabkan karena MySQL menggunakan SQL
sebagai bahasa dasar untuk mengakses databasenya. MySQL bersifat
Open Source, Software ini dilengkapi dengan Source code (kode
yang dipakai untuk membuat MySQL) (Winanjar and Susanti 2021).
3.1.13 Website
Website atau Word Wide Web (www) adalah kumpulan halaman
dalam suatu domain yang memuat tentang berbagai informasi agar
dapat dibaca dan dilihat oleh pengguna internet melalui sebuah mesin
pencari. Informasi yang dapat dimuat dalam sebuah Website umumnya
berisi mengenai konten gambar, ilustrasi, video, dan teks untuk
berbagai macam kepentingan (Winanjar and Susanti 2021).
14
Menurut (Muhyidin et al., 2020) menyatakan “Website

merupakan suatu layanan sajian informasi yang menggunakan
konsep hyperlink, yang memudahkan surfer (sebutan bagi pemakai
komputer yang melakukan penelusuran informasi di internet)”.
2.1.14 Unified Modeling Language (UML)

Unified Modeling Language (UML) adalah standar bahasa yang
banyak digunakan digunakan di dunia industri untuk mendefinisikan
requirement, membuat analisis dan desain, serta menggambarkan
arsitektur dalam pemoograman berorientasi objek (Rosa A. S. M.
Shalahuddin 2018).
1. Use Case Diagram.

Use Case Diagram adalah pemodelan untuk kelakuan
(Behaviour) sistem informasi yang akan dibuat. Use Case
Diagram mendeskripsikan sebuah interaksi antara satu atau lebih
aktor dengan sistem informasi yang akan dibuat. Use Case
digunakan untuk mengetahui fungsi saja yang ada di dalam sebuah
sistem informasi dan siapa saja yang berhak menggunakan fungsi-
fungsi itu (Rosa A. S. M. Shalahuddin 2018).
Berikut adalah simbol-simbol yang ada pada Use Case Diagram:
Tabel 2. 1 Use Diagram
Simbol Deskripsi
Use Case Fungsionalitas yang disediakan
sistem sengai unit-unit yang saling
Nama use case bertukar pesan antar unit atau actor;
biasanya dinyatakan dengan
menggunakan kata kerja di awal di
awal frase nama use case.
15
Aktor / actor Orang, proses atau sistem lain yang

berinteraksi dengan sistem informasi
yang akan dibuat di luar system
informasi yag akan dibuat itu sendiri.
nama actor Jadi walaupun symbol dari actor
adalah gambar orang, tapi actor belum
tentu merupaka orang; biasanya
dinyatakan dengan menggunakan kata
benda di awal frase nama actor.
Asosiasi / Assosiation Komunikasi antara actor dan use case
yang berpartisipasi pada use case atau
use case memiliki interaksi dengan
actor.
Ekstensi / extend Relasi use case tambahan ke sebuah
use case yang dapat berdiri sendiri.
2. Class Diagram
Class Diagram menggambarkan struktur sistem dari segi
pendefenisian kelas-kelas yang dibuat untuk membangun sistem.
Kelas memiliki apa yang disebut atribut dan metode atau operasi
(Rosa A. S. M. Shalahuddin 2018).
Berikut simbol-simbol yang ada pada class diagram:
Tabel 2. 2 Class Diagram
Simbol Deskripsi
Kelas Kelas pada sruktur system
nama_kelas
+atribut
+operasi
16
Antarmuka / Interface Sama dengan konsep Interface dalam

pemrograman berorientasi objek
nama_Interface
Asosiasi / association Relasi antar kelas dengan makna umum,

asosiasi biasanya juga disertai dengan
multiplicity
Asosiasi berarah / Relasi antarkelas denganmakna kelas

directed association yang satu digunakan oleh kelas yang lain,
asosiasi biasanya juga disertai dengan
multiplicity
Generalisasi Relasi antarkelas dengan makna

generasisasi-spesialisasi (umum-khusus)
Kebergantungan / Relasi antarkelas dengan makna

dependency kebergantungan antarkelas
Agregasi / Relasi antarmuka dengan makna semua-

aggregation bagian (whole-part)
3. Activity Diagram
Diagram aktivitas atau Activity Diagram menggambarkan
workflow (aliran kerja) atau aktivitas dalam sistem atau proses
bisnis atau menu yang ada pada perangkat lunak. Yang perlu
diperhatikan disini adalah nahwa diagram aktivitas
menggambarkan aktivitas sistem bukan apa yang dilakukan aktor,
jadi aktivitas yang dapat dilakukan oleh sistem (Rosa A. S. M.
Shalahuddin 2018).
Berikut adalah simbol-simbol yang ada pada diagram aktivitas:
17
Tabel 2. 3 Activity Diagram
Simbol Deskripsi
Status awal Status awal aktivitas sistem, sebuah diagram
aktivitas memiliki sebuah aktivitas awal.
Aktivitas Aktivitas yang dilakukan sistem, aktivitas
aktivitas biasanya diawali dengankata kerja
Percabangan / Asosiasi percabangan dimana jika ada pilihan
decision aktivitas lebih dari satu
Penggabungan / Asosiasi penggabungan dimana lebih dari

Join satu aktivitas dibagungkan menjadi satu.
Status akhir Status akhir yang dilakukan sistem, sebuah

diagram aktivitas memiliki sebuah status
akhir
Swimlane Memisahkan organisasi bisnis yang
Nama swimlane bertanggung jawab terhadap aktivitas yang
terjadi.
Atau
Nama swimlane
4. Sequence Diagram
Diagram Sequence menggambarkan kelaukan objek pada use
case dengan mendeskripsikan waktu hidup objek dan message
yang dikirimkan dan diterima antar objek. Oleh karena itu untuk
18
menggambarkan diagram sekuen maka harus diketahui objek-

objek yang terlibat dalam sebuah use case beserta metode-metode
yang dimiliki kelas yang diinstansi menjadi objek itu. Membuat
diagram sekuan juga dibutuhkan untuk melihat scenario yang ada
pada use case diagram (Rosa A. S. M. Shalahuddin 2018).
Berikut adalah simbol-simbol yang ada pada sequence diagram:
Tabel 2. 4 Sequence Diagram
Simbol Deskripsi
Actor Orang, proses, atau system lain yang
berinteraksi dengan system informasi yang
akan dibuat diluar sistem informasi yang
nama actor akan dibuat itu sendiri, jadi walaupun
atau symbol dari aktor adalah gambar orang, tapi
nama aktor actor belum tentu merupakan orang;
biasanya dinyatakan degan menggunakan
kata benda diawal frase nama actor.
Tanpa waktu aktif
Garis hidup / lifeline Menyatakan kehidupan suatu objek
Objek Menyatakan objek yang berinteraksi pesan

Nama objek: nama kelas
Waktu aktif Menyatakan objek dalam keadaan aktiv dan

berinteraksi, semua yang berhubungan
denganwaktu aktif ini dalah sebuah tahapan
yang dilakukan didalamnya, misalnya:
1: login
2: cekStatusLogin()
3: open
Maka cekStatusLogin() dan

open()dilakukan di dalam metode login()
Aktor tidak memiliki waktu aktif
19
Pesan tipe create Menyatakan suatu objek membuat objek

<<create>> yang lain, arah panah mengarah pada objek
yang dibuat.
Pesan tipe call Menyatakan suatu objek memanggil operasi
1 : nama_metode() / metode yang ada pada objek lain atau
dirinya sendiri
1 : nama_metode()
Arah panah mengarah pada objek yang

memiliki operasi/ metode, karena ini
mamnggil operasi/metode maka
operasi/metode yang di[anggil harus ada
pada diagram kelas sesuai dengankelas
objek beinteraksi.
Pesan tipe send Menyatakan bahwa suatu objek
1 : masukan mengirimkan data/masukan/informasi ke
objek lainnya, arah panah mengarah pada
objek yang dikirimi.
Pesan tipe return Menyatakan bahwa suatu objek yang telah
1 : keluaran menjalankan suatu operasi atau metode
menghasilkan suatu kembalian ke objek
tertentu, arah panah mengarah pada objek
yang menerima kembaian
Pesan tipe destroy Menyatakan suatu objek mengakhiri hidup
<<destroy>> objek yang lain, arah panah mengarah pada
objek yang diakhiri, sebaiknya jika ada
create maka ada destroy.
BAB III
PEMBAHASAN
3.1 Metodologi Penelitian
3.1.1 Kerangka Kerja Penelitian

Kerangka kerja merupakan langkah-langkah yang akan dilakukan
dalam penyelesaian masalah yang dibahas, karena membantu
memperjelas alur kerja. Adapun kerangka kerja seperti Gambar 3.1
berikut :
Identifikasi Masalah Analisis Masalah Menentukan

Tujuan
Pengumpulan Mempelajari
Desain Sistem
Data Literatur
Pengujian Sistem Hasil
Gambar 3. 1 Kerangka Kerja
Berdasarkan kerangka kerja penelitian yang telah digambarkan, maka

dapat diuraikan pembahasan masing-masing tahap dalam penelitian
adalah sebagai berikut:
1. Identifikasi Masalah
Pada tahap ini penulis melakukan identifikasi masalah beasiswa

bidikmisa pada sistem yang sedang berjalan guna mengetahui
kebutuhan yang harus dipenuhi. Dengan cara melihat atau mengamati,
meneliti dan mengkaji lebih dalam lagi masalah apa yang dihadapi pada
saat membangun dan merancang aplikasi sistem informasi company
profile dan pengolahan surat di Dinas Komunikasi, Informatika dan
20
21
Persandian Kab.Bungo guna mengetahui kebutuhan yang harus

dipenuhi. Sehingga peneliti dapat melihat apakah masalah dapat
diselesaikan dengan adanya aplikasi ini dan dapat menyimpulkan
bagaimana cara membangun dan merancang aplikasi sistem informasi
company profile dan pengolahan surat tersebut.
2. Analisis Masalah
Tahapan ini peneliti menganalisis permasalahan yang terjadi

pada sistem informasi company profile dan pengolahan surat di Dinas
Komunikasi, Informatika dan Persandian Kab.Bungo, sehingga peneliti
dapat merancang dan membangun sebuah aplikasi yang dapat
menyelesaikan permasalahan tersebut dengan terstruktur.
3. Menentukan Tujuan
Pada tahap ini, akan dijelaskan dan diuraikan tujuan dari rancang
dan bangun aplikasi sistem informasi company profile dan pengolahan
surat yaitu bagaimana aplikasi yang dibuat dapat menjadi solusi dari
permasalahan yang ada dalam penelitian aplikasi sistem informasi
company profile dan pengolahan surat di Dinas Komunikasi,
Informatika dan Persandian Kab.Bungo.
4. Mempelajari Literatur
Tahap ini penulis harus mencari literatur yang berhubungan dengan

permasalahan yang ada, sehingga menunjang proses penelitian
.Mempelajari literatur sebelum membuat suatu karya tulis, karna
literatur merupakan bahan atau sumber ilmiah yang bisa digunakan
untuk membuat suatu karya tulis ataupun kegiatan ilmiah lainnya.
5. Pengumpulan Data
Tahap ini penulis melakukan pengumpulan data dengan metode

pengamatan (observasi) dan wawancara (interview)
a. Pengamatan (observasi)
Metode ini merupakan penelitian yang dilakukan di lapangan
oleh peneliti dimana peneliti dapat mengamati dan melihat sistem
22
informasi company profile dan pengolahan surat. Dengan observasi

ini peneliti dapat mengetahui sistem informasi company Profile dan
pengelolaan surat yang gunakan. Pada bulan juli peneliti melakukan
observasi, diawali dengan melihat sistem informasi company
Profile dan pengolahan surat yang menggunakan cara manual
dengan memberika surat edaran dan pencatatan surat menggunakan
buku agenda.
b. Wawancara (interview)
Wawancara adalah cara peneliti mengumpulkan data dengan
cara tanya jawab sepihak secara sistematik dan berlandaskan tujuan
penelitian. Wawancara yang dilakukan peneliti adalah dengan
daftar pertanyaan dan cara memperoleh data yang bersifat langsung.
Peneliti melakukan wawancara dengan Kepala Bidang Teknologi
Informasi dan Komunikasi. Beberapa pertanyaan diajukan oleh
peneliti, mulai dari sistem informasi company profile dan
Pengolahan surat yang digunakan, jumlah pegawai yang bekerja di
Diskominfo Bungo, serta kendala kendala yang di alami,
pengumpulan data ini dilakukan agar peneliti mengetahui apa yang
sedang diteliti.
3.2 Gambaran Umum Tempat Penelitian

3.2.1 Sejarah Berdirinya Diskominfo Bungo
Sejarah secara global Kementerian Komunikasi dan Informatika,
sebelumnya bernama "Departemen Penerangan" (1945-1999),
"Kementerian Negara Komunikasi dan Informasi" (2001-2005), dan
Departemen Komunikasi dan Informatika (Depkominfo) (2005-2009).
Setelah proklamasi kemerdekaan dibentuk Lembaga Penerangan yang
secara fungsional menjalankan kebijakan, pola dan pedoman
penerangan dengan tujuan membela dan mempertahankan
kemerdekaan, mengajak rakyat agar turut serta mempertahankan dan
mengisi kemerdekaan serta memperkenalkan Republik Indonesia di
dan ke luar negeri. Selama periode 1959-1965, sesuai Haluan
Pembangunan Nasional sebagai ketetapan MPRS, Departemen
23
Penerangan dibentuk untuk menyelenggarakan penerangan melalui

media penerangan antara lain radio, film, toestel dan foto, percetakan,
kendaraan, mesin stensil, dan mesin ketik.
Akhir tahun 2010 lalu, lembaga Kementerian Komunikasi dan
Informatika menyempurnakan penataan organisasi. Paradigma baru
kebijakan komunikasi menempatkan informasi sebagai bagian
kebutuhan keseharian masyarakat. Fungsi informasi dikembangkan
pada nilai tambah ekonomi, bukan sekadar 'penerangan', namun lebih
dukungan komunikasi strategis untuk membangun integrasi nasional
dengan baik.
Sejarah Dinas komunikasi, Informatika dan Persandian Kabupaten
Bungo awalnya bahwa untuk melaksanakan ketcntuan Pasal 2 dan Pasal
4 Peraturan Daerah Nomor 5 Tahun 2016 tentang Pcmbentukan dan
Susunan Perangkat Daerah sebagaimana telah diubah dengan Peraturan
Daerah Nomor 12 Tahun 2019 tentang Perubahan Atas Peraturan
Daerah Nomor 5 Tahun 2016 tentang Pembentukan dan Susunan
Perangkat Daerah, perlu menetapkan Peraturan Bupati tentang Susunan
Organisasi, Tugas dan Fungsi Serta Bagan Struktur Dinas Komunikasi,
Informatika, dan Persandian Kabupaten Bungo.
Dinas ini berasal dari salah satu bagian bidang dikantor bupati dan
termasuk humas disana. Lalu, humas bidang komunikasi, informatika
dan persandian dipecah dan dijadikan kantor terpisah dari dalam bagian
kantor bupati. Dimana kantor ini didirikan bangunannya sendiri, lalu
dilakukannya pembagian bidang untuk setiap pegawai negeri sipil yang
bekerja. Kantor Dinas Kominfo berdiri pada tahun 2020 dan sudah
berusia 2 tahun yang masih dipimpin oleh bapak Zainadi, S.Pd.MM.
24
3.2.2 Struktur Oraganisasi

Berikut struktur organisasi kantor Dinas Kominfosandi Kabupaten
Bungo :
Gambar 3. 2 Struktur Organisasi
3.2.3 Tugas dan Wewenang

1. Kepala Dinas
Kepala Dinas Komunikasi Informatika dan Persandian
mempunyai tugas pokok memimpin, mengoordinasikan, dan
mengendalikan organisasi Dinas dalam menyelenggarakan urusan
pemerintahan daerah di bidang Komunikasi dan informatika serta
bidang Persandian dan statistik.
2. Sekretariat
Sekretariat, dipimpin Oleh seorang Sekretaris dalam
menjalankan tugas, Sekretaris berkedudukan di bawah dan
bertanggung jawab kepada Kepala Dinas, mempunyai tugas
membantu Kepala Dinas dalam melaksanakan koordinasi, serta
memberikan pelayanan teknis dan administrasi kepada seluruh
satuan organisasi untuk kelancaran tugas dan fungsi Dinas.
Sekretariat, membawahkan:
a. Subbagian Umum dan Kepegawaian mempunyai tugas
mengelola ketatalaksanaan dan ketatausahaan, perlengkapan,
kerumahtanggaan, dan kepegawaian dalam lingkup Dinas.
25
b. Subbagian Program, Keuangan dan Aset mempunyai tugas

melaksanakan urusan penghimpunan, penyusunan,
pengendalian perencanaan program kerja, dan
penatatausahaan keuangan dan aset di lingkup Dinas.
3. Bidang Komunikasi dan Komunikasi Publik
Bidang Informasi dan Komunikasi Publik, dipimpin oleh
seorang Kepala Bidang berkedudukan di bawah dan bertanggung
jawab kepada Kepala Dinas melalui Sekretaris Dinas mempunyai
tugas membantu Kepala Dinas dalam melaksanakan penyiapan
perumusan dan pelaksanaan kebijakan, penyusunan norma,
standar, prosedur dan kriteria, dan pemberian bimbingan teknis dan
supervisi, serta pemantauan, evaluasi, dan pelaporan dibidang
pengelolaan opini dan aspirasi publik, pengelolaan konten dan
media komunikasi publik, serta pelayanan informasi publik dan
hubungan media.
Bidang Informasi dan Komunikasi Publik dalam melaksanakan
tugas dan fungsi, membawahkan
1. Seksi Pengelolaan Opini dan Aspirasi Publik;
Seksi Pengelolaan Opini dan Aspirasi Publik, mempunyai
tugas melaksanakan sebagian fungsi Kepala Bidang Informasi
dan Komunikasi Publik dalam merencanakan, dan
merumuskan pengelolaan Opini dan Aspirasi Publik.
2. Seksi Pengelolaan Konten dan Media Komunikasi Publik;
Seksi Pengelolaan Konten dan Media Komunikasi Publik,
mempunyai tugas melaksanakan sebagian fungsi Kepala
Bidang Informasi dan Komunikasi Publik dalam
merencanakan, dan merumuskan Pengelolaan Konten dan
Media Komunikasi Publik.
3. Seksi Pelayanan Informasi Publik dan Hubungan Media.
Seksi Pelayanan Informasi Publik dan Hubungan Media,
mempunyai tugas melaksanakan sebagian fungsi Kepala
Bidang Informasi dan Kornunikasi Publik dalam
26
merencanakan, dan merumuskan Pelayanan Informasi Publik

dan Hubungan Media.
4. Bidang Teknologi dan Komunikasi
Bidang Teknologi Informasi dan Komunikasi, dipimpin oleh
seorang Kepala Bidang berkedudukan di bawah dan bertanggung
jawab kepada Kepala Dinas melalui Sekretaris Dinas mempunyai
tugas membantu Kepala Dinas dalam melaksanakan penyiapan
supervisi, serta pemantauan, evaluasi, dan pelaporan dibidang
pengamanan dan pengembangan infrastruktur Dasar Pusat Data
(Data Center), pengelolaan e-Govemment dan pengembangan
aplikasi, serta pengelolaan domain dan sumberdaya teknologi
informasi dan komunikasi.
Bidang Teknologi Informasi dan Komunikasi dalam melaksanakan
tugas dan fungsi, membawahkan:
a. Seksi Pengamanan dan Pengembangan Infrastruktur Dasar
Pusat Data (Data Center);
Seksi Pengarnanan dan Pengembangan Infrastruktur Dasar
Pusat Data (Data Center), mempunyai tugas melaksanakan
sebagian fungsi Kepala Bidang Teknologi Informasi dan
Komunikasi dalam merencanakan, dan merumuskan
Pengamanan dan Pengembangan Infrastruktur Dasar Pusat
Data (Data Center).
b. Seksi Pengelolaan e-Government dan Pengembangan
Aplikasi;
Seksi Pengelolaan e-Government dan Pengembangan
Aplikasi, mempunyai tugas melaksanakan sebagian fungsi
Kepala Bidang Teknologi Informasi dan Komunikasi dalam
merencanakan, dan merumuskan Pengelolaan e-Govemment
dan Pengembangan Aplikasi.
c. Seksi Pengelolaan Domain dan Sumberdaya TIK;
27
Seksi Pengelolaan Dornain dan Sumberdaya TIK,

mempunyai tugas melaksanakan sebagian fungsi kepala
Bidang Teknologi Informasi dan Komunikasi dalam
merencanakan, dan merumuskan Pengelolaan Domain dan
Sumberdaya TIK.
5. Bidang Persandian dan Statistika
Bidang Persandian dan Statistik, dipimpin oleh seorang Kepala
Bidang berkedudukan di bawah dan bertanggung jawab kepada
Kepala Dinas melalui Sekretaris Dinas mempunyai tugas
membantu Kepala Dinas dalam melaksanakan penyiapan
supervisi, serta pemantauan, evaluasi, dan pelaporan di bidang
Persandian dan Statistik;
Bidang Persandian dan Statistik, melaksanakan tugas dan fungsi,
membawahkan:
a. Seksi Tata Kelola Persandian
Seksi Tata Kelola Persandian, mempunyai tugas
melaksanakan sebagian fungsi Kepala Bidang Persandian dan
Statistik dalam merencanaka dan merumuskan Tata Kelola
Persandian;
b. Seksi Operasional Pengamanan Persandian
Seksi Operasional Pengamanan Persandian, mempunyai
tugas melaksanakan sebagian fungsi Kepala Bidang
Persandian dan Statistik dalam merencanakan, dan
merumuskan Operasional Pengamanan Persandian.
c. Seksi Statistik Sektoral Daerah
Seksi Statistik Sektoral Daerah, mempunyai tugas
melaksanakan sebagian fungsi Kepala Bidang Persandian dan
Statistik dalam merencanakan, dan merumuskan Statistik
Sektoral Daerah.
28
3.2.4 Tempat dan Waktu PKL

1. Tempat PKL
Penulis melaksanakan PKL pada sebuah instansi pemerintah
yaitu Dinas Komunikasi, Informatika dan Persandian. Berikut ini
merupakan informasi data instansi tempat pelaksanaan PKL:
Nama Instansi : Dinas Komunikasi, Informatika da Persandian.
Alamat : R.M Thaher No.503 Komplek Kantor Bupati
Kab. Bungo
2. Waktu PKL
Waktu Praktik kerja Lapangan dimulai dari persiapan yaitu satu
3 ( Tiga ) Bulan, terhitung sejak 1 Juli 2022 s.d 30 September 2022.
Dalam melaksanakan praktik tersebut, waktu Praktik Kerja
Lapangan (PKL) Penulis ditentukan berdasarkan kesepakatan
bersama sebelumnya antara penulis dan pihak Dinas Komunkasi
Informatika dan Persandian.
1. Tahapan Persiapan
Tahap persiapan penulis mencari informasi mengenai tempat
instansi/perusahaan yang sesuai bidang praktikum. Setelah
menemukan tempat praktik yang sesuai yaitu Dinas Komunkasi
Informatika dan Persandian maka penulis mempersiapkan surat
pengantar dari Universitas Dharmas Indonesia untuk kemudian
diberikan kepada pihak Instansi pada 20 Juni 2022.
2. Tahap Pelaksanaan
Setelah mendapat persetujuan dari pihak Dinas Kependudukan
dan Pencatatan Sipil penulis mulai Mengumpulkan dat-data yang
diperlukan untuk penulisan laporan pada tanggal 11 Juli 2022 s.d 1
Desember 2022.
3. Tahap Penulisan Laporan Kegiatan PKL
Penulisan laporan PKL di mulai pada tanggal 1 September 2022
hingga Desember 2022. Yaitu dengan mengolah data yang telah
dikumpulkan dan kemudian diserahkan sebagai tugas akhir laporan
praktik kerja lapangan.
29
3.2.5 Metode Pengumpukan Data

Tahap ini penulis melakukan mengumpulkan data dengan metode
wawancara (interview), dan studi pustaka pada tanggal 1-30 September
2022 di Dinas Komunikasi Informatika dan Persandian Kab.Bungo.
Berikut uraian tahap pengumpulan data penelitian penulis:
1. Wawancara (interview)
Wawancara adalah cara penulis meneliti mengumpulkan data
dengan melakukan tanya jawab dengan salah satu kepala bidang
Dinas Komunikasi, Infromatika dan Persandian Kab.Bungo.
2. Studi pustaka
Merupakan cara penulis mengumpulkan data dan informasi
mengenai sistem informasi company profile dan pengolahan surat
berbasis Web melalui buku-buku dan jurnal yang sesuai dan
mendukung tentang permasalahan yang penulis teliti.
3.2.6 Alokasi Waktu

Tabel 3. 1 Alokasi Waktu
Juli Agustus September

No Uraian Kegiatan
I II III IV I II III IV I II III IV
Identifikasi
1
Masalah
2 Analisis Masalah
Menentukan
3
Tujuan
Mempelajari
4
Litratur
Pengumpulan
5
Data
6 Desain Sistem
7 Pengujian Sistem
8 Hasil
30
3.3 Mekanisme Sistem (Flow/Diagram/Uml)
3.3.1 Perancangan sistem dengan menggunakan UML

1. Use Case Diagram
Adapun use case diagram pada rancang bangun sistem informasi
company profile dan pengolahan surat pada Dinas Komunikasi
Informatika dan Persandaian Kab.Bungo akan dijelaskan pada gambar
3.3 berikut
Gambar 3. 3 Use Case Diagram

Berdasarkan gambar 3.3 use case diagram sistem informasi
company profile dan pengolahan surat diatas menjelaskan hal-hal
sebagai berikut :
31
a. Definisi Aktor
Tabel 3. 2 Definisi Aktor
No Aktor Deskripsi
1. Admin Orang yang dapat memanajemen atau
mengatur data profil , visi & misi, daftar
pegawai, galeri, berita, pengumuman,
melihat laporan surat dan melihat pesan.
Dengan pengolahan antara lain
menginput data, menghapus data,
mengupdate data serta melihat pesan
dari user.
2. Pegawai Orang yang dapat memanajemen atau
mengatur data surat masuk dan keluar.
Dengan pengolahan antara lain
menginput data, menghapus dan
mengupdate data, serta mencetak
laporan surat.
3. Pengunjung Orang yang hanya bisa melihat data
profil, visi & misi, daftar pegawai,
galeri, berita, pengumuman dan kontak
kami di dalam Website dan melakukan
registrasi agar dapat melakukan interaksi
dengan sistem.
4. User Orang yang dapat melihat data profil,
visi & misi, daftar pegawai, galeri,
berita, pengumuman, kontak kami dan
mengirim pesan.
b. Scenario Use Case Diagram

Tujuan use case diagram ini untuk mendapatkan dan menganalisis
informasi persyaratan yang cukup untuk mempersiapkan model yang
mengkomunikasikan apa yang diperlukan dari pengguna, dan
32
bagaimana sistem dapat diimplementasikan, secara garis besar sistem

ini memiliki alur kerja seperti pada tabel 3.3 berikut :
Tabel 3. 3 Definisi dan Alur Use Case
No Use Case Deskripsi Aktor
1. Validasi Merupakan proses Admin,
pengecekan hak akses siapa Pegawai
yang berhak mengakses dan user
proses pengolahan sistem.
2. Login Use case yang Admin,
menggambarkan kegiatan Pegawai
memasukkan username dan dan user
password untuk mengakses
sistem.
3. Logout Use case yang Admin,
menggambarkan kegiatan Pegawai
keluar dari sistem. dan user
4. Memeriksa Merupakan proses untuk Admin,
status login memeriksa apakah pengguna Pegawai
sistem informasi sudah dan user
melakukan login atau belum.
5. Mengolah Use case ini menggambarkan Admin
Daftar kegiatan menginput,
Pegawai mengedit, menghapus data
pegawai.
Visi & Misi kegiatan mengedit,
menghapus data visi dan misi.
Galeri kegiatan menginput,
mengedit, menghapus data
galeri.
33

Berita kegiatan menginput,
mengedit, menghapus dan
mencetak data pegawai.
Pengumuman kegiatan menginput,
pengumuman.
user proses pengecekan data user
yang masuk. Admin dapat
melihat dan menghapus
semua data yang dimasukkan
user.
11. Mengelola Use case ini menggambarkan Admin
Pesan proses untuk melihat dan
menghapus semua data pesan
yang dikirim oleh user.
Admin hanya bisa melakukan
delete data.
12. Cetak Use case ini menggambarkan Admin dan
Laporan proses untuk mencetak semua Pegawai.
Surat data surat dengan filter jenis
surat dan jangka waktu.
13. Mengolah Use case ini menggambarkan Pegawai
Surat Masuk kegiatan menginput,
surat masuk.
14. Mengolah Use case ini menggambarkan Pegawai
Surat Keluar kegiatan menginput,
surat keluar.
34
15. Mendaftar Use case ini merupakan Pengunjung

proses memasukkan data
pendaftaran agar menjadi
seorang user.
16. Melihat Use case ini menggambarkan Pengunjung
Daftar proses untuk melihat semua dan user
Pegawai list data pegawai pada
Website.
17. Melihat Visi Use case ini menggambarkan Pengunjung
& Misi proses untuk melihat data visi dan user
& misi pada Website.
Galeri proses untuk melihat data dan user
galeri pada Website.
Berita proses untuk melihat semua dan user
list data berita pada Website.
Pengumuman proses untuk melihat semua dan user
list data pengumuman pada
Website.
Kontak Kami proses untuk melihat halaman dan user
kontak kami pada Website.
22. Mengirim Use case ini menggambarkan User
Pesan proses untuk mengirimkan
pesan / saran yang dikirim
kan ke sistem.
Berdasarkan tabel alur use case diagram di atas dapat disusun
scenario sebagai berikut:
35
a. Scenario Diagram Login

Tabel 3. 4 Use Case Scanario Login
Identifikasi
1. No 1
2. Nama Login
3. Tujuan Validasi Admin, Pegawai dan
User
4. Deskripsi Proses ini dilakukan agar admin,
Pegawai dan User dapat
mengakses sistem sesuai hak
aksesnya.
5. Aktor Admin , Pegawai dan user
Scenario Utama
6. Kondisi awal 1. admin, pegawai dan user
membuka browser kemudian
menuliskan alamat Website pada
browser.
2. Menampilkan halaman Website
Sistem Informasi Company
Profile dan Pengolahan Surat.
Aksi Aktor Reaksi
1. Klik menu login. 2. Form tampilan login
ditampilkan
3. Isi form login
berdasarkan username dan 4. Sistem akan mengecek
password lalu klik login. username dan password ke
database, apabila salah dan
kosong, kembali ke isi form
login.
36
5. Apabila benar login

berhasil dan menampilkan
halaman utama sistem.
7. Kondisi Akhir Admin, Pegawai dan user
menggunakan sistem sesuai
dengan kewenangan hak
aksesnya.
b. Scenario Diagram Logout

Tabel 3. 5 Use Case Scanario Logout
Identifikasi
1. No 2
2. Nama Logout
3. Tujuan Memungkinkan Admin, Pegawai
dan User untuk keluar dari sistem.
4. Deskripsi Proses ini dilakukan agar admin,
Pegawai dan User dapat keluar
dari sistem.
5. Aktor Admin , Pegawai dan user
Scenario Utama
6. Kondisi awal 1. admin, pegawai dan user
membuka browser kemudian
menuliskan alamat Website pada
browser.
2. Menampilkan halaman Website
3. Admin, Pegawai dan user harus
login terlebih dahulu.
Aksi Aktor Reaksi
37
1. Klik Tombol Logout 2. Sistem akan memvalidasi

dan menampilkan notifikasi
3. Klik Tombol “Ya” “ Anda Benar Mau Keluar ?”
4. Sistem akan mengeluarkan
aktor dari sistem.
7. Kondisi Akhir Admin, Pegawai dan user keluar
dari sistem.
c. Scenario Diagram Mengolah Data Pegawai

Tabel 3. 6 Use Case Scanario Mengolah Data Pegawai
Identifikasi
1. No 3
2. Nama Mengolah Data Pegawai
3. Tujuan Mengelola data Pegawai
Diskominfo Kab.Bungo
4. Deskripsi Admin dapat menginput,
mengubah dan menghapus data
pegawai.
5. Aktor Admin
Scenario Utama
6. Kondisi awal 1. Memeriksa status login.
2. Admin sudah masuk ke Sistem
Informasi Company Profile dan
Pengolahan Surat.
Aksi Aktor Reaksi
1. Klik menu dropdown 2. Sistem menampilkan
Kepegawaian dan klik semua data pegawai.
menu data pegawai.
3. Klik tombol tambah data 4. Sistem akan mengeluarkan
Popup form tambah data.
38
5. Mengisi semua kolom 6. Sistem menyimpan data ke

pada form dan klik simpan. database dan muncul
notifikasi berhasil.
7. Klik tombol edit data 8. Sistem akan mengeluarkan
Popup form edit data.
9. Mengedit data pada 10. Sistem mengupdate data
kolom form dan klik ke database dan muncul
update. notifikasi berhasil.
12. Sistem akan
11. Klik tombol hapus data mengeluarkan notifikasi
“anda yakin menghapus data
?”.
13. klik “Ya” 14. Sistem menghapus data
dari database dan muncul
15. Sistem menampilkan data
terbaru.
7. Kondisi Akhir Sistem menampilkan data terbaru.
d. Scenario Diagram Mengolah Data Visi & Misi

Tabel 3. 7 Use Case Scanario Mengolah Data Visi & Misi
Identifikasi
1. No 4
2. Nama Mengolah Data Visi & Misi
3. Tujuan Mengelola data Visi & Misi
4. Deskripsi Admin dapat mengubah dan
menghapus Visi & Misi.
39
5. Aktor Admin
Scenario Utama
Pengolahan Surat.
Aksi Aktor Reaksi
1. Klik menu dropdown 2. Sistem menampilkan data
Kepegawaian dan klik Visi & Misi.
menu Visi & Misi. 4. sistem akan mengeluarkan
3. Klik tombol tambah data Popup form tambah data.
5.. Mengisi data pada 6. Sistem menyimpan data ke
kolom form dan klik database dan muncul
simpan. notifikasi berhasil.
7. Klik tombol edit data 8. Sistem akan mengeluarkan
Popup form edit data.
9. Mengedit data pada 10. Sistem mengupdate data
kolom form dan klik ke database dan muncul
update. notifikasi berhasil.
11. Klik tombol hapus data 12. Sistem akan
mengeluarkan notifikasi
13. klik “Ya” ?”.
14. Sistem menghapus data
terbaru.
e. Scenario Diagram Mengolah Data Galeri

Tabel 3. 8 Use Case Scanario Mengolah Data Galeri
40
Identifikasi
1. No 5
2. Nama Mengolah Data Galeri
3. Tujuan Mengelola Data Galeri
galeri
5. Aktor Admin
Scenario Utama
Pengolahan Surat.
Aksi Aktor Reaksi
Kepegawaian dan klik semua data galeri.
menu Galeri.
3. Klik tombol tambah data 4.Sistem akan mengeluarkan
5. Mengisi semua kolom Popup form tambah data.
pada form dan klik tambah. 6. Sistem menyimpan data ke
7. Klik tombol edit data database dan muncul
9. Mengedit data pada 8.Sistem akan mengeluarkan
kolom form dan klik Popup form edit data.
update. 10. Sistem mengupdate data
ke database dan muncul
11. Klik tombol hapus data notifikasi berhasil.
12.Sistem akan
13. klik “Ya” “anda yakin menghapus data
?”.
41

terbaru.
f. Scenario Diagram Mengolah Data Berita

Tabel 3. 9 Use Case Scanario Mengolah Data Berita
Identifikasi
1. No 6
2. Nama Mengolah Data Berita
3. Tujuan Mengelola Data Berita
berita.
5. Aktor Admin
Scenario Utama
Pengolahan Surat.
Aksi Aktor Reaksi
Post dan klik menu Berita. semua data Berita.

pada form dan klik tambah.
42
7. Klik tombol edit data 6. Sistem menyimpan data ke

database dan muncul
9. Mengedit data pada notifikasi berhasil.
kolom form dan klik 8.Sistem akan mengeluarkan
update. Popup form edit data.
10. Sistem mengupdate data
11. Klik tombol hapus data ke database dan muncul
12.Sistem akan
13. klik “Ya” mengeluarkan notifikasi
?”.
terbaru.
g. Scenario Diagram Mengolah Data Pengumuman

Tabel 3. 10 Use Case Scanario Mengolah Data Pengumuman
Identifikasi
1. No 7
3. Tujuan Mengelola Data Pengumuman
pengumuman.
43
5. Aktor Admin
Scenario Utama
Pengolahan Surat.
Aksi Aktor Reaksi
Post dan klik menu semua data pengumuman.
pengumuman.
4.Sistem akan mengeluarkan
3. Klik tombol tambah data Popup form tambah data.
5. Mengisi semua kolom 6. Sistem menyimpan data ke
pada form dan klik tambah. database dan muncul
7. Klik tombol edit data notifikasi berhasil.
8.Sistem akan mengeluarkan
9. Mengedit data pada Popup form edit data.
kolom form dan klik 10. Sistem mengupdate data
update. ke database dan muncul
11. Klik tombol hapus data 12.Sistem akan
13. klik “Ya” ?”.
h. Scenario Diagram Mengolah Data User

44
Tabel 3. 11 Use Case Scanario Mengolah Data User

Identifikasi
1. No 8
3. Tujuan Mengelola Data User Sistem
Informasi Company Profile.
4. Deskripsi Admin dapat menghapus data
user.
5. Aktor Admin
Scenario Utama
Pengolahan Surat.
Aksi Aktor Reaksi
1. Klik menu total user dan 2. Sistem menampilkan
klik view detail. semua data user.
3. Klik tombol hapus data 4. Sistem akan mengeluarkan
notifikasi “anda yakin
menghapus data ?”.
i. Scenario Diagram Mengelola Pesan

Tabel 3. 12 Use Case Scanario Mengelola Pesan
Identifikasi
1. No 9
2. Nama Mengelola Pesan
45
3. Tujuan Admin dapat menghapus data

pesan.
4. Deskripsi Melihat semua data pesan yang
dikirimkan oleh user.
5. Aktor Admin
Scenario Utama
Pengolahan Surat.
Aksi Aktor Reaksi
1. Klik menu pesan 2. Sistem menampilkan
semua data pesan.
3. Klik tombol hapus data 4. Sistem akan mengeluarkan
notifikasi “anda yakin
menghapus data ?”.
j. Scenario Diagram Cetak Laporan Surat

Tabel 3. 13 Use Case Scanario Cetak Laporan Surat
Identifikasi
1. No 10
2. Nama Cetak Laporan Surat
3. Tujuan Mencetak laporan data surat.
4. Deskripsi Admin dapat melihat dan
mencetak data laporan surat.
5. Aktor Admin dan Pegawai
46
Scenario Utama
Pengolahan Surat.
Aksi Aktor Reaksi
Kepegawaian dan klik semua data laporan surat.
menu Laporan Surat. 4. Sistem akan mengeluarkan
3. Klik tombol cetak Popup form cetak data.
5. Pilih jenis surat dan 7. Sistem akan mengalihkan
masukkan rentang tanggal ke page print data.
laporan. 8. Sistem menampilkan
6. klik Print dokumen siap cetak.
7. Kondisi Akhir Sistem mencetak data laporan
surat yang dipilih dengan rentang
tanggal.
k. Scenario Diagram Mengolah Surat Masuk

Tabel 3. 14 Use Case Scanario Mengolah Surat Masuk
Identifikasi
1. No 11
2. Nama Mengolah Surat Masuk
3. Tujuan Mengelola data surat masuk
4. Deskripsi Pegawai dapat menginput,
surat masuk.
5. Aktor Pegawai
Scenario Utama
47
2. Pegawai sudah masuk ke

Aksi Aktor Reaksi
1. Klik menu Surat Masuk. 2. Sistem menampilkan
semua data Surat Masuk.
3. Klik tombol tambah data 4. Sistem akan mengeluarkan
9. Mengedit data pada 8. Sistem akan mengeluarkan
12. Sistem akan
13. klik “Ya” “anda yakin menghapus data
?”.
terbaru.

48
l. Scenario Diagram Mengolah Surat Keluar

Tabel 3. 15 Use Case Scanario Mengolah Surat Keluar
Identifikasi
1. No 12
2. Nama Mengolah Surat Keluar
3. Tujuan Mengelola data surat masuk
4. Deskripsi Pegawai dapat menginput,
surat keluar.
5. Aktor Pegawai
Scenario Utama
2.Pegawai sudah masuk ke Sistem
Pengolahan Surat.
Aksi Aktor Reaksi
1. Klik menu Surat keluar. 2. Sistem menampilkan
semua data Surat Keluar.
9. Mengedit data pada 8.Sistem akan mengeluarkan
12.Sistem akan
13. klik “Ya”
49

?”.
terbaru.
m. Scenario Diagram Melihat Daftar Pegawai

Tabel 3. 16 Use Case Scanario Melihat Daftar Pegawai
Identifikasi
1. No 13
2. Nama Melihat Daftar Pegawai
3. Tujuan Melihat daftar pegawai Diskominfo
Kab.Bungo
4. Deskripsi Pengunjung dan user dapat melihat
daftar pegawai.
5. Aktor Pengunjung dan User
Scenario Utama
Aksi Aktor Reaksi
1. Menuliskan alamat 2. Sistem menampilkan
Website di browser. halaman utama Website.
3. Klik menu dropdown 4. Sistem ke halaman dan

profil dan klik menu daftar menampilkan data daftar
pegawai. pegawai.
6. Kondisi Akhir Sistem menampilkan data daftar
pegawai.
50
n. Scenario Diagram Melihat Visi & Misi

Tabel 3. 17 Use Case Scanario Melihat Visi & Misi
Identifikasi
1. No 14
2. Nama Melihat Visi & Misi
3. Tujuan Melihat Visi & Misi Diskominfo
Kab.Bungo
Visi & Misi.
Scenario Utama
Aksi Aktor Reaksi
3. Klik menu dropdown 4. Sistem ke halaman dan

profil dan klik menu visi & menampilkan data visi & misi.
misi.
6. Kondisi Akhir Sistem menampilkan data visi &
misi.
o. Scenario Diagram Melihat Galeri

Tabel 3. 18 Use Case Scanario Melihat Galeri
Identifikasi
1. No 15
2. Nama Melihat Galeri
3. Tujuan Melihat Galeri Diskominfo
Kab.Bungo
Galeri.
51
Scenario Utama
Aksi Aktor Reaksi
3. Klik menu Galeri 4. Sistem ke halaman dan

menampilkan data Galeri.
6. Kondisi Akhir Sistem menampilkan data galeri.
p. Scenario Diagram Melihat Berita

Tabel 3. 19 Use Case Scanario Melihat Berita
Identifikasi
1. No 16
2. Nama Melihat Berita
3. Tujuan Melihat Berita Diskominfo
Kab.Bungo
Berita.
Scenario Utama
Aksi Aktor Reaksi
3. Klik menu Berita 4. Sistem ke halaman dan

menampilkan data Berita.
6. Kondisi Akhir Sistem menampilkan data berita.

52
q. Scenario Diagram Melihat Pengumuman

Tabel 3. 20 Use Case Scanario Melihat Pengumuman
Identifikasi
1. No 17
2. Nama Melihat Pengumuman.
3. Tujuan Melihat Pengumuman Diskominfo
Kab.Bungo
Pengumuman.
Scenario Utama
Aksi Aktor Reaksi
3. Klik menu Pengumuman 4. Sistem ke halaman dan

menampilkan data
Pengumuman.
6. Kondisi Akhir Sistem menampilkan data
pengumuman.
r. Scenario Diagram Melihat Kontak Kami

Tabel 3. 21 Use Case Scanario Melihat Kontak Kami
Identifikasi
1. No 18
2. Nama Melihat Kontak Kami
3. Tujuan Melihat Kontak Kami Diskominfo
Kab.Bungo
Kontak Kami.
53
Scenario Utama
Aksi Aktor Reaksi
3. Klik menu Kontak 4. Sistem ke halaman dan

Kami. menampilkan data Kontak
Kami.
6. Kondisi Akhir Sistem menampilkan data
pengumuman.
s. Scenario Diagram Mendaftar User

Tabel 3. 22 Use Case Scanario Mendaftar user
Identifikasi
1. No 19
2. Nama Mendaftar user
3. Tujuan Mendaftar menjadi user
4. Deskripsi Pengunjung mendaftar untuk
menjadi user.
5. Aktor Pengunjung
Scenario Utama
Aksi Aktor Reaksi

5.Klik Daftar Kami.
6. Mengisi semua kolom 6. Sistem menampilkan popup
dan klik daftar. form pendaftaran.
54
7. Sistem menyimpan data dan

menampilkan notifikasi
berhasil.
6. Kondisi Akhir Pengunjung membuat akun menjadi

user.
t. Scenario Diagram Mengirim Pesan

Tabel 3. 23 Use Case Scanario Mengirim Pesan
Identifikasi
1. No 20
2. Nama Mengirim Pesan
3. Tujuan User mengirim kan pesan
4. Deskripsi User dapat mengirimkan pesan /
saran
5. Aktor User.
Scenario Utama
Aksi Aktor Reaksi
Kami.
4. Masukkan pesan / saran 3. Sistem mengisi kolom nama
Dan klik kirim dan email aktor.
5. Sistem menyimpan data dan
menampilkan notifikasi
berhasil.
7. Kondisi Akhir User berhasil mengirimkan pesan /
saran.
55
2. Class Diagram
Class Diagram menunjukan hubungan dalam sistem yang sedang
dibangun dan bagaimana sistem tersebut dapat berkolaborasi untuk
mencapai suatu tujuan. Berikut adalah penggambaran class diagram
pada sistem yang akan dibangun, seperti pada gambar 3.4 berikut:
Gambar 3. 4 Class Diagram
3. Activity Diagram
Berikut Activity Diagram yang akan dirancang pada sistem yang
dibangun:
56
a. Activity Diagram Login

Activity Diagram login dapat dilihat pada gambar 3.5 berikut:
Gambar 3. 5 Activity Diagram Login

Keterangan gambar : aktivitas diatas menerangkan admin,
pegawai dan user masuk ke sistem. Mereka harus menekan tombol
login dan melakukan pengisian username dan password pada menu
login. Jika username dan password yang dimasukkan salah, maka
sistem akan menampilkan pesan salah dan jika benar, maka sistem
akan menampilkan halaman sesuai dengan hak akses masing-
masing.
57
b. Activity Diagram Logout

Activity Diagram logout dapat dilihat pada gambar 3.6 berikut:
Gambar 3. 6 Activity Diagram Logout

Keterangan gambar : aktivitas diatas menerangkan admin, pegawai
dan user ingin keluar dari sistem. Mereka harus menekan tombol
logout pada sistem.
58
c. Activity Diagram Mengelola Pegawai

Activity Diagram mengelola pegawai dapat dilihat pada gambar 3.7
berikut:
Gambar 3. 7 Activity Diagram Mengelola Pegawai

Keterangan gambar : aktivitas diatas menerangkan admin dapat
melakukan pengolahan data pegawai berupa menambah,
menghapus atau merubah data. Jika admin ingin melakukan
penambahan data maka admin memilih tombol tambah data dan
mengisi data sesuai dengan keterangan kolom lalu klik simpan.
Admin jika ingin merubah data maka memilih tombol edit data dan
merubah data sesuai dengan kolom dan klik simpan. Terakhir jika
59
admin ingin menghapus data, maka memilih tombol hapus data dan
kondisi terakhir sistem menampilkan data terbaru.
d. Activity Diagram Mengelola Visi & Misi

Activity Diagram mengelola visi & misi dapat dilihat pada gambar
3.8 berikut:
Gambar 3. 8 Activity Diagram Mengelola Visi & Misi

melakukan pengolahan data visi & misi berupa menambah,
60

e. Activity Diagram Mengelola Galeri
Activity Diagram mengelola galeri dapat dilihat pada gambar 3.9
berikut:
Gambar 3. 9 Activity Diagram Mengelola Galeri

melakukan pengolahan data galeri berupa menambah, menghapus
atau merubah data. Jika admin ingin melakukan penambahan data
maka admin memilih tombol tambah data dan mengisi data sesuai
dengan keterangan kolom lalu klik simpan. Admin jika ingin
61
merubah data maka memilih tombol edit data dan merubah data
sesuai dengan kolom dan klik simpan. Terakhir jika admin ingin
menghapus data, maka memilih tombol hapus data dan kondisi
terakhir sistem menampilkan data terbaru.
f. Activity Diagram Mengelola Berita

Activity Diagram mengelola berita dapat dilihat pada gambar 3.10
berikut:
Gambar 3. 10 Activity Diagram Mengelola Berita

melakukan pengolahan data berita berupa menambah, menghapus
atau merubah data. Jika admin ingin melakukan penambahan data
maka admin memilih tombol tambah data dan mengisi data sesuai
62
dengan keterangan kolom lalu klik simpan. Admin jika ingin

merubah data maka memilih tombol edit data dan merubah data
sesuai dengan kolom dan klik simpan. Terakhir jika admin ingin
menghapus data, maka memilih tombol hapus data dan kondisi
terakhir sistem menampilkan data terbaru.
g. Activity Diagram Mengelola Pengumuman

Activity Diagram mengelola galeri dapat dilihat pada gambar 3.11
berikut:
Gambar 3. 11 Activity Diagram Mengelola Pengumuman

melakukan pengolahan data pengumuman berupa menambah,
63

h. Activity Diagram Mengelola Data User

Activity Diagram mengelola data user dapat dilihat pada gambar
3.12 berikut:
Gambar 3. 12 Activity Diagram Mengelola Data User

melakukan pengolahan data user berupa menghapus data. jika
menekan tombol “ya” lalu sistem akan menampilkan data terbaru.
64
i. Activity Diagram Mengelola Data Pesan

Activity Diagram mengelola data pesan dapat dilihat pada gambar
3.13 berikut:
Gambar 3. 13 Activity Diagram Mengelola Data Pesan

melakukan pengolahan data pesan berupa menghapus data. jika
menekan tombol “ya” lalu sistem akan menampilkan data terbaru.
65
j. Activity Diagram Mencetak Laporan Surat

Activity Diagram mengelola mencetak laporan surat dapat dilihat
pada gambar 3.14 berikut:
Gambar 3. 14 Activity Diagram Mencetak Laporan Surat

Keterangan gambar : aktivitas diatas menerangkan admin dan
pegawai dapat melakukan pengolahan data laporan surat berupa
mencetak data. Jika admin dan pegawaiingin mencetak data, maka
memilih tombol cetak data dan memilih jenis surat dan rentang
tanggal. Lalu menekan tombol print dan sistem menampilkan
documen siap cetak.
66
k. Activity Diagram Mengelola Surat Masuk

Activity Diagram mengelola surat masuk dapat dilihat pada gambar
3.15 berikut:
Gambar 3. 15 Activity Diagram Mengelola Surat Masuk

Keterangan gambar : aktivitas diatas menerangkan pegawai
dapat melakukan pengolahan data surat masuk berupa menambah,
menghapus atau merubah data. Jika pegawai ingin melakukan
penambahan data maka pegawai memilih tombol tambah data dan
pegawai jika ingin merubah data maka memilih tombol edit data
dan merubah data sesuai dengan kolom dan klik simpan. Terakhir
67
jika pegawai ingin menghapus data, maka memilih tombol hapus

data dan kondisi terakhir sistem menampilkan data terbaru.
l. Activity Diagram Mengelola Surat Keluar

Activity Diagram mengelola surat keluar dapat dilihat pada gambar
3.16 berikut:
Gambar 3. 16 Activity Diagram Mengelola Surat Keluar

Keterangan gambar : aktivitas diatas menerangkan pegawai
dapat melakukan pengolahan data surat keluar berupa menambah,
menghapus atau merubah data. Jika pegawai ingin melakukan
penambahan data maka pegawai memilih tombol tambah data dan
68
pegawai jika ingin merubah data maka memilih tombol edit data
dan merubah data sesuai dengan kolom dan klik klik simpan.
Terakhir jika pegawai ingin menghapus data, maka memilih
tombol hapus data dan kondisi terakhir sistem menampilkan data
terbaru.
m. Activity Diagram Menampilkan Daftar Pegawai
Activity Diagram menampilkan daftar pegawai dapat dilihat
pada gambar 3.17 berikut:
Gambar 3. 17 Activity Diagram Menampilkan Daftar Pegawai

Keterangan gambar : aktivitas diatas menerangkan
pengunjung dan user masuk pada sistem. Pengunjung dan user
dapat melihat isi daftar pegawai.
n. Activity Diagram Menampilkan Visi & Misi

Activity Diagram menampilkan visi & misi dapat dilihat pada
gambar 3.18 berikut:
69
Gambar 3. 18 Activity Diagram Menampilkan Visi & Misi

Keterangan gambar : aktivitas diatas menerangkan
pengunjung dan user masuk pada sistem. Pengunjung dan user
dapat melihat isi visi & misi.
o. Activity Diagram Menampilkan Galeri

Activity Diagram menampilkan daftar pegawai dapat dilihat pada
Gambar 3. 19 Activity Diagram Menampilkan Galeri

Keterangan gambar : aktivitas diatas menerangkan pengunjung
dan user masuk pada sistem. Pengunjung dan user dapat melihat
isi galeri.
70
p. Activity Diagram Menampilkan Berita

Activity Diagram menampilkan berita dapat dilihat pada gambar
3.20 berikut:
Gambar 3. 20 Activity Diagram Menampilkan Berita

daftar berita
q. Activity Diagram Menampilkan Pengumuman
Activity Diagram menampilkan pengumuman dapat dilihat pada
Gambar 3. 21 Activity Diagram Menampilkan Pengumuman

daftar pengumuman.
71
r. Activity Diagram Menampilkan Kontak Kami

Activity Diagram menampilkan kontak kami dapat dilihat pada
Gambar 3. 22 Activity Diagram Menampilkan Kontak Kami

isi kontak.
72
s. Activity Diagram Mendaftar

Activity Diagram mendaftar dapat dilihat pada gambar 3.23
berikut:
Gambar 3. 23 Activity Diagram Mendaftar

mendaftar untuk menjadi user yang dapat melakukan pengiriman
pesan / saran dan akses sebagai user.
73
t. Activity Diagram Mengirim Pesan

Activity Diagram mengirim pesan dapat dilihat pada gambar 3.24
berikut:
Gambar 3. 24 Activity Diagram Mengirim Pesan

Keterangan gambar : aktivitas diatas menerangkan user
mengirim pesan / saran ke sistem yang dapat dilihat oleh admin.
74
4. Sequence Diagram
Sequence Diagram digunakan untuk menggambarkan secara detail
interaksi antara objek-objek dan terjadinya urutan proses komunikasi
yang dilakukan dalam sistem untuk mencapai tujuan dan menghasilkan
output tertentu. Berikut adalah gambaran Sequence Diagram pada
sistem informasi yang akan dibangun.
a. Sequence Diagram Login
Squence Diagram Login dapat dilihat pada gambar 3.25
berikut ini:
Form Login Cek_login Database

Admin, Pegawai
dan User
1. Pilih Menu Login
2. Input Username & Password()
3. verifikasi login()
4. login valid()
5. masuk ke halaman utama

sesuai dengan hak aksesnya
Gambar 3. 25 Sequence Diagram Login

Keterangan Gambar : pada saat admin, pegawai dan user
memilih login. Sistem akan meminta input username dan password
terlebih dahulu. Sistem akan mencocokan kesesuaian username dan
password yang diinput dengan database. Jika data sesuai akan masuk
ke halaman utama sistem sesuai dengan hak akses masing-masing.
75
b. Sequence Diagram Logout

Squence Diagram Logout dapat dilihat pada gambar 3.26 berikut
ini:
Menu utama
sistem validasi
sistem
Admin, Pegawai
dan User
1. Masuk ke sistem
2. Klik logout
3. Menampilkan pesan konfirmasi
4. Klik ya
5. Keluar dari sistem
Gambar 3. 26 Sequence Diagram Logout

Keterangan Gambar : pada saat admin, pegawai dan user ingin
keluar dari sistem terlebih dahulu memilih menu logout. Sistem akan
menampilkan konfirmasi dan aktor akan memilih tombol “ya”.
76
c. Sequence Diagram Pengolahan Daftar Pegawai

Squence Diagram Pengolahan Daftar Pegawai dapat dilihat
pada gambar 3.27 berikut ini:
Menu Data
Pegawai
Database
Admin, Pegawai dan
User
1. Pilih Menu Dropdown dan Pilih

Data Pegawai
2. Tampil Semua Data Pegawai
3. Klik tambah data

4. tampil form tambah data
5. input data pegawai

6. validasi data
7. simpan data
8. data telah disimpan dan muncul

notifikasi
9. Klik edit data

11. edit data pegawai

12. validasi data
13. update data
14. data telah diubah dan muncul

notifikasi
15. Klik hapus data

16. muncul notifikasi konfirmasi
17. klik ya
18. validasi data
19. hapus data
20. data telah dihapus dan muncul

notifikasi
Gambar 3. 27 Sequence Diagram Pengolahan Daftar Pegawai

Keterangan Gambar : admin memilih menu data pegawai dan
sistem akan menampilkan halaman data pegawai. Admin dapat
menambahkan pegawai dengan memilih tombol tambah dan
kemudian admin mengisi data pegawai. Setelah itu sistem akan
mengecek kelengkapan data, jika data tidak lengkap maka sistem
akan menampilkan pesan. Jika lengkap maka sistem akan
77
menyimpan ke dalam database. Kemudian sistem akan menampilkan

data terbaru. Admin dapat mengedit dan menghapus data tertentu.
d. Sequence Diagram Pengolahan Visi & Misi

Squence Diagram Pengolahan Visi & Misi dapat dilihat pada
gambar 3.28 berikut ini:
Menu Data visi &

misi
Database
Admin

Data visi & misi
2. Tampil Semua Data Visi & Misi
3. Klik tambah data

5. input data galeri

6. validasi data
7. simpan data

notifikasi
9. Klik edit data

11. edit data galeri

12. validasi data
13. update data

notifikasi
15. Klik hapus data

17. klik ya
18. validasi data
19. hapus data

notifikasi
Gambar 3. 28 Sequence Diagram Pengolahan Visi & Misi

Keterangan Gambar : admin memilih menu data visi & misi
dan sistem akan menampilkan halaman data visi & misi. Admin
dapat mengedit data visi & misi dengan memilih tombol edit dan
kemudian admin merubah data visi & misi. Setelah itu sistem akan
78

menyimpan ke dalam database. Kemudian sistem akan
menampilkan data terbaru. Admin dapat menghapus data.
e. Sequence Diagram Pengolahan Galeri
Squence Diagram Pengolahan Galeri dapat dilihat pada
Menu Data Galeri Database

Admin

Data Galeri
2. Tampil Semua Data Galeri
3. Klik tambah data

5. input data galeri

6. validasi data
7. simpan data

notifikasi
9. Klik edit data

11. edit data galeri

12. validasi data
13. update data

notifikasi
15. Klik hapus data

17. klik ya
18. validasi data
19. hapus data

notifikasi
Gambar 3. 29 Sequence Diagram Pengolahan Galeri

Keterangan Gambar : admin memilih menu data galeri dan
sistem akan menampilkan halaman data galeri. Admin dapat
menambahkan galeri dengan memilih tombol tambah dan
kemudian admin mengisi data galeri. Setelah itu sistem akan
79

menampilkan data terbaru. Admin dapat mengedit dan menghapus
data tertentu.
f. Sequence Diagram Pengolahan Berita

Squence Diagram Pengolahan Berita dapat dilihat pada
Menu Data Berita Database

Admin
1. Pilih Menu Dropdown Post dan

Pilih Berita
2. Tampil Semua Data Berita
3. Klik tambah data

5. input data berita

6. validasi data
7. simpan data

notifikasi
9. Klik edit data

11. edit data berita

12. validasi data
13. update data

notifikasi
15. Klik hapus data

17. klik ya
18. validasi data
19. hapus data

notifikasi
Gambar 3. 30 Sequence Diagram Pengolahan Berita

Keterangan Gambar : admin memilih menu data berita dan
sistem akan menampilkan halaman data berita. Admin dapat
menambahkan berita dengan memilih tombol tambah dan
kemudian admin mengisi data berita. Setelah itu sistem akan
80

data tertentu.
g. Sequence Diagram Pengolahan Pengumuman

Squence Diagram Pengolahan Pengumuman dapat dilihat
pada gambar 3.31 berikut ini:
Menu Data
Pengumuman
Database
Admin
1. Pilih Menu Dropdown Post dan
Pilih Pengumuman
2. Tampil Semua Data
Pengumuman
3. Klik tambah data

5. input data pengumuman

6. validasi data
7. simpan data

notifikasi
9. Klik edit data

11. edit data pengumuman

12. validasi data
13. update data

notifikasi
15. Klik hapus data

17. klik ya
18. validasi data
19. hapus data

notifikasi
Gambar 3. 31 Sequence Diagram Pengolahan Pengumuman

Keterangan Gambar : admin memilih menu data pengumuman
dan sistem akan menampilkan halaman data pengumuman. Admin
dapat menambahkan pengumuman dengan memilih tombol tambah
81
dan kemudian admin mengisi data pengumuman. Setelah itu sistem

akan mengecek kelengkapan data, jika data tidak lengkap maka
sistem akan menampilkan pesan. Jika lengkap maka sistem akan
data tertentu.
h. Sequence Diagram Mencetak Laporan Surat

Squence Diagram Pengolahan user dapat dilihat pada gambar
3.32 berikut ini:
Menu Data
Laporan Surat
Database
Admin, Pegawai
1. Pilih Menu Laporan Surat

2. Tampil Semua Data Laporan
Surat
3. Klik Cetak
4. tampil form cetak data
5. Pilih jenis surat dan
rentang tanggal
6. validasi data
7. Menampilkan documen siap

cetak
Gambar 3. 32 Sequence Diagram Mencetak Laporan Surat

Keterangan Gambar : admin memilih menu data laporan surat
dan sistem akan menampilkan halaman data laporan surat. Admin
dapat mencetak laporan surat dengan memilih tombol cetak dan
kemudian admin memilih jenis surat dan rentang tanggal. sistem
akan menampilkan data documen siap cetak.
82
i. Sequence Diagram Pengolahan User

Squence Diagram Pengolahan user dapat dilihat pada gambar
3.33 berikut ini:
Menu Data User Database

Admin
1. Pilih Menu Total User
2. Tampil Semua Data User
3. Klik Hapus data 4. Menampilkan notifikasi

konfirmasi
5. klik ya
6. validasi data
7. hapus data
8. data telah dihapus dan

muncul notifikasi
Gambar 3. 33 Sequence Diagram Pengolahan User

Keterangan Gambar : admin memilih menu total user dan
sistem akan menampilkan halaman data user. Admin menghapus
data dengan memilih tombol hapus. Setelah itu sistem akan
menampilkan notifikasi konfirmasi dan admin memilih tombol
“ya”. Kemudian sistem akan menampilkan data terbaru.
j. Sequence Diagram Pengolahan Pesan
Squence Diagram Pengolahan Pesan dapat dilihat pada
Menu Data
Pesan
Database
Admin
1. Pilih Menu Pesan
2. Tampil Semua Data Pesan
3. Klik Hapus data 4. Menampilkan notifikasi

konfirmasi
5. klik ya
6. validasi data
7. hapus data

muncul notifikasi
Gambar 3. 34 Sequence Diagram Pengolahan Pesan

Keterangan Gambar : admin memilih menu pesan dan sistem
akan menampilkan halaman pesan. Admin menghapus data dengan
83
memilih tombol hapus. Setelah itu sistem akan menampilkan

notifikasi konfirmasi dan admin memilih tombol “ya”. Kemudian
sistem akan menampilkan data terbaru.
k. Sequence Diagram Pengolahan Surat Masuk

Squence Diagram Pengolahan Surat Masuk dapat dilihat pada
Menu Data
Surat Masuk
Database
Pegawai
1. Pilih Menu Surat Masuk

2. Tampil Semua Data Surat
Masuk
3. Klik tambah data

5. input data surat
masuk
6. validasi data
7. simpan
data
8. data telah disimpan dan

muncul notifikasi
9. Klik edit data

11. edit data surat
masuk
12. validasi data
13. update data
14. data telah diubah dan

muncul notifikasi
15. Klik hapus data 16. muncul notifikasi

konfirmasi
17. klik ya
18. validasi data
19. hapus data

muncul notifikasi
Gambar 3. 35 Sequence Diagram Pengolahan Surat Masuk

Keterangan Gambar : pegawai memilih menu data surat masuk
dan sistem akan menampilkan halaman data surat masuk. Pegawai
dapat menambahkan data surat masuk dengan memilih tombol
tambah dan kemudian pegawai mengisi data surat masuk. Setelah
itu sistem akan mengecek kelengkapan data, jika data tidak lengkap
maka sistem akan menampilkan pesan. Jika lengkap maka sistem
84
akan menyimpan ke dalam database. Kemudian sistem akan

menampilkan data terbaru. Pegawai dapat mengedit dan
menghapus data tertentu.
l. Sequence Diagram Pengolahan Surat Keluar

Squence Diagram Pengolahan Surat Keluar dapat dilihat pada
Menu Data
Surat Keluar
Database
Pegawai
1. Pilih Menu Surat Keluar

2. Tampil Semua Data Surat
Keluar
3. Klik tambah data

5. input data surat
keluar
6. validasi data
7. simpan
data

muncul notifikasi
9. Klik edit data

11. edit data surat
keluar
12. validasi data
13. update data
14. data telah diubah dan

muncul notifikasi
15. Klik hapus data 16. muncul notifikasi

konfirmasi
17. klik ya
18. validasi data
19. hapus data

muncul notifikasi
Gambar 3. 36 Sequence Diagram Pengolahan Surat Keluar

Keterangan Gambar : pegawai memilih menu data surat keluar
dan sistem akan menampilkan halaman data surat keluar. Pegawai
dapat menambahkan data surat keluar dengan memilih tombol
tambah dan kemudian pegawai mengisi data surat keluar. Setelah
itu sistem akan mengecek kelengkapan data, jika data tidak lengkap
maka sistem akan menampilkan pesan. Jika lengkap maka sistem
akan menyimpan ke dalam database. Kemudian sistem akan
85
menampilkan data terbaru. Pegawai dapat mengedit dan

menghapus data tertentu.
m. Sequence Diagram Melihat Daftar Pegawai

Squence Diagram Melihat Daftar Pegawai dapat dilihat pada
Halaman Utama Database

Pengunjung, User
1. Memasukkan alamat website

2. Menampilkan Halaman
3. Klik menu dropdown profile Utama website
dan pilih menu Daftar
pegawai 4. Menampilkan semua data
pegawai
Gambar 3. 37 Sequence Diagram Melihat Daftar Pegawai

Keterangan Gambar : pengunjung dan user memasukkan
alamat Website, dan aktor ingin melihat daftar pegawai dengan
memilih menu daftar pegawai dan sistem akan menampilkan isi
dari halaman daftar pegawai.
n. Sequence Diagram Melihat Visi & Misi

Squence Diagram Melihat Visi & Misi dapat dilihat pada

Pengunjung, User

Utama website
3. Klik menu dropdown profile
dan pilih menu visi & misi 4. Menampilkan data visi & misi
Gambar 3. 38 Sequence Diagram Melihat Visi & Misi

Keterangan Gambar : pengunjung dan user memasukkan alamat
Website, dan aktor ingin melihat visi & misi dengan memilih menu
86
visi & misi dan sistem akan menampilkan isi dari halaman visi &
misi.
o. Sequence Diagram Melihat Galeri

Squence Diagram Melihat Galeri dapat dilihat pada gambar
3.39 berikut ini:

Pengunjung, User

Utama website
3. Klik menu galeri
4. Menampilkan data galeri
Gambar 3. 39 Sequence Diagram Melihat Galeri

alamat Website, dan aktor ingin melihat galeri dengan memilih
menu galeri pegawai dan sistem akan menampilkan isi dari
halaman galeri.
p. Sequence Diagram Melihat Berita

Squence Diagram Melihat Berita dapat dilihat pada gambar
3.40 berikut ini:

Pengunjung, User

Utama website
3. Klik menu berita
4. Menampilkan data berita
Gambar 3. 40 Sequence Diagram Melihat Berita

alamat Website, dan aktor ingin melihat berita dengan memilih
menu berita dan sistem akan menampilkan isi dari halaman berita.
87
q. Sequence Diagram Melihat Pengumuman

Squence Diagram Melihat Pengumuman dapat dilihat pada

Pengunjung, User

Utama website
3. Klik menu pengumuman 4. Menampilkan data
pengumuman
Gambar 3. 41 Sequence Diagram Melihat Daftar Pengumuman

alamat Website, dan aktor ingin melihat pengumuman dengan
memilih menu pengumuman dan sistem akan menampilkan isi
halaman pengumuman.
r. Sequence Diagram Melihat Kontak Kami

Squence Diagram Melihat Daftar Pegawai dapat dilihat pada
Halaman Utama Sistem

Pengunjung, User

Utama website
3. Klik menu kontak kami 4. Menampilkan data kontak
kami
Gambar 3. 42 Sequence Diagram Melihat Kontak Kami

alamat Website, dan aktor ingin melihat kontak kami dengan
memilih menu kontak kami dan sistem akan menampilkan isi dari
halaman kontak kami.
s. Sequence Diagram Daftar User

88
Squence Diagram Daftar User dapat dilihat pada gambar 3.43

berikut ini:

Pengunjung

Utama website
3. Klik menu kontak kami 4. Menampilkan data kontak
kami
5. Klik menu daftar 6. Menampilkan form

pendaftaran
7. Mengisi semua kolom pada
form
8. validasi data
9. simpan data

muncul notifikasi berhasil
Gambar 3. 43 Sequence Diagram Melihat Daftar User

Keterangan Gambar : pengunjung memasukkan alamat
Website, dan aktor ingin melihat mendaftar menjadi user dengan
memilih menu kontak kami dan sistem akan menampilkan isi dari
halaman kontak kami. Aktor memilih menu daftar dan sistem akan
menampilkan form pendaftaran. Lalu, aktor akan mengisi semua
data pada form pendaftaran dan sistem akan memvalidasi data. Jika
benar sistem akan menyimpan data data dan menampilkan pesan
berhasil.
t. Sequence Diagram Mengirim Pesan

89
Squence Diagram Mengirim Pesan dapat dilihat pada gambar

3.44 berikut ini:

User

2. Menampilkan Halaman Utama
website
3. Klik menu kontak kami
4. Menampilkan data kontak kami
5. Isikan Kolom pesan / saran

6. validasi data
7. simpan data

muncul notifikasi berhasil
Gambar 3. 44 Sequence Diagram Mengirim Pesan

Keterangan Gambar : user memasukkan alamat Website, dan
aktor ingin mengirim pesan / saran dengan memilih menu kontak
kami dan sistem akan menampilkan isi dari halaman kontak kami.
User mengisi form pesan / saran dan klik tombol kirim. Sistem
akan memvalidasi data, jika benar sistem akan menyimpan data
data dan menampilkan pesan berhasil.
3.3.2 Desain table dalam database

Dalam sistem ini terdapat database, dimana dalam database
tersebut ada beberapa tabel, yaitu:
1. Tabel Data Pegawai
Nama Database : dbs_kominfo
Nama Tabel : pegawai
Primary Key : id
Tabel 3. 24 Data Pegawai

90
Field Type Length Primary

id int 11 primary key
id_bidang int 11 foreign key
nama_lengkap varchar 30
nip int 20
alamat varchar 20
no_hp int 12
jabatan varchar 20
gambar varchar 30
username varchar 10
password varchar 8
level tinyint 1
2. Tabel Data Bidang

Nama Tabel : bidang
Primary Key : id
Tabel 3. 25 Data Bidang
nama_bidang varchar 40
tugas longtext
3. Tabel Data Visi & Misi

Nama Tabel : visi_misi
Primary Key : id
Tabel 3. 26 Data Visi & Misi
visi longtext
91
misi longtext
4. Tabel Data Galeri

Nama Tabel : galeri
Primary Key : id
Tabel 3. 27 Data Galeri
gambar varchar 30
tipe tinyint 1
link varchar 20
judul text
keterangan text
tanggal_upload timestamp
5. Tabel Data informasi

Nama Tabel : informasi
Primary Key : id
Tabel 3. 28 Data Informasi
Field Type Length Prmary
id_bidang int 11 foreign key
katagori tinyint 1
foto varchar 30
keterangan text
judul mediumtext
isi longtext
status tinyint 1
tanggal date
92
tanggal_upload timestamp
view int 11
6. Tabel Data surat

Nama Tabel : surat
Primary Key : id
Tabel 3. 29 Data Surat
id_bidang tinyint 1 foreign key
jenis tinyint 1
no_surat varchar 30
tujuan varchar 30
asal varchar 30
perihal text
file varchar 30
tanggal_surat date
tanggal_terima date
7. Tabel Data user

Nama Tabel : surat
Primary Key : id
Tabel 3. 30 Data User
nama varchar 30
email varchar 50
alamat varchar 30
foto varchar 30
93
username varchar 10
password varchar 8
tanggal timestamp
8. Tabel Data pesan

Nama Tabel : pesan
Primary Key : id
Tabel 3. 31 Data Pesan
id_user int 11 foreign key
pesan text
tanggal datestamp
status tinyint 1
3.4 Desain User Interface
3.4.1 Perancangan Antar Muka

1. Home Page
Perancangan halaman home page dapat dilihat pada gambar 3.45
berikut :
Logo Dinas BERANDA PROFIL BERITA GALERI PENGUMUMAN KONTAK KAMI
Banner
Profile dinas
keterangan
foto
Berita terbaru
Berita 1 Berita 2 Berita 3
Gambar 3. 45 Home Page

Merupakan rancangan tampilan pada halaman home page
diperlihatkan foto foto yang berkaitan dengan Diskominfo Bungo, lalu
dibawahnya ditampilkan profil singkat kantor, pengumuman, berita
94
dan galeri foto mengenai Diskominfo bungo yang berurutan dari

berita paling baru sampai paling lama sesuai tanggalnya.
2. Visi & Misi

Perancangan halaman visi & misidapat dilihat pada gambar 3.46
berikut :
Visi & misi
visi misi
Gambar 3. 46 visi & misi

Merupakan rancangan tampilan dari halaman visi misi yang
diperlihatkan pada user. Pada halaman ini berisikan visi dan misi
dari Diskominfo Bungo.
2. Profil Dinas
Perancangan halaman profil dinas dapat dilihat pada gambar
3.47 berikut :
Profile Kantor
Gambar 1 Gambar 2
keterangan
Gambar 3. 47 profil Dinas

Merupakan racangan tampilan profil dinas yang berisi gambar
dan keterangan kantor Diskominfo Bungo.
95
5. Berita
Perancangan halaman berita dapat dilihat pada gambar 3.48 berikut :
Berita terbaru
Berita 1 keterangan
Berita 2 keterangan
1 2
Gambar 3. 48 Berita
Merupakan rancangan tampilan dari berita yang diperlihatkan
pada level user. Di bawahnya ditampilkan berita berita mengenai
Diskominfo Bungo yang berurutan dari berita paling baru sampai
paling lama sesuai tanggalnya.
6. Pengumuman
Perancangan halaman pengumuman dapat dilihat pada gambar
3.49 berikut :
pengumuman terbaru
Pengumum
an 1 keterangan
Pengumum
an 2 keterangan
1 2
Gambar 3. 49 Pengumuman
Merupakan rancangan tampilan dari pengumuman yang
diperlihatkan pada level user. Di bawahnya ditampilkan pengumuman
mengenai Diskominfo Bungo yang berurutan dari pengumuman
paling baru sampai paling lama sesuai tanggalnya.
96
7. Daftar Pegawai
Perancangan halaman daftar pegawai dapat dilihat pada gambar
3.50 berikut :
Daftar Pegawai
Pegawai 1 Pegawai 2 Pegawai 3 Pegawai 4
Pegawai 5 Pegawai 6
Gambar 3. 50 Daftar Pegawai

Merupakan rancangan tampilan dari halaman tenaga kerja yang
diperlihatkan pada level user. Dimana berisi informasi tentang tenaga
kerja perbidang yang ada di Diskominfo Bungo, dengan informasi
seperti nama, foto, jabatan dan nip serta tugas dan fungsi perbidang
yang ada di Diskominfo Bungo.
8. Galeri
Perancangan halaman galeri dapat dilihat pada gambar 3.51 berikut :
Galeri
Foto
Foto 1 Foto 2 Foto 3 Foto 4
Vidio
Vidio 1 Vidio 2
Gambar 3. 51 Galeri
Merupakan rancangan tampilan dari halaman galeri yang
diperlihatkan pada level user. Dimana berisi informasi tentang foto
dan vidio yang berkaitan dengan kegiatan yang dilakukan di
Diskominfo Bungo serta ada keterangan kegiatan dan tanggal
pelaksanaannya.
97
9. Kontak Kami
Perancangan halaman kontak kami dapat dilihat pada gambar
3.52 berikut :
Logo Dinas BERANDA PROFIL BERITA GALERI PENGUMUMAN KONTAK KAMI LOGIN REGISTER
Kontak kami
nama
email
Keterangan Alamat dan kontak telp dan email

Pesan
kirim
Gambar 3. 52 Kontak Kami

Merupakan rancangan tampilan dari halaman kontak kami.
Dimana pada halaman ini tempat untuk user / pengunjung
memberikan kritik serta saran untuk Diskominfo Bungo. Pada
halaman ini juga ditampilkan juga alamat, no telepon, media sosial
dan lokasi kantor.
10. Halaman Login User

Perancangan halaman login user dapat dilihat pada gambar 3.53
berikut :
USER LOGIN
Username [varchar(15)]
Password [varchar(8)]
Belum mempunyai akun ? Buat Akun
Anda Admin atau Pegawai ? Masuk
Login
Gambar 3. 53 Login User

Merupakan rancangan tampilan dari halaman login user. Dimana
pada halaman ini tempat untuk pengunjung melakukan login untuk
menjadi user.
98
11. Halaman Daftar

Perancangan halaman daftar dapat dilihat pada gambar 3.54 berikut :
REGISTER AKUN
Nama Lengkap Email

Masukkan Nama Lengkap [ varchar(30) ] Masukkan Email [ varchar(30) ]
Alamat Foto
Masukkan Alamat [ varchar(30) ] Choose file [varchar(70)]
Username Password
Masukkan Username [ varchar(10) ] Masukkan Password [ varchar(8) ]
Confirm Password
Masukkan ulang password [ varchar(8) ]
Keluar Simpan
Gambar 3. 54 halaman Daftar

Merupakan rancangan tampilan dari halaman daftar. Dimana pada
halaman ini tempat untuk pengunjung melakukan pendaftaran untuk
menjadi user.
12. Halaman Login Admin dan Pegawai

Perancangan halaman profil dinas dapat dilihat pada gambar 3.55
berikut :
Login
username
Varchar(10)
*Gambar password
Varchar(8)
Login
Gambar 3. 55 Halaman login admin dan pegawai

Merupakan rancangan tampilan dari halaman login admin dan
pegawai. Dimana pada halaman ini tempat untuk admin dan pegawai
melakukan login untuk masuk ke sistem.
99
13. Halaman Dasboard Admin

Perancangan halaman profil dinas dapat dilihat pada gambar 3.56
berikut :
KOMINFO BUNGO Admin
Dasboard
Admin
Dasboard
Akun Pegawai Total Pegawai Galeri Berita / Penguuman
Hak Akses 3 3 3 3
Kepegawaian
Laporan surat
Data Pegawai
Visi & Misi Informasi Lanjutan
Galeri
Post
Pesan
Berita Total User View
Nama
Pengumuman
Pesan
3 3
Pesan
Gambar 3. 56 Dasboard Admin

Merupakan rancangan tampilan dari halaman dasboard admin.
Dimana pada halaman ini tempat untuk admin melihat semua data.
14. Halaman Data Pegawai

Perancangan halaman data pegawai dapat dilihat pada gambar
3.57 berikut :
KOMINFO BUNGO Admin
Data Pegawai
Tambah
Admin
Dasboard
NO Gambar Nama Nip Bidang Alamat No Hp Aksi
Hak Akses 1. Widia Indah 1902301333 IKP Jl. Jambu 0966252522 edit hapus
Kepegawaian
Laporan surat
Data Pegawai
Visi & Misi
Galeri
Post
Berita
Pengumuman
Pesan
Gambar 3. 57 Halaman Data Pegawai

Merupakan rancangan tampilan dari halaman data pegawai.
Dimana pada halaman ini tempat untuk admin melihat semua data
pegawai dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
100
15. Form tambah pegawai

Perancangan halaman Form tambah pegawai dapat dilihat pada
gambar 3.58 berikut :
KOMINFO BUNGO Admin
Tambah Pegawai
Nama Lengkap Nip
Admin
Varchar(30) Int(20)
Dasboard
Jabatan Alamat
Hak Akses Varchar(30) Varchar(20)
Kepegawaian Bidang
No Hp
Laporan surat
Int(12) Int(11)
Data Pegawai
Visi & Misi
Gambar
Galeri
Post Varchar(70)
Berita
Pengumuman Keluar Simpan
Pesan
Gambar 3. 58 form tambah pegawai

Merupakan rancangan tampilan dari form tambah pegawai,
dimana admin menambah data.
16. Halaman Data Visi & Misi

Perancangan halaman data visi & misi dapat dilihat pada gambar
3.59 berikut :
KOMINFO BUNGO Admin
Data Visi & Misi
Tambah
Admin
Dasboard
NO visi misi Aksi
Hak Akses 1. isi isi edit hapus
Kepegawaian
Laporan surat
Data Pegawai
Visi & Misi
Galeri
Post
Berita
Pengumuman
Pesan
Gambar 3. 59 Halaman Data Visi & Misi

Merupakan rancangan tampilan dari halaman data visi & misi.
Dimana pada halaman ini tempat untuk admin melihat data visi dan
misi dan mengelola data. Seperti mengedit dan menghapus data.
101
17. Form tambah visi & misi

Perancangan halaman Form tambah visi & misi dapat dilihat pada
KOMINFO BUNGO Admin
Tambah Visi & Misi

Visi
Admin
Longtext
Dasboard
Hak Akses
Kepegawaian Misi
Laporan surat Longtext
Data Pegawai
Visi & Misi
Galeri
Post
Berita
Pesan
Gambar 3. 60 form tambah visi & misi

Merupakan rancangan tampilan dari form tambah visi & misi,
18. Halaman Data Galeri

Perancangan halaman data galeri dapat dilihat pada gambar 3.61
berikut :
KOMINFO BUNGO Admin
Data Galeri
Tambah
Admin
Dasboard
NO Gambar Link Tipe Judul Keterangan Tanggal_upload Aksi
Hak Akses 1. 4 Foto Depan Jl. Jambu 2022-10-17 edit hapus
Kepegawaian
Laporan surat
Data Pegawai
Visi & Misi
Galeri
Post
Berita
Pengumuman
Pesan
Gambar 3. 61 Halaman Data Geleri

Merupakan rancangan tampilan dari halaman data galeri.
galeri dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
102
19. Form tambah galeri

Perancangan halaman Form tambah galeri dapat dilihat pada
KOMINFO BUNGO Admin
Tambah Galeri
Foto
Admin
Varchar(70)
Dasboard
link Judul
Hak Akses Varchar(20) text
Kepegawaian
Keterangan Type
Laporan surat
Data Pegawai text tinyint(1)
Visi & Misi
Galeri
Post
Berita
Pesan
Gambar 3. 62 form tambah galeri

Merupakan rancangan tampilan dari form tambah galeri, dimana
admin menambah data.
20. Halaman Data Berita

Perancangan halaman data berita dapat dilihat pada gambar 3.63
berikut :
KOMINFO BUNGO Admin
Data Berita
Tambah
Admin
Dasboard
NO bidang Foto Keterangan judul isi tanggal view Aksi
Hak Akses 1. TIK ada ada judul 2022-10-16 10 edit hapus
Kepegawaian
Laporan surat
Data Pegawai
Visi & Misi
Galeri
Post
Berita
Pengumuman
Pesan
Gambar 3. 63 Halaman Data berita

Merupakan rancangan tampilan dari halaman data berita.
berita dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
103
21. Form tambah berita

Perancangan halaman Form berita dapat dilihat pada gambar 3.64
berikut :
KOMINFO BUNGO Admin
Tambah Berita
Foto
Admin
Varchar(70)
Dasboard
Keterangan Foto Judul
Hak Akses text text
Kepegawaian Tanggal
Status
Laporan surat
date
Data Pegawai isi
Visi & Misi
Galeri longtext
Post
Berita
Pesan
Gambar 3. 64 form tambah berita

Merupakan rancangan tampilan dari form tambah berita, dimana
admin menambah data.
22. Halaman Data Pengumuman

Perancangan halaman data pengumuman dapat dilihat pada
KOMINFO BUNGO Admin
Data Pengumuman
Tambah
Admin
Dasboard
NO bidang Foto Keterangan judul isi tanggal view Aksi
Hak Akses 1. TIK ada ada judul 2022-10-16 10 edit hapus
Kepegawaian
Laporan surat
Data Pegawai
Visi & Misi
Galeri
Post
Berita
Pengumuman
Pesan
Gambar 3. 65 Halaman Data Pengumuman

Merupakan rancangan tampilan dari halaman data
pengumuman. Dimana pada halaman ini tempat untuk admin melihat
semua data pengumuman dan mengelola data. Seperti menambah,
mengedit dan menghapus data.
104
23. Form tambah pengumuman

Perancangan halaman Form tambah pengumuman dapat dilihat
pada gambar 3.66 berikut :
KOMINFO BUNGO Admin
Tambah Pengumuman
Foto
Admin
Varchar(70)
Dasboard
Keterangan Foto Judul
Hak Akses text text
Kepegawaian Tanggal
Status
Laporan surat
date
Data Pegawai isi
Visi & Misi
Galeri longtext
Post
Berita
Pesan
Gambar 3. 66 form tambah pengumuman

Merupakan rancangan tampilan dari form tambah visi & misi,
24. Halaman Data User

Perancangan halaman data user dapat dilihat pada gambar 3.67
berikut:
KOMINFO BUNGO Admin
Data user
Admin
Dasboard
NO foto nama email alamat username tanggal aksi
Hak Akses 1. agus gus@gmail.com jl.jambu gus 2022-10-16 hapus
Kepegawaian
Laporan surat
Data Pegawai
Visi & Misi
Galeri
Post
Berita
Pengumuman
Pesan
Gambar 3. 67 Halaman Data User

Merupakan rancangan tampilan dari halaman data user. Dimana
pada halaman ini tempat untuk admin melihat semua data user dan
mengelola data. Seperti menghapus data.
105
25. Halaman Data Pesan

Perancangan halaman data pesan dapat dilihat pada gambar 3.68
berikut :
KOMINFO BUNGO Admin
Data pesan
Admin
Dasboard
NO foto nama email pesan tanggal aksi
Hak Akses 1. agus gus@gmail.com cukup bagus 2022-10-16 hapus
Kepegawaian
Laporan surat
Data Pegawai
Visi & Misi
Galeri
Post
Berita
Pengumuman
Pesan
Gambar 3. 68 Halaman Data Pesan

Merupakan rancangan tampilan dari halaman data pesan.
pesan yang dikirimkan oleh user dan mengelola data. Seperti
menghapus data.
26. Halaman Laporan Surat

Perancangan halaman laporan surat dapat dilihat pada gambar
3.69 berikut :
KOMINFO BUNGO Admin
Laporan Surat
Cetak
Admin
Dari : Sampai Filter
Dasboard
NO Jenis Tanggal No_surat Terima Asal Tujuan perihal file Aksi

Hak Akses
1. masuk 2022-02-01 012/kom 2022-02-01 Kominfo Dpr Penting surat.pdf Downlod
Kepegawaian
Laporan surat
Data Pegawai
Visi & Misi
Galeri
Post
Berita
Pengumuman
Pesan
Gambar 3. 69 Halaman Laporan Surat

Merupakan rancangan tampilan dari halaman data laporan surat.
Dimana pada halaman ini tempat untuk admin untuk mencetak
laporan surat.
106
27. Halaman Dasboard Pegawai

Perancangan halaman dasboard pegawai dapat dilihat pada
KOMINFO BUNGO Pegawai
Dasboard
Pegawai
Surat Masuk Surat Keluar
Dasboard 3 1
Surat Masuk
Surat Keluar
Laporan
Surat Masuk
Surat Keluar
Gambar 3. 70 Halaman Dasboard Pegawai

Merupakan rancangan tampilan dari halaman dasboard pegawai.
Dimana pada halaman ini tempat untuk pegawai melihat total data
surat.
28. Halaman Data Surat Masuk

Perancangan halaman data surat masuk dapat dilihat pada gambar
3.71 berikut :
Surat Masuk
Pegawai Tambah
Dasboard
NO No_surat tanggal terima asal perihal file Aksi
Surat Masuk
1. 012/kom 2022-02-01 2022-02-01 Dpr penting masuk.pdf edit hapus
Surat Keluar
Laporan
Surat Masuk
Surat Keluar
Gambar 3. 71 Halaman Data Surat Masuk

Merupakan rancangan tampilan dari halaman surat masuk.
Dimana pada halaman ini tempat untuk pegawai melihat semua data
surat masuk dan mengelola data. Seperti menambah, mengedit dan
menghapus data
107
29. Form tambah surat masuk

Perancangan halaman Form tambah surat masuk dapat dilihat
pada gambar 3.72 berikut :
Tambah Data
No surat Tanggal Surat
Pegawai Varchar(30) date
Dasboard
Tanggal terima Asal
Surat Masuk
date Varchar(30)
Surat Keluar
Perihal File
Laporan
text Varchar(70)
Surat Masuk
Surat Keluar
Keluar Simpan
Gambar 3. 72 form tambah surat masuk

Merupakan rancangan tampilan dari form tambah surat masuk,
dimana pegawai menambah data.
30. Halaman Data Surat Keluar

Perancangan halaman data surat keluar dapat dilihat pada gambar
3.73 berikut :
Surat Keluar
Pegawai Tambah
Dasboard
NO tanggal tujuan No_surat perihal file aksi
Surat Masuk
1. 2022-02-01 Dpr 013/kom undangan masuk.pdf edit hapus
Surat Keluar
Laporan
Surat Masuk
Surat Keluar
Gambar 3. 73 Halaman Surat Keluar

Merupakan rancangan tampilan dari halaman surat keluar.
Dimana pada halaman ini tempat untuk pegawai melihat semua data
surat keluar dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
108
31. Form tambah surat keluar

Perancangan halaman Form tambah surat keluar dapat dilihat pada
Tambah Data
No surat Tanggal Surat
Pegawai Varchar(30) date
Dasboard
Tujuan Perihal
Surat Masuk
Varchar(30) text
Surat Keluar
File
Laporan
Varchar(70)
Surat Masuk
Surat Keluar
Keluar Simpan
Gambar 3. 74 Form Tambah Surat Keluar

Merupakan rancangan tampilan dari form tambah surat keluar, dimana
pegawai menambah data.
BAB IV
IMPLEMEMTASI DAN PENGUJIAN
4.1 Implementasi
Implementasi mengacu pada tindakan untuk mencapai tujuan-tujuan
yang telah diterapkan dalam suatu keputusan. Jadi, implementasi
merupakan tindakan untuk menjalankan rencana yang dibuat.
Dalam implementasi program aplikasi yang telah dirancang tersebut
maka diperlukan alat bantu berupa komputer atau laptop, komputer itu
sendiri terdiri dari tiga buah komponen pendukung yaitu software,
hardware dan brainware.
a. Arsitektur Hardware
Perangkat keras yang digunakan agar dapat mendukung dalam
implementasi Sistem Informasi Company Profile dan Pengolahan
Surat (Studi Kasus : Dinas Komunikasi, Informasi dan Persandian
Kab. Bungo) berbasis Web harus memiliki spesifikasi sebagai
berikut :
Processor : AMD A4
Memori : 4 GB
Harddisk : 500 GB
Perangkat Lain : Koneksi Internet.
b. Arsitektur Software
Perangkat lunak yang digunakan agar dapat mendukung dalam
implementasi Sistem Informasi Company Profile dan Pengolahan
Surat (Studi Kasus : Dinas Komunikasi, Informasi dan Persandian
Kab. Bungo) sebagai berikut :
1. Xampp Control Pannel
2. Visual Studio Code
3. Sistem Operasi Windows 10
4. Browser Google Chrome atau Mozilla Firefox
109
110
4.2 Pengujian Sistem

Pengujian ini dilakukan dengan tujuan utuuk mengetahui apakah
semua proses fungsi yang ada pada sistem yang sudah berjalan dengan
yang diinginkan. Pengujian yang dilakukan dalam penelitian ini adalah
Blackbox Testing.
Pengujian akan diawali dengan pengaktifan software XAMPP
sebagai localhost Webserver. Kemudian program akan dijalankan pada
perambah Web browser. Dibawah ini adalah hasil pengujian metode
Blackbox Testing.
1. Pengujian Admin
Tabel 4. 1 Blackbox Testing Admin
No. Rancangan Hasil Yang diharapkan Hasil
Proses
1. Login dengan Masuk ke dalam halaman Sesuai
username dan utama admin.
password yang
benar.
2. Login dengan Muncul pesan “username Sesuai
username dan dan password yang
password yang dimasukkan salah”
salah.
3. Logout Keluar dari sistem dan Sesuai
menuju ke halaman login.
4. Mengelola data Dapat menampilkan semua Sesuai
Pegawai data pegawai dan dapat
melakukan pengolahan data
seperti menambah,
mengubah dan menghapus
data.
5. Mengelola visi Dapat menampilkan data visi Sesuai
& misi & misi dan dapat melakukan
111

Proses
pengolahan data seperti
menambah, mengubah dan
menghapus data.
6. Mengelola Dapat menampilkan semua Sesuai
Berita data berita dan dapat
seperti menambah,
data.
Pengumuman data pengumuman dan dapat
seperti menambah,
data.
User data user dan dapat
seperti menghapus data.
Pesan data pesan dan dapat
seperti menghapus data.
Laporan Surat data laporan surat dan dapat
seperti mencetak laporan.
112
c. Pengujian Pegawai
Tabel 4. 2 Blackbox Testing Pegawai
Proses
1. Login dengan Masuk ke dalam halaman Sesuai
username dan utama pegawai.
password yang
benar.
2. Login dengan Muncul pesan “username Sesuai
username dan dan password yang
password yang dimasukkan salah”
salah.
3. Logout Keluar dari sistem dan Sesuai
menuju ke halaman login.
Surat Masuk data Surat masuk dan dapat
seperti menambah,
data.
Surat Keluar data Surat keluar dan dapat
seperti menambah,
data.
Laporan Surat data laporan surat dan dapat
seperti mencetak laporan.
113
d. Pengujuan Pengunjung dan User

Tabel 4. 3 Blackbox Testing Pengunjung dan User
Proses
1. Login Masuk sebagai user pada sistem Sesuai
3. Logout Keluar dari sistem dan menuju Sesuai
ke halaman utama pengunjung.
4. Melihat visi & Menampilkan data visi & misi Sesuai
misi Diskominfo Bungo.
5. Melihat Daftar Menampilkan data daftar Sesuai
Pegawai pegawai Diskominfo Bungo.
6. Melihat Berita Menampilkan data berita Sesuai
Diskominfo Bungo berdasarkan
unggahan terbaru.
7. Melihat Menampilkan data pengumann Sesuai
Pengumuman Diskominfo Bungo berdasarkan
unggahan terbaru.
8. Mendaftar Menampilkan form pendaftaran Sesuai
sebagai user sistem.
9. Mengirim Dapat mengirim pesan atau Sesuai
Pesan saran pada sistem.
Berikut keterangan mengenai program sistem informasi company

profile dan pengolahan surat yang telah dirancang pada Dinas
Komunikasi, Informatika dan Persandian Kab. Bungo.
114
a. Tampilan Home Page

Tampilan home page dapat dilihat pada gambar 4.1 berikut ini:
Gambar 4. 1 Tampilan Home Page

Merupakan tampilan pada halaman home page. Menampilkan
foto foto yang berkaitan dengan Diskominfo Bungo, lalu dibawahnya
ditampilkan profil singkat kantor.
b. Tampilan Visi & Misi

Tampilan visi & misi dapat dilihat pada gambar 4.2 berikut ini:
Gambar 4. 2 Tampilan Visi & misi

Merupakan tampilan pada halaman visi & misi. Menampilkan visi
dan misi dari Diskominfo Kab. Bungo.
115
c. Tampilan Profil
Tampilan profil dapat dilihat pada gambar 4.3 berikut ini:
Gambar 4. 3 Tampilan Profil

Merupakan tampilan pada halaman Profil. Menampilkan foto –
foto dan sejerah dari Diskominfo Kab. Bungo.
d. Tampilan Daftar Pegawai

Tampilan daftar pegawai dapat dilihat pada gambar 4.4 berikut ini:
Gambar 4. 4 Tampilan Daftar Pegawai

Merupakan tampilan pada halaman daftar pegawai. Menampilkan
foto, nama dan jabatan pegawai dari Diskominfo Kab. Bungo.
116
e. Tampilan Daftar Berita

Tampilan daftar berita dapat dilihat pada gambar 4.5 berikut ini:
Gambar 4. 5 Tampilan Daftar Berita

Merupakan tampilan pada halaman berita. Menampilkan daftar
berita berdasarkan unggahan terbaru dari Diskominfo Kab. Bungo.
f. Tampilan Daftar Pengumuman

Tampilan daftar pengumuman dapat dilihat pada gambar 4.6
berikut ini:
Gambar 4. 6 Tampilan Daftar Pengumuman

Merupakan tampilan pada halaman pengumuman. Menampilkan
daftar pengumuman berdasarkan unggahan terbaru dari Diskominfo
Kab. Bungo.
117
g. Tampilan Kontak Kami

Tampilan kontak kami dapat dilihat pada gambar 4.7 berikut ini:
Gambar 4. 7 Tampilan Kontak Kami

Merupakan tampilan pada halaman kontak kami. Dimana pada
halaman ini tempat untuk user / pengunjung memberikan kritik serta
saran untuk Diskominfo Bungo. Pada halaman ini juga ditampilkan
juga alamat, no telepon, media sosial dan lokasi kantor.
h. Tampilan Login User

Tampilan login user dapat dilihat pada gambar 4.8 berikut ini:
Gambar 4. 8 Tampilan Login User

Merupakan tampilan pada halaman login user. Menampilkan form
login untuk menjadi user.
118
i. Tampilan form Daftar

Tampilan form daftar dapat dilihat pada gambar 4.9 berikut ini:
Gambar 4. 9 Tampilan form Daftar

Merupakan tampilan pada halaman daftar. Menampilkan form
pendaftaran pengunjung untuk menjadi user.
j. Tampilan Login Admin dan Pegawai

Tampilan login admin dan pegawai dapat dilihat pada gambar
4.10 berikut ini:
Gambar 4. 10 Tampilan Form Daftar

Merupakan tampilan pada halaman login admin dan pegawai.
login bertujuan untuk mengisikan Usernamae dan password agar
dapat masuk ke halaman Web berikutnya serta dapat mengakses
sistem.
119
k. Tampilan Dasboard Admin

Tampilan dasboard admin dapat dilihat pada gambar 4.11
berikut ini:
Gambar 4. 11 Tampilan Dasboard Admin

Merupakan tampilan dari halaman dasboard admin. Dimana
pada halaman ini tempat untuk admin melihat semua data.
l. Tampilan Data Pegawai

Tampilan data pegawai dapat dilihat pada gambar 4.12 berikut ini:
Gambar 4. 12 Tampilan Data Pegawai

Merupakan rancangan tampilan dari halaman data pegawai.
pegawai dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
120
m. Tampilan Data Visi & Misi

Tampilan data visi & misi dapat dilihat pada gambar 4.13 berikut ini:
Gambar 4. 13 Tampilan Data Visi & Misi

Merupakan rancangan tampilan dari halaman data visi & misi.
Dimana pada halaman ini tempat untuk admin melihat semua data visi
& misi dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
n. Tampilan Data Berita

Tampilan data berita dapat dilihat pada gambar 4.14 berikut ini:
Gambar 4. 14 Tampilan Data Berita

Merupakan rancangan tampilan dari halaman data berita.
beita dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
121
o. Tampilan Data Galeri

Tampilan data galeri dapat dilihat pada gambar 4.15 berikut ini:
Gambar 4. 15 Tampilan Data Berita

Merupakan tampilan dari halaman data berita. Dimana pada
halaman ini tempat untuk admin melihat semua data berita dan
mengelola data. Seperti menambah, mengedit dan menghapus data.
p. Tampilan Data Pengumuman

Tampilan data pengumuman dapat dilihat pada gambar 4.16
berikut ini:
Gambar 4. 16 Tampilan Data Pengumuman

Merupakan tampilan dari halaman data pengumuman. Dimana
pada halaman ini tempat untuk admin melihat semua data
pengumuman dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
122
q. Tampilan Data User

Tampilan data user dapat dilihat pada gambar 4.17 berikut ini:
Gambar 4. 17 Tampilan Data User

Merupakan tampilan dari halaman data user. Dimana pada
halaman ini tempat untuk admin melihat semua data user dan
r. Tampilan Data Pesan

Tampilan data pesan dapat dilihat pada gambar 4.18 berikut ini:
Gambar 4. 18 Tampilan data Pesan

Merupakan tampilan dari halaman data pesan. Dimana pada
halaman ini tempat untuk admin melihat semua data pesan dan
123
s. Tampilan Data Laporan Data Surat

Tampilan data laporan surat dapat dilihat pada gambar 4.2
berikut ini:
Gambar 4. 19 Tampilan Data Laporan Surat

Merupakan tampilan dari halaman data laporan surat. Dimana
pada halaman ini tempat untuk admin melihat semua data laporan
surat dan mengelola data. Seperti mencetak laporan.
t. Tampilan Form Cetak laporan surat

Tampilan form cetak laporan surat dapat dilihat pada gambar
4.20 berikut ini:
Gambar 4. 20 Tampilan Form Cetak Laporan Surat

Merupakan tampilan dari halaman cetak laporan surat. Dimana
pada halaman ini tempat untuk admin mencetak data laporan surat.
124
u. Tampilan Dasboard Pegawai

Tampilan dasboard pegawai dapat dilihat pada gambar 4.21
berikut ini:
Gambar 4. 21 Tampilan Dasboard Pegawai

Merupakan tampilan dari halaman dasboard pegawai. Dimana
pada halaman ini tempat untuk pegawai melihat jumlah data, seperti
data surat masuk dan keluar.
v. Tampilan Data Surat Masuk

Tampilan data surat masuk dapat dilihat pada gambar 4.22
berikut ini:
Gambar 4. 22 Tampilan Data Surat masuk

Merupakan rancangan tampilan dari halaman data surat masuk.
surat masuk dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
125
w. Tampilan Data Surat Keluar

Tampilan data surat keluar dapat dilihat pada gambar 4.23
berikut ini:
Gambar 4. 23 Tampilan Surat Keluar

Merupakan rancangan tampilan dari halaman data surat keluar.
surat keluar dan mengelola data. Seperti menambah, mengedit dan
menghapus data.
BAB V
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Berdasarkan hasil penelitian analisa yang telah dilakukan diketahui
bahwa dalam proses pengenalan profile kantor dan pengolahan surat
masih dilakukan dengan cara manual, maka dilaporan ini dibuatkan
sistem yang Yang bertujuan untuk mempermudah mengakses dan
mengetahui segala sesuatu mengenai Diskominfo, Serta untuk
membantu kinerja pegawai dalam hal pengolahan surat. Sistem ini
dibangun menggunakan bahasa pemograman Html, Php dan Mysql
sebagai databasenya. Berdasarkan hasil pengujian yang telah
dilakukan, aplikasi yang dibangun telah sesuai dengan kebutuhan
fungsional.
5.2 Saran
Pada penelitian yang telah dilakukan ini, tentu saja masih banyak
kekurangan dan kelemahan. Oleh karena itu ada beberapa hal yang
perlu diperhatikan dalam pengembangan sistem kedepannya, antara
lain:
1. Untuk kedepannya Sistem Informasi Company Profile Dan

Pengelolahan Surat berbasis Web ini dapat di kembangkan dngan
tampilan yang lebih menarik dengan menggunakan fitur-fitur
terbaru yang lebih modern.
2. Untuk pengembang selanjutnya sistem yang telah dibangun ini
belum terdapatnya keamanan sistem yang lebih, oleh karena itu
pada peneliti selanjutnya dapat menambahkan keamanan sistem
yang lebih kuat.
126
DAFTAR PUSTAKA
Arifin, Rohayati, Nuraida Latif, and dkk. 2020. “Pengelolaan Surat Menyurat
Pada Kantor Balai Latihan Masyarakat Makassar Berbasis Web.”
Pengelolaan Surat Menyurat Pada Kantor Balai Latihan Masyarakat
Makassar Berbasis Web 10(1): 69–69.
portaldata.org/index.php/portaldata/article/view/71.
Hermiati, Reza, Asnawati Asnawati, and Indra Kanedi. 2021. “Pembuatan E-
Commerce Pada Raja Komputer Menggunakan Bahasa Pemrograman Php
Dan Database Mysql.” Jurnal Media Infotama 17(1): 54–66.
Hidayat, Pajar;, and Ir. Agung; Handayanto. 2019. “Analisis Perancangan Dan
Pembuatan Company Profile Berbasis Website Pada PT. SUCOFINDO
Semarang Sebagai Media Promosi Dan Informasi.” Science And Engineering
National Seminar 4 (SENS 4) 4(Sens 4): 193–200.
Kasus, Studi, P T Gramedia, and Goldie Gunadi. 2021. “Rancang Bangun Sistem
Peminjaman Laptop Dengan Metode Extreme Programming Menggunakan
Framework Bootstrap.” 12(1): 74–86.
Kesumaningtyas, Febby, and Reti Handayani. 2020. “Perancangan Sistem Pakar
Diagnosa Penyakit Rheumatic (Rematik) Dengan Metode Forward
Chaining.” Jurnal TEKNOIF 8(2): 59–63.
Maydianto, Muhammat Rasid Ridho. 2021. “Rancang Bangun Sistem Informasi
Point of Sale Dengan Framework Codeigniter Pada Cv Powershop.” Jurnal
Comasie 4(2): 50–59.
Mustaib, Robby Igfirly, and Ramaditia Dwiyansaputra. 2022. “Sistem Informasi
Company Profile Kantor Desa.” 3(2): 177–88.
Nugroho. 2019. “IJIS Indonesian Journal on Information System ISSN 2548-
6438.” IJIS-Indonesia Journal on Information System 4(April): 69–76.
https://media.neliti.com/media/publications/260171-sistem-informasi-
pengolahan-data-pembeli-e5ea5a2b.pdf.
Nurnaningsih, Desy, Rachmat Destriana, and Djamaludin Syahlan Mubaroq3.
2019. “Rancang Bangun Sistem Informasi Pengarsipan Surat Masuk Dan
Keluar Studi Kasus Pada Cv Sumber Karya Teknik.” JIKA (Jurnal
Informatika) 3(2): 41–47.
Putra, Agustiranda Bagaskara, and Sekreningsih Nita. 2019. “Perancangan Dan
Pembangunan Sistem Informasi E-Learning Berbasis Web ( Studi Kasus
Pada Madrasah Aliyah Kare Madiun ).” (2017): 81–85.
Rosa A. S. M. Shalahuddin. 2018. Rekayasa Perangkat Lunak: Terstruktur Dan
Berorientasi Objek. Revisi. Bandung: Informatika.
Seah, Jonny; Ridho, Muhammad Rasid. 2020. “Perancangan Sistem Informasi
127
128
Persediaan Suku Cadang Untuk Alat Berat Berbasis Desktop Pada Cv Batam
Jaya.” Comasie 3(3): 21–30.
Siti, Tia et al. 2021. “Perancangan Sistem Informasi Berbasis Web Melalui
Whatsapp Gateway Studi Kasus Sekolah Luar Biasa-Bc Nurani.” XI(1): 38–
44.
Winanjar, Jajang, and Deffy Susanti. 2021. “Rancangan Bangunan Sistem
Informasi Administrasi Desa Berbasis Web Menggunakan PHP Dan
MySQL.” Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST):
97–105.
Windea, Tiya, and Sarmidi. 2018. “Aplikasi Pengolahan Surat Menyurat Berbasis
Web (Studi Kasus Di Madrasah Tsanawiyah BPI Baturompe Kota
Tasikmalaya).” Jurnal Manajemen dan Teknik Informatika (JUMANTAKA)
02(01): 131–40. http://jurnal.stmik-
dci.ac.id/index.php/jumantaka/article/view/358.
LAMPIRAN
129
130
Lampiran 1 Surat pengantar PKL dari kampus.

131
Lampiran 2 sertifikat keterangan telah melaksanakan PKL.

132
Lampiran 3 Foto – foto di tempat PKL.
Penyerahan sertifikat dan perpisahan berserta poto-poto bersama dengan kepala

dinas dan bapak,ibu rekan – rekan kantor KOMINFO DAN PERSANDIAN
Kabupaten Bungo.
133
Mengikuti upacara hari batik nasional.

134
Mendesain piagam penghargaan untuk Kapolres Bungo menggunakan aplikasi

Photoshop.
Membantu mendata Surat Ketetapan Retribusi Daerah (SKRD)

135
Mengikuti apel pagi setiap hari kerja. Dengan dipimpin oleh kepala Diskominfo.
Mengikuti rapat tentang rencana pembagunan jaringan satu pintu yang berpusat di
Diskominfo Bungo.
136
Mengikuti rapat dikantor Bupati Bungo dengan materi mengenai pengolahan data
aset.
Mengikuti acara pawai 18 agustus 2022 bersama Kepala Dinas dan Pegawai
Kominfo Dan Persandian Kabupaten Bungo.
137
Hari penjemputan mahasiswa UNDHARI oleh Dosen dan penyerahan kenang-

kenagan sebagai rasa terimakasih kami mahasiwa UNDHARI ke Dinas Kominfo
Dan Persandian Kabupaten Bungo.
138
Lampiran 5 Kartu Bimbingan PKL

Laporan PKL Asli Sekali

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan PKL Asli Sekali

Diunggah oleh

Hak Cipta:

Format Tersedia

1

PERANCANGAN SISTEM INFORMASI COMPANY PROFIL

Cahyo Prasetiawan 1902011007

PROGRAM STUDI TEKNIK INFORMATIKA

PERANCANGAN SISTEM INFORMASI DAN PENGOLAHAN SURAT

Cahyo Prasetiawan 1902011007

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS ILMU KOMPUTER

UNIVERSITAS DHARMAS INDONESIA

Laporan Praktik Kerja Lapangan ini disusun oleh:

Nama Mahasiswa : CAHYO PRASETIAWAN

Nama Mahasiswa : EMA NELIS

Nama Mahasiswa : HOLIP AROLIAH

Program Studi : TEKNIK INFORMATIKA

Berdasarkan Kegiatan Mahasiswa Pada Dinas Komunikasi, Infromatika dan

Ketua Program Studi Dosen Pembimbing,

Lido Sabda Lesmana, S.Pd, M.Kom Dwi Winarti, M.Kom

Dharmasraya ,....... .....2022

Dosen Pembimbing Tanda Tangan

1. Dwi Winarti, M.Kom

Dekan Ketua Program Studi

FIRMANSYAH PUTRA, S.Kom.M,Pd.T LIDO SABDA LESMANA, M.Kom

Kegiatan Magang ini merupakan salah satu bentuk pertanggung jawaban

Dharmasraya ,....... .....2022

Cahyo Prasetiawan Ema Nelis

LEMBAR PERSETUJUAN UJIAN PKL............................................................ i

Gambar 2. 1 Komponen Sistem Informasi.............................................................. 8

Tabel 2. 1 Use Diagram ........................................................................................ 14

1.1 Latar belakang

Dinas Komunikasi Informatika dan Persandian Kabupaten Bungo adalah salah

Penelitian sebelumnya (Nurnaningsih, 2019) “Rancang Bangun Sistem

Diskominfo Bungo perlu dibuatnya Sistem Informasi Company Profile dan

Berdasarkan penjelasan diatas penulis bermaksud untuk membuat laporan yang

1.2 Rumusan Masalah

1.3 Batasan Masalah

1. Hanya merancang Sistem Informasi Company Profile dan Pengolahan

b. Meningkatkan kemudahan untuk membagian informasi mengenai profil

1.6 Sistematika Penulisan

2.1 Tinjauan Pustaka

2.1.1 Pengertian Perancangan

2.1.2 Pengertian Sistem

suatu jaringan kerja untuk mencapai sebuah tujuan serta melakukan

2.1.3 Pengertian Informasi

2.1.4 Pengertian Sistem Informasi

informasi bermakna yang saling terkait guna untuk mencapai suatu

Gambar 2. 1 Komponen Sistem Informasi

2.1.5 Company Profile

2.1.6 Pengolahan Data

2.1.7 Pengertian Surat

penerima surat ) dengan mempergunakan buku pengiriman (

2.1.8 Pengertian Bootstrap

Bootstrap menyediakan sejumlah komponen yang dapat

1) Buttons; digunakan untuk membuat tombol.

4) Navs; digunakan untuk membuat menu navigasi halaman

ANSI. MySQL merupakan RDBMS (Relational Database

2.1.11 Pengertian Basis Data (Database)

Gambar 2. 2 Ilusrasi basis data

Sistem informasi tidak dapat dipisahkan dengan kebutuhan akan basis

Kebutuhan basis data dalam sistem informasi meliputi:

a. Memasukan, menyimpan dan mengambil data.

Tujuan dibuatnya tabel-tabel ini adalah untuk menuimoa

Menurut (Muhyidin et al., 2020) menyatakan “Website

2.1.14 Unified Modeling Language (UML)