perancangan aplikasi simpan pinjam koperasi...
TRANSCRIPT
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)[email protected] 2)[email protected]
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.