PENGEMBANGAN APLIKASI WEB

WARUNG SEMBAKO

FAUZIAH HENNI HASIBUAN

HILAL FAKHRI DZAKWAN
MOHAMMAD NURKAMAL FAUZAN
 PT. Penerbit Buku
Pedia
2023

PENGEMBANGAN APLIKASI WEB WARUNG SEMBAKO

Memahami penjelasan konsep tentang sistem aplikasi web warung sembako

Penulis:
Fauziah Henni Hasibuan
Hilal Fakhri Dzakwan
Mohammad Nurkamal Fauzan

ISBN:

Editor:
Roni Habibi

Penyunting:
Roni Habibi

Desain sampul dan Tata letak:

Hilal Fakhri Dzakwan

Font:
Calibri

Penerbit:
PT. Penerbit Buku Pedia

Redaksi:
Athena Residence Blok. E No. 1, Desa Ciwaruga,
Kec. Parongpong, Kab. Bandung Barat 40559
Tel. 628-775-2000-300
Email : penerbit@bukupedia.co.id
Distributor:
Informatics Research Center
Jl. Sariasih No. 54 Bandung
40151
Email : irc@ulbi.ac.id

Cetakan Pertama, 2023

Hak cipta dilindungi undang-undang
Dilarang memperbanyak karya tulis ini dalam bentuk dan

dengan cara apa pun tanpa ijin tertulis dari penerbit

 PRAKATA

M diperhitungkan untuk menyederhanakan operasi dan

memberikan embuat aplikasi server web untuk bisnis grosir adalah
langkah yang
layanan yang lebih baik dan efektif kepada konsumen. Warung
sembako diyakini dapat meningkatkan kepuasan pelanggan dan
efektivitas operasional dengan bantuan aplikasi web server. Warung sembako
memainkan peranan penting dalam memenuhi kebutuhan sehari-hari
masyarakat.
Program web server ini membantu operator warung makan dalam pengelolaan
stok, keuangan, dan operasional umum selain memudahkan pelanggan dalam
bertransaksi. Teknologi ini diperkirakan akan membuat warung sembako lebih
kompetitif di era digital, di mana retensi dan daya tarik konsumen terutama
bergantung pada aksesibilitas dan kecepatan.
Pengembangan aplikasi web server ini juga diharapkan dapat meningkatkan
pencegahan kehilangan stok, akurasi persediaan, dan efisiensi dalam
pemantauan tanggal kadaluwarsa produk. Selain itu, teknologi ini dapat
membantu pemilik warung sembako lebih memahami preferensi pelanggan
mereka, menciptakan kampanye pemasaran yang lebih terfokus, dan
mendorong keterlibatan langsung pelanggan-warung yang lebih besar.
Keamanan data klien dan transaksi harus diperhatikan ketika merancang
aplikasi web server ini. Mendapatkan kepercayaan pelanggan terhadap
platform ini melalui keamanan sangatlah penting. Oleh karena itu, integritas
dan kerahasiaan data perlu dilindungi dengan menerapkan protokol keamanan
terkini.

i
 DAFTAR ISI

PRAKATA................................................................................................................
DAFTAR ISI.............................................................................................................
BAB 1....................................................................................................................
PENDAHULUAN.....................................................................................................
A. PENGERTIAN WEB SERVER...........................................................................
B. SEJARAH WEB SERVER..................................................................................
C. PENGENALAN WARUNG SEMBAKO..............................................................
D. KEUNTUNGAN.............................................................................................
BAB II....................................................................................................................
PHP,CSS DAN MYSQL.............................................................................................
A. PHP..............................................................................................................
B. CSS...............................................................................................................
C. MYSQL........................................................................................................10
BAB III.................................................................................................................13
PERANGKAT PENDUKUNG APLIKASI....................................................................13
A. BAHASA PEMROGRAMAN YANG DIGUNAKAN............................................14
a. Laravel........................................................................................................14
b. Vue js.........................................................................................................15
B. Perangkat Lunak Yang Dibutuhkan..............................................................16
a. Visual studio code.......................................................................................16
b. Hosting......................................................................................................17
c. XAMPP.......................................................................................................19
d. WA auth......................................................................................................19

ii
 e. Swagger......................................................................................................20
BAB IV.................................................................................................................21
PERANGKAT PENDUKUNG APLIKASI....................................................................21
A. CARA MENGINSTAL LARAVEL.....................................................................21
B. CARA MENGINSTAL VUE JS.........................................................................22
C. CARA INSTALL VISUAL STUDIO CODE..........................................................26
D. CARA INSTALL XAMPP................................................................................31
A. Frontend....................................................................................................36
B. Backend......................................................................................................36
C. Integrasi Whatsapp API:.............................................................................36
D. INTERFACE.................................................................................................38
DAFTAR PUSTAKA................................................................................................41
GLOSARIUM........................................................................................................44

ii
i
 BAB 1
PENDAHULUAN

A. PENGERTIAN WEB SERVER

Web server adalah komponen kunci dalam infrastruktur internet yang
berfungsi sebagai penyedia layanan untuk mengelola dan menyajikan situs web
kepada pengguna. Secara umum, web server bertugas merespons permintaan
yang dikirim oleh pengguna melalui browser web dengan mengirimkan konten
yang diminta, seperti halaman HTML, gambar, atau file lainnya.[1]
Perangkat keras web server terdiri dari komputer fisik atau server yang
diperuntukkan khusus untuk menyimpan data dan mengelola permintaan
pengguna. Di sisi lain, perangkat lunak web server beroperasi sebagai aplikasi
yang menjalankan protokol HTTP untuk berkomunikasi dengan browser
pengguna.
Web server memiliki beberapa fungsi utama, termasuk penyimpanan dan
pengelolaan data situs web, penanganan permintaan HTTP, manajemen sesi
pengguna, dan penerapan keamanan melalui protokol enkripsi. Layanan
Informasi Internet Microsoft (IIS), Nginx, dan Apache adalah beberapa jenis
server web yang populer.[2]
Pentingnya web server dalam konteks pengembangan bisnis semakin
meningkat, terutama ketika warung sembako memanfaatkannya melalui
Aplikasi Web Server. Toko kelontong dapat meningkatkan keterlibatan
pelanggan melalui platform online, mengoptimalkan manajemen inventaris,
dan meningkatkan efisiensi operasional dengan menerapkan teknologi ini.
Sehingga, pemahaman tentang konsep web server menjadi krusial dalam
konteks pengembangan bisnis yang mengedepankan teknologi informasi.[3]

1
B. SEJARAH WEB SERVER
Sejarah web server dimulai seiring dengan perkembangan internet dan
kebutuhan akan sistem komunikasi yang dapat menyediakan akses terhadap
informasi secara global. Berikut adalah sejarah singkat evolusi web server:
1. Pionir Internet (1960-an - 1970-an):
Inisiatif seperti ARPANET, proyek penelitian awal yang menjadi prototipe
internet, mulai terbentuk pada awal tahun 1960an. Protokol Kontrol
Transmisi/Protokol Internet, atau TCP/IP, dikembangkan untuk menghubungkan
dan mengontrol komunikasi di berbagai jaringan komputer.
2. Konsep HTTP dan WWW (1980-an):
Organisasi Penelitian Nuklir Eropa (CERN) mempekerjakan Tim Berners-Lee
untuk membuat World Wide Web (WWW), yang berfungsi sebagai prototipe
infrastruktur web modern pada tahun 1989. Tim Berners-Lee menciptakan
HTTP (Hypertext Transfer Protocol) pada tahun 1990 sebagai sarana
memfasilitasi pertukaran informasi melalui internet.
3. Web Server Awal (1990-an):
Populer pada pertengahan 1990-an, server web NCSA HTTPd (Pusat
Nasional untuk Aplikasi Superkomputer HTTP daemon) adalah salah satu yang
pertama. Setelah rilis awal pada tahun 1995, Apache HTTP Server mendapatkan
popularitas yang luar biasa dan masih digunakan sampai sekarang.
4. Perkembangan Web Server (2000-an hingga Sekarang):
Penambahan fitur keamanan, skalabilitas, dan dukungan untuk bahasa
pemrograman seperti PHP, Python, dan Ruby menjadi tren dalam
perkembangan web server. Server Nginx, diluncurkan pada tahun 2004,
menjadi alternatif populer dengan fokus pada kinerja dan penanganan beban
tinggi. Perkembangan HTTPS (Hypertext Transfer Protocol Secure) dengan
enkripsi SSL/TLS meningkatkan keamanan komunikasi antara server dan klien.
5. Web Server di Era Cloud Computing (2010-an - Sekarang):
Karena layanan cloud seperti Amazon Web Services (AWS), Microsoft
Azure, dan Google Cloud menawarkan arsitektur server web yang elastis dan
skalabel, penggunaan komputasi awan mengubah cara penerapan server web.
Keberlanjutan perkembangan web server tercermin dalam upaya untuk
meningkatkan efisiensi, keamanan, dan dukungan untuk teknologi-teknologi
terbaru seperti kontainerisasi.
Seiring dengan perkembangan teknologi dan kebutuhan bisnis, web server
terus mengalami inovasi untuk memenuhi tuntutan era digital. Saat ini, web

2
server menjadi pondasi utama bagi aplikasi web, e-commerce, dan berbagai
layanan online yang mendukung konektivitas global.

C. PENGENALAN WARUNG SEMBAKO

Warung sembako, singkatan dari "sembilan bahan pokok," merupakan
bagian integral dari kehidupan sehari-hari masyarakat di Indonesia. Warung
makan merupakan tempat usaha yang menjual berbagai kebutuhan pokok,
antara lain minyak goreng, beras, gula, dan perlengkapan dapur lainnya. Lebih
dari sekadar sebuah tempat berbelanja, warung sembako menjadi pusat
komunitas di tingkat lokal, melayani kebutuhan sehari-hari dan memberikan
layanan yang dekat dengan hati masyarakat.[4]
Warung sembako tidak hanya berfungsi sebagai penyedia bahan pokok,
tetapi juga sebagai jaringan sosial di lingkungan sekitarnya. Pemilik warung
sembako sering kali memiliki hubungan pribadi dengan pelanggannya,
mengetahui preferensi dan kebutuhan masing-masing keluarga. Keberadaan
warung sembako juga memberikan rasa keamanan dan kenyamanan kepada
masyarakat, karena mudah diakses dan menyediakan produk-produk esensial
dengan harga yang terjangkau.[5]
Dalam perkembangannya, warung sembako tidak luput dari tantangan dan
peluang yang muncul dengan pesatnya kemajuan teknologi. Pemanfaatan
Aplikasi Web Server menjadi salah satu solusi inovatif untuk meningkatkan
efisiensi operasional warung sembako, membantu pemiliknya mengelola
inventaris, memperluas jangkauan pelanggan, dan beradaptasi dengan
dinamika pasar yang terus berubah.[6]
Tujuan buku ini adalah memberikan saran berguna kepada pemilik toko
kelontong tentang cara menggunakan Aplikasi Server Web untuk mencapai
strategi pengembangan bisnis. Tujuannya adalah dengan menyadari
kemungkinan-kemungkinan yang dimiliki oleh teknologi ini, kedai-kedai pangan
akan mampu mempertahankan pertumbuhannya, tetap menjadi komponen
vital perekonomian masyarakat, dan bertahan di era digital.[7]
D. KEUNTUNGAN
Keuntungan-keuntungan yang dapat diperoleh dengan pemanfaatan
Aplikasi Web Server dalam pengembangan bisnis warung sembako melibatkan
transformasi positif dalam berbagai aspek operasional dan pelayanan. Berikut
adalah beberapa keuntungan yang mungkin dirasakan:[8] 1. Manajemen
Inventaris yang Efisien:

3
 Aplikasi Web Server memungkinkan pemilik warung sembako untuk secara
akurat memantau dan mengelola stok barang secara real-time. Ini membantu
menghindari kelebihan atau kekurangan persediaan, meningkatkan efisiensi
dan mengurangi potensi kerugian. 2. Peningkatan Layanan Pelanggan:
Dengan adopsi Aplikasi Web Server, pelanggan dapat memiliki akses yang
lebih baik ke informasi produk, harga, dan promosi melalui platform online. Hal
ini memperluas jangkauan dan memberikan pengalaman berbelanja yang lebih
nyaman bagi pelanggan.
3. Pemantauan Keuangan yang Akurat:
Aplikasi Web Server dapat membantu dalam pencatatan transaksi secara
terperinci dan akurat. Ini memudahkan pemilik warung sembako untuk melacak
pemasukan, pengeluaran, dan laba bersih secara lebih efisien.
4. Kemudahan dalam Transaksi:
Pemanfaatan Aplikasi Web Server memungkinkan transaksi pembelian
dilakukan secara elektronik. Hal ini mempercepat proses checkout, mengurangi
antrian, dan memberikan pengalaman berbelanja yang lebih efisien bagi
pelanggan.
5. Analisis Data untuk Pengambilan Keputusan:
Aplikasi Web Server menyediakan alat analisis data yang dapat membantu
pemilik warung sembako memahami tren penjualan, preferensi pelanggan, dan
performa produk. Informasi ini sangat berharga untuk pengambilan keputusan
strategis.[9]

4
 BAB II
PHP,CSS DAN MYSQL

A. PHP
Bahasa pemrograman sisi server PHP (Hypertext Preprocessor) dibuat
khusus untuk pengembangan web. PHP digunakan untuk menghasilkan
halaman web dinamis, artinya informasi dari database, input pengguna, dan
sumber eksternal lainnya dapat digunakan untuk memperbarui konten
halaman secara dinamis.
Beberapa fitur utama PHP adalah sebagai berikut:
1 Server-Side Scripting: Server web, bukan komputer pengguna, menjalankan
PHP. HTML dibuat oleh server dan diberikan ke browser web pengguna.
2 Sintaksis Mirip C: Bagi programmer yang sudah familiar dengan sintaksnya,
PHP lebih mudah digunakan karena memiliki kesamaan dengan banyak
bahasa pemrograman lain, termasuk C.
3 Integrasi Mudah dengan HTML: PHP mudah diintegrasikan dengan kode
HTML karena dapat dimasukkan langsung ke dalam bahasa markup.
4 Dukungan untuk Berbagai Database: PHP memfasilitasi interaksi database
antara aplikasi web dan banyak jenis database lainnya, seperti MySQL,
PostgreSQL, dan masih banyak lagi.
5 Open Source Menurut lisensi pengembangan PHP, PHP adalah perangkat
lunak sumber terbuka, artinya siapa pun dapat melihat dan mengubah
kode sumbernya.
6 Fleksibilitas: PHP mampu menghasilkan berbagai jenis situs web, mulai dari
situs sederhana hingga aplikasi online yang rumit.
7 Komunitas yang Besar: Komunitas pengembangan PHP cukup besar dan
dinamis, menawarkan sumber daya dan bantuan melalui forum,
dokumentasi, dan proyek sumber terbuka.

5
 PHP (Hypertext Preprocessor) memiliki sejarah yang cukup panjang, dimulai
dari pengembangan awalnya pada tahun 1994 oleh Rasmus Lerdorf. Berikut
adalah rangkuman singkat sejarah PHP:
1. Pengembangan Awal (1994-1997):
• PHP dimulai sebagai proyek pribadi oleh Rasmus Lerdorf pada tahun
1994. Pada awalnya, PHP disebut "Personal Home Page Tools" (PHP
Tools). Fungsinya awalnya adalah untuk melacak kunjungan pada
halaman web pribadi Lerdorf.
• Seiring waktu, Lerdorf menambahkan kemampuan pemrosesan
formulir, pengumpulan data, dan akses ke database, mengubahnya
menjadi alat pemrograman server-side yang lebih umum.
2. PHP 2 (November 1997):
• Versi pertama yang resmi dirilis adalah PHP 2 pada November 1997.
Pada titik ini, PHP diartikan sebagai "PHP: Hypertext Preprocessor."
• PHP 2 sudah menyertakan beberapa fitur dasar, seperti dukungan
untuk database dan antarmuka pengembangan web CGI.
3. PHP 3 (Desember 1998):
• PHP 3, dirilis pada Desember 1998, adalah versi yang mengalami
perubahan besar. Menyertakan pemrosesan formulir, pengembangan
aplikasi web yang lebih dinamis, dan dukungan untuk berbagai
database.
4. Zeev Suraski dan Andi Gutmans (1999):
• Zeev Suraski dan Andi Gutmans, dua pengembang Israel, memulai
proyek untuk memodifikasi inti PHP. Hasilnya adalah PHP 4, yang dirilis
pada Mei 2000.
5. PHP 4 (Mei 2000):
• PHP 4 membawa perubahan besar dalam desain dan kinerja. Ini
menyertakan Zend Engine, yang dikembangkan oleh Suraski dan
Gutmans, untuk meningkatkan kinerja dan modularitas PHP.
6. PHP 5 (Juli 2004):
• PHP 5, dirilis pada Juli 2004, menyertakan banyak perubahan signifikan,
termasuk peningkatan kinerja melalui Zend Engine 2, dukungan untuk
objek dan pemrograman berorientasi objek (OOP), serta peningkatan
keamanan.
7. PHP 6 (Proyek Dibatalkan):

6
 • Proyek PHP 6 dimulai untuk menyertakan dukungan untuk Unicode
secara penuh, tetapi akhirnya dibatalkan karena kompleksitas dan
tantangan pengembangan. Beberapa fitur PHP 6 diintegrasikan ke
dalam PHP 5.3 dan versi selanjutnya.
8. PHP 7 (Desember 2015):
• PHP 7, dirilis pada Desember 2015, membawa peningkatan signifikan
dalam kinerja dan efisiensi memori. Ini juga menyertakan sintaksis baru
dan fitur seperti deklarasi tipe dan operator antar-ruang-namespace.
9. PHP 8 (November 2020):
• PHP 8, dirilis pada November 2020, menyertakan sejumlah fitur baru
dan peningkatan kinerja, termasuk JIT (Just-In-Time) compiler untuk
meningkatkan kinerja eksekusi kode.
PHP memiliki berbagai macam fungsi yang dapat digunakan untuk
melakukan berbagai tugas dalam pengembangan web dan pemrograman secara
umum. Berikut adalah beberapa fungsi umum PHP:
1. Manipulasi String:
• strlen(): Memberikan panjang string.
• strpos(): Menemukan lokasi substring dalam sebuah string.
• str_replace(): Fungsi ini mengubah setiap instance substring dalam
string menjadi substring berbeda.
2. Manipulasi Array:
• count(): Menentukan berapa banyak elemen yang ada dalam sebuah
array.
• array_push(): Memperluas array dengan satu atau lebih elemen.
• array_pop(): Mengeluarkan dan mengembalikan elemen terakhir
array.
3. Operasi Matematika:
• sqrt(): Mengembalikan akar kuadrat dari sebuah angka.
• rand(): Menghasilkan angka acak.
4. Manipulasi File:
• fopen(): Luncurkan URL atau file.
• fwrite(): Menulis data ke file.
• fclose(): Menutup file yang telah dibuka.
5. Manipulasi Waktu dan Tanggal:
• date(): Mengembalikan tanggal dan waktu saat ini.

7
 • strtotime(): Mengonversi string tanggal dan waktu ke format
timestamp.
6. Interaksi dengan Database:
• mysqli_connect(): Membuat koneksi ke server MySQL.
• mysqli_query(): Menjalankan query SQL pada database MySQL.
7. Manipulasi Formulir:
• $_POST[]: Mendapatkan nilai dari formulir yang dikirim menggunakan
metode POST.
• $_GET[]: Mendapatkan nilai dari formulir yang dikirim menggunakan
metode GET.
• Fungsi Pengontrol Aliran:
• if(), else if(), else: Mengevaluasi kondisi dan melakukan tindakan
berdasarkan hasil evaluasi.
• switch(): Mengevaluasi ekspresi dan menjalankan blok kode yang
sesuai dengan nilai ekspresi.
8. Fungsi Pemrosesan String JSON:
• json_encode(): Mengonversi array atau objek PHP ke format JSON.
• json_decode(): Mengonversi string JSON ke array atau objek PHP.

Kelebihan PHP:
1. Mudah Dipahami:
• • Karena PHP mempunyai sintak dengan bahasa pemrograman C, maka
programmer yang sudah menguasai bahasa tersebut akan cukup
mudah mempelajarinya.
2. Integrasi Mudah dengan HTML:
• PHP dapat disematkan langsung dalam kode HTML, memungkinkan
pengembang untuk menggabungkan logika server-side dengan markup
language.
3. Dukungan untuk Berbagai Database:
• PHP mendukung banyak jenis database, termasuk MySQL, PostgreSQL,
dan lainnya, memberikan fleksibilitas dalam mengelola data.
4. Open Source:
• Karena PHP adalah perangkat lunak sumber terbuka, maka mudah
digunakan dan disesuaikan dengan kebutuhan Anda
5. Komunitas Besar:

8
 • • Terdapat komunitas pengembang PHP yang cukup besar dan dinamis,
menyediakan dukungan, sumber daya, dan pembaruan melalui
berbagai forum dan situs web.
6. Berbagai Framework Tersedia:
• Terdapat berbagai framework PHP, seperti Laravel, Symfony, dan
CodeIgniter, yang membantu mempercepat pengembangan aplikasi
web dengan menyediakan struktur dan fitur yang telah siap pakai.
7. Kinerja Cukup Baik:
• Dalam banyak kasus, PHP dapat memberikan kinerja yang memadai
untuk aplikasi web, terutama dengan penggunaan yang benar dan
penyesuaian yang baik.

Kekurangan PHP:
1 Penanganan Kesalahan Terbatas:
• Penanganan kesalahan bawaan PHP tidak selalu memberikan detail
yang cukup, yang bisa membuat debugging lebih sulit.
2 Kurangnya Struktur Kode Bawaan:
• PHP pada awalnya tidak dirancang dengan pola-pola desain modern
yang mengarah pada kurangnya struktur kode bawaan. Ini dapat diatasi
dengan menggunakan framework PHP.
3 Kinerja Tergantung pada Konfigurasi Server:
• Kinerja PHP dapat dipengaruhi oleh konfigurasi server web tertentu,
dan performanya mungkin tidak secepat bahasa pemrograman server-
side lainnya.
4 Skalabilitas Tergantung pada Desain Aplikasi:
• Skalabilitas aplikasi PHP dapat menjadi tantangan jika tidak dirancang
dengan baik, meskipun ini juga berlaku untuk bahasa pemrograman
lain. 5 Tidak Cocok untuk Tugas Berat Secara Komputasional:
• PHP lebih cocok untuk tugas-tugas pengembangan web dan tidak selalu
efisien untuk tugas-tugas berat secara komputasional.
6 Pengelolaan Memori Terbatas:
• Meskipun PHP memiliki pengelolaan memori otomatis, namun untuk
aplikasi yang membutuhkan manipulasi memori yang lebih canggih,
PHP mungkin memiliki keterbatasan.

9
B. CSS
Gaya dan tampilan (style) dokumen HTML atau XML dapat diatur
menggunakan bahasa stylesheet yang disebut CSS, atau Cascading Style Sheets.
CSS memisahkan struktur dan konten dari presentasi,memungkinkan
pengembang web untuk secara efisien mengontrol tata letak dan gaya halaman
web secara konsisten di berbagai perangkat dan layar.
Beberapa konsep utama dalam CSS meliputi:
1. Selektor:
• Selektor digunakan untuk menentukan elemen atau kelompok elemen
di dalam dokumen HTML yang akan diberikan gaya.
2. Properti:
• Properti mendefinisikan karakteristik atau atribut yang akan diubah,
seperti warna teks, ukuran font, atau tata letak elemen.
3. Nilai:
• Nilai diberikan kepada properti dan menggambarkan bagaimana
properti tersebut harus diubah. Contohnya, nilai untuk properti warna
bisa "merah", "#FF0000", atau "RGB(255, 0, 0)".
4. Deklarasi:
• Deklarasi adalah kombinasi dari properti dan nilainya. Deklarasi
ditempatkan di dalam blok aturan CSS.
5. Aturan CSS:
• Aturan CSS terdiri dari satu atau lebih selektor dan blok deklarasi yang
terkait. Aturan ini diterapkan pada elemen atau kelompok elemen yang
sesuai dengan selektor.
C. MYSQL
Salah satu sistem manajemen basis data relasional (RDBMS) yang banyak
digunakan dan disukai adalah MySQL. Ini adalah program sumber terbuka
untuk mengelola dan menyimpan data dalam database. Perusahaan MySQL AB
membuat, mendistribusikan, dan mendukung MySQL. Sun Microsystems
kemudian membeli MySQL pada tahun 2008, dan Oracle Corporation
melakukan hal yang sama pada tahun 2010. Beberapa fitur utama MySQL
adalah sebagai berikut:
1. Open Source:
• MySQL is licensed under the GNU General Public License (GPL), which
permits users to view and alter the program's source code.
2. Database Relational:

10
 • Because MySQL has a relational database architecture, information is
kept in tables that are connected to one another by means of foreign keys.
3. Multi-Platform:
• MySQL is compatible with many different operating systems, such as
Windows, Linux, macOS, and others.
4. Support for SQL:
• MySQL manages and manipulates data in a database using Structured
Query Language (SQL). Interoperability with other SQL-enabled
databases is facilitated by this.
6. Performa Tinggi:
• MySQL terkenal karena kinerjanya yang tinggi dan efisiensinya dalam
menangani beban kerja tinggi. Ini membuatnya populer di kalangan
pengembang dan organisasi dengan skala besar.
7. Replikasi dan Kepantasan:
• MySQL mendukung fitur replikasi, yang memungkinkan replikasi data
dari satu server ke server lain untuk tujuan cadangan atau distribusi
beban kerja. MySQL juga mendukung transaksi untuk menjaga
kepatuhan (ACID properties) dan integritas data.
8. Komersial dan Versi Komunitas:
• MySQL memiliki versi komersial yang disertakan dalam paket Oracle
MySQL Enterprise Edition, yang menyediakan fitur tambahan dan
dukungan. Sementara itu, versi komunitas dapat diunduh dan
digunakan secara gratis.
9. Komunitas Pengembang yang Aktif:
• MySQL memiliki komunitas pengembang yang besar dan aktif, yang
menyediakan dukungan, pembaruan, dan sumber daya melalui forum,
dokumentasi, dan proyek open source.
MySQL dan SQL (Structured Query Language) adalah dua hal yang berbeda,
dan perbandingan antara keduanya mungkin memerlukan klarifikasi. Mari kita
lihat perbedaan utama antara keduanya:
1. MySQL:
• MySQL adalah sebuah sistem manajemen base data (DBMS) relasional.
• MySQL adalah implementasi spesifik dari SQL. Artinya MySQL
menggunakan SQL sebagai bahasa untuk mengelola dan mengatur data di
dalamnya.

11
 • MySQL dikembangkan, didistribusikan, dan dipelihara oleh MySQL AB,
setelah itu dianalisis oleh Sun Microsystems dan terakhir oleh Oracle
Corporation.
• MySQL memiliki arsitektur client-server yang memungkinkan klien
(aplikasi atau pengguna) berkomunikasi dengan data berbasis MySQL
2. Menggunakan query SQL.SQL (Structured Query Language):
• SQL adalah bahasa standar untuk mengelola dan memanipulasi basis data
relasional.
• SQL tidak spesifik untuk satu sistem manajemen basis data tertentu.
Sebaliknya, ia digunakan secara umum di berbagai DBMS, termasuk
MySQL.
• SQL digunakan untuk membuat, mengambil, memperbarui, dan
menghapus data dari basis data relasional. Ini juga digunakan untuk
mengelola skema basis data, membuat tabel, dan memberikan izin
akses.
Menggunakan MySQL sebagai sistem manajemen basis data (DBMS)
memiliki beberapa keuntungan dan alasan yang membuatnya populer di
kalangan pengembang dan organisasi. Berikut adalah beberapa alasan
mengapa MySQL sering dipilih:
1. Open Source:
• MySQL adalah perangkat lunak sumber terbuka, yang berarti pengguna
dapat mengakses dan memodifikasi kode sumbernya sesuai dengan
kebutuhan mereka. Ini memungkinkan fleksibilitas dan kontrol penuh
atas implementasi database.
2. Biaya:
• Karena MySQL adalah perangkat lunak sumber terbuka,
penggunaannya umumnya gratis. Hal ini dapat menjadi pilihan yang
ekonomis untuk organisasi atau pengembang yang memiliki anggaran
terbatas.
3. Kompatibilitas dan Standar:
• MySQL mendukung SQL, yang merupakan bahasa standar untuk basis
data relasional. Ini membuatnya kompatibel dengan banyak aplikasi
dan alat yang mendukung SQL.
4. Kinerja Tinggi:
• MySQL dikenal karena kinerjanya yang tinggi, efisiensi, dan
kemampuannya untuk menangani beban kerja tinggi. Ini membuatnya

12
 cocok untuk aplikasi yang membutuhkan respons cepat dan
pemrosesan data yang efisien.
5. Dukungan untuk Transaksi dan Keamanan:
• MySQL mendukung transaksi, yang penting untuk memastikan
kepatuhan pada prinsip ACID (Atomicity, Consistency, Isolation,
Durability) dalam pengelolaan data.
• MySQL menyediakan mekanisme keamanan yang kuat untuk
mengelola hak akses dan izin pengguna, melindungi data dari akses
yang tidak sah.
6. Skalabilitas:
• MySQL mendukung replikasi, partisi, dan distribusi data, yang
memungkinkan pengguna untuk membangun solusi database yang
dapat diskalakan sesuai kebutuhan.
7. Komunitas Pengembang yang Besar:
• MySQL memiliki komunitas pengembang yang besar dan aktif.
Komunitas ini menyediakan dukungan, sumber daya, dan pembaruan
melalui forum, dokumentasi, dan proyek open source.
8. Dukungan untuk Berbagai Platform:
• MySQL dapat dijalankan di berbagai platform sistem operasi, termasuk
Windows, Linux, macOS, dan lainnya. Hal ini memberikan fleksibilitas
dalam memilih platform yang sesuai dengan kebutuhan.
9. Framework dan Library Pendukung:
• MySQL mendukung berbagai framework dan library pengembangan
yang memudahkan integrasi dengan berbagai aplikasi dan teknologi
pengembangan.

BAB III
PERANGKAT PENDUKUNG APLIKASI

13
A. BAHASA PEMROGRAMAN YANG DIGUNAKAN
a. Laravel

Laravel adalah sebuah framework pengembangan web yang ditulis dalam

bahasa pemrograman PHP. Dikembangkan oleh Taylor Otwell, Laravel
menawarkan sintaks yang ekspresif dan menyenangkan untuk membantu
pengembang membangun aplikasi web yang kuat dan efisien. Berikut adalah
beberapa poin penting yang menjelaskan Laravel:
1) PHP Framework
Menjadi framework PHP, Laravel menawarkan landasan dan struktur untuk
mengembangkan aplikasi web dengan bahasa pemrograman PHP. Bahasa
pemrograman sisi server PHP sangat disukai dan sering digunakan dalam
pengembangan web.
2) Elegan dan Ekspresif:
Salah satu keunggulan Laravel adalah sintaks yang elegan dan ekspresif. Ini
memungkinkan pengembang menulis kode dengan cara yang intuitif,
meningkatkan produktivitas dan meminimalkan jumlah kode yang perlu ditulis.
3) MVC (Model-View-Controller):
Paradigma desain arsitektur Model-View-Controller (MVC) digunakan oleh
Laravel. Hal ini memfasilitasi pembagian logika aplikasi menjadi tiga bagian
utama: Pengontrol (logika pengontrol), Tampilan (presentasi dan tampilan), dan
Model (manajemen data).
4) ORM (Object-Relational Mapping):
Laravel menyertakan Eloquent ORM, yang menyederhanakan interaksi
dengan database. Dengan menggunakan model Eloquent, pengembang dapat

14
 berinteraksi dengan database menggunakan objek-objek PHP, menghindari
penulisan SQL secara langsung.
5) Migrations dan Seedings:
Laravel menyediakan fasilitas migrations untuk mengelola struktur
database dan seedings untuk mengisi database dengan data uji atau awal. Ini
membuat pengembangan dan pemeliharaan database menjadi lebih
terstruktur.
6) Artisan CLI:
Artisan adalah command-line interface (CLI) bawaan Laravel yang
menyediakan berbagai perintah untuk membantu pengembang dalam
membuat, mengelola, dan memelihara aplikasi. Artisan membuat tugas-tugas
seperti migrasi database, pembuatan model, dan pengujian menjadi lebih
mudah.
7) Middleware dan Routing:
Laravel menyediakan sistem routing yang kuat untuk mengelola navigasi
pengguna dalam aplikasi. Middleware memungkinkan pengembang untuk
menambahkan lapisan fungsionalitas di antara permintaan dan respons HTTP.
8) Paket Composer:
Laravel memanfaatkan Composer, manajer dependensi PHP, untuk
mengelola dependensi dan paket-paket eksternal. Ini memudahkan
pengelolaan pustaka-pustaka eksternal dan integrasi komponen-komponen lain
ke dalam proyek Laravel.
Laravel menjadi pilihan populer di kalangan pengembang web karena
kombinasi fitur-fitur yang kuat, dokumentasi yang baik, serta komunitas yang
aktif. Dengan abstraksi dan fungsionalitas yang dimilikinya, Laravel
mempermudah pengembangan aplikasi web yang skalabel dan dapat
dipelihara.
b. Vue js

15
 Kerangka kerja JavaScript yang populer untuk membuat antarmuka pengguna
aplikasi web disebut Vue.js. Vue.js, dibuat oleh Evan You, menyediakan
metodologi progresif yang memungkinkan pengembang untuk secara bertahap
memasukkan kerangka kerja ke dalam proyek yang sudah ada. Salah satu
keunikan Vue.js adalah kemampuannya yang reaktif, di mana perubahan pada
model data secara otomatis memperbarui tampilan, dan sebaliknya.
Konsep komponen adalah inti dari Vue.js, memungkinkan pengembang
untuk memecah tampilan menjadi bagian-bagian kecil yang dapat dikelola
secara terpisah. Setiap komponen memiliki logika, tampilan, dan gaya mereka
sendiri, memfasilitasi pengembangan modular dan pemeliharaan yang lebih
mudah.
Vue.js menggunakan Virtual DOM untuk meningkatkan efisiensi
perubahan tampilan. Dengan menggunakan representasi virtual dari struktur
DOM aktual, perubahan pada tampilan pertama-tama diterapkan pada Virtual
DOM sebelum disinkronkan dengan DOM aktual, mengoptimalkan kinerja
aplikasi.
Sintaks template deklaratif Vue.js mempermudah pengembang dalam
mendefinisikan tampilan tanpa perlu memikirkan implementasi detail yang
kompleks. Vue.js juga dilengkapi dengan berbagai fitur, seperti Vue Router
untuk manajemen rute dan Vuex untuk manajemen status global, yang
memperkaya fungsionalitas framework ini.
Kelebihan Vue.js tidak hanya terletak pada kemudahannya dalam
pembelajaran, tetapi juga pada ekosistemnya yang kuat. Dengan komunitas
yang aktif, dokumentasi yang baik, dan sumber daya yang melimpah, Vue.js
menjadi pilihan yang diminati oleh pengembang untuk membangun aplikasi
web modern yang dinamis dan responsif.

B. Perangkat Lunak Yang Dibutuhkan

16
a. Visual studio code
Microsoft membuat Visual Studio Code (VS Code), editor teks sumber terbuka.
VS Code yang diciptakan khusus untuk keperluan pengembangan perangkat
lunak, memiliki sejumlah fitur yang memudahkan pembuatan program dalam
berbagai bahasa pemrograman. Penjelasan kode Visual Studio disediakan di
bawah ini:
Editor kode sumber yang sangat serbaguna dan ringan adalah Visual
Studio Code. VS Code tidak sama dengan Visual Studio, meski memiliki nama
yang sama. Visual Studio adalah lingkungan pengembangan terintegrasi (IDE).
Sebagai gantinya, VS Code dirancang untuk memberikan pengalaman
pengembangan yang cepat dan efisien dalam format yang lebih sederhana.
Salah satu fitur kunci dari VS Code adalah kemampuannya dalam mendukung
banyak bahasa pemrograman. Meskipun awalnya dikembangkan untuk
dukungan bahasa seperti JavaScript, TypeScript, dan Node.js, seiring waktu,
komunitas dan ekosistem pengguna VS Code telah memperluas dukungan
untuk bahasabahasa seperti Python, Java, C++, dan banyak lagi. Fleksibilitas ini
membuatnya menjadi pilihan populer di kalangan pengembang dengan
berbagai latar belakang. VS Code menyediakan antarmuka pengguna yang
bersih dan ramah pengembang, dilengkapi dengan fitur-fitur seperti
penyorotan sintaks, otomatisasi penyelesaian kode (code completion), navigasi
cepat, dan integrasi sistem kontrol versi seperti Git. Selain itu, VS Code
mendukung ekstensi yang memungkinkan pengguna menyesuaikan dan
memperluas fungsionalitas editor sesuai kebutuhan pengembangan mereka.
[10]
Salah satu keunggulan VS Code adalah performanya yang tinggi.
Meskipun memiliki fitur-fitur kaya, editor ini tetap ringan dan responsif,
memungkinkan pengembang untuk bekerja dengan lancar bahkan pada
proyekproyek yang besar. VS Code juga dapat dijalankan di berbagai sistem
operasi, termasuk Windows, macOS, dan Linux. Dengan dukungan dari
komunitas pengembang yang aktif, Visual studio code terus berkembang dan
diperbarui secara reguler, menambahkan fitur-fitur baru dan memperbaiki bug.
Kesederhanaan, fleksibilitas, dan performa tinggi menjadikan VS Code sebagai
pilihan utama banyak pengembang dalam proses pembuatan perangkat lunak
mereka.[11]

17
b. Hosting

Hosting merujuk pada layanan penyediaan sumber daya dan infrastruktur

yang diperlukan untuk menyimpan dan membuat situs web atau aplikasi web
dapat diakses melalui internet. Dalam konteks teknologi web, Hosting
memungkinkan pemilik situs atau pengembang untuk membuat situs web
mereka dapat diakses oleh pengguna online. Berikut adalah penjelasan tentang
konsep Hosting:
Hosting adalah Layanan Penyimpanan dan Akses: Hosting menyediakan
tempat untuk menyimpan semua file yang diperlukan untuk menjalankan suatu
situs web atau aplikasi web. Ini mencakup file- file HTML, gambar, skrip
JavaScript, basis data, dan elemen-elemen lainnya yang diperlukan untuk
tampilan dan fungsionalitas situs.
Jenis Hosting: Shared, VPS (Virtual Private Server), dedicated, dan cloud
hosting adalah beberapa di antara beberapa bentuk hosting. Setiap jenis
hosting mempunyai kelebihan dan kualitasnya masing-masing. Misalnya,
hosting VPS menawarkan lingkungan server virtual yang lebih pribadi
sedangkan hosting bersama berbagi sumber daya server dengan situs web lain.
Memanfaatkan server sebagai penyimpanan adalah bagian dari hosting;
server ini bisa virtual atau fisik. Semua file dan informasi yang diperlukan untuk
mengoperasikan situs web disimpan di server ini. Server yang terhubung ke
internet ini menangani permintaan pengguna untuk mengakses situs web atau
aplikasi yang dihosting.Akses Melalui Domain: Situs web yang diHosting dapat
diakses melalui domain tertentu, yang dihubungkan dengan alamat IP server.
Proses ini memungkinkan pengguna untuk menggunakan nama domain
(seperti www.example.com) daripada harus mengingat alamat IP numerik yang
terkait dengan server.
Dukungan dan Layanan Tambahan: Provider Hosting seringkali menawarkan
berbagai layanan tambahan, seperti dukungan teknis, pemantauan server,
cadangan data, dan keamanan. Layanan tambahan ini memberikan kemudahan
dan perlindungan tambahan kepada pemilik situs.
18
 Skalabilitas: Hosting juga mencakup kemampuan untuk mengelola
lonjakan lalu lintas atau peningkatan kebutuhan sumber daya. Layanan Hosting
yang baik harus dapat menyediakan fleksibilitas dan skalabilitas untuk
memastikan situs web tetap berkinerja dengan baik ketika penggunaan
meningkat.
Penting dalam Pengembangan Web: Hosting menjadi faktor kunci
dalam pengembangan web karena menentukan ketersediaan dan aksesibilitas
situs. Pemilihan penyedia Hosting yang tepat dan jenis Hosting yang sesuai
dengan kebutuhan proyek dapat memengaruhi performa dan keberhasilan situs
atau aplikasi web.
Secara umum, Hosting adalah fondasi teknis yang memungkinkan situs
web atau aplikasi web dapat diakses secara online. Pemilihan penyedia Hosting
yang tepat penting untuk memastikan ketersediaan dan kinerja yang optimal.
c. XAMPP

Dengan empat komponen utama, XAMPP adalah perangkat lunak

yang menawarkan lingkungan pengembangan web lokal: PHP, bahasa
pemrograman sisi server, MySQL, sistem manajemen basis data, dan Apache,
server web. X berarti kompatibilitas lintas platform. Pengembang tidak perlu
terhubung ke internet untuk membuat dan menguji situs web atau aplikasi web
secara lokal di PC mereka berkat XAMPP. Apache bertindak sebagai server web
yang menangani permintaan HTTP, sementara MySQL menyediakan
kemampuan manajemen basis data untuk menyimpan dan mengelola data.
PHP berfungsi sebagai bahasa pemrograman server-side yang memungkinkan
pembuatan halaman web dinamis. Keunikan XAMPP terletak pada
kemampuannya untuk berjalan di berbagai platform, termasuk Windows,
macOS, dan Linux, menjadikannya solusi fleksibel bagi pengembang
independen dari sistem operasi yang digunakan. Dengan menyediakan
lingkungan pengembangan lokal yang komprehensif, XAMPP mempermudah

19
pengembang dalam menguji, mengembangkan, dan mendeploy proyek-proyek
web mereka secara efisien sebelum diluncurkan ke server live.[12]
d. WA auth
Autentikasi dalam konteks WhatsApp atau aplikasi pesan instan serupa
melibatkan proses verifikasi identitas pengguna untuk memastikan bahwa
hanya pengguna yang sah yang dapat mengakses akun dan data pribadi
mereka. Proses autentikasi ini dapat melibatkan berbagai metode, termasuk
penggunaan kombinasi nama pengguna dan kata sandi, kode verifikasi melalui
SMS atau email, atau metode otentikasi dua faktor untuk tingkat keamanan
yang lebih tinggi.[13]
Sistem autentikasi pada WhatsApp atau layanan pesan instan lainnya
penting untuk melindungi privasi dan keamanan pengguna serta mencegah
akses tidak sah ke akun pengguna. Selain itu, autentikasi yang baik juga dapat
membantu melawan risiko peretasan atau serangan keamanan.[14], [15]
e. Swagger

Dalam konteks web server dan pengembangan perangkat lunak,

"Swagger" sering kali merujuk pada Swagger UI, yang merupakan antarmuka
pengguna yang interaktif untuk menjelajahi dan menguji API RESTful. Swagger
UI memanfaatkan spesifikasi OpenAPI untuk menyajikan dokumentasi API
secara visual, memungkinkan pengembang dan pengguna API untuk dengan
mudah memahami endpoint-endpoint yang tersedia, parameter yang
diperlukan, dan tanggapan yang diharapkan.
Berikut adalah beberapa poin terkait Swagger dalam pengembangan web
server:
1. OpenAPI Specification (OAS): Swagger dalam pengembangan web server
sering kali berhubungan dengan OpenAPI Specification. OpenAPI
Specification adalah standar untuk mendefinisikan API RESTful. Ini
menyediakan cara untuk mendeskripsikan struktur dan operasi dari API,
termasuk endpoint, parameter, dan tanggapan.

20
 2. Swagger UI: Swagger UI adalah antarmuka web yang secara otomatis
dihasilkan dari spesifikasi OpenAPI. Ini memungkinkan pengguna untuk
menjelajahi API, menguji endpoint, dan melihat dokumentasi API dengan
cara yang interaktif dan mudah dimengerti.
3. Dokumentasi Otomatis: Dengan menggunakan Swagger UI, pengembang
dapat menyajikan dokumentasi API secara otomatis, mempercepat proses
pengembangan dan memudahkan penggunaan API oleh pengembang lain.
4. Pengujian API: Swagger UI juga memungkinkan pengujian langsung dari
antarmuka pengguna, memungkinkan pengembang mengirim permintaan
API dan melihat tanggapan dengan mudah.
5. Integrasi dengan Framework Web: Banyak framework web modern
mendukung integrasi dengan Swagger. Pengembang dapat menggunakan
anotasi atau konfigurasi khusus untuk menghasilkan spesifikasi OpenAPI
yang otomatis dan mengintegrasikannya dengan Swagger UI.
Dengan menggunakan Swagger dalam pengembangan web server,
pengembang dapat meningkatkan dokumentasi, memfasilitasi pengujian, dan
memperbaiki penggunaan API secara keseluruhan.

BAB IV
PERANGKAT PENDUKUNG
APLIKASI

A. CARA MENGINSTAL LARAVEL

Berikut adalah panduan cara menginstal Laravel di PC:

• Langkah 1: Persiapkan Prasyarat Sebelum menginstal Laravel, pastikan PC

sudah terinstal PHP, Composer, dan beberapa ekstensi PHP yang
diperlukan. bisa mengunduh PHP dari situs resmi PHP (PHP.net) dan
Composer dari getComposer.org.

21
• Langkah 2: Install Composer Jika Composer belum terinstal, unduh dan
instal Composer dari situs resminya. Setelah instalasi selesai, pastikan
dapat menjalankan perintah Composer melalui terminal atau Command
Prompt.
• Langkah 3: Instal Laravel Menggunakan Composer Buka terminal atau
Command Prompt dan jalankan perintah berikut untuk membuat proyek
Laravel baru:

Gantilah "nama-proyek" dengan nama yang inginkan untuk proyek Laravel.

• Langkah 4: Akses Direktori Proyek Masuk ke direktori proyek baru yang
telah dibuat:

• Langkah 5: Konfigurasi .env Duplikat file .env.example dan beri nama baru
menjadi .env. Buka file tersebut dan sesuaikan konfigurasi database dan
pengaturan lainnya sesuai kebutuhan.
• Langkah 6: Generate Key Aplikasi Jalankan perintah berikut untuk
menghasilkan kunci aplikasi Laravel:

• Langkah 7: Jalankan Server Pembangunan Gunakan perintah berikut untuk

menjalankan server pembangunan Laravel:

• Langkah 8: Akses Aplikasi Buka browser dan akses http://localhost:8000

(atau sesuai dengan port yang ditampilkan setelah menjalankan perintah

22
 sebelumnya).sekarang seharusnya dapat melihat halaman selamat datang
Laravel.
B. CARA MENGINSTAL VUE JS
Berikut adalah panduan langkah demi langkah cara menginstal Vue.js di PC:
Pilih sistem operasi Windows 32 atau 64-bit saat mengunduh file penginstal
Node JS. Setelah Anda mengklik salah satunya, tunggu hingga pengunduhan
selesai.

Selanjutnya pastikan instalasi Node JS berhasil atau tidak. Menggunakan

cmd adalah metodenya. Untuk meluncurkan CMD, tekan tombol Windows dan
ketik cmd ke dalam bilah pencarian. Pilih Run as Administrator setelah
melakukan klik kanan pada aplikasi Command Prompt.

23
 Selanjutnya untuk memastikan instalasi Node JS berjalan dengan baik,
gunakan perintah berikut.
node -v
Jadi, gambar berikut adalah hasil operasi di atas.

Selama proses instalasi Vue JS, gunakan perintah berikut untuk

menghapus cache di CMD untuk mencegah kesalahan:
npm clean -force untuk cache
Output dari perintah tersebut akan muncul seperti yang ditunjukkan di
bawah ini.

Selanjutnya, jalankan perintah berikut untuk menginstal Vue JS.

Instal npm dengan -g @vue/cli
Pastikan Anda terhubung dengan jaringan internet selama proses
instalasi berlangsung. Karena file dari resource Vue JS di Node JS
harus diunduh untuk menyelesaikan prosedur instalasi. Tunggu
hingga instalasi selesai, seperti terlihat pada contoh gambar di bawah

Setelah mengetahui bahwa instalasi Vue JS telah selesai ketika mencoba

membangun proyek dengan menggunakannya segera. Arahkan ke direktori
tempat proyek Vue JS ingin disimpan terlebih dahulu. Gunakan direktori Disk
Lokal (D) dalam panduan ini.

24
Selanjutnya, cukup ketikkan perintah berikut ke dalam Command Prompt untuk
memulai proyek Vue JS baru. Folder yang berisi proyek Vue JS disebut proyek
saya. lihat buat proyek saya

Setelah itu, Vue CLI akan meminta Anda untuk memilih opsi instalasi. Opsi
default dan manual adalah dua yang tersedia. Kami menggunakan pengaturan
default dalam panduan ini. Karena untuk mengupdate parameter proyek sesuai
Vue JS. Selanjutnya, tekan ENTER.

Proses pembuatan proyek kemudian akan dimulai. Tunggu sampai proses

ini selesai. Notifikasi “Proyek berhasil dibuat “proyeksaya”” akan muncul
jika proses pembuatan proyek berhasil.

Buka direktori proyek setelah itu. Ketika instalasi selesai, ikuti instruksi yang
diberikan. Gunakan perintah panduan ini.

cd proyek saya

Setelah Anda berada di direktori proyek, gunakan perintah berikut untuk

meluncurkan Vue JS:

npm run servis

25
Output dari perintah di atas akan terlihat seperti ini.

Terakhir, luncurkan browser dan buka salah satu alamat IP atau localhost
yang ditunjukkan pada ilustrasi sebelumnya. Setelah itu, Vue JS akan
memberi Anda tampilan halaman.

C. CARA INSTALL VISUAL STUDIO CODE

Berikut cara install Visual Studio Code (VS Code) di PC langkah demi
langkah:
Dapatkan Kode Visual Studio di sini. Luncurkan browser web dan buka
https://code.visualstudio.com/ untuk melihat situs web resmi Visual Studio
Code. Klik tombol "Unduh untuk Windows" (atau pilih opsi yang sesuai
berdasarkan sistem operasi Anda) di halaman utama.

26
 Lanjutkan prosedur instalasi setelah pengunduhan berhasil.
File penginstal dapat diklik dua kali, atau Anda dapat mengklik kanan
dan memilih Jalankan sebagai Administrator. Silakan pilih Yes jika
muncul peringatan Run as Administrator. Klik Berikutnya setelah
memilih "Saya menerima perjanjian" untuk menyetujui "Perjanjian
Lisensi".

Jika lokasi pemasangan tidak diubah, dapat membiarkannya saat memilih

lokasi tujuan. Pilih Berikutnya..

27
Jika Folder Start Menu tidak diubah, klik Next sekali lagi.

Centang semuanya di bawah kotak "Pilih Tugas Tambahan". Selanjutnya.

28
Selanjutnya untuk memulai proses instalasi, klik Install.

Tunggu sampai instalasi selesai..

29
Klik Selesai setelah selesai.

30
D. CARA INSTALL XAMPP
Berikut ini adalah tutorial langkah demi langkah untuk menginstal XAMPP di PC:
Dapatkan XAMPP di sini. Luncurkan browser web dan navigasikan ke
https://www.apachefriends.org/index.html, situs web resmi XAMPP. Situs web
akan menunjukkan versi XAMPP mana yang kompatibel dengan sistem operasi
Anda (Windows, macOS, atau Linux). Untuk memulai pengunduhan, klik tombol
"Unduh".

Teknik ini terkadang menghasilkan pesan kesalahan. Jika ada, klik YES dan OK
untuk melanjutkan dan mengabaikannya.

Biasanya pada titik ini, muncul permintaan untuk mengakhiri semua aplikasi
yang terbuka. Setelah setiap program ditutup, pilih opsi Berikutnya..

31
Anda akan diminta untuk memilih aplikasi yang ingin Anda instal saat ini. Cukup
pilih setiap opsi, lalu tekan tombol Berikutnya.

Pastikan masih ada cukup ruang pada hard drive atau disk tempat Xampp
diinstal.

32
Pilih bahasa yang di sukai, lalu tekan Berikutnya..

Ketika siap untuk memulai prosedur instalasi Xampp, klik Berikutnya.

33
Instalasi XAMPP selesai. Setelah itu, klik tombol Selesai untuk
menyelesaikannya jika jendela popup seperti di bawah ini muncul. Selain itu,
akan muncul pilihan apakah akan segera memulai perangkat lunak XAMPP. Jika
demikian, pilih pilihan dan tekan FINISH.

34
35
 BAB V
PEMBUATAN APLIKASI

Jika Anda ingin membuat antarmuka pengguna (UI) front-end untuk ledakan
Whatsapp Autosender, Anda dapat menggunakan HTML, CSS , dan JavaScript
untuk pengembangan sisi klien. Di bawah ini adalah contoh sederhana untuk
membantu Anda memulai.

A. Frontend
1. HTML dan CSS :
• Buat struktur dasar HTML untuk halaman web,.
• Desain tata letak dan tampilan dengan menggunakan CSS .
• Pertimbangkan penggunaan framework CSS seperti Bootstrap atau
Tailwind CSS untuk mempercepat pengembangan.

B. Backend
1. Pilih Stack Teknologi: Pilih teknologi backend yang sesuai.
2. Buat Server: Inisialisasi server backend menggunakan framework atau
library yang Anda pilih.
3. Endpoints API:Tentukan endpoints API untuk berkomunikasi antara
frontend dan backend. Misalnya, endpoint untuk menerima pesan dari
frontend dan mengirimnya ke layanan Whatsapp.
4. Integrasi dengan Whatsapp API: Dapatkan akses ke API Whatsapp Business
atau layanan Whatsapp Gateway tertentu. Gunakan API tersebut untuk
mengirim dan menerima pesan Whatsapp.

C. Integrasi Whatsapp API:

1. Daftar dan Dapatkan API Key:
• Daftar ke layanan Whatsapp API yang Anda pilih.
• Dapatkan kunci API yang diperlukan untuk mengakses layanan tersebut.

36
2. Konfigurasi API Key: Konfigurasikan API Key pada backend Anda agar dapat
berkomunikasi dengan layanan Whatsapp.
3. Sambungkan ke swagger: masukkan nomor whatsApp yang akan di
sambungkan

4. Memasukkan link di hosting : membuat hosting terlebih dahulu kemudian

hapus link dan ganti link dengan yang baru yang di kirimkan melalui
WhatsApp

5. Setelah itu aplikasi akan tersambung ke dalam WhatsApp

37
D. INTERFACE
Impelementasi sistem memiliki bagian berupa pemaparan mengenai
tampilan pada sistem serta kegunaan dari setiap halaman.
a. Halaman Utama
Dihalaman ini terdapat form login untuk pengguna atau admin untuk
selanjutnya di arahkan kepada dashboard.

b. Halaman Manage Satuan

Dihalaman ini admin akan di tampilkan data satuan dan bisa menghapus
juga dapat mengedit dan insert.

c. Halaman Manage Kategori

Dihalaman ini admin akan ditampilkan data dari kategori dan admin dapat
menghapus mengedit dan juga insert data dan juga dapat mensortir data
terbaru dan terlama

38
d. Halaman Manage Produk
Di laman ini, administrator memiliki kemampuan untuk melakukan
penghapusan, pengeditan, dan penambahan data produk. Selain itu, terdapat
opsi penyortiran, seperti pengurutan berdasarkan data terbaru dan data
terlama

e. Halaman Transaksi
Dimenu ini admin dapat menambahkan transaksi baru, dan table transaksi
ini juga teritegrasi dengan table produk dll sehingga admin dapat memilih
produk untuk dimasukan kedalam transaksi

39
 Kemudian setelah melakukan transaksi aplikasi akan mengirim riwayat
transaksi melalui WhatsApp.

f. Halaman Manage Stock

Dihalaman ini admin dapat memanage stok yang telah terintegrasi dengan
tabel produk sehingga admin dapat menghapus dan menambahkan stok
produk.

40
 g. Halaman Manage Riwayat

Dihalaman ini admin dapat melihat riwayat yang telah terjadi dari
transaksi dan juga admin dapat mensortir nya dan juga dapat mencetaknya
dalam bentuk pdf.

DAFTAR PUSTAKA

[1] R. Hermawan and A. Fauzi, “Perancangan Sistem Informasi Kasir

Penjualan Barang Berbasis Website Metode Spiral Toko Warna,” Jurnal
SIFO Mikroskil, vol. 22, no. 2, pp. 101–114, 2021.

41
[2] B. S. Prayogi, I. Fitri, and R. Nuraini, “Aplikasi Point of sale Berbasis
Website pada Toko Sembako Tegar,” Jurnal JTIK (Jurnal Teknologi
Informasi dan Komunikasi), vol. 6, no. 2, pp. 260–266, 2022.
[3] L. I. PURWANTINI and others, “Perancangan Strategi Bisnis Toko
Kelontong Model Offline to online (O2O) Menggunakan Framework
ICDT (Information, Communication, Distribution,
Transaction) Berbasis Mobile App,” FAKULTAS ILMU
KOMPUTER, 2019.
[4] E. U. M. S. Lubis, A. Zakir, and E. Hadinata, “Penerapan Aplikasi
ECommerce Berbasis Web Service (Studi Kasus Toko Sembako),”
ALGORITMA: JURNAL ILMU KOMPUTER DAN INFORMATIKA, vol. 6, no.
1, 2022.
[5] M. Tecuari and K. Yuliawan, “PERANCANGAN APLIKASI PENDATAAN
SEMBAKO BERBASIS WEB MENGGUNAKAN METODE RAD,” JATI (Jurnal
Mahasiswa Teknik Informatika), vol. 7, no. 2, pp. 1237–1241, 2023.
[6] M. A. Mukhti and M. Malabay, “Rancang Bangun Sistem Informasi
Sembako Online Berbasis Web dengan Layanan Berbasis Lokasi Studi
Kasus: Agen Sembako H. Nasril,” in Prosiding Seminar Nasional
Penelitian LPPM UMJ, 2022.
[7] T. M. Haekal, “APLIKASI PENJUALAN BERBASIS WEB DI TOKO SEMBAKO
INDUNG MAYANG MARTAPURA,” Universitas Islam Kalimantan MAB,
2021.
[8] S. Rahmatullah, “SISTEM INFORMASI PENJUALAN SEMBAKO PADA
TOKO BAPAK NASRUL BERBASIS WEB,” Jurnal Informatika Software
dan Network (JISN), vol. 4, no. 1, pp. 1–6, 2023.
[9] V. Nevarika, D. S. Rusdianto, and E. Santoso, “Pembangunan Sistem
Pengelolaan Toko Sembako berbasis Web (Studi Kasus: Toko Berkat
Kembar),” Jurnal Pengembangan Teknologi Informasi dan Ilmu
Komputer, vol. 7, no. 5, pp. 2358–2365, 2023.
[10] A. Budiyanto, “Perancangan Aplikasi Pembukuan Keuangan Warung
Sembako Jakarta Timur Berbasis Manajemen Keuangan dengan
Android,” Jurnal Esensi Infokom: Jurnal Esensi Sistem Informasi dan
Sistem Komputer, vol. 7, no. 1, pp. 90–94, 2023.

42
[11] D. Alfandi, “PENGEMBANGAN APLIKASI KASIR PADA TOKO ANEKA JAYA
BERBASIS WEBSITE,” Politeknik Negeri Media Kreatif, 2022.
[12] E. U. M. S. Lubis, A. Zakir, and E. Hadinata, “Penerapan Aplikasi
ECommerce Berbasis Web Service (Studi Kasus Toko Sembako),”
ALGORITMA: JURNAL ILMU KOMPUTER DAN INFORMATIKA, vol. 6, no.
1, 2022.
[13] N. Azwani, “PENGEMBANGAN APLIKASI PENJUALAN BERBASIS
ECOMMERCE PADA TOKO SEMBAKO ASIONG MENGGUNAKAN MODEL
FAST,” ISB ATMA LUHUR, 2020.
[14] M. R. Julianti, Z. Hakim, and T. Ardiyan, “Aplikasi Pedagang Sembako
Online Berbasi Android,”Academic Journal of Computer Science
Research, vol. 3, no. 1, 2021.
[15] M. I. Maliki, “Rancang Bangun Aplikasi Penjualan Grosir Sembako
Pada Toko LA-RIS,” Jurnal Informatika Dan Rekayasa Perangkat Lunak,
vol.
2, no. 3, pp. 304–311, 2021.

GLOSARIUM
A
43
Admin: Admin atau administrasi adalah orang yang memiliki tugas untuk
melakukan tata kelola administrasi aplikasi web warung sembako. Seorang
admin bertanggung jawab mengatur dan memastikan sistem aplikasi berfungsi
dengan baik

Aplikasi: Aplikasi adalah program yang dibuat oleh pemakai yang ditujukan
untuk melakukan suatu tugas khusus

Barang: Produk atau item yang dijual di warung sembako, bisa berupa bahan
makanan pokok, kebutuhan sehari-hari, atau lainnya

Database: Kumpulan data yang terorganisir berisi informasi tentang stok,

harga, dan jenis barang yang tersedia di warung sembako dan dapat diakses
melalui aplikasi web.

44
Hardware: Semua jenis piranti atau komponen komputer yang bagian fisiknya
dapat dilihat secara kasat mata dan dirasakan langsung

Informasi : Detail atau data mengenai produk yang dijual, termasuk harga,
jumlah stok, dan deskripsi barang.

Internet : sebuah sistem komunikasi global yang menghubungkan

komputerkomputer dan jaringan-jaringan komputer diseluruh dunia

Online : perangkat elektronik yang terhubung ke jaringan internet

P
PHP : bahasa skrip dengan fungsi umum yang terutama digunakan untuk
pengembangan web.
45
Pembayaran : Proses transaksi keuangan yang dilakukan oleh pelanggan setelah
memilih barang yang ingin dibeli melalui aplikasi web.

System : Kumpulan modul dan fitur dalam aplikasi web yang bekerja secara
terintegrasi untuk menyediakan layanan kepada pengguna.

Software : Perangkat lunak yang digunakan untuk mengembangkan dan

menjalankan aplikasi web warung sembako.

Stok : Ketersediaan jumlah barang di warung sembako yang dapat dilihat dan
diperbarui melalui aplikasi web.

Transaksi : Proses jual beli barang yang terjadi melalui aplikasi web, mulai dari
pemilihan barang hingga pembayaran.

46
X

KREDIT GAMBAR
Halaman ini memuat daftar kepemilikan hak cipta/perizinan penggunaan
gambar/foto berikut nomor halaman keberadaan gambar/foto tersebut.

47
 INDEKS
A
Abraham Maslow 35 Adaptasi karakteristik 29 Adversity intelligence 6 Adversity
quotient 11, 17, 61,
66, 73, 74
Affective commitment 57
Aktualisasi diri 36
Akuntan 36
Altruism 13
Amerika Serikat 23
Availability of alternative jobs
56

B
Bakat 64
Bakat seni 29
Bali 12
Bank 10
Basic tendencies 29 Budaya perusahaan 4

C
Civic virtue 13
CO2RE 66
Conscientiousness 13
Continuance commitment 57

D
Digital Generation 23

E
Edwin Locke 39
Emotional Quotient (EQ) 17
Endurance 67
Eropa 24

48
Etika kerja 26

TENTANG PENULIS

PENULIS 1: Fauziah Henni Hasibuan, lahir di Medan pada tahun 2001. Menyelesaikan pendidikan
mulai dari sekolah dasar hingga menengah atas di Medan. Sekarang tengah
menempuh studi Sarjana Terapan semester 5 di Universitas Logistik dan Bisnis
Internasional Fakultas Vokasi Jurusan Teknik Informatika

PENULIS 2: Hilal Fakhri Dzakwan, lahir di kota Manna pada tahun 2002. Menyelesaikan
Pendidikan SMA di Yogyakarta. Dan sekarang tengah menempuh studi Sarjana Terapan
semester 5 di Universitas Logistik dan Bisnis Internasional Fakultas Vokasi Jurusan
Teknik Informatika

PENULIS 3: Mohammad Nurkamal Fauzan obtained a Masters in Information Technology from ITB
in 2011. He has been a Lecturer at the Department of Informatics Engineering, Pos
Indonesia Polytechnic, since 2011. His current research interests include Internet of
Things and machine learning. https://orcid.org/0000-

897Xhttps://2.bp.blogspot.com/joAB_eLEXkI/WgkHKsxwF0I/AAAAAAABDxI/lbVr
Jv9QL2s eAKVfHFLTU3BS10NHAcBqwCLcBGAs/s200/kamal.png

49
Melihat berbagai contoh sinopsis buku mungkin terlihat mudah
untuk dipraktekan langsung. Supaya memang terasa sangat mudah
maka kamu perlu memahami sinopsis buku dengan mendalam. Bisa
dimulai dari pengertiannya terlebih dahulu. Sinopsis buku diketahui
merupakan ringkasan suatu buku yang ditulis dalam bentuk narasi.
Bentuknya yang berupa ringkasan kemudian sering disalah artikan
sebagai resensi. Tentunya antara sinopsis dan resensi adalah dua hal
yang berbeda. Resensi juga berupa ringkasan yang condongah ke ar
ulasan, sehingga di dalamnya terdapat pemaparan kelebihan dan
kekurangan buku. Sedangkan sinopsis murni berisi ringkasan dari isi
suatu buku, sehingga tidak ada unsur kelebihan dan kekurangan di
dalamnya. Sebagai ringkasan, sinopsis kemudian perlui detail
beris
alur cerita dan konflik di dalam buku yang disampaikan sekilas.
Selain itu, perlu diberi bumbu untuk menciptakan rasa tertarik dan
penasaran bagi para pembaca.