LAPORAN KERJA PRAKTEK
DINAS KOMUNIKASI, INFORMATIKA DAN STATISTIK PERANCANGAN DESAIN USER INTERFACE ( UI ) PADA
BERITA BERBASIS WEBSITE DI DISKOMINFOTIK BENGKALIS
TIYA WITIANA 6103191323
PROGRAM STUDI D-III TEKNIK INFORMATIKA POLITEKNIK NEGERI BENGKALIS BENGKALIS – RIAU
2021
i
KATA PENGANTAR
Puji syukur atas kehadiran Tuhan Yang Maha Esa yang telah memberikan rahmat dan karunia-Nya sehingga penulis dapat menyelesaikan Laporan Kerja Praktek ( KP ) dengan judul “Perancangan Desain User Interface ( UI ) Pada Berita Berbasis Website di Diskominfotik Bengkalis” ini dengan baik.
Laporan Kerja Praktek ( KP ) ini disusun sebagai salah satu syarat untuk menyelesaikan Program Studi Teknik Informatika jenjang pendidikan Diploma III di Politeknik Negeri Bengkalis. Dalam kesempatan ini, saya mengucapkan ribuan terima kasih kepada berbagai pihak yang telah membantu secara aktif maupun pasif memberikan bimbingan serta pengetahuan sehingga menjadi dasar dan mempermudah penulis dalam menyelesaikan Laporan ini. Laporan Kerja Praktek ( KP ) ini tidak lepas dari bantuan beberapa pihak. Oleh sebab itu, saya ucapkan terima kasih kepada Yth:
1. Bapak Johny 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 Srudi D-III Teknik Informatika, Politeknik Negeri Bengkalis.
4. Bapak Nurul Fahmi, M.Kom selaku Koordinator Kerja Praktek Program Studi D- III Teknik Informatika, Politeknik Negeri Bengkalis.
5. Bapak Desi Amirullah, 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 Zulkifli, ST selaku Kepala Bidang Pengelolaan Berbasis Elektronik 8. Bapak Muhammad Nurul Hudin, A.Md selaku Pembimbing Kerja Praktek Dinas
Komunikasi, Informatika dan Statistik (Diskominfotik)
ii 9. Seluruh Staff dan Karyawan Kantor Dinas Komunikasi, Informatika dan Statistik
(Diskominfotik), yang telah bersedia menerima kami untuk melaksananakan Kerja Praktek serta melayani dengan baik.
10. Seluruh Bapak dan Ibu Dosen di Jurusan Teknik Informatika Politeknik Negeri Bengkalis.
11. 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 ( KP ) dan Laporan ini masih jauh dari kata sempurna. Dengan segala keterbatasan pengetahuan dan kemampuan penulis, maka dari itu penulis memohon maaf dan selalu terbuka untuk menerima kritik dan saran.
Bengkalis, 17 Agustus 2021
Tiya Witiana 6103191323
iii
DAFTAR ISI
HALAMAN JUDUL
HALAMAN PENGESAHAN
KATA PENGANTAR ... i
DAFTAR ISI ... iii
DAFTAR GAMBAR ... vi
DAFTAR TABEL ... vii
DAFTAR LAMPIRAN ... viii
BAB I PEBDAHULUAN ... 1
1.1 Latar Belakang Pemikiran Kerja Praktek ... 1
1.2 Tujuan ... 2
1.3 Manfaat ... 2
1.4 Luaran Proyek Kerja Praktek ... 3
BAB II GAMBARAN UMUM DISKOMINFOTIK BENGKALIS ... 4
2.1 Sejarah Tentang Diskominfotik Bengkalis ... 4
2.2 Visi dan Misi Diskominfotik ... 5
2.1 Visi ... 5
2.2 Misi ... 5
iv
2.3 Struktur Organisasi Perusahaan ... 5
2.4 Ruang Lingkup Diskominfotik Bengkalis ... 6
BAB III BIDANG PEKERJAAN SELAMA KERJA PRAKTEK ... 8
3.1 Spesifikasi Tugas Yang Dikerjakan ... 8
3.1.1 Membuat Desain User Interface ( UI ) pada Berita Berbasis Website ... 8
3.1.2 Membantu Melakukan Pekerjaan Administrasi ... 9
3.2 Target Yang Diharapkan ... 9
3.3 Perangkat Yang Digunakan ... 9
3.3.1 Perangkat Lunak ( Software ) ... 10
3.3.2 Perangkat Keras (Hardware ) ... 13
3.4 Data Yang Diperlukan ... 14
3.5 Kendalan Yang Dihadapi ... 14
3.6 Pemecahan Masalah ... 14
BAB IV PERANCANGAN DESAIN USER INTERFACE ( UI ) PADA BERITA BERBASIS WEBSITE DI DISKOMINFOTIK BENGKALIS ... 15
4.1 Uraian Judul ... 15
4.2 Perancangan Desain User Interface ( UI ) Pada Berita ... 15
4.2.1 Membuat Perancangan Database ... 15
4.2.1.1 Tabel Agenda ... 16
v
4.2.1.2 Tabel Berita ... 17
4.2.1.3 Tabel Download ... 17
4.2.1.4 Tabel User ... 18
4.2.2 Membuat Desain User Interface ( UI ) Pada Berita ... 18
4.2.2.1 Desain Login ... 18
4.2.2.2 Desain Daftar Berita ... 19
4.2.2.3 Desain Tambah Berita ... 19
4.2.2.4 Desain Edit Berita ... 20
4.2.3 Implementasi Rancangan Antar Muka ... 20
4.2.3.1 Halaman Login ... 20
4.2.3.2 Halaman Daftar Berita ... 21
4.2.3.3 Halaman Tambah Berita ... 22
4.2.3.4 Halaman Edit Berita ... 22
BAB V PENUTUP ... 22
5.1 Kesimpulan ... 22
5.2 Saran ... 22
DAFTAR PUSTAKA ... 23
vi
DAFTAR GAMBAR
Gambar 2.1 Struktur Organisasi Perusahaan ... 5
Gambar 3.1 Pembuatan Desain User Interface ( UI ) ... 8
Gambar 3.2 Logo Laravel ... 10
Gambar 3.3 Logo Atom ... 10
Gambar 3.4 Logo HeidiSQL ... 11
Gambar 3.5 Logo XAMPP ... 11
Gambar 3.6 Logo Figma ... 12
Gambar 3.7 Logo Microsoft Word ... 12
Gambar 3.8 Laptop ... 13
Gambar 3.9 Mouse ... 13
Gambar 4.1 Rancangan Database ... 16
Gambar 4.6 Desain Login ... 18
Gambar 4.7 Desain Daftar Berita ... 19
Gambar 4.8 Desain Tambah Berita ... 20
Gambar 4.9 Desain Edit Berita ... 21
Gambar 4.10 Halaman Login ... 21
Gambar 4.11 Halaman Daftar Berita ... 21
Gambar 4.12 Halaman Tambah Berita ... 22
Gambar 4.13 Halaman Edit Berita ... 23
vii
DAFTAR TABEL
Gambar 4.2 Tabel Agenda ... 16
Gambar 4.3 Tabel Berita ... 17
Gambar 4.4 Tabel Download ... 17
Gambar 4.5 Tabel Users ... 18
viii
DAFTAR LAMPIRAN
Lampiran 1 Daftar Hadir Kerja praktek ... 26
Lampiran 2 Kegiatan Harian Kerja Praktek ... 28
Lampiran 3 Surat Keterangan Kerja Praktek ... 54
Lampiran 4 Surat Penilaian Kerja Praktek ... 55