LAPORAN PKL - 16102143 - Yankotinu Jonnata PDF

LAPORAN PRAKTIK KERJA LAPANGAN/KERJA PRAKTIK
KERJA PRAKTIK DI DINAS KOMUNIKASI DAN

INFORMATIKA KABUPATEN BANYUMAS
PERBAIKAN ANTARMUKA PENGGUNA PADA

SITUS SISTEM INFORMASI BANYUMAS DALAM
OPEN DATA “SI BANDOT” MENGGUNAKAN
FRAMEWORK ANGULAR
Yankotinu Al Qod’r Jonnata

NIM 16102143
PROGRAM STUDI S1 TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI DAN INFORMATIKA
INSTITUT TEKNOLOGI TELKOM
PURWOKERTO
2019
i


FRAMEWORK ANGULAR
Laporan Praktik Kerja Lapangan/ Kerja Praktik disusun guna memenuhi

syarat kewajiban Praktik Kerja Lapangan

NIM 16102143
PROGRAM STUDI S1 TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI DAN INFORMATIKA
INSTITUT TEKNOLOGI TELKOM
PURWOKERTO
2019
ii


FRAMEWORK ANGULAR
Dipersiapkan dan disusun oleh:

NIM 16102143
Telah dipresentasikan pada hari Kamis, 24 Oktober 2019
Mengetahui,
Ketua Program Studi Pembimbing PKL/KP ,
Fahrudin Mukti W, S.Kom., M.Eng. Atik Febriani, S.T., M.T.

NIK. 18840116 NIDN. 0625029002
iii
KATA PENGANTAR
Puji syukur penulis panjatkan kehadirat Allah SWT, karena atas rahmat-
Nya, dengan ini penulis dapat menyelesaikan Laporan Praktik Kerja Lapangan di
Dinas Komunikasi dan Informatika Kabupaten Banyumas yang dilaksanakan pada
tanggal 1 Agustus 2018 sampai dengan 30 Agustus 2019. Praktek Kerja Lapangan
yang telah penulis laksanakan, tidak lepas dari dukungan segenap pihak yang
telah memberikan bantuan kepada penulis. Untuk itu penulis dalam kesempatan
ini mengucapkan terima kasih kepada :
1. Bapak Dr. Ali Rokhman, M.Si., selaku Rektor Institut Teknologi Telkom
Purwokerto
2. Bapak Ir. Sutarno, M.Si. selaku Kepala Bidang Sandi, Teknologi Informasi
dan Komunikasi yang telah memberikan izin, waktu dan tempat untuk
melakukan Praktik Kerja Lapangan pada salah satu Seksi didalam Bidang
Sandi, Teknologi Informasi dan Komunikasi.
3. Bapak Eko Purwanto, S.E. selaku Kepala Seksi Statistik, Pengelolaan Data
dan Integrasi Sistem Informasi serta Bapak Taufik Hidayat, S.Kom., yang
telah memberi izin dan menjadi pembimbing pada tempat Kerja Praktik
Lapangan.
4. Seluruh rekan kerja di Dinas Komunikasi dan Informatika Kabupaten
Banyumas yang telah membantu penulis selama berlangsungnya pratik kerja
lapangan.
5. Ibu Atik Febriani, S.T., M.T. selaku dosen pembimbing PKL yang telah
membantu memberikan arahan dalam penulis menyusun Laporan Praktik
Kerja Lapangan.
6. Kedua orang tua tercinta yang selalu mendukung dan memberikan doa
kepada penulis.
7. Teman-teman S1 Teknik Informatika dan pihak lain yang telah memberikan
semangat dan bantuan dalam penyusunan laporan ini.
Penulis menyadari bahwa laporan ini masih terdapat kekurangan dari segi
isi dan penulisannya. Maka dengan ini penulis mengharapkan kritik dan saran
yang membangun demi kesempurnaan laporan Praktik Kerja Lapangan ini dan
diharapkan dapat bermanfaat bagi penulis dan pembaca.
Purwokerto, 12 November 2019
Penyusun
iv
ABSTRAK
PERBAIKAN ANTARMUKA PENGGUNA PADA SITUS SISTEM

INFORMASI BANYUMAS DALAM OPEN DATA “SI BANDOT”
MENGGUNAKAN FRAMEWORK ANGULAR
Oleh:
NIM 16102143
Sistem Informasi Banyumas dalam Open Data (SI BANDOT) merupakan

portal data terbuka Pemerintah Kabupaten Banyumas yang menyajikan data-data
dari seluruh OPD, instansi vertikal, BUMD dan organisasi lainnya di Kabupaten
Banyumas. Namun antarmuka pengguna dari situs SI BANDOT masih sederhana
dan kurang mudah digunakan. Maka dilakukan perbaikan antarmuka pengguna SI
BANDOT untuk meningkatkan User Experience dalam menggunakan SI
BANDOT dan Usability dari SI BANDOT. Manfaat dari perbaikan antarmuka
pengguna SI BANDOT diantaranya meningkatkan kenyamanan dan kemudahan
pengguna dalam menggunakan SI BANDOT. Sebelum melakukan perbaikan
antarmuka pengguna SI BANDOT diperlukan suatu metode pengumpulan data,
diantaranya studi pustaka, observasi, dan wawancara. Studi pustaka dilakukan
untuk memahami tentang tempat praktik kerja lapangan dan mencari referensi
mengenai topik yang bersangkutan. Observasi dilakukan untuk mengetahui
keadaan tempat dan menganalisis situs SI BANDOT. Wawancara dilakukan untuk
mengetahui kebutuhan dari perbaikan antarmuka pengguna situs SI BANDOT.
Selama masa praktik kerja lapangan, penulis melakukan implementasi desain
mockup kedalam halaman HTML dengan menggunakan framework Angular,
Bootstrap, dan NgBootstrap. Kemudian penulis juga melakukan konfigurasi pada
framework Angular (back end) agar proyek situs ini dapat berjalan dengan baik.
Hasil perbaikan antarmuka pengguna SI BANDOT diantaranya implementasi dari
desain mockup kedalam bentuk halaman HTML hampir sama. Selain itu dengan
menggunakan framework Angular, Bootstrap, dan NgBootstrap menghasilkan
situs dengan Single Page Application (SPA) dan menjadi responsif. Saran yang
penulis sampaikan kepada bagian Seksi Statistik, Pengelolaan Data dan Integrasi
Sistem Informasi adalah melakukan kerja sama dengan pihak luar dan melakukan
sosialiasi terhadap SI BANDOT kepada masyarakat agar tujuan dari SI BANDOT
dapat terrealisasi dengan baik.
Kata Kunci : Bootstrap, Framework Angular, HTML, Sistem Informasi

v
ABSTRACT
PERBAIKAN ANTARMUKA PENGGUNA PADA SITUS SISTEM

INFORMASI BANYUMAS DALAM OPEN DATA “SI BANDOT”
MENGGUNAKAN FRAMEWORK ANGULAR
By:
NIM 16102143
The Banyumas Information System in Open Data (SI BANDOT) is an

oped data portal for the Banyumas Regency Government that presents data from
all OPDs, vertical agencies, BUMDs and other organizations in the Banyumas
Regency. But the user interface of the SI BANDOT website is still simple and not
easy to use. Then the SI BANDOT user interface was improved to improve the
User Experience in using SI BANDOT and Usability from SI BANDOT. The
benefits of improving SI BANDOT's user interface include increasing the comfort
and ease of use of SI BANDOT. Before making improvement to the user interface
of SI BANDOT a data collection method is needed, including literature research,
observation and interviews. Literatur study is conducted to understand the place of
practical work and find references on the topic concerned. Observations were
made to determine the state of the place and analyze the SI BANDOT’s site.
Interviews were conducted to determine the need for improvements to the user
interface of SI BANDOT. During the period of practical work, the authors
implemented the mockup design into HTML pages using the Angular framework,
Bootstrap, and NgBootstrap. Then the authors also configure the Angular
framework (back end) in case this site project can run well. The result of
improvements to the user interface of SI BANDOT are the implementation of the
mockup design into HTML page forms almost the same. In addition, using the
Angular framework, Bootstrap, and NgBootstrap produce sites with Single Page
Application (SPA) and be responsive. Suggestions that the authors tell for Section
of Statistics, Data Management and Information System Integration is to
collaborate with other parties and socialize SI BANDOT to the public so the
objectives of SI BANDOT can be realized properly.
Keywords : Angular Framework, Bootstrap, HTML, Information System

vi
DAFTAR ISI
HALAMAN COVER ............................................................................................... i

HALAMAN PENGESAHAN ................................................................................. ii
KATA PENGANTAR ........................................................................................... iii
ABSTRAK ............................................................................................................. iv
ABSTRACT .............................................................................................................. v
DAFTAR ISI .......................................................................................................... vi
DAFTAR GAMBAR ............................................................................................ vii
DAFTAR LAMPIRAN ........................................................................................ viii
BAB I PENDAHULUAN ....................................................................................... 1
A. Latar Belakang .......................................................................................... 1
B. Tujuan ....................................................................................................... 2
C. Ruang Lingkup.......................................................................................... 3
D. Aspek Umum Kelembagaan ..................................................................... 3
1. Sejarah Berdirinya Dinas Komunikasi Dan Informatika Kabupaten
Banyumas .................................................................................................. 3
2. Struktur Organisasi Dinas Komunikasi dan Informatika Kabupaten
Banyumas .................................................................................................. 5
3. Visi Misi Dinas Komunikasi Dan Informatika Kabupaten Banyumas ..... 5
E. Metode Penulisan Laporan ....................................................................... 6
F. Sistematika Penulisan Laporan ................................................................. 7
BAB II LANDASAN TEORI ................................................................................. 8
A. Sistem Informasi ....................................................................................... 8
B. Framework Angular .................................................................................. 8
C. Bootstrap ................................................................................................. 10
D. Hypertext Markup Language (HTML) ................................................... 11
E. Cascading Style Sheet (CSS) .................................................................. 12
F. Javascript................................................................................................. 14
BAB III ANALISAN DAN PEMBAHASAN ...................................................... 15
A. Pekerjaan/ Kegiatan ................................................................................ 15
B. Analisis dan Pembahasan Hasil Pekerjaan ............................................. 16
BAB IV PENUTUP .............................................................................................. 42
A. Kesimpulan ............................................................................................. 42
B. Saran ....................................................................................................... 42
DAFTAR PUSTAKA ........................................................................................... 44
LAMPIRAN .......................................................................................................... 45
vii
DAFTAR GAMBAR
Gambar 1. 1 Struktur Anggota Diskominfo Kabupaten Banyumas ........................ 5

Gambar 2. 1 Contoh rule CSS dengan Style External ...........................................13
Gambar 3. 1 Microsoft Visual Code Studio ...........................................................16
Gambar 3. 2 File index.html .................................................................................. 18
Gambar 3. 3 File app.module.ts Bagian Import .................................................... 19
Gambar 3. 4 File app.module.ts Bagian NgModule .............................................. 19
Gambar 3. 5 File.header.components.ts................................................................ 19
Gambar 3. 6 File header.component.html Bagian Dropdown .............................. 20
Gambar 3. 7 File header.component.html Bagian Collapse ................................. 20
Gambar 3. 8 Tampilan Halaman Peta ................................................................... 22
Gambar 3. 9 Konfigurasi @NgModule pada app.module.ts ................................. 22
Gambar 3. 10 Konfigurasi file peta.component.ts................................................. 23
Gambar 3. 11 Source Code file peta.component.html ........................................... 23
Gambar 3. 12 File peta.component.css ................................................................. 24
Gambar 3. 13 Tampilan Halaman Potensi ............................................................ 25
Gambar 3. 14 File potensi.component.html .......................................................... 25
Gambar 3. 15 File potensi.component.css ............................................................ 26
Gambar 3. 16 File potensi-item.component.html .................................................. 26
Gambar 3. 17 File potensi-item.component.css .................................................... 27
Gambar 3. 18 Tampilan Halaman Datasets........................................................... 28
Gambar 3. 19 File dataset.component.html .......................................................... 28
Gambar 3. 20 File dataset-cari.component.html .................................................. 29
Gambar 3. 21 File dataset-list.component.html .................................................... 29
Gambar 3. 22 File dataset-list.component.css ...................................................... 30
Gambar 3. 23 Tampilan Halaman Detail Dataset - Tabel ..................................... 30
Gambar 3. 24 File dataset-tabel.component.html ................................................. 31
Gambar 3. 25 File dataset-tabel.component.html (Lanjutan) ............................... 32
Gambar 3. 26 File dataset-tabel.component.html (Lanjutan) ............................... 32
Gambar 3. 27 File dataset-tabel.component.css ................................................... 33
Gambar 3. 28 Tampilan Halaman Detail Dataset - Grafik.................................... 33
Gambar 3. 29 File dataset-grafik.component.html ............................................... 34
Gambar 3. 30 File dataset-grafik.component.html (Lanjutan) ............................. 35
Gambar 3. 31 File index.html Bagian Header ...................................................... 35
Gambar 3. 32 File index.html Bagian Grafik ........................................................ 36
Gambar 3. 33 File index.html Bagian Grafik (Lanjutan) ...................................... 37
Gambar 3. 34 File index.html Bagian Grafik (Lanjutan) ...................................... 38
Gambar 3. 35 File app.module.ts .......................................................................... 38
Gambar 3. 36 File app.module.ts Bagian appRoutes ............................................ 39
Gambar 3. 37 File app.module.ts Bagian @NgModule ........................................ 39
Gambar 3. 38 File header.component.html ........................................................... 40
Gambar 3. 39 Evaluasi Hasil Pekerjaan ................................................................ 41
viii
DAFTAR LAMPIRAN
Lampiran 1. Form Penilaian.................................................................................. 45

Lampiran 2. Form Kegiatan Harian PKL/ KP ...................................................... 47
Lampiran 3. Plagiarisme ....................................................................................... 58
Lampiran 4. Daftar Hadir Presentasi PKL ............................................................ 59
Laporan Praktik Kerja/ Kerja Praktik 1
BAB I
BAB I
PENDAHULUAN
A. Latar Belakang
Perkembangan teknologi informasi saat ini terus mengalami peningkatan
seiring dengan kebutuhan masyarakat yang tinggi terhadap teknologi informasi.
Teknologi informasi sudah menjadi bagian dari manusia untuk mendukung dalam
mencari suatu informasi. Meningkatnya kebutuhan akan akses informasi yang
dituntut masyarakat didukung pula dengan adanya media online sebagai media
yang praktis, cepat, dan efisien demi memenuhi kebutuhan masyarakat akan
informasi [1].
Hal ini dibuktikan dengan hasil survei dari Asosiasi Penyelenggara Jasa
Internet Indonesia (APJII) pada tahun 2018 menyebutkan bahwa 64,8% atau
sebanyak 171,17 juta jiwa merupakan pengguna internet di Indonesia. Pulau Jawa
merupakan kontribusi pengguna internet terbanyak dari seluruh pengguna internet
di Indonesia, yaitu sebesar 55,7% [2]. Maka tidak bisa dipungkiri bahwa
perkembangan teknologi informasi pada pulau Jawa sangat pesat dibandingkan
dengan lainnya. Tingginya pengguna internet di Indonesia berdampak kepada
kualitas penyajian informasi pada internet, salah satunya dengan melalui media
berbentuk sebuah situs.
Kualitas suatu situs dalam menyajikan informasi baik dari segi
antarmuka pengguna dan fungsionalitas merupakan faktor terpenting untuk
kepuasan penggunanya. Sistem Informasi Banyumas dalam Open Data “SI
BANDOT” merupakan situs yang dikembangkan oleh Pemerintah Kabupaten
Banyumas melalui Dinas Komunikasi dan Informatika Kabupaten Banyumas
sebagai situs portal data terbuka Pemerintah Kabupaten Banyumas yang
menyajikan dari seluruh Organisasi Pemerintah Daerah (OPD), instansi vertikal,
BUMD dan organisasi lainnya di Kabupaten Banyumas. Tujuannya adalah dapat
menyajikan data dan informasi yang dibutuhkan oleh masyarakat serta memenuhi
hak publik sebagai penerapan keterbukaan informasi publik dalam rangka
mewujudkan tata kelola pemerintahan yang transparan dan akuntabel. Namun SI
Prodi IF-IT TELKOM Purwokerto NIM 16102143

BAB I
BANDOT masih dalam tahap pengembangan sehingga masih terdapat beberapa

kekurangan diantaranya adalah desain antarmuka pengguna yang masih sederhana
dan fitur-fitur yang kurang informatif. Hal tersebut merupakan hambatan bagi
situs SI BANDOT untuk mewujudkan tujuannya secara maksimal.
Berdasarkan permasalahan tersebut, perlu adanya langkah untuk
meningkatkan potensi dari situs SI BANDOT sehingga tujuan daripada SI
BANDOT dapat tercapai secara maksimal. Langkah tersebut adalah dengan
melakukan perbaikan desain antarmuka pengguna SI BANDOT. Perbaikan ini
meliputi membuat desain antarmuka pengguna yang baru dan informatif sehingga
memudahkan pengguna ketika menggunakan SI BANDOT. Tahapan dalam
melakukan perbaikan desain antarmuka pengguna SI BANDOT adalah dengan
membuat desain mockup terlebih dahulu, kemudian diimplementasikan dalam
halaman situs dengan menggunakan framework Angular. Pengguna framework
Angular dipilih karena situs SI BANDOT dikembangkan dengan framework
Angular. Perbaikan desain antarmuka pengguna ini diharapkan sebagai langkah
untuk memaksimalkan tujuan dari SI BANDOT, yaitu sebagai portal data terbuka
Pemerintah Kabupaten Banyumas bagi masyarakat yang membutuhkan dan
mewujudkan tata kelola pemerintahan yang transparan dan akuntabel.
B. Tujuan
Tujuan dilakukannya perbaikan antarmuka pengguna pada situs SI
BANDOT (Sistem Informasi Banyumas Dalam Open Data) adalah meningkatkan
User Experience dalam menggunakan SI BANDOT, yaitu pengguna dapat lebih
nyaman terhadap tampilan antarmuka dan kemudahan untuk mengakses SI
BANDOT. Selain itu tujuan lainnya adalah meningkatkan Usability dari SI
BANDOT, yaitu pengguna dapat lebih mudah untuk mempelajari fitur-fitur yang
tersedia pada SI BANDOT, sehingga tujuan dari SI BANDOT dapat tercapai
secara lebih efektif dan efisien sebagai portal data terbuka Pemerintah Kabupaten
Banyumas bagi masyarakat yang membutuhkannya.

BAB I
C. Ruang Lingkup
Pelaksanaan praktik kerja lapangan di Dinkominfo Kabupaten
Banyumas, penulis ditempatkan di bagian Seksi Statistik, Pengelolaan Data dan
Integrasi Sistem Informasi yang dikepalai oleh Bapak Eko Purwanto, S.E yang
berada dibawah naungan Bidang Sandi, Teknologi, Informasi dan Komunikasi.
Bagian Seksi tersebut memiliki tugas yaitu menyiapkan bahan perumusan
kebijakan, mengkoordinasikan, melaksanakan pembinaan dan fasilitasi,
monitoring, evaluasi dan pelaporan meliputi kegiatan statistik, layanan
manajemen data dan informasi e-government, serta fungsi integrasi layanan publik
dan kepemerintahan di Kabupaten Banyumas. (Perbup)
Tugas yang diberikan kepada kelompok penulis selama melakukan
praktik kerja lapangan adalah memperbaiki antarmuka pengguna pada situs SI
BANDOT (Sistem Informasi Banyumas Dalam Open Data), yaitu dengan
merancang mockup desain antarmuka pengguna yang baru dan melakukan
implementasi antarmuka pengguna baru dengan menggunakan framework
Angular. Situs SI BANDOT merupakan sistem informasi yang diciptakan oleh
Seksi Statistik, Pengelolaan Data dan Integrasi Sistem Informasi sebagai portal
data terbuka Pemerintah Kabupaten Banyumas. Dalam pelaksanaan tugas yang
diberikan, penulis memiliki tugas mengerjakan bagian implementasi tampilan
antarmuka pengguna baru (front end) dan melakukan konfigurasi dalam
implementasi antarmuka pengguna baru pada framework Angular (back end).
D. Aspek Umum Kelembagaan
1. Sejarah Berdirinya Dinas Komunikasi Dan Informatika Kabupaten

Banyumas
Perubahan Struktur dan Fungsi Organisasi Dinas Komunikasi dan
Informatika di Kabupaten Banyumas saat ini tentu tak lepas dari sejarah awal
berdirinya Departemen Penerangan, sebagai cikal bakal fungsi Komunikasi dan
informasi pemerintah di Indonesia. Departemen Penerangan banyak mengatur dan
membina pers, media massa, televisi, film, radio, grafika, percetakan dan
penerangan umum.

BAB I
Pada tahun 1999, Departemen Penerangan dibubarkan untuk efisiensi dan

perampingan kabinet pemerintahan, sekaligus dalam rangka implementasi
sepenuhnya UU No. 22/1999 tentang Otonomi Daerah. Melalui Peraturan Daerah
Kabupaten Banyumas Nomor 23 Tahun 2000 Tentang Pembentukan Susunan
Organisasi dan Tata Kerja Daerah Kabupaten Banyumas Fungsi Departemen
Penerangan digabung dengan Kantor Pengelolahan Data Elektronik (KPDE)
menjadi Kantor Data Informasi dan Komunikasi (KDIK). Perubahan nomenklatur
struktur oeganisasi dan tata tugas KDIK tak lama kemudian berubah menjadi
Badan Arsip Informasi dan Kehumasan (BAIK). Kemudian Pada Tangggal 31
mei 2004 di tetapkan Peraturan Daerah Nomor 9 Tahun 2004 tentang
Pembentukan Susunan Organisasi dan Tata kerja Badan Penelitian
Pengembangan, Telematika dan ArsiP Daerah (BALITBANGTELARDA)
Kabupaten Banyumas. Perubahan Struktru Organisasi Kembali mengalami
Perubahan menjadi Dinas Perhubungan, Komunikasi dan Informatika
(DINHUBKOMINFO) yang diatur dalam Peraturan Daerah nomor 26 Tahun
2009. Selanjutnya Perubahan struktur Orgainisasi Perangkat Daerah sampai
dengan saat ini berubah Menjadi Dinas Komunikasi dan Informatika
(DINKOMINFO) Kabupaten Banyumas yang diatur melalui Peraturan Daerah
Kabupaten Banyumas Nomor : 16 Tahun 2016 tentang Pembentukan dan Susunan
Organisasi Perangkat Daerah Kabupaten Banyumas, Juncto Peraturan Bupati
Nomor 68 Tahun 2016 tentang Kedudukan, Susunan Organisasi, Tugas dan
Fungsi serta Tata Kerja Dinas Komunikasi dan Informatika Kabupaten Banyumas.
Dinkominfo Kabupaten Banyumas saat ini mempunyai tugas membantu
Bupati dalam melaksanakan urusan pemerintahan Bidang Komunikasi dan
Informatika, Bidang Informasi dan Komunikasi Publik, Bidang e-Government,
dan Bidang Sandi, Teknologi Informasi dan Komunikasi yang merupakan
Kewenangan Daerah dan tugas pembantuan yang diberikan kepada Daerah [3].

BAB I
2. Struktur Organisasi Dinas Komunikasi dan Informatika Kabupaten

Banyumas
Struktur organisasi dalam Dinkominfo terbagi menjadi beberapa bagian
sebagai bagan berikut:
Gambar 1. 1 Struktur Anggota Diskominfo Kabupaten Banyumas
3. Visi Misi Dinas Komunikasi Dan Informatika Kabupaten Banyumas

a. Visi
Visi dari Dinas Komunikasi dan Informatika Kabupaten Banyumas
adalah “Terwujudnya Penyelenggaraan Pemerintah Kabupaten Banyumas yang
Berbasis Teknologi Informasi dan Komunikasi”.
b. Misi
Sedangkan misi dari Dinas Komunikasi dan Informatika Kabupaten
Banyumas adalah sebagai berikut:

BAB I
a) Meningkatkan penyelenggaraan e-government di Kabupaten Banyumas.

b) Meningkatkan kualitas SDM Aparatur Bidang Teknologi Informasi dan
Komunikasi
c) Meningkatkan pengelolaan data dan layanan informasi publik.
d) Mendorong peran masyarakat untuk memanfaatkan Teknologi Informasi dan
Komunikasi.
e) Mendorong pembentukan kelompok masyarakat informasi.
E. Metode Penulisan Laporan

Penulisan Laporan Praktik Kerja Lapangan ini menggunakan metode
studi pustaka, observasi, dan wawancara. terhadap tempat penulis melakukan
Praktik Kerja Lapangan. Studi pustaka bertujuan untuk mengumpulkan data dan
informasi mengenai tempat Praktik Kerja Lapangan dan proyek pekerjaan yang
dilakukan selama melaksanakan Praktik Kerja Lapangan. Studi pustaka dilakukan
dengan cara membaca dan memahami profil mengenai Dinas Komunikasi dan
Informatika Kabupaten Banyumas yang terdapat pada situsnya serta Peraturan
Bupati Banyumas Nomor 6 Tahun 2016 tentang Kedudukan, Susunan Organisasi,
Tugas dan Fungsi serta Tata Kerja Dinas Komunikasi dan Informatika Kabupaten
Banyumas. Selain itu studi pustaka juga dilakukan dengan mencari referensi di
internet untuk mendukung dalam menyelesaikan proyek pekerjaan selama Praktik
Kerja Lapangan.
Observasi dilakukan untuk mengetahui keadaan pada tempat Praktik
Kerja Lapangan yaitu Dinas Komunikasi dan Informatika Kabupaten Banyumas
itu sendiri serta untuk menganalisis situs SI BANDOT sebagai acuan dalam
menyelesaikan proyek pekerjaan selama melakukan Praktik Kerja Lapangan.
Wawancara dilakukan anggota Seksi Statistik, Pengelolaan Data dan Integrasi
Sistem Informasi untuk mengetahui kebutuhan dari perbaikan desain antarmuka
pada situs SI BANDOT. Sehingga hasil dari perbaikan desain antarmuka situs SI
BANDOT sesuai dengan kebutuhan.

BAB I
F. Sistematika Penulisan Laporan

Penulisan laporan Praktik Kerja Lapangan ini dibagi menjadi tiga bagian,
diantaranya adalah sebagai berikut:
BAB I PENDAHULUAN
Bab ini berisi mengenai gambaran umum penyusunan laporan praktik
kerja lapangan yang meliputi, latar belakang penulisan, tujuan penulisan, ruang
lingkup praktik kerja lapangan, aspek umum dan kelembagaan pada Dinas
Komunikasi dan Informatika Kabupaten Banyumas.
BAB II LANDASAN TEORI
Bab ini berisi mengenai landasan teori yang dijadikan acuan dalam
melakukan pekerjaan selama masa praktik kerja lapangan.
BAB III ANALISA DAN PEMBAHASAN
Bab ini berisi mengenai hasil analisa dan pembahasan dari pekerjaan
secara umum dan pekerjaan khusus yang dilakukan selama masa praktik kerja
lapangan.
BAB IV PENUTUP
Bab ini berisi mengenai hasil kesimpulan dari pekerjaan yang dilakukan
dan saran berdasarkan hasil pekerjaan selama masa praktik kerja lapangan untuk
perbaikan kedepannya.

Laporan Praktik Kerja/ Kerja Praktik
8
BAB II
BAB II
LANDASAN TEORI
A. Sistem Informasi
Sistem Informasi adalah suatu sistem didalam suatu organisasi yang
mempertemukan kebuuhan pengelolaan transaksi harian, mendukung operasi,
bersifat manajerial, dan kegiatan strategi dari suatu organisasi dan menyediakan
pihak luar tertentu dengan laporan-laporan yang dibutuhkan [4]. Sistem informasi
dengan kata lain merupakan sekumpulan komponen yang saling berhubungan,
mengumpulkan, memproses, menyimpan, dan mendistribusikan informasi untuk
menunjang pengambilan keputusan dan pengawasan suatu organisasi [5].
Sistem informasi memuat berbagai informasi penting mengenai berbagai
hal seperti orang, tempat, dan segala sesuatu yang ada di dalam atau di lingkungan
sekitar organisasi. Informasi sendiri mengandung suatu arti mengenai data yang
telah diolah ke dalam suatu bentuk yang lebih memiliki arti dan dapat
dimanfaatkan untuk pengambilan keputusan.
Sistem informasi mengandung tiga aktivitas dasar di dalamnya, yaitu
aktivitas masukan (input), pemrosesan (processing), dan keluaran (output). Tiga
aktivitas dasar ini menghasilkan informasi yang dibutuhkan organisasi untuk
pengambilan keputusan, pengendalian operasi, analisis permasalahan, dan
menciptakan produk atau jasa baru. Masukan berperan di dalam pengumpulan
bahan mentah (raw data), baik yang diperoleh dari dalam maupun dari lingkungan
sekitar organisasi. Pemrosesan berperan untuk mengkonversi bahan mentah
menjadi bentuk yang lebih memiliki arti. Sedangkan keluaran dimaksudkan untuk
mentransfer informasi yang diproses kepada pihak-pihak atau aktivitas yang akan
menggunakan. Sistem informasi juga membutuhkan umpan balik (feedback)
untuk dasar evaluasi dan perbaikan ditahap selanjutnya [6].
B. Framework Angular
Angular adalah sebuah platform untuk mengembangkan front-end dari
sebuah aplikasi web yang berbasis open source. Platform ini dikembangkan oleh

9
BAB II
tim Google dan komunitas open source Angular. Platform ini menggunakan
bahasa Typescript, sebuah pengembangan dari bahasa Javascropt yang merupakan
bahasa utama yang digunakan untuk web development. Angular sendiri
merupakan platform yang dibangun untuk meningkatkan performa dari
AngularJS. Platform ini sering disebut juga dengan Angular 2 atau Angular 2+.
Platform ini seringkali digunakan untuk membangun single page
application (SPA). Penggunaan dari SPA ini berarti bahwa segala komponen yang
akan digunakan dalam aplikasi web tersebut akan di-load dalam browser terlebih
dahulu agar user tidak perlu melakukan page load ketika membuka halaman baru.
Seringkali SPA ini berupa bundle dari kode Javascript yang dibuka oleh browser
secara bersamaan.
Terdapat beberapa fitur dari Angular yang membuatnya menjadi salah
satu platform yang paling banyak digunakan dalam pengembangan aplikasi web,
antara lain sebagai berikut:
1. Modularitas
Framework Angular menyediakan konsep bahwa komponen-komponen
yang dibangun dalam Angular dapat dengan mudah digunakan kembali
dalam komponen lainnya tanpa perlu melakukan coding dari awal.
Modularitas berarti, komponen-komponen umum seperti card, toolbar,
navbar, dan container dapat dibangun sekali dan digunakan berkali-kali
dalam komponen tersebut.
2. Object Oriented Programming
Penggunaan Typescript memberikan kemampuan bagi developer untuk
menerapkan konsep object oriented programming (OOP). Itu berarti,
komponen dalam Angular dapat dikembangkan dengan menerapkan
prinsip class dan object. Hal ini mempermudah developer untuk
mengembangkan kode dan lebih menyesuaikan dengan paradigma
programming yang diterapkan pada bahasa pemrograman seperti Java atau
C#.
3. Reactive Programming

10
BAB II
Dalam web programming, terkadang hasil response dari server muncul

secara asynchronous. Agar experience user tetap terjaga dengan baik,
maka developer tidak dapat selalu menggunakan kode yang dijalankan
secara berurutan. Developer juga harus memiliki kode yang memiliki
kemampuan untuk berjalan secara asynchronous. Hal ini dapat dibuat
dengan menggunakan tools bernama reactive Javascript (RxJS), yang
merupakan salah satu fitur yang dapat digunakan dalam Angular. Pada
RxJS, observable digunakan untuk menampung perubahan-perubahan
yang terjadi secara asynchronous agar kode dapat berjalan walaupun
aplikasi masih melakukan fetch request kepada server [7].
C. Bootstrap
Bootstrap adalah framework front-end yang intuitif dan powerful untuk
pengembangan aplikasi web yang lebih cepat dan mudah. Bootstrap menggunakan
HTML, CSS, dan Javascript. Bootstrap dikembangkan oleh Mark Otto dan Jacob
Thotnton dari Twitter. Framework ini diluncurkan sebagai produk open source
pada Agustus 2011 di Github.
Bootstrap memiliki fitur-fitur komponen interface yang bagus seperti
Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals,
Tabs, Accordion, Carousel, dan lain sebagainya. Dengan menggunakan Bootstrap,
developer dapat membuat layout situs yang responsif dengan mudah. Berikut
adalah kelebihan yang dimiliki oleh Bootstrap, diantaranya:
1. Menghemat waktu, dengan menggunakan berbagai desain template dan
kelas yang sudah ada dalam Bootstrap dapat menghemat waktu.
2. Fitur yang responsif, dengan menggunakan Bootstrap dapat dengan mudah
membuat desain yang responsif. Fitur-fitur ini akan membuat halaman web
akan tampil responsif pada perangkat yang berbeda tanpa perlu adanya
perubahan kode markup.
3. Desain yang konsisten, semua komponen Bootstrap mempunyai desain
template dan style yang sama sehingga membuat tampilan web menjadi
konsisten.

11
BAB II
4. Mudah digunakan, Bootstrap sangat mudah digunakan karena hanya

dengan memanggil kelas pada halaman HTML-nya untuk membuat suatu
layout.
5. Didukung oleh semua browser popular, Bootstrap dapat digunakan pada
semua browser modern seperti Mozilla Firefox, Google Chrome, Safari,
Internet Explorer, dan Opera [8].
D. Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk
menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang
bebas, artinya tidak dimiliki oleh siapa pun, pengembangannya dilakukan oleh
banyak orang di banyak negara dan bisa dikatan sebagai sebuah bahasa yang
dikembangkan bersama-sama secara global. HTML adalah bahasa yang mengatur
bagaimana tampilan isi dari situs, didalam HTML ada tag-tag dimana tag
berfungsi menyediakan informasi berkaitan dengan sifat dan struktur konten serta
referensi untuk gambar dan media lainnya [9].
HTML4 atau yang biasa disebut HTML merupakan versi HTML yang
dirilis pada tahun 1999 dan versi terbarunya, yaitu HTML5 diperkenalkan pada
publik ditahun 2014. Versi terbaru ini menambahkan lebih banyak fitur baru ke
bahasa markup ini. Salah satu fitur canggih di HTML5 adalah support untuk
embed audio dan video dengan memanfaatkan tag <audio></audio> dan
<video></video>. Fitur tersebut juga memiliki dukungan bawaan untuk grafis
vektor (SVG) yang dapat diskalakan dan MathML untuk formula matematika dan
ilmiah. Selain itu HTML5 juga memperkenalkan beberapa perbaikan pada
semantic. Tag semantic baru mengirimkan informasi pada browser tentang arti
konten, yang bermanfaat bagi pembaca dan mesin pencari.
Dokumen HTML adalah file yang diakhiri dengan ektensi .html atau
.htm. Ekstensi file ini bisa dilihat dengan menggunakan browser apapun. Browser
tersebut membaca file HTML dan melakukan render isi dari file tersebut sehingga
pengguna internet dapat melihat dan membacanya. Rata-rata situs menyertakan
sejumlah halaman HTML yang berbeda-beda seperti halaman beranda, halaman

12
BAB II
kontak yang semuanya memiliki dokumen HTML terpisah. Masing-masing

halaman HTML terdiri atas seperangkat tags atau elements yang mengacu pada
building block halaman situs. Tag tersebut membuat hirarki yang menyusun
konten hingga menjadi bagian, paragraf, heading, dan blok konten lainnya [10].
E. Cascading Style Sheet (CSS)

Cascading Style Sheet atau CSS adalah sebuah dokumen yang berisi
aturan yang digunakan untuk memisahkan isi dengan layout dalam halaman-
halaman web yang dibuat. CSS memperkenalkan “template” yang berupa style
untuk dibuat dan mengizinkan penulisan kode yang lebih mudah dari halaman-
halaman web yang dirancang. CSS mampu menciptakan halaman yang tampak
sama pada resolusi layar yang berbeda dari pengunjung berbeda tanpa
memerlukan penggunaan tabel seperti pada HTML klasik (Budi Kurniawan).
CSS dibuat dan dikembangkan oleh W3C (Word Wide Web Consortium)
pada tahun 1996 untuk alasan yang sederhana, yaitu HTML tidak dilengkapi
dengan tags yang berfungsi untuk memformat halaman. HTML dan CSS memiliki
keteritakan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan
CSS memperbaiki style untuk semua aspek yang terkait dengan tampilan situs.
Penggunaan CSS pada suatu situs dibagi menjadi tigas jenis, diantaranya adalah:
1. Internal
CSS dengan style Internal akan dimuat setiap kali situs melakukan refresh
sehingga menyebabkan waktu memuat semakin lama. CSS dengan style
yang sama tidak dapat digunakan di halaman lain karena sudah aktif
terlebih dahulu disuatu halaman. Namun CSS style ini memiliki
kemudahan dalam sharing template untuk pratinjau karena CSS hanya ada
di satu halaman.
2. External
CSS dengan style External merupakan CSS style yang paling mudah dan
tidak menyulitkan karena semuanya dilakukan pada file berformat .css.
Sehingga styling dilakukan di file terpisah dari HTML dan dapat

13
BAB II
diterapkan ke halaman HTML manapun yang dibutuhkan. Namun CSS

style ini memperlama waktu memuat.
3. Inline
CSS dengan style Inline merupakan CSS style yang digunakan untuk tag
HTML tertentu dengan menambahkan selector <style> di dalamnya.
Karena setiap tag harus disesuaikan style-nya, maka CSS Inline bukan
metode yang tepat jika banyak tag yang disesuaikan style-nya pada suatu
halaman HTML, sebab akan menyulitkan dan memboroskan waktu [11].
CSS menggunakan bahasa Inggris sederhana berbasis sintaks yang
dilengkapi dengan sekumpulan rule yang mengaturnya. Tiap style memiliki dua
buah elemen dasar, yaitu “selector” dan “declaration”. Sebuah selector biasanya
adalah tag HTML, sementara declaration adalah satu atau beberapa perintah/nilai
dari CSS yang menunjukkan tipe bentuk yang diaplikasikan pada selector.
Declaration ini biasanya ditandai dengan kurung kurawal “{ }
, dan perintah atau nilai CSS yang berbeda dipisahkan satu dengan yang lain
dengan menggunakan titik koma “;”.
Gambar 2. 1 Contoh rule CSS dengan Style External.
Selector-selector dan style dalam CSS akan dimasukkan dalam sebuah

tempat yang sama dalam isi dokumen HTML atau dibuat diluar dokumen HTML
yang nantinya akan dipanggil untuk menentukan isi tampilan dokumen HTML
[12].

14
BAB II
F. Javascript
Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada
fungsinya berjalan pada suatu dokumen HTML yang merupakan bahasa skrip
pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan
kemampuan tambahan terhadap bahasa HTML dengan mengijinkan
pengeksekusian perintah-perintah di sisi pengguna, yang artinya di sisi browser
buka di sisi server web. Javascript diperkenalkan pertama kali oleh Netscape pada
tahun 1995 yang awalnya dinamakan “LiveScript”.
Javascript bergantung kepada browser (navigator) yang memanggil
halaman web yang berisi skrip dari Javascript dan terselip di dalam dokumen
HTML. Javascript juga tidak memerluka kompilator atau penerjemah khusus
untuk menjalankannya karena kompilator Javascript sudah termasuk di dalam
browser [13].
Program Javascript digunakan untuk mendeteksi dan beraksi terhadap
event-event yang disebabkan oleh pengguna. Developer dapat memperbaiki situs
dengan bantuan navigasional, kotak dialog, citra dinamis, dan lainnya. Javascript
dapat digunakan untuk mengendalikan halaman, memvalidasi apa yang diketikkan
pengguna ke dalam sebuah form sebelum pengiriman form ke server dilakukan.
Javascript berperan sebagai bahasa pemrograman yang memiliki konstruksi-
konstruksi dasar seperti variabel dan tipe data, look control, statement if/else,
statement switch, fungsi, dan objek. Javascript dapat digunakan juga untuk
perhitungan aritmatik, pemanipulasian tanggal dan waktu, pemodifikasian array,
string dan objek. Kemudian Javascript juga dapat menangani event yang
diinisialisasi pengguna, dan menetapkan pewaktu.
Kombinasi dari HTML, CSS, dan Javascript dapat menghasilkan
halaman situs yang terstruktur, bergaya, dan interaktif. Sehingga developer web
sepakat bahwa ketiga bahasa pemrograman tersebut merupakan bagian penting
dari sebuah halaman web [14].

15
BAB III
BAB III
ANALISA DAN PEMBAHASAN
A. Pekerjaan/ Kegiatan
Kegiatan praktik kerja lapangan berlangsung kurang lebih selama satu
bulan yang terhitung sejak tanggal 1 Agustus 2019 sampai dengan 30 Agustus
2019. Praktik kerja lapangan dilaksanakan di Kantor Dinas Komunikasi dan
Informatika Kabupaten Banyumas yang beralamatkan di Jalan Kolonel Sugiono
No.17 Purwokerto dan ditempatkan di bagian Seksi Statistik, Pengelolaan Data
dan Integrasi Sistem Informasi. Pelaksanaan praktik kerja lapangan di kantor
tersebut dimulai dari pukul 07:30 WIB sampai dengan 15:30 WIB selama lima
hari kerja, yaitu Senin sampai dengan Jumat.
Seksi Statistik, Pengelolaan Data dan Integrasi Sistem Informasi
memiliki tugas yaitu menyiapkan bahan perumusan kebijakan,
mengkoordinasikan, melaksanakan pembinaan dan fasilitasi, monitoring, evaluasi
dan pelaporan meliputi kegiatan statistik, layanan manajemen data dan informasi
e-government, serta fungsi integrasi layanan publik dan kepemerintahan di
Kabupaten Banyumas. Salah satu produk digital dari seksi ini adalah situs Sistem
Informasi Banyumas Dalam Open Data (SI BANDOT) sebagai Portal Data
Terbuka Pemerintah Kabupaten Banyumas yang menyajikan data-data dari
seluruh OPD, Instansi Vertikal, BUMD dan Organisasi Lainnya di Kabupaten
Banyumas. Diharapkan situs ini dapat membantu kepada penelitiNamun situs SI
BANDOT masih dalam tahap pengembangan sehingga masih terdapat perbaikan
didalamnya, salah satunya adalah tampilan antarmuka situs yang masih sederhana.
Pada proyek ini, kelompok penulis diberikan tugas untuk memperbaiki
antarmuka SI BANDOT yang sudah ada dengan menggunakan framework
Angular. Selain itu juga berikan tugas untuk menambah rancangan tampilan untuk
fitur baru pada situs SI BANDOT, yaitu fitur mengenai potensi yang di
kategorikan menjadi beberapa jenis yang terdapat di Kabupaten Banyumas. Fitur
tersebut rencananya akan di implementasikan kedepannya oleh Seksi Statistik,
Pengelolaan Data dan Integrasi Sistem Informasi.

16
BAB III
Dalam pengerjaan proyek ini, kelompok penulis terdiri dari 4 orang

dimana memiliki tugas yang berbeda-beda. Penulis mendapatkan tugas untuk
melakukan implementasi desain mockup antarmuka pengguna kedalam bentuk
HTML menggunakan framework Angular (front-end) dan melakukan konfigurasi
dalam framework Angular (back end).
B. Analisis dan Pembahasan Hasil Pekerjaan

Proses perbaikan antarmuka pengguna SI BANDOT dibagi menjadi
beberapa tahap. Tahap pertama yaitu mengumpulkan informasi yang diperlukan
untuk melakukan perbaikan antarmuka pengguna, salah satunya adalah
wawancara terhadap salah satu staf Seksi Statistik, Pengelolaan Data dan Integrasi
Sistem Informasi mengenai kebutuhan perbaikan antarmuka pengguna SI
BANDOT. Dari wawancara tersebut, tahap selanjutnya adalah membuat desain
mockup sebagai acuan dalam mengimplementasikan desain antarmuka pengguna
dalam format HTML (front end).
Setelah desain mockup sudah dibuat dan disetujui, maka tahap
selanjutnya adalah mengimplementasikan desain mockup tersebut kedalam format
HTML dengan menggunakan framework Angular dan Bootstrap sebagai
framework CSS. Dalam melakukan implementasi desain antarmuka pengguna ini,
penulis menggunakan tools Microsoft Visual Code Studio.
Gambar 3. 1 Microsoft Visual Code Studio

17
BAB III
Untuk membuat sebuah situs pada Angular diperlukan instalasi nodejs

terlebih dahulu. Setelah itu baru melakukan instalasi Angular pada Command
Prompt dengan memasukkan perintah npm install –g @angular/cli. Kemudian
untuk membuat situs baru pada angular dapat memasukkan perintah ng new
namaproject. Pada bagian ini, dibuat sebuah proyek aplikasi situs dengan nama
sibandot dan dilakukan oleh rekan penulis.
Langkah selanjutnya adalah membuat komponen untuk menyesuaikan
kebutuhan desain pada mockup yang sudah dibuat. Komponen pada Angular
merupakan building block pada suatu Angular, yaitu dimana konten dari aplikasi
diletakkan. Sehingga dalam melakukan coding pada Angular akan menjadi lebih
rapi dan terstruktur serta mudah ketika melakukan troubleshooting. Untuk
membuat sebuah komponen pada Angular dapat dilakukan dengan memasukkan
perintah ng generate component namacomponent. Selain itu, untuk melakukan
compile dan menjalankan proyek pada Angular dapat memasukkan perintah ng
serve pada Command Prompt. Pada pembuatan komponen di proyek situs ini
dilakukan oleh rekan penulis yang menghasilkan 7 komponen diantaranya:
dataset; footer; header; home; peta; potensi; dan statistik, dimana setiap
komponen memiliki sub komponen lainnya.
Setelah komponen yang dibutuhkan sudah dibuat, maka selanjutnya
adalah melakukan implementasi tampilan sesuai dengan desain mockup kedalam
proyek situs di Angular. Pada bagian ini penulis mengerjakan bagian tampilan
menu Peta, Potensi, Datasets (front end) dan melakukan konfigurasi pada situs
seperti melakukan routing, menambah module dan dependency pada Angular
(back end).
1. Konfigurasi CSS Proyek Angular

Framework CSS Bootstrap tidak mendukung sepenuhnya pada
Framework Angular, diantaranya adalah tidak mendukungnya fitur jQuery untuk
mengaktifkan menu dropdown pada menu Statistik di proyek ini dan fitur collapse
ketika proyek situs ini diakses dengan mode mobile. Sebenarnya sudah disediakan
Bootstrap oleh Angular yang dirancang khusus untuk Angular dengan nama Ng-
Bootstrap. Ng-Bootstrap mendukung fitur sepenuhnya untuk mendesain situs

18
BAB III
dengan bantuan framework CSS Bootstrap. Namun, karena penggunaan Ng-

Bootstrap sedikit rumit, maka dalam proyek ini, penulis menggunakan dua
framework CSS, yakni Bootstrap dan Ng-Bootstrap.
Bootstrap digunakan dalam proyek ini untuk mendesain tampilan situs SI
BANDOT agar menciptakan desain situs yang responsif. Penggunaan Bootstrap
dilakukan dengan cara mencantumkan alamat URL Bootstrap Content Delivery
Network (CDN).
Gambar 3. 2 File index.html
Penggunaan Bootstrap tertera di baris 12 didalam file index.html seperti

pada gambar 3.2. Hal ini dikarenakan setiap membuka halaman HTML pada
Angular akan membuka file index.html untuk menampilkan sebuah halaman
sesuai dengan halaman yang dituju. Sehingga ketika membuka semua halaman
yang ada di proyek ini, Angular akan memanggil Bootstrap untuk dapat
menggunakan CSS-nya sesuai dengan desain halaman yang diakses. Selain itu
pada situs ini menggunakan font Open Sans dan Varela juga yang diaplikasikan
pada teks dalam situs ini. Untuk menggunakan font tersebut dilakukan dengan
cara mencantumkan alamat URL yang didapatkan dari Google Fonts sesuai
dengan font yang dipilih seperti pada baris 11. Sehingga untuk menggunakan font
tersebut cukup mendefinisikannya dalam CSS.
Sedangkan Ng-Bootstrap digunakan untuk mengaktifkan fitur dropdown
dan collapse pada komponen header dari situs proyek ini, dimana fitur dropdown
terletak pada menu Statistik dan fitur collapse akan aktif ketika situs diakses
dalam mode mobile. Untuk menggunakan Ng-Bootstrap perlu dilakukan instalasi
dependency dengan cara memasukan perintah npm install --save @ng-
bootstrap/ng-bootstrap dan langkah selanjutnya adalah melakukan import dan
menambah komponen Ng-Bootstrap.

19
BAB III
Gambar 3. 3 File app.module.ts Bagian Import
Secara default, ketika melakukan instalasi suatu dependency tidak akan

langsung ter-import pada suatu proyek Angular. Maka untuk menggunakan Ng-
Bootstrap pada suatu proyek Angular, perlu dilakukan import terlebih dahulu agar
Angular dapat mengenali dan menggunakan Ng-Bootstrap. Baris 3 pada gambar
3.3 adalah kode untuk meng-import Ng-Bootstrap pada file app.module.ts, dimana
nama modul dari Ng-Bootstrap adalah NgBModule yang berasal dari @ng-
bootstrap/ng-bootstrap.
Gambar 3. 4 File app.module.ts Bagian NgModule
Kemudian untuk menambah komponen Ng-Bootstrap pada suatu proyek

Angular adalah dengan cara memasukkan NgbModule pada file app.module.ts di
dalam @NgModule pada bagian imports seperti pada baris 69 sesuai gambar 3.4.
Maka Ng-Bootstrap sudah dikenali oleh Angular dan untuk menggunakan Ng-
Bootstrap adalah dengan cara mendefinisikannya pada file TypeScript (ts) pada
suatu komponen.
Gambar 3. 5 File.header.components.ts
Ng-Bootstrap dropdown digunakan untuk membuat sub menu didalam

menu Statistik pada komponen Header. Untuk dapat menggunakan dropdown dari
Ng-Bootstrap maka harus melakukan export class Ng-Bootstrap dropdown yaitu
dengan nama NgbdDropdownBasic seperti pada gambar 3.5 baris 16-17.

20
BAB III
Gambar 3. 6 File header.component.html Bagian Dropdown
Setelah melakukan export NgbdDropdownBasic, maka fitur dropdown

dapat digunakan pada komponen Header. Untuk menggunakan fitur dropdown,
tercantum pada file header.component.html baris 25-34. Langkah awal adalah
mendefinisikan dropdown dengan menggunakan selector ngbDropdown yang
terdapat didalam tag <li> pada baris 25. ngbDropdown memberikan lapisan
konteksual untuk menampilkan daftar tautan dan lainnya. Kemudian selanjutnya
adalah mendefinisikan toogle dari dropdown yang digunakan untuk memberikan
tanda ke sebuah element yang akan beralih ke dropdown melalui event klik, yaitu
dengan menggunakan selector ngbDropdownToggle yang terdapat didalam tag
<a> pada baris 26. Berikutnya adalah mendefinisikan menu dropdown pada suatu
elemen yang akan membungkus konten menu dropdown dan item dropdown.
Selector yang digunakan adalah ngbDropdownMenu yang terdapat didalam tag
<div> pada baris 30. Terakhir adalah mendefinisikan item dropdown untuk menu
dropdown yang sebelumnya sudah didefinisikan dengan menggunakan selector
ngbDropdownItem. Selector ini terdapat didalam tag <a> pada baris 31-32. Maka
setelah melakukan beberapa langkah tersebut, fitur dropdown untuk menu
Statistik pada komponen Header dapat digunakan.
Gambar 3. 7 File header.component.html Bagian Collapse
Ng-Bootstrap collapse digunakan untuk menyembunyikan atau

menampilkan elemen pada komponen pada komponen Header. Ketika situs ini
diakses menggunakan perangkat mobile atau dengan menggunakan perangkat
yang memiliki lebar tampilan yang sempit, maka fitur collapse akan aktif, yaitu
dengan menyembunyikan elemen-elemen pada menu Header dan digantikan

21
BAB III
dengan ikon menu. Untuk dapat menggunakan collapse dari Ng-Bootstrap maka
harus melakukan export class Ng-Bootstrap collapse yaitu dengan nama
NgbdCollapseBasic dengan variabel isCollapsed bernilai false secara default
seperti pada gambar 3.5 baris 18-20. Untuk menggunakan fitur collapse,
tercantum pada gambar 3.6 file header.component.html pada baris 11-16, dimana
di baris kode tersebut merupakan konfigurasi dari fitur collapse. Secara default
ketika membuka situs ini dengan menggunakan desktop, fitur collapse tidak akan
aktif karena variabel isCollapsed bernilai false pada file header.component.ts.
Langkah awal untuk membuat fitur collapse pada komponen Header adalah
mendefinisikan sebuah button dengan ikon pada baris dimana di dalam button
tersebut memuat beberapa selector, salah satunya adalah (click) yang bernilai
isCollapsed = !isCollapsed. Ketika button terjadi event klik, maka variabel
isCollapsed akan berubah nilai nya menjadi !isCollapsed atau akan menjadi
bernilai true. Kemudian mendefinisikan sebuah tag <div> collapse untuk bagian
yang menampung semua elemen yang berada di dalamnya dan didalam tag <div>
terdapat selector [ngbCollapse] dengan nilai isCollapsed. ngbCollapse
merupakan selector pada Ng-Bootstrap Collapse yang akan mengaktifkan fitur
collapse. Selector tersebut bernilai dari variabel isCollapsed yang variabel
tersebut memiliki nilai yang berubah-ubah sesuai dengan event klik pada button.
Sehingga selector [ngbCollapse] akan bekerja berdasarkan dari event klik pada
button.
2. Tampilan Peta
Tampilan ini menampilkan informasi mengenai peta yang menunjukkan
lokasi di Kabupaten Banyumas. Tampilan ini merupakan komponen peta pada
proyek situs Angular ini dan menggunakan peta Google Maps yang pada Angular
disebut sebagai Angular Google Maps (AGM).

22
BAB III
Gambar 3. 8 Tampilan Halaman Peta
Angular Google Maps (AGM) merupakan sebuah komponen untuk

menggunakan Google Maps yang disediakan oleh Angular. Karena pada situs SI
BANDOT sebelumnya menggunakan Angular Google Maps (AGM), maka pada
proyek ini penulis melakukan instalasi Angular Google Maps dengan
memasukkan perintah npm install @agm/core dan melakukan konfigurasi pada
file app.module.ts untuk mendefinisikan Angular Google Maps (AGM) itu sendiri.
Gambar 3. 9 Konfigurasi @NgModule pada app.module.ts
Pada baris 71-73 di gambar 3.9 merupakan kode untuk mendefinisikan

Angular Goole Maps (AGM) dimana pada apiKey diisikan dengan API Key dari
Google Maps yang bisa didapatkan dari Google Cloud Platform untuk Google
Maps. Sehingga Angular Google Maps dapat digunakan ketika dicantumkan pada
suatu halaman HTML.

23
BAB III
Gambar 3. 10 Konfigurasi file peta.component.ts
Selanjutnya melakukan konfigurasi untuk membuat marker yang akan

ditampilkan oleh Google Maps secara default pada saat membuka halaman Peta.
Pada gambar 3.10 baris 8-11, di dalam class PetaComponent ditambahkan
variabel berupa latitude dan longitude yang diisikan dengan koordinat dan
variabel zoom yang digunakan untuk mengatur perbesaran dari Google Maps,
dimana diisikan dengan number. Kemudian terdapat satu method pada barus 13-
16 dengan nama onChooseLocation(event) yaitu merupakan method untuk
mengubah marker pada Google Maps ketika terjadi event klik pada Google Maps
dan memiliki nilai berupa koordinat latitude dan longitude sesuai yang di-klik
pada Google Maps.
Gambar 3. 11 Source Code file peta.component.html
Maka langkah terakhir untuk menampilkan Google Maps dengan

menggunakan Angular Google Maps (AGM) adalah melakukan coding HTML
untuk mengatur template bagaiman Google Maps akan ditampilkan seperti pada
gambar 3.11. Untuk menampilkan Google Maps, digunakan tag <agm-map>
dengan input [latitude], [longitude], [zoom], [streetViewControl] dan output

24
BAB III
(mapClick). Input [latitude], [longitude], dan [zoom] diberi nilai sesuai dengan
variabel yang sudah pada file peta.component.ts didalam kelas PetaComponent.
Kemudian untuk input [streetViewControl] diberi nilai “true” untuk dapat
mengaktifkan fitur StreetView pada Google Maps. Selanjutnya output (mapclick)
diberi nilai dengan nama method yang dibuat pada file peta.component.ts, yaitu
onChooseLocation($event). Di dalam tag <agm-map> terdapat tag <agm-
marker> yang bertujuan untuk memberi tanda (mark) pada Google Maps ketika
melakukan klik pada Google Maps. Pada tag <agm-marker> terdapat input
[latitude] dan [longitude] yang diberi nilai sesuai dengan variabel yang ada pada
file peta.component.ts. Sehingga ketika terjadi event klik pada Google Maps,
maka nilai koordinat dari Google Maps yang di-klik akan disimpan di variabel
latitude dan longitude pada file peta.component.ts dan akan digunakan pada file
peta.component untuk tag <agm-map> dan <agm-marker>.
Gambar 3. 12 File peta.component.css
Ketika konfigurasi Angular Google Maps sudah berhasil dilakukan dan

di-compile untuk melihat hasilnya, maka secara default Google Maps tidak akan
muncul dikarenakan belum dilakukan pengaturan CSS pada tag <agm-map>.
Untuk mengatasi permasalahan ini perlu dilakukan pengaturan pada tag <agm-
map> dengan memberi ukuran height sebesar 500px seperti gambar 3.12.
Sehingga ketika ukuran height sudah diatur, maka Google Maps akan muncul dan
menampilkan informasi seperti yang dikonfigurasi sebelumnya.
3. Tampilan Potensi
Tampilan potensi merupakan halaman yang akan muncul pertama kali
ketika pengguna memilih menu Potensi. Dimana pada tampilan ini akan
menyajikan informasi mengenai potensi-potensi yang terdapat di Kabupaten
Banyumas yang sudah dikategorikan.

25
BAB III
Gambar 3. 13 Tampilan Halaman Potensi
Tampilan ini terdiri dari dua komponen yang ditampilkan menjadi satu,
yaitu komponen potensi dan potensi-item. Komponen potensi berisi judul nama
halaman dan penjelasan singkat mengenai halaman tersebut. Sedangkan
komponen potensi-item berisi kategori dan sub-kategori yang sudah
diklasifikasikan, diantaranya adalah Pemerintahan, Kesehatan, Pendidikan,
Wisata, Transportasi, Industri, dan Pelayanan.
Gambar 3. 14 File potensi.component.html
Pembuatan tampilan komponen potensi terdiri dari dua bagian, yaitu

pembuatan halaman HTML dan CSS. Pada pembuatan halaman HTML seperti
gambar 3.14 menggunakan grid system yang terdiri dari 3 kolom dengan
menggunakan tag <div> disertai selector class row dan col. Semua konten dari
halaman HTML ini ditempatkan di kolom kedua agar konten pada halaman

26
BAB III
potensi berada diposisi tengah. Selain itu di akhir baris dicantumkan struktur
HTML pada komponen potensi-item. Hal ini berarti HTML pada komponen
potensi akan mengeksport HTML pada komponen potensi-item.
Gambar 3. 15 File potensi.component.css
Sedangkan untuk bagian CSS pada komponen potensi adalah untuk

memodifikasi tag <h2> dan <p> HTML komponen potensi. Tag <h2> diatur
dengan menggunakan font Open Sans dan bercetak tebal, sementara tag <p>
diatur hanya menggunakan font Open Sans.
Gambar 3. 16 File potensi-item.component.html
Pembuatan tampilan komponen potensi-item terdiri dari dua bagian, yaitu

menggunakan tag <div> disertai selector class row dan col. Setiap kolom
memiliki nama kategori potensi dan diikuti dengan sebuah baris yang berisikan
item-item dari setiap kategori dengan menggunakan tag <div> disertai selector
class card dan card-custom agar item yang ditampilan berupa card, dimana setiap
itemnya memiliki sebuah ikon dan namanya. Semua daftar kategori beserta

27
BAB III
itemnya sudah disesuaikan antara kolom satu dan dua agar mendapatkan susunan
yang proposional.
Gambar 3. 17 File potensi-item.component.css
Sedangkan untuk bagian CSS pada komponen potensi-item terdapat tag

<h4> dan tag <p> HTML untuk dimodifikasi dan mendefinisikan beberapa class
yang digunakan pada tag HTML tertentu untuk memodifikasi tampilannya. Tag
<h4> dimodifikasi dengan mengatur font menjadi Open Sans dan bercetak tebal,
sementara tag <p> diatur dengan menggunakan font Varela. Class yang
didefinisikan diantaranya adalah class icon-potensi yang digunakan untuk
mengatur lebar dari ikon potensi, class img-responsive untuk mengatur margin
ikon potensi, dan class card untuk memberi margin pada card, serta class card-
custom digunakan untuk mengukur lebar dan tinggi card pada komponen potensi-
item.

28
BAB III
4. Tampilan Datasets
Tampilan datasets merupakan halaman menyajikan informasi mengenai
semua dataset yang ada di Kabupaten Banyumas yang berasal dari berbagai
sumber (OPD, instansi vertikal, BUMD dan organisasi lainnya) ketika pengguna
memilih menu Datasets. Selain itu pada halaman ini terdapat suatu kotak
pencarian untuk mencari dataset yang diperlukan.
Gambar 3. 18 Tampilan Halaman Datasets
Tampilan ini merupakan komponen dari dataset, dimana di dalam

komponen ini terdiri dari dua komponen lain yang ditampilkan menjadi satu, yaitu
komponen dataset-cari dan dataset-list. Komponen dataset-cari berisi kotak
pencarian yang digunakan untuk mencari suatu dataset. Sedangkan komponen
dataset-list berisi tabel yang terdapat daftar nama dataset dan fitur untuk
mengunduh dataset dalam bentuk CSV atau XLS. Daftar nama dataset dapat
diakses untuk menampilkan informasi lengkap mengenai dataset yang dipilih.
Gambar 3. 19 File dataset.component.html
Pembuatan tampilan komponen dataset untuk halaman HTML hanya

mencantumkan struktur HTML pada komponen dataset-cari dan komponen
dataset-list. Sehingga untuk halaman HTML pada komponen dataset hanya

29
BAB III
menampilkan HTML dari komponen lain, yaitu komponen dataset-cari dan

dataset-list.
Gambar 3. 20 File dataset-cari.component.html
Pembuatan tampilan komponen dataset-cari hanya terdiri satu bagian

saja, yaitu pembuatan halaman HTML. Pada pembuatan halaman HTML seperti
menggunakan tag <div> disertai selector class row dan col. Kemudian di dalam
kolom terdapat tag <form> dan tag <div> disertai selector class input-group untuk
membuat form. Di dalam tag <form> disertai dengan tag <input> dengan selector
type text agar form dapat diisi dengan teks.
Gambar 3. 21 File dataset-list.component.html

30
BAB III
Pembuatan tampilan komponen dataset-list terdiri dari dua bagian, yaitu

gambar 3.21 menggunakan tabel yang memiliki 3 kolom, yaitu nomor, nama
dataset, unduh. Pada bagian baris nama dataset terdapat tag <a> untuk melakukan
routing menuju halaman detail dari dataset. Bagian kolom unduh terdapat ikon
untuk dapat mengunduh dataset dalam bentuk CSV atau XLS.
Gambar 3. 22 File dataset-list.component.css
Sedangkan untuk bagian CSS pada komponen dataset-list adalah

membuat sebuah class dengan nama download untuk memodifikasi ukuran dari
ikon unduh (CSV dan XLS). Selanjutnya adalah mengenai tampilan dari detail
datasets. Tampilan detail datasets merupakan halaman menyajikan informasi
detail mengenai dataset tertentu yang dipilih dalam penyajian informasi berupa
tabel dan grafik. Selain itu penyajian informasi dataset dapat ditampilkan
berdasarkan tahun yang dipilih.
Gambar 3. 23 Tampilan Halaman Detail Dataset - Tabel
Tampilan ini merupakan komponen dari dataset-tabel, dimana komponen

ini akan muncul pertama kali ketika pengguna mengakses nama dataset pada
halaman dataset. Komponen ini terdapat sebuah tabular dengan nama Tabel dan
Grafik, dimana tabular ini merupakan navigasi pada detail dataset untuk

31
BAB III
berpindah dari halaman detail dataset tabel menuju halaman detail dataset grafik
dan sebaliknya. Selain itu pada komponen ini berisi form untuk memilih dataset
berdasarkan tahun yang kemudian akan ditampilkan pada tabel di bawahnya.
Selain itu terdapat fitur untuk mengunduh dataset dalam bentuk CSV atau XLS.
Gambar 3. 24 File dataset-tabel.component.html
Pembuatan tampilan komponen dataset-tabel terdiri dari dua bagian,

yaitu pembuatan halaman HTML dan CSS. Pada pembuatan halaman HTML
seperti gambar 3.24 menggunakan tabular untuk navigasi Tabel dan Grafik yang
didefinisikan dengan tag <ul> disertai selector class nav, nav-tabs, dan nav-item
untuk tag <li> serta nav-link untuk tag <a> yang berisikan nama dari navigasi.
Terdapat suatu method dengan nama callChart() pada baris 8, merupakan suatu
method untuk memanggil grafik pada halaman detail dataset grafik. Kemudian
terdapat suatu form select yang didefinisikan dari baris 14-26 pada gambar 3.24
yang berada di dalam kolom pertama pada suatu baris pada tag <div> dengan
selector class row dan col. Form select ini digunakan untuk menampilkan dataset
tertentu berdasarkan pilihan tahunnya.

32
BAB III
Gambar 3. 25 File dataset-tabel.component.html (Lanjutan)
Kemudian untuk kolom berikutnya terdapat fitur untuk mengunduh

dataset dalam bentuk CSV atau XLS dengan ditampilkan menggunakan ikon yang
didefinisikan dari baris 28-38 pada gambar.x.x. Selanjutnya adalah pembuatan
tabel dengan 5 kolom untuk menyajikan dataset. Kemudian di akhir file ini
terdapat suatu script untuk membuatu sebuah tooltip.
Gambar 3. 26 File dataset-tabel.component.html (Lanjutan)
Script ini didefinisikan untuk menampilkan informasi ketika suatu

element di highlight oleh kursor. Implementasi dari script ini adalah untuk ikon
unduh file dataset dalam bentuk CSV atau XLS yang di-targetkan pada selector
data-toggle=”tooltip” pada baris 32 dan 35 pada gambar 3.25.

33
BAB III
Gambar 3. 27 File dataset-tabel.component.css
Sedangkan untuk bagian CSS pada komponen dataset-tabel adalah untuk

memodifikasi tag <h2>, <h5> dan <label> pada HTML komponen dataset-tabel
dengan mengatur font menggunakan Open Sans dan bercetak tebal. Kemudian
terdapat sebuah class dengan nama download untuk memodifikasi ukuran dari
ikon unduh (CSV dan XLS).
Gambar 3. 28 Tampilan Halaman Detail Dataset - Grafik
Ketika pengguna melakukan navigasi ke tabular grafik, maka Angular

akan melakukan routing ke halaman detail dataset grafik. Tampilan detail
datasets grafik merupakan halaman menyajikan informasi detail mengenai dataset
tertentu yang disajikan dalam bentuk grafik. Selain itu penyajian informasi dataset

34
BAB III
dapat ditampilkan berdasarkan tahun yang dipilih. Tampilan ini merupakan

komponen dari dataset-grafik, dimana komponen ini akan muncul ketika
pengguna melakukan navigasi tabular Grafik halaman detail dataset. Komponen
ini hampir mirip seperti komponen dataset-tabel, dimana komponen ini terdapat
sebuah tabular dengan nama Tabel dan Grafik, form untuk memilih dataset
berdasarkan tahun yang kemudian akan ditampilkan pada grafik di bawahnya.
Selain itu terdapat fitur untuk mengunduh dataset dalam bentuk CSV atau XLS.
Gambar 3. 29 File dataset-grafik.component.html
Pembuatan tampilan komponen dataset-grafik terdiri dari dua bagian,

yaitu pembuatan halaman HTML dan CSS. Pada pembuatan halaman HTML
komponen ini hampir sama seperti dengan HTML komponen dataset-tabel, yaitu
terdapat navigasi yang menggunakan tabular dengan method callChart() pada
navigasi Grafik yang ditunjukkan di baris 3-10 pada gambar 3.29. Kemudian
terdapat form select yang berada di dalam kolom pertama suatu baris untuk
menampilkan dataset tertentu berdasarkan pilihan tahun yang ditunjukkan dibaris
14-26 pada gambar 3.29.

35
BAB III
Gambar 3. 30 File dataset-grafik.component.html (Lanjutan)
Kemudian untuk kolom berikutnya terdapat fitur untuk mengunduh

dataset dalam bentuk CSV atau XLS dengan ditampilkan menggunakan ikon
dengan disertai tooltip yang didefinisikan dari baris 28-38 pada gambar.x.x.
Selanjutnya adalah membuat sebuah tag <div> dengan selector id chartContainer
dengan style height sebesar 300px yang definisikan pada baris 40. Tag tersebut
dibuat untuk mendefinisikan grafik untuk dataset yang dipanggil dengan
menggunakan nama id-nya, yaitu chartContainer.
Untuk membuat sebuah grafik pada proyek ini, penulis menggunakan
plugin canvasJS untuk memudahkan dalam membuat sebuah grafik. Dalam
pembuatan grafik diperlukan beberapa tahap, yaitu tahap mencantumkan alamat
URL dari canvasJS dan mendefinisikan grafiknya.
Gambar 3. 31 File index.html Bagian Header
Langkah pertama adalah mencantumkan alamat URL dari canvasJS

didalam tag <head> dari file index.html dengan tag <script> seperti pada gambar
3.31 baris 13. Kemudian langkah berikutnya adalah mendefinisikan grafik di
dalam file yang sama, yaitu index.html.

36
BAB III
Gambar 3. 32 File index.html Bagian Grafik
Dalam mendefinisikan grafik, penulis menggunakan template yang sudah

disediakan oleh canvasJS dan memodifikasinya seperti pada gambar 3.32. Untuk
mendefinisikan sebuah grafik digunakan tag <script> dan diikuti dengan membuat
fungsi dengan nama callChart(). Di dalam fungsi tersebut dibuat sebuah objek
CanvasJS.Chart dengan id chartContainer, nama variabel chart dan memiliki
beberapa property, diantaranya adalah animationEnabled untuk mengaktifkan
animasi grafik, exportEnabled untuk mengunduh grafik, title untuk memberi judul
grafik, axisY untuk memberi sumbu Y pada grafik, toolTip untuk memberi
keterangan terhadap suatu data grafik ketika di-highlight, dan legend untuk
memberi legenda daripada grafik.

37
BAB III
Gambar 3. 33 File index.html Bagian Grafik (Lanjutan)
Kemudian terdapat property data pada gambar 3.33, dimana property ini
adalah property yang akan mendefinisikan sebuah data pada grafik dengan format
JSON dan berbentuk array. Property data memiliki property lagi didalamnya,
diantaranya type untuk menentukan jenis datanya, name untuk nama datanya,
legendText untuk nama data pada legenda grafik, showInLegend untuk
memunculkan nama data pada legenda grafik, dan dataPoints untuk membuat
banyaknya data dengan input label dan nilai axis Y.

38
BAB III
Gambar 3. 34 File index.html Bagian Grafik (Lanjutan)
Setelah mendefinisikan semua property pada chart, maka lakukan render

chart untuk memunculkan chart pada halaman HTML dengan method
chart.render() seperti gambar 3.34. Selain itu terdapat juga sebuah fungsi yang
didefinisikan untuk memunculkan atau menyembunyikan data pada grafik dengan
menggunakan legenda grafik. Ketika pembuatan grafik sudah selesai maka secara
otomatis pada komponen dataset-grafik akan muncul grafiknya pada tag <div>
dengan id chartContainer ketika halamannya diakses.
5. Konfigurasi Routing Angular

Routing pada suatu situs digunakan untuk melakukan navigasi pada suatu
situs, berpindah dari suatu halaman ke halaman lain, baik menggunakan elemen
pada situs maupun dengan memasukkan alamat URL. Routing pada Angular
diatur oleh modul Routes dan RouterModule serta mendefinisikan sebuah objek
yang berisi alamat URL dan komponennya untuk dapat melakukan routing pada
Angular.
Gambar 3. 35 File app.module.ts
Langkah pertama untuk melakukan routing adalah dengan mengimpor

modul Routes dan RouterModule dari @angular/router seperti baris 4 pada
gambar 3.35. Dengan melakukan impor modul tersebut maka Angular akan
mengenali modul tersebut sehingga routing dapat dilakukan pada proyek ini.

39
BAB III
Gambar 3. 36 File app.module.ts Bagian appRoutes
Langkah berikutnya adalah membuat sebuah objek konstan Routes

dengan nama appRoutes. Objek appRoutes berisikan array dari semua alamat
URL yang didefinisikan untuk dapat diakses pada browser. Setiap array memiliki
dua property, yaitu path dan component. Path digunakan untuk mendefinisikan
alamat dari suatu halaman yang akan ditampilkan, sedangkan component
digunakan untuk mendefinisikan komponen mana yang akan ditampilkan dari
path yang didefinisikan. Pada proyek ini terdapat 12 routes yang memiliki alamat
dan komponen masing-masing seperti pada gambar 3.36.
Gambar 3. 37 File app.module.ts Bagian @NgModule
Kemudian lakukan impor juga pada bagian @NgModule di dalam

property imports, yaitu dengan modul RouterModule.forRoot(appRoutes) seperti
baris 74 pada gambar 3.37. modul tersebut meminta sebuah parameter objek
routes untuk dapat mengenali alamat-alamat yang akan dilakukan untuk routing,
maka parameter tersebut diisi dengan appRoutes. Tujuan dari melakukan impor
modul ini adalah agar routing dikenali oleh setiap komponen yang ada di proyek
ini.

40
BAB III
Gambar 3. 38 File header.component.html
Langkah terakhir adalah mencatumkan routing pada tag <a> di semua

komponen yang membutuhkan, salah satunya adalah komponen header pada
header.component.html. Biasanya untuk berpindah halaman lain pada suatu situs
digunakan tag <a> dengan atribut href, namun pada Angular untuk berpindah
halaman digunakan atribut routerLink didalam tag <a>. routerLink memiliki
prinsip yang sama dengan href, yaitu untuk melakukan navigasi dari suatu
halaman ke halaman lainnya (routing). routerLink diisi dengan alamat URL
halaman yang akan dituju sesuai dengan yang telah didefinisikan pada appRoutes
di dalam file app.module.ts seperti baris 19, 22, 30, 31, 35, dan 38 dari gambar
3.38. Ketika routing sudah diterapkan pada proyek ini, maka situs ini dapat
melakukan navigasi ke halaman lain.
6. Evaluasi Hasil Pekerjaan

Setelah mengerjakan proyek perbaikan antarmuka pengguna dari situs
Sistem Informasi Banyumas dalam Open Data (SI BANDOT) maka tahapan
terakhir adalah melakukan evaluasi terhadap apa yang sudah dikerjakan. Tahap
evaluasi ini dilakukan dengan mempresentasikan hasil pekerjaan kepada
pembimbing lapangan di ruang Seksi Statistik, Pengelolaan Data dan Integrasi
Sistem Informasi.

41
BAB III
Gambar 3. 39 Evaluasi Hasil Pekerjaan
Setelah melakukan presentasi terhadap pembimbing lapangan, kelompok

penulis mendapatkan beberapa masukan mengenai hasil pekerjaan perbaikan
antarmuka SI BANDOT selama melaksanakan praktik kerja lapangan. Beberapa
masukan membahas mengenai desain perbaikan dari antarmuka SI BANDOT
dapat ditingkatkan kembali untuk kedepannya.

42
BAB IV
BAB IV
PENUTUP
A. Kesimpulan
Berdasarkan hasil pekerjaan yang telah dilakukan selama melaksanakan
praktik kerja lapangan, maka kesimpulan adalah sebagai berikut:
1. Berdasarkan hasil implementasi desain antarmuka pengguna SI BANDOT
yang telah dilakukan, hampir semua halaman memiliki desain yang sama
dengan mockup yang telah dibuat sebelumnya.
2. Implementasi desain antarmuka pengguna SI BANDOT menggunakan
framework Angular menghasilkan situs yang dengan fitur Single Page
Application (SPA).
3. Dengan menggunakan tambahan framework CSS Bootstrap dan NgBootstrap,
tampilan situs menjadi responsif dapat digunakan dengan mode desktop dan
mode mobile.
4. Dengan melakukan perbaikan desain antarmuka SI BANDOT dapat
meningkatkan kenyamanan dan kemudahan pengguna dalam menggunakan
SI BANDOT serta memaksimalkan tujuan dari SI BANDOT sebagai portal
data terbuka Pemerintah Kabupaten Banyumas.
B. Saran
Berdasarkan proyek yang dikerjakan selama Praktik Kerja Lapangan,
saran yang dapat disampaikan untuk bagian Seksi Statistik, Pengelolaan Data dan
Integrasi Sistem Informasi adalah perlu diadakan kerja sama dengan pihak luar
yang membidangi teknologi informasi, khususnya UI/UX Designer untuk
meningkatkan usability dan user experience dari situs SI BANDOT. Kemudian
pihak Dinas Komunikasi dan Informatika Kabupaten Banyumas perlu melakukan
sosialisasi mengenai situs SI BANDOT kepada masyarakat Kabupaten Banyumas
agar tujuan dari situs SI BANDOT sebagai portal data terbuka untuk Kabupaten
Banyumas dapat terrealisasi dengan baik dan tepat sasaran. Sehingga harapannya
situs SI BANDOT dapat dimanfaatkan dengan sebaik mungkin oleh masyarakat

43
BAB IV
yang membutuhkan, khususnya yang sedang melakukan penelitian dan juga

sebagai salah satu langkah untuk mewujudkan Kabupaten Banyumas sebagai
salah satu smartcity di Indonesia.

Daftar Pustaka
DAFTAR PUSTAKA
[1] G. Adjani, “Media Online Sebagai Alternatif Penyebaran Informasi

Penyuluhan Pertanian,” 2018. [Online]. Available:
http://agricia.faperta.ugm.ac.id/2018/09/02/media-online-sebagai-alternatif-
penyebaran-informasi-penyuluhan-pertanian/. [Accessed: 15-Oct-2019].
[2] A. P. J. I. Indonesia, “Penetrasi & Profil Perilaku Pengguna Internet
Indonesia.” pp. 1–51, 2018.
[3] Anonim, “Sejarah Dinkominfo Kabupaten Banyumas,” 2017. [Online].
Available: http://dinkominfo.banyumaskab.go.id/page/21179/sejarah-
dinkominfo-kabupaten-banyumas#.Xa2k3ugzbIU. [Accessed: 02-Sep-
2019].
[4] J. Hutahaean, Konsep Sistem Informasi. Yogyakarta: Deepublish, 2015.
[5] Y. Yuliawan, M. J. D. Sunarto, and T. Soebijono, “Pengembangan Sistem
Informasi Pendataan Jemaat Gereja Masehi Advent Hari Ketujuh
Konferens Jawa Kawasan Timur Berbasis Web,” Sist. Inf., vol. 2, no. 2,
2013.
[6] S. D. Anggadini, “Analisis Sistem Informasi Manajemen Berbasis
Komputer dalam Proses Pengambilan Keputusan,” Maj. Ilm. Unikom, vol.
11, no. 2, pp. 176–187, 2013.
[7] W. Chua, “Angular,” 2017. [Online]. Available:
https://socs.binus.ac.id/2017/09/26/angular/. [Accessed: 14-Oct-2019].
[8] J. Enterprise, Pemrograman Bootstrap untuk Pemula. Jakarta: Elex Media
Komputindo, 2016.
[9] E. Winarno, A. Zaki, and S. Community, Pemrograman Web Berbasis
HTML, PHP, & JavaScript. Jakarta: Elex Media Komputindo, 2014.
[10] A. C, “Apa Itu HTML Pemahaman Dasar Tentang Bahasa Markup
Hypertext,” 2018. [Online]. Available:
https://www.hostinger.co.id/tutorial/apa-itu-html/. [Accessed: 14-Oct-
2019].
[11] A. C, “Apa Itu CSS Pengertian dan Cara Kerjanya,” 2019. [Online].
Available: https://www.hostinger.co.id/tutorial/apa-itu-css/. [Accessed: 14-
Oct-2019].
[12] B. Kurniawan, Desain Web Praktis dengan CSS. Jakarta: Elex Media
Komputindo, 2008.
[13] A. Alamsyah, “Pengantar JavaScript,” pp. 1–40, 2003.
[14] R. H. Sianipar, Pemrograman JavaScript: Teori dan Implementasi.
Bandung: Informatika, 2015.

Lampiran
LAMPIRAN
Lampiran 1. Form Penilaian

Lampiran

Lampiran
Lampiran 2. Form Kegiatan Harian PKL/ KP

Lampiran

Lampiran

Lampiran

Lampiran

Lampiran

Lampiran

Lampiran

Lampiran

Lampiran

Lampiran

Lampiran
Lampiran 3. Plagiarisme

Lampiran
Lampiran 4. Daftar Hadir Presentasi PKL

LAPORAN PKL - 16102143 - Yankotinu Jonnata PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

LAPORAN PKL - 16102143 - Yankotinu Jonnata PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIK KERJA LAPANGAN/KERJA PRAKTIK

KERJA PRAKTIK DI DINAS KOMUNIKASI DAN

PERBAIKAN ANTARMUKA PENGGUNA PADA

Yankotinu Al Qod’r Jonnata

PROGRAM STUDI S1 TEKNIK INFORMATIKA

LAPORAN PRAKTIK KERJA LAPANGAN/KERJA PRAKTIK

PERBAIKAN ANTARMUKA PENGGUNA PADA

Laporan Praktik Kerja Lapangan/ Kerja Praktik disusun guna memenuhi

Yankotinu Al Qod’r Jonnata

PROGRAM STUDI S1 TEKNIK INFORMATIKA

LAPORAN PRAKTIK KERJA LAPANGAN/KERJA PRAKTIK

PERBAIKAN ANTARMUKA PENGGUNA PADA

Dipersiapkan dan disusun oleh:

Yankotinu Al Qod’r Jonnata

Telah dipresentasikan pada hari Kamis, 24 Oktober 2019

Fahrudin Mukti W, S.Kom., M.Eng. Atik Febriani, S.T., M.T.

Purwokerto, 12 November 2019

PERBAIKAN ANTARMUKA PENGGUNA PADA SITUS SISTEM

Sistem Informasi Banyumas dalam Open Data (SI BANDOT) merupakan

Kata Kunci : Bootstrap, Framework Angular, HTML, Sistem Informasi

PERBAIKAN ANTARMUKA PENGGUNA PADA SITUS SISTEM

The Banyumas Information System in Open Data (SI BANDOT) is an

Keywords : Angular Framework, Bootstrap, HTML, Information System

HALAMAN COVER ............................................................................................... i

Gambar 1. 1 Struktur Anggota Diskominfo Kabupaten Banyumas ........................ 5

Lampiran 1. Form Penilaian.................................................................................. 45

Prodi IF-IT TELKOM Purwokerto NIM 16102143

BANDOT masih dalam tahap pengembangan sehingga masih terdapat beberapa

Prodi IF-IT TELKOM Purwokerto NIM 16102143

D. Aspek Umum Kelembagaan

1. Sejarah Berdirinya Dinas Komunikasi Dan Informatika Kabupaten

Prodi IF-IT TELKOM Purwokerto NIM 16102143

Pada tahun 1999, Departemen Penerangan dibubarkan untuk efisiensi dan

Prodi IF-IT TELKOM Purwokerto NIM 16102143

2. Struktur Organisasi Dinas Komunikasi dan Informatika Kabupaten

Gambar 1. 1 Struktur Anggota Diskominfo Kabupaten Banyumas

3. Visi Misi Dinas Komunikasi Dan Informatika Kabupaten Banyumas

Prodi IF-IT TELKOM Purwokerto NIM 16102143

a) Meningkatkan penyelenggaraan e-government di Kabupaten Banyumas.

E. Metode Penulisan Laporan

Prodi IF-IT TELKOM Purwokerto NIM 16102143

F. Sistematika Penulisan Laporan

Prodi IF-IT TELKOM Purwokerto NIM 16102143

Prodi IF-IT TELKOM Purwokerto NIM 16102143

Prodi IF-IT TELKOM Purwokerto NIM 16102143

Dalam web programming, terkadang hasil response dari server muncul

Prodi IF-IT TELKOM Purwokerto NIM 16102143

4. Mudah digunakan, Bootstrap sangat mudah digunakan karena hanya

D. Hypertext Markup Language (HTML)

Prodi IF-IT TELKOM Purwokerto NIM 16102143

kontak yang semuanya memiliki dokumen HTML terpisah. Masing-masing

E. Cascading Style Sheet (CSS)

Prodi IF-IT TELKOM Purwokerto NIM 16102143

diterapkan ke halaman HTML manapun yang dibutuhkan. Namun CSS

Gambar 2. 1 Contoh rule CSS dengan Style External.

Selector-selector dan style dalam CSS akan dimasukkan dalam sebuah

Prodi IF-IT TELKOM Purwokerto NIM 16102143

Prodi IF-IT TELKOM Purwokerto NIM 16102143

Prodi IF-IT TELKOM Purwokerto NIM 16102143

Dalam pengerjaan proyek ini, kelompok penulis terdiri dari 4 orang

B. Analisis dan Pembahasan Hasil Pekerjaan

Gambar 3. 1 Microsoft Visual Code Studio

Prodi IF-IT TELKOM Purwokerto NIM 16102143