ABSTRAK

Perkembangan pemerintah desa saat ini sudah baik dengan adanya anggaran dana
desa dari pemerintah pusat yang bertujuan untuk memajukan desa, pembangunan
desa saat ini tidak terlepas dari dukungan teknologi informasi, hampir disetiap desa
membutuhkan teknologi informasi guna meningkatkan layanan kepada masyarakat.
Sistem informasi desa sangat penting untuk meningkatkan pelayanan kepada
masyarakat desa, akses informasi bisa diperoleh dengan mudah, promosi hasil
usaha masyarakat desa, potensi desa, jumlah penduduk, luas wilayah dan
sebagainya. Oleh sebab itu, Website berperan penting bagi suatu instansi
pemerintahan desa. Dalam tolak ukur sebuah website yang baik, salah satunya dapat
dilihat dari sebuah UI (User Interface) yang memiliki tampilan menarik untuk
meningkatkan kenyamanan pengguna website. Dalam pembuatan front end website
desa menggunakan, framework bootstrap, bahasa pemrograman HTML, CSS dan
Javascript.

Kata Kunci: Website, Pemerintahan Desa, Front End

ix
 BAB I
PENDAHULUAN

1.1 Latar Belakang Masalah

Pembangunan desa saat ini tidak terlepas dari perkembangan teknologi
informasi, mulai dari penggunaan telepon seluler sampai dengan smartphone
hingga pemanfaatan internet dengan berbagai fitur yang bertujuan untuk membantu
masyarakat dalam melakukan aktivitas sehari-hari. Teknologi informasi dan
komunikasi memberikan banyak manfaat bagi kehidupan manusia salah satunya
adalah mempermudah hal-hal seperti sosial media dan promosi bisa dilakukan
dengan bantuan teknologi informasi sehingga informasi yang disampaikan bisa
diakses dengan mudah dan baik oleh masyarakat. (Jimi, 2019)
Sistem informasi desa merupakan sistem yang mempunyai peran sangat
penting dalam upaya mempublikasikan pemerintahan desa terutama berkaitan
dengan informasi tentang potensi sumber daya desa, pembangunan desa,
fasilitas dan layanan umum yang dimiliki sebagai pemenuhan hak dari setiap warga
negara terutama penduduk desa Rias Kabupaten Bangka Selatan. Sejalan dengan
arah demokrasi terbuka yang ditandai semakin meningkatnya tingkat
partisipasi masyarakat dalam pembangunan, terlebih lagi kondisi ini didukung
adanya perkembangan teknologi informasi yang sangat cepat, maka tuntutan
terhadap tersedianya media informasi sebagai sarana publikasi desa kepada semua
lapisan masyarakat menjadi sangat strategis untuk dikembangkan sebagai bagian
dari saluran komunikasi dan informasi dua arah baik dari pemerintah desa ke
warganya ataupun sebaliknya dari warga ke pemerintahnya. (Risun et al., 2017)
Kurangnya pemahaman masyarakat dan aparatur desa terkait teknologi
informasi menyebabkan pelayanan kepada masyarakat tidak optimal. Aparatur
pemerintah desa yang menjadi pelayan masyarakat harus bisa menguasai teknologi
informasi sehingga pelayanan kepada masyarakat bisa optimal. Kebutuhan akan
informasi bagi masyarakat desa setempat sangat besar tetapi tidak mendukung
disebabkan karena kurangnya pengetahuan akan teknologi informasi. Oleh karena

1
itu, kemajuan teknologi informasi merupakan tuntutan untuk zaman yang tidak
dapat dihindari. (Jimi, 2019)
Kemajuan teknologi juga menyebabkan munculnya berbagai perangkat
lunak yang membuat pekerjaan setiap manusia menjadi praktis. Dengan adanya
penerapan sistem informasi berbasis website ini akan memberikan kemudahan
kepada masyarakat untuk mengakses informasi secara cepat dan akurat yang sesuai
dengan kebutuhan masyarakat. Dalam laporan ini penulis akan menjelaskan tentang
proses pembuatan front end pada website desa dengan menggunakan framework
CodeIgniter. Berdasarkan hal-hal yang telah diuraikan tersebut maka penyusunan
laporan ini penulis memutuskan untuk memberi judul “RANCANGAN FRONT
END WEBSITE DESA RIAS KABUPATEN BANGKA SELATAN”.
1.2 Rumusan Masalah
Rumusan masalah berdasarkan latar belakang di atas yaitu :
1. Bagaimana cara merancang front end website pada Desa Rias Toboali
Kab. Bangka Selatan?
2. Bagaimana membuat front end website dengan tampilan yang mudah
digunakan dan menarik?
1.3 Batasan Masalah
Agar pembahasan pada laporan praktek kerja lapangan ini tidak melenceng
jauh, maka dibuat batasan masalah, yaitu pada website ini hanya sebatas tampilan
front end (tampilan luar/layout) yang ada pada website.
1.4 Tujuan
Tujuan dari praktek kerja lapangan ini adalah :
1. Menambah wawasan di dunia kerja selama melakukan praktek kerja
lapangan.
2. Melatih dan memahami front-end dengan merancang tampilan luar/layout
yang ada pada aplikasi.
3. Dapat mengaplikasikan ilmu yang telah di dapat dari perkuliahan,
sehingga dapat di implementasikan pada saat praktek kerja lapangan.

2
1.5 Rincian Pelaksanaan

Waktu dan tempat pelaksanaan praktek kerja lapangan yang penulis

lakukan adalah sebagai berikut:
Hari,Tanggal : Senin, 15 Maret 2021 s.d. 17 Mei 2021
Waktu : 07.30 – 16.00 WIB
Tempat : Dinas Komunikasi dan Informatika Kabupaten
Bangka Selatan, Komp. Perkantoran Terpadu
Pemerintah Kab. Bangka Selatan, Gunung Namak,
Toboali
1.6 Sistematika Penulisan
Sistematika penulisan laporan ini terbagi menjadi 6 bab penyajian tulisan
yang masing-masing bab meliputi :
Bab I Pendahuluan
Pada bab ini akan dibahas tentang latar belakang masalah, rumusan masalah,
batasan masalah, tujuan dan manfaat praktek kerja lapangan, rincian waktu
dan tempat pelaksanaan praktek kerja lapangan, dan sistematika penulisan
laporan praktek kerja lapangan tersebut.

Bab II Profil Perusahaan

Pada bab ini akan dibahas tentang profil instansi, visi dan misi dari instansi
dan struktur organisasi yang ada di Dinas Komunikasi dan Informatika
Kabupaten Bangka Selatan.

Bab III Metode Praktek Kerja

Pada bab ini penulis menjelaskan metodologi yang digunakan saat

melakukan praktek kerja lapangan.

Bab IV Pembahasan dan Hasil Praktek Kerja

Pada bab ini penulis menjelaskan tentang pembahasan hasil pekerjaan yang
dilakukan pada saat melakukan praktek kerja lapangan.

3
Bab V Kesimpulan dan Saran

Pada bab ini menjelaskan kesimpulan dan saran dari laporan praktek kerja
lapangan dan hasil yang diperoleh, serta saran-saran yang bermanfaat.

4
 BAB II
PROFIL PERUSAHAAN

2.1 Profil Singkat

Dinas Komunikasi dan Informatika merupakan unsur pelaksana Otonomi
Daerah di bidang Komunikasi dan Informatika dipimpin Kepala Dinas yang
berkedudukan di bawah dan bertanggungjawab kepada Bupati melalui Sekretaris
Daerah.
Dinas Komunikasi dan Informatika dalam melaksanakan tugas urusan
pemerintah daerah di bidang Komunikasi dan Informatika berdasarkan asas
otonomi dan tugas pembantuan, untuk melaksanakan tugas sebagai maksud diatas
menyelengggarakan fungsi :
a. Perumusan kebijakan teknis sesuai dengan lingkup tugasnya;
b. penyelenggaraan urusan pemerintahan dan pelayanan umum sesuai
dengan lingkup tugasnya;
c. pembinaan dan pelaksanaan tugas sesuai dengan lingkup dan tugasnya;
d. pelaksanaan tugas lain yang diberikan oleh Bupati sesuai dengan tugas dan
fungsinya.
2.2 Visi dan Misi
2.2.1 Visi
" Terwujudnya Bangka Selatan Mandiri, Maju, Sejahtera dan Berdaya
Saing "
2.2.2 Misi
1. Mewujudkan Kemandirian Ekonomi Masyarakat Berbasis Potensi
Lokal;
2. Mewujudkan Daerah Yang Berdaya Saing;
3. Mewujudkan Pelayanan Publik Yang Profesional Berbasis
Teknologi Informasi dan Penyelenggaraan Tata Pemerintahan
Daerah Yang Baik (Good Local Governance).

5
2.3 Struktur Organisasi

Gambar 2. 1 Bagan Struktur Organisasi Dinas Komunikasi dan Informatika

Gambar 2.1 di atas adalah bagan struktur organisasi DISKOMINFO BASEL,

dimana penulis pada saat praktek kerja lapangan berada di bagian Aplikasi
Telematika. Seksi Aplikasi Telematika berfokus untuk memastikan seluruh aplikasi
yang berjalan dilingkungan DISKOMINFO berjalan dengan baik dan kebutuhan
kelengkapan data yang dibutuhkan.

6
 BAB III
METODOLOGI KERJA PRAKTEK

3.1 Rincian Pelaksanaan PKL

3.1.1. Waktu dan Tempat PKL
Pelaksanaan kerja praktek di Dinas Komunikasi dan Informatika
Kab.Bangka Selatan yang beralamat di Komp. Perkantoran Terpadu
Pemerintah Kab. Bangka Selatan, Gunung Namak, Toboali dengan lama waktu
42 hari kerja. Masuk hari Senin s/d Jumat pukul 07.30 pagi dan pulang jam
16.00 sore. Awal magang dimulai pada tanggal 15 Maret 2021 dan berakhir
ditanggal 17 Mei 2021. Mahasiswa ditempatkan di bagian Aplikasi Telematika.
3.2 Flowchart Metode Praktek Kerja

Gambar 2. 2 Flowchart Metode Kerja Praktek

7
3.3 Penjelasan Flowchart Praktek Kerja
3.2.1 Mulai
Proses awal ketika memulai praktek kerja lapangan di Dinas
Komunikasi dan Informatika, yaitu bertemu dengan Kabid E-
Goverment yaitu Deni Purnomo, S.Kom dan pembimbing praktek kerja
lapangan penulis yaitu Metriyopi, S.Kom selaku Seksi Aplikasi
Telematika.
3.2.2 Pengenalan Lingkungan Kerja
Proses pengenalan lingkungan kerja di Dinas Komunikasi dan
Informatika Kab.Bangka Selatan terutama di bidang E-Goverment yaitu
pada bagian Aplikasi Telematika yaitu pengenalan dari staff pegawai
dan juga program kerja yang ada di Dinas Komunikasi dan Informatika
Kab. Bangka Selatan serta project apa saja yang akan dikerjakan.
3.2.3 Pemberian Tugas
Pemberian dan pembagian tugas project oleh pembimbing praktek kerja
lapangan. Project yang dikerjakan adalah membuat rancangan desain
fornt end aplikasi website desa Rias Toboali.
3.2.4 Pembelajaran Source Code pada Template Front End
Pembimbing memberikan penjelasan tentang source code pada
template yang sudah di download.
3.2.5 Pembuatan Front End Website Desa Rias Toboali
Proses pembuatan desain front end website desa Rias Toboali yaitu
dengan menggunakan template dan framework codeIgniter, desain
dibuat dikertas terlebih dahulu. Untuk proses ini juga rutin pelaporan
dengan pembimbing praktek kerja lapangan.
3.2.6 Revisi Front End Website Desa Rias Toboali
Jika ada case atau requirement yang belum sesuai, maka dilakukan
revisi pada desain tampilan front end website desa Rias Toboali. Sampai
desain tampilan front end website sesuai dengan requirement-nya.

8
3.2.7 Pembuatan Laporan
Pada proses ini, penulis menyusun laporan sesuai dengan data - data
yang didapat selama proses praktek kerja lapangan di Dinas
Komunikasi dan Informatika Kabupaten Bangka Selatan.
3.2.8 Selesai
Tahap akhir kegiatan praktek kerja lapangan di Dinas Komunikasi dan
Informatika Kabupaten Bangka Selatan dengan melengkapi seluruh
persyaratan administrasi di kampus maupun di instansi.

9
 BAB IV
PEMBAHASAN DAN HASIL KERJA

4.1 Persiapan Praktek Kerja

Pada tahapan pembuatan prototype website Desa Rias Toboali, penulis
menentukan kebutuhan apa saja yang diperlukan mulai dari perangkat keras hingga
perangkat lunak yang akan digunakan, diantaranya yaitu :
Perangkat Keras :
1 buah PC dengan spesifikasi :
Processor : Intel()R Core(TM) i5-7200U CPU @ 2.50GHz 2.71
RAM : 4 GB DDR4
VGA : Intel HD Graphics +mNvidia Geforce GT940MX 2GB
Dedicated
Hard Disk : 1000 GB HDD
Sistem Operasi : Windows 10 Pro 64 bit
Perangkat Lunak :
1. Draw.io sebagai software untuk membuat UML diagram dan Site Map.
2. XAMPP sebagai software pembuat website.
3. Balsamiq Mockups 3, untuk merancang mockup dari website desa Rias Toboali
4. Visual Studio Code, untuk membuat atau mengetikkan kode file HTML.

10
4.2 Langkah Praktek Kerja Lapangan
4.2.1 Pembuatan UML (Use Case Diagram)

Gambar 4. 1 Tampilan Draw.io

Gambar 4.1 adalah tampilan awal ketika membuka software Draw.io. Di

bagian sebelah kiri ada tools untuk pilihan tipe UML Diargam apa saja yang
ingin dibuat beserta iconnya.

Gambar 4. 2 New Project

Gambar 4.2 adalah menu untuk memilih tipe UML Diagram . Tipe Use Case
Diagram ada banyak yang tersedia dalam software UML seperti ini, Activity
Diagram, Flowchart, Sequence Diagram, dll. Pada kali ini memilih tipe UML
Use Case untuk Use Case Diagram.

11
 Gambar 4. 3 Use Case Diagram Sistem Informasi Website Desa

Gambar 4.3 adalah Use Case Diagram yang sudah dibuat. User disini adalah
pengguna yang melihat website tersebut. Use Case Diagram ini akan menjadi
gambaran untuk tahap selanjutnya yaitu pembuatan User Flow sampai
mendesain dan menjadi sebuah prototype website desa Rias Toboali.

Gambar 4. 4 Export Use Case Diagram

Gambar 4.4 adalah proses export hasil perancangan use case diagram. Ekstensi
file yang di export bisa berupa PNG, JPG atau yang lainnya. Kali ini export
menjadi file PNG.

12
4.2.2 Pembuatan MockUp Website Desa (Mid-Fidelity Prototyping)
Sebelum pembuatan front end website desa Rias Toboali, proses
pembuatan mockup dilakukan dengan menggunakan Balsamiq Mockups 3.
Proses ini dinamakan mid-fidelity prototyping. Proses mid-fidelity prototyping
dilakukan untuk mendapatkan navigasi dan fungsi yang disimulasikan
biasanya berbasis pada apa yang tampil pada layar atau simulasi layar,
sehingga mempermudah dalam pembuatan website desa dan tidak memerlukan
banyak revisi.

Gambar 4. 5 Mid-Fidelity Prototyping

Gambar 4.5 adalah mid-fidelity prototyping desain mockup front end

website desa. Mid-fidelity prototyping ini akan menjadi gambaran front end
website ketika proses pembuatan front end website desa dilakukan.
4.2.3 Pembuatan Front End Website Desa Rias Toboali
Pada proses ini pembuatan front end pada website desa ini menggunakan
framework codeigniter dan template aizenhtml-10.
4.2.3.1 Pembuatan Controller dan View
Pada tahap ini pembuatan akan dijelaskan tahap pengerjaan
pada controller dan view dari sebagian besar yang menjadi inti dari
website desa Rias Kabupaten Bangka Selatan. Berikut adalah cara
pembuatan/coding :

13
Gambar 4. 6 Controller Home

Gambar 4. 7 Controller Profil

Gambar 4. 8 Controller Publikasi

14
 Gambar 4. 9 Controller Kontak

Gambar 4. 10 Controller Galeri

Gambar 4.6 s.d gambar 4.10 adalah screenshot dari controller kelas
home, profile, galeri, kontak, dan publikasi. Controller ini merupakan
kelas yang digunakan untuk mengakses semua hal tentang antarmuka
dari home, profile, galeri, kontak, dan publikasi.
4.2.3.2 Pembuatan View

Gambar 4. 11 View Home

15
 Gambar 4. 12 View Kontak

Gambar 4. 13 View Berita

Pada gambar 4.10 s.d gambar 4.12 menampilkan halaman home, kontak dan
berita. <?=base_url( )?> berfungsi untuk menampilkan gambar pada
halaman website.

4.2.4 Hasil Implementasi

Dari proses dalam contoller dan kemudian di parsing ke dalam sebuah
view untuk dibuatkan struktur halamannya, maka akan tampil tampilan
halaman seperti gambar dibawah ini :
4.2.4.1 Home

Gambar 4. 14 Halaman Home

16
Gambar 4.14 adalah screenshot dari kerangka halaman home, kerangka
tersebut masih akan dikembangkan menjadi halaman yang benar-benar
fungsional.
4.2.4.2 Profil (Visi dan Misi)

Gambar 4. 15 Halaman Profil (Visi dan Misi)

Gambar 4.15 adalah screenshot kerangka dari halaman profil (visi dan
misi). Halaman ini digunakan untuk menjelaskan kepada pengguna
tentang visi dan misi dari desa Rias Kabupaten Bangka Selatan.
4.2.4.3 Publikasi (Berita)

Gambar 4. 16 Halaman Publikasi (Berita)

Gambar 4.16 adalah screenshot kerangka dari halaman publikasi (berita).

Halaman ini digunakan untuk menjelaskan kepada pengguna tentang
berita-berita yang ada di desa Rias Kabupaten Bangka Selatan.

17
4.2.4.4 Galeri
4.2.4.4.1 Foto

Gambar 4. 17 Halaman Galeri (Foto)

Gambar 4.17 adalah screenshot kerangka dari halaman galeri (foto).
Halaman ini digunakan untuk menampilkan foto-foto kegiatan yang ada
di desa Rias Kabupaten Bangka Selatan.
4.2.4.4.2 Video

Gambar 4. 18 Halaman Galeri (Video)

Gambar 4.18 adalah screenshot kerangka dari halaman galeri (video).
Halaman ini digunakan untuk menampilkan video-video kegiatan yang
ada di desa Rias Kabupaten Bangka Selatan.

18
4.2.4.5 Kontak

Gambar 4. 19 Halaman Kontak

Gambar 4.19 adalah screenshot kerangka dari halaman kontak. Halaman

ini mempermudah pengunjung untuk menghubungi organisasi atau
individu yang menyediakan website. Halaman ini berisi alamat email,
nomor telepon, link ke media sosial (instagram, facebook, youtube) dan
sebuah formulir kontak untuk pesan teks.

19
 BAB V
KESIMPULAN DAN SARAN

5.1 Kesimpulan
Setelah menjalani kerja praktik selama dua bulan di Dinas Informasi dan
Komunikasi (DISKOMINFO) Bangka Selatan, penulis mendapatkan banyak
pengalaman tentang perancangan front end pada website. Untuk membuat
suatu website kita harus mengetahui jelas tujuan dari website itu dibuat,
kebutuhan apa saja yang diperlukan dari user. Karena website yang kita buat
haruslah berupa pemecahan suatu masalah dari user. Selain itu juga harus
memudahkan user dalam penggunaannya (user friendly).
5.2 Saran
Berdasarkan kesimpulan diatas, penulis ingin memberi saran ketika
merancang sebuah front end website, tampilan desain dan alur penggunaan
haruslah jelas dan memudahkan user, bukan membingungkan user. Mengingat
zaman sekarang yang serba mobile, cobalah untuk belajar menguasai bidang
web dan mobile, sehingga menjadi nilai plus ketika didunia kerja.

20