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

1

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

Email: 1) 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

1Mahasiswa Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

2Staf Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

3Staf Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

2

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

3

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

4

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.

5

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

6

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

7

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.

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.

tambah data berita dan artikel

hapus data berita dan artikel

view data pesan dan order hapus data pesan dan order

edit data galeri

tambah data galeri hapus data galeri

edit data klien

tambah data klien

hapus data klien

edit data berita dan artikel

edit data account

edit data password

mengelola data pesan dan order

<<extend>>

mengelola data galeri<<extend>>

<<extend>> <<extend>>

mengelola data berita dan artikel<<extend>>

<<extend>>

mengelola data klien

<<extend>>

<<extend>>

<<extend>>

admin

tambah data pesan dan order

view data galeri

<<extend>>

view berita dan artikel

<<extend>>

data account<<extend>>

data password<<extend>>

konsumen

<<extend>>

<<extend>>

8

pilih user pagemulai

memilih menu

pemesanan

mengisi data

pemesanan

menekan

tombol save

menampilkan data

pemesanan yang baru

selesai

menyimpan data

pemesanan

basisdatawebkonsumen

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.

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.

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.

pilih admin

page

mulai

manage klien

mengisi data

klien

menekan

tombol save

menampilkan data

klien yang baru

selesai

menyimpan data

klien

basisdatawebkonsumen

9

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.

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.

1:mengisi data galeri (judul,deskripsi,gambar)

: admin : admin : InsertView : InsertView : galericontroller : galericontroller : galerimodel : galerimodel : basis data : basis data

2:memanggil fungsi insert

3:memanggil model galeri

4:memeproses insert galeri

5:menyimpan data galeri

: admin : admin : InsertView : InsertView : kliencontroller : kliencontroller : klienmodel : klienmodel : basis data : 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

10

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.

: konsumen : konsumen : InsertView : InsertView : ordercontroller : ordercontroller : ordermodel : ordermodel : basis data : 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

11

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.

12

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

13

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

14

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

15

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

16

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.

17

Tabel 1 Hasil Pengujian blackbox

Fungsi yang diuji Kondisi Output yang

diharapkan

Output yang

dihasilkan sistem

Status

Pengujian

Responsive pada

PC dan smartphone

Dapat menampilkan

Web di smartphone dan

PC

Sukses

menampilkan Web

Sukses

menampilkan

Web

Valid

Fungsi dropdown menu

Menampilkan dropdown menu

Sukses menampilkan

dropdown menu

Sukses menampilkan

dropdown menu

Valid

Fungsi slider

Carousel

Slider gambar dengan

fungsi slider Carousel

Sukses

menampilkan slider

gambar

Sukses

menampilkan

slider gambar

Valid

Fungsi boostrap

navbar

Menampilkan navbar

pada PC dan mobile

Sukses

menampilkan

navbar pada PC dan mobile

Sukses

menampilkan

navbar PC dan mobile

Valid

Fungsi notifikasi

pesan pada Admin

Muncul notifikasi pesan

pada panel Admin

Sukses notifikasi

pesan

Sukses notifikasi

pesan

Valid

Ubah data artikel Form diisi dengan benar Sukses ubah data Sukses ubah data Valid

Tabel 2 Hasil Jawaban Kuesioner

No Pernyataan STS TS CS S SS

1 Aplikasi aplikasi ini mudah digunakan 1 0 4 14 11

2 Tampilan, huruf dan gambar dari aplikasi ini dapat dilihat

dengan jelas

0 1 3 15 11

3 Menu-menu pada aplikasi ini mudah dipahami dan tidak

membingungkan

1 0 4 16 9

4 Aplikasi ini membantu memberikan informasi tentang UKM

dan artikel batik

0 1 6 10 13

5 Aplikasi ini bermanfaat untuk Konsumen yang ingin

melakukan pemesanan secara Online

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

18

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

[1] 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):129-

134,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.

19

[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.