LAPORAN KERJA PRAKTEK

(1)

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

(2)

(3)

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)

(4)

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

(5)

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

(6)

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

(7)

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

(8)

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

(9)

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

(10)

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

(11)

1

BAB I

PENDAHULUAN

1.1 Latar Belakang Pemikiran Kerja Praktek

Kerja Praktek merupakan salah satu mata kuliah wajib yang ditempuh di sebuah Perguruan Tinggi (PT) baik untuk tingkat sarjana maupun diploma. Di bangku perkuliahan telah diajarkan teori-teori keilmuan yang sudah menjurus ke bidang industri tertentu. Banyak sekali hal yang menjadi hambatan bagi seseorang yang belum mempunyai pengalaman kerja untuk terjun ke dunia pekerjaan, teori yang diperoleh belum tentu sama dengan praktik kerja di lapangan, dan keterbatasan waktu dan ruang yang mengakibatkan ilmu pengetahuan yang diperoleh masih terbatas.

Namun, untuk memperbanyak pengalaman kerja secara langsung, maka dilakukan kerja praktek sebagai langkah yang tepat untuk mendapatkan pengalaman pekerjaan.

Dalam pelaksanaan kerja praktek, mahasiswa juga mendapatkan ilmu di luar dari teori yang didapatkan diperkuliahan. (Panduan Kerja Praktek 2017)

Kerja Praktek adalah penempatan seseorang pada suatu lingkungan pekerjaan yang sebenarnya untuk meningkatkan keterampilan, etika pekerjaan, disiplin dan tanggung jawab yang merupakan suatu kesempatan untuk menerapkan ilmu pengetahuan dan keterampilan yang dimiliki, yang ada hubungannya dengan latar belakang seseorang yang melaksanakan Kerja Praktek tersebut.

Dalam memasuki era globalisasi saat ini, teknologi informasi tidak dipungkiri memiliki kaitan erat dengan kehidupan manusia setiap harinya. Teknologi informasi dapat mempermudah pekerjaan manusia serta memberikan kemudahan dalam memperoleh informasi. Untuk mempermudah Dinas Kependudukan dan Pencatatan Sipil untuk membuat data laporan kependudukan maka penulis mengajukan judul

(12)

2

“PERANCANGAN DESAIN USER INTERFACE ( UI ) PADA BERITA BERBASIS WEBSITE DI DISKOMINFOTIK BENGKALIS” dalam hal ini akan dijadikan sebagai Laporan Kerja Praktek.

1.2 Tujuan

Adapun tujuan dari pelaksanaan Kerja Praktek (KP) adalah sebagai berikut:

1. Untuk menerapkan skill serta ilmu pengetahuan yang telah diperoleh dalam perkuliahan di lapangan pekerjaan..

2. Untuk menambah pengalaman serta pengetahuan selama melakukan kerja praktek.

3. Untuk mengetahui bagaimana berinteraksi dengan baik di dunia pekerjaan.

1.3 Manfaat

Adapun manfaat dari pelaksanaan Kerja Praktek (KP) adalah sebagai berikut:

1. Mendapatkan kesempatan untuk menerapkan skill serta ilmu pengetahuan yang telah diperoleh dalam perkuliahan di lapangan pekerjaan.

2. Dapat mengetahui bagaimana berinteraksi dengan baik di dunia pekerjaan.

3. Dapat menambah pengalaman dan pengetahuan diluar kampus selama kerja praktek dilakukan.

4. Dapat membuat desain User Interface (UI) dan menyelesaikan website yang berfungsi sebagai sumber berita di Dinas Komunikasi, Informatika dan Statistik Bengkalis.

(13)

3 1.4 Luaran Proyek Kerja Praktek

Selama melakukan proyek yang diberikan pada saat kerja praktek adapun output yang akan diimplementasikan pada Dinas Komunikasi Informasi dan Statistik yaitu berupa Desain berita berbasis website menggunakan framework laravel.

(14)

4

BAB II

GAMBARAN UMUM DISKOMINFOTIK BENGKALIS

2.1 Sejarah Tentang Diskominfotik Bengkalis

Sejak diberlakukannya Struktur Organisasi Pemerintah Daerah (SOPD) baru di lingkungan Pemerintah Kabupaten Bengkalis terhitung 1 Januari 2017, setidaknya ada 5 SOPD yang hilang. Juga terjadi perubahan nama dinas maupun badan, ada yang dimerjer, ada pula muncul SOPD baru, yang pisah atau berdiri sendiri.

Salah satu adalah Dinas Komunikasi, Informatika dan Statistik (Diskominfotik). Dulunya urusan komunikasi dan informasi ini berada satu atap dengan Dinas Perhubungan. Namun sesuai amanah Peraturan Pemerintah Nomor 18 Tahun 2016 tentang Perangkat Daerah dan Peraturan Menteri Komunikasi dan Informatika Nomor 14 Tahun 2016 tentang Pedoman Nomenklatur Perangkat Daerah Bidang Komunikasi dan Informatika, diperkuat Peraturan Bupati Bengkalis Nomor 51 Tahun 2016 tentang Kedudukan, Susunan Organisasi, Eselonering, Tugas, Fungsi dan Uraian Tugas serta Tata Kerja, Diskominfotik kini berdiri sendiri dan berkantor di gedung eks Dinas Pasar dan Kebersihan.

Diskominfotik memiliki tugas dan tupoksi yang lebih luas cakupannya dibandingkan sebelumnya. Karena selain ditambah urusan statistik, Bagian Pengelolaan Data Elektronik (PDE) yang dulunya berada di Sekretariat Daerah, kini menjadi bagian dari Diskominfotik, termasuk urusan publikasi, kerjasama media urusan public relation yang dulunya ditangani Bagian Humas Sekretariat Daerah.

Seiring berjalannya waktu, tahun 2018 terjadi perubahan dalam susunan organisasi Diskominfotik, Layanan Pengadaan Secara Elektronik (LPSE) tidak lagi menjadi salah satu tugas dan fungsi Diskominfotik, pindah ke Bagian Pengadaan

(15)

5 Barang/Jasa Sekretariat Daerah. Perubahan ini didasarkan Peraturan Bupati Nomor 58 Tahun 2018 tentang Perubahan atas Peratura Bupati Bengkalis Nomor 51 tahun 2016 tentang Kedudukan, Susunan Organisasi, Eselonering, Tugas, Fungsi dan Uraian Tugas serta Tata Kerja.

2.2 Visi dan Misi Diskominfotik 2.2.1 Visi

"Terwujudnya Kabupaten Bengkalis Yang Bermarwah, Maju Dan Sejahtera"

2.2.2 Misi

1. Mewujudkan Pengelolaan Potensi Keuangan Daerah, Sumber Daya Alam dan Sumber Daya Manusia yang Efektif dalam Memajukan Perekonomian.

2. Mewujudkan Reformasi Birokrasi serta Penguatan Nilai-nilai Agama dan Budaya Melayu Menuju Tata Kelola Pemerintahan Yang Baik dan Masyarakat yang Berkarakter.

3. Mewujudkan Penyediaan Infrastruktur yang Berkualitas dan Mengembangkan Potensi Wilayah Perbatasan untuk Kesejahteraan Rakyat.

2.3 Struktur Organisasi Perusahaan

Struktur organisasi pada Diskominfotik Kabupaten Bengkalis disusun sesuai dengan ketentuan-ketentuan dengan fungsi, kewajiban dan tangungjawab dari masing-masing bagian pada setiap bidang. Struktur Organisasi pada Diskominfotik Kabupaten Bengkalis yang dapat di lihat pada gambar di bawah ini:

(16)

6 Gambar 2.1 Struktur Organisasi Diskominfotik

( Sumber: Website Diskominfotik )

2.4 Ruang Lingkup Diskominfotik Bengkalis

Diskominfotik adalah Dinas Komunikasi, Informatika dan Statistik Kabupaten Bengkalis yang merupakan salah satu Perangkat Daerah (PD) di lingkungan Pemerintah Daerah Kabupaten Bengkalis yang mempunyai tugas pokok melaksanakan urusan pengelolaan dan layanan informasi publik, pengelolaan komunikasi publik, teknologi informasi dan komunikasi, layanan e-Government serta statistik dan persandian. Terdapat salah satu Bidang Pengelolaan Berbasis Elektronik (PBE) yang mencakup pelayanan publik berupa pengadaan layanan elektronik. Pada bidang PBE juga melayani pembuatan aplikasi dinas, sekolah maupun organisasi lainnya. Diskominfotik Bengkalis berada di Jl. Kartini No. 012 Kode Pos 28712 Bengkalis Riau, Kecamatan Bengkalis, Kabupaten Bengkalis. Adapun susunan

(17)

7 organisasi Diskominfotik yang baru adalah :

a. Kepala

b. Sekretariat, terdiri dari:

c. Bidang Pengelolaan Dan Pelayanan Informasi Publik, terdiri dari : 1. Seksi pengelolaan opini dan aspirasi publik

2. Seksi pengelolaan informasi 3. Seksi pelayanan informasi publik

d. Bidang Sumber Daya Komunikasi Dan Informasi, terdiri dari :

1. Seksi penyediaan konten lintas sektoral dan pengelolaan media komunikasi publik

2. Seksi layanan hubungan media

3. Seksi penguatan kapasitas sumber daya komunikasi publik dan penyediaan akses informasi

e. Bidang Pengelolaan Berbasis Elektronik, terdiri dari:

1. Seksi Aplikasi 2. Seksi Telematika

3. Seksi Infrastruktur dan Teknologi

f. Bidang Statistik dan persandiaan, terdiri dari : 1. Seksi Statistik

2. Seksi Statistik

3. Seksi Pengawasan dan Evaluasi Persandiaan

(18)

8

BAB III

BIDANG PEKERJAAN SELAMA KERJA PRAKTEK

3.1 Uraian Tugas yang di Kerjakan

Kerja Praktek (KP) dilaksanakan selama 2 bulan, yang dilaksakan dari 5 Juli 2021 sampai dengan 31 Agustus 2021 di Kantor Dinas Komunikasi, Informatika dan Statistik (Diskominfotik). Selama melaksanakan KP di Diskominfotik dan ditempatkan dibagian Bidang Pengelolaan Berbasis Elektronik (PBE), adapun tugas yang diberikan, diantaranya :

3.1.1 Membuat Desain User Interface ( UI ) Pada Berita Berbasis Website di Dinas Komunikasi, Informatika dan Statistik.

Desain User Interface di gunakan untuk pembuatan website berita, sehingga mempermudah dalam membuat website dengan adanya desain User Interface pada website berita tersebut.

Gambar 3.1 Pembuatan Desain User Interface ( UI ) Sumber: Dokumen Pribadi

(19)

9 3.1.2 Membantu melakukan pekerjaan administrasi

Dalam melaksanakan Kerja Praktek di Dinas Komunikasi, Informatika dan Statistik ( Diskominfotik ) Bengkalis, kita juga membantu melakukan pekerjaan administrasi seperti, fotocopy dokumen, mencetak ( print ) dokumen dan mengantarkan surat masuk dan keluar.

3.2 Target yang Diharapkan

Dalam pelaksanaan Kerja Praktek (KP) yang dilaksanakan di Kantor Dinas Komunikasi, Informatika dan Statistik (Diskominfotik) Bengkalis, adapun target yang dicapai antaranya:

1. Dapat memanfaatkan pengetahuan di bidang Teknik Informatika sebagai peluang usaha dan kerja

2. Memahami dunia kerja di bidang IT dan pemerintahan

3. Dapat menyelesaikan tugas yang diberikan dalam bentuk desain User Interface ( UI ) pada berita berbasis website di Diskominfotik Bengkalis.

3.3 Perangkat yang Digunakan

Dalam pelaksanaan Kerja Praktek (KP) yang dilaksanakan di Kantor Dinas Komunikasi, Informatika dan Statistik (Diskominfotik), adapun perangkat yang digunakan antaranya :

(20)

10 3.3.1 Perangkat Lunak ( Software )

Adapun perangkat lunak yang di gunakan dari pelaksanaan Kerja Paktek ( KP ) adalah sebagai berikut:

3.3.1.1 Laravel

Gambar 3.2 Logo Laravel Sumber: Google

Laravel adalah kerangka kerja aplikasi web berbasis PHP yang sumber terbuka, menggunakan konsep Model-View-Controller (MVC).

3.3.1.2 Atom

Gambar 3.3 Logo Atom Sumber: Google

Atom adalah text editor yang bersifat free source dan open source bagi macOS, Linux, dan Microsoft Windows. Atom dilengkapi dengan plug-in yang ditulis dalam Node.js yang dikembangkan oleh GitHub. Atom merupakan aplikasi dekstop yang memakai teknologi web.

(21)

11 3.3.1.3 HeidiSQL

Gambar 3.4 Logo HeidiSQL Sumber: Google

HeidiSQL adalah aplikasi berbasis Windows untuk mengelola database MySQL dan Microsoft SQL Database. Fungsinya adalah untuk melihat data, mengedit data, membuat tabel, dan mengedit tabel di Database.

3.3.1.4 XAMPP

Gambar 3.5 Logo XAMPP Sumber: Google

Xampp adalah sebuah paket perangkat lunak (software) komputer yang sistem penamaannya diambil dari akronim kata Apache, MySQL (dulu) / MariaDB (sekarang), PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat pada awal kata berasal dari istilah cross platform sebagai simbol bahwa aplikasi ini bisa dijalankan di empat sistem operasi berbeda, seperti OS Linux, OS Windows, Mac OS, dan juga Solaris.

(22)

12 3.3.1.4 Figma

Gambar 3.6 Logo Figma Sumber: Google

Selama melaksanakan Kerja Praktek ( KP ) disini juga menggunakan Figma

,

yaitu aplikasi desain berbasis cloud dan alat prototyping untuk proyek digital yang digunakan secara online dalam situs https://www.figma.com/.

3.3.1.5 Microsoft Word atau Microsoft Word Office 2010

Gambar 3.7 Logo Microsoft Word Sumber: Google

Microsoft Word ini digunakan selama Kerja Praktek ( KP ) untuk membuat atau mengetik dokumen dan melengkapi tugas laporan, surat, dan resume yang berkualitas.

(23)

13 3.3.2 Perangkat Keras ( Hardware )

Adapun perangkat keras yang di gunakan dari pelaksanaan Kerja Paktek ( KP ) adalah sebagai berikut:

3.3.2.1 Laptop

Gambar 3.8 Laptop Sumber: Google

Laptop atau sering disebut komputer mini digunakan sebagai perangkat untuk pembuatan website. laptop yang digunakan yaitu HP - TPA5ERHH dengan spesifikasi Memory sebesar

5

Gigabyte, Processor Intel (R) Celeron (R).

3.3.2.2 Mouse

Gambar 3.9 Mouse Sumber: Google

Mouse adalah salah satu hardware komputer yang menerima input-an berupa gerakan, tekanan tombol (click), dan penggulungan (scroll) yang dapat digunakan untuk memilih teks, ikon, file, dan folder. I

(24)

14 3.4 Data Yang Diperlukan

Data yang diperlukan adalah informasi seputar Dinas Komunikasi Informasi dan Statistik (Diskominfotik), yang mana pada pembuatan website ini mahasiswa kerja praktek membutuhkan informasi apa saja yang ada di Diskominfotik dan data- data yang ada pada Diskominfotik.

3.5 Kendala yang Dihadapi

Selama melaksanakan Kerja Praktek di Kantor Dinas Komunikasi, Informatika dan Statistik (Diskominfotik) terdapat beberapa kendala yang dihadapi dalam melaksanakan tugas yang diberikan yaitu sulitnya berkomunikasi dengan pembimbing

. K

endala yang dihadapi adalah minimnya pengetahuan dalam pembuatan website. Karena website yang digunakan yaitu berbasis Laravel yang sama sekali belum mengetahui cara pengaplikasiannya. Selama proses pembuatan harus belajar otodidak dan benar benar dimulai dari awal. kemudian keterlambatan penyelesaian project karna kurangnya pemahaman kami terhadap beberapa hal.

3.6 Pemecahan Masalah

Masalah tersebut dapat dipecahkan dengan mencari referensi sebanyak mungkin diinternet, meminta saran kepada pembimbing ditempat kerja praktek maupun menanyakan kepada karyawan diinstansti kerja praktek serta menanyakan kepada senior yang paham akan masalah dalam pembuatan website Berbasis Laravel tersebut. Berdasarkan referensi dari beberapa sumber maka proses pembuatan website Berbasis Framework Laravel dapat terselesaikan dengan waktu yang ditetapkan.

(25)

15

BAB IV

PERANCANGAN DESAIN USER INTERFACE ( UI ) PADA BERITA BERBASIS WEBSITE DI DISKOMINFOTIK

BENGKALIS

4.1 Uraian Judul

Judul ini saya ambil untuk mempermudah dalam pembuatan website berita resmi yang berfungsi untuk mencari dan mempublikasikan kumpulan halaman pada suatu domain di dalam internet. Oleh karna itu saya mengajukan pembuatan desain User Interface ( UI ) ini kepada Pembimbing Lapangan dan disetujui.

Website berita ini adalah situs yang berisi berita-berita di dunia global maupun lokal, seperti website berita sosial, budaya dan politik. Sehingga dengan adanya website berita ini dapat mempermudahkan admin untuk mendapatkan informasi secara cepat seputar berita berbasis website ini.

4.2 Perancangan Desain User Interface ( UI ) Pada Berita

Adapun tahap melakukan pembuatan desain user interface pada website berita sebagai berikut:

4.2.1 Membuat Perancangan Database

Pembuatan database untuk membangun Berita Berbasis Website Di Dinas Komunikasi, Informatika dan Statistik Bengkalis menggunakan HeidiSQL.

Perancangan desain website berita dapat ditunjukkan pada gambar 4.1 Dibawah ini:

(26)

16 Gambar 4.1 Rancangan Database

Sumber: Sumber Data Olahan

Dalam perancangan database ini membutuhkan data tabel yang memuat isi tabel yang berisi beberapa field yang memiliki keterangan nama field, tipe data, dan panjang ukuran data sebagai berikut:

4.2.1.1 Tabel Agenda

No Nama Field Type Data Size Keterangan

1 id_agenda INT 11 Primary key

2 judul VARCHAR 50 -

3 tanggal TIMESTAMP - -

Gambar 4.2 Tabel Agenda Sumber: Sumber Data Olahan

(27)

17 4.2.1.2 Tabel Berita

1 id_berita INT 11 Primary key

2 nama VARCHAR 50 -

3 jk ENUM „L;K‟ -

Gambar 4.3 Tabel Berita Sumber: Sumber Data Olahan

4.2.1.3 Tabel Download

1 id_download INT 11 Primary key

2 nama VARCHAR 50 -

3 tanggal TIMESTAMP - -

4 ukuran INT 11 -

Gambar 4.4 Tabel Download Sumber: Sumber Data Olahan

(28)

18 4.2.1.4 Tabel Users

1 id_users INT 11 Primary key

2 nama VARCHAR 255 -

3 username VARCHAR 255 -

4 password VARCHAR 255 -

5 created TIMESTAMP 50 -

6 updated TIMESTAMP - -

Gambar 4.5 Tabel Users Sumber: Sumber Data Olahan

4.2.2 Membuat Desain User Interface ( UI ) Pada Berita

Untuk merancang Desain Berita Berbasis Website Di Dinas Komunikasi, Informatika dan Statistik Bengkalis dirancang menggunakan Figma.

4.2.2.1 Desain Login

Gambar 4.6 Desain Login Sumber: Data Olahan

(29)

19 4.2.2.2 Desain Daftar Berita

Gambar 4.7 Desain Daftar Berita Sumber: Data Olahan 4.2.2.3 Desain Tambah Berita

Gambar 4.8 Desain Tambah Berita Sumber: Data Olahan

(30)

20 4.2.2.4 Desain Edit Berita

Gambar 4.9 Desain Edit Berita Sumber: Data Olahan

4.2.3 Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada Berita Berbasis Website Di Dinas Komunikasi, Informatika dan Statistik Bengkalis berdasarkan rancangan antar muka sebagai berikut :

4.2.3.1 Halaman Login

Halaman Login ini merupakan halaman yang berfungsi untuk masuk dalam sebuah layanan online yang berisi nama dan password. Perancangan desain daftar berita dapat ditunjukkan pada gambar 4.10 Dibawah ini:

(31)

21 Gambar 4.10 Halaman Login

Sumber: Data Olahan

4.2.3.2 Halaman Daftar Berita

Halaman Daftar berita ini merupakan halaman yang berfungsi untuk menampilkan data berita yang sudah dimasukkan pada website. Perancangan desain daftar berita dapat ditunjukkan pada gambar 4.11 Dibawah ini:

(32)

22 Gambar 4.11 Halaman Daftar Berita

Sumber: Data Olahan

4.2.3.3 Halaman Tambah Berita

Halaman Tambah berita ini merupakan halaman yang berfungsi untuk menambahkan data berita yang dibutuhkan pada website. Perancangan desain tambah berita dapat ditunjukkan pada gambar 4.12 Dibawah ini:

Gambar 4.12 Halaman Tambah Berita Sumber: Data Olahan

4.2.3.4 Halaman Edit Berita

Halaman Daftar edit ini merupakan halaman yang berfungsi memodifikasi format suatu keluaran atau masukan pada data berita yang sudah diinput.

Perancangan desain edit berita dapat ditunjukkan pada gambar 4.13 Dibawah ini:

(33)

23 Gambar 4.12 Halaman Tambah Berita

Sumber: Data Olahan

(34)

24

BAB V PENUTUP

5.1 Kesimpulan

Dari hasil perancangan user interface website berita ini, maka diperoleh kesimpulan sebagai berikut :

Hasil dari Kerja Praktek ( KP ) adalah desain UI pada berita berbasis website ini dapat memudahkan kita untuk mencari dan mempublikasikan berita daerah maupun global melalui fitur-fitur yang tersedia sehingga siap diterapkan kedalam bentuk website yang sebenarnya.

5.2 Saran

- Bagi Perusahaan

Sesuai dengan pengamatan peserta kerja praktek dari kegiatan praktek kerja lapangan selama 2 bulan di Dinas Komunikasi, informatika dan Statistik ( Diskominfotik ), terdapat beberapa saran yang mungkin dapat memberi kebaikan bagi semua pihak, yaitu Dinas Komunikasi, informatika dan Statistik ( Diskominfotik ) Bengkalis diharapkan terus konsisten dalam menjalankan visi dan misinya.

- Bagi Mahasiswa

Sesuai pengalaman yang telah dijalankan selama melaksanakan Kerja Praktek ( KP ) selama 2 bulan di Dinas Komunikasi, informatika dan Statistik ( Diskominfotik ) untuk dapat lebih mandiri belajar dan mencari referensi materi sendiri yang akan diterapkan dalam industri atau instansi, agar memudahkan dalam melakukan praktek kerja lapangan diperusahaan.

(35)

25

DAFTAR PUSTAKA

Diskominfotik Kabupaten Bengkalis Sambutan Kepala Dinas (https://disdik.bengkaliskab.go.id/web/statis/sambutan-kepala-dinas/3) Diakses pada 27 Juli 2021

Politeknik Negeri Bengkalis (2017). Panduan Laporan Kerja Praktek (KP) Mahasiswa Politeknik Negeri Bengkalis.

(36)

26

(37)

27

(38)

28

(39)

29

(40)

30

(41)

31

(42)

32

(43)

33

(44)

34

(45)

35

(46)

36

(47)

37

(48)

38

(49)

39

(50)

40

(51)

41

(52)

42

(53)

43

(54)

44

(55)

45

(56)

46

(57)

47

(58)

48

(59)

49

(60)

50

(61)

51

(62)

52

(63)

53

(64)

54

(65)

55