Revisi AnandaTriPutra 4IA12

UNIVERSITAS GUNADARMA
FAKULTAS TEKNOLOGI INDUSTRI
PENULISAN ILMIAH
Pembuatan Website E-commerce KIA Petshop

Nama : Ananda Tri Putra Perdana
NPM : 50418697
Jurusan : Teknik Informatika
Pembimbing : Dr. Dharmayanti S.T, MMSI
Diajukan Guna Melengkapi Sebagian Syarat Dalam Mencapai

Gelar Setara Sarjana Muda
Jakarta
2022
PERNYATAAN ORIGINALITAS DAN PUBLIKASI
Saya yang bertanda tangan di bawah ini:

NPM : 50418697
Judul PI : PEMBUATAN WEBSITE E-COMMERCE
KIA PETSHOP
Tanggal Sidang :-
Tanggal Lulus :-
Menyatakan bahwa tulisan di atas merupakan hasil karya sendiri dan dapat
dipublikasikan sepenuhnya oleh Universitas Gunadarma. Segala kutipan dalam
bentuk apapun telah mengikuti kaidah dan etika yang berlaku. Semua hak cipta dari
logo serta produk yang disebut dalam buku ini adalah milik masing-masing
pemegang haknya, kecuali disebutkan lain. Mengenai isi dan tulisan merupakan
tanggung jawab Penulis, bukan Universitas Gunadarma.
Demikianlah pernyataan ini dibuat dengan sebenarnya dan dengan penuh
kesadaran.
Depok, 2022
(Ananda Tri Putra Perdana)
ii
LEMBAR PENGESAHAN
Judul PI : PEMBUATAN WEBSITE E-COMMERCE
KIA PETSHOP
NPM : 50418697
Tanggal Sidang :
Tanggal Lulus :
Menyetujui,
Pembimbing Koordinator PI
(Dr. Dharmayanti S.T, MMSI.) (Dr. Achmad Fahrurozi, S.Si., M.Si.)
Ketua Jurusan Teknik Informatika
(Dr. Lintang Yuniar Banowosari, S.Kom., M.Sc.)
iii
ABSTRAK
Ananda Tri Putra Perdana. 50418697

PEMBUATAN WEBSITE E-COMMERCE KIA PETSHOP
PI. Jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas
Gunadarma, 2022.
Kata Kunci : Pet Shop, E-Commerce, WebSite, Penjualan
(xii + 50 + lampiran)
Pet shop menurut para ahli adalah suatu tempat penjualan binatang dan segala
keperluannya. Menjelaskan bahwa bisnis Pet Shop adalah bisnis yang sangat
menjanjikan untuk masa kini dan juga bisnis Pet Shop adalah salah satu bisnis yang
mengalami peningkatan dimasa pendemi ini. KIA Pet Shop merupakan usaha yang
baru berdiri ini merupakan usaha yang bergerak dibidang hobi pecinta hewan
khususnya kucing. Dalam bisnisnya Pet Shop menjual berbagai kebutuhan hewan
peliharaan mulai dari makanan kucing, perlengkapan aksesoris hewan termasuk
Litter box. Metode ini membantu pembeli mencari keperluan yang diinginkan
dengan mudah. Perancangan sistem menggunakan Unified Modelling Language,
Bahasa pemrograman PHP dan database MySQL. Penelitian ini menghasilkan
aplikasi Pet Shop website yang dapat memudahkan penjual dan pembeli untuk
bertemu di dalam satu platform.
Daftar Pustaka (2013-2021)
iv
KATA PENGANTAR
Segala puji dan syukur kehadirat Allat SWT yang telah melimpahkan rahmat dan
karunia-Nya, sehingga penulis dapat menyelesaikan Penulisan Ilmiah ini.
Penulisan Ilmiah ini disusun guna melengkapi Sebagian syarat untuk memperoleh
gelar Sarjana Muda Teknik Informatika Universitas Gunadarma. Adapun judul
Penulisan Ilmiah ini adalah " PEMBUATAN WEBSITE E-COMMERCE KIA
PETSHOP ".
Keberhasilan dalam menyelesaikan penulisan ilmiah ini adalah berkat
bantuan dan dukungan dari berbagai pihak serta keteguhan hati penulis, meskipun
banyak hambatan yang dihadapi oleh penulis, namun semua menjadi pelajaran dan
pengalaman yang berkesan.
Dalam kesempatan ini perkenankan penulis menyampaikan ucapan terima
kasih atas segala dukungan dan bantuan yang diterima oleh penulis, sehingga dapat
menyelesaikan penulisan ini. Dan perkenankan penulis mengucapkan terima kasih
kepada :
1. Ibu Prof. Dr. E.S. Margianti, S.E., MM., selaku Rektor Universitas
Gunadarma.
2. Bapak Prof. Dr.-Ing. Adang Suhendra, S.Si., S.Kom., MSc., selaku Dekan
Fakultas Teknologi Industri Universitas Gunadarma.
3. Ibu Dr. Lintang Yuniar Banowosari, S.Kom., M.Sc., selaku Ketua Jurusan
Teknik Informatika Universitas Gunadarma.
4. Bapak Dr. Achmad Fahrurozi, S.Si., M.Si., selaku Koordinator Penulisan
Ilmiah.
5. Ibu Dr. Dharmayanti S.T, MMSI., selaku Dosen Pembimbing.
6. Bapak Muhammad hamdi dan Ibu Rosiah selaku kedua Orang Tua yang
memberikan dukungan serta doa hingga penyusunan penulisan ilmiah
selesai.
7. Aditya Rahman, Aditya Dwi, Marsselus Fransiskus Tue Karang, Lancelot
Erkhan dan Althoofiani Novrizal sebagai pacar yang telah mensupport saya,
v
teman seperjuangan yang telah memberikan bantuan dan semangat selama
penulisan ini berlangsung.
8. Serta teman-teman lainnya yang telah banyak memotivasi, membantu dan
memberikan dukungan di masa- masa sulit selama pembuatan aplikasi dan
penulisan ini.
Penulis ingin mengucapkan terima kasih kepada semua pihak yang tidak
dapat penulis sebutkan satu persatu, atas bantuan, saran, dan masukan yang telah
diberikan kepada penulis.
Oleh karena itu penulis sangat menghargai kritik maupun saran yang
berguna bagi kesempurnaan penyusunan penulisan ilmiah ini. Akhir kata penulis
berharap semoga penulisan ini dapat bermanfaat bagi para pembaca.
Depok, 2022
Ananda Tri Putra Perdana
vi
Daftar Isi
UNIVERSITAS GUNADARMA FAKULTAS TEKNOLOGI INDUSTRI ........................................... i

PERNYATAAN ORIGINALITAS DAN PUBLIKASI..................................................................... ii
LEMBAR PENGESAHAN ...................................................................................................... iii
ABSTRAK..............................................................................................................................iv
KATA PENGANTAR............................................................................................................... v
Daftar Isi .............................................................................................................................vii
Daftar Gambar ....................................................................................................................ix
Daftar Tabel ....................................................................................................................... xii
BAB I .................................................................................................................................... 1
PENDAHULUAN ................................................................................................................... 1
1.1 Latar Belakang Masalah.................................................................................. 1
1.2 Batasan Masalah ............................................................................................... 2
1.3 Tujuan Penelitian .............................................................................................. 2
1.4 Metode Penelitian.............................................................................................. 2
1.5 Sistematika Penulisan ....................................................................................... 3
BAB II ................................................................................................................................... 5
TINJAUAN PUSTAKA ............................................................................................................ 5
2.1 XAMPP .............................................................................................................. 5
2.2 PHP..................................................................................................................... 5
2.3 MYSQL .............................................................................................................. 5
2.4 SDLC Software Development Life Cycle)....................................................... 6
2.5 CSS ..................................................................................................................... 6
2.6 JAVA SCRIPT .................................................................................................. 7
2.7 HTML ................................................................................................................ 7
2.8 UML ................................................................................................................... 9
2.8.1 Use Case Diagram ..................................................................................... 9
2.8.2 Activity Diagram ..................................................................................... 11
2.8.3 Class Diagram.......................................................................................... 12
2.9 Struktur Navigasi ............................................................................................ 14
vii
2.9.1 Struktur Navigasi Linear ....................................................................... 14
2.9.2 Struktur Navigasi Hirarki ...................................................................... 15
2.9.3 Struktur Navigasi Non-Linear ............................................................... 15
2.9.4 Struktur Navigasi Composite (Campuran) ........................................... 16
2.10. Black Box Testing .......................................................................................... 16
BAB III ................................................................................................................................ 17
PERANCANGAN DAN IMPLEMENTASI ............................................................................... 17
3.1 Tahap Perencanaan ........................................................................................ 17
3.2 Tahap Analisis ................................................................................................. 17
3.2.1 Analisis Kebutuhan Hardware .............................................................. 17
3.2.2 Analisis Kebutuhan Software ................................................................ 18
3.3 Rancangan Unified Modeling Language (UML) .......................................... 18
3.3.1 Use Case Diagram ................................................................................... 18
3.3.2 Activity Diagram ..................................................................................... 19
3.4 Perancangan Database ......................................................................................... 21
3.5 Rancangan Struktur Navigasi........................................................................ 25
3.5.1 Struktur Navigasi Pelanggan ................................................................. 25
3.5.2 Struktur Navigasi Admin ....................................................................... 27
3.6 Rancangan Program ....................................................................................... 28
3.6.1 Rancangan Halaman Admin ......................................................................... 28
3.6.2 Rancangan Halaman Pelanggan ................................................................... 37
3.7 Implementasi ................................................................................................... 42
3.7.1 Hasil Tampilan Interface Admin .................................................................. 42
3.7.2 Hasil Tampilan Interface Pelanggan ........................................................... 47
3.8 Uji Coba Aplikasi ............................................................................................ 53
BAB IV................................................................................................................................ 56
PENUTUP ........................................................................................................................... 56
4.1 Kesimpulan ............................................................................................................ 56
4.2 Saran ...................................................................................................................... 56
DAFTAR PUSTAKA ............................................................................................................. 57
LAMPIRAN ........................................................................................................................... 1
viii
Daftar Gambar
Gambar 2. 1 Contoh Use Case Diagram ........................................................................... 10
Gambar 2. 2 Contoh Activity Diagram ............................................................................. 11
Gambar 2. 3 Contoh Class Diagram ................................................................................. 13
Gambar 2. 4 Contoh Navigasi ........................................................................................... 14
Gambar 2. 5 Contoh Navigasi Hirarki .............................................................................. 15
Gambar 2. 6 Contoh Navigasi Non-Linear ....................................................................... 16
Gambar 2. 7 Contoh Navigasi Campuran ......................................................................... 16
Gambar 3. 1 Use Case Diagram Admin ............................................................................ 18

Gambar 3. 2 Use Case Diagram User ............................................................................... 19
Gambar 3. 3 Activity Diagram User KiaPetShop ............................................................. 20
Gambar 3. 4 Activity Diagram Admin KiaPetShop.......................................................... 20
Gambar 3. 5 XAMPP ........................................................................................................ 21
Gambar 3. 6 Membuat Database ....................................................................................... 21
Gambar 3. 7 Daftar table ................................................................................................... 22
Gambar 3. 8 Table Brand .................................................................................................. 22
Gambar 3. 9 Table Categories........................................................................................... 22
Gambar 3. 10 Table Counter ............................................................................................. 22
Gambar 3. 11 Table Items ................................................................................................. 23
Gambar 3. 12 Table Members........................................................................................... 23
Gambar 3. 13 Table Oders ................................................................................................ 23
Gambar 3. 14 Table Oder Detail ....................................................................................... 24
Gambar 3. 15 Table SubCategori...................................................................................... 24
Gambar 3. 16 Table User .................................................................................................. 24
Gambar 3. 17 Struktur Navigasi Pelanggan ...................................................................... 26
Gambar 3. 18 Struktur Navigasi Admin ........................................................................... 27
Gambar 3. 19 Folder htdocs xampp .................................................................................. 28
Gambar 3. 20 Rancangan Halaman Login Admin ............................................................ 29
Gambar 3. 21 Rancangan Halaman Home Admin ............................................................ 30
Gambar 3. 22 Rancangan Halaman Pesanan Admin ........................................................ 30
Gambar 3. 23 Rancangan halaman Produk Brand ............................................................ 31
Gambar 3. 24 Rancangan Halaman Produk Kategori ....................................................... 32
ix
Gambar 3. 25 Rancangan Halaman Produk SubKategori ................................................. 32
Gambar 3. 26 Rancangan Halaman Data Produk.............................................................. 33
Gambar 3. 27 Rancangan Halaman Laporan Data Produk ............................................... 33
Gambar 3. 28 Rancangan Halaman Laporan Data Produk Berdasarkan Kategori dan
SubKategori ...................................................................................................................... 34
Gambar 3. 29 Rancangan Halaman Laporan Data Pemesanan ......................................... 35
Gambar 3. 30 Rancangan Halaman Laporan Data Pemesanan Berdasarkan Tanggal ...... 36
Gambar 3. 31 Rancangan Halaman Daftar Kontak Pelanggan ......................................... 36
Gambar 3. 32 Rancangan Halaman Daftar ....................................................................... 37
Gambar 3. 33 Rancangan Halaman Masuk/Login ............................................................ 38
Gambar 3. 34 Rancangan Halaman Dashboard ................................................................ 38
Gambar 3. 35 Rancangan Halaman Makanan Kucing ...................................................... 39
Gambar 3. 36 Rancangan Halaman pasir Kucing ............................................................. 39
Gambar 3. 37 Rancangan Halaman Litter Box ................................................................. 40
Gambar 3. 38 Rancangan Halaman Brand ........................................................................ 40
Gambar 3. 39 Rancangan Halaman Keranjang ................................................................. 41
Gambar 3. 40 Rancangan Halaman Konfirmasi Pembayaran ........................................... 41
Gambar 3. 41 Rancangan Halaman Bukti Pembayaran .................................................... 42
Gambar 3. 42 Tampilan Login .......................................................................................... 43
Gambar 3. 43 Tampilan Dashboard .................................................................................. 43
Gambar 3. 44 Tampilan Admin ........................................................................................ 44
Gambar 3. 45 Tampilan Brand.......................................................................................... 44
Gambar 3. 46 Tampilan Kategori ..................................................................................... 45
Gambar 3. 47 Tampilan SubKategori ............................................................................... 45
Gambar 3. 48 Tampilan Data Produk ............................................................................... 45
Gambar 3. 49 Tampilan Laporan Data Produk ................................................................. 46
Gambar 3. 50 Tampilan Laporan Data Produk Berdasarkan Kategori dan SubKategori . 46
Gambar 3. 51 Tampilan Laporan Data Pemesanan ........................................................... 46
Gambar 3. 52 Tampilan Laporan Pemesanan Berdasarkan Tanggal ................................ 47
Gambar 3. 53 Tampilan Daftar Kontak Pelanggan ........................................................... 47
Gambar 3. 54 Tampilan Daftar ......................................................................................... 48
Gambar 3. 55 Tampilan Login .......................................................................................... 49
Gambar 3. 56 Tampilan Dashboard .................................................................................. 49
Gambar 3. 57 Tampilan Makanan Kucing ........................................................................ 50
x
Gambar 3. 58 Tampilan Pasir kucing................................................................................ 50
Gambar 3. 59 Tampilan Litter Box ................................................................................... 51
Gambar 3. 60 Tampilan Brand.......................................................................................... 51
Gambar 3. 61 Tampilan Keranjang ................................................................................... 51
Gambar 3. 62 Tampilan Konfirmasi Pembayaran ............................................................ 52
Gambar 3. 63 Tampilan Bukti .......................................................................................... 52
xi
Daftar Tabel
Tabel 2. 1Tag - Tag pada HTML ........................................................................................ 8
Tabel 2. 2Use Case Diagram............................................................................................. 10
Tabel 2. 3Simbol Simbol Activity Diagram ..................................................................... 12
Tabel 2. 4 Simbol-Simbol Class Diagram ........................................................................ 13
Tabel 3. 1 Hasil Pengujian Black Box Login Pelanggan .................................................. 53

Tabel 3. 2 Hasil Pengujian Black Box Login Admin........................................................ 54
xii
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 makanan hewan
dan peralatan. Peralatan merupakan barang-barang yang cenderung wajib untuk
dimiliki oleh para pemilik seperti kandang hewan peliharaan. (Friska Kumala.
2008).
Studi kasus 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 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.
1
2
1.2 Batasan Masalah

Batasan masalah pada penelitian ini sebagai berikut :
1. Pembuatan aplikasi website penjualan ini menggunakan bahasa

pemrograman PHP
2. Database yang digunakan dalam pembuatan website penjualan ini

adalah Database MySQL sebagai basis data yang terpadu dalam
perangkat lunak XAMPP.
3. Rancangan pembuatan Kia PetShop ini mencakup pembuatan akun,

login, pemesanan barang, pembayaran barang, kategori, data barang
dan riwayat penjualan.
Metode pembayaran dilakukan secara online melalui Bank.
1.3 Tujuan Penelitian
Penelitian ini bertujuan untuk membuat aplikasi E-commerce KIA petshop
berbasis website. Menjadikan website ini menjadi salah satu sarana jual-beli
makanan hewan dan perlengkapan hewan yang mudah dipahami dan meningkatkan
minat untuk orang yang ingin mempublikasikan websitenya sehingga pelanggan
yang ingin membeli produk dari Kia PetShop tidak perlu mendatangi lokasi toko.
1.4 Metode Penelitian

Metode penelitian yang digunakan pada Penulisan Ilmiah ini adalah
menggunakan pendekatan metode System Development Life Cycle (SDLC).
Tahapan SDLC yang dilakukan sebagai berikut :
a. Tahap Perencanaan
Pada tahap ini, melakukan wawancara kepada pihak Petshop guna
mendapatkan informasi mengenai sistem yang berjalan kemudian
mengidentifikasikan kebutuhan apa saja yang dibutuhkan oleh Petshop.
b. Tahap Analisis
Pada tahap ini, rancang bangun aplikasi E-commerce KIA Petshop berbasis
web dapat berjalan sesuai kemampuan pengguna dapat melakukan transaksi
online dan melihat informasi petshop.
3
c. Tahap Perancangan
Pada tahap ini, dilakukan perancangan aplikasi E-commerce KIA Petshop
berbasis web. 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
Proses uji coba dilakukan dengan menggunakan metode Blackbox Testing.
Blackbox Testing digunakan karena jika terdapat kesalahan pada aplikasi
dapat langsung diketahui.
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

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.
4
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.
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
5
6
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 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
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan Bahasa pemrograman. Untuk saat ini terdapat tiga versi CSS, yaitu CSS 1,
CSS 2 dan CSS 3. CSS 1 dikembangkan berpusat pada pemformatan dokumen
HTML, CSS 2 dikembangkan untuk memenuhi kebutuhan terhadapat format
dokumen agar bisa ditampilkan di printer, sedangkan CSS 3 adalah versi terbaru
dari CSS yang mampu melakukan banyak hal dalam desain website. CSS 2
mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada table
layout dan media tipe untuk printer, CSS 3 juga dapat melakukan animasi pada
halaman website diantaranya animasi warna hingga animasi 3D. CSS 3 desainer
7
lebih dimudahkan dalam hal kompatibilitas website pada smartphone dengan

dukungan fitur baru yakni media query. Sebanyak fitur baru pada CSS 3 seperti:
Multiple background, borderradius, drop-shadow, border-image, CSS Math, CSS
Object Model (M Tahbani, E Pudjiarti. 2017)
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 ialah singkatan dari HyperText Markup Languange merupakan
bahasa web atau markup internet yang berasal dari kombinasi antara text dan
informasi berupa simbol atau kode yang akan dimasukan kedalam suatu file guna
membuat suatu halaman situs. Secara singkat mengenal HTML adalah bahasa
markup internet yang berguna untuk membuat suatu website. (Akbar LA, 2019)
HTML sering kali dikaitkan dengan bahasa pemrograman, dan sejatinya HTML
bukanlah bahasa pemrograman, yang berarti HTML tidak bisa membuat
fungsionalitas yang dinamis. HTML merupakan sebuah markup language yang
fleksibel dan dapat digabungkan dengan beberapa bahasa pemrograman lainnya
seperti PHP, JavaScript, dan ASP. Berikut ini adalah tag-tag pada HTML:
8
Tabel 2. 1Tag - Tag pada HTML
Tag Keterangan
No
Untuk membuat sebuah dokumen
1 <html>…</html>
HTML
Untuk melihat informasi dokumen
2 <head>…</head>
HTML
Untuk membuat bagian isi dokumen
3 <body>…</body>
HTML
Untuk membuat judul dokumen HTML
4 <title>…</title>
dan dapat dilihat di jendela browser
5 <p>...</p> Untuk membuat paragraf
Untuk membuat judul pada dokumen

6 <h1> to <h6>
semakin kecil heading maka tulisan akan
semakin besar
7 <br>…</br> Untuk memasukkan baris baru
8 <b>…</b> Untuk Bold, yaitu berfungsi membuat

huruf bercetak tebal
9 <i>…</i> Untuk Italic, yaitu berfungsi membuat
huruf bercetak miring
10 <u>…</u> Untuk Underline, yaitu berfungsi
membuat huruf bercetak garis bawah
11 <hr>…</hr> Untuk membuat garis horizontal
12 <img> Untuk menampilkan gambar pada

dokumen HTML
13 <a>…</a> Untuk membuat Hyperlink pada
dokumen HTML
14 <table>…</table> Untuk membuat tabel
15 <th>…</th> Untuk membuat header pada tabel
16 <tr>…</tr> Untuk membuat baris pada tabel
17 <td>…<td> Untuk membuat kolom pada tabel
18 <form>…</form> Untuk membuat form yang dapat di

input oleh pengguna
19 <li>…</li> Untuk membuat sebuah daftar item
9
Tag Keterangan
No
20 <center>…</center> Untuk membuat teks menjadi ditengah
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.
10
Gambar 2. 1 Contoh Use Case Diagram
(https://badoystudio.com/contoh-use-case//)
Tabel 2. 2Use 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
case ini.
Use Case Deskripsi dari urutan aksi-
11
Simbol Nama Keterangan

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 padaGambar 2.2 dan simbol-simbol
yang digunakan pada activity diagram pada Tabel 2.3.
Gambar 2. 2 Contoh Activity Diagram
(http://www.waskhas.com/2020/03/pengertian-
activity-diagram.html)
12
Tabel 2. 3Simbol 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
FinalNode diakhiri
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
13
Gambar 2. 2 Contoh Class Diagram

Tabel 2. 4 Simbol-Simbol Class Diagram

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.
14

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 secaraberurut 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. 3 Contoh Navigasi

15
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. 4 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 yaitutidak ada Master Page dan Slave Page. Pada
Gambar 2.8 merupakan contohdari navigasi non-linear:
16
Gambar 2. 5 Contoh Navigasi Non-Linear

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 merupakancontoh dari navigasi hirarki:
Gambar 2. 6 Contoh Navigasi Campuran
2.10. Black Box Testing

Black box testing adalah salah satu metode software testing di mana
fungsionalitas aplikasi software akan diuji tanpa memiliki pengetahuan tentang
struktur kode internal, detail implementasi, dan jalur internal. Black box
testing berfokus pada input dan output aplikasi software dan sepenuhnya didasari
pada persyaratan dan spesifikasi software tersebut. Ini juga dikenal
sebagai behavioral testing.
BAB III
PERANCANGAN DAN IMPLEMENTASI
3.1 Tahap Perencanaan

Pada tahap perencanaan dilakukan wawancara dengan 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 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
2. procesor yang digunakan AMD RYZEN 3 3250U.
3. RAM yang digunakan sebesar 8192MB.
17
18
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
Gambar 3. 1 Use Case Diagram Admin

19
Pada use case admin berisi system yang digunakan admin dari login sampai
menerima konfirmasi pesanan user
Gambar 3. 2 Use Case Diagram User
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 danmasing-
masing use case diagram dapat membuat satu kegiatan pada kegiatan simulasi dan
transaksi-transaksi apa saja yang ada pada website
20
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

21
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

22
Gambar 3. 7 Daftar table
Gambar 3. 8 Table Brand
Gambar 3. 9 Table Categories
Gambar 3. 10 Table Counter

23
Gambar 3. 11 Table Items
Gambar 3. 12 Table Members
Gambar 3. 13 Table Oders

24
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 dipakaioleh website.
<?php
$servername = "localhost";
25
$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.17
26
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 Halaman Utama, di halaman utama ada beranda,daftar,
login, dan logout
2. Pelanggan yang ingin masuk harus mendaftar dan login terlebih
dahulu, setelah pelanggan login berada dihalaman utama, dihalaman ini
terdapat beberapa menu, yaitu: Makanan Kucing, Pasir, Litter Box,
Shopping Cart, Pengaturan.
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..
27
7. 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.18 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 Halaman
Utama harus login terlebih dahulu.
2. Setelah admin login, admin berada dihalaman Utama, 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.
28
6. Pada menu laporan, admin dapat melihat history order pelanggan.
3.6 Rancangan Program

Setelah menyiapkan database, source code siap ditulis didalam VisualStudio
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.
29
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
30
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
31
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
32
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

33
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
Gambar 3. 27 Rancangan Halaman Laporan Data Produk

34
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.
35
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.
36
Gambar 3. 30 Rancangan Halaman Laporan Data Pemesanan

Berdasarkan Tanggal
12. Rancangan Halaman Daftar Kontak Pelanggan

adalah rancangan tampilan Daftar Kontak Pelanggan,
dimana admin dapat melihat daftar kontak pelanggan.
Gambar 3. 31 Rancangan Halaman Daftar Kontak Pelanggan

37
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.
2. Halaman Masuk / login

38
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

39
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

40
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.
41
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
adalah rancangan tampilan Konfirmasi Pembayaran. Pada

halaman ini pengguna yang ingin melanjutkan harus memasukan
42
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
43
Gambar 3. 42 Tampilan Login
2. Dashboard
Gambar 3. 43 Tampilan Dashboard
3. Pesanan Admin
44
Gambar 3. 44 Tampilan Admin
4. Produk Brand
Gambar 3. 45 Tampilan Brand
5. Produk Kategori
45
Gambar 3. 46 Tampilan Kategori
6. Produk Subkategori
Gambar 3. 47 Tampilan SubKategori
7. Data Produk
Gambar 3. 48 Tampilan Data Produk
8. Laporan Data Produk

46
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
Gambar 3. 51 Tampilan Laporan Data Pemesanan

47
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
3.7.2 Hasil Tampilan Interface Pelanggan

1. Daftar
48
Gambar 3. 54 Tampilan Daftar
2. Masuk
49
Gambar 3. 55 Tampilan Login
3. Dashboard
Gambar 3. 56 Tampilan Dashboard

50
4. Makanan Kucing
Gambar 3. 57 Tampilan Makanan Kucing
5. Pasir Kucing
Gambar 3. 58 Tampilan Pasir kucing
6. LitterBox
51
Gambar 3. 59 Tampilan Litter Box
7. Brand
Gambar 3. 60 Tampilan Brand
8. KeranjangBelanja
Gambar 3. 61 Tampilan Keranjang

52
9. KonfirmasiPembayaran
Gambar 3. 62 Tampilan Konfirmasi Pembayaran
10. BuktiKonfirmasi
Gambar 3. 63 Tampilan Bukti

53
3.8 Uji Coba Aplikasi

Proses uji coba dilakukan dengan menggunakan metode Blackbox Testing.
Blackbox Testing digunakan karena jika terdapat kesalahan pada aplikasi dapat
langsung diketahui.
Tabel 3. 1 Hasil Pengujian Black Box Login Pelanggan
Hasil Yang Hasil Kesim

No Skenario Test Case
Diharapkan Pengujian pulan
1 Email dan Email: Sistem akan Sesuai Valid
Harapan
Password tidak (kosong) menolak dan
diisi kemudian Password: menampilkan
klik tombol (kosong) pesan
Login “Username dan
Password
required!”
2 Email diisi, dan Email: Sistem akan Sesuai Valid
Harapan
Password tidak Anandatri.dul menolak dan
diisi kemudian @gmail.com menampilkan
klik tombol Password: pesan
Login (kosong) “Password
required!”
3 Email tidak Email: Sistem akan Sesuai Valid
Harapan
diisi dan (kosong) menolak dan
Password diisi Password: menampilkan
kemudian klik Gharu106 pesan
tombol Login “Username
required!
54
Hasil Yang Hasil Kesim

Diharapkan Pengujian pulan
4 Email diisi Email: Sistem akan Sesuai Valid
Harapan
dengan tidak asdasbd menolak dan
sesuai dan Password: menampilkan
Password diisi Gharu106 pesan
dengan sesuai “Username atau
Password
kemudian klik
salah!”
tombol Login
5 Email dan Email: Sistem Sesuai Valid
Harapan
Password diisi Anandatri.dul menerima akses
dengan sesuai @gmail.com login kemudian
kemudian klik Password: menampilkan
tombol Login Gharu106 halaman
Home
Berdasarkan hasil uji coba black box testing pada halaman login pelanggan
dapat disimpulkan jika username dan password tidak diisi maka sistem akan
menolak dan menampilkan pesan untuk mengisi username dan password.
Tabel 3. 2Hasil Pengujian Black Box Login Admin
Hasil Yang Hasil Kesimp

Diharapkan Pengujian ulan
1 Username dan Username: Sistem akan Sesuai Valid
Harapan
Password tidak (kosong) menolak dan
diisi kemudian Password: menampilkan
klik tombol (kosong) pesan
Login “Username dan
Paassword
required!”
55
Hasil Yang Hasil Kesimp

Diharapkan Pengujian ulan
2 Username Username: Sistem akan Sesuai Valid
Harapan
diisi, dan admin menolak dan
Password tidak Password: menampilkan
diisi kemudian (kosong) pesan
klik tombol “Password
Login required!”
3 Username Username: Sistem akan Sesuai Valid

Harapan
tidak diisi dan (kosong) menolak dan
Password diisi Password: menampilkan
kemudian klik admin123 pesan
tombol Login “Username
required!”
4 Username diisi Username: Sistem akan Sesuai Valid

Harapan
dengan tidak admin222 menolak dan
sesuai dan 2Password menampilkan
Password diisi : pesan
dengan sesuai admin123 “Username atau
kemudian klik Password
tombol Login salah!”
5 Username dan Username: Sistem Sesuai Valid
Harapan
Password diisi admin menerima akses
dengan sesuai Password: login kemudian
kemudian klik admin123 menampilkan
tombol Login halaman
Dashboard
BAB IV
PENUTUP
4.1 Kesimpulan
Aplikasi pemesanan KIA PetShop telah berhasil dibuat dan sesuai dengan
metode penelitian yang telah dilakukan. Halaman dapat berjalan dengan baik sesuai
dengan rancangan yang telah dibuat. Pelanggan mendapatkan informasi mengenai
makanan dan perlengkapan hewan yang disediakan dan pelanggan dapat melakukan
pemesanan pada website KIA PetShop.
4.2 Saran
Aplikasi pemesanan KIA PetShop kedepannya dapat dikembangkan lebih
baik lagi seperti adanya penambahan fitur antara lain fitur pembayaran dan tampilan
yang ada dapat dibuat lebih menarik untuk meningkatkan minat pelanggan dalam
melakukan pemesanan
56
DAFTAR PUSTAKA
Andy Nugroho. 2019. Penerapan Sistem Informasi Penelitian Pada Lembaga

Penelitian dan Pengabdian Masyarakat Berbasis Web. Seminar Nasional Teknologi
Informasi, Bisnis, dan Desain
Akbar.LA, 2019. Perancangan Sistem Informasi Digital Berbasis Raspberry PI

Sebagai Alternatif Media Informasi. URL : http://eprints.polsri.ac.id/ [Tanggal
Akses 5 Januari 2022]
Arismanto, B & Rahmadhani, S. 2019. Perancangan software asisten dosen sebagai
media dalam pelaksanaan computer assisted learning di AMIK Indonesia Banda
Aceh. Smart Comp: Jurnalnya Orang Pintar Komputer8 (1), 38-43
Feradhita. 2021. Rancang Bangun Sistem Informasi Pemesanan Custom Furniture

Berbasis Website. 55-56
M Tahbani, E Pudjiarti. 2017. Penerapan Metode Waterfall Pada Sistem Informasi

Inventori Pt. Pangan Sehat Sejahtera. Jurnal Inkofar * Volume 1 No. 2
Muhammad Robith Adani. 2020. Perancangan Sistem Informasi Pemesanan Pada

Wahana Arung Jeram Berbasis Bootstrap. 841–846
Salma Awabin. 2020. Pengembangan Sistem Penerimaan Mahasiswa Baru pada

STIES Imam Asy Syafii Pekanbaru. Jurnal Intra-Tech, 3(1), 57–72.
Wati, Siska Fadhilah, Adian Fatchur Rochim, and Rinta Kridalukmana. "Sistem
Informasi Penjualan dan Pemesanan Layanan Berbasis Web dan SMS Gateway di
Petshop" PetZone"." Jurnal Teknologi dan Sistem Komputer 1.4 (2013): 113-121.
57
LAMPIRAN
• Admin/index.php
• <?php
• error_reporting(E_ALL ^ E_NOTICE);
•
• session_start();
•
• if((isset($_COOKIE['user_id']) && $_COOKIE['user_id'] != '') ||
(isset($_SESSION['user_id']) && $_SESSION['user_id'] != '')){
• header('location: miadmin.php');
• exit();
• }
• ?>
• <!DOCTYPE html>
• <html lang="en">
• <head>
• 
• <meta charset="utf-8">
• <meta http-equiv="X-UA-Compatible" content="IE=edge">
• <title>Login</title>
• <meta name="keywords" content="animals" />
• <meta name="author" content="Ananda Tri Putra"/>
•
• 
• <meta name="viewport" content="width=device-width, initial-scale=1" />
•
• 
•
• 
• <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
• <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
• <link rel="stylesheet" type="text/css" href="css/miiadmin.css" />
•
• 
• 
•
• </head>
• <body class="background-black">
• <?php
• include "connect.php";
•
• switch($_SERVER['QUERY_STRING']){
• default:
• ?>
•
• <div class="container">
• <div class="row">
• <div class="col-sm-6 col-md-4 col-md-offset-4">
• 
• <img class="logo-title" src="../logo/kia.png" />
• 
• <div class="account-wall">
• <?php
•
• $error = false;
• $userErr = $passErr = "";
•
• if(isset($_POST['signin'])){
• $user = trim($_POST['username']);
• $password = md5($_POST['password']);
• $remember = $_POST['remember'];
•
• $user = mysqli_real_escape_string($conn, $user);
• $password = mysqli_real_escape_string($conn, $password);
•
• if($_SERVER['REQUEST_METHOD'] == "POST"){
• if(empty($_POST['username'])){
• $error = true;
• $userErr = "Masukkan isi nama pengguna Anda";
• }
•
• if(empty($_POST['password'])){
• $error = true;
L-2
•
• $error = true;
• $passErr = "Masukkan isi kata sandi";
• }
• }
•
• if(!$error){
• if($user && $password){
•
• $login = mysqli_query($conn,"SELECT * FROM users WHERE
user='".$user."'");
• if(mysqli_num_rows($login) > 0){
• while($row=mysqli_fetch_assoc($login)){
• $id = $row['user_id'];
• $name = $row['fullname'];
• $db_pass = $row['pass'];
• if($password == $db_pass){
• $loginok = TRUE;
• }else{
• $loginok = FALSE;
• }
•
• if($loginok == TRUE){
• if($remember == "on"){
• setcookie("user_id", $id, time() + (86400*30));
• setcookie("fullname", $name, time() + (86400*30));
• setcookie("user", $user, time() + (86400*30));
• }elseif($remember == ""){
• $_SESSION['user_id'] = $id;
• $_SESSION['fullname'] = $name;
L-3
• $_SESSION['user'] = $user;
• }
• echo "<meta http-equiv='refresh' content='0;
url=miadmin.php'>";
• }else{
• $error = true;
• echo "<div class='alert alert-danger'>Nama pengguna dan
kata sandi Anda salah, silakan coba lagi!</div>";
• }
• }
• }else{
• $error = true;
• echo "<div class='alert alert-danger'>Mohon maaf data Anda
tidak di temukan!</div>";
• }
• }
• }
•
• }
• ?>
• <form action="index.php" method="post">
• <div class="form-group input-group groups">
• <span class="input-group-addon icons"><i class="fa fa-
user"></i></span>
• <input type="text" class="form-control form-input"
name="username" placeholder="Masukkan isi nama pengguna Anda">
• </div>
• <span class="text-danger msg-error"><?php echo $userErr; ?></span>
•
lock"></i></span>
• <input type="password" class="form-control form-input" id="form-
password" name="password" placeholder="Masukkan isi kata sandi">
• </div>
• <div class="checkboxcss" style="color:#FFF; float:right; margin-
bottom:2%;"><input type="checkbox" onchange="document.getElementById('form-
password').type = this.checked ? 'text' : 'password'">Lihat Kata Sandi</div>
• <span class="text-danger msg-error"><?php echo $passErr; ?></span>
•
• <button type="submit" class="btn btn-lg btn-primary btn-block"
name="signin">Masuk</button>
• </form>
• </div>
L-4
• <p class="text-center new-account"><a href="?resetuser">Reset Kata
Sandi</a></p>
• </div>
• </div>
• </div>
• <?php
• break;
• case 'signup';
• ?>
• 
• <img class="logo-title" src="../logo/miistore3.png" />
• 
• <?php
• $error = false;
• $name = $user = $pass = "";
• $nameErr = $userErr = $passErr = $cpassErr = "";
•
• if(isset($_POST['signup'])){
• $query = mysqli_query($conn,"SELECT * FROM users WHERE
user='".$_POST['user']."'");
•
• if(empty($_POST['fullname'])){
• $error = true;
• $nameErr = "Masukkan isi nama lengkap Anda";
• }else{
• $name = $_POST['fullname'];
• if(!preg_match("/^[a-zA-Z .\-']*$/",$_POST['fullname'])){
• $error = true;
• $nameErr = "Isi nama lengkap harus menggunakan huruf, karakter
dan spasi";
• }
• }
•
• if(empty($_POST['user'])){
• $error = true;
• }else{
• $user = $_POST['user'];
• if(!preg_match("/^[a-z0-9]*$/",$_POST['user'])){
• $error = true;
L-5
• $userErr = "Isi nama pengguna harus menggunakan huruf kecil
dan angka";
• }
• }
•
• if(empty($_POST['pass'])){
• $error = true;
• $passErr = "Masukkan isi kata sandi baru";
• }else{
• $pass = md5($_POST['pass']);
• if(strlen($_POST['pass']) < 6){
• $error = true;
• $passErr = "Isi kata sandi harus minimal 6 karakter";
• }
• }
•
• if(empty($_POST['cpass'])){
• $error = true;
• $cpassErr = "Masukkan isi konfirmasi kata sandi";
• }else{
• if($_POST['pass'] != $_POST['cpass']){
• $error = true;
• $cpassErr = "Kata sandi dan konfirmasi kata sandi tidak cocok";
• }
• }
• }
•
• if(!$error){
• $name = mysqli_real_escape_string($conn, $name);
• $user = mysqli_real_escape_string($conn, $user);
• $pass = mysqli_real_escape_string($conn, $pass);
• if(mysqli_num_rows($query) > 0){
• echo "<div class='alert alert-danger'>Nama pengguna sudah masih
ada, mohon di buat yang lain!</div>";
• }else{
• mysqli_query($conn,"INSERT INTO users VALUES
(null,'$name','$user','$pass')");
• echo "<meta http-equiv='refresh' content='0; url=index.php'>";
• }
• }
• }
• ?>
• <form action="?signup" method="post">
L-6
user"></i></span>
• <input type="text" class="form-control form-input"
name="fullname" placeholder="Masukkan nama lengkap Anda">
• </div>
• <span class="text-danger msg-error"><?php echo $nameErr;
?></span>
•
user"></i></span>
• <input type="text" class="form-control form-input" name="user"
placeholder="Masukkan nama pengguna Anda">
• </div>
•
key"></i></span>
• <input type="password" class="form-control form-input"
name="pass" placeholder="Masukkan kata sandi">
• </div>
•
lock"></i></span>
name="cpass" placeholder="Ulangi kata sandi lagi">
• </div>
• <span class="text-danger msg-error"><?php echo $cpassErr;
?></span>
•
name="signup">Daftar</button>
• </form>
• </div>
• <p class="text-center new-account">Pernah jadi anggota? <a
href="/miistore/miiadmin">Masuk</a></p>
• </div>
• </div>
• </div>
• <?php
• break;
• case "resetuser";
L-7
• ?>
• 
• 
• <?php
• $error = false;
• $user = "";
• $userErr = "";
•
• if(isset($_POST['reset'])){
• $error = true;
• }else{
• $user = $_POST['user'];
• $error = true;
• $userErr = "Isi nama pengguna harus menggunakan huruf kecil
dan angka";
• }
• }
• }
•
• if(!$error){
• if($user){
• $login = mysqli_query($conn,"SELECT * FROM users WHERE
user='".$user."'");
• $result = mysqli_num_rows($login);
• if($result > 0){
• $_SESSION['username'] = $user;
• echo "<meta http-equiv='refresh' content='0; url=reset.php'>";
• }else{
• $error = true;
• echo "<div class='alert alert-danger'>Nama pengguna Anda
salah, silakan coba lagi!</div>";
• }
• }
• }
• }
L-8
• ?>
• <form action="?resetuser" method="post">
user"></i></span>
• <input type="text" class="form-control form-input" name="user"
placeholder="Masukkan isi nama pengguna Anda">
• </div>
•
name="reset">Reset</button>
• </form>
• </div>
href="index.php">Masuk</a></p>
• </div>
• </div>
• </div>
• <?php
• break;
• }
• ?>
•
• 
• <script src="js/jquery.min.js"></script>
• <script src="js/bootstrap.min.js"></script>
• <script type="text/javascript" src="js/custom.js"></script>
•
• </body>
• </html>
• Dashboard/miadmin.php
• <?php
• require_once("connect.php");
•
•
• if(isset($_COOKIE['user_id']) && $_COOKIE['user_id'] != ''){
• $id = $_COOKIE['user_id'];
• }else if(isset($_SESSION['user_id']) && $_SESSION['user_id'] != ''){
• $id = $_SESSION['user_id'];
• }else{
• header('location: index.php');
• exit();
L-9
• }
• ?>
• <!DOCTYPE html>
• <head>
• 
• <title>Kia Petshop | Dashboard</title>
•
• <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-
scale=1" />
•
• 
•
•
• 
•
• </head>
• <body>
• <?php
• $query = mysqli_query($conn, "SELECT * FROM users WHERE user_id =
'".$id."'");
• $data = mysqli_fetch_array($query);
• ?>
• <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
• <div class="container-fluid">
• <div class="navbar-header">
• <a href="#main-toggle" id="menu-toggle" class="sidebar-toggle">
• <span class="sr-only">Toggle Navigation</span>
• </a>
• <a href="#" class="navbar-brand"><img src="../logo/kia.png" /></a>
• </div>
•
L-10
• <ul class="nav navbar-nav navbar-right">
• <li class="dropdown user-menu">
• <a class="dropdown-toggle" data-toggle="dropdown">
• <i class="fa fa-users"></i> <?php echo $data['fullname']; ?> <span
class="caret"></span>
• </a>
• <ul class="dropdown-menu" role="menu">
• <li><a href="profil.php?id=<?php echo $id;?>"><i class="fa fa-
user"></i> Profil</a></li>
• <li><a href="logout.php"><i class="fa fa-sign-out"></i>
Keluar</a></li>
• </ul>
• </li>
• </ul>
• </div>
• </nav>
•
• <div id="wrapper">
• <nav id="sidebar-wrapper">
• <ul class="sidebar-nav">
• <li class="active"><a href="miadmin.php"><i class="fa fa-dashboard"></i>
Beranda</a></li>
• <li><a href="order_confirmation.php"><i class="fa fa-shopping-cart"></i>
Pesanan</a></li>
• <li class="sidebar-child"><a href="#"><i class="fa fa-th"></i> Produk
Manager <i class="sidebar-fa fa fa-angle-down pull-right"></i></a>
• <ul class="sidebar-second-child">
• <li><a href="brands.php">Produk Brand</a></li>
• <li><a href="categories.php">Produk Kategori</a></li>
• <li><a href="subcategories.php">Produk Subkategori</a></li>
• <li><a href="product.php">Data Produk</a></li>
• </ul>
• </li>
• <li class="sidebar-child"><a href="#"><i class="fa fa-th"></i> Laporan <i
class="sidebar-fa fa fa-angle-down pull-right"></i></a>
• <li><a href="item_report.php">Laporan Data Produk</a></li>
• <li><a href="item_catsubcat_report.php">Laporan Data Produk
Berdasarkan Kategori / Subkategori</a></li>
• <li><a href="order_report.php">Laporan Data Pemesanan</a></li>
• <li><a href="order_report_bydate.php">Laporan Data Pemesanan
Berdasarkan Tanggal</a></li>
• <li><a href="customer_report.php">Daftar Kontak
Pelanggan</a></li>
• </ul>
L-11
• </li>
• </ul>
• </nav>
• <?php
• $sql = "SELECT (
• SELECT counter_visit FROM counter WHERE DATE(counter_date) =
DATE(CURRENT_DATE)
• ) AS today,
• (SELECT counter_visit FROM counter WHERE DATE(counter_date) =
DATE(CURRENT_DATE - INTERVAL 1 DAY)
• ) AS yesterday,
• (SELECT SUM(counter_visit) FROM counter WHERE
WEEKOFYEAR(counter_date) = WEEKOFYEAR(CURRENT_DATE - INTERVAL
1 WEEK)
• ) AS last_week,
WEEKOFYEAR(counter_date) = WEEKOFYEAR(CURRENT_DATE)
• ) AS this_week,
MONTH(counter_date) = MONTH(CURRENT_DATE) AND YEAR(counter_date)
= YEAR(CURRENT_DATE)
• ) AS this_month,
YEAR(counter_date) = YEAR(CURRENT_DATE)
• ) AS this_year";
• $query = mysqli_query($conn, $sql);
• $visit = mysqli_fetch_array($query);
• ?>
• <div id="page-content-wrapper">
• <div class="col-lg-12">
• <legend>Dashboard</legend>
• <div class="col-lg-2 col-xs-6 counters">
• <i class="fa fa-user"></i> Total Pengunjung Hari Ini
• <div class="counter_hit">
• <?php
• if(!empty($visit['today'])){
• echo $visit['today'];
• } else {
• echo '0';
• }
• ?>
• </div>
L-12
• </div>
• <i class="fa fa-user"></i> Total Pengunjung Kemarin</span>
• <?php
• if(!empty($visit['yesterday'])){
• echo $visit['yesterday'];
• } else {
• echo '0';
• }
• ?>
• </div>
• </div>
• <i class="fa fa-user"></i> Total Pengunjung Minggu Lalu</span>
• <?php
• if(!empty($visit['last_week'])){
• echo $visit['last_week'];
• } else {
• echo '0';
• }
• ?>
• </div>
• </div>
• <i class="fa fa-user"></i> Total Pengunjung Minggu Ini</span>
• <?php
• if(!empty($visit['this_week'])){
• echo $visit['this_week'];
• } else {
• echo '0';
• }
• ?>
• </div>
• </div>
• <i class="fa fa-user"></i> Total Pengunjung Bulan Ini</span>
• <?php
• if(!empty($visit['this_month'])){
• echo $visit['this_month'];
• } else {
• echo '0';
L-13
• }
• ?>
• </div>
• </div>
• <i class="fa fa-user"></i> Total Pengunjung Tahun Ini</span>
• <?php
• if(!empty($visit['this_year'])){
• echo $visit['this_year'];
• } else {
• echo '0';
• }
• ?>
• </div>
• </div>
• </div>
• </div>
• </div>
•
• </div>
• </div>
•
• <footer class="footer-bottom">
• <div class="footer-right">
• © <?php echo date ("Y")?> Kia Petshop
• </div>
• <div class="clearfix"></div>
• </footer>
•
• <script type="text/javascript" src="js/jquery.min.js"></script>
• <script type="text/javascript" src="js/bootstrap.min.js"></script>
•
• </body>
• </html>
•
• ProfilAdmin/profil.php
• <?php
•
L-14
• ob_start();
•
• }else{
• exit();
• }
• ?>
• <!DOCTYPE html>
• <head>
• 
• <title>Kia Petshop | Profil Saya</title>
•
scale=1" />
•
• 
•
•
• 
•
• </head>
• <body>
• <?php
• $ids = $_GET['id'];
• $query = mysqli_query($conn, "SELECT * FROM users WHERE user_id =
'".$ids."'");
L-15
• ?>
• </a>
• </div>
•
• <i class="fa fa-users"></i> <?php echo $data['fullname']; ?> <span
• </a>
• <li><a href="#"><i class="fa fa-user"></i> Profil</a></li>
Keluar</a></li>
• </ul>
• </li>
• </ul>
• </div>
• </nav>
•
• <nav id="sidebar-wrapper">
• <li><a href="miadmin.php"><i class="fa fa-dashboard"></i>
Beranda</a></li>
Pesanan</a></li>
• </ul>
• </li>
L-16
Pelanggan</a></li>
• </ul>
• </li>
• </ul>
• </nav>
• <?php
•
• $act = @$_GET['act'];
•
• switch($act){
• default:
• ?>
• <?php
•
• $error = false;
• $nama = $user = "";
• $namaErr = $userErr = "";
•
• if(isset($_POST['update'])){
•
• if(empty($_POST['fullname'])){
• $error = true;
• $namaErr = "Masukkan isi nama lengkap Anda";
• }else{
• $nama =
mysqli_real_escape_string($conn,$_POST['fullname']);
• if(!preg_match("/^[a-zA-Z .\-']*$/",$_POST['fullname'])){
• $error = true;
• $namaErr = "Isi nama lengkap harus menggunakan huruf,
karakter dan spasi";
• }
• }
L-17
•
• $error = true;
• $userErr = "Please enter an Username";
• }else{
• $user = mysqli_real_escape_string($conn,$_POST['user']);
• $error = true;
• $userErr = "Isi nama pengguna harus menggunakan huruf
kecil dan angka";
• }
• }
• }
•
• if(!$error){
• mysqli_query($conn,"UPDATE users SET
fullname='$nama',user='$user' WHERE user_id='".$id."'");
• header('location: miadmin.php');
• }
• }
• ?>
• <form action="profil.php?id=<?php echo $_GET['id'];?>" class="form-
horizontal" method="POST">
• <legend>Profil</legend>
• 
• <div class="form-group">
• <label class="col-md-2 control-label">Nama Lengkap Anda
<i>(required)</i></label>
• <div class="col-md-10">
• <input type="text" name="fullname" value="<?php echo
isset($_POST['fullname']) ? $_POST['fullname'] : $data['fullname']; ?>" class="form-
control">
• <input type="hidden" name="id" value="<?php echo
$_GET['id']; ?>">
• <span class="text-danger"><?php echo $namaErr ; ?></span>
• </div>
• </div>
• 
• <label class="col-md-2 control-label">Nama Pengguna
• <input type="text" name="user" value="<?php echo
isset($_POST['user']) ? $_POST['user'] : $data['user']; ?>" class="form-control">
• <span class="text-danger"><?php echo $userErr; ?></span>
L-18
• </div>
• </div>
• 
• <label class="col-md-2 control-label"></label>
• <button type="submit" class="btn btn-warning"
name="update">Ubah Profil</button>
• <a href="miadmin.php"><button type="button" class="btn btn-
link">Batal</button></a>
• </div>
• </div>
• </form>
• <p class="text-center">Apakah Anda yakin menghapus akun ini? <a
href="?act=delete">Hapus Akun Anda</a></p>
• </div>
• </div>
• </div>
• </div>
• <?php
• break;
• case 'delete':
• ?>
• <h1>Hapus Akun Anda</h1>
• <b>Yakin ingin menonaktifkan akun Anda?</b><br/>
• <p>Jika akun Anda dinonaktifkan, profil Anda akan dihapus
selamanya. <br/>
• <form action="?act=delete" method="POST" style="margin-bottom:
5%;">
• <input type="submit" class="btn btn-warning" name="deactivated"
value="Tutup Akun"/>
• <a href="miadmin.php"><button type="button" class="btn btn-
link">Tidak</button></a>
• </form>
• <?php
• if(isset($_POST['deactivated'])){
• $query = "DELETE FROM users WHERE user_id = '".$id."'";
• if(!$res = mysqli_query($conn,$query)){
• exit(mysqli_error());
• }
• setcookie('user_id','', time() - 3600);
L-19
• session_destroy();
•
• echo "<meta http-equiv='refresh' content='0; url=index.php'>";
• }
• ?>
• </div>
• </div>
• </div>
• </div>
• <?php
• break;
• }
• ?>
• </div>
•
• </div>
• </footer>
•
•
• </body>
• </html>
• <?php ob_end_flush(); ?>
• ResetKataSandi/reset.php
• <?php
• error_reporting(E_ALL ^ E_NOTICE);
•
•
•
• if(isset($_SESSION['username']) && $_SESSION['username'] != ''){
• $user = $_SESSION['username'];
• }else{
• exit();
• }
L-20
•
• ?>
• <!DOCTYPE html>
• <head>
• 
• <title>Kia Petshop | Reset kata sandi</title>
•
• <meta name="viewport" content="width=device-width, initial-scale=1" />
•
• 
•
•
• 
•
• </head>
• <body class="background-black">
• 
• 
• <?php
• $error = false;
• $pass = "";
• $passErr = $cpassErr = "";
•
• if(isset($_POST['newpass'])){
L-21
• $error = true;
• $passErr = "Masukkan isi kata sandi baru";
• }else{
• $error = true;
• $passErr = "Isi kata sandi harus minimal 6 karakter";
• }
• }
•
• $error = true;
• $cpassErr = "Masukkan isi konfirmasi kata sandi";
• }else{
• $error = true;
• $cpassErr = "Kata sandi dan konfirmasi kata sandi tidak
cocok";
• }
• }
• }
•
• if(!$error){
• mysqli_query($conn,"UPDATE users SET pass='".$pass."' WHERE
user='".$user."'");
• $error = true;
• echo "<div class='alert alert-success'>Kata sandi Anda berhasil di
ubah</div>";
• }
• }
• ?>
• <form action="reset.php" method="post">
key"></i></span>
name="pass" placeholder="Masukkan isi kata sandi baru">
• </div>
•
lock"></i></span>
name="cpass" placeholder="Ulangi kata sandi lagi">
L-22
• </div>
?></span>
•
name="newpass">Ubah Kata Sandi</button>
• </form>
• </div>
href="index.php">Masuk</a></p>
• </div>
• </div>
• </div>
•
• </body>
• </html>
• Kategori/categories.php
• <?php
•
• ob_start();
•
• }else{
• exit();
• }
• ?>
• <!DOCTYPE html>
• <head>
• 
• <title>Kia Petshop | Kategori</title>
L-23
•
scale=1" />
•
• 
•
• <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
•
• 
•
• </head>
• <body>
• <?php
• $queryname = mysqli_query($conn, "SELECT * FROM users WHERE user_id =
'".$id."'");
• $name = mysqli_fetch_array($queryname);
• ?>
• </a>
• </div>
•
• <i class="fa fa-users"></i> <?php echo $name['fullname']; ?> <span
• </a>
L-24
Keluar</a></li>
• </ul>
• </li>
• </ul>
• </div>
• </nav>
•
• <aside id="sidebar-wrapper">
Beranda</a></li>
Pesanan</a></li>
• <ul class="sidebar-second-child" style="display:block;">
• <li class="active"><a href="categories.php"></i> Produk
Kategori</a></li>
• </ul>
• </li>
Pelanggan</a></li>
• </ul>
• </li>
•
• </ul>
• </aside>
• <?php
•
• $act = @$_GET['act'];
L-25
•
• switch($act){
• default:
•
• ?>
• <h1>Kategori</h1>
• <a href="?act=add" class="btn btn-default"><i class="fa fa-plus"></i>
Tambah Baru</a>
•
• <div class="table-responsive" style="margin-top:10px;">
• <table id="data" class="table table-bordered results">
• <thead>
• <tr>
• <th width="10">#</th>
• <th>Nama Kategori</th>
• <th>Edit</th>
• <th>Hapus</th>
• </tr>
• </thead>
• <tbody>
• <?php
• $sql = "SELECT * FROM categories";
• $no = 0;
• while($row = mysqli_fetch_assoc($query)){
• ?>
• <tr>
• <td width="10" align="center"><?php echo ++$no; ?></td>
• <td><?php echo $row['category']; ?></td>
• <td width="50" align="center">
• <a href="?act=edit&id=<?php echo $row['cat_id']; ?>"
class="mybtn"><i class="fa fa-pencil-square-o"></i></a>
• </td>
• <a href="<?php echo $row['cat_id']; ?>" data-
target="#confirm-delete_<?php echo $row['cat_id']; ?>" data-toggle="modal"
class="mybtn btn-show"><i class="fa fa-trash-o"></i></a>
• <div class="modal fade" id="confirm-delete_<?php echo
$row['cat_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
L-26
• <div class="modal-dialog">
• <div class="modal-content">
• <div class="modal-header">
• <button type="button" class="close" data-
dismiss="modal" aria-label="Close" aria-hidden="true">×</button>
• <h4 class="modal-tittle">
• <i class="fa fa-trash-o"></i> Konfirmasi
(<?php echo $row['cat_id']; ?>)
• </h4>
• </div>
• <div class="modal-body">
• <p>Yakinkah Anda ingin menghapus data ini
?</p>
• </div>
• <div class="modal-footer">
• <a href="?act=delete&id=<?php echo
$row['cat_id']; ?>" class="btn btn-danger" id="<?php echo $row['cat_id'];
?>">Ya</a>
• <a href="#" type="button" class="btn btn-default
btn-cancel" data-dismiss="modal" aria-hidden="true">Tidak</a>
• </div>
• </div>
• </div>
• </div>
• </td>
• </tr>
• <?php } ?>
• </tbody>
• </table>
• </div>
• </div>
• </div>
• </div>
• </div>
•
• <?php
• break;
• case 'add':
• ?>
•
•
L-27
• <?php
• $error = false;
•
• $category = "";
• $catErr = "";
•
• if(isset($_POST['save'])){
• $query = mysqli_query($conn,"SELECT * FROM categories
WHERE category='".$_POST['cat_name']."'");
•
• if(empty($_POST['cat_name'])){
• $error = true;
• $catErr = "Masukkan isi nama kategori";
• }else{
• $category = $_POST['cat_name'];
• if(!preg_match("/^[a-zA-Z ]*$/",$_POST['cat_name'])){
• $error = true;
• $catErr = "Isi nama kategori harus menggunakan huruf dan
spasi";
• }
• }
• }
•
• if(!$error){
• echo "<div class='alert alert-danger'>Kategori
<b>$category</b> sudah masih ada!</div>";
• }else{
• mysqli_query($conn,"INSERT INTO categories VALUES
(NULL,'$category')");
• header('location: categories.php');
• }
• }
• }
• ?>
•
• <form action="?act=add" class="form-horizontal" method="POST">
• <legend>Tambah Baru</legend>
• 
• <label class="col-md-2 control-label">Nama Kategori
L-28
• <input type="text" name="cat_name" placeholder="Masukkan
isi nama kategori" class="form-control" value="<?php echo isset($category) ?
$category : ' ';?>">
• <span class="text-danger"><?php echo $catErr ; ?></span>
• </div>
• </div>
• 
name="save">Simpan</button>
• <a href="categories.php"><button type="button" class="btn
btn-link">Batal</button></a>
• </div>
• </div>
• </form>
• </div>
• </div>
• </div>
• </div>
• <?php
• break;
• case "edit":
• ?>
• <?php
•
• $id = $_GET['id'];
•
• $query = mysqli_query($conn, "SELECT * FROM categories WHERE
cat_id = '".$id."'");
•
• $error = false;
• $category = "";
• $catErr = "";
•
•
• if(empty($_POST['cat_name'])){
L-29
• $error = true;
• $catErr = "Please enter the category name";
• }else{
• $category =
mysqli_real_escape_string($conn,$_POST['cat_name']);
• if(!preg_match("/^[a-zA-Z ]*$/",$_POST['cat_name'])){
• $error = true;
• $catErr = "Name must contain only alphabets and space";
• }
• }
• }
•
• if(!$error){
• mysqli_query($conn,"UPDATE categories SET
category='$category' WHERE cat_id='".$id."'");
• }
• }
•
• ?>
• <form action="?act=edit&id=<?php echo $_GET['id'];?>" class="form-
horizontal" method="POST">
• <legend>Edit Category</legend>
• 
• <label class="col-md-2 control-label">Nama Kategori
• <input type="text" name="cat_name" value="<?php echo
isset($_POST['cat_name']) ? $_POST['cat_name'] : $data['category']; ?>"
class="form-control">
$_GET['id']; ?>">
• <span class="text-danger"><?php echo $catErr ; ?></span>
• </div>
• </div>
• 
name="update">Ubah</button>
• <a href="categories.php"><button type="button" class="btn
btn-link">Batal</button></a>
• </div>
L-30
• </div>
• </form>
• </div>
• </div>
• </div>
• </div>
• <?php
• break;
• case "delete":
• if(isset($_GET['id'])){
• $id = $_GET['id'];
• $query = "DELETE FROM categories WHERE cat_id = '$id'";
• }
• }
• ?>
•
• <?php
• break;
• }
• ?>
• </div>
•
• </div>
• </footer>
•
• <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
•
• </body>
• </html>
•
• <?php
• ob_end_flush();
• ?>
L-31
• Brand/brands.php
• <?php
•
• ob_start();
•
• $id = $_GET['user_id'];
• }else{
• exit();
• }
• ?>
• <!DOCTYPE html>
• <head>
• 
• <title>Kia Petshop | Brands</title>
•
scale=1" />
•
• 
•
• <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
•
• 
•
L-32
• </head>
• <body>
• <?php
• $queryname = mysqli_query($conn, "SELECT * FROM users WHERE user_id =
'".$id."'");
• $name = mysqli_fetch_array($queryname);
• ?>
• </a>
• </div>
•
• <i class="fa fa-users"></i> <?php echo $name['fullname']; ?> <span
• </a>
Keluar</a></li>
• </ul>
• </li>
• </ul>
• </div>
• </nav>
•
• <aside id="sidebar-wrapper">
Beranda</a></li>
Pesanan</a></li>
• <ul class="sidebar-second-child" style="display:block;">
• <li class="active"><a href="brands.php">Produk Brand</a></li>
L-33
• </ul>
• </li>
Pelanggan</a></li>
• </ul>
• </li>
• </ul>
• </aside>
• <?php
•
• $act = @$_GET['act'];
•
• switch($act){
• default:
•
• ?>
• <h1>Brand</h1>
• <a href="?act=add" class="btn btn-default"><i class="fa fa-plus"></i>
Tambah Baru</a>
•
• <div class="table-responsive" style="margin-top:10px;">
• <table id="data" class="table table-bordered results">
• <thead>
• <tr>
• <th width="10">#</th>
• <th>Nama Brand</th>
• <th>Logo</th>
• <th>Edit</th>
• <th>Hapus</th>
L-34
• </tr>
• </thead>
• <tbody>
• <?php
• $sql = "SELECT * FROM brands";
• $no = 0;
• while($row = mysqli_fetch_assoc($query)){
•
• ?>
• <tr>
• <td width="10" align="center"><?php echo ++$no; ?></td>
• <td><?php echo $row['brand']; ?></td>
• <td align="center"><img src="logo/<?php echo $row['logo'];
?>" class="img-brand"/></td>
• <a href="?act=edit&id=<?php echo $row['brd_id']; ?>"
class="mybtn"><i class="fa fa-pencil-square-o"></i></a>
• </td>
• <a href="<?php echo $row['brd_id']; ?>" data-
target="#confirm-delete_<?php echo $row['brd_id']; ?>" data-toggle="modal"
class="mybtn btn-show"><i class="fa fa-trash-o"></i></a>
• <div class="modal fade" id="confirm-delete_<?php echo
$row['brd_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
• <div class="modal-dialog">
• <div class="modal-content">
• <div class="modal-header">
• <button type="button" class="close" data-
dismiss="modal" aria-label="Close" aria-hidden="true">×</button>
• <h4 class="modal-tittle">
• <i class="fa fa-trash-o"></i> Konfirmasi
(<?php echo $row['brd_id']; ?>)
• </h4>
• </div>
• <div class="modal-body">
• <p>Yakinkah Anda ingin menghapus data
ini?</p>
• </div>
• <div class="modal-footer">
• <a href="?act=delete&id=<?php echo
$row['brd_id']; ?>" class="btn btn-danger" id="<?php echo $row['brd_id'];
?>">Ya</a>
L-35
• <a href="#" type="button" class="btn btn-default
btn-cancel" data-dismiss="modal" aria-hidden="true">Tidak</a>
• </div>
• </div>
• </div>
• </div>
• </td>
• </tr>
• <?php } ?>
• </tbody>
• </table>
• </div>
• </div>
• </div>
• </div>
• </div>
• <?php
• break;
• case 'add':
• ?>
• <?php
• $error = false;
•
• $brand = $logo = "";
• $brandErr = $logoErr = "";
•
•
• if(isset($_POST['save'])){
• $query = mysqli_query($conn,"SELECT * FROM brands
WHERE brand='".$_POST['brand_name']."'");
•
• $img = $_FILES['logo']['name'];
•
• if(empty($_POST['brand_name'])){
• $error = true;
• $brandErr = "Masukkan isi nama brand";
• }else{
• $brand = $_POST['brand_name'];
• if(!preg_match("/^[a-zA-Z0-9 .\-
]+$/i",$_POST['brand_name'])){
L-36
• $error = true;
• $brandErr = "Isi nama brand harus menggunakan angka,
huruf, karakter dan spasi";
• }
• }
•
• if($_FILES['logo']['error'] != 0){
• $error = true;
• $logoErr = "Please select image";
• }else{
• $logo = $_FILES['logo']['name'];
• }
•
• }
•
• if(!$error){
• echo "<div class='alert alert-danger'>Brand <b>$brand</b>
sudah masih ada!</div>";
• }else{
• if(strlen($logo)>0){
• if(is_uploaded_file($_FILES['logo']['tmp_name'])){
• move_uploaded_file($_FILES['logo']['tmp_name'],"logo
/".$img);
• }
• }
• mysqli_query($conn,"INSERT INTO brands VALUES
(NULL,'$brand','$img')");
• header('location: brands.php');
• }
• }
• }
• ?>
•
• <form action="?act=add" class="form-horizontal" method="POST"
enctype="multipart/form-data">
• <legend>Tambah baru</legend>
• 
• <label class="col-md-2 control-label">Nama Brand
• <input type="text" name="brand_name"
placeholder="Masukkan isi nama brand" class="form-control" value="<?php echo
isset($brand) ? $brand : ' ';?>">
L-37
• <span class="text-danger"><?php echo $brandErr ; ?></span>
• </div>
• </div>
• 
• <label class="col-md-2 control-label">Pilih Gambar Logo</label>
• <div id="image-preview-div"></div>
• <input type="file" name="logo" id="imgjs">
• <span class="text-danger"><?php echo $logoErr ; ?></span>
• <div id="message"></div>
• </div>
• </div>
• 
name="save">Simpan</button>
• <a href="brands.php"><button type="button" class="btn btn-
• </div>
• </div>
• </form>
• </div>
• </div>
• </div>
• </div>
• <?php
• break;
• case "edit":
• ?>
• <?php
•
• $id = $_GET['id'];
•
• $query = mysqli_query($conn, "SELECT * FROM brands WHERE
brd_id = '".$id."'");
•
• $error = false;
L-38
• $brand = "";
• $brandErr = "";
•
•
• $logo= $_FILES['logo']['name'];
•
•
• if(empty($_POST['brand_name'])){
• $error = true;
• $brandErr = "Masukkan isi nama brand";
• }else{
• $brand =
mysqli_real_escape_string($conn,$_POST['brand_name']);
• if(!preg_match("/^[a-zA-Z0-9 .\-
&]+$/i",$_POST['brand_name'])){
• $error = true;
• $brandErr = "Nama brand harus menggunakan angka, huruf,
• }
• }
•
• }
•
• if(move_uploaded_file($_FILES['logo']['tmp_name'],"logo/".$logo)){
• $sql = mysqli_query($conn, "SELECT logo FROM brands WHERE
brd_id = '".$id."'");
• $img = mysqli_fetch_array($sql);
•
• if(is_file("logo/".$img['logo'])){
• unlink("logo/".$img['logo']);
• }
• mysqli_query($conn,"UPDATE brands SET logo='$logo' WHERE
brd_id='".$id."'");
• }
•
• if(!$error){
• mysqli_query($conn,"UPDATE brands SET brand='$brand'
WHERE brd_id='".$id."'");
• }
• }
•
• ?>
L-39
• <form action="?act=edit&id=<?php echo $_GET['id'];?>" class="form-
horizontal" method="POST" enctype="multipart/form-data">
• <legend>Edit Brand</legend>
• 
• <label class="col-md-2 control-label">Nama Brand
• <input type="text" name="brand_name" value="<?php echo
isset($_POST['brand_name']) ? $_POST['brand_name'] : $data['brand']; ?>"
$_GET['id']; ?>">
• <span class="text-danger"><?php echo $brandErr ; ?></span>
• </div>
• </div>
•
• 
• <label class="col-md-2 control-label">Pilih Gambar Logo</label>
• <div id="image-preview-div">
• <?php
• echo '<img src="logo/'.$data['logo'].'" class="preview-
img">';
• ?>
• </div>
• <input type="file" name="logo" id="imgjs">
• <div id="message"></div>
• </div>
• </div>
•
• 
name="update">Update</button>
• <a href="brands.php"><button type="button" class="btn btn-
• </div>
• </div>
• </form>
• </div>
• </div>
L-40
• </div>
• </div>
• <?php
• break;
• case "delete":
• if(isset($_GET['id'])){
• $id = $_GET['id'];
• $query = "DELETE FROM brands WHERE brd_id = '$id'";
•
• $sql = mysqli_query($conn, "SELECT logo FROM brands WHERE brd_id
= '".$id."'");
• $img = mysqli_fetch_array($sql);
•
• if(is_file("logo/".$img['logo'])){
• unlink("logo/".$img['logo']);
• }
•
• }
• }
• ?>
•
• <?php
• break;
• }
• ?>
• </div>
•
• </div>
• </footer>
•
• <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
•
• </body>
• </html>
L-41
•
• <?php
• ob_end_flush();
• ?>
• Login/login.php
• <h1 class="well"><center>Masuk dengan Kia Petshop</center></h1>
• <div class="col-lg-12 well">
• <?php
• $error = false;
• $emailErr = $passErr = "";
•
• if(isset($_POST['signin'])){
• $email = mysqli_real_escape_string($conn, trim($_POST['email']));
• $password = mysqli_real_escape_string($conn, md5($_POST['password']));
• $remember = $_POST['remember'];
•
• if(empty($_POST['email'])){
• $error = true;
• $emailErr = "Masukkan isi alamat email";
• }
•
• if(empty($_POST['password'])){
• $error = true;
• $passErr = "Masukkan isi kata sandi";
• }
• }
•
• if(!$error){
• if($email && $password){
• $login = mysqli_query($conn,"SELECT * FROM members WHERE
email='".$email."'");
• while($row=mysqli_fetch_assoc($login)){
• $member = $row['member_id'];
• $name = $row['fullname'];
• $db_pass = $row['password'];
• if($password == $db_pass){
• $loginok = TRUE;
• }else{
• $loginok = FALSE;
• }
•
L-42
• if($loginok == TRUE){
• if($remember == "on"){
• setcookie("member_id", $member, time() + (86400*30));
• setcookie("fullname", $name, time() + (86400*30));
• setcookie("email", $email, time() + (86400*30));
• }elseif($remember == ""){
• $_SESSION['member_id'] = $member;
• $_SESSION['fullname'] = $name;
• $_SESSION['email'] = $email;
• }
• echo "<meta http-equiv='refresh' content='0; url=../index.php'>";
• }else{
• $error = true;
• echo "<div class='alert alert-danger'>Email dan kata sandi Anda
salah, Silakan coba lagi!</div>";
• }
• }
• }
• }
• }
• ?>
• <form action="../index.php?p=login" method="POST">
• <div class="col-sm-12">
• <div class="col-sm-6 form-group">
• <label>Email :</label>
• <input type="text" class="form-control" name="email"
placeholder="Masukkan isi email">
• <span class="text-danger msg-error"><?php echo $emailErr;
?></span>
• </div>
•
• <label>Kata Sandi :</label>
• <div class="input-group">
• <input type="password" id="password" name="password"
• <div class="input-group-addon">
• <span>Show</span>
• </div>
• </div>
• <span class="text-danger msg-error"><?php echo $passErr;
?></span>
• </div>
• </div>
L-43
•
• <div class="checkboxcss"><input type="checkbox"
name="remember" value="on"> Ingat Saya</div>
• </div>
• </div>
•
• 
• <center>
name="signin">Masuk</button>
• <a href="../index.php"><button type="button" class="btn btn-
• </div>
• </center>
•
• </div>
• </form>
• </div>
• </div>
• <div class="well" style="margin-bottom: 25%;"><p class="text-center new-
account">Sudahkah Anda mendaftar belum? <a href="../index.php?p=register">Buat
akun baru</a></p></div>
• </div>
• Registeruser/register.php
• <h1 class="well"><center>Pendaftaran Kia Petshop</center></h1>
• <div class="col-lg-12 well">
• <?php
•
• $error = false;
• $fname = $lname = $gender = $address = $city = $state = $zip = $phone =
$email = $pass = "";
• $fnameErr = $lnameErr = $gender = $addressErr = $cityErr = $stateErr =
$zipErr = $phoneErr = $emailErr = $passErr = $cpassErr = $agreeErr = "";
•
• if(isset($_POST['signup'])){
• $query = mysqli_query($conn,"SELECT * FROM members WHERE
email='".$_POST['email']."'");
•
L-44
• if(empty($_POST['fname'])){
• $error = true;
• $fnameErr = "Masukan isi nama pertama Anda";
• }else{
• $fname = $_POST['fname'];
• if(!preg_match("/^[a-zA-Z .\-']*$/",$_POST['fname'])){
• $error = true;
• $fnameErr = "Isi nama harus menggunakan huruf, karakter dan
spasi";
• }
• }
•
• if(empty($_POST['lname'])){
• $error = true;
• $lnameErr = "Masukan isi nama terakhir Anda";
• }else{
• $lname = $_POST['lname'];
• if(!preg_match("/^[a-zA-Z .\-']*$/",$_POST['lname'])){
• $error = true;
• $lnameErr = "Isi nama harus menggunakan huruf, karakter dan
spasi";
• }
• }
•
• if(trim($_POST['gender'])=="blank"){
• $error = true;
• $genderErr = "Pilih salah satu jenis kelamin Anda";
• }else{
• $gender = $_POST['gender'];
• if($gender == "Laki-laki"){
• $A = "selected";
• }elseif($gender == "Perempuan"){
• $B = "selected";
• }
• }
•
• if(empty($_POST['address'])){
• $error = true;
• $addressErr = "Masukan isi alamat Anda";
• }else{
• $address = $_POST['address'];
• }
•
• if(empty($_POST['city'])){
L-45
• $error = true;
• $cityErr = "Masukan isi nama kota atau kabupaten";
• }else{
• $city = $_POST['city'];
• if(!preg_match("/^[a-zA-Z -']*$/",$_POST['city'])){
• $error = true;
• $cityErr = "Isi nama kota atau kabupaten harus menggunakan huruf,
• }
• }
•
• if(empty($_POST['state'])){
• $error = true;
• $stateErr = "Masukan isi provinsi";
• }else{
• $state = $_POST['state'];
• if(!preg_match("/^[a-zA-Z .\-,']*$/",$_POST['state'])){
• $error = true;
• $stateErr = "Isi provinsi harus menggunakan huruf, karakter dan
spasi";
• }
• }
•
• if(empty($_POST['postcode'])){
• $error = true;
• $zipErr = "Masukan isi kode pos";
• }else{
• $zip = $_POST['postcode'];
• if(!is_numeric($zip)){
• $error = true;
• $zipErr = "Isi kode pos hanya menggunakan angka";
• }
• }
•
• if(empty($_POST['phone'])){
• $error = true;
• $phoneErr = "Masukan isi nomor telepon";
• }else{
• $phone = $_POST['phone'];
• if(!is_numeric($phone)){
• $error = true;
• $phoneErr = "Isi nomor telepon hanya menggunakan angka";
• }
• }
•
L-46
• if(empty($_POST['email'])){
• $error = true;
• $emailErr = "Masukan isi alamat email Anda";
• }else{
• $email = $_POST['email'];
• if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9.]+)*@[a-z0-9-]+(\.[a-z0-9-
]+)*(\.[a-z]{2,})$/", $_POST['email'])){
• $error = true;
• $emailErr = "Isi alamat email dengan benar";
• }
• }
•
• $error = true;
• $passErr = "Masukan isi kata sandi";
• }else{
• $error = true;
• $passErr = "Kata sandi harus minimal 6 karakter";
• }
• }
•
• $error = true;
• $cpassErr = "Masukan isi konfirmasi kata sandi";
• }else{
• $error = true;
• $cpassErr = "Kata sandi dan konfirmasi kata sandi tidak cocok";
• }
• }
•
• if(!isset($_POST['agree']) == '1'){
• $error = true;
• $agreeErr = "Silakan di centang apabila Anda menyetujuinya";
• }
• }
•
• if(!$error){
• echo "<div class='alert alert-danger'>Email $email sudah masih ada,
mohon di buat yang lain!</div>";
• }else{
• $id = autoNumber('member_id','members');
L-47
• $name = $fname." ".$lname;
• $email = mysqli_real_escape_string($conn, $email);
• $pass = mysqli_real_escape_string($conn, $pass);
• date_default_timezone_set('Asia/Jakarta');
• $regdate = date('Y-m-d G:i');
•
• mysqli_query($conn,"INSERT INTO members VALUES
('$id','$name','$gender','$address','$city','$state','$zip','$phone','$email','$pass','$regdate
')");
•
• echo "<meta http-equiv='refresh' content='0; url=../index.php'>";
• }
• }
• }
• ?>
• <form action="../index.php?p=register" method="POST">
• <div class="col-sm-12">
• <label>Nama Pertama :</label>
• <input type="text" class="form-control" name="fname"
placeholder="Masukan isi nama Anda" value="<?php echo isset($fname) ? $fname : '
';?>">
• <span class="text-danger msg-error"><?php echo $fnameErr;
?></span>
• </div>
•
• <label>Nama Terakhir :</label>
• <input type="text" class="form-control" name="lname"
placeholder="Masukan isi nama Anda" value="<?php echo isset($lname) ? $lname : '
';?>">
• <span class="text-danger msg-error"><?php echo $lnameErr;
?></span>
• </div>
• </div>
•
• <label>Jenis Kelamin :</label>
• <select name="gender" class="form-control">
• <option value="blank">--- Pilih jenis kelamin Anda ---</option>
• <option value="Laki-laki" <?php echo $A; ?>>Laki-laki</option>
• <option value="Perempuan" <?php echo $B;
?>>Perempuan</option>
L-48
• </select>
• <span class="text-danger msg-error"><?php echo $genderErr;
?></span>
• </div>
• </div>
• <label>Alamat :</label>
• <input type="text" class="form-control" name="address"
placeholder="Masukan isi alamat" value="<?php echo isset($address) ? $address : '
';?>">
• <span class="text-danger msg-error"><?php echo $addressErr;
?></span>
• </div>
• </div>
•
• <label>Kota / Kabupaten :</label>
• <input type="text" class="form-control" name="city"
placeholder="Masukan isi nama kota atau kabupaten" value="<?php echo isset($city)
? $city : ' ';?>">
• <span class="text-danger msg-error"><?php echo $cityErr;
?></span>
• </div>
•
• <label>Provinsi :</label>
• <input type="text" class="form-control" name="state"
placeholder="Masukan isi provinsi" value="<?php echo isset($state) ? $state : ' ';?>">
• <span class="text-danger msg-error"><?php echo $stateErr;
?></span>
• </div>
• </div>
•
• <label>Kode Pos :</label>
• <input type="text" class="form-control" name="postcode"
placeholder="Masukan isi kode pos" value="<?php echo isset($zip) ? $zip : ' ';?>">
• <span class="text-danger msg-error"><?php echo $zipErr;
?></span>
• </div>
•
L-49
• <label>Phone Number :</label>
• <input type="text" class="form-control" name="phone"
maxlength="14" placeholder="Masukan isi nomor telepon Anda" value="+62">
• <span class="text-danger msg-error"><?php echo $phoneErr;
?></span>
• </div>
• </div>
•
• <label>Alamat Email :</label>
• <input type="text" class="form-control" name="email"
placeholder="Masukan isi alamat email" value="<?php echo isset($email) ? $email : '
';?>">
• <span>Example: yourname@mail.com</span><br/>
• <span class="text-danger msg-error"><?php echo $emailErr;
?></span>
• </div>
• <label>Kata Sandi :</label>
• <input type="password" class="form-control" name="pass"
placeholder="Masukan kata sandi sini">
• <span class="text-danger msg-error"><?php echo $passErr;
?></span>
• </div>
• <label>Konfirmasi Kata Sandi :</label>
• <input type="password" class="form-control" name="cpass"
placeholder="Masukan kata sandi lagi">
?></span>
• </div>
• </div>
•
• <center>
• <div class="checkboxcss"><input type="checkbox" name="agree"
value="1"> Saya setuju akan siap mengikut aturan ini</div>
• <span class="text-danger msg-error"><?php echo $agreeErr;
?></span>
• </div>
• </center>
•
• 
• <center>
L-50
name="signup">Daftar</button>
• <a href="../index.php"><button type="button" class="btn btn-
• </div>
• </center>
•
• </div>
• </form>
• </div>
• </div>
• <div class="well"><p class="text-center new-account">Pernah jadi anggota? <a
href="../index.php?p=login">Masuk</a></p></div>
• </div>
L-51

Revisi AnandaTriPutra 4IA12

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Revisi AnandaTriPutra 4IA12

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS GUNADARMA

FAKULTAS TEKNOLOGI INDUSTRI

Pembuatan Website E-commerce KIA Petshop

Jurusan : Teknik Informatika

Pembimbing : Dr. Dharmayanti S.T, MMSI

Diajukan Guna Melengkapi Sebagian Syarat Dalam Mencapai

Saya yang bertanda tangan di bawah ini:

(Ananda Tri Putra Perdana)

Judul PI : PEMBUATAN WEBSITE E-COMMERCE

(Dr. Dharmayanti S.T, MMSI.) (Dr. Achmad Fahrurozi, S.Si., M.Si.)

Ketua Jurusan Teknik Informatika

(Dr. Lintang Yuniar Banowosari, S.Kom., M.Sc.)

Ananda Tri Putra Perdana. 50418697

Ananda Tri Putra Perdana

UNIVERSITAS GUNADARMA FAKULTAS TEKNOLOGI INDUSTRI ........................................... i

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

Tabel 3. 1 Hasil Pengujian Black Box Login Pelanggan .................................................. 53

1.1 Latar Belakang Masalah

1.2 Batasan Masalah

1. Pembuatan aplikasi website penjualan ini menggunakan bahasa

2. Database yang digunakan dalam pembuatan website penjualan ini

3. Rancangan pembuatan Kia PetShop ini mencakup pembuatan akun,

1.4 Metode Penelitian

1.5 Sistematika Penulisan

BAB II TINJAUAN PUSTAKA

BAB III ANALISIS DAN PEMBAHASAN

PHP merupakan bahasa pemrograman server-side, maka script dari PHP

MySQL termasuk ke dalam RDBMS (Relational Database Management

2.4 SDLC Software Development Life Cycle)

lebih dimudahkan dalam hal kompatibilitas website pada smartphone dengan

2.6 JAVA SCRIPT

Tabel 2. 1Tag - Tag pada HTML

5 <p>...</p> Untuk membuat paragraf

Untuk membuat judul pada dokumen

8 <b>…</b> Untuk Bold, yaitu berfungsi membuat

12 <img> Untuk menampilkan gambar pada

15 <th>…</th> Untuk membuat header pada tabel

16 <tr>…</tr> Untuk membuat baris pada tabel

17 <td>…<td> Untuk membuat kolom pada tabel

18 <form>…</form> Untuk membuat form yang dapat di

2.8.1 Use Case Diagram

Gambar 2. 1 Contoh Use Case Diagram

Tabel 2. 2Use Case Diagram

Simbol Nama Keterangan

objek yang lainnya

Simbol Nama Keterangan

2.8.2 Activity Diagram

Gambar 2. 2 Contoh Activity Diagram

Tabel 2. 3Simbol Simbol Activity Diagram

Gambar Nama Keterangan

Gambar 2. 2 Contoh Class Diagram

Gambar Nama Keterangan

Realization Operasi yang benar-benar dilakukan

Gambar Nama Keterangan

2.9 Struktur Navigasi

2.9.1 Struktur Navigasi Linear

Gambar 2. 3 Contoh Navigasi

2.9.2 Struktur Navigasi Hirarki

Gambar 2. 4 Contoh Navigasi Hirarki

2.9.3 Struktur Navigasi Non-Linear

Gambar 2. 5 Contoh Navigasi Non-Linear

Gambar 2. 6 Contoh Navigasi Campuran

2.10. Black Box Testing