Perancangan Aplikasi Simpan Pinjam Koperasi

Berbasis Responsive Web Design

(Studi Kasus “PRIMKOPKAR MANUNGGAL”)

Artikel Ilmiah

Diajukan kepada

Fakultas Teknologi Informasi

untuk Memperoleh Gelar Sarjana Komputer

Oleh:

Oktaviyanti Dian Lauwrintus (672011032)

Evangs Mailoa, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Februari 2016

Pernyataan

Yang bertandatangan di bawah ini,

Nama : Oktaviyanti Dian Lauwrintus

NIM : 672011032

Program Studi : Teknik Informatika

Fakultas : Teknologi Informasi Universitas Kristen Satya Wacana

menyatakan dengan sesungguhnya bahwa tugas akhir dengan judul:

Perancangan Aplikasi Simpan Pinjam Koperasi

Berbasis Responsive Web Design

(Studi Kasus “Primpopkar Manunggal”)

yang dibimbing oleh:

1. Evangs Mailoa S.Kom, M.Cs

adalah benar-benar hasil karya saya.

Di dalam tugas akhir ini tidak terdapat keseluruhan atau sebagian tulisan atau

gagasan orang lain yang saya ambil dengan cara menyalin atau meniru dalam bentuk

rangkaian kalimat atau gambar serta simbol yang saya aku seolah-olah sebagai karya

saya tanpa memberikan pengakuan pada penulis atau sumber aslinya.

Salatiga, 11 Februari 2016

Yang memberi pernyataan,

Oktaviyanti Dian Lauwrintus

Perancangan Aplikasi Simpan Pinjam Koperasi

Berbasis Responsive Web Design

(Studi Kasus : Primkopkar Manunggal)

1)Oktaviyanti Dian L, 2) Evangs Mailoa

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email: 1)672011032@student.uksw.edu 2)evangs.mailoa@staff.uksw.edu

Abstract

Cooperative is a community agency which has an important role. The existence of Primkopkar

Manunggal is very helpful for the members to deal with finance. However, there is a problem which is

faced by Primkopkar Manunggal, that is limitation of computer system to manage cooperative data.

Therefore, a system to facilitate cooperative members and management to do activities of saving and

loan is also needed. A web application is made to solve the problem. Responsive web in now widely

used in webpage making. In this research will made saving and loan application with responsive web

design technology in order to every people can access that web anytime and anywhere through any

device. By applying responsive web, then so web display will be dynamis and more comfortable to see

and neat from any resolution of display.So the activities of saving and loans can be done more easyly

and faster.

Keyword : Koperasi , Responsive Web Design(RWD)

Abstrak

Koperasi merupakan lembaga masyarakat dimana koperasi memiliki peran penting untuk membantu

anggotanya dalam hal keuangan. Masalah yang dihadapi oleh primkopkar saat ini adalah terbatasnya

sistem komputer dalam mengelola data di koperasi. Maka dari itu perlu adanya sistem untuk

memudahkan anggota dan pengurus koperasi dalam melakukan kegiatan simpan pinjam di koperasi.

Saat ini web responsif mulai banyak digunakan dalam pembuatan halaman web. Sehingga dalam

penelitian kali ini akan dibuat aplikasi simpan pinjam dengan teknologi responsive web design agar

setiap orang yang dapat mengakses web tersebut kapan saja dan dimana saja melalui berbagai perangkat

yang ada. Dengan menerapkan responsive web design, maka tampilan pada sistem akan menjadi lebih

dinamis, nyaman dilihat dari berbagai ukuran layar dan lebih rapi. Sehingga kegiatan simpan pinjam

koperasi menjadi lebih mudah dan lebih cepat.

Kata Kunci : Koperasi , Responsive Web Design(RWD)

1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen Satya Wacana

Salatiga. 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

1

1. Pendahuluan

Seiring dengan perkembangan jaman, teknologi komputer mengalami

kemajuan yang sangat pesat. Perkembangan teknologi dapat dilihat dari banyaknya

perusahaan, koperasi, instansi-instansi bahkan badan pemerintah yang

menggunakan teknologi informasi untuk kegiatan operasionalnya. Pengolahan

data, informasi dan sumber daya koperasi dengan menggunakan teknologi tentu

akan sangat membantu dalam hal mendapatkan data, mengelola data dan

memelihara data.

Koperasi merupakan suatu wadah yang dapat membantu masyarakat

terutama masyarakat kecil dan menengah. Koperasi memegang peranan penting

dalam pertumbuhan ekonomi masyarakat. Primkopkar Manunggal merupakan

badan usaha yang bergerak di bidang serba usaha antara lain : Simpan-pinjam,

penjualan barang kebutuhan sehari-hari, serta penjualan jasa. Anggota Primkopkar

Manunggal merupakan seluruh karyawan Damatex dan Timatex yang memiliki

lebih dari tiga ribu anggota dan lebih dari 40 pegawai. Untuk memajukan

kesejahteraan anggotanya, Primkopkar Manunggal memberikan pinjaman bagi

anggotanya yang membutuhkan uang tambahan. Primkopkar Manunggal

memberikan dana pinjaman lebih dari 1 milyar rupiah kepada lebih dari 300

peminjam setiap bulannya. Dalam hal peminjaman karyawan dapat melakukan

peminjaman kepada pihak koperasi dengan bunga yang relatif kecil untuk membeli

kebutuhan, membuka usaha, bisnis maupun biaya sekolah anaknya. Selain bisa

meminjam uang, anggota Primkopkar Manunggal juga bisa menyimpan uang.

Primkopkar Manunggal menawarkan dua jenis simpanan yaitu simpanan jangka

panjang dan simpanan jangka pendek. Simpanan jangka panjang seperti simpanan

hari tua (SHT) dapat diambil jika anggota keluar dari pekerjaan, sedangkan

simpanan jangka pendek seperti simpanan akhir tahun (SAT), simpanan anak

sekolah (SAS) dan simpanan hari raya (SHR) dapat diambil dalam jangka waktu

satu tahun. Dengan menyimpan uang di koperasi, karyawan dapat merasa tenang

dalam menyimpan uangnya. Tujuan koperasi ini adalah agar Karyawan Damatex

dan Timatex lebih nyaman dalam meminjam dan menyimpan uang mereka. Inilah

alasan mengapa Primkopkar Manunggal sangat memegang peranan penting dalam

kebutuhan pokok karyawan. Perbedaannya dengan bank adalah bank menawarkan

pinjaman dengan bunga yang relatif tinggi sehingga akan membebani anggotanya

dalam melunasi angsuran, sedangkan Primkopkar Manunggal memberikan bunga

pinjaman yang relatif kecil dan bunga simpanan yang relatif lebih besar daripada

bunga yang ditawarkan oleh bank.

Saat ini Primkopkar Manunggal belum mempunyai sistem yang dapat

mengontrol atau menyimpan data simpan pinjam koperasi ke dalam Database dan

secara tepat. Data simpan pinjam hanya disimpan di dalam Microsoft Excel. Proses

peminjaman dan penyimpanan uang juga masih menggunakan proses manual yang

kurang efisien dalam segi waktu. Untuk mengajukan permohonan pinjaman,

anggota koperasi harus mengambil formulir yang untuk diisi, anggota koperasi

2

yang akan meminjam harus mencari komisaris untuk meminta persetujuan, jelas

akan memakan waktu lama. Selain itu anggota koperasi merupakan karyawan

Damatex dan Timatex dimana mereka juga sibuk dengan pekerjaan mereka.

Sehingga untuk mengembangkan koperasi tersebut, tentu diperlukan suatu sistem

yang dapat membantu agar koperasi tersebut dapat memberikan pelayanan yang

baik dan lebih cepat. Selain itu diperlukan fasilitas untuk memudahkan mereka jika

mereka ingin melakukan transaksi di koperasi tanpa mengganggu pekerjaan

mereka.

Perkembangan teknologi saat ini berkembang pesat. Dengan adanya

internet, informasi yang ada dapat dengan mudah kita dapatkan dengan cepat. Saat

ini kita dapat mengakses internet dari berbagai macam perangkat mulai dari

desktop, tablet, dan juga mobile selular. Media tersebut memiliki layar dengan

ukuran yang berbeda. Sehingga dengan adanya responsive web maka kita akan

lebih mudah membuka halaman web tersebut dari berbagai ukuran layar yang

berbeda. Dengan responsive web , tampilan pada web akan menyesuaikan dengan

besar kecilnya layar yang kita gunakan. Berdasarkan latar belakang yang ada maka

untuk mengembangkan Primkopkar Manunggal dibuatlah aplikasi simpan pinjam

berbasis responsive web. Tujuannya yaitu untuk memudahkan petugas koperasi

dalam mengelola data simpan pinjam, selain itu juga memudahkan anggota

koperasi yang ingin meminjam atau menyimpan uang di koperasi. Aplikasi web

dibuat responsive agar anggota maupun komisaris koperasi dapat mengakses kapan

saja dan dimana saja menggunakan perangkat yang mereka miliki. Tampilan web

responsif juga lebih rapi ketika di akses menggunakan perangkat dengan ukuran

layar yang kecil.

2. Tinjauan Pustaka

Pada sebelumnya berjudul “Perancangan Website menggunakan Responsive

Web Design ” . Penelitian tersebut dibuat website yang menyesuaikan tampilannya

dengan tampilan device atau perangkat yang digunakan pengunjung web baik

ukuran maupun orientasi, sehingga tampilan yang berada di dekstop komputer

dengan tampilan di perangkat bergerak atau mobile device tetap memberikan

kenyamanan tehadap user yang mengakses webite tersebut. Dari penelitian tersebut

didapat kesimpulan bahwa web yang didesain menggunakan Responsive Web

Design dapat beradaptasi dengan optimal dalam perangkat apapun yang digunakan

untuk mengaksesnya. Selain itu pengembang dapat mengurangi jumlah desain yang

harus dibuat pengembang yaitu menjadi satu halaman desain saja untuk dipakai di

semua devices atau perangkat[1]. Dari penelitian tersebut akan dibuat web dengan

menggunakan responsive web design pada aplikasi simpan pinjam Primkopkar

Manunggal.

Penelitian lain berjudul “Sistem Informasi Simpan Pinjam Berbasis Web

Pada Koperasi Simpan Pinjam Tirta” telah menerapkan aplikasi berbasis web.

3

Dimana dari sistem sebelumnya, peminjaman dilakukan secara langsung, yaitu

anggota mengajukan peminjaman ke petugas koperasi dan mengisi formulir

pengajuan peminjaman dengan mengisi data pada kertas. Setelah dibuat sistem

berbasis web didapat kesimpulan yaitu proses bisnis pendaftaran anggota dan

transaksi simpanan dapat di minimalisir sehingga tidak akan memakan banyak

waktu[2]. Pada penelitian sebelumnya, web dibuat menggunakan PHP saja.

Perbedaan dengan penelitian terdahulu yaitu pada penelitian saat ini juga akan

dibuat sistem koperasi online namun untuk tampilannya akan menggunakan

framework bootstrap untuk menghasilkan tampilan yang lebih responsif sehingga

dapat dengan mudah diakses oleh berbagai macam perangkat/device.

Responsive Web Design merupakan suatu teknik desain yang membuat

website dapat tampil dengan baik di berbagai browser dengan ukuran layar yang

berbeda seperti yang terlihat pada Gambar 1. Sebuah halaman web yang dirancang

dengan RWD mampu menyesuaikan dengan ukuran layar yang digunakan.

Gambar 1 Ilustrasi Responsive Web Design pada Layar Mobile, Tablet dan Desktop

Google merekomendasikan responsive web design bagi pengembang

website untuk dapat melayani kebutuhan para pengguna agar optimal pada setiap

jenis perangkat desktop maupun mobile. Responsive web design memiliki satu

aspek dimana hanya diperlukan satu website untuk berbagai perangkat dan tetap

memberikan user experience yang baik [3]. Web responsive design pertama kali

diperkenalkan oleh Ethan Marcotte pada artikelnya yang sangat inspiratif Web

Responsive Design. Responsive Web Design (RWD) memiliki tiga komponen

penting, yaitu The The Fluid Grid, Media Queries, Flexible Image. Fluid Grid, atau

grid yang fleksibel, mengacu pada penggunaan ukuran relatif dengan basis

persentase atau ems dibandingkan jenis ukuran absolut seperti pixel atau point.

Media Queries melihat kemampuan dari perangkat yang sedang digunakan dalam

website, dimana halaman web bisa menggunakan CSS style yang berbeda sesuai

dengan karakteristik dari perangkat atau device yang digunakan user, dan pada

umumnya media queries mendeteksi ukuran jendela browser. Flexible Image

memungkinkan mereka untuk memuat gambar dengan size berbeda pada perangkat

yang berbeda. Dengan kata lain ukuran image pada halaman web juga dapat

menyesuaikan mengikuti lebar layar pada perangkatnya [4].

4

3. Metode dan Perancangan

Metode penelitian memuat uraian tentang bagaimana langkah-langkah yang

dilakukan dalam perancangan atau metode yang digunakan dalam penelitian.

Terdapat 5 tahapan dalam penelitian yang dapat dilihat pada gambar 2.

Gambar 2 Metode Penelitian

Analisis kebutuhan dan pengumpulan data merupakan langkah awal dalam

metode penelitian. Setelah tahap awal terpenuhi, dilakukan perancangan sistem dan

perancangan aplikasi. Metode perancangan yang digunakan pada pembuatan

aplikasi ini yaitu model prototype. Keuntungan dari prototype model yaitu waktu

yang dibutuhkan untuk mengerjakan relatif singkat. Pada gambar 3 dapat dilihat

bahwa prototype model memiliki 3 tahapan yaitu listen to customer, build / revise

mock up, dan customer test drive mock up.

Gambar 3 Model Prototype [5]

Tahapan awal dari prototype model adalah listen to customer. Pada tahap

ini penulis melakukan wawancara ke bagian koperasi untuk mendapatkan informasi

yang dapat digunakan dalam perancangan dan pembuatan aplikasi seperti proses

bisnis yang terjadi dalam proses simpan pinjam koperasi, siapa saja yang berperan

5

dalam kegiatan simpan pinjam koperasi. Dalam tahap ini penulis juga

mengumpulkan data data yang diperlukan dalam pembuatan aplikasi.

Pada tahap penelitian didapatkan proses bisnis untuk mengajukan

permohonan pinjaman seperti yang terlihat pada gambar 4.

Gambar 4 Proses Bisnis Pengajuan Pinjaman

Gambar 4 merupakan proses bisnis yang terjadi di primkopkar manunggal

untuk mengajukan pinjaman. Dimana anggota yang akan meminjam uang harus

datang ke koperasi untuk mengambil formulir permohonan pinjaman dan mengisi

formulir tersebut. Kemudian anggota koperasi harus menemui komisaris masing-

masing untuk mendapatkan persetujuan dari tiap komisaris. Setelah permohonan

pinjaman disetujui maka pinjaman dapat diproses di bagian kasir.

Gambar 5 Proses Bisnis Pendaftaran Simpanan

Gambar 5 merupakan proses bisnis pendaftaran simpanan. Proses pendaftaran

simpanan lebih mudah daripada pengajuan permohonan pinjaman. Setiap simpanan

didaftarkan pada waktu yang berbeda Misalnya untuk mendaftarkan simpanan akhir

6

tahun, anggota harus mendaftar pada bulan November karena potong gaji untuk

simpanan akhir tahun dimulai dari bulan Desember, dan pengembalian pada bulan

Desember.

Setelah tahap awal selesai maka akan dilakukan build / revise mock up yaitu

proses perancangan dan pembuatan aplikasi. Proses perancangan meliputi

perancangan database, tampilan antar muka, serta alur kerja / proses bisnis yang

terjadi dalam melakukan simpan pinjam di koperasi. Perancangan sistem

menggunakan Unified Modelling Language (UML). Usecase menggambarkan

peran setiap aktor. Setiap aktor memiliki peran masing-masing yang dapat dilihat

pada Gambar 6.

Gambar 6 Usecase diagram

Gambar 6 adalah usecase diagram secara keseluruhan yang menjelaskan

keterlibatan dari tiap-tiap aktor. Terdapat lima aktor dalam sistem yaitu admin

sebagai aktor utama, petugas simpan pinjam, komisaris, petugas kasir dan pengguna

(anggota koperasi). Admin berperan untuk mengelola data petugas, data komisaris

dan kasir. Admin juga dapat melihat data pinjaman dan simpanan anggota koperasi.

Petugas simpan pinjam dapat mengelola data anggota, mengajukan pinjaman dari

anggota, serta melihat data pinjaman dan simpanan. Komisaris hanya dapat melihat

data permohonan pinjaman dari anggota koperasi. Komisaris memiliki wewenang

untuk menyetujui atau menolak pinjaman yang diajukan oleh anggota. Kasir

Tambah Staff

Lihat Data Staff

Hapus Data Staff

Lihat Data Komisaris

Tambah Komisaris

Hapus Data Komisaris

Lihat Data Anggota

Ubah Data Anggota Daftar Anggota

Hapus Data Anggota

Kelola Data Staff

<<extend>>

Kelola Data Komisaris

Setujui / Tolak Pinjaman

Ajukan Pinjaman

Kelola Anggota

Admin

Komisaris

Lihat Data Pengajuan Pinjaman

Lihat Data Simpanan

Verifikasi Pinjaman

Kasir

Cetak Kuitansi

<<extend>>

<<extend>>

<<extend>>

Lihat Data PinjamanDaftar Simpanan

<<extend>><<extend>>

Staff SiPi

Lihat Potongan Koperasi

Anggota

<<extend>>

<<extend>>

<<extend>>

<<extend>>

7

melayani pencairan dana pinjaman sehingga kasir dapat melihat data pinjaman yang

sudah disetujui oleh komisaris untuk melakukan validasi terhadap pinjaman

anggota koperasi. Serta mencetak tanda terima. User dapat mengajukan

permohonan pinjaman, mendaftarkan simpanan serta melihat potongan koperasi

dari simpanan dan pinjaman setiap bulannya.

Activity diagram menggambarkan alur aktivitas sistem dari tiap aktor

dimulai dari awal hingga akhir.

Gambar 7 Activity Diagram Pendaftaran Anggota Baru

Gambar 7 merupakan Activity diagram pendaftaran anggota baru. Petugas

yang akan mendaftarkan anggota baru harus login terlebih dahulu untuk masuk ke

halaman pegawai. Setelah masuk pegawai dapat memilih menu pendaftaran

anggota baru. Pegawai menginput data anggota baru kemudian diproses dan

dimasukkan ke database.

Start

Pilih Pendaftaran

anggota baru

Isi Form

Pendaftaran

Login

Masuk Halaman

Pegawai

Ya

Tidak

Tampil Form

Perndaftaran

Get data

Cek Username

dan Password

Insert ke

database

End

DatabaseSistem/ProgramPegawai

8

Gambar 8 Activity Diagram Permohonan Pinjaman

Activity diagram permohonan pinjaman dapat dilihat pada Gambar 8. User

dapat mengajukan sendiri melalui halaman user. Sebelum masuk halaman user ,

anggota perlu melakukan login terlebih dahulu. Setelah masuk, user dapat memilih

menu permohonan pinjaman. Maka akan muncul form permohonan pinjaman user

dimana user harus mengisi data pinjaman yang akan diajukan. Data yang diisi oleh

user akan di cek antara jumlah pinjaman dan gaji anggota. Jika angsuran lebih besar

dari gaji atau dengan kata lain gaji anggota tidak mencukupi untuk membayar

angsuran maka tidak dapat melakukan pinjaman. Jika gaji mencukupi untuk

membayar angsuran maka pinjaman akan di proses untuk dikirim ke komisaris.

Gambar 9 Activity Diagram Pemberian Dana Pinjaman

Pilih Menu

Permohonan Pinjaman

Isi Form Permohonan

Pinjaman

Start

Login

Menampilkan

Halaman Utama

Ya

Tidak

Menampilkan Form

Permohonan Pinjaman

Get Data Permohonan

Pinjaman

Periksa

Persyaratan

Batal

Ya

Tidak

Cek Username

dan Password

Insert ke

tb_pengajuan

End

DatabaseProgram/SistemUser

Pilih Data

Permohonan Pinjaman

Cari NRK dari data Pinjaman

yang akan dicairkan

Pemberian

dana pinjaman

Start

End

Login

Menampilkan

Halaman Utama

Menampilkan data

permohonan pinjaman

Get data Permohonan pinjaman

yang akan dicairkan

Tidak

Ya

Get NRK

Ada

Tidak

Cek Username

dan Password

Insert

tb_Pinjaman

Select Data pengajuan

pinjaman

DatabaseProgram / SistemKasir

9

Gambar 9 menggambarkan alur pada pemberian dana pinjaman. Pemberian

dana dilakukan oleh kasir dimana kasir terlebih dahulu akan melihat data pengajuan

pinjaman yang sudah disetujui oleh komisaris. Selanjutnya data pengajuan

pinjaman akan dimasukkan ke tabel pinjaman oleh kasir setelah dana diberikan.

Gambar 10 Class Diagram

Class diagram menggambarkan struktur dan deskripsi dari class serta

menggambarkan hubungan antara class yang satu dengan class yang lainnya. Class

diagram dapat dilihat pada Gambar 10 . Dalam class diagram terdapat lima entity

yang saling berelasi yaitu entity anggota, entity pinjaman, entity komisaris, entity

simpanan(SHU), dan entity bunga.

Tahapan berikutnya adalah pembuatan database dan aplikasi simpan

pinjam. Database dibuat dengan menggunakan MySQL. Aplikasi yang dibuat

berbasis web dengan menggunakan bahasa pemrograman PHP dan teknologi

responsive web design untuk tampilannya agar tampilan web menjadi lebih

dinamis. Tahap selanjutnya pada perancangan sistem adalah customer test drive

mock up dimana pada tahap ini aplikasi akan dievaluasi dan diuji coba. Aplikasi

diuji coba oleh beberapa orang dari anggota koperasi dan petugas koperasi. Jika

masih terdapat kesalahan maka akan dilakukan perbaikan.

Tahapan akhir adalah penulisan laporan setelah. Laporan ditulis setelah

didapatkan hasil dari sistem yang telah dirancang, dibuat, dan diuji coba.

10

4. Hasil dan pembahasan

Pada aplikasi yang dibuat terdapat 5 hak akses untuk setiap user yaitu

admin, petugas simpan-pinjam, kasir, komisaris dan user.

Kode Program 1 Insisialisasi Awal Halaman Web

Kode program 1 digunakan untuk inisialisali awal dalam pembuatan

halaman web. Kode ‘content="width=device-width’ digunakan untuk mengatur

lebar halaman agar mengikuti lebar layar. Kode ‘initial-scale=1’ digunakan untuk

menetapkan skala perbesaran awal yaitu 1.

Kode Program 2 CSS pada penerapan media queries

Kode program 2 merupakan css untuk mengatur page wrapper. Kode

program 2 merupakan penerapan dari media queries dimana terdapat pengaturan

halaman pada layar berukuran paling kecil 768px. Pemanggilan CSS dapat dilihat

pada kode program 3.

Kode Program 3 Pemanggilan CSS pada halaman web

Kode program 3 merupakan pemanggilan css dari kode program 2.

Pemanggilan css menggunakan tag div.

1. <!DOCTYPE html>

2. <html lang="en">

3. <head>

4. <meta charset="utf-8">

5. <meta http-equiv="X-UA-Compatible" content="IE=edge">

6. <meta name="viewport" content="width=device-width,

initial-scale=1">

1. @media(min-width:768px) {

2. #page-wrapper {

3. position: inherit;

4. margin: 0 0 0 250px;

5. padding: 0 30px;

6. border-left: 1px solid #e7e7e7;

7. }

8. }}

1. <div id="page-wrapper">

2. <div class="row">

3. <div class="col-lg-12">

4. <h1 class="page-

header">Permohonan Pinjaman</h1>

5. </div>

6. <!-- /.col-lg-12 -->

7. </div>

8. </div>

11

Kode Program 4 Perintah Pencarian Anggota Koperasi dari NRK yang Diketik

Kode Program 2 digunakan untuk mencari data anggota dari NRK yang

diinputkan. ‘$_GET['item']’ merupakan NRK anggota. Kemudian akan dicari

anggota yang memiliki NRK tersebut dalam tabel anggota. Setelah didapatkan

nama anggota, maka akan disimpan ke variabel nama untuk di tampilkan pada form

permohonan pinjaman pada Gambar 11.

Gambar 11 Tampilan Form Permohonan Pinjaman pada Layar Desktop

Gambar 11 merupakan tampilan form permohonan pinjaman yang dibuka

dengan menggunakan komputer desktop. Form permohonan diisi saat anggota akan

meminjam uang di koperasi. Anggota koperasi harus mengisi form tersebut dan

kemudian dikirim ke komisaris untuk meminta persetujuan dari komisaris.

1. include "Code_Koneksi.php"; 2. $value = $_GET['item']; 3. $query = "SELECT * FROM tb_anggota WHERE NRK like

'$value' ";

4. $jumlah = mysql_query($query); 5. $hasil = mysql_fetch_array($jumlah); 6. $nama =$hasil['Nama']; 7. $bag = $hasil['Bagian'];

12

Gambar 12 Tampilan Form Permohonan Pinjaman pada Layar Mobile

Gambar 12 merupakan tampilan form permohonan pinjaman yang dibuka

dengan menggunakan mobile. Pada Gambar 12 dapat dilihat bahwa tampilan web

menyesuaikan dengan lebar layar mobile. Berbeda dengan tampilan web yang

dibuka menggunakan desktop dengan mobile. Penerapan flexible grid terlihat pada

menu, dimana pada tampilan desktop menu berada di sebelah kiri form

permohonan, pada tampilan mobile menu berada di atas form permohonan.

Kode Program 5 Fungsi Insert Permohonan Pinjaman

K

1. <?php

2. include "Code_Koneksi.php";

3. $nrk = $_POST['nrk'];

4. $jml_pinjam = $_POST['jml_pinjam'];

5. $jml_cicilan = $_POST['jml_cicilan'];

6. $jml_angsuran2 = $_POST['jml_angsuran2'];

7. $bunga = $_POST['bunga'];

8. $keperluan = $_POST['keperluan'];

9. $gaji = $_POST['gaji'];

10. $query = mysql_query("INSERT INTO

`db_koperasi`.`tb_pengajuan_pinjaman` (`Kode` ,`NRK`

,`Jml_Pinjam` ,`Jangka_Waktu` ,`Bunga` ,`Gaji`

,`Angsuran`,`Keperluan` ,`Tanggal_Pengajuan`)VALUES (NULL ,

'$nrk', '$jml_pinjam', '$jml_cicilan', '$bunga ,'$gaji',

'$jml_angsuran2', '$keperluan', CURDATE());")or

die(mysql_error());

11. if($query)

12. {

13. header("location:Pengajuan_Pinjaman.php?message=success");

14. }

15. ?>

13

Kode Program 5 digunakan untuk memasukkan data permohonan pinjaman

yang diisikan ke dalam form pada Gambar 8 dan 9. Data dari form di kirim

menggunakan method post untuk di insert ke dalam tabel pengajuan pinjaman.

Gambar 13 Tampilan Data Permohonan Pinjaman pada Layar Desktop

Gambar 13 menggambarkan tampilan data permohonan pinjaman yang

diajukan anggota ke komisaris. Komisaris dapat melihat permohonan. Setiap

department memiliki komisaris yang berbeda. Data permohonan hanya dapat dilihat

dan disetujui oleh komisaris yang bersangkutan.

Gambar 14 Tampilan Data Permohonan Pinjaman pada Layar Mobile

Gambar 14 menggambarkan tampilan data permohonan pinjaman pada

layar mobile. Besarnya tabel dapat menyesuaikan dengan ukuran pada lebar layar

14

mobile. Halaman yang dibuka melaui mobile device juga terlihat rapi jika

menggunakan teknologi responsive web design.

Gambar 15 Tampilan Data Permohonan Pinjaman pada Aplikasi Desktop

Gambar 15 merupakan data permohonan pinjaman. Komisaris dapat

menyetujui atau melolak pinjaman dari anggota tersebut. Setelah permohonan

disetujui maka akan diproses di bagian kasir.

Gambar 16 Tampilan Pendaftaran Simpanan

Gambar 16 merupakan tampilan untuk mendaftarkan simpanan. Koperasi

primkopkar menyediakan jenis jenis simpanan yang termasuk dalam simpanan

jangka panjang dan simpanan jangka pendek.

Tahap pengujian dilakukan dengan menguji sistem/program menggunakan

black box serta pengujian dengan penilaian beberapa responden dari anggota dan

pengurus koperasi.

15

Tabel 1 Hasil pengujian Blackbox

No Fungsi Kondisi Hasil yg diharapkan Hasil Uji Status

1 Login

Username dan

password benar Login berhasil Login berhasil Valid

Username dan

password salah Login gagal Login gagal Valid

Username tidak

terdaftar Login gagal Login gagal Valid

2

Daftar

Anggota Form lengkap Berhasil input data

Berhasil input

data Valid

Form tidak lengkap

Peringatan lengkapi

form

Peringatan

lengkapi form Valid

NRK sudah terdaftar Pendaftaran gagal Pendaftaran gagal Valid

NRK belum terdaftar Berhasil input data

Berhasil input

data Valid

3

Pengajuan

Pinjaman Form lengkap Berhasil input data

Berhasil input

data Valid

Form tidak lengkap

Peringatan lengkapi

form

Peringatan

lengkapi form Valid

Jumlah cicilan <

Gaji Berhasil input data

Berhasil input

data Valid

Jumlah cicilan >

Gaji Pengajuan gagal Pengajuan gagal Valid

4

Persetujuan

Pinjaman

Permohonan

disetujui

Pemberitahuan ke

pemohon

Pemberitahuan ke

pemohon Valid

oleh

komisaris

Permohonan dikirim

ke bag kasir

Permohonan

dikirim ke bag kasir

Permohonan ditolak

Pemberitahuan ke

pemohon

Pemberitahuan ke

pemohon Valid

5

Penerimaan

Dana

Pinjaman Cetak kuitansi Kuitansi tercetak Kuitansi tercetak Valid

Berdasarkan pengujian blackbox pada tabel 1 dapat dilihat bahwa aplikasi

dapat berjalan dengan baik. Fungsi-fungsi yang ada didalamnya sudah diuji dan

mendapatkan hasil yang sesuai dengan yang diharapkan. Tahap pengujian

selanjutnya adalah dengan menguji coba aplikasi tersebut kepada beberapa

responden. Data diperoleh dari pendapat responden mengenai aplikasi yang telah

dirancang dan dibuat. Perhitungan kuisioner menggunakan likert scale. Terdapat 5

pernyataan dan dari setiap pernyataan terdapat 5 pilihan jawaban yaitu Sangat

Setuju (SS) dengan bobot skor 5, Setuju (S) dengan bobot skor 4, Netral (N) dengan

bobot skor 3, Tidak Setuju (TS) dengan bobot skor 2, dan Sangat Tidak Setuju

(STS) dengan bobot skor 1.

16

Tabel 2 Daftar Pertanyaan Kuisioner dan Jawaban Responden

No Pernyataan Skor

SS S N TS STS Total

1 Tampilan web dapat menyesuaikan 19 11 30

terhadap besarnya layar pada

Desktop(komputer) / Mobile device

2 Tampilan web mudah dipahami 12 16 2 30

3 Fungsi fungsi dalam web mudah dipahami 10 17 3 30

4 Web dapat memudahkan anggota koperasi 9 19 2 30

5 Aplikasi web simpan pinjam perlu 13 16 1 30

dikembangkan

Pada penyataan 1 didapat 19 responden menjawab sangat setuju, dan 11

responden menjawab setuju. Dari jawaban responden tersebut akan dihitung

sebagai berikut :

Responden yang menjawab sangat setuju (19) = 19 x 5 = 95

Responden yang menjawab setuju (11) = 11 x 4 = 44

Responden yang menjawab netral (0) = 0 x 3 = 0

Responden yang menjawab tidak setuju (0) = 0 x 2 = 0

Responden yang menjawab tidak sangat setuju (0) = 0 x 1 = 0

Total Skor = 95 + 44 + 0 + 0 + 0 = 139

Untuk mendapatkan hasil perhitungan, harus diketahui dulu skor tertinggi

(X) dan angka terendah (Y) dengan rumus sebagai berikut :

Y = 5 x 30 (Bobot tertinggi dikalikan jumlah responden) = 150

X = 1 x 30 (Bobot terendah dikalikan jumlah responden) = 30

Jumlah skor tertinggi untuk item SANGAT SETUJU ialah 5 x 30 = 150,

sedangkan item SANGAT TIDAK SETUJU ialah 1 x 30 = 30. Jadi, jika total skor

responden di peroleh angka 139, maka penilaian interpretasi responden pada

pernyataan nomor 1 dapat dihitung dengan menggunakan rumus index % dimana

rumus index % = Total Skor / Y x 100% maka dapat dihitung sebagai berikut:

rumus index % = 139 / 150 x 100

= 92,67%

Pada pernyataan nomor 1 didapat persentase responden senesar 92,7%.

Pernyataan nomor 2 jika dihitung menggunakan rumus yang sama didapat

presentase responden sebesar 86,67%. Pernyataan nomor 3 didapat presentase

sebesar 84,67%, pernyataan nomor 4 didapat presentase 84,67%, dan pernyataan

nomor 5 didapat persentase responden sebesar 88%. Persentase hasil dari jawaban

beberapa responden tersebut didapat bahwa ada tanggapan yang basik dari user

terhadap aplikasi web yang telah dibuat.

17

5. Simpulan

Dari penelitian yang dilakukan didapat simpulan bahwa aplikasi yang

dibangun dapat membantu kegiatan simpan pinjam yang ada di koperasi

Primkopkar Manunggal. Sehingga aplikasi web ini dapat diterapkan ke dalam

koperasi. Dengan adanya aplikasi web simpan pinjam koperasi ini, anggota

koperasi lebih mudah dalam mengajukan pinjaman dan simpanan. Komisaris dan

petugas koperasi juga lebih mudah dalam mengelola data. Web yang didesain

menggunakan Responsive Web Design dapat beradaptasi dengan optimal ketika di

akses menggunakan perangkat dengan ukuran layar yang berbeda. Penyesuaian

ukuran web terhadap ukuran layar perangkat yang digunakan dapat memberikan

kenyamanan kepada pengguna pada saat mengakses web tersebut. Sehingga

aplikasi ini dapat dengan mudah diakses kapanpun dan dimanapun melalui

perangkat yang tersedia. Saran untuk pengembangan aplikasi ini adalah perlu dibuat

dari sektor atau bagian koperasi yang lain karena aplikasi ini terbatas hanya pada

bagian simpan pinjam.

6. Daftar Pustaka

[1] Syachbana, Akib Zulkarnain.2013. Perancangan Website Menggunakan

Responsive Web Design, Jurnal Sigmata.

[2] Wiriati S,Aman Sendi, Fahrudin Tora.2010. Sistem Informasi Simpan

Pinjam Berbasis Web Pada Koperasi Simpan Pinjam Tirta, Bandung:Politeknik

Telkom Bandung.

[3] Reza Fadlan, 2014, Prototype Web Responsive Design pada UIN Syarif

Hidayatullah Jakarta Menggunakan Framework Bootstrap, Jakarta: UIN Syarif

Hidayatullah

[4] Marcote Ethan, 2011, Responsive Web Design, New York:A Book Apart

[5] Pressman Roger, 2001, Rekayasa Perangkat Lunak Pendekatan

Praktisi,Yogyakarta:Andi.