PERANCANGAN WEBSITE SISTEM INVENTORY ONLINE

LAPORAN UAS REKAYASA WEB

Diajukan untuk memenuhi tugas uts mata kuliah Rekayasa Web

Disusun Oleh :

Galeh Adi Prasetyo G.231.15.0019

Dony Setiawan G.231.14.0147
Amin Abdullah Sidiq G.231.15.0102
Sauma Farzhabi G.231.15.0098

PROGRAM STUDI TEKNIK INFORMATIKA

UNIVERSITAS SEMARANG
2018
 I. PENDAHULUAN

1.1. Latar Belakang Masalah

System Inventory adalah suatu kegiatan dalam proses pengolahan
data barang yang terdapat di dalam suatu gudang. System Inventory
memiliki pengaruh besar terhadap suatu instansi, karena System Inventory
dapat membantu menyelesaikan masalah pengolahan data barang dan
memudahkan pelaporan data barang yang tersedia.
Suatu instansi yang tidak memiliki Sistem Inventori, akan
mengalami sedikit masalah dalam pengolahan data barang misalnya, pada
PT. Prima Mulya Sentosa yang melakukan sistem pencatatan data inventori
secara manual. Aktifitas pendataannya meliputi, pendataan barang baru
datang, barang lama yang masih layak digunakan, bahkan barang yang rusak
dan harus diganti dalam setiap ruang, kemudian data tersebut diolah menjadi
laporan data inventory dengan menggunakan Microsoft Excel.
Proses pendataan seperti ini kurang efektif karena dibutuhkan
ketelitian, dalam pendataan dengan jumlah barang yang banyak sering
mengakibatkan terjadinya Redundancy Data (data ganda) dan dalam proses
pembuatan laporan data inventori membutuhkan proses yang lama karena
staff harus membuat data baru.
Permasalahan tersebut membuat staff harus bekerja secara berulang-
ulang untuk memperoleh data yang tepat, misalnya pada kasus pembuatan
laporan data inventory untuk pendataan barang baru yang akan diletakan
pada ruangan yang tersedia, staff harus melakukan pengecekan ulang
terhadap kondisi barang yang tersedia di ruangan dan merevisi laporan
inventori barang tersebut.
Dengan berkembangnya suatu sistem informasi maka PT. Prima
Mulya Sentosa memerlukan suatu aplikasi inventory. Dengan harapan dapat
membantu solusi atas permasalahan yang timbul. Dalam pembahasan ini
penulis menetapkan sebuah judul “System Inventory Pada PT. Prima Mulya
Sentosa Berbasis WEB Menggunakan Laravel”.
1.2. Tujuan Perancangan Aplikasi
Adapun tujuan pembuatan Perancangan sebagai berikut:
1. Memenuhi tugas UTS mata Kuliah Rekaya Web pada Universitas
Semarang.
2. Membangun sebuah sistem informasi baru secara komputerisasi untuk
memudahkan dalam penyimpanan dan pencarian data sehingga dapat
membantu memberikan informasi yang cepat, tepat dan akurat.

1.3. Metode Pembuatan Aplikasi

Dari data yang terkumpul kemudian dilakukan pengembangan
sistem yang menggunakan Model Waterfall, yaitu melalui tahapan sebagai
berikut :

Gambar 1.1 Waterfall Model (Youssef Bassil, 2011)

Adapun tahapan-tahapan pada metode waterfall yang meliputi beberapa

proses diataranya :
a. Analysis
Proses pencarian kebutuhan yang dibutuhkan dalam membuat suatu
system inventory pada PT. Prima Mulya Sentosa yang dapat di mengerti
antara staf pengembang dan user, sehingga akan tercipta suatu interaksi
yang nyaman antara user dengan software yang di hasilkan. Proses ini
 mengidentifikasi secara rinci mengenai fungsi-fungsi dan tujuan dari
software sebagai spesifikasi sistem yang akan dibuat.
b. Design
Proses ini digunakan untuk mengubah kebutuhan-kebutuhan diatas
menjadi representasi ke dalam bentuk “blueprint software” yang
nantinya dibuat menjadi sebuah system inventory pada PT. Prima Mulya
Sentosa, sebelum coding dimulai desain harus dapat
mengimplementasikan kebutuhan yang telah disebutkan pada tahap
sebelumnya.
c. Implementasi
Untuk dapat dimengerti oleh mesin, dalam hal ini adalah computer,
maka desain tadi harus diubah bentuknya menjadi bentuk yang dapat
dimengerti oleh mesin, yaitu kedalam bahasa pemrograman melalui
proses coding. Tahap ini merupakan implementasi dari tahap design
yang secara teknis nantinya dikerjakan oleh programmer untuk menjadi
sebuah system inventory pada PT. Prima Mulya Sentosa
d. Testing
Sesuatu yang disebut haruslah diuji cobakan. Demikian juga dengan
software. Semua fungsi-fungsi software bebas dari error dan hasilnya
harus benar-benar sesuai dengan kebutuhan yang sudah didefinisikan
sebelumnya. System inventory pada PT. Prima Mulya Sentosa harus
melalui tahap ini untuk benar-benar di uji apakah dapat digunakan
dengan baik atau tidak.
e. Maintenance
Pemeliharaan suatu software diperlukan, termasuk didalamnya adalah
pengembangan, karena software yang dibuat tidak selamanya hanya
seperti itu. Ketika dijalankan mungkin saja masih ada error kecil yang
tidak ditemukan sebelumnya atau ada penambahan fitur-fitur yang
belum ada pada software tersebut. Pengembangan diperlukan ketika
adanya perubahan dari eksternal perusahaan seperti ketika ada
pergantian sistem operasi, atau perangkat lainnya. Demikian pula
dengan system inventory pada PT. Prima Mulya Sentosa yang nantinya
akan berada dalam tahap ini jika adanya perbaikan dan pengembangan
yang dilakukan oleh tim Programmer.
 II. KAJIAN/TINJAUAN PUSTAKA

2.1. Pengertian Website

Website adalah halaman informasi yang ada di internet, di mana
halaman tersebut merupakan kumpulan komponen yang terdiri dari teks,
gambar, dan atau suara animasi. Karena adanya berbagai komponen tadilah,
sebuah website menjadi menarik menurut Suryana, et al (2014).
2.1.1. Jenis-jenis Website
Berikut jenis website menurut Suryana, et al (2014) ada 3 yaitu :
 Website Statis adalah jenis website yang didalam website tersebut tidak
dimaksudkan untuk diupdate secara berkala.
 Website Dinamis adalah website yang isinya bisa diupdate secara cepat
dan sering.
 Website Interaktif adalah jenis website yang memungkinkan pengguna
web tersebut untuk langsung berinteraksi, baik itu dengan pengguna
lain ataupun dengan website itu sendiri.
2.1.2. Unsur Penunjang Situs Web
Berikut unsur-unsur yang terdapat dalam website menurut Suryana, et al
(2014) :
 Nama domain (Domain Name)
Pengertian nama domain atau biasa disebut domain name atau URL
adalah alamat unik di dunia internet yang digunakan untuk
mengidentifikasi sebuah website atau dengan kata lain domain name
adalah alamat yang digunakan untuk menemukan sebuah website pada
dunia internet. Contoh : http://www.master.co.id.
 Rumah tempat website (Web Hosting)
Web hosting dapat diartikan sebagai ruangan yang terdapat dalam
hardisk yang merupakan tempat menyimpan berbagai data, file-file,
gambar dan lain sebagainya yang akan ditampilkan di website.
  Bahasa program (script program)
Script program adalah bahasa yang digunakan untuk menerjemahkan
setiap perintah dalam website pada saat diakses. Jenis bahasa program
sangat menentukan statis, dinamis, atau interaktifnya sebuah website.
Jenis-jenis bahasa program antara lain HTML, ASP, PHP, JSP, Java
Script dan sebagainya.
 Desain website
Setelah melakukan penyewaan domain name dan web hosting serta
penguasaan bahasa program, unsur website yang penting dan utama
adalah desain. Desain website menentukan kualitas dan keindahan
sebuah website. Ini sangat berpengaruh kepada penilaian pengunjung
akan bagus tidaknya sebuah website.
 Publikasi Website
Keberadaan situs tidak ada gunanya dibangun tanpa dikunjungi atau
dikenal oleh masyarakat atau pengunjung internet. Karena efektif
tidaknya situs sangat tergabtung dari besarnya pengunjung dan
komentar yang masuk. Untuk menghasilkan situs kepada masyarakat
memerlukan apa yang disebut publikasi atau promosi.
Untuk mendukung kelanjutan dari situs diperlukan pemeliharaan setiap
waktu sesuai yang diinginkan seperti penambahan informasi, berita,
artikel, link, gambar atau yang lain sebagainya. Tanpa pemeliharaan
yang baik situs akan terkesan membosankan atau monoton juga akan
segera ditinggal pengunjung.

2.2. Pengertian Content Management System ( CMS )

Menurut Suhanto (2010) CMS bisa didefinisikan sebagai software
yang mampu mengelola isi atau content dari sebuah website seperti
melakukan publikasi, edit, atau mengubah content.
 Beberapa manfaat dari penggunaan CMS dapat dijabarkan sebagai
berikut :
1. Manajemen Data
Manajemen data merupakan fungsi dari CMS. Semua data atau
informasi baik yang ditampilkan ataupun belum dapat diorganisasi dan
di simpan secara baik. Data atau informasi tadi dapat dipergunakan
kembali sesuai dengan kebutuhan. Selain itu, CMS juga mendukung
berbagai macam format data, seperti XML, HTML, PDF, dll, indexing,
fungsi pencarian dan kontrol terhadap revisi yang dilakukan terhadap
data atau informasi. Untuk menggunakan CMS biasanya pengetahuan
tentang bahasa pemrograman tidaklah terlalu dibutuhkan, karena semua
proses berjalan secara otomatis. Begitupula dengan proses ‘update’,
dapat dilakukan dengan cepat sehingga menjamin kemutakhiran
informasi yang ditampilkan.
2. Mengatur Siklus Hidup Website
Banyak CMS memberikan fasilitas kepada para penggunanya untuk
mengelola bagian atau isi mana saja yang akan ditampilkan, masa atau
waktu penampilan dan lokasi penampilan di website. Tidak jarang
sebelum ditampilkan, bagian atau isi yang dimaksud terlebih dahulu di
review oleh editor sehingga dijamin kevaliditasannya.
3. Mendukung Web Templating dan Standarisasi
Setiap halaman website yang dihasilkan berasal dari template yang telah
terlebih dahulu disediakan oleh CMS. Selain dapat menjaga konsistensi
dari tampilan, para penulis dan editor dapat berkonsentrasi secara penuh
dalam melaksanakan tugasnya menyediakan isi website. Bila isi telah
tersedia, maka proses publikasi dapat berjalan dengan mudah karena
sudah ada template sebelumnya. Beberapa bagian dari website biasanya
telah ditetapkan sedemikian rupa sehingga tidak dapat diubah begitu
saja. Hal ini dilakukan untuk memberikan standarisasi kepada seluruh
bagian dari website.
 4. Personalisasi Website
Sekali sebuah isi ditempatkan ke dalam CMS, isi tersebut dapat
ditampilkan sesuai dengan keinginan dan kebutuhan dari penggunanya.
Terlebih lagi dengan kelebihan CMS yang dapat memisahkan antara
desain dan isi, menyebabkan proses personalisasi dapat berjalan dengan
mudah.
5. Sindikasi
Sindikasi memberikan kemungkinan kepada sebuah website untuk
membagi isinya kepada website – website yang lain. Format data yang
didukung juga cukup variatif mulai dari rss, rdf, xml hingga ‘backend
scripting’. Sama halnya dengan personalisasi, sindikasi juga dapat
dilakukan dengan mudah karena isi dan desain telah dibuat terpisah.

2.3. WordPress
WordPress adalah sebuah perangkat lunak blog yang ditulis dalam
PHP dan didukung sistem basis data MySQL. WordPress adalah penerus
resmi dari b2/cafelog yang dikembangkan oleh Michel Valdrighi. Nama
WordPress di usulkan oleh Christine Selleck. (Simarmata, 2010).

2.4. Hyper Text Markup Language (HTML)

HTML kependekan Hyper Text Markup Language. Dokumen
HTML adalah text file murni yang dapat dibuat denagn editor text
sembarang. Dokumen ini di kenal sebagai web page. File-file HTML ini
berisi instruksi-instruksi yang kemudian diterjemahkan oleh browser yang
ada di komputer client (user) sehingga isi informasinya dapat ditampilkan
secara visual di komputer pengguna (Kustiyahningsih, 2011). Hyper Text
Markup Language (HTML) bahasa yang digunakan pada dokumen web
sebagai bahasa untuk pertukaran dokumen web (Sibero, 2011). HTML bisa
disebut bahasa yang digunakan untuk menampilkan dan mengelola hyper
text untuk menampilkan berbagai informasi didalam sebuah penjelajah web
Internet dan formating hyper text sederhana yang ditulis ke dalam berkas
 format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi.
Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata
dan disimpan ke dalam format ASCII normal sehingga menjadi homepage
dengan perintah-perintah html. HTML mempunyai dua macam ekstensi
yaitu .htm dan ,html. Ekstensi berformat .htm awalnya hanyalah untuk
mengkomodasi penggunaan html dalam operasi DOS. (Sibero, 2011).

2.5. Hypertext Preprocessor (PHP)

PHP (Hypertext Preprocessor) yang digunakan sebagai bahasa script
server-side dalam pengembangan Web yang disisipkan pada dokumen
HTML. Penggunakan PHP memungkinkan Web dapat dibuat dinamis,
sehingga maintenance situs Web tersebut menjadi lebih mudah dan efisien.
PHP mrupakan software Open-Source yang disebarkan dan dilisensikan
secara gratis serta dapat di download secara bebas dari situs resmi
http://www.php.net. (Priyanto Hidayatullah dan Jauhari Khairul Kawistara,
2014).

2.6. XAMPP
Untuk membuat membuat aplikasi berbasis Web dengan
menggunakan bahasa PHP, tentu saja diperlukan sebuah server Web dan
interpreter PHP. Server tidak harus sebuah komputer khusus dengan kinerja
tinggi dan berukuran sangat besar, tetapi bisa dibuat dari PC yang
mempunyai fungsi selayaknya sebuah Web Server, yaitu dengan menginstal
paket XAMPP.
XAMPP merupakan paket PHP dan MySQL berbasis open source
yang dapat digunakan sebagai tool pembantu pengembangan aplikasi
berbasis PHP. XAMPP mengombinasikan beberapa paket perangkat lunak
berbeda ke dalam satu paket. Sampai XAMPP versi 1.7.4. Kita dapat
mendapatkan file XAMPP di http://apachefriend.org , dari alamat website
tersebut kita dapat memilih berbagai versi XAMPP sesuai kebutuhan, dan
tentu disesuaikan dengan OS yang kita gunakan. (Riyanto, 2011).
2.7. MySQL
MySQL merupakan sebuah basis data yang mengandung satu atau
beberapa kolom. Tabel terdiri atas sejumlah basis dan setiap baris
mengandung satu atau beberapa kolom. Didalam PHP telah menyediakan
fungsi untuk koneksi ke basis data dengan sejumlah fungsi untuk
pengaturan baik menghubungkan atau memutuskan koneksi server database
MySQL sebagai sarana untuk mengumpulkan informasi.
MySQL bekerja menggunakan bahasa basis data yaitu DBMS
(Database Management System). Data language terbagi dua, yaitu DDL dan
DML. DDL (Data Definition Language) merupakan suatu perintah yang
digunakan untuk menciptakan struktur data, atau untuk membangun
database. DDL mempunyai fungsi untuk melakukan perubahan struktur
tabel, seperti membuat tabel, mengubah nama tabel, dan sebagainya.
Perintah-perintah yang termasuk dalam DDL yaitu Create, Alter, dan Drop.
(Yeni Kustiyahningsih, Devie Rosa Anamisa, 2011).
2.8. CSS (Cascading Style Sheet)
Sebuah website bisa terdiri dari berpuluh-puluh bahkan beratus-ratus
halaman. Jika setiap kata mngubah halaman website tersebut kita harus
mengubah formatnya satu per satu maka akan sangat repot. Namun jika kita
menggunakan CSS, maka hal di atas bukan lagi sebuah masalah. Karena
dengan CSS kita bisa menyimpan format dan menggunakannya kapan pun
dan dimana pun kita inginkan.
Seperti terbantunya kita dengan Formatting and Style dalam membuat
dokumen office, maka style sheets juga sangat penting dalam membuat
halaman HTML yang dinamis.Memang menggunakan style sheets bukan
suatu keharusan dalam membuat web, namun jika kita memilki website
dengan halaman yang sangat banyak, kita akan kesulitan dalam debugging,
perbaikan dan perawatannya.
Cascading Style Sheet (CSS) sudah didukung oleh hampir semua web
browser karena CSS telah distandarkan oleh World Wide Web Consortium
 (W3C). Jadi ini pilhan tepat bagi Anda untuk memformat halaman web
Anda agar terlihat cantik dimanapun dia buka. (Priyanto Hidayatullah dan
Jauhari Khairul Kawistara, 2014)

2.9. Unifield Modelling Language (UML)

UML merupakan standar modelling language yang terdiri kumpulan-
kumpulan diagram, dikembangkan untuk membantu para pengembang
sistem dan software agar bisa menyelesaikan tugas-tugas seperti :
Spesifikasi, Visualisasi, Desain Arsitektur, Konstruksi, Simulasi, dan
Testing serta Dokumentasi (Rosa A. S dan M. Shalahuddin 2014).
UML sendiri terdiri atas pengelompokan diagram-diagram sistem
menurut aspek atau sudut pandang tertentu beserta hubungan-hungannya.
Ada beberapa diagram yang disediakan dalam UML antara lain: use case
diagram, activity diagram, sequence diagram, collaboration diagram, class
diagram, statechart diagram, component diagram, dan deployment
diagram.
 III. REKAYASA WEB

3.1. Konseptual Model

a. Nama situs web : System Inventory
b. Tujuan penggunaan situs web : Untuk memudahkan dalam penyimpanan
dan pencarian data sehingga dapat membantu memberikan informasi yang
cepat, tepat dan akurat bagi staff PT Prima Mulya Sentosa.
c. Sasaran : Karyawan PT Prima Mulya Sentosa bagian pengadaan.
d. Proses yang difasilitasi : masuk ke sistem, login, informasi tentang data-data
inventory, kemudahan melakukan pengarsipan terhadap data-data yang
meliputi penambahan dan pengklasifikasian data-data ke dalam beberapa
kategori dan sub kategori serta fasilitas kemudahan untuk melihat detail data

3.2. Analisis Perancangan Sistem

Analisis beriorientasi objek atau Object Oriented Analysis (OOA) adalah
tahapan untuk menganalisis spesifikasi atau kebutuhan akan system yang
akan dibangun dengan konsep beriorientasi objek OOA. Menggunakan
perangkat permodelan berorientasi objek yaitu UML (Unified Modeling
Language) pada bagian diagram use case, diagram kelas, dan diagram
objek.
a. Kebutuhan Fungsional
Kebutuhan fungsional adalah jenis kebutuhan yang berisi proses-proses
apa saja yang akan di janlankan dalam sebuah sistem untuk
memudahkan user.
1. Mengelola login yaitu mengakses suatu halaman login dengan
menggunakan username dan password yang telah di tentukan bagi
admin.
2. Mengelola input, edit dan delete untuk Pelanggan dan Pegawai
3. Mengelola barang yang keluar dari took karena adanya transaksi
penjualan barang kepada pelanggan.
 4. Mengelola system untuk menyediakan report penjualan keluar yang
di hasilkan tiap bulannya.
5. Menyediakan fungsi logout.
b. Kebutuhan Non-Fungsional
Kebutuhan Non Funsional adalah jenis kebutuhan yang berupa property
perilaku yang dimiliki oelh sistem, yang meliputi teknologi,
operasional, kinerja pegawai, serta keamanan dalam perusahaan. Bisa
berupa:
1. Sistem yang dibuat lebih bersahabat (user friendly) untuk tampilan
maupun kemudahan pengolahan data
2. Sistem yang digunakan harus kompatibel, baik dari perangkat lunak
(software) maupun perangkat keras (hardware) agar memudahkan
admin dalam pengolahan data.
3.2 FlowChart
3.3. Sequence Diagram
3.4. Merancang Diagram Use Case
Nama Use Case Deskripsi Use Aktivitas
Case
Login Admin Masuk ke sistem  Memasukkan username
web  Memasukkan password
 Periksa user dan
password
 Jika salah, ulangi
 Jika benar, masuk ke
beranda
Unggah Daftar Mengisi konten  Memasukkan list produk
Produk konten pada  Mengupdate list produk
halaman dan sub  Menghapus list produk
halaman web
Pengarsipan Mengklasifikasian  Melihat detail data
data-data ke dalam produk
beberapa kategori  Memperoleh informasi
tentang data-data
inventory
 Kemudahan untuk
melakukan pengarsipan
data-data inventory
Laporan inventory Melaporkan produk  Staff melaporkan jumlah
produk yang ada di dalam produk yang ada
gudang didalam gudang
 Saff mengecek langsung
 a. Use Case Diagram System Inventory PT. Prima Mulya Sentosa

Use Case Diagram Sistem Inventory

b. Class Diagram Sistem Inventori

Class Diagram Sistem Inventory

3.5. Tampilan Sistem Inventory Abstrak

1. Login
 2. Tampilan Beranda

Berikut Printscreen Controller bagian Server:

1.Script Controller server menggunakan Laravel

Pada script yang terdapat di server semua data yang ada diserver akan dipanggil
oleh program dijalankan oleh client sesuai dengan menu controller masing-masing
pada server dan client

2.Script menu Home Controller mengunakan Laravel

3. Script menu Product Controller

4.Script menu PurchasesController
5.Script menu Supplier Controler
6.Script menu Categori Controller
7.Script menu orderController
PrintScreen Script Controller bagian Client

1.Script Menu Categorie

Pada script ini perintah akan menampilkan categori produk dengan cara memanggil
menu controller categori pada server
2.Script menu Order
Pada script ini perintah akan menampilkan menu order dengan cara memanggil
menu controller order pada server
3.Script menu Product

Pada script ini perintah akan menampilkan produk yang sudah diinput dengan cara
memanggil menu controller produkp ada server
4.Menu Purchase
Pada script ini perintah akan menampilkan categori purchases dengan cara
memanggil menu controller purchases pada server
5.Script menu Supplier

6.Script menu User

Berikut username dan Password login dengan website :

http://dony.tugasakhir.site

username : donysetiawan@gmail.com
password : donysetiawan

Berikut Tampilan Website sistem Inventory alat kesehatan:

1.Menu Login
2.Menu Home:

3.Menu produk:
4.Menu Kategori

5.Menu Suppliers
6.menu barang input barang masuk

7.menu barang keluar

8.edit produk

9.Delete produk
10.Hasil Cetak laporan Barang

Job Desc Kelompok:

1.Perancangan Sistem dan aplikasi sistem Inventory(Dony Setyawan)
2.Penyusun Laporan (Galeh Adi dan Dony Setyawan)
3.Penyusun Laporan,Koreksi Laporan dan Mockup (Amin Abdullah)
4.Presentasi dan print laporan (Sauma Farzhabi)
 DAFTAR PUSTAKA

Hidayatullah, Priyanto, dan Jauhari Khairul Kawistara. 2015. Pemrograman Web.

Bandung: Informatika Bandung.

Kustiyahningsih, Y & Anamisa, Devie R. 2011. Pemrograman Basis data Berbasis

Web Menggunakan PHP & MySQL. Graha ilmu: Yogyakarta.

Riyanto, 2011. XAMPP. Yogyakarta: Gava Media.

Rosa A.S dan M. Shalahuddin. 2014. Rekayasa Perangkat Lunak. Bandung :

Informatika.

Suryana, Taryana dan Koesheryanti, 2014, Aplikasi Internet Menggunakan HTML,

CSS, & JavaScript, PT Elex Media Komputindo, Jakarta.