T1__Full text Institutional Repository | Satya Wacana Christian University: Sistem Informasi Berbasis Web Menggunakan Twitter Boostrap pada UKM Batik Efrata Print T1 Full text
Sitem Informasi Berbasis Web Menggunakan Twitter Boostrap
pada UKM Batik Efrata Print
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Oleh:
Benyamin Natanael Hartanto
NIM: 672010241
Program Studi Teknik Informatika
Fakultas Teknologi Informasi Universitas
Kristen Satya Wacana Salatiga
Agustus 2017
Sistem Informasi Berbasis Web Menggunakan Twitter Boostrap pada
UKM Batik Efrata Print
1)
Benyamin Natanael Hartanto, 2)Ramos Somya, 3) Christine Dewi
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50771, Indonesia
1)
Email: 672010241@student.uksw.edu, 2) ramos.somya@staff.uksw.edu
3)
christine.dewi@staff.uksw.edu
Abstract
SMES in Indonesia still using traditional system in administration and product selling. Based
on research in SMES Batik Efrata Print, the owner is having problem in using media for promote
it’s products, and consumers who want to do reservations must come directly to the SMES location to
get information of products and the batik fabrics reservations process. The goal of this research is
construct a web with information system using PHP and library bootstrap. Development system
method in this research is prototyping method, there is a process of evaluation in consumers
satisfaction. Based on the results of the survey concluded that web application are being help for
craftsman and the owner of smes to promote its products into web and assist with the reservations
products, and beneficial for those who want to known the result the product of the smes.
Keywords:SMES,PHP,Bootstrap
Abstrak
UKM di Indonesia masih menggunakan sistem tradisional dalam administrasi maupun
penjualan produk. Berdasarkan penelitian di UKM Batik Efrata Print, pemilik mengalami kesulitan
dalam menggunakan media untuk mempromosikan produk-produknya, dan konsumen yang ingin
melakukan pemesanan harus langsung datang ke tempat UKM tersebut, untuk mendapatkan informasi
produk dan proses pemesanan kain batik. Penelitian ini bertujuan untuk membangun sebuah web
dengan sistem informasi menggunakan PHP dan library Bootstrap. Metode pengembangan sistem
yang digunakan pada penelitian ini adalah metode prototyping, dimana terdapat proses evaluasi
terhadap kepuasaan konsumen. Berdasarkan hasil dari penelitian tersebut disimpulkan bahwa aplikasi
Web ini membantu pengrajin dan pemilik UKM dalam mempromosikan produk-produknya kedalam
Web, membantu proses pemesanan produk, serta bermanfaat bagi konsumen yang ingin mengetahui
hasil produk dari UKM tersebut.
Kata Kunci: UKM,PHP, Bootstrap
1
Mahasiswa Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
Staf Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
3
Staf Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
2
1
1. Pendahuluan
Usaha Kecil Menengah atau yang biasa di singkat UKM merupakan sebuah istilah yang
mengacu kepada kegiatan ekonomi rakyat bersekala kecil, dengan bidang usaha yang
mayoritas merupakan usaha kecil. UKM di Indonesia yang masih menggunakan sistem
tradisional dalam menjalankan sistem administrasi maupun sistem penjualan produk
unggulannya. Seperti yang terjadi di UKM Efrata Print di daerah Solo, mayoritas masih
berskala kecil dan belum mulai merambah ke sistem komputerisasi baik untuk sistem
administrasi maupun sistem penjualan produk mereka. Hal tersebut terjadi karena beberapa
kendala seperti; masalah biaya atau anggaran, pekerja yang belum memahami internet,
kapasitas produksi yang masih kecil, serta tempat showroom yang belum memadai sehingga
pihak pengrajin merasa belum mampu untuk memasarkan produk-produk mereka di internet.
Karena UKM masih belum mempunyai Web sebagai media pemasaran produk mereka, dan
masih menggunakan pemasaran dengan cara lama seperti memberikan kartu nama dan orang
harus datang ke lokasi UKM tersebut berada.
UKM Batik Efrata Print yang terletak di Jalan Gringsing no.21 Gambiran Desa Cemani
merupakan salah satu UKM sentral pembuatan batik printing, yaitu proses membatik dengan
menggunakan klise (kasa) untuk mencetak motif kain batik. Dalam proses pewarnaannya
menggunakan pasta yang telah di campur pewarna, kemudian di cetak sesuai motif telah di
buat. Pabrik ini memliki luas bangunan 750 meter persegi. UKM ini memiliki 15 orang
pekerja yang memiliki jobdesk masing-masing mulai dari proses pencampuran warna batik,
hingga proses batik di seleksi untuk nantinya akan dijual kepada konsumen yang memesan
batik. Produksi di UKM bisa mencapai 6000 meter kain perminggunya. Untuk proses promosi
di UKM terbilang masih sangat sederhana, karena konsumen yang ingin memesan harus
datang langsung ke tempat pembuatan kain batik.
Berdasarkan hasil analisis penelitian yang dilakukan di UKM Efrata Print, dapat
diambil kesimpulan untuk membangun sebuah Sistem Informasi berbasis Web di UKM
tersebut, yang diharapkan dapat memudahkan pencarian informasi mengenai profil UKM,
produk-produk unggulan, serta dapat melakukan pemasaran secara online sehingga peluang
untuk mengekspor produk ke pasar global dapat dimaksimalkan. Sistem Informasi ini
dikendalikan oleh satu Admin, semua data mengenai produk yang dipasarkan akan termuat di
dalam Web hingga proses pemesanan.
Berdasarkan latar belakang yang telah dijelaskan, pada penelitian ini akan dilakukan
pembuatan Web UKM Efrata print untuk mengatasi permasalahan yang ada. Web ini akan
menggunakan PHP sebagai kerangka kerjanya karena PHP memiliki beberapa kelebihan
seperti: membuat Web menjadi dinamis, bisa dijalankan oleh semua Sistem Operasi karena
PHP berjalan secara Web Base artinya semua Sistem Operasi yang memiliki Web Browser
dapat menggunakan program PHP, mendukung banyak paket Database, PHP tidak
memerlukan kompilasi dalam penggunaanya. Sedangkan untuk membuat Web menjadi
responsive Web menggunakan library Bootstrap. Fitur responsive, dapat diakses melalui
monitor komputer atau laptop. Jika dibuka melalui Tablet maupun Smartphone, maka
2
tampilan dapat menyesuaikan dengan layar. Sehingga PHP menjadi pilihan yang tepat dalam
pengembangan sistem informasi berbasis Web ini.
2. Tinjauan Pustaka
Saputro Adi Guridno DKK meneliti dan merancang sebuah sistem informasi Data Kos
di Yogyakarta. Membangun sistem ini menggunakan template Boostrap, Sehingga layout
yang keluar dari sistem ini menjadi responsive yaitu saat diakses oleh guest atau tamu menu
di halaman akan menyesuaikan dengan media yang digunakan[1].
Mochamad dan Ribangun meneliti Implementasi Framework twitter Bootstrap Dalam
Perancangan Aplikasi Penerimaan Mahasiswa Baru berbasis web, dengan menerapkan
Framework twitter Boostrap diharapkan aplikasi web yang dibangun membantu proses
penerimaan mahasiswa baru menjadi lebih cepat dan tampilan web menjadi responsive
sehingga tampilan desktop dan mobile[2].
Berdasarkan dua penelitian terdahulu tersebut,munculah gagasan untuk membuat
sebuah aplikasi untuk sistem informasi di UKM Efrata Print berbasis Web. Aplikasi ini
sebagai media promosi batik yang di hasilkan serta penambahan fitur responsive yang mana
Web yang di hasilkan bisa di buka melalui smartphone serta tampilan menyesuaikan layar
dari gadget yang ada.
Definisi Sistem adalah sekelompok unsur yang erat berhubungan satu dengan yang
lainnya yang berfungsi bersama-sama untuk mecapai tujuan tertentu[3]. Sementara itu
pengertian Informasi yaitu data yang telah diorganisasi dan telah memiliki kegunaan dan
manfaat. Karakterisik informasi yang diantaranya sebagai berikut : Relevan, Dapat dipercaya,
Lengkap, Tepat Waktu, Mudah dipahami dan Dapat diuji kebenarannya[4].
Sistem informasi adalah suatu sistem dalam suatu organisasi yang mempertemukan
kebutuhan pengolahan transaksi harian yang mendukung fungsi operasi organisasi yang
bersifat manajerial dengan kegiatan strategi dari suatu organisasi untuk dapat menyediakan
kepada pihak luar tertentu dengan informasi yang diperlukan untuk pengambilan keputusan.
Sistem informasi dalam suatu organisasi dapat dikatakan sebagai suatu sistem yang
menyediakan informasi bagi semua tingkatan dalam organisasi tersebut kapan saja diperlukan.
Sistem ini Menyimpan, Mengambil, Mengubah, Mengolah dan Mengkomunikasikan
Informasi yang diterima dengan menggunakan Sistem Informasi atau peralatan Sistem lainnya
[5].
Sistem Informasi Berbasis Web adalah aplikasi yang dibuat berbabsis Web. Apliaksi ini
juga di dalaamnya sudah terdapat Basisdata untuk mengelola suatu data tertentu [6].
Sementara itu Perencanaan sistem informasi merupakan bagian penting dalam suatu
organisasi untuk menentukan kebutuhan sistem infomasi dalam kurun 3 hingga 5 tahun
mendatang dan menuangkan ke dalam rencana pengembangan Sistem Informasi [7].
mempunyai beberapa fungsi, yaitu Fungsi komunikasi, Fungsi Informasi, Fungsi
Hiburan dan Fungsi Transaksi [8].
Istilah Responsive Web Design sendiri pertama kali diperkenalkan oleh Ethan Marcotte
dalam bukunya yang berjudul “Responsive Web Design”. Dibahas mengenai 3 teknik yang
digunakan dalam membangun sebuah Responsive Web Design, yaitu: Flexible grid layout,
Flexible images dan Media queries. Flexible grid yaitu sebuah konsep ukuran elemen
halaman dengan pilihan satuan persen daripada satuan absolut seperti Pixel atau point,
Flexible images yaitu sebuah teknik mencegah agar media Gambar, Video, Object, tidak
melewati batas dari elemen container, media queries merupakan modul CSS3 memungkinkan
3
render konten untuk beradaptasi dengan kondisi seperti resolusi. Sebuah media queries terdiri
dari jenis media dan 1 atau lebih ekspresi. Hasil dari media queries dinyatakan benar, jika
perangkat dalam media queries sesuai maka, stylesheet yang sesuai akan diterapkan [9].
Bootstrap sendiri merupakan framework yang biasa digunakan untuk membuat aplikasi
Web ataupun situs Web responsive secara cepat, mudah dan gratis. Twitter Bootstrap ini
terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Typography, Table, Form,
Navigation dan lain-lain. Selain itu, di dalam Bootstrap juga sudah terdapat jQuery plugins
untuk menghasilkan komponen User Interface yang cantik seperti Transitions, Modal,
Dropdown, Scrollspy, Tooltip, Tab, Alert dan lain-lain [10].
3. Metode dan Perancangan Sistem
Penelitian ini dilakukan melalui beberapa tahap penelitian yang terbagi ke dalam lima
tahapan, yaitu : (1) Analisis kebutuhan dan pengumpulan data, (2) Perancangan Sistem, (3)
Perancangan aplikasi atau program, (4) Implementasi dan pengujian sistem, serta analisis
hasil pengujian, (5) Penulisan laporan hasil penelitian [11].
Gambar 1. Tahapan Penelitian [11]
Berdasarkan bagan pada Gambar 1 dapat dijelaskan bahwa tahapan penelitian yang dilakukan
adalah sebagai berikut ;
Tahap pertama : analisis dan pengumpulan data.
Yaitu, : melakukan analisis kebutuhan apa saja yang dibutuhkan dari pengguna yaitu pemilik UKM
dan konsumen UKM tersebut misalnya beberapa kebutuhan terkait pembuatan Web UKM. Pada
tahap ini, pihak developer mencari tahu kebutuhan client dalam pembuatan aplikasi. Tahap ini
dilakukan dengan wawancara kepada pekerja serta pemilik UKM Efrata print. Berdasarkan hasil
wawancara, didapatkan informasi jika selama ini belum ada Web UKM yang digunakan untuk
memasarkan produknya maupun pemesan secara online. Dalam tahap pertama penelitian setelah
dilakukan wawancara kepada pekerja serta pemilik UKM ditemukan beberapa kebutuhan data
yaitu:1) Data sejarah serta kegiatan di UKM ; 2) Data Galeri UKM ; 3) Data kerjasama kerja di UKM ;
4) Data alur pemesanan. Data tersebut akan dipergunakan untuk perancangan database pada tahap
kedua. Selain itu akan menjelaskan proses bisnis yang terjadi saat konsumen ingin melakukan order
di UKM.
4
Gambar 2 Flowchart Proses order di UKM Efrata Print
Pada Gambar 2 dijelaskan bagaimana alur konsumen akan melakukan order pada UKM Efrata Print,
konsumen harus terlebih dahulu datang ke UKM tersebut hanya untuk melihat produk ataupun untuk
melakukan order.
Tahap kedua : Perancangan sistem yang meliputi perancangan proses menggunakan
Unified Modeling Language (UML) seperti Perancangan Use Case Diagram, Sequence
Diagram dan Class Diagram. Perancangan arsitektur dari sistem menggunakan Metode
Prototyping. Perancangan Database yaitu merancang tabel-tabel Database yang berfungsi
untuk menyimpan data yang di butuhkan dalam Web sistem informasi UKM Efrata Print.
Perancangan antarmuka, yaitu merancang antarmuka yang berfungsi sebagai penghubung
interaksi antara user dengan sistem, berupa tampilan antarmuka Web UKM Efrata Print yaitu
Web untuk interaksi konsumen dan Admin.
Tahap ketiga : Perancangan aplikasi atau program berjalan saat melakukan
Penyimpanan Data, Pengambilan Data dan Penghapusan Data. Tahap Keempat :
Implementasi dan pengujian sistem serta Analisis hasil pengujian, yaitu
mengimplementasikan Web yang sudah di buat kemudian dilakukan pengujian. Analisis
dilakukan setelah pengujian untuk melihat apakah Web yang telah di buat sudah sesuai
dengan yang diharapkan oleh UKM tersebut atau tidak ada error. Jika belum sesuai seperti
yang dikehendaki maka perlu dilakukan perbaikan. Tahap kelima: Penulisan laporan hasil
penelitian, yaitu mendokumentasikan proses penelitian yang sudah dilakukan dari tahap awal
hingga tahap akhir ke dalam tulisan yang nantinya akan menjadi laporan hasil penelitian.
Metode pengembangan sistem yang digunakan pada penelitian ini adalah adalah metode
prototyping, karena dalam pembuatan sistem ini dilakukan komunikasi yang intensif dengan
pengguna aplikasi. Metode ini digunakan untuk membantu pengembangan perangkat lunak
dalam membentuk model dari perangkat lunak yang harus dibuat. Metode ini dilakukan secara
bertahap, yaitu dengan mengembangkan suatu prototype yang sederhana hingga kemudian
dikembangkan dari waktu ke waktu sampai perangkat lunak selesai dikembangkan sesuai
5
dengan permintaan. Prototype merupakan bentuk dasar atau model awal dari suatu sistem atau
subsistem [12]. Tahap-tahap dalam metode Prototyping ditunjukkan pada Gambar 3.
Gambar 3 Metode Prototyping [12]
Tahap pengumpulan kebutuhan dilakukan untuk mengetahui dan menerjemahkan semua
permasalahan serta kebutuhan perangkat lunak dan kebutuhan sistem yang dibangun. Analisis
kebutuhan dilakukan dengan melakukan pencarian data-data serta informasi-informasi
yang dibutuhkan oleh sistem. Ada empat analisis kebutuhan dalam perancangan sistem yaitu
Analisis kebutuhan Sistem, Analisis kebutuhan Data, Analisis kebutuhan perangkat keras dan
Analisis kebutuhan perangkat lunak.
Supaya aplikasi yang dibuat dapat memenuhi kebutuhan pengguna, maka diperlukan suatu
analisis kebutuhan sistem. Analisis kebutuhan sistem ini dilakukan dengan wawancara kepada
pekerja serta pemilik UKM Efrata Print. Berdasarkan wawancara didapatkan hasil bahwa
dibutuhkan sistem yang dapat memenuhi kebutuhan berikut ini: a) Kebutuhan Administrator
mencakup: dapat mengelola data Galeri untuk Pemasaran Produk, mengelola data berita dan
artikel, mengelola testimoni dan pesanan. b) Kebutuhan Pengunjung atau konsumen
mencakup: dapat melihat Galeri, dapat melakukan pemesanan produk, melakukan Testimoni
(kritik dan saran), serta melihat berita dan artikel. Proses evaluasi prototyping dilakukan
sebanyak dua kali dan dilakukan dengan pengujian aplikasi kepada pengguna (Pemilik
UKM). Penjelasan setiap tahap evaluasi prototyping adalah sebagai berikut : Evaluasi tahap
pertama dilakukan bersama user aplikasi yaitu kepada pemilik UKM dan pekerja UKM. Pada
evaluasi ini dilakukan perancangan antar muka Web untuk mengetahui apakah rancangan
yang telah dibuat dapat memenuhi keinginan sesuai dengan apa yang diminta oleh
Konsumen. Pemilik UKM ingin penambahan fasilitas untuk memberikan berita atau artikel
kepada Konsumen, hal ini berguna untuk memberikan informasi yang berkaitan dengan
UKM dan juga seputar cara merawat batik. Evaluasi tahap kedua dilakukan dengan mengganti
beberapa bagian pada rancangan antar muka seperti Galeri, Klien, penambahan bagian kritik
6
dan saran, memperbaiki beberapa bagian aplikasi yang masih ada bug seperti tidak muncul
gambar saat upload, serta memperbaiki halaman utama supaya lebih menarik. Analisis
kebutuhan perangkat keras dan spesifikasi perangkat lunak yang digunakan dalam
membangun jurnal elektronik ini yaitu: perangkat keras yang akan digunakan adalah Prosesor
Intel Core i3, 2.40 GHz, RAM 2 GB dan Hardisk 320 GB. Sedangkan perangkat lunak yang
digunakan adalah sistem operasi Windows 7 Ultimate, Notepad++, Wamp Server (Apache
dan MySQL), Web browser (dalam penelitian ini digunakan Mozilla Firefox) dan Rational
Rose untuk membuat UML sistem. Perancangan sistem dalam penelitian ini dibuat dalam
bentuk Diagram UML. Diagram UML meliputi Use Case Diagram , Diagram activity,
Sequence Diagram dan Class Diagram. Berikut ini akan dijelaskan masing-masing Diagram
yang telah dibuat.
view data pesan dan order
hapus data pesan dan order
mengelola data pesan dan order
mengelola data klien
data account
tambah data pesan dan order
konsumen
hapus data berita dan artikel
hapus data klien
edit data klien
mengelola data berita dan artikel
admin
tambah data klien
edit data account
view berita dan artikel
data password
tambah data berita dan artikel
edit data password
edit data berita dan artikel
mengelola data galeri
view data galeri
edit data galeri
tambah data galeri
hapus data galeri
Gambar 4 Use Case Diagram Sistem
Gambar 4 merupakan Use case Diagram dari aplikasi yang dibuat. Terdapat 2(dua)
aktor dalam aplikasi, yaitu Admin dan Konsumen. Aktor Admin merupakan pemilik hak akses
tertinggi, di mana bisa melakukan pengelolaan data Galeri, Pemesan, Berita dan Artikel, serta
Data klien. Sedangkan Aktor Konsumen hanya bisa melihat data Galeri, Melakukan
pemesanan, Melihat Data Artikel dan Berita.
7
Gambar 5 Diagram Activity Tambah galeri
Gambar 5 merupakan Diagram Activity untuk proses menambah data galeri. Aktivitas
dimulai dengan memilih Admin page. Admin kemudian masuk menu manage galeri, setelah
itu mengisi data galeri yang akan dimasukan seperti Nama Judul, Foto atau Image, serta
Deskripsi. Data galeri kemudian akan tersimpan dalam basis data setelah menekan tombol
save.
konsumen
w eb
mulai
basisdata
pilih admin
page
manage klien
mengis i data
klien
menekan
tom bol s ave
menyim pan data
klien
menampilkan data
klien yang baru
s eles ai
Gambar 6 Diagram Activity Tambah klien
Gambar 6 merupakan Diagram activity untuk proses tambah klien yang dilakukan oleh
Admin. Aktivitas dimulai dengan memilih Admin page. Admin kemudian masuk menu
manage klien setelah itu mengisi data klien dan melakukan pengecekan apakah data klien
tersebut sudah terisi semua dengan baik dan benar maka Admin akan melakukan proses
selanjutnya. Data klien kemudian akan tersimpan dalam basis data setelah menekan tombol
save.
konsumen
mulai
w eb
basisdata
pilih user page
memilih menu
pemesanan
mengisi data
pemesanan
menekan
tombol save
menyimpan data
pemesanan
menampilkan data
pemesanan yang baru
selesai
Gambar 7 Diagram Activity Tambah pesanan (order)
Gambar 7 merupakan Diagram Activity untuk proses tambah pemesanan yang dilakukan
oleh konsumen. Konsumen memilih User page pada halaman utama. Selanjutnya User
memilih menu pemesanan (order). User selajutnya memasukkan isi pemesanan pada form
yang ditampilkan. Data pemesanan selanjutnya akan disimpan dalam basis data.
8
: InsertView
: admin
: galericontroller
: galerimodel
: basis data
1:mengisi data galeri (judul,deskripsi,gambar)
2:memanggil fungsi insert
3:memanggil model galeri
4:memeproses insert galeri
5:menyimpan data galeri
Gambar 8 Sequence Diagram Proses Tambah galeri
Gambar 8 merupakan Sequence Diagram untuk proses menambah data galeri yang
dilakukan oleh Admin. Penambahan data galeri ini dilakukan Admin dengan terlebih dahulu
mengisikan data galeri yang terdiri dari Judul, Deskripsi, dan Gambar. Setelah tombol save
ditekan, fungsi insert yang berada di file controller galeri akan dipanggil. Pada fungsi insert
ini dilakukan pemanggilan model galeri untuk memerintahkan penyimpanan data galeri yang
berisikan data Judul, Deskripsi, dan Gambar ke dalam basis data.
: admin
: InsertView
: kliencontroller
: klienmodel
: basis data
1:mengisi data klien (nama klien,link,gambar,testimoni)
2:memanggil fungsi insert
3:memanggil model klien
4:memeproses insert klien
5:menyimpan data klien
Gambar 9 Sequence Diagram Tambah klien
Gambar 9 merupakan Sequence Diagram untuk proses menambah data klien yang
dilakukan oleh Admin. Admin mengisikan data klien yang terdiri dari nama klien, Link Web
klien, Gambar klien, Testimoni. Setelah tombol save ditekan, fungsi insert yang berada di file
controller klien akan dipanggil. Pada fungsi insert ini dilakukan pemanggilan model klien
untuk memerintahkan penyimpanan data klien yang telah dimasukkan tadi ke dalam basis
data.
9
: konsumen
: InsertView
: ordercontroller
: ordermodel
: basis data
1:mengisi data order (detail order,gambar order)
2:memanggil fungsi insert
3:memanggil model order
4:memeproses insert order
5:menyimpan data order
Gambar 10 Sequence Diagram Proses Tambah Pesanan(order)
Gambar 10 merupakan Sequence Diagram untuk proses menambah data order yang
dilakukan oleh konsumen. Konsumen mengisikan data order yang terdiri dari detail order dan
gambar order. Setelah tombol save ditekan, fungsi insert yang berada di file controller order
akan dipanggil. Pada fungsi insert ini dilakukan pemanggilan model order untuk
memerintahkan penyimpanan data klien yang telah dimasukkan tadi ke dalam basis data.
Gambar 11 Class Diagram Aplikasi
Gambar 11 merupakan diagram class yang menggambarkan Model Class dan
Controller Class pada aplikasi. Model Class merupakan bagian aplikasi yang bertugas untuk
mengendalikan fungsi-fungsi yang berhubungan dengan basis data. Pada aplikasi yang dibuat
terdapat 5 (lima) Model Class, yaitu AdminModel, GaleriModel, ArtikelModel, OrderModel,
KonsumenModel. Sedangkan Controller Class bertugas untuk menghubungkan bagian view
dengan bagian Model Class. Pada aplikasi ini terdapat 5 (lima) Controller Class, yaitu
AdminController,
GaleriController,
ArtikelController,
OrderController,
Dan
KonsumenController. Bagian view tidak ikut digambarkan dalam diagram class karena bagian
view di dalam aplikasi bukan dalam bentuk class tetapi berupa tag HTML untuk menampilkan
informasi pada halaman Web.
10
4.
Hasil Implementasi dan Pembahasan
Implementasi dari Sistem Informasi UKM Efrata Print ini dilakukan dengan PHP 5
dan HTML. Aplikasi Web ini memiliki dua hak akses, yaitu Bagian Admin dan User.
Halaman utama Web berisi mengenai berita dan informasi serta galeri yang terkait tentang
UKM Efrata Print, Hak akses dalam Web pada bagian Admin meliputi Edit data Admin,
Manage berita dan artikel, Manage konten, Manage pesan kontak dan order, serta Manage
data Klien. Sedangkan untuk hak akses pada User meliputi melihat sejarah singkat UKM dan
sejarah batik, melihat berita dan artikel terkait UKM dan batik, melihat galeri tentang proses
pembuatan batik yang terjadi di UKM serta melihat hasil batik yang telah dikerjakan di UKM
tersebut, melakukan pemesanan batik, melakukan pendaftran sebagai konsumen UKM,
melakukan kritik dan saran terkait pelayanan yang diberikan UKM ataupun terkait pemesanan
batik dan hasilnya.
Gambar 12 merupakan tampilan ketika dibuka melalui browser PC (Personal
Computer) atau notebook. Halaman Web akan terlihat menyesuaikan dengan layar device di
mana Web tersebut diakses. Proses ini dilakukan dengan memanggil CSS yang terdapat pada
library Bootstrap.
Gambar 12 Halaman Home Web UKM Efarat print pada PC
Gambar 13 Halaman Home Web UKM Efrata Print pada Smartphone
Gambar 13 merupakan tampilan ketika dibuka melalui browser Tablet atau
smartphone. Halaman Web akan terlihat menyesuaikan dengan layar device di mana Web
tersebut diakses. Proses ini dilakukan dengan memanggil CSS yang terdapat pada library
Bootstrap.
11
Kode Program 1 Pemanggilan CSS Bootstrap
Kode Program 1 merupakan perintah dalam pemanggilan CSS Bootstrap dan
responsive yang merupakan bagian dari library Bootstrap. Menggunakan perintah link rel
berfungsi untuk menghubungkan kedalam sebuah style CSS eksternal dengan nama yang
telah kita tentukan, Kode program 1 terdapat dua CSS yang di panggail bootsrap.css dan
bootsrap-responsive.css kedua file CSS terdapat di folder css.
Kode Program 2 Fungsi Boostrap Dropdown
Kode Program 2 merupakan Fungsi dari class Dropdown menunjukan adanya
dropdown menu, Untuk membuka Dropdown menu menggunakan button dari class
.dropdown-toggle dan menggunakan attribute data-toggle = “dropdown” , Class caret ini
untuk menunjukan bahwa adanya tombol untuk dropdown.
Kode Program 3 Fungsi CSS Dropdown pada bootstrap –responsive.css
Gambar 14 Hasil Boostrap Dropdown
Gambar 14 merupakan hasil dari menu dropdown saat konsumen mengklik pada
bagian tentang pada halama Web utama maka akan muncul menu menurun untuk memilih
option ke halaman Web Tentang kami dan Sejarah. Kode Program 3 merupakan penggaturan
CSS untuk mengatur Dropdown menu untuk mengatur Padding, Font, Color serta Radius
untuk kolom Dropdown
Kode Program 4 Fungsi slider Carousel
12
Gambar 15 Gambar slide menggunakan slider Carousel
Carousel merupakan proses penampilan gambar-gambar yang diberi efek slide,
Carousel di dalam Web terletak di dalam halam utama untuk menarik perhatian para
pengunjung Web atau User hasil dari Fungsi slider Carousel ditunjukan pada gambar 15.
Kode Program 4 merupakan perintah dalam melakukan pemanggilan slider Carousel
menggunakan div class flexslider letak pengaturan class tersebut terdapat di flexsider.css.
Kode Program 5 Fungsi Bootstrap Navbar pada PC
13
Kode Program 6 CSS Bootstrap Navbar
Kode Program 5 merupakan fungsi dari navigation bar pada halaman utama terdapat
menubar disamping dari header Web UKM yang hanya bisa keluar saat menggunakan device
PC atau notebook. Kode program 6 ini mengatur dari letak Navbar di dalam Web, Hasil
keluaran Kode program 5 dan 6 terdapat pada Gambar 16.
Gambar 16 Gambar boostrap navbar pada PC
Kode Program 7 Fungsi Bootstrap Navbar pada mobile
Gambar 16 Gambar Boostrap Navbar pada Mobile
14
Pada Kode Program 7 Fungsi Boostrap Navbar ini di lakukan bila device yang
digunakan user adalah mobile atau smartphone sehingga tampilan interfacenya mengikutinya
hasil dari kode dapat dilihat pada Gambar 16 terlihat bahwa navigasi untuk mobile berbeda
dengan navigasi yang digunakan di PC, Jika di PC terletak di samping kanan Header maka
untuk mobile di terletak menurun seperti pada Gambar 16.
Kode Program 8 Fungsi Notifikasi Pesan Masuk pada Admin
Gambar 18 Gambar Notifikasi Pesan pada Panel Admin
Pada Kode Program 8 fungsi notifikasi yang dilakukan saat User melakukan inputan
di halaman kontak baik itu Komentar ,Testimoni maupun Saran akan masuk ke dalam panel
Admin selanjutnya pesan tersebut akan masuk ke dalam database, setelah itu akan muncul
sebuah pop-up yang akan muncul di halaman Web pada panel Admin Hasil keluaran dari
notifikasi pada Gambar 18.
Gambar 19 Gambar captha pada halaman kontak
15
Kode Program 9 Fungsi Captha pada Kontak
Pada Kode Program 9 merupakan program captha pada fungsi $chars adalah panjang
karakter yang disediakan pada fungsi $string = $_GET['cap'] lalu karakter tersebut disimpan
dan diacak dalam fungsi mt_rand(100,200) dalam bentuk session setelah itu diberi
penambahan noise atau titik gambar untuk proses membuat tulisan di $text_color lalu ouput
keluaran pada header (“Content-type: image/png”); untuk hasil keluaran kode program 9
pada Gambar 19.
Pengujian aplikasi dilakukan dengan menguji fungsi-fungsi dari aplikasi yang telah
dibuat untuk mencari kesalahan/bug pada sistem. Pengujian aplikasi dilakukan agar sistem
yang dibuat berjalan sesuai dengan yang diharapkan dan dapat memenuhi kebutuhan
pengguna. Pengujian aplikasi ini menggunakan dua teknik pengujian yaitu pengujian alpha
dan pengujian beta.
Pengujian alpha menggunakan metode blackbox yaitu pengujian fungsi-fungsi aplikasi
secara langsung tanpa memperhatikan alur eksekusi program. Pengujian ini dilakukan dengan
memperhatikan apakah fungsi telah berjalan sesuai rancangan dan sesuai yang diharapkan.
Tabel 1 adalah hasil pengujian dari aplikasi yang telah dilakukan.
Berdasarkan pengujian yang dilakukan pada aplikasi Web dapat dilihat status pengujian
dari setiap fungsi valid, maka disimpulkan bahwa aplikasi ini berjalan dengan baik dan sesuai
yang diharapkan. Pengujian beta adalah pengujian yang dilakukan oleh orang yang tidak ikut
dalam pembuatan aplikasi atau calon pengguna aplikasi. Pengujian beta dilakukan dengan
menggunakan kuesioner, yaitu dengan membagikan kuesioner kepada sample user. Sample
user berjumlah 30 responden dan dipilih secara acak, sample user pada pengujian ini adalah
Pekerja dan konsumen Efrata Print yang mengakses Web ini. Hasil jawaban kuesioner dapat
dilihat pada Tabel 2.
16
Tabel 1 Hasil Pengujian blackbox
Output yang
diharapkan
Sukses
menampilkan Web
Output yang
dihasilkan sistem
Sukses
menampilkan
Web
Status
Pengujian
Valid
Menampilkan
dropdown menu
Sukses
menampilkan
dropdown menu
Sukses
menampilkan
dropdown menu
Valid
Fungsi slider
Carousel
Slider gambar dengan
fungsi slider Carousel
Menampilkan navbar
pada PC dan mobile
Fungsi notifikasi
pesan pada Admin
Ubah data artikel
Muncul notifikasi pesan
pada panel Admin
Form diisi dengan benar
Sukses
menampilkan
slider gambar
Sukses
menampilkan
navbar PC dan
mobile
Sukses notifikasi
pesan
Sukses ubah data
Valid
Fungsi boostrap
navbar
Sukses
menampilkan slider
gambar
Sukses
menampilkan
navbar pada PC dan
mobile
Sukses notifikasi
pesan
Sukses ubah data
Fungsi yang diuji
Kondisi
Responsive pada
PC dan smartphone
Dapat menampilkan
Web di smartphone dan
PC
Fungsi dropdown
menu
Valid
Valid
Valid
Tabel 2 Hasil Jawaban Kuesioner
No
1
2
3
4
5
Pernyataan
Aplikasi aplikasi ini mudah digunakan
Tampilan, huruf dan gambar dari aplikasi ini dapat dilihat
dengan jelas
Menu-menu pada aplikasi ini mudah dipahami dan tidak
membingungkan
Aplikasi ini membantu memberikan informasi tentang UKM
dan artikel batik
Aplikasi ini bermanfaat untuk Konsumen yang ingin
melakukan pemesanan secara Online
STS
1
0
TS
0
1
CS
4
3
S
14
15
SS
11
11
1
0
4
16
9
0
1
6
10
13
0
2
5
9
14
Setelah semua jawaban diketahui maka yang dilakukan adalah menghitung presentase
jawaban responden yang telah mengisi kuesioner. Hasil analisis data untuk pertanyaan 1
menunjukkan sebanyak 36,67% responden menjawab sangat setuju, 46,67% responden
menjawab setuju dan 13,33% responden menjawab cukup setuju. Jadi disimpulkan bahwa
aplikasi ini mudah untuk digunakan.
Hasil analisis data untuk pertanyaan 2 menunjukkan sebanyak 36,67% responden
menjawab sangat setuju, 50,00% responden menjawab setuju dan 10,00% responden
menjawab cukup setuju. Jadi disimpulkan bahwa tampilan aplikasi ini dapat dilihat dengan
jelas. Hasil analisis data untuk pertanyaan 3 menunjukkan sebanyak 30,00% responden
menjawab sangat setuju, 53,33% responden menjawab setuju dan 13,33% responden
menjawab cukup setuju. Jadi disimpulkan bahwa menu-menu pada aplikasi ini mudah
dipahami dan tidak membingungkan.
Hasil analisis data untuk pertanyaan 4 menunjukkan sebanyak 43,33% responden
menjawab sangat setuju, 33,33% responden menjawab setuju dan 20,00% responden
menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini membantu dan mempermudah
pengguna dalam mencari informasi tentang UKM dan artikel batik.
Hasil analisis data untuk pertanyaan 5 menunjukkan sebanyak 46,67% responden
menjawab sangat setuju, 30,00% responden menjawab setuju dan 16,67% responden
17
menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini bermanfaat untuk digunakan
oleh konsumen dalam melakukan pemesanan secara online.
Pengujian manfaat juga dilakukan dengan wawancara kepada Pemilik dari UKM Efrata
Print. Berdasarkan wawancara tersebut didapatkan bahwa sistem Informasi Web UKM ini
dapat membantu dan mempermudah dalam mempromosikan hasil usaha serta dapat
membantu konsumenya yang ingin melakukan pemesanan secara Online.
5.
Simpulan
Berdasarkan penelitian yang telah dilakukan, maka dapat diambil kesimpulan bahwa
Sistem Informasi Berbasis Web Menggunakan Twitter Boostrap pada UKM Batik Efrata Print
dibuat menggunakan PHP 5 dan library Bootstrap ini menjadi responsive, sehingga dapat
diakses dari berbagai ukuran layar device. Hasil pengujian menunjukkan bahwa Sistem
Informasi Berbasis Web Menggunakan Twitter Boostrap pada UKM Batik Efrata Print ini
membantu dalam mempermudah proses promosi UKM, Karena disediakan halaman galeri
untuk melihat hasil produk batik dari UKM tersebut. Aplikasi dilengkapi dengan berita dan
artikel yang berguna untuk membantu konsumen dalam mencari informasi terkait UKM dan
artikel tentang cara merawat batik. Dapat disimpulkan bahwa aplikasi ini mudah digunakan.
Tampilan, huruf, dan gambar dari aplikasi ini dapat dilihat dengan jelas. Menu-menu pada
aplikasi ini mudah dipahami dan tidak membingungkan. Dari segi manfaat, aplikasi ini
membantu memberikan informasi tentang UKM dan artikel batik untuk konsumen yang ingin
melakukan pemesanan secara Online
6.
Pustaka
Saputro Adi Guridno, 2013, Sistem Informasi Pengolahan Data Rumah Kos
Menggunakan Framerwork Codeigniter Di kelurahan Demangan Kecamatan
Gondokusuman
Yogyakarta,
Jurnal
Script,
Volume
1
,No.1
,http://respository.amikom.ac.id/file/Publikasi_10.11.3713.pdf diakses tanggal 1
Agustus 2016.
[2] Rosid,M.A., dan Jakaria R.B.2016, Implementasi Framework Twitter Boostrap Dalam
Perancangan
Aplikasi
Penerimaan
Mahasiswa
Baru
BerbasisWeb,Sidoarjo,KINETIK,1(3):129134,http://kinetik.umm.ac.id/index.php/kinetik/article/download/121/15 diakses tanggal
3 agustus 2017.
[3] Mulyadi. 2001. Sistem Akuntansi,Yogyakarta : Salemba Empat.
[4] Krismiaji. 2005.Sistem Informasi Akuntasi,Yogyakarta : AMP YKPN.
[5] Jogiyanto,HM, 2003, Sistem Teknologi Informasi, Yogyakarta : Andi Offset.
[6] Raharjo, Budi, 2002,Implikasi Teknologi Infomasi dan Internet Terhadap Pendidikan,
Bisnis
dan
Pemerintahan
:
Siapakah
Indonesia
?
,
http://www.budi.insan.co.id/articles/riau-it.doc. Diakses tanggal 20 Juli 2016
[7] Kadir,Abdul. 2014,Pengenalan Sistem Informasi,Yogyakarta : Andi Offset.
[8] Yuhefizar,2013, Membangun Toko Online Itu Mudah, Yogyakarta : Graha Ilmu.
[9] Marcotte, Ethan. 2011. Responsive Web Design, http://ebookbrowsee.net. Diakses
tanggal 16 Desember 2016.
[10] Alatas, Husein, 2013, Responsive Web Design dengan PHP & Bootstrap, Yogyakarta:
Loko Media.
[1]
18
[11] Hasibuan, Zainal A. 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer dan
Teknologi Informasi : Konsep, Teknik, dan Aplikasi. Jakarta : Ilmu Komputer
Univesitas Indonesia.
[12] Pressman, R.S, 2001, Software Engineering : A Practitioner’s Approach, Amerika
Serikat : R.S. Pressman and Associates.
19
pada UKM Batik Efrata Print
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Oleh:
Benyamin Natanael Hartanto
NIM: 672010241
Program Studi Teknik Informatika
Fakultas Teknologi Informasi Universitas
Kristen Satya Wacana Salatiga
Agustus 2017
Sistem Informasi Berbasis Web Menggunakan Twitter Boostrap pada
UKM Batik Efrata Print
1)
Benyamin Natanael Hartanto, 2)Ramos Somya, 3) Christine Dewi
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50771, Indonesia
1)
Email: 672010241@student.uksw.edu, 2) ramos.somya@staff.uksw.edu
3)
christine.dewi@staff.uksw.edu
Abstract
SMES in Indonesia still using traditional system in administration and product selling. Based
on research in SMES Batik Efrata Print, the owner is having problem in using media for promote
it’s products, and consumers who want to do reservations must come directly to the SMES location to
get information of products and the batik fabrics reservations process. The goal of this research is
construct a web with information system using PHP and library bootstrap. Development system
method in this research is prototyping method, there is a process of evaluation in consumers
satisfaction. Based on the results of the survey concluded that web application are being help for
craftsman and the owner of smes to promote its products into web and assist with the reservations
products, and beneficial for those who want to known the result the product of the smes.
Keywords:SMES,PHP,Bootstrap
Abstrak
UKM di Indonesia masih menggunakan sistem tradisional dalam administrasi maupun
penjualan produk. Berdasarkan penelitian di UKM Batik Efrata Print, pemilik mengalami kesulitan
dalam menggunakan media untuk mempromosikan produk-produknya, dan konsumen yang ingin
melakukan pemesanan harus langsung datang ke tempat UKM tersebut, untuk mendapatkan informasi
produk dan proses pemesanan kain batik. Penelitian ini bertujuan untuk membangun sebuah web
dengan sistem informasi menggunakan PHP dan library Bootstrap. Metode pengembangan sistem
yang digunakan pada penelitian ini adalah metode prototyping, dimana terdapat proses evaluasi
terhadap kepuasaan konsumen. Berdasarkan hasil dari penelitian tersebut disimpulkan bahwa aplikasi
Web ini membantu pengrajin dan pemilik UKM dalam mempromosikan produk-produknya kedalam
Web, membantu proses pemesanan produk, serta bermanfaat bagi konsumen yang ingin mengetahui
hasil produk dari UKM tersebut.
Kata Kunci: UKM,PHP, Bootstrap
1
Mahasiswa Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
Staf Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
3
Staf Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
2
1
1. Pendahuluan
Usaha Kecil Menengah atau yang biasa di singkat UKM merupakan sebuah istilah yang
mengacu kepada kegiatan ekonomi rakyat bersekala kecil, dengan bidang usaha yang
mayoritas merupakan usaha kecil. UKM di Indonesia yang masih menggunakan sistem
tradisional dalam menjalankan sistem administrasi maupun sistem penjualan produk
unggulannya. Seperti yang terjadi di UKM Efrata Print di daerah Solo, mayoritas masih
berskala kecil dan belum mulai merambah ke sistem komputerisasi baik untuk sistem
administrasi maupun sistem penjualan produk mereka. Hal tersebut terjadi karena beberapa
kendala seperti; masalah biaya atau anggaran, pekerja yang belum memahami internet,
kapasitas produksi yang masih kecil, serta tempat showroom yang belum memadai sehingga
pihak pengrajin merasa belum mampu untuk memasarkan produk-produk mereka di internet.
Karena UKM masih belum mempunyai Web sebagai media pemasaran produk mereka, dan
masih menggunakan pemasaran dengan cara lama seperti memberikan kartu nama dan orang
harus datang ke lokasi UKM tersebut berada.
UKM Batik Efrata Print yang terletak di Jalan Gringsing no.21 Gambiran Desa Cemani
merupakan salah satu UKM sentral pembuatan batik printing, yaitu proses membatik dengan
menggunakan klise (kasa) untuk mencetak motif kain batik. Dalam proses pewarnaannya
menggunakan pasta yang telah di campur pewarna, kemudian di cetak sesuai motif telah di
buat. Pabrik ini memliki luas bangunan 750 meter persegi. UKM ini memiliki 15 orang
pekerja yang memiliki jobdesk masing-masing mulai dari proses pencampuran warna batik,
hingga proses batik di seleksi untuk nantinya akan dijual kepada konsumen yang memesan
batik. Produksi di UKM bisa mencapai 6000 meter kain perminggunya. Untuk proses promosi
di UKM terbilang masih sangat sederhana, karena konsumen yang ingin memesan harus
datang langsung ke tempat pembuatan kain batik.
Berdasarkan hasil analisis penelitian yang dilakukan di UKM Efrata Print, dapat
diambil kesimpulan untuk membangun sebuah Sistem Informasi berbasis Web di UKM
tersebut, yang diharapkan dapat memudahkan pencarian informasi mengenai profil UKM,
produk-produk unggulan, serta dapat melakukan pemasaran secara online sehingga peluang
untuk mengekspor produk ke pasar global dapat dimaksimalkan. Sistem Informasi ini
dikendalikan oleh satu Admin, semua data mengenai produk yang dipasarkan akan termuat di
dalam Web hingga proses pemesanan.
Berdasarkan latar belakang yang telah dijelaskan, pada penelitian ini akan dilakukan
pembuatan Web UKM Efrata print untuk mengatasi permasalahan yang ada. Web ini akan
menggunakan PHP sebagai kerangka kerjanya karena PHP memiliki beberapa kelebihan
seperti: membuat Web menjadi dinamis, bisa dijalankan oleh semua Sistem Operasi karena
PHP berjalan secara Web Base artinya semua Sistem Operasi yang memiliki Web Browser
dapat menggunakan program PHP, mendukung banyak paket Database, PHP tidak
memerlukan kompilasi dalam penggunaanya. Sedangkan untuk membuat Web menjadi
responsive Web menggunakan library Bootstrap. Fitur responsive, dapat diakses melalui
monitor komputer atau laptop. Jika dibuka melalui Tablet maupun Smartphone, maka
2
tampilan dapat menyesuaikan dengan layar. Sehingga PHP menjadi pilihan yang tepat dalam
pengembangan sistem informasi berbasis Web ini.
2. Tinjauan Pustaka
Saputro Adi Guridno DKK meneliti dan merancang sebuah sistem informasi Data Kos
di Yogyakarta. Membangun sistem ini menggunakan template Boostrap, Sehingga layout
yang keluar dari sistem ini menjadi responsive yaitu saat diakses oleh guest atau tamu menu
di halaman akan menyesuaikan dengan media yang digunakan[1].
Mochamad dan Ribangun meneliti Implementasi Framework twitter Bootstrap Dalam
Perancangan Aplikasi Penerimaan Mahasiswa Baru berbasis web, dengan menerapkan
Framework twitter Boostrap diharapkan aplikasi web yang dibangun membantu proses
penerimaan mahasiswa baru menjadi lebih cepat dan tampilan web menjadi responsive
sehingga tampilan desktop dan mobile[2].
Berdasarkan dua penelitian terdahulu tersebut,munculah gagasan untuk membuat
sebuah aplikasi untuk sistem informasi di UKM Efrata Print berbasis Web. Aplikasi ini
sebagai media promosi batik yang di hasilkan serta penambahan fitur responsive yang mana
Web yang di hasilkan bisa di buka melalui smartphone serta tampilan menyesuaikan layar
dari gadget yang ada.
Definisi Sistem adalah sekelompok unsur yang erat berhubungan satu dengan yang
lainnya yang berfungsi bersama-sama untuk mecapai tujuan tertentu[3]. Sementara itu
pengertian Informasi yaitu data yang telah diorganisasi dan telah memiliki kegunaan dan
manfaat. Karakterisik informasi yang diantaranya sebagai berikut : Relevan, Dapat dipercaya,
Lengkap, Tepat Waktu, Mudah dipahami dan Dapat diuji kebenarannya[4].
Sistem informasi adalah suatu sistem dalam suatu organisasi yang mempertemukan
kebutuhan pengolahan transaksi harian yang mendukung fungsi operasi organisasi yang
bersifat manajerial dengan kegiatan strategi dari suatu organisasi untuk dapat menyediakan
kepada pihak luar tertentu dengan informasi yang diperlukan untuk pengambilan keputusan.
Sistem informasi dalam suatu organisasi dapat dikatakan sebagai suatu sistem yang
menyediakan informasi bagi semua tingkatan dalam organisasi tersebut kapan saja diperlukan.
Sistem ini Menyimpan, Mengambil, Mengubah, Mengolah dan Mengkomunikasikan
Informasi yang diterima dengan menggunakan Sistem Informasi atau peralatan Sistem lainnya
[5].
Sistem Informasi Berbasis Web adalah aplikasi yang dibuat berbabsis Web. Apliaksi ini
juga di dalaamnya sudah terdapat Basisdata untuk mengelola suatu data tertentu [6].
Sementara itu Perencanaan sistem informasi merupakan bagian penting dalam suatu
organisasi untuk menentukan kebutuhan sistem infomasi dalam kurun 3 hingga 5 tahun
mendatang dan menuangkan ke dalam rencana pengembangan Sistem Informasi [7].
mempunyai beberapa fungsi, yaitu Fungsi komunikasi, Fungsi Informasi, Fungsi
Hiburan dan Fungsi Transaksi [8].
Istilah Responsive Web Design sendiri pertama kali diperkenalkan oleh Ethan Marcotte
dalam bukunya yang berjudul “Responsive Web Design”. Dibahas mengenai 3 teknik yang
digunakan dalam membangun sebuah Responsive Web Design, yaitu: Flexible grid layout,
Flexible images dan Media queries. Flexible grid yaitu sebuah konsep ukuran elemen
halaman dengan pilihan satuan persen daripada satuan absolut seperti Pixel atau point,
Flexible images yaitu sebuah teknik mencegah agar media Gambar, Video, Object, tidak
melewati batas dari elemen container, media queries merupakan modul CSS3 memungkinkan
3
render konten untuk beradaptasi dengan kondisi seperti resolusi. Sebuah media queries terdiri
dari jenis media dan 1 atau lebih ekspresi. Hasil dari media queries dinyatakan benar, jika
perangkat dalam media queries sesuai maka, stylesheet yang sesuai akan diterapkan [9].
Bootstrap sendiri merupakan framework yang biasa digunakan untuk membuat aplikasi
Web ataupun situs Web responsive secara cepat, mudah dan gratis. Twitter Bootstrap ini
terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Typography, Table, Form,
Navigation dan lain-lain. Selain itu, di dalam Bootstrap juga sudah terdapat jQuery plugins
untuk menghasilkan komponen User Interface yang cantik seperti Transitions, Modal,
Dropdown, Scrollspy, Tooltip, Tab, Alert dan lain-lain [10].
3. Metode dan Perancangan Sistem
Penelitian ini dilakukan melalui beberapa tahap penelitian yang terbagi ke dalam lima
tahapan, yaitu : (1) Analisis kebutuhan dan pengumpulan data, (2) Perancangan Sistem, (3)
Perancangan aplikasi atau program, (4) Implementasi dan pengujian sistem, serta analisis
hasil pengujian, (5) Penulisan laporan hasil penelitian [11].
Gambar 1. Tahapan Penelitian [11]
Berdasarkan bagan pada Gambar 1 dapat dijelaskan bahwa tahapan penelitian yang dilakukan
adalah sebagai berikut ;
Tahap pertama : analisis dan pengumpulan data.
Yaitu, : melakukan analisis kebutuhan apa saja yang dibutuhkan dari pengguna yaitu pemilik UKM
dan konsumen UKM tersebut misalnya beberapa kebutuhan terkait pembuatan Web UKM. Pada
tahap ini, pihak developer mencari tahu kebutuhan client dalam pembuatan aplikasi. Tahap ini
dilakukan dengan wawancara kepada pekerja serta pemilik UKM Efrata print. Berdasarkan hasil
wawancara, didapatkan informasi jika selama ini belum ada Web UKM yang digunakan untuk
memasarkan produknya maupun pemesan secara online. Dalam tahap pertama penelitian setelah
dilakukan wawancara kepada pekerja serta pemilik UKM ditemukan beberapa kebutuhan data
yaitu:1) Data sejarah serta kegiatan di UKM ; 2) Data Galeri UKM ; 3) Data kerjasama kerja di UKM ;
4) Data alur pemesanan. Data tersebut akan dipergunakan untuk perancangan database pada tahap
kedua. Selain itu akan menjelaskan proses bisnis yang terjadi saat konsumen ingin melakukan order
di UKM.
4
Gambar 2 Flowchart Proses order di UKM Efrata Print
Pada Gambar 2 dijelaskan bagaimana alur konsumen akan melakukan order pada UKM Efrata Print,
konsumen harus terlebih dahulu datang ke UKM tersebut hanya untuk melihat produk ataupun untuk
melakukan order.
Tahap kedua : Perancangan sistem yang meliputi perancangan proses menggunakan
Unified Modeling Language (UML) seperti Perancangan Use Case Diagram, Sequence
Diagram dan Class Diagram. Perancangan arsitektur dari sistem menggunakan Metode
Prototyping. Perancangan Database yaitu merancang tabel-tabel Database yang berfungsi
untuk menyimpan data yang di butuhkan dalam Web sistem informasi UKM Efrata Print.
Perancangan antarmuka, yaitu merancang antarmuka yang berfungsi sebagai penghubung
interaksi antara user dengan sistem, berupa tampilan antarmuka Web UKM Efrata Print yaitu
Web untuk interaksi konsumen dan Admin.
Tahap ketiga : Perancangan aplikasi atau program berjalan saat melakukan
Penyimpanan Data, Pengambilan Data dan Penghapusan Data. Tahap Keempat :
Implementasi dan pengujian sistem serta Analisis hasil pengujian, yaitu
mengimplementasikan Web yang sudah di buat kemudian dilakukan pengujian. Analisis
dilakukan setelah pengujian untuk melihat apakah Web yang telah di buat sudah sesuai
dengan yang diharapkan oleh UKM tersebut atau tidak ada error. Jika belum sesuai seperti
yang dikehendaki maka perlu dilakukan perbaikan. Tahap kelima: Penulisan laporan hasil
penelitian, yaitu mendokumentasikan proses penelitian yang sudah dilakukan dari tahap awal
hingga tahap akhir ke dalam tulisan yang nantinya akan menjadi laporan hasil penelitian.
Metode pengembangan sistem yang digunakan pada penelitian ini adalah adalah metode
prototyping, karena dalam pembuatan sistem ini dilakukan komunikasi yang intensif dengan
pengguna aplikasi. Metode ini digunakan untuk membantu pengembangan perangkat lunak
dalam membentuk model dari perangkat lunak yang harus dibuat. Metode ini dilakukan secara
bertahap, yaitu dengan mengembangkan suatu prototype yang sederhana hingga kemudian
dikembangkan dari waktu ke waktu sampai perangkat lunak selesai dikembangkan sesuai
5
dengan permintaan. Prototype merupakan bentuk dasar atau model awal dari suatu sistem atau
subsistem [12]. Tahap-tahap dalam metode Prototyping ditunjukkan pada Gambar 3.
Gambar 3 Metode Prototyping [12]
Tahap pengumpulan kebutuhan dilakukan untuk mengetahui dan menerjemahkan semua
permasalahan serta kebutuhan perangkat lunak dan kebutuhan sistem yang dibangun. Analisis
kebutuhan dilakukan dengan melakukan pencarian data-data serta informasi-informasi
yang dibutuhkan oleh sistem. Ada empat analisis kebutuhan dalam perancangan sistem yaitu
Analisis kebutuhan Sistem, Analisis kebutuhan Data, Analisis kebutuhan perangkat keras dan
Analisis kebutuhan perangkat lunak.
Supaya aplikasi yang dibuat dapat memenuhi kebutuhan pengguna, maka diperlukan suatu
analisis kebutuhan sistem. Analisis kebutuhan sistem ini dilakukan dengan wawancara kepada
pekerja serta pemilik UKM Efrata Print. Berdasarkan wawancara didapatkan hasil bahwa
dibutuhkan sistem yang dapat memenuhi kebutuhan berikut ini: a) Kebutuhan Administrator
mencakup: dapat mengelola data Galeri untuk Pemasaran Produk, mengelola data berita dan
artikel, mengelola testimoni dan pesanan. b) Kebutuhan Pengunjung atau konsumen
mencakup: dapat melihat Galeri, dapat melakukan pemesanan produk, melakukan Testimoni
(kritik dan saran), serta melihat berita dan artikel. Proses evaluasi prototyping dilakukan
sebanyak dua kali dan dilakukan dengan pengujian aplikasi kepada pengguna (Pemilik
UKM). Penjelasan setiap tahap evaluasi prototyping adalah sebagai berikut : Evaluasi tahap
pertama dilakukan bersama user aplikasi yaitu kepada pemilik UKM dan pekerja UKM. Pada
evaluasi ini dilakukan perancangan antar muka Web untuk mengetahui apakah rancangan
yang telah dibuat dapat memenuhi keinginan sesuai dengan apa yang diminta oleh
Konsumen. Pemilik UKM ingin penambahan fasilitas untuk memberikan berita atau artikel
kepada Konsumen, hal ini berguna untuk memberikan informasi yang berkaitan dengan
UKM dan juga seputar cara merawat batik. Evaluasi tahap kedua dilakukan dengan mengganti
beberapa bagian pada rancangan antar muka seperti Galeri, Klien, penambahan bagian kritik
6
dan saran, memperbaiki beberapa bagian aplikasi yang masih ada bug seperti tidak muncul
gambar saat upload, serta memperbaiki halaman utama supaya lebih menarik. Analisis
kebutuhan perangkat keras dan spesifikasi perangkat lunak yang digunakan dalam
membangun jurnal elektronik ini yaitu: perangkat keras yang akan digunakan adalah Prosesor
Intel Core i3, 2.40 GHz, RAM 2 GB dan Hardisk 320 GB. Sedangkan perangkat lunak yang
digunakan adalah sistem operasi Windows 7 Ultimate, Notepad++, Wamp Server (Apache
dan MySQL), Web browser (dalam penelitian ini digunakan Mozilla Firefox) dan Rational
Rose untuk membuat UML sistem. Perancangan sistem dalam penelitian ini dibuat dalam
bentuk Diagram UML. Diagram UML meliputi Use Case Diagram , Diagram activity,
Sequence Diagram dan Class Diagram. Berikut ini akan dijelaskan masing-masing Diagram
yang telah dibuat.
view data pesan dan order
hapus data pesan dan order
mengelola data pesan dan order
mengelola data klien
data account
tambah data pesan dan order
konsumen
hapus data berita dan artikel
hapus data klien
edit data klien
mengelola data berita dan artikel
admin
tambah data klien
edit data account
view berita dan artikel
data password
tambah data berita dan artikel
edit data password
edit data berita dan artikel
mengelola data galeri
view data galeri
edit data galeri
tambah data galeri
hapus data galeri
Gambar 4 Use Case Diagram Sistem
Gambar 4 merupakan Use case Diagram dari aplikasi yang dibuat. Terdapat 2(dua)
aktor dalam aplikasi, yaitu Admin dan Konsumen. Aktor Admin merupakan pemilik hak akses
tertinggi, di mana bisa melakukan pengelolaan data Galeri, Pemesan, Berita dan Artikel, serta
Data klien. Sedangkan Aktor Konsumen hanya bisa melihat data Galeri, Melakukan
pemesanan, Melihat Data Artikel dan Berita.
7
Gambar 5 Diagram Activity Tambah galeri
Gambar 5 merupakan Diagram Activity untuk proses menambah data galeri. Aktivitas
dimulai dengan memilih Admin page. Admin kemudian masuk menu manage galeri, setelah
itu mengisi data galeri yang akan dimasukan seperti Nama Judul, Foto atau Image, serta
Deskripsi. Data galeri kemudian akan tersimpan dalam basis data setelah menekan tombol
save.
konsumen
w eb
mulai
basisdata
pilih admin
page
manage klien
mengis i data
klien
menekan
tom bol s ave
menyim pan data
klien
menampilkan data
klien yang baru
s eles ai
Gambar 6 Diagram Activity Tambah klien
Gambar 6 merupakan Diagram activity untuk proses tambah klien yang dilakukan oleh
Admin. Aktivitas dimulai dengan memilih Admin page. Admin kemudian masuk menu
manage klien setelah itu mengisi data klien dan melakukan pengecekan apakah data klien
tersebut sudah terisi semua dengan baik dan benar maka Admin akan melakukan proses
selanjutnya. Data klien kemudian akan tersimpan dalam basis data setelah menekan tombol
save.
konsumen
mulai
w eb
basisdata
pilih user page
memilih menu
pemesanan
mengisi data
pemesanan
menekan
tombol save
menyimpan data
pemesanan
menampilkan data
pemesanan yang baru
selesai
Gambar 7 Diagram Activity Tambah pesanan (order)
Gambar 7 merupakan Diagram Activity untuk proses tambah pemesanan yang dilakukan
oleh konsumen. Konsumen memilih User page pada halaman utama. Selanjutnya User
memilih menu pemesanan (order). User selajutnya memasukkan isi pemesanan pada form
yang ditampilkan. Data pemesanan selanjutnya akan disimpan dalam basis data.
8
: InsertView
: admin
: galericontroller
: galerimodel
: basis data
1:mengisi data galeri (judul,deskripsi,gambar)
2:memanggil fungsi insert
3:memanggil model galeri
4:memeproses insert galeri
5:menyimpan data galeri
Gambar 8 Sequence Diagram Proses Tambah galeri
Gambar 8 merupakan Sequence Diagram untuk proses menambah data galeri yang
dilakukan oleh Admin. Penambahan data galeri ini dilakukan Admin dengan terlebih dahulu
mengisikan data galeri yang terdiri dari Judul, Deskripsi, dan Gambar. Setelah tombol save
ditekan, fungsi insert yang berada di file controller galeri akan dipanggil. Pada fungsi insert
ini dilakukan pemanggilan model galeri untuk memerintahkan penyimpanan data galeri yang
berisikan data Judul, Deskripsi, dan Gambar ke dalam basis data.
: admin
: InsertView
: kliencontroller
: klienmodel
: basis data
1:mengisi data klien (nama klien,link,gambar,testimoni)
2:memanggil fungsi insert
3:memanggil model klien
4:memeproses insert klien
5:menyimpan data klien
Gambar 9 Sequence Diagram Tambah klien
Gambar 9 merupakan Sequence Diagram untuk proses menambah data klien yang
dilakukan oleh Admin. Admin mengisikan data klien yang terdiri dari nama klien, Link Web
klien, Gambar klien, Testimoni. Setelah tombol save ditekan, fungsi insert yang berada di file
controller klien akan dipanggil. Pada fungsi insert ini dilakukan pemanggilan model klien
untuk memerintahkan penyimpanan data klien yang telah dimasukkan tadi ke dalam basis
data.
9
: konsumen
: InsertView
: ordercontroller
: ordermodel
: basis data
1:mengisi data order (detail order,gambar order)
2:memanggil fungsi insert
3:memanggil model order
4:memeproses insert order
5:menyimpan data order
Gambar 10 Sequence Diagram Proses Tambah Pesanan(order)
Gambar 10 merupakan Sequence Diagram untuk proses menambah data order yang
dilakukan oleh konsumen. Konsumen mengisikan data order yang terdiri dari detail order dan
gambar order. Setelah tombol save ditekan, fungsi insert yang berada di file controller order
akan dipanggil. Pada fungsi insert ini dilakukan pemanggilan model order untuk
memerintahkan penyimpanan data klien yang telah dimasukkan tadi ke dalam basis data.
Gambar 11 Class Diagram Aplikasi
Gambar 11 merupakan diagram class yang menggambarkan Model Class dan
Controller Class pada aplikasi. Model Class merupakan bagian aplikasi yang bertugas untuk
mengendalikan fungsi-fungsi yang berhubungan dengan basis data. Pada aplikasi yang dibuat
terdapat 5 (lima) Model Class, yaitu AdminModel, GaleriModel, ArtikelModel, OrderModel,
KonsumenModel. Sedangkan Controller Class bertugas untuk menghubungkan bagian view
dengan bagian Model Class. Pada aplikasi ini terdapat 5 (lima) Controller Class, yaitu
AdminController,
GaleriController,
ArtikelController,
OrderController,
Dan
KonsumenController. Bagian view tidak ikut digambarkan dalam diagram class karena bagian
view di dalam aplikasi bukan dalam bentuk class tetapi berupa tag HTML untuk menampilkan
informasi pada halaman Web.
10
4.
Hasil Implementasi dan Pembahasan
Implementasi dari Sistem Informasi UKM Efrata Print ini dilakukan dengan PHP 5
dan HTML. Aplikasi Web ini memiliki dua hak akses, yaitu Bagian Admin dan User.
Halaman utama Web berisi mengenai berita dan informasi serta galeri yang terkait tentang
UKM Efrata Print, Hak akses dalam Web pada bagian Admin meliputi Edit data Admin,
Manage berita dan artikel, Manage konten, Manage pesan kontak dan order, serta Manage
data Klien. Sedangkan untuk hak akses pada User meliputi melihat sejarah singkat UKM dan
sejarah batik, melihat berita dan artikel terkait UKM dan batik, melihat galeri tentang proses
pembuatan batik yang terjadi di UKM serta melihat hasil batik yang telah dikerjakan di UKM
tersebut, melakukan pemesanan batik, melakukan pendaftran sebagai konsumen UKM,
melakukan kritik dan saran terkait pelayanan yang diberikan UKM ataupun terkait pemesanan
batik dan hasilnya.
Gambar 12 merupakan tampilan ketika dibuka melalui browser PC (Personal
Computer) atau notebook. Halaman Web akan terlihat menyesuaikan dengan layar device di
mana Web tersebut diakses. Proses ini dilakukan dengan memanggil CSS yang terdapat pada
library Bootstrap.
Gambar 12 Halaman Home Web UKM Efarat print pada PC
Gambar 13 Halaman Home Web UKM Efrata Print pada Smartphone
Gambar 13 merupakan tampilan ketika dibuka melalui browser Tablet atau
smartphone. Halaman Web akan terlihat menyesuaikan dengan layar device di mana Web
tersebut diakses. Proses ini dilakukan dengan memanggil CSS yang terdapat pada library
Bootstrap.
11
Kode Program 1 Pemanggilan CSS Bootstrap
Kode Program 1 merupakan perintah dalam pemanggilan CSS Bootstrap dan
responsive yang merupakan bagian dari library Bootstrap. Menggunakan perintah link rel
berfungsi untuk menghubungkan kedalam sebuah style CSS eksternal dengan nama yang
telah kita tentukan, Kode program 1 terdapat dua CSS yang di panggail bootsrap.css dan
bootsrap-responsive.css kedua file CSS terdapat di folder css.
Kode Program 2 Fungsi Boostrap Dropdown
Kode Program 2 merupakan Fungsi dari class Dropdown menunjukan adanya
dropdown menu, Untuk membuka Dropdown menu menggunakan button dari class
.dropdown-toggle dan menggunakan attribute data-toggle = “dropdown” , Class caret ini
untuk menunjukan bahwa adanya tombol untuk dropdown.
Kode Program 3 Fungsi CSS Dropdown pada bootstrap –responsive.css
Gambar 14 Hasil Boostrap Dropdown
Gambar 14 merupakan hasil dari menu dropdown saat konsumen mengklik pada
bagian tentang pada halama Web utama maka akan muncul menu menurun untuk memilih
option ke halaman Web Tentang kami dan Sejarah. Kode Program 3 merupakan penggaturan
CSS untuk mengatur Dropdown menu untuk mengatur Padding, Font, Color serta Radius
untuk kolom Dropdown
Kode Program 4 Fungsi slider Carousel
12
Gambar 15 Gambar slide menggunakan slider Carousel
Carousel merupakan proses penampilan gambar-gambar yang diberi efek slide,
Carousel di dalam Web terletak di dalam halam utama untuk menarik perhatian para
pengunjung Web atau User hasil dari Fungsi slider Carousel ditunjukan pada gambar 15.
Kode Program 4 merupakan perintah dalam melakukan pemanggilan slider Carousel
menggunakan div class flexslider letak pengaturan class tersebut terdapat di flexsider.css.
Kode Program 5 Fungsi Bootstrap Navbar pada PC
13
Kode Program 6 CSS Bootstrap Navbar
Kode Program 5 merupakan fungsi dari navigation bar pada halaman utama terdapat
menubar disamping dari header Web UKM yang hanya bisa keluar saat menggunakan device
PC atau notebook. Kode program 6 ini mengatur dari letak Navbar di dalam Web, Hasil
keluaran Kode program 5 dan 6 terdapat pada Gambar 16.
Gambar 16 Gambar boostrap navbar pada PC
Kode Program 7 Fungsi Bootstrap Navbar pada mobile
Gambar 16 Gambar Boostrap Navbar pada Mobile
14
Pada Kode Program 7 Fungsi Boostrap Navbar ini di lakukan bila device yang
digunakan user adalah mobile atau smartphone sehingga tampilan interfacenya mengikutinya
hasil dari kode dapat dilihat pada Gambar 16 terlihat bahwa navigasi untuk mobile berbeda
dengan navigasi yang digunakan di PC, Jika di PC terletak di samping kanan Header maka
untuk mobile di terletak menurun seperti pada Gambar 16.
Kode Program 8 Fungsi Notifikasi Pesan Masuk pada Admin
Gambar 18 Gambar Notifikasi Pesan pada Panel Admin
Pada Kode Program 8 fungsi notifikasi yang dilakukan saat User melakukan inputan
di halaman kontak baik itu Komentar ,Testimoni maupun Saran akan masuk ke dalam panel
Admin selanjutnya pesan tersebut akan masuk ke dalam database, setelah itu akan muncul
sebuah pop-up yang akan muncul di halaman Web pada panel Admin Hasil keluaran dari
notifikasi pada Gambar 18.
Gambar 19 Gambar captha pada halaman kontak
15
Kode Program 9 Fungsi Captha pada Kontak
Pada Kode Program 9 merupakan program captha pada fungsi $chars adalah panjang
karakter yang disediakan pada fungsi $string = $_GET['cap'] lalu karakter tersebut disimpan
dan diacak dalam fungsi mt_rand(100,200) dalam bentuk session setelah itu diberi
penambahan noise atau titik gambar untuk proses membuat tulisan di $text_color lalu ouput
keluaran pada header (“Content-type: image/png”); untuk hasil keluaran kode program 9
pada Gambar 19.
Pengujian aplikasi dilakukan dengan menguji fungsi-fungsi dari aplikasi yang telah
dibuat untuk mencari kesalahan/bug pada sistem. Pengujian aplikasi dilakukan agar sistem
yang dibuat berjalan sesuai dengan yang diharapkan dan dapat memenuhi kebutuhan
pengguna. Pengujian aplikasi ini menggunakan dua teknik pengujian yaitu pengujian alpha
dan pengujian beta.
Pengujian alpha menggunakan metode blackbox yaitu pengujian fungsi-fungsi aplikasi
secara langsung tanpa memperhatikan alur eksekusi program. Pengujian ini dilakukan dengan
memperhatikan apakah fungsi telah berjalan sesuai rancangan dan sesuai yang diharapkan.
Tabel 1 adalah hasil pengujian dari aplikasi yang telah dilakukan.
Berdasarkan pengujian yang dilakukan pada aplikasi Web dapat dilihat status pengujian
dari setiap fungsi valid, maka disimpulkan bahwa aplikasi ini berjalan dengan baik dan sesuai
yang diharapkan. Pengujian beta adalah pengujian yang dilakukan oleh orang yang tidak ikut
dalam pembuatan aplikasi atau calon pengguna aplikasi. Pengujian beta dilakukan dengan
menggunakan kuesioner, yaitu dengan membagikan kuesioner kepada sample user. Sample
user berjumlah 30 responden dan dipilih secara acak, sample user pada pengujian ini adalah
Pekerja dan konsumen Efrata Print yang mengakses Web ini. Hasil jawaban kuesioner dapat
dilihat pada Tabel 2.
16
Tabel 1 Hasil Pengujian blackbox
Output yang
diharapkan
Sukses
menampilkan Web
Output yang
dihasilkan sistem
Sukses
menampilkan
Web
Status
Pengujian
Valid
Menampilkan
dropdown menu
Sukses
menampilkan
dropdown menu
Sukses
menampilkan
dropdown menu
Valid
Fungsi slider
Carousel
Slider gambar dengan
fungsi slider Carousel
Menampilkan navbar
pada PC dan mobile
Fungsi notifikasi
pesan pada Admin
Ubah data artikel
Muncul notifikasi pesan
pada panel Admin
Form diisi dengan benar
Sukses
menampilkan
slider gambar
Sukses
menampilkan
navbar PC dan
mobile
Sukses notifikasi
pesan
Sukses ubah data
Valid
Fungsi boostrap
navbar
Sukses
menampilkan slider
gambar
Sukses
menampilkan
navbar pada PC dan
mobile
Sukses notifikasi
pesan
Sukses ubah data
Fungsi yang diuji
Kondisi
Responsive pada
PC dan smartphone
Dapat menampilkan
Web di smartphone dan
PC
Fungsi dropdown
menu
Valid
Valid
Valid
Tabel 2 Hasil Jawaban Kuesioner
No
1
2
3
4
5
Pernyataan
Aplikasi aplikasi ini mudah digunakan
Tampilan, huruf dan gambar dari aplikasi ini dapat dilihat
dengan jelas
Menu-menu pada aplikasi ini mudah dipahami dan tidak
membingungkan
Aplikasi ini membantu memberikan informasi tentang UKM
dan artikel batik
Aplikasi ini bermanfaat untuk Konsumen yang ingin
melakukan pemesanan secara Online
STS
1
0
TS
0
1
CS
4
3
S
14
15
SS
11
11
1
0
4
16
9
0
1
6
10
13
0
2
5
9
14
Setelah semua jawaban diketahui maka yang dilakukan adalah menghitung presentase
jawaban responden yang telah mengisi kuesioner. Hasil analisis data untuk pertanyaan 1
menunjukkan sebanyak 36,67% responden menjawab sangat setuju, 46,67% responden
menjawab setuju dan 13,33% responden menjawab cukup setuju. Jadi disimpulkan bahwa
aplikasi ini mudah untuk digunakan.
Hasil analisis data untuk pertanyaan 2 menunjukkan sebanyak 36,67% responden
menjawab sangat setuju, 50,00% responden menjawab setuju dan 10,00% responden
menjawab cukup setuju. Jadi disimpulkan bahwa tampilan aplikasi ini dapat dilihat dengan
jelas. Hasil analisis data untuk pertanyaan 3 menunjukkan sebanyak 30,00% responden
menjawab sangat setuju, 53,33% responden menjawab setuju dan 13,33% responden
menjawab cukup setuju. Jadi disimpulkan bahwa menu-menu pada aplikasi ini mudah
dipahami dan tidak membingungkan.
Hasil analisis data untuk pertanyaan 4 menunjukkan sebanyak 43,33% responden
menjawab sangat setuju, 33,33% responden menjawab setuju dan 20,00% responden
menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini membantu dan mempermudah
pengguna dalam mencari informasi tentang UKM dan artikel batik.
Hasil analisis data untuk pertanyaan 5 menunjukkan sebanyak 46,67% responden
menjawab sangat setuju, 30,00% responden menjawab setuju dan 16,67% responden
17
menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini bermanfaat untuk digunakan
oleh konsumen dalam melakukan pemesanan secara online.
Pengujian manfaat juga dilakukan dengan wawancara kepada Pemilik dari UKM Efrata
Print. Berdasarkan wawancara tersebut didapatkan bahwa sistem Informasi Web UKM ini
dapat membantu dan mempermudah dalam mempromosikan hasil usaha serta dapat
membantu konsumenya yang ingin melakukan pemesanan secara Online.
5.
Simpulan
Berdasarkan penelitian yang telah dilakukan, maka dapat diambil kesimpulan bahwa
Sistem Informasi Berbasis Web Menggunakan Twitter Boostrap pada UKM Batik Efrata Print
dibuat menggunakan PHP 5 dan library Bootstrap ini menjadi responsive, sehingga dapat
diakses dari berbagai ukuran layar device. Hasil pengujian menunjukkan bahwa Sistem
Informasi Berbasis Web Menggunakan Twitter Boostrap pada UKM Batik Efrata Print ini
membantu dalam mempermudah proses promosi UKM, Karena disediakan halaman galeri
untuk melihat hasil produk batik dari UKM tersebut. Aplikasi dilengkapi dengan berita dan
artikel yang berguna untuk membantu konsumen dalam mencari informasi terkait UKM dan
artikel tentang cara merawat batik. Dapat disimpulkan bahwa aplikasi ini mudah digunakan.
Tampilan, huruf, dan gambar dari aplikasi ini dapat dilihat dengan jelas. Menu-menu pada
aplikasi ini mudah dipahami dan tidak membingungkan. Dari segi manfaat, aplikasi ini
membantu memberikan informasi tentang UKM dan artikel batik untuk konsumen yang ingin
melakukan pemesanan secara Online
6.
Pustaka
Saputro Adi Guridno, 2013, Sistem Informasi Pengolahan Data Rumah Kos
Menggunakan Framerwork Codeigniter Di kelurahan Demangan Kecamatan
Gondokusuman
Yogyakarta,
Jurnal
Script,
Volume
1
,No.1
,http://respository.amikom.ac.id/file/Publikasi_10.11.3713.pdf diakses tanggal 1
Agustus 2016.
[2] Rosid,M.A., dan Jakaria R.B.2016, Implementasi Framework Twitter Boostrap Dalam
Perancangan
Aplikasi
Penerimaan
Mahasiswa
Baru
BerbasisWeb,Sidoarjo,KINETIK,1(3):129134,http://kinetik.umm.ac.id/index.php/kinetik/article/download/121/15 diakses tanggal
3 agustus 2017.
[3] Mulyadi. 2001. Sistem Akuntansi,Yogyakarta : Salemba Empat.
[4] Krismiaji. 2005.Sistem Informasi Akuntasi,Yogyakarta : AMP YKPN.
[5] Jogiyanto,HM, 2003, Sistem Teknologi Informasi, Yogyakarta : Andi Offset.
[6] Raharjo, Budi, 2002,Implikasi Teknologi Infomasi dan Internet Terhadap Pendidikan,
Bisnis
dan
Pemerintahan
:
Siapakah
Indonesia
?
,
http://www.budi.insan.co.id/articles/riau-it.doc. Diakses tanggal 20 Juli 2016
[7] Kadir,Abdul. 2014,Pengenalan Sistem Informasi,Yogyakarta : Andi Offset.
[8] Yuhefizar,2013, Membangun Toko Online Itu Mudah, Yogyakarta : Graha Ilmu.
[9] Marcotte, Ethan. 2011. Responsive Web Design, http://ebookbrowsee.net. Diakses
tanggal 16 Desember 2016.
[10] Alatas, Husein, 2013, Responsive Web Design dengan PHP & Bootstrap, Yogyakarta:
Loko Media.
[1]
18
[11] Hasibuan, Zainal A. 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer dan
Teknologi Informasi : Konsep, Teknik, dan Aplikasi. Jakarta : Ilmu Komputer
Univesitas Indonesia.
[12] Pressman, R.S, 2001, Software Engineering : A Practitioner’s Approach, Amerika
Serikat : R.S. Pressman and Associates.
19