LAPORAN KERJA PRAKTEK
DINAS KETAHANAN PANGAN BENGKALIS
RANCANG BANGUN TAMPILAN USER INTERFACE (UI) APLIKASI ABSENSI DAN KEARSIPAN KARYAWAN DINAS
KETAHANAN PANGAN BENGKALIS BERBASIS WEBSITE
Disusun Oleh :
FIRMAN AROBI 6103191338
PROGRAM STUDI D-III TEKNIK INFORMATIKA JURUSAN TEKNIK INFORMATIKA
POLITEKNIK NEGERI BENGKALIS BENGKALIS – RIAU
2021
i
KATA PENGANTAR
Puji dan syukur ke hadirat Allah SWT, Zat Pencipta Yang Maha Kuasa atas segala Hidayah dan Karunia-Nya. Shalawat beserta salam semoga senantiasa tercurah kepada baginda Nabi Muhammad SAW dengan mengucapkan Allahumma
shalli ‘ala Muhammad wa’ala alihi sayyidina muhammad.
Alhamdulillahirabbil’alamin, atas izin Allah SWT, penulis dapat menyelesaikan penulisan Laporan Kerja Praktek yang berjudul “RANCANGAN ABSENSI DAN KEARSIPAN BERBASIS WEBSITE”. Penulis menyadari bahwa semua temuan dalam Laporan Kerja Praktek ini bukanlah merupakan hal yang baru, Selama penulisan laporan kerja praktek ini, penulis banyak mendapat bantuan tenaga, materi, informasi, waktu maupun motivasi yang tidak terhingga dari berbagai pihak.
Karena itu dengan ketulusan dan kerendahan hati penulis mengucapkan terima kasih yang tidak terhingga kepada yang terhormat.
1. Bapak Jhony Custer, ST., MT selaku Direktur, Politeknik Negeri Bengkalis.
2. Bapak Danuri, M.Cs selaku Ketua Jurusan Teknik Informatika, Politeknik Negeri Bengkalis.
3. Bapak Muhammad Nasir, M.Kom selaku Ketua Program Studi D-III Teknik Informatika, Politeknik Negeri Bengkalis.
4. Bapak Desi Amirullah, M.Kom selaku Koordinator Kerja Praktek Program Studi D-III Teknik Informatika, Politeknik Negeri Bengkalis.
5. Bapak Nurul Fahmi, M.T selaku Dosen Pembimbing Kerja Praktek, Politeknik Negeri Bengkalis.
6. Kedua orang tua dan seluruh keluarga atas segala dukungan baik materi maupun moral dan doa yang telah diberikan kepada penulis.
7. Bapak Imam Hakim, SP. M.Si selaku Kepala Dinas Ketahanan Pangan Bengkalis.
8. Ibuk Sekretaris Dinas Ketahanan Pangan Bengkalis.
9. Bapak dan Ibu Kepala Bidang Dinas Ketahanan Pangan Bengkalis.
ii 10. Seluruh Staff dan Karyawan Dinas Ketahanan Pangan Bengkalis, yang telah bersedia menerima kami untuk melaksananakan Kerja Praktek serta melayani dengan baik.
11. Seluruh Bapak dan Ibu Dosen di Jurusan Teknik Informatika Politeknik Negeri Bengkalis.
12. Seluruh teman-teman yang telah membantu memberikan dorongan, motivasi dan semangat, sehingga penulis bisa menyelesaikan laporan ini dengan sebaik mungkin.
Penulis menyadari bahwa Laporan Kerja Praktek ini masih memiliki kekurangan. Karenanya penulis mengharapkan kritik dan saran yang membangun dari pembaca terutama kepada dosen pembimbing untuk perbaikan pada jenjang pendidikan yang lebih tinggi di masa yang akan datang. Akhirnya kepada Allah SWT jugalah penulis berserah diri, semoga selalu dalam lindungan dan hidayahnya-Nya. Aamiin.
Bengkalis, 28 Desember 2021
FIRMAN AROBI 6103191338
iii
DAFTAR ISI
KATA PENGANTAR ... i
DAFTAR ISI ... iii
DAFTAR GAMBAR ... vi
BAB 1 PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Tujuan dan Manfaat ... 1
1.2.1 Tujuan ... 1
1.2.2 Manfaat ... 2
BAB 2 GAMBARAN DINAS KETAHANAN PANGAN BENGKALIS ... 3
2.1 Sejarah Perusahaan... 3
2.2 Visi dan Misi Perusahaan ... 4
2.2.1 Visi ... 4
2.2.2 Misi ... 4
2.3 Struktur Organisasi Perusahaan ... 4
2.4 Ruang Lingkup Perusahaan... 5
BAB 3 BIDANG PEKERJAAN KERJA PRAKTEK ... 6
3.1 Spesifikasi Tugas ... 6
3.1.1 Upacara Pagi Bersama ... 6
3.1.2 Membuat Website Sederhana Secara Native Menggunakan Metode CRUD ... 6
3.2 Target Pencapaian ... 7
3.3 Perangkat yang Digunakan ... 7
3.3.1 Perangkat Keras (Hardware) ... 7
iv
3.3.2 Perangkat Lunak (Software) ... 9
3.4 Dokumen atau File yang Dihasilkan ... 9
3.5 Kendala yang Dihadapi ... 9
BAB 4 MERANCANG TAMPILAN USER INTERFACE (UI) APLIKASI ABSENSI DAN KEARSIPAN KARYAWAN DINAS KETAHANAN PANGAN BENGKALIS BERBASIS WEBSITE ... 11
4.1 Uraian Judul ... 11
4.1.1 Rancang ... 11
4.1.2 User Interface (UI) ... 11
4.1.3 Website ... 11
4.2 Perancangan Desain Mockup ... 12
4.2.1 Desain Mockup Halaman Beranda ... 12
4.2.2 Desain Mockup Halaman Login ... 13
4.2.3 Desain Mockup Halaman Daftar ... 14
4.2.4 Desain Mockup Halaman Beranda 2 ... 15
4.2.5 Desain Mockup Halaman Absen ... 16
4.2.6 Desain Mockup Halaman Arsip ... 17
4.2.7 Desain Mockup Halaman Panduan ... 18
4.2.8 Desain Mockup Halaman Profil ... 19
4.3 Hasil Perancangan ... 19
4.3.1 Tampilan Halaman Beranda ... 20
4.3.2 Tampilan Halaman Karyawan... 20
4.3.3 Tampilan Halaman Absen ... 21
4.3.4 Tampilan Halaman Arsip ... 21
BAB 5 PENUTUP ... 22
v 5.1 Kesimpulan ... 22 5.2 Saran ... 22 DAFTAR PUSTAKA ... 23
vi
DAFTAR GAMBAR
Gambar 2.1 Struktur Organisasi Perusahaan ... 4
Gambar 3.1 Upacara Pagi Bersama ... 6
Gambar 3.2 Proses Perekapan Absen... 7
Gambar 3.3 Laptop... 8
Gambar 3.4 Printer ... 8
Gambar 4.1 Mockup Halaman Beranda ... 12
Gambar 4.2 Mockup Halaman Login ... 13
Gambar 4.3 Mockup Halaman Daftar ... 14
Gambar 4.4 Mockup Halaman Beranda 2 ... 15
Gambar 4.5 Mockup Halaman Absen ... 16
Gambar 4.6 Mockup Halaman Arsip ... 17
Gambar 4.7 Mockup Halaman Panduan ... 18
Gambar 4.8 Mockup Halaman Profil ... 19
Gambar 4.9 Tampilan Beranda ... 20
Gambar 4.10 Tampilan Karyawan ... 20
Gambar 4.11 Tampilan Absen ... 21
Gambar 4.12 Tampilan Arsip ... 21
