Daftar Isi

Daftar Isi................................................................................................................................................

BAB I....................................................................................................................................................

PENDAHULUAN.................................................................................................................................

1.1 Latar Belakang Masalah........................................................................................................

1.2 Batasan Masalah..........................................................................................................................

1.3 Tujuan Penelitian.........................................................................................................................

1.4 Metode Penelitian........................................................................................................................

1.5 Sistematika Penulisan..................................................................................................................

BAB II...................................................................................................................................................

TINJAUAN PUSTAKA........................................................................................................................

2.1 XAMPP.................................................................................................................................

2.2 PHP........................................................................................................................................

2.3 MYSQL.................................................................................................................................

2.4 SDLC Software Development Life Cycle)............................................................................

2.5 CSS........................................................................................................................................

2.6 JAVA SCRIPT......................................................................................................................

2.7 HTML....................................................................................................................................

2.8 UML......................................................................................................................................

2.8.1Use Case Diagram.................................................................................................................

2.8.2Activity Diagram.................................................................................................................

2.8.3 Class Diagram....................................................................................................................

2.9 Struktur Navigasi.................................................................................................................

2.9.1 Struktur Navigasi Linear.....................................................................................................

i
 2.9.2 Struktur Navigasi Hirarki....................................................................................................

2.9.3 Struktur Navigasi Non-Linear.............................................................................................

2.9.4 Struktur Navigasi Composite (Campuran)..........................................................................

BAB III................................................................................................................................................

PERANCANGAN DAN IMPLEMENTASI.......................................................................................

3.1 Tahap Perencanaan....................................................................................................................

3.2 Tahap Analisis.....................................................................................................................

3.2.1 Analisis Kebutuhan Hardware....................................................................................

3.2.2 Analisis Kebutuhan Software......................................................................................

3.3 Rancangan Unified Modeling Language (UML).......................................................................

3.3.1 Use Case Diagram..............................................................................................................

3.3.2 Activity Diagram................................................................................................................

3.4 Perancangan Database...............................................................................................................

3.5 Rancangan Struktur Navigasi...............................................................................................

3.5.1 Struktur Navigasi Pelanggan...............................................................................................

3.5.2 Struktur Navigasi Admin.............................................................................................

3.6 Rancangan Program...................................................................................................................

3.6.1 Rancangan Halaman Admin...............................................................................................

3.6.2 Rancangan Halaman Pelanggan..........................................................................................

3.7 Implementasi.............................................................................................................................

3.7.1Hasil Tampilan Interface Admin..........................................................................................

3.7.2 Hasil Tampilan Interface Pelanggan..................................................................................

3.8 Uji Performa WebSite..........................................................................................................

ii
 Daftar Gambar
Gambar 2. 1 Contoh Use Case Diagram..............................................................................................
Gambar 2. 2 Contoh Activity Diagram................................................................................................
Gambar 2. 3 Contoh Class Diagram....................................................................................................
Gambar 2. 4 Contoh Navigasi..............................................................................................................
Gambar 2. 5 Contoh Navigasi Hirarki.................................................................................................
Gambar 2. 6 Contoh Navigasi Non-Linear..........................................................................................
Gambar 2. 7 Contoh Navigasi Campuran............................................................................................

Gambar 3. 1 Use Case Diagram Admin...............................................................................................

Gambar 3. 2 Use Case Diagram User..................................................................................................
Gambar 3. 3 Activity Diagram User KiaPetShop................................................................................
Gambar 3. 4 Activity Diagram Admin KiaPetShop.............................................................................
Gambar 3. 5 XAMPP...........................................................................................................................
Gambar 3. 6 Membuat Database..........................................................................................................
Gambar 3. 7 Daftar table.....................................................................................................................
Gambar 3. 8 Table Brand.....................................................................................................................
Gambar 3. 9 Table Categories.............................................................................................................
Gambar 3. 10 Table Counter................................................................................................................
Gambar 3. 11 Table Items...................................................................................................................
Gambar 3. 12 Table Members.............................................................................................................
Gambar 3. 13 Table Oders...................................................................................................................
Gambar 3. 14 Table Oder Detail..........................................................................................................
Gambar 3. 15 Table SubCategori.........................................................................................................
Gambar 3. 16 Table User.....................................................................................................................
Gambar 3. 17 Struktur Navigasi Pelanggan.........................................................................................
Gambar 3. 18 Struktur Navigasi Admin..............................................................................................
Gambar 3. 19 Folder htdocs xampp.....................................................................................................
Gambar 3. 20 Rancangan Halaman Login Admin...............................................................................
Gambar 3. 21 Rancangan Halaman Home Admin...............................................................................
Gambar 3. 22 Rancangan Halaman Pesanan Admin............................................................................
Gambar 3. 23 Rancangan halaman Produk Brand...............................................................................
Gambar 3. 24 Rancangan Halaman Produk Kategori..........................................................................

iii
Gambar 3. 25 Rancangan Halaman Produk SubKategori....................................................................
Gambar 3. 26 Rancangan Halaman Data Produk.................................................................................
Gambar 3. 27 Rancangan Halaman Laporan Data Produk...................................................................
Gambar 3. 28 Rancangan Halaman Laporan Data Produk Berdasarkan Kategori dan
SubKategori.........................................................................................................................................
Gambar 3. 29 Rancangan Halaman Laporan Data Pemesanan............................................................
Gambar 3. 30 Rancangan Halaman Laporan Data Pemesanan Berdasarkan Tanggal..........................
Gambar 3. 31 Rancangan Halaman Daftar Kontak Pelanggan.............................................................
Gambar 3. 32 Rancangan Halaman Daftar..........................................................................................
Gambar 3. 33 Rancangan Halaman Masuk/Login...............................................................................
Gambar 3. 34 Rancangan Halaman Dashboard...................................................................................
Gambar 3. 35 Rancangan Halaman Makanan Kucing.........................................................................
Gambar 3. 36 Rancangan Halaman pasir Kucing................................................................................
Gambar 3. 37 Rancangan Halaman Litter Box....................................................................................
Gambar 3. 38 Rancangan Halaman Brand...........................................................................................
Gambar 3. 39 Rancangan Halaman Keranjang....................................................................................
Gambar 3. 40 Rancangan Halaman Konfirmasi Pembayaran..............................................................
Gambar 3. 41 Rancangan Halaman Bukti Pembayaran.......................................................................
Gambar 3. 42 Tampilan Login.............................................................................................................
Gambar 3. 43 Tampilan Dashboard.....................................................................................................
Gambar 3. 44 Tampilan Admin...........................................................................................................
Gambar 3. 45 Tampilan Brand............................................................................................................
Gambar 3. 46 Tampilan Kategori........................................................................................................
Gambar 3. 47 Tampilan SubKategori..................................................................................................
Gambar 3. 48 Tampilan Data Produk..................................................................................................
Gambar 3. 49 Tampilan Laporan Data Produk....................................................................................
Gambar 3. 50 Tampilan Laporan Data Produk Berdasarkan Kategori dan SubKategori.....................
Gambar 3. 51 Tampilan Laporan Data Pemesanan..............................................................................
Gambar 3. 52 Tampilan Laporan Pemesanan Berdasarkan Tanggal....................................................
Gambar 3. 53 Tampilan Daftar Kontak Pelanggan..............................................................................
Gambar 3. 54 Tampilan Daftar............................................................................................................
Gambar 3. 55 Tampilan Login.............................................................................................................
Gambar 3. 56 Tampilan Dashboard.....................................................................................................
Gambar 3. 57 Tampilan Makanan Kucing...........................................................................................

iv
Gambar 3. 58 Tampilan Pasir kucing...................................................................................................
Gambar 3. 59 Tampilan Litter Box......................................................................................................
Gambar 3. 60 Tampilan Brand............................................................................................................
Gambar 3. 61 Tampilan Keranjang......................................................................................................
Gambar 3. 62 Tampilan Konfirmasi Pembayaran................................................................................
Gambar 3. 63 Tampilan Bukti.............................................................................................................

v
 Daftar Tabel
Tabel 2. 1 Use Case Diagram..............................................................................................................
Tabel 2. 2 Simbol Simbol Activity Diagram.......................................................................................
Tabel 2. 3 Simbol-Simbol Class Diagram............................................................................................

Tabel 3. 1 Uji Performa WebSite.........................................................................................................

vi
 BAB I
PENDAHULUAN
1.1 Latar Belakang Masalah
Perkembangan teknologi informasi yang sangat cepat telah
menjadi pendukung utama untuk memperoleh informasi dengan
cara mudah dan cepat. Hal tersebut menjadi perhatian bagi
perusahaan kelas menengah seperti PetZone untuk meningkatkan
pemasaran dan pelayanan, guna menarik pelanggan dan mengatasi
persaingan antar perusahaan sejenis yang bergerak dalam bidang
Pet Shop. Untuk mengatasi persaingan di dunia teknologi seperti
sekarang ini diperlukan sebuah Sistem Informasi untuk
meningkatkan penjualan, pelayanan dan pemasaran yang lebih luas
oleh sebuah perusahaan (Siska Fadilah. 2013).

Pet shop merupakan salah satu tempat untuk menjual

hewan, makanan hewan dan konsultasi pemeliharaan hewan.
Peralatan merupakan barang-barang yang cenderung wajib untuk
dimiliki oleh para pemilik seperti kandang hewan peliharaan. Pet
shop juga menjual berbagai jenis vitamin untuk Kesehatan hewan
(Friska Kumala. 2008).

Studi kasus yang menggunakan toko dengan nama pet shop

“KIA”. Pet shop “KIA” merupakan salah satu pet shop yang
terdapat di kota DEPOK di daerah Depok Timur. Saat ini pet shop
“KIA” melakukan transaksi penjualan hanya dengan cara
membuka toko, pet shop “KIA” masih belum banyak dikenal
masyarakat, dan pemilik dari pet shop “KIA” ini ingin
mengembangkan pet shop “KIA” agar menjadi lebih dikenal dan
lebih maju. Permasalah yang sudah disebutkan menjadi acuan
dalam membuat sistem informasi untuk pet shop “KIA”. Sistem

7
informasi pet shop “KIA” dibuat berbasis web, sehingga akan
mudah diakses bagi siapapun yang menggunakan internet. Sistem
informasi ini juga akan mempermudah penjualan peralatan dan
makanan pemeliharaan hewan, mempermudah cara perawatan
hewan, serta tersedia juga forum untuk melakukan konsultasi
melalui live chat.

1.2 Batasan Masalah

Pada aplikasi terdapat menu registrasi, login, pesanan, produk
manager, laporan. Pemesanan dan pembayaran. Penulisan ilmiah ini
dibatasi pada pembuatan website e-commerce penjualan makanan dan
perlengakapan hewan. Pembuatan web menggunakan pemrograman PHP dan
database MySql sebagai basis data yang terpadu dalam perangkat lunak
XAMPP, dengan metode perancangan secara terstruktur.

1.3 Tujuan Penelitian

Penelitian ini bertujuan untuk membuat aplikasi konsultasi
hewan peliharaan berbasis website, Merancang dan membangun e-
commerce berbasis web sebagai sarana transaksi jual-beli hewan dan
makanan secara online. Web yang sudah dibangun diharapkan dapat menjadi
sarana jual beli dan membantu memberikan kemudahan ke masyarakat dalam
melakukan transaksi khususnya dalam kondisi yang mengharuskan untuk
mengurangi aktivitas di luar rumah saat in.

1.4 Metode Penelitian

Metode penelitian yang digunakan pada Penulisan Ilmiah ini
adalah menggunakan pendekatan metode System Development Life
Cycle (SDLC). Tahapan SDLC (Samiaji Sarosa, 2017) yang dilakukan
sebagai berikut :

a. Tahap Perencanaan
Pada tahap ini, melakukan wawancara kepada pihak Petshop
guna mendapatkan informasi mengenai sistem yang berjalan

8
 kemudian mengidentifikasikan kebutuhan apa saja yang
dibutuhkan oleh Petshop.
b. Tahap Analisis
Pada tahap ini, aplikasi konsultasi hewan dapat berjalan sesuai
kemampuan pengguna dapat melakukan konsultasi dan melihat
informasi petshop.
c. Tahap Perancangan
Pada tahap ini, dilakukan perancangan aplikasi konsultasi
hewan. Perancangan aplikasi terdiri dari perancangan database,
struktur navigasi, dan tampilan aplikasi.
d. Tahap Implementasi
Tahapan ini menggunakan Visual Studio Code sebagai sarana
untuk mengimplementasikan rancangan program. XAMPP
digunakan untuk menampilkan output dari program yang ditulis
pada text editor Visual Studio Code.
e. Tahap Uji Coba
Pada tahap ini uji coba yang dilakukan adalah dengan
menjalankan program yang telah dibuat dengan berbagai
browser.

1.5 Sistematika Penulisan

Sistematika penulisan yang digunakan dalam pembuatan
aplikasi ini terdiri dari 4 bab yang masing-masing terdiri dari :

BAB I PENDAHULUAN
Mengemukakan dalam penulisan ini mengenai latar belakang,
ruang lingkup, tujuan penelitian, metode penelitian, dan sistematika
penulisan.

BAB II TINJAUAN PUSTAKA

9
 Menjelaskan tentang teori-teori pendukung seperti tools yang
digunakan serta penjelasan secara singkat mengenai bahasa
pemrograman yang dipakai.

BAB III ANALISIS DAN PEMBAHASAN

Menjelaskan mengenai pembuatan aplikasi web yang berisi
tahap perencanaan, spesifikasi software dan hardware, struktur UML,
4 rancangan database, struktur navigasi, rancangan tampilan aplikasi,
serta langkah pembuatan program.

BAB IV PENUTUP
Bab ini berisi Kesimpulan dari pembahasan yang telah
dikemukakan dalam bab sebelumnya dan saran yang sifatnya
mengarah kepada penyempurnaan dari apa yang telah disajikan dalam
tulisan ini.

10
 BAB II
TINJAUAN PUSTAKA

2.1 XAMPP
XAMPP adalah sebuah paket perangkat lunak (software) komputer yang sistem
penamaannya diambil dari akronim kata Apache, MySQL (dulu) / MariaDB (sekarang),
PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat pada awal kata berasal dari
istilah cross platform sebagai simbol bahwa aplikasi ini bisa dijalankan di empat sistem
operasi berbeda, seperti OS Linux, OS Windows, Mac OS, dan juga Solaris. Sejarah
mencatat, software XAMPP pertama kali dikembangkan oleh tim proyek bernama
Apache Friends dan sampai saat ini sudah masuk dalam rilis versi 7.3.9 yang bisa
didapatkan secara gratis dengan label (General Public License) GNU (Andy Nugroho.
2019).

2.2 PHP
PHP (PHypertext Preprocessor) adalah sebuah bahasa pemrograman server side
scripting yang bersifat open source. Sebagai sebuah scripting language, PHP menjalankan
instruksi pemrograman saat proses runtime. Hasil dari instruksi tentu akan berbeda
tergantung data yang diproses.

PHP merupakan bahasa pemrograman server-side, maka script dari PHP nantinya
akan diproses di server. Jenis server yang sering digunakan bersama dengan PHP antara
lain Apache, Nginx, dan LiteSpeed. Selain itu, PHP juga merupakan bahasa
pemrograman yang bersifat open source. Pengguna bebas memodifikasi dan
mengembangkan sesuai dengan kebutuhan mereka (Salma Awabin. 2020).

2.3 MYSQL
MySQL adalah sebuah DBMS (Database Management System) menggunakan
perintah SQL (Structured Query Language) yang banyak digunakan saat ini dalam
pembuatan aplikasi berbasis website. MySQL dibagi menjadi dua lisensi, pertama adalah
Free Software dimana perangkat lunak dapat diakses oleh siapa saja. Dan kedua adalah
Shareware dimana perangkat lunak berpemilik memiliki batasan dalam penggunaannya.

MySQL termasuk ke dalam RDBMS (Relational Database Management System).

Sehingga, menggunakan tabel, kolom, baris, di dalam struktur database -nya. Jadi, dalam

11
proses pengambilan data menggunakan metode relational database. Dan juga menjadi
penghubung antara perangkat lunak dan database server (Muhammad Robith Adani.
2020).

2.4 SDLC Software Development Life Cycle)

SDLC (Software Development Life Cycle) adalah kerangka kerja atau model
manajemen proyek terstruktur yang menguraikan fase-fase yang diperlukan untuk
membangun sistem TI, dari awal hingga hasil akhir. Tujuan dari Software Development
Life Cycle adalah untuk menciptakan proses produksi yang efektif dan berkualitas tinggi
agar dapat memenuhi atau melampaui harapan klien sesuai dengan anggaran dan jadwal
yang telah ditentukan.

Kerangka kerja ini sudah banyak digunakan oleh berbagai perusahaan IT baik itu
perusahaan besar ataupun kecil. Dengan tetap patuh terhadap kerangka kerja SDLC ini,
maka perusahaan dapat mempercepat proses pengembangan dan meminimalkan risiko
proyek terkait waktu dan biaya yang diperlukan (Feradhita. 2021).

2.5 CSS

CSS adalah kepanjangaan dari Cascading Style Sheets yang berguna untuk
menyederhanakan proses pembuatan website dengan mengatur elemen yang
tertulis di bahasa markup. CSS dipakai untuk mendesain halaman depan atau
tampilan website (front end). CSS menangani tampilan dan ‘rasa’ dari halaman
website.

Ada banyak hal yang dapat Anda lakukan menggunakan CSS

dibandingkan dengan bahasa pemrograman inti seperti HTML dan PHP. Ketika
menggunakan CSS, Anda dapat mengatur warna teks, jenis font, baris antar
paragraf, ukuran kolom, dan jenis background yang dipakai.

Tidak hanya itu CSS juga bisa untuk mendesain layout, variasi tampilan di
berbagai perangkat yang berbeda, dan berbagai efek yang dipakai di dalam
website. CSS sangat mudah dipelajari, tapi juga powerful karena dapat

12
mengontrol penyajian tampilan dari dokumen HTML. Mulai dari yang simpel
sampai kompleks. Tidak heran jika saat ini CSS hampir dipakai di berbagai
website untuk dikombinasikan dengan HTML maupun PHP (YasinK. 2020).

2.6 JAVA SCRIPT

JavaScript adalah suatu bahasa kode atau pemrograman yang digunakan untuk
menciptakan sekaligus mengendalikan konten website agar menjadi dinamis. Contoh
konten situs yang dinamis adalah apa pun yang dapat bergerak atau mengubah apa pun
yang tampak di layar tanpa mengharuskan Anda memuat ulang laman situs tersebut
secara manual. Beberapa fitur yang dapat membuat situs menjadi dinamis (dan tentunya
membutuhkan bahasa pemrograman) di antaranya adalah gambar animasi, slideshow
foto, saran pengisian teks otomatis, form otomatis, dan banyak lagi. Jadi, di balik semua
animasi interaktif dan form otomatis pada di suatu situs, ada kumpulan rumus bahasa
pemrograman seperti JavaScript (Rian Romadhon. 2021).

2.7 HTML

HTML adalah Hypertext Markup Languange. HTML merupakan bahasa mark up

yang mudah untuk dipahami oleh pengguna. HTML dapat memudahkan user pemula
ataupun developer dalam memformat, menyusun, serta mengorganisir suatu dokumen
secara online menggunakan program Microsoft Word.

HTML berfungsi untuk memudahkan pengguna saat mengelola atau mengatur

sebuah data dalam bentuk dokumen pada website. Sehingga menghasilkan dokumen yang
menarik dan mudah dibaca oleh seluruh pengguna internet di seluruh dunia. HTML
mempunyai kelebihan dari bahasa yang digunakan. Bahasa mark up untuk HTML
mempunyai banyak sumber dan luas serta konsisten.

HTML dapat dijalankan secara alami pada setiap website. HTML juga
mempunyai learning curve yang lebih mudah serta open source yang dapat dijalankan
dengan gratis. Selain itu, HTML pun mempunyai standar website yang resmi oleh World
Wide Web Consortium pada maintain. Serta mudah diintegrasikan dengan PHP, Node.js
bahkan hingga bahasa backend.

13
 HTML mempunyai fitur yang tidak bisa digunakan secara logic. Sehingga
halaman website harus dipisahkan meski mempunyai elemen yang sama. Saat melakukan
eksekusi, browser juga kadang tidak bisa diprediksi. Sehingga browser tidak bisa render
yang lebih baru. Namun, Anda masih bisa menggunakan HTML sesuai kebutuhan (Andy
Nugroho. 2019).

2.8 UML

Unfield Modelling Languege (UML) adalah sebuah bahasa yang telah

menjadi standar dalam industri untuk visualisasi, merancang dan
mendokumentasikan sistem perangkat lunak. UML menawarkan sebuah standar
untuk merancang model sebuah sistem. Dalam menggunakan UML dapat
membuat model untuk beberapa jenis aplikasi, dimana aplikasi tersebut dapat
berjalan pada perangkat keras, sistem operasi dan jaringan apapun (Arismanto, B.,
& Rahmadhani, S. 2019).

2.8.1 Use Case Diagram

Use Case Diagram digunakan untuk mengidentifikasi elemen utama

dan proses yang membangun sistem. Elemen utama disebut "aktor" dan
proses disebut "use case". Diagram use case menunjukkan aktor mana
yang berinteraksi dengan setiap use case. Berikut contohnya pada Gambar
2.2 dan simbol-simbol yang digunakan pada use case diagram Tabel 2.2.

14
 Gambar 2. 1 Contoh Use Case Diagram

(https://badoystudio.com/contoh-use-
case//)

Tabel 2. 1 Use Case Diagram

Simbol Nama Keterangan

Actor Menspesifikasikan himpunan peran
yang pengguna mainkan ketika
berinteraksi dengan use case.
Asosiasi/Association Mengguhungkan antara objek satu
dengan

objek yang lainnya

Menggunakan/Include Relasi use case tambahan ke sebuah
use case dimana use case yang
ditambahkan memerlukan use case
ini untuk menjalankan fungsional
atau sebagai syarat dijalankan use

15
 case ini.
Use Case Deskripsi dari urutan aksi-
aksi yang ditampilkan sistem
yang menghasilkan suatu
hasil yang terstruktur bagi suatu
aktor
Dependency Hubungan dimana perubahan yang
terjadi pada suatu elemen mandiri
(independent) akan mempengaruhi
elemen yang bergantung padanya
elemen yang tidak
mandiri (independent).

2.8.2 Activity Diagram

Activity diagram menangkap aliran proses di sistem. Mirip dengan

diagram state, sebuah diagram activity juga terdiri dari aktivitas, aksi,
transaksi, kondisi awal dan akhir. Berikut contohnya activity diagram pada
Gambar 2.4 dan simbol-simbol yang digunakan pada activity diagram pada
Tabel 2.4.

Gambar 2. 2 Contoh Activity Diagram

16
 (http://www.waskhas.com/2020/03/pengertian-
activity-diagram.html)

Tabel 2. 2 Simbol Simbol Activity Diagram

Gambar Nama Keterangan

Activity Memperlihatkan masing-
masing kelas
antarmuka saling berinteraksi satu
sama lain
Action State dari sistem yang
mencerminkan eksekusi dari suatu
aksi
Initial Objek yang dibentuk atau diawali.
Node
Activity Bagaimana objek dibentuk dan
Final diakhiri
Node
2.8.3 Class Diagram
Class diagram digunakan untuk memperjelas diagram use case dan
mendefinisikan perancangan yang detail dari sistem. Diagram class
mengklasifikasikan actor yang telah didefinisikan pada diagram use case
menjadi himpunan kelas yang saling berhubungan. Hubungan atau asosiasi
antara kelas-kelas dapat berupa hubungan "is-a" atau "has-a". Setiap kelas
pada diagram class dapat menyediakan fungsionalitas tertentu.
Fungsionalitas yang disediakan kelas-kelas ini disebut "metode" dari kelas.
Setiap kelas memiliki "atribut" tertentu yang secara unik
mengidentifikasikan kelas tersebut. Berikut contohnya class diagram pada
Gambar 2.5 dan simbol-simbol yang digunakan pada class diagram pada

17
 Gambar 2. 3 Contoh Class Diagram
Tabel 2. 3 Simbol-Simbol Class Diagram

Gambar Nama Keterangan

Generalization Hubungan dimana objek anak
(descendent) berbagi perilaku dan
struktur data dari objek yang ada di
atasnya objek induk (ancestor).
Class Himpunan dari objek-objek yang
berbagi atribut serta operasi yang
sama.

Realization Operasi yang benar-benar dilakukan

oleh suatu objek.

18
 Dependency Hubungan dimana perubahan yang
terjadi pada suatu elemen mandiri
(independent) akan mempengaruhi
elemen yang bergantung padanya
elemen yang tidak mandiri

2.9 Struktur Navigasi

Struktur navigasi adalah struktur atau alur suatu program yang merupakan
rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat
membantu mengorganisasikan seluruh elemen pembuatan website. Menentukan
struktur navigasi merupakan halaman yang sebaiknya dilakukan sebelum
membuat suatu website. Ada empat macam bentuk dasar dari struktur navigasi
yang biasa digunakan dalam proses pembuatan website, yaitu: (R Hidayat, S
Marlina, LD Utami, 2017).

2.9.1 Struktur Navigasi Linear

Struktur navigasi linear hanya mempunyai satu rangkaian cerita

yang berurut, yang menampilkan satu demi satu tampilan layer secara
berurut menurut urutannya. Tampilan yang dapat ditampilkan pada struktur
jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya,
tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya. Pada
Gambar 2.6 merupakan contoh dari navigasi liniear:

Gambar 2. 4 Contoh Navigasi

19
2.9.2 Struktur Navigasi Hirarki

Struktur Navigasi Hirarki disebut struktur bercabang, merupakan

suatu struktur yang mengandalkan percabangan untuk menampilkan data
berdasarkan kriteria tertentu. Tampilan pada menu satu akan disebut
sebagai Master Page (halaman utama pertama), halaman utama ini
mempunyai halaman percabangan yang disebut Slave Page (halaman
pendukung). Jika salah satu halaman pendukung dipilih atau diaktifkan,
maka tampilan tersebut akan Bernama Master Page (halaman utama
kedua) dan seterusnya. Pada navigasi ini tidak diperkenalkan adanya
tampilan secara linear. Pada Gambar 2.7 merupakan contoh dari navigasi
hirarki:

Gambar 2. 5 Contoh Navigasi Hirarki

2.9.3 Struktur Navigasi Non-Linear

Struktur Navigasi Non-Linear merupakan perkembangan dari

struktur navigasi linear. Pada struktur ini diperkenankan membuat navigasi
bercabang. Percabangan pada struktur non-linear ini berbeda dengan
percabangan struktur hirarki. Pada percabangan ini walaupun terdapat
percabangan, tetapi setiap tampilan mempunyai kedudukan yang sama
yaitu tidak ada Master Page dan Slave Page. Pada Gambar 2.8 merupakan
contoh dari navigasi non-linear:

20
2.9.4 Struktur Navigasi Composite (Campuran)

Struktur Navigasi Composite (Campuran) disebut juga struktur

navigasi bebas yang merupakan gabungan dari ketiga struktur yang ada.
Struktur navigasi ini biasa digunakan dalam pembuatan multimedia karena
dapat memberikan interaksi yang lebih tinggi. Pada Gambar 2.9 merupakan
contoh dari navigasi hirarki:

Gambar 2. 7 Contoh Navigasi Campuran

21
 BAB III
PERANCANGAN DAN IMPLEMENTASI

3.1 Tahap Perencanaan

Pada tahap perencanaan dilakukan wawancaradengan pemilik

PetShop KIA yang terdapat permasalahan pada sistem yang sedang
berjalan. Salah satunya adalah permasalahan pelayanan yang berlangsung
secara manual dan lambatnya penyebaran informasi yang dilakukan oleh
PetShop pada saat ini.
Pelayanan dan lambatnya penyebaran informasi yang dilakukan
pada PetShop membutuhkan sebuah sistem yang dapat menjangkau
masyarakat lebih luas dengan menggunakan website yang bisa di akses
secara luas.

3.2 Tahap Analisis

Pada tahapan ini website yang akan dibangun memiliki fitur yang menarik
seperti daftar untuk membuat akun baru jika belum mempunyai akun diwebsite kia
PetShop , fitur beranda untuk menampilkan semua produk, pada fitur halaman
kucing menampilkan beberapa jenis hewan kucing yang terdapat pada website,
pada fitur halaman anjing menampilkan beberapa jenis hewan anjing yang terdapat
pada website, pada halaman brand menampilkan beberapa brand makanan hewan,
pada halaman shopping cart menampilkan pesanan yang telah dilakukan dan akan
masuk pada halaman shopping cart, website ini terdapat live chat yang berguna
untuk melakukan kosultasi terhadap hewan peliharaan. Pada tahap ini dilakukan
spesifikasi hardware dan software yang digunakan dalam pembuatan website
KIA PETSHOP

3.2.1 Analisis Kebutuhan Hardware

Dalam membuat aplikasi, menggunakan hardware
sebagai berikut:

1. Laptop-QTK2IOPS

22
 2. procesor yang digunakan AMD RYZEN 3 3250U.
3. RAM yang digunakan sebesar 8192MB.
4. Hard Disk yang digunakan 1TB.
3.2.2 Analisis Kebutuhan Software
Spesifikasi software yang digunakan antara
lain:

1. Sistem Operasi yaitu Windows 10 home, 64bit.

2. XAMPP 3.2.3 sebagai localhost, yaitu server digunakan

sebagai local hosting,

3. PHP MyAdmin 4.8.5 digunakan sebagai pengelola server

MySQL.

4. Visual Studio Code digunakan sebagai Text Editor.

5. Bootsrap 4 digunakan sebagai Framework.

6. Browser menggunakan Google Chrome.

3.3 Rancangan Unified Modeling Language (UML)

Pada sub bab ini membahas diagram UML dalam mempersiapkan

Website yang dibangun. Diagram yang akan digunakan adalah Use Case
Diagram dan Activity Diagram.

3.3.1 Use Case Diagram

Use Case Diagram menjelaskan alur admin dan user apa saja
yang dapat dilakukan dalam website. Berikut merupakan gambaran dari
use case diagram yang dapat dilihat pada gambar 3.3 dan 3.4

23
 Gambar 3. 1 Use Case Diagram Admin

Pada use case admin berisi system yang digunakan admin dari login sampai
menerima konfirmasi pesanan user

Gambar 3. 2 Use Case Diagram User

24
 Pada use case user berisi system user yang digunakan user dari daftar sampai
melihat status transaksi

3.3.2 Activity Diagram

Activity Diagram menggambarkan aliran keseluruhan kegiatan dan

masing-masing use case diagram dapat membuat satu kegiatan pada
kegiatan simulasi dan transaksi-transaksi apa saja yang ada pada website.

25
 Gambar 3. 3 Activity Diagram User KiaPetShop

Pada activity diagram user menggambarkan aliran kegiatan user dari

membuat akun hingga menerima barang.

Gambar 3. 4 Activity Diagram Admin KiaPetShop

26
 3.4 Perancangan Database

Untuk mengkoneksikan database dan localhost, hidupkan Apache dan

MySQL terlebih dahulu melalui XAMPP.

Gambar 3. 5 XAMPP

Selanjutnya, masuk ke browser dan ketik link localhost/phpmyadmin

untuk membuat database bernama Kia PetShop .

Gambar 3. 6 Membuat Database

27
 Gambar 3. 7 Daftar table

Gambar 3. 8 Table Brand

Gambar 3. 9 Table Categories

Gambar 3. 10 Table Counter

28
 Gambar 3. 11 Table Items

Gambar 3. 12 Table Members

Gambar 3. 13 Table Oders

29
 Gambar 3. 14 Table Oder Detail

Gambar 3. 15 Table SubCategori

Gambar 3. 16 Table User

Untuk mengkoneksikan database dengan program, buatlah sebuah

folder dengan nama config didalam folder winhost, kemudian buat sebuah
file dengan nama database.php. Kemudian masukkan kode program dibawah
untuk mendefinisikan server, username, password, dan nama database yang
akan dipakai oleh website.

<?php

$servername = "localhost";

30
 $username = "root";

$password = "";

$dbname = "winhost";

$conn = mysqli_connect($servername, $username,

$password, $dbname); if(!$conn){

die("Koneksi Gagal: " .mysqli_connect());

?>

3.5 Rancangan Struktur Navigasi

Struktur Navigasi merupakan rancangan gambaran alur sistem yang
terhubung dari satu halaman ke halaman lainnya. Jenis struktur navigasi yang
digunakan dalam pengembangan sistem ini yaitu jenis campuran. gambar 3.1
dan gambar 3.2 adalah struktur navigasi berdasarkan tingkatan user pengguna
sistem.
3.5.1 Struktur Navigasi Pelanggan
Sturktur navigasi Pelanggan PetShop adalah struktur navigasi non linear,
artinya setiap perpindahan halaman dapat dilakukan secara langsung tanpa harus
melewati halaman secara berurutan. Misal ketika berada pada halaman brand
ingin kembali ke halaman utama, pengguna bisa langsung menuju halaman
tersebut tanpa harus melewati halaman lainnya. Struktur navigasi pelanggan
PetShop dapat dilihat pada gambar 3.1.

31
 Gambar 3. 17 Struktur Navigasi Pelanggan

Berikut ini adalah alur dari struktur navigasi Reseller :

1. Tampilan yang pertama akan muncul pada saat Website di akses adalah
tampilan login, pelanggan yang ingin masuk ke tampilan dashboard harus
mendaftar dan login terlebih dahulu.
2. Setelah pelanggan login, pelanggan berada dihalaman dashboard,
dihalaman ini terdapat beberapa menu, yaitu: beranda, makanan, pasir, litter
box dan brand.
3. Pada setiap menu, pelanggan dapat berpindah halaman secara langsung
tanpa harus melewati halaman secara berurutan.
4. Pada menu makanan, pelanggan dapat melakukan pemesanan dan dapat
langsung melakukan checkout.
5. Pada menu pasir, pelanggan dapat melakukan pemesanan dan dapat
langsung melakukan checkout.
6. Pada menu litter box, pelanggan melakukan pemesanan dan dapat
langsung melakukan checkout..
7. Pada menu brand, pelanggan dapat melihat brand dari menu pasir,
makanan dan litter box. Melakukan pemesanan dan dapat langsung
melakukan checkout.

32
 8. Pada menu Setting, pelanggan dapat melihat Riwayat pemesanan dan
merubah profile alamat.

3.5.2 Struktur Navigasi Admin

Sturktur navigasi Admin website PetShop juga merupakan struktur
navigasi non linear. Misalnya ketika Admin berada pada halaman Pesanan ingin
kembali ke halaman utama, admin bisa langsung menuju halaman tersebut tanpa
harus melewati halaman lainnya. Struktur navigasi admin website PetShop dapat
dilihat pada gambar 3.2 berikut

Gambar 3. 18 Struktur Navigasi Admin

Berikut ini adalah alur dari struktur navigasi admin :

1. Tampilan yang pertama akan muncul pada saat Website di akses adalah
tampilan login, admin yang ingin masuk ke tampilan dashboard harus login
terlebih dahulu.
2. Setelah admin login, admin berada dihalaman dashboard, dihalaman ini
terdapat beberapa menu, yaitu: pesanan, produk manager dan laporan.
3. Pada setiap menu, admin dapat berpindah halaman secara langsung tanpa
harus melewati halaman secara berurutan.
4. Pada menu pesanan, admin dapat meng-input, meng-update dan men-
delete data produk.
5. Pada menu produk manager, admin dapat meng-input, meng-update dan
men-delete data produk
6. Pada menu laporan, admin dapat melihat history order pelanggan,\

33
3.6 Rancangan Program
Setelah menyiapkan database, source code siap ditulis didalam Visual
Studio Code. Source code dibuat di dalam sebuah folder bernama kiaPetShop .
Agar dapat mengakses halaman PHP dari web browser, maka kita harus
menempatkan folder kiaPetShop dalam folder khusus yang merupakan folder
home dari web server. Pada aplikasi XAMPP, folder tersebut adalah folder htdocs
yang berada di F:\xampp.dull\htdocs.

Gambar 3. 19 Folder htdocs xampp

Didalam folder kiaPetShop terdapat folder admin yang berfungsi untuk

menyimpan source code halaman admin, folder theme untuk menyimpan semua
penataan gaya dan gambar pada website, folder config yang menyimpan
configurasi database, dan folder index yang berisi source code untuk kegiatan
yang akan dilakukan oleh pembeli. Dibawah ini adalah tampilan berbagai folder
tersebut jika dibuka menggunakan kode editor Visual Studio Code.

3.6.1 Rancangan Halaman Admin

Rancangan halaman admin merupakan rancangan yang bertujuan

memberikan gambaran mengenai yang ada pada halaman admin.

34
1. Halaman Login Admin
Halaman Login Admin menampilkan username dan password
yang harus diisi admin untuk melihat pesanan pelanggan. Rancangan
Halaman Login dapat dilihat pada Gambar 3.20

Gambar 3. 20 Rancangan Halaman Login Admin

Pada halaman login admin terdapat username dan

password untuk melakukan login.
2. Halaman Dashboard
Halaman Dashboard berisi tautan yang menuju ke home.
Halaman Dashboard berfungsi sebagai tampilan awal website setelah
login dilakukan. Rancangan dapat dilihat pada Gambar 3.21

35
 Gambar 3. 21 Rancangan Halaman Home Admin

3. Halaman Pesanan Admin

Rancangan halaman ini dibuat untuk melihat pesanan yang
masuk atau pesanan yang dilakukan Pelanggan untuk diproses. Halaman
Pesanan dapat dilihat pada Gambar 3.22

Gambar 3. 22 Rancangan Halaman Pesanan Admin

Pada Halaman Pesanan Admin untuk melihat data pesanan

pelanggan yang sudah melakukan pemesanan.
4. Halaman Produk Brand

36
 Rancangan halaman ini untuk melihat daftar Brand makanan,
litter box kucing yang tersedia dan di dalam Rancangan Produk Brand,
admin dapat mengganti atau menambahkan makanan dan litter box.
Halaman Produk Brand dapat dilihat pada Gambar 3.23

Gambar 3. 23 Rancangan halaman Produk Brand

Pada halaman Produk Brand Admin untuk mengubah pesanan

dan tambah daftar menu pesanan.

5. Halaman Produk Kategori

Rancangan halaman Produk Kategori dibuat untuk admin bisa
menambahkan menu baru agar pelanggan dapat melihat menu baru.
Halaman Produk Kategori dapat dilihat pada Gambar 3.24

37
 Gambar 3. 24 Rancangan Halaman Produk Kategori

Pada halaman Produk Kategori admin dapat menambahkan

menu Kategori.
6. Halaman Produk SubKategori
Rancangan halaman Produk Sub Kategori dibuat untuk
mempermudah admin untuk pembagian yang lebih terspesialisasi dari
suatu kategori. Halaman Produk SubKategori dapat dilihat pada
Gambar 3.25

Gambar 3. 25 Rancangan Halaman Produk SubKategori

38
 Pada halaman Produk SubKategori admin dapat menambahkan
menu SubKategori.

7. Halaman Data Produk

Rancangan Halaman Data Produk admin dapat mengubah
harga, diskon dan menghapus data produk dapat dilihat pada Gambar
3.26

Gambar 3. 26 Rancangan Halaman Data Produk

8. Halaman Laporan Data Produk

Rancangan Halaman Laporan Data Produk admin dapat melihat
stock barang yang tersedia dan melihat total transaksi dari pelanggan
Kia PetShop dapat dilhat pada Gambar 3.27

39
Gambar 3. 27 Rancangan Halaman Laporan Data Produk

9. Halaman Rancangan Laporan Data Produk Berdasarkan Kategori dan

SubKategori
Rancangan Halaman Laporan Data Produk Berdasarkan
Kategori dan SubKategori admin dapat melihat stock dari Kategori dan
SubKategori dapat dilihat pada Gambar 3.28

Gambar 3. 28 Rancangan Halaman Laporan Data Produk

Berdasarkan Kategori dan SubKategori

10. Halaman Rancangan Laporan Daya Pemesanan

adalah rancangan tampilan Laporan Data Pemesanan, dimana
admin dapat melihat laporan data pemesanan dari pelanggan.

40
 Gambar 3. 29 Rancangan Halaman Laporan Data Pemesanan

11. Rancangan Halaman Laporan Data Pemesanan Berdasarkan Tanggal

adalah rancangan tampilan Laporan Data Pemesanan
Berdasarkan Tanggal , dimana admin dapat melihat laporan data
pemesanan dari pelanggan berdasarkan tanggal yang diinput oleh admin.

Gambar 3. 30 Rancangan Halaman Laporan Data Pemesanan

Berdasarkan Tanggal

12. Rancangan Halaman Daftar Kontak Pelanggan

41
 adalah rancangan tampilan Daftar Kontak Pelanggan, dimana
admin dapat melihat daftar kontak pelanggan.

Gambar 3. 31 Rancangan Halaman Daftar Kontak Pelanggan

3.6.2 Rancangan Halaman Pelanggan

1. Halaman Daftar

Gambar 3. 32 Rancangan Halaman Daftar

adalah rancangan tampilan Daftar, dimana user yang akan membeli produk menggunakan
aplikasi ini di haruskan daftar terlebih dahulu, dan memasukan data yang tertera.

42
 2. Halaman Masuk / login

Gambar 3. 33 Rancangan Halaman Masuk/Login

adalah rancangan tampilan login, dimana user yang akan membeli produk menggunakan
aplikasi ini di haruskan login terlebih dahulu dengan memasukan email dan password.

3. Halaman Dashboard

Gambar 3. 34 Rancangan Halaman Dashboard

43
 adalah rancangan tampilan Dashboard, dimana user yang sudah login akan
masuk pada tampilan dashboard. Pada halaman dashboard ada beberapa
menu, yaitu: makanan kucing, pasir kucing, litter box, dan brand.

4. Halaman Makanan Kucing

Gambar 3. 35 Rancangan Halaman Makanan Kucing

adalah rancangan tampilan Makanan Kucing. Pada halaman ini tersedia

produk-produk yang dijual.

5. Halaman Pasir Kucing

Gambar 3. 36 Rancangan Halaman pasir Kucing

44
 adalah rancangan tampilan Pasir Kucing. Pada halaman ini tersedia produk-
produk yang dijual.
6. Halaman Litter Box

Gambar 3. 37 Rancangan Halaman Litter Box

adalah rancangan tampilan Litter Box. Pada halaman ini tersedia produk-
produk yang dijual.
7. Halaman Brand

Gambar 3. 38 Rancangan Halaman Brand

adalah rancangan tampilan Brand. Pada halaman ini tersedia produk-produk

yang dijual berdasarkan brand.

45
8. Halaman Keranjang

Gambar 3. 39 Rancangan Halaman Keranjang

adalah
rancangan tampilan Keranjang Belanja. Pada halaman ini pengguna dapat
melihat list atau menghapus produk dan melanjutkan ke tahap konfirmasi
pembayaran.
9. halaman Konfirmasi Pembayaran

Gambar 3. 40 Rancangan Halaman Konfirmasi Pembayaran

46
 adalah rancangan tampilan Konfirmasi Pembayaran. Pada halaman ini
pengguna yang ingin melanjutkan harus memasukan Data Diri, Data Alamat,
Metode pembayaran dan melakukan pembatalan pemesanan.
10. Halaman bukti konfirmasi

Gambar 3. 41 Rancangan Halaman Bukti Pembayaran

adalah rancangan tampilan Bukti Konfirmasi. Pada halaman ini pengguna

dapat melihat bukti pembayaran dan melakukan print bukti pendaftaran.

3.7 Implementasi
3.7.1 Hasil Tampilan Interface Admin
1. Login

Gambar 3. 42 Tampilan Login

2. Dashboard

47
 Gambar 3. 43 Tampilan Dashboard

3. Pesanan Admin

Gambar 3. 44 Tampilan Admin

4. Produk Brand

48
 Gambar 3. 45 Tampilan Brand

5. Produk Kategori

Gambar 3. 46 Tampilan Kategori

6. Produk Subkategori

Gambar 3. 47 Tampilan SubKategori

7. Data Produk

49
 Gambar 3. 48 Tampilan Data Produk

8. Laporan Data Produk

Gambar 3. 49 Tampilan Laporan Data Produk

9. Laporan Data Produk Berdasarkan Kategori dan SubKategori

Gambar 3. 50 Tampilan Laporan Data Produk Berdasarkan

Kategori dan SubKategori

10. Laporan Data Pemesanan

50
 Gambar 3. 51 Tampilan Laporan Data Pemesanan

11. Laporan Data Pemesanan Berdasarkan Tanggal

Gambar 3. 52 Tampilan Laporan Pemesanan Berdasarkan

Tanggal

12. Daftar Kontak Pelanggan

Gambar 3. 53 Tampilan Daftar Kontak Pelanggan

51
 3.7.2 Hasil Tampilan Interface Pelanggan
1. Daftar

Gambar 3. 54 Tampilan Daftar

2. Masuk

Gambar 3. 55 Tampilan Login

52
3. Dashboard

Gambar 3. 56 Tampilan Dashboard

4. Makanan Kucing

Gambar 3. 57 Tampilan Makanan Kucing

53
5. Pasir Kucing

Gambar 3. 58 Tampilan Pasir kucing

6. LitterBox

Gambar 3. 59 Tampilan Litter Box

7. Brand

Gambar 3. 60 Tampilan Brand

54
8. KeranjangBelanja

Gambar 3. 61 Tampilan Keranjang

9. KonfirmasiPembayaran

Gambar 3. 62 Tampilan Konfirmasi Pembayaran

55
 10. BuktiKonfirmasi

Gambar 3. 63 Tampilan Bukti

3.8 Uji Performa WebSite

Uji Pefroma website menggunakan Laptop-QTK2IOPS, procesor yang digunakan
AMD RYZEN 3 3250U., RAM : 8GB, HDD : 1TB.

Tabel 3. 1 Uji Performa WebSite

NO Browser Kelebihan Kekurangan

1 Google Chrome Normal Normal
2 Mozilla Firefox Normal Normal
3 Microsoft Edge Normal Normal

Kesimpulan : Dari Uji coba ketiga browser penulis tidak mendapati permasalahan
dan berjalan dengan normal serta tampilan sesuai dengan resolusi monitor maupun
ponsel. Untuk hambatan disebabkan oleh koneksi internet

56