## JurnalIlmiahInformatika (JIF)
|  ISSN (Print) 2337-8379 | ISSN (Online) 2615-1049|
Jurnal online di akses di http://ejournal.upbatam.ac.id/index.php/jif

## Perancangan Sistem Administrasi Pada Kelompok Usaha Bersama Berbasis Web Menggunakan Framework AngularJS

## Rahadian Aulia Firda
Universitas Putera Batam, Jln. R.Soeprapto Muka Kuning, Batam, Indonesia

## I NFORMASI A RTIKEL

## A B S T R A C T
Sejarah Artikel: Diterima Redaksi: 1 Februari 2018
Revisi Akhir: 10 Maret 2018
Diterbitkan Online : 23 Maret 2018 Batam City is a strategic city adjacent to Singapore which includes Riau Islands Province.
Batam  lost  the  small  island  where  the  islands  are  inhabited  by  the  fishermen.  Fisher fisheries  search  livelihoods  catch  8.686  households  consisting  of  fishing  activities  as many as 7608 households and fish farming activities as many as 1713 households. This condition  is,  of  course,  ideal  to  be  used  as  a  starting  point  to  increase  production  and market products with high economic value. However, the current reality is the sector. To other sectors. Batam is relatively small and still dominated by other sectors. Some of the things that are happening is the result of recapitulation of catch and fisherman cultivation is less effective because it is still done manually where fisherman catch report via short message (SMS) to extension team. The extension team recaptures all reports from each KUB  so  it  will  be  difficult  and  time  consuming.  Therefore,  it  is  needed  a  system  of administration of Business Group Bersama (KUB) web-based so that the catch of fish and fisherman  cultivation  recorded  in  computer  and  facilitate  for  offices  of  Marine, Agriculture and Fishery (KP2) Batam production in each KUB Batam.
K ATA K UNCI
Web

## AngularJS
Framework
K ORESPONDENSI No HP: 081363344411
E-mail: rahadian.af@gmail.com

## 1. PENDAHULUAN
Kota  Madya  Batam  yang  ditetapkan  sebagai  kota  administratif berdasarkan Peraturan Pemerintah No. 34 Tahun 1983 memiliki potensi dan letak geografis yang cukup strategis.Kota Batam juga memiliki ± 329 pulau yang sebahagian besar dapat dimanfaatkan untuk  pengembangan  sektor  perikanan  dan  budidaya.  Jumlah rumah  tangga  usaha  pertanian  subsektor  Perikanan  tercatat sebanyak  8.686  rumah  tangga  yang  terdiri  dari  kegiatan Penangkapan  Ikan  sebanyak  7.608  rumah  tangga  dan  kegiatan Budidaya  Ikan sebanyak 1.713 rumah tangga.  Kondisi  ini tentu saja  sangat  ideal  untuk  dimanfaatkan  sebagai  starting point    untukmeningkatkan  produksi  dan  memasarkan  hasil produksi dengan nilai ekonomis yang cukup tinggi.
Salah  satu  tempat  budi  daya  yang  terkenal  di  Batam  yaitu  di Kecamatan  Bulang  yang  tersebar  di  berbagai  kelurahan diataranya  di  Pulau  Temoyong.  Pulau  Temoyong,  adalah  salah satu  pulau  yang  ada  di  Kecamatan  Bulang  Kota  Batam. Kelurahan  Temoyong  juga  memiliki  pulau  pulau  yang  saling berdekatan.  Pulau  –  pulau  ini  dapat  di  tempuh  dari  kelurahan Setokok  sekitar  30  menit  dengan  menggunakan  pompong  atau
boad  Pancung.  Kelurahan  Temoyong  secara  geografis  terletak diantara  perbatasan  antara  kecamatan  Bulang  dan  kecamatan Tangjung Uncang, yang terdiri dari 1 Rw dan 1Rt yang sebagian besar penduduk nya bermata pencaharian nelayan.
Dalam  proses  budidaya  perikanan  dan  budidaya  tangkap  di Kelola oleh Kelompok Usaha Bersama (KUB). Kelompok Usaha Bersama  (KUB)  ini  tersebar  di  enam  Kelurahan  yang  ada Kecamatan  Bulang.  Masing  –  masing  kelurahan  terdapat  lebih kurang  20  KUB.  Kelompok  Usaha  Bersama  ini  tentunya mengatur  dan  melakukan  koordinasi  berkaitan  dengan perkembangan  hasil  budidaya  perikanan  dan  budidaya tangkap.Namun,  realita  yang  ada  saat  ini  bahwa  pelaporan perkembangan  hasil  budidaya  perikanan  dan  hasil  tangkap mengalami  kendala.  Beberapa  kendala  yang  dihadapi  adalah rekapitulasi hasil tangkapan dan budidaya nelayan kurang efektif karena  masih  dilakukan  pencatatan    secara  manual  dimana laporan  tangkapan  nelayan  dikirimkan  melalui  pesan  singkat (SMS)  kepada  tim  penyuluh  Pulau  Temoyong  dari  dinas  KP2 (Kelautan,  Pertanian  dan  Perikanan).  Tim  penyuluh  merekap kembali  semua  laporan  dari  masing-masing  KUB  dan mengirimkan  kepada  dinas  KP2  maka  akan  menyulitkan  dan memakan waktu. Oleh karena itu, dirancang sistem administrasi
hasil  tangkapan  dan  budidaya  berbasis  web  guna  memudahkan dalam pembuatan laporan dan pendistribusian laporan.

## 2. TINJAUAN PUSTAKA

## 2.1 AngularJS
AngularJS adalah sebuah framework Javascript yang dikembangkan atau dibangun oleh tim Google. AngularJS disebut juga extension HTML  [1].  AngularJS  menggunakan  metode MVC ( Model , View dan Controller ) yang membuat source code aplikasi  menjadi bersih dan  mudah  dikembangkan. Sampai saat ini  AngularJS  sudah  menjadi  salah  satu framework  Javascript yang  paling  populer  dan  sangat  banyak  digunakan  oleh  para developer  di  seluruh  dunia    untuk  membangun  website. Kehandalan  dari AngularJS sendiri  tidak  bisa  diragukan  lagi, salah satu faktornya karena dikembangkan oleh para tim ahli dari Google.
AngularJS  mengimplementasikan browser dengan sintak  HTML5.  HTML5  menawarkan  sejumlah  elemen  baru semisal  <video>,  <section>,  <article>  dan  lainnya.  AngularJS dapat menambahkan lebih banyak lagi elemen-elemen baru yang akan  dimengerti  oleh browser ,  misal  <draggable>  membuat elemen bisa di- drag , <zippy> membuat elemen semisal akordion, atau bahkan menggunakan bahasa indonesia seperti <sembunyikan>  jika  diklik  akan  menyembunyikan  elemen (contoh  saja,  pada  praktik  gunakanlah  bahasa  inggris  sebagai bahasa internasional). Fungsi ini disebut dengan istilah Directive [2].  Pengguna  yang  bertanggungjawab  membuat Directive tersebut  bisa  ditafsirkan  oleh browser dengan  menuliskan  kode pada  deklarasi Directive itu  sendiri.  Atau  dengan  kata  lain, pengguna  mengajari browser sintak  HTML  baru.  Bahkan  tidak terbatas  pada  elemen,  pengguna  bisa  membuat Directive menggunakan attribute , HTML comment atau class .

## 2.2 PHP
PHP  (akronim  dari  PHP Hypertext  Preprocessor )  yang merupakan  suatu  bahasa  pemrograman  yang  digunakan  untuk menerjemahkan  baris  kode  program  menjadi  kode  mesin  yang dapat  dimengerti  oleh  komputer  yang  bersifat server-side yang ditambahkan ke dalam HTML (Supono & Putratama, 2016). PHP dikatakan sebagai sebuah server-side embedded script language artinya  sintaks-sintaks  dan  perintah  yang  diberikan  akan sepenuhnya  dijalankan  oleh server tetapi  disertakan  pada halaman HTML biasa. Aplikasi-aplikasi yang dibangun oleh PHP pada umumnya akan memberikan hasil pada webbrowser , tetapi prosesnya secara keseluruhan dijalankan di server .
2.3 JavaScript
JavaScript  adalah  bahasa scripting kecil,  ringan,    berorientasi objek  yang  ditempelkan pada kode HTML  dan di proses di sisi client [3]. JavaScript digunakan dalam pembuatan website agar lebih  interaktif  dengan  memberikan  kemampuan  tambahan terhadap  HTML  melalui  eksekusi  perintah  di  sisi browser . JavaScript  dapat  merespon  perintah user dengan  cepat  dan menjadikan halaman web menjadi responsif. JavaScript memiliki struktur  sederhana,  kodenya  dapat  disisipkan  pada  dokumen HTML atau berdiri sebagai satu kesatuan aplikasi.

## 2.4 HTML
HTML ( Hypertext Markup Language ) adalah bahasa dasar untuk web  scripting bersifat client  side yang  memungkinkan  untuk menampilkan  informasi  dalam  bentuk  teks,  grafik,  serta multimedia  dan  juga  untuk  menghubungkan  antar  tampilan webpage atau  yang  lebih  dikenal  dengan hyperlink [4].  HTML merupakan  sebuah  bahasa  standar  yang  digunakan  secara  luas untuk menampilkan halaman web [5].

## 3. METODOLOGI
Untuk kerangka  kerja ini  dilakukan beberapa  tahapan - tahapan yang  harus  dilaksanakan  mulai  dari    awal  sampai  hasil  akhir. Adapun tahapan kerja tersebut sebagai berikut :

## Gambar 1. Kerangka Kerja
Pada  gambar  1  diatas  adalah  langkah-langkah  dari  desain penelitian sebagai berikut :
1. Mengidentifikasi Masalah Pada  tahap  ini    untuk  menentukan  masalah-masalah yang  terdapat  pada  penelitian  tersebut,  Untuk mengetahui masalah-masalah yang ada pada penelitian tersebut
2. Pengumpulan Data Setelah  mengidentifikasi  masalah,  tahap  selanjutnya adalah  pengumpulan  data.  Pengumpulan  data-data tersebut  dari  buku  dan  jurnal  yang  berhubungan dengan  perancangan  Sistem,  serta  data  hasil tangkapan  ikan  para  nelayan  di  Pulau  Temoyong. Dalam  penelitian  ini  tahap  pengumpulan  data dilakukan beberapa cara yaitu :
a) Wawancara Penelitian  ini  mendapatkan  data-data  dari masing-masing  ketua  Kelompok  Usaha Bersama (KUB) dengan melalui wawancara langsung.
b) Studi Pustaka Pada  penelitian  juga  menggunakan  teknik pengumpulan  data  studi  pustaka  dilakukan dengan    mempelajari  teori-teori  atau literatur  dari  buku-buku,  jurnal,  referensi-
referensi yang berhubungan dengan penelitian ini untuk melengkapi data.
c) Observasi Penelitian ini juga menggunakan observasi langsung    ke  lapangan  dalam  meninjau langsung    data  yang  telah  didapat  dari masing-masing  ketua  KUB    sehingga keakuratan  data  dapat  semakin  tinggi.serta melihat langsung fakta di lapangan.
3. Analisis Data Setelah  pengumpulan  data,  tahap  selanjutnya  adalah Analisis Data. Data dan informasi yang dikumpulkan akan  digunakan  untuk  mendukung  penelitian,  data tersebut  bisa  diperoleh  melalui  wawancara  langsung dengan ketua KUB.
4. Peracangan Sistem Tahap  selanjutnya  adalah  perancangan  sistem. Peracangan  sistem  ini  untuk  merancang  sistem administrasi. Perancangan dari model database, model sistem dan perancangan website.
5. Pengujian Sistem Pada  tahap  ini  adalah  pengujian  sistem  dilakukan dalam perancangan sistem aplikasi untuk menampilkan dan mengolah informasi yang dibutuhkan  pengguna.  Sistem  administrasi  berbasis web  diuji  dengan  menggunakan  browser  untuk mengolah data hasil tangkapan ikan.

## 4. HASIL DAN PEMBAHASAN

## 4.1. Perancangan Sistem
Dalam penelitian ini penulis menggunakan empat alat bantu  dalam  merancang  sistem  yang  diusulkan  yaitu  Entity Relationship Diagram, Contex Diagram, Data Flow Diagram dan struktur sistem.

## 4.1.1 Context Diagram
Context  diagram adalah  diagram aliran  data  yang  selalu mengandung satu proses saja (seringkali  diberi  nama proses 0), proses ini mewakili proses keseluruhan sistem. Keuntungan dari context  diagram  adalah  memudahkan  pemakai  untuk  mengerti sistem  yang  akan  dikembangkan.  Gambaran  Context  Diagram untuk sistem baru yang dirancang dapat dilihat pada gambar:
Sistem administrasi berbasis web admin kub Tambah user Total produksi Total tabungan Tambah anggota
Entri produksi
Total produksi Entri tabungan Total tabungan
History tabungan

## Gambar 2. Context Diagram

## 4.1.2 Data Flow Diagram
Data  flow  diagram  (DFD)  sering  digunakan  untuk menggambarkan  suatu  sistem  yang  telah  ada  atau  sistem  baru yang akan dikembangkan secara logika tanpa mempetimbangkan lingkungan fisik dimana data tersebut disimpan. DFD merupakan alat yang digunakan pada metodologi pengembangan sistem yang terstruktur.  DFD  level  0  merupakan  penjabaran  dari  Context Diagram yang dapat dilihat pada gambar:
Admin Daftar KUB
Entri data Users Data login kub Data KUB Lap. Total produksi Permintaan laporan Data laporan Produksi Data produksi Lap. Total produksi Permintaan laporan Data total produksi Transaksi_tabungan Data tabungan kub Login Permintaan login Data login Login sukses Tambah anggota kub Entri data kub Anggota_kub Data kub Entri produksi Entri data Data produksi kub Laporan total produksi Permintaan laporan Data total produksi kub Data laporan Entri tabungan Entri data data Total tabungan Permintaan data Data Data total tabungan
Gambar 3. Data Flow Diagram

## 4.1.3 Entity Relationship Diagram
Adapun  bentuk  hubungan  dari  masing-masing  entity tersebut dapat dilihat pada gambar:
Anggota_kub Produksi Transaksi_tabungan Kub Users id Id_anggota jenis jumlah Total_tabungan keterangan Id_kub Nama_kub username Id_anggota Nama_anggota Id_kub tabungan id tanggal Id_anggota username password level Jumlah_produksi Nilai_produksi Biaya_produksi pendapatan
Gambar 4. Entity Relationship Diagram

## 4.2. Hasil Penelitian
H asil penelitian ini berupa sistem berbasis web dalam mengelola data hasil tangkapan ikan. Sistem ini terdiri dari 2 bagian yaitu halaman untuk pengguna dan admin.
1. Halaman Admin Halaman  ini  digunakan  untuk  pengelola  semua  data KUB. Halaman ini terdiri dari:
a. Halaman Dashboard Halaman  ini  berisi  informasi  berupa  grafik. Informasi ini terdiri dari data produksi, tabungan semua KUB.

## Gambar 3. Halaman Dashboard Admin
b. Halaman Tambah Pengguna Halaman ini berguna untuk menambah pengguna yang  berhak  untuk  mengisi  data  hasil  tangkapan masing-masing anggota KUB.

## Gambar 4. Halaman Tambah Pengguna
c. Halaman Total Produksi Halaman ini berisi informasi total produksi semua KUB.

## Gambar 5. Halaman Total Produksi
d. Halaman Total Tabungan Halaman ini berisi informasi total tabungan semua anggota masing – masing KUB.

## 2. Halaman Pengguna
Pada  halaman  ini  digunakan  oleh  orang  yang  berhak mengisi data pada sistem ini di setiap KUB. Halaman ini terdiri dari: a. Halaman Dashboard

## Gambar 7. Halaman Dashboard Pengguna
b. Halaman Tambah Anggota Halaman  ini  berisi  form  untuk  menambahkan anggota KUB.
Gambar 8.  Halaman Tambah Anggota
c. Halaman Entri Produksi
d. Halaman Total Produksi

## Gambar 10.  Halaman Total Produksi
e. Halaman Entri Tabungan
Gambar 11. Halaman Entri Tabungan
f. Halaman Total Tabungan
Gambar 12. Halaman Total Tabungan
g. Halaman Histori Tabungan

## Gambar 13. Halaman Histori Tabungan

## 5. KESIMPULAN DAN SARAN
Dari  analisa  yang  dilakukan  terhadapan  perancangan  sistem administrasi ini,  maka penulis mengambil beberapa kesimpulan bahwa perancangan sistem pengolahan data hasil tangkapan ikan nelayan dapat dibuat secara cepat, tepat dan dapat meminimalkan
kesalahan-kesalahan,  perancangan  sistem  administras  berbasis web ini dapat membantu masing-masing KUB dalam pencatatan hasil tangkapan mereka dan bagi tim penyuluh dapat memantau hasil  tangkapan  para  nelayan  dari  jarak  jauh  serta  membantu dalam  pengarsipan.  Agar  sistem  yang  dirancang  dapat  bekerja secara  efektif  dan  efisien  maka  diperlukan  pelatihan  bagi  para pengguna dan sistem ini sebaiknya dijalankan secara online yaitu diletakkan di file hosting agar bisa digunakan dari jarak jauh serta sistem  yang  baru  ini  diharapkan  pihak  pengguna  mengevaluasi sistem  ini  dan  memberikan  masukan-masukan  jika  ditemukan kekurangan.

## DAFTAR PUSTAKA
[1] S. Hegde and S. Shah, “A SURVEY ON THE LATEST WEB,” vol. 3, no. August, pp. 236–239, 2015.
[2] S. Baco, M. Swandi, and A. R. Amal, “RANCANGAN SISTEM  INFORMASI  JURNAL  ILMU  TEKNIK BERBASIS WEB UNIVERSITAS ISLAM MAKASSAR,” vol. 7, no. April, 2012.
[3] I.  Yatini,  “Aplikasi  pengolahan  citra  berbasis  web menggunakan  javascript  dan  jquery,” Apl.  Pengolah. citra Berbas. web menggunakan javascript dan jquery , vol. 3, no. 3, pp. 1–8, 2014.
[4] U. Hasanah, “Sistem Informasi Penjualan On Line Pada Toko Kreatif Suncom Pacitan,” IJNS - Indones. J. Netw. Secur. , vol. 2, no. 4, pp. 40–48, 2013.
[5] S.  dan  Z.  Akib,  “Perancangan  Website  Menggunakan Responsive Web Design,” Int. J. Eng. Comput. Sci. , vol. 2, no. 1, pp. 10772–10774, 2014.

## BIODATA PENULIS
Rahadian Aulia Firda, S.Kom., M.Kom. Lulusan  Universitas  Putera  Indonesia  –  YPTK Padang. Mengajar  di  Universitas Putera Batam. Mata kuliah yang diampu: bahasa pemrograman Java dan Web.