T1 672011032 Full text
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
“tudi 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.
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
1
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.
2
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].
3
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
4
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 masingmasing 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
5
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.
Verifikasi Pinjaman
Cetak Kuitansi
Lihat Data Staff
Kasir
Tambah Staff
Kelola Data Staff
Anggota
Ajukan Pinjaman
Lihat Data Pinjaman
Daftar Simpanan
Lihat Potongan Koperasi
Hapus Data Staff
Lihat Data Pengajuan Pinjaman
Staff SiPi
Admin
Tambah Komisaris
Lihat Data Simpanan
Komisaris
Setujui / T olak Pinjaman
Kelola Anggota
Kelola Data Komisaris
Lihat Data Anggota
Hapus Data Komisaris
Hapus Data Anggota
Lihat Data Komisaris
Ubah Data Anggota
Daftar Anggota
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
6
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.
Pegaw ai
Sistem/Program
Login
Start
Database
Cek Username
dan Password
Tidak
Ya
Masuk Halaman
Pegawai
Pilih Pendaftaran
anggota baru
Tampil Form
Perndaftaran
Isi Form
Pendaftaran
Get data
Insert ke
database
End
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.
7
User
Program/Sistem
Database
Cek Username
dan Password
Login
Start
Tidak
Ya
Pilih Menu
Permohonan Pinjaman
Menampilkan
Halaman Utama
Isi Form Permohonan
Pinjaman
Menampilkan Form
Permohonan Pinjaman
Get Data Permohonan
Pinjaman
Periksa
Persyaratan
Ya
Insert ke
tb_pengajuan
Tidak
End
Batal
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.
Kasir
Program / Sistem
Login
Database
Cek Username
dan Password
Start
Tidak
Ya
Pilih Data
Permohonan Pinjaman
Menampilkan
Halaman Utama
Cari NRK dari data Pinjaman
yang akan dicairkan
Menampilkan data
permohonan pinjaman
Get NRK
Select Data pengajuan
pinjaman
Tidak
Ada
Get data Permohonan pinjaman
yang akan dicairkan
Insert
tb_Pinjaman
Pemberian
dana pinjaman
End
Gambar 9 Activity Diagram Pemberian Dana Pinjaman
8
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.
9
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
1.
2.
3.
4.
5.
6.
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
1.
2.
3.
4.
5.
6.
7.
8.
@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
}
}}
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
1.
2.
3.
4.
5.
6.
7.
8.
Permohonan Pinjaman
Kode program 3 merupakan pemanggilan css dari kode program 2.
Pemanggilan css menggunakan tag div.
10
Kode Program 4 Perintah Pencarian Anggota Koperasi dari NRK yang Diketik
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'];
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.
11
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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
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
“tudi 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.
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
1
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.
2
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].
3
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
4
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 masingmasing 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
5
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.
Verifikasi Pinjaman
Cetak Kuitansi
Lihat Data Staff
Kasir
Tambah Staff
Kelola Data Staff
Anggota
Ajukan Pinjaman
Lihat Data Pinjaman
Daftar Simpanan
Lihat Potongan Koperasi
Hapus Data Staff
Lihat Data Pengajuan Pinjaman
Staff SiPi
Admin
Tambah Komisaris
Lihat Data Simpanan
Komisaris
Setujui / T olak Pinjaman
Kelola Anggota
Kelola Data Komisaris
Lihat Data Anggota
Hapus Data Komisaris
Hapus Data Anggota
Lihat Data Komisaris
Ubah Data Anggota
Daftar Anggota
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
6
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.
Pegaw ai
Sistem/Program
Login
Start
Database
Cek Username
dan Password
Tidak
Ya
Masuk Halaman
Pegawai
Pilih Pendaftaran
anggota baru
Tampil Form
Perndaftaran
Isi Form
Pendaftaran
Get data
Insert ke
database
End
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.
7
User
Program/Sistem
Database
Cek Username
dan Password
Login
Start
Tidak
Ya
Pilih Menu
Permohonan Pinjaman
Menampilkan
Halaman Utama
Isi Form Permohonan
Pinjaman
Menampilkan Form
Permohonan Pinjaman
Get Data Permohonan
Pinjaman
Periksa
Persyaratan
Ya
Insert ke
tb_pengajuan
Tidak
End
Batal
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.
Kasir
Program / Sistem
Login
Database
Cek Username
dan Password
Start
Tidak
Ya
Pilih Data
Permohonan Pinjaman
Menampilkan
Halaman Utama
Cari NRK dari data Pinjaman
yang akan dicairkan
Menampilkan data
permohonan pinjaman
Get NRK
Select Data pengajuan
pinjaman
Tidak
Ada
Get data Permohonan pinjaman
yang akan dicairkan
Insert
tb_Pinjaman
Pemberian
dana pinjaman
End
Gambar 9 Activity Diagram Pemberian Dana Pinjaman
8
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.
9
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
1.
2.
3.
4.
5.
6.
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
1.
2.
3.
4.
5.
6.
7.
8.
@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
}
}}
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
1.
2.
3.
4.
5.
6.
7.
8.
Permohonan Pinjaman
Kode program 3 merupakan pemanggilan css dari kode program 2.
Pemanggilan css menggunakan tag div.
10
Kode Program 4 Perintah Pencarian Anggota Koperasi dari NRK yang Diketik
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'];
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.
11
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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.