BAB II

TINJAUAN PUSTAKA

2.1 Penilitian Terkait

Berdasarkan analisis dari beberapa sumber, bisnis kedai kopi telah

mengalami kemajuan pesat dan menjadi tempat yang digemari oleh berbagai

kalangan. Kedai kopi saat ini tidak hanya menjadi tempat untuk menikmati

minuman berbasis kopi, tetapi juga menjadi tempat bersosialisasi dan

berkumpul bersama teman. Strategi yang efektif dalam menghadapi

persaingan di bisnis kedai kopi adalah memberikan pelayanan terbaik, yang

mencakup kualitas layanan, produk, rasa, dan variasi.

Penelitian yang dilakukan oleh Ari Rosemalastriasari dan Indri Sabila

Pitriyani dalam studi mereka yang berjudul "Sistem Informasi Pada Kedai

Kopi Berbasis Website" membahas penggunaan teknologi informasi untuk

meningkatkan efisiensi dan kepuasan pelanggan dalam bisnis kedai kopi.

Sistem informasi pemesanan berbasis website dapat membantu meningkatkan

efisiensi transaksi penjualan dan kepuasan pelanggan dengan memberikan

kemudahan dalam memesan dan menerima produk. Dengan sistem ini,

pelanggan dapat memesan dari mana saja dan kapan saja, sehingga

meningkatkan kenyamanan dan pengalaman pelanggan. Selain itu, sistem ini

dapat membantu pemilik kedai dalam mengelola data penjualan, membuat

laporan secara otomatis, dan memantau stok secara real-time, yang pada

gilirannya meningkatkan efisiensi operasional dan mengurangi risiko

7
 8

kesalahan manusia. Dengan demikian, sistem ini dapat membantu

meningkatkan daya saing bisnis kedai kopi dengan meningkatkan efisiensi

dan kepuasan pelanggan.[1]

Penelitian yang dilakukan oleh Deni Ahmad Jakaria dan Khisti

Nurningsih Hanafi dalam "Sistem Informasi Penjualan Kedai Kopi Berbasis

Web dengan Framework CodeIgniter" menunjukkan bahwa implementasi

teknologi informasi membantu meningkatkan efisiensi operasional dan

kepuasan pelanggan. Sistem informasi yang dirancang menggunakan UML

dan diimplementasikan dengan framework CodeIgniter serta database

MySQL, bertujuan untuk mempermudah manajemen transaksi penjualan dan

pendapatan. Dengan adanya sistem ini, diharapkan dapat mengurangi

kesalahan pencatatan, mempercepat proses transaksi, dan menyediakan data

yang akurat untuk pengambilan keputusan yang lebih baik.[2]

Dari penelitian terdahulu dapat disimpulkan bahwa sistem informasi

kedai kopi berbasis website, dapat mempercepat proses transaksi,

menyediakan data yang akurat, membantu meningkatkan daya saing bisnis

kedai kopi dengan meningkatkan efisiensi dan kepuasan pelanggan.

2.2 Landasan Teori

2.2.1. Website

Website adalah sekelompok halaman atau sekumpulan halaman web

yang saling berhubungan dan dapat diakses dari mana saja di dunia, selama

ada koneksi internet. Setiap halaman website memiliki alamat unik disebut
 9

(Uniform Resource Locator) URL. Sebuah situs web dapat berisi berbagai

jenis informasi, termasuk teks, gambar, video, dan audio. Selain itu, situt

web fitur interaktif seperti formulir, kontak, komentar, atau obrolan. Situr

web terdiri dari dua elemen utama : situr web client-side dan server-side

.Client-side website adalah yang di tampilkan kepada pengguna melalui

browser, seperti Google Chrome atau Internet Explorer. Bagian ini terdiri

dari HTML, CSS, dan JavaScript untuk mendesign dan menampilkan

halaman web.

Gambar 2. 1 Website

2.2.2. Visual Studio Code

Visual Studio Code adalah aplikasi editor kode Microsoft yang berjalan

gratis di semua perangkat desktop. Seperangkat fitur dan ekstensi yang kaya

menjadikan editor kode ini pilihan pertama bagi pengembang. Visual Studio

Code juga mendukung hampir semua sistem operasi termasuk Windows,

Mac OS, dan Linux. Menurut penelitian Stack Overflow, Visual Studio

Code adalah editor paling populer di kalangan pengembang profesional.

Dari 21 aplikasi editor teks yang bersaing, Visual Studio Code menduduki

peringkat #1 dengan pangsa pengguna 71,07%. Visual Studio Code

 10

dirancang seringan dan senyaman mungkin, sehingga tidak mengherankan

jika pengguna tidak memerlukan perangkat dengan spesifikasi tinggi. juga

dapat menjalankan aplikasi ini untuk membuat atau mengedit kode sumber

dalam berbagai bahasa pemrograman. Sebut saja Node.js, JavaScript,

TypeScript, dll.

Gambar 2. 2 Visual Studio Code

2.2.3. Xampp Server

XAMPP adalah perangkat lunak sumber terbuka gratis yang dapat

diinstal pada berbagai platform termasuk Windows, Linux, dan OS X.

Pasalnya, aplikasi XAMPP memiliki puluhan paket modul, bahasa

pemrograman, dan komponen lainnya. Hal ini dijelaskan lebih detail di

bagian Fitur XAMPP. Untuk menjalankan XAMPP, klik Mulai dan cari

"Panel Kontrol XAMPP". Jika menerima peringatan konfirmasi firewall,

klik "Izinkan akses". kemudian dapat mengaktifkan komponen yang ingin

digunakan melalui XAMPP Control Panel.

Fitur XAMPP selanjutnya adalah menjalankan script yang ditulis

dengan bahasa pemrograman PHP. PHP banyak digunakan dalam

membangun website, terutama pada backend yang mengatur logika website

dan transfer data..[3]

 11

Gambar 2. 3 Xampp

2.2.4. Mysql

MySQL adalah sistem manajemen basis data.Menggunakan perintah

dasar SQL (Structured Query Language) yang sangat terkenal.Sistem

Manajemen Basis Data "DBMS" MySQL multi-pengguna dan multi-

aliran ini digunakan oleh lebih dari 6 juta pengguna di seluruh

dunia.MySQL adalah DBMS open source dengan dua format lisensi:

Perangkat Lunak Bebas dan Shareware (perangkat lunak berpemilik

dengan penggunaan terbatas).MySQL adalah server database gratis

yang dilisensikan di bawah GNU General Public License (GPL),

sehingga dapat menggunakannya untuk keperluan pribadi atau

komersial tanpa membayar lisensi yang sudah ada.[4]

Gambar 2. 4 MYSQL
 12

2.2.5. Database

Basis data disebut juga database adalah kumpulan data yang dikelola

sedemikian rupa sehingga mudah dikelola dan menurut aturan-aturan

tertentu yang berhubungan satu sama lain.Manajemen ini memungkinkan

pengguna untuk dengan mudah menemukan, membuang, dan menyimpan

informasi.Selain pengertian database di atas, masih ada lagi definisi

database lainnya.Singkatnya, suatu sistem yang membantu pengumpulan

file, arsip, atau tabel yang disimpan dan dihubungkan ke berbagai media

elektronik yang ada.[5]

Gambar 2. 5 Database

2.2.1. PHPmyAdmin

PHPMyAdmin adalah aplikasi berbasis web atau alamat database yang

digunakan untuk mengelola database MySQL. Sebenarnya tidak ada

salahnya mempelajari aplikasi ini karena sangat berguna untuk

mengembangkan website yang kini semakin populer seperti WordPress

yang membutuhkan akses database. HPMyAdmin adalah fungsi yang

memungkinkan membuat, mengedit, dan menghapus database dan

tabel, membuat dan menghapus hubungan antar tabel, serta

mengurutkan data sesuai kebutuhan.akan menemukan bahwa dapat

dengan mudah membuat cara yang lebih efisien untuk membuat

 13

database untuk server web.[6]

Gambar 2. 6 PhpMyadmin

2.2.2. HyperText Markup Language ( HTML )

HTML adalah singkatan dari Hypertext Markup Language. HTML

adalah bahasa pengkodean atau pemrograman yang digunakan untuk

membuat halaman-halaman situs web yang ditampilkan di browser web.

Sebagian besar halaman di Internet sebagian besar menggunakan HTML

Cara kerja program HTML Pertama-tama kamu harus membuat

dokumen HTML pada aplikasi editor HTML seperti Visual Studio, Sublime

Text dan lain-lainnya , dapat membuat beberapa file HTML tergantung

pada kebutuhan file yang akan di buat .File-file yang telah dibuat ini berisi

Halaman Utama ,kontak,isi Website danlain-lain.

File HTML dapat dibuka oleh web browser seperti Google Chrome Mozilla

Firefox, Internet Explore dan masih banyak lagi.[7]

Gambar 2. 7 HTML
 14

2.2.3. Cascading Style Sheet (CSS)

CSS adalah singkatan dari Cascading Style Sheets dan merupakan

bahasa yang digunakan untuk menentukan tampilan dan format halaman

situs web.CSS memungkinkan Anda mengatur font, warna teks, dan latar

belakang halaman.CSS digunakan bersama dengan bahasa markup seperti

HTML dan XML untuk membuat situs web yang menarik dan berkinerja

tinggi.CSS mulai berlaku saat browser memuat halaman situs web.

Menerapkan pengaturan tampilan HTML yang telah ditentukan

sebelumnya menggunakan kode CSS melibatkan beberapa langkah.

Pertama, browser memuat file HTML dan CSS (jika kode ditulis sebagai

CSS eksternal).Browser kemudian mengkonversi keduanya menjadi

Document Object Model (DOM).. [8]

Gambar 2. 8 CSS

2.2.4. JavaScript

JavaScript adalah bahasa pemrograman yang digunakan dalam

pengembangan website untuk membuat website lebih dinamis dan

interaktif. JavaScript memiliki fitur seperti orientasi objek, pemrograman

sisi klien, pemrograman tingkat tinggi, dan pengetikan longgar JavaScript

 15

memiliki fitur-fitur yang memungkinkan pengembang untuk membuat

aplikasi web yang lebih interaktif dan responsif, seperti variadic functions,

array and object literals, regular expressions, promises, dan async/await.

Selain itu, JavaScript juga memiliki fitur-fitur yang memungkinkan

pengembang untuk membuat aplikasi web yang lebih scalable dan efisien,

seperti zero-based numbering dan dynamic script creation.

JavaScript juga memiliki beberapa keunggulan, seperti dapat

digunakan di berbagai platform, dapat berinteraksi dengan berbagai

teknologi lainnya, dan dapat dibuat untuk berbagai tujuan, seperti

pengembangan aplikasi web, pengembangan aplikasi desktop, dan

pengembangan aplikasi mobile.[9]

Gambar 2. 9 JavaScript

2.2.5. React js

React.js adalah sebuah library JavaScript yang digunakan untuk

membangun antarmuka pengguna yang interaktif dan efisien. Dibuat oleh

Facebook, React.js adalah sebuah teknologi yang sangat populer

digunakan dalam pengembangan aplikasi mobile dan web. React.js

memungkinkan pengembang untuk membangun aplikasi yang interaktif

dan responsif dengan menggunakan konsep komponen yang dapat

 16

digunakan ulang. Dengan menggunakan React.js, pengembang dapat

membuat aplikasi yang lebih mudah di-maintain dan di-upgrade, serta

dapat mempercepat proses pengembangan aplikasi dengan menggunakan

Virtual DOM yang memungkinkan rendering hanya pada bagian yang

berubah.[10]

Gambar 2. 10 React JS

2.2.6. Vite js
Vite.js adalah sebuah alat pembangunan yang memberikan

pengalaman pengembangan yang lebih cepat dan lebih ringkas untuk

proyek web modern. Vite.js dikembangkan oleh Evan You, pencipta

Vue.js, dan digunakan secara default oleh Vue dan untuk proyek React.

Vite.js terdiri dari dua bagian utama: sebuah server pengembangan

yang memberikan fitur-fitur yang lebih baik daripada modul ES native,

seperti Hot Module Replacement (HMR) yang sangat cepat, dan perintah

build yang mengumpulkan kode Anda dengan Rollup, pre-configured

untuk menghasilkan aset statis yang sangat optimitas untuk

produksi.Vite.js juga sangat dapat diperluas melalui API Plugin dan API

JavaScript dengan dukungan penuh untuk tipe TypeScript. [11]

 17

Gambar 2. 11 Vite JS

2.2.7. Tailwind CSS

Tailwind CSS adalah sebuah framework CSS yang berbasis utility

untuk membangun antarmuka pengguna yang modern dan dinamis.

Dengan menggunakan Tailwind CSS, pengembang dapat membangun

aplikasi web yang responsif dan interaktif tanpa perlu meninggalkan

HTML. Tailwind CSS memungkinkan pengembang untuk menggunakan

kelas utility yang dapat digunakan secara langsung di HTML untuk

mengatur tampilan dan perilaku elemen, seperti warna, ukuran, dan posisi.

Dalam pengembangan, Tailwind CSS sangat cocok digunakan untuk

membangun aplikasi web yang kompleks dengan performa tinggi, serta

dapat digunakan untuk membuat animasi suatu objek dengan efek transisi,

menjalankan permainan di web browser yang sepenuhnya diprogram

dengan menggunakan Tailwind CSS, serta melakukan validasi form

secara real-time saat pengguna mengisikan data pada form tersebut.[12]

 18

Gambar 2. 12 Tailwind CSS

2.2.8. Exspress js
Express.js adalah sebuah framework web yang dibuat untuk Node.js,

yang ditulis dalam bahasa pemrograman JavaScript. Framework ini

dibuat oleh TJ Holowaychuk dan diterbitkan sebagai open source.

Express.js memungkinkan pengembang untuk membuat aplikasi web

yang lebih cepat dan lebih efisien dengan menggunakan JavaScript

sebagai bahasa pemrograman utama. Kelebihan Menggunakan Express.js

adalah Didukung Oleh JavaScript, Dukungan Google V8 Engine, Biaya

Lebih Rendah, Flexibilitas, Performa. [13]

Gambar 2. 13 Express JSa

 19

2.2.9. Hosting

Web hosting adalah layanan yang menyediakan tempat untuk

menyimpan dan mengakses situs web di Internet. Web hosting

menyimpan semua file yang membentuk situs web , termasuk gambar,

teks, dan kode, di server yang selalu terhubung ke Internet.Pengguna

dapat mengakses situs web Anda melalui alamat web unik (juga dikenal

sebagai domain) yang mereka ketik di browser mereka.Penyedia layanan

web hosting menyediakan ruang penyimpanan online khusus yang aman

dan selalu terhubung ke Internet, memungkinkan siapa pun yang memiliki

akses Internet untuk mengakses situs web .Hosting adalah fondasi penting

untuk mengakses situs web secara online.[14]

Gambar 2. 14 Hosting

2.2.10. Node js

Node.js adalah lingkungan runtime JavaScript lintas platform yang

bersifat open source.Node.js memungkinkan Anda menjalankan kode

JavaScript di mana saja, tidak hanya di lingkungan browser.Node.js

menjalankan mesin JavaScript V8 (juga inti Google Chrome) di luar

browser.Ini meningkatkan kinerja Node.js.Node.js juga menyediakan

banyak library/module JavaScript yang membantu menyederhanakan

 20

pengembangan aplikasi web.Node.js memungkinkan pengembang untuk

membuat aplikasi web yang lebih dinamis dan responsif dengan

menggunakan teknologi seperti caching, asynchronous programming, dan

clustering. Selain itu, Node.js juga memungkinkan pengembang untuk

menggunakan library seperti Express.js, Koa.js, dan Hapi.js untuk

membuat aplikasi web yang lebih efisien dan skalabel.[15]

Gambar 2. 15 Node Js

2.2.11. Figma

Figma adalah alat desain untuk membuat desain antarmuka pengguna,

situs web, dan aplikasi seluler.Aplikasi ini juga dilengkapi dengan

dukungan ilustrasi vektor, gambar bitmap, tipografi, dan animasi. Figma

digunakan oleh pengembang untuk secara langsung menampilkan hasil

akhir dari kode yang ditulis sebelumnya dan untuk melihat cara kerja kode

saat runtime.Selain itu, Figma juga memiliki kemampuan untuk

membagikan hasil desain mentah Anda kepada orang lain, sehingga Anda

dapat berkolaborasi dalam proyek dengan orang lain. Figma dapat diakses

dan digunakan pada perangkat yang menjalankan OS Windows, Linux,

dan macOS ..[16]

 21

Gambar 2. 16 Figma

2.2.12. UML

UML (Unified Modeling Language) adalah sebuah bahasa untuk

menentukan, visualisasi, kontruksi, dan mendokumentasikan artifact

(bagian dari informasi yang digunakan atau dihasilkan dalam suatu proses

pembuatan perangkat lunak. Artefak dapat berupa model, deskripsi, atau

perangkat lunak dari suatu sistem perangkat lunak, seperti pemodelan

bisnis atau sistem non-perangkat lunak lainnya.

UML adalah bahasa deskripsi cetak biru perangkat lunak standar

yang digunakan untuk memvisualisasikan, menentukan, membuat, dan

mendokumentasikan alat dalam sistem perangkat lunak. [17]

a. Use Case Diargam merupakan pemodelan untuk melakukan

(behavior) sistem informai yang akan dibuat. Use case digunakan

untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem

informasi dan siapa saja yang berhak menggunakan fungsi-fungsi

itu. Berikut ini adalah simbol-simbol pada use case diagram.

 22

Tabel 2. 1 Simbol Use Case Digram

Simbol Keterangan
Actor : mewakili peran orang,
sitem yang lain, atau alat
ketika berkomunikasi dengan
use case

Use Case : Abstraksi dan

Interaksi antara aktor dan
sistem
Association : Mengabstraksi
hubungan antara aktor dan
use case
Generallisasi : Menenukan
spesialisasi bagi aktor untuk
memungkinkan partisipasi
dalam use case
Include :Menujukan bahwa
<<include> suatu use case seluruhnya
merupakan fungsionalitas dari
use case lainya
Extend : Menunjukkan bahwa
<<extend>> satu kasus penggunaan
berfungsi lebih baik daripada
kasus penggunaan lainnya
jika suatu kondisi terpenuhi.

b. Diagram aktivitas menggambarkan alur kerja atau aktivitas suatu

sistem, proses bisnis, atau menu perangkat lunak. Perhatikan

bahwa diagram aktivitas menggambarkan aktivitas suatu sistem,

 23

bukan apa yang dilakukan aktor, atau aktivitas yang dapat

dilakukan oleh sistem. Di bawah ini adalah ikon dalam diagram

aktivitas.

Tabel 2. 2 Simbol Activity Diagram

No Gambar Nama Keterangan
Activity Memperlihatkan
bagaimana masing-
1. masing kelas antar-
muka saling berinteraksi
satu sama lain.
Action Keadaan tindakan sistem
2. yang mencerminkan
pelaksanaan tindakan.
Initial Bagaimana suatu sistem
3.
Node di mulai..
Final Bagaimana objek
4. Node dibentuk dan
dihancurkan.
Fork Satu aliran yang pada
5. Node tahap tertentu berubah
menjadi beberapa aliran.
Pilihan untuk
6. Decision mengambil keputusan.

7. Digunakan untuk
melihat aktivitas yang
berjalan secara paralel
Fork/Join atau untuk
menggabungkan dua
aktivitas paralel menjadi
satu.
8. Rake Menunjukkan adanya
dekomposisi.

9. Time Tanda waktu

10. Send Tanda pengiriman

 24

c. “Diagram Sekuen atau Sequence Diagram menggambarkan

kelakuan objek pada use casedengan mendeskripsikn waktu hidup
objek dan message yang dikirim dan diterima antar objek.
Tabel 2. 3 Simbol Sequence Digaram
No Gambar Nama Keterangan
Objek entity, antar
1. Life Line muka yang saling
berinteraksi.
Spesifikasi dari
komunikasi antar
2. Message objek yang memuat
informasi -informasi
tentang aktifitas yang
terjadi.
Menggambarkan
3 Actor orang yang sedang
berinteraksi dengan
system.
Menggambarkan
Boundary
4 penggambaran dari
Class
form.
Mengambarkan
5 Entity Class hubungan kegiatan
yang akan dilakukan.
Menggambarkan
6. Control penghubung antara
Class Boundary dengan
tabel.
Sebagai sebuah objek
7 Activation
yang akan melakukan
sebuah aksi.
Mengindikasikan
Message
8 Message komunikasi antara
objek dengan objek
Mengindikasikan
9 Self komunikasi kembali
Message kedalam sebuah objek
itu sendiri
 25

d. Class Diagram menggambarkan struktur sistem dalam kaitannya

dengan definisi kelas-kelas yang dibuat untuk membangun
sistem. Kelas memiliki apa yang disebut atribut dan metode atau
operasi. Berikut adalah simbol-simbol pada class diagram :.
Tabel 2. 4 Simbol Class Diagram
No Gambar Nama Keterangan
Hubungan dimana
objek anak
(descendent) berbagi
1. Generalization perilaku dan struktur
data dari objek yang
ada di atasnya objek
induk (ancestor)
Upaya untuk
2. Nary menghindari asosiasi
Association dengan tiga atau lebih
objek.
Himpunan dari objek-
3. Class objek yang berbagi
atribut serta operasi
yang sama.
Deskripsi urutan
tindakan yang
ditampilkan oleh
4. Collaboration sistem yang
menghasilkan hasil
terukur bagi seorang
aktor.
Operasi yang benar -
5. Dependency benar dilakukan oleh
suatu objek.

2.2.13. PENGUJIAN SISTEM

Pengujian sistem adalah tahapan yang dilakukan untuk memastikan

bahwa sistem yang dibuat sesuai dengan rancangan sistem yang dibangun

sebelumnya. Pengujian sistem ini bertujuan untuk memastikan bahwa

sistem dapat berjalan dengan baik dan sesuai dengan yang diharapkan.
 26

2.2.13.1. Black Box Testing

Pengujian Black Box Pengujian black box melibatkan pengujian

perangkat lunak terhadap spesifikasi fungsional tanpa menguji internal

kode atau program. Hanya sisi fungsi, antarmuka, dan alurnya yang

diuji tanpa menyentuh kode atau script dari perangkat lunak[18]

Teknik Black-box Testing

1. Equivalence Partitioning

Teknik ini bekerja dengan membagi data masukan menjadi

beberapa partisi..

2. Boundary Value Analysis

Teknik ini menitikberatkan pada batas-batas dimana

kesalahan dapat terjadi baik dari luar maupun dari dalam

perangkat lunak, yaitu nilai minimum atau maksimum kesalahan

yang dapat diperoleh..

3. Fuzzing

Fuzzing adalah teknik untuk menemukan bug/glitch pada

perangkat lunak melalui penyisipan data yang cacat atau sesi semi

otomatis..

4. Cause-Effect Graph

teknik pengujian yang menggunakan grafik sebagai

patokannya.Diagram ini menunjukkan hubungan antara dampak

dan penyebab kesalahan .

 27

5. Orthogonal Array Tesiong

Dapat digunakan bila area masukan relatif kecil namun

cukup berat untuk digunakan dalam skala besar..

6. All Pair Testing

teknik ini, setiap pasangan kasus uji dirancang sedemikian

rupa sehingga semua kemungkinan kombinasi diskrit dari semua

pasangan dapat dieksekusi berdasarkan parameter masukan.

7. State Transition Testing

untuk menguji status mesin dan navigasi antarmuka

pengguna dalam format grafis..

2.2.13.2. White Box Testing

White Box Testing adalah metode pengujian struktur internal

suatu aplikasi melalui perangkat lunak.Orang yang menjalankan

tes ini harus mengetahui kode dan keseluruhan struktur internal

program..[19]

Teknik White-box Testing

1. Basis Path Testing

Basis path testing memungkinkan perancang kasus uji

mengukur kompleksitas logis dari desain prosedural dan

menggunakan pengukuran ini untuk menentukan serangkaian

jalur eksekusi dasar digunakan sebagai panduan.

 28

2. Flow Graph

Flow grap hmerupakan representasi sederhana dari aliran

pengendalian.

3. Cyclomatic Complexity

Cyclomatic complexity digunakan untuk menentukan

jumlah jalur yang perlu dicari.Kompleksitas siklomatik adalah

metrik perangkat lunak yang secara kuantitatif mengukur

kompleksitas logis suatu program..