Konferensi Nasional Ilmu Sosial & Teknologi (KNiST) Maret 2016, pp. 63~69 PERANCANGAN SISTEM INFORMASI BERBASIS WEB PADA BANK SAMPAH RESIK BECIK SLEMAN 63 Alfian Priantoro 1, Paulus Tofan Rapiyanta 2 1 AMIK BSI YOGYAKARTA e-mail: alfian.priantoro@yahoo.com 2 AMIK BSI YOGYAKARTA e-mail: tofanpaulus@gmail.com Abstrak Teknologi informasi berkembang cepat, salah satunya diterapkan pada bank sampah resik becik. Bank sampah resik becik sleman adalah bank sampah yang sistem informasinya masih manual, maka dibutuhkan sebuah teknologi informasi yang menunjang dan memberikan kemudahan untuk pengelola maupun pengguna. Penulis mencoba membuat tugas akhir mengenai perancangan sistem informasi berbasis web pada bank sampah resik becik sleman yang sampai saat ini belum terkomputerisasi. Dalam pembuatan website bank sampah resik becik penulis menggunakan beberapa metode penelitian, yaitu metode waterfall, wawancara, observasi, studi pustaka dan menggunakan software Dreamweaver CS6, PHP MyAdmin, Adobe Photoshop CS, XAMPP, PHP, CSS, Apache. Pada analisa kebutuhan yang penulis buat pada web bank sampah resik becik, admin dapat mendaftarkan nasabah, posting gambar dan berita. Sedangkan untuk user sendiri dapat melihat saldo terakhir, melakukan permohonan penarikan, dan melakukan testimoni. Pengujian website yang dilakukan penulis menggunakan pengujian black box. Dengan adanya website bank sampah ini user dapat mengakses website dan mendapatkan informasi dimana saja yang terhubung dengan jaringan internet atau online dan juga membantu pengelola dalam pelayanan. Keywords: Sistem informasi, website, Bank sampah, Resik Becik 1. Pendahuluan Bank Sampah Resik Becik adalah salah satu percontohan pengelolaan sampah di kelurahan Sendangarum, sebelum pengembangan di semua desa kecamatan Minggir. Tujuan bank sampah resik becik adalah menjadi media agar masyarakat sadar akan menjaga lingkungan dan dapat meningkatkan kesejahteraan masyarakat khususnya bagi para nasabahnya. Demi tercapainya tujuan bank sampah resik becik, pengelola harus memperhatikan masalah pengelolaan informasi khususnya nasabah dan juga masyarakat umum. Selama ini bank sampah resik becik memiliki beberapa masalah dalam pengelolaan informasi dan pengelolaan data. Berdasarkan masalah tersebut, maka peneliti ingin membuat sebuah perancangan sistem informasi berbasis website yang berisi informasi tentang bank sampah dan juga media pelayanan informasi saldo nasabah bank sampah resik becik sleman. Diharapkan nantinya adanya website bank sampah dapat bermanfaat bagi bank sampah tersebut dan juga bagi masyarakat. Ruang lingkup perancangan website Bank Sampah Resik Becik adalah; 1. Website ini dapat digunakan oleh nasabah (Member) dan pengguna umum (User), serta pengelola (Administrator) 2. User hanya dapat melihat menu profil, berita, galleri foto kegiatan, daftar nasabah, daftar jenis sampah yang dapat ditabung 3. Member dapat masuk halaman member yang menunya form penarikan uang, cek saldo, dan kirim testimoni kepada administrator. 4. Administrator dapat mengelola keseluruhan informasi di dalam website 5. Sistem yang dibuat untuk bank sampah resik becik berbasis web. Bahasa program yang digunakan adalah HTML, PHP, Java Script, dan MySQL. Sistem Diterima 9 Januari 2016 ; Revisi 18 Februari 2016; Disetujui 15 Maret 2016
Menurut Lucas dalam Riyanto dkk (2009:21) Sistem adalah suatu pengorganisasian yang saling berkaitan, saling tergantung dan terintegrasi dalam kesatuan variable atau komponen. Menurut Kristanto (2008:1) Suatu sistem adalah jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau menyelesaikan suatu sasaran tertentu. Ardhana dan Paryati (2008:2) menyimpulkan bahwa Sistem merupakaan sekelompok elemen-elemen yang saling berhubungan, dan bertanggung jawab melakukan proses input sehingga menghasilkan output. Informasi Menurut McLeod dan Schell (2007:12) Informasi adalah data yang telah diproses atau data yang memiliki arti bagi penerima dan dapat berupa fakta, suatu nilai yang bermanfaat. Sedangkan menurut Jugiyanto dalam Riyanto dkk (2009:23) menjelaskan bahwa Informasi adalah data yang diolah menjadi bentuk yang lebih berguna dan lebih bermanfaat bagi yang menerima. Sistem Informasi Menurut Sutabri (2012:38) menyimpulkan bahwa sistem informasi adalah suatu sistem didalam suatu organisasi yang dipertemukan kebutuhan pengolahan transaksi harian yang mendukung fungsi operasi organisasi yang bersifat manajerial dengan kegiatan strategi dari suatu organisasi untuk dapat menyediakan laporan-laporan yang diperlukan oleh pihak luar tertentu. Menurut Kristanto (2008:12) sistem informasi merupakan kumpulan dari perangkat keras dan perangkat lunak komputer serta perangkat manusia yang akan mengelola data menggunakan perangkat keras dan perangkat lunak tersebut. Entity Relationship Diagram (ERD) Entity Relationship Diagram (ERD) merupakan teknik yang digunakan untuk memodelkan kebutuhan data dari suatu organisasi, biasanya oleh System Analys dalam tahap analis persyaratan proyek pengembangan system. (Brady dan Loonam, 2010). Model Entity Relationship Diagram yang berisi komponen-komponen himpunan entitas dan himpunan relasi yang masing-masing dilengkapi dengan atribut-atribut yang mempresentasikan seluruh fakta dari dunia nyata (Fathansyah, 2007). Struktur Navigasi Struktur navigasi adalah struktur bagaimana suatu halaman dihubungkan dengan halaman lain (Binanto, 2010). Terdapat empat macam struktur navigasi, antara lain linear model, hierarkis model, nonlinear model, dan komposit model. a. Stuktur Navigasi Linear Pengguna akan melakukan navigasi secara berurutan, dari frame atau byte informasi yang satu ke yang lain. b. Struktur Navigasi Hirarki Struktur dasar ini juga disebut struktur linear dengan percabangan karena pengguna melakukan navigasi di sepanjang cabang pohon struktur yang terbentuk oleh logika isi. c. Struktur Navigasi Nonlinear Pengguna akan melakukan navigasi dengan bebas melalui isi proyek dengan tidak terkait dengan jalur yang sudah ditentukan sebelumnya. d. Struktur Navigasi Campuran Pengguna akan melakukan navigasi dengan bebas (secara non-linear), tetapi terkadang dibatasi presentasi linear film atau informasi penting dan pada data yang paling terorganisasi secara logis pada suatu hierarki. Website World Wide Web (WWW), sering disingkat dengan web, adalah suatu layanan di dalam jaringan yang berupa ruang informasi (Raharjo, 2011). World Wide Web atau yang dikenal dengan istilah web adalah suatu sistem yang berkaitan dengan dokumen yang digunakan sebagai media untuk menampilkan teks, gambar, multimedia dan lainnya dalam jaringan internet (Sibero, 2011) Basis Data Basis data terdiri atas 2 kata, yaitu Basis dan Data. Basis kurang lebih dapat diartikan sebagai markas atau gudang, tempat bersarang atau berkumpul. Sedangkan Data adalah representasi fakta dunia nyata mewakili suatu objek seperti manusia (Pegawai, siswa, pembeli, pelanggan, barang, hewan, peristiwa, konsep, keadaan, dan sebagainya, yang direkam dalam bentuk angka, huruf, simbol, teks, gambar, bunyi, atau kombinasinya. (Fathansyah, 2007). Basis data sendiri dapat didefinisikan dalam sejumlah sudut pandang seperti: 1. Himpunan Kelompok data (arsip) yang saling berhubungan yang diorganisasi sedemikian rupa agar kelak dapat dimanfaatkan kembali dengan cepat dan mudah. 64
2. Kumpulan data saling berhubungan yang disimpan secara bersama sedemikian rupa dan tanpa pengulangan yang tidak perlu, untuk memenuhi berbagai kebutuhan. 3. Kumpulan file atau tabel atau arsip yang saling berhubungan yang disimpan dalam media penyimpanan elektronik. 2. Metode Penelitian Pengembangan Sistem Siklus hidup perangkat lunak merupakan suatu proses desain atas program yang akan dibangun untuk mendapatkan hasil yang workable. (Sudarmawan dan Ariyus, 2007). Metode perancangan software berdasarkan teori model waterfall adalah tahapan utama yang langsung mencerminkan dasar pembangunan kegiatan, berikut ini adalah tahapannya: (Sudarmawan dan Ariyus, 2007) Requirements definition System and software design Implementation and unit testing Integration and system testing Operation and maintenance Gambar 1. Diagram Model Air Terjun 1. Requirements Analysis Definition Mengumpulkan apa yang dibutuhkan secara lengkap untuk kemudian dianalisis guna mendefinisikan kebutuhan yang harus dipenuhi oleh program yang akan dibangun. 2. System and Software Design Setelah apa yang dibutuhkan selesai dikumpulkan dan sudah lengkap maka desain kemudian dikerjakan. 3. Implementation and Unit Testing Desain program diterjemahkan ke dalam kode-kode dengan menggunakan bahasa pemrograman yang sudah ditentukan. 4. Integration and System Testing Penyatuan unit-unit program untuk kemudian diuji secara keseluruhan (system testing). 5. Operation and Maintenance Mengoperasikan program di lingkungannya dan melakukan pemeliharaan, seperti penyesuaian atau perubahan untuk adaptasi dengan situasi yang sebenarnya. 3. Pembahasan Analisa Kebutuhan Pengguna Tahap awal perancangan sistem adalah menganalisa kebutuhan di bank sampah resik becik sleman. Peneliti membuat analisa kebutuhan yang terdiri dari kebutuhan fungsional dan kebutuhan non-fungsional. 1. Kebutuhan Fungsional Pada sistem initerdapat 2 pengguna yaitu Admin dan User. Kebutuhan admin meliputi; a. Admin dapat melihat, menghapus dan mencari data dalam daftar penarikan uang. b. Admin dapat menambah data sampah dan harga sampah yang dapat ditabung. c. Admin dapat melihat, mencari dan menghapus data pada daftar testimoni yang dilakukan user yang sudah member. d. Admin dapat mendaftarkan, melihat, mencari, menghapus, dan mengubah data daftar anggota atau member. e. Admin dapat menambahkan atau mengunggah foto kegiatan yang akan ditampilkan pada halaman galeri user. f. Admin dapat melihat, mencari, dan menghapus data dari daftar galleri. g. Admin dapat menambah berita yang akan ditampilkan pada halaman user. h. Admin dapat melihat, mencari, dan menghapus data dari daftar portal berita yang ada. Sedangkan kebutuhan user meliputi; a. User dapat melihat dan mencari daftar member atau anggota yang sudah terdaftar. b. User dapat melihat galleri foto. c. User dapat melihat daftar jenis-jenis sampah yang dapat ditabung. d. User dapat melihat beberapa postingan berita. e. User yang sudah menjadi member dapat melakukan pengajuan penarikan uang melalui menu penarikan uang, f. User yang sudah menjadi member dapat mengecek saldo melalui menu cek saldo dan mencari data saldo menggunakan kata kunci nama atau nomor rekening milik member. g. User juga dapat mengirim testimoni kepada administrator 2. Kebutuhan Non-Fungsional Analisa kebutuhan non fungsional untuk menghasilkan spesifikasi masukan-masukan yang dibutuhkan oleh sistem dan proses yang dibutuhkan untuk pengolahan masukan sehingga menghasilkan keluaran yang diinginkan. Kebutuhan non-fungsional meliputi; 65
a. Operasional, seperti perangkat kerja dan browser yang dibutuhkan b. Keamanan, seperti adanya password admin Informasi, seperti peringatan atau pesan notifikasi tentang suatu proses Perancangan Perangkat Lunak 1. Perancangan Antarmuka Rancangan antar muka pada website yang dibuat terbagi menjadi dua halaman antara lain halaman yang digunakan user (umum dan member) dan halaman yang digunakan admin. Pada halaman user umum digunakan untuk melihat daftar galleri foto, portal berita, daftar sampah, daftar anggota. Pada halaman user member dapat mengisi formulir online penarikan uang, cek saldo, dan mengirim testimonial, sedangkan pada halaman admin dapat digunakan untuk melihat daftar anggota, daftar testimoni, daftar sampah, daftar berita, daftar gambar, dan dapat tambah, ubah juga hapus data. Admin harus melakukan login terlebih dahulu sebelum masuk ke halaman admin. Rancangan antarmuka halaman login admin ditunjukkan pada Gambar 2 sebagai berikut. Gambar 2. Rancangan Antarmuka login Admin Admin yang telah berhasil melakukan login akan masuk ke halaman kerja admin. Pada halaman ini,admin dapat mengelola informasi yang terdapat pada sistem melalui menumenu yang ditampilkan secara horizontal. Tampilan halaman admin ini relatif sama untuk semua menu. Faktor pembedanya adalah di bagian isi utama yang akan berubah sesuai menu yang dipilih. Sebagai conroh, rancangan antarmuka menu gallery ditunjukkan pada Gambar 3. Gambar 3. Rancangan Antarmuka Menu Gallery Secara garis besar, hanya terdapat 2 bagian utama pada halaman admin yaitu; Menu Vertikal di sisi atas dan isi utama di bawah menu. Pengguna umum (user) ataupun Anggota (member) memiliki tampilan antarmuka yang sama. Faktor pembedanya adalah menu khusus yang hanya ada bagi anggota, seperti ; saldo dan menu penarikan uang. Rancangan antarmuka user ditunjukkan pada Gambar 4. Gambar 4. Rancangan antarmuka user Navigasi berisi menu pilihan bagi user. Untuk pengguna yang menjadi member harus melakukan login terlebih dahulu jika ingin mengakses menu member. Rancangan antarmuka halaman login member sama persis dengan rancangan antarmuka login admin. Perbedaannya terletak pada judul di header, dan halaman yang akan diakses selanjutnya. Pada gambar 5 ditunjukkan salah satu rancangan antarmuka halaman member untuk menu Penarikan Uang Nasabah. Gambar 5. Rancangan antarmuka member untuk menu penarikan uang nasabah 2. Perancangan Basis Data Perancangan basis data menghasilkan pemetaan tabel-tabel yang diwujudkan dengan Entity Relationship Diagram (ERD) dan Logical Relationship Structure (LRS) 66
sebagai berikut: 3. Perancangan Struktur Navigasi Perancangan struktur navigasi untuk pengguna ditunjukkan pada gambar 8. Gambar 8. Perancangan navigasi user Gambar 6. Perancangan Basis data dengan ERD Perancangan dengan Entity Relationship Diagram (ERD) yang ditunjukkan pada Gambar 6 kemudian dilanjutkan dengan membuat Logical Relationship Structure (LRS). Pada dasarnya, LRS hampir sama dengan ERD, hanya saja berbeda dalam penyajian gambarnya. Atribut-atribut sebuah tabel data dituliskan berurutan di bawah nama tabel datanya, lengkap dengan tipe data dan panjang datanya. Hal ini menunjukkan bahwa LRS lebih fokus pada detail data yang terdapat pada masingmasing tabel. Perancangan Basis data dengan LRS ditunjukkan pada Gambar 7 sebagai berikut. Pada Gambar 8 terlihat bahwa user yang akan mengakses menu member dapat melakukan login user pada menu navigasi yang paling bawah. Perancangan navigasi untuk admin memiliki sedikit perbedaan dengan pengguna umum (user) mengingat wewenang lebih yang diberikan. Menu yang tertampil pada halaman Admin berbeda dengan yang tertampil pada halaman user. Tidak semua menu yang dapat dikelola oleh admin tertampil pada halaman user. Perancangan struktur navigasi untuk pengelola (admin) ditunjukkan pada gambar 9. Gambar 7. Perancangan Basis data dengan LRS Gambar 9. Perancangan navigasi admin 67
Implementasi Tahap implementasi adalah penerapan perancangan yang telah dilakukan sebelumnya. 1. Implementasi Perancangan Antarmuka Pada tahap perancangan telah didesain tampilan antarmuka untuk pengguna umum (user) maupun anggota (member) dan pengelola (admin). Pada tahap implementasi inipun dilakukan pembagian sesuai dengan penggunanya. Tampilan awal untuk kedua pengguna ini dibedakan sesuai kewenangan dan informasi yang bisa diakses oleh user ataupun admin. Jika ingin masuk sebagai admin harus terlebih dahulu membuka halaman login untuk admin seperti yang ditunjukkan pada gambar 10. mengubah atau bahkan menghapus data yang ada. Gambar implementasi halaman index user ditunjukkan pada Gambar 12. Gambar 12. Implementasi halaman index user Pengguna umum (user) dapat melihat informasi pada halaman ini dengan memilih menu yang tersedia. Jika user tersebut merupakan nasabah Bank sampah dan sudah terdaftar sebagai member maka dapat melakukan login member. Implementasi Tampilan halaman login member ditunjukkan pada Gambar 13. Gambar 10. Implementasi Tampilan Halaman untuk login Admin Setelah proses validasi dilakukan dan pengguna ini memiliki usename dan password yang benar, maka pengguna ini dapat masuk ke halaman website sebagai admin dan dapat mulai melakukan pengelolaan. Admin dapat melihat, mengubah, bahkan menghapus isi data di website. Sebagai contoh halaman untuk menu gallery yang telah dirancang terlebih dahulu pada gambar 3, diimplementasikan seperti yang terlihat pada Gambar 11. Gambar 13. Implementasi Tampilan login member Member yang berhasil melakukan login akan masuk ke halaman member. Salah satu menu yang dapat diakses member adalah Penarikan uang nasabah. Tampilan halaman Penarikan uang nasabah bank sampah ditunjukkan pada Gambar 14 sebagai berikut. Gambar 11. Implementasi halaman menu Gallery Implementasi website untuk halaman user ditunjukkan pada gambar 12. Tampilan isi lebih bersifat informasi dan user tidak dapat Gambar 14. Implementasi Tampilan halaman Penarikan Uang nasabah 68
4. Simpulan Berdasarkan perancangan website Bank Sampah Resik Becik di Sleman dapat diambil kesimpulan: 1. Website ini memudahkan user dalam mendapat informasi yang lebih update mengenai sampah, bank sampah, data diri member dan pengecekan saldo. 2. Melalui website ini, user dapat mengakses informasi dimana saja dan kapan saja 3. Website ini dapat memberikan solusi pengelolaan sistem informasi. bank sampah. Sutabri, Tata. (2012). Analisis Sistem Informasi. Yogyakarta: Andi Referensi Ardhana, Yosef Murya Kusuma dan Paryati. (2008). Sistem Informasi. Yogyakarta: Ardana Media. Binanto, Iwan. (2010). Multimedia Digital dasar Teori dan Pengembangannya. Yogyakarta: CV.Andi Offset Brady, M.,& Loonam, J. (2010). Exploring the use of enttity-relationship diagramming as a technique to support grounded theory inquiry. Bradford:Emerald Group Publishing Fathansyah. (2007). Basis Data. Bandung: Informatika Kristanto, Andri. (2008). Perancangan Sistem Informasi dan Aplikasinya. Yogyakarta: Gava Media. McLeod Raymond Jr, dan George P. Schell. (2007). Sistem Informasi Manajemen. Edisi 9. Jakarta: PT. Index Raharjo, Budi. (2011). Membuat Database menggunakan mysql. Bandung: Informatika Riyanto, Putra PE, Indelarko H. (2009). Pengembangan Aplikasi Sistem Informasi Geografi berbasis desktop dan web. Yogyakarta: Gava Media Sibero, Alexander F. K. (2011). Kitab Suci Web Programing. Yogyakarta: MediaKom Sudarmawan, & Ariyus, D. (2007). Interaksi Manusia dan Komputer. Yogyakarta: Andi Offset. 69