1

Penerapan Responsive Web pada Sistem Informasi

Persediaan Barang di Toko Kadus-Kaduz

Artikel Ilmiah

Peneliti :

Raymond Tenaya 672009136

Christine Dewi, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen SatyaWacana

Salatiga

Desember 2015

2

3

4

5

6

Penerapan Responsive Web pada Sistem Informasi

Persediaan Barang di Toko Kadus-Kaduz

1) Raymond Tenaya, 2)Christine Dewi

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50771, Indonesia

Email: 1) raymondtenaya@gmail.com, 2) Christine_dewi@staff.uksw.edu

Abstract

Inventory information is a common problem faced by a company in running its business

processes. Kadus-kaduz shop is a manufacturing company that produces invitations

ordered by the clients. Various types of paper and material that is stored with the number

changing every time an issue that is often faced by this company. Frequent occurrence of

overlap amount of raw materials recorded on paper by the number of real warehouse.

Not infrequently the store owner must come directly to the warehouse or to the supplier to

see first hand the stock material feedstock invitation, then there is trouble when should

check the stock from a distance. The focus of this research is how to build a system

inventory information that helps store Kadus-kaduz manage material inventory of raw

materials by utilizing frameworkbootstrap invitation to implement responsive web

technology. Application of responsive web technology system inventory information helps

businesses to operate the system as a mobile device that has a screen size that is different.

This study uses prototype system development.

Keyword:Stock Manajemen System,Responsive web, Bootstrap

Abstrak

Informasi persediaan barang merupakan permasalahan yang sering dihadapi suatu

perusahaan dalam menjalankan proses bisnisnya. Toko Kadus-kaduz merupakan

perusahaan manufaktur yang memproduksi undangan-undangan yang dipesan oleh klien.

Berbagai jenis kertas dan material yang disimpan dengan jumlah yang berubah-ubah

setiap waktu menjadi permasalahan yang kerap dihadapi perusahaan ini. Sering terjadinya

overlap jumlah bahan baku yang dicatat pada kertas dengan jumlah nyata digudang.

Tidak jarang pemilik toko harus datang langsung ke gudang maupun ke suplier untuk

melihat langsung stok bahan baku material undangan, maka terjadi kesulitan ketika harus

mengecek persediaan barang dari jarak jauh. Fokus dalam penelitian ini adalah

bagaimana membangun sistem informasi persediaan barang yang membantu Toko Kadus-

kaduz dalam mengelola persediaan bahan baku material undangan dengan memanfaatkan

frameworkbootstrap untuk menerapkan teknologi responsive web. Penerapan teknologi

responsive web pada sistem informasi persediaan barang membantu pelaku bisnis untuk

mengoperasikan sistem secara mobile dengan perangkat yang memiliki ukuran layar yang

berbeda-beda. Penelitian ini menggunakan metode prototype dalam pengembangan

sistem. Kata Kunci :Informasi Persediaan Barang,Responsive web, Bootstrap

1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen Satya

Wacana Salatiga. 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

7

1. Pendahuluan

Manajemen stok atau pengendalian persediaan barang merupakan

permasalahan yang sering dihadapi suatu perusahaan dalam menjalankan proses

bisnisnya. Sejumlah barang diharapkan berada dalam jumlah yang tepat, lokasi

yang tepat, waktu yang tepat dan harga atau ongkos yang murah. Persediaan erat

hubungannya dengan operasional perusahaan, baik perusahaan yang bergerak

dalam bidang perdagangan maupun industri. Jika penanganan persediaan tidak

dilaksanakan dengan baik maka akan mengakibatkan resiko terganggunya proses

produksi atau tidak terpenuhinya pesanan pembelian, akibatnya dapat merugikan

perusahaan. Berbagai cara dilakukan oleh perusahaan-perusahaan untuk dapat

mengatur baik jumlah produksi maupun jumlah stok yang akan disimpan. Jika

perusahaan melakukan penimbunan atau penyimpanan stok secara berlebihan

dalam jangka waktu yang lama, maka akan terjadi pengurangan nilai stok. Hal ini

diakibatkan karena proses penyimpanan stok memerlukan biaya penyimpanan.

Oleh karena itu diperlukan strategi untuk pengaturan jumlah stok.

Toko Kadus-kaduz merupakan perusahaan manufaktur yang memproduksi

undangan-undangan yang dipesan oleh klien. Toko Kadus-Kaduz yang memiliki 2

tempat showroom dan 2 gudang yang berfungsi sebagai tempat proses produksi

serta tempat penyimpanan barang baik itu bahan baku, bahan setengah jadi,

maupun barang jadi, dan dalam melakukan proses bisnisnya memiliki jumlah

karyawan mencapai 30 sampai 40 orang. Berbagai jenis kertas dan material yang

disimpan dengan jumlah yang berubah-ubah setiap waktu menjadi permasalahan

yang kerap dihadapi perusahaan ini. Sering terjadinya overlap jumlah bahan baku

yang dicatat secara manual dengan jumlah nyata digudang. Pengarsipan dilakukan

menggunakan media kertas dan dicatat setiap ada transaksi atau perubahan stok.

Jika terjadi kesalahan pada pencatatan stok di kertas, maka menyebabkan proses

bisnis yang dijalankan terganggu karena harus menunggu pemesanan kembali

bahan baku ketika bahan baku yang digunakan ternyata kurang dari jumlah yang

dibutuhkan. Apabila konsumen ingin menanyakan sejauh mana proses

produksinya, tidak jarang pemilik harus kewalahan untuk mengecek dari gudang

yang satu ke gudang yang lainnya dikarenakan gudang yang satu dengan yang

lainnya berjarak sekitar 15 kilometer. Serta tidak jarang pula pemilik harus

menanyakan jumlah stok bahan baku yang dimiliki, dan mengkaji ulang stok

nyata dengan stok yang dicatat oleh bagian gudang.

Berdasarkan latar belakang masalah yang sudah dijelaskan sebelumnya,

maka diperoleh suatu ide untuk membangun sistem informasi persediaan barang

untuk toko Kadus-kaduz. Sistem ini akan membantu pelaku bisnis untuk

mengelola jumlah bahan baku atau material yang disimpan di gudang. Sistem ini

juga memberikan peringatan atau notifikasi jika jumlah suatu bahan baku sudah

mencapai batas minimum. Fokus dalam penelitian ini adalah bagaimana

membangun sistem informasi persediaan barang yang membantu Toko Kadus-

kaduz dan mengelola persediaan bahan baku material undangan dengan

memanfaatkan bootstrap untuk menerapkan teknologi responsive web. Sistem ini

akan dibangun menggunakan teknologi responsive web. Hal ini dikarenakan

8

pelaku bisnis atau aktor yang menggunakan sistem ini nantinya memiliki peluang

untuk menggunakan sistem secara mobile serta dikarenakan letak gudang yang

satu dengan gudang yang lain berjarak cukup jauh dan juga pelaku bisnis tidak

selalu berada di toko untuk mengawasi persediaan barang & proses bisnis. Oleh

karena itu responsive web akan membantu menyajikan sistem dengan tampilan

mobile kepada pengguna. Tujuan dari penelitian ini adalah menerapkan teknologi

responsive web dalam sistem informasi persediaan barang pada Toko Kadus-

kaduz. Sebagai batasan masalah dalam penelitian ini tidak akan membahas

mengenai keamanan data sistem, sistem menggunakan teknologi responsive web

dengan memanfaatkan framework bootstrap, sistem mengelola data stok bahan

baku material undangan dan sistem tidak menangani masalah pengambilan

keputusan.

2. Kajian Pustaka

Penelitian yang berjudul Analisa dan Perancangan Sistem Informasi

Persediaan Pada PT.Putra Kencana Jaya Medan merupakan penelitian yang

mengemukakan masalah pentingnya pemanfaatan teknologi untuk mengatur

persediaan barang suatu perusahaan. PT. Putra Kencana Jaya Medan masih

menggunakan metode perpetual artinya segala transaksi persediaan dicatat ke

dalam buku sehingga pimpinan dapat mengetahui jumlah persediaan melalui buku

catatan. Namun dalam pelaksanaannya terkadang pencatatan transaksi terjadi

kesalahan tulis atau kesalahan hitung. Sehingga informasi persediaan menjadi

tidak akurat lagi. Selain itu informasi status persediaan juga masih lambat

diperoleh sehingga menghambat kinerja manajemen perusahaan. Setelah

memahami permasalahan yang ada maka peneliti mengajukan sistem usulan.

Perancangan sistem usulan ini dibuat dengan tahapan : perancangan bagan alir,

diagram alir data, perancangan sistem, basis data dan site map serta implementasi

rancangan sistem. Hasil akhir dari sistem informasi persediaan barang Pada PT.

Putra Kencana Jaya Medan adalah membantu pihak manajemen perusahaan dalam

memperoleh data dan informasi mengenai pengaturan persediaan barang dengan

cepat dan tepat, sehingga sistem usulan dapat mempermudah pimpinan dalam

mengawasi kegiatan pengontrolan persediaan barang dan meningkat efektifitas

kerja manajemen.

Penelitian tentang responsive web pernah dilakukan pada penelitian yang

berjudul webresponsive Design Untuk Situs Berita Menggunakan Framework

Codeigniter. Penelitian ini menemukan masalah bahwa dengan berkembangan

teknologi mobile dan web sekarang ini maka banyak orang mengakses berita lewat

perangkat smartphone. Semakin banyaknya perangkat atau platform yang muncul

dengan berbagaiukuran, maka sebuah situs perlu untuk mengenali setiap ukuran

perangkat pengguna. Tujuan penelitian ini adalah membuat webresponsive design

yang dapat menampilkan halaman situs sesuai dengan layar perangkat atau

platform. Situs berita ini dibuat menggunakan framework codeigniter, yang dibuat

untuk meningkatkan kenyamanan membaca konten berita dengan menggunakan

perangkat atau platform, sehingga pembaca dengan nyaman dan mudah membaca

konten berita tanpa harus mengeser layar kesamping. Framework codeigniter

membantu menyederhanakan dan mengelompokkan setiap subsistem dalam

9

proses pembangunan sistem.

Pada penelitian ini dilakukan implementasi sistem informasi manajemen

stok Toko Kadus-kaduz berbasis responsive web. Fokus dari penelitian ini adalah

bagaimana membangun sistem informasi manajeman stok dengan menggunakan

responsive web. Responsive web membantu pengguna ketika mengoperasikan

sistem dengan cara mengubah tampilan web menjadi tampilan mobile. Selain itu

platformweb dapat diakses dimana saja ketika dibutuhkan pengecekan data selama

perangkat mobile terhubung akses internet atau jaringan. Perbedaan penelitian ini

dengan penelitian sebelumnya adalah : penelitian pertama hanya dilakukan analisa

dan perancangan aplikasi desktop untuk sistem persediaan barang dan penelitian

ke dua responsive web digunakan untuk situs berita.

Inventory meliputi semua barang yang dimiliki perusahaan pada saat

tertentu, dengantujuan untuk dijual kembali atau dikomsumsikan dalam siklus

operasi normal perusahaan sebagai barang yang dimiliki untuk dijual atau

diasumsikan untuk dimasa yang akan datang, semua barang yang berwujud dapat

disebut sebagai inventory, tergantung dari sifat dan jenis usaha perusahaan.

Perusahaan yang melakukan kegiatan produksi (industri manufaktur) akan

memiliki tiga jenis persediaan, yaitu :(1) Persediaan bahan baku dan penolong,

contohnya : kertas, plastik, mika.(2) Persediaan bahan setengah jadi, contohnya :

label nama, pita, bunga. (3) Persediaan barang jadi , contohnya: box lamaran yang

sudah dihias, undangan menikah tanpa nama. Perusahaan minimal memiliki satu

jenis persediaan, yaitu persediaan barang dagangan. Adanya berbagai macam

persediaan ini menuntut pengusaha untuk melakukan tindakan yang berbeda untuk

masing-masing persediaan, dan ini akan sangat terkait dengan permasalahan lain

seperti masalah peramalan kebutuhan bahan baku serta peramalan penjualan atau

permintaan konsumen. Bila melakukan kesalahan dalam menetapkan besarnya

persediaan maka akan berdampak ke masalah lain, misalnya tidak terpenuhinya

permintaan konsumen atau bahkan persediaan barang yang berlebihan.

Responsive web adalah pendekatan untuk desain web yang bertujuan

untuk menyusun situs dengan tampilan optimal dan interaksi, misalkan

kemudahan dalam membaca konten dan kemudahan penggunaan navigasi dengan

cara mengubah ukuran, tata letak atau jarak, ketika web diakses di berbagai

perangkat (dari desktop komputer ke ponsel). Menurut Ethan Marcothe responsive

web memiliki 3 hal utama, yaitu : flexible (grid-based layout), flexible image-

media, dan media queries (CSS3). Flexible (grid-based layout) diartikan sebagai

kemampuan web untuk menyesuaikan atribut-atribut dari konten grid dalam

ukuran window tertentu. Konten grid yang dimaksud adalah element dan

container. Sebagai contoh tribut-atribut tersebut adalah font, margin, padding,

width dan height. Flexible image-media diartikan sebagai kemampuan web untuk

menampilkan gambar atau media (video) ke dalam ukuran window tertentu.

Ukuran dari gambar atau video akan diubah ratio nya jika hendak ditampilkan

pada window ukuran tertentu. Media queries adalah mekanisme pengelompokan

media untuk mengidentifikasi media yang digunakan untuk menampilkan

halaman web tidak hanya berdasarkan pada jenis (type) media tapi berdasarkan

karakteristik perangkat dan browser. Media queries merupakan pengembangan

dari media type pada CSS2 yang memiliki masalah dalam pengelompokan jenis

media.

10

Tidak semua mobile web bisa dikategorikan kedalam responsive web.

Mobile web bisa berupa web yang memang didesain dengan tampilan mobile dan

pengguna diarahkan atau dialihkan menggunakan url tertentu ketika

mengaksesnya melalui perangkat mobile, misalkan mobile.website.com atau

m.website.com. Responsive web merupakan satu web yang bekerja baik pada

tampilan mobile maupun desktop, karena seolah-olah web merespon browser

untuk mengubah tata letak, ukuran dan jarak konten menyesuaikan ukuran layar.

Gambar 1 Ilustrasi Responsive web Design

Bootstrap

Bootstrap adalah front-end frameworkweb (HTML, CSS, dan JS) yang

dapat digunakan untuk membangun responsive web. Framework bootstrap

merupakan open-source framework paling populer untuk melakukan

pembangunan responsive web. Bootstrap membantu developer dalam membangun

tampilan front-end web yang memiliki kemampuan untuk menyesuaikan ukuran,

tata letak maupun jarak konten sesuai dengan ukuran layar perangkat.

3. Metode dan Perancangan Sistem

Penelitian ini menggunakan metode prototype dalam pengembangan sistem.

Tahapan-tahapan metode prototype dapat dilihat pada Gambar 3.

Gambar 2 Metode Prototype

11

Gambar 2 menjelaskan tahapan pada metode prototype. Tahap pertama dilakukan

analisis kebutuhan sistem. Data-data meliputi bagaimana proses bisnis berjalan,

data-data yang terlibat dalam transaksi pemesanan undangan, laporan tertulis yang

diarsipkan oleh pengelola bisnis. Selain data tersebut dilakukan juga pengumpulan

data untuk membangun sistem responsive web. Tahap kedua dilakukan

perancangan sistem dan perangkat lunak. Semua data yang dikumpulkan pada

tahap pertama digunakan untuk perancangan masalah dan perancangan sistem.

Perancangan sistem meliputi perancangan arsitektur, antarmuka, Unified

Modeling Language (UML), dan basis data. Tahap ketiga dilakukan pembuatan

model/sampel program (prototype) sesuai dengan data yang telah dikumpulkan.

Tahap keempat dilakukan evaluasi dan pengujian sistem oleh klien. Apabila

sistem belum sesuai dengan yang diharapkan oleh klien, maka dilakukan

peninjauan dan pembuatan sampel (prototype) lagi, sampai sesuai dengan yang

diharapkan oleh klien. Tahap kelima yaitu pengembangan program dapat

dilakukan apabila klien sudah setuju dengan model prototype yang telah dibuat

oleh peneliti. Pengujian dilakukan untuk mengetahui sistem sudah berjalan

dengan baik atau tidak. Tahap terakhir dilakukan operasi dan pemeliharaan

sistem.

Proses bisnis yang terjadi pada Toko Kadus-Kaduz dapat dijelaskan sebagai

berikut. Pertama konsumen bertemu dengan admin untuk melakukan pemesanan

udangan. Proses pemesanan ini akan dibantu oleh kasir. Kasir akan meneruskan

pesanan tersebut kepada pihak gudang. Pihak gudang mengecek apakah bahan

material yang digunakan untuk pembuatan udangan tersebut cukup atau tidak. Jika

tidak maka dilakukan pemesanan bahan material. Jika cukup maka dilakukan

proses produksi. Setelah undangan jadi maka kasir akan menghubungi konsumen.

Konsumen akan mengambil undangan tersebut dan melakukan pembayaran.

Admin bertugas untuk mengecek dan mengatur alur bisnis yang terjadi.

Rancangan Arsitektur

Tahap perancangan arsitektur dilakukan untuk mengetahui gambaran fungsi

kerja sistem. Gambar 3 merupakan rancangan arsitektur sistem.

Gambar 3 Rancangan Arsitektur Sistem

Rancangan arsitektur sistem manajemen stok berbasis responsive web dapat

dijelaskan sebagai berikut: Sistem akan digunakan oleh pengguna (user) melalui

media desktop atau mobile. Setiap perintah yang akan dijalankan pengguna akan

12

ditangkap oleh responsive web yang dibangun. Responsive web menentukan baik

ukuran, grid dan layout dari user interface sistem web. Selanjutnya sistem akan

mengakses database untuk mengambil data yang dibutuhkan. Respon dari

database akan ditampilkan dalam bentuk user interface yang sesuai dengan media

yang digunakan untuk mengakses sistem.

Unified Modeling Language (UML)

Dalam tahap ini dilakukan perancangan sistem dan perangkat lunak untuk

menggambarkan prosedur dan proses kerja dari sistem aplikasi tersebut.

Rancangan ini yang akan mendasari proses pembangunan sistem. Proses

perancangan proses sistem dalam penelitian ini menggunakan UML (Unified

Modeling Language) dengan beberapa proses, dijelaskan sebagai berikut.

Use case diagram, terdapat 3 aktor yang akan menggunakan sistem, yaitu

Admin, Gudang dan Kasir. Ketiga aktor memiliki fungsi yang berbeda-beda.

Gambar 4 merupakan use case diagram sistem.

Gambar 4Use Case Diagram Sistem

Setiap node (oval) melambangkan fungsi yang terdapat pada sistem. Aktor admin

13

memiliki hak untuk melakukan fungsi mengatur user, kategori, material, suplier,

pelanggan, produk, stok, stok opname, transaksi pembelian dan transaksi

penjualan. Sebelum masuk ke sistem admin harus menjalankan fungsi login.

Admin dapat melakukan semua fungsi yang terdapat pada sistem. Aktor Gudang

memiliki hak untuk melakukan fungsi mengatur stok, mengatur stok opname dan

transaksi pembelian. Aktor kasir memiliki hak untuk melakukan fungsi mengatur

transaksi penjualan.

Diagram aktifitas atau activity diagram memberikan visualisasi aliran

tindakan dalam sistem yang dibuat, percabangan tindakan yang terjadi, bagaimana

tindakan awal sistem dan bagaimana tindakan akhir yang terjadi pada sistem.

Activity diagram juga dapat memberikan gambaran tentang proses yang dapat

terjadi dalam beberapa tindakan tertentu. Sebagai contohnya adalah aktivitas

untuk menambah material baru yang dapat dilihat pada Gambar 5.

Gambar 5 Activity Diagram Menambah Material Baru

Berdasarkan Gambar 5 dapat disimpulkan bahwa pertama aktor Admin mengisi

form material yang ditampilkan oleh sistem. Setiap nilai pada form akan disimpan

ke dalam variable yang mewakili atribut material. Sistem akan menyusun perintah

SQL insert data. Perintah SQL ini akan dieksekusi oleh database untuk

menyimpan data material baru. Sistem akan menampilkan notifikasi berhasil atau

gagal proses penyimpanan data baru. Admin dapat melihat hasil akhir dari proses

penambahan data baru.

Class diagram merupakan diagram yang digunakan untuk menampilkan

beberapa kelas yang ada dalam sistem atau perangkat lunak yang sedang

dikembangkan.Class diagram akan digunakan pada proses implementasi sistem

secara pengkodean. Gambar 6 merupakan class diagram sistem.

14

Gambar 6 Class Diagram Sistem

Sistem menggunakan konsep Model View Controller (MVC) dalam pembangunan

sistem. Terdapat 3 kelompok utama pada class diagram sistem, yaitu : model,

view, dan controller. ClassAdminController berfungsi sebagai controller sistem.

Class ini akan mengatur setiap fungsi atau perintah yang dikerjakan oleh sistem

dan menjembatani antara class model dan class view. Class Kategori, Material,

Produk, Riwayat Stok, Pengguna, Suplier, Pelanggan, Penjualan, Detail

Penjualan, Pembelian dan Detail Pembelian merupakan class model. Class ini

berfungsi sebagai penampung data yang mewakili setiap tabel yang terdapat pada

database. Class ini juga memiliki fungsi SQL command yang akan dijalankan saat

pengolahan database. Class Kategori UI, Material UI, Produk UI, Pelanggan UI,

Suplier UI, Pengguna UI, Stok UI, Stok Opname UI, Pembelian UI, dan Penjualan

UI merupakan class view. Class view berfungsi untuk mengatur tampilan atau

user interface. Class ini yang akan menjadi tampilan Responsive web sistem

manajemen stok.

4. Pembahasan

15

Implementasi Sistem Manajemen Stok

Implementasi Responsive web dalam sistem manajemen stok Toko Kadus-

Kaduz dijelaskan pada tahap ini. Setiap aktor harus melakukan login untuk dapat

masuk ke sistem. Setiap aktor sudah dirancangan untuk menjalankan fungsi

berbeda-beda. Terdapat tiga aktor yaitu admin, gudang dan kasir. Hasil dari

implementasi sistem manajemen stok dapat dijelaskan sebagai berikut.

Aktor Admin memiliki hak untuk menjalankan semua fungsi pada sistem.

Sedangkan aktor gudang memiliki hak untuk melakukan fungsimengatur stok,

mengatur stok opname dan transaksi pembelian. Aktor kasir memiliki hak untuk

melakukan fungsi mengatur transaksi penjualan. Daftar fungsi-fungsi tersebut

adalah mengatur data pengguna, kategori, material, suplier, pelanggan, produk,

stok, stok opname, traksaksi pembelian dan transaksi penjualan. Setiap fungsi

dijelaskan sebagai berikut.

Fungsi pengguna digunakan admin untuk melakukan register menambah

akun pengguna baru atau menghapus akun pengguna. Setiap pengguna atau user

yang masuk ke sistem harus login terlebih dahulu. Atribut dari pengguna adalah

username, password, level, dan login terakhir.

Fungsi kategori digunakan admin untuk menambah, mengubah dan

menghapus kategori material yang akan digunakan dalam proses produksi

nantinya. Material digolongkan kedalam beberapa kategori dengan tujuan

mempermudah pengolahan data, sebagai contoh : kertas, pita, plastik dan lain-

lain.

Fungsi material digunakan admin untuk menambah, mengubah dan

menghapus daftar material. Material ini akan menjadi bahan yang digunakan

dalam proses produksi. Material harus terdaftar terlebih dahulu ketika akan

digunakan untuk proses produksi. Atribut dari material adalah idmaterial,

kategori, nama, merk, harga jual, harga beli, jumlah, stok minimum, expired date,

dan satuan. Setiap harga perubahan yang dilakukan admin pada transaksi

penjualan maupun pembelian akan disimpan secara langsung ke data material oleh

sistem. Begitu juga untuk jumlah stok, ketika admin melakukan pembelian akan

langsung menambah jumlah stok pada menu material. Untuk atribut expired date

dan stok minimum akan digunakan untuk proses peringatan jika stok sudah

dibawah stok minimum atau tanggal sudah melewati tanggal expired date.

Tampilan fungsi data material dapat dilihat pada Gambar 7.

Gambar 7 Tampilan Fungsi Menu Data Material

Fungsi data suplier digunakan admin untuk melakukan penambahan,

16

pengubahan dan penghapusan data suplier. Data suplier akan digunakan pada

transaksi pembelian material. Atribut data suplier yang disimpan adalah idsuplier,

nama suplier, alamat, dan telepon. Fungsi data pelanggan digunakan untuk

melakukan pengaturan penambahan, pengubahan dan penghapusan data

pelanggan. Data pelanggan akan digunakan pada transaksi penjualan. Atribut dari

data pelanggan adalah id pelanggan, nama pelanggan, alamat, dan telepon.Fungsi

data produk digunakan admin untuk menambah, mengubah dan menghapus data

produk. Data produk pada menu ini adalah undangan yang akan ditawarkan

kepada calon pembeli. Pada menu ini setiap tipe undangan akan dicatat daftar

material yang akan digunakan. Sehingga ketika proses produksi dapat diketahui

jumlah material yang harus dikeluarkan dari gudang untuk proses produksi

sejumlah berapa. Data produk memiliki atribut sebagai berikut : id produk, nama,

harga jual, harga produksi. Untuk detail produk disimpan kedalam tabel produksi

yang memiliki atribut : id material, kategori, nama, jumlah, dan satuan. Gambar 8

merupakan tampilan fungsi menu data produk.

Gambar 8 Tampilan Fungsi Menu Data Produk

Fungsi stok digunakan admin untuk menambah material yang memiliki

jumlah stok dibawah minimum. Menu stok akan memberi warna berbeda untuk

material yang memiliki jumlah dibawah stok minimum. Tujuannya adalah

membantu admin untuk mengetahui material mana yang harus dilakukan

penambahan stok. Penambahan stok ini akan langsung mengubah jumlah stok

pada data stok. Tampilan dari menu stok dapat dilihat pada Gambar 9.

Gambar 9Tampilan Fungsi Menu Data Stok

Fungsi stok opname digunakan admin dengan tujuan mencocokkan jumlah

stok pada sistem dengan jumlah nyata digudang. Jika terdapat perbedaan antara

stok pada sistem dengan stok nyata di gudang maka admin dapat mencatat berapa

jumlah stok yang berbeda dan keterangan yang menyebabkan perbedaaan

17

tersebut. Hal ini biasanya terjadi ketika terjadi kerusakan material yang

menyebabkan material tidak bisa digunakan dalam proses produksi, atau

kehilangan material. Fungsi ini akan membantu admin untuk proses pengecekan

stok material. Tampilan dari fungsi menu stok opname dapat dilihat pada Gambar

10.

Gambar 10 Tampilan Fungsi Menu Data Stok Opname

Fungsi menu transaksi pembelian digunakan untuk menambah jumlah stok

material. Material yang dibeli dari suplier akan dicatat dan disimpan dalam

transaksi pembelian. Atribut dari transaksi pembelian adalah nomor faktur, id

suplier, tanggal, dan total. Untuk detail transaksi pembelian disimpan kedalam

tabel detail pembelian dengan atribut sebagai berikut : id material, jumlah satuan,

harga beli. Perubahan jumlah dan harga beli akan mengubah data pada menu

material. Material yang baru pertama dibeli dan belum memiliki jumlah stok harus

didaftarkan terlebih dahulu di menu material. Gambar 11 merupakan tampilan

menu data transaksi pembelian.

Gambar 11 Tampilan Fungsi Menu Data Transaksi Pembelian

Fungsi menu transaksi penjualan digunakan untuk mencatat transaksi

penjualan yang terjadi. Ketika ada pelanggan yang akan memesan undangan maka

kasir akan menambah transaksi penjualan. Atribut dari transaksi penjualan adalah

nomor faktur, id pelanggan, tanggal pesan, tanggal ambil, total, user, status.

Atribut status akan menyimpan status pemesanan, misalkan status lunas atau

status produksi. Untuk atribut detail penjualan disimpan dalam tabel detail

penjualan dengan atribut sebagai berikut : id produk, jumlah, satuan, harga,

diskon. Gambar 12 adalah tampilan fungsi menu data transaksi penjualan.

18

Gambar 12 Tampilan Fungsi Menu Data Transaksi Penjualan

Admin juga dapat melihat hasil penjualan dan pembelian tiap bulan. Hasil

penjualan dan pembelian dikelompokkan tiap bulan dan ditampilkan per tahun

dalam bentuk grafik maupun tabel. Grafik membantu admin untuk mengetahui

hasil penjualan dan pembelian, sedangkan data lebih detail disajikan kedalam

bentuk tabel. Tampilan halaman grafik dan tabel hasil penjualan-pembelian dapat

dilihat pada Gambar 13.

Gambar 13 Tampilan Grafik Hasil Penjualan dan Pembelian

Penerapan Responsive web

Penelitian ini memanfaatkan bootstrap untuk membangun responsive web.

Berdasarkan Ethan Marcotte, sebagai mencetus konsep responsive web, terdapat 3

hal utama yang harus diperhatikan dalam membangun responsive web, yaitu :

flexible grid, flexible image dan media queries.Bootstrap merupakan front-end

frameworkweb yang memiliki kemampuan menangani 3 hal utama responsive

web. Dalam penelitian ini tidak melibatkan gambar, karena jumlah material

produk yang sangat bervariasi sehingga hanya digunakan kode material.

Flexible (grid-based layout) diartikan sebagai kemampuan web untuk

menyesuaikan atribut-atribut dari konten griddalam ukuran window tertentu.

Konten grid yang dimaksud adalah element dan container. Sebagai contoh tribut-

atribut tersebut adalah font, margin, padding, width dan height. Ukuran dari font

harus disesuaikan dengan ukuran layar. Jika tidak maka pengguna akan

mengalami kesulitan membaca tulisan yang terlalu kecil atau besar. Ethan

Marcotte memberikan rumus sederhana untuk mementukan proportional ratio

ukuran font, yaitu : target / context = result. Sebagai contoh dapat dilihat pada

penggalan Kode Program 1.

19

Kode Program 1 Penggalan Perintah CSS untuk Menentukan Ratio Ukuran Font

Kode Program 1 menjelaskan bahwa ukuran font pada body adalah 14px dan

target dari ukuran untuk tag headline h1 adalah 28px. Maka dapat dihitung

dengan menggunakan rumus : target / context = result 28px / 14px = 2em.

Satuan em pada result merupakan perbandingan antara ukuran context dalam hal

ini ukuran tag body dengan ukuran headline h1 yang diinginkan yaitu 28px.

Sehingga ketika tagheadline h1 digunakan akan menghasilkan teks dengan ukuran

sama dengan 28px untuk ukuran body 14px. Ukuran tag headline h1 akan

berubah sebesar 2 kali ukuran font pada body.

Selain ukuran font penerapan flexible (grid-based layout) dapat dilihat

padadimensi ukuran grid untuk tiap elemen div. Kode program 2 merupakan

contoh dari perhitungan dimensi ukuran elemen body, navbar dan content.

Kode Program 2 Penggalan Perintah CSS untuk Menentukan Ratio Dimensi side font

Penggalan Kode Program 2 menjelaskan bahwa ukuran dari body menggunakan id

page-wrapper, navbar menggunakan class .side-nav dan content menggunakan id

page-wrapper. Untuk id page-wrapper memiliki atribut width yang bernilai

100%, artinya lebar body sama dengan lebar screen window. Untuk class .side-

nav bernilai 225px dari 100% body. Sedangkan ukuran id page-wrapper bernilai

100% dari 100% body – 225px.

1. #page-wrapper {

2. width: 100%;

3. padding: 0;

4. background-color: #fff;}

5. .side-nav {

6. position: fixed;

7. top: 51px;

8. left: 225px;

9. width: 225px;

10. margin-left: -225px; 11. …} 12. #page-wrapper { 13. width: 100%; 14. padding: 0; 15. background-color: #fff;}

1. body {

2. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

3. font-size: 14px;

4. line-height: 1.42857143;

5. color: #333;

6. background-color: #fff;}

7. …

8. h1 {

9. margin: .67em 0;

10. font-size: 2em;}

20

(1) (2) (3)

Gambar 15(1)Ukuran Body(2) Ukuran Navbar (3) Ukuran Content pada Desktop (1349)

Media queries adalah mekanisme pengelompokan media untuk

mengidentifikasi media yang digunakan untuk menampilkan halaman web tidak

hanya berdasarkan pada jenis (type) media tapi berdasarkan karakteristik

perangkat dan browser. Media queries merupakan pengembangan dari media type

pada CSS2 yang memiliki masalah dalam pengelompokan jenis media.

Pemanfaatan bootstrap pada penelitian ini memiliki 5 jenis media queries yang

dapat digunakan untuk 5 jenis layout. Jenis-jenis media queries tersebut dapat

dilihat pada Tabel 1. Tabel 1 Pengelompokan Media Queries pada Sistem

No Label Layout Width

1 Large Display > 1200px

2 Default > 992px

3 Potrait Tablet > 768px

4 Phone/Tablet < 767px

5 Phone < 480px

Pengelompokan media queries tersebut dapat dilihat pada bootstrap.css.

Pengelompokan ukuran tersebut digunakan untuk membantu mengubah tampilan

responsive web pada ukuran layar tertentu. Penerapan media queries pada sistem

dapat dilihat pada penggalan Kode Program 3. Kode Program 3 Penggalan Perintah CSS Pengelompokan Media Queries

Kode Program 3 merupakan pengelompokan jenis media queries yang digunakan

pada sistem. Media queries memiliki 2 komponen utama, yaitu media type dan

query. Media type pada kode program 1 adalah screen. Sedangkan contoh query

adalah width: 1170px. Width dapat disebut sebagai feature dan 1170px merupakan

1. @media (max-device-width: 480px) and (orientation: landscape) {

2. … {

3. max-height: 200px;}}

4. @media (max-width: 767px) {

5. … {

6. margin-bottom: 0;}}

7. @media screen and (min-width: 768px) {

8. .container {

9. width: 750px;}}

10. @media (min-width: 992px) { 11. .container { 12. width: 970px;}} 13. @media (min-width: 1200px) { 14. .container { 15. width: 1170px;}}

21

value. Sebagai contoh ketika web diakses menggunakan perangkat yang memiliki

resolusi > 768px maka nilai width yang akan ditampilkan adalah 750px.

Pembangunan Kode Program

Sistem manajemen stok berbasis responsive web dibangun menggunakan

konsep MVC. Konsep MVC membagi kelas-kelas kedalam 3 kelompok kelas,

yaitu kelas model, kelas view, dan kelas controller. Setiap kelompok memiliki

fungsi masing-masing. Kelas controller akan mengatur seluruh fungsi yang terjadi

pada sistem, untuk kelas view mengatur user interface atau antarmuka Responsive

web, sedangkan kelas model akan menjadi penampung data yang didapatkan dari

database.

Kelas AdminController berfungsi sebagai kelas controller pada sistem

manajemen stok. Kelas AdminController berisi semua fungsi yang dapat

dilakukan oleh sistem. Sebagai contoh, fungsi penambahan material baru.

Material harus didaftarkan terlebih dahulu atau diinputkan terlebih dahulu agar

dapat digunakan pada proses produksi. Kode program 4 adalah penggalan perintah

untuk melakukan input data material baru. Kode Program4Perintah Input Data Material Baru Pada Kelas AdminController

Kode program 4 menjelaskan pertama kali fungsi tambahmaterial() dipanggil akan

melakukan pengecekan session login user apakah valid atau tidak. Setelah valid

maka sistem akan menampung setiap atribut material baru yang dikirimkan oleh

kelas view. Kemudian dilakukan pengecekan apakah ada atribut yang tidak diisi,

jika ada maka sistem akan menampilkan peringatan tanpa menyimpan data ke

database. Jika valid maka akan dipanggil fungsi tambah material() pada kelas

model yang berisi perintah SQL insert ke database. Ketika proses berhasil

dilakukan kelas controller akan menampilkan pemberitahuan bahwa data berhasil

disimpan ke kelas view. Kelas AdminController juga berfungsi sebagai

penjembatan antar kelas view dengan kelas model.

1. function tambahmaterial() {

2. $this->ceksession();

3. …

4. $idmaterial = $_POST['idmaterial'];

5. $kategori = $_POST['kategori'];

6. …

7. if (!empty($idmaterial) && !empty($kategori) && !empty($nama) &&

8. …

9. $datak = array(

10. 'idmaterial' => $idmaterial, 11. … 12. 'satuan' => $satuan); 13. $hasil = $this->madmin->tambahmaterial($datak); 14. if ($hasil) {$data['notif'] = 'Material Berhasil Ditambahkan'; 15. } else {$data['notif'] = 'Material Gagal Ditambahkan'; 16. }} else {$data['notif'] = 'Data Belum Lengkap';} 17. $dmaterial = $this->madmin->ambildaftarmaterial(); 18. $data['dmaterial'] = $dmaterial; 19. $stokhabis = $this->madmin->ambilmaterialstokmin(); 20. $data['stokhabis'] = $stokhabis; 21. $this->load->view('material', $data);}

22

Kelas model berfungsi untuk menampung data dari database. Setiap

atribut yang dimiliki kelas model merupakan kolom yang terdapat pada setiap

tabel pada database. Penerapan kelas model pada framework PHP codeigniter

yang digunakan pada penelitian ini berisi perintah SQL yang akan dijalankan

ketika pemanggilan suatu fungsi oleh kelas controller. Penggalan perintah untuk

menampilan semua data materi dapat dilihat pada Kode Program 5.

Kode Program5 Perintah Input Data Material Baru Pada Kelas Model

Kelas view bertugas untuk mengatur user interface sistem. Pada kelas view

dilakukan penerapan Responsive web. Implementasi responsive web dilakukan

dengan menggunakan framework bootstrap. Framework bootstrap berisi perintah

javascript dan stylesheet (CSS) untuk membantu pengaturan tampilan web.

Kelasview harus melakukan pemanggilan library bootstrap. Selain itu dilakukan

pemanggilan perintah untuk setiap komponen form yang terlibat. Komponen form

akan diatur baik atribut class maupun id, sehingga terhubung dengan framework

bootstrap. Sebagai contoh penggalan perintah untuk menyusun halaman daftar

suplier dapat dilihat pada Kode program 6. Kode Program6Perintah Penyusun Halaman Daftar Suplier Pada Kelas View

1. <html lang="en">

2. <head>

3. <meta charset="utf-8">

4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>Sistem Stok Admin</title>

6. <link href="<?php echo base_url(); ?>template/css/bootstrap.min.css"

rel="stylesheet">

7. <link href="<?php echo base_url(); ?>template/css/jquery-ui.min.css"

rel="stylesheet">

8. ...

9. <script type="text/javascript" language="javascript" src="<?php echo

base_url(); ?>template/js/jquery.js"></script>

10. <script type="text/javascript" language="javascript" src="<?php echo base_url(); ?>template/js/jquery-ui.min.js"></script>

11. ... 12. </script> 13. </head> 14. <body> 15. <div id="wrapper"> 16. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 17. <div class="navbar-header"> 18. ... 19. </ul></div></nav> 20. <div id="page-wrapper"> 21. <table id="myexample" class="table table-hover table-striped"> 22. ...

23. </table> 24. ... 25. </div> 26. </div> 27. <script src="template/js/bootstrap.min.js"></script> 28. ... 29. </body> 30. </html>

1. function tambahmaterial($datap) {

2. $this->db->insert('material', $datap);

3. return true;}

23

Pengujian

Pengujian aplikasi dilakukan untuk menguji fungsi-fungsi pada sistem

sebagai hasil implementasi arsitektur yang telah dirancang sebelumnya dengan

melihat use case. Pengujian aplikasi menggunakan teknik Alpha, yaitu pengujian

fungsional tanpa melihat alur eksekusi program, namun cukup dengan

memperhatikan apakah setiap fungsi sudah berjalan dengan baik sesuai dengan

yang diharapkan. Hal yang diuji dan hasil pengujian dapat dilihat pada Tabel 2.

Tabel 2 Hasil Pengujian Fungsionalitas Program Menggunakan Alpha

No Fungsi

yang diuji

Kondisi Output yang

diharapkan

OutputSistem Hasil

1 Admin Semua atribut

kategori diisi

Data berhasil disimpan

dalam database

Data berhasil disimpan

dalam database

Valid

Semua atribut

material diisi

Data berhasil disimpan

dalam database

Data berhasil disimpan

dalam database

Valid

Semua atribut

suplier diisi

Data berhasil disimpan

dalam database

Data berhasil disimpan

dalam database

Valid

Semua atribut

pelanggan diisi

Data berhasil disimpan

dalam database

Data berhasil disimpan

dalam database

Valid

Semua atribut

produk diisi

Data berhasil disimpan

dalam database

Data berhasil disimpan

dalam database

Valid

2 Gudang Semua atribut

stok diisi

Jumlah stok berhasil

ditambah

Jumlah stok berhasil

ditambah

Valid

Semua atribut

stok opname diisi

Stok opname berhasil

disimpan

Stok opname berhasil

disimpan

Valid

Semua atribut

pembelian diisi

Data pembelian

berhasil disimpan

Data pembelian

berhasil disimpan

Valid

3 Kasir Semua atribut

penjualan diisi

Data penjualan

berhasil disimpan

Data penjualan

berhasil disimpan

Valid

Berdasarkan Tabel 2 dapat diketahui bahwa sistem sudah berjalan dengan baik.

Setiap fungsi diuji dengan kondisi tertentu untuk mengetahui apakah proses kerja

sistem benar atau tidak. Output yang dihasilkan sistem akan dicek apakah sudah

sesuai dengan output yang diharapkan atau tidak. Jika terdapat kesalahan baik dari

proses maupun output maka dilakukan perbaikan sistem.

5. Kesimpulan dan Saran

Berdasarkan penelitian yang telah dilakukan maka dapat diambil kesimpulan

bahwa penerapan teknologi responsive web pada sistem informasi persediaan

barang membantu pelaku bisnis untuk mengoperasikan sistem dengan perangkat

yang memiliki ukuran layar yang berbeda-beda. Hal ini dapat membantu

pengguna ketika harus mengakses web menggunakan perangkat mobile. Sistem

ini membantu admin untuk mengetahui dan mengatur stok material yang

digunakan sebagai bahan undangan. Selain itu membantu pihak kasir dan gudang

untuk mengecek dan mendapatkan informasi stok. Pemanfaatan bootstrap dalam

sistem manajemen stok ini digunakan untuk membangun responsive web.

Pembangunan sistem informasi persediaan barang berbasis teknologi responsive

web ini dilakukan dengan cara mendefinisikan 5 media queries yang dapat

berkerja mengubah tampilan web untuk tiap jenis ukuran layar, yaitu Large

24

Display, Default, Portrait Tablet, Phone/Tablet, dan Phone.

6. Daftar Pustaka

[1] Siska, Lily Syahfitri. 2010. Analisis Sistem Pengendalian Persediaan

Barang Dagang Pada PT. Sungai Budi di Palembang. STIE MDP.

[2] Tan, Vinny. 2015. Pentingnya Persediaan, dan Ssistem EOQ dan Sistem

JIT.

[3] Selamat, Tanda. 2013. Analisa Dan Perancangan Sistem Informasi

Persediaan Pada PT. Putra Kencana Jaya Medan. Medan : STMIK IBBI.

[4] Herbowo, Agus Rahmat. 2012. WebResponsive Design Untuk Situs Berita

Menggunakan Framework Codeigniter. Depok :Universitas Gunadarma.

[5] Koher, Eric L.A. 2006. Produksi dan Bahan Baku, GRAMEDIA. Jakarta.

[6] Ristono, Agus. 2009.Manajemen Persediaan. Graha Ilmu, Yogyakarta.

[7] Marcotte, Ethan. 2010. Responsive web Design.

http://alistapart.com/article/responsive-web-design. Diakses tanggal 20

Agustus 2015.

[8] Crestodina, Andy. 2012. Responsive web Design: The Next Mobile Mega-

Trend. http://technori.com/2012/11/2808-responsive-web-design-the-next-

mobile-mega-trend/. Diakses tanggal 25 Agustus 2015.

[9] Anonymous. 2015. Bootstrap 3 Tutorial.

http://www.w3schools.com/bootstrap/. Diakses tanggal 25 Agustus 2015.

[10] Anonymous. 2015. Bootstrap. http://getbootstrap.com/. Diakses tanggal 25

Agustus 2015.

[11] Hasibuan, Zainal A. 2007. Metodologi Penelitian Pada Bidang Ilmu

Komputer dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi. Jakarta

: Ilmu Komputer Universitas Indonesia.

[12] Pressman, Roger S. 2001. Software Engineering A Practitioner Aproach.

New York : McGraw-Hill.