Laporan Tugas Besar

[QUIOS – Quda Poni

Online Inventory]
MK. Pengembangan Aplikasi Web
Tahun 2021

SALINDRI RETNO MALINI K.S.   (1204180006)

YUNIAR REVI A.L (1204180024)
SALSABILA QATRUNNADA (1204180027)
WAN AZIZAH SRI NURAINI       (1204181004)
AMALINA TRI SETYA BERLIANA(1204181014)

Program Studi S1 Sistem Informasi

Fakultas Teknologi Informasi dan Industri

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 1

 Daftar Isi
Bab I Pendahuluan.............................................................................................................4
1.1 Latar belakang.......................................................................................................4
1.2 Tujuan...................................................................................................................4
1.3 Batasan..................................................................................................................4
1.4 Kegunaan Penelitian.............................................................................................4
Bab II Landasan Teori.......................................................................................................6
2.1 Pengembangan Aplikasi Web...............................................................................6
2.2. Framework..............................................................................................................6
2.3. Laravel................................................................................................................7
2.4. Visual Studio Code (VS Code).............................................................................7
2.5. Bootstrap............................................................................................................8
2.6. XAMPP................................................................................................................8
2.7. PhpmyAdmin.....................................................................................................9
2.8. Website...............................................................................................................9
2.9. Online Shop......................................................................................................10
2.10. Inventory..........................................................................................................10
2.11 Filosofi QUIOS................................................................................................10
Bab III Metode Penelitian................................................................................................12
Bab IV Hasil Penelitian...................................................................................................13
4.1. Desain Rancangan Aplikasi..............................................................................13
4.1.1. Use Case Diagram......................................................................................13
4.1.2. Story Board................................................................................................14
4.1.3. Mockup......................................................................................................17
4.2. Tampilan Aplikasi.............................................................................................18

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 2

Bab V Kesimpulan dan Saran..........................................................................................23
5.1. Kesimpulan.......................................................................................................23
5.2. Saran................................................................................................................23
Lampiran..........................................................................................................................24

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 3

 Bab I
Pendahuluan
1.1 Latar belakang
Perkembangan bisnis melalui media internet semakin hari semakin berkembang pesat,
seiring dengan meningkatnya pengguna internet. Sejalan dengan hal tersebut, perkembangan
bisnis Online Shopping (OS) pun menjadi tren dimasa kini. OS hadir dengan berbagai
keunggulan di dalamnya mulai dari kemudahan akses, kecepatan, kemurahan, dan keefektifan.
Bermacam jenis produk dan jasa layanan yang ditawarkan, membuat masyarakat Indonesia
menjadikan online shop sebagai salah satu tempat berbelanja paling diburu apalagi di era
pandemi seperti saat ini. Hal ini membuat banyak penjual online berlomba–lomba menawarkan
produknya dengan berbagai cara untuk menarik minat konsumen.
Sistem terkomputerisasi menjadi suatu kebutuhan dalam segala unit usaha tak terkecuali
bidang promosi. Untuk menarik minat konsumen, sebuah perusahaan dapat melakukan promosi
digital melalui sebuah platform
. QUIOS hadir sebagai media untuk menampilkan berbagai produk atau inventaris yang
ditawarkan oleh perusahaan. Tak hanya itu, QUIOS menjadi website yang menyediakan
informasi berupa struktur organisasi dan company profile dengan menggunakan framework
Laravel.

1.2 Tujuan
Rancangan website untuk QUIOS (Quda Poni Online Inventory Website) ini bertujuan
sebagai media untuk menampilkan berbagai produk atau inventaris yang ditawarkan oleh
perusahaan. Selain itu, website juga menyediakan informasi berupa struktur organisasi dan
company profile. Pemasaran dengan menggunakan media website ini akan memiliki jangkauan
yang lebih luas dan lebih cepat.

1.3 Batasan
Dalam penelitian ini, kami memberi batasan website yang kami sediakan hanya berupa
informasi mengenai struktur organisasi & company profile, jenis barang, stock barang, tanpa
menyediakan fitur untuk transaksi jual beli.

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 4

1.4 Kegunaan Penelitian
 Memenuhi kebutuhan tugas besar mata kuliah pengembangan aplikasi berbasis web
 Merancang sebuah website dengan menggunakan framework laravel
 Mengkolaborasikan Bootstrap, XAMPP, PHP MyAdmin, dan Visual Studio Code.

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 5

 Bab II
Landasan Teori

2.1 Pengembangan Aplikasi Web

Pengembangan Aplikasi Web adalah gabungan dari print publishing dan pengambangan
perangkat lunak, diantara marketing dan perhitungan dan diantara seni dan teknologi.
Menyediakan suatu informasi tertentu kepada pengguna, berupa teks, grafik, audio, dan video.
Aplikasi berbasis web merupakan sebuah program atau perangkat lunak yang di akses melalui
internet dengan menggunakan web browser. Elniema (2008) menyatakan bahwa “Web based
application is an application deployed on a web server, which users connect to it through the
internet”.

Aplikasi berbasis web dikembangkan menggunakan bahasa pemrograman yang berjalan

dari sisi client dan dikembangkan menggunakan bahasa HTML, PHP, CSS, JS yang
membutuhkan web server dan browser untuk menjalankannya seperti Chrome, Firefox atau
Opera. Aplikasi web dapat berjalan pada jaringan internet maupun intranet (Jaringan LAN),
data terpusat dan kemudahan dalam akses adalah ciri utama yang membuat aplikasi web lebih
banyak diminati dan lebih mudah diimplementasikan pada berbagai bidang kehidupan.

Jenis – jenis aplikasi yang menggunakan perangkat website, yakni :

 Web media sosial

 Web berbasis sistem informasi
 Web jual beli dan bisnis
 Web pencarian
 Web informasi dan berita
 Web server
 Aplikasi web browser, dll.

2.2. Framework
Framework adalah sebuah kerangka kerja yang digunakan untuk mempermudah para
developer software dalam membuat dan mengembangkan aplikasi. Framework berisikan
perintah dan fungsi dasar yang umum digunakan untuk membangun sebuah software aplikasi
sehingga diharapkan aplikasi dapat dibangun dengan lebih cepat serta tersusun dan terstruktur
dengan cukup rapi. Framework juga merupakan komponen pemrograman yang siap reuse
(bisa digunakan ulang) kapan saja, sehingga programmer tidak harus membuat skrip yang sama

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 6

 untuk tugas yang sama. Misalkan programmer ingin halaman-halaman web menampilkan data
dengan paginasi (paging) halaman, framework telah menyediakan fungsi paging tersebut
sedangkan programmer cukup menggunakan fungsi tersebut pada saat coding, tetapi tentu
dengan kaidah- kaidah yang ditetapkan oleh masing-masing framework (Kasman,2015)

Menurut Siena, (2009) Framework adalah sekumpulan library yang diorganisasikan pada
sebuah rancangan arsitektur untuk memberikan kecepatan, ketepatan, kemudahan dan
konsistensi di dalam pengembangan aplikasi dari definisi tersebut. Sejalan dengan hal tersebut,
Hakim (2010:3) menjelaskan bahwa, Framework adalah koleksi atau kumpulan potongan-
potongan program yang disusun atau diorganisasikan sedemikian rupa, sehingga dapat
digunakan untuk membantu membuat aplikasi utuh tanpa harus membuat semua kodenya dari
awal.

Ada dua jenis framework dalam dunia pemrograman yaitu Desktop Framework dan Web
Framework, keduanya memiliki fungsi yang berbeda. Desktop Framewok digunakan untuk
membangun aplikasi berbasis desktop. Sedangkan web framework digunakan untuk
membangun aplikasi berbasis web. Secara umum framework tersusun dengan struktur MVC
(Model View Controller) yang memungkinkan pengembangan dapat mengelompokkan fungsi –
fungsi seperti fungsi input-an, proses, dan output dari sebuah aplikasi.

2.3. Laravel
Laravel adalah sebuah framework web berbasis PHP yang open-source dan tidak berbayar.
Laravel diciptakan sejak tahun 2011 oleh Taylor Otwell dan diperuntukkan untuk
pengembangan aplikasi web yang menggunakan pola MVC (Model View Controller). MVC itu
sendiri adalah sebuah pendekatan perangkat lunak yang memisahkan aplikasi logika dari
presentasi. Struktrur pola MVC pada laravel sedikit berbeda dengan struktur pola MVC pada
umumnya. Di Laravel terdapat routing yang menjembatani antara request dari user dan
controller. Jadi controller tidak langsung menerima request tersebut (Yudanto dkk, 2017).

Laravel mengubah pengembangan website dengan syntax-nya menjadi lebih elegan,

ekspresif, dan menyenangkan, yang dirancang khusus untuk memudahkan dan mempercepat
proses web development sesuai dengan jargonnya “The PHP Framework For Web Artisans”.
Selain itu, laravel juga mempermudah proses pengembangan website dengan bantuan beberapa
fitur unggulan, seperti Template Engine, Routing, dan Modularity.

2.4. Visual Studio Code (VS Code)

Visual Studio Code (VS Code) ini adalah sebuah teks editor ringan dan handal yang dibuat
oleh Microsoft untuk sistem operasi multiplatform, artinya tersedia juga untuk versi Linux,
Mac, dan Windows. Teks editor ini secara langsung mendukung bahasa pemrograman

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 7

 JavaScript, Typescript, dan Node.js, serta bahasa pemrograman lainnya dengan bantuan plug in
yang dapat dipasang via marketplace Visual Studio Code (seperti C++, C#, Python, Go, Java,
dst). Fitur-fitur yang disediakan termasuk dukungan untuk debugging, GIT Control yang
disematkan, penyorotan sintaks, penyelesaian kode cerdas, cuplikan, dan kode refactoring. Hal
ini juga dapat disesuaikan, sehingga pengguna dapat mengubah tema editor, shortcut keyboard,
dan preferensi. Teks editor VS Code juga bersifat open source, yang mana kode sumbernya
dapat kalian lihat dan kalian dapat berkontribusi untuk pengembangannya. Kode sumber dari
VS Code ini pun dapat dilihat di link Github meskipun unduhan resmi berada di bawah lisensi
proprietary.

Visual Studio Code telah dirancang untuk bekerja dengan alat-alat yang ada dan Microsoft
menyediakan dokumentasi untuk membantu pengembang bersama, dengan bantuan untuk
bekerja dengan ASP.NET 5, Node.js, dan Microsoft naskah, serta alat-alat yang dapat
digunakan untuk membantu membangun dan mengelola aplikasi Node.js. Meskipun
menggunakan kerangka Elektron, Visual Studio Code tidak menggunakan Atom dan
menggunakan komponen editor yang sama (diberi kode nama "Monaco") yang digunakan
dalam Visual Studio Team Services yang sebelumnya disebut Visual Studio Online (Lardinois,
2015) .

2.5. Bootstrap
Bootstrap adalah framework open-source khusus front end yang awalnya dibuat oleh Mark
Otto dan Jacob Thornton untuk mempermudah dan mempercepat pengembangan web di front
end. Bootstrap memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai
fungsi dan komponen, seperti navigasi, sistem grid, carousel gambar, dan tombol (button).

Bootstrap merupakan framework HTML, CSS, Javascript populer untuk membangun situs
web yang responsif. RWD (Responsive Web Design) adalah desain situs yang otomatis akan
menyesuaikan diri agar tampil baik di semua perangkat dari ponsel sampai dekstop. Bootstrap
memiliki file utama yang mengelola interface user dan fungsionalitas website di dalamnya
yakni, Bootstrap.css, Bootstrap.js, Glyphicons.

Menurut Husein Alatas, (2013) Bootstrap merupakan framework untuk membangun desain
web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan
ukuran layer dan browser yang kita gunakan baik di desktop, tablet ataupun mobile device.
Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

2.6. XAMPP
XAMPP adalah perangkat lunak bebas mendukung banyak sistem operasi yang berupa
kompilasi dari beberapa perangkat lunak. Nama XAMPP merupakan singkatan dari X (empat

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 8

 sistem operasi), Apache, MySQL, PHP dan Perl. XAMPP dikembangkan oleh sebuah tim
proyek bernama Apache Friend. Menurut Purbadian (2016:1), berpendapat bahwa “XAMPP
merupakan suatu software yang bersifat open source yang merupakan pengembangan dari
LAMP (Linux, Apache, MySQL, PHP dan Perl)”.

XAMPP memiliki sejumlah fungsi utama yang perlu untuk diketahui, antara lain dapat
digunakan sebagai server yang berdiri sendiri atau local host yang terdiri dari program MySQL
database, Apache HTTP Server, sehingga pengguna tidak perlu menyewa server sungguhan
dan internet untuk menjalankan web yang hendak digunakan. XAMPP juga berfungsi dalam
menerjemahkan bahasa pemrograman PHP dan Perl yang mana harus menggunakan server
untuk menjalankan prosesnya.

2.7. PhpmyAdmin
Phpmyadmin adalah sebuah aplikasi open source yang berfungsi untuk memudahkan
manajemen MySQL. Menurut Su Rahman (2013:21) “PhpmyAdmin adalah sebuah software
berbasis pemograman PHP yang dipergunakan sebagai administrator MySQL memlalui
browser (web) yang digunakan untuk managemen database. PhpmyAdmin pertama kali
didirikan oleh Tobias Ratschiller. Saat itu, Ratschiller paa tahun 1998. Dengan menggunakan
phpmyadmin, anda dapat membuat database, membuat tabel, memasukkan, menghapus dan
mengupdate data dengan GUI dan terasa lebih mudah, tanpa perlu mengetikkan perintah SQL
secara manual. Karena berbasis web, maka phpmyadmin dapat di jalankan di banyak OS,
selama dapat menjalankan webserver dan Mysql.

PhpmyAdmin memiliki interface yang user-friendly dan intuitive yang mudah dipelajari.
PhpmyAdmin memperbolehkan user memanfaatkan kebanyakan fungsi MySQL, termasuk
mengelola database, menjalankan queries MySQL, mengeksekusi statement MySQL,
mengelola user dan permission dan juga bisa mengimport dan mengexport data dari dan ke
berbagai format.

2.8. Website
Website adalah suatu kumpulan-kumpulan halaman pada suatu domain di internet yang
dibuat dengan tujuan tertentu dan saling berhubungan serta dapat diakses secara luas melalui
halaman depan (home page) menggunakan sebuah browser menggunakan URL website yang
menampilkan berbagai macam informasi teks, data, gambar, video maupun gabungan dari
semuanya bersifat statis dan dinamis. Website dimanfaatkan untuk menyampaikan suatu hal
yang akan mengedukasi audiens mengenai suatu topik tertentu. Misalnya saja berita, tips dan
trik, informasi pendukung, tutorial, pengumuman dan sebagainya.

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 9

 Menurut Sibero (2014:11), “Web merupakan suatu sistem yang berkaitan dengan dokumen
digunakan sebagai media untuk menampilkan teks, gambar, multimedia dan lainnya pada
jaringan internet”. Sedangkan Menurut Simarmata (2010:47) mengatakan bahwa pada dasarnya
Website merupakan sebuah sistem informasi yang disajikan dalam bentuk teks, gambar, suara
dan lain-lain yang tersimpan dalam sebuah server web internet yang disajikan dalam bentuk
hyperteks dan dapat diakses secara cepat.

2.9. Online Shop

Online shop, adalah suatu proses pembelian barang atau jasa dari mereka yang menjual
barang atau jasa melalui internet dimana antara penjual dan pembeli tidak pernah bertemu atau
melakukan kontak secara fisik yang dimana barang yang diperjualbelikan ditawarkan melalui
display dengan gambar yang ada di suatu website. Setelahnya pembeli dapat memilih barang
yang diinginkan untuk kemudian melakukan pembayaran kepada penjual melalui rekening
bank yang bersangkutan. Setelah proses pembayaran diterima, kewajiban penjual adalah
mengirim barang pesanan pembeli ke alamat tujuan.

Belanja online (online shopping) adalah proses dimana konsumen secara langsung
membeli barang-barang, jasa dan lain-lain dari seorang penjual secara interaktif dan real-time
tanpa suatu media perantara melalui Internet (Mujiyana & Elissa, 2013). Di Indonesia sendiri,
belanja online atau online shop mulai muncul sekitar tahun 2000 an, dan sekarang toko online
sudah menjamur ada dimana-mana. Apalagi dengan adanya dukungan media jejaring sosial,
seperti Instagram, TikTok, Facebook, Twitter, Blog, Multiply, Tumblr, yang dapat sangat
berguna untuk mempromosikan produk yang ingin dijual atau dibeli. Media sosial inilah
merupakan salah satu media yang membuat berbelanja online semakin mudah terjadi.

2.10. Inventory
Inventory secara umum berarti sistem pengaturan data persediaan barang yang berkaitan
dengan aktivitas logistik sebuah perusahaan. Inventory merupakan item atau material yang
dipakai oleh suatu organisasi atau perusahaan untuk menjalankan bisnisnya. Secara rinci
inventori berfungsi untuk melindungi kelangsungan produksi dan pemenuhan permintaan
pelanggan dari ketidakpastian pasokan (supply), permintaan (demand) dan lead time (waktu
yang dibutuhkan untuk memenuhi permintaan atau order) untuk menunjang proses produksi
dan pembelian yang efisien dan ekonomis. John J Wild, K R. Subramanyam dan Robert F
Halsey, (2004:265) menyatakan bahwa Inventory merupakan barang yang dijual dalam
aktivitas operasi normal perusahaan.

Manajemen inventory adalah proses pengelolaan dan pengontrolan atas persediaan barang
atau produk yang akan didistribusikan oleh perusahaan kepada konsumen. Manajemen

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 10

 inventory yang efisien dan efektif akan menunjang keseluruhan proses distribusi, produksi dan
kualitas dari barang itu tersendiri.

2.11 Filosofi QUIOS

Terdapat filosofi yang mendukung penentuan pembuatan nama “QUIOS”. Kata “QUIOS”
merupakan singkatan dari 'Quda Poni Online Shop' yakni sebuah website yang bertujuan
sebagai media untuk menampilkan berbagai produk atau inventaris yang ditawarkan oleh
perusahaan. Selain itu, website juga menyediakan informasi berupa struktur organisasi dan
company profile. Quda Poni sendiri diambil dari nama grup kelompok kami yang merupakan
sekumpulan mahasiswi yang beranggotakan Amalina, Salindri, Salsabila, Wan Azizah, dan
Yuniar Revi.

Dikutip dari namamia.com (https://namamia.com/arti-nama/qui.html), dalam bahasa

vietnam QUI memiliki arti “kura-kura” yang melambangkan ketenangan serta memiliki
kepribadian yang unik. Dari filosofi tersebut, kelompok kami mengadaptasi nama ‘QUIOS’
dengan tujuan menjadikan website yang kami ciptakan memiliki keunikan bagi pengguna. Serta
pengguna yang mengakses website ini merasakan ketenangan sehingga betah berlama-lama
membuka laman website kami dan tidak cepat bosan.

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 11

 Bab III
Metode Penelitian

Tahapan atau metode yang digunakan untuk penelitian ini adalah sebagai berikut:

Gambar diatas menjelaskan bahwa tahapan yang dilalui dalam proses pembuatan
website ini adalah tahap pertama pembuatan mockup untuk memberi rancangan website yang
akan kita buat.  Kemudian tahap kedua yakni analisis data untuk menganalisa kebutuhan
informasi apa saja yang akan ditampilkan pada website. Selanjutnya tahap ketiga yakni proses
pembuatan website menggunakan framework Laravel. Kemudian tahap ke empat yakni tahap
uji coba, website yang telah dibuat disimulasikan dan untuk melihat apakah website tersebut
bekerja dengan baik atau tidak. Lalu ke tahap yang terakhir yakni implementasi website.

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 12

 Bab IV
Hasil Penelitian
4.1. Desain Rancangan Aplikasi
4.1.1. Use Case Diagram
Use Case merupakan pemodelan untuk mengetahui kelakuan (behaviour) sistem informasi
yang akan dibuat. Use case mendeskripsikan sebuah interaksi antara satu atau lebih aktor
dengan sistem yang akan dibuat dan berfungsi untuk mengetahui fungsi apa saja yang ada
didalam sebuah sistem dan siapa saja yang berhak menggunakan fungsi – fungsi tersebut.

Gambar Rancangan Use Case Diagram :

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 13

 Tabel Deskripsi dan Tugas Aktor :

No Aktor Deskripsi Tugas

.
1. Admin Orang yang bertugas dalam  Melihat semua barang
melakukan inventaris dan yang ada dalam list
dapat memiliki akses untuk  Membuat barang baru
melakukan pengecekan.  Mengedit barang
 Menghapus barang

4.1.2. Story Board

Story Board merupakan papan cerita yang digunakan untuk cara alternatif dalam membuat
sketsa yang bertuliskan kalimat yang berfungsi sebagai alat perencanaan.

a. Story Board Keseluruhan

Scree Sequenc Board Durasi Halaman
n e
1 1 30 detik HOME

2 2 2 detik PROFILE

2 2 2 detik PROFILE

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 14

 3 3 10 detik INVENTARIS

b. Story Board Home

c. Story Board Inventaris

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 15

 d. Story Board Profile

4.1.3. Mockup
Mockup berfungsi untuk preview sebuah konsep desain yang akan memberikan gambaran
desain sebelum diaplikasikan menjadi benda nyata sehingga memudahkan pekerjaan desainer.

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 16

 a. Home :

b. Profile :

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 17

 c. Inventaris :

4.2. Tampilan Aplikasi

Berikut merupakan tampilan web QUIOS (Quda Poni Online Inventory Website) :
a. Login

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 18

 b. Home

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 19

 c. Inventaris

d. Add Barang

e. Edit Barang

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 20

 f. Show Barang

g. Profile

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 21

 h. Tampilan Logout

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 22

 Bab V
Kesimpulan dan Saran
5.1. Kesimpulan
Website adalah kumpulan halaman yang digunakan untuk menampilkan informasi teks,
gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya, baik yang bersifat
statis maupun dinamis. Rancangan website yang kami buat untuk QUIOS (Quda Poni Online
Inventory Website) ini bertujuan sebagai media untuk menampilkan berbagai produk/inventaris
yang ditawarkan oleh perusahaan. Selain itu, website juga menyediakan informasi berupa
struktur organisasi dan company profile. Pemasaran dengan menggunakan media website ini
akan memiliki jangkauan yang lebih luas dan lebih cepat. Namun, dalam penelitian ini, kami
memberi batasan website yang kami sediakan tanpa menyediakan fitur untuk transaksi jual beli.

5.2. Saran
Dari tugas ini kami masih banyak kekurangan karena keterbatasan ilmu pengetahuan dan
pengalaman yang kami miliki. Selain itu, dimasa pandemi ini membuat kita lebih sulit untuk
berkordinasi dan berkomunikasi secara lancar karena terhalang jarak dan koneksi internet. Oleh
karena itu koreksi dan saran dari pembaca sangat kami butuhkan untuk perbaikan dimasa
mendatang.

PENGEMBANGAN APLIKASI WEB | TUGAS BESAR 23