Laporan Kerja Praktek Dinas Komunikasi Informatika dan Statistik Bengkalis: Pembuatan Website Resmi Perangkat Daerah Menggunakan Laravel

(1)

LAPORAN KERJA PRAKTEK

DINAS KOMUNIKASI INFORMASI DAN STATISTIK (DISKOMINFOTIK) BENGKALIS

PEMBUATAN WEBSITE RESMI PERANGKAT DAERAH DENGAN MENGGUNAKAN FRAMEWORK LARAVEL

MUHAMMAD ASSYAFIKRI 6103191325

PROGRAM STUDI D-III TEKNIK INFORMATIKA POLITEKNIK NEGERI BENGKALIS

RIAU

2021

(2)

(3)

KATA PENGANTAR

Puji dan Syukur penulis ucapkan kehadirat Tuhan Yang Maha Esa, karena berkat limpahan Rahmat dan Karunia-Nya sehingga penulis dapat menyusun laporan ini dengan baik dan tepat pada waktunya. Dalam laporan ini akan membahas mengenai Kerja Praktek (KP) yang dilaksanakan di Kantor Dinas Komunikasi Informasi dan Statistik (DISKOMINFOTIK) Bengkalis.

Adapun tujuan penulisan laporan Kerja Praktek (KP) ini adalah salah satu syarat yang harus dipenuhi oleh setiap Mahasiswa Jurusan Teknik Informatika Politeknik Negeri Bengkalis yang telah melaksanakan Kerja Praktek (KP).

Laporan Kerja Praktek ini dibuat dengan berbagai observasi dan beberapa bantuan dari berbagai pihak untuk membantu menyelesaikan tantangan dan hambatan selama melaksanakan Kerja Praktek hingga dalam mengerjakan laporan ini. Oleh karena itu, penulis mengucapkan terimakasih yang sebesar-besarnya kepada :

1. Tuhan Yang Maha Esa yang telah memberikan nikmat dan hidayah-Nya.

2. Kedua orang tua yang selalu memberikan do’a dan dukungan

3. Bapak Muhammad Nasir, M.Kom selaku Ketua Program Studi D-III Teknik Informatika.

4. Bapak Andri Irawan, ST selaku Kepala Seksi Aplikasi Dinas Komunikasi Informasi dan Statistik.

5. Ibu Sri Mawarni, M.Si selaku Dosen Pembimbing Kerja Praktek.

6. Bapak Desi Amirullah, M.T selaku Koordinator Pelaksanaan Kerja Praktek.

7. Semua pihak yang telah membantu dalam pelaksanaan Kerja Praktek di Kantor Dinas Komunikasi Informasi dan Statistik (DISKOMINFOTIK) Bengkalis.

8. Seluruh anggota staff dan teknisi Kantor Dinas Komunikasi Informasi dan Statistik (DISKOMINFOTIK) Bengkalis.

9. Seluruh teman-teman yang telah membantu memberikan dorongan, motivasi dan

semangat, sehingga penulis bisa menyelesaikan laporan ini dengan sebaik mungkin.

(4)

Penulis merasa sangat bersyukur selama melaksanakan Kerja Praktek di Kantor Dinas Komunikasi Informasi dan Statistik (DISKOMINFOTIK) Bengkalis, karena dengan adanya pelaksanaan Kerja Praktek ini penulis mendapatkan begitu banyak pengalaman berharga yang dapat dijadikan pegangan yang sangat berguna dan membantu di masa yang akan datang terutama di dalam dunia kerja dengan lingkup yang lebih luas.

Penulis menyadari bahwa masih terdapat banyak kekurangan pada laporan ini.

Oleh karena itu penulis mengundang pembaca untuk memberikan saran serta kritik yang dapat membangun. Kritik dari pembaca sangat diharapkan untuk penyempurnaan laporan selanjutnya. Untuk itu kritik dan saran demi kesempurnaan penulisan Kerja Praktek (KP) ini sangat penulis harapkan.

Bengkalis, 31 Agustus 2021

MUHAMMAD ASSYAFIKRI

NIM. 6103191325

(5)

DAFTAR ISI

HALAMAN JUDUL

HALAMAN PENGESAHAN

KATA PENGANTAR ... i

DAFTAR ISI ... iii

DAFTAR GAMBAR ... v

DAFTAR LAMPIRAN ... vi

BAB I PENDAHULUAN ... 1

1.1. Latar Belakang ... 1

1.2. Tujuan Kerja Praktek... 2

1.3. Manfaat Kerja Praktek... 2

BAB II GAMBARAN UMUM KANTOR DINAS KOMUNIKASI, INFORMASI DAN STATISTIK ... 3

2.1. Sejarah Umum Perusahaan ... 3

2.2. Visi dan Misi ... 3

2.2.1. Visi ... 3

2.2.2. Misi ... 3

2.3. Struktur Organisasi Perusahaan ... 4

2.4. Ruang Lingkup Perusahaan ... 5

BAB III BIDANG PEKERJAAN SELAMA KERJA PRAKTEK ... 7

3.1. Uraian Tugas Yang Dilaksanakan ... 7

3.1.1. Belajar sistem yang digunakan (menggunakan Framework Laravel) .. 7

3.1.2. Menginstall Laravel v.8 ... 8

3.1.3. Menginstall Software Atom dan HeidiSQL ... 9

3.1.4. Mempelajari Software Atom dan HeidiSQL ... 10

3.2. Target Yang Diharapkan ... 10

3.3. Software dan Hardware Yang Digunakan ... 11

3.3.2. Hardware ... 11

3.3.1. Software ... 12

(6)

3.4. Data-data Yang Diperlukan ... 13

3.5. Permasalahan Selama Kerja Praktek ... 14

3.6. Penyelesaian Masalah ... 14

BAB IV PEMBUATAN WEBSITE RESMI PERANGKAT DAERAH DENGAN MENGGUNAKAN FRAMEWORK LARAVEL ... 15

4.1. Uraian Judul ... 15

4.2. Proses Pembuatan Website Resmi Perangkat Daerah dengan Menggunakan Framework Laravel ... 15

BAB V PENUTUP ... 35

5.1. Kesimpulan ... 35

5.2. Saran ... 35

DAFTAR PUSTAKA ... 36

(7)

DAFTAR GAMBAR

Gambar 2.1. Logo Diskominfotik Bengkalis ... 3

Gambar 2.2. Struktur Organisasi Diskominfotik Bengkalis ... 4

Gambar 3.1. Proses pembelajaran menggunakan framework laravel ... 7

Gambar 3.2. Halaman install framework laravel v.8 ... 8

Gambar 3.3. Tampilan penginstalan laravel v.8 di software command prompt 8 Gambar 3.4. Tampilan utama website software Atom ... 9

Gambar 3.5. Tampilan website download software HeidiSQL ... 9

Gambar 3.6. Proses mempelajari software Atom dan HeidiSQL ... 10

Gambar 3.7. Laptop ASUS ... 11

Gambar 3.8. Mouse ... 11

Gambar 3.9. Logo Laravel ... 12

Gambar 3.10. Logo Aplikasi Atom ... 12

Gambar 3.11. Logo HeidiSQL ... 12

Gambar 3.12. Logo Command Prompt ... 13

Gambar 3.13. Logo Google ... 13

Gambar 4.1. Tampilan halaman dashboard sebelum di edit ... 15

Gambar 4.2. Tampilan tabel atau menu yang sudah di buat di software HeidiSQL ... 19

Gambar 4.3. Halaman Berita ... 20

Gambar 4.4. Halaman Tambah Berita ... 21

Gambar 4.5. Halaman Edit Berita ... 23

Gambar 4.6. Tampilan dari tabel berita di software HeidiSQL ... 24

Gambar 4.7. Tampilan halaman utama website berita ... 25

Gambar 4.8. Tampilan berita yang sudah di upload ke halaman utama website . 30

(8)

DAFTAR LAMPIRAN

Lampiran 1. Absen Harian ... 37

Lampiran 2. Kegiatan Harian ... 40

Lampiran 3. Lembar Penilaian Dari Instansi ... 54

(9)

BAB I PENDAHULUAN 1.1 Latar Belakang

Kerja Praktek (KP) adalah salah satu mata kuliah wajib yang ada di semua Program Studi (Prodi) di lingkungan Politeknik Negeri Bengkalis. Kerja Praktek merupakan proses belajar bekerja di suatu instansi dengan tujuan mendapatkan pengalaman kerja dan melakukan pengamatan terhadap pekerjaan yang bersesuaian dengan kompetensi masing-masing prodi. Untuk dapat terjun ke dunia kerja setelah lulus kuliah, setiap mahasiswa harus memiliki kesiapan dalam menghadapi dunia kerja yang sesuai dengan keahlian dan kemampuan yang dimilikinya selama perkuliahan. Banyak hal yang menjadi hambatan bagi seseorang yang belum mempunyai pengalaman kerja untuk bisa terjun di dunia pekerjaan, karena ilmu pengetahuan yang diperoleh di kampus akan berbeda dengan terjun langsung dilapangan.

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. Maka dari itu mahasiswa mengerjakan Kerja Praktek di suatu instansi yaitu Dinas Komunikasi, Informatika dan Statistik Kabupaten Bengkalis.

Dinas Komunikasi, Informatika dan Statistik Kabupaten Bengkalis merupakan

salah satu Perangkat Daerah (PD) di lingkungan Pemerintah Daerah Kabupaten

Bengkalis, Dinas Komunikasi, Informatika dan Statistik Kabupaten Bengkalis

mempunyai tugas menyelenggarakan Urusan Pemerintahan di Bidang Komunikasi

dan Informatika, Statistik dan Persandian. Sebagai bentuk komitmen pelaksanaan atas

tugas dan fungsi tersebut telah ditandatangani Perjanjian Kinerja (PK) tahun 2020

yang meliputi sasaran, indikator dan target yang harus dicapai.

(10)

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. Maka dari itu penulis mengajukan judul “PEMBUATAN WEBSITE RESMI PERANGKAT DAERAH DENGAN MENGGUNAKAN FRAMEWORK LARAVEL”.

1.2. Tujuan

Adapun tujuan 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

Sedangkan manfaat kegiatan KP bagi mahasiswa dan Politeknik Bengkalis yaitu : 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 dan menyelesaikan website yang berfungsi sebagai contoh dari website

resmi Dinas Komunikasi Informasi dan Statistika Kabupaten Bengkalis.

(11)

BAB II

GAMBARAN UMUM KANTOR DINAS KOMUNIKASI, INFORMASI DAN STATISTIK

2.1. Sejarah Singkat Perusahaan

Gambar 2.1 Logo Diskominfotik Bengkalis Sumber : https://diskominfotik.bengkaliskab.go.id/

Dinas Komunikasi, Informatika dan Statistik (Diskominfotik), dulunya 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.

2.2. Visi Dan Misi

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.

(12)

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

Kepala Dinas dari Diskominfotik Bengkalis bernama Drs. Johansyah Syafri, sedangkan pembimbing KP bernama Pak Andri Irawan dan Muhammad Nurul Hudin yang merupakan teknisi Pengelolaan Berbasis Elektronik yang menjadi Pembimbing KP selama 2 Bulan di Diskominfotik Bengkalis.

Berikut adalah struktur organisasi Diskominfotik Bengkalis :

Gambar 2.2 Struktur Organisasi Diskominfotik Bengkalis

Sumber : https://diskominfotik.bengkaliskab.go.id/web/statis/struktur-organisasi/3

Gambar di atas tersebut merupakan struktur dari Diskominfotik bengkalis yang

dimana setiap bagian memiliki tugas dan tanggung jawab masing- masing.

(13)

2.4. Ruang Lingkup Perusahaan

Diskominfotik Kabupaten Bengkalis merupakan instansi yang bergerak dibidang komunikasi, statistik dan informatika. 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. Adapun produk-produk yang sudah dihasilkan adalah sebagai berikut : (Profile: Sejarah, Tentang, Visi Misi)

1. Aplikasi Informasi Bahan Pokok dan Bahan Penting (Bapokting) berbasis web dan android. Aplikasi ini merupakan aplikasi yang menyediakan layanan informasi bagi pengguna khususnya masyarakat Kabupaten Bengkalis. Aplikasi ini dibangun untuk memudahkan masyrakat untuk mendapatkan informasi terkati harga barang pokok dan kebutuhan lainnya sesuai dengan kenaikkan harga maupun penurunan harga. Aplikasi ini dapat diakses melalui bapokting.bengkaliskab.go.id dan versi android bisa diunduh melalui link berikut ini,

https://play.google.com/store/apps/details?id=id.cloudcode.alikasihargabarang 2. Aplikasi Zonasi Sekolah berbasis web

Penerapan sistem zonasi sekolah mengharuskan calon perserta didik untuk menempuh pendidikan di sekolah yang memiliki radius terdekat dari domisilinya. Melalui aplikasi zonasi sekolah diperuntukkan kepada masyarakat Kabupaten Bengkalis untuk mendapatkan informasi dan melakukan pendaftaran secara online melalui aplikasi zonasi sekolah berbasis web sesuai dengan zona atau radius daerah yang telah ditentukan. Aplikasi ini dapat diakses melalui https://www.zonasi.bengkaliskab.go.id

3. Eoffice

Merupakan suatu sistem aplikasi tata kelola keuangan berbasis elektronik.

Aplikasi ini untuk membantu dalam bentuk pembuatan laporan keuangan di kantor Dinas Komunikasi Informasi dan statistik Kabupaten Bengkalis.

(14)

4. Webgis

Merupakan aplikasi pemetaan digital yang memanfaatkan jaringan internet sebagai media komunikasi yang berfungsi untuk menyediakan informasi dalam bentuk teks maupun peta. Pada aplikasi ini menyediakan peta wisata, SKPD, Transportasi, Penginapan, Free Wifi, Kuliner, UMKM, RS&Puskesmas, Sekolah, SPBU dan CCTV. Aplikasi ini dapat di akses melalui link : https://bengkaliskab.go.id/webgis.

5. Kim

Merupakan website resmi Kelompok Informasi Masyarakat Kabupaten Bengkalis. Website ini berupa layanan dengan menyediakan informasi publik, baik melalui website, media lain seperti e-mail dan faksimili, maupun secara langsung. Website ini menyediakan informasi Berita Terkini, Data KIM, dan Wisata. Website ini dapat di akses melalui link

https://www.bengkaliskab.go.id/kim 6. Website Bengkalis

Website Bengkalis ini berupa pasilitas pelayanan publik yang diadakan oleh bidang PBE untuk mempermudah masyarakat mendapatkan inforrmasi berita, pengumuman, maupun kegiatan-kegiatan yang dilaksanakan pemerintahan kabupaten Bengkalis. Website ini dapat diakses melalui https://www.bengkaliskab.go.id.

7. Cctv Penyebrangan Bengkalis - Sungai Selari

Media informasi antrian kendaraan beroda empat dan kendaraan bermotor yang

ada di pelabuhan Roro Bengkalis dan Pelabuhan Roro Pakning. Cctv ini dapat di

akses melalui https://cctv.bengkaliskab.go.id.

(15)

BAB III

BIDANG PEKERJAAN SELAMA KERJA PRAKTEK

3.1. Uraian Tugas Yang Dilaksanakan

Kerja Praktek (KP) dilaksanakan terhitung mulai tanggal 05 Juli 2021 sampai dengan tanggal 31 Agustus 2021 di Dinas Komunikasi Informasi dan Statistik Kabupaten Bengkalis. Selama pelaksanaan KP adapun tugas yang diberikan diantaranya :

3.1.1. Belajar sistem yang digunakan (menggunakan Framework Laravel)

Laravel adalah kerangka kerja aplikasi web berbasis PHP yang sumber terbuka, menggunakan konsep Model-View-Controller (MVC). Laravel berada dibawah lisensi MIT, dengan menggunakan GitHub sebagai tempat berbagi kode. Penggunaan Laravel cukup simpel dan tidak terlalu susah untuk di pahami dan dipelajari.

Gambar 3.1 Proses pembelajaran menggunakan framework laravel

(16)

3.1.2. Menginstall Laravel v.8

Dalam pembuatan website ini, kita menggunakan Framework Laravel v.8 agar website yang dibuat aman dari pihak lain yang misalnya ingin meretas website kita.

Maka dari itu kita perlu menginstall Framework Laravel ini terlebih dahulu dengan cara membuka website resmi dari Framework Laravel seperti gambar dibawah ini.

Gambar 3.2 Halaman install framework laravel v.8 Sumber : https://laravel.com/docs/8.x

Tidak hanya sampai di situ, menginstall Framework Laravel ini harus menggunakan software command prompt dengan memasukkan kode kode yang sudah tersedia di website resmi Framework Laravel tersebut.

Gambar 3.3 Tampilan penginstalan laravel v.8 di software command prompt

(17)

3.1.3. Menginstall Software Atom dan HeidiSQL

Selain menggunakan Framework Laravel, kita juga membutuhkan software Atom dan HeidiSQL. Karena, Atom dan HeidiSQL adalah bahan utama untuk membuat website. Atom berfungsi sebagai text editor untuk mendesain website yang kita buat.

Gambar 3.4 Tampilan utama website software Atom Sumber : https://atom.io/

Sedangkan HeidiSQL berfungsi untuk membuat tabel dan sebagai database yang akan di akses ke halaman website.

Gambar 3.5 Tampilan website download software HeidiSQL Sumber : https://www.heidisql.com/download.php

(18)

3.1.4. Mempelajari Software Atom dan HeidiSQL

Mahasiswa Kerja Praktek, harus mempelajari terlebih dahulu mengenai software Atom dan HeidiSQL. Karena, mahasiswa Kerja Praktek baru saja mengenali software Atom dan HeidiSQL yang sedikit rumit untuk di pahami.

Gambar 3.6 Proses mempelajari software Atom dan HeidiSQL

3.2. Target Yang Diharapkan

Target yang diharapkan adalah dapat memahami dan menjalankan segala kegiatan selama Kerja Praktek di kantor Diskominfotik Bengkalis dengan baik, sehingga pengetahuan tersebut dapat digunakan untuk suatu hari nanti, mulai dari melakukan proses pembuatan website, pengaktifan website, dan menjalankan website.

Selain memahami dan menjalankan segala kegiatan Kerja Praktek di

Diskominfotik Bengkalis tersebut, diharuskan juga untuk selalu aktif dan fokus ketika

bekerja membuat website.

(19)

3.3. Software dan Hardware Yang Digunakan 3.3.1. Hardware

1. Laptop ASUS dengan spesifikasi sebagai berikut :

1. CPU : Intel Celeron N4000, up to 2.6GHz 2. Memory : 4 GB RAM

3. HDD : 1 TB

4. OS : Windows 10

Gambar 3.7 Laptop ASUS

2. Mouse, digunakan untuk mempermudah dalam pergerakan kursor seperti memindahkan dan memilih teks, ikon, file, dan folder.

Gambar 3.8 Mouse

(20)

3.3.2. Software

1. Laravel, Fungsi Laravel adalah untuk memaksimalkan penggunaan PHP itu sendiri dalam pengembangan website. Selain itu, Laravel juga berfungsi untuk meningkatkan kualitas perangkat lunak dengan mengurangi biaya pengembangan awal dan biaya pemeliharaan serta meningkatkan pengalaman bekerja dengan aplikasi untuk menyediakan sintaks yang ekspresif, jelas dan menghemat waktu.

Gambar 3.9 Logo Laravel Sumber : www.connortumbleson.com

2. 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.

Gambar 3.10 Logo Aplikasi Atom Sumber : www.pngdownload.id

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

Gambar 3.11 Logo HeidiSQL Sumber : www.commons.wikimedia.org

(21)

4. Command Prompt, dikenal sebagai program komputer yang digunakan untuk membuka file direktori atau program tertentu dengan sebuah baris perintah (command line) di sebuah OS, dalam hal ini Windows yang berbasis GUI. Program komputer ini dikenal dengan banyak nama: Command Shell, CMD Prompt, CMD.exe, atau Windows Command Processor (nama resminya di Windows).

Gambar 3.12 Logo Command Prompt Sumber ; www.favpng.com

5. Google, digunakan untuk membuka tampilan website daftar berita kependudukan dan mencari informasi – informasi yang berkaitan dalam pembuatan website daftar berita.

Gambar 3.13 Logo Google Sumber : www.freepnglogos.com

3.4. Data-data Yang Diperlukan

1. Yang paling utama ialah membutuhkan akses internet yang kuat agar proses pembuatan website berjalan dengan lancar dan tidak mudah error dalam menjalankan tes akses ke website.

2. Menggunakan aplikasi – aplikasi yang akurat agar memudahkan dalam pembuatan website.

3. Referensi tampilan website yang akan mahasiswa kerja praktek buat.

(22)

3.5. Permasalahan Selama Kerja Praktek

Setiap kegiatan selalu memiliki kendala atau permasalahan dari berbagai aspek. Begitu pula dengan kerja praktek yang dilaksanakan selama 2 bulan di Dinas Komunikasi Informasi dan Statistik. Berikut permasalahan yang dihadapi selama kerja praktek :

1. Tempat kerja praktek agak sempit, sehingga kurang nyaman untuk bekerja atau menjalankan tugas yang diberikan oleh pembimbing KP.

2. Kurangnya pengetahuan tentang tugas yang diberikan oleh pembimbing KP yaitu pembuatan website menggunakan framework laravel.

3. Pembimbing KP kurang memperhatikan cara kerja mahasiswa KP sehingga mahasiwa KP agak kewalahan dalam menjalankan tugas.

3.6. Penyelesaian Masalah

Berdasarkan rincian masalah yang dipaparkan pada point diatas, berikut solusi untuk permasalahan tersebut, yaitu :

1. Pembimbing KP menyediakan kursi dan meja yang agak luas untuk mahasiswa KP agar nyaman dalam mengerjakan tugas.

2. Meminta bantuan dan bertanya kepada pembimbing dan pegawai-pegawai di ruangan tersebut yang lebih memahami dalam projek pembuatan website tersebut.

3. Memberitahu kepada pembimbing agar lebih memperhatikan mahasiswa KP dan

mengajarkan apa yang tidak dipahami oleh mahasiswa KP agar tidak kewalahan dalam

mengerjakan pembuatan website.

(23)

BAB IV

PEMBUATAN WEBSITE RESMI PERANGKAT DAERAH DENGAN MENGGUNAKAN FRAMEWORK LARAVEL

4.1. Uraian Judul

Judul ini saya ambil karena terkait apa yang ditugaskan oleh pembimbing KP yaitu “Pembuatan Website Resmi Perangkat Daerah dengan Menggunakan Framework Laravel” seperti website resmi Dinas Komunikasi Informasi dan Statistik Kabupaten Bengkalis.

4.2. Proses Pembuatan Website Resmi Perangkat Daerah dengan Menggunakan Framework Laravel

Adapun tahap melakukan pembuatan Website Resmi Perangkat Daerah dengan Menggunakan Framework Laravel sebagai berikut :

4.2.1. Membuat Halaman Dashboard Menggunakan Bootstrap

Jika ingin membuat website sendiri, kita harus membuat halaman dashboard terlebih dahulu menggunakan bootstrap yang bisa di download di berbagai website bootstrap.

Gambar 4.1 Tampilan halaman dashboard sebelum di edit Sumber : https://magang.tautan.web.id/fikri/adminweb

(24)

Adapun hasil source code dari tampilan halaman dashboard sebagai berikut :

<!DOCTYPE html>

<head>

<title>Dashboard - SB Admin</title>

</head>

<a class="navbar-brand ps-3" href="index.html">Muhammad Assyafikri</a>

</div>

</form>

(25)

<li><a class="dropdown-item" href="#!">Settings</a></li>

<li><a class="dropdown-item" href="#!">Activity Log</a></li>

<li><a class="dropdown-item" href="#!">Logout</a></li>

</ul>

</li>

</ul>

</nav>

Dashboard </a>

<div class="sb-sidenav-menu-heading">Interface</div>

Publikasi

</a>

(26)

<a class="nav-link" href="{{url('adminweb/berita')}}">Berita</a>

<a class="nav-link" href="{{url('adminweb/berita/tambah')}}">Halaman Statik</a>

</nav>

</div>

<div class="small">Logged in as:</div>

Start Bootstrap </div>

</nav>

</div>

<main>

@yield('content') </main>

<div>

<a href="#">Privacy Policy</a>

·

<a href="#">Terms & Conditions</a>

</div>

(27)

</footer>

</div>

</body>

</html>

4.2.2. Membuat Tabel Menggunakan Software HeidiSQL

Selanjutnya, membuat tabel atau menu yang akan ditampilkan dan dimasukkan ke dalam website. Dengan cara mengisi form yang sudah tersedia di dalam software HeidiSQL.

Gambar 4.2 Tampilan tabel atau menu yang sudah di buat di software HeidiSQL

4.2.3. Membuat Halaman Berita

Pada pembuatan halaman daftar berita ini, melakukan pengcodingan di software

Atom dan membuat tabelnya di software HeidiSQL. Halaman ini berisi daftar-daftar

berita yang dibuat untuk di publikasikan ke website pribadi.

(28)

Gambar 4.3 Halaman Berita

Sumber : https://magang.tautan.web.id/fikri/adminweb/berita

Adapun hasil source code dari tampilan halaman berita sebagai berikut :

@extends('adminweb.layout')

@section('content')

<h1 class="mt-4">Berita</h1>

Daftar Berita

<a href="{{url("adminweb/berita/tambah")}}" class="btn btn-primary" type="button"

name="button">Tambah</a>

</div>

<thead>

<tr>

<th>Judul Berita</th>

<th>Tanggal Berita</th>

</tr>

</thead>

<tbody>

@foreach($berita as $key=>$row) <tr>

(29)

<td>{{$row->judul}}</td>

<td>{{date("d M Y H:i", strtotime($row->tanggal))}} WIB</td>

<td><a href="{{url("adminweb/berita/edit")}}/{{$row->id_berita}}" class="btn btn-primary"

type="button" name="button">Edit</a></td>

</tr>

@endforeach </tbody>

</table>

</div>

@endsection

4.2.4. Membuat Halaman Tambah Berita

Halaman ini dibuat agar kita bisa menambah berita yang akan kita tambahkan.

Gambar 4.4 Halaman Tambah Berita

Sumber : https://magang.tautan.web.id/fikri/adminweb/berita/tambah

Adapun hasil source code dari tampilan halaman tambah berita sebagai berikut :

@section('content')

<h1 class="mt-4">Tambah Berita</h1>

</ol>

(30)

Tambah Berita </div>

@csrf <div class="mb-3">

<label for="exampleInputEmail1" class="form-label">Judul</label>

</div>

</div>

</div>

<option selected>-Pilih Jenis Berita-</option>

<option value="1">Pariwisata</option>

<option value="2">Bencana</option>

<option value="3">Politik</option>

<option value="4">Olahraga</option>

<option value="5">Kesenian</option>

<option value="6">Teknologi</option>

<option value="7">Seleb</option>

<option value="8">Lifestyle</option>

<option value="9">Keuangan</option>

<option value="10">Jurnalistik</option>

</select>

<label class="form-check-label" for="exampleCheck1">Check me out</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

@endsection

(31)

4.2.5. Membuat Halaman Edit Berita

Halaman ini berisikan tampilan untuk mengedit berita yang kita tambahkan apabila ada kesalahan kata atau kesalahan-kesalahan yang lain bisa kita edit kembali dengan pergi ke halaman ini.

Gambar 4.5 Halaman Edit Berita

Sumber : https://magang.tautan.web.id/fikri/adminweb/berita/edit/1

Adapun hasil source code dari tampilan halaman edit berita sebagai berikut :

@section('content')

<h1 class="mt-4">Edit Berita</h1>

</ol>

Edit Berita

<a href="{{url("adminweb/berita/tambah")}}" class="btn btn-primary" type="button"

name="button">Tambah</a>

</div>

<form>

<label for="exampleInputEmail1" class="form-label">Judul</label>

<input type="text" class="form-control" name="judul" value="{{$edit->judul}}">

</div>

</div>

(32)

</div>

<option selected>-Pilih Jenis Berita-</option>

<option value="1">Pariwisata</option>

<option value="2">Bencana</option>

<option value="3">Politik</option>

<option value="4">Olahraga</option>

<option value="5">Kesenian</option>

<option value="6">Teknologi</option>

<option value="7">Seleb</option>

<option value="8">Lifestyle</option>

<option value="9">Keuangan</option>

<option value="10">Jurnalistik</option>

</select>

<label class="form-check-label" for="exampleCheck1">Check me out</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

@endsection

4.2.6. Mengisi Berita di Software HeidiSQL

Mengisi berita di tabel yang sebelumnya sudah dibuat di software HeidiSQL untuk dipublikasikan ke website pribadi kita. Di tabel berita, ada beberapa kolom yang harus di isi yaitu, id berita, judul, tanggal, beserta isi dari berita yang kita buat.

Gambar 4.6 Tampilan dari tabel berita di software HeidiSQL

4.2.7. Menambahkan halaman berita menggunakan bootstrap

Selanjutnya, kita menambahkan halaman berita menggunakan bootstrap sesuai

bagaimana desain yang kita inginkan.

(33)

Gambar 4.7 Tampilan halaman utama website berita Sumber :https://magang.tautan.web.id/fikri/

Adapun hasil source code dari tampilan halaman utama website berita sebagai berikut :

<!DOCTYPE html>

<head>

<title>Blog Home - Muhammad Assyafikri</title>

</head>

<body>

<a class="navbar-brand" href="#!">Muhammad Assyafikri</a>

<li class="nav-item"><a class="nav-link" href="#!">About</a></li>

<li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>

(34)

</ul>

</div>

</nav>

<h1 class="fw-bolder">Welcome to My Blog!</h1>

<p class="lead mb-0">Selamat datang di website saya</p>

</div>

</header>

<a href="#!"><img class="card-img-top" src="https://cdn-

2.tstatic.net/pekanbaru/foto/bank/images/aliran_daya_pju_di_bengkalis_putus_sementara_pemkab_bengkalis_tunggak_tangihan_lis trik_rp700_juta.jpg" alt="..." /></a>

<div class="small text-muted">August 25, 2021</div>

<h2 class="card-title">Aliran Daya PJU di Bengkalis Putus Sementara, Pemkab Bengkalis Tunggak Tagihan Listrik Rp700 Juta</h2>

<p class="card-text">Sejumlah jalan umum di Bengkalis malam ini akan mulai gelap gulita dari penerangan lampu jalan. Ini terjadi karena PLN Bengkalis melakukan pemutusan daya sejumlah penerangan jalan umum (PJU) yang ada.</p>

</div>

2.tstatic.net/pekanbaru/foto/bank/images/pengumuman-masa-sanggah-cpsn-diundur.jpg" alt="..." /></a>

<h2 class="card-title h4">Pengumuman Hasil Sanggah Seleksi Administrasi CPNS BKN Diundur Jadi 20

(35)

Agustus 2021</h2>

<p class="card-text">Pengumuman hasil sanggah seleksi administrasi CPNS Badan Kepegawaian Negara (BKN) diundur dari jadwalnya. Rencananya hasil sanggah akan diumumkan pada Minggu (15/8/2021) diundur menjadi 20 Agustus 2021.</p>

</div>

<a href="#!"><img class="card-img-top" src="https://dummyimage.com/700x350/dee2e6/6c757d.jpg" alt="..."

/></a>

<div class="small text-muted">January 1, 2021</div>

<h2 class="card-title h4">Post Title</h2>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla.</p>

</div>

/></a>

</div>

/></a>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam.</p>

(36)

</div>

<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria- disabled="true">Newer</a></li>

<li class="page-item"><a class="page-link" href="#!">Older</a></li>

</ul>

</nav>

</div>

<div class="card-header">Search</div>

<input class="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..."

aria-describedby="button-search" />

</div>

<div class="card-header">Categories</div>

<li><a href="#!">Web Design</a></li>

<li><a href="#!">Freebies</a></li>

</ul>

</div>

(37)

<li><a href="#!">JavaScript</a></li>

<li><a href="#!">Tutorials</a></li>

</ul>

</div>

<div class="card-header">Side Widget</div>

<div class="card-body">You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component!</div>

</div>

<div class="container"><p class="m-0 text-center text-white">Copyright & copy; Your Website 2021</p></div>

</footer>

</body>

</html>

(38)

4.2.8. Menambahkan berita dalam halaman website berita

Kemudian, kita menambahkan berita yang akan di tampilkan di halaman utama website.

Gambar 4.8 Tampilan berita yang sudah diupload ke halaman utama website Sumber : https://magang.tautan.web.id/fikri/

Adapun hasil source code dari tampilan berita yang sudah diupload ke halaman utama website sebagai berikut :

<!DOCTYPE html>

<head>

<title>Blog Home - Muhammad Assyafikri</title>

</head>

<body>

(39)

<a class="navbar-brand" href="#!">Muhammad Assyafikri</a>

<li class="nav-item"><a class="nav-link" href="#!">About</a></li>

<li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>

</ul>

</div>

</nav>

<h1 class="fw-bolder">Welcome to My Blog!</h1>

<p class="lead mb-0">Selamat datang di website saya</p>

</div>

</header>

2.tstatic.net/pekanbaru/foto/bank/images/aliran_daya_pju_di_bengkalis_putus_sementara_pemkab_bengkalis_tunggak_tangihan_lis trik_rp700_juta.jpg" alt="..." /></a>

<h2 class="card-title">Aliran Daya PJU di Bengkalis Putus Sementara, Pemkab Bengkalis Tunggak Tagihan Listrik Rp700 Juta</h2>

<p class="card-text">Sejumlah jalan umum di Bengkalis malam ini akan mulai gelap gulita dari penerangan lampu jalan. Ini terjadi karena PLN Bengkalis melakukan pemutusan daya sejumlah penerangan jalan umum (PJU) yang ada.</p>

</div>

(40)

2.tstatic.net/pekanbaru/foto/bank/images/pengumuman-masa-sanggah-cpsn-diundur.jpg" alt="..." /></a>

<h2 class="card-title h4">Pengumuman Hasil Sanggah Seleksi Administrasi CPNS BKN Diundur Jadi 20 Agustus 2021</h2>

<p class="card-text">Pengumuman hasil sanggah seleksi administrasi CPNS Badan Kepegawaian Negara (BKN) diundur dari jadwalnya. Rencananya hasil sanggah akan diumumkan pada Minggu (15/8/2021) diundur menjadi 20 Agustus 2021.</p>

</div>

/></a>

</div>

/></a>

</div>

(41)

/></a>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam.</p>

</div>

<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria- disabled="true">Newer</a></li>

<li class="page-item"><a class="page-link" href="#!">Older</a></li>

</ul>

</nav>

</div>

<div class="card-header">Search</div>

<input class="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..."

aria-describedby="button-search" />

</div>

(42)

<div class="card-header">Categories</div>

<li><a href="#!">Web Design</a></li>

<li><a href="#!">Freebies</a></li>

</ul>

</div>

<li><a href="#!">JavaScript</a></li>

<li><a href="#!">Tutorials</a></li>

</ul>

</div>

<div class="card-header">Side Widget</div>

<div class="card-body">You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component!</div>

</div>

<div class="container"><p class="m-0 text-center text-white">Copyright & copy; Your Website 2021</p></div>

</footer>

</body>

</html>

(43)

BAB V PENUTUP

5.1 Kesimpulan

Dalam pelaksanaan kerja praktek di Dinas Komunikasi Informasi dan Statistika Kabupaten Bengkalis, dapat disimpulkan bahwa perancangan desain website perangkat daerah ini digunakan untuk informasi-informasi atau berita- berita yang ada di wilayah Kabupaten Bengkalis. Sehingga dengan adanya contoh website perangkat daerah ini mempermudah untuk masyarakat Kabupaten Bengkalis mendapatkan informasi secara cepat dan tepat.

Selain itu, dengan adanya Kerja Praktek ini, mahasiswa Teknik Informatika Politeknik Negeri Bengkalis mampu mengenal dengan lebih dalam mengenai Teknik Informatika dalam dunia kerja yang berada di luar Politeknik Negeri Bengkalis, seperti melaksanakan Kerja Praktek di Dinas Komunikasi Informasi dan Statistika.

5.2 Saran