Kajian Pustaka T1 672009136 Full text

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 modelsampel 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 4 Use 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 9 Tampilan 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 {