JURNAL JUTITI Vol 2 No.

1 (April 2022) – E-ISSN : 2827-9387 P-ISSN : 2827-9379

JURNAL TEKNIK INFORMATIKA DAN TEKNOLOGI INFORMASI

Halaman Jurnal: https://ejurnal.politeknikpratama.ac.id/index.php/JUTITI
Halaman UTAMA: https://ejurnal.politeknikpratama.ac.id/index.php

RANCANG BANGUN SISTEM INFORMASI KOPERASI XYZ MENGGUNAKAN FRAMEWORK

LARAVEL DAN VUE.JS

Rifky Lana Rahardian a, Michael William Pratama Wenasb

a
Sistem Komputer, [email protected], Institut Teknologi Dan Bisnis STIKOM Bali
b
Sistem Informasi, [email protected], Institut Teknologi Dan Bisnis STIKOM Bali

Abstract

Most of the XYZ cooperative's activities are still carried out manually during the recording process,
and searching for certain archives takes a long time due to the lack of information sources that provide the
exact position of archive storage. As a solution to the existing situation, we need a Cooperative Information
System Using Laravel Framework and Vue.Js. This solution uses a QR-Code to identify the location of
archive storage so that personnel do not have to check each cardboard box of items individually. This
system is built using the Laravel Framework which is an open source framework using the MVC (Model,
View, Controller) concept. The model in Laravel is a representation of a data structure that has functions
that can be used to manage the database. The view in Laravel is the part that manages the website interface
so that users can interact with the application that is created. The controller in Laravel is the part that acts
as a bridge between the Model and the View by sending requests from the View and receiving responses
from the Model. (Basuki, 2019) This system uses Vue.Js, a JavaScript framework to make the website look
more interactive. Vue.Js is another open source framework that is natively supported by Laravel, making
system development easier when the two frameworks are combined. This system is expected to facilitate the
work of employees in terms of maintaining company documents, especially archive management and
storage, as well as identifying archive locations using a QR-Code which contains information on the
location of related archive storage.

Keywords: Koperasi, Sistem informasi, Laravel, Vue.js

Abstrak
Sebagian besar aktivitas koperasi XYZ masih dilakukan secara manual pada saat proses perekaman,
dan pencarian arsip tertentu membutuhkan waktu yang lama karena kurangnya sumber informasi yang
memberikan posisi penyimpanan arsip yang tepat. Sebagai solusi dari situasi yang ada, kita membutuhkan
Sistem Informasi Koperasi Menggunakan Laravel Framework dan Vue.Js. Solusi ini menggunakan QR-
Code untuk mengidentifikasi lokasi penyimpanan arsip sehingga personel tidak perlu memeriksa setiap
kotak kardus item satu per satu. Sistem ini dibangun menggunakan Laravel Framework yang merupakan
framework open source dengan menggunakan konsep MVC (Model, View, Controller). Model pada
Laravel merupakan representasi dari struktur data yang memiliki fungsi-fungsi yang dapat digunakan untuk
mengelola database. View pada Laravel adalah bagian yang mengatur interface website agar user dapat
berinteraksi dengan aplikasi yang dibuat. Controller di Laravel adalah bagian yang bertindak sebagai
jembatan antara Model dan View dengan mengirimkan permintaan dari View dan menerima tanggapan dari
Model. (Basuki, 2019) Sistem ini menggunakan Vue.Js, sebuah framework JavaScript untuk membuat
tampilan website menjadi lebih interaktif. Vue.Js adalah kerangka kerja open source lain yang secara native
didukung oleh Laravel, membuat pengembangan sistem lebih mudah ketika kedua kerangka tersebut
Received Febuari 30, 2022; Revised Maret 2, 2022; Accepted Maret 22, 2022
2

digabungkan. Sistem ini diharapkan dapat mempermudah pekerjaan karyawan dalam hal pemeliharaan
dokumen perusahaan, khususnya pengelolaan dan penyimpanan arsip, serta mengidentifikasi lokasi arsip
menggunakan QR-Code yang berisi informasi lokasi penyimpanan arsip terkait.

Kata Kunci: Koperasi, Sistem informasi, Laravel, Vue.js

1. PENDAHULUAN
Koperasi XYZ merupakan sebuah koperasi serba usaha yang dijalankan dan dimiliki oleh orang-orang
untuk kepentingan semua orang di domisili XYZ. Sebagian besar aktivitas koperasi masih dilakukan secara
manual pada saat proses perekaman, dan pencarian arsip tertentu membutuhkan waktu yang lama karena
kurangnya sumber informasi yang memberikan posisi penyimpanan arsip yang tepat. Sebagai solusi dari
situasi yang ada, kita membutuhkan Sistem Informasi Koperasi. Sistem informasi koperasi dibangun
dengan basis web untuk memberikan pelayanan dan kenyamanan selama proses transaksi serta pengolahan
data keuangan, administrasi, dan operasional anggota yang lebih transparan dan terorganisir. Sistem
informasi koperasi adalah alat yang memudahkan pengelolaan dan administrasi koperasi. Mengutamakan
ahli di bidangnya dalam pendekatan manajemen koperasi yang sebelumnya dilakukan secara manual, kini
telah digantikan dengan metode yang lebih cepat dan efisien. Dengan menu bantuan yang luas untuk
mengelola kegiatan koperasi, Sistem Informasi Koperasi memudahkan pengoperasian koperasi [1]. Sistem
Informasi Koperasi XYZ dapat menggunakan Laravel Framework dan Vue.Js. Solusi ini menggunakan
QR-Code untuk mengidentifikasi lokasi penyimpanan arsip sehingga personel tidak perlu memeriksa setiap
kotak kardus item satu per satu.

2. TINJAUAN PUSTAKA
2.1 Laravel adalah Framework PHP (PHP Hypertext Preprocessor) berdasarkan model MVC (Model,
View, Controller) dan disediakan di bawah lisensi MIT. Taylor Otwell menemukan Laravel, kerangka
kerja PHP yang pertama kali dirilis pada tahun 2011. Banyak teknologi baru di Laravel, seperti artisan,
blade template engine, migrasi basis data, pagination, dan ORM yang fasih, membantu proses
pembuatan situs web (Object Relation Mapping). [13]
2.2 Vue.js adalah framework JavaScript progresif yang menggunakan arsitektur MVC (Model, View,
Controller) untuk membuat antarmuka pengguna. Evan You membangun Vue.js pada Februari 2014
sebagai proyek sumber terbuka dengan lisensi MIT. System Reactive Data Binding adalah salah satu
fitur Vue.js, dan membuat data dan DOM (Document Object Model) tetap terhubung. [14] Dalam
bentuknya yang paling dasar, Kode QR adalah kode matriks dua dimensi yang dapat menampung
ribuan huruf alfanumerik dengan metode yang dapat mengubah data tertulis menjadi kode dua dimensi
yang dapat dicetak pada media yang lebih kecil. Karena ditujukan untuk menerjemahkan isinya dengan
cepat, QR merupakan singkatan dari Quick Response, yang berarti respon yang cepat. Barcode, tidak
seperti QR Code, adalah matriks satu dimensi dengan kapasitas maksimum 20 angka. Kode QR
merupakan teknologi penting di dunia digital saat ini karena sangat praktis dan sering digunakan. [16]

3 METODOLOGI PENELITIAN
3.1 Pengumpulan data
Tahap ini dilakukan untuk mengumpulkan data yang diperlukan oleh pengembangan sistem. Observasi
di kantor koperasi, studi literatur dengan membaca dokumentasi berupa buku atau jurnal yang memiliki
link ke sistem, wawancara dengan karyawan koperasi, dan studi dokumentasi dengan mempelajari
bentuk fisik surat korespondensi bisnis merupakan contoh tahap ini.
3.2 Asesmen kebutuhan
Tahap asesmen kebutuhan digunakan untuk mempelajari masalah dan mendefinisikan kebutuhan yang
dibutuhkan untuk membangun sistem, sehingga kendala sistem dapat diidentifikasi dan solusi yang

Rancang Bangun Sistem Informasi Koperasi XYZ Menggunakan Framework Laravel Dan Vue.JS
(Rifky Lana Rahardian)
3

efektif untuk masalah yang ditemukan dapat ditentukan. Hasil penelitian ini kemudian digunakan
untuk membuat desain sistem.
3.3 Desain dan implementasi sistem
Sebelum aplikasi dibuat berdasarkan hasil asesmen kebutuhan, dilakukan perancangan sistem untuk
mengetahui aliran data dan operasi yang terjadi di dalamnya. DFD, ERD, Basis Data Konseptual, dan
Desain Antarmuka adalah bagian dari desain sistem. Desain sistem yang dibuat kemudian
diterjemahkan ke dalam bahasa yang dapat dimengerti mesin. Basis data sistem akan dikembangkan
menggunakan MariaDB dengan PhpMyAdmin dan server web Apache yang disertakan dalam paket
XAMPP, dan sistem dibangun menggunakan Laravel Framework dan Vue.Js dalam sistem operasi
Ubuntu 18.04.6 LTS (long-term support) Bionic Beaver.

4 HASIL DAN PEMBAHASAN

4.1 Perancangan Sistem dan Basis Data
Untuk membangun sistem ini, peneliti menggunakan Data Flow Diagram (DFD) untuk
menggambarkan alur sistem berjalan. Perancangan sistem DFD dipisahkan ke dalam berbagai tahapan,
mulai dari level tertinggi dan bekerja hingga level terendah dan lebih mendalam. Tahap pertama dari
perancangan ini adalah membangun Diagram Konteks yang menggambarkan operasi sistem secara
keseluruhan secara umum tetapi tidak masuk ke detail tentang penyimpanan data untuk menjaga hal-
hal sederhana. Entitas eksternal Admin dan Eksekutif dalam diagram konteks Sistem Manajemen File
Korespondensi Bisnis ini juga beroperasi sebagai pengguna (user). Diagram Konteks terlihat seperti
ini:

Gambar 1. Diagram Konteks

Tahap berikutnya Diagram Konteks dipecah menjadi DFD Level 0. Terlihat pada Gambar 2.
Sistem Manajemen Arsip Korespondensi Bisnis yang sebelumnya memiliki dua user yaitu ADMIN dan
EKSEKUTIF diturunkan menjadi beberapa proses yaitu Login, Master Data Management, Arsip dan
Info Detil Arsip. Terdapat tiga data store yaitu Users, Surat dan Arsip yang berguna untuk
penyimpanan data.

Rancang Bangun Sistem Informasi Koperasi XYZ Menggunakan Framework Laravel Dan Vue.JS
(Rifky Lana Rahardian)
4

Gambar 2. DFD Level 0

Perancangan ini menghasilkan basis data berupa Basis Data Konseptual yang terdapat 5 tabel di
dalamnya di mana 2 tabel di antaranya memiliki relasi. Berikut ini adalah gambar Basis Data
Konseptual yang digunakan pada sistem:

Gambar 3. Basis Data Konseptual

Rancang Bangun Sistem Informasi Koperasi XYZ Menggunakan Framework Laravel Dan Vue.JS
(Rifky Lana Rahardian)
5

4.2 Penerapan Sistem

Kerangka Laravel dan Vue.JS digunakan untuk membuat sistem ini. Di dua sisi yang berbeda, kedua
kerangka ini digunakan. Laravel digunakan untuk mengelola data pada sistem database menggunakan
semua fitur Laravel, membuat manipulasi data lebih mudah, lebih rapi, dan terstruktur, sedangkan Vue.Js
digunakan untuk membuat halaman web yang lebih reaktif. Beberapa halaman diperlukan dalam proses
pengelolaan arsip korespondensi bisnis dalam sistem ini. Administrator memiliki akses penuh ke halaman
ini dalam proses pengelolaan arsip. Halaman Dashboard, yang menampilkan informasi tentang pengelolaan
catatan komunikasi bisnis, merupakan tampilan awal yang muncul setelah login di halaman admin.
Tersedia juga halaman surat, yang berisi informasi tentang surat-surat bisnis. Saat menggunakan surat
bisnis, ada opsi di halaman surat untuk mengarsipkan surat. Halaman Arsip, yang digunakan untuk
menampilkan arsip korespondensi bisnis yang diarsipkan, adalah inti dari sistem ini. Menampilkan detail
arsip, mencetak label arsip, penyimpanan arsip, dan menampilkan hasil pencarian arsip adalah beberapa
fungsi yang tersedia di Halaman Arsip.

Proses dimulai dengan membuat basis data dengan MariaDB, lalu basis data dimigrasikan dengan
perintah “php artisan migrate”. Laravel telah terhubung dengan basis data “arsipkoperasiXYZ”.
Penambahan phpMyAdmin ke homestead Laravel dilakukan terlebih dahulu dengan menginstal
phpMyAdmin menggunakan Composer, memperbarui Homestead.yaml, memperbarui file host, dan
menjalankan perintah “vagrant provision”. Sistem Informasi Koperasi XYZ dapat diakses melalui
“localhost” atau “http://127.0.0.1/. Halaman pertama yang muncul berupa “login.html” yang memiliki
beberapa fungsi PHP dibaliknya, yaitu: login.php, data_login_eksekutif.php, data_login_admin.php,
data_login_users.php, info_login_eksekutif.php, info_login_admin.php, info_login_users.php.

Ketika login sukses, pengguna akan dibawa ke “index.html” yang merupakan halaman dasbor dengan
sub-menu “arsip.html”, “surat.html”, dan “user.html”. Pada halaman – halaman ini terdapat file - file PHP
yang berfungsi di semua halaman yang tersedia, yaitu: index.php, menu.php, admin.php, eksekutif.php,
users.php, surat.php, arsip.php, data_admin.php, info_admin.php, data_eksekutif.php, info_eksekutif.php,
data_users.php, info_users.php, data_surat.php, info_surat.php, data_arsip.php, info_arsip.php dan
cetak_surat.php. Basis data terdapat pada folder ~/arsipkoperasiXYZ/database yang merupakan file
“arsipkoperasiXYZ.sql”. Di dalam ~/arsipkoperasiXYZ/assets/js, terdapat “vue.js” yaitu fungsi JavaScript
Vue pada proyek framework Laravel. Untuk komponen Vue.Js “qrcode.vue” sendiri terletak pada
~/arsipkoperasiXYZ/assets/js/components. Komponen Vue.Js ini berfungsi untuk menghasilkan sebuah QR
code pada pencetakan label surat. Beberapa halaman dalam Archive Management System Menggunakan
Laravel Framework dan Vue.Js adalah sebagai berikut:

Rancang Bangun Sistem Informasi Koperasi XYZ Menggunakan Framework Laravel Dan Vue.JS
(Rifky Lana Rahardian)
6

Gambar 4. Halaman Login Arsip

Gambar 5. Halaman Dasbor Arsip

Rancang Bangun Sistem Informasi Koperasi XYZ Menggunakan Framework Laravel Dan Vue.JS
(Rifky Lana Rahardian)
7

Gambar 6. Halaman Arsip Korespondensi Bisnis

Gambar 7. Halaman Form Tambah Arsip

Rancang Bangun Sistem Informasi Koperasi XYZ Menggunakan Framework Laravel Dan Vue.JS
(Rifky Lana Rahardian)
8

Gambar 8. Cetak Label Surat

Gambar 9. Contoh Surat yang Dicetak

4.3 Pengujian Sistem
Hasil dari pengujian menyatakan bahwa Halaman Login, Halaman Dasbor, Form Tambah Arsip, dan
Cetak Label Surat semuanya sudah sesuai. Pengguna memasukkan nama pengguna dan kata sandi mereka;
jika informasi yang dimasukkan cocok dengan yang ada di database, pengguna diarahkan ke halaman
dasbor; jika tidak, pengguna menerima pesan peringatan dan dikembalikan ke halaman login. Jika data
yang diberikan dalam formulir adalah asli, maka akan dicatat dalam database; jika tidak, pemberitahuan
peringatan akan ditampilkan pada formulir yang isinya tidak valid. Label arsip akan diunduh sebagai
dokumen teks yang dapat dicetak. Nomor surat dan Kode QR yang dapat dipindai dengan perangkat lain
seperti ponsel untuk mendapatkan informasi surat. Adapun tabel pengujian blackbox testing, adalah sebagai
berikut:
Tabel 1. Pengujian Blackbox
Kelas Skenario Hasil
Halaman Login Input username dan password yang telah terdaftar di basis data akan Sesuai
mengalihkan pengguna ke halaman dasbor. Jika tidak sesuai, akan muncul
pesan error.
Halaman Dasbor Semua fitur menu dapat dijalankan. Fitur search pada search bar dapat Sesuai
Rancang Bangun Sistem Informasi Koperasi XYZ Menggunakan Framework Laravel Dan Vue.JS
(Rifky Lana Rahardian)
9

dijalankan dengan menekan tombol ‘enter’.

Form Tambah Arsip Jika data yang diinput menggunakan format yang sah, maka akan disimpan Sesuai
dalam basis data. Jika tidak, akan muncul pesan error.
Cetak Label Surat Sistem akan mengunduh dokumen surat pada arsip yang disertakan dengan Sesuai
label dan juga QR code.

5 KESIMPULAN DAN SARAN

Berikut adalah beberapa kesimpulan yang dapat diambil dari penelitian:
1.Perancangan sistem berhasil dibuat dengan menggunakan Data Flow Diagram dan Basis Data
Konseptual.
2. Framework Laravel dan Vue.Js berhasil diterapkan untuk membangun Sistem Informasi Arsip pada
koperasi.
3. Pembangunan QR-Code dengan memanfaatkan vue.js berhasil diterapkan dan memudahkan dalam
proses pemindai dengan perangkat smartphone untuk mempermudah pencarian lokasi arsip.
4. Pengujian yang dilakukan menggunakan metode blackbox testing mendapatkan hasil yang sesuai, semua
fungsi sistem dapat berjalan dengan baik.

DAFTAR PUSTAKA

[1] Pengembangan Sistem Informasi Koperasi on Sekawan Media. [Online]. Available:

https://www.sekawanmedia.co.id/solusi/aplikasi-koperasi/
[2] A. O’Sullivan and S.M. Sheffrin, Economics: Principles in Action, Needham, United States: Prentice
Hall, 2003.
[3] M.I. Ningsih, Koperasi, Bandung, Indonesia: Pringgadani, 2009.
[4] H.H. Munkner, Prinsip - Prinsip Koperasi dan Undang - Undang Koperasi, Jakarta, Indonesia: Pusat
Latihan Dan Penataran Perkoperasian Direktorat Jenderal, 1980.
[5] K. Hendar, Ekonomi Koperasi, Mataram, Indonesia: FE-UI, 2005.
[6] M. Bunchuk, Glossariy po informatsionnomu obshchestvu, Moscow, Russia: Institut razvitiya
informatsionnogo obshchestva, 2009.
[7] L. Sergeevna, M. Alekseevna and V. Sergeevna, “Ponyatiye i klassifikatsiya informatsionnykh
tekhnologiy,” Dostizheniya nauki i obrazovaniya, vol. 12(66), pp. 41-43, 2021.
[8] Федеральный закон от 27 июля 2006 года № 149-ФЗ «Об информации, информационных
технологиях и о защите информации»
[9] J. Graesch, J. Henseler and S. Hensel-Börner, “Information technology and marketing: an important
partnership for decades. Industrial Management and Data Systems,” vol. 121(1), pp. 123-157, 2020.
[10] G. Ray, J. Benitez and J. Henseler, “Impact of information technology infrastructure flexibility on
mergers and acquisitions,” MIS Quarterly, vol. 42(1), pp. 25-43, 2018.
[11] E. Dominguez-Escrig, F. Broch, R. Chiva and R. Lapiedra, “Promoting radical innovation through
end-user computing satisfaction,” Industrial Management and Data Systems, vol. 118(8), pp. 1629-
1646, 2018.
Rancang Bangun Sistem Informasi Koperasi XYZ Menggunakan Framework Laravel Dan Vue.JS
(Rifky Lana Rahardian)
10

[12] D.C. Croson and P.L. Drnevich, “Information technology and business-level strategy: toward an
integrated theoretical perspective,” MIS Quarterly, vol. 37(2), pp. 483-509
[13] A. Basuki, Konsep dan Implementasi Pemrograman Laravel 5 (Edisi 2019), Yogyakarta, Indonesia:
Lokomedia, 2019.
[14] L. Gani, Panduan Praktis Menguasai Vue.js, Yogyakarta, Indonesia: Lokomedia, 2018.
[15] M. Adani. (2021) Data Flow Diagram (DFD): Definisi, Fungsi, Jenis, dan Contoh on Sekawan Media.
[Online]. Available: https://www.sekawanmedia.co.id/blog/pengertian-dfd/
[16] I. Ismail. (2021) QR Code adalah: Pengertian dan Fungsinya sebagai Metode Pembayaran on
Accurate Online. [Online]. Available: https://accurate.id/ekonomi-keuangan/qr-code-adalah/
[17] D. Pramana, I.K.A.H. Putra dan N.L.P. Srinadi, “Sistem Manajemen Arsip Menggunakan Framework
Laravel dan Vue.Js (Studi Kasus : BPKAD Provinsi Bali),” Jurnal Sistem dan Informatika, vol. 13(2),
pp. 97-104, 2019.

Rancang Bangun Sistem Informasi Koperasi XYZ Menggunakan Framework Laravel Dan Vue.JS
(Rifky Lana Rahardian)